/* =====================================================
   VASHISTHA GROUP OF SCHOOLS
   PREMIUM DRONE.IO INSPIRED THEME
===================================================== */

:root{

    --primary:#C62828;          /* Premium Red */
    --primary-dark:#8E1B1B;     /* Dark Red */

    --secondary:#F4B400;        /* Luxury Gold */
    --secondary-dark:#D89B00;

    --light:#FFF8F0;            /* Warm White */

    --dark:#121212;             /* Rich Black */
    --dark-2:#1E1E1E;

    --white:#FFFFFF;

    --text:#3A3A3A;
    --text-light:#6B7280;

    --border:#F3E0C5;

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

    --shadow-lg:
    0 25px 60px rgba(198,40,40,.20);
}

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

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

html{
    scroll-behavior:smooth;
}

body{

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

    overflow-x:hidden;

}

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

    font-family:
    'Cormorant Garamond',
    serif;

}

a{
    text-decoration:none;
}

img{
    max-width:100%;
}

section{
    position:relative;
}

/* =====================================================
   PREMIUM ANNOUNCEMENT BAR
===================================================== */

.announcement-bar{

    background:
    linear-gradient(
    90deg,
    #B71C1C,
    #C62828,
    #8E1414
    );

    border-bottom:3px solid #F4B400;

    height:50px;

    overflow:hidden;

    display:flex;

    align-items:center;

    position:relative;

    z-index:999;
}

/* Moving Track */

.announcement-track{

    display:flex;

    align-items:center;

    white-space:nowrap;

    width:max-content;

    animation:marquee 18s linear infinite;
}

/* Text */

.announcement-track span{

    display:flex;

    align-items:center;

    color:#fff;

    font-size:14px;

    font-weight:600;

    letter-spacing:.3px;

    padding-right:60px;
}

/* Separator */

.announcement-track span::after{

    content:"★";

    color:#F4B400;

    margin-left:25px;

    font-size:12px;
}

/* Smooth Continuous Scroll */

@keyframes marquee{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }

}

/* Pause on Hover */

.announcement-track:hover{

    animation-play-state:paused;
}

/* Mobile */

@media(max-width:768px){

    .announcement-bar{
        height:45px;
    }

    .announcement-track span{

        font-size:13px;

        padding-right:40px;
    }

}

/* Mobile */

@media(max-width:768px){

    .announcement-bar{

        height:45px;
    }

    .announcement-track span{

        font-size:13px;

        margin-right:50px;
    }

}

/* =====================================================
   PREMIUM CONTACT BAR
===================================================== */

.contact-bar{

    background:#FFFFFF;

    padding:14px 0;

    border-bottom:
    2px solid #F4B400;

    position:relative;

    z-index:100;
}

/* Contact Links */

.contact-bar a{

    color:#444444;

    font-size:14px;

    font-weight:500;

    transition:.35s ease;

}

.contact-bar a:hover{

    color:#C62828;

}

/* Icons */

.contact-bar i{

    color:#C62828;

    margin-right:8px;

    font-size:15px;

    transition:.35s;

}

.contact-bar a:hover i{

    color:#F4B400;

}

/* Social Icons */

.social-icons{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:12px;

}

/* Individual Social Icon */

.social-icons a{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #FFF7E0,
    #FFE9A8
    );

    color:#C62828;

    border:
    1px solid rgba(244,180,0,.35);

    transition:.4s ease;

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

}

/* Remove extra spacing from icons */

.social-icons a i{

    margin-right:0;

    color:#C62828;

    font-size:17px;

}

/* Hover */

.social-icons a:hover{

    background:
    linear-gradient(
    135deg,
    #C62828,
    #8E1414
    );

    border-color:#C62828;

    transform:
    translateY(-4px);

    box-shadow:
    0 12px 25px rgba(198,40,40,.25);

}

.social-icons a:hover i{

    color:#FFFFFF;

}

/* Mobile */

@media(max-width:991px){

    .contact-bar{

        padding:12px 0;

    }

    .contact-bar .col-lg-4{

        margin-bottom:10px;

    }

    .contact-bar .col-lg-4:last-child{

        margin-bottom:0;

    }

    .social-icons{

        justify-content:center;

        margin-top:8px;

    }

}

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

.custom-navbar{

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

    backdrop-filter:
    blur(20px);

    border-bottom:
    2px solid rgba(244,180,0,.20);

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

    padding:12px 0;

    transition:.4s;
}

/* ==========================================
   BRAND
========================================== */

.navbar-brand{

    display:flex;

    align-items:center;

    gap:15px;
}

.navbar-brand img{

    width:90px;
    height:90px;

    object-fit:contain;

    transition:.4s;
}

.navbar-brand:hover img{

    transform:scale(1.05);
}

.navbar-brand h5{

    margin-bottom:0;

    font-size:2rem;

    font-weight:700;

    color:#C62828;

    line-height:1;
}

.navbar-brand span{

    font-size:14px;

    color:#666666;

    font-weight:500;
}

/* ==========================================
   TOGGLER
========================================== */

.navbar-toggler{

    border:none;

    box-shadow:none !important;
}

.navbar-toggler:focus{

    box-shadow:none !important;
}

/* ==========================================
   NAV LINKS
========================================== */

.nav-link{

    margin-left:22px;

    font-weight:600;

    color:#222222 !important;

    position:relative;

    transition:.35s;
}

/* Gold Underline */

.nav-link::after{

    content:'';

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;

    height:3px;

    background:#F4B400;

    border-radius:50px;

    transition:.35s;
}

/* Hover */

.nav-link:hover{

    color:#C62828 !important;
}

.nav-link:hover::after{

    width:100%;
}

/* Active Link */

.nav-link.active{

    color:#C62828 !important;
}

.nav-link.active::after{

    width:100%;
}

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

.custom-navbar.scrolled{

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

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

    padding:10px 0;
}

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

@media(max-width:991px){

    .navbar-brand img{

        width:75px;
        height:75px;
    }

    .navbar-brand h5{

        font-size:1.7rem;
    }

    .navbar-collapse{

        margin-top:15px;

        background:#FFFFFF;

        border-radius:20px;

        padding:20px;

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

        border:
        1px solid rgba(244,180,0,.15);
    }

    .nav-link{

        margin-left:0;

        padding:12px 0;
    }

    .nav-link::after{

        bottom:4px;
    }

}

/* ==========================================
   SMALL DEVICES
========================================== */

@media(max-width:576px){

    .navbar-brand img{

        width:65px;
        height:65px;
    }

    .navbar-brand h5{

        font-size:1.4rem;
    }

    .navbar-brand span{

        font-size:12px;
    }

}

/* ==========================================
   GROUP HERO SECTION
========================================== */

