:root {
    --font-main: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-heading: "Outfit", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    --primary: #4c0082;
    --primary-dark: #2a004a;
    --primary-deep: #1d0033;
    --primary-light: #6a11b0;
    --primary-soft: #f4ebff;
    --primary-gradient: linear-gradient(135deg, #2a004a 0%, #4c0082 50%, #6f13b8 100%);
    --gold: #f5a623;
    --gold-dark: #c9820a;
    --gold-light: #ffc453;
    --gold-gradient: linear-gradient(135deg, #f5a623 0%, #d48b11 100%);
    --white: #ffffff;
    --dark: #120f1f;
    --text-main: #272338;
    --muted: #4e4a5e;
    --border: rgba(76, 0, 130, 0.12);
    --border-light: #f0e6fc;
    --shadow-sm: 0 4px 16px rgba(42, 0, 74, 0.06);
    --shadow: 0 16px 38px rgba(42, 0, 74, 0.10);
    --shadow-lg: 0 24px 50px rgba(42, 0, 74, 0.16);
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 28px;
    --radius-full: 9999px;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-main);
    background: var(--white);
    color: var(--text-main);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Keep decorative/positioned children from widening the mobile viewport. */
main,
.site-footer {
    overflow-x: clip;
}

/* BIBLICAL FOUNDATION */
.biblical-foundation-section {
    padding: 0 0 80px;
}

.biblical-foundation-card {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 34px;
    border: 1px solid rgba(76, 0, 130, 0.14);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #fffaf0 0%, #f8f0ff 100%);
    box-shadow: var(--shadow);
}

.biblical-foundation-icon {
    display: grid;
    place-items: center;
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    border-radius: 24px;
    background: var(--primary-gradient);
    color: var(--gold-light);
    font-size: 40px;
    animation: bible-float 3.2s ease-in-out infinite;
}

.biblical-foundation-content h2 {
    margin: 8px 0 10px;
    color: var(--primary-dark);
}

.biblical-foundation-content p {
    max-width: 760px;
}

.school-motto {
    margin-top: 14px;
    color: var(--primary-dark);
}

@keyframes bible-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-6px) rotate(2deg); }
}

.mission-list {
    display: grid;
    gap: 9px;
    margin-top: 14px;
    padding-left: 20px;
    list-style: disc;
}

.vision-mission-card.featured .mission-list {
    color: rgba(255, 255, 255, 0.94);
}

@media (max-width: 700px) {
    .biblical-foundation-card {
        align-items: flex-start;
        flex-direction: column;
        padding: 26px 22px;
    }

    .biblical-foundation-icon {
        flex-basis: 68px;
        width: 68px;
        height: 68px;
        font-size: 32px;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--dark);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
}

ul {
    list-style: none;
}

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

button {
    font-family: inherit;
    cursor: pointer;
}

.container {
    width: min(1200px, 92%);
    margin: 0 auto;
}

/* Keep flex/grid children from creating a page-wide horizontal scroll. */
.site-header,
.top-header,
.main-navbar,
.top-header-content,
.nav-content,
.brand,
.top-announcement,
.top-contact,
.nav-menu {
    min-width: 0;
}

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: var(--white);
    box-shadow: 0 8px 25px rgba(47, 0, 95, 0.08);
}

/* TOP HEADER */
.top-header {
    background: linear-gradient(135deg, var(--primary-deep) 0%, var(--primary-dark) 50%, var(--primary) 100%);
    color: var(--white);
    font-size: 13.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.top-header-content {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
}

.top-announcement {
    display: flex;
    align-items: center;
    gap: 10px;
}

.announcement-badge {
    background: var(--gold-gradient);
    color: var(--dark);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(245, 166, 35, 0.4);
}

.top-announcement p {
    font-weight: 600;
    letter-spacing: 0.1px;
    color: #f7f1ff;
    font-size: 13.5px;
}

.top-contact {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    white-space: nowrap;
}

.top-tiktok-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.12);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    color: #ffffff;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.25s ease;
}

.top-tiktok-link:hover {
    background: #000000;
    color: #25f4ee;
    border-color: #fe2c55;
    transform: translateY(-1px);
}

.top-divider {
    opacity: 0.35;
    font-size: 11px;
}

.top-contact a {
    color: var(--white);
    opacity: 0.95;
    font-weight: 600;
}

.top-contact a:hover {
    color: var(--gold-light);
}

/* MAIN NAVBAR */
.main-navbar {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}

.nav-content {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* BRAND */
.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-logo {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 6px 18px rgba(76, 0, 130, 0.18);
    transition: transform 0.3s ease;
}

.brand:hover .brand-logo {
    transform: scale(1.05);
}

.brand-text h1 {
    font-size: 27px;
    line-height: 1;
    color: var(--primary-dark);
    font-weight: 900;
    letter-spacing: -0.6px;
}

.brand-text span {
    display: block;
    margin-top: 3px;
    color: var(--gold-dark);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* NAV MENU (Desktop) */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 32px;
}

.mobile-drawer-header,
.drawer-session-badge,
.nav-backdrop {
    display: none;
}

.nav-menu ul {
    display: flex;
    align-items: center;
    gap: 26px;
}

.nav-link {
    position: relative;
    color: var(--text-main);
    font-size: 15.5px;
    font-weight: 700;
    padding: 6px 2px;
    transition: color 0.25s ease;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 3px;
    background: var(--gold-gradient);
    border-radius: var(--radius-full);
    transition: width 0.25s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link-celebrate {
    color: var(--primary-light);
    font-weight: 800;
}

.nav-link-celebrate:hover {
    color: var(--primary);
}

/* BUTTONS */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-tiktok-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    padding: 0 15px;
    border-radius: var(--radius-full);
    background: #110e1c;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.25s ease;
}

.nav-tiktok-btn:hover {
    background: #000000;
    color: #25f4ee;
    border-color: #fe2c55;
    box-shadow: 0 4px 14px rgba(254, 44, 85, 0.25);
    transform: translateY(-2px);
}

.whatsapp-btn,
.apply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 800;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.whatsapp-btn {
    color: #0b8043;
    background: #e8f8ee;
    border: 1px solid #b7ebd0;
}

.whatsapp-btn:hover {
    background: #128c7e;
    color: var(--white);
    border-color: #128c7e;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(18, 140, 126, 0.25);
}

.apply-btn {
    color: var(--white);
    background: var(--gold-gradient);
    box-shadow: 0 8px 20px rgba(214, 161, 43, 0.32);
}

.apply-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(214, 161, 43, 0.45);
}

/* MOBILE MENU BUTTON */
.menu-toggle {
    display: none;
    width: 48px;
    height: 48px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--primary-soft);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    transition: all 0.25s ease;
}

.menu-toggle:hover {
    background: rgba(76, 0, 130, 0.12);
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2.5px;
    background: var(--primary-dark);
    border-radius: var(--radius-full);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-toggle.active span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
}

/* =========================================
   RESPONSIVE HEADER & 2026 MOBILE DRAWER
========================================= */

@media (max-width: 1024px) {
    .top-header-content {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 6px;
        padding: 8px 0;
    }

    .top-announcement {
        justify-content: center;
        max-width: 100%;
    }

    .top-announcement p {
        min-width: 0;
    }

    .top-announcement p {
        font-size: 12.5px;
    }

    .top-contact {
        font-size: 12px;
    }

    .menu-toggle {
        display: flex;
    }

    .nav-content {
        min-height: 74px;
    }

    .brand-logo {
        width: 50px;
        height: 50px;
    }

    .brand-text h1 {
        font-size: 23px;
    }

    .brand-text span {
        font-size: 11.5px;
    }

    /* Mobile dropdown navigation */
    .nav-backdrop {
        display: none;
    }

    .nav-content {
        flex-wrap: wrap;
    }

    .nav-menu {
        order: 3;
        flex: 0 0 100%;
        width: 100%;
        display: none;
        position: static;
        background: var(--white);
        z-index: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px 0 18px;
        border-top: 1px solid var(--border);
        box-shadow: none;
        transform: none;
        overflow: visible;
    }

    .nav-menu.show {
        display: flex;
    }

    .mobile-drawer-header {
        display: none;
    }

    .drawer-brand {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .drawer-brand img {
        width: 42px;
        height: 42px;
        border-radius: 50%;
    }

    .drawer-brand strong {
        display: block;
        font-size: 18px;
        color: var(--primary-dark);
        font-family: var(--font-heading);
    }

    .drawer-brand span {
        display: block;
        font-size: 11px;
        color: var(--gold-dark);
        font-weight: 700;
        text-transform: uppercase;
    }

    .drawer-close-btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 1px solid var(--border);
        background: var(--primary-soft);
        color: var(--dark);
        font-size: 18px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .drawer-close-btn:hover {
        background: var(--primary);
        color: #ffffff;
    }

    .drawer-session-badge {
        display: none;
        background: linear-gradient(135deg, rgba(76, 0, 130, 0.08), rgba(245, 166, 35, 0.12));
        border: 1px solid rgba(76, 0, 130, 0.15);
        padding: 8px 12px;
        border-radius: var(--radius-sm);
        text-align: center;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--primary-dark);
    }

    .nav-menu ul {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .nav-menu li {
        border-bottom: 1px solid rgba(76, 0, 130, 0.06);
    }

    .nav-menu li:last-child {
        border-bottom: none;
    }

    .nav-link {
        display: flex;
        align-items: center;
        padding: 13px 8px;
        font-size: 16px;
        font-weight: 700;
        min-height: 48px;
        border-radius: 8px;
    }

    .nav-link:hover,
    .nav-link.active {
        background: var(--primary-soft);
        color: var(--primary);
        padding-left: 14px;
    }

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

    .nav-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: auto;
        padding-top: 16px;
    }

    .nav-tiktok-btn,
    .whatsapp-btn,
    .apply-btn {
        width: 100%;
        min-height: 48px;
        font-size: 15px;
    }
}

@media (max-width: 520px) {
    .container {
        width: min(100% - 28px, 1180px);
    }

    .top-header {
        font-size: 12.5px;
    }

    .top-header-content {
        min-height: 38px;
        padding: 7px 0;
    }

    .top-announcement {
        width: 100%;
        gap: 7px;
    }

    .announcement-badge {
        flex: 0 0 auto;
        font-size: 9px;
        padding: 3px 7px;
    }

    .top-announcement p {
        font-size: 11px;
        line-height: 1.3;
        text-align: left;
    }

    .top-header p {
        line-height: 1.4;
    }

    .nav-content {
        min-height: 74px;
    }

    .brand {
        gap: 10px;
    }

    .brand img {
        width: 46px;
        height: 46px;
    }

    .brand-text h1 {
        font-size: 21px;
    }

    .brand-text span {
        font-size: 10.5px;
        letter-spacing: 0.5px;
    }

    .menu-toggle {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

}

@media (max-width: 700px) {
    /* Contact details are useful on desktop but make the mobile header
       needlessly tall and can force the document wider than the viewport. */
    .top-contact {
        display: none;
    }
}

@media (max-width: 380px) {
    .brand-text h1 {
        font-size: 19px;
    }

    .brand-text span {
        font-size: 9.5px;
    }

    .brand img {
        width: 43px;
        height: 43px;
    }

    .menu-toggle {
        width: 40px;
        height: 40px;
    }
}

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

.site-footer {
    background: #0d0718;
    color: var(--white);
    margin-top: 0;
    position: relative;
    overflow: hidden;
}

/* =========================================================
   LAST CALL TO ACTION (HIGH CONTRAST & 2026 RADIANCE)
========================================================= */

.footer-cta {
    background:
        radial-gradient(circle at 10% 20%, rgba(245, 166, 35, 0.18) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(106, 17, 176, 0.25) 0%, transparent 45%),
        linear-gradient(135deg, #180033 0%, #2f005c 50%, #1e003b 100%);
    padding: 68px 0;
    border-top: 1px solid rgba(245, 166, 35, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.footer-cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.footer-cta-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(245, 166, 35, 0.16);
    border: 1px solid rgba(245, 166, 35, 0.45);
    color: #ffc453;
    font-size: 12.5px;
    font-weight: 850;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: var(--radius-full);
    margin-bottom: 14px;
    box-shadow: 0 4px 14px rgba(245, 166, 35, 0.2);
}

.cta-sparkle {
    font-size: 14px;
}

.footer-cta h2 {
    color: #ffffff !important;
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.18;
    font-weight: 950;
    letter-spacing: -1.2px;
    max-width: 680px;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.footer-cta .highlight-gold {
    background: linear-gradient(90deg, #ffc453 0%, #f5a623 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

.footer-cta p {
    color: #e4d8f8 !important;
    font-size: 16.5px;
    line-height: 1.75;
    margin-top: 12px;
    max-width: 650px;
    font-weight: 500;
}

.footer-cta-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.footer-apply-btn,
.footer-whatsapp-btn {
    min-height: 52px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
    white-space: nowrap;
    transition: all 0.25s ease;
    text-decoration: none;
}

.footer-apply-btn {
    padding: 0 28px;
    font-weight: 900;
    background: linear-gradient(135deg, #ffc453 0%, #f5a623 100%);
    color: #120f1f !important;
    box-shadow: 0 10px 28px rgba(245, 166, 35, 0.45);
}

.footer-apply-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(245, 166, 35, 0.6);
    color: #000000 !important;
}

.btn-arrow {
    font-size: 18px;
    line-height: 1;
    transition: transform 0.22s ease;
}

.footer-apply-btn:hover .btn-arrow {
    transform: translateX(4px);
}

.footer-whatsapp-btn {
    padding: 0 24px;
    font-weight: 850;
    background: #25d366;
    color: #ffffff !important;
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.35);
}

.footer-whatsapp-btn:hover {
    transform: translateY(-3px);
    background: #20bd5a;
    box-shadow: 0 14px 34px rgba(37, 211, 102, 0.5);
}

.btn-wa-icon {
    font-size: 18px;
    line-height: 1;
}

/* =========================================================
   FOOTER MAIN (2026 ARCHITECTURE & POLISHED HIERARCHY)
========================================================= */

.footer-main {
    padding: 80px 0 54px;
    background:
        radial-gradient(circle at 90% 10%, rgba(76, 0, 130, 0.15), transparent 40%),
        linear-gradient(180deg, #110822 0%, #0d061b 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.45fr 0.85fr 0.85fr 1.25fr;
    gap: 44px;
}

/* COLUMN 1: BRAND CARD & 2026/2027 ACTIVE SESSION */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
}

.footer-logo-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    padding: 3px;
    border: 2px solid rgba(245, 166, 35, 0.6);
    box-shadow: 0 6px 20px rgba(76, 0, 130, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.footer-logo:hover .footer-logo-ring {
    transform: scale(1.05);
}

.footer-logo-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.footer-logo-text h3 {
    font-size: 26px;
    font-weight: 950;
    color: #ffffff;
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.footer-logo-text span {
    display: block;
    color: var(--gold);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-top: 2px;
}

.footer-motto-tag {
    display: inline-block !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 2px 8px;
    border-radius: 999px;
    margin-top: 5px;
    letter-spacing: 0.5px !important;
}

.footer-brand-desc {
    color: #c9bfde;
    font-size: 14.5px;
    line-height: 1.7;
    max-width: 440px;
}

/* 2026/2027 ACTIVE SESSION CARD */
.footer-session-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    max-width: 440px;
}

.session-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.session-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 0 10px #25d366;
    animation: statusPulse 1.6s ease-in-out infinite;
}

@keyframes statusPulse {
    0% { opacity: 0.5; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 0.5; transform: scale(0.9); }
}

.session-card-title {
    font-size: 12px;
    font-weight: 850;
    color: var(--gold-light);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.session-card-body strong {
    display: block;
    font-size: 14px;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 3px;
}

.session-card-body p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.5;
}

/* OFFICIAL CHANNELS STRIP */
.footer-channels {
    margin-top: 4px;
}

.channels-title {
    display: block;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 10px;
}

.channels-grid {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.channel-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    font-size: 12.5px;
    font-weight: 800;
    transition: all 0.25s ease;
    text-decoration: none;
}

.channel-btn.tiktok {
    background: #110a1c;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.channel-btn.tiktok:hover {
    background: #000000;
    color: #25f4ee;
    border-color: #fe2c55;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(254, 44, 85, 0.3);
}

.channel-btn.whatsapp {
    background: rgba(37, 211, 102, 0.12);
    color: #25d366;
    border: 1px solid rgba(37, 211, 102, 0.3);
}

.channel-btn.whatsapp:hover {
    background: #25d366;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}

/* COLUMNS 2 & 3: MODERN INTERACTIVE LINKS */
.footer-column-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

.column-accent-bar {
    width: 4px;
    height: 18px;
    border-radius: var(--radius-full);
    background: var(--gold-gradient);
}

.footer-column-header h4 {
    font-size: 16px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.footer-links-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
}

.footer-links-list li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    color: #c9bfde;
    font-size: 14.5px;
    font-weight: 650;
    text-decoration: none;
    transition: all 0.22s ease;
    background: transparent;
}

.footer-links-list li a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
}

.link-chevron {
    color: var(--gold);
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    opacity: 0.7;
    transition: transform 0.22s ease;
}

.footer-links-list li a:hover .link-chevron {
    transform: translateX(2px);
    opacity: 1;
}

/* BADGES IN LINKS */
.badge-pill-new {
    margin-left: auto;
    font-size: 10px;
    font-weight: 900;
    background: var(--gold-gradient);
    color: #120f1f;
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.badge-pill-trend {
    margin-left: auto;
    font-size: 10px;
    font-weight: 900;
    background: #fe2c55;
    color: #ffffff;
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
}

.badge-pill-age {
    margin-left: auto;
    font-size: 10px;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 2px 7px;
    border-radius: 999px;
}

/* DIGITAL LMS PORTAL CARD */
.footer-portal-card {
    margin-top: 20px;
    background: linear-gradient(135deg, rgba(76, 0, 130, 0.4) 0%, rgba(245, 166, 35, 0.12) 100%);
    border: 1px solid rgba(245, 166, 35, 0.35);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.portal-badge-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.portal-icon {
    font-size: 12px;
}

.portal-label {
    font-size: 10.5px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--gold);
    letter-spacing: 0.6px;
}

.footer-portal-card strong {
    display: block;
    font-size: 14px;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 3px;
}

.footer-portal-card p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.45;
    margin-bottom: 10px;
}

.footer-portal-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 850;
    color: var(--gold) !important;
    text-decoration: none;
    transition: all 0.2s ease;
}

.footer-portal-link:hover {
    color: #ffffff !important;
    transform: translateX(3px);
}

.footer-portal-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.portal-action-sep {
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
}

.webmail-portal-link {
    color: #f3e8ff !important;
}

.webmail-portal-link:hover {
    color: var(--gold) !important;
}

.top-header-link {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    font-size: 12px;
    font-weight: 750;
    transition: color 0.2s ease;
}

.top-header-link:hover {
    color: var(--gold);
}

/* COLUMN 4: OFFICIAL CAMPUS CONTACT CARDS */
.footer-contact-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contact-mini-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.25s ease;
}

.contact-mini-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(245, 166, 35, 0.3);
    transform: translateY(-2px);
}

.contact-card-icon {
    font-size: 18px;
    line-height: 1;
    margin-top: 2px;
    flex-shrink: 0;
}

.contact-card-info strong {
    display: block;
    font-size: 13.5px;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 4px;
}

.contact-card-info p {
    font-size: 13px;
    color: #c9bfde;
    line-height: 1.5;
    margin-bottom: 6px;
}

.contact-map-link {
    display: inline-block;
    font-size: 12px;
    font-weight: 850;
    color: var(--gold) !important;
    text-decoration: none;
}

.contact-map-link:hover {
    text-decoration: underline;
    color: #ffffff !important;
}

.helpline-links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.helpline-links a {
    color: #ffffff !important;
    font-size: 13.5px;
    font-weight: 850;
    text-decoration: none;
    transition: color 0.2s ease;
}

.helpline-links a:hover {
    color: var(--gold) !important;
}

.phone-divider {
    color: rgba(255, 255, 255, 0.35);
}

.contact-hours {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

.contact-email-link {
    display: inline-block;
    color: #c9bfde !important;
    font-size: 13px;
    font-weight: 750;
    word-break: break-all;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-email-link:hover {
    color: var(--gold) !important;
}

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

.footer-bottom {
    padding: 22px 0;
    background: #090312;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-bottom-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-bottom-copy p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13.5px;
}

.footer-bottom-copy strong {
    color: #ffffff;
    font-weight: 800;
}

.footer-bottom-motto {
    font-size: 13px;
    color: var(--gold-light);
    font-weight: 750;
}

.footer-bottom-badge {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 10px;
    border-radius: var(--radius-full);
}

/* =========================================================
   RESPONSIVE FOOTER STYLES
========================================================= */

@media (max-width: 1050px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .footer-cta-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }

    .footer-cta-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .footer-apply-btn,
    .footer-whatsapp-btn {
        flex: 1;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 650px) {
    .footer-cta {
        padding: 50px 0;
    }

    .footer-cta h2 {
        font-size: clamp(26px, 8vw, 36px);
        letter-spacing: -1px;
    }

    .footer-cta p {
        font-size: 15px;
    }

    .footer-cta-actions {
        flex-direction: column;
    }

    .footer-apply-btn,
    .footer-whatsapp-btn {
        width: 100%;
    }

    .footer-main {
        padding: 54px 0 36px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .footer-bottom-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* =========================
   HOMEPAGE PHOTO HERO SECTION
========================= */

.hero-photo-section {
    position: relative;
    min-height: calc(100vh - 128px);
    padding: 96px 0 34px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-photo-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(47, 0, 95, 0.92) 0%, rgba(47, 0, 95, 0.72) 42%, rgba(47, 0, 95, 0.38) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.44));
    z-index: 1;
}

.hero-photo-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 46px 46px;
    z-index: 2;
    pointer-events: none;
}

.hero-photo-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1.08fr 0.72fr;
    align-items: center;
    gap: 54px;
}

.hero-photo-content {
    max-width: 760px;
}

.hero-session-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(245, 166, 35, 0.22);
    border: 1px solid rgba(245, 166, 35, 0.65);
    color: #ffe082;
    font-size: 13px;
    font-weight: 800;
    padding: 7px 16px;
    border-radius: var(--radius-full);
    margin-bottom: 16px;
    backdrop-filter: blur(14px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.pulse-indicator {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #00e676;
    box-shadow: 0 0 10px #00e676;
    animation: pulseGlow 1.8s infinite;
}

@keyframes pulseGlow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.45); opacity: 0.65; }
}

.hero-label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 22px;
    padding: 9px 17px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: var(--gold);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
}

.hero-photo-content h1 {
    color: var(--white);
    font-size: clamp(44px, 6vw, 78px);
    line-height: 1.02;
    font-weight: 950;
    letter-spacing: -2.8px;
}

.hero-photo-content h1 span {
    display: block;
    color: var(--gold);
}

.hero-photo-content p {
    max-width: 650px;
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 18px;
    line-height: 1.8;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-actions {
    margin-top: 34px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-celebrate-btn {
    min-height: 54px;
    padding: 0 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 850;
    color: #ffffff;
    background: linear-gradient(135deg, #7928ca 0%, #ff0080 100%);
    box-shadow: 0 12px 28px rgba(121, 40, 202, 0.38);
    transition: all 0.3s ease;
}

.hero-celebrate-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(255, 0, 128, 0.48);
}

.hero-primary-btn,
.hero-secondary-btn {
    min-height: 54px;
    padding: 0 25px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 850;
    transition: 0.3s ease;
}

.hero-primary-btn {
    color: var(--white);
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    box-shadow: 0 16px 34px rgba(214, 161, 43, 0.28);
}

.hero-secondary-btn {
    color: var(--white);
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(12px);
}

.hero-primary-btn:hover,
.hero-secondary-btn:hover {
    transform: translateY(-3px);
}

.hero-image-status {
    margin-top: 30px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    font-weight: 700;
}

.hero-image-status span {
    width: 34px;
    height: 3px;
    border-radius: 999px;
    background: var(--gold);
}

/* HERO RIGHT CARD */
.hero-photo-card {
    justify-self: end;
    width: min(100%, 410px);
    padding: 26px;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.93);
    border: 1px solid rgba(255, 255, 255, 0.56);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
}

.hero-card-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
}

