:root{
    --background: #F8FAFC;
    --surface: #FFFFFF;
    --text: #111827;
    --secondary: #4B5563;
    --accent: #2563EB;
}
html{
    scroll-behavior: smooth;
}
header{
    position:sticky;
    top:0;
    z-index:1000;

    display:flex;
    justify-content:space-between;
    align-items:center;

    height:80px;
    padding:0 8%;

    background:rgba(255,255,255,.8);
    backdrop-filter:blur(12px);
}
.logo img{
    margin-top: -5.9rem;
    height: 150px;
    width:auto;
    display:block;
    transform: scale(1.4);
    transform-origin: left center;
}
nav{
    margin-left: auto;
}
nav a:hover{
    color: var(--text);
    
}
nav ul{
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 2rem;
    
       
}
nav a{
    text-decoration: none;
    color:var(--secondary);
    transition:color .3s ease;
}
.menu-toggle{

    display:none;

    background:none;

    border:none;

    font-size:2rem;

    cursor:pointer;

}


body{
  background:var(--background);
  color: var(--text);
  font-family: "Poppins", sans-serif;
  margin: 0;
}


.hero-section{
    min-height: calc(100vh - 80px);
    scroll-margin-top:70px;
    background: var(--surface);
    padding: 2rem 8%;
    display:flex ;
    align-items: center;
    gap: 4rem;
    
}
.hero-section h3{
    font-size: 1rem;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
}
.hero-section h1{
    font-size:clamp(2.4rem,6vw,3.5rem);
    margin-bottom: 0.8rem;
}
.hero-section h2{
    font-size:clamp(1.1rem,3vw,1.5rem);
    color: var(--secondary);
    margin-bottom: 1.8rem;
}
.hero-section p{
    max-width: 700px;
    line-height: 1.8;
    margin-bottom: 1.9rem;
}
.hero-btn{
    display: flex;
    gap: 1.5rem;
}
.hero-content{
    flex: 1;
}
.hero-image{
    flex: 1;
    justify-content: center;
    display:flex;
    align-items: center;
}
.hero-image img{
    width:min(100%,450px);
    object-fit: cover;
    border-radius: 50%;
    
}
.btn{
    display: inline-block;
    background: var(--accent);
    color: white;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color .3s, transform .2s;
    

}
.btn:hover{
    background: #1D4ED8;
    transform: translateY(-2px);
}


h1{
    font-size:1.5rem;
}

.abt-section{
    background: var(--surface);
    padding: 5rem 8%;
}
.abt-section h2{
    text-align: center;
    margin-bottom: 2.5rem;
    font-size:clamp(1.8rem,4vw,2.5rem);
}
.abt-content{
    max-width: 850px;
    margin: 0 auto;
    transition:.35s ease;
}
.abt-content p{
    text-align: justify;
    line-height: 1.9;
    margin-bottom: 1.5rem;
}

.steps-section{
    background: var(--surface);
    padding: 5rem 8%;
    
}
.steps-section h2{
    text-align: center;
    margin-bottom: 2.5rem;
    font-size: 2rem;
}
.steps-section p{
    max-width: 850px;
    margin: 0 auto;
    text-align: justify;
    line-height: 1.9;
    margin-bottom: 1.5rem;

}
.timeline{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:3rem;
}
.timeline::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(-50%);
    width:2px;
    height:100%;
    background:#d1d5db;
    
}
.timeline::after{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(-50%);
    width:4px;
    height:var(--progress,0%);
    background:#2563eb;
    border-radius:100px;

    transition:height .08s linear;

    z-index:2;
}
.timeline-dot{
    position:absolute;

    left:50%;
    top:10px;

    transform:translateX(-50%);

    width:18px;
    height:18px;

    background:#fff;

    border:3px solid #2563eb;

    border-radius:50%;

    z-index:5;

    transition:.35s;
}
.timeline-item{
    display:grid;
    grid-template-columns:1fr 120px 1fr;
    align-items:start;
    position:relative;
    transition:.35s ease;
}


.timeline-item.active .timeline-content{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(37,99,235,.18);
    
}

.timeline-item.active .timeline-dot{
    background:#2563eb;
    transform:translateX(-50%) scale(1.2);
}

.timeline-item.active .timeline-year{
    color:#2563eb;
}

