/* ==========================================================================
   UPL College — Main Stylesheet
   Design inspired by Unipix (layout), Stanford (hero), GGDSD (structure)
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root {
    /* Brand #c21010-#1a1a1a */
    --brand-primary: #8b1113; /* deep maroon — college heritage red */
    --brand-primary-dark: #6b0d0f;
    --brand-secondary: #1a2847; /* navy from original site */
    --brand-accent: #d4a64a; /* warm gold */
    --brand-light: #f8f4ec; /* warm cream */
    /* Neutrals */
    --c-text: #1a1a1a;
    --c-text-muted: #5a5a5a;
    --c-text-light: #8b8b8b;
    --c-bg: #ffffff;
    --c-bg-alt: #f7f6f2;
    --c-border: #e5e2db;
    /* Typography */
    --font-display: 'Playfair Display', 'Times New Roman', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Spacing & layout */
    --container: 1280px;
    --radius: 6px;
    --radius-lg: 14px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
    --shadow-md: 0 8px 24px rgba(0,0,0,.08);
    --shadow-lg: 0 16px 48px rgba(0,0,0,.12);
    /* Transitions */
    --t-fast: 150ms ease;
    --t-base: 300ms cubic-bezier(.4,0,.2,1);
}

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

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

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--c-text);
    background: var(--c-bg);
    overflow-x: hidden;
}

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

a {
    color: var(--brand-primary);
    text-decoration: none;
    transition: color var(--t-fast);
}

    a:hover {
        color: var(--brand-primary-dark);
    }

button {
    font-family: inherit;
    cursor: pointer;
    border: 0;
    background: transparent;
}

ul, ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    color: var(--brand-secondary);
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Header / Top Bar ---------- */
.topbar {
    background: var(--brand-secondary);
    color: #e8e6df;
    font-size: 13px;
    padding: 8px 0;
}

    .topbar .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }

.topbar-info {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

    .topbar-info span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .topbar-info a {
        color: #e8e6df;
    }

        .topbar-info a:hover {
            color: var(--brand-accent);
        }

.topbar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

    .topbar-actions a {
        background: transparent;
        color: #e8e6df;
        padding: 4px 14px;
        border: 1px solid rgba(255,255,255,.25);
        border-radius: 4px;
        font-size: 12px;
        transition: all var(--t-fast);
    }

        .topbar-actions a:hover {
            background: var(--brand-accent);
            color: var(--brand-secondary);
            border-color: var(--brand-accent);
        }

/* ---------- Main Header ---------- */
.site-header {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    gap: 24px;
}

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

.logo-mark {
    width: 62px;
    height: 62px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(139,17,19,.25);
}

.logo-text h1 {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--brand-primary);
    margin: 0;
    line-height: 1.1;
}

.logo-text p {
    font-size: 11px;
    color: var(--c-text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 2px;
}

.helpline-box {
    text-align: right;
    font-size: 12px;
    color: var(--c-text-muted);
}

    .helpline-box strong {
        color: var(--brand-primary);
        display: block;
        font-size: 13px;
    }

/* ==========================================================================
   NAVIGATION
   NOTE: The entire navigation system (.main-nav, .nav-list, .nav-item,
   .dropdown, .submenu and the old .mobile-toggle) is now fully self-contained
   inside header.php (the beige "V15" header). The previous navy/maroon nav
   rules that used to live here were REMOVED on purpose — they shared the same
   class names as the new header and were silently fighting its mobile JS,
   which is why the hamburger menu wouldn't open. Do not re-add nav styles here;
   style the menu inside header.php instead.
   ========================================================================== */

/* ---------- Hero (Stanford-inspired) ---------- */
.hero {
    position: relative;
    min-height: 78vh;
    overflow: hidden;
    background: #000;
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 1;
}

    .hero-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        animation: heroFade 18s infinite;
        position: absolute; /* Add this */
        top: 0; /* Add this */
        left: 0;
    }

        .hero-media img:nth-child(1) {
            animation-delay: 0s;
        }

        .hero-media img:nth-child(2) {
            animation-delay: 6s;
        }

        .hero-media img:nth-child(3) {
            animation-delay: 12s;
        }

@keyframes heroFade {
    0%, 28%, 100% {
        opacity: 0;
    }

    5%, 23% {
        opacity: 1;
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26,40,71,.82) 0%, rgba(139,17,19,.55) 100%);
    z-index: 2;
}

.hero-inner {
    position: relative;
    z-index: 3;
    min-height: 78vh;
    display: flex;
    align-items: center;
    padding: 100px 0 120px;
}

.hero-content {
    max-width: 760px;
    color: #fff;
}

.hero-eyebrow {
    display: inline-block;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-accent);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--brand-accent);
    margin-bottom: 24px;
}

.hero-title {
    font-size: clamp(36px, 5.5vw, 68px);
    color: #fff;
    line-height: 1.08;
    margin-bottom: 20px;
}

    .hero-title em {
        font-style: italic;
        color: var(--brand-accent);
        font-weight: 400;
    }

.hero-text {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 32px;
    color: rgba(255,255,255,.92);
    max-width: 620px;
}

.hero-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .5px;
    border-radius: 4px;
    transition: all var(--t-base);
    cursor: pointer;
    text-transform: uppercase;
}

.btn-primary {
    background: var(--brand-primary);
    color: #fff;
}

    .btn-primary:hover {
        background: var(--brand-primary-dark);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(139,17,19,.35);
    }

.btn-outline {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}

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

.btn-accent {
    background: var(--brand-accent);
    color: var(--brand-secondary);
}

    .btn-accent:hover {
        background: #c29738;
        color: var(--brand-secondary);
        transform: translateY(-2px);
    }

/* Hero bottom ticker */
.hero-ticker {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4;
    background: rgba(139,17,19,.92);
    color: #fff;
    padding: 14px 0;
    font-weight: 500;
    font-size: 14px;
    overflow: hidden;
}

.ticker-wrap {
    display: flex;
    align-items: center;
}

.ticker-label {
    background: var(--brand-accent);
    color: var(--brand-secondary);
    padding: 14px 20px;
    margin: -14px 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    flex-shrink: 0;
}

.ticker-content {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 20px;
}

.ticker-slide {
    display: inline-block;
    animation: tickerSlide 30s linear infinite;
    padding-left: 100%;
}

    .ticker-slide span {
        padding: 0 32px;
    }

@keyframes tickerSlide {
    0% {
        transform: translateX(0);
    }

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

/* ---------- Section Base ---------- */
.section {
    padding: 90px 0;
}

.section-alt {
    background: var(--c-bg-alt);
}

.section-dark {
    background: var(--brand-secondary);
    color: #e9e7e1;
}

    .section-dark h1, .section-dark h2, .section-dark h3 {
        color: #fff;
    }

.section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}

    .section-head.left {
        text-align: left;
        margin-left: 0;
    }

.eyebrow {
    display: inline-block;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-primary);
    font-weight: 600;
    margin-bottom: 12px;
}

.section-title {
    font-size: clamp(30px, 4vw, 46px);
    margin-bottom: 16px;
}

.section-text {
    color: var(--c-text-muted);
    font-size: 17px;
    line-height: 1.7;
}

/* ---------- About Section ---------- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

    .about-media img {
        width: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
    }

.about-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: var(--brand-primary);
    color: #fff;
    padding: 18px 22px;
    border-radius: var(--radius);
    font-family: var(--font-display);
}

    .about-badge .num {
        font-size: 42px;
        font-weight: 700;
        line-height: 1;
        display: block;
    }

    .about-badge .lbl {
        font-size: 13px;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-top: 4px;
    }

.about-content h2 {
    margin-bottom: 20px;
}

.about-content p {
    color: var(--c-text-muted);
    margin-bottom: 16px;
}

.about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 28px;
}

.feature-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    background: var(--c-bg-alt);
    border-radius: var(--radius);
}

.feature-icon {
    width: 42px;
    height: 42px;
    background: var(--brand-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.feature-item h4 {
    font-size: 15px;
    margin-bottom: 2px;
    font-family: var(--font-body);
}

.feature-item p {
    font-size: 13px;
    color: var(--c-text-muted);
    margin: 0;
}

/* ---------- Programs / Cards ---------- */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
}

.program-card {
    position: relative;
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base), box-shadow var(--t-base);
}

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

    .program-card .img {
        aspect-ratio: 16/11;
        overflow: hidden;
    }

        .program-card .img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 600ms ease;
        }

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

    .program-card .body {
        padding: 22px;
    }

    .program-card h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }

        .program-card h3 a {
            color: var(--brand-secondary);
        }

            .program-card h3 a:hover {
                color: var(--brand-primary);
            }

    .program-card p {
        color: var(--c-text-muted);
        font-size: 14px;
        margin-bottom: 16px;
    }

    .program-card .more {
        color: var(--brand-primary);
        font-weight: 600;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

        .program-card .more::after {
            content: ' →';
            transition: margin var(--t-fast);
        }

    .program-card:hover .more::after {
        margin-left: 6px;
    }

/* ---------- Stats ---------- */
.stats {
    background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary-dark));
    color: #fff;
    padding: 60px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 32px;
    text-align: center;
}

.stat-item .num {
    font-family: var(--font-display);
    font-size: 52px;
    font-weight: 700;
    color: var(--brand-accent);
    line-height: 1;
    display: block;
}

.stat-item .lbl {
    margin-top: 10px;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
}

/* ---------- Marquee ---------- */
.marquee {
    background: var(--brand-secondary);
    color: #fff;
    padding: 28px 0;
    overflow: hidden;
}

.marquee-wrap {
    display: flex;
    gap: 60px;
    animation: marqueeScroll 40s linear infinite;
    white-space: nowrap;
}

.marquee-item {
    font-family: var(--font-display);
    font-size: 30px;
    color: var(--brand-accent);
    display: inline-flex;
    align-items: center;
    gap: 60px;
}

    .marquee-item::after {
        content: '✦';
        color: #fff;
        font-size: 16px;
    }

@keyframes marqueeScroll {
    from {
        transform: translateX(0);
    }

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

/* ---------- Campus Life ---------- */
.campus-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.campus-item {
    position: relative;
    aspect-ratio: 3/4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
}

    .campus-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 600ms ease;
    }

    .campus-item:hover img {
        transform: scale(1.08);
    }

    .campus-item::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.85));
    }

    .campus-item .caption {
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 20px;
        color: #fff;
        font-family: var(--font-display);
        font-size: 20px;
        font-weight: 700;
        z-index: 2;
    }

    .campus-item.tall {
        grid-row: span 2;
        aspect-ratio: 3/7;
    }

/* ---------- Testimonials ---------- */
.testimonial-card {
    background: #fff;
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    position: relative;
}

    .testimonial-card::before {
        content: '"';
        font-family: var(--font-display);
        font-size: 140px;
        color: var(--brand-accent);
        position: absolute;
        top: -10px;
        right: 24px;
        line-height: 1;
        opacity: .3;
    }

    .testimonial-card blockquote {
        font-family: var(--font-display);
        font-size: 22px;
        line-height: 1.5;
        color: var(--brand-secondary);
        margin-bottom: 24px;
        font-style: italic;
    }

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

    .testimonial-author img {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        object-fit: cover;
    }

    .testimonial-author h4 {
        font-family: var(--font-body);
        font-size: 16px;
        margin-bottom: 2px;
    }

    .testimonial-author p {
        font-size: 13px;
        color: var(--c-text-muted);
        margin: 0;
    }

/* ---------- News/Events ---------- */
.news-card {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base);
}

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

    .news-card .img {
        aspect-ratio: 16/10;
        overflow: hidden;
    }

        .news-card .img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .news-card .body {
        padding: 24px;
    }

.news-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--c-text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

    .news-meta .date {
        color: var(--brand-primary);
        font-weight: 600;
    }

.news-card h3 {
    font-size: 19px;
    line-height: 1.35;
    margin-bottom: 10px;
}

    .news-card h3 a {
        color: var(--brand-secondary);
    }

        .news-card h3 a:hover {
            color: var(--brand-primary);
        }

.news-card p {
    font-size: 14px;
    color: var(--c-text-muted);
}

/* ---------- CTA Section ---------- */
.cta {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    color: #fff;
    padding: 80px 0;
    text-align: center;
}

    .cta h2 {
        color: #fff;
        font-size: clamp(28px, 4vw, 44px);
        margin-bottom: 16px;
    }

    .cta p {
        font-size: 18px;
        max-width: 620px;
        margin: 0 auto 32px;
        opacity: .9;
    }

/* ---------- Footer ---------- */
.site-footer {
    background: #0f1628;
    color: #a8adbc;
    padding-top: 70px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 48px;
    padding-bottom: 48px;
}

.footer-col h4 {
    color: #fff;
    font-family: var(--font-body);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--brand-primary);
    display: inline-block;
}

.footer-col p {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 12px;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul a {
    color: #a8adbc;
    font-size: 14px;
    transition: all var(--t-fast);
}

    .footer-col ul a:hover {
        color: var(--brand-accent);
        padding-left: 6px;
    }

.footer-col .logo-text h1 {
    color: #fff;
    font-size: 18px;
}

.footer-col .logo-text p {
    color: #a8adbc;
    font-size: 10px;
    margin: 2px 0 0;
}

.footer-logo-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.footer-logo {
    /*width: 65px;*/
    height: auto;
    background: #fff;
    padding: 5px;
    border-radius: 8px;
}


.footer-about {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    font-size: 0.95rem;
    margin-bottom: 25px;
    text-align: justify;
}

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

    .footer-social a {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(255,255,255,.08);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        transition: background var(--t-fast);
    }

        .footer-social a:hover {
            background: var(--brand-primary);
        }

.footer-contact-item {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 14px;
}

    .footer-contact-item .icon {
        color: var(--brand-accent);
        font-size: 16px;
        margin-top: 2px;
    }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 20px 0;
    text-align: center;
    font-size: 13px;
    color: #6b7186;
}

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

/* ---------- Inner Page Banner ---------- */
.page-banner {
    position: relative;
    padding: 100px 0 80px;
    background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary-dark));
    color: #fff;
    overflow: hidden;
}

    .page-banner::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url('/assets/img/breadcrub-back.jpg');
        background-size: cover;
        background-position: center;
        opacity: .18;
    }

.page-banner-content {
    position: relative;
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
}

.page-banner h1 {
    color: #fff;
    font-size: clamp(34px, 5vw, 54px);
    margin-bottom: 16px;
}

.breadcrumb {
    display: flex;
    justify-content: center;
    gap: 10px;
    color: rgba(255,255,255,.8);
    font-size: 14px;
}

    .breadcrumb a {
        color: var(--brand-accent);
    }

    .breadcrumb span.sep {
        opacity: .5;
    }

/* ---------- Content pages ---------- */
.content-section {
    padding: 80px 0;
}

.content-wrap {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 56px;
}

.content-main h2 {
    font-size: 32px;
    margin-bottom: 20px;
    color: var(--brand-primary);
}

.content-main h3 {
    font-size: 22px;
    margin: 30px 0 14px;
    color: var(--brand-secondary);
}

.content-main p {
    color: var(--c-text-muted);
    margin-bottom: 16px;
    line-height: 1.8;
}

.content-main ul, .content-main ol {
    margin: 16px 0 20px 24px;
}

    .content-main ul li, .content-main ol li {
        list-style-position: outside;
        margin-bottom: 8px;
        color: var(--c-text-muted);
        line-height: 1.7;
    }

    .content-main ul li {
        list-style-type: disc;
    }

    .content-main ol li {
        list-style-type: decimal;
    }

.content-main blockquote {
    border-left: 4px solid var(--brand-primary);
    padding: 16px 24px;
    background: var(--c-bg-alt);
    margin: 24px 0;
    font-family: var(--font-display);
    font-style: italic;
    color: var(--brand-secondary);
    font-size: 18px;
}

.content-main .lead {
    font-size: 19px;
    line-height: 1.7;
    color: var(--brand-secondary);
    margin-bottom: 24px;
    font-family: var(--font-display);
}

.content-main img.rounded {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin: 20px 0;
}

.sidebar-widget {
    background: var(--c-bg-alt);
    padding: 28px;
    border-radius: var(--radius-lg);
    margin-bottom: 28px;
}

    .sidebar-widget h4 {
        font-size: 17px;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 2px solid var(--brand-primary);
    }

    .sidebar-widget ul li {
        border-bottom: 1px solid var(--c-border);
        padding: 10px 0;
    }

        .sidebar-widget ul li:last-child {
            border: 0;
        }

    .sidebar-widget ul a {
        color: var(--c-text);
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        transition: color var(--t-fast);
    }

        .sidebar-widget ul a:hover {
            color: var(--brand-primary);
        }

        .sidebar-widget ul a::after {
            content: '›';
            color: var(--brand-primary);
        }

/* Tables */
.table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: #fff;
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius);
    overflow: hidden;
}

    .table th {
        background: var(--brand-primary);
        color: #fff;
        text-align: left;
        padding: 14px 18px;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: .5px;
    }

    .table td {
        padding: 12px 18px;
        border-bottom: 1px solid var(--c-border);
        font-size: 14px;
    }

    .table tr:nth-child(even) {
        background: var(--c-bg-alt);
    }

    .table tr:hover {
        background: #faf3ed;
    }

/* Faculty / Staff / Leader cards */
.profile-card {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--t-base);
}

    .profile-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }

    .profile-card .photo {
        aspect-ratio: 1/1;
        overflow: hidden;
    }

        .profile-card .photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .profile-card .info {
        padding: 20px;
        text-align: center;
    }

    .profile-card h3 {
        font-size: 18px;
        margin-bottom: 4px;
        color: var(--brand-secondary);
    }

    .profile-card .role {
        color: var(--brand-primary);
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .profile-card .dept {
        font-size: 13px;
        color: var(--c-text-muted);
        margin-top: 8px;
    }

/* Info cards with icon */
.info-card {
    padding: 28px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border-top: 4px solid var(--brand-primary);
    transition: all var(--t-base);
}

    .info-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }

    .info-card .ico {
        width: 56px;
        height: 56px;
        background: var(--brand-primary);
        color: #fff;
        border-radius: var(--radius);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-bottom: 18px;
    }

    .info-card h3 {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .info-card p {
        color: var(--c-text-muted);
        font-size: 14px;
        line-height: 1.7;
    }

/* Two-column feature split */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

    .split.reverse .split-media {
        order: 2;
    }

.split-media img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* Leader profile (principal/president) */
.leader {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 44px;
    align-items: start;
}

.leader-photo {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

    .leader-photo img {
        width: 100%;
        aspect-ratio: 4/5;
        object-fit: cover;
    }

.leader-name {
    font-size: 28px;
    color: var(--brand-primary);
    margin-bottom: 6px;
}

.leader-title {
    font-size: 14px;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

/* Timeline */
.timeline {
    position: relative;
    padding: 20px 0;
}

    .timeline::before {
        content: '';
        position: absolute;
        left: 20px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--brand-primary);
    }

.timeline-item {
    position: relative;
    padding-left: 56px;
    margin-bottom: 32px;
}

    .timeline-item::before {
        content: '';
        position: absolute;
        left: 14px;
        top: 6px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--brand-primary);
        box-shadow: 0 0 0 4px #fff;
    }

.timeline-year {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--brand-primary);
    font-weight: 700;
    margin-bottom: 6px;
}

.timeline-item h4 {
    font-size: 18px;
    margin-bottom: 6px;
}

.timeline-item p {
    color: var(--c-text-muted);
    font-size: 14px;
}

/* Contact form */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 56px;
}

.contact-info-item {
    display: flex;
    gap: 18px;
    padding: 20px 0;
    border-bottom: 1px solid var(--c-border);
}

    .contact-info-item:last-child {
        border: 0;
    }

    .contact-info-item .ico {
        width: 52px;
        height: 52px;
        background: var(--brand-primary);
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
    }

    .contact-info-item h4 {
        font-size: 17px;
        margin-bottom: 4px;
        color: var(--brand-secondary);
    }

    .contact-info-item p {
        font-size: 14px;
        color: var(--c-text-muted);
        margin: 0;
    }

.form-card {
    background: #fff;
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.form-group {
    margin-bottom: 16px;
}

    .form-group label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 6px;
        color: var(--brand-secondary);
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 12px 14px;
        border: 1px solid var(--c-border);
        border-radius: var(--radius);
        font-family: inherit;
        font-size: 14px;
        transition: border-color var(--t-fast);
    }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--brand-primary);
            box-shadow: 0 0 0 3px rgba(139,17,19,.12);
        }

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

/* Department grid */
.dept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.dept-card {
    display: block;
    padding: 28px 22px;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-border);
    text-align: center;
    transition: all var(--t-base);
}

    .dept-card:hover {
        background: var(--brand-primary);
        color: #fff;
        transform: translateY(-6px);
        box-shadow: var(--shadow-md);
        border-color: var(--brand-primary);
    }

    .dept-card .ico {
        width: 60px;
        height: 60px;
        margin: 0 auto 14px;
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        transition: all var(--t-base);
    }

    .dept-card:hover .ico {
        background: #fff;
        color: var(--brand-primary);
    }

    .dept-card h4 {
        font-size: 17px;
        color: var(--brand-secondary);
        transition: color var(--t-fast);
    }

    .dept-card:hover h4 {
        color: #fff;
    }

    .dept-card p {
        font-size: 12px;
        color: var(--c-text-muted);
        margin-top: 6px;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .dept-card:hover p {
        color: rgba(255,255,255,.8);
    }

/* Alert / notice box */
.notice {
    padding: 16px 20px;
    background: #fff7e6;
    border-left: 4px solid var(--brand-accent);
    border-radius: var(--radius);
    margin-bottom: 20px;
}

    .notice.primary {
        background: #faeeee;
        border-color: var(--brand-primary);
    }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .split {
        grid-template-columns: 1fr;
        gap: 40px;
    }

        .split.reverse .split-media {
            order: 0;
        }

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

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

    .content-wrap {
        grid-template-columns: 1fr;
    }

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

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

    .leader-photo {
        max-width: 320px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .section {
        padding: 60px 0;
    }

    .topbar {
        text-align: center;
    }

        .topbar .container {
            justify-content: center;
        }

    .helpline-box {
        display: none;
    }
    /* NOTE: mobile navigation rules removed — the menu is now handled
       entirely inside header.php to avoid class-name collisions. */
    .hero-inner {
        padding: 80px 0 120px;
    }

    .hero-title {
        font-size: 36px;
    }

    .hero-text {
        font-size: 16px;
    }

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

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

    .campus-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .campus-item.tall {
        grid-row: auto;
        aspect-ratio: 3/4;
    }

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

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

    .stat-item .num {
        font-size: 40px;
    }

    .ticker-label {
        display: none;
    }
}

/* Animations on scroll */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 800ms ease, transform 800ms ease;
}

    .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }

/* Utility */
.text-center {
    text-align: center;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: 12px;
}

.mb-2 {
    margin-bottom: 24px;
}

.mb-3 {
    margin-bottom: 36px;
}

.mt-2 {
    margin-top: 24px;
}

.mt-3 {
    margin-top: 36px;
}
/* ==========================================================================
   TEXT JUSTIFICATION
   Justify long-form prose only. Headings, navigation, buttons, captions,
   labels, table cells and single-line items are intentionally left alone
   so the existing UI stays exactly as it is.
   ========================================================================== */
.content-main p,
.content-main .lead,
.content-main blockquote,
.content-main li,
.section-text,
.about-content p,
.hero-text,
.cta p,
.info-card p,
.testimonial-card blockquote,
.program-card p,
.news-card p,
.dept-card p,
.profile-card .dept,
.footer-col p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

/* Keep these specifically NOT justified — they read better aligned-left/centre */
.section-head,
.section-head .section-text,
.section-head p,
.hero-content .hero-eyebrow,
.eyebrow,
.breadcrumb,
.btn,
.profile-card .info,
.contact-info-item p,
.feature-item p,
.timeline-item p,
.news-meta,
.testimonial-author p,
.footer-bottom,
.topbar,
.helpline-box,
table th,
table td {
    text-align: revert;
}

/* ==========================================================================
   RESPONSIVE — TABLET (769px – 1024px)
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 20px;
    }

    .section {
        padding: 70px 0;
    }

    /* Hero — slightly tighter on tablets */
    .hero {
        min-height: 64vh;
    }

    .hero-inner {
        min-height: 64vh;
        padding: 80px 0 110px;
    }

    .hero-title {
        font-size: clamp(34px, 5vw, 54px);
    }

    .hero-text {
        font-size: 17px;
    }

    /* Cards / grids — balanced 2-up layout on tablets */
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .dept-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    /* Footer — 2 columns on tablets */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }

    /* Forms */
    .form-card {
        padding: 32px;
    }

    /* Section headings scale */
    .section-title {
        font-size: clamp(26px, 3.6vw, 38px);
    }
}

/* ==========================================================================
   RESPONSIVE — MOBILE (≤ 768px)
   Strengthens the existing 768px breakpoint without changing the UI.
   ========================================================================== */
@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }

    /* Topbar — stack neatly */
    .topbar {
        font-size: 12px;
        padding: 6px 0;
    }

    .topbar-info {
        gap: 12px;
        justify-content: center;
        font-size: 12px;
    }

    .topbar-actions {
        justify-content: center;
        gap: 6px;
    }

        .topbar-actions a {
            padding: 3px 10px;
            font-size: 11px;
        }

    /* Header */
    .header-main {
        gap: 12px;
        padding: 10px 0;
    }

    .logo-mark {
        width: 52px;
        height: 52px;
        font-size: 17px;
    }

    .logo-text h1 {
        font-size: 18px;
    }

    .logo-text p {
        font-size: 10px;
    }

    /* Hero */
    .hero {
        min-height: auto;
    }

    .hero-inner {
        min-height: auto;
        padding: 70px 0 100px;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-title {
        font-size: clamp(28px, 7vw, 36px);
        line-height: 1.15;
    }

    .hero-text {
        font-size: 15px;
        line-height: 1.55;
    }

    .hero-eyebrow {
        font-size: 11px;
        letter-spacing: 2px;
        margin-bottom: 18px;
    }

    .hero-buttons {
        gap: 10px;
    }

    .btn {
        padding: 12px 22px;
        font-size: 13px;
    }

    /* Section heads */
    .section-head {
        margin-bottom: 36px;
    }

    .section-title {
        font-size: clamp(24px, 6vw, 32px);
    }

    .section-text {
        font-size: 15px;
    }

    .eyebrow {
        font-size: 11px;
        letter-spacing: 2px;
    }

    /* About */
    .about-grid {
        gap: 32px;
    }

    .about-badge {
        padding: 14px 18px;
        bottom: 14px;
        left: 14px;
    }

        .about-badge .num {
            font-size: 32px;
        }

        .about-badge .lbl {
            font-size: 11px;
        }

    /* Cards / grids */
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .dept-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .program-card .body {
        padding: 18px;
    }

    .program-card h3 {
        font-size: 18px;
    }

    /* Stats */
    .stats {
        padding: 50px 0;
    }

    .stats-grid {
        gap: 24px;
    }

    .stat-item .lbl {
        font-size: 12px;
        letter-spacing: 1.5px;
    }

    /* Marquee */
    .marquee {
        padding: 20px 0;
    }

    .marquee-item {
        font-size: 22px;
        gap: 40px;
    }

    .marquee-wrap {
        gap: 40px;
    }

    /* Testimonials */
    .testimonial-card {
        padding: 28px 22px;
    }

        .testimonial-card blockquote {
            font-size: 18px;
            line-height: 1.5;
        }

        .testimonial-card::before {
            font-size: 100px;
            right: 16px;
        }

    /* News */
    .news-card .body {
        padding: 18px;
    }

    .news-card h3 {
        font-size: 17px;
    }

    /* CTA */
    .cta {
        padding: 60px 0;
    }

        .cta p {
            font-size: 16px;
        }

    /* Page banner */
    .page-banner {
        padding: 70px 0 56px;
    }

        .page-banner h1 {
            font-size: clamp(26px, 6.5vw, 38px);
        }

    .breadcrumb {
        font-size: 12px;
        flex-wrap: wrap;
    }

    /* Content pages */
    .content-section {
        padding: 50px 0;
    }

    .content-wrap {
        gap: 32px;
    }

    .content-main h2 {
        font-size: 24px;
    }

    .content-main h3 {
        font-size: 19px;
    }

    .content-main p,
    .content-main li {
        font-size: 15px;
        line-height: 1.7;
    }

    .content-main .lead {
        font-size: 16px;
    }

    .content-main blockquote {
        padding: 12px 18px;
        font-size: 16px;
        margin: 18px 0;
    }

    .content-main ul, .content-main ol {
        margin: 14px 0 18px 20px;
    }

    .sidebar-widget {
        padding: 22px;
        margin-bottom: 22px;
    }

    /* Tables — make them horizontally scrollable so layout never breaks */
    .content-main .table,
    .content-main table,
    .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Profile / faculty cards */
    .profile-card .info {
        padding: 16px;
    }

    .profile-card h3 {
        font-size: 16px;
    }

    /* Info cards */
    .info-card {
        padding: 22px;
    }

        .info-card h3 {
            font-size: 18px;
        }

    /* Forms */
    .form-card {
        padding: 24px;
    }

    .form-group label {
        font-size: 12px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 15px;
        padding: 11px 12px;
    }

    /* Contact */
    .contact-info-item {
        gap: 14px;
        padding: 16px 0;
    }

        .contact-info-item .ico {
            width: 44px;
            height: 44px;
            font-size: 17px;
        }

        .contact-info-item h4 {
            font-size: 16px;
        }

    /* Leader */
    .leader {
        gap: 28px;
    }

    .leader-name {
        font-size: 24px;
    }

    .leader-title {
        font-size: 12px;
        letter-spacing: 1.5px;
    }

    /* Timeline */
    .timeline-item {
        padding-left: 48px;
        margin-bottom: 24px;
    }

    .timeline-year {
        font-size: 19px;
    }

    .timeline-item h4 {
        font-size: 16px;
    }

    /* Footer */
    .site-footer {
        padding-top: 50px;
    }

    .footer-grid {
        padding-bottom: 32px;
    }

    .footer-col h4 {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .footer-bottom .container {
        justify-content: center;
        text-align: center;
    }

    /* Prevent images / iframes from busting layout */
    img, iframe, video, embed {
        max-width: 100%;
        height: auto;
    }

    iframe {
        width: 100%;
    }
}

/* ==========================================================================
   RESPONSIVE — SMALL MOBILE (≤ 480px)
   ========================================================================== */
@media (max-width: 480px) {
    .container {
        padding: 0 14px;
    }

    .section {
        padding: 48px 0;
    }

    .hero-inner {
        padding: 56px 0 90px;
    }

    .hero-title {
        font-size: 26px;
    }

    .hero-text {
        font-size: 14px;
    }

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

        .hero-buttons .btn {
            justify-content: center;
            width: 100%;
        }

    .btn {
        padding: 11px 18px;
        font-size: 12.5px;
    }

    /* Stats — 2 per row stays, just tighten */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    .stat-item .num {
        font-size: 34px;
    }

    /* Department / cards — single column on tiny phones */
    .dept-grid {
        grid-template-columns: 1fr;
    }

    /* Campus grid — single col */
    .campus-grid {
        grid-template-columns: 1fr;
    }

    .campus-item.tall {
        grid-row: auto;
        aspect-ratio: 4/3;
    }

    /* News meta wraps */
    .news-meta {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Form card padding */
    .form-card {
        padding: 20px;
    }

    /* Table cells */
    .table th, .table td {
        padding: 10px 12px;
        font-size: 13px;
    }

    /* Page banner */
    .page-banner {
        padding: 56px 0 44px;
    }

    /* Content typography */
    .content-main h2 {
        font-size: 22px;
    }

    .content-main h3 {
        font-size: 17px;
    }

    .content-main p,
    .content-main li {
        font-size: 14.5px;
    }

    /* Marquee speed/size */
    .marquee-item {
        font-size: 18px;
        gap: 28px;
    }

    .marquee-wrap {
        gap: 28px;
    }
}

/* ==========================================================================
   GLOBAL OVERFLOW SAFEGUARDS
   Stop horizontal scroll caused by any rogue element on small screens.
   ========================================================================== */
@media (max-width: 1024px) {
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }

    pre, code {
        white-space: pre-wrap;
        word-break: break-word;
    }
    /* Long unbroken strings (URLs, IDs) shouldn't overflow */
    .content-main {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* ==========================================================================
   MENU OVERFLOW HANDLING (desktop)
   When a dropdown or submenu would extend past the bottom of the viewport,
   the JS adds a `.flip-up` class to it. The CSS below then anchors that menu
   to the BOTTOM of its trigger instead of the top — so the menu opens
   upward and everything stays within the visible screen area.
   No page scroll required, no position shift, no clipping.
   ========================================================================== */
@media (min-width: 993px) {
    /* Top-level dropdown that needs to flip upward */
    .nav-item .dropdown.flip-up {
        top: auto;
        bottom: 100%;
        margin-bottom: 0;
    }
    /* Nested submenu that needs to flip upward — anchor its BOTTOM
       to the bottom of its parent <li> instead of its top */
    .nav-item .submenu.flip-up {
        top: auto;
        bottom: 0;
    }
    /* As a final fallback, if a menu is genuinely taller than the viewport
       (extremely rare), let it scroll internally rather than be cut off. */
    .nav-item .dropdown.scroll-y,
    .nav-item .submenu.scroll-y {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

        .nav-item .dropdown.scroll-y::-webkit-scrollbar,
        .nav-item .submenu.scroll-y::-webkit-scrollbar {
            width: 6px;
        }

        .nav-item .dropdown.scroll-y::-webkit-scrollbar-thumb,
        .nav-item .submenu.scroll-y::-webkit-scrollbar-thumb {
            background: #b88f33;
            border-radius: 3px;
        }

        .nav-item .dropdown.scroll-y::-webkit-scrollbar-track,
        .nav-item .submenu.scroll-y::-webkit-scrollbar-track {
            background: transparent;
        }
}


:root {
    --vm-gold: #c9a14a;
    --vm-gold-soft: rgba(201, 161, 74, 0.10);
    --vm-gold-border: rgba(201, 161, 74, 0.28);
    --vm-ink: #1a1a1a;
    --vm-ink-soft: #4a4a4a;
    --vm-cream: #faf7f1;
    --vm-cream-deep: #f3ecde;
    --vm-line: rgba(26, 26, 26, 0.08);
}

/* ---------- Hero with insignia ---------- */
.vm-hero {
    position: relative;
    background: radial-gradient(ellipse at top, rgba(201, 161, 74, 0.08), transparent 60%), linear-gradient(180deg, var(--vm-cream) 0%, #ffffff 100%);
    padding: 80px 0 64px;
    overflow: hidden;
}

    .vm-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 20% 30%, rgba(201, 161, 74, 0.06) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(201, 161, 74, 0.05) 0%, transparent 40%);
        pointer-events: none;
    }

.vm-hero-inner {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    padding: 0 24px;
}

.vm-insignia-frame {
    display: inline-block;
    margin-bottom: 36px;
    line-height: 0;
}

    .vm-insignia-frame img {
        max-width: 280px;
        width: 100%;
        height: auto;
        display: block;
    }

.vm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--vm-gold);
    margin-bottom: 18px;
}

    .vm-eyebrow::before,
    .vm-eyebrow::after {
        content: '';
        display: inline-block;
        width: 32px;
        height: 1px;
        background: var(--vm-gold);
        opacity: 0.6;
    }

.vm-hero h1 {
    font-size: clamp(32px, 4.5vw, 48px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--vm-ink);
    margin: 0 0 20px;
    letter-spacing: -0.01em;
}

    .vm-hero h1 em {
        font-style: italic;
        color: var(--vm-gold);
        font-weight: 600;
    }

.vm-hero-lead {
    font-size: 17px;
    line-height: 1.75;
    color: var(--vm-ink-soft);
    max-width: 720px;
    margin: 0 auto;
}

.vm-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--vm-ink-soft);
    margin-bottom: 32px;
}

    .vm-breadcrumb a {
        color: var(--vm-ink-soft);
        text-decoration: none;
        transition: color 0.2s;
    }

        .vm-breadcrumb a:hover {
            color: var(--vm-gold);
        }

    .vm-breadcrumb .sep {
        opacity: 0.4;
    }

    .vm-breadcrumb .current {
        color: var(--vm-ink);
        font-weight: 500;
    }

