:root {
    --blue: #29176d;
    --blue-mid: #341d8a;
    --blue-light: #4a2faa;
    --sky: #ece8fb;
    --gold: #e8a020;
    --gold-lt: #f5bc52;
    --red: #d62b2b;
    --red-lt: #ff4545;
    --white: #ffffff;
    --off-white: #f7f5ff;
    --light-bg: #eeeafb;
    --text-dark: #1a1240;
    --text-mid: #3d3475;
    --text-muted: #7a70a0;
    --border: #d4cef7;
    --ff-head: 'Fredoka One', Georgia, serif;
    --ff-body: 'Nunito', sans-serif;
    --sh-sm: 0 2px 12px rgba(41,23,109,.08);
    --sh-md: 0 6px 28px rgba(41,23,109,.13);
    --sh-lg: 0 14px 50px rgba(41,23,109,.18);
    --sh-gd: 0 6px 22px rgba(232,160,32,.3);
    --sh-rd: 0 6px 22px rgba(214,43,43,.3);
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 20px;
    --tr: .32s cubic-bezier(.4,0,.2,1);
}

a {
    text-decoration: none;
}

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

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--ff-body);
    color: var(--text-dark);
    background: var(--white);
    overflow-x: hidden
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--ff-head)
}

a {
    text-decoration: none !important;
    transition: color var(--tr)
}

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

.pad {
    padding: 80px 0
}

.pad-sm {
    padding: 56px 0
}

.section-label {
    font-family: var(--ff-body);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    display: block;
    margin-bottom: 8px
}

.section-title {
    font-size: clamp(1.7rem,3.5vw,2.5rem);
    color: var(--blue);
    line-height: 1.2;
    margin-bottom: 16px
}

.section-title span {
    color: var(--red)
}

.section-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px
}

.section-divider .line {
    height: 3px;
    background: var(--red);
    border-radius: 2px
}

.section-divider .line-lg {
    width: 36px
}

.section-divider .line-sm {
    width: 10px
}

.section-divider .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
    flex-shrink: 0
}

.section-sub {
    font-size: 0.99rem;
    color: var(--text-muted);
    line-height: 1.8
}

/* Buttons */
.btn-primary-vis {
    background: linear-gradient(135deg,var(--blue-light),var(--blue));
    color: #fff;
    font-family: var(--ff-head);
    font-size: .9rem;
    padding: 12px 30px;
    border-radius: 50px;
    border: none;
    box-shadow: var(--sh-md);
    transition: all var(--tr);
    display: inline-block
}

.btn-primary-vis:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(41,23,109,.3);
    color: #fff
}

.btn-gold-vis {
    background: linear-gradient(135deg,var(--gold),#c47d10);
    color: var(--blue);
    font-family: var(--ff-head);
    font-size: .9rem;
    padding: 12px 30px;
    border-radius: 50px;
    border: none;
    box-shadow: var(--sh-gd);
    transition: all var(--tr);
    display: inline-block
}

.btn-gold-vis:hover {
    transform: translateY(-2px);
    color: var(--blue)
}

.btn-red-vis {
    background: linear-gradient(135deg,var(--red-lt),var(--red));
    color: #fff;
    font-family: var(--ff-head);
    font-size: .9rem;
    padding: 12px 30px;
    border-radius: 50px;
    border: none;
    box-shadow: var(--sh-rd);
    transition: all var(--tr);
    display: inline-block
}

.btn-red-vis:hover {
    transform: translateY(-2px);
    color: #fff
}

.btn-outline-vis {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.75);
    font-family: var(--ff-head);
    font-size: .9rem;
    padding: 11px 28px;
    border-radius: 50px;
    transition: all var(--tr);
    display: inline-block
}

.btn-outline-vis:hover {
    background: #fff;
    color: var(--blue)
}

/* ========== ANNOUNCEMENT BAR ========== */
#announcementBar {
    background: linear-gradient(90deg,var(--blue) 0%,var(--blue-mid) 50%,var(--blue) 100%);
    padding: 9px 0;
    border-bottom: 2px solid var(--red);
    overflow: hidden;
    position: relative
}

#announcementBar::before,#announcementBar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2
}

#announcementBar::before {
    left: 0;
    background: linear-gradient(90deg,var(--blue),transparent)
}

#announcementBar::after {
    right: 0;
    background: linear-gradient(-90deg,var(--blue),transparent)
}

.marquee-wrap {
    overflow: hidden;
    position: relative
}

.marquee-track {
    display: flex;
    gap: 0;
    animation: marqueeScroll 28s linear infinite;
    white-space: nowrap
}

.marquee-track:hover {
    animation-play-state: paused
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0)
    }

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

.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 40px;
    font-family: var(--ff-body);
    font-size: .8rem;
    font-weight: 600;
    color: rgba(255,255,255,.9);
    letter-spacing: .04em
}

.marquee-item i {
    color: var(--gold-lt);
    font-size: .78rem
}

.marquee-sep {
    color: rgba(255,255,255,.25);
    padding: 0 8px;
    font-size: 1rem
}

/* ========== TOP BAR ========== */
#topBar {
    background: var(--off-white);
    border-bottom: 1px solid var(--border);
    padding: 7px 0
}

.tb-contact {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap
}

.tb-contact-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--ff-body);
    font-size: .78rem;
    color: var(--text-mid)
}

.tb-contact-item i {
    color: var(--blue-light);
    font-size: .8rem
}

.tb-contact-item a {
    color: var(--text-mid)
}

.tb-contact-item a:hover {
    color: var(--blue)
}

.tb-links {
    display: flex;
    align-items: center;
    gap: 8px
}

.tb-link-btn {
    font-family: var(--ff-head);
    font-size: .78rem;
    padding: 5px 14px;
    border-radius: 50px;
    transition: all var(--tr)
}

.tb-link-btn.primary {
    background: var(--blue);
    color: #fff
}

.tb-link-btn.primary:hover {
    background: var(--blue-light);
    color: #fff
}

.tb-link-btn.red {
    background: var(--red);
    color: #fff
}

.tb-link-btn.red:hover {
    background: var(--red-lt);
    color: #fff
}

/* ========== NAVBAR ========== */
#mainNav {
    background: var(--white);
    box-shadow: 0 2px 16px rgba(41,23,109,.1);
    padding: 0;
    transition: box-shadow var(--tr);
    position: sticky;
    top: 0;
    z-index: 1050
}

#mainNav.scrolled {
    box-shadow: 0 4px 28px rgba(41,23,109,.16)
}

