@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700&display=swap');


/*==================================================
CSS VARIABLES
====================================================*/

:root{

    --primary:#0C6B73;
    --primary-light:#27C5D6;
    --secondary:#06383D;

    --white:#ffffff;
    --black:#111111;

    --text:#555555;

    --background:#F7F9FB;

    --border:#E5E7EB;

    --shadow:0 15px 45px rgba(0,0,0,.08);

    --radius:18px;

    --transition:.4s ease;

    --container:1400px;

}


/*==================================================
RESET
====================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    background:var(--white);
    color:var(--text);
}

img{

    display:block;
    width:100%;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

button{

    border:none;
    outline:none;
    cursor:pointer;
    background:none;

}


/*==================================================
TYPOGRAPHY
====================================================*/


h1,h2,h3,h4,h5,h6{

    font-family:'Montserrat',sans-serif;
    color:#111;
    font-weight:800;

}

h1{

    font-size:clamp(3rem,7vw,6.5rem);
    line-height:1;

}

h2{

    font-size:clamp(2.2rem,4vw,4rem);

}

h3{

    font-size:1.5rem;

}

p{

    line-height:1.8;
    font-size:1rem;

}


/*==================================================
COMMON
====================================================*/

.container{

    width:min(92%,var(--container));
    margin:auto;

}

section{

    padding:20px 0;
    position:relative;

}

.section-heading{
    
    margin-top: 20px;

    margin-bottom:70px;

}

.section-heading span{

    font-size:.85rem;
    letter-spacing:3px;
    color:var(--primary);
    text-transform:uppercase;
    font-weight:600;

}

.section-heading h2{

    margin-top:12px;

    color: #000000;

}
.section-heading p{
    color: #000000;

}
.center{

    text-align:center;

}


/*==================================================
BUTTONS
====================================================*/

.primary-btn{

    
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:16px 38px;

    background:var(--primary);

    color:#fff;

    border-radius:100px;

    transition:var(--transition);

    font-weight:600;

}

.primary-btn:hover{

    background:#084d53;
    transform:translateY(-4px);

}

.secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 38px;

    border:2px solid var(--primary);

    color:var(--primary);

    border-radius:100px;

    transition:var(--transition);

    font-weight:600;

}

.secondary-btn:hover{

    background:var(--primary);
    color:#fff;

}


/*==================================================
LOADER
====================================================*/

#loader{

    position:fixed;

    inset:0;

    background:#001722;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    z-index:99999;

    overflow:hidden;

}

.ocean-gradient{

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top,
    rgba(0,255,255,.12),
    transparent 45%),
    linear-gradient(#00111d,#022c39);

}


.loader-logo{

    width:180px;

    margin-top:50px;

    opacity:0;

    animation:logoReveal 1s forwards;
    animation-delay:1s;

}
.sonar-circle{

    position:absolute;

    width:200px;
    height:200px;

    border-radius:50%;

    border:2px solid rgba(39,197,214,.5);

    animation:sonar 1.5s infinite;

}

.sonar-2{

    animation-delay:.4s;

}

.sonar-3{

    animation-delay:1s;

}


/*==================================================
ANIMATIONS
====================================================*/

@keyframes sonar{

    0%{

        transform:scale(.2);
        opacity:1;

    }

    100%{

        transform:scale(4);
        opacity:0;

    }

}

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}

@keyframes bubbles{

    from{

        transform:translateY(0);
        opacity:0;

    }

    20%{

        opacity:1;

    }

    to{

        transform:translateY(-120vh);
        opacity:0;

    }

}

@keyframes rays{

    from{

        transform:translateX(-100px);

    }

    to{

        transform:translateX(100px);

    }

}

@keyframes logoReveal{

    to{

        opacity:1;

    }

}


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

.navbar{
    background-color:#06383D;
    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:10000;

    padding:22px 0;

    transition:.4s;

}

.navbar.scrolled{

    backdrop-filter:blur(18px);

    background:rgba(0,17,29,.78);

}

.navbar .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

    width:170px;

}

.logo-box{

    width:170px;

    height:52px;

    border-radius:8px;

}

.nav-links{

    display:flex;

    gap:45px;

}

.nav-links a{

    color:#fff;

    font-weight:500;

    position:relative;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#27C5D6;

    transition:.35s;

}