/* ---------- Insignia meaning symbols ---------- */
.vm-symbols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 760px;
    margin: 48px auto 0;
    padding: 32px 0 0;
    border-top: 1px solid var(--vm-line);
}

.vm-symbol {
    text-align: center;
}

.vm-symbol-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--vm-gold-soft);
    color: var(--vm-gold);
    font-size: 20px;
    margin-bottom: 12px;
}

.vm-symbol-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--vm-ink);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.vm-symbol-desc {
    font-size: 13px;
    color: var(--vm-ink-soft);
    margin-top: 4px;
    line-height: 1.5;
}

/* ---------- The dictum (verse blocks) ---------- */
.vm-verse {
    max-width: 760px;
    margin: 56px auto 0;
    padding: 44px 36px;
    background: linear-gradient(135deg, var(--vm-cream-deep) 0%, var(--vm-cream) 100%);
    border-radius: 4px;
    position: relative;
    text-align: center;
}

    .vm-verse::before,
    .vm-verse::after {
        content: '';
        position: absolute;
        width: 40px;
        height: 40px;
        border: 2px solid var(--vm-gold);
    }

    .vm-verse::before {
        top: -1px;
        left: -1px;
        border-right: none;
        border-bottom: none;
    }

    .vm-verse::after {
        bottom: -1px;
        right: -1px;
        border-left: none;
        border-top: none;
    }

.vm-verse-quote {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 60px;
    color: var(--vm-gold);
    line-height: 1;
    height: 36px;
    opacity: 0.5;
    margin-bottom: 8px;
}

.vm-verse img {
    max-width: 100%;
    height: auto;
    max-height: 80px;
    display: block;
    margin: 0 auto;
}

.vm-verse-meaning {
    margin-top: 22px;
    font-size: 15px;
    font-style: italic;
    color: var(--vm-ink-soft);
    line-height: 1.65;
}

.vm-verse-attr {
    margin-top: 12px;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--vm-gold);
    font-weight: 600;
}

/* ---------- Vision & Mission split layout ---------- */
.vm-split {
    background: #fff;
    padding: 50px 0;
    position: relative;
}

.vm-split-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.vm-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--vm-line);
    border-radius: 6px;
    padding: 56px 48px;
    margin-bottom: 32px;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

    .vm-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.12);
    }

    .vm-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, var(--vm-gold) 0%, transparent 100%);
    }

.vm-card-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 56px;
    align-items: start;
}

.vm-card-label {
    position: relative;
}

.vm-card-number {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 80px;
    font-weight: 400;
    line-height: 1;
    color: var(--vm-gold);
    opacity: 0.4;
    font-style: italic;
}

.vm-card-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--vm-gold);
    margin-top: 16px;
    margin-bottom: 12px;
}

.vm-card-title {
    font-size: clamp(28px, 3.5vw, 38px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--vm-ink);
    margin: 0;
    letter-spacing: -0.01em;
}

    .vm-card-title em {
        font-style: italic;
        color: var(--vm-gold);
        font-weight: 600;
    }

.vm-card-body {
    font-size: 16px;
    line-height: 1.8;
    color: var(--vm-ink-soft);
}

    .vm-card-body p {
        margin: 0 0 18px;
    }

        .vm-card-body p:last-child {
            margin-bottom: 0;
        }

    .vm-card-body strong {
        color: var(--vm-ink);
        font-weight: 600;
        background: linear-gradient(180deg, transparent 60%, var(--vm-gold-soft) 60%);
        padding: 0 2px;
    }

/* ---------- Pillars (Inspire / Prepare / Empower) ---------- */
.vm-pillars {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--vm-line);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.vm-pillar {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.vm-pillar-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--vm-gold);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.vm-pillar h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--vm-ink);
    margin: 4px 0 4px;
    letter-spacing: 0.02em;
}

.vm-pillar p {
    font-size: 13px;
    color: var(--vm-ink-soft);
    margin: 0;
    line-height: 1.6;
}

/* ---------- Values (Vision pillars) ---------- */
.vm-values {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 36px;
    padding-top: 32px;
    border-top: 1px solid var(--vm-line);
}

.vm-value {
    padding: 20px 0;
}

.vm-value-marker {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 13px;
    font-style: italic;
    color: var(--vm-gold);
    letter-spacing: 0.1em;
    margin-bottom: 6px;
}

.vm-value h4 {
    font-size: 17px;
    font-weight: 700;
    color: var(--vm-ink);
    margin: 0 0 8px;
}

.vm-value p {
    font-size: 14px;
    color: var(--vm-ink-soft);
    margin: 0;
    line-height: 1.65;
}

/* ---------- Vision Statement closing section ---------- */
.vm-statement {
    background: radial-gradient(ellipse at center, rgba(201, 161, 74, 0.08), transparent 70%), var(--vm-cream);
    padding: 100px 24px;
    text-align: center;
    position: relative;
}

.vm-statement-inner {
    max-width: 760px;
    margin: 0 auto;
}

.vm-statement .vm-eyebrow {
    margin-bottom: 24px;
}

.vm-statement-title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--vm-ink);
    margin: 0 0 40px;
    letter-spacing: -0.01em;
}

    .vm-statement-title em {
        font-style: italic;
        color: var(--vm-gold);
    }

.vm-statement-meaning {
    margin-top: 36px;
    font-size: 19px;
    line-height: 1.7;
    color: var(--vm-ink);
    font-weight: 400;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding: 0 32px;
}

    .vm-statement-meaning::before,
    .vm-statement-meaning::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 20px;
        height: 1px;
        background: var(--vm-gold);
        opacity: 0.6;
    }

    .vm-statement-meaning::before {
        left: 0;
    }

    .vm-statement-meaning::after {
        right: 0;
    }

/* ---------- In Practice grid ---------- */
.vm-practice {
    padding: 10px 0;
    background: #fff;
}

.vm-practice-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.vm-practice-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 64px;
}

    .vm-practice-head h2 {
        font-size: clamp(28px, 3.5vw, 38px);
        font-weight: 700;
        color: var(--vm-ink);
        margin: 12px 0 16px;
        letter-spacing: -0.01em;
    }

        .vm-practice-head h2 em {
            font-style: italic;
            color: var(--vm-gold);
        }

    .vm-practice-head p {
        font-size: 16px;
        line-height: 1.7;
        color: var(--vm-ink-soft);
    }

.vm-practice-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--vm-line);
    border: 1px solid var(--vm-line);
    border-radius: 4px;
    overflow: hidden;
}

.vm-practice-item {
    background: #fff;
    padding: 40px 32px;
    transition: background 0.3s ease;
    position: relative;
}

    .vm-practice-item:hover {
        background: var(--vm-cream);
    }

        .vm-practice-item:hover .vm-practice-icon {
            transform: scale(1.1);
            background: var(--vm-gold);
            color: #fff;
        }

.vm-practice-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--vm-gold-soft);
    color: var(--vm-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.vm-practice-item h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--vm-ink);
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}

.vm-practice-item p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--vm-ink-soft);
    margin: 0;
}

/* ---------- Reveal animation ---------- */
.vm-reveal {
    opacity: 0;
    transform: translateY(20px);
    animation: vmFadeUp 0.8s ease forwards;
}

.vm-reveal-1 {
    animation-delay: 0.1s;
}

.vm-reveal-2 {
    animation-delay: 0.2s;
}

.vm-reveal-3 {
    animation-delay: 0.3s;
}

.vm-reveal-4 {
    animation-delay: 0.4s;
}

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

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .vm-card-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .vm-card {
        padding: 40px 28px;
    }

    .vm-card-number {
        font-size: 60px;
    }

    .vm-pillars {
        grid-template-columns: 1fr;
        gap: 20px;
    }

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

    .vm-symbols {
        grid-template-columns: 1fr;
        gap: 20px;
    }

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

    .vm-statement {
        padding: 60px 24px;
    }

    .vm-statement-meaning {
        padding: 0 16px;
        font-size: 17px;
    }

        .vm-statement-meaning::before,
        .vm-statement-meaning::after {
            display: none;
        }

    .vm-verse {
        padding: 32px 22px;
    }
}

@media (max-width: 560px) {
    .vm-practice-grid {
        grid-template-columns: 1fr;
    }

    .vm-insignia-frame img {
        max-width: 220px;
    }

    .vm-hero {
        padding: 56px 0 48px;
    }
}

/* ========== Leader-message layout (shared style across the 3 message pages) ========== */
.message-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 36px;
    align-items: start;
}

.message-leader {
    position: sticky;
    top: 24px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(0,0,0,.08);
}

.message-photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    background: linear-gradient(135deg, #1a2c4e 0%, #2a4178 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

    .message-photo::after {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        height: 55%;
        background: linear-gradient(to top, rgba(26,44,78,.08) 0%, transparent 100%);
        pointer-events: none;
    }

    .message-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        filter: saturate(1.05) contrast(1.02);
    }

.message-meta {
    padding: 22px 22px 24px;
    border-top: 3px solid #8b1113;
    text-align: center;
}

.message-role-badge {
    display: inline-block;
    background: #fdf2f2;
    color: #8b1113;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.message-meta h3 {
    margin: 0 0 6px;
    font-size: 1.18rem;
    color: #1a2c4e;
    font-weight: 700;
    line-height: 1.3;
}

.message-creds {
    margin: 0 0 10px;
    color: #666;
    font-size: .92rem;
    font-style: italic;
    line-height: 1.4;
}

.message-org {
    margin: 0;
    color: #1a2c4e;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.4;
}

.message-body {
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 14px;
    padding: 36px 38px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}

    .message-body .eyebrow {
        display: block;
        margin-bottom: 8px;
    }

    .message-body .section-title {
        margin: 0 0 18px;
    }

    .message-body .lead {
        font-size: 1.1rem;
        line-height: 1.75;
        color: #1a2c4e;
        font-weight: 500;
        margin: 0 0 18px;
        padding-left: 18px;
        border-left: 4px solid #8b1113;
    }

    .message-body p {
        line-height: 1.85;
        margin: 14px 0;
        color: #333;
    }

        .message-body p strong {
            color: #1a2c4e;
        }

.message-signature {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px dashed rgba(0,0,0,.12);
}

    .message-signature p {
        margin: 6px 0;
        line-height: 1.55;
    }

@media (max-width:880px) {
    .message-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .message-leader {
        position: static;
        max-width: 340px;
        margin: 0 auto;
    }

    .message-body {
        padding: 28px 24px;
    }
}

/*nep(2020)*/

.course-info-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 10px;
    overflow: hidden;
    font-size: 1rem;
}

    .course-info-table th,
    .course-info-table td {
        border: 1px solid rgba(0,0,0,.12);
        padding: 16px 20px;
        text-align: left;
        vertical-align: top;
        line-height: 1.7;
    }

    .course-info-table thead th {
        background: #f5f7fa;
        font-weight: 700;
        color: #1a1a1a;
        font-size: 1.02rem;
        letter-spacing: .2px;
    }

    .course-info-table tbody td:first-child {
        font-weight: 600;
        color: #1a1a1a;
    }

    .course-info-table .eligibility-list {
        margin: 0;
        padding-left: 0;
        list-style: none;
    }

        .course-info-table .eligibility-list li {
            margin-bottom: 10px;
            padding-left: 0;
            font-weight: 400;
        }

            .course-info-table .eligibility-list li:last-child {
                margin-bottom: 0;
            }

.section-head-left {
    text-align: left;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    align-items: flex-start;
}

.table-caption {
    font-size: 1.05rem;
    font-weight: 700;
    color: #7a1f2b;
    margin: 0 0 12px;
}

.table-scroll {
    overflow-x: auto;
}

.credit-table {
    min-width: 760px;
}

    .credit-table th,
    .credit-table td {
        padding: 12px 14px;
        text-align: center;
    }

    .credit-table tbody td:first-child {
        text-align: left;
    }

.pdf-frame-wrap {
    width: 100%;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    background: #fff;
}

.pdf-frame {
    width: 100%;
    height: 760px;
    border: 0;
    display: block;
}

@media (max-width:720px) {
    .course-info-table:not(.credit-table),
    .course-info-table:not(.credit-table) thead,
    .course-info-table:not(.credit-table) tbody,
    .course-info-table:not(.credit-table) th,
    .course-info-table:not(.credit-table) td,
    .course-info-table:not(.credit-table) tr {
        display: block;
    }

        .course-info-table:not(.credit-table) thead {
            display: none;
        }

        .course-info-table:not(.credit-table) tbody td {
            border: none;
            border-bottom: 1px solid rgba(0,0,0,.08);
            padding: 10px 16px;
            width: auto;
        }

            .course-info-table:not(.credit-table) tbody td:before {
                content: attr(data-label);
                display: block;
                font-weight: 600;
                color: #888;
                font-size: .82rem;
                text-transform: uppercase;
                letter-spacing: .5px;
                margin-bottom: 4px;
            }

    .pdf-frame {
        height: 520px;
    }
}

/* ============================================================
   GLOBAL PERFORMANCE FIXES
   ============================================================ */
html {
    scroll-behavior: smooth;
}

.cv-auto { /* intentionally empty */
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   CINEMATIC HERO — Auto-rotating slideshow
   ============================================ */
.hero-cinematic {
    position: relative;
    min-height: calc(100vh-300px);
    overflow: hidden;
    background: #0a1428;
    isolation: isolate;
    contain: layout paint;
}

.hero-slideshow {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1.6s ease-in-out;
    will-change: opacity, transform;
}

    .hero-slide.is-active {
        opacity: 1;
        animation: hero-slide-zoom 8s ease-in-out forwards;
    }

@keyframes hero-slide-zoom {
    from {
        transform: scale(1.06);
    }

    to {
        transform: scale(1.16);
    }
}

.hero-overlay-cinematic {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(105deg, rgb(10 20 40 / 49%) 0%, rgb(10 20 40 / 44%) 35%, rgba(10, 20, 40, 0.55) 65%, rgba(10, 20, 40, 0.45) 100%), linear-gradient(180deg, rgba(10, 20, 40, 0.35) 0%, transparent 30%, transparent 70%, rgb(10 20 40 / 50%) 100%);
    pointer-events: none;
}

.hero-cinematic .hero-inner {
    position: relative;
    z-index: 5;
    min-height: calc(100vh - 300px);
    display: flex;
    align-items: center;
    padding: 70px 0 10px;
}

    .hero-cinematic .hero-inner .container {
        width: 100%;
    }

.hero-cinematic .hero-content {
    max-width: 720px;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
    padding-left: 40px;
}

.hero-cinematic .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #ffc107;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 24px;
    padding: 8px 18px;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 50px;
}

.dot-pulse {
    width: 8px;
    height: 8px;
    background: #ffc107;
    border-radius: 50%;
}

.hero-cinematic .hero-title {
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 24px;
    letter-spacing: -0.5px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

    .hero-cinematic .hero-title em {
        font-style: normal;
        color: #ffc107;
        position: relative;
        display: inline-block;
    }

        .hero-cinematic .hero-title em::after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, #ffc107, transparent);
            border-radius: 2px;
        }

.hero-cinematic .hero-text {
    font-size: 17px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 36px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    max-width: 620px;
}

.hero-cinematic .hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-cinematic .btn {
    padding: 16px 32px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    letter-spacing: 0.3px;
}

.hero-cinematic .btn-primary {
    background: #1a1a1a;
    color: #d4a847;
    border: 2px solid #d4a847;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

    .hero-cinematic .btn-primary:hover {
        background: #d4a847;
        color: #1a1a1a;
        transform: translateY(-3px);
        box-shadow: 0 15px 40px rgba(212, 168, 71, 0.5);
    }

.hero-cinematic .btn-outline {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

    .hero-cinematic .btn-outline:hover {
        background: #fff;
        color: #1a1a1a;
        border-color: #fff;
        transform: translateY(-3px);
    }

/* ============================================
   LIGHTBOX
   ============================================ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(8, 8, 10, 0.96);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    user-select: none;
}

    .lightbox.is-open {
        display: flex;
        opacity: 1;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

.lightbox-content {
    position: relative;
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.lightbox-img {
    max-width: 92vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: #fff;
}

    .lightbox-img.is-loaded {
        opacity: 1;
        transform: scale(1);
    }

.lightbox-spinner {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 4px solid rgba(212, 168, 71, 0.2);
    border-top-color: #d4a847;
    border-radius: 50%;
    animation: lightbox-spin 0.8s linear infinite;
    opacity: 1;
    transition: opacity 0.2s ease;
}

    .lightbox-spinner.is-hidden {
        opacity: 0;
    }

@keyframes lightbox-spin {
    to {
        transform: rotate(360deg);
    }
}

.lightbox-caption {
    margin-top: 18px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    max-width: 800px;
    padding: 0 20px;
    letter-spacing: 0.3px;
}

.lightbox-counter {
    margin-top: 6px;
    color: rgba(212, 168, 71, 0.85);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.lightbox-close {
    position: fixed;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    z-index: 100001;
}

    .lightbox-close:hover {
        background: #1a1a1a;
        color: #d4a847;
        border-color: #d4a847;
        transform: rotate(90deg);
    }

.lightbox-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    z-index: 100000;
}

    .lightbox-arrow:hover:not(:disabled) {
        background: #d4a847;
        color: #1a1a1a;
        border-color: #d4a847;
        transform: translateY(-50%) scale(1.08);
    }

    .lightbox-arrow:disabled {
        opacity: 0.25;
        cursor: not-allowed;
    }

.lightbox-prev {
    left: 24px;
}

.lightbox-next {
    right: 24px;
}

@media (max-width: 768px) {
    .lightbox-close {
        top: 14px;
        right: 14px;
        width: 42px;
        height: 42px;
        font-size: 15px;
    }

    .lightbox-arrow {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .lightbox-prev {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }

    .lightbox-caption {
        font-size: 14px;
        margin-top: 14px;
    }
}

/* ============================================================
   YOUTUBE VIDEO MODAL — "Explore the College"
   ============================================================ */
.yt-modal {
    position: fixed;
    inset: 0;
    z-index: 100002;
    background: rgba(8, 12, 24, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .yt-modal.is-open {
        display: flex;
        opacity: 1;
    }

.yt-modal-inner {
    position: relative;
    width: 100%;
    max-width: 1000px;
}

.yt-modal-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    background: #000;
    transform: scale(0.94);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
}

.yt-modal.is-open .yt-modal-frame {
    transform: scale(1);
    opacity: 1;
}

.yt-modal-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.yt-modal-close {
    position: fixed;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 100003;
}

    .yt-modal-close:hover {
        background: #d4a847;
        color: #1a2c4e;
        border-color: #d4a847;
        transform: rotate(90deg);
    }

@media (max-width: 768px) {
    .yt-modal {
        padding: 16px;
    }

    .yt-modal-close {
        top: 14px;
        right: 14px;
        width: 42px;
        height: 42px;
        font-size: 15px;
    }
}

/* "play" icon spacing inside the pillars button */
.pc-btn .fa-play {
    font-size: 12px;
}

/* ============================================
   NAV ITEM HIGHLIGHT
   ============================================ */
.main-nav .nav-item.nav-item--highlight {
    position: relative;
    z-index: 100;
}

    .main-nav .nav-item.nav-item--highlight > a {
        background: rgba(212, 168, 71, 0.22) !important;
        color: #d4a847 !important;
        border-bottom-color: #d4a847 !important;
        animation: nav-pulse 0.9s ease-in-out 3;
    }

        .main-nav .nav-item.nav-item--highlight > a span,
        .main-nav .nav-item.nav-item--highlight > a {
            color: #d4a847 !important;
        }

@keyframes nav-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(212, 168, 71, 0.55);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(212, 168, 71, 0);
    }
}

.main-nav .dropdown.dropdown--force-open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    animation: dropdown-fade-in 0.35s ease;
}

@keyframes dropdown-fade-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

@media (max-width: 768px) {
    .hero-overlay-cinematic {
        background: linear-gradient(180deg, rgba(10, 20, 40, 0.85) 0%, rgba(10, 20, 40, 0.7) 60%, rgba(10, 20, 40, 0.85) 100%);
    }

    .hero-cinematic .hero-inner {
        padding: 100px 0 120px;
    }

    .hero-cinematic .hero-content {
        text-align: center;
        max-width: 100%;
        padding-left: 0;
        margin: 0 auto;
    }

    .hero-cinematic .hero-buttons {
        justify-content: center;
    }
}

/* ============================================================
   NOTICE BOARD
   ============================================================ */
.notice-board-section {
    padding: 90px 0 80px;
    background: linear-gradient(180deg, #f8f9fc 0%, #ffffff 100%);
    position: relative;
}

    .notice-board-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 280px;
        background: radial-gradient(ellipse at top, rgba(26, 44, 78, 0.04) 0%, transparent 70%);
        pointer-events: none;
    }

    .notice-board-section .container {
        position: relative;
        z-index: 2;
    }

.notice-board-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 45px;
    flex-wrap: wrap;
    gap: 25px;
}

    .notice-board-head .nb-head-left {
        flex: 1;
        min-width: 280px;
    }

    .notice-board-head .eyebrow {
        color: #8b1113;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 2px;
        font-weight: 700;
        margin-bottom: 12px;
        display: inline-block;
    }

    .notice-board-head .section-title {
        font-size: 42px;
        font-weight: 800;
        color: #1a2c4e;
        margin: 0 0 14px;
        line-height: 1.15;
        letter-spacing: -0.5px;
    }

.nb-subtitle {
    color: #5a6473;
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
    max-width: 640px;
}

.nb-view-all {
    color: #8b1113;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border: 2px solid #8b1113;
    border-radius: 50px;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    font-size: 14px;
    white-space: nowrap;
}

    .nb-view-all:hover {
        background: #8b1113;
        color: #fff;
        transform: translateX(5px);
        box-shadow: 0 8px 20px rgba(139, 17, 19, 0.25);
    }

.notice-board-fullwidth {
    background: #fff;
    border-radius: 24px;
    border: 1px solid #eef0f5;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(26, 44, 78, 0.06);
}

.nl-tabs {
    display: flex;
    background: linear-gradient(135deg, #1a2c4e 0%, #0f1d36 100%);
    padding: 14px;
    gap: 8px;
    border-bottom: 1px solid #eef0f5;
    overflow-x: auto;
    scrollbar-width: none;
}

    .nl-tabs::-webkit-scrollbar {
        display: none;
    }

.nl-tab {
    flex: 1;
    min-width: 130px;
    background: transparent;
    border: none;
    padding: 14px 18px;
    font-weight: 600;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    border-radius: 12px;
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
}

    .nl-tab i {
        font-size: 13px;
    }

    .nl-tab:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.06);
    }

    .nl-tab.active {
        background: #ffc107;
        color: #1a2c4e;
        box-shadow: 0 6px 16px rgba(255, 193, 7, 0.35);
    }

.nl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.nl-card {
    padding: 30px 28px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: background 0.3s ease, transform 0.3s ease;
    border-right: 1px solid #eef0f5;
    border-bottom: 1px solid #eef0f5;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
}

    .nl-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, #8b1113, #ffc107);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
    }

    .nl-card:hover::before {
        transform: scaleX(1);
    }

    .nl-card:hover {
        background: #f8f9fc;
        transform: translateY(-2px);
    }

        .nl-card:hover .nl-readmore {
            color: #8b1113;
            gap: 12px;
        }

    .nl-card:nth-child(3n) {
        border-right: none;
    }

.nl-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.nl-date-box {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #1a2c4e 0%, #0f1d36 100%);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(26, 44, 78, 0.2);
}

    .nl-date-box .d {
        font-size: 24px;
        font-weight: 800;
        color: #ffc107;
        line-height: 1;
    }

    .nl-date-box .m {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.85);
        letter-spacing: 1.5px;
        margin-top: 4px;
    }

.nl-cat {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 5px 12px;
    border-radius: 50px;
    text-transform: uppercase;
    align-self: center;
}

    .nl-cat.admission {
        background: #e3f2fd;
        color: #1565c0;
    }

    .nl-cat.event {
        background: #fff3e0;
        color: #e65100;
    }

    .nl-cat.exam {
        background: #fce4ec;
        color: #c2185b;
    }

    .nl-cat.other {
        background: #ede7f6;
        color: #5e35b1;
    }

.nl-new-tag {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 6px 12px;
    border-radius: 0 0 0 10px;
    box-shadow: 0 4px 12px rgba(229, 57, 53, 0.35);
    animation: new-tag-pulse 2.5s ease-in-out infinite;
}

@keyframes new-tag-pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }
}

.nl-card .nl-new-tag ~ .nl-card-top {
    margin-top: 6px;
}

.nl-card h4 {
    font-size: 17px;
    font-weight: 700;
    color: #1a2c4e;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nl-card p {
    font-size: 14px;
    color: #5a6473;
    margin: 0;
    line-height: 1.6;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nl-readmore {
    font-size: 13px;
    font-weight: 700;
    color: #1a2c4e;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease, gap 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 6px;
}

/* Image notices (NDLI etc.) — open in the lightbox, so show a zoom cursor */
.nl-card-image {
    cursor: zoom-in;
}

    .nl-card-image .nl-readmore i {
        font-size: 11px;
    }

.nl-card.is-hidden {
    display: none;
}

.nl-empty {
    display: none;
    padding: 60px 30px;
    text-align: center;
    color: #5a6473;
}

    .nl-empty.is-visible {
        display: block;
    }

    .nl-empty i {
        display: block;
        font-size: 38px;
        color: #c8cdda;
        margin-bottom: 14px;
    }

    .nl-empty p {
        margin: 0;
        font-size: 15px;
        font-weight: 500;
    }

/* ============================================
   ALUMNI SECTION
   ============================================ */
.alumni-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #0f1d36 0%, #1a2c4e 50%, #253d6b 100%);
    position: relative;
    overflow: hidden;
}

.alumni-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at 10% 20%, rgba(255, 193, 7, 0.08) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(139, 17, 19, 0.15) 0%, transparent 40%);
    pointer-events: none;
}

.alumni-section .container {
    position: relative;
    z-index: 2;
}

.section-head {
    text-align: center;
    margin-bottom: 60px;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.eyebrow-light {
    color: #ffc107 !important;
}

.section-title-light {
    color: #fff !important;
}

.section-subtitle {
    color: rgba(255, 255, 255, 0.75);
    font-size: 17px;
    line-height: 1.7;
    margin-top: 18px;
}

.alumni-slider-wrap {
    position: relative;
    margin-bottom: 60px;
    padding: 0 50px;
}

.alumni-slider {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 10px 5px 30px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .alumni-slider::-webkit-scrollbar {
        display: none;
    }

.alumni-slide {
    flex: 0 0 320px;
    scroll-snap-align: start;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

    .alumni-slide:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 55px rgba(0, 0, 0, 0.45);
    }

.as-image {
    position: relative;
    height: 280px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a2c4e 0%, #0f1d36 100%);
}

    .as-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        transition: transform 0.5s ease;
    }

.alumni-slide:hover .as-image img {
    transform: scale(1.06);
}

.as-image.no-image::before {
    content: attr(data-initials);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 70px;
    font-weight: 800;
    color: #ffc107;
    letter-spacing: 4px;
    background: linear-gradient(135deg, #1a2c4e 0%, #0f1d36 100%);
}

.as-image.no-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 30% 30%, rgba(255, 193, 7, 0.1) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(139, 17, 19, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.as-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(255, 193, 7, 0.95);
    color: #1a2c4e;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.as-body {
    padding: 26px 24px 28px;
}

    .as-body h4 {
        font-size: 19px;
        color: #1a2c4e;
        margin: 0 0 6px;
        font-weight: 800;
        line-height: 1.3;
        min-height: 50px;
    }

.as-role {
    display: block;
    color: #8b1113;
    font-weight: 700;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 14px;
    min-height: 32px;
}

.as-body p {
    color: #5a6473;
    font-size: 13.5px;
    line-height: 1.65;
    margin: 0;
    padding-left: 14px;
    border-left: 3px solid #ffc107;
}

    .as-body p em {
        color: #1a2c4e;
        font-style: italic;
        font-weight: 600;
    }

.alumni-nav {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    color: #1a2c4e;
    border: none;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    z-index: 10;
    transition: background 0.3s ease, transform 0.3s ease;
}

    .alumni-nav:hover {
        background: #ffc107;
        transform: translateY(-50%) scale(1.1);
    }

    .alumni-nav:disabled {
        opacity: 0.3;
        cursor: not-allowed;
        transform: translateY(-50%) !important;
    }

.alumni-prev {
    left: 0;
}

.alumni-next {
    right: 0;
}

.alumni-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.alumni-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    cursor: pointer;
    transition: background 0.3s ease, width 0.3s ease, border-radius 0.3s ease;
    padding: 0;
}

    .alumni-dot.active {
        background: #ffc107;
        width: 28px;
        border-radius: 5px;
    }

    .alumni-dot:hover {
        background: rgba(255, 193, 7, 0.6);
    }

.alumni-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px 50px;
    flex-wrap: wrap;
    gap: 25px;
}

.as-item {
    text-align: center;
    flex: 1;
    min-width: 180px;
}

.as-num {
    display: block;
    font-size: 38px;
    font-weight: 800;
    color: #ffc107;
    line-height: 1;
    margin-bottom: 8px;
}

.as-lbl {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.as-divider {
    width: 1px;
    height: 50px;
    background: rgba(255, 255, 255, 0.15);
}

.as-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #8b1113;
    color: #fff;
    padding: 16px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
    font-size: 14px;
}

    .as-btn:hover {
        background: #ffc107;
        color: #1a2c4e;
        transform: translateX(5px);
    }

/* ============================================================
   PILLARS OF EXCELLENCE
   ============================================================ */
.pillars-section {
    padding: 100px 0;
    background: #f8f9fc;
    position: relative;
    overflow: hidden;
}

    .pillars-section::before {
        content: '';
        position: absolute;
        top: -120px;
        right: -120px;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(212, 168, 71, 0.10) 0%, transparent 70%);
        pointer-events: none;
    }

    .pillars-section::after {
        content: '';
        position: absolute;
        bottom: -150px;
        left: -120px;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(139, 17, 19, 0.07) 0%, transparent 70%);
        pointer-events: none;
    }

    .pillars-section .container {
        position: relative;
        z-index: 2;
    }

    .pillars-section .section-title {
        color: #1a2c4e;
    }

    .pillars-section .section-subtitle {
        color: #5a6473;
    }

    .pillars-section .eyebrow {
        color: #8b1113;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 2px;
        font-weight: 700;
        display: inline-block;
        margin-bottom: 10px;
    }

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
    margin-bottom: 60px;
}

.pillar-card {
    background: #fff;
    border-radius: 18px;
    padding: 36px 26px 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(26, 44, 78, 0.06);
    border: 1px solid #eef0f5;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .pillar-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #8b1113, #ffc107);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
    }

    .pillar-card:hover::before {
        transform: scaleX(1);
    }

    .pillar-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 22px 45px rgba(26, 44, 78, 0.14);
        border-color: rgba(255, 193, 7, 0.4);
    }

        .pillar-card:hover .pillar-icon {
            background: linear-gradient(135deg, #ffc107 0%, #d4a847 100%);
            color: #1a2c4e;
            transform: scale(1.06) rotate(-5deg);
        }

.pillar-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #1a2c4e 0%, #0f1d36 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffc107;
    font-size: 28px;
    margin: 0 auto 22px;
    transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease;
}

