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

:root{

    --maroon:#7a0000;
    --dark:#1f2328;
    --gold:#c59d32;
    --accent:#ffd24c;

    --white:#ffffff;
    --light:#f8f8f8;
    --text:#555555;
    --border:#ececec;

    --transition:.4s ease;

}

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

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

html{
    scroll-behavior:smooth;
}

body{

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

    overflow-x:hidden;

    background:var(--white);

    color:var(--text);

}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

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

/* =========================================
CONTAINER
========================================= */

.header-container{

    width:100%;
    max-width:1450px;

    margin:auto;

    padding:0 28px;

}

/* =========================================
TOP HEADER
========================================= */

.top-header{

    position:relative;

    background:
    linear-gradient(
        135deg,
        #5e0000,
        var(--maroon)
    );

    overflow:hidden;

}

.top-header::before{

    content:'';

    position:absolute;

    width:300px;
    height:300px;

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

    border-radius:50%;

    top:-180px;
    left:-80px;

}

.top-header::after{

    content:'';

    position:absolute;

    width:250px;
    height:250px;

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

    border-radius:50%;

    right:-80px;
    bottom:-160px;

}

.top-header-wrapper{

    position:relative;

    z-index:2;

    min-height:55px;

    display:grid;

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

    align-items:center;

    gap:20px;

}

/* =========================================
LEFT LINKS
========================================= */

.top-left-links{

    display:flex;
    align-items:center;

    gap:18px;

}

.top-left-links a{

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

    font-size:13px;
    font-weight:500;

    transition:var(--transition);

    position:relative;

}

.top-left-links a::after{

    content:'';

    position:absolute;

    left:0;
    bottom:-5px;

    width:0;
    height:2px;

    background:var(--accent);

    transition:var(--transition);

}

.top-left-links a:hover{

    color:var(--accent);

}

.top-left-links a:hover::after{

    width:100%;

}

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

.quick-buttons{

    display:flex;
    align-items:center;

    gap:14px;

}

.quick-btn{

    position:relative;

    overflow:hidden;

    height:38px;

    padding:0 18px;

    border-radius:16px;

    display:flex;
    align-items:center;

    gap:12px;

    font-size:13px;
    font-weight:700;

    color:var(--white);

    transition:var(--transition);

    backdrop-filter:blur(12px);

}

.quick-btn::before{

    content:'';

    position:absolute;

    inset:0;

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

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

    z-index:-1;

}

.quick-btn:hover{

    transform:translateY(-3px);

}

.btn-one{

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.06),
        rgba(255,255,255,.02)
    );

}

.btn-two{

    background:
    linear-gradient(
        135deg,
        rgba(197,157,50,.18),
        rgba(255,210,76,.10)
    );

}

.btn-icon{

    width:28px;
    height:28px;

    border-radius:10px;

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

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

    font-size:8px;

}

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

.top-social-links{

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

    gap:10px;

}

.top-social-links a{

    width:34px;
    height:34px;

    border-radius:12px;

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

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

    color:var(--white);

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

    font-size:13px;

    transition:var(--transition);

}

.top-social-links a:hover{

    background:var(--gold);

    color:var(--dark);

    transform:translateY(-3px);

}

/* =========================================
MAIN HEADER
========================================= */

.main-header{

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

    backdrop-filter:blur(16px);

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

    position:sticky;
    top:0;

    z-index:999;

}

.main-header-wrapper{

    min-height:82px;

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

    gap:30px;

}

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

.logo-area{

    display:flex;
    align-items:center;

    gap:14px;

    flex-shrink:0;

}

.logo-image{

    width:58px;
    height:58px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #fff7dc,
        #fff
    );

    padding:8px;

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

}

.logo-image img{

    width:100%;
    height:100%;

    object-fit:contain;

}

.logo-text h2{

    font-size:18px;

    color:var(--maroon);

    font-weight:800;

    line-height:1.1;

    margin-bottom:3px;

}

.logo-text p{

    font-size:8px;

    color:#777;

    letter-spacing:1px;

}

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

.navbar{

    margin-left:auto;

}

.nav-menu{

    display:flex;
    align-items:center;

    gap:28px;

}

.nav-menu li a{

    position:relative;

    color:var(--dark);

    font-size:14px;
    font-weight:600;

    transition:var(--transition);

}