.nav-links a:hover::after,
.nav-links .active::after{

    width:100%;

}

.support-btn{

    background:#fff;

    color:#0C6B73;

    padding:14px 34px;

    border-radius:100px;

    font-weight:600;

    transition:.35s;

}

.support-btn:hover{

    transform:translateY(-4px);

}
/*==================================================
HERO SECTION
====================================================*/
.hero-home{

    position:relative;

    min-height:100vh;

    overflow:hidden;

    display:flex;
    align-items:center;

}
.hero-video{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.02);

}

.hero-home .hero-overlay{
    
    width:100%;
    min-width:0;
    max-width:100%;

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,20,35,.45),
        rgba(0,20,35,.60)
    );

    z-index:-1;

}

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;
     width:100%;
    min-width:0;
    max-width:100%;

    background:
    linear-gradient(
    rgba(0,16,27,.55),
    rgba(0,16,27,.70)),
    url("../assets/images/hero/hero-bg.webp")
    center/cover no-repeat;

}
.hero1{

    min-height:100vh;

    display:flex;

    align-items:center;
 width:100%;
    min-width:0;
    max-width:100%;

    background:
    linear-gradient(
    rgb(255, 255, 255),
    rgb(255, 255, 255)),
    center/cover no-repeat;

}
.hero1-overlay{

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top,
    rgba(255, 255, 255, 0.18)0.18),
    transparent 45%;

    pointer-events:none;

}

.hero1-container{
    

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}

.hero1-content{

    color:#000000;

    z-index:5;

}
.hero1-subtitle{

    color:#5a4040;

    text-transform:uppercase;

    letter-spacing:4px;

    margin-bottom:20px;

    font-size:.9rem;

}

.hero1 h1{

    color:#000000;

    margin-bottom:28px;

}

.hero1 h1 span{

    display:block;

    color:#000000;

}

.hero1-description{

    color:#4b4343;

    max-width:620px;

    margin-bottom:45px;

    font-size:1.1rem;

}
.hero1-image{

    width:100%;
    min-width: 0;
    max-width: 100%;

    border-radius:40px;

    position:relative;

    animation:submarineFloat1 6s ease-in-out infinite;

}
.hero1-image img{
    height: 100%;
    width: 100%;
    border-radius: 50px;
}
.hero1-buttons{

    display:flex;

    gap:22px;

    flex-wrap:wrap;

}
.hero-overlay{

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top,
    rgba(39,197,214,.18),
    transparent 45%);

    pointer-events:none;

}

.hero-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}

.hero-content{

    color:#fff;

    z-index:5;

}

.hero-subtitle{

    color:#C9F6FF;

    text-transform:uppercase;

    letter-spacing:4px;

    margin-bottom:25px;

    font-size:.9rem;

}

.hero-home h1,.hero h1{
    
    color: #ffffff;

    margin-bottom:28px;

}

.hero-home h1 span,.hero h1 span{

    display:block;

    color:#58e1f3;

}

.hero-description{

    color:#E6F8FB;

    max-width:620px;

    margin-bottom:45px;

    font-size:1.1rem;

}

.hero-buttons{

    display:flex;

    gap:22px;

    flex-wrap:wrap;

}

.hero-image{

    width:100%;

    height:700px;

    border-radius:40px;

    border:2px dashed rgba(255,255,255,.18);

    position:relative;

    animation:submarineFloat 6s ease-in-out infinite;

}
.scroll-indicator{
    position:absolute;

    bottom:45px;

    left:50%;

    transform:translateX(-50%);

    color:#fff;

    font-size:.9rem;

    letter-spacing:3px;

    animation:scrollIndicator 2.2s infinite;

}

.hero-scroll{
    position:absolute;

    bottom:45px;

    left:50%;

    transform:translateX(-50%);

    color:#fff;

    font-size:.9rem;

    letter-spacing:3px;

    animation:scrollIndicator 2.2s infinite;

}

@keyframes submarineFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-25px);

    }

}

@keyframes scrollIndicator{

    0%,100%{

        transform:translate(-50%,0);

        opacity:1;

    }

    50%{

        transform:translate(-50%,12px);

        opacity:.5;

    }

}


