/*====================================================
        BAUET ELDERS WEBSITE V2
======================================================*/

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


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

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

html{
    scroll-behavior:smooth;
}

body{

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

    background-color:#050505;

background-image:

linear-gradient(
45deg,
rgba(255,255,255,.018) 25%,
transparent 25%,
transparent 50%,
rgba(255,255,255,.018) 50%,
rgba(255,255,255,.018) 75%,
transparent 75%,
transparent
),

linear-gradient(
-45deg,
rgba(255,255,255,.012) 25%,
transparent 25%,
transparent 50%,
rgba(255,255,255,.012) 50%,
rgba(255,255,255,.012) 75%,
transparent 75%,
transparent
);

background-size:18px 18px;

background-attachment:fixed;

    color:#fff;

    overflow-x:hidden;

}



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

:root{

    --black:#050505;

    --card:#111111;

    --border:#2b2b2b;

    --text:#ffffff;

    --paragraph:#bcbcbc;

    --lime:#76C229;

    --lime2:#9DFF3A;

    --transition:.35s;

}



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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#080808;

}

::-webkit-scrollbar-thumb{

    background:#3b3b3b;

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--lime);

}



/*==========================
    BACKGROUND GLOW
==========================*/

body::before{

    content:"";

    position:fixed;

    width:700px;

    height:700px;

    left:-250px;

    top:-250px;

    border-radius:50%;

    background:rgba(118,194,41,.10);

    filter:blur(180px);

    pointer-events:none;

    z-index:-2;

}




body::after{

    content:"";

    position:fixed;

    width:650px;

    height:650px;

    right:-250px;

    bottom:-250px;

    border-radius:50%;

    background:rgba(118,194,41,.06);

    filter:blur(180px);

    pointer-events:none;

    z-index:-2;

}



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

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:90px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 80px;

    background:rgba(5,5,5,.75);

    backdrop-filter:blur(20px);

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

    z-index:999;

}



.logo{

    display:flex;

    align-items:center;

    gap:15px;

}



.logo img{

    width:55px;

}



.logo h2{

    font-size:26px;

    font-weight:800;

    letter-spacing:2px;

}



.nav-menu{

    display:flex;

    list-style:none;

    gap:35px;

}



.nav-menu a{

    color:white;

    text-decoration:none;

    font-size:15px;

    font-weight:500;

    position:relative;

    transition:var(--transition);

}



.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--lime);

    transition:.35s;

}



.nav-menu a:hover{

    color:var(--lime2);

}



.nav-menu a:hover::after{

    width:100%;

}



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

.social-icons{

    display:flex;

    gap:18px;

}



.social-icons a{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    text-decoration:none;

    background:#111;

    border:1px solid #222;

    transition:.35s;

}



.social-icons a:hover{

    background:var(--lime);

    transform:translateY(-5px);

}



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

.hero{

    min-height:100vh;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:140px 90px 80px;

}



.hero-left{

    width:48%;

}



.small-title{

    color:var(--lime2);

    letter-spacing:3px;

    font-size:14px;

    margin-bottom:25px;

}



.small-title span{

    color:#fff;

}



.hero-left h1{

    font-size:95px;

    line-height:1;

    font-weight:900;

    text-transform:uppercase;

}



.hero-left h1 span{

    color:var(--lime);

}



.hero-left h3{

    margin-top:25px;

    color:#d5d5d5;

    letter-spacing:4px;

    font-weight:500;

}



.hero-text{

    margin-top:35px;

    color:var(--paragraph);

    line-height:2;

    width:90%;

}



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

.hero-btn{

    display:flex;

    gap:20px;

    margin-top:45px;

}


.hero-btn button{

    padding:16px 34px;

    border:none;

    border-radius:50px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    letter-spacing:1px;

    display:flex;

    align-items:center;

    gap:10px;

    transition:.35s;

}


.hero-btn button:first-child{

    background:var(--lime);

    color:#fff;

}


.hero-btn button:first-child:hover{

    background:var(--lime2);

    transform:translateY(-6px);

    box-shadow:0 15px 35px rgba(118, 194, 41, 0.35);

}


.hero-btn .outline{

    background:transparent;

    color:#fff;

    border:1px solid #444;

}


.hero-btn .outline:hover{

    border-color:var(--lime);

    background:rgba(118, 194, 41, 0.08);

    transform:translateY(-6px);

}



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

.hero-right{

    width:52%;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    margin-top:-80px;

}


.hero-right img{

    width:100%;

    max-width:650px;

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

    filter:drop-shadow(0 30px 60px rgba(210,40,40,.20));

}


@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}




/*====================================================
                ABOUT SECTION
======================================================*/
.about-section{
    padding:130px 90px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}



/*====================================================
                TEAM IMAGE
======================================================*/

.about-left{

    overflow:hidden;

    border-radius:25px;

}


.about-left img{

    width:100%;

    display:block;

    transition:.45s;

}


.about-left:hover img{

    transform:scale(1.05);

}



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

.section-tag{

    display:inline-block;

    color:var(--lime);

    letter-spacing:3px;

    font-size:14px;

    margin-bottom:20px;

}

.about-center{

    width:100%;

}

.about-center h2{

    font-size:52px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:30px;

}

.about-center p{

    max-width:700px;

    color:var(--paragraph);

    line-height:2;

    font-size:16px;

    margin-bottom:22px;

    text-align:justify;

}

.about-center h3{

    color:var(--lime);

    font-size:24px;

    margin-top:25px;

    font-weight:600;

}



.about-section{

    padding:130px 90px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}



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

.project-section{

    padding:130px 90px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}


.project-left h2{

    font-size:55px;

    margin:20px 0;

    font-weight:800;

}


.project-left ul{

    list-style:none;

    margin-top:30px;

}


.project-left ul li{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

    font-size:18px;

    color:var(--paragraph);

}