/* Logo */
.vis-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    text-decoration: none
}

.vis-logo-img {
    height: 54px;
    width: auto;
    flex-shrink: 0
}

.vis-logo-text {
    line-height: 1
}

.vis-logo-name {
    font-family: var(--ff-head);
    font-size: 1.08rem;
    color: var(--blue);
    display: block;
    line-height: 1.15
}

.vis-logo-name em {
    font-style: normal;
    color: var(--red)
}

.vis-logo-tagline {
    font-family: var(--ff-body);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
    margin-top: 3px
}

/* Nav links */
.navbar-nav .nav-link {
    font-family: var(--ff-head)!important;
    font-size: .86rem!important;
    color: var(--text-dark)!important;
    padding: 22px 12px!important;
    position: relative;
    transition: color var(--tr)!important;
    font-weight: 500;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    height: 2px;
    background: var(--red);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--tr)
}

.navbar-nav .nav-link:hover::after,.navbar-nav .nav-link.active::after {
    transform: scaleX(1)
}

.navbar-nav .nav-link:hover,.navbar-nav .nav-link.active {
    color: var(--blue)!important
}

/* Dropdown arrow badge */
.navbar-nav .nav-link.dropdown-toggle::after {
    display: none
}

.navbar-nav .nav-link.dropdown-toggle::before {
    display: none
}

.dd-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: .52rem;
    margin-left: 4px;
    transition: all var(--tr);
    vertical-align: middle
}

.nav-item.dropdown:hover .dd-arrow,.nav-item.dropdown.show .dd-arrow {
    background: var(--blue);
    transform: rotate(180deg)
}

/* MEGAMENU */
.nav-item.dropdown.megamenu {
    position: static
}

.megamenu-panel {
    display: none;
    position: absolute;
    /* left: 0; */
    /* right: 0; */
    top: 100%;
    background: #fff;
    border-top: 3px solid var(--red);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--sh-lg);
    padding: 14px 16px;
    z-index: 9999;
    animation: dropFade .2s ease;
    width: 300px;
}

.nav-item.dropdown.megamenu:hover .megamenu-panel {
    display: block
}

.mega-col-title {
    font-family: var(--ff-head);
    font-size: .85rem;
    color: var(--blue);
    padding: 0 0 10px 0;
    border-bottom: 2px solid var(--light-bg);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 7px
}

.mega-col-title i {
    color: var(--red);
    font-size: .9rem
}

.mega-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ff-body);
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-mid);
    padding: 7px 0;
    transition: all var(--tr)
}

.mega-link i {
    color: var(--red);
    font-size: .72rem;
    width: 12px;
    flex-shrink: 0
}

.mega-link:hover {
    color: var(--blue);
    padding-left: 6px
}

/* Regular dropdown */
.dropdown-menu {
    border: none;
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    padding: 8px 0;
    min-width: 210px;
    border-top: 3px solid var(--red);
    animation: dropFade .2s ease
}

@keyframes dropFade {
    from {
        opacity: 0;
        transform: translateY(-8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.dropdown-item {
    font-family: var(--ff-body);
    font-size: .83rem;
    font-weight: 600;
    color: var(--text-mid);
    padding: 9px 20px;
    display: flex;
    align-items: center;
    gap: 9px;
    transition: all var(--tr)
}

.dropdown-item i {
    color: var(--red);
    font-size: .78rem;
    width: 14px
}

.dropdown-item:hover {
    background: var(--sky);
    color: var(--blue);
    padding-left: 26px
}

.nav-item.dropdown:not(.megamenu):hover>.dropdown-menu {
    display: block
}

.navbar-toggler {
    border: 1.5px solid var(--blue);
    border-radius: 8px;
    padding: 6px 10px
}

.navbar-toggler:focus {
    box-shadow: none
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%2329176d' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
}

/* ========== HERO ========== */
.hero-slide {
    height: 90vh;
    min-height: 540px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center
}

.hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,rgba(41,23,109,.55) 0%,rgba(41,23,109,.3) 60%,rgba(214,43,43,.15) 100%)
}

.hs1 {
    background-image: url('../images/banner2.webp')
}

.hs2 {
    background-image: url('../images/banner1.webp')
}

.hs3 {
    background-image: url('../images/banner4.webp')
}

.hs4 {
    background-image: url('../images/banner3.webp')
}

.hs5 {
    background-image: url('../images/banner5.jpg')
}

.carousel-control-prev,.carousel-control-next {
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,.12);
    border: 1.5px solid rgba(255,255,255,.25);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 20px;
    backdrop-filter: blur(6px);
    transition: all var(--tr)
}

.carousel-control-prev:hover,.carousel-control-next:hover {
    background: var(--red);
    border-color: var(--red)
}

.carousel-indicators {
    bottom: 22px
}

.carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.4);
    border: none;
    transition: all var(--tr)
}

.carousel-indicators .active {
    background: var(--red);
    width: 26px;
    border-radius: 4px
}

/* Stats Bar */
#statsBar {
    background: var(--blue);
    padding: 0;
    border-bottom: 3px solid var(--red)
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 28px;
    border-right: 1px solid rgba(255,255,255,.1);
    flex: 1
}

.stat-item:last-child {
    border-right: none
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--gold-lt);
    flex-shrink: 0
}

.stat-num {
    font-family: var(--ff-head);
    font-size: 2rem;
    color: #fff;
    line-height: 1
}

.stat-num span {
    font-size: 1.1rem;
    color: var(--gold-lt)
}

.stat-label {
    font-family: var(--ff-body);
    font-size: 1.0rem;
    color: rgba(255,255,255,.6);
    text-transform: uppercase;
    /* letter-spacing:.08em; */
    margin-top: 2px
}

/* ========== ABOUT ========== */
#about {
    background: var(--white)
}

.about-img-wrap {
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-lg);
    position: relative
}

.about-img-wrap img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    transition: transform .7s ease
}

.about-img-wrap:hover img {
    transform: scale(1.04)
}

.about-corner-tl {
    position: absolute;
    top: -14px;
    left: -14px;
    width: 70px;
    height: 70px;
    border-top: 4px solid var(--red);
    border-left: 4px solid var(--red);
    z-index: 2
}

.about-corner-br {
    position: absolute;
    bottom: -14px;
    right: -14px;
    width: 90px;
    height: 90px;
    border-bottom: 4px solid var(--blue);
    border-right: 4px solid var(--blue);
    z-index: 2
}