.group-hero-section{
    position:relative;
    padding:35px 0 60px;
    background:
    linear-gradient(
    180deg,
    #FFFDF8 0%,
    #FFF7EC 100%
    );
    overflow:hidden;
}

.group-hero-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(198,40,40,.08);
    top:-150px;
    right:-150px;
    filter:blur(120px);
}

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

.group-hero-header{
    text-align:center;
    margin-bottom:30px;
}

.group-hero-header h1{
    font-size:28px;
    font-weight:700;
    color:#C62828;
    margin:0;
    line-height:1.3;
    font-family:'Poppins',sans-serif;
}

/* ==========================================
   MAIN LAYOUT
========================================== */

.group-hero-wrapper{
    display:grid;
    grid-template-columns:380px 1fr;
    gap:40px;
    align-items:center;
}

@media(max-width:991px){

    .group-hero-wrapper{
        grid-template-columns:1fr;
    }

    .group-logo-area{
        order:1;
    }

    .branches-area{
        order:2;
    }

}

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

.group-logo-area{
    display:flex;
    justify-content:center;
    align-items:center;
}

.group-logo-circle{
    width:400px;
    height:400px;
}

@media(max-width:576px){

    .group-logo-circle{
        width:220px;
        height:220px;
    }

}

.group-logo-circle::before{
    content:"";
    position:absolute;
    inset:-12px;
    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    rgba(244,180,0,.22),
    rgba(198,40,40,.06)
    );

    z-index:-1;
}

.group-logo-circle img{
    width:100%;
    height:100%;
    object-fit:contain;
}

@keyframes floatLogo{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0);
    }

}

/* ==========================================
   PREMIUM BRANCHES SECTION
========================================== */

.branches-area{

    background:
    linear-gradient(
    135deg,
    #8E1414 0%,
    #6D1010 100%
    );

    padding:30px;

    position:relative;

    overflow:hidden;

    border:
    1px solid rgba(244,180,0,.20);

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

    border-radius:
    60px 120px 60px 120px;

}

/* GOLD GLOW */

.branches-area::before{

    content:"";

    position:absolute;

    width:280px;
    height:280px;

    background:
    radial-gradient(
    circle,
    rgba(244,180,0,.18),
    transparent 70%
    );

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

    border-radius:50%;
}

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

.branches-title{

    text-align:center;

    margin-bottom:25px;
}

.branches-title h3{

    color:#ffffff;

    font-size:30px;

    font-weight:700;

    margin:0;

    display:inline-block;

    position:relative;
}

.branches-title h3::after{

    content:"";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:-10px;

    width:70px;

    height:4px;

    background:#F4B400;

    border-radius:20px;
}

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

.branches-grid{

    display:grid;

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

    gap:16px;
}

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

.branch-card{

    position:relative;

    overflow:hidden;

    min-height:100px;

    border-radius:18px;

    text-decoration:none;

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

    backdrop-filter:blur(8px);

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

    transition:.45s;

}

/* HOVER */

.branch-card:hover{

    transform:
    translateY(-6px);

    box-shadow:
    0 15px 35px rgba(244,180,0,.22);
}

/* ==========================================
   IMAGE LAYER
========================================== */

.branch-image{

    position:absolute;

    inset:0;

    opacity:0;

    transition:.45s;

    z-index:1;
}

.branch-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.45s;

    transform:scale(1.08);
}

.branch-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to right,
    rgba(0,0,0,.85),
    rgba(0,0,0,.35)
    );
}

.branch-card:hover .branch-image{

    opacity:1;
}

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

    transform:scale(1);
}

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

.branch-content{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:100px;

    padding:18px 22px;
}

/* SCHOOL */

.branch-content h5{

    color:#ffffff;

    margin:0 0 8px;

    font-size:16px;

    font-weight:600;
}

/* LOCATION */

.branch-content span{

    display:flex;

    align-items:center;

    gap:8px;

    color:#F4B400;

    font-size:14px;

    font-weight:600;
}

/* .branch-content span::before{

    content:"📍";

    font-size:15px;
} */

/* ARROW */

.branch-content i{

    color:#F4B400;

    font-size:22px;

    transition:.3s;
}

.branch-card:hover i{

    transform:
    translateX(6px);

    color:#ffffff;
}

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

.branch-center-row{

    display:flex;

    justify-content:center;

    margin-top:16px;
}

.center-card{

    width:320px;

    max-width:100%;
}

/* ==========================================
   PREMIUM HOVER BORDER
========================================== */

.branch-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:18px;

    border:
    1px solid transparent;

    transition:.4s;

    z-index:3;

    pointer-events:none;
}

.branch-card:hover::before{

    border-color:
    rgba(244,180,0,.50);
}

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

@media(max-width:991px){

    .branches-grid{

        grid-template-columns:1fr;
    }

    .center-card{

        width:100%;
    }

}

@media(max-width:768px){

    .branches-area{

        padding:22px;
    }

    .branches-title h3{

        font-size:24px;
    }

    .branch-content{

        min-height:90px;

        padding:16px 18px;
    }

    .branch-content h5{

        font-size:15px;
    }

}

@media(max-width:576px){

    .branches-area{

        border-radius:22px;
    }

    .branch-content span{

        font-size:13px;
    }

    .branch-content i{

        font-size:18px;
    }

}

/* ==========================================
   MOBILE & TABLET TOUCH EFFECT
========================================== */

@media (hover: none){

    .branch-image{

        opacity:1;

    }

    .branch-image img{

        transform:scale(1);

    }

    .branch-content h5{

        color:#ffffff;

    }

    .branch-content span{

        color:#FFD54A;

    }

    .branch-content i{

        color:#FFD54A;

    }

}

/* ==========================================
   OUR OTHER INSTITUTIONS
========================================== */

.institutions-section{
    margin-top:70px;
}

.institutions-title{
    text-align:center;
    margin-bottom:40px;
}

.institutions-title h3{
    font-size:42px;
    color:#8E1414;
    margin-bottom:15px;
    font-weight:700;
}

.institutions-title::after{
    content:"";
    display:block;
    width:90px;
    height:4px;
    background:#F4B400;
    margin:15px auto 0;
    border-radius:10px;
}

/* GRID */

.institutions-grid{

    display:grid;

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

    gap:25px;

    align-items:stretch;
}

/* CARD */

.institution-item{

    background:
    linear-gradient(
    135deg,
    #8E1414,
    #5A0C0C
    );

    border-radius:24px;

    min-height:260px;

    padding:30px 25px;

    text-align:center;

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

    border:1px solid rgba(244,180,0,.18);

    transition:.4s ease;

    position:relative;

    overflow:hidden;
}

.institution-item::before{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    background:
    rgba(244,180,0,.08);

    border-radius:50%;

    top:-80px;
    right:-80px;
}

