/*=====================================================
    IEDC CLUB WEBSITE - VERSION 2

    Government Women's Polytechnic College, Kottakkal

    Premium Glassmorphism Theme

    STYLE.CSS PART 1/10
======================================================*/



/*=====================================================
    GOOGLE FONTS
======================================================*/

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





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


:root{


    --primary:
    #9d4edd;


    --secondary:
    #ff4fd8;


    --accent:
    #c77dff;


    --dark:
    #070312;


    --dark-soft:
    #110622;


    --white:
    #ffffff;


    --text-light:
    #d9d9e3;


    --glass:
    rgba(255,255,255,0.08);


    --glass-border:
    rgba(255,255,255,0.12);


    --shadow:
    0 25px 70px rgba(0,0,0,0.45);


    --gradient:
    linear-gradient(
        135deg,
        #9d4edd,
        #ff4fd8
    );


    --transition:
    all .4s ease;


}






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


*{


    margin:0;

    padding:0;

    box-sizing:border-box;


}





html{


    scroll-behavior:smooth;

    overflow-x:hidden;


}





body{


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


    background:
    var(--dark);


    color:
    var(--white);


    line-height:1.7;


    overflow-x:hidden;


}





img{


    width:100%;

    display:block;


}





a{


    text-decoration:none;

    color:inherit;


}





ul{


    list-style:none;


}





button{


    border:none;

    outline:none;

    cursor:pointer;

    font-family:inherit;


}







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


::-webkit-scrollbar{


    width:8px;


}



::-webkit-scrollbar-track{


    background:
    #080315;


}



::-webkit-scrollbar-thumb{


    background:
    var(--gradient);


    border-radius:50px;


}







/*=====================================================
    GLOBAL SECTION STYLE
======================================================*/


section{


    position:relative;

    padding:
    120px 8%;


    overflow:hidden;


}





.section-heading{


    max-width:750px;

    margin:
    0 auto 70px;


    text-align:center;


}





.section-heading span{


    display:inline-block;


    color:
    var(--secondary);


    font-size:14px;


    letter-spacing:3px;


    font-weight:600;


    text-transform:uppercase;


    margin-bottom:20px;


}





.section-heading h2{


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


    font-size:
    clamp(32px,5vw,55px);


    line-height:1.2;


    margin-bottom:20px;


}





.section-heading p{


    color:
    var(--text-light);


    font-size:17px;


}








/*=====================================================
    ANIMATED BACKGROUND
======================================================*/


.background{


    position:fixed;


    inset:0;


    z-index:-5;


    overflow:hidden;


    background:
    #070312;


}







.aurora{


    position:absolute;


    border-radius:50%;


    filter:
    blur(120px);


    opacity:.55;


    animation:
    floatAurora 18s infinite alternate;


}







.aurora-one{


    width:650px;

    height:650px;


    background:
    #7b2cff;


    top:-200px;


    left:-150px;


}







.aurora-two{


    width:600px;

    height:600px;


    background:
    #ff42cf;


    right:-180px;


    top:20%;


    animation-delay:
    3s;


}







.aurora-three{


    width:500px;

    height:500px;


    background:
    #5c4dff;


    bottom:-180px;


    left:25%;


    animation-delay:
    6s;


}








@keyframes floatAurora{


    from{


        transform:
        translate(0,0)
        scale(1);


    }


    to{


        transform:
        translate(120px,-80px)
        scale(1.15);


    }


}








/*=====================================================
    FLOATING PARTICLES
======================================================*/


.floating-particles span{


    position:absolute;


    width:6px;

    height:6px;


    border-radius:50%;


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


    animation:
    particleFloat 12s infinite;


}





.floating-particles span:nth-child(1){

    left:10%;

    top:20%;

}


.floating-particles span:nth-child(2){

    left:35%;

    top:70%;

    animation-delay:2s;

}


.floating-particles span:nth-child(3){

    left:75%;

    top:25%;

    animation-delay:4s;

}


.floating-particles span:nth-child(4){

    left:90%;

    top:60%;

    animation-delay:6s;

}


.floating-particles span:nth-child(5){

    left:50%;

    top:40%;

    animation-delay:8s;

}


.floating-particles span:nth-child(6){

    left:20%;

    top:85%;

    animation-delay:10s;

}







@keyframes particleFloat{


    0%{

        transform:
        translateY(0);

        opacity:.3;

    }


    50%{

        opacity:1;

    }


    100%{

        transform:
        translateY(-120px);

        opacity:.2;

    }


}







/*=====================================================
    NOISE OVERLAY
======================================================*/