.hero-card-logo img {
    width: 68px;
    height: 68px;
    object-fit: contain;
    border-radius: 50%;
    background: var(--white);
    padding: 4px;
    box-shadow: 0 10px 25px rgba(91, 14, 166, 0.18);
}

.hero-card-logo h2 {
    color: var(--primary-dark);
    font-size: 29px;
    line-height: 1;
    font-weight: 950;
}

.hero-card-logo span {
    display: block;
    margin-top: 5px;
    color: var(--gold-dark);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.hero-photo-card p {
    margin-top: 22px;
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.75;
}

.hero-card-list {
    margin-top: 24px;
    display: grid;
    gap: 12px;
}

.hero-card-list div {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border-radius: 18px;
    background: var(--primary-soft);
    border: 1px solid var(--border);
}

.hero-card-list strong {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--white);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 950;
    box-shadow: 0 8px 18px rgba(47, 0, 95, 0.08);
}

.hero-card-list span {
    color: var(--primary-dark);
    font-size: 15px;
    font-weight: 850;
}

.hero-card-footer {
    margin-top: 24px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.hero-card-footer span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 600;
}

.hero-card-footer a {
    color: var(--gold);
    font-size: 13px;
    font-weight: 950;
    white-space: nowrap;
}

/* BOTTOM STRIP */
.hero-bottom-strip {
    position: relative;
    z-index: 3;
    margin-top: 70px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(16px);
}

.hero-bottom-strip div {
    padding: 22px 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.hero-bottom-strip div:last-child {
    border-right: none;
}

.hero-bottom-strip strong {
    display: block;
    color: var(--white);
    font-size: 17px;
    font-weight: 900;
}

.hero-bottom-strip span {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13.5px;
    font-weight: 600;
}

/* =========================
   RESPONSIVE PHOTO HERO
========================= */

@media (max-width: 1050px) {
    .hero-photo-section {
        min-height: auto;
        padding: 78px 0 32px;
    }

    .hero-photo-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .hero-photo-content {
        text-align: center;
        margin: 0 auto;
    }

    .hero-photo-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-image-status {
        justify-content: center;
    }

    .hero-photo-card {
        justify-self: center;
    }

    .hero-bottom-strip {
        margin-top: 44px;
    }
}

@media (max-width: 700px) {
    .hero-photo-section {
        padding: 62px 0 26px;
        background-position: center top;
    }

    .hero-photo-overlay {
        background:
            linear-gradient(180deg, rgba(47, 0, 95, 0.92) 0%, rgba(47, 0, 95, 0.76) 46%, rgba(47, 0, 95, 0.62) 100%),
            linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.46));
    }

    .hero-label {
        font-size: 11.5px;
        padding: 8px 13px;
    }

    .hero-photo-content h1 {
        font-size: clamp(36px, 12vw, 52px);
        letter-spacing: -1.6px;
    }

    .hero-photo-content p {
        font-size: 16px;
        line-height: 1.75;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-primary-btn,
    .hero-secondary-btn {
        width: 100%;
    }

    .hero-photo-card {
        padding: 22px;
        border-radius: 26px;
    }

    .hero-card-logo img {
        width: 58px;
        height: 58px;
    }

    .hero-card-logo h2 {
        font-size: 24px;
    }

    .hero-card-logo span {
        font-size: 10.5px;
    }

    .hero-card-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-bottom-strip {
        grid-template-columns: 1fr;
        border-radius: 24px;
    }

    .hero-bottom-strip div {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    }

    .hero-bottom-strip div:last-child {
        border-bottom: none;
    }
}

@media (max-width: 420px) {
    .hero-photo-section {
        padding-top: 52px;
    }

    .hero-photo-card {
        padding: 19px;
    }

    .hero-card-list div {
        padding: 12px;
    }

    .hero-bottom-strip div {
        padding: 19px;
    }
}

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

.about-preview-section {
    position: relative;
    padding: 110px 0;
    background:
        radial-gradient(circle at top right, rgba(91, 14, 166, 0.08), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #fbf8ff 100%);
    overflow: hidden;
}

.about-preview-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: 70px;
}

/* LEFT IMAGE COLLAGE */
.about-preview-images {
    position: relative;
    min-height: 560px;
}

.about-main-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 78%;
    height: 430px;
    border-radius: 34px;
    overflow: hidden;
    box-shadow: 0 26px 70px rgba(47, 0, 95, 0.16);
}

.about-main-image img,
.about-small-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-small-image {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 54%;
    height: 265px;
    border-radius: 30px;
    overflow: hidden;
    border: 8px solid var(--white);
    box-shadow: 0 22px 55px rgba(47, 0, 95, 0.18);
}

.about-floating-card {
    position: absolute;
    left: 34px;
    bottom: 54px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 13px;
    width: min(88%, 330px);
    padding: 16px 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--border);
    box-shadow: 0 18px 45px rgba(47, 0, 95, 0.14);
    backdrop-filter: blur(12px);
}

.about-floating-card img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 50%;
    background: var(--white);
    padding: 3px;
    box-shadow: 0 8px 20px rgba(91, 14, 166, 0.14);
}

.about-floating-card strong {
    display: block;
    color: var(--primary-dark);
    font-size: 18px;
    font-weight: 900;
}

.about-floating-card span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
}

/* RIGHT CONTENT */
.section-label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 18px;
    padding: 8px 15px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.about-preview-content h2 {
    max-width: 720px;
    color: var(--primary-dark);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -1.5px;
}

.about-preview-content > p {
    max-width: 700px;
    margin-top: 20px;
    color: var(--muted);
    font-size: 16.5px;
    line-height: 1.85;
}

.about-value-grid {
    margin-top: 34px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.about-value-grid div {
    position: relative;
    padding: 20px 22px 20px 78px;
    border-radius: 22px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 14px 34px rgba(47, 0, 95, 0.06);
    transition: 0.3s ease;
}

.about-value-grid div:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 45px rgba(47, 0, 95, 0.1);
}

.about-value-grid strong {
    position: absolute;
    left: 22px;
    top: 22px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 950;
}

.about-value-grid h3 {
    color: var(--primary-dark);
    font-size: 18px;
    font-weight: 900;
}

.about-value-grid p {
    margin-top: 5px;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.7;
}

.about-preview-btn {
    margin-top: 34px;
    min-height: 52px;
    padding: 0 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    font-size: 15px;
    font-weight: 850;
    box-shadow: 0 14px 32px rgba(91, 14, 166, 0.2);
    transition: 0.3s ease;
}

.about-preview-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 42px rgba(91, 14, 166, 0.28);
}

/* =========================
   RESPONSIVE ABOUT PREVIEW
========================= */

@media (max-width: 1050px) {
    .about-preview-section {
        padding: 88px 0;
    }

    .about-preview-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .about-preview-images {
        width: min(100%, 680px);
        margin: 0 auto;
    }

    .about-preview-content {
        text-align: center;
    }

    .about-preview-content h2,
    .about-preview-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .about-value-grid div {
        text-align: left;
    }
}

@media (max-width: 700px) {
    .about-preview-section {
        padding: 72px 0;
    }

    .about-preview-images {
        min-height: auto;
        display: grid;
        gap: 18px;
    }

    .about-main-image,
    .about-small-image {
        position: relative;
        width: 100%;
        height: 310px;
        left: auto;
        right: auto;
        bottom: auto;
        top: auto;
        border-radius: 26px;
    }

    .about-small-image {
        height: 250px;
        border: none;
    }

    .about-floating-card {
        position: relative;
        left: auto;
        bottom: auto;
        width: 100%;
        border-radius: 20px;
    }

    .about-preview-content h2 {
        font-size: clamp(30px, 9vw, 40px);
        letter-spacing: -1px;
    }

    .about-preview-content > p {
        font-size: 15.5px;
    }

    .about-value-grid div {
        padding: 18px 18px 18px 72px;
    }

    .about-value-grid strong {
        left: 18px;
        top: 20px;
    }

    .about-preview-btn {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .about-main-image {
        height: 270px;
    }

    .about-small-image {
        height: 220px;
    }

    .about-floating-card {
        align-items: flex-start;
    }

    .about-floating-card img {
        width: 48px;
        height: 48px;
    }
}

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

.programmes-section {
    position: relative;
    padding: 110px 0;
    background:
        radial-gradient(circle at top left, rgba(214, 161, 43, 0.12), transparent 30%),
        linear-gradient(180deg, #fbf8ff 0%, #ffffff 100%);
    overflow: hidden;
}

.programmes-header {
    max-width: 820px;
    margin: 0 auto 54px;
    text-align: center;
}

.programmes-header h2 {
    color: var(--primary-dark);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -1.5px;
}

.programmes-header p {
    max-width: 720px;
    margin: 18px auto 0;
    color: var(--muted);
    font-size: 16.5px;
    line-height: 1.85;
}

.programmes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.programme-card {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 18px 50px rgba(47, 0, 95, 0.08);
    transition: 0.35s ease;
}

.programme-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 70px rgba(47, 0, 95, 0.14);
}

.programme-card-featured {
    border: 1px solid rgba(214, 161, 43, 0.45);
    box-shadow: 0 24px 65px rgba(91, 14, 166, 0.14);
}

.programme-image {
    height: 245px;
    overflow: hidden;
    background: var(--primary-soft);
}

.programme-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.45s ease;
}

.programme-card:hover .programme-image img {
    transform: scale(1.06);
}

.programme-content {
    position: relative;
    padding: 30px 28px 32px;
}

.programme-number {
    position: absolute;
    top: -26px;
    left: 28px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--white);
    border: 5px solid var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 950;
    box-shadow: 0 14px 30px rgba(47, 0, 95, 0.18);
}

.programme-card-featured .programme-number {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
}

.programme-content h3 {
    margin-top: 8px;
    color: var(--primary-dark);
    font-size: 24px;
    font-weight: 950;
    letter-spacing: -0.4px;
}

.programme-content p {
    margin-top: 12px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

.programme-content ul {
    margin-top: 20px;
    display: grid;
    gap: 10px;
}

.programme-content li {
    position: relative;
    padding-left: 24px;
    color: var(--dark);
    font-size: 14.5px;
    font-weight: 700;
}

.programme-content li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 5px rgba(214, 161, 43, 0.13);
}

.programme-content a {
    margin-top: 26px;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary);
    border: 1px solid var(--border);
    font-size: 14px;
    font-weight: 850;
    transition: 0.3s ease;
}

.programme-content a:hover {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-2px);
}

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

@media (max-width: 1050px) {
    .programmes-section {
        padding: 88px 0;
    }

    .programmes-grid {
        grid-template-columns: 1fr;
        max-width: 680px;
        margin: 0 auto;
    }

    .programme-image {
        height: 320px;
    }
}

@media (max-width: 620px) {
    .programmes-section {
        padding: 72px 0;
    }

    .programmes-header {
        margin-bottom: 42px;
    }

    .programmes-header h2 {
        font-size: clamp(30px, 9vw, 40px);
        letter-spacing: -1px;
    }

    .programmes-header p {
        font-size: 15.5px;
    }

    .programme-card {
        border-radius: 26px;
    }

    .programme-image {
        height: 250px;
    }

    .programme-content {
        padding: 28px 22px 28px;
    }

    .programme-content h3 {
        font-size: 22px;
    }

    .programme-content a {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .programme-image {
        height: 220px;
    }

    .programme-content {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* =========================
   WHY CHOOSE US SECTION
========================= */

.why-section {
    position: relative;
    padding: 110px 0;
    background:
        radial-gradient(circle at bottom left, rgba(91, 14, 166, 0.1), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #fbf8ff 100%);
    overflow: hidden;
}

.why-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 70px;
}

.why-content h2 {
    max-width: 720px;
    color: var(--primary-dark);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -1.5px;
}

.why-content > p {
    max-width: 690px;
    margin-top: 20px;
    color: var(--muted);
    font-size: 16.5px;
    line-height: 1.85;
}

.why-feature-grid {
    margin-top: 36px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.why-feature-card {
    position: relative;
    padding: 24px 22px;
    border-radius: 26px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 16px 42px rgba(47, 0, 95, 0.07);
    transition: 0.3s ease;
}

.why-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 55px rgba(47, 0, 95, 0.12);
}

.why-feature-card span {
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 950;
}

.why-feature-card h3 {
    color: var(--primary-dark);
    font-size: 18px;
    font-weight: 900;
}

.why-feature-card p {
    margin-top: 8px;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.7;
}

/* RIGHT VISUAL */
.why-visual {
    position: relative;
}

.why-image-card {
    position: relative;
    overflow: hidden;
    border-radius: 36px;
    min-height: 560px;
    box-shadow: 0 28px 80px rgba(47, 0, 95, 0.18);
}

.why-image-card img {
    width: 100%;
    height: 560px;
    object-fit: cover;
}

.why-image-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(47, 0, 95, 0.05), rgba(47, 0, 95, 0.58));
}

.why-image-badge {
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 26px;
    z-index: 2;
    padding: 20px 22px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(14px);
}

.why-image-badge strong {
    display: block;
    color: var(--primary-dark);
    font-size: 18px;
    font-weight: 950;
}

.why-image-badge span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 700;
}

.why-stat-card {
    position: absolute;
    top: 34px;
    left: -44px;
    z-index: 3;
    width: 210px;
    overflow: hidden;
    border-radius: 26px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 22px 55px rgba(47, 0, 95, 0.16);
}

.why-stat-card div {
    padding: 20px;
    border-bottom: 1px solid var(--border);
}

.why-stat-card div:last-child {
    border-bottom: none;
}

.why-stat-card strong {
    display: block;
    color: var(--primary);
    font-size: 34px;
    line-height: 1;
    font-weight: 950;
}

.why-stat-card span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
}

/* =========================
   RESPONSIVE WHY SECTION
========================= */

@media (max-width: 1050px) {
    .why-section {
        padding: 88px 0;
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .why-content {
        text-align: center;
    }

    .why-content h2,
    .why-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .why-visual {
        width: min(100%, 680px);
        margin: 0 auto;
    }

    .why-stat-card {
        left: 24px;
    }
}

@media (max-width: 700px) {
    .why-section {
        padding: 72px 0;
    }

    .why-content h2 {
        font-size: clamp(30px, 9vw, 40px);
        letter-spacing: -1px;
    }

    .why-content > p {
        font-size: 15.5px;
    }

    .why-feature-grid {
        grid-template-columns: 1fr;
    }

    .why-feature-card {
        text-align: left;
        border-radius: 24px;
    }

    .why-image-card {
        min-height: auto;
        border-radius: 28px;
    }

    .why-image-card img {
        height: 390px;
    }

    .why-stat-card {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin-top: 18px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .why-stat-card div {
        border-bottom: none;
        border-right: 1px solid var(--border);
    }

    .why-stat-card div:last-child {
        border-right: none;
    }
}

@media (max-width: 420px) {
    .why-image-card img {
        height: 330px;
    }

    .why-image-badge {
        left: 18px;
        right: 18px;
        bottom: 18px;
        padding: 17px;
    }

    .why-stat-card {
        grid-template-columns: 1fr;
    }

    .why-stat-card div {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .why-stat-card div:last-child {
        border-bottom: none;
    }
}

/* =========================
   DIGITAL ADVANTAGE SECTION
========================= */

.digital-section {
    position: relative;
    padding: 110px 0;
    background:
        radial-gradient(circle at top right, rgba(214, 161, 43, 0.24), transparent 30%),
        linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    overflow: hidden;
}

.digital-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
}

.digital-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 0.95fr;
    align-items: center;
    gap: 70px;
}

.section-label-light {
    background: rgba(255, 255, 255, 0.13);
    color: var(--gold);
    border-color: rgba(255, 255, 255, 0.2);
}

.digital-content h2 {
    max-width: 720px;
    color: var(--white);
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -1.6px;
}

.digital-content > p {
    max-width: 700px;
    margin-top: 22px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 16.5px;
    line-height: 1.85;
}

.digital-list {
    margin-top: 34px;
    display: grid;
    gap: 14px;
}

.digital-list div {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
}

.digital-list span {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 950;
}

.digital-list p {
    color: rgba(255, 255, 255, 0.84);
    font-size: 15px;
    line-height: 1.65;
    font-weight: 600;
}

.digital-actions {
    margin-top: 34px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.digital-primary-btn,
.digital-secondary-btn {
    min-height: 52px;
    padding: 0 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 850;
    transition: 0.3s ease;
}

.digital-primary-btn {
    color: var(--white);
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    box-shadow: 0 16px 34px rgba(214, 161, 43, 0.25);
}

.digital-secondary-btn {
    color: var(--white);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
}

.digital-primary-btn:hover,
.digital-secondary-btn:hover {
    transform: translateY(-3px);
}

/* RIGHT VISUAL */
.digital-visual {
    position: relative;
}

.browser-card {
    position: relative;
    overflow: hidden;
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.browser-top {
    height: 54px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: #f5efff;
    border-bottom: 1px solid var(--border);
}

.browser-top span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gold);
}

.browser-top span:nth-child(2) {
    background: var(--primary);
}

.browser-top span:nth-child(3) {
    background: #9c7ac7;
}

.browser-body {
    padding: 28px;
}

.browser-hero-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.browser-hero-preview img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    border-radius: 50%;
    background: var(--white);
    padding: 4px;
}

.browser-hero-preview h3 {
    color: var(--white);
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
}

.browser-hero-preview p {
    margin-top: 4px;
    color: var(--gold);
    font-size: 12.5px;
    font-weight: 850;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.browser-line {
    height: 13px;
    margin-top: 18px;
    border-radius: 999px;
    background: var(--primary-soft);
}

.browser-line.long {
    width: 86%;
}

.browser-line.medium {
    width: 62%;
}

.browser-mini-grid {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.browser-mini-grid div {
    padding: 16px 12px;
    border-radius: 18px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 10px 24px rgba(47, 0, 95, 0.06);
}

.browser-mini-grid strong {
    display: block;
    color: var(--primary-dark);
    font-size: 15px;
    font-weight: 950;
}

.browser-mini-grid span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.browser-image {
    margin-top: 24px;
    height: 230px;
    overflow: hidden;
    border-radius: 24px;
}

.browser-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.digital-floating-card {
    position: absolute;
    right: -28px;
    bottom: 38px;
    width: 230px;
    padding: 18px 20px;
    border-radius: 22px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.18);
}

.digital-floating-card strong {
    display: block;
    color: var(--primary-dark);
    font-size: 18px;
    font-weight: 950;
}

.digital-floating-card span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

/* =========================
   RESPONSIVE DIGITAL SECTION
========================= */

@media (max-width: 1050px) {
    .digital-section {
        padding: 88px 0;
    }

    .digital-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .digital-content {
        text-align: center;
    }

    .digital-content h2,
    .digital-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .digital-actions {
        justify-content: center;
    }

    .digital-visual {
        width: min(100%, 680px);
        margin: 0 auto;
    }

    .digital-list div {
        text-align: left;
    }
}

@media (max-width: 700px) {
    .digital-section {
        padding: 72px 0;
    }

    .digital-content h2 {
        font-size: clamp(30px, 9vw, 42px);
        letter-spacing: -1px;
    }

    .digital-content > p {
        font-size: 15.5px;
    }

    .digital-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .digital-primary-btn,
    .digital-secondary-btn {
        width: 100%;
    }

    .browser-card {
        border-radius: 28px;
    }

    .browser-body {
        padding: 22px;
    }

    .browser-mini-grid {
        grid-template-columns: 1fr;
    }

    .browser-image {
        height: 210px;
    }

    .digital-floating-card {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        margin-top: 18px;
    }
}

@media (max-width: 420px) {
    .browser-top {
        height: 48px;
        padding: 0 18px;
    }

    .browser-body {
        padding: 18px;
    }

    .browser-hero-preview {
        align-items: flex-start;
    }

    .browser-hero-preview img {
        width: 52px;
        height: 52px;
    }

    .browser-hero-preview h3 {
        font-size: 21px;
    }

    .browser-image {
        height: 185px;
    }
}

/* =========================
   ADMISSION ENQUIRY SECTION
========================= */

.admission-enquiry-section {
    position: relative;
    padding: 110px 0;
    background:
        radial-gradient(circle at top left, rgba(91, 14, 166, 0.08), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #fbf8ff 100%);
    overflow: hidden;
}

.admission-enquiry-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;
    gap: 70px;
}

.admission-enquiry-content h2 {
    max-width: 680px;
    color: var(--primary-dark);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -1.5px;
}

.admission-enquiry-content > p {
    max-width: 650px;
    margin-top: 20px;
    color: var(--muted);
    font-size: 16.5px;
    line-height: 1.85;
}

.admission-info-list {
    margin-top: 34px;
    display: grid;
    gap: 16px;
}

.admission-info-list div {
    padding: 20px 22px;
    border-radius: 22px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 14px 34px rgba(47, 0, 95, 0.06);
}

.admission-info-list strong {
    display: block;
    color: var(--primary-dark);
    font-size: 15px;
    font-weight: 950;
}

.admission-info-list span {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.65;
    font-weight: 600;
}

.admission-info-list a {
    color: var(--primary);
    font-weight: 850;
}

.admission-contact-actions {
    margin-top: 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.admission-whatsapp-btn,
.admission-call-btn {
    min-height: 50px;
    padding: 0 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14.5px;
    font-weight: 850;
    transition: 0.3s ease;
}

.admission-whatsapp-btn {
    color: var(--white);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 14px 32px rgba(91, 14, 166, 0.2);
}

.admission-call-btn {
    color: var(--primary);
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 10px 26px rgba(47, 0, 95, 0.07);
}

.admission-whatsapp-btn:hover,
.admission-call-btn:hover {
    transform: translateY(-3px);
}

/* FORM CARD */
.admission-form-card {
    position: relative;
    padding: 34px;
    border-radius: 34px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 26px 70px rgba(47, 0, 95, 0.13);
}

.form-card-header {
    margin-bottom: 24px;
}

.form-card-header h3 {
    color: var(--primary-dark);
    font-size: 30px;
    font-weight: 950;
    letter-spacing: -0.8px;
}

.form-card-header p {
    margin-top: 6px;
    color: var(--muted);
    font-size: 15px;
}

.form-alert {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 800;
}

.form-alert-success {
    color: #146c43;
    background: #e9f8ef;
    border: 1px solid #bce8cf;
}

.form-alert-error {
    color: #842029;
    background: #fff1f2;
    border: 1px solid #f5c2c7;
}

.admission-form {
    display: grid;
    gap: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.form-group {
    display: grid;
    gap: 8px;
}

.form-group label {
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 850;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    border: 1px solid var(--border);
    outline: none;
    border-radius: 16px;
    background: #fdfbff;
    color: var(--dark);
    font-size: 15px;
    padding: 15px 16px;
    transition: 0.3s ease;
}

.form-group textarea {
    resize: vertical;
    min-height: 130px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: rgba(91, 14, 166, 0.45);
    box-shadow: 0 0 0 5px rgba(91, 14, 166, 0.08);
    background: var(--white);
}

.admission-submit-btn {
    min-height: 54px;
    border: none;
    border-radius: 999px;
    color: var(--white);
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 16px 34px rgba(214, 161, 43, 0.26);
    transition: 0.3s ease;
}

.admission-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px rgba(214, 161, 43, 0.36);
}

.form-note {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
    text-align: center;
}

/* =========================
   RESPONSIVE ADMISSION ENQUIRY
========================= */

@media (max-width: 1050px) {
    .admission-enquiry-section {
        padding: 88px 0;
    }

    .admission-enquiry-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .admission-enquiry-content {
        text-align: center;
    }

    .admission-enquiry-content h2,
    .admission-enquiry-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .admission-info-list {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .admission-info-list div {
        text-align: left;
    }

    .admission-contact-actions {
        justify-content: center;
    }

    .admission-form-card {
        max-width: 760px;
        margin: 0 auto;
    }
}

@media (max-width: 700px) {
    .admission-enquiry-section {
        padding: 72px 0;
    }

    .admission-enquiry-content h2 {
        font-size: clamp(30px, 9vw, 40px);
        letter-spacing: -1px;
    }

    .admission-enquiry-content > p {
        font-size: 15.5px;
    }

    .admission-contact-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .admission-whatsapp-btn,
    .admission-call-btn {
        width: 100%;
    }

    .admission-form-card {
        padding: 26px 22px;
        border-radius: 28px;
    }

    .form-card-header h3 {
        font-size: 25px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .admission-info-list div {
        padding: 18px;
    }

    .admission-form-card {
        padding: 24px 18px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 14px;
        border-radius: 14px;
    }
}

/* =========================
   SCHOOL LIFE / MINI GALLERY SECTION
========================= */

.school-life-section {
    position: relative;
    padding: 110px 0;
    background:
        radial-gradient(circle at top right, rgba(214, 161, 43, 0.12), transparent 30%),
        linear-gradient(180deg, #fbf8ff 0%, #ffffff 100%);
    overflow: hidden;
}

.school-life-header {
    max-width: 840px;
    margin: 0 auto 56px;
    text-align: center;
}

.school-life-header h2 {
    color: var(--primary-dark);
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -1.5px;
}

.school-life-header p {
    max-width: 760px;
    margin: 18px auto 0;
    color: var(--muted);
    font-size: 16.5px;
    line-height: 1.85;
}

/* GALLERY GRID */
.school-life-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr 0.9fr;
    grid-template-rows: 260px 260px;
    gap: 22px;
}

.school-life-main,
.school-life-photo,
.school-life-card {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid var(--border);
    box-shadow: 0 20px 55px rgba(47, 0, 95, 0.1);
}

.school-life-main {
    grid-row: span 2;
}

.school-life-side {
    display: grid;
    gap: 22px;
}

.school-life-main img,
.school-life-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.45s ease;
}

.school-life-main:hover img,
.school-life-photo:hover img {
    transform: scale(1.06);
}

.school-life-main::after,
.school-life-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(47, 0, 95, 0.65));
    pointer-events: none;
}

.school-life-overlay {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    padding: 18px 20px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px);
}