/* HOVER */

.institution-item:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 25px 50px rgba(142,20,20,.25);
}

/* LOGO */

.institution-item img{

    width:100px;
    height:100px;

    object-fit:contain;

    margin-bottom:20px;

    position:relative;
    z-index:2;
}

/* TITLE */

.institution-item h6{

    color:#ffffff;

    font-size:22px;

    font-weight:600;

    line-height:1.4;

    margin:0;

    position:relative;
    z-index:2;
}

.institution-item:hover h6{
    color:#F4B400;
}
.institution-location{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    margin-top:14px;

    color:#F4B400;

    font-size:14px;

    font-weight:600;

    position:relative;

    z-index:2;
}

.institution-location i{

    color:#F4B400;

    font-size:15px;
}

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

@media(max-width:1200px){

    .institutions-grid{
        grid-template-columns:
        repeat(2,1fr);
    }

}

@media(max-width:768px){

    .institutions-grid{
        grid-template-columns:1fr;
    }

    .institution-item{
        min-height:220px;
    }

    .institution-item img{
        width:80px;
        height:80px;
    }

    .institution-item h6{
        font-size:20px;
    }

}

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

.about-section{

    padding:120px 0;

    background:#ffffff;

}

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

.section-heading{

    text-align:center;

}

.section-heading span{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

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

    color:#B71C1C;

    font-weight:600;

    letter-spacing:.5px;

}

.section-heading h2{

    font-size:4rem;

    margin-top:18px;

    color:#B71C1C;

    position:relative;

}

.section-heading h2::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    background:#F4B400;

    border-radius:50px;

    margin:18px auto 0;

}

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

.about-content h3{

    font-size:2.8rem;

    color:#1A1A1A;

    margin-bottom:20px;

    line-height:1.3;

}

.about-content p{

    color:#666666;

    line-height:1.9;

    margin-bottom:20px;

    font-size:16px;

}

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

.about-image{

    position:relative;

}

.about-image::before{

    content:'';

    position:absolute;

    width:100%;

    height:100%;

    background:
    linear-gradient(
    135deg,
    rgba(183,28,28,.10),
    rgba(244,180,0,.08)
    );

    border-radius:
    120px 25px 120px 25px;

    transform:rotate(-4deg);

}

.about-image img{

    position:relative;

    width:100%;

    border-radius:
    120px 25px 120px 25px;

    box-shadow:
    0 25px 60px rgba(183,28,28,.12);

    transition:.5s;

}

.about-image:hover img{

    transform:scale(1.03);

}

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

.premium-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:16px 34px;

    border-radius:60px;

    background:
    linear-gradient(
    135deg,
    #B71C1C,
    #8E1414
    );

    color:#ffffff;

    font-weight:600;

    transition:.4s;

    box-shadow:
    0 12px 28px rgba(183,28,28,.22);

}

.premium-btn i{

    transition:.3s;

}

.premium-btn:hover{

    background:
    linear-gradient(
    135deg,
    #F4B400,
    #E2A300
    );

    color:#111111;

    transform:translateY(-5px);

    box-shadow:
    0 20px 40px rgba(244,180,0,.28);

}

.premium-btn:hover i{

    transform:translateX(5px);

}

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

@media(max-width:768px){

    .about-section{

        padding:80px 0;

    }

    .section-heading h2{

        font-size:2.8rem;

    }

    .about-content h3{

        font-size:2rem;

    }

}

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

.navbar-scrolled{

    background:
    rgba(255,255,255,.98) !important;

    padding:8px 0 !important;

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

}

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

.cursor-glow{

    position:fixed;

    width:250px;
    height:250px;

    border-radius:50%;

    background:
    radial-gradient(
    rgba(132, 3, 9, 0.12),
    transparent 70%
    );

    pointer-events:none;

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

    z-index:0;

}

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

.admission-float-btn{

    position:fixed;

    right:25px;
    bottom:25px;

    width:70px;
    height:70px;

    border:none;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #C62828 0%,
    #8E1414 100%
    );

    color:#ffffff;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.4s ease;

    z-index:9999;

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

    overflow:hidden;
}

/* GOLD OUTER RING */

.admission-float-btn::before{

    content:"";

    position:absolute;

    inset:4px;

    border-radius:50%;

    border:2px solid rgba(244,180,0,.60);

}

/* ICON */

.admission-float-btn i{

    font-size:28px;

    color:#F4B400;

    position:relative;

    z-index:2;
}

/* SHOW BUTTON */

.admission-float-btn.show{

    opacity:1;

    visibility:visible;
}

/* HOVER */

.admission-float-btn:hover{

    transform:
    translateY(-6px)
    scale(1.05);

    box-shadow:
    0 20px 40px rgba(198,40,40,.45);
}

/* TOOLTIP */

.admission-float-btn span{

    position:absolute;

    right:85px;

    top:50%;

    transform:
    translateY(-50%);

    background:#8E1414;

    color:#ffffff;

    padding:10px 18px;

    border-radius:50px;

    white-space:nowrap;

    font-size:14px;

    font-weight:600;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    border:
    1px solid rgba(244,180,0,.35);
}

.admission-float-btn:hover span{

    opacity:1;

    visibility:visible;
}

/* PULSE ANIMATION */

.admission-float-btn::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    animation:pulseAdmission 2s infinite;

    border:
    2px solid rgba(244,180,0,.40);
}

@keyframes pulseAdmission{

    0%{

        transform:scale(1);

        opacity:1;
    }

    100%{

        transform:scale(1.4);

        opacity:0;
    }

}

/* MOBILE */

@media(max-width:768px){

    .admission-float-btn{

        width:62px;
        height:62px;

        right:18px;
        bottom:18px;
    }

    .admission-float-btn i{

        font-size:24px;
    }

    .admission-float-btn span{

        display:none;
    }

}

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

.footer-section{

    padding:80px 0;

    background:
    linear-gradient(
    135deg,
    #E9F1FA,
    #FFFFFF
    );

}

.footer-title{

    font-size:1.6rem;

    color:var(--text);

    margin-bottom:20px;

}

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

@media(max-width:1200px){

    .premium-logo-wrapper{

        width:450px;
        height:450px;

    }

}

@media(max-width:991px){

    .hero-heading h1{

        font-size:3.2rem;

    }

    .premium-logo-wrapper{

        width:380px;
        height:380px;

    }

    .logo-center{

        inset:24px;

    }

    /* .branches-grid{

        grid-template-columns:1fr;

    }

    .navbar-brand img{

        width:75px;
        height:75px;

    }

    .navbar-brand h5{

        font-size:1.7rem;

    } */

    .section-heading h2{

        font-size:3rem;

    }

    .about-content h3{

        font-size:2.3rem;

    }

}

