/* ==========================================================
   KIU DESIGN SYSTEM  –  Brand-new CSS  (zero legacy)
   Karakoram International University Web Portal
   ========================================================== */

/* ──────────────────────────────────────────────────────────
   1. CSS TOKENS
────────────────────────────────────────────────────────── */
:root {
    /* Brand */
    --c-navy: #003C71;
    --c-navy-dark: #002650;
    --c-navy-light: #0056a3;
    --c-gold: #F59E0B;
    --c-gold-dark: #D97706;
    --c-sky: #0EA5E9;

    /* Neutrals */
    --c-white: #FFFFFF;
    --c-bg: #F8FAFC;
    --c-bg-alt: #EEF2F7;
    --c-surface: #FFFFFF;
    --c-border: #E2E8F0;
    --c-text: #0F172A;
    --c-text-2: #334155;
    --c-text-muted: #64748B;

    /* Effects */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .06);
    --shadow-sm: 0 2px 8px rgba(0, 60, 113, .08);
    --shadow-md: 0 4px 20px rgba(0, 60, 113, .12);
    --shadow-lg: 0 12px 40px rgba(0, 60, 113, .18);

    /* Shape */
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-pill: 100px;

    /* Motion */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --t-fast: .18s var(--ease);
    --t-mid: .28s var(--ease);
    --t-slow: .45s var(--ease);

    /* Typography */
    --font-sans: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ──────────────────────────────────────────────────────────
   2. GLOBAL RESET & BASE
────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-sans);
    background: var(--c-bg);
    color: var(--c-text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

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

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

a:hover {
    color: var(--c-gold);
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: 1.25;
    color: var(--c-text);
}

/* ──────────────────────────────────────────────────────────
   3. TOP BAR
────────────────────────────────────────────────────────── */
.kiu-topbar {
    background: var(--c-navy-dark);
    border-bottom: 2px solid var(--c-gold);
    padding: 7px 0;
}

.kiu-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.dp-alumni-photo-wrap .owl-carousel .owl-item img {
    width: 90px !important;
    height: 90px !important;
}
.kiu-topbar-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.kiu-topbar-links li a {
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, .75);
    padding: 4px 10px;
    border-right: 1px solid rgba(255, 255, 255, .12);
    transition: color var(--t-fast);
    white-space: nowrap;
}

.kiu-topbar-links li:last-child a {
    border-right: none;
}

.kiu-topbar-links li a i {
    margin-right: 5px;
    opacity: .65;
    font-size: 10px;
}

.kiu-topbar-links li a:hover {
    color: var(--c-gold);
}

.kiu-topbar-social {
    display: flex;
    align-items: center;
    gap: 6px;
}

.kiu-topbar-social li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
    transition: all var(--t-fast);
}

.kiu-topbar-social li a:hover {
    background: var(--c-gold);
    color: #fff;
    transform: translateY(-2px);
}

/* ──────────────────────────────────────────────────────────
   4. LOGO BAR
────────────────────────────────────────────────────────── */
.kiu-logo-bar {
    background: var(--c-white);
    border-bottom: 1px solid var(--c-border);
    padding: 14px 0;
}

.kiu-logo-inner {
    display: flex;
    align-items: center;
    gap: 20px;
}

.kiu-logo {
    flex-shrink: 0;
}

.kiu-logo img {
    height: 64px;
    width: auto;
    object-fit: contain;
    display: block;
}

.kiu-logo-tagline {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 20px;
    border-left: 2px solid var(--c-border);
}

/*@media (max-width: 767px) { .kiu-logo-tagline { display: block; } }*/

.kiu-tagline-main {
    font-size: 14px;
    font-weight: 800;
    color: var(--c-navy);
    letter-spacing: -.2px;
    line-height: 1.2;
}

.kiu-tagline-sub {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--c-text-muted);
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

/* Right-side actions group */
.kiu-logo-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Search button in logo bar */
.kiu-search-logobar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--c-bg-alt);
    border: 1.5px solid var(--c-border);
    color: var(--c-navy);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all var(--t-fast);
    white-space: nowrap;
}

.kiu-search-logobar:hover {
    background: var(--c-navy);
    border-color: var(--c-navy);
    color: #fff;
}

.kiu-search-logobar .fa {
    font-size: 13px;
}

.kiu-search-label-text {
    font-size: 13px;
}

@media (max-width: 575px) {
    .kiu-search-label-text {
        display: none;
    }
}

/* CTA buttons */
.kiu-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: var(--r-sm);
    white-space: nowrap;
    transition: all var(--t-fast);
    text-decoration: none;
}

.kiu-action-btn .fa {
    font-size: 13px;
}

.kiu-action-outline {
    color: var(--c-navy);
    border: 1.5px solid var(--c-border);
    background: var(--c-bg-alt);
}

.kiu-action-outline:hover {
    border-color: var(--c-navy);
    background: var(--c-navy);
    color: #fff;
}

.kiu-action-filled {
    background: var(--c-navy);
    color: #fff;
    border: 1.5px solid var(--c-navy);
    box-shadow: 0 4px 14px rgba(0, 60, 113, .22);
}

.kiu-action-filled:hover {
    background: var(--c-gold);
    border-color: var(--c-gold);
    color: #fff;
    box-shadow: 0 4px 14px rgba(245, 158, 11, .32);
    transform: translateY(-1px);
}

/* ──────────────────────────────────────────────────────────
   5. MAIN NAVIGATION
────────────────────────────────────────────────────────── */
.kiu-navbar {
    background: var(--c-navy);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background var(--t-mid), box-shadow var(--t-mid);
}

.kiu-navbar.kiu-sticky {
    background: var(--c-navy-dark);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .28);
}

.kiu-nav-inner {
    display: flex;
    align-items: center;
    min-height: 52px;
    position: relative;
}

/* ── Desktop nav menu wrapper ── */
.kiu-nav-menu {
    display: flex;
    align-items: center;
    flex: 1;
}

/* ── Nav list ── */
.kiu-nav-list {
    display: flex;
    align-items: center;
    flex: 1;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
}

.kiu-nav-item {
    position: relative;
}

.kiu-nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 16px 12px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, .88);
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
    transition: color var(--t-fast);
    position: relative;
    text-decoration: none;
}

.kiu-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 3px;
    background: var(--c-gold);
    border-radius: 3px 3px 0 0;
    transform: scaleX(0);
    transition: transform var(--t-fast);
}

.kiu-nav-item:hover > .kiu-nav-link,
.kiu-nav-item.active > .kiu-nav-link {
    color: var(--c-gold);
}

.kiu-nav-item:hover > .kiu-nav-link::after,
.kiu-nav-item.active > .kiu-nav-link::after {
    transform: scaleX(1);
}

.kiu-caret {
    font-size: 9px;
    opacity: .6;
    transition: transform var(--t-fast);
    margin-left: 2px;
}

.kiu-nav-item:hover > .kiu-nav-link .kiu-caret {
    transform: rotate(180deg);
}

/* ── Dropdown ── */
.kiu-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    min-width: 220px;
    background: var(--c-white);
    border-top: 3px solid var(--c-gold);
    border-radius: 0 0 var(--r-md) var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--t-mid), transform var(--t-mid), visibility var(--t-mid);
    z-index: 1001;
    list-style: none;
}

.kiu-has-drop:hover > .kiu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.kiu-dropdown li a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text-2);
    border-left: 3px solid transparent;
    transition: all var(--t-fast);
    text-decoration: none;
    white-space: nowrap;
}

.kiu-dropdown li a .fa {
    font-size: 11px;
    color: var(--c-text-muted);
    width: 14px;
    flex-shrink: 0;
}

.kiu-dropdown li a:hover {
    background: var(--c-bg-alt);
    color: var(--c-navy);
    border-left-color: var(--c-gold);
    padding-left: 22px;
}

/* ── Mega panel ── */
.kiu-mega-panel {
    position: fixed; /* fixed avoids overflow-hidden clipping */
    top: auto; /* overridden by JS-calculated value fallback below */
    left: 0;
    right: 0;
    width: 100%;
    background: var(--c-white);
    border-top: 3px solid var(--c-gold);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-lg);
    padding: 28px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--t-mid), transform var(--t-mid), visibility var(--t-mid);
    z-index: 1001;
}

.kiu-has-mega:hover > .kiu-mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.kiu-mega-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

.kiu-mega-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px 28px;
}

.kiu-mega-col {
    padding: 0;
}

.kiu-mega-heading {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-navy);
    background: var(--c-bg-alt);
    padding: 8px 12px;
    border-radius: var(--r-xs);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.kiu-mega-heading .fa {
    color: var(--c-gold);
}

.kiu-mega-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kiu-mega-links li a {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--c-text-2);
    padding: 6px 12px;
    border-radius: var(--r-xs);
    transition: all var(--t-fast);
    text-decoration: none;
}

.kiu-mega-links li a .fa {
    font-size: 10px;
    color: var(--c-text-muted);
}

.kiu-mega-links li a:hover {
    background: var(--c-bg-alt);
    color: var(--c-navy);
    padding-left: 16px;
}

/* ── Hamburger button ── */
.kiu-nav-toggle {
    display: none; /* hidden on desktop */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: rgba(255, 255, 255, .1);
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    padding: 10px 12px;
    margin-left: auto;
    transition: background var(--t-fast);
}

.kiu-nav-toggle:hover {
    background: rgba(255, 255, 255, .2);
}

.kiu-ham-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform var(--t-fast), opacity var(--t-fast), width var(--t-fast);
    transform-origin: center;
}

/* Animate to X when open */
.kiu-nav-toggle.is-open .kiu-ham-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.kiu-nav-toggle.is-open .kiu-ham-bar:nth-child(2) {
    opacity: 0;
    width: 0;
}

.kiu-nav-toggle.is-open .kiu-ham-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ──────────────────────────────────────────────────────────
   RESPONSIVE NAVIGATION
────────────────────────────────────────────────────────── */
@media (max-width: 991px) {

    /* Show hamburger */
    .kiu-nav-toggle {
        display: flex;
    }

    /* Nav menu slides in from top */
    .kiu-nav-menu {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--c-navy-dark);
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s var(--ease);
        z-index: 1002;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
    }

    .kiu-nav-menu.is-open {
        max-height: 85vh;
        overflow-y: auto;
    }

    /* Vertical list */
    .kiu-nav-list {
        flex-direction: column;
        align-items: stretch;
        padding: 8px 0 16px;
    }

    .kiu-nav-item {
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .kiu-nav-item:last-child {
        border-bottom: none;
    }

    .kiu-nav-link {
        padding: 13px 20px;
        justify-content: space-between;
        font-size: 13px;
    }

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

    .kiu-nav-item:hover > .kiu-nav-link {
        color: rgba(255, 255, 255, .88);
    }

    /* Mobile caret rotates when item is open */
    .kiu-nav-item.mob-open > .kiu-nav-link .kiu-caret {
        transform: rotate(180deg);
    }

    /* Dropdown — hidden by default, shown via .mob-open */
    .kiu-dropdown {
        position: static !important;
        opacity: 1 !important;
        visibility: hidden !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        background: rgba(0, 0, 0, .2) !important;
        padding: 4px 0 8px 0 !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height .28s var(--ease), visibility .28s !important;
    }

    .kiu-nav-item.mob-open > .kiu-dropdown {
        visibility: visible !important;
        max-height: 600px;
    }

    .kiu-dropdown li a {
        color: rgba(255, 255, 255, .75) !important;
        padding: 9px 32px !important;
        border-left: none !important;
        font-size: 12.5px !important;
        white-space: normal;
    }

    .kiu-dropdown li a:hover {
        background: rgba(255, 255, 255, .08) !important;
        color: var(--c-gold) !important;
        padding-left: 36px !important;
    }

    /* Mega panel — static on mobile */
    .kiu-mega-panel {
        position: static !important;
        opacity: 1 !important;
        visibility: hidden !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        background: rgba(0, 0, 0, .2) !important;
        padding: 8px 0 !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height .28s var(--ease), visibility .28s !important;
    }

    .kiu-nav-item.mob-open > .kiu-mega-panel {
        visibility: visible !important;
        max-height: 1000px;
    }

    .kiu-mega-inner {
        padding: 0 16px !important;
    }

    .kiu-mega-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px 16px;
    }

    .kiu-mega-heading {
        background: rgba(255, 255, 255, .1) !important;
        color: rgba(255, 255, 255, .9) !important;
    }

    .kiu-mega-links li a {
        color: rgba(255, 255, 255, .72) !important;
    }

    .kiu-mega-links li a:hover {
        background: rgba(255, 255, 255, .08) !important;
        color: var(--c-gold) !important;
    }
}

@media (max-width: 575px) {
    .kiu-mega-grid {
        grid-template-columns: 1fr;
    }

    .kiu-nav-link {
        font-size: 12.5px;
        padding: 12px 16px;
    }
}

/* ──────────────────────────────────────────────────────────
   6. HERO CAROUSEL
────────────────────────────────────────────────────────── */
#carouselExampleCaptions {
    border-bottom: 4px solid var(--c-gold);
}

#carouselExampleCaptions .carousel-item img {
    width: 100%;
    height: 540px;
    object-fit: cover;
    filter: brightness(.78);
}

#carouselExampleCaptions .carousel-caption {
    bottom: 0;
    left: 0;
    right: 0;
    text-align: left;
    padding: 32px 64px 52px;
    background: linear-gradient(to top, rgba(0, 38, 80, .88) 0%, rgba(0, 38, 80, .3) 60%, transparent 100%);
    border-radius: 0;
}

#carouselExampleCaptions .carousel-caption p {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
    margin-bottom: 16px;
    max-width: 680px;
}

#carouselExampleCaptions .carousel-caption .btn-warning,
#carouselExampleCaptions .carousel-caption .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-gold) !important;
    border-color: var(--c-gold) !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: var(--r-sm);
    text-transform: uppercase;
    letter-spacing: .5px;
    box-shadow: 0 6px 20px rgba(245, 158, 11, .45);
    transition: all var(--t-fast);
}

#carouselExampleCaptions .carousel-caption .btn:hover {
    background: var(--c-gold-dark) !important;
    border-color: var(--c-gold-dark) !important;
    transform: translateY(-2px);
}

/* Indicators */
.carousel-indicators [data-bs-target] {
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .5) !important;
    border: none !important;
    margin: 0 4px;
    transition: all var(--t-fast);
}

.carousel-indicators [data-bs-target].active {
    background: var(--c-gold) !important;
    width: 28px !important;
    border-radius: var(--r-pill) !important;
}

/* Controls */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 44px;
    height: 44px;
    background-color: rgba(0, 60, 113, .6);
    background-size: 14px;
    border-radius: 50%;
}

/* ──────────────────────────────────────────────────────────
   7. QUICK ACCESS CARDS  (top shortcut strip)
────────────────────────────────────────────────────────── */
.categories-area.pt-50 {
    background: linear-gradient(135deg, var(--c-navy-dark) 0%, var(--c-navy-light) 100%) !important;
    padding: 28px 0 !important;
}

.categories-area.pt-50 .hover-card {
    background: rgba(255, 255, 255, .1) !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: var(--r-md) !important;
    padding: 14px 18px !important;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all var(--t-mid) !important;
    box-shadow: none !important;
}

.categories-area.pt-50 .hover-card:hover {
    background: rgba(255, 255, 255, .18) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22) !important;
}

.categories-area.pt-50 .icon-wrapper {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    background: var(--c-gold) !important;
    border-radius: var(--r-sm) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px;
}

.categories-area.pt-50 .card-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin: 0 !important;
    letter-spacing: .2px;
}

/* ──────────────────────────────────────────────────────────
   8. SECTION HEADERS  (shared)
────────────────────────────────────────────────────────── */
.sec-title {
    margin-bottom: 30px;
}

.sec-title h2 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--c-navy);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    position: relative;
}

.sec-title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 44px;
    height: 3px;
    background: var(--c-gold);
    border-radius: 2px;
}

.sec-title h2 img {
    width: 24px !important;
    height: 24px;
}

.sec-title.white-color h2 {
    color: #fff;
}

.sec-title.white-color h2::after {
    background: var(--c-gold);
}

.sec-title .view-more {
    float: right;
    margin-top: 4px;
}

.sec-title .view-more a {
    font-size: 12px;
    font-weight: 700;
    color: var(--c-navy);
    border: 1.5px solid var(--c-navy);
    padding: 5px 14px;
    border-radius: var(--r-xs);
    transition: all var(--t-fast);
}

.sec-title .view-more a:hover {
    background: var(--c-navy);
    color: #fff;
}

/* ──────────────────────────────────────────────────────────
   9. NEWS SECTION
────────────────────────────────────────────────────────── */
.kiu-news-section {
    background: var(--c-bg) !important;
    padding: 70px 0 !important;
}

/* Header bar */
.kiu-news-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--c-border);
}

.kiu-news-heading {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--c-navy) !important;
    letter-spacing: .4px !important;
}

.kiu-news-viewall {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--c-navy) !important;
    border: 1.5px solid var(--c-navy) !important;
    padding: 6px 16px !important;
    border-radius: var(--r-xs) !important;
    transition: all var(--t-fast) !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.kiu-news-viewall:hover {
    background: var(--c-navy) !important;
    color: #fff !important;
}

/* Featured card */
.kiu-news-featured-card {
    display: block;
    color: inherit;
    text-decoration: none;
}

.kiu-featured-img {
    overflow: hidden;
    border-radius: var(--r-md);
}

.kiu-featured-img img {
    width: 100%;
    height: 290px;
    object-fit: cover;
    transition: transform var(--t-slow);
}

.kiu-news-featured-card:hover .kiu-featured-img img {
    transform: scale(1.05);
}

.kiu-featured-body {
    padding: 16px 0 0;
}

.kiu-news-date {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--c-gold);
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.kiu-featured-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--c-text);
    line-height: 1.45;
    transition: color var(--t-fast);
}

.kiu-news-featured-card:hover .kiu-featured-title {
    color: var(--c-navy);
}

/* Mini cards */
.kiu-news-list-col {
    border-left: 1px solid var(--c-border);
    padding-left: 24px;
}

.kiu-news-mini-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    padding: 14px 0;
    border-bottom: 1px solid var(--c-border);
    transition: padding-left var(--t-fast);
}

.kiu-news-mini-card:last-child {
    border-bottom: none;
}

.kiu-news-mini-card:hover {
    padding-left: 6px;
}

.kiu-mini-thumb {
    flex-shrink: 0;
    width: 84px;
    height: 72px;
    overflow: hidden;
    border-radius: var(--r-sm);
}

.kiu-mini-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-fast);
}

.kiu-news-mini-card:hover .kiu-mini-thumb img {
    transform: scale(1.06);
}

.kiu-mini-body {
    flex: 1;
}

.kiu-mini-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--c-text);
    line-height: 1.45;
    margin: 0;
    transition: color var(--t-fast);
}

.kiu-news-mini-card:hover .kiu-mini-title {
    color: var(--c-navy);
}

/* ──────────────────────────────────────────────────────────
   10. QUICK LINKS + EVENTS SECTION
────────────────────────────────────────────────────────── */
.categories-area.bg-light.pt-70 {
    background: var(--c-white) !important;
    padding: 70px 0 !important;
}

.categories-area.bg-light.pt-70 .hover-card {
    background: var(--c-white) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-md) !important;
    padding: 14px 18px !important;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-xs) !important;
    transition: all var(--t-mid) !important;
    text-decoration: none;
}

.categories-area.bg-light.pt-70 .hover-card:hover {
    border-color: var(--c-navy) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-3px);
}

.categories-area.bg-light.pt-70 .icon-wrapper {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    background: var(--c-navy) !important;
    border-radius: var(--r-sm) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px;
    color: #fff;
    transition: background var(--t-fast);
}

.categories-area.bg-light.pt-70 .hover-card:hover .icon-wrapper {
    background: var(--c-gold) !important;
}

.categories-area.bg-light.pt-70 .card-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--c-text) !important;
    margin: 0 !important;
}

/* Upcoming Events */
.post-item.upcoming-event-item {
    background: var(--c-white) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-md) !important;
    padding: 14px !important;
    box-shadow: var(--shadow-xs) !important;
    transition: all var(--t-mid) !important;
    margin-bottom: 14px !important;
}

.post-item.upcoming-event-item:hover {
    border-color: var(--c-navy) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateX(5px);
}

.custom-image-events img {
    width: 90px !important;
    height: 90px !important;
    object-fit: cover !important;
    border-radius: var(--r-sm) !important;
}

.post-desc h4 {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    border-bottom: 1px solid var(--c-border) !important;
    padding-bottom: 6px !important;
    margin-bottom: 8px !important;
}

.post-desc h4 a {
    color: var(--c-text);
    transition: color var(--t-fast);
}

.post-desc h4 a:hover {
    color: var(--c-navy);
}

.event-date-card svg {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 4px;
    fill: var(--c-navy) !important;
}

.event-date-card p {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-text-muted);
    margin: 0 0 6px;
    display: flex;
    align-items: center;
}

.duration a {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--c-navy) !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color var(--t-fast) !important;
}

.duration a:hover {
    color: var(--c-gold) !important;
}

.duration a svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ──────────────────────────────────────────────────────────
   11. VIDEO GALLERY + FACEBOOK SECTION
────────────────────────────────────────────────────────── */
#rs-events {
    background: var(--c-bg) !important;
    padding: 70px 0 !important;
}

.about-img {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-md);
}

.about-img > img,
.video-gallery-image {
    width: 100% !important;
    height: 190px !important;
    object-fit: cover !important;
    border-radius: var(--r-md) !important;
    display: block;
    transition: transform var(--t-slow);
}

.about-img:hover > img,
.event-item:hover .video-gallery-image {
    transform: scale(1.05);
}

/* Play button */
.popup-youtube {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background: rgba(245, 158, 11, .92);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: all var(--t-fast);
}

.popup-youtube::after {
    content: '';
    border-style: solid;
    border-width: 11px 0 11px 20px;
    border-color: transparent transparent transparent #fff;
    margin-left: 4px;
}

.popup-youtube:hover {
    background: var(--c-navy);
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}

.overly-border {
    position: absolute;
    inset: 0;
    border-radius: var(--r-md);
    background: linear-gradient(to top, rgba(0, 38, 80, .45) 0%, transparent 55%);
    pointer-events: none;
}

.event-item {
    transition: transform var(--t-fast);
}

.event-item:hover {
    transform: translateY(-4px);
}

.event-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--c-text) !important;
    margin-top: 12px !important;
    line-height: 1.4 !important;
}

.event-title a {
    color: var(--c-navy) !important;
    transition: color var(--t-fast);
}

.event-title a:hover {
    color: var(--c-gold) !important;
}

/* OWL carousel controls */
.owl-theme .owl-nav [class*='owl-'] {
    background: var(--c-navy) !important;
    color: #fff !important;
    border-radius: var(--r-sm) !important;
    width: 34px;
    height: 34px;
    line-height: 34px !important;
    font-size: 15px !important;
    margin: 4px !important;
    transition: background var(--t-fast) !important;
}

.owl-theme .owl-nav [class*='owl-']:hover {
    background: var(--c-gold) !important;
}

.owl-theme .owl-dots .owl-dot span {
    background: var(--c-border) !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    transition: all var(--t-fast) !important;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--c-navy) !important;
    width: 22px !important;
    border-radius: var(--r-pill) !important;
}

/* Homepage carousels — nav arrows inside container, always visible */
.hp-section .rs-carousel.owl-carousel {
    position: relative;
}