.pillar-card h3 {
    font-size: 18px;
    font-weight: 800;
    color: #1a2c4e;
    margin: 0 0 14px;
    line-height: 1.3;
    letter-spacing: -0.2px;
}

.pillar-card p {
    font-size: 13.5px;
    color: #5a6473;
    line-height: 1.65;
    margin: 0;
    flex-grow: 1;
}

    .pillar-card p em {
        color: #8b1113;
        font-style: italic;
        font-weight: 600;
    }

.pillars-cta {
    background: linear-gradient(135deg, #1a2c4e 0%, #0f1d36 100%);
    border-radius: 20px;
    padding: 45px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    color: #fff;
    position: relative;
    overflow: hidden;
}

    .pillars-cta::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -100px;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(255, 193, 7, 0.10) 0%, transparent 70%);
        border-radius: 50%;
    }

.pc-text {
    flex: 1;
    min-width: 280px;
    position: relative;
    z-index: 2;
}

    .pc-text h3 {
        font-size: 26px;
        font-weight: 800;
        color: #fff;
        margin: 0 0 10px;
    }

    .pc-text p {
        color: rgba(255, 255, 255, 0.8);
        margin: 0;
        font-size: 15px;
    }

.pc-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #ffc107;
    color: #1a2c4e;
    padding: 18px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
    position: relative;
    z-index: 2;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

    .pc-btn:hover {
        background: #8b1113;
        color: #fff;
        transform: translateX(5px);
    }

@media (max-width: 1100px) {
    .pillars-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 720px) {
    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .pillar-card {
        padding: 30px 22px 26px;
    }

    .pillars-cta {
        padding: 35px 30px;
        text-align: center;
    }

    .pc-text {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .pillars-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   STATS PREMIUM
   ============================================================ */
.stats-premium {
    position: relative;
    padding: 100px 0 110px;
    background: linear-gradient(135deg, #1a2c4e 0%, #0f1d36 50%, #2a1a1a 100%);
    overflow: hidden;
    isolation: isolate;
}

.stats-bg-shapes {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.sp-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.5;
}

.sp-shape-1 {
    width: 380px;
    height: 380px;
    top: -150px;
    left: -120px;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.10) 0%, transparent 70%);
}

.sp-shape-2 {
    width: 460px;
    height: 460px;
    bottom: -180px;
    right: -160px;
    background: radial-gradient(circle, rgba(139, 17, 19, 0.18) 0%, transparent 70%);
}

.stats-premium .container {
    position: relative;
    z-index: 2;
}

.stats-head {
    text-align: center;
    margin-bottom: 60px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.stats-eyebrow {
    display: inline-block;
    color: #ffc107;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 7px 18px;
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.25);
    border-radius: 50px;
    margin-bottom: 18px;
}

.stats-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.5px;
}

    .stats-title em {
        font-style: normal;
        color: #ffc107;
        position: relative;
        display: inline-block;
    }

        .stats-title em::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, #ffc107, transparent);
            border-radius: 2px;
        }

.stats-grid-premium {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.stat-item-premium {
    position: relative;
    padding: 38px 28px 32px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    text-align: center;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    overflow: hidden;
}

    .stat-item-premium::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, #ffc107, transparent);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.4s ease;
    }

    .stat-item-premium:hover {
        background: rgba(255, 255, 255, 0.07);
        border-color: rgba(255, 193, 7, 0.3);
        transform: translateY(-6px);
    }

        .stat-item-premium:hover::before {
            transform: scaleX(1);
        }

        .stat-item-premium:hover .sp-icon {
            background: rgba(255, 193, 7, 0.18);
            border-color: rgba(255, 193, 7, 0.5);
            color: #ffc107;
            transform: scale(1.05);
        }

.sp-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 193, 7, 0.10);
    border: 1px solid rgba(255, 193, 7, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffc107;
    font-size: 22px;
    margin: 0 auto 22px;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.sp-num-wrap {
    margin-bottom: 8px;
}

.sp-num {
    display: inline-block;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 52px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -1px;
    background: linear-gradient(135deg, #fff 0%, #ffc107 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: filter 0.3s ease;
    min-width: 1ch;
}

    .sp-num.is-counting {
        filter: drop-shadow(0 0 12px rgba(255, 193, 7, 0.35));
    }

.stat-item-premium:has(.sp-num.is-counting) .sp-icon {
    background: rgba(255, 193, 7, 0.18);
    border-color: rgba(255, 193, 7, 0.5);
    color: #ffc107;
}

.sp-num.is-counted {
    animation: sp-num-settle 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes sp-num-settle {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.sp-lbl {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.sp-sub {
    display: block;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
    font-weight: 400;
}

@media (max-width: 992px) {
    .stats-grid-premium {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .stats-premium {
        padding: 80px 0 90px;
    }

    .stats-head {
        margin-bottom: 40px;
    }

    .sp-num {
        font-size: 44px;
    }
}

@media (max-width: 540px) {
    .stats-grid-premium {
        grid-template-columns: 1fr;
    }

    .stat-item-premium {
        padding: 30px 24px;
    }

    .sp-num {
        font-size: 40px;
    }
}

/* ============================================
   PREMIUM CTA V2
   ============================================ */
.cta-premium-v2 {
    padding: 80px 0;
    background: #fff;
}

.cta-wrapper-v2 {
    display: flex;
    background: #1a2c4e;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}

.cta-visual {
    flex: 1;
    position: relative;
    min-height: 400px;
}

    .cta-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.cta-experience-tag {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: #8b1113;
    color: #fff;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

    .cta-experience-tag strong {
        display: block;
        font-size: 32px;
        line-height: 1;
        margin-bottom: 5px;
    }

    .cta-experience-tag span {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

.cta-info-v2 {
    flex: 1.2;
    padding: 70px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cta-eyebrow {
    text-transform: uppercase;
    color: #ffc107;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.cta-heading-v2 {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 25px;
    color: #fff !important;
}

    .cta-heading-v2 span {
        color: #ffc107;
    }

.cta-para {
    font-size: 18px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 40px;
    line-height: 1.6;
}

.cta-action-grid {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.cta-main-btn {
    background: #8b1113;
    color: #fff;
    padding: 18px 35px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

    .cta-main-btn:hover {
        background: #ffc107;
        color: #000;
        transform: translateY(-3px);
    }

.cta-sec-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    padding: 18px 30px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.3s ease, color 0.3s ease;
}

    .cta-sec-btn:hover {
        background: #fff;
        color: #1a2c4e;
    }

/* ============================================================
   ACADEMIC SECTION — Interactive image stack
   ============================================================ */
.academic-flex {
    display: flex;
    align-items: center;
    gap: 80px;
}

.academic-content {
    flex: 1;
}

.academic-checklist {
    list-style: none;
    padding: 0;
    margin: 30px 0;
}

    .academic-checklist li {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 15px;
        font-weight: 600;
        color: #1a2c4e;
    }

    .academic-checklist i {
        color: #8b1113;
        font-size: 18px;
    }

/* Refined, smaller gallery */
.academic-gallery {
    flex: 1;
    position: relative;
    perspective: 1400px;
}

.gallery-stack {
    position: relative;
    height: 420px;
    max-width: 480px;
    margin: 0 auto;
}

    /* Decorative glow accents behind the stack */
    .gallery-stack::before {
        content: '';
        position: absolute;
        top: 40px;
        right: -20px;
        width: 90px;
        height: 90px;
        background: radial-gradient(circle, rgba(255, 193, 7, 0.4) 0%, transparent 70%);
        border-radius: 50%;
        z-index: 0;
        pointer-events: none;
    }

    .gallery-stack::after {
        content: '';
        position: absolute;
        bottom: 30px;
        left: -16px;
        width: 70px;
        height: 70px;
        background: radial-gradient(circle, rgba(139, 17, 19, 0.18) 0%, transparent 70%);
        border-radius: 50%;
        z-index: 0;
        pointer-events: none;
    }

    .gallery-stack img {
        position: absolute;
        width: 68%;
        height: 290px;
        object-fit: cover;
        border-radius: 16px;
        border: 6px solid #fff;
        box-shadow: 0 18px 40px rgba(26, 44, 78, 0.18), 0 4px 10px rgba(26, 44, 78, 0.08);
        cursor: pointer;
        transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 0.45s ease, z-index 0s linear 0.3s, filter 0.45s ease;
        will-change: transform;
    }

    /* Initial resting positions with subtle tilt */
    .gallery-stack .img-1 {
        top: 0;
        left: 0;
        z-index: 2;
        animation: float-img-1 6s ease-in-out infinite;
    }

    .gallery-stack .img-2 {
        bottom: 0;
        right: 0;
        z-index: 1;
        filter: brightness(0.92);
        animation: float-img-2 6s ease-in-out infinite 1.5s;
    }

/* Idle gentle floating */
@keyframes float-img-1 {
    0%, 100% {
        transform: rotate(-3deg) translateY(0);
    }

    50% {
        transform: rotate(-3deg) translateY(-6px);
    }
}

@keyframes float-img-2 {
    0%, 100% {
        transform: rotate(4deg) translateY(0);
    }

    50% {
        transform: rotate(4deg) translateY(-4px);
    }
}

/* Hover img-1 (top one) */
.gallery-stack .img-1:hover {
    z-index: 5;
    transform: rotate(-1deg) translate(-8px, -10px) scale(1.04);
    animation: none;
    box-shadow: 0 30px 60px rgba(26, 44, 78, 0.30), 0 8px 18px rgba(26, 44, 78, 0.15);
    transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 0.45s ease, z-index 0s, filter 0.45s ease;
}

/* Hover img-2 (bottom one) — comes UP to the front */
.gallery-stack .img-2:hover {
    z-index: 5;
    transform: rotate(1deg) translate(8px, -20px) scale(1.06);
    animation: none;
    filter: brightness(1);
    box-shadow: 0 30px 60px rgba(26, 44, 78, 0.30), 0 8px 18px rgba(26, 44, 78, 0.15);
    transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 0.45s ease, z-index 0s, filter 0.45s ease;
}

    /* When bottom image is hovered, top one steps aside and dims */
    .gallery-stack .img-2:hover ~ .img-1 {
        transform: rotate(-5deg) translate(-12px, 8px) scale(0.96);
        animation: none;
        filter: brightness(0.85);
    }

/* Responsive */
@media (max-width: 1100px) {
    .alumni-slider-wrap {
        padding: 0 30px;
    }

    .alumni-slide {
        flex: 0 0 290px;
    }

    .alumni-nav {
        width: 42px;
        height: 42px;
        font-size: 15px;
    }

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

    .nl-card:nth-child(3n) {
        border-right: 1px solid #eef0f5;
    }

    .nl-card:nth-child(2n) {
        border-right: none;
    }
}

@media (max-width: 992px) {
    .cta-wrapper-v2 {
        flex-direction: column;
    }

    .cta-info-v2 {
        padding: 40px;
    }

    .academic-flex {
        flex-direction: column;
        gap: 50px;
    }

    .gallery-stack {
        height: 380px;
        max-width: 420px;
    }

        .gallery-stack img {
            height: 260px;
            width: 70%;
        }

    .notice-board-head .section-title {
        font-size: 32px;
    }

    .as-divider {
        display: none;
    }

    .alumni-stats {
        padding: 30px;
    }

    .section-head {
        margin-bottom: 40px;
    }
}

@media (max-width: 700px) {
    .nl-grid {
        grid-template-columns: 1fr;
    }

    .nl-card {
        border-right: none !important;
    }

    .nl-tab {
        font-size: 13px;
        padding: 12px 14px;
        min-width: auto;
    }

        .nl-tab i {
            display: none;
        }
}

@media (max-width: 640px) {
    .alumni-slider-wrap {
        padding: 0 15px;
    }

    .alumni-slide {
        flex: 0 0 270px;
    }

    .alumni-nav {
        display: none;
    }

    .as-num {
        font-size: 30px;
    }

    .cta-heading-v2 {
        font-size: 30px;
    }

    .notice-board-head .section-title {
        font-size: 28px;
    }

    .nb-view-all {
        padding: 12px 20px;
        font-size: 13px;
    }
}

@media (max-width: 540px) {
    .gallery-stack {
        height: 340px;
    }

        .gallery-stack img {
            height: 220px;
            width: 75%;
        }
}

/* ============ GALLERY — gal- prefix (style mirrors IQAC) ============ */

/* ---- Mobile-safety guards (added) ----
       Keep every gallery box border-box, and let the sidebar + content
       columns shrink so the photo grid can never overflow sideways. */
.gal-layout, .gal-layout *, .gal-layout *::before, .gal-layout *::after {
    box-sizing: border-box;
}

.gal-side, .gal-content {
    min-width: 0;
}

/* HERO */
.gal-hero {
    background: linear-gradient(135deg, #1a2c4e 0%, #2a416f 100%);
    color: #fff;
    padding: 65px 0 75px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .gal-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 20% 30%, rgba(212,168,71,0.18) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(139,17,19,0.18) 0%, transparent 45%);
        pointer-events: none;
    }

    .gal-hero::after {
        content: '\f030';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        font-size: 240px;
        color: rgba(212,168,71,0.06);
        top: -10px;
        right: -20px;
        line-height: 1;
        transform: rotate(-12deg);
        pointer-events: none;
    }

    .gal-hero .container {
        position: relative;
        z-index: 1;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .gal-hero .gal-emblem {
        width: 90px;
        height: 90px;
        margin: 0 auto 22px;
        background: rgba(255,255,255,0.1);
        border: 2px solid #d4a847;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #d4a847;
        font-size: 38px;
        box-shadow: 0 6px 24px rgba(0,0,0,0.25), 0 0 0 6px rgba(212,168,71,0.12);
    }

    .gal-hero h1 {
        font-family: 'Playfair Display','Cormorant Garamond', serif;
        font-size: 44px;
        font-weight: 700;
        margin: 0 0 8px;
        letter-spacing: 0.5px;
        color: #ffffff !important;
        text-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }

    .gal-hero .gal-motto {
        font-family: 'Outfit','Inter', sans-serif;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: #f5d989 !important;
        margin: 0;
    }

    .gal-hero .gal-sub {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: rgba(255,255,255,0.85) !important;
        margin: 8px 0 0;
    }

    .gal-hero .gal-divider {
        width: 80px;
        height: 3px;
        background: #d4a847;
        margin: 20px auto;
        border-radius: 2px;
    }

    .gal-hero .gal-est-pill {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        background: rgba(212,168,71,0.18);
        border: 2px solid #d4a847;
        padding: 12px 26px;
        border-radius: 30px;
        margin-top: 20px;
    }

        .gal-hero .gal-est-pill .gal-pill-icon {
            width: 32px;
            height: 32px;
            background: #d4a847;
            color: #1a2c4e;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        .gal-hero .gal-est-pill .gal-pill-text {
            text-align: left;
            line-height: 1.2;
        }

        .gal-hero .gal-est-pill .gal-pill-label {
            display: block;
            font-size: 10.5px;
            letter-spacing: 1.8px;
            text-transform: uppercase;
            color: #f5d989;
            font-weight: 600;
        }

        .gal-hero .gal-est-pill .gal-pill-val {
            display: block;
            font-size: 14.5px;
            font-weight: 700;
            color: #ffffff;
            font-family: 'Outfit','Inter', sans-serif;
            letter-spacing: 0.5px;
        }
/* BREADCRUMB */
.gal-breadcrumb {
    background: #f7f8fa;
    padding: 14px 0;
    border-bottom: 1px solid #e6e9ee;
    font-family: 'Outfit','Inter', sans-serif;
    font-size: 13.5px;
    color: #555;
}

    .gal-breadcrumb .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .gal-breadcrumb a {
        color: #8b1113;
        text-decoration: none;
        font-weight: 600;
    }

        .gal-breadcrumb a:hover {
            text-decoration: underline;
        }

    .gal-breadcrumb .sep {
        margin: 0 8px;
        color: #aaa;
    }

    .gal-breadcrumb .current {
        color: #1a2c4e;
        font-weight: 600;
    }

/* ============ LAYOUT: LEFT SIDEBAR + CONTENT ============ */
.gal-layout {
    max-width: 1340px;
    margin: 50px auto;
    padding: 50 20px;
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}
/* SIDEBAR (vertical category nav) */
.gal-side {
    position: sticky;
    top: 24px;
    align-self: start;
    background: #fff;
    border: 1px solid #e6e9ee;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(26,44,78,0.06);
    padding: 14px;
    font-family: 'Outfit','Inter', sans-serif;
}

.gal-side-title {
    font-family: 'Outfit','Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #8b1113;
    padding: 6px 12px 12px;
    margin: 0;
    border-bottom: 1px solid #f0f1f5;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .gal-side-title i {
        color: #d4a847;
        font-size: 12px;
    }

.gal-tabs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-top: 10px;
}

.gal-tab {
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    font-family: 'Outfit','Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #6b7484;
    text-align: left;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 11px;
    letter-spacing: 0.2px;
}

    .gal-tab span:not(.gal-tab-count) {
        flex: 1;
        min-width: 0;
        line-height: 1.3;
    }

    .gal-tab i {
        color: #8b1113;
        font-size: 14px;
        width: 18px;
        text-align: center;
        transition: color 0.2s ease;
        flex-shrink: 0;
    }

    .gal-tab .gal-tab-count {
        background: rgba(139,17,19,0.08);
        color: #8b1113;
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.5px;
        flex-shrink: 0;
    }

    .gal-tab:hover {
        color: #1a2c4e;
        background: #fafbfd;
    }

    .gal-tab.is-active {
        color: #1a2c4e;
        background: linear-gradient(90deg, rgba(212,168,71,0.14) 0%, rgba(212,168,71,0.04) 100%);
        border-left-color: #d4a847;
    }

        .gal-tab.is-active i {
            color: #d4a847;
        }

        .gal-tab.is-active .gal-tab-count {
            background: rgba(212,168,71,0.18);
            color: #b8862a;
        }
/* CONTENT COLUMN */
.gal-content {
    min-width: 0;
}

/* Tablet / mobile: sidebar collapses to a horizontal scrolling strip on top */
@media (max-width: 900px) {
    .gal-layout {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 0 14px;
    }

    .gal-side {
        position: sticky;
        top: 0;
        z-index: 50;
        border-radius: 12px;
        box-shadow: 0 2px 14px rgba(26,44,78,0.06);
        padding: 0 6px;
        margin: 0;
    }

    .gal-side-title {
        display: none;
    }

    .gal-tabs {
        flex-direction: row;
        flex-wrap: nowrap;
        margin-top: 0;
        gap: 2px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .gal-tabs::-webkit-scrollbar {
            display: none;
        }

    .gal-tab {
        width: auto;
        flex: 0 0 auto;
        padding: 14px 14px;
        font-size: 12px;
        border-radius: 0;
        border-left: 0;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
    }

        .gal-tab span:not(.gal-tab-count) {
            flex: 0 0 auto;
        }

        .gal-tab.is-active {
            background: linear-gradient(180deg, transparent 0%, rgba(212,168,71,0.08) 100%);
            border-left-color: transparent;
            border-bottom-color: #d4a847;
        }
}
/* PANEL BASE */
.gal-panel {
    display: none;
    padding: 8px 0 60px;
    background: transparent;
    font-family: 'Outfit','Inter', sans-serif;
    color: #2c3852;
}

    .gal-panel.is-active {
        display: block;
        animation: gal-fade 0.4s ease;
    }

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* In the sidebar layout the alternating background is dropped — panels sit in one content column. */
.gal-panel.alt {
    background: transparent;
}

.gal-panel .container {
    max-width: none;
    margin: 0;
    padding: 0;
}
/* PANEL HEADER */
.gal-panel-header {
    text-align: center;
    margin: 0 auto 40px;
    max-width: 800px;
}

.gal-panel-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: linear-gradient(135deg, #fdf6e7 0%, #fbf0d2 100%);
    color: #8b1113;
    border: 1px solid #f0e1b5;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

    .gal-panel-eyebrow i {
        font-size: 11px;
    }

.gal-panel-title {
    font-family: 'Playfair Display','Cormorant Garamond', serif;
    font-size: 32px;
    color: #1a2c4e;
    margin: 0 0 12px;
    font-weight: 700;
    line-height: 1.2;
}

.gal-panel-sub {
    font-size: 15.5px;
    color: #5a6478;
    margin: 0;
    line-height: 1.7;
}

.gal-title-underline {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #8b1113 0%, #d4a847 100%);
    margin: 16px auto 18px;
    border-radius: 2px;
}
/* STATS STRIP — shown only on first panel */
.gal-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto 35px;
}

.gal-stat {
    background: #ffffff;
    border-radius: 10px;
    padding: 22px 16px;
    text-align: center;
    border: 1px solid #e6e9ee;
    box-shadow: 0 4px 12px rgba(26,44,78,0.06);
    transition: transform 0.25s ease;
}

    .gal-stat:hover {
        transform: translateY(-3px);
    }

    .gal-stat .gal-stat-icon {
        width: 44px;
        height: 44px;
        margin: 0 auto 10px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        background: linear-gradient(135deg, #fdf6e7 0%, #fbf0d2 100%);
        color: #b8862a;
        border: 2px solid #f0e1b5;
    }

    .gal-stat .gal-stat-num {
        font-family: 'Playfair Display','Cormorant Garamond', serif;
        font-size: 28px;
        font-weight: 700;
        color: #1a2c4e;
        line-height: 1.1;
    }

    .gal-stat .gal-stat-label {
        font-size: 11.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: #6b7484;
        margin-top: 5px;
    }
/* PHOTO GRID */
.gal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    max-width: 1280px;
    margin: 0 auto;
}

.gal-card {
    position: relative;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e6e9ee;
    box-shadow: 0 4px 14px rgba(26,44,78,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    display: block;
    text-decoration: none;
    color: inherit;
}

    .gal-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, #d4a847 50%, transparent);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 3;
    }

    .gal-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 16px 36px rgba(26,44,78,0.14);
        border-color: #d4a847;
    }

        .gal-card:hover::before {
            opacity: 1;
        }

.gal-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(135deg, #1a2c4e 0%, #2a416f 100%);
}

    .gal-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 0.5s ease, filter 0.4s ease;
        display: block;
    }

.gal-card:hover .gal-thumb img {
    transform: scale(1.06);
}
/* Hover overlay */
.gal-thumb::after {
    content: '\f00e';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(26,44,78,0) 40%, rgba(26,44,78,0.65) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.gal-card:hover .gal-thumb::after {
    opacity: 1;
}
/* Image fallback (broken / missing files) */
.gal-thumb.no-image::before {
    content: '\f03e';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(212,168,71,0.4);
    font-size: 56px;
    background: linear-gradient(135deg, #1a2c4e 0%, #2a416f 100%);
}

.gal-caption {
    padding: 14px 16px 16px;
    border-top: 1px solid #f0f1f5;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
}

.gal-cap-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #fdf6e7 0%, #fbf0d2 100%);
    border: 1px solid #f0e1b5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b8862a;
    font-size: 11px;
    margin-top: 2px;
}

.gal-cap-text {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: #2c3852;
    line-height: 1.4;
    font-family: 'Outfit','Inter', sans-serif;
    overflow-wrap: anywhere;
    word-break: break-word;
}

    .gal-cap-text .gal-cap-num {
        display: block;
        font-family: 'Playfair Display','Cormorant Garamond', serif;
        font-size: 10.5px;
        font-weight: 600;
        color: #8b1113;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        margin-bottom: 3px;
    }
/* Caption-less categories: image-only tiles (no caption strip).
       The thumbnail rounds on all corners so the card looks complete. */
.gal-grid--nocap .gal-card .gal-thumb {
    border-radius: 12px;
}

.gal-grid--nocap .gal-card {
    /* keep the gold top-bar accent visible above the rounded image */
    overflow: hidden;
}
/* LIGHTBOX */
.gal-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(10, 16, 30, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 80px 70px 100px;
    font-family: 'Outfit','Inter', sans-serif;
}

    .gal-lightbox.is-open {
        display: flex;
        animation: gal-lb-fade 0.25s ease;
    }

@keyframes gal-lb-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.gal-lb-stage {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.gal-lb-img-wrap {
    position: relative;
    max-width: min(1100px, 95vw);
    max-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

.gal-lb-img {
    max-width: 100%;
    max-height: 78vh;
    display: block;
    background: #1a2c4e;
    animation: gal-lb-zoom 0.3s ease;
}

@keyframes gal-lb-zoom {
    from {
        transform: scale(0.96);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.gal-lb-caption {
    max-width: min(1100px, 95vw);
    text-align: center;
    color: #fff;
    font-family: 'Playfair Display','Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    padding: 0 20px;
}

    .gal-lb-caption .gal-lb-cat {
        display: block;
        font-family: 'Outfit','Inter', sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #d4a847;
        margin-bottom: 6px;
    }

.gal-lb-counter {
    display: block;
    font-family: 'Outfit','Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-top: 8px;
}
/* Close button */
.gal-lb-close {
    position: absolute;
    top: 22px;
    right: 26px;
    width: 46px;
    height: 46px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(212,168,71,0.4);
    color: #f5d989;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    z-index: 10;
}

    .gal-lb-close:hover {
        background: #d4a847;
        color: #1a2c4e;
        transform: rotate(90deg);
    }
/* Arrow nav */
.gal-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    background: rgba(212,168,71,0.18);
    border: 2px solid #d4a847;
    color: #f5d989;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    z-index: 10;
}

    .gal-lb-nav:hover {
        background: #d4a847;
        color: #1a2c4e;
        box-shadow: 0 6px 22px rgba(212,168,71,0.5);
    }

.gal-lb-prev {
    left: 22px;
}

.gal-lb-next {
    right: 22px;
}

.gal-lb-prev:hover {
    transform: translateY(-50%) translateX(-3px);
}

.gal-lb-next:hover {
    transform: translateY(-50%) translateX(3px);
}
/* RESPONSIVE */
@media (max-width: 900px) {
    .gal-hero h1 {
        font-size: 30px;
    }

    .gal-panel-title {
        font-size: 24px;
    }

    .gal-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    /* FIX: force a shrink-safe 2-column grid that always fills from the
           left edge. The old auto-fill + minmax(160px) rule mis-sized on
           phones and pushed photos into a cramped right-hand strip. */
    .gal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
        max-width: 100%;
        margin: 0;
        justify-content: stretch;
        justify-items: stretch;
        direction: ltr;
    }

    .gal-content {
        overflow-x: hidden;
    }

    .gal-caption {
        padding: 10px 12px 12px;
        gap: 8px;
    }

    .gal-cap-text {
        font-size: 12px;
    }

    .gal-cap-icon {
        width: 26px;
        height: 26px;
        font-size: 10px;
    }

    .gal-lightbox {
        padding: 60px 16px 80px;
    }

    .gal-lb-nav {
        width: 44px;
        height: 44px;
        font-size: 14px;
    }

    .gal-lb-prev {
        left: 8px;
    }

    .gal-lb-next {
        right: 8px;
    }

    .gal-lb-close {
        top: 14px;
        right: 14px;
        width: 40px;
        height: 40px;
    }

    .gal-lb-caption {
        font-size: 15px;
    }
}



/* Contact page CSS*/


/* --------- Hero --------- */
.cu-hero {
    position: relative;
    overflow: hidden;
    padding: 90px 0 80px;
    background: radial-gradient(1200px 500px at 85% -10%, rgba(212,175,55,0.18), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(34,68,54,0.35), transparent 60%), linear-gradient(140deg, #0c1a14 0%, #102b22 55%, #0a1612 100%);
    color: #f4ecd8;
}

    .cu-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: repeating-linear-gradient(0deg, rgba(244,236,216,0.04) 0 1px, transparent 1px 38px), repeating-linear-gradient(90deg, rgba(244,236,216,0.04) 0 1px, transparent 1px 38px);
        pointer-events: none;
    }

    .cu-hero .container {
        position: relative;
        z-index: 2;
    }

.cu-crumb {
    font-size: 13px;
    color: #9aa49a;
    margin-bottom: 6px;
}

    .cu-crumb a {
        color: #cdc6b3;
        text-decoration: none;
    }

        .cu-crumb a:hover {
            color: #d4af37;
        }

    .cu-crumb .sep {
        margin: 0 8px;
        color: #5a6b5e;
    }

.cu-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #d4af37;
    font-weight: 600;
}

    .cu-eyebrow::before {
        content: "";
        width: 36px;
        height: 1px;
        background: #d4af37;
        display: inline-block;
    }

.cu-title {
    font-family: Georgia, 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    line-height: 1.05;
    font-weight: 600;
    margin: 18px 0 18px;
    color: #f4ecd8;
}

    .cu-title em {
        color: #d4af37;
        font-style: italic;
        font-weight: 500;
    }

.cu-lede {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #cdc6b3;
    max-width: 680px;
}

.cu-quick-row {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media(max-width:860px) {
    .cu-quick-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cu-quick-card {
    background: rgba(244,236,216,0.05);
    border: 1px solid rgba(244,236,216,0.15);
    backdrop-filter: blur(6px);
    border-radius: 8px;
    padding: 18px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: #f4ecd8;
    transition: border-color .25s ease, transform .25s ease, background .25s ease;
}

    .cu-quick-card:hover {
        border-color: #d4af37;
        transform: translateY(-2px);
        background: rgba(244,236,216,0.08);
    }

    .cu-quick-card .ic {
        width: 42px;
        height: 42px;
        border-radius: 8px;
        background: rgba(212,175,55,0.18);
        color: #d4af37;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .cu-quick-card .lab {
        font-size: 11px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #9aa49a;
        margin-bottom: 2px;
    }

    .cu-quick-card .val {
        font-family: Georgia,serif;
        font-size: 0.95rem;
        color: #f4ecd8;
        font-weight: 500;
        word-break: break-word;
    }

/* --------- Main grid --------- */
.cu-main {
    padding: 80px 0 30px;
    background: #fdfbf4;
}

.cu-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 50px;
    align-items: start;
}

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

/* --------- Left column: directory --------- */
.cu-directory h2 {
    font-family: Georgia, serif;
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
    color: #1a3328;
    margin: 8px 0 8px;
}

.cu-directory > p.lede {
    color: #5a6b5e;
    line-height: 1.7;
    margin: 0 0 28px;
}

.cu-card {
    background: #fff;
    border: 1px solid #e6dfc8;
    border-radius: 8px;
    padding: 24px 24px;
    margin-bottom: 18px;
    transition: border-color .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
}

    .cu-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: #d4af37;
        transform: scaleY(0);
        transform-origin: top;
        transition: transform .35s ease;
    }

    .cu-card:hover {
        border-color: #1a3328;
        box-shadow: 0 14px 30px -16px rgba(26,51,40,0.20);
    }

        .cu-card:hover::before {
            transform: scaleY(1);
        }

.cu-card-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}

    .cu-card-head .ico {
        width: 44px;
        height: 44px;
        border-radius: 8px;
        background: #f7f3e9;
        color: #1a3328;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .cu-card-head h3 {
        font-family: Georgia, serif;
        font-size: 1.15rem;
        margin: 0;
        color: #1a3328;
        line-height: 1.3;
    }

    .cu-card-head .sub {
        font-size: 12px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #7a8478;
        margin-top: 2px;
    }

.cu-card-body {
    padding-left: 58px;
}

@media(max-width:520px) {
    .cu-card-body {
        padding-left: 0;
    }
}

.cu-card-body p {
    margin: 0 0 6px;
    line-height: 1.65;
    color: #3a4a3d;
}

.cu-card-body a {
    color: #1a3328;
    text-decoration: none;
    border-bottom: 1px solid rgba(212,175,55,0.4);
    transition: border-color .2s ease, color .2s ease;
}

    .cu-card-body a:hover {
        color: #d4af37;
        border-color: #d4af37;
    }

.cu-card-body strong {
    color: #1a3328;
}

.cu-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 8px;
}

    .cu-row > div {
        min-width: 140px;
    }

    .cu-row .lab {
        font-size: 11px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #7a8478;
        margin-bottom: 2px;
    }

    .cu-row .val {
        color: #1a3328;
        font-weight: 500;
    }

.cu-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .cu-link-list li {
        padding: 8px 0;
        border-bottom: 1px solid #efe9d5;
    }

        .cu-link-list li:last-child {
            border-bottom: 0;
        }

    .cu-link-list a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 0;
        border: 0;
    }

        .cu-link-list a::after {
            content: "→";
            color: #d4af37;
            font-weight: bold;
            transition: transform .2s ease;
        }

        .cu-link-list a:hover::after {
            transform: translateX(4px);
        }

/* --------- Right column: form --------- */
.cu-form-wrap {
    position: sticky;
    top: 24px;
}

@media(max-width:980px) {
    .cu-form-wrap {
        position: static;
    }
}

.cu-form-card {
    background: #fff;
    border: 1px solid #e6dfc8;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 18px 40px -16px rgba(26,51,40,0.16);
}

.cu-form-head {
    background: linear-gradient(135deg, #7a0a0a 0%, #c21010 100%);
    color: #f4ecd8;
    padding: 28px 30px;
    border-bottom: 3px solid #d4af37;
}

    .cu-form-head h3 {
        font-family: Georgia, serif;
        font-size: 1.5rem;
        margin: 0 0 6px;
        color: #f4ecd8;
    }

    .cu-form-head p {
        margin: 0;
        color: #cdc6b3;
        font-size: 0.92rem;
        line-height: 1.6;
    }

.cu-form-body {
    padding: 28px 30px 30px;
}

.cu-field {
    margin-bottom: 18px;
}

    .cu-field label {
        display: block;
        font-size: 12px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #5a6b5e;
        font-weight: 600;
        margin-bottom: 6px;
    }

        .cu-field label .req {
            color: #b85c2c;
        }

    .cu-field input,
    .cu-field select,
    .cu-field textarea {
        width: 100%;
        padding: 12px 14px;
        border: 1px solid #d6cfb6;
        border-radius: 6px;
        background: #faf6ea;
        font-family: inherit;
        font-size: 0.95rem;
        color: #1a3328;
        transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }

        .cu-field input:focus,
        .cu-field select:focus,
        .cu-field textarea:focus {
            outline: none;
            border-color: #1a3328;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(212,175,55,0.25);
        }

    .cu-field textarea {
        min-height: 130px;
        resize: vertical;
    }

.cu-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media(max-width:540px) {
    .cu-field-row {
        grid-template-columns: 1fr;
    }
}

.cu-form-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.cu-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #c21010;
    color: #fff;
    padding: 14px 28px;
    border: 0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

    .cu-submit:hover {
        background: #d4af37;
        color: #1a3328;
        transform: translateX(2px);
    }

.cu-form-note {
    font-size: 12px;
    color: #7a8478;
    line-height: 1.5;
}

    .cu-form-note i {
        color: #d4af37;
        margin-right: 5px;
    }

/* --------- Map section --------- */
.cu-map-section {
    padding: 80px 0 30px;
    background: #fdfbf4;
}

.cu-map-grid {
    display: grid;
    /*grid-template-columns: 1fr 2fr;*/
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e6dfc8;
    box-shadow: 0 24px 50px -22px rgba(26,51,40,0.18);
    background: #fff;
}

@media(max-width:880px) {
    .cu-map-grid {
        grid-template-columns: 1fr;
    }
}

.cu-map-side {
    background: linear-gradient(135deg, #1a3328 0%, #102b22 100%);
    color: #f4ecd8;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    overflow: hidden;
}

    .cu-map-side::after {
        content: "";
        position: absolute;
        right: -40px;
        bottom: -40px;
        width: 160px;
        height: 160px;
        background: radial-gradient(circle, rgba(212,175,55,0.25), transparent 70%);
    }

    .cu-map-side h3 {
        font-family: Georgia, serif;
        color: #f4ecd8;
        font-size: 1.4rem;
        margin: 8px 0 0;
    }

    .cu-map-side .addr {
        color: #cdc6b3;
        line-height: 1.7;
        margin: 0;
    }

    .cu-map-side .info-block {
        border-top: 1px solid rgba(244,236,216,0.15);
        padding-top: 16px;
        margin-top: 6px;
    }

        .cu-map-side .info-block .lab {
            font-size: 11px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: #9aa49a;
            margin-bottom: 4px;
        }

        .cu-map-side .info-block .val {
            color: #f4ecd8;
            font-family: Georgia, serif;
            font-size: 1.05rem;
        }

    .cu-map-side .directions-btn {
        margin-top: auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #d4af37;
        color: #1a3328;
        padding: 12px 22px;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 600;
        letter-spacing: 0.5px;
        font-size: 0.9rem;
        align-self: flex-start;
        transition: background .2s ease, transform .2s ease;
        z-index: 2;
    }

        .cu-map-side .directions-btn:hover {
            background: #f4ecd8;
            transform: translateY(-2px);
        }

.cu-map-frame {
    position: relative;
    min-height: 420px;
}

    .cu-map-frame iframe {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
        min-height: 420px;
    }

/* --------- FAQ teaser strip --------- */
.cu-faq-strip {
    padding: 60px 0 80px;
    background: #fdfbf4;
}

.cu-faq-card {
    background: linear-gradient(135deg, #f7f3e9 0%, #faf6ea 100%);
    border: 1px solid #e6dfc8;
    border-left: 4px solid #d4af37;
    padding: 32px 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

    .cu-faq-card h3 {
        font-family: Georgia, serif;
        font-size: 1.4rem;
        color: #1a3328;
        margin: 0 0 6px;
    }

    .cu-faq-card p {
        color: #5a6b5e;
        margin: 0;
        line-height: 1.6;
    }

    .cu-faq-card .btns {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .cu-faq-card .btn-dark {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #1a3328;
        color: #fff;
        padding: 11px 20px;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.9rem;
        transition: background .2s ease, transform .2s ease;
    }

        .cu-faq-card .btn-dark:hover {
            background: #d4af37;
            color: #1a3328;
            transform: translateY(-2px);
        }

    .cu-faq-card .btn-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: transparent;
        color: #1a3328;
        padding: 11px 18px;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.9rem;
        border: 1px solid #d6cfb6;
        transition: all .2s ease;
    }

        .cu-faq-card .btn-link:hover {
            border-color: #1a3328;
            background: #fff;
        }



/*Login and Admission Form*/

/* =============================================================
   UPL College Admission Portal — Modern Theme
   Palette: Deep navy + warm saffron accent (Sikh educational heritage)
   Fonts: Fraunces (display) + Inter (body)
   ============================================================= */

:root {
    --adm-navy: #1a2942;
    --adm-navy-deep: #0f1a2e;
    --adm-navy-soft: #2d3f5f;
    --adm-saffron: #c8722a;
    --adm-saffron-light: #e89546;
    --adm-gold: #d4a017;
    --adm-cream: #faf7f2;
    --adm-paper: #ffffff;
    --adm-ink: #1a2942;
    --adm-ink-soft: #4a5878;
    --adm-line: #e4e7ec;
    --adm-line-strong: #cdd3df;
    --adm-success: #15803d;
    --adm-success-bg: #ecfdf5;
    --adm-error: #b91c1c;
    --adm-error-bg: #fef2f2;
    --adm-warning: #b45309;
    --adm-warning-bg: #fffbeb;
    --adm-info: #1e40af;
    --adm-info-bg: #eff6ff;
    --adm-radius: 8px;
    --adm-radius-lg: 12px;
    --adm-shadow-sm: 0 1px 2px rgba(15,26,46,0.06);
    --adm-shadow: 0 4px 16px rgba(15,26,46,0.08);
    --adm-shadow-lg: 0 12px 40px rgba(15,26,46,0.12);
    --adm-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --adm-font-display: 'Fraunces', Georgia, serif;
}

/* ---- Base reset ---- */
*, *::before, *::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font-family: var(--adm-font-body);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--adm-ink);
    background: radial-gradient(circle at 0% 0%, rgba(200,114,42,0.04), transparent 40%), radial-gradient(circle at 100% 100%, rgba(26,41,66,0.04), transparent 40%), var(--adm-cream);
    min-height: 100vh;
    overflow-x: hidden; /* prevent horizontal scroll bleed on narrow viewports */
}

a {
    color: var(--adm-navy);
    text-decoration: none;
    transition: color .15s;
}

    a:hover {
        color: var(--adm-saffron);
    }

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

h1, h2, h3, h4 {
    font-family: var(--adm-font-display);
    font-weight: 600;
    color: var(--adm-navy-deep);
    margin: 0 0 .5em;
    letter-spacing: -0.01em;
}

h1 {
    font-size: 1.75rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.15rem;
}

h4 {
    font-size: 1rem;
}

/* ============================================================
   HEADER
   ============================================================ */
.adm-header {
    background: var(--adm-paper);
    border-bottom: 3px solid var(--adm-saffron);
    box-shadow: var(--adm-shadow-sm);
    position: static;
}

.adm-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 24px;
    text-align: center !important;
    display: block !important;
}

.adm-banner-link {
    display: inline-block !important;
    text-decoration: none;
    line-height: 0;
    margin: 0 auto !important;
    float: none !important;
}

.adm-banner-img {
    height: 30px !important;
    width: auto !important;
    max-width: 90% !important;
    max-height: 30px !important;
    min-height: 0 !important;
    display: inline-block !important;
    margin: 0 auto !important;
    float: none !important;
    object-fit: contain !important;
    vertical-align: middle !important;
}

@media (max-width: 768px) {
    .adm-banner-img {
        height: 56px !important;
        max-height: 56px !important;
    }
}

@media (max-width: 480px) {
    .adm-banner-img {
        height: 44px !important;
        max-height: 44px !important;
    }
}

.adm-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: .82rem;
    color: var(--adm-ink-soft);
    text-align: right;
}

    .adm-contact-list li span {
        font-weight: 600;
        color: var(--adm-navy);
        display: inline-block;
        min-width: 86px;
        text-align: left;
    }

/* User bar */
.adm-userbar {
    background: var(--adm-navy);
    color: #e8edf5;
}

.adm-userbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: .85rem;
}

.adm-userbar strong {
    color: #fff;
}

.adm-lastlogin {
    color: #b8c2d4;
    font-size: .8rem;
}

.adm-logout {
    color: #fff;
    background: rgba(255,255,255,.1);
    padding: 5px 14px;
    border-radius: 4px;
    font-weight: 500;
    font-size: .8rem;
    border: 1px solid rgba(255,255,255,.18);
}

    .adm-logout:hover {
        background: var(--adm-saffron);
        color: #fff;
        border-color: var(--adm-saffron);
    }

/* ============================================================
   LAYOUT
   ============================================================ */
.adm-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 24px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
    align-items: start;
}
    /* Prevent grid children from blowing out the row when content is wider than column */
    .adm-main > * {
        min-width: 0;
    }

/* ============================================================
   SIDEBAR
   ============================================================ */
.adm-sidebar {
    background: var(--adm-paper);
    border-radius: var(--adm-radius-lg);
    box-shadow: var(--adm-shadow);
    position: -webkit-sticky; /* Safari + older Chromium-Edge fallback */
    position: sticky;
    top: 20px;
    align-self: start; /* stop it from stretching to content height */
    width: 100%; /* fill the grid column instead of forcing 260px */
    max-width: 260px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 40;
}
    /* Sidebar now lives in the grid flow, so content auto-places correctly.
   No explicit grid-column override needed. */
    /* Hide scrollbar visually but keep functionality */
    .adm-sidebar::-webkit-scrollbar {
        width: 6px;
    }

    .adm-sidebar::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.15);
        border-radius: 3px;
    }

    .adm-sidebar::-webkit-scrollbar-track {
        background: transparent;
    }

.adm-sidebar-header {
    background: linear-gradient(135deg, var(--adm-navy), var(--adm-navy-soft));
    color: #fff;
    padding: 14px 18px;
    font-family: var(--adm-font-display);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .02em;
}

.adm-sidebar-nav {
    display: flex;
    flex-direction: column;
}

    .adm-sidebar-nav a {
        padding: 12px 18px;
        border-bottom: 1px solid var(--adm-line);
        color: var(--adm-ink);
        font-size: .88rem;
        font-weight: 500;
        position: relative;
        transition: background .15s, padding .15s;
    }

        .adm-sidebar-nav a:last-child {
            border-bottom: none;
        }

        .adm-sidebar-nav a:hover {
            background: var(--adm-cream);
            padding-left: 24px;
            color: var(--adm-saffron);
        }

        .adm-sidebar-nav a.active {
            background: var(--adm-cream);
            color: var(--adm-saffron);
            font-weight: 600;
            border-left: 3px solid var(--adm-saffron);
            padding-left: 15px;
        }

/* ============================================================
   CONTENT CARD
   ============================================================ */
.adm-content {
    background: var(--adm-paper);
    border-radius: var(--adm-radius-lg);
    box-shadow: var(--adm-shadow);
    overflow: hidden;
}

.adm-content-header {
    background: linear-gradient(135deg, var(--adm-navy), var(--adm-navy-soft));
    color: #fff;
    padding: 18px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

    .adm-content-header h1,
    .adm-content-header h2 {
        color: #fff;
        margin: 0;
        font-size: 1.2rem;
    }

.adm-content-body {
    padding: 28px;
}

.adm-step-pill {
    display: inline-block;
    background: var(--adm-saffron);
    color: #fff;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ============================================================
   STEP PROGRESS BAR
   ============================================================ */
.adm-stepper {
    display: flex;
    background: linear-gradient(180deg, #fbf8f3, var(--adm-paper));
    padding: 22px 26px;
    border-bottom: 1px solid var(--adm-line);
    overflow-x: auto;
    gap: 0;
}

.adm-step {
    flex: 1;
    min-width: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

a.adm-step.is-clickable {
    cursor: pointer;
}

    a.adm-step.is-clickable:hover .adm-step-num {
        transform: scale(1.08);
        box-shadow: 0 0 0 4px rgba(200,114,42,0.18);
    }

    a.adm-step.is-clickable:hover .adm-step-label {
        color: var(--adm-saffron);
    }

.adm-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 60%;
    width: 80%;
    height: 2px;
    background: var(--adm-line-strong);
    z-index: 0;
}

.adm-step-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--adm-paper);
    border: 2px solid var(--adm-line-strong);
    color: var(--adm-ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .9rem;
    position: relative;
    z-index: 1;
    transition: all .2s;
}

.adm-step-label {
    margin-top: 8px;
    font-size: .72rem;
    color: var(--adm-ink-soft);
    font-weight: 500;
    line-height: 1.2;
}

.adm-step.is-done .adm-step-num {
    background: var(--adm-success);
    border-color: var(--adm-success);
    color: #fff;
}

.adm-step.is-done::after {
    background: var(--adm-success);
}

.adm-step.is-active .adm-step-num {
    background: var(--adm-saffron);
    border-color: var(--adm-saffron);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(200,114,42,0.18);
}

.adm-step.is-active .adm-step-label {
    color: var(--adm-saffron);
    font-weight: 600;
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.adm-section-title {
    font-family: var(--adm-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--adm-navy);
    margin: 28px 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--adm-line);
    display: flex;
    align-items: center;
    gap: 10px;
}

    .adm-section-title:first-child {
        margin-top: 0;
    }

    .adm-section-title::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 18px;
        background: var(--adm-saffron);
        border-radius: 2px;
    }

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

    .adm-form-grid.cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .adm-form-grid .adm-full {
        grid-column: 1 / -1;
    }

.adm-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .adm-field label {
        font-size: .82rem;
        font-weight: 500;
        color: var(--adm-navy);
    }

        .adm-field label .adm-req {
            color: var(--adm-error);
            font-weight: 700;
            margin-left: 2px;
        }

    .adm-field .adm-help {
        font-size: .73rem;
        color: var(--adm-ink-soft);
        margin-top: 2px;
    }

.adm-input,
.adm-select,
.adm-textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--adm-line-strong);
    background: #fff;
    border-radius: 6px;
    font: inherit;
    color: var(--adm-ink);
    transition: border-color .15s, box-shadow .15s;
}

    .adm-input:focus,
    .adm-select:focus,
    .adm-textarea:focus {
        outline: none;
        border-color: var(--adm-saffron);
        box-shadow: 0 0 0 3px rgba(200,114,42,0.15);
    }

    .adm-input[readonly],
    .adm-input:disabled {
        background: #f5f6f8;
        color: var(--adm-ink-soft);
        cursor: not-allowed;
    }

.adm-textarea {
    min-height: 80px;
    resize: vertical;
}

.adm-select {
    background-image: linear-gradient(45deg,transparent 50%,var(--adm-ink-soft) 50%),linear-gradient(135deg,var(--adm-ink-soft) 50%,transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: 32px;
    -webkit-appearance: none;
    appearance: none;
}

.adm-radio-group, .adm-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 6px 0;
}

    .adm-radio-group label, .adm-checkbox-group label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 400;
        cursor: pointer;
        font-size: .88rem;
        color: var(--adm-ink);
    }

    .adm-radio-group input, .adm-checkbox-group input {
        accent-color: var(--adm-saffron);
        width: 16px;
        height: 16px;
    }

/* ============================================================
   BUTTONS
   ============================================================ */
.adm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    font: inherit;
    font-weight: 600;
    font-size: .88rem;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform .1s, box-shadow .15s, background .15s;
    letter-spacing: .02em;
}

    .adm-btn:active {
        transform: translateY(1px);
    }

.adm-btn-primary {
    background: linear-gradient(180deg, var(--adm-saffron-light), var(--adm-saffron));
    color: #fff;
    box-shadow: 0 2px 8px rgba(200,114,42,0.25);
}

    .adm-btn-primary:hover {
        background: var(--adm-saffron);
        color: #fff;
        box-shadow: 0 4px 14px rgba(200,114,42,0.35);
    }

.adm-btn-secondary {
    background: var(--adm-paper);
    border-color: var(--adm-line-strong);
    color: var(--adm-navy);
}

    .adm-btn-secondary:hover {
        background: var(--adm-cream);
        border-color: var(--adm-saffron);
        color: var(--adm-saffron);
    }

.adm-btn-ghost {
    background: transparent;
    color: var(--adm-ink-soft);
}

    .adm-btn-ghost:hover {
        color: var(--adm-saffron);
    }

.adm-btn-danger {
    background: var(--adm-error);
    color: #fff;
}

.adm-form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 20px;
    margin-top: 26px;
    border-top: 1px solid var(--adm-line);
    flex-wrap: wrap;
}

    .adm-form-actions .adm-spacer {
        flex: 1;
    }

/* ============================================================
   ALERTS
   ============================================================ */
.adm-alert {
    padding: 12px 16px;
    border-radius: var(--adm-radius);
    border-left: 4px solid;
    font-size: .88rem;
    margin-bottom: 16px;
    line-height: 1.5;
}

.adm-alert-success {
    background: var(--adm-success-bg);
    border-color: var(--adm-success);
    color: var(--adm-success);
}

.adm-alert-error {
    background: var(--adm-error-bg);
    border-color: var(--adm-error);
    color: var(--adm-error);
}

.adm-alert-warning {
    background: var(--adm-warning-bg);
    border-color: var(--adm-warning);
    color: var(--adm-warning);
}

.adm-alert-info {
    background: var(--adm-info-bg);
    border-color: var(--adm-info);
    color: var(--adm-info);
}

.adm-mandatory-note {
    font-size: .82rem;
    color: var(--adm-error);
    margin-bottom: 14px;
}

/* ============================================================
   TABLES
   ============================================================ */
.adm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .87rem;
    margin-top: 14px;
    background: #fff;
}

    .adm-table th, .adm-table td {
        text-align: left;
        padding: 10px 12px;
        border-bottom: 1px solid var(--adm-line);
    }

    .adm-table th {
        background: var(--adm-cream);
        color: var(--adm-navy);
        font-weight: 600;
        text-transform: uppercase;
        font-size: .72rem;
        letter-spacing: .04em;
    }

    .adm-table tbody tr:hover {
        background: #fafbfc;
    }