.school-life-overlay strong {
    display: block;
    color: var(--primary-dark);
    font-size: 18px;
    font-weight: 950;
}

.school-life-overlay span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 700;
}

/* CENTER BRAND CARD */
.school-life-card {
    padding: 28px;
    background:
        radial-gradient(circle at top right, rgba(214, 161, 43, 0.18), transparent 36%),
        linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--white);
}

.school-life-logo {
    width: 72px;
    height: 72px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--white);
    padding: 5px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

.school-life-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.school-life-card h3 {
    max-width: 320px;
    color: var(--white);
    font-size: 30px;
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -0.8px;
}

.school-life-card p {
    margin-top: 16px;
    color: #f1e9fc;
    font-size: 15.5px;
    line-height: 1.75;
    font-weight: 500;
}

.school-life-points {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.school-life-points span {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    color: var(--gold);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 12.5px;
    font-weight: 850;
}

/* WIDE PHOTO */
.school-life-wide {
    grid-column: 3;
}

/* ACTION BUTTONS */
.school-life-actions {
    margin-top: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.school-life-primary-btn,
.school-life-secondary-btn {
    min-height: 52px;
    padding: 0 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 850;
    transition: 0.3s ease;
}

.school-life-primary-btn {
    color: var(--white);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 14px 32px rgba(91, 14, 166, 0.2);
}

.school-life-secondary-btn {
    color: var(--primary);
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 10px 26px rgba(47, 0, 95, 0.07);
}

.school-life-primary-btn:hover,
.school-life-secondary-btn:hover {
    transform: translateY(-3px);
}

/* =========================
   RESPONSIVE SCHOOL LIFE SECTION
========================= */

@media (max-width: 1100px) {
    .school-life-section {
        padding: 88px 0;
    }

    .school-life-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .school-life-main {
        grid-row: auto;
        height: 420px;
    }

    .school-life-side {
        height: 420px;
    }

    .school-life-card {
        min-height: 310px;
    }

    .school-life-wide {
        grid-column: auto;
        min-height: 310px;
    }
}

@media (max-width: 700px) {
    .school-life-section {
        padding: 72px 0;
    }

    .school-life-header {
        margin-bottom: 42px;
    }

    .school-life-header h2 {
        font-size: clamp(30px, 9vw, 40px);
        letter-spacing: -1px;
    }

    .school-life-header p {
        font-size: 15.5px;
    }

    .school-life-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .school-life-main,
    .school-life-side,
    .school-life-photo,
    .school-life-wide {
        height: auto;
        min-height: auto;
    }

    .school-life-main {
        height: 330px;
        border-radius: 26px;
    }

    .school-life-side {
        display: grid;
        gap: 18px;
    }

    .school-life-photo {
        height: 260px;
        border-radius: 26px;
    }

    .school-life-wide {
        height: 260px;
    }

    .school-life-card {
        padding: 24px;
        border-radius: 26px;
    }

    .school-life-card h3 {
        font-size: 26px;
    }

    .school-life-overlay {
        left: 18px;
        right: 18px;
        bottom: 18px;
        padding: 16px;
        border-radius: 20px;
    }

    .school-life-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .school-life-primary-btn,
    .school-life-secondary-btn {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .school-life-main {
        height: 290px;
    }

    .school-life-photo,
    .school-life-wide {
        height: 230px;
    }

    .school-life-card {
        padding: 22px;
    }

    .school-life-logo {
        width: 64px;
        height: 64px;
    }
}

/* =========================
   ABOUT PAGE HERO SECTION
========================= */

.about-hero-section {
    position: relative;
    padding: 96px 0 42px;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(214, 161, 43, 0.20), transparent 32%),
        linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
}

.about-hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
    z-index: 1;
}

.about-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(47, 0, 95, 0.84), rgba(91, 14, 166, 0.58)),
        radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.10), transparent 34%);
    z-index: 1;
}

.about-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 70px;
}

.about-page-label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 22px;
    padding: 9px 17px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    color: var(--gold);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
}

.about-hero-content h1 {
    max-width: 760px;
    color: var(--white);
    font-size: clamp(42px, 5.5vw, 72px);
    line-height: 1.03;
    font-weight: 950;
    letter-spacing: -2.5px;
}

.about-hero-content p {
    max-width: 660px;
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 18px;
    line-height: 1.85;
}

.about-hero-details {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 680px;
}

.about-hero-details div {
    padding: 20px 22px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
}

.about-hero-details strong {
    display: block;
    color: var(--gold);
    font-size: 14px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.about-hero-details span {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 14.5px;
    line-height: 1.6;
    font-weight: 650;
}

/* RIGHT CARD */
.about-hero-card {
    overflow: hidden;
    border-radius: 36px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.52);
    box-shadow: 0 32px 85px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
}

.about-hero-image {
    height: 330px;
    overflow: hidden;
}

.about-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-hero-card-content {
    padding: 26px;
}

.about-card-logo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.about-card-logo img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 50%;
    background: var(--white);
    padding: 4px;
    box-shadow: 0 10px 25px rgba(91, 14, 166, 0.16);
}

.about-card-logo h2 {
    color: var(--primary-dark);
    font-size: 28px;
    line-height: 1;
    font-weight: 950;
}

.about-card-logo span {
    display: block;
    margin-top: 5px;
    color: var(--gold-dark);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.about-hero-card-content p {
    margin-top: 20px;
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.75;
}

/* BOTTOM STRIP */
.about-hero-strip {
    position: relative;
    z-index: 2;
    margin-top: 70px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(16px);
}

.about-hero-strip div {
    padding: 22px 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.about-hero-strip div:last-child {
    border-right: none;
}

.about-hero-strip strong {
    display: block;
    color: var(--white);
    font-size: 17px;
    font-weight: 900;
}

.about-hero-strip span {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13.5px;
    font-weight: 600;
}

/* =========================
   RESPONSIVE ABOUT HERO
========================= */

@media (max-width: 1050px) {
    .about-hero-section {
        padding: 78px 0 34px;
    }

    .about-hero-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-hero-content {
        text-align: center;
    }

    .about-hero-content h1,
    .about-hero-content p,
    .about-hero-details {
        margin-left: auto;
        margin-right: auto;
    }

    .about-hero-card {
        width: min(100%, 680px);
        margin: 0 auto;
    }

    .about-hero-strip {
        margin-top: 48px;
    }
}

@media (max-width: 700px) {
    .about-hero-section {
        padding: 62px 0 28px;
    }

    .about-hero-content h1 {
        font-size: clamp(36px, 11vw, 52px);
        letter-spacing: -1.6px;
    }

    .about-hero-content p {
        font-size: 16px;
        line-height: 1.75;
    }

    .about-hero-details {
        grid-template-columns: 1fr;
    }

    .about-hero-card {
        border-radius: 28px;
    }

    .about-hero-image {
        height: 260px;
    }

    .about-hero-card-content {
        padding: 22px;
    }

    .about-card-logo img {
        width: 58px;
        height: 58px;
    }

    .about-card-logo h2 {
        font-size: 24px;
    }

    .about-card-logo span {
        font-size: 10.5px;
    }

    .about-hero-strip {
        grid-template-columns: 1fr;
        border-radius: 24px;
    }

    .about-hero-strip div {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    }

    .about-hero-strip div:last-child {
        border-bottom: none;
    }
}

@media (max-width: 420px) {
    .about-hero-image {
        height: 230px;
    }

    .about-hero-details div {
        padding: 18px;
    }

    .about-hero-strip div {
        padding: 19px;
    }
}
/* =========================
   ABOUT PAGE SCHOOL OVERVIEW
========================= */

.school-overview-section {
    position: relative;
    padding: 110px 0;
    background:
        radial-gradient(circle at top left, rgba(214, 161, 43, 0.10), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #fbf8ff 100%);
    overflow: hidden;
}

.school-overview-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 70px;
}

.school-overview-content h2 {
    max-width: 720px;
    color: var(--primary-dark);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -1.5px;
}

.school-overview-content > p {
    max-width: 700px;
    margin-top: 20px;
    color: var(--muted);
    font-size: 16.5px;
    line-height: 1.85;
}

.overview-highlight-box {
    margin-top: 34px;
    padding: 24px 26px;
    border-radius: 26px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 18px 45px rgba(47, 0, 95, 0.08);
    border-left: 6px solid var(--gold);
}

.overview-highlight-box strong {
    display: block;
    color: var(--primary-dark);
    font-size: 18px;
    font-weight: 950;
}

.overview-highlight-box span {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
    font-weight: 600;
}

/* RIGHT VISUAL */
.school-overview-visual {
    position: relative;
}

.overview-image {
    overflow: hidden;
    min-height: 540px;
    border-radius: 36px;
    box-shadow: 0 28px 80px rgba(47, 0, 95, 0.18);
}

.overview-image img {
    width: 100%;
    height: 540px;
    object-fit: cover;
}

.overview-small-card {
    position: absolute;
    left: -34px;
    bottom: 34px;
    z-index: 3;
    width: min(90%, 360px);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--border);
    box-shadow: 0 22px 55px rgba(47, 0, 95, 0.16);
    backdrop-filter: blur(14px);
}

.overview-small-card img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    border-radius: 50%;
    background: var(--white);
    padding: 4px;
    box-shadow: 0 8px 20px rgba(91, 14, 166, 0.14);
}

.overview-small-card strong {
    display: block;
    color: var(--primary-dark);
    font-size: 17px;
    font-weight: 950;
}

.overview-small-card span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
}

/* VISION MISSION CARDS */
.vision-mission-grid {
    margin-top: 72px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.vision-mission-card {
    position: relative;
    padding: 30px 28px;
    border-radius: 30px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 18px 50px rgba(47, 0, 95, 0.08);
    transition: 0.3s ease;
}

.vision-mission-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 65px rgba(47, 0, 95, 0.13);
}

.vision-mission-card.featured {
    background:
        radial-gradient(circle at top right, rgba(214, 161, 43, 0.20), transparent 38%),
        linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: rgba(255, 255, 255, 0.18);
}

.vision-mission-card span {
    width: 48px;
    height: 48px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 950;
}

.vision-mission-card.featured span {
    background: var(--gold);
    color: var(--white);
}

.vision-mission-card h3 {
    color: var(--primary-dark);
    font-size: 24px;
    font-weight: 950;
    letter-spacing: -0.5px;
}

.vision-mission-card.featured h3 {
    color: var(--white);
}

.vision-mission-card p {
    margin-top: 12px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}

.vision-mission-card.featured p {
    color: rgba(255, 255, 255, 0.78);
}

/* =========================
   RESPONSIVE SCHOOL OVERVIEW
========================= */

@media (max-width: 1050px) {
    .school-overview-section {
        padding: 88px 0;
    }

    .school-overview-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .school-overview-content {
        text-align: center;
    }

    .school-overview-content h2,
    .school-overview-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .overview-highlight-box {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    .school-overview-visual {
        width: min(100%, 680px);
        margin: 0 auto;
    }

    .overview-small-card {
        left: 24px;
    }

    .vision-mission-grid {
        grid-template-columns: 1fr;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 700px) {
    .school-overview-section {
        padding: 72px 0;
    }

    .school-overview-content h2 {
        font-size: clamp(30px, 9vw, 40px);
        letter-spacing: -1px;
    }

    .school-overview-content > p {
        font-size: 15.5px;
    }

    .overview-highlight-box {
        padding: 22px;
        border-radius: 24px;
    }

    .overview-image {
        min-height: auto;
        border-radius: 28px;
    }

    .overview-image img {
        height: 360px;
    }

    .overview-small-card {
        position: relative;
        left: auto;
        bottom: auto;
        width: 100%;
        margin-top: 18px;
        border-radius: 22px;
    }

    .vision-mission-grid {
        margin-top: 54px;
    }

    .vision-mission-card {
        padding: 26px 22px;
        border-radius: 26px;
    }

    .vision-mission-card h3 {
        font-size: 22px;
    }
}

@media (max-width: 420px) {
    .overview-image img {
        height: 310px;
    }

    .overview-small-card {
        align-items: flex-start;
    }

    .overview-small-card img {
        width: 52px;
        height: 52px;
    }

    .vision-mission-card {
        padding: 24px 20px;
    }
}

/* =========================
   ABOUT PAGE CORE VALUES
========================= */

.core-values-section {
    position: relative;
    padding: 110px 0;
    background:
        radial-gradient(circle at top right, rgba(91, 14, 166, 0.08), transparent 32%),
        linear-gradient(180deg, #fbf8ff 0%, #ffffff 100%);
    overflow: hidden;
}

.core-values-header {
    max-width: 840px;
    margin: 0 auto 56px;
    text-align: center;
}

.core-values-header h2 {
    color: var(--primary-dark);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -1.5px;
}

.core-values-header p {
    max-width: 760px;
    margin: 18px auto 0;
    color: var(--muted);
    font-size: 16.5px;
    line-height: 1.85;
}

.core-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.core-value-card {
    position: relative;
    padding: 30px 28px;
    border-radius: 30px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 18px 50px rgba(47, 0, 95, 0.08);
    transition: 0.3s ease;
}

.core-value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 65px rgba(47, 0, 95, 0.13);
}

.core-value-card span {
    width: 48px;
    height: 48px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 950;
}

.core-value-card h3 {
    color: var(--primary-dark);
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -0.4px;
}

.core-value-card p {
    margin-top: 12px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}

/* LEARNING APPROACH BOX */
.learning-approach-box {
    margin-top: 74px;
    padding: 42px;
    border-radius: 38px;
    background:
        radial-gradient(circle at top right, rgba(214, 161, 43, 0.22), transparent 35%),
        linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: grid;
    grid-template-columns: 1fr 0.95fr;
    align-items: center;
    gap: 48px;
    box-shadow: 0 28px 80px rgba(47, 0, 95, 0.22);
    overflow: hidden;
}

.learning-approach-content h2 {
    color: var(--white);
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -1.2px;
}

.learning-approach-content p {
    max-width: 620px;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
    line-height: 1.85;
}

.learning-approach-list {
    display: grid;
    gap: 16px;
}

.learning-approach-list div {
    padding: 20px 22px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
}

.learning-approach-list strong {
    display: block;
    color: var(--gold);
    font-size: 16px;
    font-weight: 950;
}

.learning-approach-list span {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14.5px;
    line-height: 1.65;
    font-weight: 600;
}

/* =========================
   RESPONSIVE CORE VALUES
========================= */

@media (max-width: 1050px) {
    .core-values-section {
        padding: 88px 0;
    }

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

    .learning-approach-box {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .learning-approach-content {
        text-align: center;
    }

    .learning-approach-content p {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 700px) {
    .core-values-section {
        padding: 72px 0;
    }

    .core-values-header {
        margin-bottom: 42px;
    }

    .core-values-header h2 {
        font-size: clamp(30px, 9vw, 40px);
        letter-spacing: -1px;
    }

    .core-values-header p {
        font-size: 15.5px;
    }

    .core-values-grid {
        grid-template-columns: 1fr;
    }

    .core-value-card {
        padding: 26px 22px;
        border-radius: 26px;
    }

    .core-value-card h3 {
        font-size: 21px;
    }

    .learning-approach-box {
        margin-top: 54px;
        padding: 28px 22px;
        border-radius: 28px;
    }

    .learning-approach-content h2 {
        font-size: clamp(28px, 9vw, 38px);
        letter-spacing: -1px;
    }

    .learning-approach-content p {
        font-size: 15.5px;
    }

    .learning-approach-list div {
        padding: 18px;
        border-radius: 20px;
    }
}

@media (max-width: 420px) {
    .core-value-card {
        padding: 24px 20px;
    }

    .learning-approach-box {
        padding: 26px 18px;
    }
}

/* =========================
   ABOUT PAGE LEADERSHIP SECTION
========================= */

.leadership-section {
    position: relative;
    padding: 110px 0;
    background:
        radial-gradient(circle at top left, rgba(214, 161, 43, 0.12), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fbf8ff 100%);
    overflow: hidden;
}

.leadership-grid {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    align-items: center;
    gap: 70px;
}

/* =========================================================
   ABOUT PAGE LEADERSHIP - PROPRIETRESS SHOWCASE
   With Matured Animating Glowing Border & Full Frame View
   ========================================================= */

@property --leadership-glow-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.leadership-image-wrap {
    position: relative;
    width: 100%;
    max-width: 485px;
    margin: 0 auto;
    border-radius: 36px;
    padding: 4px;
    background: transparent;
    isolation: isolate;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.leadership-image-wrap:hover {
    transform: translateY(-6px);
}

/* Ambient Breathing Glow Aura (Rich gold and royal purple radiance) */
.leadership-image-wrap::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 42px;
    background: conic-gradient(
        from var(--leadership-glow-angle, 0deg),
        rgba(245, 166, 35, 0.75) 0deg,
        rgba(124, 30, 201, 0.65) 80deg,
        rgba(255, 213, 114, 0.50) 150deg,
        rgba(76, 0, 130, 0.70) 220deg,
        rgba(245, 166, 35, 0.80) 300deg,
        rgba(245, 166, 35, 0.75) 360deg
    );
    filter: blur(20px);
    opacity: 0.68;
    z-index: -2;
    animation: leadershipGlowRotate 8s linear infinite, leadershipAuraPulse 4s ease-in-out infinite alternate;
    pointer-events: none;
    transition: opacity 0.45s ease, filter 0.45s ease;
}

.leadership-image-wrap:hover::before {
    opacity: 0.95;
    filter: blur(26px);
}

/* Sharp Luminous Rotating Border Ring (Mature animated golden-purple edge) */
.leadership-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 36px;
    padding: 3.5px;
    background: conic-gradient(
        from var(--leadership-glow-angle, 0deg),
        #f5a623 0deg,
        #ffd778 45deg,
        #8a2be2 110deg,
        rgba(245, 166, 35, 0.35) 175deg,
        #4c0082 225deg,
        #ffc453 295deg,
        #f5a623 360deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: leadershipGlowRotate 8s linear infinite;
    pointer-events: none;
}

/* Inner Frame - Displays Entirety of Portrait & Bottom Plaque Cleanly */
.leadership-image {
    position: relative;
    overflow: hidden;
    min-height: auto;
    border-radius: 32px;
    background: #1d0033;
    box-shadow:
        0 24px 60px rgba(47, 0, 95, 0.20),
        0 4px 18px rgba(245, 166, 35, 0.14),
        inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    animation: leadershipBoxPulse 4s ease-in-out infinite alternate;
}

/* Full Image - 100% Native Uncropped Display */
.leadership-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1728 / 2418;
    object-fit: contain;
    border-radius: 32px;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.leadership-image-wrap:hover .leadership-image img {
    transform: scale(1.012);
}

/* Disable old dark gradient overlay */
.leadership-image::after {
    display: none;
}

/* Keyframes for Rotating Angle & Gentle Breathing */
@keyframes leadershipGlowRotate {
    0% {
        --leadership-glow-angle: 0deg;
    }
    100% {
        --leadership-glow-angle: 360deg;
    }
}

@keyframes leadershipAuraPulse {
    0% {
        opacity: 0.55;
        transform: scale(0.99);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.01);
    }
    100% {
        opacity: 0.55;
        transform: scale(0.99);
    }
}

@keyframes leadershipBoxPulse {
    0% {
        box-shadow:
            0 20px 50px rgba(47, 0, 95, 0.18),
            0 0 20px rgba(245, 166, 35, 0.22),
            0 0 40px rgba(106, 17, 176, 0.16),
            inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    }
    50% {
        box-shadow:
            0 26px 65px rgba(47, 0, 95, 0.24),
            0 0 32px rgba(245, 166, 35, 0.42),
            0 0 55px rgba(106, 17, 176, 0.26),
            inset 0 0 0 1px rgba(255, 220, 120, 0.32);
    }
    100% {
        box-shadow:
            0 20px 50px rgba(47, 0, 95, 0.18),
            0 0 20px rgba(245, 166, 35, 0.22),
            0 0 40px rgba(106, 17, 176, 0.16),
            inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    }
}

/* Accessibility: Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .leadership-image-wrap,
    .leadership-image-wrap::before,
    .leadership-image-wrap::after,
    .leadership-image,
    .leadership-image img {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}

/* RIGHT CONTENT */
.leadership-content h2 {
    max-width: 760px;
    color: var(--primary-dark);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -1.5px;
}

.leadership-content > p {
    max-width: 720px;
    margin-top: 20px;
    color: var(--muted);
    font-size: 16.5px;
    line-height: 1.85;
}

.leadership-quote {
    position: relative;
    margin-top: 34px;
    padding: 30px 30px 30px 82px;
    border-radius: 30px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 18px 50px rgba(47, 0, 95, 0.08);
    border-left: 6px solid var(--gold);
}

.leadership-quote > span {
    position: absolute;
    left: 28px;
    top: 22px;
    color: var(--gold);
    font-size: 64px;
    line-height: 1;
    font-weight: 950;
}

.leadership-quote p {
    color: var(--primary-dark);
    font-size: 18px;
    line-height: 1.75;
    font-weight: 750;
}

.leadership-signature {
    margin-top: 28px;
}

.leadership-signature strong {
    display: block;
    color: var(--primary-dark);
    font-size: 20px;
    font-weight: 950;
}

.leadership-signature span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 14.5px;
    font-weight: 700;
}

/* FINAL CTA */
.about-final-cta {
    margin-top: 84px;
    padding: 38px 42px;
    border-radius: 34px;
    background:
        radial-gradient(circle at top right, rgba(214, 161, 43, 0.22), transparent 34%),
        linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    box-shadow: 0 26px 75px rgba(47, 0, 95, 0.2);
}

.about-final-cta span {
    display: inline-flex;
    margin-bottom: 10px;
    color: var(--gold);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.about-final-cta h3 {
    max-width: 720px;
    color: var(--white);
    font-size: clamp(26px, 4vw, 40px);
    line-height: 1.15;
    font-weight: 950;
    letter-spacing: -1px;
}

.about-final-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.about-final-primary,
.about-final-secondary {
    min-height: 50px;
    padding: 0 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14.5px;
    font-weight: 850;
    transition: 0.3s ease;
    white-space: nowrap;
}

.about-final-primary {
    color: var(--white);
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    box-shadow: 0 16px 34px rgba(214, 161, 43, 0.24);
}

.about-final-secondary {
    color: var(--white);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
}

.about-final-primary:hover,
.about-final-secondary:hover {
    transform: translateY(-3px);
}

/* =========================
   RESPONSIVE LEADERSHIP SECTION
========================= */

@media (max-width: 1050px) {
    .leadership-section {
        padding: 88px 0;
    }

    .leadership-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .leadership-image-wrap {
        width: min(100%, 460px);
        margin: 0 auto;
    }

    .leadership-content {
        text-align: center;
    }

    .leadership-content h2,
    .leadership-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .leadership-quote {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    .about-final-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .about-final-actions {
        width: 100%;
    }

    .about-final-primary,
    .about-final-secondary {
        flex: 1;
    }
}

@media (max-width: 700px) {
    .leadership-section {
        padding: 72px 0;
    }

    .leadership-image-wrap {
        max-width: 380px;
        border-radius: 28px;
        padding: 3.5px;
    }

    .leadership-image-wrap::before {
        border-radius: 34px;
        filter: blur(15px);
    }

    .leadership-image-wrap::after {
        border-radius: 28px;
        padding: 3px;
    }

    .leadership-image {
        min-height: auto;
        border-radius: 25px;
    }

    .leadership-image img {
        width: 100%;
        height: auto;
        border-radius: 25px;
    }

    .leadership-content h2 {
        font-size: clamp(30px, 9vw, 40px);
        letter-spacing: -1px;
    }

    .leadership-content > p {
        font-size: 15.5px;
    }

    .leadership-quote {
        padding: 28px 22px;
        border-radius: 26px;
    }

    .leadership-quote > span {
        position: relative;
        left: auto;
        top: auto;
        display: block;
        margin-bottom: 8px;
        font-size: 46px;
    }

    .leadership-quote p {
        font-size: 16.5px;
    }

    .about-final-cta {
        margin-top: 62px;
        padding: 30px 24px;
        border-radius: 28px;
    }

    .about-final-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .about-final-primary,
    .about-final-secondary {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .leadership-image-wrap {
        max-width: 310px;
        border-radius: 24px;
        padding: 3px;
    }

    .leadership-image-wrap::before {
        border-radius: 28px;
        filter: blur(12px);
    }

    .leadership-image-wrap::after {
        border-radius: 24px;
        padding: 2.5px;
    }

    .leadership-image {
        border-radius: 21px;
    }

    .leadership-image img {
        width: 100%;
        height: auto;
        border-radius: 21px;
    }

    .about-final-cta {
        padding: 28px 20px;
    }
}

/* =========================
   ADMISSIONS PAGE HERO SECTION
========================= */

.admissions-hero-section {
    position: relative;
    padding: 96px 0 42px;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(214, 161, 43, 0.20), transparent 32%),
        linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
}

.admissions-hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
    z-index: 1;
}

.admissions-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(47, 0, 95, 0.86), rgba(91, 14, 166, 0.60)),
        radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.10), transparent 34%);
    z-index: 1;
}