/* Override the -60px outside-placement from style.css */
.hp-section .rs-carousel .owl-nav .owl-prev,
.hp-section .rs-carousel .owl-nav .owl-next {
    position: absolute !important;
    top: 40% !important;
    left: auto !important;
    right: auto !important;
    opacity: 1 !important;
    transform: translateY(-50%) !important;
    z-index: 10;
}

.hp-section .rs-carousel .owl-nav .owl-prev {
    left: 4px !important;
}

.hp-section .rs-carousel .owl-nav .owl-next {
    right: 4px !important;
}

/* Report cards */
.event-item.card {
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-md) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-xs) !important;
    transition: all var(--t-mid) !important;
}

.event-item.card:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-5px);
    border-color: var(--c-navy) !important;
}

.report-cards img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.event-item.card .card-body {
    padding: 16px !important;
}

.event-item.card .btn-primary {
    background: var(--c-navy) !important;
    border-color: var(--c-navy) !important;
    border-radius: var(--r-xs) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 6px 16px !important;
    transition: all var(--t-fast) !important;
}

.event-item.card .btn-primary:hover {
    background: var(--c-gold) !important;
    border-color: var(--c-gold) !important;
}

/* Main featured video */
.main-featured-image img {
    width: 100% !important;
    height: 240px !important;
    object-fit: cover !important;
    border-radius: var(--r-md) !important;
}

/* ──────────────────────────────────────────────────────────
   12. MESSAGE DESK + CAMPUSES
────────────────────────────────────────────────────────── */
#rs-testimonial {
    background: linear-gradient(145deg, var(--c-navy-dark) 0%, var(--c-navy) 55%, var(--c-navy-light) 100%) !important;
    padding: 70px 0 !important;
    position: relative;
    overflow: hidden;
}

#rs-testimonial::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
    top: -120px;
    right: -100px;
    pointer-events: none;
}

.team {
    margin-bottom: 24px;
}

.team-member {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: rgba(255, 255, 255, .09) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: var(--r-lg) !important;
    padding: 22px !important;
    transition: all var(--t-mid) !important;
}

.team-member:hover {
    background: rgba(255, 255, 255, .14) !important;
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .25) !important;
}

.team-member .pic {
    width: 88px !important;
    height: 88px !important;
    min-width: 88px;
    border-radius: 50% !important;
    overflow: hidden;
    border: 3px solid var(--c-gold) !important;
}

.team-member .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-member .member-info {
    flex: 1;
}

.team-member .member-info h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 4px !important;
}

.team-member .member-info > span {
    font-size: 12px !important;
    color: var(--c-gold) !important;
    font-weight: 700 !important;
    letter-spacing: .4px !important;
    display: block !important;
    margin-bottom: 8px !important;
}

.team-member .member-info p {
    font-size: 12.5px !important;
    color: rgba(255, 255, 255, .72) !important;
    line-height: 1.65 !important;
    margin-bottom: 12px !important;
}

.team-member .btn-primary,
.button-section .btn-primary {
    background: var(--c-gold) !important;
    border-color: var(--c-gold) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 7px 20px !important;
    border-radius: var(--r-sm) !important;
    transition: all var(--t-fast) !important;
}

.team-member .btn-primary:hover,
.button-section .btn-primary:hover {
    background: var(--c-gold-dark) !important;
    border-color: var(--c-gold-dark) !important;
    transform: translateY(-1px);
}

/* Campus cards */
.kiu-campus {
    border-radius: var(--r-md) !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, .09) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    transition: all var(--t-mid) !important;
}

.kiu-campus:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .3) !important;
}

.kiu-campus img {
    width: 100% !important;
    height: 145px !important;
    object-fit: cover !important;
}

.kiu-campus .member-info {
    padding: 12px 14px 16px !important;
    background: rgba(0, 0, 0, .15) !important;
}

.kiu-campus .member-info span {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, .9) !important;
    margin-bottom: 10px !important;
}

.kiu-campus .btn-warning {
    background: var(--c-gold) !important;
    border-color: var(--c-gold) !important;
    color: #fff !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 5px 16px !important;
    border-radius: var(--r-xs) !important;
    transition: all var(--t-fast) !important;
}

.kiu-campus .btn-warning:hover {
    background: var(--c-gold-dark) !important;
    border-color: var(--c-gold-dark) !important;
    transform: translateY(-1px);
}

/* ──────────────────────────────────────────────────────────
   13. ALUMNI SECTION
────────────────────────────────────────────────────────── */
.kiu-alumni {
    background: var(--c-white) !important;
    padding: 70px 0 !important;
}

.testimonial-item {
    background: var(--c-white);
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-lg) !important;
    padding: 28px 24px !important;
    text-align: center !important;
    transition: all var(--t-mid) !important;
    position: relative;
    overflow: hidden;
}

.testimonial-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--c-navy), var(--c-gold));
}

.testimonial-item:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-5px);
    border-color: var(--c-navy) !important;
}

.testi-img {
    width: 90px !important;
    height: 90px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    margin: 0 auto 16px !important;
    border: 3px solid var(--c-navy) !important;
    box-shadow: 0 4px 16px rgba(0, 60, 113, .2);
}

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

.testi-name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--c-navy) !important;
    border-bottom: 1px solid var(--c-border) !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
}

.testi-desc p {
    font-size: 13px !important;
    color: var(--c-text-muted) !important;
    margin-bottom: 5px !important;
}

.testi-desc p strong {
    color: var(--c-navy);
    font-weight: 700;
}

.testi-desc .description {
    font-size: 12.5px !important;
    color: var(--c-text-muted) !important;
    line-height: 1.6 !important;
    margin-top: 10px !important;
}

/* ──────────────────────────────────────────────────────────
   14. ANNOUNCEMENT MODAL
────────────────────────────────────────────────────────── */
.modal-content {
    border: none !important;
    border-radius: var(--r-lg) !important;
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(135deg, var(--c-navy-dark), var(--c-navy)) !important;
    border-bottom: 3px solid var(--c-gold) !important;
    padding: 18px 24px !important;
}

.modal-header .modal-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #fff !important;
}

.modal-header .btn-close {
    filter: invert(1) brightness(2) !important;
}

.modal-body {
    padding: 24px !important;
}

.modal-footer {
    padding: 14px 24px !important;
    border-top: 1px solid var(--c-border) !important;
}

.modal-footer .btn-warning {
    background: var(--c-gold) !important;
    border-color: var(--c-gold) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: var(--r-sm) !important;
}

.section-modal-notice .title-text {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--c-navy) !important;
    border-bottom: 2px solid var(--c-navy) !important;
    padding-bottom: 8px !important;
    margin-bottom: 14px !important;
}

.breaker {
    height: 1px;
    background: var(--c-border);
    margin: 8px 0;
}

/* ──────────────────────────────────────────────────────────
   15. SEARCH MODAL
────────────────────────────────────────────────────────── */
.kiu-search-modal {
    background: var(--c-navy-dark) !important;
    border-radius: var(--r-xl) !important;
    padding: 0 !important;
}

.kiu-search-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: rgba(255, 255, 255, .1);
    border: none;
    color: rgba(255, 255, 255, .8);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    transition: all var(--t-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kiu-search-close:hover {
    background: var(--c-gold);
    color: #fff;
}

.kiu-search-body {
    padding: 48px 40px 44px;
}

.kiu-search-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .6);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
}

.kiu-search-input-wrap {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--r-md);
    padding: 6px 6px 6px 18px;
    gap: 12px;
}

.kiu-search-input-wrap > .fa {
    color: rgba(255, 255, 255, .5);
    font-size: 17px;
    flex-shrink: 0;
}

.kiu-search-input,
.kiu-search-input.form-control {
    flex: 1;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 0 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #fff !important;
}

.kiu-search-input::placeholder {
    color: rgba(255, 255, 255, .4) !important;
}

.kiu-search-input:focus {
    box-shadow: none !important;
    outline: none !important;
}

.kiu-search-btn {
    background: var(--c-gold);
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all var(--t-fast);
    white-space: nowrap;
}

.kiu-search-btn:hover {
    background: var(--c-gold-dark);
}

/* ──────────────────────────────────────────────────────────
   16. FOOTER
────────────────────────────────────────────────────────── */
#rs-footer {
    background: linear-gradient(160deg, #07111f 0%, #0a1e36 50%, #0d2444 100%) !important;
    position: relative;
    overflow: hidden;
}

/* Gradient accent strip at top */
#rs-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--c-gold) 0%, var(--c-sky) 40%, var(--c-navy-light) 70%, var(--c-gold) 100%);
    background-size: 300% 100%;
    animation: footerStripe 6s linear infinite;
}

@keyframes footerStripe {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 300% 0%;
    }
}

.footer-top {
    padding: 60px 0 50px !important;
}

.footer-bottom {
    background: rgba(0, 0, 0, .35) !important;
    border-top: 1px solid rgba(255, 255, 255, .07) !important;
    padding: 18px 0 !important;
}

.footer-bottom p {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .42);
    margin: 0;
}

.footer-bottom span {
    color: var(--c-gold) !important;
    font-weight: 700;
}

/* Footer logo */
.footer-logo img {
    height: 52px !important;
    opacity: .88;
}

/* Footer section title */
.footer-title {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: var(--c-gold) !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
    position: relative;
}

.footer-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 32px;
    height: 2px;
    background: var(--c-gold);
    border-radius: 2px;
}

/* Footer link lists */
.sitemap-widget li,
.sitemap-widget-custom li {
    padding: 5px 0 !important;
}

.sitemap-widget li a,
.sitemap-widget-custom li a {
    font-size: 12.5px !important;
    color: rgba(255, 255, 255, .6) !important;
    font-weight: 400 !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--t-fast) !important;
}

.sitemap-widget li a i,
.sitemap-widget-custom li a i {
    font-size: 10px;
    opacity: .5;
}

.sitemap-widget li a:hover,
.sitemap-widget-custom li a:hover {
    color: var(--c-gold) !important;
    padding-left: 5px;
}

/* Footer description text */
.footer-desc {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .55);
    line-height: 1.75;
    margin-bottom: 18px;
}

/* Footer social */
.footer-social {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .75);
    border-radius: 50%;
    font-size: 13px;
    transition: all var(--t-fast);
}

.footer-social a:hover {
    background: var(--c-gold);
    color: #fff;
    transform: translateY(-3px);
}

/* Footer contact list */
.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.footer-contact-list .icon {
    color: var(--c-gold);
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.footer-contact-list span,
.footer-contact-list a {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .6);
    line-height: 1.6;
    transition: color var(--t-fast);
}

.footer-contact-list a:hover {
    color: var(--c-gold);
}

/* ──────────────────────────────────────────────────────────
   17. BREADCRUMBS  — background-image hero
────────────────────────────────────────────────────────── */

/* bg7 = banner7.jpg — the shared breadcrumb image */
.bg7 {
    background-image: url('/frontend/assets/images/banner/banner7.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Overlay that sits on top of bg7 */
.breadcrumbs-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 20, 50, .82) 0%,
        rgba(0, 38, 80, .72) 50%,
        rgba(0, 60, 113, .60) 100%
    );
    z-index: 1;
}

/* Wrapper */
.rs-breadcrumbs {
    position: relative;
    padding: 36px 0 30px !important;
    overflow: hidden;
    border-bottom: 3px solid var(--c-gold);
}

/* Decorative circle */
.rs-breadcrumbs::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 40px solid rgba(255, 255, 255, .04);
    pointer-events: none;
    z-index: 1;
}

/* Inner content sits above overlay */
.breadcrumbs-inner {
    position: relative;
    z-index: 2;
}

/* Page title */
.breadcrumbs-inner .page-title,
.breadcrumbs-inner h1 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.3px;
    margin: 0 0 10px;
    line-height: 1.25;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

/* Gold underline accent below title */
.breadcrumbs-inner .page-title::after,
.breadcrumbs-inner h1::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: var(--c-gold);
    border-radius: 2px;
    margin: 8px auto 0;
}

/* Breadcrumb trail */
.breadcrumbs-inner ul {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--r-pill);
    padding: 5px 16px;
    margin: 10px 0 0;
    list-style: none;
    gap: 0;
}

.breadcrumbs-inner ul li {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .65);
}

/* Separator arrow */
.breadcrumbs-inner ul li + li::before {
    content: '\f105';
    font-family: FontAwesome;
    font-size: 10px;
    color: rgba(255, 255, 255, .35);
    margin: 0 8px;
}

.breadcrumbs-inner ul li a {
    color: rgba(255, 255, 255, .78);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--t-fast);
    display: flex;
    align-items: center;
    gap: 4px;
}

.breadcrumbs-inner ul li a .fa {
    font-size: 11px;
    opacity: .75;
}

.breadcrumbs-inner ul li a:hover {
    color: var(--c-gold);
}

/* Current / active item */
.breadcrumbs-inner ul li:last-child,
.breadcrumbs-inner ul li.active {
    color: var(--c-gold);
    font-weight: 700;
}

/* Responsive */
@media (max-width: 767px) {
    .rs-breadcrumbs {
        padding: 28px 0 22px !important;
    }

    .breadcrumbs-inner .page-title,
    .breadcrumbs-inner h1 {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .rs-breadcrumbs {
        padding: 22px 0 18px !important;
    }

    .breadcrumbs-inner .page-title,
    .breadcrumbs-inner h1 {
        font-size: 1.1rem;
    }

    .breadcrumbs-inner ul {
        padding: 5px 12px;
        font-size: 11px;
    }
}

/* ──────────────────────────────────────────────────────────
   18. SCROLL-TO-TOP
────────────────────────────────────────────────────────── */
#kiu-scroll-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 44px;
    height: 44px;
    background: var(--c-navy);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: all var(--t-mid);
    z-index: 999;
}

#kiu-scroll-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

#kiu-scroll-top:hover {
    background: var(--c-gold);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* ──────────────────────────────────────────────────────────
   19. UTILITY & SHARED COMPONENTS
────────────────────────────────────────────────────────── */

/* Buttons */
.btn-primary {
    background: var(--c-navy) !important;
    border-color: var(--c-navy) !important;
    font-weight: 600 !important;
    border-radius: var(--r-sm) !important;
    transition: all var(--t-fast) !important;
}

.btn-primary:hover {
    background: var(--c-gold) !important;
    border-color: var(--c-gold) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(245, 158, 11, .35) !important;
}

.btn-warning {
    background: var(--c-gold) !important;
    border-color: var(--c-gold) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-radius: var(--r-sm) !important;
    transition: all var(--t-fast) !important;
}

.btn-warning:hover {
    background: var(--c-gold-dark) !important;
    border-color: var(--c-gold-dark) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Cards */
.card {
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-xs) !important;
    transition: all var(--t-mid) !important;
}

.card:hover {
    box-shadow: var(--shadow-sm) !important;
}

.card-header {
    background: var(--c-bg-alt) !important;
    border-bottom: 1px solid var(--c-border) !important;
    font-weight: 700 !important;
    color: var(--c-navy) !important;
    font-size: 14px !important;
}

/* Tables */
.table thead th {
    background: var(--c-navy) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-color: rgba(255, 255, 255, .15) !important;
    padding: 12px 16px !important;
}

.table tbody td {
    padding: 11px 16px !important;
    font-size: 13px !important;
    border-color: var(--c-border) !important;
    vertical-align: middle !important;
    color: var(--c-text-2) !important;
}

.table tbody tr:hover td {
    background: var(--c-bg-alt) !important;
}

/* Forms */
.form-control {
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-sm) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: var(--c-text) !important;
    transition: border-color var(--t-fast), box-shadow var(--t-fast) !important;
}

.form-control:focus {
    border-color: var(--c-navy) !important;
    box-shadow: 0 0 0 3px rgba(0, 60, 113, .12) !important;
}

/* Pagination */
.pagination .page-link {
    color: var(--c-navy) !important;
    border-color: var(--c-border) !important;
    border-radius: var(--r-xs) !important;
    margin: 0 2px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all var(--t-fast) !important;
}

.pagination .page-link:hover {
    background: var(--c-navy) !important;
    border-color: var(--c-navy) !important;
    color: #fff !important;
}

.pagination .page-item.active .page-link {
    background: var(--c-navy) !important;
    border-color: var(--c-navy) !important;
    box-shadow: 0 4px 12px rgba(0, 60, 113, .3) !important;
}

/* ──────────────────────────────────────────────────────────
   20. GLOBAL RESPONSIVE  (non-nav rules)
────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .kiu-nav-link {
        padding: 16px 10px;
        font-size: 11.5px;
    }
}

@media (max-width: 991px) {
    #carouselExampleCaptions .carousel-item img {
        height: 380px;
    }

    #carouselExampleCaptions .carousel-caption {
        padding: 22px 28px 36px;
    }

    #carouselExampleCaptions .carousel-caption p {
        font-size: 17px;
    }

    .breadcrumbs-inner .title {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 767px) {
    #carouselExampleCaptions .carousel-item img {
        height: 260px;
    }

    #carouselExampleCaptions .carousel-caption {
        display: block !important;
        padding: 14px 18px 24px;
    }

    #carouselExampleCaptions .carousel-caption p {
        font-size: 14px;
    }

    .kiu-logo img {
        height: 52px;
    }

    .breadcrumbs-inner .title {
        font-size: 1.3rem !important;
    }

    .footer-top {
        padding: 40px 0 36px !important;
    }
}

@media (max-width: 575px) {
    .kiu-topbar-links {
        display: none;
    }

    .kiu-topbar-social {
        margin-left: auto;
    }

    .footer-top {
        padding: 32px 0 28px !important;
    }
}

@media (max-width: 767px) {
    .kiu-topbar-links {
        display: none;
    }

    .kiu-topbar-social {
        margin-left: auto;
    }

    .kiu-logo-bar {
        padding: 12px 0;
    }

    .kiu-logo img {
        height: 52px;
    }

    .kiu-tagline-main {
        font-size: 13px;
    }

    #carouselExampleCaptions .carousel-item img {
        height: 260px;
    }

    #carouselExampleCaptions .carousel-caption {
        display: block !important;
        padding: 14px 18px 24px;
    }

    #carouselExampleCaptions .carousel-caption p {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .categories-area.pt-50 {
        padding: 22px 0 !important;
    }

    .kiu-news-section {
        padding: 50px 0 !important;
    }

    .kiu-alumni {
        padding: 50px 0 !important;
    }

    #rs-testimonial {
        padding: 50px 0 !important;
    }

    .sec-title h2 {
        font-size: 1.15rem;
    }

    .team-member {
        flex-direction: column;
        text-align: center;
    }

    .team-member .pic {
        margin: 0 auto;
    }
}

@media (max-width: 575px) {
    .kiu-logo-actions {
        display: none !important;
    }

    .kiu-mega-grid {
        grid-template-columns: 1fr;
    }

    .breadcrumbs-inner .title {
        font-size: 1.25rem !important;
    }

    .footer-top {
        padding: 36px 0 30px !important;
    }
}

/* ==========================================================
   HOMEPAGE SECTIONS  (hp-* prefix)
   ========================================================== */

/* Base section wrapper */
.hp-section {
    padding: 72px 0;
}

.hp-section-white {
    background: var(--c-white);
}

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

.hp-section-navy {
    background: linear-gradient(145deg, var(--c-navy-dark) 0%, var(--c-navy) 55%, var(--c-navy-light) 100%);
    position: relative;
    overflow: hidden;
}

.hp-section-navy::before {
    content: '';
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
    top: -100px;
    right: -80px;
    pointer-events: none;
}

/* Section head */
.hp-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-border);
}

.hp-section-navy .hp-block-head {
    border-bottom-color: rgba(255, 255, 255, .15);
}

.hp-block-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--c-navy);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.hp-block-title-white {
    color: #fff;
}

.hp-block-title-accent {
    display: inline-block;
    width: 4px;
    height: 22px;
    background: var(--c-gold);
    border-radius: 3px;
    flex-shrink: 0;
}

.hp-viewall-btn {
    font-size: 12px;
    font-weight: 700;
    color: var(--c-navy);
    border: 1.5px solid var(--c-navy);
    padding: 6px 16px;
    border-radius: var(--r-xs);
    white-space: nowrap;
    transition: all var(--t-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.hp-viewall-btn:hover {
    background: var(--c-navy);
    color: #fff;
}

/* Empty state */
.hp-empty-state {
    text-align: center;
    padding: 32px;
    color: var(--c-text-muted);
}

.hp-empty-state i {
    font-size: 32px;
    margin-bottom: 10px;
    display: block;
    opacity: .4;
}

.hp-empty-state p {
    font-size: 14px;
    margin: 0;
}

/* ─────────────────────────────────
   QUICK ACCESS STRIP
───────────────────────────────── */
.hp-strip {
    background: linear-gradient(135deg, var(--c-navy-dark) 0%, var(--c-navy-light) 100%);
    padding: 28px 0;
    border-bottom: 3px solid var(--c-gold);
}

.hp-strip-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--r-md);
    padding: 14px 18px;
    color: #fff;
    text-decoration: none;
    transition: all var(--t-mid);
    position: relative;
    overflow: hidden;
}

.hp-strip-card:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
    background: rgba(255, 255, 255, .18);
}

.hp-strip-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    background: var(--c-gold);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #fff;
    flex-shrink: 0;
    transition: transform var(--t-fast);
}

.hp-strip-card:hover .hp-strip-icon {
    transform: scale(1.1);
}

.hp-strip-label {
    font-size: 13px;
    font-weight: 600;
    flex: 1;
    line-height: 1.3;
}

.hp-strip-arrow {
    font-size: 14px;
    opacity: .5;
    transition: transform var(--t-fast);
}

.hp-strip-card:hover .hp-strip-arrow {
    transform: translateX(4px);
    opacity: .9;
}

/* ─────────────────────────────────
   NEWS CARDS
───────────────────────────────── */
.hp-news-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--r-md);
    overflow: hidden;
    transition: transform var(--t-mid);
}

.hp-news-card:hover {
    transform: translateY(-4px);
    color: inherit;
}

.hp-news-img {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-md);
}

.hp-news-img img {
    width: 100%;
    height: 270px;
    object-fit: cover;
    transition: transform var(--t-slow);
    display: block;
}

.hp-news-card:hover .hp-news-img img {
    transform: scale(1.05);
}

.hp-news-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--c-gold);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
}

.hp-news-body {
    padding: 14px 0 0;
}

.hp-news-date {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: .6px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
}

.hp-news-date .fa {
    color: var(--c-gold);
}

.hp-news-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--c-text);
    line-height: 1.4;
    margin: 0;
    transition: color var(--t-fast);
}

.hp-news-card:hover .hp-news-title {
    color: var(--c-navy);
}

/* Mini news list */
.hp-news-list {
    display: flex;
    flex-direction: column;
    border-left: 2px solid var(--c-border);
    padding-left: 20px;
}

.hp-news-mini {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--c-border);
    text-decoration: none;
    color: inherit;
    transition: padding-left var(--t-fast);
}

.hp-news-mini:last-child {
    border-bottom: none;
}

.hp-news-mini:hover {
    padding-left: 6px;
    color: inherit;
}

.hp-news-mini-thumb {
    flex-shrink: 0;
    width: 76px;
    height: 64px;
    border-radius: var(--r-sm);
    overflow: hidden;
}

.hp-news-mini-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-fast);
}

.hp-news-mini:hover .hp-news-mini-thumb img {
    transform: scale(1.08);
}

.hp-news-mini-body {
    flex: 1;
}

.hp-news-mini-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--c-text);
    line-height: 1.4;
    margin: 0;
    transition: color var(--t-fast);
}

.hp-news-mini:hover .hp-news-mini-title {
    color: var(--c-navy);
}

/* Featured video */
.hp-video-wrap .about-img img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: var(--r-md);
    display: block;
}

