.hero{

    min-height:90vh;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:80px;

    padding:40px 0;

}
.profile-container{

    position:relative;

    width:330px;

    height:330px;

}
.profile-glow{


    position:absolute;


    inset:0;


    border-radius:50%;


    background:
    linear-gradient(
    45deg,
    #38BDF8,
    #8B5CF6
    );


    filter:blur(30px);


    opacity:.7;


    animation:pulse 3s infinite;


}
.profile-image{


    position:absolute;


    inset:20px;


    border-radius:50%;


    overflow:hidden;


    border:5px solid var(--surface);


    z-index:2;


}


.profile-image img{


    width:100%;


    height:100%;


    object-fit:cover;


    
}
.floating-badge{


    position:absolute;


    background:rgba(30,41,59,.85);


    


    border:1px solid rgba(255,255,255,.1);


    padding:10px 18px;


    border-radius:30px;


    color:white;


    font-size:.9rem;


    box-shadow:var(--shadow);


    z-index:5;


    white-space:nowrap;


}
.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:30px;

}


.btn{

    position:relative;

    display:flex;

    align-items:center;

    gap:10px;

    padding:15px 30px;

    border-radius:50px;

    font-weight:600;

    overflow:hidden;

    transition:.4s;

    cursor:pointer;

}
.btn-cv{

    background:linear-gradient(
        135deg,
        #38BDF8,
        #0284C7
    );


    color:#0F172A;

    box-shadow:

    0 10px 30px
    rgba(56,189,248,.35);

}
.btn-cv::before{


    content:"";


    position:absolute;


    top:0;


    left:-100%;


    width:100%;


    height:100%;


    background:
    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.5),
    transparent
    );


    transition:.5s;


}


.btn-cv:hover::before{


    left:100%;



}
.btn-cv:hover{


    transform:translateY(-5px);


    box-shadow:

    0 15px 40px
    rgba(56,189,248,.6);


}
.btn-projects{


    border:

    2px solid var(--primary);


    color:white;


    background:transparent;


}
.btn-projects:hover{


    background:var(--primary);


    color:#0F172A;


    transform:

    translateY(-5px);


    box-shadow:

    0 10px 30px
    rgba(56,189,248,.4);


}
.btn span{


    font-size:1.2rem;


}


.btn:hover span{


    transform:translateY(-3px);


}
.footer{


    margin-top:100px;


    padding:50px 0 20px;


    background:#020617;


    border-top:

    1px solid rgba(255,255,255,.1);


}
.footer-container{


    width:min(1200px,90%);


    margin:auto;


    display:flex;


    justify-content:space-between;


    align-items:center;


}
.footer-brand h3{


    font-size:1.5rem;


    color:white;


}


.footer-brand h3:first-letter{


    color:var(--primary);


}



.footer-brand p{


    margin-top:10px;


    color:var(--text-secondary);


    
}
.footer-links{


    display:flex;


    gap:25px;


}


.footer-links a{


    color:#CBD5E1;


    transition:.3s;


}


.footer-links a:hover{


    color:var(--primary);


    transform:

    translateY(-5px);


}
.footer-bottom{


    text-align:center;


    margin-top:40px;


    padding-top:20px;


    border-top:

    1px solid rgba(255,255,255,.08);


    color:#94A3B8;


    font-size:.9rem;


}
h2{
    color: #0284C7;
}
h1{
   font-size: 3em;
   margin-top: 2em;
   margin-bottom: 1em;
}
.education-section{

    padding:100px 0;

}

.section-header{

    text-align:center;

    max-width:700px;

    margin:auto;

    margin-bottom:80px;

}

.section-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    background:rgba(56,189,248,.12);

    color:var(--primary);

    font-weight:600;

    margin-bottom:20px;

}

.section-header h2{

    font-size:2.7rem;

    margin-bottom:20px;

}

.section-header p{

    color:var(--text-secondary);

    line-height:1.8;

}
.timeline{

    position:relative;

    max-width:1100px;

    margin:auto;


}
.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    width:4px;

    height:100%;

    background:linear-gradient(

        to bottom,

        #38BDF8,

        #8B5CF6

    );

    transform:translateX(-50%);

}
.timeline-item{

    position:relative;

    width:50%;

    margin-bottom:70px;

}
.timeline-item.left{

    left:0;

    padding-right:50px;

}
.timeline-item.right{

    left:50%;

    padding-left:50px;

}
.timeline-content{

    background:var(--surface);

    padding:30px;

    border-radius:20px;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:var(--shadow);

    transition:.35s;

}
.timeline-content:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

}
.year{

    display:inline-block;

    margin-bottom:15px;

    color:var(--primary);

    font-weight:bold;

}
.timeline-content h3{

    margin-bottom:10px;

}