@media(max-width:768px){

    .hero-section{

        padding:
        70px 0;

    }

    .hero-heading h1{

        font-size:2.5rem;

    }

    .hero-heading p{

        font-size:16px;

    }

    .premium-logo-wrapper{

        width:300px;
        height:300px;

    }

    .logo-center{

        inset:20px;

    }

    /* .social-icons{

        justify-content:center;

        margin-top:12px;

    }

    .section-title h2{

        font-size:2.5rem;

    }

    .section-heading h2{

        font-size:2.5rem;

    } */

    .about-content h3{

        font-size:2rem;

    }

    .about-section{

        padding:80px 0;

    }

}

@media(max-width:576px){

    .hero-heading h1{

        font-size:2rem;

    }

    .hero-subtitle{

        font-size:13px;

    }

    .premium-logo-wrapper{

        width:240px;
        height:240px;

    }

    .logo-center{

        inset:15px;

    }

    /* .navbar-brand img{

        width:60px;
        height:60px;

    }

    .navbar-brand h5{

        font-size:1.3rem;

    }

    .navbar-brand span{

        font-size:12px;

    }

    .branch-card{

        padding:16px;

    }

    .branch-card h6{

        font-size:18px;

    }

    .institution-logo{

        width:110px;
        height:110px;

    } */

    .section-title h2{

        font-size:2rem;

    }

    .section-heading h2{

        font-size:2rem;

    }

    .about-content h3{

        font-size:1.8rem;

    }

}
.group-name{

    font-size:2rem;
    font-weight:600;

    color:#00ABE4;

    margin-top:10px;

}

.hero-buttons{

    display:flex;
    justify-content:center;
    gap:15px;

    margin-top:30px;

    flex-wrap:wrap;

}

.outline-btn{

    padding:16px 34px;

    border-radius:60px;

    border:2px solid #00ABE4;

    color:#00ABE4;

    font-weight:600;

    transition:.4s;

}

.outline-btn:hover{

    background:#00ABE4;
    color:#fff;

}

.hero-stats{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.stat-box{

    background:#fff;

    padding:20px 28px;

    border-radius:20px;

    box-shadow:
    0 10px 30px rgba(0,171,228,.08);

}

.stat-box h3{

    margin:0;

    color:#00ABE4;

    font-size:2rem;

}

.stat-box span{

    color:#64748B;

}

.group-schools h5{

    margin-bottom:15px;

    color:#1E293B;

    font-weight:700;

}

.mini-school-card{

    display:flex;
    align-items:center;
    gap:15px;

    padding:18px;

    background:#fff;

    border-radius:18px;

    border:1px solid rgba(0,171,228,.10);

    box-shadow:
    0 10px 25px rgba(0,171,228,.06);

    transition:.35s;

    text-decoration:none;

    color:inherit;

    height:100%;

}

.mini-school-card:hover{

    transform:
    translateY(-6px);

    border-color:#00ABE4;

    box-shadow:
    0 20px 40px rgba(0,171,228,.15);

}

.mini-school-card img{

    width:60px;
    height:60px;

    object-fit:cover;

    border-radius:50%;

    flex-shrink:0;

}

.mini-school-card strong{

    display:block;

    font-size:15px;

    color:#1E293B;

    margin-bottom:4px;

}

.mini-school-card small{

    color:#64748B;

    display:block;

    line-height:1.5;

}

.mini-school-card .bi-arrow-right{

    margin-left:auto;

    color:#00ABE4;

    font-size:18px;

}

/* ==================================================
   BOARD OF DIRECTORS SECTION
================================================== */

.advisory-section{

    position:relative;

    background:#FFF8ED;

    padding:140px 0;

    overflow:hidden;

}

/* ==========================================
   SVG CURVES
========================================== */

.section-curve-top,
.section-curve-bottom{

    position:absolute;

    left:0;

    width:100%;

    height:90px;

    z-index:2;

}

.section-curve-top{

    top:-89px;

}

.section-curve-bottom{

    bottom:-89px;

}

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

.advisory-section .container{

    position:relative;

    z-index:5;

}

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

.section-header{

    text-align:center;

    margin-bottom:70px;

}

.section-header span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 28px;

    border-radius:50px;

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

    color:#B71C1C;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

}

.section-header h2{

    color:#B71C1C;

    font-size:4rem;

    font-weight:700;

    margin-top:20px;

    margin-bottom:18px;

    line-height:1.1;

    position:relative;

}

.section-header h2::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    background:#F4B400;

    border-radius:50px;

    margin:18px auto 0;

}

.section-header p{

    max-width:760px;

    margin:auto;

    color:#666666;

    font-size:17px;

    line-height:1.9;

}

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

.advisor-card{

    background:#ffffff;

    border:1px solid rgba(244,180,0,.18);

    border-radius:28px;

    padding:35px 28px;

    text-align:center;

    height:100%;

    transition:.4s ease;

    position:relative;

    overflow:hidden;

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

}

.advisor-card::before{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    background:
    rgba(244,180,0,.06);

    border-radius:50%;

    top:-80px;
    right:-80px;

}

.advisor-card:hover{

    transform:translateY(-10px);

    border-color:#F4B400;

    box-shadow:
    0 25px 55px rgba(244,180,0,.18);

}

/* ==========================================
   DIRECTOR IMAGE
========================================== */

.advisor-image{

    width:135px;
    height:135px;

    margin:auto;

    border-radius:50%;

    padding:5px;

    background:
    linear-gradient(
    135deg,
    #B71C1C,
    #F4B400
    );

    margin-bottom:25px;

    position:relative;

    z-index:2;

}

.advisor-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:50%;

    border:5px solid #ffffff;

}

/* ==========================================
   TEXT
========================================== */

.advisor-card h4{

    color:#111111;

    font-size:1.45rem;

    font-weight:700;

    margin-bottom:10px;

    position:relative;

    z-index:2;

}

.advisor-card h6{

    color:#B71C1C;

    font-size:13px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:18px;

    position:relative;

    z-index:2;

}

.advisor-card p{

    color:#666666;

    font-size:15px;

    line-height:1.8;

    margin-bottom:0;

    position:relative;

    z-index:2;

}

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

.advisor-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:22px;

    padding:13px 28px;

    border-radius:50px;

    background:
    linear-gradient(
    135deg,
    #B71C1C,
    #8E1414
    );

    color:#ffffff;

    font-size:14px;

    font-weight:600;

    transition:.35s;

    position:relative;

    z-index:2;

}

.advisor-btn:hover{

    background:#F4B400;

    color:#111111;

    transform:translateY(-3px);

}

.advisor-btn i{

    transition:.3s;

}

.advisor-btn:hover i{

    transform:translateX(5px);

}

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