.about-badge-overlay {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 3;
    background: var(--blue);
    color: #fff;
    border-radius: var(--r-md);
    padding: 16px 20px;
    box-shadow: var(--sh-md);
    border-left: 4px solid var(--red)
}

.abo-num {
    font-family: var(--ff-head);
    font-size: 2.2rem;
    color: var(--gold);
    line-height: 1
}

.abo-lbl {
    font-size: .7rem;
    color: rgba(255,255,255,.65);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 2px
}

.about-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-body);
    font-size: .88rem;
    color: var(--text-mid);
    margin-bottom: 10px
}

.about-feature i {
    color: var(--red);
    font-size: .9rem
}

.enroll-box {
    background: linear-gradient(135deg,var(--sky),#dcdaff);
    border-radius: var(--r-lg);
    padding: 28px;
    border-left: 5px solid var(--blue);
    box-shadow: var(--sh-sm);
    margin-top: 28px
}

.enroll-box h4 {
    font-family: var(--ff-head);
    color: var(--blue);
    font-size: 1.2rem;
    margin-bottom: 8px
}

.enroll-box p {
    font-size: .88rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    line-height: 1.7
}

/* ========== VISION MISSION ========== */
#visionMission {
    background: linear-gradient(135deg,var(--blue) 0%,var(--blue-mid) 100%);
    position: relative;
    overflow: hidden
}

#visionMission::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1'%3E%3Ccircle cx='30' cy='30' r='22'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 60px
}

.vm-card {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r-lg);
    padding: 36px 28px;
    text-align: center;
    transition: all var(--tr);
    height: 100%
}

.vm-card:hover {
    background: rgb(51 28 136);
    transform: translateY(-6px);
    box-shadow: 0 18px 50px rgba(0,0,0,.2)
}

.vm-icon {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(214,43,43,.15);
    border: 2px solid rgba(214,43,43,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.8rem;
    color: #ff8080;
    transition: all var(--tr)
}

.vm-card:hover .vm-icon {
    background: var(--red);
    color: #fff;
    border-color: var(--red)
}

.vm-title {
    font-family: var(--ff-head);
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 12px
}

.vm-text {
    font-size: .98rem;
    color: rgba(255,255,255,.65);
    line-height: 1.8
}

/* ========== FACILITIES ========== */
#facilities {
    background: var(--off-white)
}

.facility-card {
    background: var(--white);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    border: 1px solid var(--border);
    transition: all var(--tr);
    height: 100%
}

.facility-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--sh-lg)
}

.facility-img {
    height: 180px;
    overflow: hidden;
    position: relative
}

.facility-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .65s ease
}

.facility-card:hover .facility-img img {
    transform: scale(1.1)
}

.facility-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,transparent 50%,rgba(41,23,109,.55) 100%)
}

.facility-icon-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    box-shadow: var(--sh-sm)
}

.facility-body {
    padding: 20px 22px
}

.facility-title {
    font-family: var(--ff-head);
    font-size: 1.1rem;
    color: var(--blue);
    margin-bottom: 7px
}

.facility-desc {
    font-size: .98rem;
    color: var(--text-muted);
    line-height: 1.7
}

/* ========== ACHIEVEMENTS ========== */
#achievements {
    background: var(--white)
}

.achieve-card {
    background: var(--white);
    border-radius: var(--r-lg);
    padding: 30px 26px;
    text-align: center;
    border: 1px solid var(--border);
    box-shadow: var(--sh-sm);
    transition: all var(--tr);
    position: relative;
    overflow: hidden;
    height: 100%
}

.achieve-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,var(--blue),var(--red))
}

.achieve-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--sh-lg)
}

.achieve-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--sky);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 1.6rem;
    color: var(--blue-light);
    transition: all var(--tr)
}

.achieve-card:hover .achieve-icon {
    background: var(--red);
    color: #fff;
    border-color: var(--red)
}

.achieve-title {
    font-family: var(--ff-head);
    font-size: 1.1rem;
    color: var(--blue);
    margin-bottom: 8px
}

.achieve-text {
    font-size: .98rem;
    color: var(--text-muted);
    line-height: 1.7
}

/* ========== WHY US ========== */
#whyUs {
    background: linear-gradient(135deg,#f0eeff 0%,#e8e4ff 100%)
}

.why-img-wrap {
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-lg)
}

.why-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 440px
}

.why-point {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: 12px;
    background: var(--white);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
    border-left: 4px solid transparent;
    transition: all var(--tr)
}

.why-point:hover {
    border-left-color: var(--red);
    box-shadow: var(--sh-md);
    transform: translateX(4px)
}

.why-point-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--sky);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--blue);
    transition: all var(--tr)
}

.why-point:hover .why-point-icon {
    background: var(--red);
    color: #fff
}

.why-point-title {
    font-family: var(--ff-head);
    font-size: 1rem;
    color: var(--blue);
    margin-bottom: 3px
}

.why-point-text {
    font-size: .98rem;
    color: var(--text-muted);
    line-height: 1.6
}

/* ========== TESTIMONIALS ========== */
#testimonials {
    background: var(--white)
}

.testi-card {
    background: var(--off-white);
    border-radius: var(--r-lg);
    padding: 32px 26px;
    border: 1px solid var(--border);
    box-shadow: var(--sh-sm);
    position: relative;
    transition: all var(--tr);
    height: 100%
}

.testi-card:hover {
    box-shadow: var(--sh-md);
    transform: translateY(-5px)
}

.testi-quote-icon {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 3.5rem;
    line-height: 1;
    color: rgba(41,23,109,.08);
    font-family: Georgia,serif;
    font-weight: 900
}

.testi-stars {
    color: var(--gold);
    font-size: .85rem;
    margin-bottom: 12px
}

.testi-text {
    font-size: .98rem;
    color: var(--text-mid);
    line-height: 1.85;
    font-style: italic;
    margin-bottom: 20px
}

.testi-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--red);
    flex-shrink: 0
}

.testi-name {
    font-family: var(--ff-head);
    font-size: 1rem;
    color: var(--blue)
}

.testi-role {
    font-size: .75rem;
    color: var(--text-muted)
}

/* ========== NEWS & EVENTS ========== */
#newsEvents {
    background: var(--off-white)
}

.news-card {
    background: var(--white);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    border: 1px solid var(--border);
    transition: all var(--tr);
    height: 100%
}

.news-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-lg)
}

.news-img {
    height: 200px;
    overflow: hidden;
    position: relative
}

.news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .65s ease
}

.news-card:hover .news-img img {
    transform: scale(1.08)
}