/*==================================================
INFINITE MARQUEE
====================================================*/

.marquee-section{

    padding:35px 0;

    background:#0B4A52;

    overflow:hidden;

}

.marquee{

    width:100%;

    overflow:hidden;

}

.marquee-track{

    display:flex;

    width:max-content;

    animation:marqueeMove 22s linear infinite;

}

.marquee-track span{

    font-family:"Montserrat";

    color:#ffffff;

    font-size:2rem;

    font-weight:700;

    letter-spacing:4px;

    white-space:nowrap;

    padding-right:120px;

}

@keyframes marqueeMove{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}


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

.about-preview{

    background:#fff;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.about-image{
    padding-top: 0;
    width:100%;
    min-width:0;
    max-width:100%;

    height:400px;

    border-radius:50%;

    background:#ffffff;

}
.about-image img{
    height: 100%;
    width: 100%;
    border-radius:50px;

}
.about-image1{

    width:100%;

    height:400px;

    border-radius:50px;

    background:#ffffff;

}
.about-image1 img{
    height: 100%;
    width: 100%;
    border-radius:50px;

}

.about-content p{
    color: #000000;
    margin-bottom:40px;

    font-size:1.05rem;

}


/*==================================================
JOURNEY
====================================================*/

.journey{

    background:#F7F9FB;

    overflow:hidden;

}

.background-title{

    position:absolute;

    top:60px;

    left:0;

    width:max-content;

    font-size:7rem;

    font-family:"Montserrat",sans-serif;

    font-weight:900;

    color:rgba(0,0,0,.03);

    white-space:nowrap;

    animation:backgroundScroll 28s linear infinite;

}

@keyframes backgroundScroll{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

.timeline{

    position:relative;

    width:100%;

    margin-top:90px;

}

.timeline-line{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    width:4px;

    height:100%;

    background:#27C5D6;

}

.timeline-item{

    width:50%;

    padding:35px 60px;

    position:relative;

}

.timeline-item.left{

    left:0;

    text-align:right;

}

.timeline-item.right{

    left:50%;

}

.timeline-icon{

    width:74px;

    height:74px;

    background:#0C6B73;

    border-radius:50%;

    position:absolute;

    top:38px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.timeline-item.left .timeline-icon{

    right:-37px;

}

.timeline-item.right .timeline-icon{

    left:-37px;

}

.timeline-content{

    background:#fff;

    border-radius:22px;

    padding:35px;

    box-shadow:var(--shadow);

    transition:.35s;

}
.timeline-content p{
    color: #000000;
}

.timeline-content:hover{

    transform:translateY(-8px);

}

.timeline-content h3{

    margin-bottom:18px;

}


/*==================================================
TEAM PREVIEW
====================================================*/

.team-preview{

    background:#fff;

}

.team-grid{

    display:grid;

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

    gap:35px;

}

.team-card{

    overflow:hidden;

    border-radius:26px;

    box-shadow:var(--shadow);

    transition:.35s;

    background:#fff;

}

.team-card:hover{

    transform:translateY(-10px);

}

.team-image{

    width:100%;

    height:250px;

    background:#8eaa0eab;
}
.team-image img{
    height: 100%;
    width: 100%;
}
.team-info h3{
    font-size: 0.5cm;
    padding-left: 20px;
    color:#08474d
}
.team-info p{
    padding-left: 20px;
    font-size: 0.3cm;
    color: #000000;
}

.section-button{

    text-align:center;

    margin-top:70px;

}
/*==================================================
SPONSORS
====================================================*/

.sponsors{

    background:var(--background);

    overflow:hidden;

}

.sponsor-slider{

    position:relative;

    width:100%;

    overflow:hidden;

    margin-top:60px;

    padding:20px 0;

}

.sponsor-track{

    display:flex;

    align-items:center;

    gap:60px;

    width:max-content;

    animation:sponsorMove 28s linear infinite;

}

.sponsor-track:hover{

    animation-play-state:paused;

}

.sponsor-logo{

    width:220px;

    height:120px;

    border-radius:20px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s;

}

.sponsor-logo:hover{

    transform:translateY(-8px);

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

}

@keyframes sponsorMove{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}
.features-grid{

    display:grid;

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

    gap:30px;

    align-items:stretch;

    margin-top:60px;

}

.feature-card{
    width: 100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;

    background:#fff;

    border-radius:24px;

    padding:30px;

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

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-8px);

}

.feature-image{
    margin-left: 20px;
    margin-bottom: 20px;
    width:87%;
    height:190px;

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

    background:#f3f5f7;
    border-radius:20px;
    overflow:hidden;

}

.feature-image img{

    max-width:100%;
    max-height:100%;

    width:auto;
    height:auto;

    object-fit:contain;

}
@media (max-width:992px){

.features-grid{

    grid-template-columns:1fr;

}

}

.feature-card h3{

    font-family:"Montserrat",sans-serif;

    font-size:1.6rem;

    font-weight:700;

    color:#111;

    margin-bottom:15px;

}

.feature-card p{

    font-family:"Poppins",sans-serif;

    color:#666;

    line-height:1.8;

}
/*==================================================
CTA SECTION
====================================================*/

.cta-section{

    background:linear-gradient(135deg,#0C6B73,#0A5057);

    color:#fff;

}

.cta-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:80px;

    padding:80px;

    border-radius:36px;

    overflow:hidden;

    position:relative;

}

.cta-wrapper::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    top:-220px;

    right:-180px;

}