@media(max-width:991px){

    .advisory-section{

        padding:110px 0;

    }

    .section-header h2{

        font-size:3rem;

    }

}

@media(max-width:768px){

    .section-header h2{

        font-size:2.4rem;

    }

    .section-header p{

        font-size:15px;

    }

    .advisor-card{

        padding:30px 22px;

    }

}

@media(max-width:576px){

    .section-header h2{

        font-size:2rem;

    }

    .advisor-image{

        width:110px;
        height:110px;

    }

    .section-curve-top,
    .section-curve-bottom{

        height:60px;

    }

    .section-curve-top{

        top:-59px;

    }

    .section-curve-bottom{

        bottom:-59px;

    }

}

/* ==========================================
   ACADEMIC PROGRAMS SECTION
========================================== */

.academic-programs-section{

    position:relative;

    padding:90px 0;

    background:
    linear-gradient(
    135deg,
    #8B0000 0%,
    #A50000 50%,
    #7A0000 100%
    );

    overflow:hidden;

}

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

.programs-header{

    max-width:800px;

    margin:auto;

    margin-bottom:60px;

    position:relative;

    z-index:2;

}

.program-tag{

    display:inline-block;

    padding:10px 24px;

    border-radius:50px;

    background:
    rgba(255,215,0,.15);

    color:#FFD700;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}

.programs-header h2{

    color:#ffffff;

    font-size:3.2rem;

    font-weight:700;

    margin:18px 0;

}

.programs-header p{

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

    font-size:17px;

    line-height:1.8;

}

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

.programs-grid{

    display:grid;

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

    gap:22px;

    position:relative;

    z-index:2;

}

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

.program-card{

    background:#ffffff;

    border-radius:22px;

    padding:28px 22px;

    text-align:center;

    transition:.4s ease;

    position:relative;

    overflow:hidden;

    min-height:340px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

}

/* TOP GOLD BORDER */

.program-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;

    height:4px;

    background:#FFD700;

}

.program-card:hover{

    transform:
    translateY(-8px);

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

}

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

.program-icon{

    width:80px;
    height:80px;

    border-radius:22px;

    background:
    linear-gradient(
    135deg,
    #FFD700,
    #F4B400
    );

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    color:#8B0000;

    margin-bottom:18px;

    transition:.4s;

}

.program-card:hover .program-icon{

    transform:
    scale(1.08);

}

/* ==========================================
   AGE BADGE
========================================== */

.age-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

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

    color:#8B0000;

    font-size:13px;

    font-weight:700;

    margin-bottom:18px;

}

/* ==========================================
   TEXT
========================================== */

.program-card h3{

    font-size:1.8rem;

    font-weight:700;

    color:#111111;

    margin-bottom:12px;

}

.program-card p{

    color:#666666;

    font-size:15px;

    line-height:1.8;

    margin:0;

}

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

@media(max-width:1200px){

    .programs-grid{

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

    }

}

@media(max-width:768px){

    .academic-programs-section{

        padding:80px 0;

    }

    .programs-header{

        margin-bottom:45px;

    }

    .programs-header h2{

        font-size:2.5rem;

    }

    .programs-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .program-card{

        min-height:auto;

        padding:25px 20px;

    }

}

@media(max-width:576px){

    .programs-header h2{

        font-size:2rem;

    }

    .programs-header p{

        font-size:15px;

    }

    .program-icon{

        width:70px;
        height:70px;

        font-size:28px;

    }

    .program-card h3{

        font-size:1.5rem;

    }

}

/* ==========================================
   MISSION & VISION
========================================== */

.mission-vision-section{

    padding:120px 0;

    background:
    linear-gradient(
    180deg,
    #FFFDF8,
    #FFF7EC
    );

    position:relative;

    overflow:hidden;

}

/* Soft Gold Glow */

.mission-vision-section::before{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    border-radius:50%;

    background:
    rgba(244,180,0,.08);

    top:-180px;
    right:-150px;

    filter:blur(120px);

}

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

.mv-header{

    text-align:center;

    margin-bottom:70px;

    position:relative;

    z-index:2;

}

.mv-tag{

    display:inline-block;

    padding:10px 24px;

    border-radius:50px;

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

    color:#B71C1C;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

}

.mv-header h2{

    margin-top:18px;

    font-size:4rem;

    font-weight:700;

    color:#B71C1C;

    line-height:1.1;

    position:relative;

}

.mv-header h2::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    background:#F4B400;

    border-radius:50px;

    margin:18px auto 0;

}

.mv-header p{

    max-width:700px;

    margin:20px auto 0;

    color:#666666;

    font-size:18px;

    line-height:1.8;

}

/* ==========================================
   WRAPPER
========================================== */

.mission-vision-wrapper{

    margin-top:70px;

    display:grid;

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

    gap:40px;

    align-items:center;

    position:relative;

    z-index:2;

}

/* ==========================================
   CARDS
========================================== */

.mission-card,
.vision-card{

    background:#ffffff;

    padding:45px;

    border-radius:30px;

    border:
    1px solid rgba(244,180,0,.18);

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

    transition:.4s;

    height:100%;

    position:relative;

    overflow:hidden;

}

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

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

    background:
    rgba(244,180,0,.06);

    top:-80px;
    right:-80px;

}

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

    transform:translateY(-10px);

    border-color:#F4B400;

    box-shadow:
    0 25px 55px rgba(244,180,0,.15);

}

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

.icon-box{

    width:80px;
    height:80px;

    border-radius:22px;

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

    background:
    linear-gradient(
    135deg,
    #B71C1C,
    #F4B400
    );

    color:#ffffff;

    font-size:34px;

    margin-bottom:25px;

}

/* ==========================================
   TEXT
========================================== */

.mission-card h3,
.vision-card h3{

    color:#B71C1C;

    margin-bottom:18px;

    font-size:2rem;

    font-weight:700;

}

.mission-card p,
.vision-card p{

    color:#666666;

    line-height:1.9;

    font-size:16px;

}

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

.center-emblem{

    display:flex;

    justify-content:center;

    align-items:center;

}

.emblem-ring{

    width:280px;
    height:280px;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #B71C1C,
    #F4B400
    );

    padding:10px;

    animation:
    rotateLogo 18s linear infinite;

    box-shadow:
    0 20px 60px rgba(183,28,28,.15);

}

.emblem-ring img{

    width:100%;
    height:100%;

    border-radius:50%;

    background:#ffffff;

    padding:25px;

    object-fit:contain;

}