/* ─────────────────────────────────
   QUICK LINKS
───────────────────────────────── */
.hp-qlink-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 14px 16px;
    text-decoration: none;
    color: var(--c-text);
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow-xs);
    transition: all var(--t-mid);
}

.hp-qlink-card:hover {
    border-color: var(--c-navy);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: var(--c-navy);
}

.hp-qlink-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    background: var(--c-navy);
    color: #fff;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: background var(--t-fast);
}

.hp-qlink-card:hover .hp-qlink-icon {
    background: var(--c-gold);
}

.hp-qlink-label {
    flex: 1;
}

.hp-qlink-arrow {
    font-size: 14px;
    color: var(--c-text-muted);
    transition: transform var(--t-fast);
}

.hp-qlink-card:hover .hp-qlink-arrow {
    transform: translateX(4px);
    color: var(--c-navy);
}

/* ─────────────────────────────────
   UPCOMING EVENTS
───────────────────────────────── */
.hp-events-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hp-event-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-left: 3px solid transparent;
    border-radius: var(--r-md);
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-xs);
    transition: all var(--t-mid);
}

.hp-event-card:hover {
    border-left-color: var(--c-gold);
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
    color: inherit;
}

.hp-event-thumb {
    width: 72px;
    height: 60px;
    min-width: 72px;
    border-radius: var(--r-sm);
    overflow: hidden;
}

.hp-event-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-fast);
}

.hp-event-card:hover .hp-event-thumb img {
    transform: scale(1.08);
}

.hp-event-body {
    flex: 1;
}

.hp-event-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 5px;
    line-height: 1.35;
    transition: color var(--t-fast);
}

.hp-event-card:hover .hp-event-title {
    color: var(--c-navy);
}

.hp-event-date {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--c-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.hp-event-date .fa {
    color: var(--c-gold);
}

.hp-event-arrow {
    font-size: 16px;
    color: var(--c-border);
    flex-shrink: 0;
    transition: all var(--t-fast);
}

.hp-event-card:hover .hp-event-arrow {
    color: var(--c-gold);
    transform: translateX(2px);
}

/* ─────────────────────────────────
   VIDEO GALLERY
───────────────────────────────── */
.hp-vgallery-item {
    cursor: pointer;
}

.hp-vgallery-img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    border-radius: var(--r-md) !important;
    display: block;
    transition: transform var(--t-slow);
}

.hp-vgallery-item:hover .hp-vgallery-img {
    transform: scale(1.04);
}

.hp-vgallery-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-2);
    text-align: center;
    margin: 10px 0 0;
}

.hp-divider {
    height: 1px;
    background: var(--c-border);
    margin: 40px 0;
}

/* ─────────────────────────────────
   ANNUAL REPORTS
───────────────────────────────── */
.hp-report-card {
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-xs);
    background: var(--c-white);
    transition: all var(--t-mid);
}

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

.hp-report-cover {
    position: relative;
    overflow: hidden;
}

.hp-report-cover img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
    transition: transform var(--t-slow);
}

.hp-report-card:hover .hp-report-cover img {
    transform: scale(1.05);
}

.hp-report-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 38, 80, .65);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--t-mid);
}

.hp-report-card:hover .hp-report-overlay {
    opacity: 1;
}

.hp-report-btn {
    background: var(--c-gold);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: var(--r-sm);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--t-fast);
}

.hp-report-btn:hover {
    background: var(--c-gold-dark);
    color: #fff;
}

.hp-report-body {
    padding: 12px 14px;
}

.hp-report-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text);
    margin: 0;
    line-height: 1.4;
    text-align: center;
}

/* ─────────────────────────────────
   FACEBOOK FEED
───────────────────────────────── */
.hp-fb-wrap {
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-xs);
    min-height: 400px;
    max-width: 100%;
}

.hp-fb-wrap .fb-page,
.hp-fb-wrap .fb-page > span,
.hp-fb-wrap .fb-page > span > iframe {
    max-width: 100% !important;
    width: 100% !important;
}

/* ─────────────────────────────────
   MESSAGE DESK
───────────────────────────────── */
.hp-message-card {
    display: flex;
    gap: 18px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--r-lg);
    padding: 22px;
    margin-bottom: 18px;
    transition: all var(--t-mid);
}

.hp-message-card:last-child {
    margin-bottom: 0;
}

.hp-message-card:hover {
    background: rgba(255, 255, 255, .16);
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
}

.hp-message-avatar {
    width: 86px;
    height: 86px;
    min-width: 86px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--c-gold);
    flex-shrink: 0;
}

.hp-message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.hp-message-body {
    flex: 1;
}

.hp-message-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px;
}

.hp-message-role {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--c-gold);
    letter-spacing: .4px;
    margin-bottom: 8px;
}

.hp-message-text {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .72);
    line-height: 1.65;
    margin-bottom: 12px;
}

.hp-message-readmore {
    font-size: 12px;
    font-weight: 700;
    color: var(--c-gold);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: gap var(--t-fast);
}

.hp-message-readmore:hover {
    gap: 10px;
    color: var(--c-gold);
}

/* ─────────────────────────────────
   CAMPUSES
───────────────────────────────── */
.hp-campus-card {
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .08);
    transition: all var(--t-mid);
}

.hp-campus-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
    border-color: rgba(255, 255, 255, .25);
}

.hp-campus-card img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    display: block;
}

.hp-campus-info {
    padding: 12px;
    background: rgba(0, 0, 0, .2);
    text-align: center;
}

.hp-campus-name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, .9);
    margin-bottom: 8px;
}

.hp-campus-btn {
    display: inline-block;
    background: var(--c-gold);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: var(--r-xs);
    text-decoration: none;
    transition: all var(--t-fast);
}

.hp-campus-btn:hover {
    background: var(--c-gold-dark);
    color: #fff;
    transform: translateY(-1px);
}

/* ─────────────────────────────────
   ALUMNI CARDS
───────────────────────────────── */
.hp-alumni-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 28px 22px;
    text-align: center;
    transition: all var(--t-mid);
    position: relative;
    overflow: hidden;
}

.hp-alumni-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--c-navy), var(--c-gold));
}

.hp-alumni-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-5px);
    border-color: var(--c-navy);
}

.hp-alumni-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 14px;
    border: 3px solid var(--c-navy);
    box-shadow: 0 4px 14px rgba(0, 60, 113, .18);
}

.hp-alumni-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.hp-alumni-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--c-navy);
    margin-bottom: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--c-border);
}

.hp-alumni-degree {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--c-navy);
    margin-top: 10px;
}

.hp-alumni-dept {
    display: block;
    font-size: 12.5px;
    color: var(--c-text-muted);
    margin-top: 4px;
}

.hp-alumni-session {
    display: inline-block;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    margin-top: 6px;
    letter-spacing: .5px;
}

.hp-alumni-desc {
    font-size: 12.5px;
    color: var(--c-text-muted);
    line-height: 1.65;
    margin-top: 12px;
}

/* ─────────────────────────────────
   ANNOUNCEMENT MODAL
───────────────────────────────── */
.hp-notice-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--c-navy);
    border-bottom: 2px solid var(--c-navy);
    padding-bottom: 8px;
    margin-bottom: 14px;
}

.hp-notice-desc {
    font-size: 14px;
    color: var(--c-text-2);
    line-height: 1.7;
}

.hp-notice-img {
    max-width: 100%;
    border-radius: var(--r-md);
    margin-top: 14px;
}

.hp-notice-divider {
    height: 1px;
    background: var(--c-border);
    margin: 6px 0;
}

/* ─────────────────────────────────
   HOMEPAGE RESPONSIVE
───────────────────────────────── */
@media (max-width: 991px) {
    .hp-section {
        padding: 52px 0;
    }

    .hp-news-list {
        border-left: none;
        padding-left: 0;
        margin-top: 20px;
    }

    .hp-video-wrap .about-img img {
        height: 240px;
    }
}

@media (max-width: 767px) {
    .hp-section {
        padding: 40px 0;
    }

    .hp-strip {
        padding: 20px 0;
    }

    .hp-news-img img {
        height: 220px;
    }

    .hp-message-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .hp-message-readmore {
        justify-content: center;
    }

    /* stack section 4 & 5 columns with tighter gap on mobile */
    .hp-section-light .row,
    .hp-section-white .row {
        --bs-gutter-y: 1.5rem;
    }
}

@media (max-width: 575px) {
    .hp-block-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .hp-strip-card {
        padding: 12px 14px;
    }

    .hp-alumni-card {
        padding: 22px 16px;
    }
}


/* ════════════════════════════════════════════════════════════
   INNER PAGES — universal styles
   (news, events, faculties, departments, teachers, jobs,
    tenders, noticeboard, downloads, reports, pages, directory)
════════════════════════════════════════════════════════════ */

/* ── Section wrappers ────────────────────────────────────── */
.rs-latest-news,
.rs-courses-details,
.rs-team-single,
.rs-team-2 {
    padding: 60px 0;
    background: #fff;
}

.rs-team-2.bg-light {
    background: var(--c-bg-alt) !important;
}

.rs-team-2.team-all {
    padding: 60px 0;
}

/* ── Page-level section heading (used across pages) ───────── */
.inner-page-section {
    padding: 60px 0 50px;
}

.title.border-bottom {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--c-navy);
    border-bottom: 2px solid var(--c-border) !important;
    padding-bottom: 10px !important;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.title.border-bottom img {
    flex-shrink: 0;
}

.abt-title {
    margin-bottom: 24px;
}

.abt-title h2 {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--c-navy);
    border-bottom: 2px solid var(--c-border);
    padding-bottom: 10px;
}

.abt-title h2 span {
    color: var(--c-gold);
}

/* ── Utility spacers ─────────────────────────────────────── */
.pt-70 {
    padding-top: 70px !important;
}

.pb-70 {
    padding-bottom: 70px !important;
}

.pt-50 {
    padding-top: 50px !important;
}

.pb-50 {
    padding-bottom: 50px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.sec-spacer {
    padding: 70px 0;
}

/* ── bg-custom-color badge ───────────────────────────────── */
.bg-custom-color {
    background: var(--c-navy) !important;
    color: #fff !important;
}


/* ════════════════════════════════════════════════════════════
   NEWS INDEX  (news/index.blade.php)
════════════════════════════════════════════════════════════ */
.news-card-outer {
    height: 100%;
    background: #fff;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t-fast), transform var(--t-fast);
    border: 1px solid var(--c-border);
}

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

.news-card-outer .event-img {
    overflow: hidden;
}

.news-card-outer .event-img img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform var(--t-slow);
}

.news-card-outer:hover .event-img img {
    transform: scale(1.05);
}

.news-card-outer .events-details {
    padding: 18px 20px !important;
    background: #fff !important;
    border: none !important;
}

.events-details .event-date {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}

.events-details .event-date span {
    color: var(--c-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.events-details .event-date .fa {
    color: var(--c-gold);
    font-size: 14px;
}

.events-details h4 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    color: var(--c-text) !important;
    transition: color var(--t-fast);
}

.events-details h4 a {
    color: inherit;
}

.news-card-outer:hover .events-details h4 a {
    color: var(--c-navy);
}


/* ════════════════════════════════════════════════════════════
   NEWS DETAIL  (news/details.blade.php)
════════════════════════════════════════════════════════════ */
.news-normal-block { /* wrapper — no extra style needed */
}

.news-img {
    width: 100%;
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: 20px;
}

.news-img img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
    border-radius: var(--r-md);
}

.news-date {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--c-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.news-date .fa {
    color: var(--c-gold);
    font-size: 15px;
}

.news-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--c-navy);
    line-height: 1.4;
    margin-bottom: 16px;
}

.news-desc {
    font-size: 15px;
    color: var(--c-text);
    line-height: 1.8;
}

.news-desc p {
    margin-bottom: 14px;
}

.news-desc img {
    max-width: 100%;
    border-radius: var(--r-sm);
}

/* ── Sidebar: Latest Updates ─────────────────────────────── */
.news-list-block {
    margin-top: 6px;
}

.news-list-item {
    border-bottom: 1px solid var(--c-border);
    padding: 14px 0;
}

.news-list-item:last-child {
    border-bottom: none;
}

.news-custom-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-custom-content img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: var(--r-sm);
    display: block;
}

.news-custom-content .news-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-text);
    line-height: 1.45;
    margin: 0;
    padding: 0 !important;
}

.news-custom-content .news-title a {
    color: var(--c-text);
    transition: color var(--t-fast);
}

.news-custom-content .news-title a:hover {
    color: var(--c-navy);
}

.news-custom-content .news-date {
    font-size: 11.5px;
    margin-bottom: 0;
}


/* ════════════════════════════════════════════════════════════
   FACULTY / DEPARTMENT — head card & profile card
════════════════════════════════════════════════════════════ */
.head-card-image {
    border-radius: var(--r-md) !important;
    border: 1px solid var(--c-border) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden;
    transition: box-shadow var(--t-fast);
}

.head-card-image:hover {
    box-shadow: var(--shadow-md) !important;
}

.head-card-image .image-area {
    background: var(--c-bg-alt);
    padding: 24px 16px 16px;
    border-bottom: 1px solid var(--c-border);
}

.head-card-image .image-area img {
    width: 110px !important;
    height: 110px !important;
    object-fit: cover !important;
    object-position: top !important;
    border-radius: 50% !important;
    border: 3px solid var(--c-navy) !important;
    box-shadow: 0 4px 14px rgba(0, 60, 113, .18) !important;
}

.head-details {
    padding: 16px !important;
    font-size: 13px;
}

.head-details .card-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--c-navy) !important;
    border-bottom: 1px solid var(--c-border) !important;
    padding-bottom: 10px !important;
    margin-bottom: 12px !important;
}

.head-details .card-title a {
    color: var(--c-gold) !important;
}

.head-details .card-text {
    font-size: 13px !important;
    color: var(--c-text-muted) !important;
    border-bottom: 1px solid var(--c-border) !important;
    padding-bottom: 7px !important;
    margin-bottom: 7px !important;
}

.head-details .card-text .fa {
    color: var(--c-navy);
    margin-right: 6px;
}

.head-details .badge.bg-custom-color {
    font-size: 11px;
    padding: 3px 9px;
}

/* Teacher profile action button */
.btn-section .btn-warning {
    background: var(--c-gold) !important;
    border-color: var(--c-gold) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 12px;
    border-radius: var(--r-pill);
    padding: 5px 18px;
    transition: all var(--t-fast);
}

.btn-section .btn-warning:hover {
    background: var(--c-navy) !important;
    border-color: var(--c-navy) !important;
}


/* ════════════════════════════════════════════════════════════
   DEPARTMENT/FACULTY — course cards (departments grid)
════════════════════════════════════════════════════════════ */
.course-item {
    background: #fff;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--c-border);
    margin-bottom: 28px;
    transition: box-shadow var(--t-fast), transform var(--t-fast);
}

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

.course-img {
    overflow: hidden;
}

.course-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform var(--t-slow);
}

.course-item:hover .course-img img {
    transform: scale(1.05);
}

.course-body {
    padding: 14px 18px 10px;
}

.course-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
}

.course-title a {
    color: var(--c-text);
    transition: color var(--t-fast);
}

.course-title a:hover {
    color: var(--c-navy);
}

.course-footer {
    padding: 10px 18px 14px;
    border-top: 1px solid var(--c-border);
}

.course-button a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 18px;
    border-radius: var(--r-pill);
    transition: background var(--t-fast);
}

.course-button a:hover {
    background: var(--c-gold);
    color: #fff;
}


/* ════════════════════════════════════════════════════════════
   FACULTIES INDEX — hover cards (faculty list)
════════════════════════════════════════════════════════════ */
.hover-card {
    border-radius: var(--r-md) !important;
    border: 1px solid var(--c-border) !important;
    transition: box-shadow var(--t-fast), transform var(--t-fast) !important;
    cursor: pointer;
}

.hover-card:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-3px) !important;
    border-color: var(--c-navy) !important;
}

.hover-card .icon-wrapper {
    width: 46px;
    height: 46px;
    min-width: 46px;
    background: var(--c-navy);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hover-card .icon-wrapper .fa {
    font-size: 20px;
    color: #fff;
}

.hover-card .card-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: var(--c-text) !important;
    margin: 0 !important;
}

.hover-card:hover .card-title {
    color: var(--c-navy) !important;
}


/* ════════════════════════════════════════════════════════════
   TEACHER SINGLE  (teachers/show.blade.php)
════════════════════════════════════════════════════════════ */
.rs-team-single .team { /* row */
}

/* Publication / research tabs on teacher page */
.rs-team-single .nav-tabs {
    border-bottom: 2px solid var(--c-border);
    gap: 4px;
}

.rs-team-single .nav-tabs .nav-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text-muted);
    border: 1px solid transparent;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    padding: 7px 16px;
    transition: all var(--t-fast);
}

.rs-team-single .nav-tabs .nav-link:hover {
    color: var(--c-navy);
    background: var(--c-bg-alt);
}

.rs-team-single .nav-tabs .nav-link.active {
    color: var(--c-navy);
    border-color: var(--c-border) var(--c-border) #fff;
    background: #fff;
}

.rs-team-single .tab-content {
    border: 1px solid var(--c-border);
    border-top: none;
    padding: 20px;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    font-size: 14px;
    line-height: 1.75;
    color: var(--c-text);
}


/* ════════════════════════════════════════════════════════════
   JOBS  (jobs/index.blade.php + jobs/show.blade.php)
════════════════════════════════════════════════════════════ */
.job-card {
    background: #fff;
    border-radius: var(--r-md) !important;
    border: 1px solid var(--c-border) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 22px !important;
    margin-bottom: 24px;
    transition: box-shadow var(--t-fast), transform var(--t-fast);
    position: relative;
}

.job-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--c-navy);
    border-radius: var(--r-md) 0 0 var(--r-md);
}

.job-card:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-3px);
}

.job-card__head h5 {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: var(--c-navy) !important;
    line-height: 1.45;
}

.job-card__dates {
    background: var(--c-bg-alt);
    border-radius: var(--r-sm);
    padding: 12px 16px;
}

.job-card__date {
    flex: 1;
}

.job-card__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}

.job-card__value {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text);
}

.job-card__value .fa {
    color: var(--c-gold);
    margin-right: 5px;
}

.job-card__actions .btn-primary {
    background: var(--c-navy) !important;
    border-color: var(--c-navy) !important;
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--r-pill);
    padding: 5px 18px;
    transition: all var(--t-fast);
}

.job-card__actions .btn-primary:hover {
    background: var(--c-gold) !important;
    border-color: var(--c-gold) !important;
}

.job-card__actions .btn-warning {
    background: var(--c-gold) !important;
    border-color: var(--c-gold) !important;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--r-pill);
    padding: 5px 14px;
    transition: all var(--t-fast);
}

.job-card__actions .btn-warning:hover {
    background: var(--c-navy) !important;
    border-color: var(--c-navy) !important;
}


/* ════════════════════════════════════════════════════════════
   TENDERS  (tenders/index.blade.php)
════════════════════════════════════════════════════════════ */
.tender-card {
    background: #fff !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--c-border) !important;
    padding: 28px 24px !important;
    margin-bottom: 28px;
    transition: box-shadow var(--t-fast), transform var(--t-fast) !important;
}

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

.tender-card .card-title {
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
    color: var(--c-navy) !important;
    border-bottom: 2px solid var(--c-border) !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
}

.tender-date-section h4 {
    font-size: 13px !important;
    font-weight: 700;
    color: var(--c-text-muted);
    margin-bottom: 6px !important;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.tender-date-section .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    line-height: 38px;
    border-radius: 50%;
    background: var(--c-gold);
    color: #fff;
    font-size: 16px;
    margin: 6px 0 8px;
}

.tender-date-section p {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text);
}

.tender-card .btn-primary {
    background: var(--c-navy) !important;
    border-color: var(--c-navy) !important;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 700;
    padding: 7px 22px;
    transition: all var(--t-fast);
}

.tender-card .btn-primary:hover {
    background: var(--c-gold) !important;
    border-color: var(--c-gold) !important;
}


/* ════════════════════════════════════════════════════════════
   NOTICEBOARD & DOWNLOADS  (shared table pages)
════════════════════════════════════════════════════════════ */
.content-page-container {
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    padding: 28px 28px 20px;
    box-shadow: var(--shadow-sm);
}

/* Search form */
.content-page-container .form-content form .form-control {
    border-radius: var(--r-sm);
    border: 1px solid var(--c-border);
    font-size: 13px;
    padding: 8px 14px;
    color: var(--c-text);
}

.content-page-container .form-content form .form-control:focus {
    border-color: var(--c-navy);
    box-shadow: 0 0 0 3px rgba(0, 38, 80, .1);
}

.content-page-container .btn-primary {
    background: var(--c-navy) !important;
    border-color: var(--c-navy) !important;
    font-weight: 700;
    font-size: 13px;
    border-radius: var(--r-sm);
    transition: all var(--t-fast);
}

.content-page-container .btn-primary:hover {
    background: var(--c-gold) !important;
    border-color: var(--c-gold) !important;
}

.content-page-container .btn-secondary {
    background: var(--c-text-muted) !important;
    border-color: var(--c-text-muted) !important;
    font-size: 13px;
    border-radius: var(--r-sm);
}

/* Table */
.content-page-container .table {
    font-size: 13.5px;
    color: var(--c-text);
    margin-bottom: 0;
}

.content-page-container .table thead tr {
    background: var(--c-navy) !important;
    color: #fff !important;
}

.content-page-container .table thead th {
    font-weight: 700;
    padding: 12px 14px;
    border: none;
    white-space: nowrap;
    background: var(--c-navy);
    color: #fff;
}

.content-page-container .table tbody tr:hover {
    background: var(--c-bg-alt);
}

.content-page-container .table td,
.content-page-container .table th {
    vertical-align: middle;
    padding: 10px 14px;
}

.content-page-container .btn-warning {
    background: var(--c-gold) !important;
    border-color: var(--c-gold) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 12px;
    border-radius: var(--r-pill);
    transition: all var(--t-fast);
}

.content-page-container .btn-warning:hover {
    background: var(--c-navy) !important;
    border-color: var(--c-navy) !important;
}


/* ════════════════════════════════════════════════════════════
   REPORTS / KIU TIMES  (reports/index + kiu-times/index)
════════════════════════════════════════════════════════════ */
.kiu-times-section .content-display-section {
    margin-bottom: 30px;
}

.content-display-section .card {
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden;
    transition: box-shadow var(--t-fast), transform var(--t-fast);
}

.content-display-section .card:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-5px);
}

.content-display-section .card-img-top {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    transition: transform var(--t-slow);
}

.content-display-section .card:hover .card-img-top {
    transform: scale(1.04);
}

.content-display-section .card-body {
    padding: 40px 20px 22px !important;
}

.content-display-section .card-title {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: var(--c-navy) !important;
    margin-bottom: 14px !important;
}

.logo-circle {
    z-index: 2;
}

.logo-circle img {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15) !important;
}

.content-display-section .btn-primary {
    background: var(--c-navy) !important;
    border-color: var(--c-navy) !important;
    border-radius: var(--r-pill);
    font-weight: 700;
    font-size: 13px;
    padding: 7px 22px;
    transition: all var(--t-fast);
}

.content-display-section .btn-primary:hover {
    background: var(--c-gold) !important;
    border-color: var(--c-gold) !important;
}


/* ════════════════════════════════════════════════════════════
   GENERAL PAGE / STATIC PAGE  (pages/show.blade.php)
════════════════════════════════════════════════════════════ */
.general-page { /* wrapper */
}

.content-area-general-page {
    font-size: 15px;
    line-height: 1.85;
    color: var(--c-text);
}