.news-date-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--blue);
    color: #fff;
    border-radius: var(--r-sm);
    padding: 6px 12px;
    font-family: var(--ff-body);
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.3
}

.news-body {
    padding: 20px 22px
}

.news-cat {
    font-family: var(--ff-body);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 8px
}

.news-title {
    font-family: var(--ff-head);
    font-size: 1.05rem;
    color: var(--blue);
    margin-bottom: 8px;
    line-height: 1.4
}

.news-excerpt {
    font-size: .98rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 14px
}

.news-link {
    font-family: var(--ff-body);
    font-size: .78rem;
    font-weight: 700;
    color: var(--blue-light);
    display: flex;
    align-items: center;
    gap: 5px;
    transition: gap var(--tr)
}

.news-link:hover {
    gap: 9px;
    color: var(--red)
}

/* ========== UPCOMING EVENTS SCROLL ========== */
.events-scroll-box {
    background: var(--white);
    border-radius: var(--r-lg);
    padding: 0;
    box-shadow: var(--sh-md);
    border-top: 4px solid var(--blue);
    overflow: hidden;
    height: 100%
}

.events-header {
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px
}

.events-header h4 {
    font-family: var(--ff-head);
    color: var(--blue);
    font-size: 1.2rem;
    margin: 0
}

.events-viewport {
    height: 410px;
    overflow: hidden;
    position: relative
}

.events-viewport::before,.events-viewport::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 36px;
    z-index: 2;
    pointer-events: none
}

.events-viewport::before {
    top: 0;
    background: linear-gradient(180deg,#fff,transparent)
}

.events-viewport::after {
    bottom: 0;
    background: linear-gradient(0deg,#fff,transparent)
}

.events-track {
    display: flex;
    flex-direction: column;
    gap: 0;
    animation: scrollUp 18s linear infinite
}

.events-track:hover {
    animation-play-state: paused
}

@keyframes scrollUp {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-50%)
    }
}

.event-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 22px;
    border-bottom: 1px dashed var(--border);
    flex-shrink: 0
}

.event-date {
    background: var(--blue);
    color: #fff;
    border-radius: var(--r-sm);
    padding: 8px 12px;
    text-align: center;
    flex-shrink: 0;
    font-family: var(--ff-body);
    line-height: 1.2
}

.event-date-day {
    font-size: 1.3rem;
    font-weight: 800;
    display: block
}

.event-date-month {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em
}

.event-title {
    font-family: var(--ff-head);
    font-size: 1rem;
    color: var(--blue);
    margin-bottom: 3px
}

.event-desc {
    font-size: .98rem;
    color: var(--text-muted);
    line-height: 1.6
}

.event-tag {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
    margin-bottom: 4px
}

.event-tag.holiday {
    background: #ffe4e4;
    color: var(--red)
}

.event-tag.festival {
    background: #fff3d0;
    color: #b07200
}

.event-tag.birthday {
    background: #e8e4ff;
    color: var(--blue)
}

.event-tag.event {
    background: #e4f0ff;
    color: #1a6ecc
}

/* ========== HOLIDAYS & FESTIVALS ========== */
#holidaysFestivals {
    background: var(--white)
}

.hf-card {
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    border: 1px solid var(--border);
    transition: all var(--tr);
    height: 100%
}

.hf-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-lg)
}

.hf-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px
}

.hf-header.holiday {
    background: linear-gradient(135deg,#c0392b,var(--red))
}

.hf-header.festival {
    background: linear-gradient(135deg,#e67e22,#f39c12)
}

.hf-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    flex-shrink: 0
}

.hf-header-title {
    font-family: var(--ff-head);
    font-size: 1.15rem;
    color: #fff
}

.hf-header-sub {
    font-family: var(--ff-body);
    font-size: .98rem;
    color: rgba(255,255,255,.75);
    letter-spacing: .06em
}

.hf-body {
    padding: 14px 20px;
    background: var(--white)
}

.hf-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px dashed var(--border);
    gap: 10px
}

.hf-item:last-child {
    border-bottom: none
}

.hf-name {
    font-family: var(--ff-body);
    font-size: .86rem;
    font-weight: 600;
    color: var(--text-dark)
}

.hf-date-pill {
    font-family: var(--ff-body);
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0
}

.hf-date-pill.red {
    background: #ffe4e4;
    color: var(--red)
}

.hf-date-pill.orange {
    background: #fff3d0;
    color: #b07200
}

/* ========== STUDENT BIRTHDAYS ========== */
#studentBirthdays {
    background: var(--off-white)
}

.bday-section-header {
    background: linear-gradient(135deg,var(--blue),var(--blue-mid));
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 20px 26px;
    display: flex;
    align-items: center;
    gap: 12px
}

.bday-month-pill {
    background: var(--red);
    color: #fff;
    font-family: var(--ff-head);
    font-size: .85rem;
    padding: 4px 14px;
    border-radius: 20px
}

.bday-card {
    background: var(--white);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    border: 1px solid var(--border);
    transition: all var(--tr)
}

.bday-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    transition: background var(--tr)
}

.bday-item:last-child {
    border-bottom: none
}

.bday-item:hover {
    background: var(--sky)
}

.bday-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--light-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-head);
    font-size: 1.1rem;
    color: var(--blue);
    border: 2px solid var(--red)
}

.bday-name {
    font-family: var(--ff-head);
    font-size: .98rem;
    color: var(--blue)
}

.bday-class {
    font-family: var(--ff-body);
    font-size: .74rem;
    color: var(--text-muted)
}

.bday-date-badge {
    margin-left: auto;
    flex-shrink: 0;
    background: linear-gradient(135deg,var(--red-lt),var(--red));
    color: #fff;
    font-family: var(--ff-head);
    font-size: .8rem;
    padding: 4px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px
}

.bday-today {
    background: linear-gradient(135deg,#fff3cc,#ffe066);
    border: 2px solid var(--gold)
}

.bday-today .bday-date-badge {
    background: linear-gradient(135deg,var(--gold),#c47d10);
    color: var(--blue)
}

/* ========== ADMISSION FORM (CTA) ========== */
#ctaBanner {
    background: linear-gradient(120deg,var(--blue) 0%,#1a0e4e 50%,var(--red) 100%);
    position: relative;
    overflow: hidden
}

#ctaBanner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1'%3E%3Cpath d='M40 5 L75 25 L75 55 L40 75 L5 55 L5 25 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 80px
}

.cta-geo1 {
    position: absolute;
    right: -80px;
    top: -80px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    border: 60px solid rgba(214,43,43,.12)
}

.cta-geo2 {
    position: absolute;
    left: -50px;
    bottom: -50px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    border: 40px solid rgba(255,255,255,.04)
}

.cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(214,43,43,.18);
    border: 1px solid rgba(214,43,43,.4);
    border-radius: 50px;
    padding: 6px 16px;
    font-family: var(--ff-body);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #ff9090;
    margin-bottom: 16px
}