.project-left ul li i{

    color:var(--lime);

}


.project-left button{

    margin-top:40px;

    padding:16px 36px;

    border:none;

    border-radius:50px;

    background:var(--lime);

    color:#fff;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:10px;

    font-size:15px;

    font-weight:600;

    transition:.35s;

}


.project-left button:hover{

    background:#9DFF3A;

    transform:translateY(-6px);

    box-shadow:0 15px 40px rgba(118, 194, 41, 0.30);

}



/*====================================================
                PROJECT IMAGE
======================================================*/

.project-image{

    display:flex;

    justify-content:center;

    align-items:center;

}


.project-image img{

    width:100%;

    max-width:650px;

    transition:.45s;

    filter:drop-shadow(0 25px 55px rgba(118, 194, 41, 0.18));

}


.project-image img:hover{

    transform:scale(1.04);

}

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

.journey-section{

    padding:130px 90px;

}


.section-header{

    text-align:center;

    margin-bottom:70px;

}


.section-header span{

    color:var(--lime);

    letter-spacing:3px;

    font-size:14px;

    font-weight:600;

}


.section-header h2{

    margin-top:15px;

    font-size:58px;

    font-weight:800;

}


.gallery-grid{

    display:grid;

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

    gap:25px;

}


.gallery-card{

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

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

    border-radius:22px;

    overflow:hidden;

    transition:.4s;

    cursor:pointer;

}


.gallery-card:hover{

    transform:translateY(-12px);

    border-color:var(--lime);

    box-shadow:0 25px 55px rgba(118, 194, 41, 0.18);

}


.gallery-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.45s;

}


.gallery-card:hover img{

    transform:scale(1.08);

}


.gallery-card h4{

    padding:22px;

    text-align:center;

    font-size:18px;

}



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

.sponsors-section{

    padding:130px 90px;

}


.sponsor-grid{

    display:grid;

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

    gap:30px;

}


.sponsor-card{

    height:180px;

    display:flex;

    justify-content:center;

    align-items:center;

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

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

    border-radius:20px;

    transition:.35s;

}


.sponsor-card:hover{

    border-color:var(--lime);

    transform:translateY(-10px);

    box-shadow:0 18px 40px rgba(118, 194, 41, 0.18);

}


.sponsor-card img{

    width:180px;

    max-width:80%;

    filter:grayscale(100%);

    opacity:.7;

    transition:.35s;

}


.sponsor-card:hover img{

    filter:none;

    opacity:1;

}



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

.contact-section{

    padding:130px 90px;

    display:grid;

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

    gap:50px;

}


.contact-section h2{

    font-size:32px;

    margin-bottom:30px;

}


.contact-left p{

    color:var(--paragraph);

    line-height:2.2;

    margin-bottom:15px;

}


.contact-left i{

    color:var(--lime);

    margin-right:10px;

}


.contact-icons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}


.contact-icons a{

    width:60px;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    text-decoration:none;

    color:#fff;

    font-size:22px;

    background:#111;

    border:1px solid #222;

    transition:.35s;

}


.contact-icons a:hover{

    background:var(--lime);

    transform:translateY(-8px) rotate(360deg);

}


.contact-right{

    text-align:center;

}


.contact-right img{

    width:220px;

    border-radius:15px;

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

}



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

.footer{

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

    padding:35px 20px;

    text-align:center;

    background:#050505;

}


.footer p{

    color:#8d8d8d;

    letter-spacing:1px;

    font-size:15px;

}



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

.hero,
.about-section,
.project-section,
.journey-section,
.sponsors-section,
.contact-section{

    animation:fadeUp 1s ease;

}


@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}




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

@media screen and (max-width:1200px){

.hero{

    flex-direction:column;

    text-align:center;

    gap:70px;

}

.hero-left,
.hero-right{

    width:100%;

}

.hero-left h1{

    font-size:72px;

}

.hero-text{

    width:100%;

}

.hero-btn{

    justify-content:center;

}

.about-section{

    grid-template-columns:1fr;

    text-align:center;

}


.project-section{

    grid-template-columns:1fr;

}

.department-grid{

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

}

.gallery-grid{

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

}

.sponsor-grid{

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

}

.contact-section{

    grid-template-columns:1fr;

    text-align:center;

}

.contact-icons{

    justify-content:center;

}

}



/*====================================================
                SMALL TABLET
======================================================*/

@media screen and (max-width:992px){

.navbar{

    padding:20px 35px;

}

.nav-menu{

    gap:18px;

}

.logo h2{

    font-size:22px;

}

.hero{

    padding:150px 35px 80px;

}

.hero-left h1{

    font-size:60px;

}

.section-header h2{

    font-size:46px;

}

.about-center h2{

    font-size:44px;

}

.project-left h2{

    font-size:44px;

}

.achievement-bar{

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

}

.gallery-grid{

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

}

}



/*====================================================
                MOBILE
======================================================*/

@media screen and (max-width:768px){

.navbar{

    flex-direction:column;

    height:auto;

    padding:25px;

    gap:20px;

}

.nav-menu{

    flex-wrap:wrap;

    justify-content:center;

}

.social-icons{

    justify-content:center;

}

.hero{

    padding:170px 25px 80px;

}

.hero-left h1{

    font-size:48px;

}

.hero-left h3{

    letter-spacing:2px;

    font-size:16px;

}

.small-title{

    letter-spacing:2px;

}

.hero-btn{

    flex-direction:column;

}

.hero-btn button{

    width:100%;

    justify-content:center;

}

.achievement-bar{

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

}

.about-section{

    padding:90px 25px;

}

.project-section{

    padding:90px 25px;

}

.journey-section{

    padding:90px 25px;

}

.sponsors-section{

    padding:90px 25px;

}

.contact-section{

    padding:90px 25px;

}

.department-grid{

    grid-template-columns:1fr;

}

.gallery-grid{

    grid-template-columns:1fr;

}

.sponsor-grid{

    grid-template-columns:1fr;

}

.about-right{

    grid-template-columns:1fr;

}

}