.noise{


    position:fixed;


    inset:0;


    background:
    url("https://grainy-gradients.vercel.app/noise.svg");


    opacity:.035;


    pointer-events:none;


    z-index:-2;


}
/*=====================================================
    LOADING SCREEN
======================================================*/


.loader{


    position:fixed;


    inset:0;


    background:
    #070312;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    z-index:9999;


    transition:
    opacity .8s ease,
    visibility .8s ease;


}



.loader.hide{


    opacity:0;


    visibility:hidden;


}







.loader-logo{


    text-align:center;


    animation:
    loaderPulse 2s infinite;


}







.loader-logo i{


    font-size:60px;


    color:
    var(--secondary);


    margin-bottom:20px;


    filter:
    drop-shadow(
    0 0 25px rgba(255,79,216,.6)
    );


}







.loader-logo h2{


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


    font-size:32px;


    letter-spacing:4px;


}







.loader-line{


    width:180px;


    height:4px;


    margin-top:30px;


    border-radius:20px;


    background:
    var(--gradient);


    animation:
    loadingLine 2s infinite;


}







@keyframes loaderPulse{


    50%{

        transform:
        scale(1.08);

    }


}







@keyframes loadingLine{


    0%{

        transform:
        scaleX(.2);

        opacity:.5;

    }


    50%{

        transform:
        scaleX(1);

        opacity:1;

    }


    100%{

        transform:
        scaleX(.2);

        opacity:.5;

    }


}







/*=====================================================
    SCROLL PROGRESS BAR
======================================================*/


.scroll-progress{


    position:fixed;


    top:0;


    left:0;


    width:0;


    height:4px;


    background:
    var(--gradient);


    z-index:2000;


    box-shadow:
    0 0 15px rgba(255,79,216,.7);


}







/*=====================================================
    HEADER & NAVBAR
======================================================*/


header{


    position:fixed;


    top:0;


    left:0;


    width:100%;


    z-index:1000;


}







.navbar{


    width:100%;


    padding:
    22px 8%;


    display:flex;


    align-items:center;


    justify-content:space-between;


    backdrop-filter:
    blur(18px);


    background:
    rgba(7,3,18,.45);


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


    transition:
    .4s ease;


}







.navbar.scrolled{


    padding:
    15px 8%;


    background:
    rgba(7,3,18,.85);


    box-shadow:
    0 10px 40px rgba(0,0,0,.3);


}







/* LOGO */


.logo{


    display:flex;


    align-items:center;


    gap:15px;


}







.logo-icon{


    width:48px;


    height:48px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    background:
    var(--gradient);


    box-shadow:
    0 0 30px rgba(255,79,216,.4);


}







.logo-icon i{


    font-size:22px;


    color:white;


}







.logo-text h2{


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


    font-size:20px;


    letter-spacing:1px;


}







.logo-text p{


    font-size:11px;


    color:
    var(--text-light);


}







/* NAV LINKS */


.nav-links{


    display:flex;


    gap:35px;


    align-items:center;


}







.nav-links a{


    position:relative;


    font-size:15px;


    font-weight:500;


    transition:
    .3s;


    color:
    white;


}







.nav-links a::after{


    content:"";


    position:absolute;


    left:0;


    bottom:-8px;


    width:0;


    height:2px;


    background:
    var(--secondary);


    transition:
    .3s;


}







.nav-links a:hover{


    color:
    var(--secondary);


}







.nav-links a:hover::after{


    width:100%;


}







/* CONNECT BUTTON */


.connect-btn{


    display:flex;


    align-items:center;


    gap:10px;


    padding:
    13px 28px;


    border-radius:50px;


    background:
    var(--gradient);


    font-weight:600;


    transition:
    .35s;


}







.connect-btn:hover{


    transform:
    translateY(-5px);


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


}







.connect-btn i{


    font-size:18px;


}








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


.menu-toggle{


    display:none;


    flex-direction:column;


    gap:6px;


    cursor:pointer;


}







.menu-toggle span{


    width:28px;


    height:3px;


    background:white;


    border-radius:10px;


    transition:.3s;


}







.menu-toggle.active span:nth-child(1){


    transform:
    rotate(45deg)
    translate(6px,6px);


}





.menu-toggle.active span:nth-child(2){


    opacity:0;


}







.menu-toggle.active span:nth-child(3){


    transform:
    rotate(-45deg)
    translate(7px,-7px);


}
/*=====================================================
    HERO SECTION
======================================================*/


.hero{


    min-height:100vh;


    display:flex;


    align-items:center;


    justify-content:space-between;


    gap:70px;


    padding:
    160px 8% 100px;


    position:relative;


}







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