.admissions-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
    gap: 70px;
}

.admissions-page-label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 22px;
    padding: 9px 17px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    color: var(--gold);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
}

.admissions-hero-content h1 {
    max-width: 790px;
    color: var(--white);
    font-size: clamp(42px, 5.5vw, 72px);
    line-height: 1.03;
    font-weight: 950;
    letter-spacing: -2.5px;
}

.admissions-hero-content p {
    max-width: 680px;
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 18px;
    line-height: 1.85;
}

.admissions-hero-actions {
    margin-top: 34px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.admissions-primary-btn,
.admissions-secondary-btn {
    min-height: 54px;
    padding: 0 25px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 850;
    transition: 0.3s ease;
}

.admissions-primary-btn {
    color: var(--white);
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    box-shadow: 0 16px 34px rgba(214, 161, 43, 0.28);
}

.admissions-secondary-btn {
    color: var(--white);
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(12px);
}

.admissions-primary-btn:hover,
.admissions-secondary-btn:hover {
    transform: translateY(-3px);
}

.admissions-hero-details {
    margin-top: 38px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    max-width: 760px;
}

.admissions-hero-details div {
    padding: 20px 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
}

.admissions-hero-details strong {
    display: block;
    color: var(--gold);
    font-size: 17px;
    font-weight: 950;
}

.admissions-hero-details span {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13.5px;
    line-height: 1.6;
    font-weight: 600;
}

/* RIGHT VISUAL */
.admissions-hero-visual {
    position: relative;
}

.admissions-image-card {
    position: relative;
    overflow: hidden;
    border-radius: 38px;
    min-height: 560px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 32px 85px rgba(0, 0, 0, 0.28);
}

.admissions-image-card img {
    width: 100%;
    height: 560px;
    object-fit: cover;
}

.admissions-image-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(47, 0, 95, 0.02), rgba(47, 0, 95, 0.58));
    pointer-events: none;
}

.admissions-image-badge {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(14px);
}

.admissions-image-badge img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    border-radius: 50%;
    background: var(--white);
    padding: 4px;
    box-shadow: 0 8px 20px rgba(91, 14, 166, 0.14);
}

.admissions-image-badge strong {
    display: block;
    color: var(--primary-dark);
    font-size: 17px;
    font-weight: 950;
}

.admissions-image-badge span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
}

.admissions-floating-card {
    position: absolute;
    top: 36px;
    left: -42px;
    z-index: 4;
    width: 240px;
    padding: 18px 20px;
    border-radius: 24px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.18);
}

.admissions-floating-card strong {
    display: block;
    color: var(--primary-dark);
    font-size: 17px;
    font-weight: 950;
}

.admissions-floating-card span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
    font-weight: 700;
}

/* BOTTOM STRIP */
.admissions-bottom-strip {
    position: relative;
    z-index: 2;
    margin-top: 70px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(16px);
}

.admissions-bottom-strip div {
    padding: 22px 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.admissions-bottom-strip div:last-child {
    border-right: none;
}

.admissions-bottom-strip strong {
    display: block;
    color: var(--white);
    font-size: 17px;
    font-weight: 900;
}

.admissions-bottom-strip span {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13.5px;
    font-weight: 600;
}

/* =========================
   RESPONSIVE ADMISSIONS HERO
========================= */

@media (max-width: 1050px) {
    .admissions-hero-section {
        padding: 78px 0 34px;
    }

    .admissions-hero-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .admissions-hero-content {
        text-align: center;
    }

    .admissions-hero-content h1,
    .admissions-hero-content p,
    .admissions-hero-details {
        margin-left: auto;
        margin-right: auto;
    }

    .admissions-hero-actions {
        justify-content: center;
    }

    .admissions-hero-visual {
        width: min(100%, 680px);
        margin: 0 auto;
    }

    .admissions-floating-card {
        left: 24px;
    }

    .admissions-bottom-strip {
        margin-top: 48px;
    }
}

@media (max-width: 700px) {
    .admissions-hero-section {
        padding: 62px 0 28px;
    }

    .admissions-hero-content h1 {
        font-size: clamp(36px, 11vw, 52px);
        letter-spacing: -1.6px;
    }

    .admissions-hero-content p {
        font-size: 16px;
        line-height: 1.75;
    }

    .admissions-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .admissions-primary-btn,
    .admissions-secondary-btn {
        width: 100%;
    }

    .admissions-hero-details {
        grid-template-columns: 1fr;
    }

    .admissions-image-card {
        min-height: auto;
        border-radius: 28px;
    }

    .admissions-image-card img {
        height: 390px;
    }

    .admissions-image-badge {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin-top: 18px;
        border-radius: 22px;
    }

    .admissions-floating-card {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin-top: 18px;
    }

    .admissions-bottom-strip {
        grid-template-columns: 1fr;
        border-radius: 24px;
    }

    .admissions-bottom-strip div {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    }

    .admissions-bottom-strip div:last-child {
        border-bottom: none;
    }
}

@media (max-width: 420px) {
    .admissions-image-card img {
        height: 330px;
    }

    .admissions-image-badge {
        align-items: flex-start;
        padding: 16px;
    }

    .admissions-image-badge img {
        width: 52px;
        height: 52px;
    }

    .admissions-bottom-strip div {
        padding: 19px;
    }
}

/* =========================
   ADMISSION PATHWAYS SECTION
========================= */

.admission-pathways-section {
    position: relative;
    padding: 110px 0;
    background:
        radial-gradient(circle at top left, rgba(214, 161, 43, 0.14), transparent 30%),
        radial-gradient(circle at bottom right, rgba(91, 14, 166, 0.10), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #fbf8ff 100%);
    overflow: hidden;
}

.admission-pathways-section::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -90px;
    top: 90px;
    border-radius: 50%;
    background: rgba(214, 161, 43, 0.12);
}

.admission-pathways-header {
    position: relative;
    z-index: 2;
    margin-bottom: 56px;
    display: grid;
    grid-template-columns: 1fr 0.82fr;
    align-items: end;
    gap: 50px;
}

.admission-pathways-header h2 {
    max-width: 720px;
    color: var(--primary-dark);
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -1.5px;
}

.admission-pathways-header p {
    color: var(--muted);
    font-size: 16.5px;
    line-height: 1.85;
}

/* MAIN SHOWCASE - PANORAMIC EXPANSIVE LAYOUT */
.admission-pathways-showcase {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* TOP PANORAMA VISUAL BANNER */
.pathway-visual-card {
    position: relative;
    width: 100%;
    min-height: 440px;
    height: 440px;
    overflow: hidden;
    border-radius: 36px;
    border: 1px solid var(--border);
    box-shadow: 0 30px 85px rgba(47, 0, 95, 0.18);
}

.pathway-visual-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transition: 0.6s ease;
}

.pathway-visual-card:hover img {
    transform: scale(1.03);
}

.pathway-visual-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(47, 0, 95, 0.06), rgba(47, 0, 95, 0.72));
}

.pathway-visual-overlay {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    z-index: 3;
    padding: 24px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px);
}

.pathway-visual-overlay span {
    display: inline-flex;
    margin-bottom: 9px;
    color: var(--gold-dark);
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.pathway-visual-overlay h3 {
    color: var(--primary-dark);
    font-size: 28px;
    line-height: 1.15;
    font-weight: 950;
    letter-spacing: -0.7px;
}

/* FLOATING CHIPS */
.pathway-floating-chip {
    position: absolute;
    z-index: 4;
    width: 168px;
    padding: 16px 18px;
    border-radius: 22px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 22px 55px rgba(47, 0, 95, 0.16);
    animation: softFloat 4s ease-in-out infinite;
}

.pathway-floating-chip strong {
    display: block;
    color: var(--primary);
    font-size: 28px;
    line-height: 1;
    font-weight: 950;
}

.pathway-floating-chip span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 750;
}

.chip-one {
    top: 34px;
    right: 28px;
}

.chip-two {
    top: 170px;
    left: 28px;
    animation-delay: 1.2s;
}

@keyframes softFloat {
    0%, 100% {
        transform: translateY(0);
    }

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

/* PATHWAY CARDS GRID - 6-COLUMN BALANCED ADAPTIVE SYSTEM */
.pathway-cards {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 26px;
}

.pathway-cards .pathway-card:nth-child(1),
.pathway-cards .pathway-card:nth-child(2),
.pathway-cards .pathway-card:nth-child(3) {
    grid-column: span 2;
}

.pathway-cards .pathway-card:nth-child(4),
.pathway-cards .pathway-card:nth-child(5) {
    grid-column: span 3;
}

.pathway-card {
    position: relative;
    overflow: hidden;
    padding: 28px;
    border-radius: 32px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 18px 50px rgba(47, 0, 95, 0.08);
    transition: 0.35s ease;
}

.pathway-card::before {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -54px;
    top: -54px;
    border-radius: 50%;
    background: rgba(91, 14, 166, 0.08);
}

.pathway-card.featured {
    background:
        radial-gradient(circle at top right, rgba(214, 161, 43, 0.23), transparent 34%),
        linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: rgba(255, 255, 255, 0.20);
    box-shadow: 0 26px 75px rgba(47, 0, 95, 0.20);
}

.pathway-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 70px rgba(47, 0, 95, 0.14);
}

.pathway-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 16px;
}

.pathway-icon {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    background: var(--primary-soft);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 950;
    flex-shrink: 0;
}

.pathway-card.featured .pathway-icon {
    background: var(--gold);
    color: var(--white);
}

.pathway-card h3 {
    color: var(--primary-dark);
    font-size: 25px;
    line-height: 1.15;
    font-weight: 950;
    letter-spacing: -0.5px;
}

.pathway-card.featured h3 {
    color: var(--white);
}

.pathway-card small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.pathway-card.featured small {
    color: rgba(255, 255, 255, 0.72);
}

.pathway-card p {
    position: relative;
    z-index: 2;
    margin-top: 18px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}

.pathway-card.featured p {
    color: rgba(255, 255, 255, 0.78);
}

.pathway-tags {
    position: relative;
    z-index: 2;
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pathway-tags span {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 12.5px;
    font-weight: 850;
}

.pathway-card.featured .pathway-tags span {
    background: rgba(255, 255, 255, 0.13);
    color: var(--gold);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* GUIDANCE PANEL */
.admission-guidance-panel {
    position: relative;
    z-index: 2;
    margin-top: 34px;
    padding: 30px;
    border-radius: 34px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
    border: 1px solid var(--border);
    box-shadow: 0 22px 65px rgba(47, 0, 95, 0.11);
    display: grid;
    grid-template-columns: 0.9fr 1fr auto;
    align-items: center;
    gap: 28px;
    backdrop-filter: blur(14px);
}

.guidance-intro span {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--gold-dark);
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.guidance-intro h3 {
    color: var(--primary-dark);
    font-size: 26px;
    line-height: 1.18;
    font-weight: 950;
    letter-spacing: -0.5px;
}

.guidance-intro p {
    margin-top: 8px;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.7;
}

.guidance-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.guidance-steps div {
    padding: 16px;
    border-radius: 20px;
    background: var(--primary-soft);
    border: 1px solid var(--border);
}

.guidance-steps strong {
    display: block;
    color: var(--primary);
    font-size: 14px;
    font-weight: 950;
}

.guidance-steps span {
    display: block;
    margin-top: 5px;
    color: var(--dark);
    font-size: 13.5px;
    font-weight: 800;
}

.guidance-actions {
    display: grid;
    gap: 12px;
    min-width: 210px;
}

.guidance-primary-btn,
.guidance-secondary-btn {
    min-height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 850;
    transition: 0.3s ease;
    white-space: nowrap;
}

.guidance-primary-btn {
    color: var(--white);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 14px 32px rgba(91, 14, 166, 0.20);
}

.guidance-secondary-btn {
    color: var(--primary);
    background: var(--white);
    border: 1px solid var(--border);
}

.guidance-primary-btn:hover,
.guidance-secondary-btn:hover {
    transform: translateY(-3px);
}

/* =========================
   RESPONSIVE ADMISSION PATHWAYS
========================= */

@media (max-width: 1050px) {
    .admission-pathways-section {
        padding: 88px 0;
    }

    .admission-pathways-header {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 18px;
    }

    .admission-pathways-header h2,
    .admission-pathways-header p {
        margin-left: auto;
        margin-right: auto;
    }

    .admission-pathways-header p {
        max-width: 720px;
    }

    .admission-pathways-showcase {
        max-width: 100%;
        margin: 0 auto;
    }

    .pathway-visual-card {
        min-height: 380px;
        height: 380px;
    }

    .pathway-visual-card img {
        height: 100%;
    }

    .pathway-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .pathway-cards .pathway-card:nth-child(1),
    .pathway-cards .pathway-card:nth-child(2),
    .pathway-cards .pathway-card:nth-child(3),
    .pathway-cards .pathway-card:nth-child(4) {
        grid-column: span 1;
    }

    .pathway-cards .pathway-card:nth-child(5) {
        grid-column: span 2;
    }

    .admission-guidance-panel {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
        grid-template-columns: 1fr;
        text-align: center;
    }

    .guidance-steps {
        grid-template-columns: repeat(3, 1fr);
    }

    .guidance-actions {
        grid-template-columns: repeat(2, 1fr);
        min-width: 0;
    }
}

@media (max-width: 700px) {
    .admission-pathways-section {
        padding: 72px 0;
    }

    .admission-pathways-header {
        margin-bottom: 42px;
    }

    .admission-pathways-header h2 {
        font-size: clamp(30px, 9vw, 40px);
        letter-spacing: -1px;
    }

    .admission-pathways-header p {
        font-size: 15.5px;
        line-height: 1.75;
    }

    .pathway-visual-card {
        border-radius: 28px;
    }

    .pathway-visual-card img {
        height: 350px;
    }

    .pathway-visual-overlay {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin-top: 18px;
        border-radius: 22px;
    }

    .pathway-floating-chip {
        position: relative;
        width: 100%;
        left: auto;
        right: auto;
        top: auto;
        margin-top: 14px;
        animation: none;
    }

    .chip-one,
    .chip-two {
        top: auto;
        left: auto;
        right: auto;
    }

    .pathway-cards {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .pathway-cards .pathway-card:nth-child(n) {
        grid-column: span 1;
    }

    .pathway-card {
        padding: 24px 22px;
        border-radius: 26px;
    }

    .pathway-card-top {
        align-items: flex-start;
    }

    .pathway-icon {
        width: 52px;
        height: 52px;
        border-radius: 18px;
    }

    .pathway-card h3 {
        font-size: 22px;
    }

    .admission-guidance-panel {
        padding: 24px 20px;
        border-radius: 28px;
    }

    .guidance-steps {
        grid-template-columns: 1fr;
    }

    .guidance-actions {
        grid-template-columns: 1fr;
    }

    .guidance-primary-btn,
    .guidance-secondary-btn {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .pathway-visual-card img {
        height: 300px;
    }

    .pathway-visual-overlay {
        padding: 20px;
    }

    .pathway-visual-overlay h3 {
        font-size: 23px;
    }

    .pathway-card {
        padding: 22px 20px;
    }
}

/* =========================
   ADMISSION PROCESS SECTION
========================= */

.admission-process-section {
    position: relative;
    padding: 110px 0;
    background:
        radial-gradient(circle at top right, rgba(91, 14, 166, 0.08), transparent 32%),
        linear-gradient(180deg, #fbf8ff 0%, #ffffff 100%);
    overflow: hidden;
}

.admission-process-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 70px;
}

.admission-process-content h2 {
    max-width: 680px;
    color: var(--primary-dark);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -1.5px;
}

.admission-process-content > p {
    max-width: 650px;
    margin-top: 20px;
    color: var(--muted);
    font-size: 16.5px;
    line-height: 1.85;
}

.process-note-card {
    margin-top: 34px;
    padding: 24px 26px;
    border-radius: 26px;
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 6px solid var(--gold);
    box-shadow: 0 18px 45px rgba(47, 0, 95, 0.08);
}

.process-note-card strong {
    display: block;
    color: var(--primary-dark);
    font-size: 18px;
    font-weight: 950;
}

.process-note-card span {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
    font-weight: 600;
}

.process-main-btn {
    margin-top: 32px;
    min-height: 52px;
    padding: 0 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    font-size: 15px;
    font-weight: 850;
    box-shadow: 0 14px 32px rgba(91, 14, 166, 0.2);
    transition: 0.3s ease;
}

.process-main-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 42px rgba(91, 14, 166, 0.28);
}

/* TIMELINE */
.admission-process-timeline {
    position: relative;
    display: grid;
    gap: 18px;
}

.admission-process-timeline::before {
    content: "";
    position: absolute;
    top: 34px;
    bottom: 34px;
    left: 35px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--gold), var(--primary));
}

.process-step-card {
    position: relative;
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 18px;
    padding: 24px;
    border-radius: 28px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 18px 50px rgba(47, 0, 95, 0.08);
    transition: 0.3s ease;
}

.process-step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 65px rgba(47, 0, 95, 0.13);
}

.process-step-number {
    position: relative;
    z-index: 2;
    width: 72px;
    height: 72px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 950;
    box-shadow: 0 14px 30px rgba(47, 0, 95, 0.18);
}

.process-step-card:nth-child(2) .process-step-number,
.process-step-card:nth-child(4) .process-step-number {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
}

.process-step-card h3 {
    color: var(--primary-dark);
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -0.4px;
}

.process-step-card p {
    margin-top: 8px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

/* REQUIREMENTS PANEL */
.admission-requirements-panel {
    margin-top: 78px;
    padding: 36px;
    border-radius: 36px;
    background:
        radial-gradient(circle at top right, rgba(214, 161, 43, 0.20), transparent 34%),
        linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 28px 80px rgba(47, 0, 95, 0.22);
}

.requirements-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 28px;
}