/*====================================================
                SMALL MOBILE
======================================================*/

@media screen and (max-width:480px){

.hero-left h1{

    font-size:38px;

}

.section-header h2{

    font-size:34px;

}

.about-center h2{

    font-size:34px;

}

.project-left h2{

    font-size:34px;

}

.logo img{

    width:45px;

}

.logo h2{

    font-size:18px;

}

.nav-menu{

    gap:12px;

}

.nav-menu a{

    font-size:13px;

}

.achievement-box{

    padding:25px 10px;

}

.achievement-box h2{

    font-size:24px;

}

.info-card{

    padding:20px;

}

.info-card h2{

    font-size:28px;

}

.contact-right img{

    width:180px;

}

.footer p{

    font-size:13px;

}

}





/*====================================================
            PREMIUM POLISH (FINAL)
======================================================*/

/* Smooth Selection */

::selection{

    background:var(--lime);

    color:#fff;

}



/* Smooth Transition */

*{

    transition:
    background .35s ease,
    color .35s ease,
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;

}



/*==============================
        GLASS EFFECT
================================*/

.info-card,
.department-card,
.gallery-card,
.sponsor-card,
.achievement-box{

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

}



/*==============================
        IMAGE SHADOW
================================*/

.hero-right img,
.project-image img,
.about-left img{

    border-radius:25px;

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

}



/*==============================
        IMAGE HOVER
================================*/

.hero-right img:hover,
.project-image img:hover,
.about-left img:hover{

    transform:scale(1.03);

}



/*==============================
        BUTTON SHINE
================================*/

.hero-btn button,
.project-left button{

    position:relative;

    overflow:hidden;

}



.hero-btn button::before,
.project-left button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.35),

    transparent

    );



    transform:skewX(-25deg);

}



.hero-btn button:hover::before,
.project-left button:hover::before{

    animation:shine .8s linear;

}



@keyframes shine{

    100%{

        left:160%;

    }

}



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

.info-card,
.department-card,
.gallery-card,
.sponsor-card{

    position:relative;

}



.info-card::before,
.department-card::before,
.gallery-card::before,
.sponsor-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    padding:1px;

    background:

    linear-gradient(

    135deg,

    rgba(255,255,255,.15),

    transparent,

    rgba(118, 194, 41, 0.25)

    );



    -webkit-mask:

    linear-gradient(#fff 0 0) content-box,

    linear-gradient(#fff 0 0);



    -webkit-mask-composite:xor;

    mask-composite:exclude;

}



/*==============================
        ICON EFFECT
================================*/

.info-card i,
.department-card i,
.contact-icons a{

    transition:.4s;

}



.info-card:hover i,
.department-card:hover i{

    transform:rotate(8deg) scale(1.15);

}



.contact-icons a:hover{

    transform:translateY(-8px) scale(1.1);

}



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

.navbar{

    box-shadow:

    0 5px 25px rgba(0,0,0,.25);

}



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

section{

    position:relative;

}



/*==============================
        TITLE EFFECT
================================*/

.section-header h2,
.about-center h2,
.project-left h2{

    position:relative;

}



.section-header h2::after,
.about-center h2::after,
.project-left h2::after{

    content:"";

    position:absolute;

    bottom:-15px;

    left:0;

    width:80px;

    height:4px;

    background:var(--lime);

    border-radius:20px;

}



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

.footer{

    overflow:hidden;

}



.footer::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:1px;

    background:

    linear-gradient(

    90deg,

    transparent,

    var(--lime),

    transparent

    );

}



/*==============================
        SCROLL ANIMATION
================================*/

html{

    scroll-behavior:smooth;

}



/*==============================
        PERFORMANCE
================================*/

img{

    max-width:100%;

    display:block;

}



button{

    outline:none;

}



a{

    text-decoration:none;

}


.hidden{

    opacity:0;

    transform:translateY(70px);

}

.show{

    opacity:1;

    transform:translateY(0);

    transition:all .9s ease;

}

.show{

.active{

    color:var(--lime) !important;

}

.active::after{

    width:100% !important;

}

}



/*==============================
        RIPPLE EFFECT
===============================*/

button{

    position:relative;

    overflow:hidden;

}

.ripple{

    position:absolute;

    width:12px;

    height:12px;

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

    border-radius:50%;

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

    animation:ripple .6s linear;

}

@keyframes ripple{

    from{

        width:0;

        height:0;

        opacity:1;

    }

    to{

        width:350px;

        height:350px;

        opacity:0;

    }

}



/*==============================
        TOP BUTTON
===============================*/

.top-btn{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--lime);

    color:white;

    font-size:22px;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9999;

}

.top-show{

    opacity:1;

    visibility:visible;

}

.top-btn:hover{

    transform:translateY(-8px);

}



/*==============================
        LOADED
===============================*/

.loaded{

    animation:pageLoad .8s ease;

}