.timeline-year{
    grid-column:2;
    justify-self:center;
    font-weight:700;
    margin-top: -1.2rem;
    background: white;
    padding: 0 .4rem;
    z-index:3;
}

.timeline-content{
    background:#fff;
    padding:1.5rem;
    border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.timeline-content ul{
    display: flex;
    flex-direction: column;
    gap:0.75rem;
    padding-left: 1.5rem;

}

.timeline-item:nth-child(odd) .timeline-content{
    grid-column:1;
    text-align:left;
}

.timeline-item:nth-child(even) .timeline-content{
    grid-column:3;
}

.work-section{
    background: var(--surface);
    padding: 5rem 8%;
}
.work-section h2{
    text-align: center;
    font-size: 2rem;
}
.projects{
    display:grid ;
    margin-top: 3rem;
    justify-content: center;
    gap: 3rem;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)) ;
}
.project-card{
    display: flex;
    flex-direction: column;
    background: white;
    padding:1.5rem;
    border-radius: 1rem;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.project-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.project-img{
    display: block;
    width: 100%;
    height: 250px;
    object-fit: cover;
}
.project-card h3{
    text-align: center;
    margin: 1 rem 0 0.5rem;
    
}
.project-card p{
   text-align: justify;
   margin-bottom: 1rem;
   
    
}
.tech-stack{
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.tech-stack span{
    background:blanchedalmond;
    color: var(--text);
    padding: 0.35rem 0.75rem;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 500;
}
.project-links{
    display: flex;
    gap: 1rem;
    margin-top: auto;
    width:100%;
}
.project-links a{
    flex: 1;
    padding:0.75rem 1rem;
    background-color: var(--accent);
    color: #fff;
    border-radius: 0.5rem;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    transition: background-color .3s, transform .2s; 
}
.project-links a:hover{
    background:blue ;
    transform: translateY(-2px);
}

.skill-section{
    background-color: var(--surface);
    padding:5rem 8%;
}
.skill-section h2{
    text-align: center;
    font-size: 2rem;
}
.marquee{
    overflow:hidden;
    width:100%;
    padding:1rem 0;
    
}
.marquee-track{
    display: flex;
    align-items: center;
    gap: 2.5rem;
    width: max-content;
    animation-duration:10s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
}
.skill-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-width: 90px;
    flex-shrink: 0;
    cursor:pointer;   
    
}
.skill-card img{
    width: 60px;
    height: 60px;
    object-fit: contain;
    transition: transform .3s ease;
}
.skill-card span{
    font-size: .9rem;
    font-weight: 600;
    color: var(--text);
}
.skill-card:hover img{
    transform: scale(1.12);
}
.marquee-left .marquee-track{
    animation-name:scrollLeft;
}

.marquee-right .marquee-track{
    animation-name:scrollRight;
}
.skill-section:hover .marquee-track{
    animation-play-state:paused;
}
@keyframes scrollLeft{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}

@keyframes scrollRight{

    from{
        transform:translateX(-50%);
    }

    to{
        transform:translateX(0);
    }

}

.motto-section{
    background: var(--surface);
    padding: 6rem 8%;
    text-align: center;
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
}
.motto-section h2{
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
}
.motto-section blockquote{
    max-width: 750px;
    margin:0 auto;
    font-size: 1.6rem;    
    line-height: 1.8;
    font-style:italic;
    font-weight: 500;
    color: var(--secondary);
    position: relative;
}
.pub-section{
    background: var(--surface);
    padding: 5rem 8%;
}
.pub-section h2{
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
}
.pub-layout{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:4rem;
}
.pub-content{
   flex: 1;
}
.pub-content h3{
    font-size: 1.4rem;
}
.pub-content p{
    font-size: 1.1rem;
}
.book-img{
    flex: 0 0 280px;
}
.book-img img{
    width:100%;
    display:block;
    border-radius:12px;
}

.lead-section{
    background: var(--surface);
    padding: 6rem 8%;
}
.lead-section h2{
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
}
.events{
    display:grid ;
    margin-top: 3rem;
    justify-content: center;
    gap: 3rem;
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)) ;
}
.event-card{
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden ;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    transition:transform .3s ease;
}
.event-card:hover{
    transform: translateY(-8px);
    box-shadow:0 12px 20px rgba(0,0,0,.15);
}
.event-card img{
    width: 100%;
    height: 220px;
    object-fit:cover;
    display: block;
    object-position:center;
    border-radius: 12px 12px 0 0;
}
.event-content{
    flex: 1;
    padding: 1.25rem;
}
.event-content h3{
    margin:0 0 0.75rem;
}
.event-content p{
    line-height: 1.7;
    color: var(--secondary);
}
.event-meta{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    padding:0 1.25rem 1rem;
}
.event-meta span{
    background:blanchedalmond;
    padding:.35rem .75rem;
    border-radius:999px;
    font-size:.85rem;
}
.event-link{
    text-align: center;
    padding:1.25rem;
    margin-top:auto;
    display:flex;
    align-self:center;
    
}
.event-link a{
    flex: 1;
    padding:0.75rem 1rem;
    background-color: var(--accent);
    color: #fff;
    border-radius: 0.5rem;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    transition: background-color .3s, transform .2s; 
}
.event-link a:hover{
    background:blue ;
    transform: translateY(-2px);
}