.requirements-header span {
    display: inline-flex;
    margin-bottom: 10px;
    color: var(--gold);
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.requirements-header h3 {
    max-width: 680px;
    color: var(--white);
    font-size: clamp(26px, 4vw, 40px);
    line-height: 1.15;
    font-weight: 950;
    letter-spacing: -1px;
}

.requirements-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.requirement-item {
    padding: 22px 20px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
}

.requirement-item strong {
    display: block;
    color: var(--gold);
    font-size: 16px;
    font-weight: 950;
}

.requirement-item p {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.65;
    font-weight: 600;
}

/* =========================
   RESPONSIVE ADMISSION PROCESS
========================= */

@media (max-width: 1050px) {
    .admission-process-section {
        padding: 88px 0;
    }

    .admission-process-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .admission-process-content {
        text-align: center;
    }

    .admission-process-content h2,
    .admission-process-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .process-note-card {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    .admission-process-timeline {
        max-width: 760px;
        margin: 0 auto;
    }

    .requirements-header {
        flex-direction: column;
        align-items: flex-start;
    }

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

@media (max-width: 700px) {
    .admission-process-section {
        padding: 72px 0;
    }

    .admission-process-content h2 {
        font-size: clamp(30px, 9vw, 40px);
        letter-spacing: -1px;
    }

    .admission-process-content > p {
        font-size: 15.5px;
    }

    .process-main-btn {
        width: 100%;
    }

    .admission-process-timeline::before {
        display: none;
    }

    .process-step-card {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 24px 22px;
        border-radius: 26px;
    }

    .process-step-number {
        width: 58px;
        height: 58px;
        border-radius: 20px;
    }

    .process-step-card h3 {
        font-size: 21px;
    }

    .admission-requirements-panel {
        margin-top: 58px;
        padding: 28px 22px;
        border-radius: 28px;
    }

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

    .requirement-item {
        border-radius: 22px;
    }
}

@media (max-width: 420px) {
    .process-note-card {
        padding: 22px 20px;
    }

    .process-step-card {
        padding: 22px 20px;
    }

    .admission-requirements-panel {
        padding: 26px 18px;
    }
}
/* =========================
   FINAL ADMISSION FORM SECTION
========================= */

.admission-final-section {
    position: relative;
    padding: 110px 0;
    background:
        radial-gradient(circle at top left, rgba(214, 161, 43, 0.12), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fbf8ff 100%);
    overflow: hidden;
}

.admission-final-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;
    gap: 70px;
}

.admission-final-content h2 {
    max-width: 680px;
    color: var(--primary-dark);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -1.5px;
}

.admission-final-content > p {
    max-width: 650px;
    margin-top: 20px;
    color: var(--muted);
    font-size: 16.5px;
    line-height: 1.85;
}

.admission-final-contact {
    margin-top: 34px;
    display: grid;
    gap: 16px;
}

.admission-final-contact div {
    padding: 20px 22px;
    border-radius: 22px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 14px 34px rgba(47, 0, 95, 0.06);
}

.admission-final-contact strong {
    display: block;
    color: var(--primary-dark);
    font-size: 15px;
    font-weight: 950;
}

.admission-final-contact span {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.65;
    font-weight: 600;
}

.admission-final-contact a {
    color: var(--primary);
    font-weight: 850;
}

.admission-final-actions {
    margin-top: 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.final-whatsapp-btn,
.final-call-btn {
    min-height: 50px;
    padding: 0 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14.5px;
    font-weight: 850;
    transition: 0.3s ease;
}

.final-whatsapp-btn {
    color: var(--white);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 14px 32px rgba(91, 14, 166, 0.2);
}

.final-call-btn {
    color: var(--primary);
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 10px 26px rgba(47, 0, 95, 0.07);
}

.final-whatsapp-btn:hover,
.final-call-btn:hover {
    transform: translateY(-3px);
}

/* FORM CARD */
.admission-final-form-card {
    position: relative;
    padding: 34px;
    border-radius: 36px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 28px 80px rgba(47, 0, 95, 0.14);
}

.admission-final-form-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 36px;
    background:
        radial-gradient(circle at top right, rgba(214, 161, 43, 0.14), transparent 34%);
    pointer-events: none;
}

.admission-final-form-header {
    position: relative;
    z-index: 2;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.admission-final-form-header img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    border-radius: 50%;
    background: var(--white);
    padding: 4px;
    box-shadow: 0 10px 25px rgba(91, 14, 166, 0.16);
}

.admission-final-form-header h3 {
    color: var(--primary-dark);
    font-size: 30px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.8px;
}

.admission-final-form-header p {
    margin-top: 6px;
    color: var(--muted);
    font-size: 14.5px;
    font-weight: 600;
}

.final-admission-form {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 18px;
}

.final-submit-btn {
    min-height: 54px;
    border: none;
    border-radius: 999px;
    color: var(--white);
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 16px 34px rgba(214, 161, 43, 0.26);
    transition: 0.3s ease;
}

.final-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px rgba(214, 161, 43, 0.36);
}

.final-form-note {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
    text-align: center;
}

/* =========================
   RESPONSIVE FINAL ADMISSION FORM
========================= */

@media (max-width: 1050px) {
    .admission-final-section {
        padding: 88px 0;
    }

    .admission-final-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .admission-final-content {
        text-align: center;
    }

    .admission-final-content h2,
    .admission-final-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .admission-final-contact {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .admission-final-contact div {
        text-align: left;
    }

    .admission-final-actions {
        justify-content: center;
    }

    .admission-final-form-card {
        max-width: 760px;
        margin: 0 auto;
    }
}

@media (max-width: 700px) {
    .admission-final-section {
        padding: 72px 0;
    }

    .admission-final-content h2 {
        font-size: clamp(30px, 9vw, 40px);
        letter-spacing: -1px;
    }

    .admission-final-content > p {
        font-size: 15.5px;
    }

    .admission-final-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .final-whatsapp-btn,
    .final-call-btn {
        width: 100%;
    }

    .admission-final-form-card {
        padding: 26px 22px;
        border-radius: 28px;
    }

    .admission-final-form-card::before {
        border-radius: 28px;
    }

    .admission-final-form-header {
        align-items: flex-start;
    }

    .admission-final-form-header img {
        width: 56px;
        height: 56px;
    }

    .admission-final-form-header h3 {
        font-size: 25px;
    }
}

@media (max-width: 420px) {
    .admission-final-contact div {
        padding: 18px;
    }

    .admission-final-form-card {
        padding: 24px 18px;
    }
}

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

.contact-hero-section {
    position: relative;
    padding: 96px 0;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(47, 0, 95, 0.90), rgba(91, 14, 166, 0.72)),
        url("../images/fresh/campus/campus-frontage-gated.jpg") center/cover no-repeat;
}

.contact-hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
}

.contact-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    text-align: center;
}

.contact-page-label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 22px;
    padding: 9px 17px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    color: var(--gold);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
}

.contact-hero-content h1 {
    color: var(--white);
    font-size: clamp(42px, 5.5vw, 72px);
    line-height: 1.03;
    font-weight: 950;
    letter-spacing: -2.5px;
}

.contact-hero-content p {
    max-width: 720px;
    margin: 24px auto 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 18px;
    line-height: 1.85;
}

.contact-hero-actions {
    margin-top: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.contact-hero-primary,
.contact-hero-secondary {
    min-height: 54px;
    padding: 0 25px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 850;
    transition: 0.3s ease;
}

.contact-hero-primary {
    color: var(--white);
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    box-shadow: 0 16px 34px rgba(214, 161, 43, 0.28);
}

.contact-hero-secondary {
    color: var(--white);
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(12px);
}

.contact-hero-primary:hover,
.contact-hero-secondary:hover {
    transform: translateY(-3px);
}

/* CONTACT MAIN */
.contact-main-section {
    padding: 110px 0;
    background:
        radial-gradient(circle at top left, rgba(214, 161, 43, 0.12), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fbf8ff 100%);
}

.contact-main-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;
    gap: 70px;
}

.contact-info-area h2 {
    max-width: 680px;
    color: var(--primary-dark);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -1.5px;
}

.contact-info-area > p {
    max-width: 650px;
    margin-top: 20px;
    color: var(--muted);
    font-size: 16.5px;
    line-height: 1.85;
}

.contact-info-list {
    margin-top: 34px;
    display: grid;
    gap: 16px;
}

.contact-info-list div {
    padding: 20px 22px;
    border-radius: 22px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 14px 34px rgba(47, 0, 95, 0.06);
}

.contact-info-list strong {
    display: block;
    color: var(--primary-dark);
    font-size: 15px;
    font-weight: 950;
}

.contact-info-list span {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.65;
    font-weight: 600;
}

.contact-info-list a {
    color: var(--primary);
    font-weight: 850;
}

/* CONTACT FORM */
.contact-form-card {
    position: relative;
    padding: 34px;
    border-radius: 36px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 28px 80px rgba(47, 0, 95, 0.14);
}

.contact-form-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 36px;
    background: radial-gradient(circle at top right, rgba(214, 161, 43, 0.14), transparent 34%);
    pointer-events: none;
}

.contact-form-header,
.contact-form {
    position: relative;
    z-index: 2;
}

.contact-form-header {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.contact-form-header img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    border-radius: 50%;
    background: var(--white);
    padding: 4px;
    box-shadow: 0 10px 25px rgba(91, 14, 166, 0.16);
}

.contact-form-header h3 {
    color: var(--primary-dark);
    font-size: 30px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.8px;
}

.contact-form-header p {
    margin-top: 6px;
    color: var(--muted);
    font-size: 14.5px;
    font-weight: 600;
}

.contact-form {
    display: grid;
    gap: 18px;
}

.contact-submit-btn {
    min-height: 54px;
    border: none;
    border-radius: 999px;
    color: var(--white);
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 16px 34px rgba(214, 161, 43, 0.26);
    transition: 0.3s ease;
}

.contact-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px rgba(214, 161, 43, 0.36);
}

.contact-form-note {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
    text-align: center;
}

/* LOCATION MAP CARD */
.contact-map-card {
    margin-top: 72px;
    padding: 38px 42px;
    border-radius: 34px;
    background:
        radial-gradient(circle at top right, rgba(214, 161, 43, 0.22), transparent 34%),
        linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    box-shadow: 0 26px 75px rgba(47, 0, 95, 0.2);
}

.contact-map-card span {
    display: inline-flex;
    margin-bottom: 10px;
    color: var(--gold);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.contact-map-card h3 {
    max-width: 760px;
    color: var(--white);
    font-size: clamp(24px, 4vw, 36px);
    line-height: 1.18;
    font-weight: 950;
    letter-spacing: -1px;
}

.contact-map-card p {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
    line-height: 1.7;
}

.contact-map-card a {
    min-height: 50px;
    padding: 0 22px;
    border-radius: 999px;
    color: var(--white);
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14.5px;
    font-weight: 850;
    white-space: nowrap;
    transition: 0.3s ease;
}

.contact-map-card a:hover {
    transform: translateY(-3px);
}

/* PORTAL FOOTER LINK */
.footer-portal-link {
    color: var(--gold) !important;
    font-weight: 850 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
}

.footer-portal-link:hover {
    color: var(--gold-light) !important;
    transform: translateX(3px);
}

/* RESPONSIVE CONTACT PAGE */
@media (max-width: 1050px) {
    .contact-main-section {
        padding: 88px 0;
    }

    .contact-main-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .contact-info-area {
        text-align: center;
    }

    .contact-info-area h2,
    .contact-info-area > p {
        margin-left: auto;
        margin-right: auto;
    }

    .contact-info-list,
    .contact-form-card {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }

    .contact-info-list div {
        text-align: left;
    }

    .contact-map-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 700px) {
    .contact-hero-section {
        padding: 70px 0;
    }

    .contact-hero-content h1 {
        font-size: clamp(36px, 11vw, 52px);
        letter-spacing: -1.6px;
    }

    .contact-hero-content p {
        font-size: 16px;
        line-height: 1.75;
    }

    .contact-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-hero-primary,
    .contact-hero-secondary {
        width: 100%;
    }

    .contact-main-section {
        padding: 72px 0;
    }

    .contact-info-area h2 {
        font-size: clamp(30px, 9vw, 40px);
        letter-spacing: -1px;
    }

    .contact-info-area > p {
        font-size: 15.5px;
    }

    .contact-form-card {
        padding: 26px 22px;
        border-radius: 28px;
    }

    .contact-form-card::before {
        border-radius: 28px;
    }

    .contact-form-header {
        align-items: flex-start;
    }

    .contact-form-header img {
        width: 56px;
        height: 56px;
    }

    .contact-form-header h3 {
        font-size: 25px;
    }

    .contact-map-card {
        margin-top: 56px;
        padding: 30px 24px;
        border-radius: 28px;
    }

    .contact-map-card a {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .contact-info-list div {
        padding: 18px;
    }

    .contact-form-card {
        padding: 24px 18px;
    }

    .contact-map-card {
        padding: 28px 20px;
    }
}

/* =========================================================
   2026–2027 CELEBRATORY RESUMPTION SHOWCASE SECTION
========================================================= */

.resumption-celebration-section {
    position: relative;
    padding: 100px 0 110px;
    background:
        radial-gradient(circle at 10% 20%, rgba(106, 17, 176, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(245, 166, 35, 0.10) 0%, transparent 45%),
        linear-gradient(180deg, #ffffff 0%, #fbf8ff 50%, #ffffff 100%);
    overflow: hidden;
}

.resumption-header {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 56px;
}

.resumption-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.15) 0%, rgba(76, 0, 130, 0.10) 100%);
    color: var(--primary-dark);
    border: 1px solid rgba(245, 166, 35, 0.45);
    padding: 8px 18px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(245, 166, 35, 0.15);
}

.resumption-header h2 {
    font-size: clamp(32px, 4.2vw, 54px);
    line-height: 1.15;
    font-weight: 950;
    color: var(--primary-dark);
    letter-spacing: -1.5px;
    margin-bottom: 18px;
}

.resumption-highlight {
    background: linear-gradient(135deg, var(--primary) 0%, #7b1fa2 50%, var(--gold-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.resumption-subtitle {
    font-size: 17px;
    line-height: 1.8;
    color: var(--muted);
    max-width: 720px;
    margin: 0 auto;
}

/* RESUMPTION GALLERY GRID */
.resumption-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    margin-bottom: 50px;
}

.resumption-card {
    background: var(--white);
    border-radius: 26px;
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: 0 16px 42px rgba(42, 0, 74, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.resumption-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 60px rgba(76, 0, 130, 0.16);
    border-color: rgba(76, 0, 130, 0.28);
}

.resumption-card-media {
    position: relative;
    aspect-ratio: 4 / 3.4;
    overflow: hidden;
    background: #1a0f2b;
    cursor: pointer;
}

.resumption-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.resumption-card:hover .resumption-card-media img {
    transform: scale(1.08);
}

.resumption-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(18, 15, 31, 0.85);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(10px);
    font-size: 11.5px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    letter-spacing: 0.3px;
    z-index: 2;
}

.resumption-card-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(42, 0, 74, 0.65);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
    padding: 16px;
}

.resumption-card:hover .resumption-card-hover-overlay {
    opacity: 1;
}

.resumption-card-hover-overlay span {
    background: #ffffff;
    color: var(--primary-dark);
    font-size: 12.5px;
    font-weight: 850;
    padding: 9px 18px;
    border-radius: var(--radius-full);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

.resumption-card:hover .resumption-card-hover-overlay span {
    transform: translateY(0);
}

.resumption-card-body {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.resumption-date-label {
    display: inline-block;
    color: var(--gold-dark);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.resumption-card-body h3 {
    font-size: 19px;
    font-weight: 900;
    color: var(--primary-dark);
    line-height: 1.35;
    margin-bottom: 8px;
}

.resumption-card-body p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--muted);
    margin-bottom: 16px;
    flex-grow: 1;
}

.resumption-view-trigger {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-soft);
    color: var(--primary);
    border: 1px solid var(--border);
    padding: 7px 14px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 850;
    transition: all 0.25s ease;
}

.resumption-view-trigger:hover {
    background: var(--primary);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(76, 0, 130, 0.25);
}

/* RESUMPTION CTA CARD */
.resumption-cta-card {
    background: linear-gradient(135deg, #1d0033 0%, #35005e 50%, #4c0082 100%);
    border-radius: 30px;
    padding: 42px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    color: #ffffff;
    box-shadow: 0 24px 60px rgba(42, 0, 74, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
    overflow: hidden;
}

.resumption-cta-card::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 166, 35, 0.25) 0%, transparent 70%);
    pointer-events: none;
}

.cta-kicker {
    display: inline-block;
    color: var(--gold-light);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.resumption-cta-text h3 {
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 950;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 8px;
}

.resumption-cta-text p {
    font-size: 15.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    max-width: 620px;
}

.resumption-cta-buttons {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.resumption-enroll-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 30px;
    border-radius: var(--radius-full);
    background: var(--gold-gradient);
    color: var(--dark);
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 8px 24px rgba(245, 166, 35, 0.35);
    white-space: nowrap;
    transition: all 0.25s ease;
}

.resumption-enroll-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(245, 166, 35, 0.5);
    color: #000;
}

.resumption-tiktok-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 24px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 14.5px;
    font-weight: 800;
    white-space: nowrap;
    transition: all 0.25s ease;
    backdrop-filter: blur(10px);
}

.resumption-tiktok-link:hover {
    background: #000000;
    color: #25f4ee;
    border-color: #fe2c55;
    transform: translateY(-2px);
}

/* =========================================================
   TIKTOK SOCIAL TREND & CAMPUS LIFE SECTION
========================================================= */

.tiktok-section {
    position: relative;
    padding: 110px 0 120px;
    background:
        radial-gradient(circle at 15% 25%, rgba(37, 244, 238, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(254, 44, 85, 0.10) 0%, transparent 45%),
        linear-gradient(135deg, #0b0716 0%, #150c26 50%, #0d071a 100%);
    color: #ffffff;
    overflow: hidden;
}

.tiktok-header-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.9fr;
    align-items: center;
    gap: 56px;
    margin-bottom: 60px;
}

.tiktok-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 7px 16px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #25f4ee;
    margin-bottom: 18px;
}

.tiktok-neon-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fe2c55;
    box-shadow: 0 0 10px #fe2c55;
    animation: neonBlink 1.4s ease-in-out infinite alternate;
}

@keyframes neonBlink {
    0% { opacity: 0.4; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1.15); box-shadow: 0 0 14px #fe2c55; }
}

.tiktok-header-text h2 {
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.15;
    font-weight: 950;
    color: #ffffff;
    letter-spacing: -1.4px;
    margin-bottom: 18px;
}

.tiktok-gradient-text {
    background: linear-gradient(90deg, #25f4ee 0%, #ffffff 40%, #fe2c55 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tiktok-header-text > p {
    font-size: 16.5px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.82);
}

.tiktok-hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.tiktok-hashtags span {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.88);
    padding: 6px 13px;
    border-radius: var(--radius-full);
    font-size: 12.5px;
    font-weight: 750;
    letter-spacing: 0.2px;
}

.tiktok-profile-action {
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.tiktok-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, #fe2c55 0%, #ff4b72 50%, #25f4ee 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    padding: 14px 28px;
    border-radius: var(--radius-full);
    box-shadow: 0 10px 32px rgba(254, 44, 85, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tiktok-follow-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(37, 244, 238, 0.45);
    color: #000000;
}

.tiktok-stats-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 8px 18px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 750;
    color: rgba(255, 255, 255, 0.85);
}

.sound-wave {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 16px;
}

.sound-wave span {
    width: 3px;
    background: #25f4ee;
    border-radius: var(--radius-full);
    animation: soundWave 1.2s ease-in-out infinite alternate;
}

.sound-wave span:nth-child(1) { height: 6px; animation-delay: 0.1s; }
.sound-wave span:nth-child(2) { height: 14px; animation-delay: 0.3s; }
.sound-wave span:nth-child(3) { height: 9px; animation-delay: 0.2s; }
.sound-wave span:nth-child(4) { height: 16px; animation-delay: 0.4s; }
.sound-wave span:nth-child(5) { height: 8px; animation-delay: 0.15s; }

@keyframes soundWave {
    0% { height: 4px; }
    100% { height: 16px; }
}

/* TIKTOK PROFILE CARD */
.tiktok-profile-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 28px;
    padding: 30px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.tiktok-card-top {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tiktok-avatar {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.tiktok-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fe2c55;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(254, 44, 85, 0.3);
}

.verified-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #20d5ec;
    color: #0b0716;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 950;
    border: 2px solid #0b0716;
}

.tiktok-user-meta h3 {
    font-size: 18px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.2;
}

.tiktok-user-meta span {
    font-size: 13px;
    color: #25f4ee;
    font-weight: 750;
}

.tiktok-card-btn {
    margin-left: auto;
    background: #fe2c55;
    color: #ffffff;
    font-size: 13px;
    font-weight: 850;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    transition: all 0.25s ease;
    white-space: nowrap;
}

.tiktok-card-btn:hover {
    background: #ffffff;
    color: #000000;
    transform: scale(1.04);
}

.tiktok-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 18px;
    padding: 14px 10px;
    margin: 22px 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.tiktok-metrics strong {
    display: block;
    font-size: 16px;
    font-weight: 950;
    color: #ffffff;
}

.tiktok-metrics span {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
}

.tiktok-bio {
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.tiktok-live-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12.5px;
    font-weight: 750;
    color: #25f4ee;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fe2c55;
    animation: livePulse 1.2s ease-in-out infinite;
}

@keyframes livePulse {
    0% { transform: scale(0.9); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 10px #fe2c55; }
    100% { transform: scale(0.9); opacity: 0.6; }
}

/* TIKTOK REELS GRID */
.tiktok-reels-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.reel-card {
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.reel-card:hover {
    transform: translateY(-8px);
    border-color: rgba(37, 244, 238, 0.45);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.reel-media {
    position: relative;
    aspect-ratio: 9 / 13.5;
    overflow: hidden;
    background: #000000;
}

.reel-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.reel-card:hover .reel-media img {
    transform: scale(1.08);
}

.reel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.85) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    z-index: 2;
}

.reel-play-icon {
    align-self: center;
    margin: auto 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 3px;
    transition: all 0.3s ease;
}

.reel-card:hover .reel-play-icon {
    transform: scale(1.18);
    background: #fe2c55;
    border-color: #fe2c55;
    box-shadow: 0 0 20px rgba(254, 44, 85, 0.6);
}

.reel-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 850;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.reel-caption {
    padding: 16px 18px 20px;
    background: rgba(14, 9, 24, 0.95);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.reel-caption p {
    font-size: 13.5px;
    font-weight: 750;
    line-height: 1.5;
    color: #ffffff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
}

.reel-audio {
    font-size: 11.5px;
    font-weight: 750;
    color: #25f4ee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: auto;
}

/* =========================================================
   RESUMPTION PHOTO LIGHTBOX MODAL
========================================================= */

.resumption-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.resumption-modal.active {
    display: flex;
}

.resumption-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 7, 20, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.resumption-modal-dialog {
    position: relative;
    z-index: 2;
    width: min(860px, 96%);
    background: #180f29;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7);
    animation: modalScaleUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleUp {
    0% { opacity: 0; transform: scale(0.92); }
    100% { opacity: 1; transform: scale(1); }
}

.resumption-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.25s ease;
}

.resumption-modal-close:hover {
    background: #fe2c55;
    border-color: #fe2c55;
    transform: scale(1.08);
}

.resumption-modal-image-wrap {
    background: #000000;
    max-height: 64vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.resumption-modal-image-wrap img {
    max-height: 64vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.resumption-modal-caption {
    padding: 22px 28px 24px;
    background: #140b22;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-session-tag {
    display: block;
    color: var(--gold);
    font-size: 11.5px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.resumption-modal-caption h4 {
    font-size: 21px;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 4px;
}

.resumption-modal-caption p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
}

/* =========================================================
   2026 MOBILE BOTTOM ACTION BAR
========================================================= */

.mobile-bottom-bar {
    display: none !important;
}

@media (max-width: 768px) {
    body {
        padding-bottom: 0 !important;
    }
}

/* =========================================================
   RESPONSIVE LAYOUTS FOR RESUMPTION & TIKTOK SECTIONS
========================================================= */

@media (max-width: 1050px) {
    .resumption-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    .resumption-cta-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 34px 30px;
    }

    .resumption-cta-buttons {
        width: 100%;
        flex-wrap: wrap;
    }

    .resumption-enroll-btn,
    .resumption-tiktok-link {
        flex: 1;
        text-align: center;
    }

    .tiktok-header-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .tiktok-reels-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 650px) {
    .resumption-celebration-section {
        padding: 72px 0 80px;
    }

    .resumption-header h2 {
        font-size: clamp(28px, 8.5vw, 38px);
        letter-spacing: -1px;
    }

    .resumption-subtitle {
        font-size: 15.5px;
    }

    .resumption-gallery-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .resumption-card-media {
        aspect-ratio: 16 / 11;
    }

    .resumption-card-body {
        padding: 20px 18px 22px;
    }

    .resumption-cta-card {
        padding: 28px 20px;
        border-radius: 24px;
    }

    .resumption-cta-text h3 {
        font-size: 22px;
    }

    .resumption-cta-buttons {
        flex-direction: column;
    }

    .resumption-enroll-btn,
    .resumption-tiktok-link {
        width: 100%;
    }

    .tiktok-section {
        padding: 76px 0 84px;
    }

    .tiktok-header-text h2 {
        font-size: clamp(28px, 8.5vw, 38px);
        letter-spacing: -1px;
    }

    .tiktok-profile-card {
        padding: 22px 18px;
        border-radius: 22px;
    }

    .tiktok-reels-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .reel-media {
        aspect-ratio: 9 / 14;
    }

    .reel-play-icon {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }

    .reel-caption {
        padding: 12px 12px 14px;
    }

    .reel-caption p {
        font-size: 12px;
    }

    .reel-audio {
        font-size: 10.5px;
    }

    .resumption-modal {
        padding: 14px;
    }

    .resumption-modal-dialog {
        border-radius: 20px;
    }

    .resumption-modal-caption {
        padding: 16px 18px;
    }

    .resumption-modal-caption h4 {
        font-size: 18px;
    }
}

/* =========================================================
   2026 ANTI-SPAM HUMAN CAPTCHA VERIFICATION STYLES
========================================================= */

.captcha-group {
    background: #fcf9ff;
    border: 1px solid rgba(76, 0, 130, 0.16);
    border-radius: 18px;
    padding: 16px 20px;
    margin: 6px 0 10px;
    box-shadow: 0 4px 16px rgba(42, 0, 74, 0.04);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.captcha-group:focus-within {
    border-color: var(--primary);
    box-shadow: 0 6px 20px rgba(76, 0, 130, 0.12);
}

.captcha-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.captcha-header label {
    font-size: 13.5px;
    font-weight: 850;
    color: var(--primary-dark);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.captcha-shield-icon {
    font-size: 16px;
    line-height: 1;
}

.captcha-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 4px 12px;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--primary);
    cursor: pointer;
    transition: all 0.22s ease;
    box-shadow: 0 2px 8px rgba(42, 0, 74, 0.06);
}

.captcha-refresh-btn:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
    border-color: var(--primary);
    transform: translateY(-1px);
}

.captcha-refresh-btn .refresh-icon {
    font-size: 12px;
    display: inline-block;
    transition: transform 0.4s ease;
}

.captcha-refresh-btn.rotating .refresh-icon {
    transform: rotate(360deg);
}

.captcha-box {
    display: flex;
    align-items: center;
    gap: 12px;
}

.captcha-equation {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #1d0033 0%, #3e006b 100%);
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 950;
    letter-spacing: 1px;
    box-shadow: 0 4px 14px rgba(42, 0, 74, 0.2);
    user-select: none;
}

.captcha-equation .math-num {
    color: var(--gold-light);
    font-size: 20px;
}

.captcha-equation .math-op,
.captcha-equation .math-eq {
    color: #ffffff;
    opacity: 0.9;
}

.captcha-input {
    width: 90px;
    height: 48px;
    border-radius: 14px;
    border: 2px solid rgba(76, 0, 130, 0.2);
    background: #ffffff;
    text-align: center;
    font-size: 20px;
    font-weight: 950;
    color: var(--primary-dark);
    padding: 0 8px;
    outline: none;
    transition: all 0.22s ease;
}

.captcha-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.2);
}