@keyframes pageLoad{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


/*====================================================
            MOBILE MENU BUTTON
======================================================*/

.menu-toggle{

    display:none;

    width:45px;

    height:45px;

    border-radius:50%;

    background:#111;

    border:1px solid #333;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    color:#fff;

    font-size:22px;

    transition:.35s;

}


.menu-toggle:hover{

    background:var(--lime);

    transform:rotate(90deg);

}



/*====================================================
            NAVBAR MOBILE RESPONSIVE
======================================================*/


@media screen and (max-width:768px){


    .menu-toggle{

        display:flex;

    }


    .navbar{

        flex-direction:row;

        height:80px;

        padding:15px 25px;

    }


    .nav-menu{

        position:absolute;

        top:80px;

        left:0;

        width:100%;

        background:rgba(5,5,5,.95);

        backdrop-filter:blur(20px);

        flex-direction:column;

        align-items:center;

        gap:25px;

        padding:35px 0;


        transform:translateY(-120%);

        opacity:0;

        pointer-events:none;

        transition:.45s;

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

    }



    .nav-menu.active{

        transform:translateY(0);

        opacity:1;

        pointer-events:auto;

    }



    .social-icons{

        display:none;

    }



}


/*====================================================
            PREMIUM NAVBAR POLISH
======================================================*/


.logo img{

    filter:drop-shadow(0 0 15px rgba(118, 194, 41, 0.45));

}


.logo h2{

    background:linear-gradient(
        90deg,
        #fff,
        #76c229
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}



/* Active link */

.nav-menu a.active{

    color:var(--lime);

}



.nav-menu a.active::after{

    width:100%;

}



/* Social premium */


.social-icons a:hover{

    box-shadow:

    0 0 20px rgba(118, 194, 41, 0.5);

}



/* Mobile menu animation */


@media screen and (max-width:768px){


    .nav-menu li{

        opacity:0;

        transform:translateY(-20px);

        transition:.35s;

    }



    .nav-menu.active li{

        opacity:1;

        transform:translateY(0);

    }



    .nav-menu.active li:nth-child(1){

        transition-delay:.1s;

    }


    .nav-menu.active li:nth-child(2){

        transition-delay:.15s;

    }


    .nav-menu.active li:nth-child(3){

        transition-delay:.2s;

    }


    .nav-menu.active li:nth-child(4){

        transition-delay:.25s;

    }


    .nav-menu.active li:nth-child(5){

        transition-delay:.3s;

    }


    .nav-menu.active li:nth-child(6){

        transition-delay:.35s;

    }


    .nav-menu.active li:nth-child(7){

        transition-delay:.4s;

    }


}

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

.team-section{

    padding:130px 90px;

}



.leader-card{

    width:80%;

    margin:0 auto 70px;

    padding:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:35px;

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

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

    border-radius:25px;

    backdrop-filter:blur(18px);

    transition:.4s;

}



.leader-card:hover{

    transform:translateY(-10px);

    border-color:var(--lime);

    box-shadow:0 25px 60px rgba(118, 194, 41, 0.18);

}



.leader-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(118, 194, 41, 0.12);

    color:var(--lime);

    font-size:40px;

}



.leader-card h2{

    font-size:35px;

    margin-bottom:12px;

}



.leader-card p{

    color:var(--paragraph);

    line-height:1.8;

}



/* TEAM CARDS */


.team-grid{

    display:grid;

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

    gap:30px;

}



.team-card{

    padding:40px 30px;

    text-align:center;

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

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

    border-radius:22px;

    backdrop-filter:blur(15px);

    transition:.4s;

}



.team-card:hover{

    transform:translateY(-15px);

    border-color:var(--lime);

    box-shadow:0 25px 55px rgba(118, 194, 41, 0.18);

}



.team-card i{

    font-size:45px;

    color:var(--lime);

    margin-bottom:25px;

}



.team-card h3{

    font-size:25px;

    margin-bottom:15px;

}



.team-card p{

    color:var(--paragraph);

}



/* RESPONSIVE */


@media(max-width:1200px){

    .team-grid{

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

    }

}



@media(max-width:768px){

    .team-section{

        padding:90px 25px;

    }


    .leader-card{

        width:100%;

        flex-direction:column;

        text-align:center;

    }


    .team-grid{

        grid-template-columns:1fr;

    }

}


/*===============================
        TEAM FINAL FIX
================================*/

.leader-card{

    width:80%;
    margin:0 auto 70px;

    padding:40px;

    display:flex;

    align-items:center;

    gap:35px;

    background:#0d0d0d;

    border:1px solid #333;

    border-radius:25px;

}


.team-grid{

    display:grid;

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

    gap:30px;

}


.team-card{

    background:#0d0d0d !important;

    border:1px solid #333 !important;

    padding:40px 30px !important;

    border-radius:22px !important;

}


@media(max-width:768px){

    .team-grid{

        grid-template-columns:1fr;

    }

    .leader-card{

        width:100%;

        flex-direction:column;

        text-align:center;

    }

}



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


.timeline{

    position:relative;

    max-width:900px;

    margin:auto;

    padding:20px 0;

}



.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    width:3px;

    height:100%;

    background:var(--lime);

    transform:translateX(-50%);

    box-shadow:0 0 25px rgba(118, 194, 41, 0.7);

}



.timeline-item{

    width:50%;

    padding:30px 45px;

    position:relative;

}



.timeline-item:nth-child(odd){

    left:0;

    text-align:right;

}



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

    left:50%;

}



.timeline-dot{

    position:absolute;

    top:45px;

    width:18px;

    height:18px;

    background:var(--lime);

    border-radius:50%;

    box-shadow:

    0 0 15px var(--lime),

    0 0 35px rgba(118, 194, 41, 0.7);

}



.timeline-item:nth-child(odd) .timeline-dot{

    right:-9px;

}



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

    left:-9px;

}



.timeline-content{

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

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

    border-radius:22px;

    padding:35px;

    backdrop-filter:blur(15px);

    transition:.4s;

}



.timeline-content:hover{

    transform:translateY(-10px);

    border-color:var(--lime);

    box-shadow:

    0 25px 55px rgba(118, 194, 41, 0.18);

}



.timeline-content span{

    color:var(--lime);

    font-size:18px;

    font-weight:700;

    letter-spacing:2px;

}



.timeline-content h3{

    margin:15px 0;

    font-size:25px;

}



.timeline-content p{

    color:var(--paragraph);

    line-height:1.8;

}




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