.mission-section{
    background: var(--surface);
    padding: 8rem 8%;
    text-align: center;
}
.mission-section h2{
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
}
.mission-quote{
    max-width: 800px;
    margin: 0 auto;
    font-size: 2rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.7;
    color: var(--secondary);
    position: relative;
}
.mission-quote::before{
    content:"❝";
    font-size:4rem;
    color:rgba(37,99,235,.15);
    position:absolute;
    left:-2rem;
    top:-2rem;
}

.mission-quote::after{
    content:"❞";
    font-size:4rem;
    color:rgba(37,99,235,.15);
    position:absolute;
    right:-2rem;
    bottom:-3rem;
}

.connect-section{
    background: var(--surface);
    padding: 5rem 8%;
}
.connect-section h2{
    text-align:center;
    font-size:2rem;
    margin-bottom:3rem;
}
.connect-container{
    display: flex;
    justify-content: space-between;
    align-items:flex-start;
    gap:4rem;
}
.connect-info{
    flex: 1;
}
.connect-info h3{
    font-size:1.8rem;
    margin-bottom:1rem;
}
.connect-info p{
    color:var(--secondary);
    line-height:1.8;
    max-width:500px;
}
.contact-form{
    flex: 1;
}
.contact-form{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:1.25rem;
}
.contact-form label{
    font-weight:600;
    margin-bottom:-.8rem;
}
.contact-form input,
.contact-form textarea{
    width:100%;
    padding:1rem;
    border:1px solid #D1D5DB;
    border-radius:12px;
    font:inherit;
    background:#fff;
    outline:none;
    transition:border-color .3s,
               box-shadow .3s;
}
.contact-form input:focus,
.contact-form textarea:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 4px rgba(37,99,235,.15);
}
.contact-form textarea{
    resize:vertical;
    min-height:180px;
}
.contact-form button{
   align-self:flex-start;
   
}