.captcha-hint {
    display: block;
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 600;
}

/* HONEYPOT TRAP - STRICTLY HIDDEN */
.form-hp-field {
    display: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 480px) {
    .captcha-group {
        padding: 14px 16px;
    }

    .captcha-equation {
        padding: 8px 14px;
        font-size: 16px;
    }

    .captcha-equation .math-num {
        font-size: 18px;
    }

    .captcha-input {
        width: 76px;
        height: 44px;
        font-size: 18px;
    }
}



/* ==========================================================================
   NAVBAR DROPDOWNS (ABOUT US & CONNECT SOCIALS) + MODERN APPLY BUTTON (2026/2027)
   ========================================================================== */

.nav-item-dropdown {
    position: relative;
}

.nav-dropdown-trigger-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.nav-dropdown-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* Button reset for Connect trigger */
button.nav-socials-trigger {
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}

.nav-chevron {
    transition: transform 0.25s ease;
}

@media (min-width: 1025px) {
    .nav-item-dropdown:hover .nav-chevron,
    .nav-item-dropdown:focus-within .nav-chevron,
    .nav-item-dropdown.dropdown-open .nav-chevron {
        transform: rotate(180deg);
    }

    .nav-item-dropdown:hover .nav-socials-trigger,
    .nav-item-dropdown:focus-within .nav-socials-trigger,
    .nav-item-dropdown.dropdown-open .nav-socials-trigger {
        color: var(--primary);
    }
}

.mobile-dropdown-btn {
    display: none;
    background: transparent;
    border: none;
    color: var(--text-main);
    padding: 6px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.mobile-dropdown-btn svg,
.mobile-dropdown-btn .mobile-chevron {
    pointer-events: none;
    transition: transform 0.25s ease;
}

/* Desktop Dropdown Card */
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    min-width: 230px;
    background: #ffffff;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 16px 40px rgba(42, 0, 74, 0.14);
    border: 1px solid rgba(76, 0, 130, 0.12);
    display: flex;
    flex-direction: column;
    gap: 3px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease;
    z-index: 1000;
}

.nav-dropdown-menu::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 28px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-left: 1px solid rgba(76, 0, 130, 0.12);
    border-top: 1px solid rgba(76, 0, 130, 0.12);
    transform: rotate(45deg);
}

@media (min-width: 1025px) {
    .nav-item-dropdown:hover .nav-dropdown-menu,
    .nav-item-dropdown:focus-within .nav-dropdown-menu,
    .nav-item-dropdown.dropdown-open .nav-dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}

.dropdown-item {
    display: block;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-dark);
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}

.dropdown-item:hover,
.dropdown-item.active {
    background: var(--primary-soft);
    color: var(--primary);
    transform: translateX(4px);
}

/* ==========================================================================
   CONNECT / SOCIALS DROPDOWN STYLING
   ========================================================================== */
.nav-dropdown-socials {
    min-width: 220px;
}

/* TikTok Item */
.dropdown-item-tiktok .icon-tiktok {
    background: #110e1c !important;
    color: #ffffff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dropdown-item-tiktok:hover .icon-tiktok {
    color: #25f4ee;
    box-shadow: 0 4px 14px rgba(254, 44, 85, 0.35);
    transform: scale(1.08);
}

.dropdown-item-tiktok:hover {
    background: rgba(254, 44, 85, 0.06);
}

/* WhatsApp Item */
.dropdown-item-whatsapp .icon-whatsapp {
    background: #e8f8ee !important;
    color: #0b8043;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dropdown-item-whatsapp:hover .icon-whatsapp {
    background: #25D366 !important;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
    transform: scale(1.08);
}

.dropdown-item-whatsapp:hover {
    background: rgba(37, 211, 102, 0.08);
}

/* Facebook Item */
.dropdown-item-facebook .icon-facebook {
    background: #edf3fd !important;
    color: #1877F2;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dropdown-item-facebook:hover .icon-facebook {
    background: #1877F2 !important;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(24, 119, 242, 0.35);
    transform: scale(1.08);
}

.dropdown-item-facebook:hover {
    background: rgba(24, 119, 242, 0.08);
}

/* Button on About Page pointing to Leadership */
.leadership-more-wrap {
    margin-top: 24px;
}

.leadership-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(42, 0, 74, 0.16);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.leadership-more-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(42, 0, 74, 0.24);
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
}

.leadership-more-btn .btn-arrow {
    transition: transform 0.25s ease;
}

.leadership-more-btn:hover .btn-arrow {
    transform: translateX(4px);
}

/* ==========================================================================
   MODERN ANIMATED APPLY NOW BUTTON (2026/2027)
   ========================================================================== */
.apply-btn-modern {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 22px;
    border-radius: var(--radius-full);
    font-size: 14.5px;
    font-weight: 900;
    color: #120f1f !important;
    background: linear-gradient(135deg, #ffc857 0%, #f5a623 50%, #e09210 100%);
    background-size: 200% auto;
    box-shadow: 0 6px 20px rgba(245, 166, 35, 0.38), 0 2px 6px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    animation: applyBtnBreathing 3.6s infinite ease-in-out;
}

@keyframes applyBtnBreathing {
    0%, 100% {
        box-shadow: 0 6px 20px rgba(245, 166, 35, 0.38), 0 2px 6px rgba(0, 0, 0, 0.08);
    }
    50% {
        box-shadow: 0 10px 28px rgba(245, 166, 35, 0.58), 0 0 16px rgba(255, 200, 87, 0.42);
    }
}

/* Shimmer beam effect */
.apply-btn-modern::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        60deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(25deg);
    transition: all 0.75s ease;
    pointer-events: none;
}

.apply-btn-modern:hover::after {
    left: 130%;
}

.apply-btn-modern:hover {
    transform: translateY(-2.5px);
    background-position: right center;
    box-shadow: 0 12px 30px rgba(245, 166, 35, 0.55), 0 4px 12px rgba(224, 146, 16, 0.35);
    color: #000000 !important;
}

.apply-btn-modern:active {
    transform: translateY(1px) scale(0.97);
    box-shadow: 0 4px 12px rgba(245, 166, 35, 0.3);
}

/* Icon tilt and micro-bounce */
.apply-btn-modern .apply-btn-icon {
    display: inline-flex;
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.apply-btn-modern:hover .apply-btn-icon {
    transform: rotate(-12deg) scale(1.18);
}

/* Arrow slide */
.apply-btn-modern .apply-btn-arrow {
    display: inline-block;
    font-size: 15px;
    font-weight: 900;
    transition: transform 0.25s ease;
}

.apply-btn-modern:hover .apply-btn-arrow {
    transform: translateX(4px);
}

/* ==========================================================================
   MOBILE DROPDOWN ACCORDION & DRAWER STYLES
   ========================================================================== */
@media (max-width: 1024px) {
    .nav-dropdown-trigger-wrap {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .nav-dropdown-link {
        flex: 1;
        justify-content: flex-start;
        padding: 13px 8px;
        min-height: 48px;
        font-size: 16px;
        font-weight: 700;
        border-radius: 8px;
    }

    /* Hide desktop chevron on mobile to prevent duplicate icons */
    .nav-dropdown-link .nav-chevron {
        display: none !important;
    }

    button.nav-socials-trigger {
        font-size: 16px;
        font-weight: 700;
    }

    .mobile-dropdown-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: rgba(76, 0, 130, 0.06);
        border: 1px solid rgba(76, 0, 130, 0.12);
        color: var(--primary);
        cursor: pointer;
        flex-shrink: 0;
        margin-left: 6px;
        transition: all 0.25s ease;
    }

    .mobile-dropdown-btn:hover,
    .mobile-dropdown-btn:active {
        background: rgba(76, 0, 130, 0.14);
    }

    .mobile-dropdown-btn .mobile-chevron {
        width: 16px;
        height: 16px;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .nav-item-dropdown.dropdown-open .mobile-dropdown-btn,
    .nav-item-dropdown.open-mobile .mobile-dropdown-btn {
        background: var(--primary);
        border-color: var(--primary);
        color: #ffffff;
    }

    .nav-item-dropdown.dropdown-open .mobile-chevron,
    .nav-item-dropdown.open-mobile .mobile-chevron {
        transform: rotate(180deg);
        stroke: #ffffff;
    }

    .nav-item-dropdown {
        position: relative;
    }

    .nav-item-dropdown.dropdown-open,
    .nav-item-dropdown.open-mobile {
        z-index: 1200;
    }

    /* DROPDOWN OVERLAY (DOES NOT SHIFT PAGE OR SIBLINGS) */
    .nav-menu ul.nav-dropdown-menu,
    .nav-item-dropdown .nav-dropdown-menu {
        position: absolute;
        top: calc(100% + 2px);
        left: 6px;
        right: 6px;
        min-width: 250px;
        background: #ffffff;
        border: 1px solid rgba(76, 0, 130, 0.16);
        border-left: 3.5px solid var(--gold);
        border-radius: 14px;
        box-shadow: 0 16px 40px rgba(42, 0, 74, 0.22), 0 4px 12px rgba(0, 0, 0, 0.08);
        padding: 8px 6px;
        margin: 0;
        z-index: 1250;
        display: none !important;
        flex-direction: column;
        gap: 3px;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-8px);
        transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s ease;
    }

    .nav-dropdown-menu::before {
        display: none !important;
    }

    /* Display overlay when active without shifting page or menu */
    .nav-item-dropdown.dropdown-open .nav-dropdown-menu,
    .nav-item-dropdown.open-mobile .nav-dropdown-menu {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
        margin: 0;
        padding: 8px 6px;
    }

    .nav-dropdown-menu .dropdown-item {
        display: block;
        padding: 11px 16px;
        border-radius: 9px;
        background: #faf7fd;
        border: 1px solid rgba(76, 0, 130, 0.06);
        font-size: 14px;
        font-weight: 700;
        color: var(--primary-dark);
        text-decoration: none;
        white-space: normal;
        line-height: 1.35;
        box-shadow: 0 2px 6px rgba(42, 0, 74, 0.03);
        transition: all 0.18s ease;
    }

    .nav-dropdown-menu .dropdown-item:hover,
    .nav-dropdown-menu .dropdown-item:active,
    .nav-dropdown-menu .dropdown-item.active {
        background: var(--primary-soft);
        color: var(--primary);
        border-color: rgba(76, 0, 130, 0.2);
        transform: translateX(4px);
    }

    /* Apply Now Button inside Mobile Drawer */
    .apply-btn-modern {
        width: 100%;
        min-height: 48px;
        font-size: 15.5px;
        margin-top: 6px;
    }
}

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



/* ==========================================================================
   LEADERSHIP PAGE - COMPREHENSIVE EXECUTIVE STYLES
   Theme: "Your Child(ren) are in Safe & Knowledgeable Hands"
   ========================================================================== */

.leadership-page {
    position: relative;
    background: #fcfbfe;
    overflow-x: hidden;
}

/* BREADCRUMB STRIP */
.breadcrumb-strip {
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
    font-size: 13.5px;
}

.breadcrumb-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    flex-wrap: wrap;
}

.breadcrumb-inner a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-inner a:hover {
    color: var(--gold-dark);
}

.breadcrumb-separator {
    color: rgba(76, 0, 130, 0.25);
}

.breadcrumb-current {
    color: var(--dark);
    font-weight: 700;
}

/* HERO SECTION */
.leadership-hero {
    position: relative;
    padding: 90px 0 60px;
    background:
        radial-gradient(circle at 10% 20%, rgba(245, 166, 35, 0.16), transparent 35%),
        radial-gradient(circle at 90% 80%, rgba(106, 17, 176, 0.14), transparent 40%),
        linear-gradient(135deg, #1d0033 0%, #2a004a 50%, #4c0082 100%);
    color: #ffffff;
    overflow: hidden;
}

.leadership-hero-container {
    position: relative;
    z-index: 2;
}

.hero-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
    padding: 8px 18px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
    color: #ffffff;
    backdrop-filter: blur(8px);
}

.leadership-hero-title {
    color: #ffffff !important;
    font-family: var(--font-heading);
    font-size: clamp(32px, 4.5vw, 54px);
    line-height: 1.18;
    font-weight: 900;
    max-width: 980px;
    letter-spacing: -1px;
    text-shadow: 0 3px 20px rgba(0, 0, 0, 0.60);
}

.hero-highlight-gold {
    color: #ffc857;
    background: linear-gradient(135deg, #fff0b8 0%, #ffc857 45%, #f5a623 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-weight: 900;
    text-shadow: 0 2px 16px rgba(245, 166, 35, 0.40);
}

.leadership-hero-lead {
    font-size: clamp(16px, 1.8vw, 18px);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.95);
    max-width: 860px;
    margin-top: 24px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.hero-actions-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 36px;
    flex-wrap: wrap;
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(245, 166, 35, 0.35);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-hero-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 38px rgba(245, 166, 35, 0.45);
}

.btn-hero-secondary,
.btn-hero-tertiary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 750;
    text-decoration: none;
    backdrop-filter: blur(8px);
    transition: all 0.25s ease;
}

.btn-hero-secondary:hover,
.btn-hero-tertiary:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-2px);
}

/* HERO TRUST BAR */
.hero-trust-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.trust-bar-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 16px 20px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.trust-icon-box {
    font-size: 26px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.trust-info strong {
    display: block;
    font-size: 15px;
    font-weight: 850;
    color: #ffffff;
}

.trust-info span {
    display: block;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.90);
    margin-top: 2px;
}


/* SECTION HEADINGS */
.section-heading-centered {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 50px;
}

.section-tag-gold {
    display: inline-block;
    padding: 6px 18px;
    border-radius: var(--radius-full);
    background: rgba(245, 166, 35, 0.16);
    color: #8c5200;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 12px;
}

.section-tag-purple {
    display: inline-block;
    padding: 6px 18px;
    border-radius: var(--radius-full);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 13px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 12px;
}

.section-heading-centered h2 {
    font-family: var(--font-heading);
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.2;
    font-weight: 900;
    color: var(--primary-dark);
    letter-spacing: -0.8px;
}

.section-heading-centered p {
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--muted);
    margin-top: 14px;
}


/* PARENT GUARANTEE SECTION */
.parent-guarantee-section {
    padding: 90px 0;
    background: #ffffff;
}

.guarantee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}

.guarantee-card {
    background: #fbf9fe;
    border-radius: 26px;
    padding: 34px 28px;
    border: 1px solid rgba(76, 0, 130, 0.08);
    box-shadow: 0 12px 30px rgba(42, 0, 74, 0.04);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.guarantee-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(42, 0, 74, 0.10);
    border-color: rgba(245, 166, 35, 0.35);
    background: #ffffff;
}

.guarantee-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 22px;
}

.guarantee-card-icon.gold-bg {
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.20), rgba(245, 166, 35, 0.05));
    border: 1px solid rgba(245, 166, 35, 0.30);
}

.guarantee-card-icon.purple-bg {
    background: linear-gradient(135deg, rgba(76, 0, 130, 0.15), rgba(76, 0, 130, 0.04));
    border: 1px solid rgba(76, 0, 130, 0.20);
}

.guarantee-card h3 {
    font-size: 20px;
    font-weight: 850;
    color: var(--primary-dark);
    margin-bottom: 12px;
    line-height: 1.3;
}

.guarantee-card p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: 18px;
}

.guarantee-list {
    margin-top: auto;
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.guarantee-list li {
    font-size: 13.5px;
    font-weight: 650;
    color: var(--dark);
    position: relative;
    padding-left: 20px;
}

.guarantee-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--gold-dark);
    font-weight: 900;
}


/* SCHOOL ORGANOGRAM SECTION */
.organogram-section {
    padding: 90px 0;
    background: linear-gradient(180deg, #fcfbfe 0%, #f4effb 100%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.organogram-wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.organogram-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.organogram-tier {
    width: 100%;
    background: #ffffff;
    border-radius: 30px;
    padding: 30px;
    border: 1px solid rgba(76, 0, 130, 0.12);
    box-shadow: 0 16px 45px rgba(42, 0, 74, 0.06);
}

.tier-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(76, 0, 130, 0.08);
}

.tier-label span {
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 11.5px;
    font-weight: 850;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.tier-label strong {
    font-size: 16px;
    font-weight: 850;
    color: var(--primary-dark);
}

.tier-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.tier-cards-4 {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.tier-connector-line {
    width: 100%;
    height: 38px;
    display: flex;
    justify-content: center;
    position: relative;
}

.connector-stem {
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--gold) 0%, var(--primary) 100%);
}

.org-card {
    background: #fdfcff;
    border-radius: 22px;
    padding: 24px 20px;
    border: 1px solid rgba(76, 0, 130, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

.org-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(42, 0, 74, 0.10);
}

.org-card-gold {
    border-top: 4px solid var(--gold);
    background: linear-gradient(180deg, #fffefb 0%, #ffffff 100%);
}

.org-card-purple {
    border-top: 4px solid var(--primary);
    background: linear-gradient(180deg, #fbf8ff 0%, #ffffff 100%);
}

.org-card-neutral {
    border-top: 4px solid #8e8ba0;
}

.org-badge {
    background: rgba(245, 166, 35, 0.14);
    color: var(--gold-dark);
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    margin-bottom: 14px;
    text-transform: uppercase;
}

.org-badge-sm {
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    margin-bottom: 12px;
}

.org-card-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 14px;
    border: 3px solid #ffffff;
    box-shadow: 0 8px 22px rgba(42, 0, 74, 0.14);
}

.org-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder {
    background: var(--primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

.org-card h4 {
    font-size: 17px;
    font-weight: 850;
    color: var(--primary-dark);
    margin-bottom: 4px;
}

.org-role {
    display: block;
    font-size: 12.5px;
    font-weight: 750;
    color: var(--gold-dark);
    margin-bottom: 10px;
}

.org-desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
    margin-bottom: 14px;
}

.org-profile-link {
    margin-top: auto;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.org-profile-link:hover {
    color: var(--gold-dark);
}

.org-tag-meta {
    margin-top: auto;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted);
    background: rgba(0, 0, 0, 0.04);
    padding: 4px 10px;
    border-radius: 6px;
}

/* Org Card Mini */
.org-card-mini {
    background: #ffffff;
    border-radius: 18px;
    padding: 20px 16px;
    border: 1px solid rgba(76, 0, 130, 0.08);
    text-align: center;
}

.org-mini-icon {
    font-size: 28px;
    margin-bottom: 10px;
}

.org-card-mini h5 {
    font-size: 15px;
    font-weight: 850;
    color: var(--primary-dark);
    margin-bottom: 4px;
}

.org-subrole {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--gold-dark);
    margin-bottom: 8px;
}

.org-card-mini p {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
}


/* ==========================================================================
   LINKEDIN-STYLE EXECUTIVE PROFILES
   ========================================================================== */

.executive-profiles-section {
    padding: 90px 0;
    background: #ffffff;
}

.linkedin-profile-card {
    background: #ffffff;
    border-radius: 30px;
    border: 1px solid rgba(76, 0, 130, 0.12);
    box-shadow: 0 18px 50px rgba(42, 0, 74, 0.08);
    overflow: hidden;
    margin-bottom: 60px;
    transition: box-shadow 0.3s ease;
}

.linkedin-profile-card:hover {
    box-shadow: 0 24px 60px rgba(42, 0, 74, 0.12);
}

/* Cover Banner */
.linkedin-banner {
    height: 220px;
    background: linear-gradient(135deg, #1d0033 0%, #36025e 50%, #580c94 100%);
    position: relative;
    z-index: 1;
    padding: 22px 28px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    overflow: hidden;
}

.banner-gold-accent {
    background: linear-gradient(135deg, #2a004a 0%, #4c0082 50%, #c9820a 100%);
}

.banner-proprietress-cover {
    background-image: url('../images/fresh/leadership/proprietress-cover-banner.jpg') !important;
    background-position: center center !important;
    background-size: cover !important;
}

.banner-itopa-cover {
    background-image: url('../images/fresh/leadership/dr-steve-itopa-cover-banner.jpg') !important;
    background-position: center 48% !important;
    background-size: cover !important;
}

.banner-overlay-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 0, 36, 0.08) 0%, rgba(20, 0, 36, 0.42) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Noticeable Avatar Highlight for Dr. Steven Itopa */
.itopa-avatar-noticeable {
    border: 3px solid #f5a623 !important;
    box-shadow: 0 0 20px rgba(245, 166, 35, 0.45), 0 8px 24px rgba(42, 0, 74, 0.18) !important;
    background: #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.org-card:hover .itopa-avatar-noticeable {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(245, 166, 35, 0.65), 0 12px 28px rgba(42, 0, 74, 0.25) !important;
}

/* Leader Academic Qualifications */
.degree-tag-gold {
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.22), rgba(201, 130, 10, 0.16)) !important;
    color: var(--gold-dark) !important;
    border: 1px solid rgba(245, 166, 35, 0.45) !important;
}

.leader-qualifications-container {
    margin: 14px 0 12px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #fdfbf7 0%, #ffffff 100%);
    border: 1px solid rgba(201, 130, 10, 0.25);
    border-left: 4px solid var(--gold);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(42, 0, 74, 0.04);
}

.qual-badge-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gold-dark);
    margin-bottom: 8px;
}