@media(max-width:768px){


    .timeline::before{

        left:15px;

    }


    .timeline-item{

        width:100%;

        left:0 !important;

        padding-left:60px;

        padding-right:20px;

        text-align:left !important;

    }


    .timeline-item .timeline-dot{

        left:6px !important;

        right:auto;

    }


}





/*====================================================
            PREMIUM SPONSOR SECTION
======================================================*/


.sponsors-section{

    padding:130px 90px;

}



.sponsor-grid{

    display:grid;

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

    gap:35px;

    max-width:1100px;

    margin:auto;

}



.sponsor-card{

    height:220px;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

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

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

    border-radius:25px;

    backdrop-filter:blur(18px);

    transition:.4s;

    overflow:hidden;

}



.sponsor-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    135deg,

    rgba(214,40,40,.15),

    transparent,

    rgba(255,255,255,.05)

    );

    opacity:0;

    transition:.4s;

}



.sponsor-card:hover::before{

    opacity:1;

}



.sponsor-card:hover{

    transform:translateY(-12px);

    border-color:var(--lime);

    box-shadow:

    0 25px 60px rgba(118, 194, 41, 0.2);

}



.sponsor-placeholder{

    text-align:center;

    position:relative;

    z-index:2;

}



.sponsor-placeholder i{

    font-size:55px;

    color:var(--lime);

    margin-bottom:20px;

}



.sponsor-placeholder h3{

    font-size:20px;

    letter-spacing:2px;

}





/*==============================
        SPONSOR MOBILE
================================*/


@media(max-width:768px){


    .sponsors-section{

        padding:90px 25px;

    }


    .sponsor-grid{

        grid-template-columns:1fr;

    }


}


/*====================================================
            PREMIUM CONTACT SECTION
======================================================*/


.contact-section{

    padding:130px 90px;

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:80px;

    align-items:center;

}



/* LEFT SIDE */


.contact-left h2{

    font-size:52px;

    font-weight:800;

    margin:20px 0 30px;

    line-height:1.2;

}



.contact-left p{

    color:var(--paragraph);

    line-height:2;

    margin-bottom:18px;

    max-width:600px;

}



.contact-left p i{

    color:var(--lime);

    margin-right:12px;

}





/* SOCIAL ICONS */


.contact-icons{

    display:flex;

    gap:20px;

    margin-top:35px;

}



.contact-icons a{

    width:55px;

    height:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

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

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

    color:white;

    font-size:22px;

    transition:.35s;

}



.contact-icons a:hover{

    background:var(--lime);

    transform:translateY(-8px);

    box-shadow:

    0 15px 35px rgba(118, 194, 41, 0.35);

}





/* RIGHT SIDE */


.contact-right{

    text-align:center;

    padding:50px 35px;

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

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

    border-radius:30px;

    backdrop-filter:blur(18px);

    transition:.4s;

}



.contact-right:hover{

    transform:translateY(-10px);

    border-color:var(--lime);

    box-shadow:

    0 25px 60px rgba(118, 194, 41, 0.18);

}



.contact-right img{

    width:220px;

    height:220px;

    object-fit:contain;

    margin:auto;

    margin-bottom:25px;

    filter:

    drop-shadow(0 20px 40px rgba(118, 194, 41, 0.3));

}



.contact-right h3{

    font-size:28px;

    margin-bottom:12px;

}



.contact-right p{

    color:var(--paragraph);

    letter-spacing:2px;

}




/*==============================
        MOBILE CONTACT
================================*/


@media(max-width:768px){


    .contact-section{

        grid-template-columns:1fr;

        padding:90px 25px;

        text-align:center;

    }


    .contact-icons{

        justify-content:center;

    }


    .contact-left h2{

        font-size:36px;

    }


}




/*====================================================
            SPONSOR PLACEHOLDER PREMIUM
======================================================*/


.sponsor-placeholder{

    text-align:center;

    color:white;

}



.sponsor-placeholder i{

    font-size:55px;

    color:var(--lime);

    margin-bottom:25px;

    transition:.4s;

}



.sponsor-placeholder h3{

    font-size:22px;

    letter-spacing:1px;

    font-weight:600;

    color:#fff;

}



.sponsor-card:hover .sponsor-placeholder i{

    transform:scale(1.2) rotate(8deg);

    text-shadow:
    0 0 25px rgba(118, 194, 41, 0.7);

}



.sponsor-card:hover .sponsor-placeholder h3{

    color:var(--lime);

}


/* Sponsor card premium glow */

.sponsor-card{

    position:relative;

    overflow:hidden;

}



.sponsor-card::after{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    background:rgba(118, 194, 41, 0.15);

    border-radius:50%;

    filter:blur(40px);

    top:-40px;

    right:-40px;

    opacity:0;

    transition:.4s;

}



.sponsor-card:hover::after{

    opacity:1;

}





/*====================================================
            PREMIUM CONTACT POLISH
======================================================*/


.contact-left h2{

    font-size:48px;

    line-height:1.2;

    margin:20px 0 30px;

}



.contact-left p{

    max-width:600px;

}



.contact-right{

    padding:45px;

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

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

    border-radius:30px;

    backdrop-filter:blur(18px);

    transition:.4s;

}



.contact-right:hover{

    transform:translateY(-12px);

    border-color:var(--lime);

    box-shadow:
    0 25px 60px rgba(118, 194, 41, 0.18);

}



.contact-right img{

    width:240px;

    margin:auto;

    filter:drop-shadow(
    0 20px 40px rgba(118, 194, 41, 0.35)
    );

}



.contact-right h3{

    margin-top:25px;

    font-size:30px;

    letter-spacing:2px;

}



.contact-right p{

    color:var(--paragraph);

    margin-top:10px;

}



.contact-icons a{

    position:relative;

    overflow:hidden;

}



.contact-icons a::before{

    content:"";

    position:absolute;

    width:0;

    height:0;

    background:rgba(118, 194, 41, 0.3);

    border-radius:50%;

    transition:.4s;

}