.hero-content{


    flex:1;


    max-width:650px;


}







.hero-tag{


    display:inline-flex;


    align-items:center;


    gap:12px;


    padding:
    12px 22px;


    border-radius:50px;


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


    border:
    1px solid var(--glass-border);


    backdrop-filter:
    blur(15px);


    margin-bottom:30px;


    color:
    var(--text-light);


    font-size:14px;


}







.hero-tag i{


    color:
    var(--secondary);


    animation:
    sparkle 2s infinite;


}







@keyframes sparkle{


    50%{


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


    }


}







.hero h1{


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


    font-size:
    clamp(42px,6vw,76px);


    line-height:1.1;


    margin-bottom:28px;


    letter-spacing:-1px;


}







.hero h1 span{


    display:block;


    background:
    linear-gradient(
    90deg,
    #ffffff,
    #ff4fd8,
    #9d4edd
    );


    -webkit-background-clip:text;


    -webkit-text-fill-color:transparent;


}







.hero-content > p{


    color:
    var(--text-light);


    font-size:18px;


    max-width:600px;


    margin-bottom:40px;


}







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


.hero-buttons{


    display:flex;


    gap:20px;


    flex-wrap:wrap;


}







.primary-btn,
.secondary-btn{


    padding:
    16px 32px;


    border-radius:50px;


    display:inline-flex;


    align-items:center;


    gap:12px;


    font-weight:600;


    transition:
    .35s;


}







.primary-btn{


    background:
    var(--gradient);


    color:white;


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


}







.primary-btn:hover{


    transform:
    translateY(-6px);


    box-shadow:
    0 20px 45px rgba(255,79,216,.45);


}







.secondary-btn{


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


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


    backdrop-filter:
    blur(15px);


}







.secondary-btn:hover{


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


    transform:
    translateY(-6px);


}







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


.hero-highlights{


    display:flex;


    gap:35px;


    margin-top:60px;


    flex-wrap:wrap;


}







.highlight-item{


    display:flex;


    align-items:center;


    gap:14px;


}







.highlight-item i{


    width:45px;


    height:45px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


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


    color:
    var(--secondary);


    font-size:20px;


}







.highlight-item h3{


    font-size:15px;


    font-weight:600;


}







.highlight-item p{


    color:
    var(--text-light);


    font-size:12px;


}








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


.hero-visual{


    flex:1;


    display:flex;


    justify-content:center;


    align-items:center;


    position:relative;


}







.hero-glow{


    position:absolute;


    width:450px;


    height:450px;


    border-radius:50%;


    background:
    var(--gradient);


    filter:
    blur(100px);


    opacity:.35;


}







.glass-orb{


    width:520px;


    height:520px;


    border-radius:50%;


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


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


    backdrop-filter:
    blur(25px);


    display:flex;


    align-items:center;


    justify-content:center;


    overflow:hidden;


    box-shadow:
    var(--shadow);


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


}







.glass-orb img{


    width:90%;


    height:90%;


    object-fit:contain;


}







@keyframes heroFloat{


    0%,100%{


        transform:
        translateY(0);


    }


    50%{


        transform:
        translateY(-25px);


    }


}








/*=====================================================
    FLOATING HERO CARDS
======================================================*/


.floating-card{


    position:absolute;


    display:flex;


    align-items:center;


    gap:12px;


    padding:
    14px 22px;


    border-radius:20px;


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


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


    backdrop-filter:
    blur(20px);


    box-shadow:
    var(--shadow);


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


}







.floating-card i{


    color:
    var(--secondary);


    font-size:20px;


}







.card-one{


    top:15%;


    left:-20px;


}







.card-two{


    right:-30px;


    top:45%;


    animation-delay:1.5s;


}







.card-three{


    bottom:15%;


    left:20px;


    animation-delay:3s;


}







@keyframes cardFloat{


    50%{


        transform:
        translateY(-18px);


    }


}







/*=====================================================
    SCROLL INDICATOR
======================================================*/


.scroll-down{


    position:absolute;


    bottom:35px;


    left:50%;


    transform:
    translateX(-50%);


    display:flex;


    flex-direction:column;


    align-items:center;


    gap:10px;


    opacity:.7;


}







.scroll-down span{


    width:25px;


    height:40px;


    border:
    2px solid white;


    border-radius:20px;


    position:relative;


}







.scroll-down span::before{


    content:"";


    position:absolute;


    width:5px;


    height:8px;


    border-radius:10px;


    background:white;


    top:8px;


    left:50%;


    transform:
    translateX(-50%);


    animation:
    scrollMove 2s infinite;


}