.nav-menu li a::after{

    content:'';

    position:absolute;

    left:0;
    bottom:-10px;

    width:0;
    height:2px;

    border-radius:20px;

    background:
    linear-gradient(
        to right,
        var(--maroon),
        var(--gold)
    );

    transition:var(--transition);

}

.nav-menu li a:hover,
.nav-menu li a.active{

    color:var(--maroon);

}

.nav-menu li a:hover::after,
.nav-menu li a.active::after{

    width:100%;

}

/* =========================================
RIGHT SIDE
========================================= */

.header-right{

    display:flex;
    align-items:center;

    gap:14px;

}

/* =========================================
ADMISSION BUTTON
========================================= */

.admission-btn{

    position:relative;

    overflow:hidden;

    height:46px;

    padding:0 28px;

    border-radius:14px;

    background:
    linear-gradient(
        135deg,
        var(--maroon),
        #9c0000
    );

    color:var(--white);

    font-size:13px;
    font-weight:700;

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

    transition:var(--transition);

    box-shadow:
    0 12px 24px rgba(122,0,0,.18);

}

.admission-btn:hover{

    transform:translateY(-3px);

}

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

.mobile-toggle{

    width:44px;
    height:44px;

    border:none;
    outline:none;

    background:var(--dark);

    border-radius:14px;

    display:none;

    flex-direction:column;
    justify-content:center;
    align-items:center;

    gap:4px;

    cursor:pointer;

}

.mobile-toggle span{

    width:20px;
    height:2px;

    background:var(--white);

    border-radius:20px;

}

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

.header-marquee{

    background:
    linear-gradient(
        135deg,
        var(--gold),
        var(--accent)
    );

    padding:6px 0;

}

.marquee-wrapper{

    display:flex;
    align-items:center;

    gap:14px;

}

.marquee-badge{

    flex-shrink:0;

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

    color:var(--dark);

    padding:6px 14px;

    border-radius:40px;

    font-size:11px;
    font-weight:700;

    display:flex;
    align-items:center;

    gap:7px;

}

.header-marquee marquee{

    color:var(--dark);

    font-size:12px;
    font-weight:600;

}

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

@media(max-width:1200px){

    .navbar{

        position:fixed;

        top:0;
        right:-100%;

        width:320px;
        height:100vh;

        background:var(--white);

        padding:120px 30px;

        transition:var(--transition);

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

    }

    .navbar.active{

        right:0;

    }

    .nav-menu{

        flex-direction:column;
        align-items:flex-start;

        gap:26px;

    }

    .mobile-toggle{

        display:flex;

    }

}

@media(max-width:992px){

    .top-header-wrapper{

        grid-template-columns:1fr;

        padding:16px 0;

    }

    .top-left-links,
    .quick-buttons,
    .top-social-links{

        justify-content:center;

    }

}

@media(max-width:768px){

    .main-header-wrapper{

        min-height:74px;

    }

    .logo-image{

        width:50px;
        height:50px;

    }

    .logo-text h2{

        font-size:17px;

    }

    .logo-text p{

        font-size:9px;

    }

    .admission-btn{

        display:none;

    }

    .quick-buttons{

        flex-direction:column;

        width:100%;

    }

    .quick-btn{

        width:100%;

        justify-content:center;

    }

}
/* =========================================
MODERN INDEX PAGE CSS
========================================= */

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

.site-container{

    width:100%;
    max-width:1280px;

    margin:auto;

    padding:0 20px;

}

.section-mini-title{

    display:inline-block;

    padding:8px 16px;

    border-radius:40px;

    background:rgba(122,0,0,.08);

    color:var(--maroon);

    font-size:11px;
    font-weight:700;

    margin-bottom:18px;

    letter-spacing:1px;

}

.light-text{

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

    color:var(--accent);

}

.theme-btn{

    height:46px;

    padding:0 26px;

    border-radius:14px;

    background:
    linear-gradient(
        135deg,
        var(--maroon),
        #980000
    );

    color:var(--white);

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

    font-size:13px;
    font-weight:700;

    transition:.4s ease;

}

.theme-btn:hover{

    transform:translateY(-4px);

}

.section-heading-modern{

    text-align:center;

    margin-bottom:42px;

}

.section-heading-modern span{

    display:inline-block;

    padding:8px 16px;

    border-radius:40px;

    background:rgba(122,0,0,.08);

    color:var(--maroon);

    font-size:11px;
    font-weight:700;

    margin-bottom:14px;

}

.section-heading-modern h2{

    font-size:38px;

    color:var(--dark);

}

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