.content-area-general-page .image-area {
    margin-bottom: 20px;
    border-radius: var(--r-md);
    overflow: hidden;
}

.content-area-general-page .image-area img {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: var(--r-md);
}

.content-area-general-page .file-attached {
    margin-top: 24px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.content-area-general-page p {
    margin-bottom: 14px;
}

.content-area-general-page img {
    max-width: 100%;
    border-radius: var(--r-sm);
}

/* Sidebar */
.sidebar-area {
    position: sticky;
    top: 90px;
}

.cate-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cate-box ul li {
    padding: 9px 0;
    border-bottom: 1px dashed var(--c-border);
    font-size: 13.5px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.cate-box ul li:last-child {
    border-bottom: none;
}

.cate-box ul li .fa {
    color: var(--c-navy);
    margin-top: 3px;
    flex-shrink: 0;
}

.cate-box ul li a {
    color: var(--c-text);
    font-weight: 700;
    transition: color var(--t-fast);
}

.cate-box ul li a:hover {
    color: var(--c-gold);
}

/* Latest updates sidebar */
.latest-courses .post-item {
    border-bottom: 1px solid var(--c-border);
    padding-bottom: 14px;
}

.latest-courses .post-item:last-child {
    border-bottom: none;
}

.latest-courses .post-img {
    flex-shrink: 0;
    width: 80px;
    height: 70px;
    border-radius: var(--r-sm);
    overflow: hidden;
}

.latest-courses .post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.latest-courses .post-desc h4 {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    border-bottom: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.latest-courses .post-desc h4 a {
    color: var(--c-text);
    transition: color var(--t-fast);
}

.latest-courses .post-desc h4 a:hover {
    color: var(--c-navy);
}


/* ════════════════════════════════════════════════════════════
   EVENTS DETAIL  (events/show.blade.php)
════════════════════════════════════════════════════════════ */
.rs-latest-news .card {
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden;
}

.rs-latest-news .card-body {
    padding: 28px !important;
}

.rs-latest-news .card-title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--c-navy) !important;
    margin-bottom: 16px !important;
}

.rs-latest-news .text-muted .fa {
    margin-right: 6px;
}

.rs-latest-news .btn-warning {
    background: var(--c-gold) !important;
    border-color: var(--c-gold) !important;
    color: #fff !important;
    border-radius: var(--r-pill);
    font-weight: 700;
    transition: all var(--t-fast);
}

.rs-latest-news .btn-warning:hover {
    background: var(--c-navy) !important;
    border-color: var(--c-navy) !important;
}


/* ════════════════════════════════════════════════════════════
   INNER PAGES — Bootstrap nav tabs (used in dept/faculty)
════════════════════════════════════════════════════════════ */
.department-tab .nav-tabs,
.about-desc .nav-tabs {
    border-bottom: 2px solid var(--c-border);
    gap: 4px;
    flex-wrap: wrap;
}

.department-tab .nav-tabs .nav-link,
.about-desc .nav-tabs .nav-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text-muted);
    border: 1px solid transparent;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all var(--t-fast);
}

.department-tab .nav-tabs .nav-link svg,
.about-desc .nav-tabs .nav-link svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.department-tab .nav-tabs .nav-link:hover,
.about-desc .nav-tabs .nav-link:hover {
    color: var(--c-navy);
    background: var(--c-bg-alt);
}

.department-tab .nav-tabs .nav-link.active,
.about-desc .nav-tabs .nav-link.active {
    color: var(--c-navy);
    border-color: var(--c-border) var(--c-border) #fff;
    background: #fff;
    font-weight: 800;
}

.department-tab .tab-content,
.about-desc .tab-content {
    font-size: 14px;
    line-height: 1.8;
    color: var(--c-text);
}

.department-tab .tab-content p,
.about-desc .tab-content p {
    margin-bottom: 12px;
}


/* ════════════════════════════════════════════════════════════
   PAGINATION  (Laravel default)
════════════════════════════════════════════════════════════ */
.pagination {
    gap: 4px;
    flex-wrap: wrap;
}

.pagination .page-link {
    border-radius: var(--r-sm) !important;
    border: 1px solid var(--c-border) !important;
    color: var(--c-navy) !important;
    font-weight: 600;
    font-size: 13px;
    padding: 6px 13px;
    transition: all var(--t-fast);
}

.pagination .page-link:hover {
    background: var(--c-navy) !important;
    border-color: var(--c-navy) !important;
    color: #fff !important;
}

.pagination .page-item.active .page-link {
    background: var(--c-navy) !important;
    border-color: var(--c-navy) !important;
    color: #fff !important;
}

.pagination .page-item.disabled .page-link {
    color: var(--c-text-muted) !important;
    background: var(--c-bg-alt) !important;
}


/* ════════════════════════════════════════════════════════════
   OFFICE PAGE  (office/show.blade.php)
════════════════════════════════════════════════════════════ */
.office-section {
    background: var(--c-bg-alt);
}

.office-section .content-page-container {
    background: #fff;
    padding: 32px;
}

/* Office head card — override base .head-card-image for non-teacher images */
.head-card-image .image-area img.img-fluid {
    width: 130px !important;
    height: 130px !important;
    object-fit: cover !important;
    object-position: top !important;
    border-radius: 50% !important;
    border: 3px solid var(--c-navy) !important;
    box-shadow: 0 4px 14px rgba(0, 60, 113, .18) !important;
    margin-bottom: 0 !important;
}

.head-card-image h5 {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--c-navy) !important;
}

.head-card-image > p.fw-bold {
    font-size: 13px;
    color: var(--c-text-muted);
    padding: 0 12px 10px;
    margin: 0;
}

/* Contact details block (used in head card & staff cards) */
.contact-details {
    background: var(--c-bg-alt) !important;
    border-top: 1px solid var(--c-border);
    padding: 12px 14px !important;
    text-align: left;
}

.contact-details p {
    font-size: 12.5px !important;
    color: var(--c-text-muted) !important;
    margin-bottom: 0 !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid var(--c-border) !important;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.contact-details p:last-child {
    border-bottom: none !important;
}

.contact-details p strong {
    color: var(--c-text) !important;
}

.contact-details .badge.bg-custom-color {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: var(--r-pill);
}

/* Office tabs */
.office-section .nav-tabs {
    border-bottom: 2px solid var(--c-border);
    gap: 4px;
    flex-wrap: wrap;
}

.office-section .nav-tabs .nav-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text-muted);
    border: 1px solid transparent;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all var(--t-fast);
}

.office-section .nav-tabs .nav-link svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.office-section .nav-tabs .nav-link:hover {
    color: var(--c-navy);
    background: var(--c-bg-alt);
}

.office-section .nav-tabs .nav-link.active {
    color: var(--c-navy);
    border-color: var(--c-border) var(--c-border) #fff;
    background: #fff;
    font-weight: 800;
}

.office-section .tab-content {
    border: 1px solid var(--c-border);
    border-top: none;
    padding: 22px 20px;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--c-text);
    background: #fff;
}

.office-section .tab-content p {
    margin-bottom: 12px;
}

.office-section .tab-content img {
    max-width: 100%;
    border-radius: var(--r-sm);
}

.office-section .tab-content ul,
.office-section .tab-content ol {
    padding-left: 20px;
    margin-bottom: 12px;
}

.office-section .tab-content li {
    margin-bottom: 5px;
}

/* Staff cards */
.staff-card {
    border-radius: var(--r-md) !important;
    border: 1px solid var(--c-border) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden;
    transition: box-shadow var(--t-fast), transform var(--t-fast);
}

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

.staff-image-area {
    background: linear-gradient(135deg, var(--c-bg-alt) 0%, #e8edf5 100%);
    padding: 28px 16px 20px;
    border-bottom: 1px solid var(--c-border);
}

.staff-image-area img {
    width: 100px !important;
    height: 100px !important;
    object-fit: cover !important;
    object-position: top !important;
    border-radius: 50% !important;
    border: 3px solid var(--c-navy) !important;
    box-shadow: 0 4px 14px rgba(0, 60, 113, .18) !important;
    display: block;
}

.staff-card h4 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--c-navy) !important;
    padding: 0 14px !important;
    line-height: 1.35;
}

.staff-card .contact-details p.text-muted:first-child {
    font-weight: 700 !important;
    color: var(--c-text) !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* Staff section heading row */
.office-section .row > h4.title.border-bottom {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid var(--c-border);
}


/* ════════════════════════════════════════════════════════════
   INNER PAGES — RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .rs-latest-news,
    .rs-courses-details,
    .rs-team-single,
    .rs-team-2 {
        padding: 44px 0;
    }

    .sidebar-area {
        position: static;
        margin-top: 36px;
    }

    .news-title {
        font-size: 1.2rem;
    }
}

@media (max-width: 767px) {
    .rs-latest-news,
    .rs-courses-details,
    .rs-team-single,
    .rs-team-2 {
        padding: 32px 0;
    }

    .pt-70 {
        padding-top: 44px !important;
    }

    .pb-70 {
        padding-bottom: 44px !important;
    }

    .content-page-container {
        padding: 18px 16px;
    }

    .job-card {
        padding: 16px !important;
    }

    .tender-card {
        padding: 18px 16px !important;
    }

    .news-img img {
        max-height: 260px;
    }

    .course-img img {
        height: 170px;
    }

    .head-card-image .image-area img {
        width: 90px !important;
        height: 90px !important;
    }

    .rs-latest-news .card-title {
        font-size: 1.2rem !important;
    }

    .abt-title h2 {
        font-size: 1.2rem;
    }
}

@media (max-width: 575px) {
    .job-card__dates {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .course-img img {
        height: 190px;
    }

    .content-display-section .card-img-top {
        height: 220px;
    }

    .news-custom-content img {
        height: 160px;
    }
}


/* ════════════════════════════════════════════════════════════
   TEACHER PROFILE  (teachers/show.blade.php)
════════════════════════════════════════════════════════════ */
.tp-page {
    background: var(--c-bg-alt);
    padding: 50px 0 70px;
}

/* ── LEFT SIDEBAR ────────────────────────────────────────── */
.tp-sidebar {
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: sticky;
    top: 80px;
    text-align: center;
}

.tp-photo-wrap {
    background: linear-gradient(160deg, #001a3d 0%, var(--c-navy) 100%);
    padding: 32px 20px 20px;
}

.tp-photo {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    /*object-fit: cover;*/
    object-position: top;
    border: 4px solid var(--c-gold);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
    display: block;
    margin: 0 auto;
}

.tp-sidebar-name {
    font-size: 17px;
    font-weight: 900;
    color: var(--c-navy);
    padding: 16px 16px 4px;
    line-height: 1.3;
}

.tp-sidebar-desg {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-gold);
    padding: 0 16px 14px;
    border-bottom: 1px solid var(--c-border);
}

/* Contact list */
.tp-contact-list {
    list-style: none;
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--c-border);
    text-align: left;
}

.tp-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 16px;
    font-size: 12.5px;
    color: var(--c-text);
    line-height: 2;
}

.tp-contact-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 60, 113, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.tp-contact-icon .fa {
    color: var(--c-navy);
    font-size: 11px;
}

.tp-contact-list a {
    color: var(--c-navy);
    word-break: break-all;
    font-weight: 600;
}

.tp-contact-list a:hover {
    color: var(--c-gold);
}

/* Stat grid */
.tp-sidebar-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.tp-sstat {
    padding: 16px 10px;
    border-right: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    text-align: center;
    transition: background var(--t-fast);
}

.tp-sstat:nth-child(2n) {
    border-right: none;
}

.tp-sstat:nth-child(3),
.tp-sstat:nth-child(4) {
    border-bottom: none;
}

.tp-sstat:hover {
    background: var(--c-bg-alt);
}
.dp-alumni-photo-wrap .owl-carousel .owl-item img {
    width: 90px !important;
    height: 90px !important;
}
.tp-sstat-num {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--c-navy);
    line-height: 1;
    margin-bottom: 5px;
}

.tp-sstat-lbl {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.tp-sstat-lbl .fa {
    color: var(--c-gold);
}

/* ── RIGHT CONTENT AREA ──────────────────────────────────── */
.tp-content-area {
}

/* Tab bar */
.tp-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 10px 12px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}

.tp-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text-muted);
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all var(--t-fast);
    white-space: nowrap;
}

.tp-tab-btn .fa {
    font-size: 12px;
}

.tp-tab-btn:hover {
    color: var(--c-navy);
    background: var(--c-bg-alt);
    border-color: var(--c-border);
}

.tp-tab-btn.active {
    color: #fff;
    background: var(--c-navy);
    border-color: var(--c-navy);
}

.tp-tab-btn.active .fa {
    color: var(--c-gold);
}

.tp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--c-gold);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
}

.tp-tab-btn:not(.active) .tp-badge {
    background: var(--c-text-muted);
}

/* Tab panes */
.tp-pane {
    display: none;
}

.tp-pane.active {
    display: block;
}

/* Panel card */
.tp-panel {
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.tp-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: linear-gradient(90deg, var(--c-navy) 0%, #003c71 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.tp-panel-head .fa {
    color: var(--c-gold);
    font-size: 15px;
}

.tp-panel-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .9);
    padding: 3px 12px;
    border-radius: var(--r-pill);
}

/* ── Tables ──────────────────────────────────────────────── */
.tp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    color: var(--c-text);
}

.tp-table thead tr {
    background: var(--c-bg-alt);
    border-bottom: 2px solid var(--c-border);
}

.tp-table thead th {
    padding: 11px 16px;
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--c-text-muted);
    white-space: nowrap;
}

.tp-table tbody tr {
    border-bottom: 1px solid var(--c-border);
    transition: background var(--t-fast);
}

.tp-table tbody tr:last-child {
    border-bottom: none;
}

.tp-table tbody tr:hover {
    background: #f5f8ff;
}

.tp-table td {
    padding: 12px 16px;
    vertical-align: middle;
    line-height: 1.5;
}

.tp-muted {
    color: var(--c-text-muted);
    font-size: 12.5px;
}

.tp-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--c-navy);
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: var(--r-pill);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--t-fast);
}

.tp-link-btn:hover {
    background: var(--c-gold);
}

.tp-reg {
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    color: var(--c-navy);
    font-weight: 700;
}

.tp-degree-badge {
    display: inline-block;
    background: rgba(0, 60, 113, .08);
    color: var(--c-navy);
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    border: 1px solid rgba(0, 60, 113, .15);
}

.tp-credit {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--c-navy);
}

.tp-cat-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 11px;
    border-radius: var(--r-pill);
}

.tp-cat-national {
    background: rgba(0, 60, 113, .1);
    color: var(--c-navy);
    border: 1px solid rgba(0, 60, 113, .2);
}

.tp-cat-intl {
    background: rgba(16, 125, 67, .1);
    color: #107d43;
    border: 1px solid rgba(16, 125, 67, .2);
}

.tp-cat-other {
    background: var(--c-bg-alt);
    color: var(--c-text-muted);
    border: 1px solid var(--c-border);
}

.tp-empty {
    text-align: center;
    padding: 36px 16px !important;
    color: var(--c-text-muted);
    font-size: 14px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 991px) {
    .tp-sidebar {
        position: static;
        margin-bottom: 24px;
    }
}

@media (max-width: 767px) {
    .tp-page {
        padding: 32px 0 50px;
    }

    .tp-tab-bar {
        gap: 4px;
        padding: 8px;
    }

    .tp-tab-btn {
        padding: 7px 12px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .tp-tab-btn {
        font-size: 11.5px;
        padding: 6px 10px;
    }

    #tp-courses .tp-table thead th:nth-child(2),
    #tp-courses .tp-table td:nth-child(2) {
        display: table-cell;
    }

    #tp-publication .tp-table thead th:nth-child(2),
    #tp-publication .tp-table td:nth-child(2) {
        display: none;
    }

    #tp-projects .tp-table thead th:nth-child(2),
    #tp-projects .tp-table td:nth-child(2) {
        display: none;
    }

    #tp-supervised .tp-table thead th:nth-child(2),
    #tp-supervised .tp-table td:nth-child(2) {
        display: none;
    }

    #tp-awards .tp-table thead th:nth-child(2),
    #tp-awards .tp-table td:nth-child(2) {
        display: none;
    }

    #tp-certificate .tp-table thead th:nth-child(2),
    #tp-certificate .tp-table td:nth-child(2) {
        display: none;
    }
}


/* ════════════════════════════════════════════════════════════
   DOWNLOADS PAGE  (general/downloads.blade.php)
════════════════════════════════════════════════════════════ */
.dl-page {
    background: var(--c-bg-alt);
    padding: 52px 0 72px;
}

/* ── Search panel ────────────────────────────────────────── */
.dl-search-panel {
    background: linear-gradient(135deg, #001a3d 0%, var(--c-navy) 60%, #004a8f 100%);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 38, 80, .22);
    margin-bottom: 28px;
}

.dl-search-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 28px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.dl-search-header > .fa {
    font-size: 28px;
    color: var(--c-gold);
    flex-shrink: 0;
}

.dl-search-title {
    display: block;
    font-size: 17px;
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
}

.dl-search-sub {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
    margin-top: 2px;
}

.dl-search-form {
    padding: 18px 28px 22px;
}

.dl-search-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.dl-input-wrap {
    flex: 1;
    position: relative;
}

.dl-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .4);
    font-size: 13px;
    pointer-events: none;
}

.dl-input {
    width: 100%;
    background: rgba(255, 255, 255, .1);
    border: 1.5px solid rgba(255, 255, 255, .2);
    border-radius: var(--r-sm);
    color: #fff;
    font-size: 13.5px;
    padding: 10px 14px 10px 38px;
    font-family: var(--font-sans);
    outline: none;
    transition: border-color var(--t-fast), background var(--t-fast);
}

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

.dl-input:focus {
    border-color: var(--c-gold);
    background: rgba(255, 255, 255, .15);
}

.dl-btn-search {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--c-gold);
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
    padding: 10px 24px;
    border-radius: var(--r-sm);
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    white-space: nowrap;
    transition: all var(--t-fast);
    box-shadow: 0 4px 14px rgba(245, 176, 21, .3);
    text-decoration: none;
}

.dl-btn-search:hover {
    background: #e0a010;
    transform: translateY(-1px);
    color: #fff;
}

.dl-btn-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: rgba(255, 255, 255, .65);
    font-size: 13px;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: var(--r-sm);
    border: 1.5px solid rgba(255, 255, 255, .22);
    white-space: nowrap;
    text-decoration: none;
    font-family: var(--font-sans);
    transition: all var(--t-fast);
}

.dl-btn-reset:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}

/* ── Search active bar ───────────────────────────────────── */
.dl-search-info {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    padding: 10px 16px;
    font-size: 13.5px;
    color: var(--c-text-muted);
    margin-bottom: 16px;
}

.dl-search-info .fa {
    color: var(--c-navy);
}

.dl-search-info strong {
    color: var(--c-navy);
}

.dl-clear-search {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #e53935;
    text-decoration: none;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    border: 1px solid rgba(229, 57, 53, .3);
    transition: all var(--t-fast);
}

.dl-clear-search:hover {
    background: rgba(229, 57, 53, .06);
    color: #c62828;
}

/* ── Download cards ──────────────────────────────────────── */
.dl-results {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dl-card {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--t-fast), transform var(--t-fast);
}

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

/* File type icon block */
.dl-card-icon {
    width: 64px;
    min-width: 64px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dl-card-icon .fa {
    font-size: 26px;
}

.dl-icon-pdf {
    background: rgba(229, 57, 53, .08);
}

.dl-icon-pdf .fa {
    color: #e53935;
}

.dl-icon-word {
    background: rgba(25, 118, 210, .08);
}

.dl-icon-word .fa {
    color: #1976d2;
}

.dl-icon-excel {
    background: rgba(56, 142, 60, .08);
}

.dl-icon-excel .fa {
    color: #388e3c;
}

.dl-icon-img {
    background: rgba(245, 176, 21, .08);
}

.dl-icon-img .fa {
    color: var(--c-gold);
}

.dl-icon-default {
    background: var(--c-bg-alt);
}

.dl-icon-default .fa {
    color: var(--c-text-muted);
}

/* Card body */
.dl-card-body {
    flex: 1;
    padding: 14px 18px;
    min-width: 0;
}

.dl-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.dl-serial {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--c-text-muted);
}

.dl-ext-badge {
    font-size: 10px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--c-bg-alt);
    color: var(--c-text-muted);
    border: 1px solid var(--c-border);
    letter-spacing: .4px;
}

.dl-card-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--c-text);
    margin: 0;
    line-height: 1.45;
    transition: color var(--t-fast);
}

.dl-card:hover .dl-card-title {
    color: var(--c-navy);
}

/* Download button */
.dl-card-action {
    padding: 0 18px;
    flex-shrink: 0;
}

.dl-btn-download {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    background: rgba(0, 60, 113, .07);
    color: var(--c-navy);
    border: 1.5px solid rgba(0, 60, 113, .15);
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: all var(--t-fast);
}

.dl-btn-download .fa {
    font-size: 18px;
    display: block;
    margin-bottom: 2px;
}

.dl-btn-download:hover {
    background: var(--c-navy);
    color: #fff;
    border-color: var(--c-navy);
}

/* ── Empty state ─────────────────────────────────────────── */
.dl-empty {
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    text-align: center;
    padding: 60px 24px;
    color: var(--c-text-muted);
}

.dl-empty .fa {
    font-size: 3rem;
    color: var(--c-border);
    display: block;
    margin-bottom: 16px;
}

.dl-empty h5 {
    font-size: 18px;
    font-weight: 800;
    color: var(--c-navy);
    margin-bottom: 8px;
}

.dl-empty p {
    font-size: 14px;
    margin: 0;
}

/* ── Pagination ──────────────────────────────────────────── */
.dl-pagination {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 767px) {
    .dl-page {
        padding: 32px 0 52px;
    }

    .dl-search-panel {
        border-radius: var(--r-md);
    }

    .dl-search-header {
        padding: 16px 18px 12px;
    }

    .dl-search-form {
        padding: 14px 18px 18px;
    }

    .dl-search-row {
        flex-wrap: wrap;
    }

    .dl-input-wrap {
        flex: 1 1 100%;
    }

    .dl-btn-search,
    .dl-btn-reset {
        flex: 1;
        justify-content: center;
    }

    .dl-card-icon {
        width: 50px;
        min-width: 50px;
    }

    .dl-card-icon .fa {
        font-size: 20px;
    }

    .dl-btn-download span {
        display: none;
    }

    .dl-btn-download .fa {
        margin-bottom: 0;
    }

    .dl-btn-download {
        padding: 10px 13px;
    }
}

@media (max-width: 480px) {
    .dl-card-title {
        font-size: 13.5px;
    }
}


/* ════════════════════════════════════════════════════════════
   INSTITUTE / CENTRE PAGE  (institutes/show.blade.php)
════════════════════════════════════════════════════════════ */
.inst-page {
    background: var(--c-bg-alt);
    padding: 50px 0 72px;
}

/* ── Institute header card ───────────────────────────────── */
.inst-header {
    display: flex;
    align-items: center;
    gap: 24px;
    background: linear-gradient(135deg, #001a3d 0%, var(--c-navy) 60%, #004a8f 100%);
    border-radius: var(--r-lg);
    padding: 28px 32px;
    margin-bottom: 28px;
    box-shadow: 0 8px 32px rgba(0, 38, 80, .22);
    position: relative;
    overflow: hidden;
}

.inst-header::after {
    content: '';
    position: absolute;
    right: -60px;
    top: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(245, 176, 21, .07);
    pointer-events: none;
}

.inst-logo-wrap {
    width: 88px;
    height: 88px;
    background: #fff;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
    padding: 8px;
}

.inst-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.inst-header-info {
    z-index: 1;
}

.inst-name {
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.25;
}

.inst-sub {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .55);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.inst-sub::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--c-gold);
    border-radius: 2px;
}