.cta-title {
    font-family: var(--ff-head);
    font-size: clamp(2rem,5vw,3.2rem);
    color: #fff;
    line-height: 1.15;
    margin-bottom: 14px
}

.cta-title em {
    font-style: normal;
    color: var(--gold-lt)
}

.cta-sub {
    font-family: var(--ff-body);
    font-size: 1rem;
    color: rgba(255,255,255,.72);
    line-height: 1.8;
    margin-bottom: 30px;
    max-width: 560px
}

/* Form styles */
.adm-form-wrap {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r-lg);
    padding: 30px 28px
}

.adm-form-wrap h4 {
    font-family: var(--ff-head);
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 20px;
    text-align: center;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.1)
}

.adm-form-label {
    font-family: var(--ff-body);
    font-size: .75rem;
    font-weight: 700;
    color: rgba(255,255,255,.7);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block
}

.adm-input {
    width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.1);
    color: #fff;
    font-family: var(--ff-body);
    font-size: .88rem;
    padding: 10px 14px;
    transition: border-color var(--tr);
    outline: none
}

.adm-input::placeholder {
    color: rgba(255,255,255,.4)
}

.adm-input:focus {
    border-color: var(--gold-lt);
    background: rgba(255,255,255,.14)
}

.adm-input option {
    color: var(--text-dark);
    background: #fff
}

/* ========== BLOG ========== */
#blog {
    background: var(--white)
}

.blog-card {
    background: var(--white);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    border: 1px solid var(--border);
    transition: all var(--tr);
    height: 100%
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-lg)
}

.blog-img {
    height: 210px;
    overflow: hidden;
    position: relative
}

.blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .65s ease
}

.blog-card:hover .blog-img img {
    transform: scale(1.08)
}

.blog-body {
    padding: 22px 24px
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    flex-wrap: wrap
}

.blog-meta-item {
    font-family: var(--ff-body);
    font-size: .72rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px
}

.blog-meta-item i {
    color: var(--blue-light)
}

.blog-cat {
    font-family: var(--ff-body);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--red)
}

.blog-title {
    font-family: var(--ff-head);
    font-size: 1.08rem;
    color: var(--blue);
    line-height: 1.4;
    margin-bottom: 10px;
    display: block
}

.blog-title:hover {
    color: var(--red)
}

.blog-excerpt {
    font-size: .98rem;
    color: var(--text-muted);
    line-height: 1.75;
    margin-bottom: 14px
}

/* ========== FOOTER ========== */
#footer {
    background: linear-gradient(180deg,#150a3d 0%,#08041c 100%);
    color: rgba(255,255,255,.65);
    padding: 70px 0 0
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px
}

.footer-logo-img {
    height: 81px;
    width: auto;
    flex-shrink: 0;
    border-radius: 8px;
}

.footer-brand-name {
    font-family: var(--ff-head);
    color: #fff;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 500;
}

.footer-brand-sub {
    font-family: var(--ff-body);
    font-size: 0.8rem;
    color: #fff;
    /* letter-spacing: .14em; */
    text-transform: uppercase
}

.footer-about {
    font-size: .98rem;
    line-height: 1.8;
    color: rgba(255,255,255,.5);
    max-width: 300px;
    margin-bottom: 22px
}

.footer-social {
    display: flex;
    gap: 9px
}

.fsoc {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .88rem;
    transition: all var(--tr)
}

.fsoc:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
    transform: translateY(-3px)
}

.footer-heading {
    font-family: var(--ff-head);
    color: #fff;
    font-size: 1.05rem;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgb(255 255 255 / 98%);
    display: inline-block;
}

.footer-links {
    list-style: none;
    padding: 0
}

.footer-links li {
    margin-bottom: 9px
}

.footer-links a {
    font-family: var(--ff-body);
    font-size: .98rem;
    color: rgba(255,255,255,.5);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all var(--tr)
}

.footer-links a i {
    color: #7d7373;
    font-size: .68rem
}

.footer-links a:hover {
    color: var(--red);
    padding-left: 4px
}

.footer-contact-item {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin-bottom: 14px
}

.fci-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    background: #fff;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem
}

.fci-text {
    font-family: var(--ff-body);
    font-size: .98rem;
    color: rgba(255,255,255,.5);
    line-height: 1.6
}

.fci-text a {
    color: rgba(255,255,255,.5)
}

.fci-text a:hover {
    color: var(--red)
}

.footer-bottom {
    /* margin-top:54px; */
    border-top: 1px solid rgba(255,255,255,.07);
    padding: 18px 0
}

.footer-bottom-inner {
    display: flex;
    /* justify-content: space-between; */
    /* align-items: center; */
    flex-wrap: wrap;
    /* gap: 10px; */
    font-family: var(--ff-body);
    font-size: .98rem;
    color: #fff;
}

.footer-bottom-inner a {
    color: red;
}

/* Back to Top */
#btt {
    position: fixed;
    bottom: 26px;
    right: 26px;
    z-index: 9998;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 6px 22px rgba(214,43,43,.4);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: all var(--tr)
}

#btt.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0)
}

#btt:hover {
    background: var(--blue);
    transform: translateY(-3px) scale(1.05)
}