@keyframes rotateLogo{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

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

@media(max-width:991px){

    .mission-vision-wrapper{

        grid-template-columns:1fr;

        gap:30px;

    }

    .center-emblem{

        order:-1;

    }

}

@media(max-width:768px){

    .mv-header h2{

        font-size:2.8rem;

    }

    .mission-card,
    .vision-card{

        padding:30px;

    }

    .emblem-ring{

        width:230px;
        height:230px;

    }

}

@media(max-width:576px){

    .mv-header h2{

        font-size:2.2rem;

    }

    .mv-header p{

        font-size:15px;

    }

    .icon-box{

        width:70px;
        height:70px;

        font-size:28px;

    }

}

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

.journey-section{

    position:relative;

    padding:140px 0;

    background:
    linear-gradient(
    135deg,
    #8E1414 0%,
    #6D1010 50%,
    #4D0909 100%
    );

    overflow:hidden;
}

/* GOLD GLOW */

.journey-section::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(244,180,0,.12),
    transparent 70%
    );

    top:-200px;
    right:-200px;
}

.journey-section::after{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(255,255,255,.04),
    transparent 70%
    );

    bottom:-200px;
    left:-200px;
}

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

.journey-header{

    max-width:850px;

    margin:auto;

    text-align:center;

    position:relative;

    z-index:2;
}

.journey-tag{

    display:inline-block;

    padding:12px 26px;

    border-radius:50px;

    background:
    rgba(244,180,0,.15);

    color:#F4B400;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

    border:
    1px solid rgba(244,180,0,.25);
}

.journey-header h2{

    margin-top:22px;

    font-size:4rem;

    color:#ffffff;

    font-weight:700;

    line-height:1.2;
}

.journey-header p{

    margin-top:20px;

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

    font-size:18px;

    line-height:1.9;
}

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

.journey-stats{

    display:grid;

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

    gap:25px;

    margin-top:70px;

    margin-bottom:100px;

    position:relative;

    z-index:2;
}

.stat-card{

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

    backdrop-filter:
    blur(10px);

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

    border-radius:24px;

    padding:35px;

    text-align:center;

    transition:.4s;
}

.stat-card:hover{

    transform:
    translateY(-8px);

    border-color:
    rgba(244,180,0,.35);

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

.stat-card h3{

    color:#F4B400;

    font-size:3rem;

    font-weight:700;

    margin-bottom:10px;
}

.stat-card span{

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

    font-size:15px;
}

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

.timeline{

    position:relative;

    z-index:2;
}

.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    width:4px;

    height:100%;

    background:
    linear-gradient(
    to bottom,
    #F4B400,
    #FFD95A
    );

    transform:
    translateX(-50%);
}

.timeline-item{

    position:relative;

    width:50%;

    margin-bottom:70px;
}

.timeline-item.left{

    padding-right:70px;
}

.timeline-item.right{

    margin-left:auto;

    padding-left:70px;
}

/* ==========================================
   YEAR CIRCLE
========================================== */

.timeline-year{

    width:80px;
    height:80px;

    background:
    linear-gradient(
    135deg,
    #F4B400,
    #FFD95A
    );

    color:#6D1010;

    border-radius:50%;

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

    font-weight:700;

    font-size:18px;

    position:absolute;

    top:25px;

    right:-40px;

    z-index:3;

    box-shadow:
    0 10px 30px rgba(244,180,0,.30);
}

.timeline-item.right .timeline-year{

    left:-40px;
}

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

.timeline-card{

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

    backdrop-filter:
    blur(12px);

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

    padding:35px;

    border-radius:24px;

    transition:.4s;
}

.timeline-card:hover{

    transform:
    translateY(-6px);

    border-color:
    rgba(244,180,0,.30);
}

.timeline-card.highlight{

    border:
    2px solid #F4B400;

    background:
    rgba(244,180,0,.08);
}

.timeline-card h4{

    color:#ffffff;

    margin-bottom:15px;

    font-size:24px;

    font-weight:600;
}

.timeline-card p{

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

    line-height:1.9;

    margin:0;
}

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

@media(max-width:991px){

    .journey-section{

        padding:100px 0;
    }

    .journey-header h2{

        font-size:3rem;
    }

    .journey-stats{

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

    .timeline::before{

        left:30px;
    }

    .timeline-item{

        width:100%;

        padding-left:90px !important;

        padding-right:0 !important;
    }

    .timeline-year{

        left:-10px !important;

        right:auto;
    }
}

@media(max-width:768px){

    .journey-header h2{

        font-size:2.4rem;
    }

    .journey-header p{

        font-size:16px;
    }

    .timeline-card{

        padding:25px;
    }
}

@media(max-width:576px){

    .journey-section{

        padding:80px 0;
    }

    .journey-stats{

        grid-template-columns:1fr;
    }

    .journey-header h2{

        font-size:2rem;
    }

    .stat-card h3{

        font-size:2.5rem;
    }

    .timeline-year{

        width:65px;
        height:65px;

        font-size:15px;
    }
}

/* ==========================================
   CAMPUS GALLERY SECTION
========================================== */

.campus-gallery-section{

    padding:140px 0;

    background:#ffffff;

    position:relative;

    overflow:hidden;
}

/* SOFT BACKGROUND EFFECTS */

.campus-gallery-section::before{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(244,180,0,.08),
    transparent 70%
    );

    top:-180px;
    right:-180px;
}

.campus-gallery-section::after{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(142,20,20,.05),
    transparent 70%
    );

    bottom:-150px;
    left:-150px;
}

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

.gallery-header{

    max-width:850px;

    margin:auto;

    margin-bottom:60px;

    position:relative;

    z-index:2;
}

.gallery-header span{

    display:inline-block;

    padding:12px 26px;

    border-radius:50px;

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

    color:#8E1414;

    font-size:14px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

    border:
    1px solid rgba(244,180,0,.20);
}

.gallery-header h2{

    color:#8E1414;

    font-size:4rem;

    margin-top:20px;

    margin-bottom:18px;

    font-weight:700;

    line-height:1.2;
}

.gallery-header p{

    color:#666666;

    font-size:17px;

    line-height:1.9;
}

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

.gallery-filters{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:60px;

    position:relative;

    z-index:2;
}

.filter-btn{

    border:none;

    padding:14px 32px;

    border-radius:50px;

    background:#ffffff;

    color:#8E1414;

    font-weight:600;

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

    transition:.4s;

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

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

    background:
    linear-gradient(
    135deg,
    #8E1414,
    #6D1010
    );

    color:#F4B400;

    border-color:#8E1414;

    transform:
    translateY(-3px);
}

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

.gallery-grid{

    columns:3 320px;

    column-gap:24px;

    position:relative;

    z-index:2;
}

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

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    margin-bottom:24px;

    break-inside:avoid;

    cursor:pointer;

    background:#ffffff;

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

    transition:.4s;
}

.gallery-item:hover{

    transform:
    translateY(-8px);

    box-shadow:
    0 25px 50px rgba(142,20,20,.18);
}