/* ── Tab bar ─────────────────────────────────────────────── */
.inst-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 10px 12px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}

.inst-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text-muted);
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all var(--t-fast);
    white-space: nowrap;
}

.inst-tab-btn .fa {
    font-size: 12px;
}

.inst-tab-btn:hover {
    color: var(--c-navy);
    background: var(--c-bg-alt);
    border-color: var(--c-border);
}

.inst-tab-btn.active {
    color: #fff;
    background: var(--c-navy);
    border-color: var(--c-navy);
}

.inst-tab-btn.active .fa {
    color: var(--c-gold);
}

.inst-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--c-gold);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
}

.inst-tab-btn:not(.active) .inst-tab-count {
    background: var(--c-text-muted);
}

/* ── Panes ───────────────────────────────────────────────── */
.inst-pane {
    display: none;
}

.inst-pane.active {
    display: block;
}

/* ── Content card ────────────────────────────────────────── */
.inst-content-card {
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.inst-content-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 24px;
    background: linear-gradient(90deg, var(--c-navy) 0%, #003c71 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.inst-content-head .fa {
    color: var(--c-gold);
    font-size: 15px;
}

.inst-content-body {
    padding: 28px;
    font-size: 15px;
    line-height: 1.85;
    color: var(--c-text);
}

.inst-content-body p {
    margin-bottom: 14px;
}

.inst-content-body p:last-child {
    margin-bottom: 0;
}

.inst-content-body h1,
.inst-content-body h2,
.inst-content-body h3,
.inst-content-body h4 {
    color: var(--c-navy);
    font-weight: 800;
    margin: 22px 0 10px;
}

.inst-content-body h2 {
    font-size: 1.3rem;
}

.inst-content-body h3 {
    font-size: 1.1rem;
}

.inst-content-body ul,
.inst-content-body ol {
    padding-left: 22px;
    margin-bottom: 14px;
}

.inst-content-body li {
    margin-bottom: 6px;
}

.inst-content-body img {
    max-width: 100%;
    border-radius: var(--r-sm);
}

.inst-content-body a {
    color: var(--c-navy);
    font-weight: 600;
}

.inst-content-body a:hover {
    color: var(--c-gold);
}

.inst-content-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-bottom: 16px;
}

.inst-content-body table th,
.inst-content-body table td {
    border: 1px solid var(--c-border);
    padding: 9px 13px;
    vertical-align: middle;
}

.inst-content-body table th {
    background: var(--c-navy);
    color: #fff;
    font-weight: 700;
}

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

.inst-content-body blockquote {
    border-left: 4px solid var(--c-gold);
    background: var(--c-bg-alt);
    padding: 12px 18px;
    margin: 14px 0;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-style: italic;
    color: var(--c-text-muted);
}

/* ── Team member cards ───────────────────────────────────── */
.inst-member-card {
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--t-fast), transform var(--t-fast);
    height: 100%;
}

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

.inst-member-photo {
    background: linear-gradient(160deg, #001a3d 0%, var(--c-navy) 100%);
    padding: 24px 20px 18px;
    text-align: center;
    position: relative;
}

.inst-member-photo img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    border: 3px solid var(--c-gold);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
    display: block;
    margin: 0 auto;
}

.inst-member-info {
    padding: 16px 16px 0;
    text-align: center;
    border-bottom: 1px solid var(--c-border);
    padding-bottom: 14px;
}

.inst-member-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--c-navy);
    margin: 0 0 6px;
    line-height: 1.3;
}

.inst-member-desg {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-gold);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.inst-member-desg .fa {
    font-size: 11px;
}

.inst-member-contact {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.inst-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: var(--c-text-muted);
    text-decoration: none;
    transition: color var(--t-fast);
    word-break: break-all;
}

.inst-contact-row .fa {
    color: var(--c-navy);
    font-size: 12px;
    margin-top: 2px;
    flex-shrink: 0;
}

a.inst-contact-row:hover {
    color: var(--c-navy);
}

.inst-member-socials {
    padding: 10px 16px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-top: 1px solid var(--c-border);
}

.inst-social-btn {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--c-navy);
    color: var(--c-navy);
    text-decoration: none;
    transition: all var(--t-fast);
}

.inst-social-btn:hover {
    background: var(--c-navy);
    color: #fff;
}

/* ── Empty state ─────────────────────────────────────────── */
.inst-empty {
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    text-align: center;
    padding: 60px 24px;
    color: var(--c-text-muted);
    font-size: 14px;
}

.inst-empty .fa {
    font-size: 2.5rem;
    color: var(--c-border);
    display: block;
    margin-bottom: 14px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 767px) {
    .inst-page {
        padding: 32px 0 52px;
    }

    .inst-header {
        flex-direction: column;
        text-align: center;
        padding: 22px 20px;
        gap: 16px;
    }

    .inst-sub {
        justify-content: center;
    }

    .inst-name {
        font-size: 1.25rem;
    }

    .inst-content-body {
        padding: 18px 16px;
    }

    .inst-tab-bar {
        gap: 5px;
        padding: 8px;
    }

    .inst-tab-btn {
        font-size: 12px;
        padding: 7px 13px;
    }
}

@media (max-width: 480px) {
    .inst-logo-wrap {
        width: 70px;
        height: 70px;
    }

    .inst-member-photo img {
        width: 84px;
        height: 84px;
    }
}


/* ════════════════════════════════════════════════════════════
   NOTICEBOARD  (general/noticeboard.blade.php)
════════════════════════════════════════════════════════════ */
.nb-page {
    background: var(--c-bg-alt);
    padding: 52px 0 72px;
}

/* ── Search Panel ────────────────────────────────────────── */
.nb-search-panel {
    background: linear-gradient(135deg, #001a3d 0%, var(--c-navy) 60%, #004a8f 100%);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 38, 80, .22);
    margin-bottom: 32px;
}

.nb-search-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 28px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.nb-search-header > .fa {
    font-size: 28px;
    color: var(--c-gold);
    flex-shrink: 0;
}

.nb-search-title {
    display: block;
    font-size: 17px;
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
}

.nb-search-sub {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, .55);
    margin-top: 2px;
}

.nb-search-form {
    padding: 18px 28px 22px;
}

.nb-search-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.nb-input-wrap {
    flex: 1;
    position: relative;
}

.nb-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .45);
    font-size: 13px;
    pointer-events: none;
}

.nb-input {
    width: 100%;
    background: rgba(255, 255, 255, .1);
    border: 1.5px solid rgba(255, 255, 255, .2);
    border-radius: var(--r-sm);
    color: #fff;
    font-size: 13.5px;
    padding: 10px 14px 10px 38px;
    font-family: var(--font-sans);
    outline: none;
    transition: border-color var(--t-fast), background var(--t-fast);
}

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

.nb-input:focus {
    border-color: var(--c-gold);
    background: rgba(255, 255, 255, .15);
}

.nb-btn-search {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--c-gold);
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
    padding: 10px 24px;
    border-radius: var(--r-sm);
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    white-space: nowrap;
    transition: all var(--t-fast);
    box-shadow: 0 4px 14px rgba(245, 176, 21, .3);
    text-decoration: none;
}

.nb-btn-search:hover {
    background: #e0a010;
    transform: translateY(-1px);
    color: #fff;
}

.nb-btn-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: rgba(255, 255, 255, .65);
    font-size: 13px;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: var(--r-sm);
    border: 1.5px solid rgba(255, 255, 255, .22);
    white-space: nowrap;
    text-decoration: none;
    font-family: var(--font-sans);
    transition: all var(--t-fast);
}

.nb-btn-reset:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}

/* ── Search active info bar ──────────────────────────────── */
.nb-search-info {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    padding: 10px 16px;
    font-size: 13.5px;
    color: var(--c-text-muted);
    margin-bottom: 16px;
}

.nb-search-info .fa {
    color: var(--c-navy);
}

.nb-search-info strong {
    color: var(--c-navy);
}

.nb-clear-search {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #e53935;
    text-decoration: none;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    border: 1px solid rgba(229, 57, 53, .3);
    transition: all var(--t-fast);
}

.nb-clear-search:hover {
    background: rgba(229, 57, 53, .06);
    color: #c62828;
}

/* ── Notice cards ────────────────────────────────────────── */
.nb-results {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nb-card {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--t-fast), transform var(--t-fast);
}

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

/* Left accent strip with serial number */
.nb-card-left {
    width: 52px;
    min-width: 52px;
    align-self: stretch;
    background: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.nb-has-file .nb-card-left {
    background: var(--c-navy);
}

.nb-has-detail .nb-card-left {
    background: #003c71;
}

.nb-serial {
    font-size: 15px;
    font-weight: 900;
    color: rgba(255, 255, 255, .6);
}

/* Card body */
.nb-card-body {
    flex: 1;
    padding: 14px 18px;
    min-width: 0;
}

.nb-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
}

.nb-notif-no {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--c-navy);
    background: rgba(0, 60, 113, .08);
    border: 1px solid rgba(0, 60, 113, .15);
    padding: 2px 10px;
    border-radius: var(--r-pill);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.nb-date {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--c-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.nb-date .fa {
    color: var(--c-gold);
}

.nb-type-badge {
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: .3px;
}

.nb-type-file {
    background: rgba(229, 57, 53, .08);
    color: #c62828;
    border: 1px solid rgba(229, 57, 53, .2);
}

.nb-type-text {
    background: rgba(0, 60, 113, .07);
    color: var(--c-navy);
    border: 1px solid rgba(0, 60, 113, .15);
}

.nb-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-text);
    line-height: 1.45;
    margin: 0;
    transition: color var(--t-fast);
}

.nb-card:hover .nb-card-title {
    color: var(--c-navy);
}

/* Action button */
.nb-card-action {
    padding: 0 18px;
    flex-shrink: 0;
}

.nb-btn-download,
.nb-btn-view {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 800;
    border-radius: var(--r-sm);
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--t-fast);
    letter-spacing: .3px;
    text-transform: uppercase;
}

.nb-btn-download .fa,
.nb-btn-view .fa {
    font-size: 18px;
    display: block;
    margin-bottom: 2px;
}

.nb-btn-download {
    background: rgba(0, 60, 113, .07);
    color: var(--c-navy);
    border: 1.5px solid rgba(0, 60, 113, .15);
}

.nb-btn-download:hover {
    background: var(--c-navy);
    color: #fff;
    border-color: var(--c-navy);
}

.nb-btn-view {
    background: rgba(245, 176, 21, .1);
    color: #b07800;
    border: 1.5px solid rgba(245, 176, 21, .3);
}

.nb-btn-view:hover {
    background: var(--c-gold);
    color: #fff;
    border-color: var(--c-gold);
}

/* ── Empty state ─────────────────────────────────────────── */
.nb-empty {
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    text-align: center;
    padding: 60px 24px;
    color: var(--c-text-muted);
}

.nb-empty .fa {
    font-size: 3rem;
    color: var(--c-border);
    display: block;
    margin-bottom: 16px;
}

.nb-empty h5 {
    font-size: 18px;
    font-weight: 800;
    color: var(--c-navy);
    margin-bottom: 8px;
}

.nb-empty p {
    font-size: 14px;
    margin: 0;
}

/* ── Pagination ──────────────────────────────────────────── */
.nb-pagination {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

/* ── Modal ───────────────────────────────────────────────── */
.nb-modal {
    border: none;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
}

.nb-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 24px;
    background: linear-gradient(90deg, var(--c-navy) 0%, #003c71 100%);
    border-bottom: none;
}

.nb-modal-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, .12);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nb-modal-icon .fa {
    color: var(--c-gold);
    font-size: 18px;
}

.nb-modal-title-wrap {
    flex: 1;
    min-width: 0;
}

.nb-modal-no {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, .55);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}

.nb-modal-title {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    line-height: 1.35;
    margin: 0;
}

.nb-modal-close {
    background: rgba(255, 255, 255, .12);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--t-fast);
    color: #fff;
    font-size: 14px;
}

.nb-modal-close:hover {
    background: rgba(255, 255, 255, .25);
}

.nb-modal-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 24px;
    background: var(--c-bg-alt);
    border-bottom: 1px solid var(--c-border);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-text-muted);
}

.nb-modal-meta .fa {
    color: var(--c-gold);
}

.nb-modal-body {
    padding: 24px;
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--c-text);
    max-height: 65vh;
    overflow-y: auto;
}

.nb-modal-body p {
    margin-bottom: 12px;
}

.nb-modal-body ul {
    padding-left: 20px;
    margin-bottom: 12px;
}

.nb-modal-body li {
    margin-bottom: 5px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 767px) {
    .nb-page {
        padding: 32px 0 52px;
    }

    .nb-search-panel {
        border-radius: var(--r-md);
    }

    .nb-search-header {
        padding: 16px 18px 12px;
    }

    .nb-search-form {
        padding: 14px 18px 18px;
    }

    .nb-search-row {
        flex-wrap: wrap;
    }

    .nb-input-wrap {
        flex: 1 1 100%;
    }

    .nb-btn-search,
    .nb-btn-reset {
        flex: 1;
        justify-content: center;
    }

    .nb-card-left {
        width: 40px;
        min-width: 40px;
    }

    .nb-card-action {
        padding: 0 12px;
    }

    .nb-btn-download span,
    .nb-btn-view span {
        display: none;
    }

    .nb-btn-download .fa,
    .nb-btn-view .fa {
        margin-bottom: 0;
        font-size: 16px;
    }

    .nb-btn-download,
    .nb-btn-view {
        padding: 10px 12px;
    }
}

@media (max-width: 480px) {
    .nb-card-meta {
        gap: 6px;
    }

    .nb-card-title {
        font-size: 13px;
    }

    .nb-notif-no {
        display: none;
    }
}


/* ════════════════════════════════════════════════════════════
   GENERAL / STATIC PAGE  (pages/show.blade.php)
════════════════════════════════════════════════════════════ */
.gp-page {
    background: var(--c-bg-alt);
    padding: 52px 0 72px;
}

/* ── Main content card ───────────────────────────────────── */
.gp-main {
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Page heading bar */
.gp-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 28px;
    background: linear-gradient(90deg, var(--c-navy) 0%, #003c71 100%);
    border-bottom: none;
}

.gp-heading-icon {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, .12);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gp-heading-icon .fa {
    color: var(--c-gold);
    font-size: 17px;
}

.gp-heading-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

/* Featured image */
.gp-featured-img {
    overflow: hidden;
    border-bottom: 1px solid var(--c-border);
}

.gp-featured-img img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
    transition: transform var(--t-slow);
}

.gp-featured-img:hover img {
    transform: scale(1.02);
}

/* Content body */
.gp-content {
    padding: 28px 28px 24px;
    font-size: 15px;
    line-height: 1.85;
    color: var(--c-text);
}

.gp-content p {
    margin-bottom: 16px;
}

.gp-content p:last-child {
    margin-bottom: 0;
}

.gp-content h1, .gp-content h2, .gp-content h3,
.gp-content h4, .gp-content h5, .gp-content h6 {
    color: var(--c-navy);
    font-weight: 800;
    margin: 24px 0 12px;
    line-height: 1.35;
}

.gp-content h2 {
    font-size: 1.35rem;
}

.gp-content h3 {
    font-size: 1.15rem;
}

.gp-content h4 {
    font-size: 1rem;
}

.gp-content ul, .gp-content ol {
    padding-left: 22px;
    margin-bottom: 16px;
}

.gp-content li {
    margin-bottom: 6px;
}

.gp-content img {
    max-width: 100%;
    border-radius: var(--r-sm);
    margin: 10px 0;
}

.gp-content a {
    color: var(--c-navy);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gp-content a:hover {
    color: var(--c-gold);
}

.gp-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
    font-size: 14px;
}

.gp-content table th,
.gp-content table td {
    border: 1px solid var(--c-border);
    padding: 8px 12px;
    vertical-align: middle;
}

.gp-content table th {
    background: var(--c-navy);
    color: #fff;
    font-weight: 700;
}

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

.gp-content blockquote {
    border-left: 4px solid var(--c-gold);
    background: var(--c-bg-alt);
    padding: 14px 18px;
    margin: 16px 0;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-style: italic;
    color: var(--c-text-muted);
}

/* PDF attachment */
.gp-pdf-wrap {
    border-top: 1px solid var(--c-border);
    margin: 0 28px 28px;
    border-radius: var(--r-sm);
    overflow: hidden;
    border: 1px solid var(--c-border);
}

.gp-pdf-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--c-bg-alt);
    border-bottom: 1px solid var(--c-border);
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text);
}

.gp-pdf-header .fa {
    color: #e53935;
    font-size: 16px;
}

.gp-pdf-download {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--c-navy);
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: var(--r-pill);
    text-decoration: none !important;
    transition: background var(--t-fast);
}

.gp-pdf-download:hover {
    background: var(--c-gold) !important;
}

.gp-pdf-embed {
    background: #f5f5f5;
}

.gp-pdf-fallback {
    text-align: center;
    padding: 40px 20px;
    color: var(--c-text-muted);
}

.gp-pdf-fallback .fa {
    font-size: 2.5rem;
    color: #e53935;
    margin-bottom: 12px;
    display: block;
}

.gp-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-navy);
    color: #fff !important;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 22px;
    border-radius: var(--r-pill);
    text-decoration: none !important;
    margin-top: 12px;
    transition: background var(--t-fast);
}

.gp-btn-primary:hover {
    background: var(--c-gold) !important;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.gp-sidebar {
    position: sticky;
    top: 80px;
}

.gp-widget {
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.gp-widget-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 18px;
    background: linear-gradient(90deg, var(--c-navy) 0%, #003c71 100%);
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
}

.gp-widget-head .fa {
    color: var(--c-gold);
    font-size: 14px;
}

/* Related pages list */
.gp-related-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.gp-related-list li {
    border-bottom: 1px solid var(--c-border);
}

.gp-related-list li:last-child {
    border-bottom: none;
}

.gp-related-list a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--c-text);
    text-decoration: none;
    transition: all var(--t-fast);
}

.gp-related-list a .fa {
    color: var(--c-gold);
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
    transition: transform var(--t-fast);
}

.gp-related-list a:hover {
    color: var(--c-navy);
    background: var(--c-bg-alt);
    padding-left: 22px;
}

.gp-related-list a:hover .fa {
    transform: translateX(3px);
}

.gp-empty-item {
    padding: 14px 18px;
    font-size: 13px;
    color: var(--c-text-muted);
}

/* News list sidebar */
.gp-news-list {
    padding: 8px 0;
}

.gp-news-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--c-border);
    text-decoration: none;
    transition: background var(--t-fast);
}

.gp-news-item:last-child {
    border-bottom: none;
}

.gp-news-item:hover {
    background: var(--c-bg-alt);
}

.gp-news-thumb {
    width: 72px;
    height: 62px;
    border-radius: var(--r-sm);
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--c-border);
}

.gp-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--t-slow);
}

.gp-news-item:hover .gp-news-thumb img {
    transform: scale(1.07);
}

.gp-news-info {
    flex: 1;
    min-width: 0;
}

.gp-news-date {
    font-size: 11px;
    color: var(--c-text-muted);
    font-weight: 600;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.gp-news-date .fa {
    color: var(--c-gold);
}

.gp-news-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text);
    line-height: 1.45;
    margin: 0;
    transition: color var(--t-fast);
}

.gp-news-item:hover .gp-news-title {
    color: var(--c-navy);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 991px) {
    .gp-sidebar {
        position: static;
    }
}

@media (max-width: 767px) {
    .gp-page {
        padding: 32px 0 50px;
    }

    .gp-content {
        padding: 20px 18px;
    }

    .gp-heading {
        padding: 16px 18px;
    }

    .gp-heading-title {
        font-size: 1.05rem;
    }

    .gp-pdf-wrap {
        margin: 0 18px 20px;
    }
}


/* ════════════════════════════════════════════════════════════
   ACADEMIC CALENDAR  (general/academic-calendar.blade.php)
════════════════════════════════════════════════════════════ */
.ac-page {
    background: var(--c-bg-alt);
    padding: 60px 0 80px;
}

/* ── Semester toggle ─────────────────────────────────────── */
.ac-toggle-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 48px;
}

.ac-toggle {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-pill);
    padding: 5px;
    box-shadow: var(--shadow-sm);
    gap: 4px;
}

.ac-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 700;
    color: var(--c-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--r-pill);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all var(--t-fast);
    white-space: nowrap;
}

.ac-toggle-btn .fa {
    font-size: 14px;
}

.ac-toggle-btn:hover {
    color: var(--c-navy);
    background: var(--c-bg-alt);
}

.ac-toggle-btn.active {
    background: var(--c-navy);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 38, 80, .25);
}

.ac-toggle-btn.active .fa {
    color: var(--c-gold);
}

/* ── Panes ───────────────────────────────────────────────── */
.ac-pane {
    display: none;
}

.ac-pane.active {
    display: block;
}

/* ── Semester heading ────────────────────────────────────── */
.ac-semester-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--c-navy);
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--c-border);
    position: relative;
}

.ac-semester-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: var(--c-gold);
    border-radius: 2px;
}

.ac-semester-title .fa {
    color: var(--c-gold);
    font-size: 1.1rem;
}

/* ── Timeline ────────────────────────────────────────────── */
.ac-timeline {
    position: relative;
    padding: 10px 0 30px;
}

/* Center vertical line */
.ac-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    background: linear-gradient(to bottom, var(--c-navy) 0%, var(--c-gold) 100%);
    border-radius: 3px;
}

/* ── Timeline item ───────────────────────────────────────── */
.ac-item {
    display: flex;
    justify-content: flex-end;
    position: relative;
    margin-bottom: 36px;
    width: 50%;
    padding-right: 52px;
}

.ac-item.ac-right {
    justify-content: flex-start;
    margin-left: 50%;
    padding-right: 0;
    padding-left: 52px;
}

/* ── Dot on the line ─────────────────────────────────────── */
.ac-dot {
    position: absolute;
    right: -22px;
    top: 18px;
    width: 42px;
    height: 42px;
    background: var(--c-navy);
    border: 3px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px var(--c-navy);
    z-index: 2;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.ac-item.ac-right .ac-dot {
    right: auto;
    left: -22px;
}

.ac-dot .fa {
    color: var(--c-gold);
    font-size: 14px;
}

.ac-item:hover .ac-dot {
    transform: scale(1.15);
    box-shadow: 0 0 0 4px var(--c-gold);
}

/* ── Card ────────────────────────────────────────────────── */
.ac-card {
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    padding: 20px 22px;
    position: relative;
    width: 100%;
    transition: box-shadow var(--t-fast), transform var(--t-fast);
}

.ac-item:hover .ac-card {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Top accent bar */
.ac-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: var(--r-md) var(--r-md) 0 0;
}

.ac-card-navy::before {
    background: linear-gradient(90deg, var(--c-navy), #0055a5);
}

.ac-card-gold::before {
    background: linear-gradient(90deg, var(--c-gold), #f0a500);
}

/* Arrow pointer toward center line */
.ac-card::after {
    content: '';
    position: absolute;
    top: 22px;
    right: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent var(--c-border);
}

.ac-item.ac-right .ac-card::after {
    right: auto;
    left: -10px;
    border-width: 10px 10px 10px 0;
    border-color: transparent var(--c-border) transparent transparent;
}

/* Step number */
.ac-card-step {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 22px;
    font-weight: 900;
    color: var(--c-border);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ac-item.ac-right .ac-card-step {
    right: auto;
    left: 16px;
}

.ac-card-navy .ac-card-step {
    color: rgba(0, 60, 113, .1);
}

.ac-card-gold .ac-card-step {
    color: rgba(245, 176, 21, .2);
}

.ac-card-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--c-navy);
    margin: 0 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--c-border);
    padding-right: 36px;
    line-height: 1.4;
}

.ac-card-body {
    font-size: 13.5px;
    color: var(--c-text);
    line-height: 1.75;
}

.ac-card-body p {
    margin-bottom: 6px;
}

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

.ac-card-body strong {
    color: var(--c-navy);
}

.ac-card-body ul {
    padding-left: 18px;
    margin-bottom: 6px;
}

.ac-card-body li {
    margin-bottom: 4px;
}

/* ── Empty state ─────────────────────────────────────────── */
.ac-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--c-text-muted);
}