.cta-content{

    max-width:760px;

    z-index:2;

}

.cta-content span{

    display:block;

    letter-spacing:3px;

    font-size:.9rem;

    margin-bottom:20px;

    color:#C7F7FF;

}

.cta-content h2{

    color:#fff;

    margin-bottom:24px;

}

.cta-content p{

    color:#E8FFFF;

    max-width:620px;

}

.cta-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    z-index:2;

}

.cta-section .secondary-btn{

    color:#fff;

    border-color:#fff;

}

.cta-section .secondary-btn:hover{

    background:#fff;

    color:var(--primary);

}


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

.footer{

    background:#071A24;

    color:#cfd9de;

    padding:100px 0 35px;

}

.footer-top{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:70px;

}

.footer-column h4{

    color:#fff;

    margin-bottom:28px;

    font-size:1.2rem;

}

.footer-column p{

    color:#bfcfd6;

}

.footer-column ul{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.footer-column ul li{

    color:#bfcfd6;

}

.footer-column ul li a{

    color:#bfcfd6;

    transition:.3s;

}

.footer-column ul li a:hover{

    color:#27C5D6;

}

.footer-logo{

     width:100%;
    max-width:180px;
    height:60px;

    margin-bottom:25px;

}

.footer-socials{

    display:flex;

    gap:18px;

    margin-top:30px;

}

.footer-socials a{

    width:48px;

    height:48px;

    border-radius: 50%;

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

    transition:.35s;

}

.footer-socials a:hover{

    background:var(--primary);

    transform:translateY(-4px);

}

.footer-kct-logo{

    width:100%;
    max-width:300px;
    height:auto;
    margin-top: 20px;



}

.footer-divider{

    width:100%;

    height:1px;

    background:rgba(255,255,255,.08);

    margin:60px 0 30px;

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.footer-bottom p{

    font-size:.95rem;

    color:#9fb2bc;

}


/*==================================================
SCROLL REVEAL
====================================================*/

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:1s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}


/*==================================================
CUSTOM SCROLLBAR
====================================================*/

::-webkit-scrollbar{

    width:0;

}

::-webkit-scrollbar-track{

    background:#eef3f5;

}

::-webkit-scrollbar-thumb{

    background:#0C6B73;

    border-radius:0x;

}

::-webkit-scrollbar-thumb:hover{

    background:#08474d;

}


/*==================================================
SELECTION
====================================================*/

::selection{

    background:#27C5D6;

    color:#fff;

}


/*==================================================
UTILITY CLASSES
====================================================*/

.hidden{

    display:none;

}

.text-center{

    text-align:center;

}

.mt-60{

    margin-top:60px;

}

.mb-60{

    margin-bottom:60px;

}

.w-100{

    width:100%;

}
/*==========================
MOBILE MENU PAGE
===========================*/

.mobile-menu-page{
    margin:0;
    background:#06383D;
    font-family:"Poppins",sans-serif;
    overflow:hidden;
}

.mobile-menu{

    width:100%;
    min-height:100vh;

    display:flex;
    flex-direction:column;

    justify-content:space-between;

    background:
    radial-gradient(circle at top,
    rgba(39,197,214,.15),
    transparent 45%),
    linear-gradient(180deg,#06383D,#04272B);

    padding:35px 28px;

}

.mobile-header{

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

}

.mobile-logo .logo-box{

    width:160px;
    height:55px;

    border-radius:10px;

}

.close-menu{

    font-size:2.5rem;

    color:white;

    text-decoration:none;
}

.mobile-navigation{

    flex:1;

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

}

.mobile-navigation ul{

    width:100%;
    padding:50px;
    align-items: center;

    list-style:none;

}

.mobile-navigation li{

    margin:25px 0;

}

.mobile-navigation a{

    text-decoration:none;

    color:white;

    font-family:"Montserrat";

    font-size:2rem;

    font-weight:700;

    transition:.3s;

}

.mobile-navigation a:hover{

    color:#27C5D6;
    padding-left:12px;

}

.mobile-support-wrapper{

    display:flex;
    justify-content:center;

    margin-bottom:45px;

}

.mobile-support-wrapper .primary-btn{

    width:280px;
    height:65px;

    font-size:1.1rem;

}

.mobile-socials{

    display:flex;

    justify-content:center;

    gap:22px;

    margin-bottom:35px;

}

.social-icon{

    width:55px;
    height:55px;

    border-radius:50%;

    transition:.3s;

}

.social-icon:hover{

    background:#27C5D6;
    transform:translateY(-5px);

}

.mobile-footer{

    text-align:center;

    color:#9CDCE5;

    letter-spacing:3px;

    font-size:.8rem;

}
@media(max-width:768px){

.feature-grid1{

    grid-template-columns:1fr;

    gap:25px;

}

.feature-card1{
    

    padding:25px;

}

.feature-image{

    aspect-ratio:16/10;

}

.feature-card1 h3{

    font-size:1.4rem;

}

}
.exploded-image{
    justify-content: center;
    margin: auto;
}
/*==================================
HOME HERO
==================================*/

.hero-home{

    position:relative;

    min-height:100vh;

    overflow:hidden;

    display:flex;
    align-items:center;

}
.hero-home .hero-video{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:-2;

}

.hero-home .hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,20,35,.45),
        rgba(0,20,35,.60)
    );

    z-index:-1;

}
.alumni-grid{

    display:none;

    margin-top:60px;

}