/* ========== OFFCANVAS MOBILE ========== */
.offcanvas {
    background: linear-gradient(160deg,#130a38 0%,#1c0f4e 100%)!important
}

.offcanvas-header {
    border-bottom: 1px solid rgba(214,43,43,.2)
}

.offcanvas-title {
    font-family: var(--ff-head);
    color: #fff!important;
    font-size: 1rem
}

.offcanvas .nav-link {
    font-family: var(--ff-head)!important;
    font-size: .9rem!important;
    color: rgba(255,255,255,.7)!important;
    padding: 11px 20px!important;
    border-bottom: 1px solid rgba(255,255,255,.05)!important;
    border-radius: 0!important
}

.offcanvas .nav-link:hover {
    color: var(--red-lt)!important;
    background: rgba(255,255,255,.04)!important
}

.offcanvas .dropdown-menu {
    background: rgba(255,255,255,.05)!important;
    border: none;
    border-left: 3px solid var(--red);
    margin-left: 16px;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    box-shadow: none;
    padding: 4px 0;
    position: static!important;
    transform: none!important
}

.offcanvas .dropdown-item {
    color: rgba(255,255,255,.55)!important;
    font-size: .8rem;
    padding: 8px 20px!important
}

.offcanvas .dropdown-item:hover {
    color: var(--red-lt)!important;
    background: rgba(255,255,255,.04)!important
}

.offcanvas .btn-close {
    filter: invert(1)
}

/* ========== RESPONSIVE ========== */
@media(max-width: 991px) {
    .nav-link {
        padding:12px 10px!important
    }

    .nav-link::after {
        display: none
    }

    .stat-item {
        padding: 16px 18px
    }

    .hero-slide {
        height: 75vh
    }
}

@media(max-width: 767px) {
    .pad {
        padding:60px 0
    }

    .hero-slide {
        height: 82vh
    }

    #statsBar .row {
        flex-direction: column
    }

    .stat-item {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.1)
    }

    .stat-item:last-child {
        border-bottom: none
    }
}

@media(max-width: 575px) {
    .hero-slide {
        height:90vh;
        min-height: 223px
    }

    .vis-logo-img {
        height: 44px
    }

    #topBar .tb-contact {
        gap: 10px
    }

    .tb-contact-item:nth-child(2) {
        display: none
    }
}


/* SECTION */
.inner-hero-modern {
  background: #e0f2fe;
  padding: 90px 0 80px;
  position: relative;
}

/* subtle soft shapes */
.inner-hero-modern::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  background: #d3edff;
  border-radius: 50%;
  top: 30px;
  left: -60px;
}

.inner-hero-modern::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  background: #d3edff;
  border-radius: 50%;
  bottom: 20px;
  right: -50px;
}

/* breadcrumb */
.breadcrumb-modern {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  padding: 8px 18px;
  border-radius: 50px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  margin-bottom: 25px;
  font-family: var(--ff-head);
}

.breadcrumb-modern a {
  text-decoration: none;
  color: #0f64df;
  font-size: 14px;
  transition: 0.3s;
}

.breadcrumb-modern a:hover {
  color: #0ea5e9;
}

.breadcrumb-modern .dot {
  width: 6px;
  height: 6px;
  background: #cbd5e1;
  border-radius: 50%;
}

.breadcrumb-modern .active {
  color: #080909;
  font-weight: 500;
}

/* TITLE */
.inner-title {
  font-size: 42px;
  font-weight: 700;
  color: #29176d;
  margin-bottom: 10px;
}

.inner-title span {
  color: #f43e3e;
}