.modern-hero{

    position:relative;

    height:88vh;

    overflow:hidden;

    background:#000;

}

/* =========================================
SLIDER
========================================= */

.hero-slider{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

}

.hero-slide{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transition:
    opacity 1s ease,
    visibility 1s ease;

}

.hero-slide.active{

    opacity:1;

    visibility:visible;

    z-index:2;

}

.hero-slide img{

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1);

    transition:transform 6s ease;

}

.hero-slide.active img{

    transform:scale(1.05);

}

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

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.68) 10%,
        rgba(0,0,0,.38) 55%,
        rgba(0,0,0,.15) 100%
    );

    z-index:2;

}

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

.hero-content-area{

    position:absolute;

    inset:0;

    z-index:15;

    height:100%;

    display:flex;

    align-items:center;

}

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

.hero-top-links{

    position:absolute;

    top:24px;
    right:20px;

    display:flex;
    align-items:center;

    gap:10px;

    z-index:30;

}

.hero-top-links a{

    height:46px;

    padding:0 22px;

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

    backdrop-filter:blur(14px);

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

    color:var(--white);

    display:flex;
    align-items:center;

    gap:9px;

    border-radius:16px;

    font-size:12px;
    font-weight:700;

    transition:.35s;

}

.hero-top-links a:hover{

    background:var(--gold);

    color:var(--dark);

    transform:translateY(-2px);

}

.hero-top-links a:last-child{

    background:var(--gold);

    color:var(--dark);

}

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

.hero-main-content{

    width:100%;

    position:relative;

    z-index:20;

}

.hero-left{

    max-width:610px;

    animation:heroFadeUp 1s ease;

}

/* =========================================
TAG
========================================= */

.hero-tag{

    display:inline-flex;

    align-items:center;

    padding:10px 18px;

    border-radius:40px;

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

    backdrop-filter:blur(12px);

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

    color:var(--white);

    font-size:11px;
    font-weight:700;

    letter-spacing:1px;

    margin-bottom:22px;

}

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

.hero-left h1{

    font-size:58px;

    line-height:1.08;

    color:var(--white);

    margin-bottom:18px;

    font-weight:800;

}

/* =========================================
DESCRIPTION
========================================= */

.hero-left p{

    font-size:15px;

    line-height:1.9;

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

    margin-bottom:34px;

    max-width:520px;

}

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

.hero-buttons{

    display:flex;
    align-items:center;

    gap:14px;

    flex-wrap:wrap;

}

.hero-btn{

    height:50px;

    padding:0 26px;

    border-radius:14px;

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

    font-size:13px;
    font-weight:700;

    transition:.35s;

}

.hero-primary-btn{

    background:var(--gold);

    color:var(--dark);

    box-shadow:
    0 12px 24px rgba(197,157,50,.28);

}

.hero-primary-btn:hover{

    transform:translateY(-3px);

    background:var(--accent);

}

.hero-outline-btn{

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

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

    backdrop-filter:blur(10px);

    color:var(--white);

}

.hero-outline-btn:hover{

    background:var(--white);

    color:var(--dark);

}

/* =========================================
ARROWS
========================================= */

.hero-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:52px;
    height:90px;

    border:none;

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

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:24px;

    z-index:20;

    cursor:pointer;

    transition:.35s;

}

.hero-arrow:hover{

    background:var(--gold);

    color:var(--dark);

}

.hero-prev{

    left:0;

    border-radius:0 14px 14px 0;

}

.hero-next{

    right:0;

    border-radius:14px 0 0 14px;

}

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

.hero-bottom-bar{

    position:absolute;

    bottom:0;
    left:0;

    width:100%;

    background:
    linear-gradient(
        90deg,
        var(--maroon),
        #5f0000
    );

    padding:16px 0;

    z-index:20;

}

.bottom-bar-wrapper{

    display:grid;

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

    gap:18px;

}

.bottom-box{

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

    gap:11px;

    color:var(--white);

    font-size:13px;
    font-weight:700;

}

.bottom-box i{

    font-size:18px;

    color:var(--accent);

}

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

@keyframes heroFadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:991px){

    .hero-left h1{

        font-size:42px;

    }

    .hero-top-links{

        display:none;

    }

    .bottom-bar-wrapper{

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

        gap:14px;

    }

}