.ac-empty .fa {
    font-size: 3rem;
    color: var(--c-border);
    display: block;
    margin-bottom: 14px;
}

.ac-empty p {
    font-size: 15px;
    margin: 0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 767px) {
    .ac-page {
        padding: 40px 0 60px;
    }

    .ac-toggle-btn {
        padding: 9px 18px;
        font-size: 13px;
    }

    /* Switch to single-column left-aligned timeline */
    .ac-timeline::before {
        left: 20px;
        transform: none;
    }

    .ac-item,
    .ac-item.ac-right {
        width: 100%;
        margin-left: 0;
        padding-right: 0;
        padding-left: 64px;
        justify-content: flex-start;
    }

    .ac-dot,
    .ac-item.ac-right .ac-dot {
        right: auto;
        left: 0;
    }

    .ac-card::after {
        right: auto;
        left: -10px;
        border-width: 10px 10px 10px 0;
        border-color: transparent var(--c-border) transparent transparent;
    }

    .ac-card-step,
    .ac-item.ac-right .ac-card-step {
        right: 16px;
        left: auto;
    }
}

@media (max-width: 480px) {
    .ac-toggle {
        flex-direction: column;
        border-radius: var(--r-md);
    }

    .ac-toggle-btn {
        border-radius: var(--r-sm);
        justify-content: center;
    }

    .ac-card-title {
        font-size: 14px;
    }
}


/* ════════════════════════════════════════════════════════════
   TELEPHONE DIRECTORY  (directory/index.blade.php)
════════════════════════════════════════════════════════════ */
.dir-page {
    background: var(--c-bg-alt);
}

/* ── Search Panel ─────────────────────────────────────────── */
.dir-search-panel {
    background: linear-gradient(135deg, var(--c-navy) 0%, #003c71 100%);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 38, 80, .22);
}

.dir-search-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 28px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .2px;
}

.dir-search-header .fa {
    font-size: 18px;
    color: var(--c-gold);
}

.dir-search-form {
    padding: 24px 28px 22px;
}

.dir-search-fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 16px;
    align-items: end;
}

.dir-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dir-label {
    font-size: 11.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, .75);
    text-transform: uppercase;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dir-label .fa {
    font-size: 12px;
    color: var(--c-gold);
}

.dir-select,
.dir-input {
    width: 100%;
    background: rgba(255, 255, 255, .1);
    border: 1.5px solid rgba(255, 255, 255, .2);
    border-radius: var(--r-sm);
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    padding: 10px 14px;
    outline: none;
    transition: border-color var(--t-fast), background var(--t-fast);
    appearance: none;
    -webkit-appearance: none;
}

.dir-select option {
    background: #002650;
    color: #fff;
}

.dir-select:focus,
.dir-input:focus {
    border-color: var(--c-gold);
    background: rgba(255, 255, 255, .15);
}

.dir-select::placeholder,
.dir-input::placeholder {
    color: rgba(255, 255, 255, .5);
}

/* Custom select arrow */
.dir-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23f5b015' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* Search input wrapper with icon */
.dir-input-wrap {
    position: relative;
}

.dir-input-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .5);
    font-size: 13px;
    pointer-events: none;
}

.dir-input-wrap .dir-input {
    padding-left: 36px;
}

/* Buttons */
.dir-field-actions .dir-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.dir-btn-search {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--c-gold);
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
    padding: 10px 24px;
    border-radius: var(--r-sm);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--t-fast);
    box-shadow: 0 4px 14px rgba(245, 176, 21, .35);
}

.dir-btn-search:hover {
    background: #e0a010;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(245, 176, 21, .45);
}

.dir-btn-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: rgba(255, 255, 255, .7);
    font-size: 12.5px;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: var(--r-sm);
    border: 1.5px solid rgba(255, 255, 255, .25);
    white-space: nowrap;
    text-decoration: none;
    transition: all var(--t-fast);
}

.dir-btn-reset:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

/* ── Results ──────────────────────────────────────────────── */
.dir-results {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.dir-group {
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.dir-group-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, var(--c-navy) 0%, #003c71 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    padding: 13px 20px;
    letter-spacing: .2px;
}

.dir-group-heading .fa {
    font-size: 15px;
    color: var(--c-gold);
}

.dir-group-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .9);
    padding: 3px 10px;
    border-radius: var(--r-pill);
    letter-spacing: .4px;
}

/* ── Directory table ─────────────────────────────────────── */
.dir-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    color: var(--c-text);
}

.dir-table thead tr {
    background: var(--c-bg-alt);
    border-bottom: 2px solid var(--c-border);
}

.dir-table thead th {
    padding: 11px 16px;
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--c-text-muted);
    white-space: nowrap;
}

.dir-table tbody tr {
    border-bottom: 1px solid var(--c-border);
    transition: background var(--t-fast);
}

.dir-table tbody tr:last-child {
    border-bottom: none;
}

.dir-table tbody tr:hover {
    background: #f5f8ff;
}

.dir-table td {
    padding: 12px 16px;
    vertical-align: middle;
}

.dir-avatar {
    width: 54px;
    height: 54px;
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
    border: 2.5px solid var(--c-navy);
    box-shadow: 0 2px 8px rgba(0, 38, 80, .15);
    display: block;
}

.dir-name {
    font-weight: 700;
    color: var(--c-navy);
    font-size: 14px;
}

.dir-email {
    color: var(--c-text-muted);
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color var(--t-fast);
}

.dir-email:hover {
    color: var(--c-navy);
}

.dir-email .fa {
    color: var(--c-gold);
    font-size: 12px;
}

.dir-phone {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dir-phone .fa {
    color: var(--c-navy);
    font-size: 12px;
}

.dir-ext {
    display: inline-block;
    background: var(--c-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 3px 12px;
    border-radius: var(--r-pill);
    letter-spacing: .4px;
}

/* ── Empty / default state ────────────────────────────────── */
.dir-empty {
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    text-align: center;
    padding: 50px 24px;
    color: var(--c-text-muted);
    font-size: 14.5px;
    margin-top: 28px;
}

.dir-empty p {
    margin: 0 0 10px;
}

/* ── Directory Responsive ─────────────────────────────────── */
@media (max-width: 991px) {
    .dir-search-fields {
        grid-template-columns: 1fr 1fr;
    }

    .dir-field-actions {
        grid-column: span 2;
    }
}

@media (max-width: 767px) {
    .dir-search-panel {
        border-radius: var(--r-md);
    }

    .dir-search-form {
        padding: 18px 18px 16px;
    }

    .dir-search-header {
        padding: 14px 18px 12px;
        font-size: 14px;
    }

    .dir-search-fields {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .dir-field-actions {
        grid-column: span 1;
    }

    .dir-field-actions .dir-actions {
        flex-direction: row;
    }

    .dir-btn-search,
    .dir-btn-reset {
        flex: 1;
        justify-content: center;
    }

    .dir-table thead th:nth-child(3),
    .dir-table td:nth-child(3) {
        display: none;
    }
}

@media (max-width: 480px) {
    .dir-table thead th:nth-child(5),
    .dir-table td:nth-child(5) {
        display: none;
    }

    .dir-avatar {
        width: 42px;
        height: 42px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   KIU TIMES  (kt-*)
   ═══════════════════════════════════════════════════════════════════ */

.kt-page {
    padding: 60px 0 80px;
    background: var(--c-bg-alt);
    min-height: 60vh;
}

/* ── Section header ── */
.kt-section-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 40px;
    padding-bottom: 22px;
    border-bottom: 2px solid var(--c-border);
}

.kt-section-icon {
    width: 54px;
    height: 54px;
    border-radius: var(--r-md);
    background: var(--c-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.kt-section-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0 0 4px;
}

.kt-section-sub {
    font-size: 13.5px;
    color: var(--c-text-muted);
    margin: 0;
}

/* ── Edition card ── */
.kt-card {
    background: #fff;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--c-border);
    transition: transform .25s, box-shadow .25s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.kt-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}

/* Cover image with overlay */
.kt-card-cover-wrap {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3/4;
    background: #e8edf2;
}

.kt-card-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s;
}

.kt-card:hover .kt-card-cover {
    transform: scale(1.06);
}

.kt-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 30, 60, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s;
}

.kt-card:hover .kt-card-overlay {
    opacity: 1;
}

.kt-read-btn {
    background: var(--c-gold);
    color: #fff;
    padding: 10px 22px;
    border-radius: var(--r-pill);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .3px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Card body */
.kt-card-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.kt-card-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0;
    line-height: 1.4;
}

.kt-card-link {
    font-size: 13px;
    color: var(--c-gold);
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    transition: color .2s;
}

.kt-card-link:hover {
    color: var(--c-navy);
}

/* Empty state */
.kt-empty {
    text-align: center;
    padding: 70px 24px;
    color: var(--c-text-muted);
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
}

.kt-empty .fa {
    font-size: 48px;
    color: var(--c-border);
    margin-bottom: 16px;
    display: block;
}

.kt-empty h5 {
    color: var(--c-navy);
    font-weight: 700;
    margin-bottom: 8px;
}

.kt-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-navy);
    color: #fff;
    padding: 10px 22px;
    border-radius: var(--r-pill);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 16px;
    transition: background .2s;
}

.kt-btn-back:hover {
    background: var(--c-gold);
    color: #fff;
}

/* Pagination */
.kt-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

/* ── KIU Times Show page ── */
.kt-show-page {
    padding: 60px 0 80px;
    background: var(--c-bg-alt);
    min-height: 60vh;
}

/* Header band */
.kt-show-header {
    background: linear-gradient(135deg, var(--c-navy) 0%, #1a3a6b 100%);
    border-radius: var(--r-md);
    padding: 28px 32px;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 20px;
    color: #fff;
}

.kt-show-header-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.kt-show-header-sub {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .65);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 4px;
}

.kt-show-header-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

/* Main viewer card */
.kt-viewer-card {
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 24px;
}

.kt-viewer-toolbar {
    background: #f5f7fa;
    border-bottom: 1px solid var(--c-border);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.kt-viewer-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-navy);
    display: flex;
    align-items: center;
    gap: 8px;
}

.kt-viewer-label .fa {
    color: var(--c-gold);
}

.kt-btn-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-gold);
    color: #fff;
    padding: 8px 18px;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s;
}

.kt-btn-download:hover {
    background: var(--c-navy);
    color: #fff;
}

.kt-pdf-frame {
    display: block;
    width: 100%;
    height: 680px;
    border: none;
}

.kt-pdf-mobile {
    padding: 32px 24px;
    text-align: center;
}

.kt-pdf-mobile p {
    color: var(--c-text-muted);
    font-size: 14px;
    margin-bottom: 20px;
}

.kt-no-file {
    padding: 60px 24px;
    text-align: center;
    color: var(--c-text-muted);
}

.kt-no-file .fa {
    font-size: 44px;
    display: block;
    margin-bottom: 12px;
    color: var(--c-border);
}

/* Sidebar */
.kt-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.kt-sidebar-widget {
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.kt-widget-head {
    background: var(--c-navy);
    color: #fff;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.kt-widget-head .fa {
    color: var(--c-gold);
}

.kt-widget-body {
    padding: 12px 0;
}

/* Edition list in sidebar */
.kt-edition-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    text-decoration: none;
    border-bottom: 1px solid var(--c-border);
    transition: background .2s;
}

.kt-edition-item:last-child {
    border-bottom: none;
}

.kt-edition-item:hover {
    background: var(--c-bg-alt);
}

.kt-edition-item.active {
    background: #eef2f9;
}

.kt-edition-thumb {
    width: 44px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--c-border);
    flex-shrink: 0;
}

.kt-edition-thumb-placeholder {
    width: 44px;
    height: 56px;
    background: var(--c-bg-alt);
    border-radius: 4px;
    border: 1px solid var(--c-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-muted);
    font-size: 18px;
}

.kt-edition-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-navy);
    line-height: 1.4;
}

.kt-edition-item.active .kt-edition-name {
    color: var(--c-gold);
}

/* Back link widget */
.kt-back-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    text-decoration: none;
    color: var(--c-navy);
    font-size: 13.5px;
    font-weight: 600;
    transition: color .2s;
}

.kt-back-link:hover {
    color: var(--c-gold);
}

.kt-back-link .fa {
    font-size: 16px;
}

/* Responsive */
@media (max-width: 991px) {
    .kt-pdf-frame {
        height: 500px;
    }
}

@media (max-width: 767px) {
    .kt-page {
        padding: 40px 0 60px;
    }

    .kt-show-page {
        padding: 40px 0 60px;
    }

    .kt-show-header {
        padding: 20px 18px;
    }

    .kt-show-header-title {
        font-size: 16px;
    }

    .kt-card-cover-wrap {
        aspect-ratio: 3/4;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ANNUAL REPORTS  (rp-*)
   ═══════════════════════════════════════════════════════════════════ */

.rp-page {
    padding: 60px 0 80px;
    background: var(--c-bg-alt);
    min-height: 60vh;
}

/* ── Section header ── */
.rp-section-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 40px;
    padding-bottom: 22px;
    border-bottom: 2px solid var(--c-border);
}

.rp-section-icon {
    width: 54px;
    height: 54px;
    border-radius: var(--r-md);
    background: var(--c-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.rp-section-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0 0 4px;
}

.rp-section-sub {
    font-size: 13.5px;
    color: var(--c-text-muted);
    margin: 0;
}

/* ── Report card ── */
.rp-card {
    background: #fff;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--c-border);
    transition: transform .25s, box-shadow .25s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.rp-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}

/* Cover */
.rp-card-cover-wrap {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3/4;
    background: #e8edf2;
}

.rp-card-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s;
}

.rp-card:hover .rp-card-cover {
    transform: scale(1.06);
}

.rp-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 30, 60, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s;
}

.rp-card:hover .rp-card-overlay {
    opacity: 1;
}

.rp-read-btn {
    background: var(--c-gold);
    color: #fff;
    padding: 10px 22px;
    border-radius: var(--r-pill);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .3px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.rp-read-btn:hover {
    color: #fff;
    background: var(--c-navy);
}

/* Card body */
.rp-card-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.rp-card-badge {
    font-size: 11px;
    font-weight: 700;
    color: #c0392b;
    text-transform: uppercase;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.rp-card-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0;
    line-height: 1.4;
}

.rp-card-download {
    font-size: 13px;
    color: var(--c-gold);
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    transition: color .2s;
}

.rp-card-download:hover {
    color: var(--c-navy);
}

/* Empty */
.rp-empty {
    text-align: center;
    padding: 70px 24px;
    color: var(--c-text-muted);
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
}

.rp-empty .fa {
    font-size: 48px;
    color: var(--c-border);
    margin-bottom: 16px;
    display: block;
}

.rp-empty h5 {
    color: var(--c-navy);
    font-weight: 700;
    margin-bottom: 8px;
}

.rp-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-navy);
    color: #fff;
    padding: 10px 22px;
    border-radius: var(--r-pill);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 16px;
    transition: background .2s;
}

.rp-btn-back:hover {
    background: var(--c-gold);
    color: #fff;
}

/* Pagination */
.rp-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

@media (max-width: 767px) {
    .rp-page {
        padding: 40px 0 60px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   CAMPUS FACILITIES  (fc-*)
   ═══════════════════════════════════════════════════════════════════ */

.fc-page {
    padding: 60px 0 80px;
    background: var(--c-bg-alt);
    min-height: 60vh;
}

/* ── Facility card ── */
.fc-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: transform .25s, box-shadow .25s;
    height: 100%;
}

.fc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}

.fc-card-img-wrap {
    position: relative;
    overflow: hidden;
    height: 220px;
}

.fc-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s;
}

.fc-card:hover .fc-card-img {
    transform: scale(1.07);
}

.fc-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 30, 60, .52);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s;
}

.fc-card:hover .fc-card-overlay {
    opacity: 1;
}

.fc-overlay-btn {
    background: var(--c-gold);
    color: #fff;
    padding: 10px 22px;
    border-radius: var(--r-pill);
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Card bottom bar */
.fc-card-body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-top: 2px solid var(--c-navy);
}

.fc-card-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--r-md);
    background: var(--c-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.fc-card-info {
    flex: 1;
    min-width: 0;
}

.fc-card-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0 0 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-card-link {
    font-size: 12px;
    color: var(--c-gold);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.fc-card:hover .fc-card-link {
    color: var(--c-navy);
}

/* Empty */
.fc-empty {
    text-align: center;
    padding: 70px 24px;
    color: var(--c-text-muted);
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
}

.fc-empty .fa {
    font-size: 48px;
    color: var(--c-border);
    margin-bottom: 16px;
    display: block;
}

.fc-empty h5 {
    color: var(--c-navy);
    font-weight: 700;
    margin-bottom: 8px;
}

.fc-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-navy);
    color: #fff;
    padding: 10px 24px;
    border-radius: var(--r-pill);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 16px;
    transition: background .2s;
}

.fc-btn-back:hover {
    background: var(--c-gold);
    color: #fff;
}

/* ── Facility Detail ── */
.fc-detail-page {
    padding: 60px 0 80px;
    background: var(--c-bg-alt);
    min-height: 60vh;
}

.fc-detail-card {
    background: #fff;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--c-border);
    max-width: 900px;
    margin: 0 auto;
}

/* Hero image */
.fc-detail-hero {
    position: relative;
    height: 380px;
    overflow: hidden;
}

.fc-detail-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fc-detail-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 30, 60, .7) 0%, transparent 60%);
    display: flex;
    align-items: flex-end;
    padding: 24px 28px;
}

.fc-detail-hero-label {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fc-detail-hero-label .fa {
    width: 36px;
    height: 36px;
    background: var(--c-gold);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* Detail body */
.fc-detail-body {
    padding: 32px 36px;
}

.fc-detail-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--c-border);
}

.fc-detail-head-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--r-md);
    background: var(--c-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.fc-detail-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0;
}

/* Content typography */
.fc-detail-content {
    font-size: 15px;
    line-height: 1.85;
    color: #444;
}

.fc-detail-content p {
    margin-bottom: 16px;
}

.fc-detail-content img {
    max-width: 100%;
    border-radius: var(--r-md);
}

.fc-detail-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--c-border);
}

/* Responsive */
@media (max-width: 767px) {
    .fc-page {
        padding: 40px 0 60px;
    }

    .fc-detail-page {
        padding: 40px 0 60px;
    }

    .fc-detail-hero {
        height: 240px;
    }

    .fc-detail-body {
        padding: 22px 20px;
    }

    .fc-detail-title {
        font-size: 18px;
    }

    .fc-card-img-wrap {
        height: 180px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   MESSAGE / LEADERSHIP DESK  (msg-*)
   ═══════════════════════════════════════════════════════════════════ */

.msg-page {
    padding: 60px 0 80px;
    background: var(--c-bg-alt);
    min-height: 60vh;
}

.msg-card {
    background: #fff;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--c-border);
}

/* ── Portrait column ── */
.msg-portrait-col {
    background: linear-gradient(160deg, var(--c-navy) 0%, #1a3a6b 100%);
    height: 100%;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 44px 28px 36px;
}

.msg-portrait-wrap {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--c-gold);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
    flex-shrink: 0;
    margin-bottom: 24px;
}

.msg-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.msg-identity {
    text-align: center;
    width: 100%;
}

.msg-name {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.4;
}

.msg-role {
    font-size: 13px;
    color: var(--c-gold);
    font-weight: 600;
    margin: 0 0 20px;
    line-height: 1.5;
}

.msg-divider {
    width: 48px;
    height: 2px;
    background: rgba(255, 255, 255, .25);
    margin: 0 auto 18px;
    border-radius: 2px;
}

.msg-uni-tag {
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.msg-uni-tag .fa {
    color: var(--c-gold);
}

/* ── Body column ── */
.msg-body-col {
    padding: 40px 44px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.msg-body-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 2px solid var(--c-border);
}

.msg-body-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--r-md);
    background: var(--c-navy);
    color: var(--c-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.msg-body-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--c-gold);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 4px;
}

.msg-body-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0;
    line-height: 1.4;
}

/* Message content typography */
.msg-content {
    font-size: 15px;
    line-height: 1.9;
    color: #444;
    flex: 1;
}

.msg-content p {
    margin-bottom: 16px;
}

.msg-content p:last-child {
    margin-bottom: 0;
}

.msg-content img {
    max-width: 100%;
    border-radius: var(--r-md);
}

.msg-content a {
    color: var(--c-navy);
}

/* Signature block */
.msg-signature {
    margin-top: 32px;
    padding-top: 22px;
}

.msg-sig-line {
    width: 60px;
    height: 3px;
    background: var(--c-gold);
    border-radius: 2px;
    margin-bottom: 12px;
}

.msg-sig-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-navy);
}

.msg-sig-role {
    font-size: 13px;
    color: var(--c-text-muted);
    margin-top: 3px;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .msg-portrait-col {
        min-height: auto;
        padding: 36px 28px 32px;
    }
}