.contact-icons a:hover::before{

    width:100px;

    height:100px;

}




/*====================================================
                FINAL FOOTER POLISH
======================================================*/

.footer{

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:45px 20px;

    background:#050505;

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

}

.footer::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--lime),
        transparent
    );

}

.footer p{

    color:#a8a8a8;

    font-size:15px;

    letter-spacing:2px;

    transition:.35s;

}

.footer:hover p{

    color:#ffffff;

    letter-spacing:3px;

}





/*====================================================
           main PREMIUM CINEMATIC LOADER V3
======================================================*/

#loader{

    position:fixed;
    inset:0;

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

    background:#050505;

    overflow:hidden;

    z-index:999999;

    transition:1s;

}

.loader-hide{

    opacity:0;

    visibility:hidden;

}

/*=============================
        CONTENT
==============================*/

.loader-content{

    width:100%;

    position:relative;

    z-index:10;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:20px;

}

/*=============================
        LOGO
==============================*/

.loader-logo{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}

.loader-logo img{

    width:180px;

    max-width:70vw;

    display:block;

    margin:auto;

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

    filter:

        drop-shadow(0 0 20px rgba(118,194,41,.55))

        drop-shadow(0 0 40px rgba(118,194,41,.25));

}

/*=============================
        TITLE
==============================*/

.loader-content h1{

    margin-top:25px;

    color:#fff;

    font-size:52px;

    font-weight:900;

    letter-spacing:6px;

    text-transform:uppercase;

}

.loader-title{

    margin-top:14px;

    color:#76C229;

    font-size:16px;

    letter-spacing:6px;

    text-transform:uppercase;

}

/*=============================
        STATUS
==============================*/

.loader-status{

    margin-top:35px;

    color:#d6d6d6;

    letter-spacing:2px;

    font-size:14px;

}

/*=============================
        BAR
==============================*/

.loader-bar{

    width:430px;

    max-width:85%;

    height:10px;

    margin:35px auto;

    overflow:hidden;

    border-radius:100px;

    background:#111;

    border:1px solid rgba(118,194,41,.18);

}

.loader-progress{

    width:0;

    height:100%;

    border-radius:100px;

    background:linear-gradient(

        90deg,

        #76C229,

        #9DFF4D

    );

    box-shadow:

        0 0 18px #76C229,

        0 0 35px rgba(118,194,41,.5);

}

/*=============================
        PERCENT
==============================*/

.loader-bottom{

    margin-top:10px;

    color:#76C229;

    font-size:24px;

    font-weight:700;

    letter-spacing:2px;

    text-shadow:

        0 0 15px rgba(118,194,41,.7);

}

/*=============================
        GRID
==============================*/

.loader-bg-grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(118,194,41,.05) 1px,transparent 1px),

    linear-gradient(90deg,rgba(118,194,41,.05) 1px,transparent 1px);

    background-size:50px 50px;

    animation:gridMove 18s linear infinite;

}

/*=============================
        GLOW
==============================*/

.loader-glow{

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(118,194,41,.20),

        transparent 70%

    );

    filter:blur(170px);

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

}

/*=============================
        ANIMATION
==============================*/

@keyframes logoFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

@keyframes glowMove{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.2);

    }

}

@keyframes gridMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(50px);

    }

}

/*=============================
        MOBILE
==============================*/

@media(max-width:768px){

.loader-logo img{

    width:140px;

}

.loader-content h1{

    font-size:34px;

    letter-spacing:3px;

}

.loader-title{

    font-size:13px;

    letter-spacing:3px;

}

.loader-bar{

    width:85%;

}

.loader-bottom{

    font-size:20px;

}

}


/*====================================================
        PREMIUM CARBON FIBER THEME
======================================================*/

/* Carbon Background */

body{

    background:
    repeating-linear-gradient(
        45deg,
        #050505 0px,
        #050505 14px,
        #090909 14px,
        #090909 28px
    ),

    repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,.015) 0px,
        rgba(255,255,255,.015) 14px,
        transparent 14px,
        transparent 28px
    );

    background-color:#050505;

}



/* Premium Lime Glow */

body::before{

    background:
    radial-gradient(circle,
    rgba(118,194,41,.22),
    transparent 70%);

}


body::after{

    background:
    radial-gradient(circle,
    rgba(118,194,41,.12),
    transparent 70%);

}



/* Premium Cards */

.info-card,
.department-card,
.team-card,
.gallery-card,
.sponsor-card,
.achievement-box,
.leader-card{

    background:rgba(18,18,18,.82);

    border:1px solid rgba(118,194,41,.12);

}



/* Hover */

.info-card:hover,
.department-card:hover,
.team-card:hover,
.gallery-card:hover,
.sponsor-card:hover,
.achievement-box:hover,
.leader-card:hover{

    border-color:#76C229;

    box-shadow:
    0 0 30px rgba(118,194,41,.18);

}



/* Icons */

.info-card i,
.department-card i,
.team-card i,
.leader-icon,
.achievement-box i{

    color:#76C229;

}



/* Navbar */

.navbar{

    background:rgba(5,5,5,.78);

    border-bottom:1px solid rgba(118,194,41,.10);

}



/* Underline */

.nav-menu a::after{

    background:#76C229;

}



/* Buttons */

.hero-btn button:first-child,
.project-left button{

    background:#76C229;

    color:#050505;

    font-weight:700;

}



.hero-btn button:first-child:hover,
.project-left button:hover{

    background:#9DFF3A;

}



/* Outline Button */

.hero-btn .outline{

    border:1px solid #76C229;

}



.hero-btn .outline:hover{

    background:rgba(118,194,41,.08);

}



/* Titles */

.section-tag{

    color:#76C229;

}



.section-header h2::after{

    background:#76C229;

}



/* Scrollbar */

::-webkit-scrollbar-thumb{

    background:#76C229;

}