/* IMAGE */

.gallery-item img{

    width:100%;

    display:block;

    border-radius:24px;

    transition:.6s;
}

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

.gallery-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(142,20,20,.95),
    rgba(142,20,20,.40),
    transparent
    );

    display:flex;

    align-items:flex-end;

    padding:28px;

    opacity:0;

    transition:.4s;
}

.gallery-overlay h4{

    color:#ffffff;

    font-size:22px;

    font-weight:600;

    margin:0;

    transform:
    translateY(20px);

    transition:.4s;
}

/* HOVER EFFECT */

.gallery-item:hover img{

    transform:
    scale(1.08);
}

.gallery-item:hover .gallery-overlay{

    opacity:1;
}

.gallery-item:hover .gallery-overlay h4{

    transform:
    translateY(0);
}

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

.gallery-item.hide{

    display:none;
}

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

@media(max-width:1200px){

    .gallery-grid{

        columns:2 300px;
    }
}

@media(max-width:991px){

    .gallery-header h2{

        font-size:3rem;
    }
}

@media(max-width:768px){

    .campus-gallery-section{

        padding:100px 0;
    }

    .gallery-header h2{

        font-size:2.3rem;
    }

    .gallery-header p{

        font-size:16px;
    }

    .gallery-grid{

        columns:1;
    }

    .filter-btn{

        padding:12px 24px;
    }
}

@media(max-width:576px){

    .gallery-header h2{

        font-size:2rem;
    }

    .gallery-overlay h4{

        font-size:18px;
    }
}

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

.admission-section{

    padding:140px 0;

    background:
    linear-gradient(
    180deg,
    #FFF8EE 0%,
    #FFF4E3 100%
    );

    position:relative;

    overflow:hidden;
}

/* DECORATIVE SHAPES */

.admission-section::before{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(244,180,0,.10),
    transparent 70%
    );

    top:-180px;
    right:-180px;
}

.admission-section::after{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(142,20,20,.05),
    transparent 70%
    );

    bottom:-150px;
    left:-150px;
}

/* ==========================================
   LEFT SIDE
========================================== */

.admission-process{

    position:relative;

    z-index:2;
}

.section-tag{

    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

    background:
    rgba(244,180,0,.15);

    color:#8E1414;

    font-weight:600;

    font-size:14px;

    letter-spacing:1px;

    text-transform:uppercase;

    border:
    1px solid rgba(244,180,0,.20);

    margin-bottom:18px;
}

.admission-process h2{

    font-size:3.5rem;

    font-weight:700;

    color:#8E1414;

    margin-bottom:18px;
}

.admission-process p{

    color:#666666;

    line-height:1.9;

    font-size:16px;
}

/* ==========================================
   STEPS
========================================== */

.process-steps{

    margin-top:40px;
}

.process-step{

    display:flex;

    gap:18px;

    margin-bottom:22px;

    align-items:flex-start;
}

.step-number{

    min-width:58px;
    height:58px;

    border-radius:50%;

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

    background:
    linear-gradient(
    135deg,
    #8E1414,
    #6D1010
    );

    color:#F4B400;

    font-weight:700;

    font-size:16px;

    box-shadow:
    0 10px 20px rgba(142,20,20,.15);
}

.process-step h5{

    color:#8E1414;

    font-size:18px;

    margin-bottom:5px;

    font-weight:600;
}

.process-step p{

    margin:0;

    color:#666666;

    font-size:14px;

    line-height:1.7;
}

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

.admission-form-card{

    background:#ffffff;

    padding:45px;

    border-radius:30px;

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

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

    position:relative;

    z-index:2;
}

.admission-form-card h3{

    color:#8E1414;

    font-size:2rem;

    font-weight:700;

    margin-bottom:30px;
}

/* ==========================================
   FORM FIELDS
========================================== */

.form-control,
.form-select{

    height:60px;

    border-radius:16px;

    border:
    1px solid #E7E7E7;

    padding-left:18px;

    font-size:15px;

    transition:.3s;
}

.form-control:focus,
.form-select:focus{

    border-color:#F4B400;

    box-shadow:
    0 0 0 4px rgba(244,180,0,.12);

    outline:none;
}

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

.submit-options{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-top:15px;
}

.email-btn,
.whatsapp-btn{

    border:none;

    padding:16px 32px;

    border-radius:50px;

    color:#ffffff;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:10px;

    transition:.35s;
}

/* EMAIL */

.email-btn{

    background:
    linear-gradient(
    135deg,
    #8E1414,
    #6D1010
    );
}

.email-btn:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 15px 30px rgba(142,20,20,.25);
}

/* WHATSAPP */

.whatsapp-btn{

    background:#25D366;
}

.whatsapp-btn:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 15px 30px rgba(37,211,102,.25);
}

.email-btn i,
.whatsapp-btn i{

    font-size:18px;
}

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

@media(max-width:991px){

    .admission-section{

        padding:100px 0;
    }

    .admission-process{

        margin-bottom:50px;
    }

    .admission-process h2{

        font-size:2.8rem;
    }
}

@media(max-width:768px){

    .admission-form-card{

        padding:30px;
    }

    .admission-process h2{

        font-size:2.3rem;
    }

    .submit-options{

        flex-direction:column;
    }

    .email-btn,
    .whatsapp-btn{

        width:100%;

        justify-content:center;
    }
}

@media(max-width:576px){

    .admission-section{

        padding:80px 0;
    }

    .admission-process h2{

        font-size:2rem;
    }

    .admission-form-card{

        padding:25px;
    }

    .step-number{

        min-width:50px;
        height:50px;
    }
}

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

.premium-footer{

    background:
    linear-gradient(
    180deg,
    #0A0A0A 0%,
    #151515 50%,
    #0A0A0A 100%
    );

    padding:100px 0 30px;

    position:relative;

    overflow:hidden;
}

/* GOLD GLOW */

.premium-footer::before{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    background:
    rgba(244,180,0,.08);

    border-radius:50%;

    filter:blur(120px);

    top:-180px;
    right:-180px;
}

.premium-footer::after{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    background:
    rgba(244,180,0,.05);

    border-radius:50%;

    filter:blur(100px);

    bottom:-150px;
    left:-150px;
}

/* ==========================================
   BRAND
========================================== */

.footer-brand{

    position:relative;
    z-index:2;
}

.footer-brand img{

    width:100px;

    margin-bottom:20px;
}

.footer-brand h3{

    color:#ffffff;

    font-size:28px;

    font-weight:700;

    margin-bottom:15px;
}

.footer-brand p{

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

    line-height:1.9;

    max-width:340px;
}

/* ==========================================
   HEADINGS
========================================== */