@media (max-width: 767px) {
    .msg-page {
        padding: 40px 0 60px;
    }

    .msg-body-col {
        padding: 28px 22px;
    }

    .msg-portrait-wrap {
        width: 140px;
        height: 140px;
    }

    .msg-body-title {
        font-size: 17px;
    }

    .msg-content {
        font-size: 14px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   SEARCH RESULTS  (srch-*)
   ═══════════════════════════════════════════════════════════════════ */

.srch-page {
    padding: 60px 0 80px;
    background: var(--c-bg-alt);
    min-height: 60vh;
}

/* ── Search panel ── */
.srch-panel {
    background: linear-gradient(135deg, var(--c-navy) 0%, #1a3a6b 100%);
    border-radius: var(--r-md);
    padding: 28px 32px;
    margin-bottom: 36px;
}

.srch-form {
    display: flex;
    gap: 12px;
    align-items: center;
}

.srch-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.srch-input-icon {
    position: absolute;
    left: 16px;
    color: rgba(255, 255, 255, .5);
    font-size: 15px;
    pointer-events: none;
}

.srch-input {
    width: 100%;
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .2);
    border-radius: var(--r-pill);
    color: #fff;
    font-size: 15px;
    padding: 12px 44px 12px 44px;
    outline: none;
    transition: border-color .2s, background .2s;
}

.srch-input::placeholder {
    color: rgba(255, 255, 255, .45);
}

.srch-input:focus {
    border-color: var(--c-gold);
    background: rgba(255, 255, 255, .18);
}

.srch-input-clear {
    position: absolute;
    right: 14px;
    color: rgba(255, 255, 255, .5);
    font-size: 14px;
    text-decoration: none;
    transition: color .2s;
}

.srch-input-clear:hover {
    color: #fff;
}

.srch-btn {
    background: var(--c-gold);
    color: #fff;
    border: none;
    border-radius: var(--r-pill);
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background .2s;
}

.srch-btn:hover {
    background: #c8890a;
}

/* ── Meta line ── */
.srch-meta {
    font-size: 14px;
    color: var(--c-text-muted);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.srch-meta .fa {
    color: #27ae60;
}

.srch-meta strong {
    color: var(--c-navy);
}

/* ── Result cards ── */
.srch-results {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.srch-result-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.srch-result-card:hover {
    border-color: var(--c-navy);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
    transform: translateX(3px);
}

.srch-result-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: var(--c-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.srch-result-body {
    flex: 1;
    min-width: 0;
}

.srch-result-meta {
    margin-bottom: 4px;
}

.srch-type-badge {
    display: inline-block;
    background: var(--c-bg-alt);
    color: var(--c-navy);
    border: 1px solid var(--c-border);
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.srch-result-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.srch-result-excerpt {
    font-size: 13px;
    color: var(--c-text-muted);
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.srch-result-arrow {
    color: var(--c-border);
    font-size: 13px;
    flex-shrink: 0;
    transition: color .2s;
}

.srch-result-card:hover .srch-result-arrow {
    color: var(--c-gold);
}

/* ── Empty / no results ── */
.srch-empty {
    text-align: center;
    padding: 70px 24px;
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
}

.srch-empty .fa {
    font-size: 48px;
    color: var(--c-border);
    margin-bottom: 16px;
    display: block;
}

.srch-empty h5 {
    color: var(--c-navy);
    font-weight: 700;
    margin-bottom: 8px;
}

.srch-empty p {
    font-size: 14px;
    margin-bottom: 24px;
}

.srch-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.srch-suggestion-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    color: var(--c-navy);
    border-radius: var(--r-pill);
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, border-color .2s;
}

.srch-suggestion-chip:hover {
    background: var(--c-navy);
    color: #fff;
    border-color: var(--c-navy);
}

.srch-suggestion-chip .fa {
    color: var(--c-gold);
}

.srch-suggestion-chip:hover .fa {
    color: #fff;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .srch-page {
        padding: 40px 0 60px;
    }

    .srch-panel {
        padding: 20px 18px;
    }

    .srch-form {
        flex-direction: column;
        gap: 10px;
    }

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

    .srch-input-wrap {
        width: 100%;
    }

    .srch-result-title {
        white-space: normal;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   NEWS DETAIL  (nd-*)
   ═══════════════════════════════════════════════════════════════════ */

.nd-page {
    padding: 60px 0 80px;
    background: var(--c-bg-alt);
    min-height: 60vh;
}

/* ── Article card ── */
.nd-article {
    background: #fff;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--c-border);
}

/* Featured image */
.nd-featured-img {
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.nd-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Meta bar */
.nd-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 32px 0;
    flex-wrap: wrap;
}

.nd-meta-date {
    font-size: 13px;
    color: var(--c-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.nd-meta-date .fa {
    color: var(--c-gold);
}

.nd-meta-badge {
    background: var(--c-navy);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: var(--r-pill);
    display: flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* Title */
.nd-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--c-navy);
    line-height: 1.4;
    margin: 16px 32px 0;
}

.nd-title-divider {
    height: 3px;
    width: 60px;
    background: var(--c-gold);
    border-radius: 2px;
    margin: 14px 32px 0;
}

/* Body content */
.nd-body {
    padding: 24px 32px 28px;
    font-size: 15.5px;
    line-height: 1.9;
    color: #444;
}

.nd-body p {
    margin-bottom: 18px;
}

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

.nd-body img {
    max-width: 100%;
    border-radius: var(--r-md);
    margin: 10px 0;
}

.nd-body h2, .nd-body h3, .nd-body h4 {
    color: var(--c-navy);
    font-weight: 700;
    margin: 24px 0 12px;
}

.nd-body a {
    color: var(--c-navy);
    text-decoration: underline;
}

.nd-body ul, .nd-body ol {
    padding-left: 22px;
    margin-bottom: 18px;
}

.nd-body li {
    margin-bottom: 6px;
}

.nd-body blockquote {
    border-left: 4px solid var(--c-gold);
    background: var(--c-bg-alt);
    padding: 14px 20px;
    margin: 20px 0;
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-style: italic;
    color: #555;
}

/* Footer */
.nd-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 20px 32px 28px;
    border-top: 1px solid var(--c-border);
}

.nd-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-navy);
    color: #fff;
    padding: 9px 20px;
    border-radius: var(--r-pill);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}

.nd-btn-back:hover {
    background: var(--c-gold);
    color: #fff;
}

.nd-share {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nd-share-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-muted);
}

.nd-share-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    transition: opacity .2s, transform .2s;
}

.nd-share-btn:hover {
    opacity: .85;
    transform: scale(1.1);
    color: #fff;
}

.nd-share-fb {
    background: #1877f2;
}

.nd-share-tw {
    background: #1da1f2;
}

.nd-share-wa {
    background: #25d366;
}

/* ── Sidebar ── */
.nd-sidebar {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.nd-widget {
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.nd-widget-head {
    background: var(--c-navy);
    color: #fff;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nd-widget-head .fa {
    color: var(--c-gold);
}

.nd-widget-body {
    padding: 0;
}

.nd-widget-body--plain {
    padding: 16px 18px;
}

/* Latest news items */
.nd-latest-item {
    display: flex;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--c-border);
    text-decoration: none;
    transition: background .2s;
}

.nd-latest-item:last-child {
    border-bottom: none;
}

.nd-latest-item:hover {
    background: var(--c-bg-alt);
}

.nd-latest-thumb {
    width: 68px;
    height: 54px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.nd-latest-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nd-latest-info {
    flex: 1;
    min-width: 0;
}

.nd-latest-date {
    font-size: 11.5px;
    color: var(--c-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}

.nd-latest-date .fa {
    color: var(--c-gold);
}

.nd-latest-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nd-latest-item:hover .nd-latest-title {
    color: var(--c-gold);
}

.nd-btn-all-news {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--c-navy);
    color: #fff;
    padding: 11px 20px;
    border-radius: var(--r-md);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s;
}

.nd-btn-all-news:hover {
    background: var(--c-gold);
    color: #fff;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .nd-sidebar {
        position: static;
    }

    .nd-featured-img {
        height: 300px;
    }
}

@media (max-width: 767px) {
    .nd-page {
        padding: 40px 0 60px;
    }

    .nd-featured-img {
        height: 220px;
    }

    .nd-meta, .nd-title, .nd-title-divider {
        padding-left: 20px;
        padding-right: 20px;
    }

    .nd-title {
        font-size: 19px;
        margin-top: 14px;
    }

    .nd-body {
        padding: 20px;
        font-size: 14.5px;
    }

    .nd-footer {
        padding: 16px 20px 22px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   NEWS INDEX  (ni-*)
   ═══════════════════════════════════════════════════════════════════ */

.ni-page {
    padding: 60px 0 80px;
    background: var(--c-bg-alt);
    min-height: 60vh;
}

/* ── Hero card (first post) ── */
.ni-hero {
    display: flex;
    background: #fff;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    margin-bottom: 40px;
    transition: box-shadow .25s, transform .25s;
    min-height: 320px;
}

.ni-hero:hover {
    box-shadow: 0 12px 36px rgba(0, 0, 0, .13);
    transform: translateY(-3px);
}

.ni-hero-img-wrap {
    flex: 0 0 55%;
    overflow: hidden;
    max-height: 380px;
}

.ni-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.ni-hero:hover .ni-hero-img {
    transform: scale(1.04);
}

.ni-hero-body {
    flex: 1;
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.ni-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-navy);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: var(--r-pill);
    text-transform: uppercase;
    letter-spacing: .5px;
    align-self: flex-start;
}

.ni-badge .fa {
    color: var(--c-gold);
}

.ni-hero-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--c-navy);
    line-height: 1.45;
    margin: 0;
}

.ni-hero-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    color: var(--c-text-muted);
}

.ni-hero-meta .fa {
    color: var(--c-gold);
    margin-right: 4px;
}

.ni-hero-read {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--c-gold);
    color: #fff;
    padding: 8px 18px;
    border-radius: var(--r-pill);
    font-weight: 700;
    font-size: 13px;
    transition: background .2s;
}

.ni-hero:hover .ni-hero-read {
    background: var(--c-navy);
}

/* ── Section divider label ── */
.ni-grid-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-navy);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--c-border);
}

.ni-grid-label .fa {
    color: var(--c-gold);
}

/* ── Grid card ── */
.ni-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    height: 100%;
    transition: transform .25s, box-shadow .25s;
}

.ni-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .11);
}

.ni-card-img-wrap {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.ni-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s;
}

.ni-card:hover .ni-card-img {
    transform: scale(1.07);
}

.ni-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 30, 60, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s;
}

.ni-card:hover .ni-card-overlay {
    opacity: 1;
}

.ni-card-overlay span {
    width: 44px;
    height: 44px;
    background: var(--c-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
}

.ni-card-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.ni-card-date {
    font-size: 12px;
    color: var(--c-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ni-card-date .fa {
    color: var(--c-gold);
}

.ni-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-navy);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ni-card-link {
    font-size: 12.5px;
    color: var(--c-gold);
    font-weight: 600;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ni-card:hover .ni-card-link {
    color: var(--c-navy);
}

/* ── Empty ── */
.ni-empty {
    text-align: center;
    padding: 70px 24px;
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
}

.ni-empty .fa {
    font-size: 48px;
    color: var(--c-border);
    display: block;
    margin-bottom: 16px;
}

.ni-empty h5 {
    color: var(--c-navy);
    font-weight: 700;
    margin-bottom: 8px;
}

/* ── Pagination ── */
.ni-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .ni-hero {
        flex-direction: column;
        min-height: auto;
    }

    .ni-hero-img-wrap {
        flex: none;
        height: 260px;
    }

    .ni-hero-body {
        padding: 24px 24px 28px;
    }

    .ni-hero-title {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .ni-page {
        padding: 40px 0 60px;
    }

    .ni-hero-img-wrap {
        height: 200px;
    }

    .ni-hero-body {
        padding: 20px;
        gap: 12px;
    }

    .ni-hero-title {
        font-size: 16px;
    }

    .ni-card-img-wrap {
        height: 170px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   CONTACT PAGE  (ct-*)
   ═══════════════════════════════════════════════════════════════════ */

.ct-page {
    padding: 60px 0 80px;
    background: var(--c-bg-alt);
    min-height: 60vh;
}

/* ── Info cards ── */
.ct-info-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.ct-info-card {
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    padding: 28px 20px 24px;
    text-align: center;
    transition: transform .25s, box-shadow .25s;
}

.ct-info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .1);
}

.ct-info-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--r-md);
    background: var(--c-navy);
    color: var(--c-gold);
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.ct-info-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 6px;
}

.ct-info-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-navy);
    line-height: 1.6;
}

.ct-info-value a {
    color: var(--c-navy);
    text-decoration: none;
    transition: color .2s;
}

.ct-info-value a:hover {
    color: var(--c-gold);
}

/* ── Shared card style ── */
.ct-map-card,
.ct-form-card {
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    height: 100%;
}

.ct-card-head {
    background: var(--c-navy);
    color: #fff;
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ct-card-head .fa {
    color: var(--c-gold);
}

/* ── Map ── */
.ct-map-wrap {
    height: 480px;
}

.ct-map-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.ct-map-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #94a3b8;
    gap: .75rem;
}

.ct-map-placeholder .fa {
    font-size: 3rem;
}

.ct-map-placeholder p {
    margin: 0;
    font-size: .9rem;
    text-align: center;
}

/* ── Form ── */
.ct-form-body {
    padding: 28px 28px 32px;
}

.ct-alert {
    padding: 12px 16px;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    display: none;
}

.ct-alert--success {
    background: #e8f8f0;
    border: 1px solid #a3d9bc;
    color: #1a7a47;
}

.ct-alert--error {
    background: #fdf0f0;
    border: 1px solid #f0b8b8;
    color: #b52a2a;
}

/* ── Contact form floating labels ── */
.ct-field-group {
    margin-bottom: 20px;
}

.ct-float-group {
    position: relative;
    margin-bottom: 22px;
}

/* Icon inside float group */
.ct-float-group .ct-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-muted);
    font-size: 14px;
    pointer-events: none;
    z-index: 2;
    transition: color .2s;
}

.ct-float-group--textarea .ct-input-icon {
    top: 22px;
    transform: none;
}

/* Input & textarea base */
.ct-input,
.ct-textarea {
    width: 100%;
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-md);
    font-size: 14px;
    color: #333;
    background: #fff;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.ct-float-input {
    padding: 20px 14px 8px 40px;
}

.ct-textarea.ct-float-input {
    padding: 24px 14px 8px 14px;
    resize: vertical;
    min-height: 130px;
}

.ct-input:focus,
.ct-textarea:focus {
    border-color: var(--c-navy);
    box-shadow: 0 0 0 3px rgba(10, 30, 60, .08);
}

.ct-input:focus ~ .ct-input-icon,
.ct-textarea:focus ~ .ct-input-icon {
    color: var(--c-navy);
}

/* Floating label */
.ct-float-label {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #9ca3af;
    pointer-events: none;
    transition: top .18s ease, font-size .18s ease, color .18s ease, transform .18s ease;
    background: transparent;
    padding: 0 2px;
    z-index: 1;
}

.ct-float-group--textarea .ct-float-label {
    top: 18px;
    left: 14px;
    transform: none;
}

/* Floated state: input has value OR is focused */
.ct-float-input:focus ~ .ct-float-label,
.ct-float-input:not(:placeholder-shown) ~ .ct-float-label {
    top: 8px;
    transform: none;
    font-size: 11px;
    color: var(--c-navy);
    font-weight: 700;
}

.ct-float-group--textarea .ct-float-input:focus ~ .ct-float-label,
.ct-float-group--textarea .ct-float-input:not(:placeholder-shown) ~ .ct-float-label {
    top: 6px;
    font-size: 11px;
    color: var(--c-navy);
    font-weight: 700;
}

.ct-float-label span {
    color: var(--c-gold);
}

.ct-btn-submit {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--c-navy);
    color: #fff;
    border: none;
    border-radius: var(--r-pill);
    padding: 13px 32px;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
    margin-top: 8px;
}

.ct-btn-submit:hover {
    background: var(--c-gold);
}

.ct-btn-submit:disabled {
    opacity: .7;
    cursor: not-allowed;
}

/* ── Responsive ── */
@media (max-width: 1199px) {
    .ct-info-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .ct-map-wrap {
        height: 320px;
    }
}

@media (max-width: 767px) {
    .ct-page {
        padding: 40px 0 60px;
    }

    .ct-info-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .ct-form-body {
        padding: 20px;
    }

    .ct-map-wrap {
        height: 260px;
    }
}

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

/* Turnstile widget spacing */
.ct-turnstile-wrap {
    margin-bottom: 18px;
}

/* ═══════════════════════════════════════════════════════════════════
   JOBS  (jb-*)
   ═══════════════════════════════════════════════════════════════════ */

.jb-page, .jb-detail-page {
    padding: 60px 0 80px;
    background: var(--c-bg-alt);
    min-height: 60vh;
}

.jb-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    margin-bottom: 14px;
    transition: box-shadow .2s, transform .2s;
}

.jb-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, .09);
    transform: translateX(3px);
}

.jb-card-left {
    flex-shrink: 0;
}

.jb-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r-md);
    background: var(--c-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.jb-card-body {
    flex: 1;
    min-width: 0;
}

.jb-card-title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0 0 8px;
    line-height: 1.4;
}

.jb-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.jb-meta-item {
    font-size: 12.5px;
    color: var(--c-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.jb-meta-item .fa {
    color: var(--c-gold);
}

.jb-days-badge {
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    display: flex;
    align-items: center;
    gap: 5px;
}

.jb-days-open {
    background: #e8f8f0;
    color: #1a7a47;
}

.jb-days-closed {
    background: #fdf0f0;
    color: #b52a2a;
}

.jb-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.jb-btn-view {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--c-navy);
    color: #fff;
    padding: 8px 18px;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}

.jb-btn-view:hover {
    background: var(--c-gold);
    color: #fff;
}

.jb-btn-print {
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background .2s, color .2s;
}

.jb-btn-print:hover {
    background: var(--c-navy);
    color: #fff;
}

.jb-empty {
    text-align: center;
    padding: 70px 24px;
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
}

.jb-empty .fa {
    font-size: 48px;
    color: var(--c-border);
    display: block;
    margin-bottom: 16px;
}

.jb-empty h5 {
    color: var(--c-navy);
    font-weight: 700;
    margin-bottom: 8px;
}

.jb-archive-link {
    margin-top: 24px;
}

.jb-btn-archive {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    color: var(--c-navy);
    padding: 9px 20px;
    border-radius: var(--r-pill);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s;
}

.jb-btn-archive:hover {
    background: var(--c-navy);
    color: #fff;
}

/* Detail */
.jb-detail-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.jb-detail-header {
    background: linear-gradient(135deg, var(--c-navy) 0%, #1a3a6b 100%);
    padding: 28px 32px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    color: #fff;
}

.jb-detail-header-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.jb-detail-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: rgba(255, 255, 255, .6);
    margin-bottom: 6px;
    font-weight: 700;
}

.jb-detail-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.4;
}

.jb-btn-print-top {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    padding: 8px 16px;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    margin-left: auto;
    transition: background .2s;
    flex-shrink: 0;
}

.jb-btn-print-top:hover {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

.jb-info-strip {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--c-border);
}

.jb-info-item {
    flex: 1;
    min-width: 160px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-right: 1px solid var(--c-border);
}

.jb-info-item:last-child {
    border-right: none;
}

.jb-info-item > .fa {
    font-size: 20px;
    color: var(--c-gold);
    flex-shrink: 0;
}

.jb-info-label {
    display: block;
    font-size: 11px;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 700;
    margin-bottom: 3px;
}

.jb-info-value {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--c-navy);
}

.jb-status {
    padding: 2px 10px;
    border-radius: var(--r-pill);
}

.jb-status-open {
    background: #e8f8f0;
    color: #1a7a47;
}

.jb-status-closed {
    background: #fdf0f0;
    color: #b52a2a;
}

.jb-section {
    border-bottom: 1px solid var(--c-border);
}

.jb-section:last-child {
    border-bottom: none;
}

.jb-section-head {
    background: #f8fafc;
    padding: 12px 28px;
    font-size: 13px;
    font-weight: 700;
    color: var(--c-navy);
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--c-border);
}

.jb-section-head .fa {
    color: var(--c-gold);
}

.jb-section-body {
    padding: 20px 28px;
    font-size: 14.5px;
    line-height: 1.85;
    color: #444;
}

.jb-section-body p {
    margin-bottom: 12px;
}

.jb-section-body ul, .jb-section-body ol {
    padding-left: 20px;
}

.jb-section-body li {
    margin-bottom: 6px;
}

.jb-sidebar {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.jb-widget {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.jb-widget-head {
    background: var(--c-navy);
    color: #fff;
    padding: 13px 18px;
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 9px;
}

.jb-widget-head .fa {
    color: var(--c-gold);
}

.jb-widget-body {
    padding: 16px 18px;
}

.jb-btn-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: var(--c-gold);
    color: #fff;
    padding: 11px 18px;
    border-radius: var(--r-md);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s;
}

.jb-btn-download:hover {
    background: var(--c-navy);
    color: #fff;
}

.jb-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--c-border);
    font-size: 13.5px;
    color: #444;
}

.jb-contact-item:last-child {
    border-bottom: none;
}

.jb-contact-item .fa {
    color: var(--c-gold);
    width: 16px;
    text-align: center;
}

.jb-contact-item a {
    color: var(--c-navy);
    text-decoration: none;
}

.jb-contact-item a:hover {
    color: var(--c-gold);
}

.jb-btn-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--c-navy);
    color: #fff;
    padding: 11px 18px;
    border-radius: var(--r-md);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}

.jb-btn-back:hover {
    background: var(--c-gold);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════
   TENDERS  (td-*)
   ═══════════════════════════════════════════════════════════════════ */

.td-page, .td-detail-page {
    padding: 60px 0 80px;
    background: var(--c-bg-alt);
    min-height: 60vh;
}

.td-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 24px;
    margin-bottom: 12px;
    transition: box-shadow .2s, transform .2s;
}

.td-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, .09);
    transform: translateX(3px);
}

.td-card-left {
    flex-shrink: 0;
}

.td-serial {
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    background: var(--c-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.td-card-body {
    flex: 1;
    min-width: 0;
}

.td-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0 0 8px;
    line-height: 1.4;
}

.td-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.td-meta-item {
    font-size: 12.5px;
    color: var(--c-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.td-meta-item .fa {
    color: var(--c-gold);
}

.td-type-badge {
    background: #fdf0f0;
    color: #c0392b;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: var(--r-pill);
    display: flex;
    align-items: center;
    gap: 4px;
}

.td-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.td-btn-view {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--c-navy);
    color: #fff;
    padding: 8px 18px;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}

.td-btn-view:hover {
    background: var(--c-gold);
    color: #fff;
}

.td-btn-download {
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    background: #fdf0f0;
    color: #c0392b;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background .2s;
    font-size: 15px;
}

.td-btn-download:hover {
    background: #c0392b;
    color: #fff;
}

.td-empty {
    text-align: center;
    padding: 70px 24px;
    background: #fff;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
}

.td-empty .fa {
    font-size: 48px;
    color: var(--c-border);
    display: block;
    margin-bottom: 16px;
}

.td-empty h5 {
    color: var(--c-navy);
    font-weight: 700;
    margin-bottom: 8px;
}

.td-detail-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.td-detail-header {
    background: linear-gradient(135deg, var(--c-navy) 0%, #1a3a6b 100%);
    padding: 28px 32px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.td-detail-header-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    flex-shrink: 0;
}

.td-detail-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: rgba(255, 255, 255, .6);
    font-weight: 700;
    margin-bottom: 6px;
}

.td-detail-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.4;
}

.td-info-strip {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--c-border);
}

.td-info-item {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-right: 1px solid var(--c-border);
}

.td-info-item:last-child {
    border-right: none;
}

.td-info-item > .fa {
    font-size: 20px;
    color: var(--c-gold);
    flex-shrink: 0;
}

.td-info-label {
    display: block;
    font-size: 11px;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 700;
    margin-bottom: 3px;
}

.td-info-value {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--c-navy);
}

.td-section {
    border-bottom: 1px solid var(--c-border);
}

.td-section-head {
    background: #f8fafc;
    padding: 12px 28px;
    font-size: 13px;
    font-weight: 700;
    color: var(--c-navy);
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--c-border);
}

.td-section-head .fa {
    color: var(--c-gold);
}

.td-section-body {
    padding: 20px 28px;
    font-size: 14.5px;
    line-height: 1.85;
    color: #444;
}

.td-image-wrap {
    padding: 20px 28px 28px;
    text-align: center;
}

.td-image {
    max-width: 100%;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}

.td-sidebar {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.td-widget {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.td-widget-head {
    background: var(--c-navy);
    color: #fff;
    padding: 13px 18px;
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 9px;
}

.td-widget-head .fa {
    color: var(--c-gold);
}

.td-widget-body {
    padding: 16px 18px;
}

.td-btn-download-full {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: var(--c-gold);
    color: #fff;
    padding: 11px 18px;
    border-radius: var(--r-md);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s;
}

.td-btn-download-full:hover {
    background: var(--c-navy);
    color: #fff;
}

.td-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--c-border);
    font-size: 13px;
}

.td-contact-item:last-child {
    border-bottom: none;
}

.td-contact-item .fa {
    color: var(--c-gold);
    margin-top: 2px;
    flex-shrink: 0;
}

.td-contact-item a {
    color: var(--c-navy);
    text-decoration: none;
}