.qual-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
}

.qual-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(76, 0, 130, 0.08);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.qual-card:hover {
    border-color: rgba(201, 130, 10, 0.4);
    box-shadow: 0 4px 12px rgba(201, 130, 10, 0.1);
    transform: translateY(-1px);
}

.qual-flag-icon {
    font-size: 20px;
    line-height: 1.2;
    flex-shrink: 0;
}

.qual-details {
    display: flex;
    flex-direction: column;
}

.qual-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--primary-dark);
    line-height: 1.35;
}

.qual-inst {
    font-size: 12px;
    font-weight: 650;
    color: var(--gold-dark);
    margin-top: 2px;
}

.banner-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.12;
    background-image: radial-gradient(#ffffff 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    pointer-events: none;
}

.banner-badge-group {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.banner-badge {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: var(--radius-full);
    backdrop-filter: blur(8px);
}

.banner-badge.gold {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    border: none;
    color: #ffffff;
}

/* Header Body */
.linkedin-header-body {
    padding: 0 36px 28px;
    position: relative;
    z-index: 10;
}

.linkedin-avatar-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: -72px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
    position: relative;
    z-index: 20;
}

.linkedin-avatar-wrap {
    position: relative;
    z-index: 30;
    width: 144px;
    height: 144px;
    border-radius: 50%;
    border: 5px solid #ffffff;
    box-shadow: 0 14px 36px rgba(42, 0, 74, 0.25);
    background: #ffffff;
    flex-shrink: 0;
}

.linkedin-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-verified-badge {
    position: absolute;
    right: 4px;
    bottom: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0a66c2;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.20);
}

.avatar-verified-badge.gold-badge {
    background: var(--gold);
    color: #ffffff;
}

.proprietress-glow-wrap {
    border-color: #f5a623;
    box-shadow: 0 0 25px rgba(245, 166, 35, 0.35);
}

/* Action Buttons */
.linkedin-action-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-linkedin-connect {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-full);
    background: #0a66c2;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 6px 18px rgba(10, 102, 194, 0.25);
}

.btn-linkedin-connect:hover {
    background: #004182;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(10, 102, 194, 0.35);
}

.btn-website-leader {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
    color: #ffffff;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 800;
    transition: all 0.2s ease;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.28);
}

.btn-website-leader:hover {
    background: linear-gradient(135deg, #172554, #1d4ed8);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.38);
    color: #ffffff;
}

.leader-meta-website {
    color: #1d4ed8 !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.leader-meta-website:hover {
    color: var(--primary) !important;
}

.leader-website-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(76, 0, 130, 0.05));
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-left: 4px solid #2563eb;
    border-radius: 12px;
}

.leader-website-icon {
    font-size: 24px;
    line-height: 1;
}

.leader-website-info strong {
    display: block;
    font-size: 14px;
    color: var(--primary-dark);
    margin-bottom: 2px;
}

.leader-website-info p {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0;
}

.leader-website-info a {
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
}

.leader-website-info a:hover {
    text-decoration: underline;
}

.btn-media-watch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--radius-full);
    background: #ff0000;
    color: #ffffff;
    border: none;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-media-watch:hover {
    background: #cc0000;
    transform: translateY(-2px);
}

.btn-whatsapp-leader {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--radius-full);
    background: #25d366;
    color: #ffffff;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 800;
    transition: all 0.2s ease;
}

.btn-whatsapp-leader:hover {
    background: #1eb956;
    transform: translateY(-2px);
}

.btn-contact-leader {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--radius-full);
    background: var(--primary-soft);
    color: var(--primary);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 800;
    transition: all 0.2s ease;
}

.btn-contact-leader:hover {
    background: var(--primary);
    color: #ffffff;
}

.btn-sm-apply {
    padding: 10px 18px;
    font-size: 13.5px;
}

/* Intro Block */
.profile-name {
    font-family: var(--font-heading);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 900;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.degree-tag {
    font-size: 14px;
    font-weight: 850;
    color: var(--gold-dark);
    background: rgba(245, 166, 35, 0.14);
    padding: 3px 10px;
    border-radius: 6px;
}

.profile-headline {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-main);
    font-weight: 650;
    margin-top: 6px;
    max-width: 900px;
}

.profile-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 13.5px;
    color: var(--muted);
    flex-wrap: wrap;
}

.meta-dot {
    color: rgba(76, 0, 130, 0.25);
}

.meta-item.highlight-link {
    color: #0a66c2;
    font-weight: 750;
}

.profile-pillars-wrap {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pillar-label {
    font-size: 12px;
    font-weight: 850;
    color: var(--muted);
    text-transform: uppercase;
}

.pillar-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pillar-tag {
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 12px;
    font-weight: 750;
    padding: 4px 12px;
    border-radius: var(--radius-full);
}

/* LINKEDIN TAB NAVIGATION */
.linkedin-tabs-wrapper {
    border-top: 1px solid rgba(76, 0, 130, 0.08);
}

.tabs-nav-bar {
    display: flex;
    background: #fbf9fe;
    border-bottom: 1px solid rgba(76, 0, 130, 0.08);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 24px;
    scrollbar-width: none;
}

.tabs-nav-bar::-webkit-scrollbar {
    display: none;
}

.tab-btn {
    padding: 16px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    color: var(--primary);
}

.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: rgba(76, 0, 130, 0.03);
}

/* TAB CONTENT AREA */
.tabs-content-area {
    padding: 32px 36px;
}

.tab-panel {
    display: none;
    animation: tabFadeIn 0.3s ease;
}

.tab-panel.active {
    display: block;
}

@keyframes tabFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-subheading {
    font-size: 19px;
    font-weight: 850;
    color: var(--primary-dark);
    margin-bottom: 16px;
}

.section-note {
    font-size: 14.5px;
    color: var(--muted);
    margin-bottom: 20px;
}

.bio-subtitle {
    font-size: 16.5px;
    font-weight: 850;
    color: var(--primary-dark);
    margin: 22px 0 10px;
}

.quote-callout-gold {
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.12), rgba(245, 166, 35, 0.03));
    border-left: 4px solid var(--gold);
    padding: 20px 24px;
    border-radius: 0 16px 16px 0;
    margin-bottom: 20px;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--dark);
}

.quote-callout-purple {
    background: linear-gradient(135deg, rgba(76, 0, 130, 0.10), rgba(76, 0, 130, 0.02));
    border-left: 4px solid var(--primary);
    padding: 20px 24px;
    border-radius: 0 16px 16px 0;
    margin-bottom: 20px;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--dark);
}

.milestones-highlight-box {
    margin-top: 24px;
    background: #fbf9fe;
    border: 1px solid rgba(76, 0, 130, 0.10);
    border-radius: 18px;
    padding: 22px 24px;
}

.milestones-highlight-box strong {
    display: block;
    color: var(--primary-dark);
    font-size: 15.5px;
    margin-bottom: 12px;
}

.milestones-highlight-box ul {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.milestones-highlight-box li {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-main);
}

/* Timeline in Experience Tab */
.timeline-items-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.timeline-item {
    display: flex;
    gap: 18px;
    position: relative;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(76, 0, 130, 0.06);
}

.timeline-item:last-child {
    border-bottom: none;
}

.timeline-badge-logo {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.timeline-content h5 {
    font-size: 16.5px;
    font-weight: 850;
    color: var(--primary-dark);
    margin-bottom: 3px;
}

.timeline-company {
    display: block;
    font-size: 14px;
    font-weight: 750;
    color: var(--gold-dark);
}

.timeline-date {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 2px;
    margin-bottom: 8px;
}

.timeline-content p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--muted);
}

/* Education Tab */
.education-card-featured {
    display: flex;
    gap: 24px;
    background: #fbf9fe;
    border: 1px solid rgba(76, 0, 130, 0.12);
    border-radius: 24px;
    padding: 30px;
}

.edu-crest-icon {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    flex-shrink: 0;
    box-shadow: 0 10px 24px rgba(42, 0, 74, 0.20);
}

.edu-details h5 {
    font-size: 20px;
    font-weight: 850;
    color: var(--primary-dark);
}

.edu-degree {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: var(--gold-dark);
    margin-top: 4px;
    margin-bottom: 18px;
}

.dissertation-box {
    background: #ffffff;
    border: 1px solid rgba(76, 0, 130, 0.10);
    border-radius: 16px;
    padding: 20px;
}

.dissertation-title {
    font-size: 15px;
    color: var(--primary-dark);
    margin: 6px 0 14px;
}

.impact-badge {
    display: inline-block;
    background: rgba(245, 166, 35, 0.15);
    color: var(--gold-dark);
    font-size: 11.5px;
    font-weight: 850;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    margin-bottom: 6px;
}

.dissertation-impact p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-main);
}

/* Publications Tab */
.publications-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.publication-item {
    display: flex;
    gap: 18px;
    background: #fdfcff;
    border: 1px solid rgba(76, 0, 130, 0.08);
    border-radius: 16px;
    padding: 18px 20px;
    transition: all 0.25s ease;
}

.publication-item:hover {
    border-color: rgba(245, 166, 35, 0.40);
    background: #ffffff;
    transform: translateX(4px);
}

.pub-year {
    font-size: 13px;
    font-weight: 900;
    color: #ffffff;
    background: var(--primary);
    padding: 4px 10px;
    border-radius: 8px;
    height: fit-content;
}

.pub-info strong {
    display: block;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--primary-dark);
}

.pub-authors {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-top: 4px;
}

.pub-journal {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gold-dark);
    margin-top: 2px;
}

/* Media Tab */
.media-feature-card {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    background: #fdfcff;
    border: 1px solid rgba(76, 0, 130, 0.12);
    border-radius: 22px;
    padding: 22px;
    margin-bottom: 30px;
    align-items: center;
}

.video-thumbnail-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

.video-thumbnail-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.btn-play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    border: none;
    color: #ffffff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease;
}

.btn-play-overlay span {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ff0000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(255, 0, 0, 0.5);
    transition: transform 0.25s ease;
}

.btn-play-overlay:hover span {
    transform: scale(1.1);
}

.media-channel-tag {
    font-size: 12px;
    font-weight: 850;
    color: #cc0000;
    margin-bottom: 6px;
    display: inline-block;
}

.media-feature-info h5 {
    font-size: 18px;
    font-weight: 850;
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.media-feature-info p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 16px;
}

.media-links-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-watch-now {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    background: #ff0000;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-watch-now:hover {
    background: #cc0000;
    transform: translateY(-2px);
}

.btn-yt-external {
    font-size: 13px;
    font-weight: 750;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.btn-yt-external:hover {
    color: #0a66c2;
}

.conferences-title {
    font-size: 16px;
    font-weight: 850;
    color: var(--primary-dark);
    margin-bottom: 14px;
}

.conference-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.conference-list li {
    background: #ffffff;
    border: 1px solid rgba(76, 0, 130, 0.08);
    border-radius: 12px;
    padding: 14px 18px;
}

.conference-list strong {
    display: block;
    font-size: 14px;
    color: var(--primary-dark);
}

.conference-list span {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 2px;
}

/* Skills Tab */
.skills-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.skill-endorse-pill {
    background: #ffffff;
    border: 1px solid rgba(76, 0, 130, 0.10);
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(42, 0, 74, 0.03);
}

.skill-endorse-pill .skill-name {
    font-size: 13.5px;
    font-weight: 750;
    color: var(--primary-dark);
}

.skill-endorse-pill .skill-count {
    font-size: 11.5px;
    font-weight: 850;
    color: #0a66c2;
    background: rgba(10, 102, 194, 0.08);
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

/* Values Two Col */
.values-two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.value-mini-card {
    background: #fbf9fe;
    border: 1px solid rgba(76, 0, 130, 0.08);
    border-radius: 14px;
    padding: 16px 18px;
}

.value-mini-card strong {
    display: block;
    font-size: 14.5px;
    color: var(--primary-dark);
    margin-bottom: 6px;
}

.value-mini-card p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
}

/* Profile Footer */
.linkedin-profile-footer {
    background: #fbf9fe;
    border-top: 1px solid rgba(76, 0, 130, 0.08);
    padding: 16px 36px;
}

.footer-social-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-social-label {
    font-size: 12.5px;
    font-weight: 850;
    color: var(--muted);
    text-transform: uppercase;
}

.social-badge-btn {
    font-size: 12.5px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all 0.2s ease;
}

.social-badge-btn.website {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

.social-badge-btn.website:hover {
    background: #2563eb;
    color: #ffffff;
}

.social-badge-btn.linkedin {
    background: rgba(10, 102, 194, 0.12);
    color: #0a66c2;
}

.social-badge-btn.linkedin:hover {
    background: #0a66c2;
    color: #ffffff;
}

.social-badge-btn.youtube {
    background: rgba(255, 0, 0, 0.10);
    color: #cc0000;
}

.social-badge-btn.youtube:hover {
    background: #ff0000;
    color: #ffffff;
}

.social-badge-btn.whatsapp {
    background: rgba(37, 211, 102, 0.12);
    color: #1eb956;
}

.social-badge-btn.whatsapp:hover {
    background: #25d366;
    color: #ffffff;
}

.social-badge-btn.phone {
    background: rgba(76, 0, 130, 0.08);
    color: var(--primary);
}

.social-badge-btn.phone:hover {
    background: var(--primary);
    color: #ffffff;
}

.social-badge-btn.email {
    background: rgba(0, 0, 0, 0.06);
    color: var(--dark);
}

.social-badge-btn.email:hover {
    background: var(--dark);
    color: #ffffff;
}


/* SUB SECTION: OTHER LEADERS GRID */
.sub-section-header {
    text-align: center;
    max-width: 720px;
    margin: 60px auto 36px;
}

.sub-section-header h3 {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 850;
    color: var(--primary-dark);
}

.sub-section-header p {
    font-size: 15px;
    color: var(--muted);
    margin-top: 8px;
}

.executive-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}

.linkedin-mini-card {
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid rgba(76, 0, 130, 0.10);
    box-shadow: 0 12px 34px rgba(42, 0, 74, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.linkedin-mini-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 45px rgba(42, 0, 74, 0.10);
}

.mini-card-banner {
    height: 80px;
    background: linear-gradient(135deg, #2a004a 0%, #4c0082 100%);
    padding: 12px 18px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.mini-card-banner.banner-purple {
    background: linear-gradient(135deg, #4c0082 0%, #7c1ec9 100%);
}

.mini-card-banner.banner-gold {
    background: linear-gradient(135deg, #c9820a 0%, #f5a623 100%);
}

.mini-status-badge {
    font-size: 11px;
    font-weight: 850;
    padding: 3px 10px;
    border-radius: var(--radius-full);
}

.placeholder-badge {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    border: 1px dashed rgba(255, 255, 255, 0.4);
}

.mini-card-body {
    padding: 0 24px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mini-avatar-wrap {
    margin-top: -38px;
    margin-bottom: 14px;
}

.mini-avatar-img {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #ffffff;
    box-shadow: 0 8px 20px rgba(42, 0, 74, 0.14);
    display: block;
}

.avatar-letter-circle {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #ffffff;
    border: 4px solid #ffffff;
    box-shadow: 0 8px 20px rgba(42, 0, 74, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.avatar-letter-circle.purple-avatar {
    background: var(--primary-soft);
}

.avatar-letter-circle.gold-avatar {
    background: #fff8eb;
}

.mini-name {
    font-size: 18px;
    font-weight: 850;
    color: var(--primary-dark);
    margin-bottom: 4px;
}

.mini-role {
    font-size: 12.5px;
    font-weight: 750;
    color: var(--gold-dark);
    margin-bottom: 12px;
}

.mini-bio {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--muted);
    margin-bottom: 18px;
}

.mini-competencies {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.mini-tag {
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 11px;
    font-weight: 750;
    padding: 3px 10px;
    border-radius: var(--radius-full);
}

.mini-socials-row {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(76, 0, 130, 0.08);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.mini-social-link {
    color: #0a66c2;
    font-weight: 800;
    text-decoration: none;
}

.mini-social-link:hover {
    text-decoration: underline;
}

.placeholder-note-inline {
    color: var(--muted);
    font-style: italic;
    font-size: 11px;
}


/* FINAL CALL TO ACTION */
.leadership-cta-section {
    padding: 80px 0;
    background: #ffffff;
}

.leadership-cta-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(245, 166, 35, 0.22), transparent 45%),
        linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 34px;
    padding: 56px 48px;
    color: #ffffff;
    text-align: center;
    box-shadow: 0 24px 60px rgba(42, 0, 74, 0.16);
}

.cta-top-tag {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 18px;
    border-radius: var(--radius-full);
    font-size: 12.5px;
    font-weight: 850;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.leadership-cta-card h2 {
    color: #ffffff !important;
    font-family: var(--font-heading);
    font-size: clamp(26px, 3.2vw, 42px);
    font-weight: 900;
    line-height: 1.25;
    margin-bottom: 16px;
    text-shadow: 0 3px 20px rgba(0, 0, 0, 0.50);
}

.highlight-gold-text {
    color: #ffc857;
    background: linear-gradient(135deg, #fff0b8 0%, #ffc857 50%, #f5a623 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    text-shadow: 0 2px 16px rgba(245, 166, 35, 0.40);
}

.leadership-cta-card p {
    font-size: 16.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.95);
    max-width: 760px;
    margin: 0 auto 34px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

.cta-actions-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-cta-gold {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 30px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(245, 166, 35, 0.35);
    transition: all 0.3s ease;
}

.btn-cta-gold:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(245, 166, 35, 0.45);
}

.btn-cta-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: var(--radius-full);
    background: #25d366;
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-cta-whatsapp:hover {
    background: #1eb956;
    transform: translateY(-2px);
}

.btn-cta-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.30);
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 750;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-cta-outline:hover {
    background: rgba(255, 255, 255, 0.22);
}


/* MEDIA / VIDEO LIGHTBOX MODAL */
.media-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(18, 15, 31, 0.85);
    backdrop-filter: blur(12px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.media-modal-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.media-modal-dialog {
    background: #ffffff;
    border-radius: 26px;
    width: 100%;
    max-width: 820px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.40);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: modalPopIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPopIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.media-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    background: #fbf9fe;
}

.media-modal-header h4 {
    font-size: 16px;
    font-weight: 850;
    color: var(--primary-dark);
    margin: 0;
}

.media-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: #ffffff;
    color: var(--dark);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.media-modal-close:hover {
    background: var(--primary);
    color: #ffffff;
}

.media-iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000000;
}

.media-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ==========================================================================
   RESPONSIVE DESIGN FOR LEADERSHIP PAGE
   ========================================================================== */

@media (max-width: 900px) {
    .media-feature-card {
        grid-template-columns: 1fr;
    }

    .linkedin-avatar-row {
        align-items: center;
    }

    .education-card-featured {
        flex-direction: column;
        align-items: flex-start;
    }

    .leadership-cta-card {
        padding: 40px 24px;
    }
}

@media (max-width: 650px) {
    .leadership-hero {
        padding: 60px 0 40px;
    }

    .hero-actions-row {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-hero-primary,
    .btn-hero-secondary,
    .btn-hero-tertiary {
        justify-content: center;
    }

    .linkedin-header-body {
        padding: 0 20px 20px;
    }

    .tabs-content-area {
        padding: 24px 20px;
    }

    .linkedin-action-buttons {
        width: 100%;
    }

    .btn-linkedin-connect,
    .btn-website-leader,
    .btn-media-watch,
    .btn-contact-leader,
    .btn-whatsapp-leader {
        flex: 1;
        justify-content: center;
        text-align: center;
    }

    .organogram-tier {
        padding: 20px 16px;
    }

    .cta-actions-group {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-cta-gold,
    .btn-cta-whatsapp,
    .btn-cta-outline {
        justify-content: center;
    }
}


/* ==========================================================================
   TRIG8 DIGITAL FOOTPRINT COMPONENT
   ========================================================================== */
.trig8-footprint {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 6px;
    opacity: 0.72;
    transition: opacity 220ms ease, transform 220ms ease, background 220ms ease;
    text-decoration: none;
}

.trig8-footprint:hover,
.trig8-footprint:focus-visible {
    opacity: 1;
    background: rgba(245, 166, 35, 0.08);
    transform: translateY(-1.5px);
}

.trig8-footprint:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.trig8-footprint svg {
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 0 10px rgba(245, 166, 35, 0.22));
}

@media (max-width: 991px) {
    .trig8-footprint {
        margin: 4px 0;
    }
}


/* ==========================================================================
   SMART INTERACTIVE SCROLL-TO-TOP GADGET
   Tracks scroll progress with circular SVG meter, percentage pill & rocket launch
   ========================================================================== */
.smart-scroll-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(42, 8, 69, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid rgba(245, 166, 35, 0.38);
    box-shadow: 0 10px 28px rgba(42, 8, 69, 0.35), 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 990;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px) scale(0.85);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease,
                box-shadow 0.25s ease;
    user-select: none;
    padding: 0;
}

/* Shown state when scrolled past threshold */
.smart-scroll-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.smart-scroll-top:hover {
    border-color: var(--gold);
    box-shadow: 0 14px 34px rgba(245, 166, 35, 0.35), 0 4px 12px rgba(42, 8, 69, 0.5);
    transform: translateY(-3px) scale(1.04);
}

.smart-scroll-top:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 4px;
}

/* Circular SVG Progress Ring */
.scroll-progress-ring {
    position: absolute;
    inset: -1.5px;
    width: calc(100% + 3px);
    height: calc(100% + 3px);
    transform: rotate(-90deg); /* Start at 12 o'clock */
    pointer-events: none;
}

.progress-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 3.5;
}

.progress-ring-fill {
    fill: none;
    stroke: var(--gold);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 150.8; /* 2 * PI * 24 */
    stroke-dashoffset: 150.8;
    transition: stroke-dashoffset 0.15s linear;
}

/* Rocket Mascot & Animation */
.scroll-rocket-wrap {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.smart-scroll-top:hover .scroll-rocket-wrap {
    transform: translateY(-2px);
    animation: rocketRumble 0.35s ease-in-out infinite alternate;
}

.scroll-rocket-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.rocket-flame {
    opacity: 0.85;
    transform-origin: center top;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.smart-scroll-top:hover .rocket-flame {
    opacity: 1;
    animation: flameFlicker 0.2s infinite alternate;
}

@keyframes rocketRumble {
    0% { transform: translateY(-2px) rotate(-1deg); }
    100% { transform: translateY(-4px) rotate(1deg); }
}

@keyframes flameFlicker {
    0% { transform: scaleY(0.9); }
    100% { transform: scaleY(1.3); }
}

/* Rocket Launch Triggered State */
.smart-scroll-top.is-launching .scroll-rocket-wrap {
    animation: rocketBlastoff 0.75s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes rocketBlastoff {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    30% {
        transform: translateY(6px) scale(0.9);
    }
    60% {
        transform: translateY(-60px) scale(0.7);
        opacity: 0;
    }
    85% {
        transform: translateY(40px) scale(0.6);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Live Percentage Tooltip */
.scroll-percent-pill {
    position: absolute;
    right: calc(100% + 12px);
    background: rgba(42, 8, 69, 0.96);
    color: var(--gold-light);
    border: 1px solid rgba(245, 166, 35, 0.45);
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transform: translateX(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.scroll-percent-pill::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid rgba(42, 8, 69, 0.96);
}

.smart-scroll-top:hover .scroll-percent-pill,
.smart-scroll-top.show-percent .scroll-percent-pill {
    opacity: 1;
    transform: translateX(0);
}

/* Responsive adjustment for Mobile */
@media (max-width: 768px) {
    .smart-scroll-top {
        right: 18px;
        bottom: 22px;
        width: 50px;
        height: 50px;
    }
    .scroll-rocket-wrap {
        width: 24px;
        height: 24px;
    }
    .scroll-percent-pill {
        display: none; /* Keep clean on small phones */
    }
}

@media (prefers-reduced-motion: reduce) {
    .smart-scroll-top,
    .scroll-rocket-wrap,
    .smart-scroll-top.is-launching .scroll-rocket-wrap {
        transition: none;
        animation: none;
    }
}


/* ==========================================================================
   ABOUT PAGE - WIDE & OBVIOUS FOUNDATIONS SECTION (CORE PILLARS)
   Theme: Spiritual Foundation (Biblical Doctrines) & Academic Excellence
   ========================================================================== */
.about-foundations-section {
    padding: 85px 0 80px;
    background: linear-gradient(180deg, #fdfcff 0%, #f7f4fb 100%);
    position: relative;
    border-bottom: 1px solid rgba(76, 0, 130, 0.08);
}

.foundations-header-box {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 55px;
}

.foundations-header-box h2 {
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 900;
    line-height: 1.3;
    color: var(--primary-dark);
    margin: 14px 0 18px;
}

.foundations-lead {
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-main);
    opacity: 0.92;
}

/* Wide 2-Column Pillars Grid */
.foundations-pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.foundation-pillar-card {
    background: #ffffff;
    border-radius: 28px;
    padding: 44px 38px;
    box-shadow: 0 18px 45px rgba(42, 0, 74, 0.07);
    border: 1px solid rgba(76, 0, 130, 0.10);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.foundation-pillar-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 55px rgba(42, 0, 74, 0.13);
}

.pillar-spiritual {
    border-top: 5px solid var(--gold);
}

.pillar-academic {
    border-top: 5px solid var(--primary);
}

.pillar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.pillar-num {
    font-size: 28px;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
    font-family: var(--font-heading);
}

.pillar-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(76, 0, 130, 0.06);
    color: var(--primary);
    font-size: 12.5px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(76, 0, 130, 0.12);
}

.pillar-spiritual .pillar-badge {
    background: rgba(245, 166, 35, 0.12);
    color: #9c6806;
    border-color: rgba(245, 166, 35, 0.30);
}

.foundation-pillar-card h3 {
    font-size: 26px;
    font-weight: 900;
    color: var(--primary-dark);
    margin-bottom: 14px;
    line-height: 1.25;
}

.pillar-main-desc {
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--text-main);
    margin-bottom: 26px;
    font-weight: 550;
}

.pillar-visual-media {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 22px;
    box-shadow: 0 10px 25px rgba(42, 0, 74, 0.08);
    border: 1px solid rgba(76, 0, 130, 0.08);
}

.pillar-visual-media img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.foundation-pillar-card:hover .pillar-visual-media img {
    transform: scale(1.04);
}

.pillar-img-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    background: rgba(22, 1, 40, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: inline-block;
    letter-spacing: 0.2px;
}

.pillar-doctrinal-box {
    background: #faf8fd;
    border-radius: 20px;
    padding: 24px;
    border: 1px solid rgba(76, 0, 130, 0.08);
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: auto;
}

.doctrinal-badge-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--primary);
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(76, 0, 130, 0.15);
}

.doctrinal-badge-title .icon {
    font-size: 16px;
}

.pillar-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pillar-points li {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-main);
}

.pillar-points li strong {
    display: block;
    color: var(--primary-dark);
    font-weight: 750;
    margin-bottom: 2px;
}

.pillar-points li span {
    color: var(--muted);
}

.pillar-scripture-anchor {
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.15) 0%, rgba(245, 166, 35, 0.05) 100%);
    border-left: 3px solid var(--gold);
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 8px;
}

.pillar-scripture-anchor .scripture-quote {
    display: block;
    font-style: italic;
    font-size: 13.5px;
    color: var(--primary-dark);
    line-height: 1.5;
    font-weight: 600;
}

.pillar-scripture-anchor .scripture-ref {
    display: block;
    font-size: 12px;
    color: #9c6806;
    font-weight: 800;
    margin-top: 4px;
    text-align: right;
}

.school-vision-mission-section {
    padding: 70px 0 60px;
    background: #ffffff;
}

/* Responsive adjustments for Wide Foundations */
@media (max-width: 991px) {
    .foundations-pillars-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .foundation-pillar-card {
        padding: 32px 24px;
    }
}

/* ========================================================
   7-TIER PROGRAMMES SHOWCASE GRID
   ======================================================== */
.programmes-7-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}

.programme-branch-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(76, 0, 130, 0.08);
    color: var(--primary);
    font-size: 11.5px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    margin-bottom: 10px;
    border: 1px solid rgba(76, 0, 130, 0.14);
    letter-spacing: 0.2px;
}

.programme-card-featured .programme-branch-pill {
    background: rgba(245, 166, 35, 0.14);
    color: #9c6806;
    border-color: rgba(245, 166, 35, 0.32);
}

/* ========================================================
   "SEEING IS BELIEVING" CAMPUS SHOWCASE GALLERY
   ======================================================== */
.seeing-is-believing-section {
    padding: 100px 0 90px;
    background: linear-gradient(180deg, #fbf9fe 0%, #ffffff 50%, #f7f3fb 100%);
    position: relative;
    overflow: hidden;
}

.seeing-is-believing-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    height: 380px;
    background: radial-gradient(circle at 50% 0%, rgba(214, 161, 43, 0.12), transparent 70%);
    pointer-events: none;
}

.seeing-header {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 46px;
    position: relative;
    z-index: 2;
}

.seeing-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(76, 0, 130, 0.07);
    color: var(--primary);
    border: 1px solid rgba(76, 0, 130, 0.15);
    padding: 7px 18px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.3px;
    margin-bottom: 16px;
}

.seeing-header h2 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 950;
    color: var(--primary-dark);
    line-height: 1.25;
    margin-bottom: 18px;
    letter-spacing: -0.5px;
}