::-webkit-scrollbar-thumb:hover{

    background:#9DFF3A;

}





/*====================================================
        ULTRA PREMIUM LIME EFFECTS
======================================================*/

/* Animated Carbon Background */

body{

    background-size:80px 80px;

    animation:carbonMove 18s linear infinite;

}

@keyframes carbonMove{

    from{

        background-position:0 0,0 0;

    }

    to{

        background-position:80px 80px,-80px 80px;

    }

}



/* Premium Section Glow */

section{

    position:relative;

    overflow:hidden;

}

section::before{

    content:"";

    position:absolute;

    left:-25%;

    top:-40%;

    width:450px;

    height:450px;

    border-radius:50%;

    background:radial-gradient(
        rgba(118,194,41,.05),
        transparent 70%
    );

    filter:blur(70px);

    pointer-events:none;

    animation:floatGlow 10s ease-in-out infinite;

}

@keyframes floatGlow{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(40px);

    }

    100%{

        transform:translateY(0);

    }

}



/* Neon Border Hover */

.info-card,
.department-card,
.team-card,
.gallery-card,
.sponsor-card,
.leader-card,
.achievement-box{

    position:relative;

    overflow:hidden;

}

.info-card::after,
.department-card::after,
.team-card::after,
.gallery-card::after,
.sponsor-card::after,
.leader-card::after,
.achievement-box::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    border:1px solid transparent;

    transition:.4s;

}

.info-card:hover::after,
.department-card:hover::after,
.team-card:hover::after,
.gallery-card:hover::after,
.sponsor-card:hover::after,
.leader-card:hover::after,
.achievement-box:hover::after{

    border-color:#76C229;

    box-shadow:
        inset 0 0 25px rgba(118,194,41,.18),
        0 0 25px rgba(118,194,41,.18);

}



/* Icon Pulse */

.info-card i,
.department-card i,
.team-card i,
.achievement-box i,
.leader-icon{

    animation:pulseGlow 2.5s infinite;

}

@keyframes pulseGlow{

    0%{

        filter:drop-shadow(0 0 0px #76C229);

    }

    50%{

        filter:drop-shadow(0 0 12px #76C229);

    }

    100%{

        filter:drop-shadow(0 0 0px #76C229);

    }

}



/* Logo Glow */

.logo img{

    filter:
    drop-shadow(0 0 10px rgba(118,194,41,.5))
    drop-shadow(0 0 20px rgba(118,194,41,.25));

}



/* Image Hover */

.hero-right img,
.project-image img,
.about-left img{

    transition:.5s;

}

.hero-right img:hover,
.project-image img:hover,
.about-left img:hover{

    transform:scale(1.04) rotate(.5deg);

    filter:
        brightness(1.05)
        drop-shadow(0 0 25px rgba(118,194,41,.3));

}



/* Navbar Shadow */

.navbar{

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

}




/*====================================================
            MOUSE GLOW EFFECT
======================================================*/

.cursor-glow{

    position:fixed;

    width:260px;

    height:260px;

    border-radius:50%;

    pointer-events:none;

    left:0;
    top:0;

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

    background:radial-gradient(
        circle,
        rgba(118,194,41,.18) 0%,
        rgba(118,194,41,.08) 35%,
        transparent 75%
    );

    filter:blur(30px);

    z-index:0;

    transition:
        transform .08s linear,
        left .08s linear,
        top .08s linear;
}



.hero,
.about-section,
.team-section,
.project-section,
.journey-section,
.sponsors-section,
.contact-section,
.footer,
.navbar{

    position:relative;
    z-index:2;

}

/*====================================================
            HERO IMAGE PREMIUM
======================================================*/

.hero-right{

    perspective:1200px;

}

.hero-right img{

    transform-style:preserve-3d;

    transition:
        transform .25s ease,
        filter .35s ease;

    will-change:transform;

}




/*====================================================
            LOGO BREATHING
======================================================*/

.logo img{

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

}

@keyframes logoGlow{

    0%{

        filter:
        drop-shadow(0 0 8px rgba(118,194,41,.35));

    }

    50%{

        filter:
        drop-shadow(0 0 22px rgba(118,194,41,.8));

    }

    100%{

        filter:
        drop-shadow(0 0 8px rgba(118,194,41,.35));

    }

}

/*====================================================
        PREMIUM BUTTON HOVER
======================================================*/

.hero-btn button,
.project-left button{

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.hero-btn button:hover,
.project-left button:hover{

    transform:translateY(-8px) scale(1.04);

    box-shadow:
        0 0 30px rgba(118,194,41,.35);

}



/*====================================================
            PARTICLE BACKGROUND
======================================================*/

#particles{

    filter:blur(.25px);

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

    z-index:-1;

    opacity:.55;

}


/*====================================================
        HERO IMAGE SIZE FIX
======================================================*/

.hero-right{

    width:55% !important;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    margin-top:-100px;

}

.hero-right img{

    width:135% !important;

    max-width:950px !important;

}


/*====================================================
            PREMIUM SCROLL PROGRESS
======================================================*/

.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:4px;

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

    z-index:999999;

}

.scroll-progress-bar{

    width:0%;

    height:100%;

    background:linear-gradient(
        90deg,
        #76C229,
        #9DFF4D
    );

    box-shadow:
    0 0 12px #76C229,
    0 0 25px #76C229;

    transition:width .08s linear;

}


/*====================================================
                PREMIUM MOUSE GLOW
======================================================*/

.mouse-glow{

    position:fixed;

    width:420px;

    height:420px;

    border-radius:50%;

    pointer-events:none;

    left:0;

    top:0;

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

    background:radial-gradient(
        circle,
        rgba(118,194,41,.14) 0%,
        rgba(118,194,41,.08) 30%,
        rgba(118,194,41,.03) 55%,
        transparent 75%
    );

    filter:blur(35px);

    z-index:-1;

    transition:
        left .08s linear,
        top .08s linear;

}


/*====================================================
            PARTICLE ENGINE
======================================================*/

#particles{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    z-index:-2;

    pointer-events:none;

}



/*====================================================
            LIVE STATISTICS
======================================================*/

.stats-section{

    width:100%;

    padding:90px 8%;

    background:#080808;

    position:relative;

    overflow:hidden;

}

.stats-container{

    max-width:1400px;

    margin:auto;

    display:grid;

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

    gap:30px;

}

.stat-card{

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

    border:1px solid rgba(118,194,41,.12);

    border-radius:20px;

    padding:40px 20px;

    text-align:center;

    backdrop-filter:blur(12px);

    transition:.4s;

    position:relative;

    overflow:hidden;

}

.stat-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        transparent,
        rgba(118,194,41,.08),
        transparent
    );

    opacity:0;

    transition:.4s;

}