.adm-del-btn {
    color: var(--adm-error);
    cursor: pointer;
    background: none;
    border: none;
}

/* ============================================================
   FILE UPLOADS
   ============================================================ */
.adm-upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 12px;
}

.adm-upload-card {
    background: #fafbfc;
    border: 2px dashed var(--adm-line-strong);
    border-radius: var(--adm-radius);
    padding: 18px;
    text-align: center;
    transition: border-color .2s, background .2s;
}

    .adm-upload-card:hover {
        border-color: var(--adm-saffron);
        background: #fff8f0;
    }

    .adm-upload-card .adm-upload-title {
        font-weight: 600;
        color: var(--adm-navy);
        margin-bottom: 4px;
    }

    .adm-upload-card .adm-upload-hint {
        font-size: .75rem;
        color: var(--adm-ink-soft);
        margin-bottom: 10px;
    }

.adm-upload-preview {
    width: 100%;
    height: 140px;
    background: #fff;
    border: 1px solid var(--adm-line);
    border-radius: 6px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--adm-ink-soft);
    font-size: .78rem;
    overflow: hidden;
}

    .adm-upload-preview img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.adm-upload-card input[type=file] {
    font-size: .78rem;
    width: 100%;
}

/* ============================================================
   CHECKBOX LIST (weightage certificates)
   ============================================================ */
.adm-checkbox-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    background: var(--adm-cream);
    padding: 14px 16px;
    border-radius: var(--adm-radius);
    border: 1px solid var(--adm-line);
    max-height: 320px;
    overflow-y: auto;
}

    .adm-checkbox-list label {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: .85rem;
        cursor: pointer;
        padding: 4px 6px;
        border-radius: 4px;
    }

        .adm-checkbox-list label:hover {
            background: rgba(255,255,255,0.6);
        }

/* ============================================================
   AUTH PAGES (login / register)
   ============================================================ */
.adm-auth-wrap {
    max-width: 480px;
    margin: 60px auto;
    background: var(--adm-paper);
    border-radius: var(--adm-radius-lg);
    box-shadow: var(--adm-shadow-lg);
    overflow: hidden;
}

.adm-auth-header {
    background: linear-gradient(135deg, var(--adm-navy), var(--adm-navy-soft));
    color: #fff;
    padding: 26px;
    text-align: center;
}

    .adm-auth-header h1 {
        color: #fff;
        margin: 0 0 4px;
        font-size: 1.5rem;
    }

    .adm-auth-header p {
        color: #b8c2d4;
        margin: 0;
        font-size: .88rem;
    }

.adm-auth-body {
    padding: 28px;
}

    .adm-auth-body .adm-field {
        margin-bottom: 16px;
    }

.adm-auth-footer-link {
    text-align: center;
    margin-top: 18px;
    font-size: .85rem;
    color: var(--adm-ink-soft);
}

/* Center the auth wrap when used standalone */
.adm-main.adm-main-narrow {
    display: block;
    max-width: 600px;
}

/* Dedicated auth pages (login, register, forgot password) */
.adm-auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}

    .adm-auth-page .adm-header {
        position: static;
    }

.adm-auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}

    .adm-auth-main .adm-auth-wrap {
        margin: 0;
        width: 100%;
        max-width: 520px;
    }

/* ============================================================
   WELCOME BANNER (dashboard)
   ============================================================ */
.adm-welcome-banner {
    background: radial-gradient(circle at 100% 0%, rgba(200,114,42,0.10), transparent 50%), linear-gradient(135deg, #faf7f2, #fff8f0);
    border: 1px solid var(--adm-line);
    border-left: 5px solid var(--adm-saffron);
    border-radius: var(--adm-radius-lg);
    padding: 26px 28px;
    margin-bottom: 22px;
    text-align: center;
}

.adm-welcome-title {
    font-family: var(--adm-font-display);
    font-size: 1.7rem;
    color: var(--adm-saffron);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.adm-welcome-sub {
    margin: 0;
    color: var(--adm-ink-soft);
    font-size: .92rem;
}

.adm-notice-item {
    background: #fff;
    border: 1px solid var(--adm-line);
    border-left: 4px solid var(--adm-saffron);
    border-radius: var(--adm-radius);
    padding: 14px 18px;
    margin-bottom: 12px;
}

.adm-notice-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Policy / disclaimer / instructions long-text styling */
.adm-policy-text {
    font-size: .9rem;
    line-height: 1.65;
    color: var(--adm-ink);
}

    .adm-policy-text h3 {
        font-family: var(--adm-font-display);
        font-size: 1.05rem;
        color: var(--adm-navy);
        margin: 22px 0 8px;
        padding-bottom: 4px;
        border-bottom: 2px solid var(--adm-saffron);
        display: inline-block;
    }

    .adm-policy-text h4 {
        font-size: .95rem;
        color: var(--adm-navy);
        margin: 16px 0 6px;
    }

    .adm-policy-text p {
        margin: 0 0 10px;
    }

    .adm-policy-text ul {
        margin: 6px 0 14px;
        padding-left: 22px;
    }

        .adm-policy-text ul li {
            margin-bottom: 6px;
        }

/* ============================================================
   FOOTER
   ============================================================ */
.adm-footer {
    background: var(--adm-navy-deep);
    color: #b8c2d4;
    margin-top: 60px;
}

.adm-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 36px 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.adm-footer h4 {
    color: #fff;
    font-size: 1rem;
    margin: 0 0 10px;
    font-family: var(--adm-font-display);
}

.adm-footer p {
    font-size: .85rem;
    margin: 0;
    line-height: 1.7;
}

.adm-footer a {
    color: #d4dbe7;
}

    .adm-footer a:hover {
        color: var(--adm-saffron-light);
    }

.adm-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 16px 24px;
    text-align: center;
    font-size: .8rem;
    color: #8a93a8;
}

/* ============================================================
   STATUS / DASHBOARD CARDS
   ============================================================ */
.adm-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.adm-status-card {
    background: #fff;
    border-radius: var(--adm-radius);
    padding: 18px;
    border: 1px solid var(--adm-line);
    box-shadow: var(--adm-shadow-sm);
}

.adm-status-card-label {
    font-size: .75rem;
    text-transform: uppercase;
    color: var(--adm-ink-soft);
    letter-spacing: .04em;
}

.adm-status-card-value {
    font-family: var(--adm-font-display);
    font-size: 1.4rem;
    color: var(--adm-navy);
    margin-top: 4px;
    font-weight: 600;
}

.adm-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.adm-badge-draft {
    background: #f3f4f6;
    color: #4b5563;
}

.adm-badge-submitted {
    background: var(--adm-info-bg);
    color: var(--adm-info);
}

.adm-badge-approved {
    background: var(--adm-success-bg);
    color: var(--adm-success);
}

.adm-badge-rejected {
    background: var(--adm-error-bg);
    color: var(--adm-error);
}

.adm-badge-pending {
    background: var(--adm-warning-bg);
    color: var(--adm-warning);
}

/* ============================================================
   REVIEW SCREEN (Step 7)
   ============================================================ */
.adm-review-section {
    background: var(--adm-paper);
    border: 1px solid var(--adm-line);
    border-radius: var(--adm-radius);
    margin: 14px 0;
    overflow: hidden;
}

.adm-review-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: linear-gradient(180deg, #fbf8f3, #fff8f0);
    border-bottom: 1px solid var(--adm-line);
    gap: 12px;
}

    .adm-review-section-head h4 {
        margin: 0;
        font-family: var(--adm-font-display);
        font-size: 1rem;
        color: var(--adm-navy);
    }

.adm-review-edit {
    font-size: .8rem;
    font-weight: 600;
    color: var(--adm-saffron);
    background: #fff;
    padding: 5px 12px;
    border-radius: 4px;
    border: 1px solid var(--adm-line-strong);
    text-decoration: none;
    white-space: nowrap;
}

    .adm-review-edit:hover {
        background: var(--adm-saffron);
        color: #fff;
        border-color: var(--adm-saffron);
    }

.adm-review-section > .adm-table,
.adm-review-section > div > .adm-table {
    margin: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.adm-review-table th {
    background: #fafbfc;
    width: 25%;
    font-weight: 500;
    color: var(--adm-ink-soft);
}

.adm-review-table td {
    font-weight: 500;
    color: var(--adm-ink);
}

/* Confirmation checkbox above Pay button */
.adm-confirm-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--adm-warning-bg);
    border: 1px solid #f5d8a8;
    border-radius: var(--adm-radius);
    padding: 14px 16px;
    margin: 14px 0;
    cursor: pointer;
    font-size: .88rem;
    line-height: 1.5;
}

    .adm-confirm-box input[type="checkbox"] {
        margin-top: 3px;
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        accent-color: var(--adm-saffron);
        cursor: pointer;
    }

    .adm-confirm-box span {
        flex: 1;
    }

.adm-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    filter: grayscale(.3);
}

/* ============================================================
   PAYMENT RECEIPT LIST + REFUND
   ============================================================ */
.adm-btn-xs {
    padding: 5px 11px;
    font-size: .76rem;
    font-weight: 600;
    border-radius: 4px;
    margin-right: 4px;
    margin-bottom: 2px;
}

.adm-refund-detail-row > td {
    background: #fafbfc;
    border-top: none !important;
    font-size: .85rem;
    padding: 12px 14px !important;
}

.adm-refund-note {
    background: var(--adm-paper);
    border-left: 3px solid var(--adm-warning);
    padding: 10px 14px;
    border-radius: 4px;
    line-height: 1.5;
}

/* ============================================================
   PAYMENT GATEWAY PAGE
   ============================================================ */
.adm-pay-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 22px;
    align-items: start;
}

.adm-pay-card,
.adm-pay-summary {
    background: var(--adm-paper);
    border: 1px solid var(--adm-line);
    border-radius: var(--adm-radius);
    padding: 22px 24px;
    box-shadow: var(--adm-shadow-sm);
}

.adm-pay-summary {
    background: linear-gradient(180deg, #fbf8f3, #fff);
    position: sticky;
    top: 20px;
}

.adm-pay-section-title {
    font-family: var(--adm-font-display);
    font-size: 1.1rem;
    color: var(--adm-navy);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--adm-line);
}

.adm-test-card-hint {
    background: var(--adm-info-bg);
    border: 1px dashed var(--adm-info);
    border-radius: var(--adm-radius);
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: .85rem;
}

.adm-test-card-hint-label {
    font-weight: 600;
    color: var(--adm-info);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}

.adm-test-card-hint-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 16px;
    font-size: .85rem;
}

    .adm-test-card-hint-grid strong {
        color: var(--adm-navy);
        font-family: 'Courier New', monospace;
        letter-spacing: .03em;
    }

/* ============================================================
   RESPONSIVE
   Breakpoints (mobile-first style, but written desktop-first):
     ≥1280px : full desktop, max 1280px container
     1100–1279 : laptop, slightly tighter spacing
     961–1099 : small laptop / tablet landscape, narrower sidebar
     601–960  : tablet portrait — sidebar STACKS above content
     ≤600     : phones — single column, smaller padding
     ≤380     : small phones / foldables — minimum padding
   ============================================================ */

/* Laptop (1100–1279) — tighter padding/gaps but keep 2-col layout */
@media (max-width: 1279px) {
    .adm-main {
        padding: 24px 20px;
        gap: 22px;
        grid-template-columns: 240px 1fr;
    }

    .adm-sidebar {
        max-width: 240px;
    }
}

/* Small laptop / tablet landscape (961–1099) — narrower sidebar */
@media (max-width: 1099px) {
    .adm-main {
        padding: 20px 16px;
        gap: 18px;
        grid-template-columns: 220px 1fr;
    }

    .adm-sidebar {
        max-width: 220px;
    }

    .adm-sidebar-nav a {
        font-size: .82rem;
        padding: 11px 14px;
    }

    .adm-sidebar-header {
        padding: 12px 14px;
        font-size: .95rem;
    }
}

/* Tablet portrait & below (≤960) — single column, sidebar above content */
@media (max-width: 960px) {
    .adm-main {
        grid-template-columns: 1fr;
        padding: 18px 14px;
        gap: 16px;
    }

    .adm-sidebar {
        position: static;
        max-width: 100%;
        width: auto;
        max-height: none;
        overflow: visible;
    }

    .adm-form-grid, .adm-form-grid.cols-3 {
        grid-template-columns: 1fr;
    }

    .adm-contact-list {
        text-align: left;
        width: 100%;
    }

    .adm-footer-inner {
        grid-template-columns: 1fr;
    }

    .adm-pay-grid {
        grid-template-columns: 1fr;
    }

    .adm-pay-summary {
        position: static;
    }
}

/* Phones (≤600) */
@media (max-width: 600px) {
    .adm-main {
        padding: 14px 10px;
        gap: 12px;
    }

    .adm-content-body {
        padding: 18px;
    }

    .adm-content-header {
        padding: 14px 18px;
    }

        .adm-content-header h1, .adm-content-header h2 {
            font-size: 1.05rem;
        }

    .adm-header-inner {
        padding: 14px 16px;
    }

    .adm-brand-name {
        font-size: 1.05rem;
    }

    .adm-brand-sub {
        font-size: .72rem;
    }

    .adm-step-label {
        display: none;
    }

    .adm-stepper {
        padding: 14px;
    }

    .adm-form-actions {
        flex-direction: column-reverse;
    }

        .adm-form-actions .adm-btn {
            width: 100%;
        }

    .adm-userbar-inner {
        padding: 8px 14px;
        gap: 8px;
        font-size: .78rem;
    }

    .adm-welcome-banner {
        padding: 18px 16px;
    }

    .adm-welcome-title {
        font-size: 1.3rem;
    }

    h1 {
        font-size: 1.4rem;
    }

    h2 {
        font-size: 1.2rem;
    }

    .adm-table {
        font-size: .82rem;
    }

        .adm-table th, .adm-table td {
            padding: 8px 10px;
        }

    .adm-review-section-head {
        padding: 10px 14px;
    }

        .adm-review-section-head h4 {
            font-size: .92rem;
        }

    .adm-review-table th {
        width: auto;
    }
}

/* Small phones / foldables (≤380) */
@media (max-width: 380px) {
    .adm-main {
        padding: 10px 6px;
    }

    .adm-content-body {
        padding: 14px;
    }

    .adm-sidebar-nav a {
        padding: 10px 12px;
        font-size: .82rem;
    }

    .adm-userbar-inner {
        font-size: .72rem;
    }

    .adm-welcome-title {
        font-size: 1.15rem;
    }
}

/* ============================================================
   UTILITIES
   ============================================================ */
.adm-mt-0 {
    margin-top: 0;
}

.adm-mt-2 {
    margin-top: 16px;
}

.adm-mb-2 {
    margin-bottom: 16px;
}

.adm-text-error {
    color: var(--adm-error);
}

.adm-text-muted {
    color: var(--adm-ink-soft);
}

.adm-text-sm {
    font-size: .82rem;
}

.adm-flex {
    display: flex;
    gap: 12px;
    align-items: center;
}


/* ============================================================
       NOTICES PAGE — refined, scannable, scholarly
       Aesthetic: warm cream + ink, gilded gold accents.
       Uses existing site palette (#b88f33 gold).
       ============================================================ */