.alumni-grid.show{

    display:grid;

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

    gap:30px;

}

.empty-alumni{

    text-align:center;

    max-width:650px;

    margin:70px auto;

}

.mission-vision{

    display:grid;

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

    gap:35px;

    padding:100px 0;

}

.mission-card{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:flex-start;

    gap:20px;

    margin-left: 20px;

    padding:40px;

    border-radius:24px;

    background:linear-gradient(145deg,#0A2430,#071A24);

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

    transition:.35s ease;

}
.vision-card{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:flex-start;

    gap:20px;

    margin-right: 20px;

    padding:40px;

    border-radius:24px;

    background:linear-gradient(145deg,#0A2430,#071A24);

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

    transition:.35s ease;
}

.mission-card::before,
.vision-card::before{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    top:-90px;
    right:-90px;

    border-radius:50%;

    background:rgba(39,197,214,.05);

}

.mission-card:hover,
.vision-card:hover{

    transform:translateY(-8px);

    border-color:#27C5D6;

    box-shadow:0 18px 45px rgba(0,0,0,.35);

}

.mission-icon,
.vision-icon{

    width:75px;
    height:75px;

    min-width:75px;

    border-radius:18px;

    background:rgba(39,197,214,.12);

    display:flex;

    justify-content:center;

    align-items:center;

}

.mission-icon img,
.vision-icon img{

    width:40px;

    height:40px;

    object-fit:contain;

}

.mission-content,
.vision-content{

    position:relative;

    z-index:2;

}

.mission-content span,
.vision-content span{

    display:inline-block;

    color:#27C5D6;

    font-size:.85rem;

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:12px;

}

.mission-content h3,
.vision-content h3{

    color:#ffffff;

    font-size:2rem;

    font-family:"Montserrat",sans-serif;

    margin-bottom:18px;

}

.mission-content p,
.vision-content p{

    color:#C6D3D9;

    line-height:1.9;

    font-size:1rem;

}
@media (max-width:768px){

    .mission-vision{

        grid-template-columns:1fr;

        gap:40px;

    }

    .mission-card,
    .vision-card{

        flex-direction:column;

        text-align:center;

        align-items:center;

    }

}
html,
body{
    width:100%;
}
*,
*::before,
*::after{
    box-sizing:border-box;
}
/*==================================================
CONTACT SECTION
====================================================*/

.contact-section{

    background:#F6F8FA;

}

.contact-grid{

    display:grid;

    grid-template-columns:1.4fr .9fr;

    gap:45px;

    margin-top:70px;

    align-items:stretch;

}

/*==================================================
CONTACT FORM
====================================================*/

.contact-form-card{

    background:#ffffff;

    padding:45px;

    border-radius:28px;

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

}

.contact-form-card h3{

    font-family:"Montserrat",sans-serif;

    font-size:2rem;

    color:#062B34;

    margin-bottom:35px;

}

.contact-form-card form{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.input-row{

    display:grid;

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

    gap:20px;

}

.input-group{

    display:flex;

    flex-direction:column;

}

.input-group label{

    font-family:"Poppins",sans-serif;

    font-size:.95rem;

    font-weight:600;

    color:#42545D;

    margin-bottom:10px;

}

.input-group input,
.input-group textarea{

    width:100%;

    padding:16px 20px;

    border:1px solid #D7E3E8;

    border-radius:14px;

    outline:none;

    background:#FBFCFD;

    font-family:"Poppins",sans-serif;

    font-size:.95rem;

    transition:.35s;

}

.input-group textarea{

    resize:none;

    min-height:170px;

}

.input-group input:focus,
.input-group textarea:focus{

    border-color:#27C5D6;

    box-shadow:0 0 0 4px rgba(39,197,214,.12);

}

.contact-form-card .primary-btn{

    margin-top:15px;

    width:220px;

}

/*==================================================
CONTACT INFO CARD
====================================================*/

.contact-info-card{

    background:linear-gradient(180deg,#083C47,#062B34);

    color:#fff;

    padding:45px;

    border-radius:28px;

    position:relative;

    overflow:hidden;

}

.contact-info-card::before{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    border-radius:50%;

    background:rgba(255,255,255,.04);

    top:-120px;
    right:-120px;

}

.contact-info-card h3{

    font-family:"Montserrat",sans-serif;

    font-size:2rem;

    margin-bottom:18px;

    position:relative;

}

.contact-info-card>p{

    color:#C7E4E9;

    line-height:1.8;

    margin-bottom:40px;

    position:relative;

}
/*==================================================
INFO BOXES
====================================================*/

.contact-info{

    display:flex;

    flex-direction:column;

    gap:28px;

    position:relative;

    z-index:2;

}

.info-box{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:18px 0;

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

}

.info-box:last-child{

    border-bottom:none;

}

.info-icon{

    width:60px;
    height:60px;

    min-width:60px;

    border-radius:16px;

    background:rgba(255,255,255,.08);

    display:flex;

    justify-content:center;
    align-items:center;

    backdrop-filter:blur(10px);

    transition:.35s;

}

.info-box:hover .info-icon{

    background:#27C5D6;

    transform:translateY(-4px);

}

.info-box span{

    display:block;

    font-size:.85rem;

    color:#9FD8E1;

    letter-spacing:1px;

    margin-bottom:6px;

    text-transform:uppercase;

}

.info-box h5{

    font-family:"Montserrat",sans-serif;

    font-size:1.05rem;

    font-weight:600;

    line-height:1.8;

    color:#ffffff;

}

/*==================================================
SOCIAL ICONS
====================================================*/

.contact-socials{

    display:flex;

    gap:18px;

    margin-top:40px;

    position:relative;

    z-index:2;

}

.contact-socials a{

    width:52px;
    height:52px;

    border-radius:50%;

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

    display:flex;

    justify-content:center;
    align-items:center;

    transition:.35s;

}

.contact-socials a:hover{

    background:#27C5D6;

    border-color:#27C5D6;

    transform:translateY(-5px);

}

/*==================================================
CONTACT CARD HOVER
====================================================*/

.contact-form-card,
.contact-info-card{

    transition:.35s ease;

}

.contact-form-card:hover,
.contact-info-card:hover{

    transform:translateY(-8px);

}

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

@media (max-width:992px){

.contact-grid{

    grid-template-columns:1fr;

    gap:35px;

}

.contact-info-card{

    order:-1;

}

.contact-form-card,
.contact-info-card{

    padding:35px;

}

.input-row{

    grid-template-columns:1fr;

}

}

@media (max-width:480px){

.contact-grid{

    margin-top:45px;

}

.contact-form-card,
.contact-info-card{

    padding:25px;

    border-radius:22px;

}

.contact-form-card h3,
.contact-info-card h3{

    font-size:1.6rem;

}

.contact-form-card .primary-btn{

    width:100%;

}

.info-icon{

    width:52px;
    height:52px;

    min-width:52px;

}

.contact-socials{

    justify-content:center;

}

.form-buttons{

    display:flex;
      justify-content:flex-start;

    gap:20px;

    margin-top:20px;

}

.form-buttons .primary-btn,
.form-buttons .secondary-btn{

    width:180px;      /* Fixed width */
    height:58px;      /* Fixed height */

    border-radius:50px;

    padding:0;

    flex:none;

}}
/*==========================
STATS
===========================*/

.stats-section{

    padding:60px 0;

}

.stats-grid{

    display:grid;

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

    background:#ffffff3b;

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

    border-radius:24px;

    overflow:hidden;

}

.stat-card{

    text-align:center;

    padding:35px 18px;

    position:relative;

}

.stat-card:not(:last-child){

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

}

.stat-icon{

    width:58px;

    height:58px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#ffffff;

    font-size:1.5rem;


    margin-bottom:20px;

}

.stat-card h2{

    color:#1bd7f2;

    font-size:3rem;

    font-weight:700;

    margin-bottom:12px;

}

.stat-card p{

    color:#000000;

    text-transform:uppercase;

    font-size:.82rem;

    letter-spacing:1px;

    line-height:1.6;

}
.mobile-features1{

    padding:80px 0;

}

.features-title1{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    margin-bottom:12px;

}

.features-title1 span{

    width:45px;

    height:2px;

    background:var(--primary);

}

.features-title1 h3{

    color:#fff;

    letter-spacing:3px;

    font-size:1rem;

}

.swipe-text{

    text-align:center;

    color:#7ddff0;

    margin-bottom:30px;

    font-size:.8rem;

    letter-spacing:1px;

}
.feature-slider1{

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    scrollbar-width:none;

}

.feature-slider1::-webkit-scrollbar{

    display:none;

}
.features-title1 h3{
  color: #000000;
}
.feature-track1{
    
    display:flex;

    gap:20px;

}

.feature-card1{

    min-width:40%;

    min-height: 50%;

    scroll-snap-align:center;

    background:#08232d;

    border-radius:24px;

    padding:35px;

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

    position:relative;

}
.feature-number{

    position:absolute;

    right:25px;

    top:20px;

    font-size:4rem;

    opacity:.08;

    font-weight:700;

}

.feature-card1 img{

    width:70px;

    margin-bottom:25px;

}

.feature-card1 h2{

    color:white;

    margin-bottom:18px;

}

.feature-card1 p{

    color:#b8c8cf;

    line-height:1.8;

}
/*==========================
BOTTOM NAVIGATION
===========================*/

.bottom-nav{

    position:fixed;

    bottom:18px;

    left:50%;

    transform:translateX(-50%);

    width:92%;

    max-width:420px;

    height:72px;

    background:rgba(6,32,43,.88);

    backdrop-filter:blur(20px);

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

    border-radius:22px;

    display:flex;

    justify-content:space-around;

    align-items:center;

    z-index:9999;

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

}

.nav-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

    text-decoration:none;

    color:#9bb8c1;

    transition:.35s;

}

.nav-item i{

    font-size:1.25rem;

}

.nav-item span{

    font-size:.72rem;

    font-family:"Poppins",sans-serif;

}

.nav-item.active{

    color:#27C5D6;

}

.nav-item.active i{

    transform:translateY(-3px);

}

.nav-item:hover{

    color:#27C5D6;

}
.kumaraguru-section{
    margin-top: 20px;
}
/*==================================================
COUNTDOWN
====================================================*/

.countdown-card{
    
    float: right;

    padding:22px;
    padding-left: 50px;
    padding-right: 50px;

    border-radius:22px;

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(18px);

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

}

.countdown-title{

    text-align:center;

    color:var(--text-accent);

    font-size:.8rem;

    letter-spacing:2px;

    font-weight:600;

    margin-bottom:18px;

}

.countdown-grid{
    

    display:grid;

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

    gap:15px;

}

.countdown-box{

    text-align:center;

}

.countdown-box h2{

    font-size:2rem;

    color:#fff;

    font-weight:700;

    margin-bottom:6px;

}

.countdown-box span{

    font-size:.75rem;

    color:#9EB6C2;

    letter-spacing:1px;

}
.countdown-status{

    margin-top:18px;

    text-align:center;

    color:#C6D3D9;

    font-size:.9rem;

    letter-spacing:1px;

    font-weight:500;

    opacity:.9;

}
/*=========================================
        JOURNEY GALLERY
=========================================*/

.journey-gallery-section{
    padding:100px 0;
    background:#fff;
}

.journey-gallery-section .container{
    width:min(1200px,92%);
    margin:auto;
}

.section-heading{
    text-align:center;
    margin-bottom:60px;
}

.section-tag{
    display:inline-block;
    color:#00AEEF;
    font-weight:600;
    letter-spacing:2px;
    font-size:14px;
    margin-bottom:15px;
}

.section-heading h2{
    font-family:'Montserrat',sans-serif;
    font-size:clamp(2rem,4vw,3.2rem);
    font-weight:700;
    color:#111;
    margin-bottom:20px;
    line-height:1.2;
}

.section-heading p{
    max-width:700px;
    margin:auto;
    font-family:'Poppins',sans-serif;
    color:#666;
    line-height:1.8;
    font-size:16px;
}

.journey-gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.gallery-item{
    overflow:hidden;
    border-radius:20px;
    cursor:pointer;
    background:#f5f5f5;
}

.gallery-item img{
    width:100%;
    height:320px;
    object-fit:cover;
    display:block;
    transition:.5s ease;
}

.gallery-item:hover img{
    transform:scale(1.08);
}
/*=========================================
        EISR SECTION
=========================================*/

.competition-section{
    padding:100px 0;
    background:#fff;
}

.competition-content{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:60px;
    align-items:center;
}

.competition-image{
    overflow:hidden;
    border-radius:20px;
}

.competition-image img{
    width:100%;
    display:block;
    border-radius:20px;
    object-fit:cover;
}

.competition-text .section-tag{
    color:#00AEEF;
    font-size:14px;
    letter-spacing:2px;
    font-weight:600;
    margin-bottom:15px;
    display:inline-block;
}

.competition-text h2{
    font-family:'Montserrat',sans-serif;
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.2;
    margin-bottom:25px;
    color:#111;
}

.competition-text p{
    font-family:'Poppins',sans-serif;
    color:#666;
    line-height:1.9;
    margin-bottom:18px;
    font-size:16px;
}

.competition-text strong{
    color:#111;
}.competition-video{
    color:#E8FFFF ;
    margin-top: 20px;
    width:100%;
    overflow:hidden;
    border-radius:20px;
    position:relative;
}

.competition-video video{
    width:100%;
    height:300px;
    display:block;
    object-fit: cover;
    border-radius:20px;
}/*=========================================
            LATEST STORIES
==========================================*/

.news-section{
    padding:100px 0;
    background:#fff;
}

.news-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.news-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    transition:.35s;
    border:1px solid #ececec;
}

.news-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.news-card img{
    width:100%;
    height:230px;
    object-fit:cover;
    display:block;
}

.news-content{
    padding:25px;
}

.news-date{
    color:#0099ff;
    font-size:13px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
}

.news-content h3{
    margin:15px 0;
    font-size:24px;
    font-family:'Montserrat',sans-serif;
    line-height:1.3;
    color:#111;
}

.news-content p{
    color:#666;
    line-height:1.8;
    margin-bottom:25px;
}

.news-link{
    color:#0099ff;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.news-link:hover{
    letter-spacing:.5px;
}