/* SUBTITLE */
.inner-subtitle {
  font-size: 16px;
  color: #64748b;
  max-width: 600px;
  margin: auto;
  line-height: 1.7;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .inner-title {
    font-size: 28px;
  }
}
  
  
  
  :root {
    --maroon:   #7B1F2E;
    --gold:     #C9973A;
    --gold-lt:  #F2D98A;
    --cream:    #FDF8F0;
    --ink:      #1A1209;
    --gray:     #6B6560;
    --light:    #F5F0E8;
    --white:    #FFFFFF;
    --shadow:   0 4px 32px rgba(123,31,46,.12);
    --radius:   14px;
    --nav-h:    78px;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--white);overflow-x:hidden;}

  /* ── TICKER ─────────────────────────────── */
  .ticker-bar{background:var(--maroon);color:#fff;padding:8px 0;font-size:.78rem;letter-spacing:.04em;overflow:hidden;}
  .ticker-wrap{display:flex;align-items:center;gap:1.5rem;white-space:nowrap;animation:ticker 40s linear infinite;}
  .ticker-wrap span{color:var(--gold-lt);margin-right:.6rem;}
  @keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ── TOP INFO BAR ────────────────────────── */
  .top-bar{background:var(--ink);padding:6px 0;font-size:.8rem;color:#ccc;}
  .top-bar a{color:#ccc;text-decoration:none;transition:color .2s;}
  .top-bar a:hover{color:var(--gold-lt);}

  /* ── NAVBAR ──────────────────────────────── */
  .main-nav{background:var(--white);box-shadow:0 2px 18px rgba(0,0,0,.08);position:sticky;top:0;z-index:1000;height:var(--nav-h);}
  .navbar-brand .brand-title{font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:900;color:var(--maroon);line-height:1.15;}
  .navbar-brand .brand-sub{font-size:.68rem;color:var(--gray);letter-spacing:.12em;text-transform:uppercase;}
  .nav-link{font-size:.88rem;font-weight:500;color:var(--ink)!important;padding:.5rem 1rem!important;position:relative;}
  .nav-link::after{content:'';position:absolute;bottom:0;left:1rem;right:1rem;height:2px;background:var(--gold);transform:scaleX(0);transition:.25s;}
  .nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);}
  .btn-apply{background:var(--maroon);color:#fff!important;border-radius:50px;padding:.45rem 1.4rem!important;font-weight:600;font-size:.82rem;transition:background .2s,transform .2s;}
  .btn-apply:hover{background:var(--gold);transform:translateY(-1px);}
  .logo-circle{width:52px;height:52px;border-radius:50%;background:var(--maroon);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Bebas Neue';font-size:1.35rem;flex-shrink:0;}

  /* Dropdown */
  .dropdown-menu{border:none;box-shadow:0 12px 40px rgba(0,0,0,.12);border-radius:var(--radius);padding:1rem;min-width:260px;border-top:3px solid var(--maroon);}
  .dropdown-menu .col-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);margin-bottom:.5rem;}
  .dropdown-item{font-size:.84rem;padding:.38rem .8rem;border-radius:8px;color:var(--ink);transition:background .15s;}
  .dropdown-item:hover{background:var(--light);color:var(--maroon);}

  /* ── HERO ────────────────────────────────── */
  #hero{min-height:92vh;background:linear-gradient(135deg,#1A1209 0%,#7B1F2E 60%,#C9973A 100%);position:relative;display:flex;align-items:center;overflow:hidden;}
  .hero-pattern{position:absolute;inset:0;background-image:radial-gradient(circle at 20% 50%,rgba(201,151,58,.12) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,255,255,.05) 0%,transparent 40%);pointer-events:none;}
  .hero-badge{display:inline-block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);color:var(--gold-lt);font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.4rem 1.1rem;border-radius:50px;margin-bottom:1.2rem;}
  #hero h1{font-family:'Playfair Display',serif;font-size:clamp(2.4rem,6vw,5rem);font-weight:900;color:#fff;line-height:1.1;margin-bottom:1.4rem;}
  #hero h1 em{font-style:normal;color:var(--gold-lt);}
  #hero p{font-size:1.05rem;color:rgba(255,255,255,.75);max-width:540px;margin-bottom:2rem;}
  .hero-stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(6px);border-radius:var(--radius);padding:1rem 1.4rem;text-align:center;color:#fff;}
  .hero-stat .num{font-family:'Bebas Neue';font-size:2.2rem;color:var(--gold-lt);line-height:1;}
  .hero-stat .lbl{font-size:.72rem;opacity:.7;margin-top:.2rem;}
  .hero-img-wrap{position:relative;}
  .hero-img-wrap img{border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.4);width:100%;object-fit:cover;aspect-ratio:4/3;}
  .hero-badge-float{position:absolute;bottom:-18px;left:-20px;background:var(--gold);color:var(--ink);border-radius:var(--radius);padding:.9rem 1.3rem;box-shadow:var(--shadow);font-family:'Playfair Display',serif;}
  .hero-badge-float .years{font-size:2rem;font-weight:900;line-height:1;}
  .hero-badge-float .txt{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}

  /* ── SECTION TITLES ──────────────────────── */
  .sec-label{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem;}
  .sec-title{font-family:'Playfair Display',serif;font-size:clamp(1.7rem,3.5vw,2.6rem);font-weight:800;color:var(--ink);line-height:1.2;}
  .sec-title em{font-style:italic;color:var(--maroon);}
  .divider{width:48px;height:3px;background:linear-gradient(90deg,var(--maroon),var(--gold));border-radius:2px;margin:1rem 0 1.4rem;}

  /* ── ABOUT ───────────────────────────────── */
  #about{padding:6rem 0;background:var(--cream);}
  .about-img{border-radius:20px;overflow:hidden;position:relative;}
  .about-img img{width:100%;object-fit:cover;aspect-ratio:4/5;}
  .about-exp-pill{position:absolute;top:20px;right:-16px;background:var(--maroon);color:#fff;padding:1.2rem 1.5rem;border-radius:var(--radius);text-align:center;box-shadow:var(--shadow);}
  .about-exp-pill .n{font-family:'Bebas Neue';font-size:2.5rem;color:var(--gold-lt);line-height:1;}
  .about-exp-pill .t{font-size:.68rem;letter-spacing:.08em;opacity:.85;}
  .check-list{list-style:none;padding:0;}
  .check-list li{padding:.4rem 0;font-size:.95rem;display:flex;align-items:center;gap:.7rem;}
  .check-list li::before{content:'✦';color:var(--gold);font-size:.75rem;flex-shrink:0;}

  /* ── VISION MISSION ──────────────────────── */
  #vision{padding:5rem 0;/* background:var(--maroon); */}
  .vm-card{background: var(--maroon);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);padding:2.2rem;height:100%;}
  .vm-icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--ink);margin-bottom:1.2rem;}
  .vm-card h4{font-family:'Playfair Display',serif;font-size:1.3rem;color:#fff;margin-bottom:.8rem;}
  .vm-card p{color:rgba(255,255,255,.7);font-size:.92rem;line-height:1.7;}

  /* ── LEADERSHIP ──────────────────────────── */
  #leadership{padding:6rem 0;background:var(--white);}
  .leader-card{background:var(--cream);border-radius:20px;overflow:hidden;transition:transform .3s,box-shadow .3s;}
  .leader-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
  .leader-img{aspect-ratio:1;overflow:hidden;}
  .leader-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
  .leader-card:hover .leader-img img{transform:scale(1.05);}
  .leader-body{padding:1.5rem;}
  .leader-role{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin-bottom:.3rem;}
  .leader-name{font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:700;margin-bottom:.6rem;}
  .leader-quote{font-size:.88rem;color:var(--gray);font-style:italic;line-height:1.65;border-left:3px solid var(--gold);padding-left:.9rem;}

  /* ── FACULTY ─────────────────────────────── */
  #faculty{padding:5rem 0;background:var(--light);}
  .faculty-card{background:#fff;border-radius:var(--radius);padding:1.6rem;text-align:center;transition:box-shadow .3s;}
  .faculty-card:hover{box-shadow:var(--shadow);}
  .faculty-avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--gold);margin:0 auto 1rem;}
  .faculty-card h6{font-weight:700;margin-bottom:.2rem;}
  .faculty-card .subj{font-size:.8rem;color:var(--gold);font-weight:600;}
  .faculty-card .exp{font-size:.78rem;color:var(--gray);}

  /* ── ACADEMICS ───────────────────────────── */
  #academics{padding:6rem 0;background:var(--cream);}
  .prog-card{border-radius:var(--radius);overflow:hidden;position:relative;cursor:pointer;transition:transform .3s;}
  .prog-card:hover{transform:translateY(-4px);}
  .prog-bg{height:180px;background-size:cover;background-position:center;position:relative;}
  .prog-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(26,18,9,.85));}
  .prog-grade{position:absolute;bottom:12px;left:16px;color:#fff;z-index:1;font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:700;}
  .prog-body{background:#fff;padding:1.2rem 1.4rem;}
  .prog-body p{font-size:.86rem;color:var(--gray);margin:0;}

  .curriculum-tab .nav-link{border-radius:50px;padding:.55rem 1.5rem;font-size:.88rem;font-weight:500;color:var(--gray);border:2px solid transparent;}
  .curriculum-tab .nav-link.active{background:var(--maroon);color:#fff;border-color:var(--maroon);}

  /* ── ADMISSIONS ──────────────────────────── */
  #admissions{padding:6rem 0;background:var(--white);}
  .process-step{display:flex;gap:1.4rem;align-items:flex-start;padding:1.5rem;border-radius:var(--radius);transition:background .2s;}
  .process-step:hover{background:var(--light);}
  .step-num{width:44px;height:44px;border-radius:50%;background:var(--maroon);color:#fff;font-family:'Bebas Neue';font-size:1.3rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .step-content h6{font-weight:700;margin-bottom:.3rem;}
  .step-content p{font-size:.87rem;color:var(--gray);margin:0;}
  .fee-table thead th{background:var(--maroon);color:#fff;font-size:.85rem;border:none;}
  .fee-table tbody td{font-size:.88rem;vertical-align:middle;border-color:#f0ebe2;}
  .fee-table tbody tr:hover td{background:var(--light);}

  /* ── FACILITIES ──────────────────────────── */
  #facilities{padding:6rem 0;background:var(--light);}
  .facility-card{border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:0 2px 16px rgba(0,0,0,.06);transition:transform .3s,box-shadow .3s;}
  .facility-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
  .facility-img{height:200px;overflow:hidden;}
  .facility-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
  .facility-card:hover .facility-img img{transform:scale(1.06);}
  .facility-body{padding:1.4rem;}
  .facility-icon{width:40px;height:40px;background:var(--maroon);color:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:.8rem;}

  /* ── GALLERY ─────────────────────────────── */
  #gallery{padding:6rem 0;background:var(--cream);}
  .gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,220px);gap:12px;}
  .gallery-grid .g-item{border-radius:12px;overflow:hidden;position:relative;cursor:pointer;}
  .gallery-grid .g-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
  .gallery-grid .g-item:hover img{transform:scale(1.07);}
  .gallery-grid .g-item:first-child{grid-row:span 2;grid-column:span 2;}
  .gallery-grid .g-item .overlay{position:absolute;inset:0;background:rgba(123,31,46,.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:.3s;}
  .gallery-grid .g-item:hover .overlay{opacity:1;}
  .overlay-icon{color:#fff;font-size:2rem;}

  /* ── NEWS ────────────────────────────────── */
  #news{padding:6rem 0;background:var(--white);}
  .news-card{border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.07);transition:transform .3s;}
  .news-card:hover{transform:translateY(-4px);}
  .news-img{height:190px;overflow:hidden;position:relative;}
  .news-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
  .news-card:hover .news-img img{transform:scale(1.06);}
  .news-date-badge{position:absolute;bottom:0;left:0;background:var(--maroon);color:#fff;padding:.4rem .9rem;font-size:.78rem;font-weight:700;}
  .news-cat{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);}
  .news-body{padding:1.3rem;}

  /* ── TESTIMONIALS ────────────────────────── */
  #testimonials{padding:5rem 0;background:var(--maroon);}
  .test-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:2rem;height:100%;}
  .stars{color:var(--gold-lt);font-size:.9rem;margin-bottom:.8rem;}
  .test-text{color:rgba(255,255,255,.8);font-style:italic;font-size:.93rem;line-height:1.75;margin-bottom:1.2rem;}
  .test-author{display:flex;align-items:center;gap:.9rem;}
  .test-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);}
  .test-name{color:#fff;font-weight:600;font-size:.88rem;}
  .test-role{color:rgba(255,255,255,.55);font-size:.76rem;}

  /* ── CTA BANNER ──────────────────────────── */
  #ctaBanner{padding:5rem 0;background:linear-gradient(120deg,var(--ink) 0%,var(--maroon) 100%);position:relative;overflow:hidden;}
  #ctaBanner::before{content:'';position:absolute;right:-10%;top:-30%;width:500px;height:500px;background:radial-gradient(circle,rgba(201,151,58,.2),transparent 60%);}
  #ctaBanner h2{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4vw,3rem);color:#fff;font-weight:800;}
  #ctaBanner p{color:rgba(255,255,255,.7);font-size:1rem;}
  .btn-gold{background:var(--gold);color:var(--ink);font-weight:700;border-radius:50px;padding:.75rem 2rem;font-size:.95rem;transition:transform .2s,box-shadow .2s;}
  .btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,151,58,.4);}
  .btn-outline-w{border:2px solid rgba(255,255,255,.4);color:#fff;border-radius:50px;padding:.75rem 2rem;font-size:.95rem;transition:border-color .2s,color .2s;}
  .btn-outline-w:hover{border-color:#fff;color:#fff;}

  /* ── CONTACT ─────────────────────────────── */
  #contact{padding:6rem 0;background: #f5f5f5;}
  .contact-card{background:#fff;border-radius:var(--radius);padding:2rem;box-shadow:0 2px 12px rgba(0,0,0,.06);}
  .contact-icon{width:44px;height:44px;background:var(--maroon);color:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
  .form-control,.form-select{border-radius:10px;border:1.5px solid #e8e0d0;font-size:.9rem;padding:.7rem 1rem;}
  .form-control:focus,.form-select:focus{border-color:var(--maroon);box-shadow:0 0 0 3px rgba(123,31,46,.12);}
  .btn-submit{background:var(--maroon);color:#fff;border:none;border-radius:50px;padding:.75rem 2.2rem;font-weight:600;width:100%;transition:background .2s;}
  .btn-submit:hover{background:var(--gold);color:var(--ink);}
  .map-embed{border-radius:var(--radius);overflow:hidden;height:280px;}
  .map-embed iframe{width:100%;height:100%;border:none;}

  /* ── FOOTER ──────────────────────────────── */
  footer{background:var(--ink);color:rgba(255,255,255,.65);padding:4rem 0 1.5rem;}
  footer h6{color:#fff;font-family:'Playfair Display',serif;font-size:1rem;margin-bottom:1.2rem;}
  footer a{color:rgba(255,255,255,.55);text-decoration:none;font-size:.87rem;display:block;margin-bottom:.45rem;transition:color .2s;}
  footer a:hover{color:var(--gold-lt);}
  .footer-logo .brand-title{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:900;color:#fff;}
  .footer-logo .brand-sub{font-size:.7rem;color:rgba(255,255,255,.4);letter-spacing:.12em;text-transform:uppercase;}
  .footer-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:2.5rem;padding-top:1.2rem;font-size:.8rem;/* text-align:center; */color:rgba(255,255,255,.35);}
  .social-btn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);font-size:.95rem;transition:background .2s,color .2s;}
  .social-btn:hover{background:var(--gold);color:var(--ink);}

  /* ── BACK TO TOP ─────────────────────────── */
  #backTop{position:fixed;bottom:24px;right:24px;width:44px;height:44px;background:var(--maroon);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .3s;z-index:999;box-shadow:0 4px 16px rgba(123,31,46,.4);}
  #backTop.show{opacity:1;}

  /* ── UTILITY ─────────────────────────────── */
  .section-sep{height:4px;background:linear-gradient(90deg,var(--maroon),var(--gold),var(--maroon));opacity:.3;}
  @media(max-width:768px){
    .gallery-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:auto;}
    .gallery-grid .g-item:first-child{grid-column:span 2;grid-row:span 1;}
    #hero{min-height:auto;padding:5rem 0 3rem;}
    .hero-badge-float{display:none;}
  }