@keyframes scrollMove{


    100%{


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


        opacity:0;


    }


}







.scroll-down p{


    font-size:12px;


    color:
    var(--text-light);


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


.about-container{


    display:grid;


    grid-template-columns:
    1fr 1fr;


    align-items:center;


    gap:70px;


}







/* ABOUT IMAGE */


.about-image{


    position:relative;


}





.image-frame{


    border-radius:35px;


    overflow:hidden;


    position:relative;


    border:
    1px solid var(--glass-border);


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


    padding:15px;


    box-shadow:
    var(--shadow);


}





.image-frame::before{


    content:"";


    position:absolute;


    inset:-2px;


    border-radius:35px;


    background:
    var(--gradient);


    z-index:-1;


    opacity:.5;


    filter:blur(20px);


}





.image-frame img{


    border-radius:25px;


    height:520px;


    object-fit:cover;


}





/* ABOUT CONTENT */


.about-content{


    display:flex;


    flex-direction:column;


    gap:22px;


}







.about-card{


    display:flex;


    gap:20px;


    align-items:flex-start;


    padding:25px;


    border-radius:25px;


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


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


    backdrop-filter:
    blur(20px);


    transition:
    .4s ease;


}





.about-card:hover{


    transform:
    translateX(10px);


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


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


}





.about-card i{


    min-width:50px;


    height:50px;


    display:flex;


    justify-content:center;


    align-items:center;


    border-radius:15px;


    background:
    var(--gradient);


    font-size:22px;


}





.about-card h3{


    font-size:20px;


    margin-bottom:8px;


}





.about-card p{


    color:
    var(--text-light);


    font-size:14px;


}









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

.execom-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    position:relative;
    width:100%;
}

.execom-slider{
    position:relative;
    overflow:hidden;
    width:100%;
    padding:20px 0;
}

.execom-track{
    display:flex;
    gap:30px;
    transition:transform .5s ease;
    will-change:transform;
}

.member-card{
    flex:0 0 280px;
    width:280px;
    padding:35px 25px;
    text-align:center;
    border-radius:35px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(20px);
    transition:.4s ease;
    position:relative;
    overflow:hidden;
}

.member-card::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    top:-80px;
    right:-80px;
    background:var(--secondary);
    filter:blur(80px);
    opacity:.25;
}

.member-card:hover{
    transform:translateY(-15px);
    box-shadow:var(--shadow);
}

.member-card img{
    width:150px;
    height:150px;
    border-radius:50%;
    object-fit:cover;
    margin:0 auto 25px;
    border:4px solid rgba(255,255,255,.15);
}

.member-card h3{
    font-size:20px;
    margin-bottom:8px;
}

.member-card p{
    color:var(--secondary);
    font-size:14px;
}

.slider-btn{
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-shrink:0;
    transition:.3s;
}

.slider-btn:hover{
    background:var(--gradient);
    transform:scale(1.1);
}

.execom-slider::before,
.execom-slider::after{
    content:"";
    position:absolute;
    top:0;
    width:80px;
    height:100%;
    z-index:2;
    pointer-events:none;
}

.execom-slider::before{
    left:0;
    background:linear-gradient(90deg,var(--dark),transparent);
}

.execom-slider::after{
    right:0;
    background:linear-gradient(-90deg,var(--dark),transparent);
}

@media(max-width:768px){

    .member-card{
        flex:0 0 240px;
        width:240px;
    }

}=====================
    COLLEGE SECTION
======================================================*/


.college-container{


    display:grid;


    grid-template-columns:
    1fr 1fr;


    align-items:center;


    gap:70px;


}







.college-image .image-frame img{


    height:430px;


    object-fit:cover;


}







.college-content{


    color:
    var(--text-light);


}





.college-content > p{


    font-size:17px;


    line-height:1.9;


    margin-bottom:35px;


}







.college-highlight{


    display:flex;


    flex-wrap:wrap;


    gap:20px;


}







.college-highlight div{


    flex:1;


    min-width:180px;


    padding:20px;


    display:flex;


    align-items:center;


    gap:15px;


    border-radius:20px;


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


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


    backdrop-filter:
    blur(15px);


    transition:.35s;


}







.college-highlight div:hover{


    transform:
    translateY(-8px);


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


}







.college-highlight i{


    color:
    var(--secondary);


    font-size:25px;


}







.college-highlight span{


    font-size:14px;


    font-weight:500;


}









/*=====================================================
    VISION MISSION OBJECTIVES SECTION
======================================================*/


.purpose-grid{


    display:grid;


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


    gap:30px;


}