.td-contact-item a:hover {
    color: var(--c-gold);
}

.td-btn-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--c-navy);
    color: #fff;
    padding: 11px 18px;
    border-radius: var(--r-md);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}

.td-btn-back:hover {
    background: var(--c-gold);
    color: #fff;
}

@media (max-width: 991px) {
    .jb-sidebar, .td-sidebar {
        position: static;
    }
}

@media (max-width: 767px) {
    .jb-page, .jb-detail-page, .td-page, .td-detail-page {
        padding: 40px 0 60px;
    }

    .jb-card, .td-card {
        flex-wrap: wrap;
    }

    .jb-card-actions, .td-card-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .jb-detail-header, .td-detail-header {
        padding: 20px;
        flex-wrap: wrap;
    }

    .jb-btn-print-top {
        margin-left: 0;
    }

    .jb-info-item, .td-info-item {
        border-right: none;
        border-bottom: 1px solid var(--c-border);
    }

    .jb-section-body, .td-section-body {
        padding: 16px 20px;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   RICH CONTENT PROSE  (.kiu-prose)
   Apply to any container that renders rich editor HTML
   ═══════════════════════════════════════════════════════════════════ */

.kiu-prose {
    font-size: 15px;
    line-height: 1.85;
    color: #374151;
}

.kiu-prose > *:first-child {
    margin-top: 0 !important;
}

.kiu-prose > *:last-child {
    margin-bottom: 0 !important;
}

/* Headings */
.kiu-prose h1, .kiu-prose h2, .kiu-prose h3,
.kiu-prose h4, .kiu-prose h5, .kiu-prose h6 {
    color: #0a1e3c;
    font-weight: 700;
    line-height: 1.35;
    margin: 1.4em 0 .5em;
}

.kiu-prose h1 {
    font-size: 1.75rem;
}

.kiu-prose h2 {
    font-size: 1.45rem;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: .3em;
}

.kiu-prose h3 {
    font-size: 1.2rem;
}

.kiu-prose h4 {
    font-size: 1.05rem;
}

.kiu-prose h5 {
    font-size: .95rem;
}

.kiu-prose h6 {
    font-size: .875rem;
    color: #6b7280;
}

/* Paragraph */
.kiu-prose p {
    margin: 0 0 1em;
}

/* Bold / Italic */
.kiu-prose strong, .kiu-prose b {
    font-weight: 700;
    color: #1f2937;
}

.kiu-prose em, .kiu-prose i {
    font-style: italic;
}

/* Links */
.kiu-prose a {
    color: #0a1e3c;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .15s;
}

.kiu-prose a:hover {
    color: #d4a017;
}

/* Unordered lists */
.kiu-prose ul {
    list-style: none !important;
    padding-left: 1.4em !important;
    margin: .75em 0 1em !important;
}

.kiu-prose ul li {
    position: relative !important;
    padding-left: .5em !important;
    margin-bottom: .45em !important;
}

.kiu-prose ul li::before {
    content: "" !important;
    position: absolute !important;
    left: -1em !important;
    top: .6em !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #d4a017 !important;
    display: block !important;
}

/* Nested ul - smaller dot */
.kiu-prose ul ul li::before {
    width: 5px;
    height: 5px;
    background: #9ca3af;
    top: .65em;
    left: -1em;
}

/* Ordered lists */
.kiu-prose ol {
    list-style: none !important;
    counter-reset: kiu-ol !important;
    padding-left: 1.6em !important;
    margin: .75em 0 1em !important;
}

.kiu-prose ol li {
    counter-increment: kiu-ol !important;
    position: relative !important;
    padding-left: .4em !important;
    margin-bottom: .45em !important;
}

.kiu-prose ol li::before {
    content: counter(kiu-ol) "." !important;
    position: absolute !important;
    left: -1.6em !important;
    width: 1.4em !important;
    text-align: right !important;
    font-weight: 700 !important;
    color: #0a1e3c !important;
    font-size: .9em !important;
    display: block !important;
}

/* Blockquote */
.kiu-prose blockquote {
    border-left: 4px solid #d4a017;
    background: #fefce8;
    margin: 1.25em 0;
    padding: .9em 1.2em;
    border-radius: 0 8px 8px 0;
    color: #555;
    font-style: italic;
}

.kiu-prose blockquote p {
    margin: 0;
}

/* Horizontal rule */
.kiu-prose hr {
    border: none;
    border-top: 2px solid #e5e7eb;
    margin: 1.5em 0;
}

/* Code */
.kiu-prose code {
    background: #f3f4f6;
    color: #c0392b;
    padding: .15em .4em;
    border-radius: 4px;
    font-size: .88em;
    font-family: monospace;
}

.kiu-prose pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1em 1.25em;
    border-radius: 8px;
    overflow-x: auto;
    font-size: .875em;
    margin: 1em 0;
}

.kiu-prose pre code {
    background: none;
    color: inherit;
    padding: 0;
}

/* Images */
.kiu-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: .75em 0;
}

/* Tables */
.kiu-prose table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 1.25em 0 !important;
    font-size: .9em !important;
    display: table !important;
    border: 1px solid #d1d5db !important;
}

.kiu-prose thead {
    background: #0a1e3c !important;
    color: #fff !important;
}

.kiu-prose thead th {
    padding: 10px 14px !important;
    text-align: left !important;
    font-weight: 700 !important;
    font-size: .85rem !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    border: 1px solid #1e3a5f !important;
    color: #fff !important;
}

.kiu-prose tbody tr {
    border-bottom: 1px solid #e5e7eb !important;
}

.kiu-prose tbody tr:last-child {
    border-bottom: 1px solid #d1d5db !important;
}

.kiu-prose tbody tr:nth-child(even) {
    background: #f8fafc !important;
}

.kiu-prose td {
    padding: 9px 14px !important;
    vertical-align: top !important;
    border: 1px solid #d1d5db !important;
}

.kiu-prose th {
    padding: 10px 14px !important;
    vertical-align: middle !important;
    border: 1px solid #1e3a5f !important;
}

/* Definition list */
.kiu-prose dl {
    margin: 1em 0;
}

.kiu-prose dt {
    font-weight: 700;
    color: #0a1e3c;
    margin-top: .75em;
}

.kiu-prose dd {
    padding-left: 1.2em;
    color: #555;
    margin-bottom: .25em;
}

/* ============================================================
   FACULTIES INDEX  (.fac-index-*)
   DEPARTMENTS INDEX (.dep-index-*)
   FACULTY SHOW  (.fac-show-*, .fac-dean-*, .fac-intro-*, .fac-depts-*)
   ============================================================ */

/* ── Faculties index ── */
.fac-index-page {
    padding: 60px 0 70px;
}

.fac-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.fac-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 22px 20px;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    box-shadow: var(--shadow-sm);
}

.fac-card:hover {
    border-color: var(--c-navy);
    box-shadow: 0 8px 28px rgba(10, 30, 60, .12);
    transform: translateY(-3px);
}

.fac-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--c-navy), #1a3a6b);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 22px;
}

.fac-card:hover .fac-card-icon {
    background: linear-gradient(135deg, #1a3a6b, var(--c-gold));
}

.fac-card-body {
    flex: 1;
}

.fac-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0 0 4px;
    line-height: 1.3;
}

.fac-card-meta {
    font-size: .8rem;
    color: var(--c-text-muted);
}

.fac-card-meta .fa {
    color: var(--c-gold);
    margin-right: 4px;
}

.fac-card-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-navy);
    font-size: 13px;
    flex-shrink: 0;
    transition: background .2s, color .2s;
}

.fac-card:hover .fac-card-arrow {
    background: var(--c-gold);
    color: #fff;
}

/* ── Departments index ── */
.dep-index-page {
    padding: 60px 0 70px;
}

.dep-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.dep-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1.5px solid var(--c-border);
    border-left: 4px solid var(--c-navy);
    border-radius: var(--r-md);
    padding: 18px 20px;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    box-shadow: var(--shadow-sm);
}

.dep-card:hover {
    border-left-color: var(--c-gold);
    box-shadow: 0 6px 24px rgba(10, 30, 60, .1);
    transform: translateY(-2px);
}

.dep-card-num {
    font-size: 1.6rem;
    font-weight: 800;
    color: #e2e8f0;
    line-height: 1;
    min-width: 40px;
    font-variant-numeric: tabular-nums;
}

.dep-card:hover .dep-card-num {
    color: var(--c-gold);
}

.dep-card-body {
    flex: 1;
}

.dep-card-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0 0 4px;
    line-height: 1.3;
}

.dep-card-meta {
    font-size: .78rem;
    color: var(--c-text-muted);
}

.dep-card-meta .fa {
    color: var(--c-gold);
    margin-right: 4px;
}

.dep-card-arrow {
    color: #cbd5e1;
    font-size: 18px;
    transition: color .2s;
}

.dep-card:hover .dep-card-arrow {
    color: var(--c-navy);
}

/* ── Faculty show page ── */
.fac-show-page {
    padding: 60px 0 0;
}

.fac-show-section {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 36px;
    margin-bottom: 56px;
    align-items: start;
}

/* Dean card */
.fac-dean-card {
    background: #fff;
    border-radius: var(--r-md);
    box-shadow: 0 4px 20px rgba(10, 30, 60, .08);
    overflow: hidden;
    text-align: center;
}

.fac-dean-photo-wrap {
    background: linear-gradient(160deg, var(--c-navy) 0%, #1a3a6b 100%);
    padding: 28px 20px 20px;
}

.fac-dean-photo {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, .25);
    display: block;
    margin: 0 auto;
}

.fac-dean-info {
    padding: 16px 18px 20px;
}

.fac-dean-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--c-navy), #1a3a6b);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    margin-bottom: 10px;
}

.fac-dean-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0 0 8px;
}

.fac-dean-ext {
    color: var(--c-gold);
    font-size: .75rem;
    margin-left: 6px;
}

.fac-dean-desig, .fac-dean-email, .fac-dean-phone {
    font-size: .8rem;
    color: var(--c-text-muted);
    margin: 0 0 5px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
}

.fac-dean-desig .fa, .fac-dean-email .fa, .fac-dean-phone .fa {
    color: var(--c-navy);
    margin-top: 2px;
}

/* Faculty intro right col */
.fac-intro-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--c-border);
}

.fac-intro-head .fa {
    font-size: 1.4rem;
    color: var(--c-gold);
}

.fac-intro-head h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0;
}

.fac-tabs .nav-link.fac-tab-link {
    font-size: .85rem;
    font-weight: 600;
    color: var(--c-text-muted);
    padding: 8px 16px;
    border-radius: var(--r-md) var(--r-md) 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fac-tabs .nav-link.fac-tab-link.active {
    color: var(--c-navy);
    border-color: var(--c-border) var(--c-border) #fff;
}

.fac-tab-content {
    border: 1.5px solid var(--c-border);
    border-top: none;
    border-radius: 0 0 var(--r-md) var(--r-md);
    padding: 24px;
    background: #fff;
}

/* Departments grid under faculty */
.fac-depts-section {
    background: #f8fafc;
    padding: 56px 0 70px;
}

.fac-depts-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

.fac-depts-heading .fa {
    font-size: 1.5rem;
    color: var(--c-gold);
}

.fac-depts-heading h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0;
}

.fac-depts-heading h2 span {
    color: var(--c-gold);
}

.fac-depts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}

.fac-dept-card {
    background: #fff;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s, transform .2s;
}

.fac-dept-card:hover {
    box-shadow: 0 10px 32px rgba(10, 30, 60, .14);
    transform: translateY(-4px);
}

.fac-dept-img {
    position: relative;
    height: 160px;
    overflow: hidden;
}

.fac-dept-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.fac-dept-card:hover .fac-dept-img img {
    transform: scale(1.06);
}

.fac-dept-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(10, 30, 60, .6));
}

.fac-dept-body {
    padding: 18px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fac-dept-num {
    font-size: .7rem;
    font-weight: 800;
    color: var(--c-gold);
    letter-spacing: .08em;
}

.fac-dept-name {
    font-size: .95rem;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0;
    line-height: 1.3;
}

.fac-dept-meta {
    font-size: .78rem;
    color: var(--c-text-muted);
}

.fac-dept-meta .fa {
    color: var(--c-gold);
    margin-right: 4px;
}

.fac-dept-btn {
    margin-top: auto;
    padding-top: 10px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--c-navy);
    display: flex;
    align-items: center;
    gap: 6px;
}

.fac-dept-card:hover .fac-dept-btn {
    color: var(--c-gold);
}

/* Responsive */
@media (max-width: 768px) {
    .fac-show-section {
        grid-template-columns: 1fr;
    }

    .fac-index-grid {
        grid-template-columns: 1fr;
    }

    .dep-index-grid {
        grid-template-columns: 1fr;
    }

    .fac-depts-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

/* ============================================================
   DEGREE SHOW  (.dg-*)
   ============================================================ */
.dg-page {
    padding: 56px 0 70px;
}

/* Heading */
.dg-heading {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--c-border);
}

.dg-heading-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--c-navy), #1a3a6b);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
}

.dg-heading-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--c-gold);
    margin-bottom: 4px;
}

.dg-heading-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--c-navy);
    margin: 0;
    line-height: 1.25;
}

/* Accordion */
.dg-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dg-acc-item {
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
    background: #fff;
}

.dg-acc-item--open {
    border-color: var(--c-navy);
}

.dg-acc-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    background: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    text-align: left;
    transition: background .15s;
}

.dg-acc-trigger:hover {
    background: #f8fafc;
}

.dg-acc-trigger:not(.collapsed) {
    background: #f0f4ff;
}

.dg-acc-item--open .dg-acc-trigger:not(.collapsed) {
    background: linear-gradient(135deg, rgba(10, 30, 60, .04), rgba(10, 30, 60, .02));
}

.dg-acc-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    background: var(--c-navy);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
}

.dg-acc-trigger:not(.collapsed) .dg-acc-icon {
    background: var(--c-gold);
}

.dg-acc-label {
    flex: 1;
    font-size: .92rem;
    font-weight: 700;
    color: var(--c-navy);
}

.dg-acc-chevron {
    font-size: 12px;
    color: var(--c-text-muted);
    transition: transform .2s;
}

.dg-acc-trigger:not(.collapsed) .dg-acc-chevron {
    transform: rotate(180deg);
    color: var(--c-navy);
}

.dg-acc-body {
    padding: 20px 22px;
    border-top: 1.5px solid var(--c-border);
    background: #fff;
}

.dg-scheme-body {
    padding: 16px;
    background: #f8fafc;
}

/* Inner scheme accordion */
.dg-scheme-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dg-scheme-item {
    border: 1.5px solid var(--c-border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.dg-scheme-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fff;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: .85rem;
    font-weight: 700;
    color: var(--c-navy);
    transition: background .15s;
}

.dg-scheme-trigger:hover {
    background: #f8fafc;
}

.dg-scheme-trigger:not(.collapsed) {
    background: var(--c-navy);
    color: #fff;
}

.dg-scheme-trigger .fa-check-circle {
    color: var(--c-gold);
    font-size: 15px;
    flex-shrink: 0;
}

.dg-scheme-trigger:not(.collapsed) .fa-check-circle {
    color: #fff;
}

.dg-scheme-trigger .fa-chevron-down {
    font-size: 11px;
    color: var(--c-text-muted);
    transition: transform .2s;
}

.dg-scheme-trigger:not(.collapsed) .fa-chevron-down {
    transform: rotate(180deg);
    color: rgba(255, 255, 255, .7);
}

.dg-scheme-content {
    padding: 16px;
    border-top: 1px solid var(--c-border);
}

/* Empty state */
.dg-empty {
    padding: 48px 24px;
    text-align: center;
    background: #f8fafc;
    border-radius: var(--r-md);
    color: var(--c-text-muted);
}

.dg-empty .fa {
    font-size: 2.5rem;
    color: #cbd5e1;
    display: block;
    margin-bottom: 12px;
}

/* Sidebar */
.dg-sidebar {
    position: sticky;
    top: 100px;
}

.dg-widget {
    background: #fff;
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.dg-widget-head {
    background: linear-gradient(135deg, var(--c-navy), #1a3a6b);
    color: #fff;
    padding: 12px 18px;
    font-size: .85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dg-widget-head .fa {
    color: var(--c-gold);
}

.dg-widget-body {
    padding: 16px 18px;
}

.dg-info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

.dg-info-item:last-child {
    border-bottom: none;
}

.dg-info-item > .fa {
    color: var(--c-gold);
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.dg-info-label {
    display: block;
    font-size: .7rem;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.dg-info-value {
    display: block;
    font-size: .88rem;
    font-weight: 700;
    color: var(--c-navy);
}

.dg-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dg-link-list li {
    border-bottom: 1px solid #f1f5f9;
}

.dg-link-list li:last-child {
    border-bottom: none;
}

.dg-link-list li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--c-navy);
    text-decoration: none;
    transition: color .15s, background .15s;
}

.dg-link-list li a:hover {
    color: var(--c-gold);
    background: #f8fafc;
}

.dg-link-list li a .fa {
    color: var(--c-gold);
    font-size: 12px;
}

/* ============================================================
   DEPARTMENT SHOW  (.dp-*)
   ============================================================ */
.dp-page {
    padding: 56px 0 0;
}

.dp-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--c-gold);
    margin-bottom: 14px;
}

.dp-section-label .fa {
    font-size: 14px;
}

/* Top grid: HOD + Intro */
.dp-top-grid {
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 36px;
    margin-bottom: 52px;
    align-items: start;
}

/* HOD card */
.dp-hod-card {
    background: #fff;
    border-radius: var(--r-md);
    box-shadow: 0 6px 28px rgba(10, 30, 60, .14), 0 1px 4px rgba(10, 30, 60, .08);
    overflow: hidden;
    text-align: center;
}

.dp-hod-photo-wrap {
    background: linear-gradient(160deg, var(--c-navy) 0%, #1a3a6b 100%);
    padding: 28px 20px 20px;
}

.dp-hod-photo {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, .25);
    display: block;
    margin: 0 auto;
}

.dp-hod-info {
    padding: 16px 18px 20px;
}

.dp-hod-badge {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0 0 8px;
    line-height: 1.35;
    border-bottom: 2px solid var(--c-gold);
    padding-bottom: 8px;
    display: block;
}

.dp-hod-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0 0 8px;
}

.dp-hod-ext {
    color: var(--c-gold);
    font-size: .72rem;
    margin-left: 5px;
}

.dp-hod-detail {
    font-size: .78rem;
    color: var(--c-text-muted);
    margin: 0 0 6px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    line-height: 1.6;
}

.dp-hod-detail .fa {
    color: var(--c-gold);
    margin-top: 3px;
    font-size: .8rem;
}

.dp-empty-hod {
    background: #f8fafc;
    border-radius: var(--r-md);
    padding: 36px 20px;
    text-align: center;
    color: #94a3b8;
}

.dp-empty-hod .fa {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
}

/* Intro tabs */
.dp-tabs .nav-link.dp-tab-link {
    font-size: .82rem;
    font-weight: 600;
    color: var(--c-text-muted);
    padding: 8px 16px;
    border-radius: var(--r-md) var(--r-md) 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dp-tabs .nav-link.dp-tab-link.active {
    color: var(--c-navy);
    border-bottom-color: #fff;
}

.dp-tab-content {
    border: 1.5px solid var(--c-border);
    border-top: none;
    border-radius: 0 0 var(--r-md) var(--r-md);
    padding: 24px;
    background: #fff;
    min-height: 160px;
}

.dp-empty-intro {
    background: #f8fafc;
    border-radius: var(--r-md);
    padding: 36px 20px;
    text-align: center;
    color: #94a3b8;
}

.dp-empty-intro .fa {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
}

/* Section headings */
.dp-section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--c-border);
}

.dp-section-heading .fa {
    font-size: 1.3rem;
    color: var(--c-gold);
}

.dp-section-heading h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0;
}

.dp-section-heading h2 span {
    color: var(--c-gold);
}

/* Degrees */
.dp-degrees-section {
    margin-bottom: 56px;
}

.dp-degrees-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.dp-degree-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1.5px solid var(--c-border);
    border-left: 4px solid var(--c-navy);
    border-radius: var(--r-md);
    padding: 16px 18px;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    box-shadow: var(--shadow-sm);
}

.dp-degree-card:hover {
    border-left-color: var(--c-gold);
    box-shadow: 0 6px 22px rgba(10, 30, 60, .1);
    transform: translateY(-2px);
}

.dp-degree-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--c-navy), #1a3a6b);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
}

.dp-degree-card:hover .dp-degree-icon {
    background: linear-gradient(135deg, var(--c-gold), #b8870f);
}

.dp-degree-body {
    flex: 1;
}

.dp-degree-name {
    font-size: .9rem;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0;
    line-height: 1.3;
}

.dp-degree-arrow {
    color: #cbd5e1;
    font-size: 14px;
    transition: color .2s;
}

.dp-degree-card:hover .dp-degree-arrow {
    color: var(--c-gold);
}

/* Teachers */
.dp-teachers-section {
    background: #f8fafc;
    padding: 52px 0;
}

.dp-teachers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.dp-teacher-card {
    background: #fff;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    text-align: center;
    transition: box-shadow .2s, transform .2s;
}

.dp-teacher-card:hover {
    box-shadow: 0 8px 28px rgba(10, 30, 60, .12);
    transform: translateY(-3px);
}

.dp-teacher-photo-wrap {
    background: linear-gradient(160deg, var(--c-navy), #1a3a6b);
    padding: 24px 20px 18px;
}

.dp-teacher-photo {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .3);
    display: block;
    margin: 0 auto;
}

.dp-teacher-info {
    padding: 14px 16px 18px;
}

.dp-teacher-name {
    font-size: .9rem;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0 0 4px;
}

.dp-teacher-desig {
    font-size: .75rem;
    color: var(--c-gold);
    font-weight: 600;
    margin: 0 0 6px;
}

.dp-teacher-email {
    font-size: .72rem;
    color: var(--c-text-muted);
    margin: 0 0 12px;
}

.dp-teacher-email .fa {
    margin-right: 4px;
}

.dp-teacher-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    background: var(--c-navy);
    padding: 6px 16px;
    border-radius: var(--r-pill);
    text-decoration: none;
    transition: background .2s;
}

.dp-teacher-btn:hover {
    background: var(--c-gold);
    color: #fff;
}

/* Alumni */
.dp-alumni-section {
    background: var(--c-navy);
    padding: 56px 0 70px;
}

.dp-alumni-section .dp-section-heading {
    border-bottom-color: rgba(255, 255, 255, .15);
}

.dp-alumni-section .dp-section-heading .fa {
    color: var(--c-gold);
}

.dp-alumni-section .dp-section-heading h2 {
    color: #fff;
}

.dp-alumni-card {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r-md);
    padding: 24px 20px;
    text-align: center;
    margin: 4px;
}

.dp-alumni-photo-wrap {
    margin-bottom: 14px;
}

.dp-alumni-photo {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--c-gold);
    display: block;
    margin: 0 auto;
}

.dp-alumni-name {
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
}

.dp-alumni-degree {
    font-size: .75rem;
    color: var(--c-gold);
    font-weight: 600;
    margin: 0 0 2px;
}

.dp-alumni-session {
    font-size: .72rem;
    color: rgba(255, 255, 255, .55);
    margin: 0 0 10px;
}

.dp-alumni-desc {
    font-size: .78rem;
    color: rgba(255, 255, 255, .7);
    text-align: left;
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .dp-top-grid {
        grid-template-columns: 1fr;
    }

    .dp-degrees-grid {
        grid-template-columns: 1fr;
    }

    .dp-teachers-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}