/* ---------- Local CSS vars ---------- */
.notices-page {
    --gold: #b88f33;
    --gold-soft: #d9c089;
    --gold-tint: #f6efde;
    --gold-deep: #8a6a25;
    --ink: #c21010;
    --ink-2: #3d3d3d;
    --ink-soft: #6b6b6b;
    --line: #ebe4d3;
    --line-soft: #f1ece0;
    --paper: #fdfaf2;
    --paper-2: #faf5e8;
    --white: #ffffff;
    --shadow-sm: 0 2px 8px rgba(60, 42, 12, 0.04);
    --shadow-md: 0 8px 24px rgba(60, 42, 12, 0.08);
    --shadow-lg: 0 18px 40px rgba(184, 143, 51, 0.15);
    background: radial-gradient(900px 500px at 100% -100px, rgba(184,143,51,0.06), transparent 60%), radial-gradient(700px 400px at -10% 30%, rgba(184,143,51,0.04), transparent 60%), var(--paper);
}

.notices-wrap {
    max-width: 1180px;
    margin: 0 auto;
}
/* ---------- TOOLBAR: search + count ---------- */
.notices-toolbar {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 14px 16px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.notices-search {
    flex: 1 1 300px;
    position: relative;
}

    .notices-search i.fa-search {
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
        color: var(--gold);
        font-size: 14px;
    }

    .notices-search input {
        width: 100%;
        padding: 12px 42px 12px 42px;
        border: 1px solid var(--line);
        border-radius: 10px;
        font-family: inherit;
        font-size: 14.5px;
        background: var(--paper-2);
        color: var(--ink);
        transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
        outline: none;
    }

        .notices-search input::placeholder {
            color: #a89878;
        }

        .notices-search input:focus {
            border-color: var(--gold);
            background: var(--white);
            box-shadow: 0 0 0 4px rgba(184,143,51,0.10);
        }

    .notices-search .clear-btn {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        background: var(--line);
        color: var(--ink-2);
        border: none;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        line-height: 1;
        transition: background 0.2s;
    }

        .notices-search .clear-btn.visible {
            display: inline-flex;
        }

        .notices-search .clear-btn:hover {
            background: var(--gold);
            color: #fff;
        }

.notices-count {
    font-size: 13px;
    color: var(--ink-soft);
    letter-spacing: 0.3px;
    font-weight: 500;
    white-space: nowrap;
}

    .notices-count strong {
        color: var(--ink);
        font-weight: 700;
    }
/* ---------- CATEGORY FILTER CHIPS ---------- */
.notices-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 12px 14px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    align-items: center;
}

.filters-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-right: 4px;
    padding: 0 4px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid var(--line);
    background: var(--paper-2);
    color: var(--ink-2);
    transition: all 0.18s ease;
    font-family: inherit;
    user-select: none;
}

    .filter-chip:hover {
        border-color: var(--gold-soft);
        color: var(--gold-deep);
        background: var(--gold-tint);
        transform: translateY(-1px);
    }

    .filter-chip.is-active {
        background: var(--ink);
        color: var(--white);
        border-color: var(--ink);
        box-shadow: 0 6px 16px rgba(26,26,26,0.18);
    }

        .filter-chip.is-active .chip-count {
            background: var(--gold);
            color: #fff;
        }

.chip-count {
    background: var(--line);
    color: var(--ink-2);
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
}

.filter-chip:hover .chip-count {
    background: rgba(255,255,255,0.6);
    color: var(--gold-deep);
}
/* ---------- MONTH GROUP HEADER ---------- */
.month-group {
    margin-bottom: 34px;
}

.month-header {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 14px;
    padding: 0 2px 10px;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: linear-gradient(to bottom, var(--paper) 70%, rgba(253,250,242,0));
    z-index: 5;
    padding-top: 6px;
}

.month-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    letter-spacing: 0.5px;
}

.month-year {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 26px;
    font-weight: 400;
    color: var(--gold);
    font-style: italic;
}

.month-count {
    font-size: 11.5px;
    color: var(--ink-soft);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 600;
    margin-left: auto;
    background: var(--gold-tint);
    padding: 4px 12px;
    border-radius: 999px;
    align-self: center;
}
/* ---------- NOTICE CARD ---------- */
.notices-list {
    display: grid;
    gap: 14px;
}

.notice-item {
    display: grid;
    grid-template-columns: 78px 1fr auto;
    gap: 20px;
    padding: 22px 24px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s;
    position: relative;
    align-items: center;
}

    .notice-item:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        border-color: var(--gold-soft);
    }

    .notice-item.featured {
        background: linear-gradient(135deg, var(--gold-tint) 0%, var(--white) 55%);
        border-color: var(--gold-soft);
    }

        .notice-item.featured::before {
            content: 'NEW';
            position: absolute;
            top: -9px;
            left: 24px;
            font-size: 10.5px;
            font-weight: 800;
            letter-spacing: 2px;
            background: var(--ink);
            color: var(--gold-soft);
            padding: 3px 10px;
            border-radius: 4px;
        }
/* Date stamp (left) */
.notice-date-stamp {
    width: 78px;
    text-align: center;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 4px;
    overflow: hidden;
    font-family: 'Cormorant Garamond', Georgia, serif;
}

    .notice-date-stamp .month {
        display: block;
        font-size: 10.5px;
        letter-spacing: 2px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--gold-deep);
        font-family: 'Helvetica Neue', Arial, sans-serif;
        background: var(--gold-tint);
        margin: -10px -4px 6px;
        padding: 5px 4px 4px;
        border-bottom: 1px solid var(--gold-soft);
    }

    .notice-date-stamp .day {
        display: block;
        font-size: 30px;
        line-height: 1;
        font-weight: 700;
        color: var(--ink);
        margin-bottom: 2px;
    }

    .notice-date-stamp .year {
        display: block;
        font-size: 11px;
        letter-spacing: 1px;
        color: var(--ink-soft);
        font-family: 'Helvetica Neue', Arial, sans-serif;
        font-weight: 600;
    }
/* Body */
.notice-body {
    min-width: 0;
}

.notice-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.notice-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gold-tint);
    color: var(--gold-deep);
    padding: 3px 11px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 10px;
    border: 1px solid rgba(184,143,51,0.18);
}

    .notice-category i {
        font-size: 10px;
    }

.notice-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 21px;
    font-weight: 600;
    color: var(--ink);
    margin: 4px 0 8px;
    line-height: 1.3;
    letter-spacing: 0.2px;
}

.notice-summary {
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink-2);
    margin: 0;
}

    .notice-summary a {
        color: var(--gold-deep);
        text-decoration: none;
        font-weight: 600;
        border-bottom: 1px dashed var(--gold-soft);
    }

        .notice-summary a:hover {
            color: var(--gold);
            border-bottom-style: solid;
        }

/* ---------- PASSKEY (NDLI Club) ---------- */
.passkey-code {
    display: inline-block;
    font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
    font-size: 12.5px;
    letter-spacing: 0.2px;
    background: var(--ink);
    color: var(--gold-soft);
    padding: 3px 9px;
    border-radius: 5px;
    user-select: all;
    word-break: break-all;
}

.passkey-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 11px;
    margin-left: 4px;
    border-radius: 5px;
    border: 1px solid var(--gold-soft);
    background: var(--gold-tint);
    color: var(--gold-deep);
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

    .passkey-copy:hover {
        background: var(--gold);
        color: #fff;
        border-color: var(--gold);
    }

    .passkey-copy.is-copied {
        background: #1f7a44;
        border-color: #1f7a44;
        color: #fff;
    }

/* Actions (right) */
.notice-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    min-width: 132px;
}

.notice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 7px;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.notice-btn-primary {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
}

    .notice-btn-primary:hover {
        background: var(--gold);
        border-color: var(--gold);
        color:#fff;
        transform: translateY(-1px);
        box-shadow: 0 8px 16px rgba(184,143,51,0.28);
    }

.notice-btn-secondary {
    background: var(--white);
    color: var(--ink-2);
    border-color: var(--line);
}

    .notice-btn-secondary:hover {
        background: var(--gold-tint);
        color: var(--gold-deep);
        border-color: var(--gold-soft);
    }
/* PDF / image tag */
.file-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: var(--ink-soft);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-top: 2px;
    justify-content: center;
    font-weight: 600;
}

    .file-meta i {
        color: #d23a3a;
        font-size: 13px;
    }

    .file-meta.is-image i {
        color: var(--gold-deep);
    }
/* ---------- HIDDEN (search/filter) ---------- */
.notice-item.is-hidden,
.month-group.is-hidden {
    display: none;
}
/* ---------- ARCHIVE SECTION ---------- */
.archive-section {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 2px dashed var(--line);
}

.archive-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-2);
    letter-spacing: 0.5px;
    transition: all 0.2s;
    margin: 0 auto 24px;
}

    .archive-toggle:hover {
        background: var(--gold-tint);
        color: var(--gold-deep);
        border-color: var(--gold-soft);
    }

    .archive-toggle i {
        transition: transform 0.25s;
    }

    .archive-toggle.is-open i {
        transform: rotate(180deg);
    }

.archive-toggle-wrap {
    text-align: center;
}

.archive-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

    .archive-content.is-open {
        display: block;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ---------- NO RESULTS ---------- */
.no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--ink-soft);
    font-size: 15px;
    display: none;
    background: var(--white);
    border: 1px dashed var(--line);
    border-radius: 14px;
}

    .no-results.active {
        display: block;
    }

    .no-results i {
        font-size: 38px;
        color: var(--gold-soft);
        margin-bottom: 14px;
        display: block;
    }

    .no-results strong {
        color: var(--ink);
        display: block;
        margin-bottom: 4px;
        font-size: 17px;
    }

/* ============================================================
       NOTICE IMAGE LIGHTBOX
       ============================================================ */
.nb-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(20, 15, 6, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 74px 70px 90px;
    opacity: 0;
    transition: opacity 0.28s ease;
    user-select: none;
}

    .nb-lightbox.is-open {
        display: flex;
        opacity: 1;
    }

.nb-lb-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 100%;
    max-height: 100%;
}

.nb-lb-img {
    max-width: min(1000px, 92vw);
    max-height: 76vh;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: block;
}

    .nb-lb-img.is-loaded {
        opacity: 1;
        transform: scale(1);
    }

.nb-lb-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    width: 50px;
    height: 50px;
    border: 4px solid rgba(217, 192, 137, 0.25);
    border-top-color: #d9c089;
    border-radius: 50%;
    animation: nb-lb-spin 0.8s linear infinite;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

    .nb-lb-spinner.is-hidden {
        opacity: 0;
    }

@keyframes nb-lb-spin {
    to {
        transform: rotate(360deg);
    }
}

.nb-lb-caption {
    max-width: min(1000px, 92vw);
    text-align: center;
    color: #fff;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.5;
    padding: 0 16px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.nb-lb-counter {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #d9c089;
}

.nb-lb-btn {
    position: fixed;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    cursor: pointer;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
    z-index: 100001;
}

    .nb-lb-btn:hover {
        background: #b88f33;
        color: #fff;
        border-color: #b88f33;
    }

.nb-lb-close {
    top: 22px;
    right: 22px;
}

    .nb-lb-close:hover {
        transform: rotate(90deg);
    }

.nb-lb-prev {
    top: 50%;
    left: 22px;
    transform: translateY(-50%);
}

.nb-lb-next {
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
}

.nb-lb-prev:hover {
    transform: translateY(-50%) translateX(-3px);
}

.nb-lb-next:hover {
    transform: translateY(-50%) translateX(3px);
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 820px) {
    .notice-item {
        grid-template-columns: 64px 1fr;
        grid-template-rows: auto auto;
        gap: 14px 16px;
        padding: 18px 18px;
    }

    .notice-date-stamp {
        width: 64px;
        padding: 8px 4px;
    }

        .notice-date-stamp .day {
            font-size: 24px;
        }

    .notice-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-start;
        min-width: 0;
    }

        .notice-actions .notice-btn {
            flex: 1 1 auto;
        }

    .file-meta {
        display: none;
    }

    .notice-title {
        font-size: 18px;
    }

    .month-title, .month-year {
        font-size: 21px;
    }

    .month-header {
        position: static;
    }

    .nb-lightbox {
        padding: 60px 14px 76px;
    }

    .nb-lb-btn {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .nb-lb-close {
        top: 12px;
        right: 12px;
    }

    .nb-lb-prev {
        left: 8px;
    }

    .nb-lb-next {
        right: 8px;
    }

    .nb-lb-caption {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .notice-item.featured::before {
        left: 14px;
    }

    .notice-actions {
        flex-wrap: wrap;
    }

    .filters-label {
        width: 100%;
        margin-bottom: 4px;
    }

    .passkey-code {
        font-size: 11.5px;
    }
}

<style >
/* ============ IQAC — iqac- prefix ============ */
/* HERO */
.iqac-hero {
    background: linear-gradient(135deg, #1a2c4e 0%, #2a416f 100%);
    color: #fff;
    padding: 65px 0 75px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.iqac-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(212,168,71,0.18) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(139,17,19,0.18) 0%, transparent 45%);
    pointer-events: none;
}

.iqac-hero::after {
    content: '\f559';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    font-size: 240px;
    color: rgba(212,168,71,0.06);
    top: -10px;
    right: -20px;
    line-height: 1;
    transform: rotate(-12deg);
    pointer-events: none;
}

.iqac-hero .container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.iqac-hero .iqac-emblem {
    width: 90px;
    height: 90px;
    margin: 0 auto 22px;
    background: rgba(255,255,255,0.1);
    border: 2px solid #d4a847;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4a847;
    font-size: 38px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.25), 0 0 0 6px rgba(212,168,71,0.12);
}

.iqac-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 44px;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: 0.5px;
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.iqac-hero .iqac-motto {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #f5d989 !important;
    margin: 0;
}

.iqac-hero .iqac-sub {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85) !important;
    margin: 8px 0 0;
}

.iqac-hero .iqac-divider {
    width: 80px;
    height: 3px;
    background: #d4a847;
    margin: 20px auto;
    border-radius: 2px;
}

.iqac-hero .iqac-est-pill {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: rgba(212,168,71,0.18);
    border: 2px solid #d4a847;
    padding: 12px 26px;
    border-radius: 30px;
    margin-top: 20px;
}

    .iqac-hero .iqac-est-pill .iqac-pill-icon {
        width: 32px;
        height: 32px;
        background: #d4a847;
        color: #1a2c4e;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    .iqac-hero .iqac-est-pill .iqac-pill-text {
        text-align: left;
        line-height: 1.2;
    }

    .iqac-hero .iqac-est-pill .iqac-pill-label {
        display: block;
        font-size: 10.5px;
        letter-spacing: 1.8px;
        text-transform: uppercase;
        color: #f5d989;
        font-weight: 600;
    }

    .iqac-hero .iqac-est-pill .iqac-pill-val {
        display: block;
        font-size: 14.5px;
        font-weight: 700;
        color: #ffffff;
        font-family: 'Inter', sans-serif;
        letter-spacing: 0.5px;
    }
/* BREADCRUMB */
.iqac-breadcrumb {
    background: #f7f8fa;
    padding: 14px 0;
    border-bottom: 1px solid #e6e9ee;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: #555;
}

    .iqac-breadcrumb .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .iqac-breadcrumb a {
        color: #8b1113;
        text-decoration: none;
        font-weight: 600;
    }

        .iqac-breadcrumb a:hover {
            text-decoration: underline;
        }

    .iqac-breadcrumb .sep {
        margin: 0 8px;
        color: #aaa;
    }

    .iqac-breadcrumb .current {
        color: #1a2c4e;
        font-weight: 600;
    }
/* ============ TAB BAR — clean 5+5 grid, no scrollbar ============
       10 tabs split into two equal rows of 5 tabs each.
       Using CSS grid for precise control — every tab gets equal width,
       aligned to a clean grid with subtle separators.
       ================================================================ */
.iqac-tabs-wrap {
    background: #fff;
    border-bottom: 1px solid #e6e9ee;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 14px rgba(26,44,78,0.06);
    font-family: 'Inter', sans-serif;
}

    .iqac-tabs-wrap .container {
        max-width: 1340px;
        margin: 0 auto;
        padding: 0 16px;
    }

.iqac-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* exactly 5 tabs per row */
    gap: 0;
    padding: 0;
}

.iqac-tab {
    padding: 16px 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: #6b7484;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    border-right: 1px solid #f0f2f6;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.3px;
    text-align: center;
    min-width: 0; /* allow content to shrink in grid cell */
    overflow: hidden;
    text-overflow: ellipsis;
}
    /* Remove right border on last tab of each row (5th, 10th) */
    .iqac-tab:nth-child(5n) {
        border-right: 0;
    }
    /* Top row separator below 1st 5 tabs */
    .iqac-tab:nth-child(-n+5) {
        border-bottom: 3px solid transparent;
    }
    /* Subtle horizontal divider between row 1 and row 2 */
    .iqac-tab:nth-child(n+6) {
        border-top: 1px solid #f0f2f6;
    }

    .iqac-tab i {
        color: #8b1113;
        font-size: 13px;
        transition: color 0.25s ease;
        flex-shrink: 0;
    }

    .iqac-tab:hover {
        color: #1a2c4e;
        background: #fafbfd;
    }

    .iqac-tab.is-active {
        color: #1a2c4e;
        border-bottom-color: #d4a847;
        background: linear-gradient(180deg, transparent 0%, rgba(212,168,71,0.08) 100%);
    }

        .iqac-tab.is-active i {
            color: #d4a847;
        }
/* Responsive: 2 tabs per row on tablets (5 rows × 2 = 10 perfect),
       1 on mobile */
@media (max-width: 1100px) {
    .iqac-tabs {
        grid-template-columns: repeat(2, 1fr);
    }

    .iqac-tab {
        font-size: 12px;
        padding: 13px 8px;
    }

        .iqac-tab:nth-child(5n) {
            border-right: 1px solid #f0f2f6;
        }

        .iqac-tab:nth-child(2n) {
            border-right: 0;
        }

        .iqac-tab:nth-child(n+3) {
            border-top: 1px solid #f0f2f6;
        }

        .iqac-tab:nth-child(-n+2) {
            border-top: 0;
        }
}

@media (max-width: 480px) {
    .iqac-tabs {
        grid-template-columns: 1fr;
    }

    .iqac-tab {
        border-right: 0 !important;
        border-top: 1px solid #f0f2f6 !important;
        padding: 12px 8px;
    }

        .iqac-tab:first-child {
            border-top: 0 !important;
        }
}
/* ============ PANEL BASE ============ */
.iqac-panel {
    display: none;
    padding: 65px 0;
    background: #ffffff;
    font-family: 'Inter', sans-serif;
    color: #2c3852;
}

    .iqac-panel.is-active {
        display: block;
        animation: iqac-fade 0.4s ease;
    }

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

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