.purpose-card{


    padding:40px 30px;


    text-align:center;


    border-radius:35px;


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


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


    backdrop-filter:
    blur(20px);


    transition:
    .4s ease;


    position:relative;


    overflow:hidden;


}







.purpose-card::before{


    content:"";


    position:absolute;


    width:180px;


    height:180px;


    border-radius:50%;


    background:
    var(--primary);


    filter:
    blur(80px);


    opacity:.15;


    top:-80px;


    right:-80px;


}







.purpose-card:hover{


    transform:
    translateY(-12px);


    box-shadow:
    var(--shadow);


}





.icon-box{


    width:75px;


    height:75px;


    margin:
    0 auto 25px;


    border-radius:25px;


    display:flex;


    justify-content:center;


    align-items:center;


    background:
    var(--gradient);


    font-size:30px;


}





.purpose-card h3{


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


    font-size:22px;


    margin-bottom:15px;


}





.purpose-card p{


    color:
    var(--text-light);


    font-size:15px;


}









/*=====================================================
    WHY JOIN IEDC SECTION
======================================================*/


.benefits-grid{


    display:grid;


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


    gap:25px;


}







.benefit-card{


    padding:35px 25px;


    border-radius:30px;


    text-align:center;


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


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


    backdrop-filter:
    blur(18px);


    transition:
    .4s ease;


}







.benefit-card:hover{


    transform:
    translateY(-12px);


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


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


}







.benefit-card i{


    width:65px;


    height:65px;


    display:flex;


    justify-content:center;


    align-items:center;


    margin:
    0 auto 25px;


    border-radius:20px;


    background:
    linear-gradient(
    135deg,
    rgba(157,78,221,.3),
    rgba(255,79,216,.3)
    );


    color:
    var(--secondary);


    font-size:28px;


}







.benefit-card h3{


    font-size:20px;


    margin-bottom:12px;


}







.benefit-card p{


    font-size:14px;


    color:
    var(--text-light);


}
/*=====================================================
    EVENTS SECTION
======================================================*/


.events{


    position:relative;


}







.events-grid{


    display:grid;


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


    gap:35px;


}








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


.event-card{


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


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


    border-radius:35px;


    overflow:hidden;


    backdrop-filter:
    blur(20px);


    transition:
    .45s ease;


    position:relative;


}







.event-card:hover{


    transform:
    translateY(-15px);


    box-shadow:
    var(--shadow);


}







/* EVENT IMAGE */


.event-image{


    height:260px;


    overflow:hidden;


    position:relative;


}







.event-image img{


    height:100%;


    width:100%;


    object-fit:cover;


    transition:
    .6s ease;


}







.event-card:hover .event-image img{


    transform:
    scale(1.1);


}







/* IMAGE OVERLAY */


.event-overlay{


    position:absolute;


    inset:0;


    background:
    linear-gradient(
    to top,
    rgba(7,3,18,.8),
    transparent
    );


    display:flex;


    justify-content:center;


    align-items:center;


    opacity:0;


    transition:
    .4s;


}







.event-overlay i{


    width:65px;


    height:65px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:
    var(--gradient);


    font-size:25px;


}







.event-card:hover .event-overlay{


    opacity:1;


}









/* EVENT CONTENT */


.event-content{


    padding:
    30px;


}







.event-tag{


    display:inline-block;


    padding:
    7px 18px;


    border-radius:30px;


    background:
    rgba(255,79,216,.15);


    color:
    var(--secondary);


    font-size:12px;


    letter-spacing:1px;


    font-weight:600;


    margin-bottom:15px;


}







.event-content h3{


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


    font-size:22px;


    margin-bottom:15px;


}







.event-content p{


    color:
    var(--text-light);


    font-size:14px;


    line-height:1.8;


    margin-bottom:25px;


}







.event-btn{


    display:inline-flex;


    align-items:center;


    gap:10px;


    color:
    white;


    font-weight:600;


    transition:
    .3s;


}







.event-btn i{


    color:
    var(--secondary);


    transition:
    .3s;


}







.event-btn:hover{


    color:
    var(--secondary);


}







.event-btn:hover i{


    transform:
    translateX(8px);


}








/*=====================================================
    EVENT CARD GLOW EFFECT
======================================================*/


.event-card::before{


    content:"";


    position:absolute;


    width:200px;


    height:200px;


    background:
    var(--secondary);


    border-radius:50%;


    filter:
    blur(100px);


    opacity:.12;


    top:-100px;


    right:-100px;


    pointer-events:none;


}







/*=====================================================
    EVENT SECTION DECORATION
======================================================*/