.timeline-content h4{

    margin-bottom:15px;

    color:var(--text-secondary);

    font-weight:500;

}

.timeline-content p{

    color:var(--text-secondary);

    line-height:1.8;

}
.timeline-item::before{

    content:"";

    position:absolute;

    top:35px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--primary);

    border:4px solid var(--background);

    z-index:2;

}
.timeline-item.left::before{

    right:-9px;

}
.timeline-item.right::before{

    left:-9px;

}

.skills-section{

    padding:100px 0;

}

.skills-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

    margin-top:60px;

}
.skill-card{

    background:var(--surface);

    border-radius:20px;

    padding:30px;

    border:1px solid rgba(255,255,255,.08);

    transition:.35s;

    box-shadow:var(--shadow);

}
.skill-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

}
.skill-card h3{

    margin-bottom:25px;

    color:var(--primary);

}
.skill-list{

    display:flex;

    flex-wrap:wrap;

    gap:15px;


}
.skill-list span{

    padding:10px 18px;

    border-radius:50px;

    background:rgba(56,189,248,.1);

    border:1px solid rgba(56,189,248,.25);

    transition:.3s;

    cursor:default;
}
.projects-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(400px,1fr));

    gap:35px;

    margin-top:60px;

}

.project-card{

    background:var(--surface);

    border-radius:20px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.08);

    transition:.4s;

    box-shadow:var(--shadow);

}

.project-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

}

.project-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px;

}

.project-top a{

    font-size:1.5rem;

    color:var(--primary);

}

.slider{

    position:relative;

    aspect-ratio:16/9;

    overflow:hidden;

}

.slide{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:0;

    transition:.8s;

}

.slide.active{

    opacity:1;

}

.description{

    padding:20px 20px 0;

}

.toggle-description{

    margin:15px 20px;

    background:none;

    border:none;

    color:var(--primary);

    cursor:pointer;

}

.more-text{

    display:none;

    padding:0 20px 20px;

    color:var(--text-secondary);

    line-height:1.7;

}

.more-text.show{

    display:block;

}

.tech-stack{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    padding:20px;

}

.tech-stack span{

    background:rgba(56,189,248,.15);

    padding:8px 15px;

    border-radius:30px;

    transition:.3s;

}

.tech-stack span:hover{

    background:var(--primary);

    color:#0F172A;

}
.contact-section{

    padding:100px 0;
    
    }
    
    
    .contact-container{
    
    max-width:1100px;
    
    margin:auto;
    
    display:grid;
    
    grid-template-columns:1fr 1fr;
    
    gap:50px;
    
    }
  
    .contact-card{


        display:flex;
        
        align-items:center;
        
        gap:20px;
        
        
        padding:20px;
        
        
        background:var(--surface);
        
        
        border-radius:15px;
        
        
        border:1px solid rgba(255,255,255,.08);
        
        
        margin-bottom:20px;
        
        
        transition:.3s;
        
        
        }
        
        
        
        .contact-card:hover{
        
        
        transform:translateX(10px);
        
        
        border-color:var(--primary);
        
        
        }
        
        
        
        .contact-card i{
        
        
        font-size:2rem;
        
        
        color:var(--primary);
        
        
        }
        .contact-form{


            background:var(--surface);
            
            
            padding:35px;
            
            
            border-radius:20px;
            
            
            border:1px solid rgba(255,255,255,.08);
            
            
            display:flex;
            
            
            flex-direction:column;
            
            
            gap:20px;
            
            
            }
            .contact-form input,
            .contact-form textarea{
            
            
            background:#020617;
            
            
            border:1px solid #334155;
            
            
            padding:15px;
            
            
            border-radius:10px;
            
            
            color:white;
            
            
            font-size:1rem;
            
            
            outline:none;
            
            
            }
            
            
            
            .contact-form input:focus,
            .contact-form textarea:focus{
            
            
            border-color:var(--primary);
            
            
            }
            .contact-form button{


                padding:15px;
                
                
                border:none;
                
                
                border-radius:50px;
                
                
                background:linear-gradient(
                135deg,
                #38BDF8,
                #0284C7
                );
                
                
                color:#0F172A;
                
                
                font-weight:bold;
                
                
                cursor:pointer;
                
                
                transition:.3s;
                
                
                }
                
                
                
                .contact-form button:hover{
                
                
                transform:translateY(-5px);
                
                
                box-shadow:
                0 10px 30px
                rgba(56,189,248,.4);
                
                
                }