.seeing-subtext {
    font-size: 16.5px;
    line-height: 1.8;
    color: var(--text-main);
    margin-bottom: 30px;
}

.seeing-subtext em {
    color: var(--primary);
    font-weight: 800;
    font-style: normal;
    background: rgba(245, 166, 35, 0.18);
    padding: 2px 8px;
    border-radius: 6px;
}

/* Category Filter Tabs */
.gallery-filter-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.gallery-tab-btn {
    appearance: none;
    border: 1px solid rgba(76, 0, 130, 0.14);
    background: #ffffff;
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 800;
    padding: 10px 22px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 14px rgba(42, 0, 74, 0.04);
}

.gallery-tab-btn:hover {
    background: rgba(76, 0, 130, 0.05);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.gallery-tab-btn.active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(76, 0, 130, 0.28);
    transform: translateY(-2px);
}

/* Mosaic Grid */
.seeing-mosaic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    position: relative;
    z-index: 2;
}

.gallery-item-card {
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(76, 0, 130, 0.09);
    box-shadow: 0 12px 35px rgba(42, 0, 74, 0.07);
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-item-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 55px rgba(42, 0, 74, 0.16);
    border-color: rgba(214, 161, 43, 0.4);
}

.gallery-item-card.featured-span-2 {
    grid-column: span 2;
}

.gallery-card-media {
    position: relative;
    height: 250px;
    overflow: hidden;
    cursor: pointer;
    background: #1a0033;
}

.gallery-item-card.featured-span-2 .gallery-card-media {
    height: 310px;
}

.gallery-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-item-card:hover .gallery-card-media img {
    transform: scale(1.08);
}

.gallery-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 11.5px;
    font-weight: 850;
    letter-spacing: 0.3px;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.gallery-badge.gold-badge {
    background: linear-gradient(135deg, #f5a623 0%, #d48806 100%);
    color: #ffffff;
}

.gallery-badge.purple-badge {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #ffffff;
}

.gallery-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(22, 1, 40, 0.65);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 3;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.gallery-item-card:hover .gallery-hover-overlay {
    opacity: 1;
}

.gallery-hover-overlay .hover-icon {
    font-size: 26px;
    background: rgba(255, 255, 255, 0.2);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.gallery-hover-overlay .hover-text {
    font-size: 13px;
    font-weight: 750;
    letter-spacing: 0.3px;
}

.gallery-card-caption {
    padding: 22px 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.gallery-card-caption .cat-pill {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gallery-card-caption h4 {
    font-size: 19px;
    font-weight: 900;
    color: var(--primary-dark);
    line-height: 1.35;
    margin: 0;
}

.gallery-card-caption p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-muted, #555555);
    margin: 0;
}

/* Call to Action Banner */
.seeing-cta-banner {
    margin-top: 56px;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    border-radius: 28px;
    padding: 38px 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    color: #ffffff;
    box-shadow: 0 20px 50px rgba(42, 0, 74, 0.22);
    position: relative;
    overflow: hidden;
}

.seeing-cta-banner::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(214, 161, 43, 0.25), transparent 70%);
    pointer-events: none;
}

.cta-mini-tag {
    display: inline-block;
    background: rgba(245, 166, 35, 0.22);
    color: #fbd38d;
    font-size: 11.5px;
    font-weight: 850;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    letter-spacing: 0.8px;
    margin-bottom: 10px;
    border: 1px solid rgba(245, 166, 35, 0.35);
}

.seeing-cta-text h3 {
    font-size: 24px;
    font-weight: 950;
    color: #ffffff;
    margin-bottom: 8px;
    line-height: 1.3;
}

.seeing-cta-text p {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    max-width: 620px;
}

.seeing-cta-btns {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.seeing-visit-btn {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: #2a004a !important;
    font-size: 14.5px;
    font-weight: 850;
    padding: 14px 26px;
    border-radius: var(--radius-full);
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(214, 161, 43, 0.32);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.seeing-visit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(214, 161, 43, 0.45);
}

.seeing-wa-btn {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 750;
    padding: 14px 22px;
    border-radius: var(--radius-full);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.28);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.seeing-wa-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: #ffffff;
}

/* Responsive adjustments for Seeing is Believing Gallery */
@media (max-width: 1024px) {
    .seeing-mosaic-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-item-card.featured-span-2 {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .seeing-is-believing-section {
        padding: 70px 0 60px;
    }

    .seeing-mosaic-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .gallery-item-card.featured-span-2 {
        grid-column: span 1;
    }

    .gallery-item-card.featured-span-2 .gallery-card-media {
        height: 250px;
    }

    .seeing-cta-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 30px 24px;
    }

    .seeing-cta-btns {
        flex-direction: column;
        width: 100%;
    }

    .seeing-visit-btn, .seeing-wa-btn {
        width: 100%;
        text-align: center;
    }
}


/* ==========================================================================
   OFFICIAL PICTURE GALLERY STYLES — i-Kingdom International Academy
   2026/2027 Academic Session • 81+ High-Definition Curated Moments
   ========================================================================== */

/* Breadcrumb Strip */
.gallery-breadcrumb-strip {
    background: #f8f5fc;
    border-bottom: 1px solid rgba(76, 0, 130, 0.08);
    padding: 14px 0;
    font-size: 13.5px;
}

.gallery-breadcrumb-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gallery-breadcrumb-inner a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.gallery-breadcrumb-inner a:hover {
    color: var(--gold-dark);
    text-decoration: underline;
}

.gallery-breadcrumb-sep {
    color: #999;
    font-size: 12px;
}

.gallery-breadcrumb-current {
    color: #4e4a5e;
    font-weight: 500;
}

/* Gallery Hero Section */
.gallery-hero {
    position: relative;
    background: linear-gradient(135deg, #0d001a 0%, #1e0036 45%, #3c0066 85%, #580099 100%);
    color: #ffffff;
    padding: 70px 0 60px;
    overflow: hidden;
}

.gallery-hero::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 166, 35, 0.16) 0%, rgba(245, 166, 35, 0) 70%);
    pointer-events: none;
}

.gallery-hero::after {
    content: "";
    position: absolute;
    bottom: -40%;
    left: -10%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(106, 17, 176, 0.3) 0%, rgba(106, 17, 176, 0) 70%);
    pointer-events: none;
}

.gallery-hero-container {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 980px;
    margin: 0 auto;
}

.gallery-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(245, 166, 35, 0.45);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.gallery-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(30px, 4.5vw, 50px);
    font-weight: 850;
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -0.5px;
    color: #ffffff;
}

.gallery-hero-title .gold-accent {
    background: linear-gradient(135deg, #ffc453 0%, #f5a623 50%, #e09418 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.gallery-hero-desc {
    font-size: clamp(15px, 2vw, 17.5px);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.90);
    max-width: 820px;
    margin: 0 auto 32px;
}

/* Hero Stats Chips */
.gallery-hero-stats {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.gallery-stat-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    font-size: 13px;
    color: #ffffff;
    transition: transform 0.2s ease, background 0.2s ease;
}

.gallery-stat-chip:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.14);
}

.gallery-stat-chip strong {
    color: var(--gold-light);
    font-size: 15px;
}

/* Sticky Filter & Search Control Bar */
.gallery-controls-section {
    position: sticky;
    top: 72px; /* below navbar */
    z-index: 100;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(76, 0, 130, 0.12);
    box-shadow: 0 8px 24px rgba(42, 0, 74, 0.06);
    padding: 16px 0;
    transition: all 0.3s ease;
}

.gallery-controls-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Category Filter Tabs (Horizontal Scrollable on Mobile) */
.gallery-tabs-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.gallery-tabs-scroll::-webkit-scrollbar {
    display: none;
}

.gallery-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(76, 0, 130, 0.15);
    background: #ffffff;
    color: var(--primary-dark);
    font-family: var(--font-main);
    font-size: 13.5px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.gallery-tab-btn:hover {
    background: #f8f0ff;
    border-color: var(--primary-light);
    transform: translateY(-1px);
}

.gallery-tab-btn.active {
    background: linear-gradient(135deg, #2a004a 0%, #4c0082 60%, #6a11b0 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(76, 0, 130, 0.28);
}

.gallery-tab-btn .tab-count {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(76, 0, 130, 0.08);
    color: var(--primary);
    font-size: 11.5px;
    font-weight: 800;
}

.gallery-tab-btn.active .tab-count {
    background: rgba(245, 166, 35, 0.25);
    color: var(--gold-light);
}

/* Secondary Sub-Filter Row (Classes / Search) */
.gallery-secondary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

/* Sub-filter pills for Classes */
.gallery-subfilters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.subfilter-label {
    font-size: 12px;
    font-weight: 700;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}

.gallery-subfilter-btn {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #f9f9fb;
    color: #4e4a5e;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gallery-subfilter-btn:hover {
    background: #ede3f7;
    color: var(--primary);
}

.gallery-subfilter-btn.active {
    background: var(--gold-gradient);
    color: #120f1f;
    border-color: transparent;
    font-weight: 800;
}

/* Live Search Box */
.gallery-search-box {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 260px;
    max-width: 380px;
    flex: 1;
}

.gallery-search-icon {
    position: absolute;
    left: 12px;
    color: #888;
    font-size: 14px;
    pointer-events: none;
}

.gallery-search-input {
    width: 100%;
    padding: 9px 34px 9px 34px;
    border: 1px solid rgba(76, 0, 130, 0.18);
    border-radius: 999px;
    background: #ffffff;
    font-family: var(--font-main);
    font-size: 13.5px;
    color: var(--text-main);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gallery-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(76, 0, 130, 0.12);
}

.gallery-search-clear {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 6px;
    display: none;
}

.gallery-search-clear:hover {
    color: var(--primary);
}

/* Counter & Active Filter Status */
.gallery-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px 0;
    font-size: 13px;
    color: #666;
}

.gallery-reset-link {
    color: var(--primary);
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    display: none;
}

.gallery-reset-link:hover {
    color: var(--gold-dark);
}

/* Main Gallery Showcase Section */
.gallery-showcase-section {
    padding: 40px 0 80px;
    background: #faf8fc;
    min-height: 600px;
}

/* Responsive Grid / Masonry Columns */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 26px;
}

@media (min-width: 1200px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1440px) {
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Individual Gallery Item Card */
.gallery-card {
    position: relative;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(76, 0, 130, 0.08);
    box-shadow: 0 8px 24px rgba(42, 0, 74, 0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

.gallery-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(42, 0, 74, 0.14);
    border-color: rgba(245, 166, 35, 0.45);
}

/* Media Area */
.gallery-card-media {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #eee;
}

.gallery-card-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-card:hover .gallery-card-img {
    transform: scale(1.05);
}

/* Badges on Card Media */
.gallery-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(13, 0, 26, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid rgba(245, 166, 35, 0.4);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5px;
}

.gallery-card-tier {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #f5a623 0%, #c9820a 100%);
    color: #120f1f;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Hover Action Overlay */
.gallery-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(29, 0, 51, 0.75) 0%, rgba(29, 0, 51, 0.2) 60%, transparent 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
}

.gallery-card:hover .gallery-card-overlay {
    opacity: 1;
}

.gallery-zoom-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--primary);
    display: grid;
    place-items: center;
    font-size: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transform: scale(0.85);
    transition: transform 0.25s ease;
}

.gallery-card:hover .gallery-zoom-btn {
    transform: scale(1);
}

/* Card Body Content */
.gallery-card-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.gallery-card-title {
    font-family: var(--font-heading);
    font-size: 16.5px;
    font-weight: 750;
    line-height: 1.35;
    color: var(--primary-dark);
    margin-bottom: 8px;
    transition: color 0.2s ease;
}

.gallery-card:hover .gallery-card-title {
    color: var(--primary-light);
}

.gallery-card-desc {
    font-size: 13.5px;
    color: #555566;
    line-height: 1.55;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.gallery-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(76, 0, 130, 0.07);
    font-size: 12px;
}

.gallery-card-tag {
    font-weight: 700;
    color: var(--primary);
    background: #f4ebff;
    padding: 3px 9px;
    border-radius: 6px;
}

.gallery-card-viewlink {
    color: var(--gold-dark);
    font-weight: 750;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Empty State */
.gallery-empty-state {
    text-align: center;
    padding: 70px 20px;
    grid-column: 1 / -1;
    background: #ffffff;
    border-radius: 20px;
    border: 2px dashed rgba(76, 0, 130, 0.15);
}

.gallery-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.gallery-empty-state h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.gallery-empty-state p {
    color: #666;
    font-size: 14.5px;
    margin-bottom: 18px;
}

/* Reassurance & Admissions CTA Banner */
.gallery-cta-section {
    background: linear-gradient(135deg, #1d0033 0%, #2a004a 50%, #4c0082 100%);
    color: #ffffff;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.gallery-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    flex-wrap: wrap;
}

.gallery-cta-text {
    flex: 1;
    min-width: 300px;
}

.gallery-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(245, 166, 35, 0.16);
    border: 1px solid rgba(245, 166, 35, 0.4);
    color: var(--gold-light);
    font-size: 12px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

.gallery-cta-text h2 {
    font-family: var(--font-heading);
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 12px;
    line-height: 1.25;
}

.gallery-cta-text h2 span {
    color: var(--gold-light);
}

.gallery-cta-text p {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    max-width: 680px;
}

.gallery-cta-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.gallery-btn-admit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 999px;
    background: var(--gold-gradient);
    color: #120f1f !important;
    font-weight: 800;
    font-size: 14.5px;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(245, 166, 35, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    white-space: nowrap;
}

.gallery-btn-admit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(245, 166, 35, 0.5);
}

.gallery-btn-wa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff !important;
    font-weight: 750;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.gallery-btn-wa:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: #ffffff;
}

/* ==========================================================================
   INTERACTIVE FULLSCREEN LIGHTBOX MODAL
   ========================================================================== */
.gallery-lightbox-modal {
    position: fixed;
    inset: 0;
    background: rgba(10, 4, 18, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 100000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
}

.gallery-lightbox-modal.open {
    opacity: 1;
    visibility: visible;
}

/* Lightbox Header Bar */
.lightbox-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    z-index: 10;
}

.lightbox-info-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lightbox-counter-badge {
    background: rgba(245, 166, 35, 0.22);
    color: var(--gold-light);
    border: 1px solid rgba(245, 166, 35, 0.4);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.lightbox-category-badge {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 650;
}

.lightbox-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lightbox-action-btn {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.lightbox-action-btn:hover {
    background: rgba(255, 255, 255, 0.24);
    transform: scale(1.05);
}

.lightbox-close-btn {
    background: rgba(220, 53, 69, 0.25);
    border-color: rgba(220, 53, 69, 0.4);
    color: #ff6b6b;
    font-size: 18px;
}

.lightbox-close-btn:hover {
    background: rgba(220, 53, 69, 0.6);
    color: #ffffff;
}

/* Lightbox Stage */
.lightbox-stage {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 60px;
    overflow: hidden;
}

.lightbox-media-wrap {
    max-width: 90vw;
    max-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.lightbox-img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(245, 166, 35, 0.25);
    transition: transform 0.3s ease;
    user-select: none;
}

/* Lightbox Navigation Arrow Buttons */
.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 24px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 20;
}

.lightbox-nav-btn:hover {
    background: rgba(245, 166, 35, 0.85);
    color: #120f1f;
    border-color: transparent;
    transform: translateY(-50%) scale(1.1);
}

.lightbox-prev-btn {
    left: 18px;
}

.lightbox-next-btn {
    right: 18px;
}

/* Lightbox Bottom Caption Drawer */
.lightbox-caption-bar {
    background: rgba(13, 0, 26, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 18px 24px;
    text-align: center;
    z-index: 10;
}

.lightbox-caption-inner {
    max-width: 820px;
    margin: 0 auto;
}

.lightbox-caption-title {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 750;
    color: var(--gold-light);
    margin-bottom: 6px;
}

.lightbox-caption-desc {
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
}

/* ==========================================================================
   RESPONSIVE DESIGN FOR GALLERY
   ========================================================================== */
@media (max-width: 991px) {
    .gallery-controls-section {
        top: 64px;
    }

    .gallery-hero {
        padding: 50px 0 45px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .lightbox-stage {
        padding: 10px 20px;
    }

    .lightbox-nav-btn {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .lightbox-prev-btn {
        left: 8px;
    }

    .lightbox-next-btn {
        right: 8px;
    }

    .gallery-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .gallery-cta-actions {
        width: 100%;
    }

    .gallery-btn-admit,
    .gallery-btn-wa {
        flex: 1;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .gallery-hero {
        padding: 40px 0 35px;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .gallery-secondary-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .gallery-search-box {
        max-width: 100%;
    }

    .gallery-stat-chip {
        padding: 8px 14px;
        font-size: 12px;
    }

    .lightbox-topbar {
        padding: 12px 16px;
    }

    .lightbox-caption-bar {
        padding: 14px 16px;
    }

    .lightbox-caption-title {
        font-size: 16px;
    }

    .lightbox-caption-desc {
        font-size: 13px;
    }

    .lightbox-media-wrap {
        max-height: 55vh;
    }

    .lightbox-img {
        max-height: 55vh;
    }
}


/* ==========================================================================
   SPAM FORTRESS GARRISON SECURITY STYLES
   ========================================================================== */
.form-honeypot,
.fc-garrison-barrier {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}