.events::after{


    content:"";


    position:absolute;


    width:400px;


    height:400px;


    border-radius:50%;


    background:
    var(--primary);


    filter:
    blur(140px);


    opacity:.15;


    bottom:0;


    left:-200px;


    z-index:-1;


}
/*=====================================================
    GALLERY SECTION
======================================================*/


.gallery{


    position:relative;


}







/*=====================================================
    GALLERY FILTER BUTTONS
======================================================*/


.gallery-filter{


    display:flex;


    justify-content:center;


    align-items:center;


    gap:15px;


    flex-wrap:wrap;


    margin-bottom:50px;


}







.filter-btn{


    padding:
    12px 28px;


    border-radius:50px;


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


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


    color:white;


    transition:
    .35s;


    backdrop-filter:
    blur(15px);


}







.filter-btn:hover,
.filter-btn.active{


    background:
    var(--gradient);


    transform:
    translateY(-5px);


}








/*=====================================================
    MASONRY GALLERY GRID
======================================================*/


.gallery-grid{


    columns:4;


    column-gap:25px;


}







.gallery-item{


    position:relative;


    margin-bottom:25px;


    border-radius:25px;


    overflow:hidden;


    break-inside:avoid;


    cursor:pointer;


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


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


}







.gallery-item img{


    width:100%;


    height:auto;


    transition:
    .6s ease;


}







.gallery-item:hover img{


    transform:
    scale(1.08);


}








/*=====================================================
    GALLERY OVERLAY
======================================================*/


.gallery-overlay{


    position:absolute;


    inset:0;


    background:
    rgba(7,3,18,.45);


    display:flex;


    align-items:center;


    justify-content:center;


    opacity:0;


    transition:
    .4s;


}







.gallery-overlay i{


    width:60px;


    height:60px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    background:
    var(--gradient);


    font-size:22px;


}







.gallery-item:hover .gallery-overlay{


    opacity:1;


}









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


.gallery-item.hide{


    display:none;


}







.gallery-item.show{


    animation:
    galleryShow .5s ease;


}







@keyframes galleryShow{


    from{


        opacity:0;


        transform:
        scale(.8);


    }


    to{


        opacity:1;


        transform:
        scale(1);


    }


}









/*=====================================================
    LIGHTBOX
======================================================*/


.lightbox{


    position:fixed;


    inset:0;


    background:
    rgba(0,0,0,.85);


    backdrop-filter:
    blur(15px);


    z-index:5000;


    display:flex;


    justify-content:center;


    align-items:center;


    opacity:0;


    visibility:hidden;


    transition:
    .4s;


}







.lightbox.active{


    opacity:1;


    visibility:visible;


}







.lightbox-image{


    max-width:85%;


    max-height:85vh;


    border-radius:25px;


    object-fit:contain;


    box-shadow:
    0 20px 80px rgba(0,0,0,.6);


    animation:
    lightboxZoom .4s ease;


}







@keyframes lightboxZoom{


    from{


        transform:
        scale(.7);


        opacity:0;


    }


    to{


        transform:
        scale(1);


        opacity:1;


    }


}








/* CLOSE BUTTON */


.lightbox-close{


    position:absolute;


    top:35px;


    right:45px;


    width:55px;


    height:55px;


    border-radius:50%;


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


    display:flex;


    justify-content:center;


    align-items:center;


    font-size:25px;


    cursor:pointer;


    transition:
    .3s;


}







.lightbox-close:hover{


    background:
    var(--gradient);


    transform:
    rotate(90deg);


}








/* NAVIGATION BUTTONS */


.lightbox-prev,
.lightbox-next{


    position:absolute;


    width:55px;


    height:55px;


    border-radius:50%;


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


    color:white;


    display:flex;


    justify-content:center;


    align-items:center;


    font-size:20px;


    transition:
    .3s;


}







.lightbox-prev{


    left:40px;


}





.lightbox-next{


    right:40px;


}







.lightbox-prev:hover,
.lightbox-next:hover{


    background:
    var(--gradient);


}





/*=====================================================
    GALLERY BACKGROUND EFFECT
======================================================*/


.gallery::before{


    content:"";


    position:absolute;


    width:450px;


    height:450px;


    border-radius:50%;


    background:
    var(--secondary);


    filter:
    blur(150px);


    opacity:.12;


    right:-200px;


    top:30%;


    z-index:-1;


}
/*=====================================================
    LEADERSHIP SECTION
======================================================*/


.leadership{


    position:relative;


}







.leadership-grid{


    display:grid;


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


    gap:40px;


    max-width:950px;


    margin:auto;


}








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