.stat-card:hover{

    transform:translateY(-10px);

    border-color:#76C229;

    box-shadow:0 20px 40px rgba(118,194,41,.12);

}

.stat-card:hover::before{

    opacity:1;

}

.stat-card h2{

    font-size:3rem;

    color:#76C229;

    margin-bottom:12px;

    font-weight:700;

}

.stat-card p{

    color:#cfcfcf;

    letter-spacing:2px;

    font-size:.9rem;

}

@media(max-width:992px){

.stats-container{

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

}

}

@media(max-width:600px){

.stats-container{

grid-template-columns:1fr;

}

}



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

.team-card{
    background:rgba(18,18,18,.82);
    border:1px solid rgba(118,194,41,.12);
    border-radius:22px;
    padding:40px 30px;
    text-align:center;
    transition:.4s;
}

.team-card:hover{
    transform:translateY(-12px);
    border-color:#76C229;
    box-shadow:0 20px 45px rgba(118,194,41,.15);
}

.team-card i{
    font-size:48px;
    color:#76C229;
    margin-bottom:25px;
}

.team-card h3{
    font-size:24px;
    margin-bottom:15px;
}

.team-card p{
    color:#bdbdbd;
    line-height:1.8;
}

@media(max-width:992px){
    .team-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){
    .team-grid{
        grid-template-columns:1fr;
    }
}



.division-card{
    position:relative;
    overflow:hidden;

    background:rgba(18,18,18,.82);

    border:1px solid rgba(118,194,41,.12);

    border-radius:22px;

    padding:32px 24px;

    text-align:center;

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    transition:.4s ease;
}

.division-card:hover{

    transform:translateY(-12px);

    border-color:#76C229;

    box-shadow:
    0 20px 45px rgba(118,194,41,.18);

}

.division-card i{

    font-size:40px;

    color:#76C229;

    margin-bottom:18px;

    transition:.35s;

}

.division-card:hover i{

    transform:scale(1.15) rotate(-5deg);

}

.division-card h3{

    font-size:21px;

    margin-bottom:10px;

    color:#fff;

}

.division-card p{

    color:#bdbdbd;

    line-height:1.8;

    font-size:15px;

}
.division-grid{

    max-width:1400px;

    margin:70px auto 0;

    display:grid;

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

    gap:30px;

}


@media(max-width:1100px){

.division-grid{

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

}

}

@media(max-width:768px){

.division-grid{

grid-template-columns:1fr;

}

}




.team-category{

    margin-top:80px;

}

.team-category h2{

    text-align:center;

    font-size:34px;

    margin-bottom:35px;

    color:#fff;

}

.member-grid{

    display:grid;

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

    gap:25px;

}

.member-card{

    background:rgba(18,18,18,.82);

    border:1px solid rgba(118,194,41,.12);

    border-radius:20px;

    padding:35px 25px;

    text-align:center;

    transition:.35s;

}

.member-card:hover{

    transform:translateY(-10px);

    border-color:#76C229;

    box-shadow:0 20px 40px rgba(118,194,41,.15);

}

.member-card i{

    font-size:42px;

    color:#76C229;

    margin-bottom:20px;

}

.member-card h3{

    margin-bottom:10px;

}

.member-card p{

    color:#bdbdbd;

}

@media(max-width:992px){

.member-grid{

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

}

}

@media(max-width:768px){

.member-grid{

grid-template-columns:1fr;

}

}



/*=====================================
      PREMIUM SOCIAL ICON COLORS
======================================*/

.contact-icons a{
    position:relative;
    overflow:hidden;
    transition:.35s ease;
}

/* Facebook */
.contact-icons a:nth-child(1):hover{

    background:#1877F2;
    border-color:#1877F2;

    box-shadow:
    0 0 25px rgba(24,119,242,.55);

}

/* Instagram */
.contact-icons a:nth-child(2):hover{

    background:linear-gradient(
        45deg,
        #F58529,
        #DD2A7B,
        #8134AF,
        #515BD4
    );

    border-color:#DD2A7B;

    box-shadow:
    0 0 25px rgba(221,42,123,.55);

}

/* LinkedIn */
.contact-icons a:nth-child(3):hover{

    background:#0A66C2;
    border-color:#0A66C2;

    box-shadow:
    0 0 25px rgba(10,102,194,.55);

}

/* GitHub */
.contact-icons a:nth-child(4):hover{

    background:#24292F;
    border-color:#ffffff;

    box-shadow:
    0 0 25px rgba(255,255,255,.35);

}

/* X (Twitter) */
.contact-icons a:nth-child(5):hover{

    background:#000000;
    border-color:#ffffff;

    box-shadow:
    0 0 25px rgba(255,255,255,.35);

}

/* Icon animation */
.contact-icons a:hover{

    color:#fff;

    transform:
        translateY(-8px)
        scale(1.12)
        rotate(8deg);

}

/*====================================================
                      CSS END
======================================================*/