@media(max-width:768px){

    .modern-hero{

        height:82vh;

    }

    .hero-left h1{

        font-size:34px;

    }

    .hero-left p{

        font-size:14px;

        line-height:1.8;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:flex-start;

    }

    .hero-btn{

        width:100%;

    }

    .bottom-bar-wrapper{

        grid-template-columns:1fr;

    }

    .hero-arrow{

        width:42px;
        height:72px;

        font-size:20px;

    }

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

.modern-about{

    padding:90px 0;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.about-images{

    position:relative;

}

.main-about-image{

    overflow:hidden;

    border-radius:28px;

    height:520px;

}

.main-about-image img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.small-about-card{

    position:absolute;

    right:-20px;
    bottom:40px;

    background:var(--white);

    border-radius:24px;

    padding:24px 30px;

    box-shadow:
    0 18px 40px rgba(0,0,0,.1);

}

.small-about-card h3{

    font-size:42px;

    color:var(--maroon);

}

.about-content h2{

    font-size:42px;

    line-height:1.2;

    color:var(--dark);

    margin-bottom:20px;

}

.about-content p{

    font-size:14px;

    line-height:1.9;

    margin-bottom:28px;

}

.about-features{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px;

    margin-bottom:30px;

}

.about-feature{

    display:flex;
    align-items:center;

    gap:10px;

    font-size:13px;
    font-weight:600;

}

.about-feature i{

    color:var(--maroon);

}

/* =========================================
EVENTS & ACHIEVEMENTS
========================================= */

.event-achievement-section{

    padding:80px 0;

    background:#fff;

}

.event-achievement-grid{

    display:grid;

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

    gap:22px;

    margin-top:40px;

}

.event-modern-card{

    position:relative;

    height:260px;

    overflow:hidden;

    border-radius:24px;

    background:#f5f5f5;

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

    transition:.4s;

}

.event-modern-card:hover{

    transform:
    translateY(-8px);

}

.event-modern-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .7s ease;

}

.event-modern-card:hover img{

    transform:scale(1.08);

}

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

@media(max-width:991px){

    .event-achievement-grid{

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

    }

}

@media(max-width:600px){

    .event-achievement-grid{

        grid-template-columns:1fr;

    }

    .event-modern-card{

        height:220px;

    }

}

/* =========================================
CTA
========================================= */

.admission-cta{

    padding:0 0 100px;

}

.cta-modern-wrapper{

    background:
    linear-gradient(
        135deg,
        var(--maroon),
        #980000
    );

    border-radius:34px;

    padding:70px 50px;

    text-align:center;

}

.cta-modern-wrapper h2{

    font-size:44px;

    color:var(--white);

    margin-bottom:18px;

}

.cta-modern-wrapper p{

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

    margin-bottom:28px;

}

.white-theme-btn{

    background:var(--white);

    color:var(--dark);

}

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

@media(max-width:1200px){

    .about-grid,
    .achievement-wrapper-modern{

        grid-template-columns:1fr;

        display:grid;

    }

    .facilities-grid{

        grid-template-columns:1fr 1fr;

    }

}

@media(max-width:768px){

    .modern-hero{

        height:auto;

        min-height:760px;

    }

    .hero-left h1{

        font-size:38px;

    }

    .hero-top-links{

        display:none;

    }

    .bottom-bar-wrapper,
    .facilities-grid,
    .about-features{

        grid-template-columns:1fr;

    }

    .hero-buttons,
    .achievement-stats-modern{

        flex-direction:column;

        align-items:flex-start;

    }

    .about-grid{

        grid-template-columns:1fr;

    }

    .about-content h2,
    .achievement-left h2,
    .cta-modern-wrapper h2{

        font-size:32px;

    }

}

/* =========================================
MENTOR + NEWS SECTION
========================================= */

.mentor-news-section{

    padding:70px 0;

    background:#f8f5ed;

}

.mentor-news-grid{

    display:grid;

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

    gap:30px;

}

.mentor-side h2{

    font-size:34px;

    color:var(--dark);

    margin-bottom:14px;

}

.mentor-top-text{

    font-size:13px;

    line-height:1.8;

    max-width:650px;

    margin-bottom:30px;

}

.mentor-cards-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.mentor-modern-card{

    background:var(--white);

    border-radius:24px;

    overflow:hidden;

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

    transition:.4s ease;

}

.mentor-modern-card:hover{

    transform:translateY(-6px);

}

.mentor-image{

    height:260px;

}

.mentor-image img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.mentor-content{

    padding:22px;

}

.mentor-content h3{

    font-size:22px;

    color:var(--dark);

    margin-bottom:4px;

}

.mentor-content span{

    color:var(--gold);

    font-size:12px;
    font-weight:700;

    display:block;

    margin-bottom:12px;

}

.mentor-content p{

    font-size:13px;

    line-height:1.8;

    margin-bottom:18px;

}

.mentor-content a{

    height:40px;

    padding:0 18px;

    border-radius:12px;

    background:var(--maroon);

    color:var(--white);

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

    font-size:12px;
    font-weight:700;

}

/* =========================================
NEWS BOX
========================================= */

.news-modern-box{

    background:var(--white);

    border-radius:26px;

    padding:24px;

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

}

.news-header{

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

    margin-bottom:20px;

}

.news-header h3{

    font-size:28px;

    color:var(--dark);

}

.news-header a{

    font-size:12px;

    color:var(--maroon);

    font-weight:700;

}

.news-scroll-area{

    max-height:520px;

    overflow-y:auto;

    padding-right:6px;

}

.news-item{

    display:flex;

    gap:16px;

    padding:18px;

    border-radius:18px;

    background:#faf8f4;

    margin-bottom:14px;

}

.news-date{

    min-width:62px;
    height:62px;

    border-radius:18px;

    background:var(--maroon);

    color:var(--white);

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

    text-align:center;

    font-size:11px;
    font-weight:700;

    line-height:1.4;

}

.news-content h4{

    font-size:15px;

    color:var(--dark);

    line-height:1.6;

    margin-bottom:10px;

}

.news-content a{

    font-size:12px;

    color:var(--maroon);

    font-weight:700;

}

/* =========================================
EVENTS & ACHIEVEMENTS
========================================= */

.event-achievement-section{

    padding:70px 0;

}

.event-achievement-grid{

    display:grid;

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

    gap:22px;

}

.event-modern-card{

    overflow:hidden;

    border-radius:24px;

    background:var(--white);

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

    transition:.4s ease;

}

.event-modern-card:hover{

    transform:translateY(-6px);

}

.event-image{

    height:240px;

}

.event-image img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.event-content{

    padding:22px;

}

.event-content span{

    color:var(--gold);

    font-size:11px;
    font-weight:700;

    display:block;

    margin-bottom:12px;

}

.event-content h3{

    font-size:20px;

    color:var(--dark);

    margin-bottom:10px;

}

.event-content p{

    font-size:13px;

    line-height:1.8;

}

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

.modern-gallery-section{

    padding:70px 0;

    background:#faf8f4;

}

.gallery-top-bar{

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

    gap:20px;

    margin-bottom:34px;

}

.gallery-mini-title{

    display:inline-block;

    margin-bottom:12px;

    color:var(--maroon);

    font-size:12px;
    font-weight:700;

}

.gallery-top-bar h2{

    font-size:34px;

    color:var(--dark);

}

.gallery-tabs{

    display:flex;
    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}

.gallery-tabs button{

    height:40px;

    padding:0 18px;

    border:none;

    border-radius:12px;

    background:var(--white);

    color:var(--dark);

    font-size:12px;
    font-weight:700;

    cursor:pointer;

}

.gallery-tabs button.active{

    background:var(--maroon);

    color:var(--white);

}

.modern-gallery-grid{

    display:grid;

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

    gap:18px;

}

.gallery-item{

    overflow:hidden;

    border-radius:22px;

    height:220px;

}

.gallery-item.large{

    grid-column:span 2;

    grid-row:span 2;

    height:458px;

}

.gallery-item.wide{

    grid-column:span 2;

}

.gallery-item img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:1s ease;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

/* =========================================
ACTIVITIES
========================================= */

.activities-section-modern{

    padding:70px 0 90px;

}

.activities-modern-grid{

    display:grid;

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

    gap:22px;

}

.activity-modern-box{

    background:#faf8f4;

    border-radius:24px;

    padding:30px 24px;

    text-align:center;

    transition:.4s ease;

}

.activity-modern-box:hover{

    transform:translateY(-6px);

    background:var(--maroon);

}

.activity-modern-box:hover h3,
.activity-modern-box:hover p{

    color:var(--white);

}

.activity-icon{

    width:62px;
    height:62px;

    border-radius:20px;

    margin:auto auto 20px;

    background:
    linear-gradient(
        135deg,
        var(--gold),
        var(--accent)
    );

    color:var(--white);

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

    font-size:22px;

}

.activity-modern-box h3{

    font-size:20px;

    color:var(--dark);

    margin-bottom:12px;

}

.activity-modern-box p{

    font-size:13px;

    line-height:1.8;

}

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

@media(max-width:1200px){

    .mentor-news-grid,
    .event-achievement-grid,
    .activities-modern-grid{

        grid-template-columns:1fr 1fr;

    }

    .modern-gallery-grid{

        grid-template-columns:1fr 1fr;

    }

}

@media(max-width:768px){

    .mentor-news-grid,
    .mentor-cards-wrapper,
    .event-achievement-grid,
    .modern-gallery-grid,
    .activities-modern-grid{

        grid-template-columns:1fr;

    }

    .gallery-top-bar{

        flex-direction:column;
        align-items:flex-start;

    }

    .gallery-item.large,
    .gallery-item.wide{

        grid-column:auto;
        grid-row:auto;

        height:240px;

    }

    .mentor-side h2,
    .gallery-top-bar h2{

        font-size:28px;

    }

}

/* =========================================
SLIDER ANIMATION CSS
ADD IN style.css
========================================= */

.hero-slider{

    position:relative;

    width:100%;
    height:100%;

}

.hero-slide{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transition:
    opacity 1s ease,
    visibility 1s ease;

}

.hero-slide.active{

    opacity:1;

    visibility:visible;

    z-index:2;

}

.hero-slide img{

    width:100%;
    height:100%;

    object-fit:cover;

}
/* =========================================
ACHIEVEMENTS
========================================= */

.achievement-modern{

    padding:90px 0;

    background:
    linear-gradient(
        135deg,
        #1f2328,
        #313840
    );

}

.achievement-wrapper-modern{

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

    gap:40px;

}

.achievement-left{

    max-width:520px;

}

.achievement-left h2{

    font-size:42px;

    line-height:1.2;

    color:var(--white);

    margin-bottom:18px;

}

.achievement-left p{

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

    line-height:1.9;

}

.achievement-stats-modern{

    display:flex;
    align-items:center;

    gap:18px;

}

.achievement-card-modern{

    min-width:170px;

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

    border-radius:24px;

    padding:34px 24px;

    text-align:center;

}

.achievement-card-modern h3{

    font-size:38px;

    color:var(--accent);

    margin-bottom:8px;

}

.achievement-card-modern p{

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

}

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

.modern-footer{

    position:relative;

    background:#111;

    overflow:hidden;

}

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

.footer-top{

    padding:75px 0 55px;

    background:
    linear-gradient(
        135deg,
        #1b1b1b,
        #111
    );

    position:relative;

}

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

.footer-grid{

    display:grid;

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

    gap:50px;

}

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

.footer-logo{

    margin-bottom:22px;

}

.footer-logo img{

    height:72px;

    width:auto;

}

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

.footer-about p{

    font-size:14px;

    line-height:1.9;

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

    margin-bottom:26px;

    max-width:360px;

}

/* =========================================
HEADING
========================================= */

.footer-column h3{

    color:#fff;

    font-size:18px;

    margin-bottom:24px;

    position:relative;

    padding-bottom:12px;

}

.footer-column h3::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:48px;
    height:3px;

    background:var(--gold);

    border-radius:20px;

}

/* =========================================
LISTS
========================================= */

.footer-column ul{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer-column ul li a{

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

    font-size:14px;

    transition:.35s;

    display:inline-flex;

    align-items:center;

    gap:10px;

}

.footer-column ul li a:hover{

    color:var(--gold);

    transform:translateX(4px);

}

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

.footer-socials{

    display:flex;

    align-items:center;

    gap:12px;

}

.footer-socials a{

    width:42px;
    height:42px;

    border-radius:14px;

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

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

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

    color:#fff;

    font-size:15px;

    transition:.35s;

}

.footer-socials a:hover{

    background:var(--gold);

    color:#111;

    transform:translateY(-4px);

}

/* =========================================
BOTTOM
========================================= */

.footer-bottom{

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

    padding:20px 0;

    background:#0b0b0b;

}

.footer-bottom-wrapper{

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.footer-bottom-wrapper p{

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

    font-size:13px;

    line-height:1.7;

}

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

@media(max-width:991px){

    .footer-grid{

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

        gap:40px;

    }

}

@media(max-width:600px){

    .footer-top{

        padding:60px 0 40px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:34px;

    }

    .footer-logo img{

        height:60px;

    }

}