.leader-card{


    display:flex;


    gap:30px;


    align-items:center;


    padding:35px;


    border-radius:35px;


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


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


    backdrop-filter:
    blur(20px);


    transition:
    .4s ease;


    position:relative;


    overflow:hidden;


}







.leader-card::before{


    content:"";


    position:absolute;


    width:200px;


    height:200px;


    border-radius:50%;


    background:
    var(--primary);


    filter:
    blur(90px);


    opacity:.18;


    right:-100px;


    top:-100px;


}







.leader-card:hover{


    transform:
    translateY(-12px);


    box-shadow:
    var(--shadow);


}







.leader-image{


    min-width:140px;


    height:140px;


    border-radius:50%;


    overflow:hidden;


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


    position:relative;


}







.leader-image img{


    width:100%;


    height:100%;


    object-fit:cover;


}







.leader-info h3{


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


    font-size:20px;


    margin-bottom:8px;


}







.leader-info span{


    color:
    var(--secondary);


    font-size:14px;


    font-weight:600;


}







.leader-info p{


    color:
    var(--text-light);


    font-size:14px;


    margin:
    15px 0 20px;


}







.mail-btn{


    display:inline-flex;


    align-items:center;


    gap:10px;


    padding:
    10px 22px;


    border-radius:30px;


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


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


    transition:
    .3s;


}







.mail-btn:hover{


    background:
    var(--gradient);


    transform:
    translateY(-4px);


}









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


.contact-container{


    display:grid;


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


    gap:30px;


}








/* CONTACT CARD */


.contact-card{


    text-align:center;


    padding:
    40px 30px;


    border-radius:35px;


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


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


    backdrop-filter:
    blur(20px);


    transition:
    .4s ease;


}







.contact-card:hover{


    transform:
    translateY(-12px);


    box-shadow:
    var(--shadow);


}







.contact-icon{


    width:75px;


    height:75px;


    margin:
    0 auto 25px;


    display:flex;


    justify-content:center;


    align-items:center;


    border-radius:25px;


    background:
    var(--gradient);


    font-size:30px;


}







.contact-card h3{


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


    font-size:22px;


    margin-bottom:15px;


}







.contact-card p{


    color:
    var(--text-light);


    font-size:15px;


    margin-bottom:25px;


}







.contact-card .primary-btn{


    padding:
    12px 25px;


    font-size:14px;


}








/*=====================================================
    CONTACT GLOW EFFECT
======================================================*/


.contact::after{


    content:"";


    position:absolute;


    width:500px;


    height:500px;


    border-radius:50%;


    background:
    var(--primary);


    filter:
    blur(150px);


    opacity:.15;


    bottom:-200px;


    right:-200px;


    z-index:-1;


}
/*=====================================================
    FOOTER SECTION
======================================================*/


.footer{


    position:relative;


    padding:
    80px 8% 30px;


    background:
    rgba(0,0,0,.25);


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


}







.footer-container{


    display:grid;


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


    gap:50px;


}







/* FOOTER BRAND */


.footer-brand .logo{


    margin-bottom:25px;


}







.footer-description{


    max-width:420px;


    color:
    var(--text-light);


    font-size:15px;


    line-height:1.8;


}








/* FOOTER LINKS */


.footer h3{


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


    font-size:18px;


    margin-bottom:25px;


}







.footer-links{


    display:flex;


    flex-direction:column;


    gap:15px;


}







.footer-links a{


    color:
    var(--text-light);


    transition:
    .3s;


}







.footer-links a:hover{


    color:
    var(--secondary);


    transform:
    translateX(8px);


}








/* SOCIAL ICONS */


.social-icons{


    display:flex;


    gap:15px;


}







.social-icons a{


    width:45px;


    height:45px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


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


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


    transition:
    .35s;


}







.social-icons a:hover{


    background:
    var(--gradient);


    transform:
    translateY(-8px);


}








/* FOOTER BOTTOM */


.footer-bottom{


    text-align:center;


    margin-top:60px;


    padding-top:25px;


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


}







.footer-bottom p{


    color:
    rgba(255,255,255,.6);


    font-size:13px;


}









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


@media(max-width:1100px){





    .hero{


        flex-direction:column;


        text-align:center;


    }







    .hero-content{


        max-width:800px;


    }







    .hero-content > p{


        margin:
        auto auto 40px;


    }







    .hero-buttons,
    .hero-highlights{


        justify-content:center;


    }







    .hero-visual{


        margin-top:50px;


    }







    .about-container,
    .college-container{


        grid-template-columns:
        1fr;


    }







    .about-image,
    .college-image{


        max-width:650px;


        margin:auto;


    }







    .purpose-grid{


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


    }







    .benefits-grid{


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


    }







    .events-grid{


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


    }







    .gallery-grid{


        columns:3;


    }







    .footer-container{


        grid-template-columns:
        1fr 1fr;


    }


}









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