.iqac-panel.alt {
    background: linear-gradient(180deg, #f9fafc 0%, #f3f5f9 100%);
}

.iqac-panel .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
/* PANEL HEADER */
.iqac-panel-header {
    text-align: center;
    margin: 0 auto 45px;
    max-width: 800px;
}

.iqac-panel-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: linear-gradient(135deg, #fdf6e7 0%, #fbf0d2 100%);
    color: #8b1113;
    border: 1px solid #f0e1b5;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

    .iqac-panel-eyebrow i {
        font-size: 11px;
    }

.iqac-panel-title {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    color: #1a2c4e;
    margin: 0 0 12px;
    font-weight: 700;
    line-height: 1.2;
}

.iqac-panel-sub {
    font-size: 15.5px;
    color: #5a6478;
    margin: 0;
    line-height: 1.7;
}

.iqac-title-underline {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #8b1113 0%, #d4a847 100%);
    margin: 16px auto 18px;
    border-radius: 2px;
}
/* ABOUT CARD */
.iqac-about {
    background: #ffffff;
    border: 1px solid #e6e9ee;
    border-left: 4px solid #d4a847;
    padding: 32px 36px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(26,44,78,0.06);
    font-size: 15.5px;
    line-height: 1.85;
    color: #34425e;
    margin: 0 auto 35px;
    max-width: 1020px;
    position: relative;
}

    .iqac-about::before {
        content: '\f10d';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        top: 14px;
        right: 22px;
        font-size: 32px;
        color: rgba(212,168,71,0.18);
    }

    .iqac-about strong {
        color: #1a2c4e;
        font-weight: 700;
    }
/* FUNCTIONS LIST */
.iqac-functions {
    background: #ffffff;
    border: 1px solid #e6e9ee;
    border-left: 4px solid #8b1113;
    padding: 30px 36px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(26,44,78,0.06);
    margin: 0 auto 40px;
    max-width: 1020px;
}

.iqac-functions-title {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    color: #1a2c4e;
    margin: 0 0 18px;
    font-weight: 700;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0e1b5;
}

.iqac-functions-list {
    padding-left: 22px;
    margin: 0;
    color: #34425e;
    font-size: 14.5px;
    line-height: 1.85;
}

    .iqac-functions-list li {
        margin-bottom: 10px;
        padding-left: 6px;
    }

        .iqac-functions-list li::marker {
            color: #8b1113;
            font-weight: 700;
        }
/* PILLAR CARDS */
.iqac-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    max-width: 1140px;
    margin: 0 auto;
}

.iqac-pillar {
    background: #ffffff;
    border-radius: 12px;
    padding: 28px 24px;
    border: 1px solid #e6e9ee;
    box-shadow: 0 4px 14px rgba(26,44,78,0.06);
    border-top: 4px solid #d4a847;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    position: relative;
}

    .iqac-pillar:nth-child(2n) {
        border-top-color: #8b1113;
    }

    .iqac-pillar:nth-child(3n) {
        border-top-color: #2e8b57;
    }

    .iqac-pillar:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 32px rgba(26,44,78,0.14);
    }

    .iqac-pillar .iqac-pillar-icon {
        width: 62px;
        height: 62px;
        margin: 0 auto 14px;
        background: linear-gradient(135deg, #fdf6e7 0%, #fbf0d2 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #b8862a;
        font-size: 24px;
        border: 2px solid #f0e1b5;
    }

    .iqac-pillar:nth-child(2n) .iqac-pillar-icon {
        background: linear-gradient(135deg, rgba(139,17,19,0.08) 0%, rgba(165,42,42,0.12) 100%);
        border-color: rgba(139,17,19,0.2);
        color: #8b1113;
    }

    .iqac-pillar:nth-child(3n) .iqac-pillar-icon {
        background: linear-gradient(135deg, rgba(34,139,34,0.08) 0%, rgba(46,139,87,0.12) 100%);
        border-color: rgba(34,139,34,0.2);
        color: #2e8b57;
    }

    .iqac-pillar h4 {
        font-family: 'Playfair Display', serif;
        font-size: 17px;
        color: #1a2c4e;
        margin: 0 0 10px;
        font-weight: 700;
    }

    .iqac-pillar p {
        font-size: 13.5px;
        color: #5a6478;
        margin: 0;
        line-height: 1.65;
    }
/* INTRO PANEL (gold-toned) */
.iqac-intro-panel {
    background: linear-gradient(135deg, #fdf6e7 0%, #fbefcc 100%);
    border-left: 4px solid #d4a847;
    border-radius: 10px;
    padding: 24px 30px;
    max-width: 1100px;
    margin: 0 auto 35px;
    font-size: 14.5px;
    line-height: 1.75;
    color: #5a4a1c;
    box-shadow: 0 4px 14px rgba(212,168,71,0.12);
}

    .iqac-intro-panel strong {
        color: #1a2c4e;
        font-weight: 700;
    }

    .iqac-intro-panel i.intro-icon {
        color: #b8862a;
        margin-right: 8px;
        font-size: 16px;
    }
/* STATS STRIP */
.iqac-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto 35px;
}

.iqac-stat {
    background: #ffffff;
    border-radius: 10px;
    padding: 22px 16px;
    text-align: center;
    border: 1px solid #e6e9ee;
    box-shadow: 0 4px 12px rgba(26,44,78,0.06);
    transition: transform 0.25s ease;
}

    .iqac-stat:hover {
        transform: translateY(-3px);
    }

    .iqac-stat .iqac-stat-icon {
        width: 44px;
        height: 44px;
        margin: 0 auto 10px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        background: linear-gradient(135deg, #fdf6e7 0%, #fbf0d2 100%);
        color: #b8862a;
        border: 2px solid #f0e1b5;
    }

    .iqac-stat .iqac-stat-num {
        font-family: 'Playfair Display', serif;
        font-size: 28px;
        font-weight: 700;
        color: #1a2c4e;
        line-height: 1.1;
    }

    .iqac-stat .iqac-stat-label {
        font-size: 11.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: #6b7484;
        margin-top: 5px;
    }
/* YEAR CARDS */
.iqac-year-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
}

.iqac-year-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px 24px 20px;
    border: 1px solid #e6e9ee;
    box-shadow: 0 4px 14px rgba(26,44,78,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .iqac-year-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, transparent 0%, #d4a847 50%, transparent 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .iqac-year-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 30px rgba(26,44,78,0.12);
        border-color: #d4a847;
    }

        .iqac-year-card:hover::before {
            opacity: 1;
        }

    .iqac-year-card.latest {
        border-top: 3px solid #d4a847;
        padding-top: 21px;
    }

        .iqac-year-card.latest::after {
            content: 'LATEST';
            position: absolute;
            top: 14px;
            right: 14px;
            background: linear-gradient(135deg, #d4a847 0%, #b8862a 100%);
            color: #ffffff;
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: 1.2px;
            padding: 4px 10px;
            border-radius: 12px;
            box-shadow: 0 2px 6px rgba(184,134,42,0.3);
        }

    .iqac-year-card .iqac-year-tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        padding: 4px 12px;
        background: linear-gradient(135deg, #fdf6e7 0%, #fbf0d2 100%);
        color: #8b1113;
        border: 1px solid #f0e1b5;
        border-radius: 14px;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        font-weight: 700;
        margin-bottom: 14px;
    }

        .iqac-year-card .iqac-year-tag i {
            font-size: 10px;
        }

    .iqac-year-card h5 {
        font-family: 'Playfair Display', serif;
        font-size: 17px;
        color: #1a2c4e;
        margin: 0 0 8px;
        font-weight: 700;
        line-height: 1.4;
    }

    .iqac-year-card .iqac-year-meta {
        font-size: 12px;
        color: #6b7484;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        padding: 8px 0;
        border-top: 1px dashed #e6e9ee;
        border-bottom: 1px dashed #e6e9ee;
    }

        .iqac-year-card .iqac-year-meta span {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .iqac-year-card .iqac-year-meta i {
            color: #b8862a;
            font-size: 11px;
        }

    .iqac-year-card .iqac-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
/* ACTION BUTTONS */
.iqac-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    border: 0;
    cursor: pointer;
}

    .iqac-btn.view {
        background: linear-gradient(135deg, #1a2c4e 0%, #2a416f 100%);
        color: #ffffff;
        box-shadow: 0 2px 8px rgba(26,44,78,0.2);
    }

        .iqac-btn.view:hover {
            background: linear-gradient(135deg, #2a416f 0%, #3a5188 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(26,44,78,0.3);
        }

    .iqac-btn.download {
        background: linear-gradient(135deg, #d4a847 0%, #c19735 100%);
        color: #1a2c4e;
        box-shadow: 0 2px 8px rgba(212,168,71,0.3);
    }

        .iqac-btn.download:hover {
            background: linear-gradient(135deg, #e9bc5a 0%, #d4a847 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(212,168,71,0.4);
        }

    .iqac-btn.icon-only {
        padding: 9px 12px;
    }
/* HIGHLIGHT CTA — used in NAAC Committee, IDP, Policy */
.iqac-highlight {
    background: linear-gradient(135deg, #1a2c4e 0%, #2a416f 100%);
    color: #ffffff;
    border-radius: 14px;
    padding: 40px 42px;
    max-width: 1080px;
    margin: 0 auto;
    box-shadow: 0 14px 36px rgba(26,44,78,0.22);
    border: 1px solid rgba(212,168,71,0.4);
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 28px;
    align-items: center;
}

    .iqac-highlight::before {
        content: '\f5da';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        top: -30px;
        right: -25px;
        font-size: 240px;
        color: rgba(212,168,71,0.08);
        line-height: 1;
        transform: rotate(-12deg);
    }

    .iqac-highlight .iqac-hl-icon {
        width: 86px;
        height: 86px;
        background: rgba(212,168,71,0.2);
        border: 3px solid #d4a847;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f5d989;
        font-size: 34px;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
        box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    }

    .iqac-highlight > div {
        position: relative;
        z-index: 1;
        flex: 1;
    }

    .iqac-highlight .iqac-hl-tag {
        display: inline-block;
        font-size: 11.5px;
        color: #f5d989;
        text-transform: uppercase;
        letter-spacing: 1.6px;
        font-weight: 700;
        margin-bottom: 8px;
        padding: 4px 12px;
        background: rgba(212,168,71,0.15);
        border: 1px solid rgba(212,168,71,0.4);
        border-radius: 14px;
    }

    .iqac-highlight h3 {
        font-family: 'Playfair Display', serif;
        font-size: 24px;
        margin: 0 0 12px;
        color: #ffffff !important;
        font-weight: 700;
        line-height: 1.3;
    }

    .iqac-highlight p {
        margin: 0 0 18px;
        font-size: 14.5px;
        line-height: 1.7;
        color: rgba(255,255,255,0.92) !important;
    }

    .iqac-highlight .iqac-hl-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(135deg, #d4a847 0%, #c19735 100%);
        color: #1a2c4e;
        padding: 12px 24px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        transition: all 0.25s ease;
        margin-right: 10px;
        box-shadow: 0 3px 10px rgba(212,168,71,0.3);
    }

        .iqac-highlight .iqac-hl-btn:hover {
            background: linear-gradient(135deg, #e9bc5a 0%, #d4a847 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(212,168,71,0.45);
        }

        .iqac-highlight .iqac-hl-btn.outline {
            background: transparent;
            color: #f5d989;
            border: 2px solid #d4a847;
            box-shadow: none;
        }

            .iqac-highlight .iqac-hl-btn.outline:hover {
                background: rgba(212,168,71,0.18);
                color: #ffffff;
            }
/* DOC FEATURE — gold themed */
.iqac-doc-feature {
    background: linear-gradient(135deg, #fdf6e7 0%, #fbefcc 100%);
    border-radius: 14px;
    padding: 38px 40px;
    max-width: 1000px;
    margin: 0 auto;
    border-left: 5px solid #d4a847;
    box-shadow: 0 8px 24px rgba(26,44,78,0.08);
    display: flex;
    gap: 28px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

    .iqac-doc-feature::before {
        content: '\f1c1';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        top: -30px;
        right: -10px;
        font-size: 220px;
        color: rgba(139,17,19,0.06);
        line-height: 1;
        transform: rotate(-12deg);
    }

    .iqac-doc-feature .iqac-feat-icon {
        width: 76px;
        height: 76px;
        background: linear-gradient(135deg, #8b1113 0%, #a52a2a 100%);
        color: #ffffff;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        flex-shrink: 0;
        box-shadow: 0 6px 18px rgba(139,17,19,0.3);
        position: relative;
        z-index: 1;
    }

    .iqac-doc-feature > div {
        position: relative;
        z-index: 1;
        flex: 1;
    }

    .iqac-doc-feature .iqac-feat-tag {
        display: inline-block;
        font-size: 11px;
        color: #8b1113;
        text-transform: uppercase;
        letter-spacing: 1.3px;
        font-weight: 700;
        margin-bottom: 6px;
        padding: 3px 10px;
        background: rgba(139,17,19,0.08);
        border: 1px solid rgba(139,17,19,0.2);
        border-radius: 12px;
    }

    .iqac-doc-feature h4 {
        font-family: 'Playfair Display', serif;
        font-size: 22px;
        color: #1a2c4e;
        margin: 0 0 10px;
        font-weight: 700;
    }

    .iqac-doc-feature p {
        margin: 0 0 18px;
        font-size: 14.5px;
        line-height: 1.7;
        color: #5a4a1c;
    }

    .iqac-doc-feature .iqac-feat-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
/* DOC LIST — Minutes/ATR style */
.iqac-doc-list {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.iqac-doc-row {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px 26px;
    border: 1px solid #e6e9ee;
    box-shadow: 0 4px 12px rgba(26,44,78,0.05);
    display: flex;
    align-items: center;
    gap: 22px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

    .iqac-doc-row:hover {
        transform: translateX(6px);
        box-shadow: 0 10px 26px rgba(26,44,78,0.12);
        border-color: #d4a847;
        border-left: 3px solid #d4a847;
        padding-left: 23px;
    }

    .iqac-doc-row .iqac-row-icon {
        width: 52px;
        height: 52px;
        background: linear-gradient(135deg, #1a2c4e 0%, #2a416f 100%);
        color: #d4a847;
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(26,44,78,0.18);
    }

    .iqac-doc-row .iqac-row-body {
        flex: 1;
    }

    .iqac-doc-row .iqac-row-tag {
        display: inline-block;
        font-size: 10.5px;
        padding: 3px 10px;
        background: linear-gradient(135deg, #fdf6e7 0%, #fbf0d2 100%);
        color: #8b1113;
        border: 1px solid #f0e1b5;
        border-radius: 12px;
        text-transform: uppercase;
        letter-spacing: 0.7px;
        font-weight: 700;
        margin-bottom: 7px;
    }

    .iqac-doc-row h5 {
        font-family: 'Playfair Display', serif;
        font-size: 17px;
        color: #1a2c4e;
        margin: 0 0 5px;
        font-weight: 700;
        line-height: 1.4;
    }

    .iqac-doc-row .iqac-row-meta {
        font-size: 12px;
        color: #6b7484;
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

        .iqac-doc-row .iqac-row-meta span {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .iqac-doc-row .iqac-row-meta i {
            color: #b8862a;
            font-size: 11px;
        }

    .iqac-doc-row .iqac-row-actions {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
    }
/* SUB-HEADING inside a panel */
.iqac-subhead {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    color: #1a2c4e;
    text-align: center;
    margin: 50px auto 26px;
    font-weight: 700;
    max-width: 900px;
    position: relative;
    padding: 22px 0 0;
}

    .iqac-subhead::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 3px;
        background: linear-gradient(90deg, #8b1113 0%, #d4a847 100%);
        border-radius: 2px;
    }

    .iqac-subhead i {
        color: #8b1113;
        margin-right: 10px;
        font-size: 18px;
    }
/* RESPONSIVE */
@media (max-width: 900px) {
    .iqac-hero h1 {
        font-size: 32px;
    }

    .iqac-panel-title {
        font-size: 26px;
    }

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

    .iqac-highlight, .iqac-doc-feature, .iqac-doc-row {
        flex-direction: column;
        text-align: center;
    }

        .iqac-doc-row:hover {
            transform: translateY(-3px);
            padding-left: 26px;
            border-left: 1px solid #d4a847;
        }

    .iqac-about::before {
        display: none;
    }
}


/* PANEL BASE */
.naac-panel {
    display: none;
    padding: 65px 0;
    background: #ffffff;
    font-family: 'Inter', sans-serif;
    color: #2c3852;
}

    .naac-panel.is-active {
        display: block;
        animation: naac-fade 0.4s ease;
    }

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

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

.naac-panel.alt {
    background: linear-gradient(180deg, #f9fafc 0%, #f3f5f9 100%);
}

.naac-panel .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* PANEL HEADER */
.naac-panel-header {
    text-align: center;
    margin: 0 auto 45px;
    max-width: 800px;
}

.naac-panel-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: linear-gradient(135deg, #fdf6e7 0%, #fbf0d2 100%);
    color: #8b1113;
    border: 1px solid #f0e1b5;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

    .naac-panel-eyebrow i {
        font-size: 11px;
    }

.naac-panel-title {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    color: #1a2c4e;
    margin: 0 0 12px;
    font-weight: 700;
    line-height: 1.2;
}

.naac-panel-sub {
    font-size: 15.5px;
    color: #5a6478;
    margin: 0;
    line-height: 1.7;
}

.naac-title-underline {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #8b1113 0%, #d4a847 100%);
    margin: 16px auto 18px;
    border-radius: 2px;
}

/* INTRO PANEL */
.naac-intro-panel {
    background: linear-gradient(135deg, #fdf6e7 0%, #fbefcc 100%);
    border-left: 4px solid #d4a847;
    border-radius: 10px;
    padding: 24px 30px;
    max-width: 1100px;
    margin: 0 auto 35px;
    font-size: 14.5px;
    line-height: 1.75;
    color: #5a4a1c;
    box-shadow: 0 4px 14px rgba(212,168,71,0.12);
}

    .naac-intro-panel strong {
        color: #1a2c4e;
        font-weight: 700;
    }

    .naac-intro-panel i.intro-icon {
        color: #b8862a;
        margin-right: 8px;
        font-size: 16px;
    }

/* STATS STRIP */
.naac-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto 35px;
}

.naac-stat {
    background: #ffffff;
    border-radius: 10px;
    padding: 22px 16px;
    text-align: center;
    border: 1px solid #e6e9ee;
    box-shadow: 0 4px 12px rgba(26,44,78,0.06);
    transition: transform 0.25s ease;
}

    .naac-stat:hover {
        transform: translateY(-3px);
    }

    .naac-stat .naac-stat-icon {
        width: 44px;
        height: 44px;
        margin: 0 auto 10px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        background: linear-gradient(135deg, #fdf6e7 0%, #fbf0d2 100%);
        color: #b8862a;
        border: 2px solid #f0e1b5;
    }

    .naac-stat .naac-stat-num {
        font-family: 'Playfair Display', serif;
        font-size: 28px;
        font-weight: 700;
        color: #1a2c4e;
        line-height: 1.1;
    }

    .naac-stat .naac-stat-label {
        font-size: 11.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: #6b7484;
        margin-top: 5px;
    }

/* YEAR / DOC CARDS */
.naac-year-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
}

.naac-year-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px 24px 20px;
    border: 1px solid #e6e9ee;
    box-shadow: 0 4px 14px rgba(26,44,78,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .naac-year-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, transparent 0%, #d4a847 50%, transparent 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .naac-year-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 30px rgba(26,44,78,0.12);
        border-color: #d4a847;
    }

        .naac-year-card:hover::before {
            opacity: 1;
        }

    .naac-year-card.latest {
        border-top: 3px solid #d4a847;
        padding-top: 21px;
    }

        .naac-year-card.latest::after {
            content: 'LATEST';
            position: absolute;
            top: 14px;
            right: 14px;
            background: linear-gradient(135deg, #d4a847 0%, #b8862a 100%);
            color: #ffffff;
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: 1.2px;
            padding: 4px 10px;
            border-radius: 12px;
            box-shadow: 0 2px 6px rgba(184,134,42,0.3);
        }

    .naac-year-card .naac-year-tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        padding: 4px 12px;
        background: linear-gradient(135deg, #fdf6e7 0%, #fbf0d2 100%);
        color: #8b1113;
        border: 1px solid #f0e1b5;
        border-radius: 14px;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        font-weight: 700;
        margin-bottom: 14px;
    }

        .naac-year-card .naac-year-tag i {
            font-size: 10px;
        }

    .naac-year-card h5 {
        font-family: 'Playfair Display', serif;
        font-size: 17px;
        color: #1a2c4e;
        margin: 0 0 8px;
        font-weight: 700;
        line-height: 1.4;
    }

    .naac-year-card .naac-year-meta {
        font-size: 12px;
        color: #6b7484;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        padding: 8px 0;
        border-top: 1px dashed #e6e9ee;
        border-bottom: 1px dashed #e6e9ee;
    }

        .naac-year-card .naac-year-meta span {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .naac-year-card .naac-year-meta i {
            color: #b8862a;
            font-size: 11px;
        }

    .naac-year-card .naac-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

/* ACTION BUTTONS */
.naac-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    border: 0;
    cursor: pointer;
}

    .naac-btn.view {
        background: linear-gradient(135deg, #1a2c4e 0%, #2a416f 100%);
        color: #ffffff;
        box-shadow: 0 2px 8px rgba(26,44,78,0.2);
    }

        .naac-btn.view:hover {
            background: linear-gradient(135deg, #2a416f 0%, #3a5188 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(26,44,78,0.3);
        }

    .naac-btn.download {
        background: linear-gradient(135deg, #d4a847 0%, #c19735 100%);
        color: #1a2c4e;
        box-shadow: 0 2px 8px rgba(212,168,71,0.3);
    }

        .naac-btn.download:hover {
            background: linear-gradient(135deg, #e9bc5a 0%, #d4a847 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(212,168,71,0.4);
        }

    .naac-btn.icon-only {
        padding: 9px 12px;
    }

/* HIGHLIGHT CTA */
.naac-highlight {
    background: linear-gradient(135deg, #1a2c4e 0%, #2a416f 100%);
    color: #ffffff;
    border-radius: 14px;
    padding: 40px 42px;
    max-width: 1080px;
    margin: 0 auto;
    box-shadow: 0 14px 36px rgba(26,44,78,0.22);
    border: 1px solid rgba(212,168,71,0.4);
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 28px;
    align-items: center;
}

    .naac-highlight::before {
        content: '\f5da';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        top: -30px;
        right: -25px;
        font-size: 240px;
        color: rgba(212,168,71,0.08);
        line-height: 1;
        transform: rotate(-12deg);
    }

    .naac-highlight .naac-hl-icon {
        width: 86px;
        height: 86px;
        background: rgba(212,168,71,0.2);
        border: 3px solid #d4a847;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f5d989;
        font-size: 34px;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
        box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    }

    .naac-highlight > div {
        position: relative;
        z-index: 1;
        flex: 1;
    }

    .naac-highlight .naac-hl-tag {
        display: inline-block;
        font-size: 11.5px;
        color: #f5d989;
        text-transform: uppercase;
        letter-spacing: 1.6px;
        font-weight: 700;
        margin-bottom: 8px;
        padding: 4px 12px;
        background: rgba(212,168,71,0.15);
        border: 1px solid rgba(212,168,71,0.4);
        border-radius: 14px;
    }

    .naac-highlight h3 {
        font-family: 'Playfair Display', serif;
        font-size: 24px;
        margin: 0 0 12px;
        color: #ffffff !important;
        font-weight: 700;
        line-height: 1.3;
    }

    .naac-highlight p {
        margin: 0 0 18px;
        font-size: 14.5px;
        line-height: 1.7;
        color: rgba(255,255,255,0.92) !important;
    }

    .naac-highlight .naac-hl-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(135deg, #d4a847 0%, #c19735 100%);
        color: #1a2c4e;
        padding: 12px 24px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        transition: all 0.25s ease;
        margin-right: 10px;
        box-shadow: 0 3px 10px rgba(212,168,71,0.3);
    }

        .naac-highlight .naac-hl-btn:hover {
            background: linear-gradient(135deg, #e9bc5a 0%, #d4a847 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(212,168,71,0.45);
        }

        .naac-highlight .naac-hl-btn.outline {
            background: transparent;
            color: #f5d989;
            border: 2px solid #d4a847;
            box-shadow: none;
        }

            .naac-highlight .naac-hl-btn.outline:hover {
                background: rgba(212,168,71,0.18);
                color: #ffffff;
            }

/* SUB-HEADING */
.naac-subhead {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    color: #1a2c4e;
    text-align: center;
    margin: 50px auto 26px;
    font-weight: 700;
    max-width: 900px;
    position: relative;
    padding: 22px 0 0;
}

    .naac-subhead::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 3px;
        background: linear-gradient(90deg, #8b1113 0%, #d4a847 100%);
        border-radius: 2px;
    }

    .naac-subhead i {
        color: #8b1113;
        margin-right: 10px;
        font-size: 18px;
    }

/* DOC LIST — used for supporting documents */
.naac-doc-list {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.naac-doc-row {
    background: #ffffff;
    border-radius: 10px;
    padding: 16px 22px;
    border: 1px solid #e6e9ee;
    box-shadow: 0 3px 10px rgba(26,44,78,0.04);
    display: flex;
    align-items: center;
    gap: 18px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

    .naac-doc-row:hover {
        transform: translateX(6px);
        box-shadow: 0 10px 24px rgba(26,44,78,0.1);
        border-color: #d4a847;
        border-left: 3px solid #d4a847;
        padding-left: 19px;
    }

    .naac-doc-row .naac-row-icon {
        width: 44px;
        height: 44px;
        background: linear-gradient(135deg, #1a2c4e 0%, #2a416f 100%);
        color: #d4a847;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        flex-shrink: 0;
        box-shadow: 0 3px 10px rgba(26,44,78,0.15);
    }

    .naac-doc-row .naac-row-body {
        flex: 1;
        min-width: 0;
    }

    .naac-doc-row .naac-row-tag {
        display: inline-block;
        font-size: 10px;
        padding: 2px 9px;
        background: linear-gradient(135deg, #fdf6e7 0%, #fbf0d2 100%);
        color: #8b1113;
        border: 1px solid #f0e1b5;
        border-radius: 10px;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .naac-doc-row h5 {
        font-family: 'Playfair Display', serif;
        font-size: 15.5px;
        color: #1a2c4e;
        margin: 0;
        font-weight: 700;
        line-height: 1.4;
        word-break: break-word;
    }

    .naac-doc-row .naac-row-actions {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
    }

/* CRITERION BANNER */
.naac-criterion-banner {
    background: linear-gradient(135deg, #1a2c4e 0%, #2a416f 100%);
    color: #fff;
    border-radius: 14px;
    padding: 30px 36px;
    margin: 0 auto 24px;
    max-width: 1100px;
    box-shadow: 0 10px 28px rgba(26,44,78,0.18);
    border: 1px solid rgba(212,168,71,0.3);
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 24px;
    align-items: center;
}

    .naac-criterion-banner::before {
        content: '';
        position: absolute;
        top: -50px;
        right: -50px;
        width: 250px;
        height: 250px;
        background: radial-gradient(circle, rgba(139,17,19,0.4) 0%, transparent 70%);
    }

    .naac-criterion-banner .naac-cr-num {
        width: 80px;
        height: 80px;
        background: rgba(212,168,71,0.2);
        border: 3px solid #d4a847;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Playfair Display', serif;
        font-size: 34px;
        font-weight: 700;
        color: #f5d989;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
        box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    }

    .naac-criterion-banner > .naac-cr-body {
        position: relative;
        z-index: 1;
        flex: 1;
    }

    .naac-criterion-banner .naac-cr-tag {
        display: inline-block;
        font-size: 10.5px;
        color: #f5d989;
        text-transform: uppercase;
        letter-spacing: 1.4px;
        font-weight: 700;
        margin-bottom: 6px;
        padding: 3px 10px;
        background: rgba(212,168,71,0.15);
        border: 1px solid rgba(212,168,71,0.4);
        border-radius: 12px;
    }

    .naac-criterion-banner h3 {
        font-family: 'Playfair Display', serif;
        font-size: 22px;
        margin: 0 0 6px;
        color: #fff !important;
        font-weight: 700;
        line-height: 1.25;
    }

    .naac-criterion-banner .naac-cr-sub {
        font-size: 13.5px;
        color: rgba(255,255,255,0.85);
        margin: 0 0 14px;
        line-height: 1.5;
    }

    .naac-criterion-banner .naac-cr-action {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(135deg, #d4a847 0%, #c19735 100%);
        color: #1a2c4e;
        padding: 9px 18px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.25s ease;
        box-shadow: 0 3px 10px rgba(212,168,71,0.3);
    }

        .naac-criterion-banner .naac-cr-action:hover {
            background: linear-gradient(135deg, #e9bc5a 0%, #d4a847 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(212,168,71,0.45);
        }

/* EMPTY STATE */
.naac-empty {
    max-width: 800px;
    margin: 0 auto;
    background: #fdf6e7;
    border: 1px dashed #d4a847;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    color: #8b6a1c;
    font-size: 14px;
}

    .naac-empty i {
        color: #d4a847;
        font-size: 28px;
        margin-bottom: 10px;
        display: block;
    }

/* RESPONSIVE */
@media (max-width: 900px) {
    .naac-hero h1 {
        font-size: 32px;
    }

    .naac-panel-title {
        font-size: 26px;
    }

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

    .naac-highlight, .naac-doc-row, .naac-criterion-banner {
        flex-direction: column;
        text-align: center;
    }

        .naac-doc-row:hover {
            transform: translateY(-3px);
            padding-left: 22px;
            border-left: 1px solid #d4a847;
        }

    .naac-tab {
        padding: 16px 12px;
        font-size: 11.5px;
    }
}


/* Rules-page styling — kept scoped, uses the site's existing tokens */
.rule-block {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding: 28px 32px;
    margin-bottom: 22px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    scroll-margin-top: 100px;
}

    .rule-block:last-child {
        margin-bottom: 0;
    }

.rule-block-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a2c4e;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.rule-block p {
    line-height: 1.85;
    margin: 10px 0;
}

.rule-block .lead-strong {
    font-size: 1.05rem;
    font-weight: 500;
    color: #1a2c4e;
    line-height: 1.85;
    margin: 0;
}

.rule-list {
    margin: 14px 0 0;
    padding-left: 22px;
    line-height: 1.85;
}

    .rule-list li {
        margin-bottom: 14px;
    }

        .rule-list li:last-child {
            margin-bottom: 0;
        }

    .rule-list.bullet {
        list-style: disc;
    }

.rule-sublist {
    margin-top: 10px;
    padding-left: 22px;
}

    .rule-sublist li {
        margin-bottom: 8px;
    }

.banned-badge {
    display: inline-block;
    background: #8b1113;
    color: #fff;
    padding: 4px 12px;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 10px;
}

.offence-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
    margin-top: 16px;
    padding: 18px 22px;
    background: #fafbfc;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 8px;
}

.offence-col {
    list-style: disc;
    padding-left: 22px;
    margin: 0;
    line-height: 1.8;
}

    .offence-col li {
        margin-bottom: 10px;
    }

        .offence-col li:last-child {
            margin-bottom: 0;
        }

@media (max-width:720px) {
    .rule-block {
        padding: 22px 18px;
    }

    .offence-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

        .offence-grid .offence-col:first-child {
            margin-bottom: 10px;
        }

    .banned-badge {
        display: block;
        margin-left: 0;
        margin-top: 8px;
        width: fit-content;
    }
}

/* Anti Ragging — arc- prefix */
.arc-hero {
    background: linear-gradient(135deg, #1a2c4e 0%, #2a416f 100%);
    color: #fff;
    padding: 60px 0 70px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .arc-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 20% 30%, rgba(212,168,71,0.15) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(220,38,38,0.18) 0%, transparent 45%);
        pointer-events: none;
    }

    .arc-hero::after {
        content: '\f05e';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        font-size: 220px;
        color: rgba(220,38,38,0.06);
        top: -10px;
        right: -10px;
        line-height: 1;
        transform: rotate(-12deg);
        pointer-events: none;
    }

    .arc-hero .container {
        position: relative;
        z-index: 1;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .arc-hero .arc-emblem {
        width: 84px;
        height: 84px;
        margin: 0 auto 20px;
        background: rgba(255,255,255,0.08);
        border: 2px solid #d4a847;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #d4a847;
        font-size: 36px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.2), 0 0 0 4px rgba(212,168,71,0.1);
    }

    .arc-hero h1 {
        font-family: 'Playfair Display', serif;
        font-size: 42px;
        font-weight: 700;
        margin: 0 0 8px;
        letter-spacing: 0.5px;
        color: #fff !important;
    }

    .arc-hero .arc-motto {
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: #d4a847 !important;
        margin: 0;
    }

    .arc-hero .arc-ministry {
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: rgba(255,255,255,0.75) !important;
        margin: 6px 0 0;
    }

    .arc-hero .arc-divider {
        width: 70px;
        height: 3px;
        background: #d4a847;
        margin: 18px auto;
        border-radius: 2px;
    }

    .arc-hero .arc-banned {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        background: rgba(220,38,38,0.18);
        border: 2px solid #dc2626;
        padding: 12px 24px;
        border-radius: 30px;
        margin-top: 18px;
    }

        .arc-hero .arc-banned i {
            color: #ff8a8a;
            font-size: 18px;
        }

        .arc-hero .arc-banned span {
            font-size: 14px;
            font-weight: 700;
            color: #fff;
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }

.arc-breadcrumb {
    background: #f7f8fa;
    padding: 14px 0;
    border-bottom: 1px solid #e6e9ee;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: #555;
}

    .arc-breadcrumb .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .arc-breadcrumb a {
        color: #8b1113;
        text-decoration: none;
        font-weight: 600;
    }

        .arc-breadcrumb a:hover {
            text-decoration: underline;
        }

    .arc-breadcrumb .sep {
        margin: 0 8px;
        color: #aaa;
    }

    .arc-breadcrumb .current {
        color: #1a2c4e;
        font-weight: 600;
    }

.arc-section {
    padding: 55px 0;
    background: #fff;
    font-family: 'Inter', sans-serif;
    color: #34425e;
}

    .arc-section.alt {
        background: #f7f8fa;
    }

    .arc-section .container {
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 20px;
    }

.arc-section-title {
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    color: #1a2c4e;
    margin: 0 0 12px;
    font-weight: 700;
    text-align: center;
}

.arc-section-sub {
    text-align: center;
    font-size: 15px;
    color: #6b7484;
    max-width: 740px;
    margin: 0 auto 40px;
    line-height: 1.65;
}

.arc-about {
    background: #fff;
    border-left: 4px solid #dc2626;
    padding: 28px 32px;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(26,44,78,0.06);
    font-size: 15.5px;
    line-height: 1.8;
    color: #34425e;
    margin: 0 auto 30px;
    max-width: 920px;
}

    .arc-about strong {
        color: #1a2c4e;
    }

    .arc-about .arc-warn {
        background: linear-gradient(135deg, #fdecec 0%, #fbd4d4 100%);
        border-left: 3px solid #dc2626;
        padding: 18px 22px 18px 56px;
        border-radius: 4px;
        margin: 18px 0 0;
        font-size: 14.5px;
        color: #7a1d1d;
        position: relative;
        font-weight: 500;
    }

        .arc-about .arc-warn::before {
            content: '\f071';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            top: 18px;
            left: 18px;
            font-size: 22px;
            color: #dc2626;
            line-height: 1;
        }

        .arc-about .arc-warn strong {
            color: #7a1d1d;
        }

/* CTA — file affidavit */
.arc-cta {
    background: linear-gradient(135deg, #8b1113 0%, #a52a2a 100%);
    color: #fff;
    border-radius: 12px;
    padding: 30px 30px;
    max-width: 920px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(139,17,19,0.25);
    border: 1px solid rgba(212,168,71,0.3);
    display: flex;
    align-items: center;
    gap: 22px;
    position: relative;
    overflow: hidden;
}

    .arc-cta::before {
        content: '\f0c1';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        top: -25px;
        right: -20px;
        font-size: 180px;
        color: rgba(212,168,71,0.07);
        line-height: 1;
        transform: rotate(-12deg);
    }

    .arc-cta .arc-cta-icon {
        width: 64px;
        height: 64px;
        background: rgba(212,168,71,0.18);
        border: 2px solid #d4a847;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #d4a847;
        font-size: 26px;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
    }

    .arc-cta > div {
        position: relative;
        z-index: 1;
        flex: 1;
    }

    .arc-cta h4 {
        font-family: 'Playfair Display', serif;
        font-size: 19px;
        margin: 0 0 6px;
        color: #fff !important;
        font-weight: 700;
    }

    .arc-cta p {
        margin: 0 0 14px;
        font-size: 13.5px;
        opacity: 0.95;
        line-height: 1.55;
        color: #fff !important;
    }

.arc-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #d4a847;
    color: #1a2c4e;
    padding: 11px 22px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.25s ease, transform 0.2s ease;
}

    .arc-cta-btn:hover {
        background: #e9bc5a;
        transform: translateX(3px);
    }

/* Two-column comparison: offences vs punishments */
.arc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    max-width: 1180px;
    margin: 0 auto;
}

.arc-col {
    background: #fff;
    border-radius: 12px;
    padding: 0;
    border: 1px solid #e6e9ee;
    box-shadow: 0 4px 14px rgba(26,44,78,0.06);
    overflow: hidden;
}

.arc-col-head {
    padding: 20px 24px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 14px;
}

.arc-col.offences .arc-col-head {
    background: linear-gradient(135deg, #1a2c4e 0%, #2a416f 100%);
}

.arc-col.punishments .arc-col-head {
    background: linear-gradient(135deg, #8b1113 0%, #a52a2a 100%);
}

.arc-col-head .arc-col-icon {
    width: 44px;
    height: 44px;
    background: rgba(212,168,71,0.18);
    border: 2px solid #d4a847;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4a847;
    font-size: 18px;
    flex-shrink: 0;
}

.arc-col-head h4 {
    font-family: 'Playfair Display', serif;
    font-size: 19px;
    margin: 0;
    color: #fff !important;
    font-weight: 700;
}

.arc-col-head p {
    margin: 2px 0 0;
    font-size: 12px;
    color: #d4a847;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.arc-list {
    padding: 14px 0;
    counter-reset: arclist;
}

.arc-list-item {
    padding: 11px 22px 11px 56px;
    border-bottom: 1px solid #f1f3f7;
    position: relative;
    font-size: 13.5px;
    line-height: 1.55;
    color: #34425e;
}

    .arc-list-item:last-child {
        border-bottom: none;
    }

    .arc-list-item::before {
        counter-increment: arclist;
        content: counter(arclist, decimal-leading-zero);
        position: absolute;
        left: 18px;
        top: 11px;
        font-family: 'Playfair Display', serif;
        font-size: 13px;
        font-weight: 700;
        color: #fff;
        background: linear-gradient(135deg, #1a2c4e 0%, #2a416f 100%);
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #d4a847;
        box-shadow: 0 2px 6px rgba(26,44,78,0.15);
    }

.arc-col.punishments .arc-list-item::before {
    background: linear-gradient(135deg, #8b1113 0%, #a52a2a 100%);
}

.arc-list-item.is-severe {
    background: linear-gradient(135deg, #fdecec 0%, #fbd4d4 100%);
    border-bottom-color: #f5c4c4;
    font-weight: 600;
    color: #7a1d1d;
}

@media (max-width: 900px) {
    .arc-grid {
        grid-template-columns: 1fr;
    }

    .arc-cta {
        flex-direction: column;
        text-align: center;
    }

    .arc-hero h1 {
        font-size: 30px;
    }

    .arc-section-title {
        font-size: 25px;
    }
}

/* ===== LEGAL PAGE BANNER ===== */
.legal-banner {
    background: linear-gradient(135deg,#1a2c4e 0%,#0f1d36 100%);
    padding: 80px 0 64px;
    position: relative;
    overflow: hidden;
}

    .legal-banner::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -100px;
        width: 360px;
        height: 360px;
        background: radial-gradient(circle,rgba(255,193,7,.12) 0%,transparent 70%);
        border-radius: 50%;
    }

    .legal-banner::after {
        content: '';
        position: absolute;
        bottom: -150px;
        left: -150px;
        width: 440px;
        height: 440px;
        background: radial-gradient(circle,rgba(139,17,19,.18) 0%,transparent 70%);
        border-radius: 50%;
    }

    .legal-banner .container {
        position: relative;
        z-index: 2;
    }

.legal-banner-content {
    text-align: center;
    color: #fff;
}

.legal-banner .banner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,193,7,.12);
    border: 1px solid rgba(255,193,7,.3);
    color: #ffc107;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 20px;
}

.legal-banner h1 {
    font-size: clamp(32px,5vw,50px);
    font-weight: 800;
    margin: 0 0 12px;
    color: #fff;
    letter-spacing: -.5px;
}

.legal-banner .banner-subtitle {
    font-size: 16px;
    color: rgba(255,255,255,.78);
    margin: 0 auto 22px;
    max-width: 600px;
    line-height: 1.55;
}

.legal-banner .breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.1);
    padding: 10px 22px;
    border-radius: 50px;
    color: rgba(255,255,255,.8);
    font-size: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

    .legal-banner .breadcrumb a {
        color: #ffc107;
        text-decoration: none;
    }

    .legal-banner .breadcrumb .sep {
        color: rgba(255,255,255,.4);
    }

/* ===== LEGAL CONTENT ===== */
.legal-section {
    padding: 60px 0 80px;
    background: linear-gradient(180deg,#f8f9fc 0%,#fff 100%);
}

.legal-wrap {
    max-width: 880px;
    margin: 0 auto;
}

.legal-card {
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(26,44,78,.06);
    padding: 48px 50px;
}

.legal-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(139,17,19,.07);
    color: #8b1113;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 7px 16px;
    border-radius: 50px;
    margin-bottom: 28px;
}

    .legal-meta i {
        font-size: 13px;
    }

.legal-content h2 {
    font-size: 22px;
    font-weight: 800;
    color: #1a2c4e;
    margin: 34px 0 14px;
    letter-spacing: -.2px;
    padding-bottom: 10px;
    border-bottom: 2px solid #ffc107;
    display: inline-block;
}

    .legal-content h2:first-of-type {
        margin-top: 0;
    }

.legal-content h3 {
    font-size: 17px;
    font-weight: 800;
    color: #1a2c4e;
    margin: 24px 0 10px;
}

.legal-content p {
    color: #5a6473;
    font-size: 15px;
    line-height: 1.85;
    margin: 0 0 16px;
}

.legal-content ul, .legal-content ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.legal-content li {
    color: #5a6473;
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 9px;
}

    .legal-content li::marker {
        color: #8b1113;
    }

.legal-content a {
    color: #8b1113;
    font-weight: 600;
    text-decoration: none;
}

    .legal-content a:hover {
        text-decoration: underline;
    }

.legal-content strong {
    color: #1a2c4e;
}

.legal-note {
    background: #fff8e1;
    border-left: 4px solid #ffc107;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 22px 0;
    color: #6b5a00;
    font-size: 14px;
    line-height: 1.65;
}

.legal-contact-box {
    margin-top: 34px;
    background: linear-gradient(135deg,#1a2c4e 0%,#0f1d36 100%);
    border-radius: 14px;
    padding: 26px 30px;
    color: #fff;
}

    .legal-contact-box h3 {
        color: #fff;
        margin: 0 0 12px;
        font-size: 19px;
    }

    .legal-contact-box p {
        color: rgba(255,255,255,.82);
        margin: 0 0 6px;
        font-size: 14px;
        line-height: 1.7;
    }

    .legal-contact-box a {
        color: #ffc107;
        text-decoration: none;
        font-weight: 600;
    }

        .legal-contact-box a:hover {
            text-decoration: underline;
        }

/* ===== SITEMAP GRID (sitemap.php only) ===== */
.sitemap-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 26px 30px;
    margin-top: 6px;
}

.sitemap-col h3 {
    margin-top: 0;
}

.sitemap-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sitemap-col li {
    margin-bottom: 9px;
}

    .sitemap-col li::marker {
        content: '';
    }

.sitemap-col a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #5a6473;
    font-weight: 500;
    font-size: 14.5px;
}

    .sitemap-col a::before {
        content: '\f105';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        color: #8b1113;
        font-size: 12px;
    }

    .sitemap-col a:hover {
        color: #8b1113;
        text-decoration: none;
    }

@media(max-width:768px) {
    .legal-banner {
        padding: 60px 0 50px;
    }

    .legal-section {
        padding: 45px 0 60px;
    }

    .legal-card {
        padding: 32px 24px;
    }

    .legal-content h2 {
        font-size: 20px;
    }

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

@media(max-width:480px) {
    .legal-banner h1 {
        font-size: 28px;
    }

    .legal-card {
        padding: 26px 20px;
        border-radius: 16px;
    }

    .legal-content p, .legal-content li {
        font-size: 14.5px;
    }

    .legal-contact-box {
        padding: 22px 20px;
    }

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



/*Teaching and Non-Teaching staff*/

.pta-section {
    padding: 55px 0;
    background: #fff;
    font-family: 'Inter', sans-serif;
    color: #34425e;
}

    .pta-section.alt {
        background: #f7f8fa;
    }

    .pta-section .container {
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 20px;
    }

.pta-section-title {
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    color: #1a2c4e;
    margin: 0 0 12px;
    font-weight: 700;
    text-align: center;
}

.pta-section-sub {
    text-align: center;
    font-size: 15px;
    color: #6b7484;
    max-width: 740px;
    margin: 0 auto 40px;
    line-height: 1.65;
}

.pta-about {
    background: #fff;
    border-left: 4px solid #d4a847;
    padding: 28px 32px;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(26,44,78,0.06);
    font-size: 15.5px;
    line-height: 1.8;
    color: #34425e;
    margin: 0 auto;
    max-width: 920px;
}

    .pta-about strong {
        color: #1a2c4e;
    }

    .pta-about .pta-tagline {
        background: linear-gradient(135deg, #fdf6e7 0%, #fbf0d2 100%);
        border-left: 3px solid #8b1113;
        padding: 18px 22px 18px 56px;
        border-radius: 4px;
        margin: 18px 0 0;
        font-style: italic;
        font-size: 14.5px;
        color: #5a4a1c;
        position: relative;
    }

        .pta-about .pta-tagline::before {
            content: '\f0c0';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            top: 18px;
            left: 18px;
            font-size: 22px;
            color: #8b1113;
            font-style: normal;
            line-height: 1;
        }

/* Purpose pillars */
.pta-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    max-width: 1100px;
    margin: 0 auto;
}

.pta-pillar {
    background: #fff;
    border-radius: 10px;
    padding: 24px 22px;
    text-align: center;
    border: 1px solid #e6e9ee;
    border-top: 4px solid #d4a847;
    box-shadow: 0 4px 14px rgba(26,44,78,0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-top-color 0.25s ease;
}

    .pta-pillar:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 28px rgba(26,44,78,0.12);
        border-top-color: #8b1113;
    }

    .pta-pillar .pta-pi-icon {
        width: 56px;
        height: 56px;
        margin: 0 auto 14px;
        background: linear-gradient(135deg, rgba(139,17,19,0.08) 0%, rgba(212,168,71,0.12) 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #8b1113;
        font-size: 22px;
        border: 2px solid rgba(139,17,19,0.15);
    }

    .pta-pillar h5 {
        font-family: 'Playfair Display', serif;
        font-size: 16px;
        color: #1a2c4e;
        margin: 0 0 8px;
        font-weight: 700;
    }

    .pta-pillar p {
        font-size: 13px;
        color: #6b7484;
        margin: 0;
        line-height: 1.55;
    }

/* Members — Coordinator + grid */
.pta-members {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1080px;
    margin: 0 auto;
}

.pta-member {
    background: #fff;
    border-radius: 10px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #e6e9ee;
    box-shadow: 0 3px 10px rgba(26,44,78,0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

    .pta-member:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(26,44,78,0.08);
        border-color: #d4a847;
    }

    .pta-member.is-coord {
        background: linear-gradient(135deg, #1a2c4e 0%, #2a416f 100%);
        border-color: rgba(212,168,71,0.4);
        box-shadow: 0 6px 18px rgba(26,44,78,0.18);
        grid-column: 1 / -1;
    }

        .pta-member.is-coord h6, .pta-member.is-coord p {
            color: #fff !important;
        }

        .pta-member.is-coord p {
            opacity: 0.92;
        }

    .pta-member .pta-mem-avatar {
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #fdf6e7 0%, #fbf0d2 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #8b1113;
        font-size: 18px;
        flex-shrink: 0;
        border: 2px solid #f0e1b5;
    }

    .pta-member.is-coord .pta-mem-avatar {
        width: 60px;
        height: 60px;
        background: rgba(212,168,71,0.18);
        color: #d4a847;
        border-color: #d4a847;
        font-size: 22px;
    }

    .pta-member h6 {
        font-family: 'Playfair Display', serif;
        font-size: 15.5px;
        color: #1a2c4e;
        margin: 0 0 3px;
        font-weight: 700;
        line-height: 1.3;
    }

    .pta-member.is-coord h6 {
        font-size: 20px;
    }

    .pta-member p {
        margin: 0;
        font-size: 12.5px;
        color: #6b7484;
        line-height: 1.5;
    }

    .pta-member.is-coord p {
        font-size: 13px;
    }

.pta-mem-role-tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(212,168,71,0.18);
    color: #d4a847;
    border: 1px solid rgba(212,168,71,0.4);
    margin-bottom: 6px;
}

.pta-member:not(.is-coord) .pta-mem-role-tag {
    background: #fdf6e7;
    color: #8b1113;
    border-color: #f0e1b5;
}

.pta-mem-dept {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #6b7484;
    font-weight: 500;
}

.pta-member.is-coord .pta-mem-dept {
    color: rgba(255,255,255,0.85) !important;
}

@media (max-width: 900px) {
    .pta-members {
        grid-template-columns: 1fr 1fr;
    }

    .pta-ao {
        grid-template-columns: 1fr;
    }

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

    .pta-gallery {
        grid-template-columns: 1fr 1fr;
    }

    .pta-sustain, .pta-meeting-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .pta-meeting-meta-item {
        border-right: none;
        border-bottom: 1px solid rgba(212,168,71,0.15);
    }

        .pta-meeting-meta-item:last-child {
            border-bottom: none;
        }

    .pta-hero h1 {
        font-size: 30px;
    }

    .pta-section-title {
        font-size: 25px;
    }

    .pta-lb-prev {
        left: 10px;
    }

    .pta-lb-next {
        right: 10px;
    }
}

@media (max-width: 600px) {
    .pta-members {
        grid-template-columns: 1fr;
    }

    .pta-gallery {
        grid-template-columns: 1fr;
    }
}



/* ============================================================
   GLIMPSES SECTION — magazine-style mosaic collage
   ============================================================ */
.glimpse-section {
    position: relative;
    padding: 90px 0 100px;
    background: linear-gradient(180deg, #fafbff 0%, #f3f5fa 100%);
    overflow: hidden;
    isolation: isolate;
}

.glimpse-bg-shapes {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.gl-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.55;
    pointer-events: none;
}

.gl-shape-1 {
    width: 380px;
    height: 380px;
    top: -160px;
    left: -120px;
    background: radial-gradient(circle, rgba(212, 168, 71, 0.14) 0%, transparent 70%);
}

.gl-shape-2 {
    width: 480px;
    height: 480px;
    bottom: -200px;
    right: -140px;
    background: radial-gradient(circle, rgba(26, 44, 78, 0.10) 0%, transparent 70%);
}

.gl-shape-3 {
    width: 280px;
    height: 280px;
    top: 40%;
    right: 8%;
    background: radial-gradient(circle, rgba(139, 17, 19, 0.06) 0%, transparent 70%);
}

.glimpse-section .container {
    position: relative;
    z-index: 2;
}

.glimpse-head {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 50px;
}

.glimpse-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #8b1113;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 7px 18px;
    background: rgba(139, 17, 19, 0.07);
    border: 1px solid rgba(139, 17, 19, 0.18);
    border-radius: 50px;
    margin-bottom: 18px;
}

.gl-eyebrow-dot {
    width: 6px;
    height: 6px;
    background: #8b1113;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(139, 17, 19, 0.5);
}

.glimpse-title {
    font-size: clamp(30px, 4.2vw, 40px);
    font-weight: 800;
    color: #1a2c4e;
    line-height: 1.15;
    margin: 0 0 16px;
    letter-spacing: -0.5px;
}

    .glimpse-title em {
        font-style: normal;
        color: #b8862a;
        position: relative;
        display: inline-block;
    }

        .glimpse-title em::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, #d4a847, transparent);
            border-radius: 2px;
        }

.glimpse-sub {
    font-size: 16px;
    line-height: 1.7;
    color: #5a6478;
    margin: 0 auto;
    max-width: 640px;
}

.glimpse-mosaic {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 75px;
    grid-auto-flow: dense;
    gap: 14px;
    max-width: 1280px;
    margin: 0 auto;
}

.glimpse-tile {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(135deg, #1a2c4e 0%, #0f1d36 100%);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(26, 44, 78, 0.10);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, z-index 0s linear 0.4s;
    text-decoration: none;
    display: block;
    opacity: 0;
    animation: tile-appear 0.6s ease forwards;
}

@keyframes tile-appear {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(20px);
    }

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

.glimpse-tile.size-sm {
    grid-column: span 3;
    grid-row: span 3;
}

.glimpse-tile.size-md {
    grid-column: span 4;
    grid-row: span 3;
}

.glimpse-tile.size-lg {
    grid-column: span 6;
    grid-row: span 3;
}

.glimpse-tile.size-hero {
    grid-column: span 6;
    grid-row: span 6;
}

.glimpse-tile.size-tall {
    grid-column: span 3;
    grid-row: span 6;
}

.glimpse-tile.size-wide {
    grid-column: span 6;
    grid-row: span 3;
}

.glimpse-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease;
    filter: saturate(0.95) brightness(0.96);
}

.glimpse-tile:hover {
    transform: translateY(-5px) scale(1.015);
    box-shadow: 0 22px 48px rgba(26, 44, 78, 0.25);
    z-index: 5;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, z-index 0s;
}

    .glimpse-tile:hover img {
        transform: scale(1.08);
        filter: saturate(1.05) brightness(1);
    }

.glimpse-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(26, 44, 78, 0) 35%, rgba(10, 20, 40, 0.55) 70%, rgba(10, 20, 40, 0.88) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
    pointer-events: none;
}

.glimpse-tile:hover::before {
    opacity: 1;
}

.gl-tile-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px 20px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.glimpse-tile:hover .gl-tile-overlay {
    opacity: 1;
    transform: translateY(0);
}

.gl-tile-cat {
    display: inline-block;
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    color: #ffc107;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    padding: 4px 10px;
    background: rgba(255, 193, 7, 0.18);
    border: 1px solid rgba(255, 193, 7, 0.38);
    border-radius: 50px;
    margin-bottom: 8px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.gl-tile-caption {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.1px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gl-tile-zoom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #1a2c4e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 4;
    pointer-events: none;
}

.glimpse-tile:hover .gl-tile-zoom {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.glimpse-tile.no-image img {
    display: none;
}

.glimpse-tile.no-image::after {
    content: '\f03e';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(212, 168, 71, 0.35);
    font-size: 42px;
    z-index: 1;
}

/* ============================================================
   PREMIUM CTA BANNER
   ============================================================ */
.glimpse-cta-banner {
    position: relative;
    margin: 55px auto 0;
    max-width: 1280px;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a2c4e 0%, #0f1d36 55%, #2a1a1a 100%);
    box-shadow: 0 25px 60px rgba(26, 44, 78, 0.25);
    isolation: isolate;
}

.gl-cta-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.gl-cta-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.gl-cta-glow-1 {
    width: 380px;
    height: 380px;
    top: -160px;
    left: -80px;
    background: radial-gradient(circle, rgba(212, 168, 71, 0.18) 0%, transparent 70%);
}

.gl-cta-glow-2 {
    width: 320px;
    height: 320px;
    bottom: -140px;
    right: -60px;
    background: radial-gradient(circle, rgba(139, 17, 19, 0.30) 0%, transparent 70%);
}

.gl-cta-inner {
    position: relative;
    z-index: 2;
    padding: 38px 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.gl-cta-left {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 1;
    min-width: 300px;
}

.gl-cta-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.18) 0%, rgba(255, 193, 7, 0.06) 100%);
    border: 1px solid rgba(255, 193, 7, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffc107;
    font-size: 26px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.gl-cta-text {
    flex: 1;
    min-width: 0;
}

.gl-cta-eyebrow {
    display: inline-block;
    color: #ffc107;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.gl-cta-heading {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.25;
    letter-spacing: -0.2px;
}

.gl-cta-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.55;
    margin: 0;
    max-width: 540px;
}

.gl-cta-right {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-shrink: 0;
}

.gl-cta-meta {
    display: flex;
    align-items: center;
    gap: 22px;
}

.gl-cta-meta-item {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.gl-cta-meta-num {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #ffc107;
    line-height: 1;
    letter-spacing: -0.5px;
}

.gl-cta-meta-lbl {
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 4px;
}

.gl-cta-meta-divider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
}

.gl-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: #ffc107;
    color: #1a2c4e;
    padding: 16px 28px 16px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 24px rgba(255, 193, 7, 0.35);
    text-transform: uppercase;
    white-space: nowrap;
}

    .gl-cta-btn:hover {
        background: #fff;
        color: #1a2c4e;
        transform: translateY(-3px);
        box-shadow: 0 14px 34px rgba(255, 193, 7, 0.5);
    }

.gl-cta-btn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #1a2c4e;
    color: #ffc107;
    border-radius: 50%;
    font-size: 12px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.gl-cta-btn:hover .gl-cta-btn-arrow {
    transform: translateX(3px);
    background: #8b1113;
    color: #fff;
}

@media (max-width: 1100px) {
    .glimpse-mosaic {
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: 65px;
        gap: 12px;
    }
}

@media (max-width: 900px) {
    .gl-cta-inner {
        padding: 32px 32px;
        gap: 24px;
    }

    .gl-cta-heading {
        font-size: 20px;
    }

    .gl-cta-meta {
        gap: 18px;
    }

    .gl-cta-meta-num {
        font-size: 22px;
    }
}

@media (max-width: 768px) {
    .glimpse-section {
        padding: 70px 0 80px;
    }

    .glimpse-head {
        margin-bottom: 35px;
    }

    .glimpse-mosaic {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 70px;
        gap: 10px;
    }

    .glimpse-tile.size-sm {
        grid-column: span 3;
        grid-row: span 3;
    }

    .glimpse-tile.size-md {
        grid-column: span 3;
        grid-row: span 3;
    }

    .glimpse-tile.size-lg {
        grid-column: span 6;
        grid-row: span 3;
    }

    .glimpse-tile.size-wide {
        grid-column: span 6;
        grid-row: span 3;
    }

    .glimpse-tile.size-tall {
        grid-column: span 3;
        grid-row: span 6;
    }

    .glimpse-tile.size-hero {
        grid-column: span 6;
        grid-row: span 5;
    }

    .gl-tile-caption {
        font-size: 12.5px;
    }

    .gl-tile-cat {
        font-size: 9.5px;
    }

    .gl-cta-inner {
        flex-direction: column;
        padding: 28px 24px;
        text-align: center;
    }

    .gl-cta-left {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .gl-cta-right {
        width: 100%;
        flex-direction: column;
        gap: 22px;
    }

    .gl-cta-desc {
        margin: 0 auto;
    }

    .gl-cta-heading {
        font-size: 19px;
    }
}

@media (max-width: 480px) {
    .glimpse-mosaic {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 130px;
        gap: 8px;
    }

    .glimpse-tile,
    .glimpse-tile.size-sm,
    .glimpse-tile.size-md,
    .glimpse-tile.size-lg,
    .glimpse-tile.size-wide,
    .glimpse-tile.size-tall,
    .glimpse-tile.size-hero {
        grid-column: span 1;
        grid-row: span 1;
    }

        .glimpse-tile.size-hero,
        .glimpse-tile.size-wide {
            grid-column: span 2;
            grid-row: span 1;
        }

    .gl-cta-meta-num {
        font-size: 20px;
    }

    .gl-cta-btn {
        padding: 14px 22px 14px 26px;
        font-size: 13px;
    }
}

/* ============================================================
   GLIMPSE LIGHTBOX
   ============================================================ */
.glimpse-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(8, 12, 24, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 80px 80px 100px;
    opacity: 0;
    transition: opacity 0.3s ease;
    user-select: none;
}

    .glimpse-lightbox.is-open {
        display: flex;
        opacity: 1;
    }

.gl-lb-stage {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.gl-lb-img {
    max-width: min(1100px, 92vw);
    max-height: 78vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: #0f1d36;
    display: block;
}

    .gl-lb-img.is-loaded {
        opacity: 1;
        transform: scale(1);
    }

.gl-lb-spinner {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 4px solid rgba(212, 168, 71, 0.18);
    border-top-color: #d4a847;
    border-radius: 50%;
    animation: gl-lb-spin 0.8s linear infinite;
    opacity: 1;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

    .gl-lb-spinner.is-hidden {
        opacity: 0;
    }

@keyframes gl-lb-spin {
    to {
        transform: rotate(360deg);
    }
}

.gl-lb-caption {
    max-width: min(1100px, 92vw);
    text-align: center;
    color: #fff;
    padding: 0 20px;
}

.gl-lb-cat {
    display: block;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #d4a847;
    margin-bottom: 6px;
}

.gl-lb-text {
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    margin-bottom: 8px;
}

.gl-lb-counter {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.gl-lb-close {
    position: fixed;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 100001;
}

    .gl-lb-close:hover {
        background: #d4a847;
        color: #1a2c4e;
        border-color: #d4a847;
        transform: rotate(90deg);
    }

.gl-lb-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 100000;
}

    .gl-lb-nav:hover {
        background: #d4a847;
        color: #1a2c4e;
        border-color: #d4a847;
        box-shadow: 0 8px 22px rgba(212, 168, 71, 0.4);
    }

.gl-lb-prev {
    left: 24px;
}

.gl-lb-next {
    right: 24px;
}

.gl-lb-prev:hover {
    transform: translateY(-50%) translateX(-3px);
}

.gl-lb-next:hover {
    transform: translateY(-50%) translateX(3px);
}

@media (max-width: 768px) {
    .glimpse-lightbox {
        padding: 60px 16px 80px;
    }

    .gl-lb-close {
        top: 14px;
        right: 14px;
        width: 42px;
        height: 42px;
        font-size: 15px;
    }

    .gl-lb-nav {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .gl-lb-prev {
        left: 8px;
    }

    .gl-lb-next {
        right: 8px;
    }

    .gl-lb-text {
        font-size: 14px;
    }
}


/* SGRC — sgrc- prefix */
.sgrc-hero {
    background: linear-gradient(135deg, #1a2c4e 0%, #2a416f 100%);
    color: #fff;
    padding: 60px 0 70px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .sgrc-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 20% 30%, rgba(212,168,71,0.15) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(139,17,19,0.18) 0%, transparent 45%);
        pointer-events: none;
    }

    .sgrc-hero::after {
        content: '\f4ad';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        font-size: 220px;
        color: rgba(212,168,71,0.05);
        top: -10px;
        right: -10px;
        line-height: 1;
        transform: rotate(-12deg);
        pointer-events: none;
    }

    .sgrc-hero .container {
        position: relative;
        z-index: 1;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .sgrc-hero .sgrc-emblem {
        width: 84px;
        height: 84px;
        margin: 0 auto 20px;
        background: rgba(255,255,255,0.08);
        border: 2px solid #d4a847;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #d4a847;
        font-size: 36px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.2), 0 0 0 4px rgba(212,168,71,0.1);
    }

    .sgrc-hero h1 {
        font-family: 'Playfair Display', serif;
        font-size: 38px;
        font-weight: 700;
        margin: 0 0 8px;
        letter-spacing: 0.5px;
        color: #fff !important;
        line-height: 1.2;
    }

    .sgrc-hero .sgrc-motto {
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: #d4a847 !important;
        margin: 0;
    }

    .sgrc-hero .sgrc-ministry {
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: rgba(255,255,255,0.75) !important;
        margin: 6px 0 0;
    }

    .sgrc-hero .sgrc-divider {
        width: 70px;
        height: 3px;
        background: #d4a847;
        margin: 18px auto;
        border-radius: 2px;
    }

    .sgrc-hero .sgrc-stat-pill {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        background: rgba(212,168,71,0.15);
        border: 2px solid #d4a847;
        padding: 10px 22px;
        border-radius: 30px;
        margin-top: 18px;
    }

        .sgrc-hero .sgrc-stat-pill .sgrc-pill-icon {
            width: 30px;
            height: 30px;
            background: #d4a847;
            color: #1a2c4e;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
        }

        .sgrc-hero .sgrc-stat-pill span span {
            display: block;
            font-size: 11px;
            letter-spacing: 1.6px;
            text-transform: uppercase;
            color: #d4a847;
            font-weight: 600;
        }

        .sgrc-hero .sgrc-stat-pill span small {
            display: block;
            font-size: 13.5px;
            font-weight: 600;
            color: #fff;
            letter-spacing: 0.4px;
        }

.sgrc-breadcrumb {
    background: #f7f8fa;
    padding: 14px 0;
    border-bottom: 1px solid #e6e9ee;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: #555;
}

    .sgrc-breadcrumb .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .sgrc-breadcrumb a {
        color: #8b1113;
        text-decoration: none;
        font-weight: 600;
    }

        .sgrc-breadcrumb a:hover {
            text-decoration: underline;
        }

    .sgrc-breadcrumb .sep {
        margin: 0 8px;
        color: #aaa;
    }

    .sgrc-breadcrumb .current {
        color: #1a2c4e;
        font-weight: 600;
    }

.sgrc-section {
    padding: 55px 0;
    background: #fff;
    font-family: 'Inter', sans-serif;
    color: #34425e;
}




    .sgrc-section.alt {
        background: #f7f8fa;
    }

    .sgrc-section .container {
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 20px;
    }

.sgrc-section-title {
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    color: #1a2c4e;
    margin: 0 0 12px;
    font-weight: 700;
    text-align: center;
}

.sgrc-section-sub {
    text-align: center;
    font-size: 15px;
    color: #6b7484;
    max-width: 740px;
    margin: 0 auto 40px;
    line-height: 1.65;
}

.sgrc-about {
    background: #fff;
    border-left: 4px solid #d4a847;
    padding: 28px 32px;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(26,44,78,0.06);
    font-size: 15.5px;
    line-height: 1.8;
    color: #34425e;
    margin: 0 auto;
    max-width: 920px;
}

    .sgrc-about strong {
        color: #1a2c4e;
    }

/* Members composition — hierarchical */
.sgrc-members {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.sgrc-member {
    background: #fff;
    border-radius: 10px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #e6e9ee;
    box-shadow: 0 3px 10px rgba(26,44,78,0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

    .sgrc-member:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(26,44,78,0.08);
        border-color: #d4a847;
    }

    .sgrc-member.is-chair {
        background: linear-gradient(135deg, #1a2c4e 0%, #2a416f 100%);
        border-color: rgba(212,168,71,0.4);
        box-shadow: 0 6px 18px rgba(26,44,78,0.18);
    }

        .sgrc-member.is-chair h6, .sgrc-member.is-chair p {
            color: #fff !important;
        }

        .sgrc-member.is-chair p {
            opacity: 0.92;
        }

    .sgrc-member.is-coord {
        background: linear-gradient(135deg, #8b1113 0%, #a52a2a 100%);
        border-color: rgba(212,168,71,0.4);
        box-shadow: 0 6px 18px rgba(139,17,19,0.18);
    }

        .sgrc-member.is-coord h6, .sgrc-member.is-coord p {
            color: #fff !important;
        }

        .sgrc-member.is-coord p {
            opacity: 0.92;
        }

    .sgrc-member .sgrc-mem-avatar {
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #fdf6e7 0%, #fbf0d2 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #8b1113;
        font-size: 18px;
        flex-shrink: 0;
        border: 2px solid #f0e1b5;
    }

    .sgrc-member.is-chair .sgrc-mem-avatar, .sgrc-member.is-coord .sgrc-mem-avatar {
        width: 60px;
        height: 60px;
        background: rgba(212,168,71,0.18);
        color: #d4a847;
        border-color: #d4a847;
        font-size: 22px;
    }

    .sgrc-member h6 {
        font-family: 'Playfair Display', serif;
        font-size: 15.5px;
        color: #1a2c4e;
        margin: 0 0 3px;
        font-weight: 700;
        line-height: 1.3;
    }

    .sgrc-member.is-chair h6, .sgrc-member.is-coord h6 {
        font-size: 19px;
    }

    .sgrc-member p {
        margin: 0;
        font-size: 12.5px;
        color: #6b7484;
        line-height: 1.5;
    }

    .sgrc-member.is-chair p, .sgrc-member.is-coord p {
        font-size: 13px;
    }

.sgrc-mem-role-tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(212,168,71,0.18);
    color: #d4a847;
    border: 1px solid rgba(212,168,71,0.4);
    margin-bottom: 6px;
}

.sgrc-member:not(.is-chair):not(.is-coord) .sgrc-mem-role-tag {
    background: #fdf6e7;
    color: #8b1113;
    border-color: #f0e1b5;
}

/* Mission cards */
.sgrc-missions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    max-width: 1100px;
    margin: 0 auto;
}

.sgrc-mission {
    background: #fff;
    border-radius: 10px;
    padding: 24px 22px;
    text-align: center;
    border: 1px solid #e6e9ee;
    border-top: 4px solid #d4a847;
    box-shadow: 0 4px 14px rgba(26,44,78,0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .sgrc-mission:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 28px rgba(26,44,78,0.12);
    }

    .sgrc-mission .sgrc-mi-icon {
        width: 56px;
        height: 56px;
        margin: 0 auto 14px;
        background: linear-gradient(135deg, rgba(139,17,19,0.08) 0%, rgba(212,168,71,0.12) 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #8b1113;
        font-size: 22px;
        border: 2px solid rgba(139,17,19,0.15);
    }

    .sgrc-mission h5 {
        font-family: 'Playfair Display', serif;
        font-size: 16px;
        color: #1a2c4e;
        margin: 0 0 8px;
        font-weight: 700;
    }

    .sgrc-mission p {
        font-size: 13px;
        color: #6b7484;
        margin: 0;
        line-height: 1.55;
    }


/*College Magazine*/
.magazine-intro {
    background: linear-gradient(135deg, #fef3f2 0%, #fff 100%);
    padding: 24px;
    border-left: 4px solid #8b1a1a;
    border-radius: 6px;
    margin-bottom: 30px;
}

.magazine-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 30px 0;
}

.magazine-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}

    .magazine-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(139, 26, 26, 0.15);
    }

.magazine-cover {
    background: linear-gradient(135deg, #8b1a1a 0%, #b91c1c 50%, #d97706 100%);
    color: #fff;
    padding: 40px 20px;
    text-align: center;
    position: relative;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .magazine-cover::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.08) 0%, transparent 50%);
        pointer-events: none;
    }

    .magazine-cover .torch-icon {
        font-size: 36px;
        margin-bottom: 12px;
        opacity: 0.9;
    }

    .magazine-cover h3 {
        color: #fff;
        margin: 0 0 6px;
        font-size: 28px;
        font-family: Georgia, 'Times New Roman', serif;
        font-style: italic;
        font-weight: 700;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        position: relative;
        z-index: 1;
    }

    .magazine-cover .subtitle {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 2px;
        opacity: 0.9;
        position: relative;
        z-index: 1;
    }

    .magazine-cover .year-badge {
        background: rgba(255,255,255,0.2);
        backdrop-filter: blur(8px);
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 600;
        margin-top: 14px;
        border: 1px solid rgba(255,255,255,0.3);
        position: relative;
        z-index: 1;
    }

.magazine-body {
    padding: 18px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .magazine-body h4 {
        color: #1f2937;
        margin: 0 0 8px;
        font-size: 17px;
    }

    .magazine-body p {
        color: #6b7280;
        font-size: 13px;
        margin: 0 0 14px;
        flex: 1;
    }

.magazine-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #e5e7eb;
}

    .magazine-meta span {
        display: flex;
        align-items: center;
        gap: 4px;
    }

.magazine-actions {
    display: flex;
    gap: 8px;
}

.btn-view, .btn-download {
    flex: 1;
    text-align: center;
    padding: 9px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-view {
    background: #8b1a1a;
    color: #fff;
}

    .btn-view:hover {
        background: #6b1414;
        color: #fff;
    }

.btn-download {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

    .btn-download:hover {
        background: #e5e7eb;
        color: #1f2937;
    }

.featured-issue {
    background: #fff;
    border: 2px solid #8b1a1a;
    border-radius: 10px;
    padding: 28px;
    margin: 30px 0;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 28px;
    align-items: center;
    position: relative;
}

    .featured-issue::before {
        content: 'LATEST ISSUE';
        position: absolute;
        top: -12px;
        left: 24px;
        background: #8b1a1a;
        color: #fff;
        padding: 4px 14px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.5px;
    }

.featured-cover {
    background: linear-gradient(135deg, #8b1a1a 0%, #b91c1c 50%, #d97706 100%);
    color: #fff;
    border-radius: 8px;
    padding: 50px 24px;
    text-align: center;
    box-shadow: 0 10px 24px rgba(139, 26, 26, 0.25);
    position: relative;
    overflow: hidden;
}

    .featured-cover::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.12) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.08) 0%, transparent 50%);
    }

    .featured-cover .torch-icon {
        font-size: 44px;
        margin-bottom: 14px;
        position: relative;
        z-index: 1;
    }

    .featured-cover h3 {
        color: #fff;
        font-family: Georgia, serif;
        font-style: italic;
        font-size: 36px;
        margin: 0 0 6px;
        position: relative;
        z-index: 1;
    }

    .featured-cover .subtitle {
        font-size: 12px;
        letter-spacing: 2px;
        text-transform: uppercase;
        opacity: 0.9;
        position: relative;
        z-index: 1;
    }

    .featured-cover .year-badge {
        background: rgba(255,255,255,0.25);
        padding: 8px 18px;
        border-radius: 20px;
        margin-top: 16px;
        display: inline-block;
        font-weight: 600;
        border: 1px solid rgba(255,255,255,0.3);
        position: relative;
        z-index: 1;
    }

.featured-info h2 {
    color: #8b1a1a;
    margin: 0 0 10px;
}

.featured-info .lead-text {
    font-size: 15px;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 16px;
}

.featured-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

    .featured-actions .btn-view,
    .featured-actions .btn-download {
        flex: none;
        padding: 11px 22px;
        font-size: 14px;
    }

.about-magazine {
    background: #fafafa;
    padding: 24px;
    border-radius: 6px;
    margin: 30px 0;
}

    .about-magazine h2 {
        margin-top: 0;
    }

    .about-magazine ul {
        padding-left: 20px;
    }

@media (max-width: 900px) {
    .magazine-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .featured-issue {
        grid-template-columns: 1fr;
    }

    .featured-cover {
        max-width: 280px;
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    .magazine-grid {
        grid-template-columns: 1fr;
    }

    .magazine-actions {
        flex-direction: column;
    }
}

/*Internal Complaint Committee*/

.icc-hero {
    background: linear-gradient(135deg, #1a2c4e 0%, #2a416f 100%);
    color: #fff;
    padding: 60px 0 70px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .icc-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 20% 30%, rgba(212,168,71,0.15) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(139,17,19,0.18) 0%, transparent 45%);
        pointer-events: none;
    }

    .icc-hero::after {
        content: '\f3ed';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        font-size: 220px;
        color: rgba(212,168,71,0.05);
        top: -10px;
        right: -10px;
        line-height: 1;
        transform: rotate(-12deg);
        pointer-events: none;
    }

    .icc-hero .container {
        position: relative;
        z-index: 1;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .icc-hero .icc-emblem {
        width: 84px;
        height: 84px;
        margin: 0 auto 20px;
        background: rgba(255,255,255,0.08);
        border: 2px solid #d4a847;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #d4a847;
        font-size: 36px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.2), 0 0 0 4px rgba(212,168,71,0.1);
    }

    .icc-hero h1 {
        font-family: 'Playfair Display', serif;
        font-size: 42px;
        font-weight: 700;
        margin: 0 0 8px;
        letter-spacing: 0.5px;
        color: #fff !important;
    }

    .icc-hero .icc-motto {
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: #d4a847 !important;
        margin: 0;
    }

    .icc-hero .icc-ministry {
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: rgba(255,255,255,0.75) !important;
        margin: 6px 0 0;
    }

    .icc-hero .icc-divider {
        width: 70px;
        height: 3px;
        background: #d4a847;
        margin: 18px auto;
        border-radius: 2px;
    }

    .icc-hero .icc-stat-pill {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        background: rgba(212,168,71,0.15);
        border: 2px solid #d4a847;
        padding: 10px 22px;
        border-radius: 30px;
        margin-top: 18px;
    }

        .icc-hero .icc-stat-pill .icc-pill-icon {
            width: 30px;
            height: 30px;
            background: #d4a847;
            color: #1a2c4e;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
        }

        .icc-hero .icc-stat-pill span span {
            display: block;
            font-size: 11px;
            letter-spacing: 1.6px;
            text-transform: uppercase;
            color: #d4a847;
            font-weight: 600;
        }

        .icc-hero .icc-stat-pill span small {
            display: block;
            font-size: 13.5px;
            font-weight: 600;
            color: #fff;
            letter-spacing: 0.4px;
        }

.icc-breadcrumb {
    background: #f7f8fa;
    padding: 14px 0;
    border-bottom: 1px solid #e6e9ee;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: #555;
}

    .icc-breadcrumb .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .icc-breadcrumb a {
        color: #8b1113;
        text-decoration: none;
        font-weight: 600;
    }

        .icc-breadcrumb a:hover {
            text-decoration: underline;
        }

    .icc-breadcrumb .sep {
        margin: 0 8px;
        color: #aaa;
    }

    .icc-breadcrumb .current {
        color: #1a2c4e;
        font-weight: 600;
    }

.icc-section {
    padding: 55px 0;
    background: #fff;
    font-family: 'Inter', sans-serif;
    color: #34425e;
}

    .icc-section.alt {
        background: #f7f8fa;
    }

    .icc-section .container {
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 20px;
    }

.icc-section-title {
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    color: #1a2c4e;
    margin: 0 0 12px;
    font-weight: 700;
    text-align: center;
}

.icc-section-sub {
    text-align: center;
    font-size: 15px;
    color: #6b7484;
    max-width: 740px;
    margin: 0 auto 40px;
    line-height: 1.65;
}

.icc-about {
    background: #fff;
    border-left: 4px solid #d4a847;
    padding: 28px 32px;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(26,44,78,0.06);
    font-size: 15.5px;
    line-height: 1.8;
    color: #34425e;
    margin: 0 auto 40px;
    max-width: 920px;
}

    .icc-about strong {
        color: #1a2c4e;
    }

    .icc-about .icc-tagline {
        background: linear-gradient(135deg, #fdf6e7 0%, #fbf0d2 100%);
        border-left: 3px solid #8b1113;
        padding: 18px 22px 18px 56px;
        border-radius: 4px;
        margin: 18px 0 0;
        font-style: italic;
        font-size: 14.5px;
        color: #5a4a1c;
        position: relative;
    }

        .icc-about .icc-tagline::before {
            content: '\f132';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            top: 18px;
            left: 18px;
            font-size: 22px;
            color: #8b1113;
            font-style: normal;
            line-height: 1;
        }

/* Members — Presiding Officer / Coordinator / Members / Student Reps */
.icc-members {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 980px;
    margin: 0 auto 30px;
}

.icc-member {
    background: #fff;
    border-radius: 10px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #e6e9ee;
    box-shadow: 0 3px 10px rgba(26,44,78,0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

    .icc-member:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(26,44,78,0.08);
        border-color: #d4a847;
    }

    .icc-member.is-chair, .icc-member.is-conv {
        grid-column: 1 / -1;
    }

    .icc-member.is-chair {
        background: linear-gradient(135deg, #1a2c4e 0%, #2a416f 100%);
        border-color: rgba(212,168,71,0.4);
        box-shadow: 0 6px 18px rgba(26,44,78,0.18);
    }

    .icc-member.is-conv {
        background: linear-gradient(135deg, #8b1113 0%, #a52a2a 100%);
        border-color: rgba(212,168,71,0.4);
        box-shadow: 0 6px 18px rgba(139,17,19,0.18);
    }

        .icc-member.is-chair h6, .icc-member.is-chair p, .icc-member.is-conv h6, .icc-member.is-conv p {
            color: #fff !important;
        }

        .icc-member.is-chair p, .icc-member.is-conv p {
            opacity: 0.92;
        }

    .icc-member .icc-mem-avatar {
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #fdf6e7 0%, #fbf0d2 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #8b1113;
        font-size: 18px;
        flex-shrink: 0;
        border: 2px solid #f0e1b5;
    }

    .icc-member.is-chair .icc-mem-avatar, .icc-member.is-conv .icc-mem-avatar {
        width: 60px;
        height: 60px;
        background: rgba(212,168,71,0.18);
        color: #d4a847;
        border-color: #d4a847;
        font-size: 22px;
    }

    .icc-member h6 {
        font-family: 'Playfair Display', serif;
        font-size: 15.5px;
        color: #1a2c4e;
        margin: 0 0 3px;
        font-weight: 700;
        line-height: 1.3;
    }

    .icc-member.is-chair h6, .icc-member.is-conv h6 {
        font-size: 19px;
    }

    .icc-member p {
        margin: 0;
        font-size: 12.5px;
        color: #6b7484;
        line-height: 1.5;
    }

    .icc-member.is-chair p, .icc-member.is-conv p {
        font-size: 13px;
    }

.icc-mem-role-tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(212,168,71,0.18);
    color: #d4a847;
    border: 1px solid rgba(212,168,71,0.4);
    margin-bottom: 6px;
}

.icc-member:not(.is-chair):not(.is-conv) .icc-mem-role-tag {
    background: #fdf6e7;
    color: #8b1113;
    border-color: #f0e1b5;
}

.icc-member.is-student .icc-mem-avatar {
    background: linear-gradient(135deg, #e6f0fa 0%, #d3e3f5 100%);
    color: #1a2c4e;
    border-color: #c5d8ee;
}

.icc-member.is-student .icc-mem-role-tag {
    background: #e6f0fa;
    color: #1a2c4e;
    border-color: #c5d8ee;
}

/* Subgroup heading inside members */
.icc-mem-group-head {
    grid-column: 1 / -1;
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    color: #1a2c4e;
    font-weight: 700;
    margin: 14px 0 -6px;
    padding-left: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .icc-mem-group-head::before {
        content: '';
        width: 22px;
        height: 2px;
        background: #d4a847;
    }

    .icc-mem-group-head::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #e6e9ee;
    }

/* Confidentiality / How to file panel */
.icc-info-panel {
    background: linear-gradient(135deg, #1a2c4e 0%, #2a416f 100%);
    color: #fff;
    border-radius: 12px;
    padding: 36px 38px;
    max-width: 1100px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(26,44,78,0.2);
    border: 1px solid rgba(212,168,71,0.3);
    position: relative;
    overflow: hidden;
}

    .icc-info-panel::before {
        content: '\f3ed';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        top: -30px;
        right: -20px;
        font-size: 220px;
        color: rgba(212,168,71,0.07);
        line-height: 1;
        transform: rotate(-12deg);
    }

    .icc-info-panel h3 {
        font-family: 'Playfair Display', serif;
        font-size: 22px;
        margin: 0 0 6px;
        color: #fff !important;
        font-weight: 700;
        position: relative;
    }

    .icc-info-panel .icc-ip-tagline {
        font-size: 13px;
        color: #d4a847 !important;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        font-weight: 600;
        margin-bottom: 18px;
        display: block;
        position: relative;
    }

    .icc-info-panel > p {
        font-size: 14.5px;
        line-height: 1.7;
        opacity: 0.95;
        margin: 0 0 18px;
        max-width: 780px;
        position: relative;
        color: #fff !important;
    }

    .icc-info-panel ul {
        list-style: none;
        padding: 0;
        margin: 0;
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

        .icc-info-panel ul li {
            background: rgba(255,255,255,0.08);
            padding: 12px 16px;
            border-radius: 6px;
            border: 1px solid rgba(212,168,71,0.2);
            font-size: 13.5px;
            color: #fff;
            line-height: 1.5;
            display: flex;
            align-items: center;
            gap: 10px;
        }

            .icc-info-panel ul li i {
                width: 32px;
                height: 32px;
                background: #d4a847;
                color: #1a2c4e;
                border-radius: 50%;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 13px;
                flex-shrink: 0;
            }

@media (max-width: 900px) {
    .icc-members {
        grid-template-columns: 1fr;
    }

    .icc-info-panel ul {
        grid-template-columns: 1fr;
    }

    .icc-hero h1 {
        font-size: 30px;
    }

    .icc-section-title {
        font-size: 25px;
    }
}


/*Prospectus Page*/

.prospectus-banner {
    background: linear-gradient(135deg, #1a2c4e 0%, #0f1d36 100%);
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
}

    .prospectus-banner::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -100px;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(255, 193, 7, 0.12) 0%, transparent 70%);
        border-radius: 50%;
    }

    .prospectus-banner::after {
        content: '';
        position: absolute;
        bottom: -150px;
        left: -150px;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(139, 17, 19, 0.18) 0%, transparent 70%);
        border-radius: 50%;
    }

    .prospectus-banner .container {
        position: relative;
        z-index: 2;
    }

    .prospectus-banner .page-banner-content {
        text-align: center;
        color: #fff;
    }

.banner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 22px;
}

.prospectus-banner h1 {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 800;
    margin: 0 0 14px;
    color: #fff;
    letter-spacing: -0.5px;
}

.banner-subtitle {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 auto 26px;
    max-width: 580px;
    line-height: 1.5;
}

.prospectus-banner .breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 22px;
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

    .prospectus-banner .breadcrumb a {
        color: #ffc107;
        text-decoration: none;
    }

    .prospectus-banner .breadcrumb .sep {
        color: rgba(255, 255, 255, 0.4);
    }

/* ============================================
   FEATURED PROSPECTUS (2026-27 College + Joint)
   ============================================ */
.prospectus-featured {
    padding: 80px 0 60px;
    background: linear-gradient(180deg, #f8f9fc 0%, #fff 100%);
}

.fp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 10px;
}

.fp-card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(26, 44, 78, 0.10);
    border: 1px solid #eef0f5;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
}

    .fp-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 35px 70px rgba(26, 44, 78, 0.16);
        border-color: #ffc107;
    }

/* Visual band */
.fp-visual {
    position: relative;
    background: linear-gradient(135deg, #1a2c4e 0%, #0f1d36 100%);
    padding: 44px 40px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 230px;
    overflow: hidden;
}

    .fp-visual::before {
        content: '';
        position: absolute;
        top: -50px;
        left: -50px;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(255, 193, 7, 0.16) 0%, transparent 70%);
        border-radius: 50%;
    }

    .fp-visual::after {
        content: '';
        position: absolute;
        bottom: -80px;
        right: -80px;
        width: 260px;
        height: 260px;
        background: radial-gradient(circle, rgba(139, 17, 19, 0.22) 0%, transparent 70%);
        border-radius: 50%;
    }

.fp-tag {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%);
    color: #1a2c4e;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.3);
}

/* Mini PDF mockup */
.fp-pdf {
    position: relative;
    z-index: 2;
    width: 196px;
    min-height: 150px;
    background: #fff;
    border-radius: 8px;
    padding: 22px 20px 26px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.2);
    transform: rotate(-5deg);
    animation: fp-float 4.5s ease-in-out infinite;
}

@keyframes fp-float {
    0%, 100% {
        transform: rotate(-5deg) translateY(0);
    }

    50% {
        transform: rotate(-5deg) translateY(-10px);
    }
}

.fp-pdf-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 2px solid #8b1113;
    margin-bottom: 14px;
}

.fp-pdf-logo {
    width: 28px;
    height: 28px;
    background: #8b1113;
    color: #ffc107;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.fp-pdf-bar {
    flex: 1;
    height: 5px;
    background: #e5e8ef;
    border-radius: 3px;
}

    .fp-pdf-bar.s {
        flex: 0.4;
    }

.fp-pdf-name {
    font-size: 15px;
    font-weight: 800;
    color: #1a2c4e;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.fp-pdf-sub {
    font-size: 10px;
    color: #8b1113;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.fp-pdf-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .fp-pdf-lines span {
        height: 4px;
        background: #e5e8ef;
        border-radius: 2px;
    }

        .fp-pdf-lines span.s {
            width: 55%;
        }

.fp-pdf-stamp {
    position: absolute;
    bottom: -10px;
    right: -8px;
    background: #ffc107;
    color: #1a2c4e;
    padding: 5px 9px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    transform: rotate(-8deg);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Body */
.fp-body {
    padding: 32px 34px 8px;
    flex: 1;
}

    .fp-body h3 {
        font-size: 24px;
        font-weight: 800;
        color: #1a2c4e;
        margin: 0 0 12px;
        line-height: 1.25;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }

.fp-year {
    font-size: 13px;
    font-weight: 800;
    color: #8b1113;
    background: rgba(139, 17, 19, 0.08);
    padding: 3px 11px;
    border-radius: 50px;
    letter-spacing: 0.5px;
}

.fp-body p {
    font-size: 15px;
    line-height: 1.65;
    color: #5a6473;
    margin: 0 0 22px;
}

.fp-meta {
    display: flex;
    gap: 26px;
    padding: 20px 0;
    border-top: 1px solid #eef0f5;
    border-bottom: 1px solid #eef0f5;
    flex-wrap: wrap;
}

.fp-meta-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .fp-meta-item i {
        width: 42px;
        height: 42px;
        background: #f8f9fc;
        color: #8b1113;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        flex-shrink: 0;
    }

    .fp-meta-item div {
        display: flex;
        flex-direction: column;
    }

    .fp-meta-item strong {
        font-size: 14px;
        color: #1a2c4e;
        font-weight: 700;
    }

    .fp-meta-item span {
        font-size: 12px;
        color: #6c7687;
    }

/* Actions */
.fp-actions {
    display: flex;
    gap: 12px;
    padding: 22px 34px 34px;
    flex-wrap: wrap;
}

.fp-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #8b1113 0%, #6b0d0e 100%);
    color: #fff;
    padding: 15px 26px;
    border-radius: 13px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 12px 28px rgba(139, 17, 19, 0.32);
    border: none;
    cursor: pointer;
    font-family: inherit;
    position: relative;
    overflow: hidden;
    flex: 1;
    justify-content: center;
}

    .fp-btn-primary::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s ease;
    }

    .fp-btn-primary:hover::before {
        left: 100%;
    }

    .fp-btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 38px rgba(139, 17, 19, 0.45);
    }

    .fp-btn-primary i {
        font-size: 16px;
    }

    .fp-btn-primary small {
        background: rgba(255, 255, 255, 0.18);
        padding: 3px 9px;
        border-radius: 50px;
        font-size: 11px;
        font-weight: 600;
    }

.fp-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #1a2c4e;
    border: 2px solid #eef0f5;
    padding: 13px 22px;
    border-radius: 13px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s ease;
    justify-content: center;
}

    .fp-btn-secondary:hover {
        background: #1a2c4e;
        color: #fff;
        border-color: #1a2c4e;
        transform: translateY(-3px);
    }

/* ============================================
   PROSPECTUS GRID (archive)
   ============================================ */
.prospectus-grid-section {
    padding: 80px 0;
    background: #fff;
}

.section-head {
    text-align: center;
    margin-bottom: 50px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

    .section-head .eyebrow {
        color: #8b1113;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 2px;
        font-weight: 700;
        display: inline-block;
        margin-bottom: 12px;
    }

    .section-head .section-title {
        font-size: 36px;
        font-weight: 800;
        color: #1a2c4e;
        margin: 0 0 14px;
        letter-spacing: -0.3px;
    }

.section-subtitle {
    color: #646d7d;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

.prospectus-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.pg-card {
    background: #fff;
    border-radius: 22px;
    border: 1px solid #eef0f5;
    overflow: hidden;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(26, 44, 78, 0.05);
}

    .pg-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 50px rgba(26, 44, 78, 0.15);
        border-color: #ffc107;
    }

.pg-icon-wrap {
    height: 130px;
    background: linear-gradient(135deg, #1a2c4e 0%, #0f1d36 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffc107;
    font-size: 42px;
    position: relative;
    overflow: hidden;
}

    .pg-icon-wrap::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -40px;
        width: 120px;
        height: 120px;
        background: radial-gradient(circle, rgba(255, 193, 7, 0.15) 0%, transparent 70%);
        border-radius: 50%;
    }

.pg-session-tag {
    position: absolute;
    bottom: 12px;
    right: 14px;
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.4);
    color: #ffc107;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.pg-body {
    padding: 24px 24px 16px;
    flex: 1;
}

.pg-pages {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 50px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.badge-recent {
    color: #2e7d32;
    background: rgba(46, 125, 50, 0.1);
}

.badge-archive {
    color: #6c7687;
    background: rgba(108, 118, 135, 0.1);
}

.pg-body h3 {
    font-size: 20px;
    font-weight: 800;
    color: #1a2c4e;
    margin: 0 0 4px;
    line-height: 1.3;
}

.pg-subtitle {
    display: block;
    color: #6c7687;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 14px;
}

.pg-body p {
    color: #5a6473;
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0;
}

.pg-footer {
    padding: 16px 24px;
    background: #f8f9fc;
    border-top: 1px solid #eef0f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.pg-meta {
    font-size: 12px;
    color: #6c7687;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pg-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1a2c4e;
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

    .pg-download-btn:hover {
        background: #8b1113;
        transform: translateX(3px);
    }

/* ============================================
   CONTENTS SECTION
   ============================================ */
.prospectus-contents {
    padding: 80px 0;
    background: #f8f9fc;
}

.contents-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 60px;
    align-items: center;
}

.contents-left .eyebrow {
    color: #8b1113;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 14px;
}

.contents-left .section-title {
    font-size: 38px;
    font-weight: 800;
    color: #1a2c4e;
    margin: 0 0 18px;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

.contents-left p {
    color: #5a6473;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 24px;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #8b1113;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: gap 0.3s ease;
}

    .link-arrow:hover {
        gap: 16px;
    }

.contents-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contents-card {
    background: #fff;
    border-radius: 18px;
    padding: 30px 32px;
    box-shadow: 0 10px 30px rgba(26, 44, 78, 0.06);
    border: 1px solid #eef0f5;
    transition: all 0.3s ease;
}

    .contents-card:hover {
        transform: translateX(5px);
        box-shadow: 0 15px 40px rgba(26, 44, 78, 0.1);
        border-color: #ffc107;
    }

.cc-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eef0f5;
    margin-bottom: 18px;
}

    .cc-header i {
        width: 46px;
        height: 46px;
        background: linear-gradient(135deg, #1a2c4e 0%, #0f1d36 100%);
        color: #ffc107;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        flex-shrink: 0;
    }

    .cc-header h4 {
        margin: 0;
        font-size: 19px;
        font-weight: 800;
        color: #1a2c4e;
    }

.contents-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .contents-card ul li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 8px 0;
        color: #1a2c4e;
        font-size: 15px;
        font-weight: 500;
    }

        .contents-card ul li i {
            color: #ffc107;
            background: rgba(255, 193, 7, 0.15);
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            flex-shrink: 0;
            margin-top: 3px;
        }

/* ============================================
   HELP / CONTACT SECTION
   ============================================ */
.prospectus-help {
    padding: 60px 0;
    background: #fff;
}

.help-card {
    background: linear-gradient(135deg, #1a2c4e 0%, #0f1d36 100%);
    border-radius: 24px;
    padding: 50px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 40px;
    align-items: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

    .help-card::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -100px;
        width: 280px;
        height: 280px;
        background: radial-gradient(circle, rgba(255, 193, 7, 0.12) 0%, transparent 70%);
        border-radius: 50%;
    }

.help-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%);
    color: #1a2c4e;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
    box-shadow: 0 12px 30px rgba(255, 193, 7, 0.25);
    position: relative;
    z-index: 2;
}

.help-text {
    position: relative;
    z-index: 2;
}

    .help-text h3 {
        font-size: 26px;
        font-weight: 800;
        color: #fff;
        margin: 0 0 8px;
    }

    .help-text p {
        color: rgba(255, 255, 255, 0.78);
        margin: 0;
        line-height: 1.65;
        font-size: 15px;
        max-width: 560px;
    }

.help-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.help-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    color: #1a2c4e;
    padding: 14px 22px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

    .help-btn-primary:hover {
        background: #ffc107;
        transform: translateY(-2px);
    }

.help-helpline {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    padding: 14px 22px;
    border-radius: 12px;
    text-align: center;
}

.hh-label {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 700;
}

.hh-number {
    display: block;
    font-size: 14px;
    color: #ffc107;
    font-weight: 700;
}

/* ============================================
   QUICK LINKS
   ============================================ */
.prospectus-quicklinks {
    padding: 80px 0;
    background: #f8f9fc;
}

.ql-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.ql-card {
    background: #fff;
    border-radius: 18px;
    padding: 30px 24px;
    text-decoration: none;
    color: inherit;
    border: 1px solid #eef0f5;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .ql-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #8b1113, #ffc107);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
    }

    .ql-card:hover::before {
        transform: scaleX(1);
    }

    .ql-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(26, 44, 78, 0.1);
        border-color: transparent;
    }

    .ql-card > i {
        font-size: 28px;
        color: #8b1113;
        margin-bottom: 16px;
        display: block;
    }

    .ql-card h4 {
        font-size: 17px;
        font-weight: 800;
        color: #1a2c4e;
        margin: 0 0 6px;
    }

    .ql-card p {
        color: #6c7687;
        font-size: 13px;
        margin: 0 0 18px;
        line-height: 1.5;
    }

.ql-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f8f9fc;
    color: #1a2c4e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.3s ease;
}

.ql-card:hover .ql-arrow {
    background: #8b1113;
    color: #fff;
    transform: translateX(3px);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1100px) {
    .fp-grid {
        grid-template-columns: 1fr;
    }

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

    .ql-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .contents-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .help-card {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 25px;
    }

    .help-icon {
        margin: 0 auto;
    }

    .help-actions {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 720px) {
    .prospectus-banner {
        padding: 80px 0 60px;
    }

    .fp-visual {
        min-height: 200px;
        padding: 40px 30px;
    }

    .fp-body {
        padding: 28px 26px 8px;
    }

        .fp-body h3 {
            font-size: 21px;
        }

    .fp-meta {
        gap: 16px;
    }

    .fp-actions {
        padding: 20px 26px 28px;
        flex-direction: column;
    }

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

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

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

    .help-card {
        padding: 35px 25px;
    }

    .help-text h3 {
        font-size: 22px;
    }

    .help-actions {
        flex-direction: column;
    }

        .help-actions > * {
            width: 100%;
        }

    .contents-card {
        padding: 25px;
    }
}



/*Alumni Page Css*/

.alumni-hero {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #1a2c4e;
    box-shadow: 0 12px 36px rgba(0,0,0,.12);
    min-height: 360px;
    display: flex;
    align-items: stretch;
}

.alumni-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

    .alumni-hero-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

.alumni-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26,44,78,.92) 0%, rgba(42,65,120,.85) 50%, rgba(139,17,19,.65) 100%);
}

.alumni-hero-content {
    position: relative;
    z-index: 1;
    padding: 50px 56px;
    color: #fff;
    max-width: 780px;
    width: 100%;
}

    .alumni-hero-content .eyebrow {
        color: #ffc857;
        margin-bottom: 10px;
        display: block;
    }

    .alumni-hero-content .section-title {
        color: #fff;
        margin: 0 0 18px;
        line-height: 1.2;
    }

    .alumni-hero-content .lead {
        color: rgba(255,255,255,.92);
        font-size: 1.08rem;
        line-height: 1.75;
        margin: 0 0 28px;
        max-width: 680px;
    }

.alumni-hero-stats {
    display: flex;
    gap: 36px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.18);
}

.hero-stat-num {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffc857;
    line-height: 1;
}

.hero-stat-label {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: rgba(255,255,255,.85);
    margin-top: 6px;
}

@media (max-width:760px) {
    .alumni-hero {
        min-height: auto;
    }

    .alumni-hero-content {
        padding: 36px 28px;
    }

        .alumni-hero-content .section-title {
            font-size: 1.6rem;
        }

    .alumni-hero-stats {
        gap: 24px;
    }

    .hero-stat-num {
        font-size: 1.6rem;
    }
}

/* ========== Association pillars ========== */
.assoc-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 8px;
}

.assoc-pillar {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    padding: 32px 28px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .assoc-pillar:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 30px rgba(0,0,0,.1);
    }

.assoc-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fdf2f2 0%, #f5e1e1 100%);
    color: #8b1113;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.assoc-pillar h3 {
    margin: 0 0 10px;
    color: #1a2c4e;
    font-size: 1.15rem;
    font-weight: 700;
}

.assoc-pillar p {
    margin: 0;
    color: #555;
    line-height: 1.7;
    font-size: .95rem;
}

/* ========== Get Involved cards ========== */
.involve-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.involve-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding: 24px 24px 22px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    position: relative;
    overflow: hidden;
}

    .involve-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(to bottom, #8b1113, #c5343a);
        transform: scaleY(0);
        transform-origin: top center;
        transition: transform .3s ease;
    }

    .involve-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 26px rgba(0,0,0,.08);
        border-color: rgba(139,17,19,.2);
    }

        .involve-card:hover::before {
            transform: scaleY(1);
        }

.involve-icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: #f5f7fa;
    color: #1a2c4e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 14px;
    transition: background .25s ease, color .25s ease;
}

.involve-card:hover .involve-icon {
    background: #fdf2f2;
    color: #8b1113;
}

.involve-card h3 {
    margin: 0 0 8px;
    color: #1a2c4e;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
}

.involve-card p {
    margin: 0;
    color: #555;
    line-height: 1.65;
    font-size: .93rem;
}

/* ========== Chapters ========== */
.chapters-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 28px;
}

.chapter-group {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    padding: 26px 28px 28px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.chapter-group-title {
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid #fdf2f2;
    color: #1a2c4e;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .chapter-group-title i {
        color: #8b1113;
        font-size: .95rem;
    }

.chapter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.chapter-pill {
    background: #fafbfc;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 10px;
    padding: 14px 16px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    cursor: default;
}

    .chapter-pill:hover {
        transform: translateY(-2px);
        border-color: rgba(26,44,78,.25);
        box-shadow: 0 6px 14px rgba(0,0,0,.06);
    }

    .chapter-pill.home {
        background: linear-gradient(135deg, #fdf2f2 0%, #fff 100%);
        border-color: rgba(139,17,19,.25);
    }

        .chapter-pill.home:hover {
            border-color: #8b1113;
        }

.chapter-name {
    display: block;
    font-weight: 700;
    color: #1a2c4e;
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 4px;
}

.chapter-pill.home .chapter-name {
    color: #8b1113;
}

.chapter-tag {
    display: block;
    font-size: .78rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* ========== Register card ========== */
.register-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 32px;
    align-items: center;
    background: linear-gradient(135deg, #1a2c4e 0%, #2a4178 100%);
    color: #fff;
    border-radius: 16px;
    padding: 40px 44px;
    box-shadow: 0 12px 32px rgba(26,44,78,.2);
    position: relative;
    overflow: hidden;
}

    .register-card::before {
        content: "";
        position: absolute;
        right: -60px;
        top: -60px;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background: rgba(255,200,87,.08);
    }

.register-icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 2px solid rgba(255,200,87,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    color: #ffc857;
    flex: 0 0 auto;
    z-index: 1;
}

.register-body {
    position: relative;
    z-index: 1;
}

    .register-body .eyebrow {
        color: #ffc857;
        display: block;
        margin-bottom: 8px;
    }

    .register-body .section-title {
        color: #fff;
        margin: 0 0 14px;
    }

    .register-body p {
        color: rgba(255,255,255,.9);
        line-height: 1.75;
        margin: 0 0 16px;
    }

        .register-body p strong {
            color: #ffc857;
        }

.register-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 18px;
}

    .register-checklist li {
        color: rgba(255,255,255,.95);
        line-height: 1.6;
        font-size: .95rem;
    }

        .register-checklist li i {
            color: #ffc857;
            margin-right: 6px;
        }

.register-card .btn-primary {
    background: #ffc857;
    color: #1a2c4e;
    border: none;
    font-weight: 700;
}

    .register-card .btn-primary:hover {
        background: #ffd980;
        color: #1a2c4e;
    }

@media (max-width:680px) {
    .register-card {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 32px 26px;
        text-align: center;
    }

    .register-icon {
        margin: 0 auto;
    }

    .register-checklist {
        text-align: left;
    }
}


/* ================= UPCOMING EVENTS SECTION ================= */
.events-section {
    padding: 70px 0;
    background-color: #f8fbfc; 
}

.events-header {
    text-align: center;
    margin-bottom: 45px;
}

    .events-header .section-title {
        color: #1a2c4e;
        font-size: 2.2rem;
        font-weight: 800;
        margin-bottom: 10px;
    }

    .events-header .section-subtitle {
        color: #6c757d;
        font-size: 1rem;
    }

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

/* Event Card */
.event-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

    .event-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(26, 44, 78, 0.12);
    }

.event-img-wrap {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

    .event-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

.event-card:hover .event-img-wrap img {
    transform: scale(1.05);
}

.event-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.event-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a2c4e;
    margin: 0 0 12px;
    line-height: 1.3;
}

.event-tags {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.event-tag {
    background: #20409a; 
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px; 
}

.event-desc {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    margin-top: auto; 
}

    .event-meta span {
        font-size: 0.9rem;
        color: #333;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 600;
    }

    .event-meta i {
        color: #20409a; 
        font-size: 1.1rem;
        width: 18px;
        text-align: center;
    }

/* Buttons */
.btn-read-more {
    align-self: flex-start;
    background: #c21010;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 25px;
    text-decoration: none;
    transition: background 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .btn-read-more:hover {
        background: #1a2c4e;
        color: #ffc857;
    }


/* ============================================================
   SYLLABUS PAGE — same aesthetic as Notices page
   (gold + ink + cream, static HTML, no framework/library)
   ============================================================ */
.syllabus-page {
    --gold: #b88f33;
    --gold-soft: #d9c089;
    --gold-tint: #f6efde;
    --gold-deep: #8a6a25;
    --ink: #c21010;
    --ink-2: #3d3d3d;
    --ink-soft: #6b6b6b;
    --line: #ebe4d3;
    --line-soft: #f1ece0;
    --paper: #fdfaf2;
    --paper-2: #faf5e8;
    --white: #ffffff;
    --shadow-sm: 0 2px 8px rgba(60, 42, 12, 0.04);
    --shadow-md: 0 8px 24px rgba(60, 42, 12, 0.08);
    --shadow-lg: 0 18px 40px rgba(184, 143, 51, 0.15);
    background: radial-gradient(900px 500px at 100% -100px, rgba(184,143,51,0.06), transparent 60%), radial-gradient(700px 400px at -10% 30%, rgba(184,143,51,0.04), transparent 60%), var(--paper);
    padding: 30px 16px 60px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.syllabus-wrap {
    max-width: 1180px;
    margin: 0 auto;
}

.syllabus-heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 34px;
    color: var(--ink);
    margin: 0 0 4px;
}

.syllabus-subheading {
    font-size: 14px;
    color: var(--ink-soft);
    margin: 0 0 20px;
}

/* ---------- TOOLBAR: search ---------- */
.syllabus-toolbar {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 14px 16px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.syllabus-search {
    flex: 1 1 300px;
    position: relative;
}

    .syllabus-search i.fa-search {
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
        color: var(--gold);
        font-size: 14px;
    }

    .syllabus-search input {
        width: 100%;
        box-sizing: border-box;
        padding: 12px 42px 12px 42px;
        border: 1px solid var(--line);
        border-radius: 10px;
        font-family: inherit;
        font-size: 14.5px;
        background: var(--paper-2);
        color: var(--ink);
        outline: none;
        transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    }

        .syllabus-search input::placeholder {
            color: #a89878;
        }

        .syllabus-search input:focus {
            border-color: var(--gold);
            background: var(--white);
            box-shadow: 0 0 0 4px rgba(184,143,51,0.10);
        }

/* ---------- COURSE FILTER CHIPS ---------- */
.syllabus-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 12px 14px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    align-items: center;
}

.filters-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-right: 4px;
    padding: 0 4px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid var(--line);
    background: var(--paper-2);
    color: var(--ink-2);
    transition: all 0.18s ease;
    font-family: inherit;
    user-select: none;
}

    .filter-chip:hover {
        border-color: var(--gold-soft);
        color: var(--gold-deep);
        background: var(--gold-tint);
        transform: translateY(-1px);
    }

    .filter-chip.is-active {
        background: var(--ink);
        color: var(--white);
        border-color: var(--ink);
        box-shadow: 0 6px 16px rgba(26,26,26,0.18);
    }

/* ---------- COURSE SECTION (BA / BSc / BCom ...) ---------- */
.course-section {
    margin-bottom: 22px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.course-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--gold-tint) 0%, var(--white) 60%);
    border-bottom: 1px solid transparent;
    user-select: none;
}

    .course-header:hover {
        background: var(--gold-tint);
    }

.course-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: 0.4px;
}

.course-full-name {
    font-size: 12px;
    color: var(--ink-soft);
    font-weight: 500;
}

.course-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold-deep);
    background: var(--gold-tint);
    border: 1px solid rgba(184,143,51,0.25);
    padding: 4px 12px;
    border-radius: 999px;
}

.course-chevron {
    color: var(--gold);
    font-size: 14px;
    transition: transform 0.25s ease;
}

.course-section.is-open .course-chevron {
    transform: rotate(180deg);
}

.course-section.is-open .course-header {
    border-bottom-color: var(--line);
}

.course-body {
    display: none;
    padding: 16px 22px 22px;
}

.course-section.is-open .course-body {
    display: block;
}

/* ---------- SUBJECT ACCORDION (Hindi / English ...) ---------- */
.subject-item {
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    background: var(--paper-2);
}

    .subject-item:last-child {
        margin-bottom: 0;
    }

.subject-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    cursor: pointer;
    user-select: none;
    background: var(--white);
}

    .subject-header:hover {
        background: var(--paper-2);
    }

.subject-name {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ink-2);
    margin: 0;
}

.subject-chevron {
    margin-left: auto;
    color: var(--gold);
    font-size: 12px;
    transition: transform 0.25s ease;
}

.subject-item.is-open .subject-chevron {
    transform: rotate(180deg);
}

.subject-body {
    display: none;
    padding: 6px 18px 14px;
}

.subject-item.is-open .subject-body {
    display: block;
}

/* ---------- SEMESTER GROUP ROW ---------- */
.sem-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-top: 10px;
}

.sem-info {
    min-width: 0;
}

.sem-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold-deep);
    background: var(--gold-tint);
    border: 1px solid rgba(184,143,51,0.18);
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 6px;
}

.sem-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-2);
    margin: 0;
}

.sem-file-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: var(--ink-soft);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 4px;
}

.sem-actions {
    display: flex;
    gap: 8px;
}

/* ---------- BUTTONS (reused from notices) ---------- */
.notice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 7px;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.notice-btn-primary {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
}

    .notice-btn-primary:hover {
        background: var(--gold);
        border-color: var(--gold);
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 8px 16px rgba(184,143,51,0.28);
    }

.notice-btn-secondary {
    background: var(--white);
    color: var(--ink-2);
    border-color: var(--line);
}

    .notice-btn-secondary:hover {
        background: var(--gold-tint);
        color: var(--gold-deep);
        border-color: var(--gold-soft);
    }

/* ---------- HIDDEN via search/filter ---------- */
.is-hidden {
    display: none !important;
}

/* ---------- NO RESULTS ---------- */
.no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--ink-soft);
    font-size: 15px;
    display: none;
    background: var(--white);
    border: 1px dashed var(--line);
    border-radius: 14px;
}

    .no-results.active {
        display: block;
    }

    .no-results strong {
        color: var(--ink);
        display: block;
        margin-bottom: 4px;
        font-size: 17px;
    }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 640px) {
    .sem-row {
        grid-template-columns: 1fr;
    }

    .sem-actions {
        justify-content: flex-start;
    }

    .course-header {
        padding: 14px 16px;
    }

    .course-title {
        font-size: 20px;
    }
}


/* ============================================================
   LEADERSHIP SECTION — scoped styles (no library/framework)
   ============================================================ */
.leadership {
    --l-gold: #b88f33;
    --l-gold-soft: #d9c089;
    --l-gold-tint: #f6efde;
    --l-gold-deep: #8a6a25;
    --l-ink: #1f2430;
    --l-ink-2: #3d3d3d;
    --l-ink-soft: #6b6b6b;
    --l-line: #3c65d7;
    --l-white: #ffffff;
    --l-shadow-sm: 0 2px 8px rgba(31, 36, 48, 0.06);
    --l-shadow-lg: 0 20px 44px rgba(31, 36, 48, 0.12);
    background: radial-gradient(800px 420px at 100% -80px, rgba(184,143,51,0.06), transparent 60%), #fbfaf7;
    padding: 70px 0;
}

    .leadership .container {
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 20px;
    }

/* ---------- Section head ---------- */
.leadership-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 46px;
}

.leadership .eyebrow {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--l-gold-deep);
    background: var(--l-gold-tint);
    border: 1px solid rgba(184,143,51,0.25);
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
}



.leadership-sub {
    font-size: 15px;
    line-height: 1.65;
    color: var(--l-ink-soft);
    margin: 0;
}

/* ---------- Card grid ---------- */
.leadership-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.leader-card {
    background: var(--l-white);
    border: 1px solid var(--l-line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--l-shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    display: flex;
    flex-direction: column;
}

    .leader-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--l-shadow-lg);
        border-color: var(--l-gold-soft);
    }

/* ---------- Photo ---------- */
.leader-photos {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: var(--l-gold-tint);
}

    .leader-photos img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        display: block;
        transition: transform 0.4s ease;
    }

.leader-card:hover .leader-photos img {
    transform: scale(1.05);
}

.leader-photos::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(31,36,48,0.35), rgba(31,36,48,0) 45%);
}

/* ---------- Info ---------- */
.leader-info {
    padding: 22px 22px 26px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.leader-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 21px;
    font-weight: 700;
    color: var(--l-ink);
    margin: 0 0 6px;
}

.leader-designation {
    display: inline-block;
    align-self: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--l-gold-deep);
    background: var(--l-gold-tint);
    border: 1px solid rgba(184,143,51,0.2);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.leader-message {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--l-ink-soft);
    font-style: italic;
    margin: 0;
    position: relative;
    padding-top: 8px;
}

    .leader-message::before {
        content: '';
        display: block;
        width: 34px;
        height: 2px;
        background: var(--l-gold);
        margin: 0 auto 12px;
    }

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .leadership-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .leadership {
        padding: 50px 0;
    }

    .leadership-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin: 0 auto;
    }
    .leadership-grid img{
       width:100% !important
    }

    .leadership .section-title {
        font-size: 26px;
    }
}