/* ================= GLOBAL ================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth;
}


body{
    font-family:'Poppins', sans-serif;
    background:#f6f9ff;
    color:#222;
    line-height:1.7;
}


img{
    max-width:100%;
    display:block;
}


a{
    text-decoration:none;
}




/* ================= NAVBAR ================= */


header{

    background:#0d47a1;

    position:sticky;

    top:0;

    z-index:1000;

}



.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 80px;

}



.logo h2{

    color:white;

    font-size:30px;

    font-weight:700;

}



.nav-links{

    display:flex;

    list-style:none;

    gap:25px;

}



.nav-links a{

    color:white;

    font-size:14px;

    font-weight:500;

    transition:.3s;

}



.nav-links a:hover{

    color:#90caf9;

}





/* ================= HERO ================= */


.hero{

    min-height:90vh;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:80px;

    background:linear-gradient(

        135deg,

        #0d47a1,

        #1976d2

    );

    color:white;

}



.hero-text{

    width:50%;

}



.hero-text h5{

    font-size:20px;

    margin-bottom:10px;

}



.hero-text h1{

    font-size:70px;

    line-height:1.1;

    font-weight:800;

}



.hero-text p{

    margin:25px 0;

    font-size:16px;

    max-width:550px;

}



.btn{

    display:inline-block;

    background:white;

    color:#0d47a1;

    padding:12px 30px;

    border-radius:30px;

    font-weight:600;

    transition:.3s;

}



.btn:hover{

    transform:translateY(-5px);

}



.hero-image img{

    width:400px;

    animation:float 3s infinite ease-in-out;

}



@keyframes float{

    50%{

        transform:translateY(-15px);

    }

}






/* ================= SECTION ================= */


section{

    padding:80px;

}



.section-title{

    text-align:center;

    margin-bottom:50px;

}



.section-title h5{

    color:#1976d2;

    font-size:18px;

}



.section-title h2{

    font-size:40px;

    color:#0d47a1;

}



.section-title p{

    color:#666;

}





/* ================= ABOUT ================= */


.about-container{

    display:flex;

    align-items:center;

    gap:50px;

}



.about-image img{

    width:300px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

}



.about-content{

    flex:1;

}



.tag{

    color:#1976d2;

    font-weight:600;

}



.about-content h2{

    font-size:38px;

    margin:15px 0;

}



.about-content h2 span{

    color:#1976d2;

}



.about-box{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin-top:30px;

}



.box{

    background:white;

    padding:20px;

    text-align:center;

    border-radius:15px;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

    transition:.3s;

}



.box:hover{

    transform:translateY(-10px);

}



.box i{

    font-size:30px;

    color:#1976d2;

}

/* ================= CARD ================= */


.card-container{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.card{

    background:white;

    padding:30px;

    border-radius:20px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.3s;

}



.card:hover{

    transform:translateY(-10px);

    box-shadow:0 15px 30px rgba(0,0,0,.15);

}



.card i{

    font-size:35px;

    color:#1976d2;

    margin-bottom:20px;

}



.card h3{

    margin-bottom:15px;

    color:#0d47a1;

}



.card p{

    color:#555;

    font-size:14px;

}





/* ================= TIMELINE ================= */


.timeline{

    max-width:900px;

    margin:auto;

}



.timeline-card{

    background:white;

    padding:30px;

    margin-bottom:25px;

    border-left:6px solid #1976d2;

    border-radius:15px;

    box-shadow:0 10px 20px rgba(0,0,0,.08);

}



.timeline-card h3{

    color:#0d47a1;

}





/* ================= SMARTINTERN SHOWCASE ================= */


.project-image{

    width:85%;

    margin:0 auto 50px;

    background:white;

    padding:35px;

    border-radius:30px;

    text-align:center;

    box-shadow:0 15px 35px rgba(13,71,161,0.15);

    transition:.3s;

}



.project-image:hover{

    transform:translateY(-8px);

}



.project-image img{

    width:100%;

    max-width:1000px;

    height:auto;

    margin:auto;

    border-radius:20px;

    object-fit:contain;

    box-shadow:0 8px 20px rgba(0,0,0,.12);

}



.project-caption{

    margin-top:30px;

}



.project-caption h3{

    font-size:28px;

    color:#0d47a1;

    margin-bottom:15px;

}



.project-caption p{

    color:#555;

    font-size:16px;

    line-height:1.8;

    max-width:800px;

    margin:auto;

}





/* ================= THANK YOU ================= */


#thankyou{

    background:#f6f9ff;

    padding:80px;

}



.thankyou-container{

    max-width:900px;

    margin:auto;

    text-align:center;

    background:white;

    padding:50px;

    border-radius:25px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}



.thankyou-container h2{

    color:#0d47a1;

    font-size:45px;

    margin-bottom:20px;

}



.thankyou-container p{

    color:#555;

    font-size:16px;

    line-height:1.9;

    margin-bottom:20px;

}



.thankyou-container strong{

    color:#1976d2;

}





/* ================= FOOTER ================= */


footer{

    background:#0d47a1;

    color:white;

    text-align:center;

    padding:25px;

}





/* ================= RESPONSIVE ================= */


@media(max-width:900px){


.navbar{

    padding:20px;

    flex-direction:column;

}



.nav-links{

    flex-wrap:wrap;

    justify-content:center;

}



.hero{

    flex-direction:column;

    text-align:center;

    padding:50px 20px;

}



.hero-text{

    width:100%;

}



.hero-text h1{

    font-size:50px;

}



.hero-image img{

    width:300px;

}




.about-container{

    flex-direction:column;

}



.about-box{

    grid-template-columns:repeat(2,1fr);

}



.card-container{

    grid-template-columns:1fr;

}



.project-image{

    width:100%;

    padding:20px;

}



.project-caption h3{

    font-size:22px;

}



#thankyou{

    padding:50px 20px;

}



.thankyou-container{

    padding:30px;

}



.thankyou-container h2{

    font-size:35px;

}



section{

    padding:50px 20px;

}


}