@media(max-width:768px){





    section{


        padding:
        80px 5%;


    }







    /* NAVBAR */


    .navbar{


        padding:
        18px 5%;


    }







    .nav-links{


        position:absolute;


        top:90px;


        left:5%;


        right:5%;


        padding:30px;


        border-radius:25px;


        flex-direction:column;


        background:
        rgba(7,3,18,.9);


        backdrop-filter:
        blur(20px);


        transform:
        translateY(-30px);


        opacity:0;


        pointer-events:none;


        transition:
        .4s;


    }







    .nav-links.active{


        transform:
        translateY(0);


        opacity:1;


        pointer-events:auto;


    }







    .connect-btn{


        display:none;


    }







    .menu-toggle{


        display:flex;


    }







    /* HERO */


    .hero{


        padding-top:
        130px;


    }







    .hero h1{


        font-size:
        42px;


    }







    .glass-orb{


        width:330px;


        height:330px;


    }







    .floating-card{


        display:none;


    }







    .hero-highlights{


        gap:20px;


    }







    /* GRID */


    .purpose-grid,
    .benefits-grid,
    .events-grid,
    .contact-container{


        grid-template-columns:
        1fr;


    }







    .leadership-grid{


        grid-template-columns:
        1fr;


    }







    .leader-card{


        flex-direction:
        column;


        text-align:center;


    }







    .gallery-grid{


        columns:2;


    }







    .footer-container{


        grid-template-columns:
        1fr;


        text-align:center;


    }







    .footer-description{


        margin:auto;


    }







    .social-icons{


        justify-content:center;


    }


}
/*=====================================================
    EXTRA SMALL DEVICES
======================================================*/


@media(max-width:480px){



    .logo-text h2{


        font-size:17px;


    }





    .logo-text p{


        display:none;


    }





    .hero h1{


        font-size:36px;


    }





    .hero-content > p{


        font-size:15px;


    }





    .hero-buttons{


        flex-direction:column;


        width:100%;


    }





    .primary-btn,
    .secondary-btn{


        width:100%;


        justify-content:center;


    }





    .hero-highlights{


        flex-direction:column;


    }





    .glass-orb{


        width:280px;


        height:280px;


    }





    .section-heading h2{


        font-size:30px;


    }





    .image-frame img{


        height:350px;


    }





    .gallery-grid{


        columns:1;


    }





    .event-content h3{


        font-size:20px;


    }





    .lightbox-image{


        max-width:95%;


    }





    .lightbox-prev{


        left:15px;


    }





    .lightbox-next{


        right:15px;


    }


}








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


.reveal{


    opacity:0;


    transform:
    translateY(50px);


    transition:
    1s ease;


}





.reveal.active{


    opacity:1;


    transform:
    translateY(0);


}








/*=====================================================
    FLOATING ANIMATION CLASSES
======================================================*/


.float{


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


}







@keyframes floating{


    0%,100%{


        transform:
        translateY(0);


    }





    50%{


        transform:
        translateY(-20px);


    }


}








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


.glow{


    animation:
    glowEffect 3s infinite alternate;


}







@keyframes glowEffect{


    from{


        box-shadow:
        0 0 20px rgba(255,79,216,.2);


    }





    to{


        box-shadow:
        0 0 50px rgba(157,78,221,.5);


    }


}








/*=====================================================
    TEXT GRADIENT UTILITY
======================================================*/


.gradient-text{


    background:
    linear-gradient(
    90deg,
    #ffffff,
    #ff4fd8,
    #9d4edd
    );


    -webkit-background-clip:text;


    -webkit-text-fill-color:transparent;


}








/*=====================================================
    GLASS UTILITY
======================================================*/


.glass{


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


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


    backdrop-filter:
    blur(20px);


    border-radius:30px;


}








/*=====================================================
    CURSOR GLOW EFFECT
======================================================*/


.cursor-glow{


    position:fixed;


    width:25px;


    height:25px;


    border-radius:50%;


    pointer-events:none;


    background:
    rgba(255,79,216,.4);


    filter:
    blur(12px);


    z-index:9998;


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


}








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


::selection{


    background:
    var(--secondary);


    color:white;


}








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


.hero,
.event-card,
.member-card,
.contact-card,
.gallery-item,
.leader-card{


    will-change:
    transform;


}








/*=====================================================
    END OF STYLE.CSS VERSION 2
======================================================*/