h2{
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

h3{
    font-size: 1.1rem;
}

p{
    font-size: 1rem;
    line-height: 1.5;
}

.section{
    background: var(--surface);
    padding: 5%
}



a{  
    color: var(--accent);
    transition: 0.3s;
}

footer{
    background: var(--secondary);
    color: #FFFFFF;
    padding: 4rem 8%;
    
    
}
.footer-content{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1100px;
    
   
}
footer a{
    color:#D1D5DB;
    text-decoration: none;
    
}
footer a:hover{
    color: white;
    padding-left:4px;
}
.footer-content h2{
    margin-bottom: 1rem;
}
.footer-content p{
    line-height: 1.7;
}
footer ul{
    padding:0;
    list-style: none;   
}
footer li{
    margin-bottom: 0.6rem;
}
hr{
    border: none;
    height: 1px;
    background: #6B7280;
}

/* Desktop */

/* Laptop */
@media (max-width:1200px) {
    .abt-section{
        padding:5rem 8%;
    }
}

/* Tablet */
@media (max-width: 992px){
    .projects{
        gap:2rem;
    }
    .pub-layout{

        gap:2.5rem;

    }

    .book-img{

        flex:0 0 240px;

    }
    .connect-container{

        gap:3rem;

    }

}

/* Large Phone */
@media (max-width:768px){
    .menu-toggle{

        display:block;

    }

    nav{

        position:absolute;

        top:80px;

        left:0;

        width:100%;

        background:white;

        display:none;

        padding:1rem 0;

    }

    nav.active{

        display:block;

    }

    nav ul{

        flex-direction:column;

        align-items:center;

        gap:1.5rem;

    }
    .hero-section{

        flex-direction:column-reverse;

        text-align:center;

        gap:2.5rem;

        padding:4rem 5%;

    }

    .hero-content{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .hero-section h1{
        
        font-size:2.5rem;

    }

    .hero-section h2{

        font-size:1.2rem;

    }
    .hero-section h3{
        margin-bottom:0rem;
    }

    .hero-section p{
        
        max-width:100%;

    }

    .hero-btn{

        flex-direction:column;

        width:100%;

        max-width:320px;
       
    }

    .btn{

        text-align:center;

    }

    .hero-image img{

        max-width:280px;

    }
    .abt-section{

        padding:2rem 5%;

    }
    .steps-section{
        padding:2rem 5%;
    }

    .steps-section h2{
        font-size:clamp(1.8rem,4vw,2.5rem);
    }

    .steps-section p{
        text-align:left;
    }

    .timeline::before,
    .timeline::after{

        left:18px;

    }

    .timeline-item{

        display:block;

        padding-left:50px;

    }

    .timeline-dot{

        left:18px;

    }

    .timeline-year{

        margin:0 0 .8rem 0;

        padding:0;

        background:none;

        justify-self:start;

        color:var(--text);

    }

    .timeline-content{

        margin:0;

    }

    .timeline-item:nth-child(odd) .timeline-content,

    .timeline-item:nth-child(even) .timeline-content{

        grid-column:auto;

    }
    .work-section{
        padding:4rem 5%;
    }

    .work-section h2{
        font-size:clamp(1.8rem,4vw,2.5rem);
    }

    .projects{

        gap:2rem;

        grid-template-columns:1fr;

    }

    .project-card{

        padding:1.25rem;

    }

    .project-img{

        height:220px;

    }

    .project-card p{

        text-align:left;

    }

    .skill-section{
        padding: 2rem 5%;
    }

    .motto-section{
        padding: 2rem;
    }

    .pub-section{

        padding:2rem 5%;

    }

    .pub-layout{

        flex-direction:column-reverse;

        text-align:center;

        gap:2rem;

    }

    .pub-content{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .pub-content h3{

        font-size:1.3rem;

    }

    .pub-content p{

        font-size:1rem;

    }

    .book-img{

        flex:none;

        width:220px;

    }

    .lead-section{
        padding: 2rem 5%;
    }
    .mission-section{
        padding: 4rem;
    }

    .connect-section{

        padding:4rem 5%;

    }

    .connect-container{

        flex-direction:column;

        gap:2.5rem;

    }

    .connect-info{

        text-align:center;

    }

    .connect-info p{

        margin:auto;

    }

    .contact-form{

        width:100%;

    }
    .footer-content{

        flex-direction:column;

        gap:2.5rem;

    }




}

/* Small Phone */
@media (max-width:576px){
     .project-img{

        height:180px;

    }

    .project-card{

        padding:1rem;

    }

    .project-links{
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }

    .project-links a{
        width: 100%;
        flex: none;
        box-sizing: border-box;
    }
    .book-img{

        width:180px;

    }

    .pub-content h3{

        font-size:1.15rem;

    }
    .connect-section h2{

        font-size:1.8rem;

    }
    .connect-info{

        max-width:500px;
    
        text-align:center;

    }

    .connect-info h3{

        font-size:1.7rem;
        line-height:1.3;

    }
    .connect-info p{

        max-width:500px;
        width:100%;
        margin:0;
        text-align:center;
        line-height:1.8;


    }
    .connect-section{
        padding: 2rem;
    }
    .contact-form{
        width:100%;
        max-width:320px;
        margin:0 auto;
    }

    .contact-form input,
    .contact-form textarea{

        padding:0.9rem;
        width: 95%;

    }

    .contact-form button{

        width:95%;

        align-self:center;

    }
    footer{

        padding:3rem 5%;

    }

    .footer-content{

        align-items:center;

        text-align:center;

        gap:2rem;

    }

    .about,
    .links,
    .connect{

        width:100%;

    }

    .footer-content h2{

        margin-bottom:.75rem;

    }

    footer li{

        margin-bottom:.5rem;

    }

    footer hr{

        margin:2rem 0 1rem;

    }

    footer > p{

        text-align:center;

    }
}