.premium-footer h4{

    color:#ffffff;

    font-size:22px;

    font-weight:700;

    margin-bottom:25px;

    position:relative;
}

.premium-footer h4::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-10px;

    width:55px;
    height:3px;

    background:#F4B400;

    border-radius:20px;
}

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

.footer-links{

    list-style:none;

    padding:0;

    margin:0;
}

.footer-links li{

    margin-bottom:15px;
}

.footer-links a{

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

    text-decoration:none;

    transition:.35s;

    position:relative;
}

.footer-links a:hover{

    color:#F4B400;

    padding-left:8px;
}

.footer-links a::before{

    content:"";

    position:absolute;

    left:-14px;
    top:50%;

    transform:
    translateY(-50%);

    width:0;
    height:2px;

    background:#F4B400;

    transition:.35s;
}

.footer-links a:hover::before{

    width:8px;
}

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

.contact-list{

    list-style:none;

    padding:0;

    margin:0;
}

.contact-list li{

    display:flex;

    align-items:flex-start;

    gap:12px;

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

    margin-bottom:18px;

    line-height:1.7;
}

.contact-list i{

    color:#F4B400;

    font-size:18px;

    margin-top:3px;
}

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

.footer-social{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-top:70px;

    position:relative;

    z-index:2;
}

.footer-social a{

    width:55px;
    height:55px;

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

    border-radius:50%;

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

    border:
    1px solid rgba(244,180,0,.15);

    color:#ffffff;

    font-size:20px;

    transition:.4s;
}

.footer-social a:hover{

    background:#F4B400;

    color:#000000;

    transform:
    translateY(-6px);

    box-shadow:
    0 15px 35px rgba(244,180,0,.35);
}

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

.footer-bottom{

    text-align:center;

    margin-top:45px;

    padding-top:25px;

    border-top:
    1px solid rgba(244,180,0,.15);

    position:relative;

    z-index:2;
}

.footer-bottom p{

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

    margin:0;

    font-size:15px;
}

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

@media(max-width:991px){

    .footer-brand{

        text-align:center;

        margin-bottom:30px;
    }

    .footer-brand p{

        margin:auto;
    }

}

@media(max-width:768px){

    .premium-footer{

        text-align:center;
    }

    .premium-footer h4::after{

        left:50%;

        transform:translateX(-50%);
    }

    .contact-list li{

        justify-content:center;
    }

    .footer-social{

        flex-wrap:wrap;
    }

}






/* ==========================================
   SCHOOL LEADERS HERO
========================================== */



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

.school-leaders-section{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:
    linear-gradient(
    180deg,
    #680909 0%,
    #4A0707 100%
    );

}

.school-leaders-section::before{

    content:"";

    position:absolute;

    width:600px;
    height:600px;

    top:200px;
    left:-250px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(255,215,0,.12),
    transparent 70%
    );

}

.school-leaders-section::after{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    bottom:-300px;
    right:-250px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(255,255,255,.04),
    transparent 70%
    );

}

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

.school-leaders-heading{

    text-align:center;

    margin-bottom:80px;

}

.school-leaders-heading span{

    display:inline-block;

    padding:10px 25px;

    border-radius:50px;

    background:
    rgba(255,215,0,.15);

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

    color:#FFD54A;

    font-weight:700;

}

.school-leaders-heading h2{

    color:#ffffff;

    font-size:54px;

    font-weight:800;

    margin:20px 0;

}

.school-leaders-heading p{

    max-width:750px;

    margin:auto;

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

    line-height:1.9;

}

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

.school-leaders-card{

    display:flex;

    align-items:center;

    gap:60px;

    padding:45px;

    margin-bottom:55px;

    border-radius:40px;

    background:
    linear-gradient(
    135deg,
    #FFF9E5,
    #FFE7A0
    );

    position:relative;

    overflow:hidden;

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

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

    transition:.4s;

}

.school-leaders-card:hover{

    transform:
    translateY(-8px);

    box-shadow:
    0 40px 90px rgba(0,0,0,.28);

}

.school-leaders-card::before{

    content:"";

    position:absolute;

    width:280px;
    height:280px;

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

    border-radius:50%;

    background:
    rgba(255,215,0,.15);

}

.school-leaders-reverse{

    flex-direction:row-reverse;

}

.school-leaders-reverse::before{

    left:-120px;
    right:auto;

}

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

.school-leaders-image{

    width:350px;

    flex-shrink:0;

    position:relative;

    z-index:2;

}

.school-leaders-image img{

    width:100%;

    height:420px;

    object-fit:cover;

    border-radius:30px;

    border:6px solid #FFD54A;

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

    transition:.4s;

}

.school-leaders-card:hover .school-leaders-image img{

    transform:scale(1.03);

}

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

.school-leaders-content{

    flex:1;

    position:relative;

    z-index:2;

}

.school-leaders-badge{

    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

    background:
    linear-gradient(
    135deg,
    #FFD54A,
    #FFF3B0
    );

    color:#7A0F0F;

    font-size:14px;

    font-weight:700;

    margin-bottom:25px;

}

.school-leaders-content h3{

    font-size:52px;

    font-weight:800;

    color:#6A0E0E;

    line-height:1.2;

    margin-bottom:12px;

}

.school-leaders-content h3::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    margin-top:15px;

    border-radius:20px;

    background:
    linear-gradient(
    90deg,
    #FFD54A,
    #FFF3B0
    );

}

.school-leaders-content h6{

    color:#A35D00;

    font-size:26px;

    font-weight:700;

    margin-bottom:25px;

}

.school-leaders-content p{

    color:#4A3824;

    font-size:18px;

    line-height:2;

    margin:0;

}

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

@media(max-width:991px){

    .school-leaders-card,
    .school-leaders-reverse{

        flex-direction:column;

        text-align:center;

        gap:30px;

    }

    .school-leaders-image{

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

    }

    .school-leaders-content h3{

        font-size:40px;

    }

    .school-leaders-content h3::after{

        margin-left:auto;
        margin-right:auto;

    }

}

@media(max-width:768px){

    .school-leaders-hero{

        padding:100px 0 90px;

    }

    .school-leaders-hero-content h1{

        font-size:48px;

    }

    .school-leaders-card{

        padding:30px;

        border-radius:30px;

    }

    .school-leaders-image img{

        height:340px;

    }

    .school-leaders-content h3{

        font-size:32px;

    }

    .school-leaders-content h6{

        font-size:22px;

    }

    .school-leaders-content p{

        font-size:16px;

        line-height:1.8;

    }

}

@media(max-width:576px){

    .school-leaders-hero-content h1{

        font-size:38px;

    }

    .school-leaders-card{

        padding:22px;

    }

    .school-leaders-image img{

        height:280px;

    }

    .school-leaders-content h3{

        font-size:28px;

    }

}