/* =============================================
   DEFAULT THEME (Blue) — CSS Custom Properties
   ============================================= */
:root {
    --saffron: #ff9933;
    --white: #ffffff;
    --green: #39b54a;
    --dark-blue: #111827;
    --royal-blue: #1f2937;
    --charcoal: #1f2937;
    --bi-red: #d94e34;
    --top-bar-bg: #2d3748;

    /* Theming tokens (default = slate/charcoal) */
    --theme-primary: #003b61;
    --theme-primary-dark: #002842;
    --theme-accent: #ff9933;
    --theme-nav-bg: #002842;
    --theme-nav-border: #ff9933;
    --theme-header-bg1: #ff9933;
    --theme-header-bg2: #f0f7ff;
    --theme-header-bg3: #39b54a;
    --theme-ticker-bg: #001f33;
    --theme-ticker-label: #ff9933;
    --theme-btn-bg: #003b61;
    --theme-link-hover: #001f33;
    --theme-section-title: #002842;
    --theme-top-bar: #002842;
    --theme-news-bg: linear-gradient(145deg, #002842 0%, #001f33 100%);
    --theme-news-border: #ff9933;

    /* Main color — default Blue. Overridden per theme below & also by JS from localStorage */
    --main-color: #003b61;
}

/* =============================================
   MAROON THEME
   ============================================= */
[data-theme="maroon"] {
    --saffron: #e8a0a0;
    --royal-blue: #7b1e1e;
    --dark-blue: #5a0f0f;
    --top-bar-bg: #3d0f0f;

    --theme-primary: #7b1e1e;
    --theme-primary-dark: #5a0f0f;
    --theme-accent: #e8a0a0;
    --theme-nav-bg: #3d0f0f;
    --theme-nav-border: #c0392b;
    --theme-header-bg1: #c0392b;
    --theme-header-bg2: #fdf2f2;
    --theme-header-bg3: #7b1e1e;
    --theme-ticker-bg: #5a0f0f;
    --theme-ticker-label: #e8a0a0;
    --theme-btn-bg: #7b1e1e;
    --theme-link-hover: #5a0f0f;
    --theme-section-title: #6d0100;
    --theme-top-bar: #3d0f0f;
    --theme-news-bg: linear-gradient(145deg, #3d0f0f 0%, #270808 100%);
    --theme-news-border: #e8a0a0;
    --main-color: #7b1e1e;
}

/* =============================================
   GOLD THEME
   ============================================= */
[data-theme="gold"] {
    --saffron: #c79600;
    --royal-blue: #7a6000;
    --dark-blue: #5a4400;
    --top-bar-bg: #3d2e00;

    --theme-primary: #7a6000;
    --theme-primary-dark: #5a4400;
    --theme-accent: #f0c000;
    --theme-nav-bg: #3d2e00;
    --theme-nav-border: #c79600;
    --theme-header-bg1: #c79600;
    --theme-header-bg2: #fffbe6;
    --theme-header-bg3: #7a6000;
    --theme-ticker-bg: #5a4400;
    --theme-ticker-label: #f0c000;
    --theme-btn-bg: #7a6000;
    --theme-link-hover: #5a4400;
    --theme-section-title: #7a6000;
    --theme-top-bar: #3d2e00;
    --theme-news-bg: linear-gradient(145deg, #3d2e00 0%, #261c00 100%);
    --theme-news-border: #f0c000;
    --main-color: #7a6000;
}

/* =============================================
   OLIVE GREEN THEME
   ============================================= */
[data-theme="olive"] {
    --saffron: #a5b84c;
    --royal-blue: #4a5e1a;
    --dark-blue: #3a4c12;
    --top-bar-bg: #2e3d0f;

    --theme-primary: #4a5e1a;
    --theme-primary-dark: #3a4c12;
    --theme-accent: #8aa62a;
    --theme-nav-bg: #2e3d0f;
    --theme-nav-border: #8aa62a;
    --theme-header-bg1: #6b8c23;
    --theme-header-bg2: #f4f8e8;
    --theme-header-bg3: #3a4c12;
    --theme-ticker-bg: #3a4c12;
    --theme-ticker-label: #a5b84c;
    --theme-btn-bg: #4a5e1a;
    --theme-link-hover: #3a4c12;
    --theme-section-title: #4a5e1a;
    --theme-top-bar: #2e3d0f;
    --theme-news-bg: linear-gradient(145deg, #2e3d0f 0%, #1c2608 100%);
    --theme-news-border: #8aa62a;
    --main-color: #4a5e1a;
}

html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

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

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f8fafc !important;
    background-image: 
        radial-gradient(at 0% 0%, rgba(0, 59, 97, 0.08) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(56, 189, 248, 0.09) 0px, transparent 50%),
        radial-gradient(at 50% 100%, rgba(255, 153, 51, 0.06) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(0, 59, 97, 0.08) 0px, transparent 50%),
        linear-gradient(rgba(0, 59, 97, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 59, 97, 0.02) 1px, transparent 1px) !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 36px 36px, 36px 36px !important;
    background-attachment: fixed !important;
    color: var(--charcoal);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

/* Top Dark Bar */
.top-slate-bar {
    height: 8px;
    background-color: var(--top-bar-bg);
    width: 100%;
}

/* Main Header Container */
.header-container {
    background: linear-gradient(to bottom, #ff9933 0%, #ffffff 50%, #39b54a 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px;
    width: 100%;
    min-height: 75px;
    /* Micro-height for ultra efficiency */
    position: relative;
    transition: all 0.3s ease;
}



/* Style 30: Layered Wavy Header */
/* Merged Header & Slider Layout Container */
.gpa-hero-merged-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.header-container.style-30 {
    background: linear-gradient(135deg, var(--theme-primary-dark, #0d2557) 0%, var(--theme-primary, #1b3f8b) 100%);
    position: relative;
    padding-top: 3px;
    /* Minimal padding */
    padding-bottom: 24px;
    /* Space optimized for waves */
    border: none;
    transition: all 0.3s ease;
}

@media (min-width: 769px) {
    .gpa-hero-merged-container .header-container.style-30 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
        min-height: 65px;
        /* Sized down from 75px */
        padding-top: 4px;
        /* Reduced padding */
        padding-bottom: 24px;
        /* Squeezed wave transition room */
        background: linear-gradient(135deg, var(--theme-primary-dark, #0d2557) 0%, var(--theme-primary, #1b3f8b) 100%) !important;
        background-image:
            radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 40%),
            radial-gradient(circle at 90% 80%, rgba(255, 153, 51, 0.08) 0%, transparent 50%),
            linear-gradient(135deg, var(--theme-primary-dark, #0d2557) 0%, var(--theme-primary, #1b3f8b) 100%) !important;
        /* Luminous Mesh Overlay */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
        border-bottom: none !important;
        display: flex;
        flex-direction: row;
        /* Logo on the far left, text directly next to it on the right */
        justify-content: flex-start;
        /* Pushed together to the left side of the screen */
        gap: 24px;
        /* Beautiful spacer */
        padding-right: 40px;
        padding-left: 40px;
        order: 1 !important;
    }

    .gpa-hero-merged-container .gpa-hero-slider {
        order: 2 !important;
    }

    .gpa-hero-merged-container .gpa-main-navbar {
        order: 3 !important;
    }

    .gpa-hero-merged-container .header-container.style-30 .header-text-container {
        align-items: flex-start;
        /* Align elements to the left inside flex column */
        text-align: left;
        /* Left align the text */
        flex-grow: 0;
        padding: 0;
    }
}

.header-container.style-30 .header-title-main {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.header-container.style-30 .header-subtitle-school {
    color: rgba(255, 255, 255, 0.9) !important;
    /* Refined white */
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

.header-container.style-30 .header-dept-info {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 153, 51, 0.12) !important;
    /* Dynamic theme accent glass wash background */
    padding: 2px 10px !important;
    /* Extremely sleek padding */
    border-radius: 12px !important;
    border: 1px solid rgba(255, 153, 51, 0.3) !important;
    /* Elegant gold border badge */
    color: var(--theme-accent, #ff9933) !important;
    /* Golden authority highlight */
    text-shadow: none !important;
    font-size: 0.7rem;
    /* Sized down */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
    /* Tight spacer */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* White-to-Gold Metallic Gradient Highlight for the Location Word */
.header-container.style-30 .gpa-highlight-gold {
    background: linear-gradient(135deg, #ffffff 0%, var(--theme-accent, #ff9933) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    text-shadow: none !important;
    filter: drop-shadow(0 2px 8px rgba(255, 153, 51, 0.3));
}




/* Logo Sizing & Fit */
/* Logo Sizing & Fit with breathing glow halo */
.logo-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logo-wrapper::before {
    content: '';
    position: absolute;
    inset: -6px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, transparent 70%);
    border-radius: 50% !important;
    z-index: 1;
    animation: logo-pulse 4s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes logo-pulse {
    0% {
        transform: scale(0.94);
        opacity: 0.6;
    }

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

.logo-svg {
    width: 64px;
    /* Sleeker size to support optimized height */
    height: 64px;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
    transition: transform 0.3s ease;
    z-index: 2;
}

/* Center Typography Style */
.header-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-grow: 1;
    padding: 0 30px;
}

.header-title-main {
    font-family: 'Poppins', sans-serif;
    font-size: 1.85rem;
    /* Sized down from 2.15rem for sleek compact look */
    font-weight: 850;
    color: var(--royal-blue);
    margin: 0 0 2px 0;
    /* Tight, elegant spacing */
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.12);
}

.header-subtitle-school {
    font-family: 'Poppins', sans-serif;
    font-size: 0.92rem;
    /* Sized down from 1.05rem for spacing efficiency */
    font-weight: 500;
    color: var(--charcoal);
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0.1px;
}

.header-dept-info {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    /* Small, official seal-like tag */
    font-weight: 700;
    color: #111827;
    margin: 0 0 2px 0;
    /* Spacer below authority tag */
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    /* High official seal look */
}

/* Footer styling */
footer:not(.college-footer) {
    text-align: center;
    padding: 20px;
    font-size: 0.85rem;
    color: #9ca3af;
    background-color: #ffffff;
    border-top: 1px solid #e5e7eb;
}

/* Responsive Media Queries */
@media (max-width: 1200px) {
    .header-title-main {
        font-size: 2.0rem;
    }

    .header-subtitle-school {
        font-size: 1.2rem;
    }

    .header-dept-info {
        font-size: 0.9rem;
    }

    .logo-svg {
        width: 110px;
        height: 110px;
    }
}

@media (max-width: 992px) {
    .header-title-main {
        font-size: 1.7rem;
    }

    .header-subtitle-school {
        font-size: 1.05rem;
    }

    .header-dept-info {
        font-size: 0.8rem;
    }

    .logo-svg {
        width: 95px;
        height: 95px;
    }

    .header-container {
        padding: 15px 25px;
    }
}

@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        gap: 15px;
        padding: 20px 15px;
        min-height: auto;
    }

    /* Style-30 header on mobile: horizontal layout with logo + text side by side */
    .header-container.style-30 {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 16px 14px 16px !important;
        min-height: auto !important;
    }

    /* Allow text container to fill remaining width after logo */
    .header-container.style-30 .header-text-container {
        max-width: calc(100% - 90px) !important;
        flex: 1 !important;
        text-align: left !important;
        align-items: flex-start !important;
        padding: 0 !important;
    }

    .header-container.style-30 .header-title-main {
        font-size: 1.05rem !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }

    .header-container.style-30 .header-subtitle-school {
        font-size: 0.72rem !important;
        line-height: 1.3 !important;
    }

    /* Keep wave container height small on mobile */
    .header-container.style-30 .wave-container {
        bottom: -1px !important;
        height: 18px !important;
    }

    .header-text-container {
        padding: 0;
    }

    .header-title-main {
        font-size: 1.45rem;
    }

    .header-subtitle-school {
        font-size: 0.92rem;
    }

    .header-dept-info {
        font-size: 0.72rem;
    }

    .logo-svg {
        width: 85px;
        height: 85px;
    }
}

/* ==========================================================================
   4. NAVIGATION BAR: MEGA DROPDOWNS STYLE RULES
   ========================================================================== */
.gpa-navigation-container {
    background-color: var(--top-bar-bg);
    width: 100%;
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 3.5px solid var(--saffron);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.gpa-navigation-container.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    animation: slideDownNav 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDownNav {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

.gpa-navbar {
    padding: 0 !important;
}

.gpa-navbar .navbar-nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.gpa-navbar .nav-link {
    font-family: 'Poppins', sans-serif;
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 16px 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    gap: 5px;
    border-bottom: 3px solid transparent;
}

.gpa-navbar .nav-link i {
    font-size: 1rem;
    opacity: 0.85;
}

.gpa-navbar .nav-link:hover,
.gpa-navbar .nav-item.active .nav-link {
    color: var(--saffron) !important;
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom-color: var(--saffron);
}

/* Dropdown Menu styling with smooth 3D fade transition */
.gpa-navbar .dropdown-menu {
    background: #ffffff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(27, 63, 139, 0.15);
    padding: 10px 0;
    margin-top: 0;
    min-width: 260px;
    border-top: 3px solid var(--royal-blue);
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    /* Transition delay on hover-out: waits 350ms before hiding */
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.35s, 
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.35s, 
                visibility 0s linear 0.6s;
    display: block;
    /* enable visibility transition */
}

.gpa-navbar .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    /* Transition delay on hover-in: shows instantly without delay */
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0s, 
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0s, 
                visibility 0s linear 0s;
}

.gpa-navbar .dropdown-item {
    font-family: 'Poppins', sans-serif;
    font-weight: 550;
    font-size: 0.84rem;
    color: var(--charcoal);
    padding: 10px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    border-radius: 4px;
    margin: 2px 8px;
    width: calc(100% - 16px);
}

.gpa-navbar .dropdown-item:hover {
    background-color: #f3f7ff;
    color: var(--royal-blue);
    padding-left: 28px;
}

.gpa-navbar .dropdown-item i.bi-arrow-right-short {
    font-size: 1.1rem;
    opacity: 0;
    transform: translateX(-6px);
    transition: all 0.2s ease;
    color: var(--royal-blue);
}

.gpa-navbar .dropdown-item:hover i.bi-arrow-right-short {
    opacity: 1;
    transform: translateX(0);
}

/* Nav Badge with premium pulsing animation */
.gpa-nav-badge {
    background-color: #ef4444;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 1.5px 6px;
    border-radius: 4px;
    margin-left: 6px;
    letter-spacing: 0.5px;
    animation: gpaPulse 1.8s infinite;
}

@keyframes gpaPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* Responsive Hamburger Menu icon */
.gpa-mobile-toggle {
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    background: transparent !important;
    padding: 8px 12px !important;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 8px 0;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.gpa-mobile-toggle:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.gpa-mobile-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #ffffff;
    border-radius: 1px;
    transition: all 0.25s ease;
}

/* ==========================================================================
   6. HERO GRID: AUTHENTIC IMAGE SLIDER & LATEST NEWS
   ========================================================================== */
.gpa-hero-news-section {
    background-color: #f6f8fb;
    padding: 30px 0;
    border-bottom: 1px solid #e5e7eb;
}

/* Image Slider Card styling */
.gpa-hero-slider-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(27, 63, 139, 0.05);
    height: 225px;
    position: relative;
    border: 1px solid #e5e7eb;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gpa-hero-slider-card:hover {
    box-shadow: 0 15px 40px rgba(27, 63, 139, 0.08);
}

.gpa-slider-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.gpa-slider-container .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.03);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.gpa-slider-container .slide.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    z-index: 2;
}

.gpa-slider-container .slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Linear Black Gradient Overlay for readability */
.slide-overlay-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.4) 60%, rgba(15, 23, 42, 0) 100%);
    padding: 40px 30px 25px 30px;
    z-index: 5;
}

.slide-overlay-text {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: 0.2px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    border-left: 4px solid var(--saffron);
    padding-left: 15px;
}

/* Absolutely Aligned Slider controls */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15, 23, 42, 0.5);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(5px);
}

.slider-arrow i {
    font-size: 1.25rem;
}

.slider-arrow:hover {
    background: var(--royal-blue);
    border-color: var(--royal-blue);
    transform: translateY(-50%) scale(1.1);
}

.slider-arrow.prev {
    left: 20px;
}

.slider-arrow.next {
    right: 20px;
}

/* Slide indicators */
.slider-dots {
    position: absolute;
    bottom: 25px;
    right: 30px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.slider-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-dot.active {
    background: #ffffff;
    width: 24px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   DYNAMIC LATEST NEWS BOARD STYLES
   ========================================================================== */
.gpa-news-panel-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(27, 63, 139, 0.05);
    height: 440px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.news-panel-header {
    background: linear-gradient(135deg, var(--top-bar-bg) 0%, #374151 100%);
    color: #ffffff;
    padding: 18px 24px;
    border-bottom: 3.5px solid var(--saffron);
}

.news-panel-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.news-panel-title i {
    color: var(--saffron);
}

.badge-new-flash {
    background: #ef4444;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2.5px 6px;
    border-radius: 4px;
    margin-left: 8px;
    letter-spacing: 0.5px;
    animation: gpaPulse 1.5s infinite;
}

.news-archive-link {
    color: var(--saffron) !important;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.news-archive-link:hover {
    color: #ffffff !important;
    text-shadow: 0 0 5px rgba(255, 153, 51, 0.8);
}

.news-list-container {
    flex-grow: 1;
    overflow: hidden;
}

.news-list-item {
    padding: 15px 24px;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.25s ease;
    background: #ffffff;
}

.news-list-item:hover {
    background-color: #fafbfe;
    border-left: 4.5px solid var(--royal-blue);
    padding-left: 19.5px;
}

.news-item-left {
    display: flex;
    gap: 8px;
    align-items: center;
}

.news-item-date-box {
    font-size: 0.72rem;
    font-weight: 700;
    background: #eef2f6;
    color: var(--royal-blue);
    padding: 3px 8px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    border: 1px solid rgba(27, 63, 139, 0.08);
}

.news-item-tag-badge {
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 750;
    padding: 3px 8px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.news-item-link-text {
    font-family: 'Poppins', sans-serif;
    font-size: 0.86rem;
    font-weight: 550;
    color: var(--charcoal);
    text-decoration: none;
    line-height: 1.45;
    transition: all 0.2s ease;
}

.news-list-item:hover .news-item-link-text {
    color: var(--royal-blue);
}

/* ==========================================================================
   RESPONSIVE CSS FOR NEW SECTIONS
   ========================================================================== */
@media (max-width: 992px) {
    .gpa-navbar {
        padding: 8px 16px !important;
    }

    .gpa-navbar .navbar-nav {
        flex-direction: column;
        padding: 10px 0;
        gap: 2px;
    }

    .gpa-navbar .nav-link {
        padding: 12px 16px !important;
        font-size: 0.85rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 6px;
    }

    .gpa-navbar .nav-link:hover,
    .gpa-navbar .nav-item.active .nav-link {
        border-bottom-color: transparent;
        background-color: rgba(255, 255, 255, 0.08);
    }

    .gpa-navbar .dropdown-menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        background: rgba(0, 0, 0, 0.15);
        box-shadow: none;
        margin: 5px 12px 10px 12px;
        border-left: 2px solid var(--saffron);
        border-radius: 6px;
        border-top: none;
        display: none;
        width: auto;
        min-width: auto;
    }

    .gpa-navbar .dropdown.show .dropdown-menu {
        display: block;
    }

    .gpa-navbar .dropdown-item {
        color: rgba(255, 255, 255, 0.85);
        background: transparent !important;
    }

    .gpa-navbar .dropdown-item:hover {
        color: var(--saffron);
        padding-left: 26px;
    }

    .gpa-navbar .dropdown-item i.bi-arrow-right-short {
        color: var(--saffron);
    }
}

@media (max-width: 768px) {
    .gpa-hero-news-section {
        padding: 20px 0;
    }

    .gpa-hero-slider-card {
        height: auto !important;
        border-radius: 12px;
    }

    .gpa-news-panel-card {
        height: 390px;
        border-radius: 12px;
    }

    .slide-overlay-text {
        font-size: 0.94rem;
        padding-left: 10px;
    }

    .slide-overlay-bottom {
        padding: 30px 20px 18px 20px;
    }

    .slider-arrow {
        width: 38px;
        height: 38px;
    }

    .slider-arrow.prev {
        left: 12px;
    }

    .slider-arrow.next {
        right: 12px;
    }

    .slider-dots {
        bottom: 18px;
        right: 20px;
    }

    .news-panel-header {
        padding: 15px 20px;
    }

    .news-list-item {
        padding: 14px 20px;
    }
}

/* ==========================================================================
   5. ACCESSIBILITY & QUICK LINKS SUB-HEADER BAR
   ========================================================================== */
.gpa-sub-header-bar {
    background-color: #f1f3f5;
    border-bottom: 1px solid #dee2e6;
    padding: 7px 0;
    width: 100%;
    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.03);
}

.quick-link-item {
    font-family: 'Poppins', sans-serif;
    color: #343a40 !important;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    letter-spacing: 0.2px;
}

.quick-link-item:hover {
    color: #0a3565 !important;
    transform: translateY(-0.5px);
}

.control-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
    letter-spacing: 0.2px;
}

.btn-font-size {
    background-color: #212529;
    color: #ffffff;
    border: none;
    width: 28px;
    height: 20px;
    font-size: 0.74rem;
    font-weight: 700;
    border-radius: 0px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.btn-font-size:hover {
    background-color: #000000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.scheme-box {
    display: inline-block;
    width: 28px;
    height: 20px;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.18);
    transition: all 0.2s ease;
    vertical-align: middle;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    position: relative;
}

.scheme-box:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Active swatch gets a visible ring + checkmark indicator */
.scheme-box.active {
    outline: 2.5px solid #333;
    outline-offset: 2px;
    transform: translateY(-1px) scale(1.12);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.scheme-blue {
    background-color: #0a3565;
}

.scheme-maroon {
    background-color: #6d0100;
}

.scheme-gold {
    background-color: #c79600;
}

.scheme-olive {
    background-color: #6b8c23;
}

/* ==========================================================================
   6. PREMIUM FULL-WIDTH HERO SLIDER SECTION
   ========================================================================== */
.gpa-hero-slider {
    position: relative;
    width: 100%;
    height: 390px;
    overflow: hidden;
    background-color: #000000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 0px !important;
    perspective: 1500px;
    transform-style: preserve-3d;
}

/* Cinematic brightened gradient overlay to let sliding images shine */
.slider-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.02) 40%,
            rgba(0, 0, 0, 0.05) 75%,
            rgba(0, 0, 0, 0.28) 100%);
    z-index: 3;
    pointer-events: none;
}

.slider-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.gpa-hero-slider .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.0s ease-in-out;
    z-index: 1;
    overflow: hidden;
    background-color: #000000;
}

.gpa-hero-slider .slide.active {
    opacity: 1;
    z-index: 2;
}

.gpa-hero-slider .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    clip-path: inset(14% 18% 14% 18% round 24px);
    transform: scale(0.88);
    transition: clip-path 1.2s cubic-bezier(0.25, 1, 0.5, 1), transform 6.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Expands the clip mask and slowly zooms in the active image */
.gpa-hero-slider .slide.active img {
    clip-path: inset(0% 0% 0% 0% round 0px);
    transform: scale(1.04);
}

/* ── Slide Text Overlay (Title + Caption) ── */
.slide-text-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4;
    padding: 50px 40px 30px 40px;
    background: linear-gradient(to top,
        rgba(0,0,0,0.72) 0%,
        rgba(0,0,0,0.35) 60%,
        transparent 100%);
    pointer-events: none;
}

.slide-title {
    font-family: 'Outfit', 'Poppins', sans-serif;
    font-size: clamp(1.2rem, 3vw, 2rem);
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px 0;
    line-height: 1.25;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
    letter-spacing: 0.3px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}

.slide-caption {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.8rem, 1.8vw, 1rem);
    font-weight: 500;
    color: rgba(255,255,255,0.88);
    margin: 0;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
    letter-spacing: 0.5px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s;
}

/* Animate text in when slide is active */
.gpa-hero-slider .slide.active .slide-title,
.gpa-hero-slider .slide.active .slide-caption {
    opacity: 1;
    transform: translateY(0);
}

/* Left accent bar on title */
.slide-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 1em;
    background: var(--theme-accent, #ff9933);
    border-radius: 2px;
    margin-right: 10px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Premium Floating Glass Slide Arrow Navigation */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50% !important;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-arrow:hover {
    background-color: var(--theme-accent, #ff9933);
    border-color: var(--theme-accent, #ff9933);
    color: #ffffff;
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 8px 25px rgba(255, 153, 51, 0.4);
}

.slider-arrow.prev {
    left: 30px;
}

.slider-arrow.next {
    right: 30px;
}

/* Pagination Dots */
.slider-dots {
    position: absolute;
    bottom: 30px;
    /* Lowered back to bottom of slider */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
    transition: all 0.3s ease;
}

.slider-dot {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50% !important;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-dot.active,
.slider-dot:hover {
    background-color: var(--theme-accent, #ff9933);
    width: 28px;
    border-radius: 6px !important;
    box-shadow: 0 0 10px rgba(255, 153, 51, 0.6);
}

/* Quick Links Overlay (Glassmorphism Pill Shape) */
.slider-quick-links {
    position: absolute;
    bottom: 20px;
    /* Lowered back to bottom of slider */
    right: 40px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-radius: 30px !important;
    /* Rounded pill shape */
    z-index: 10;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 4px;
}

.overlay-link-btn {
    font-family: 'Poppins', sans-serif;
    color: #1e3a8a !important;
    /* Elegant dark blue default */
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    padding: 10px 22px;
    display: inline-block;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 25px;
    border-right: none;
}

.overlay-link-btn:hover {
    background-color: var(--theme-accent, #ff9933);
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 153, 51, 0.3);
    transform: translateY(-1px);
}

/* SVG Wave Container sitting elegantly at bottom of header */
.header-container.style-30 .wave-container {
    position: absolute;
    bottom: -32px;
    /* Pulls waves lower to overlap deeply on top of the slider */
    left: 0;
    width: 100%;
    height: 60px;
    /* Increased height to 60px for spectacular wave curves */
    overflow: hidden;
    line-height: 0;
    z-index: 12;
    /* Elevates it above the slider layer */
}

.header-container.style-30 .waves {
    position: relative;
    width: 100%;
    height: 60px;
}

/* Beautiful dynamic opacified tints using color-mix to match user themes in real-time */
.header-container.style-30 .parallax-waves>use {
    animation: move-forever 12s cubic-bezier(.55, .5, .45, .5) infinite;
    /* Sped up keyframe movement */
}

.header-container.style-30 .parallax-waves>use:nth-child(1) {
    fill: rgba(255, 255, 255, 0.22);
    /* Ultra-light top ripple */
    animation-delay: -1s;
    animation-duration: 3.5s;
}

.header-container.style-30 .parallax-waves>use:nth-child(2) {
    fill: rgba(255, 255, 255, 0.15);
    /* Soft intermediate ripple */
    animation-delay: -1.2s;
    animation-duration: 4.2s;
}

.header-container.style-30 .parallax-waves>use:nth-child(3) {
    fill: color-mix(in srgb, var(--theme-accent, #ff9933) 55%, transparent);
    /* Rich dynamic gold wave */
    animation-delay: -1.5s;
    animation-duration: 5s;
}

.header-container.style-30 .parallax-waves>use:nth-child(4) {
    fill: rgba(255, 255, 255, 0.32);
    /* Crisp intermediate white layer */
    animation-delay: -1.7s;
    animation-duration: 5.8s;
}

.header-container.style-30 .parallax-waves>use:nth-child(5) {
    fill: rgba(255, 255, 255, 0.5);
    /* Strong mid-layer white wave */
    animation-delay: -2s;
    animation-duration: 6.5s;
}

.header-container.style-30 .parallax-waves>use:nth-child(6) {
    fill: color-mix(in srgb, var(--theme-accent, #ff9933) 30%, transparent);
    /* Subtle secondary gold wave */
    animation-delay: -2.2s;
    animation-duration: 8s;
}

.header-container.style-30 .parallax-waves>use:nth-child(7) {
    fill: var(--theme-primary, #1b3f8b);
    /* Solid wave matches header primary color for beautiful overlap overlay */
    animation-delay: -2.5s;
    animation-duration: 10s;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }

    100% {
        transform: translate3d(85px, 0, 0);
    }
}

/* Responsive adjustments for Mobile & Tablets */
@media (max-width: 991px) {
    .gpa-hero-slider {
        height: 300px !important;
    }

    .slider-dots {
        bottom: 25px;
    }

    .slider-quick-links {
        bottom: 20px;
        right: 20px;
    }
}

@media (max-width: 768px) {
    .gpa-hero-slider {
        height: 180px !important;
        margin-top: 0 !important;
        border-radius: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-shadow: none !important;
    }

    .slider-dots {
        bottom: 25px;
        left: 20px;
        transform: none;
    }

    .slider-quick-links {
        bottom: 20px;
        right: 10px;
        left: 10px;
        justify-content: center;
        border-radius: 20px !important;
    }

    .overlay-link-btn {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    .slider-arrow {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .slider-dots {
        display: none;
        /* Hide dots on small mobile to avoid layout crowding */
    }
}

/* ==========================================================================
   7. MAIN DEEP BLUE NAVIGATION MENU BAR (Matching Deep Blue Screenshot)
   ========================================================================== */
.gpa-main-navbar {
    position: relative;
    /* Crucial: enables z-index mapping */
    background: linear-gradient(135deg, var(--theme-nav-bg, #0b3c73) 0%, color-mix(in srgb, var(--theme-nav-bg, #062b54) 80%, black) 50%, color-mix(in srgb, var(--theme-nav-bg, #031c36) 65%, black) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    /* Glass crisp top highlight */
    border-bottom: none;
    width: 100%;
    z-index: 100;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
    padding: 2px 0;
    transition: background 0.4s ease;
}

.gpa-main-navbar .navbar {
    padding: 0;
}

.gpa-main-navbar .nav-link {
    font-family: 'Poppins', sans-serif;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 9px 16px !important;
    margin: 5px 3px !important;
    border-radius: 4px;
    /* Apple capsule shape */
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.4px;
    position: relative;
}

.gpa-main-navbar .nav-link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Sliding active indicator dot below capsule */
.gpa-main-navbar .nav-link::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: var(--theme-accent, #ff9933);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
    border-radius: 2px;
}

.gpa-main-navbar .nav-link:hover::before {
    width: 60%;
}

/* Caret/Dropdown Arrow styling matching the screenshot */
.gpa-main-navbar .dropdown-toggle::after {
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    margin-left: 0.45em;
    vertical-align: middle;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.85;
}

.gpa-main-navbar .dropdown:hover .dropdown-toggle::after {
    transform: rotate(180deg);
    /* Flip caret on hover */
    opacity: 1;
}

/* Premium Dropdown Menu Styling */
.gpa-main-navbar .dropdown-menu {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    /* Soft ambient orange/gold drop-shadow along with elegant dark slate shadow */
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.18), 0 0 35px rgba(255, 153, 51, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.04);
    margin-top: 8px;
    padding: 10px 0;
    border-top: 4px solid var(--theme-accent, #ff9933);
    animation: slideUpDropdown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUpDropdown {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

.gpa-main-navbar .dropdown-item {
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    font-weight: 550;
    color: #334155;
    padding: 12px 28px 12px 24px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
    position: relative;
    border-bottom: 1px solid rgba(241, 245, 249, 0.6);
}

.gpa-main-navbar .dropdown-item:last-child {
    border-bottom: none;
}

/* Beautiful Left Accent Indicator Bar on Hover */
.gpa-main-navbar .dropdown-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleX(0);
    width: 4px;
    height: 60%;
    background-color: var(--theme-accent, #ff9933);
    border-radius: 0 4px 4px 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: left center;
}



.gpa-main-navbar .dropdown-item:hover {
    background-color: rgba(255, 153, 51, 0.08) !important;
    color: var(--theme-primary, #0b3c73) !important;
    padding-left: 32px;
    transform: translateX(4px);
}

.gpa-main-navbar .dropdown-item:hover::before {
    transform: translateY(-50%) scaleX(1);
}


/* Direct Hover trigger on Desktop for modern UX */
@media (min-width: 992px) {
    .gpa-main-navbar .dropdown:hover .dropdown-menu {
        display: block;
    }
}

/* Mobile responsive padding adjustments */
@media (max-width: 991px) {
    .gpa-main-navbar .nav-link {
        padding: 12px 18px !important;
        width: 100%;
        justify-content: space-between;
        margin: 4px 0 !important;
    }

    .gpa-main-navbar .nav-link::before {
        display: none;
        /* Hide slider underline on mobile */
    }

    .gpa-main-navbar .dropdown-menu {
        box-shadow: inset 0 2px 8px rgba(0,0,0,0.2);
        background-color: rgba(3, 30, 61, 0.8) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 8px;
        margin: 8px 12px;
        padding: 8px 0;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-top: none;
    }

    .gpa-main-navbar .dropdown-item {
        color: rgba(255, 255, 255, 0.9) !important;
        padding: 12px 24px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .gpa-main-navbar .dropdown-item::before {
        display: none;
    }

    .gpa-main-navbar .dropdown-item:hover {
        background-color: rgba(255, 153, 51, 0.15) !important;
        color: #ffffff !important;
        padding-left: 24px;
        transform: none;
    }

    /* Fixed mobile dropdown visibility and collapse scrollability */
    .gpa-main-navbar .navbar-collapse {
        max-height: 75vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 15px;
    }

    .gpa-main-navbar .dropdown.show > .dropdown-menu,
    .gpa-main-navbar .dropdown-menu.show {
        display: block !important;
    }
}

/* Premium Multi-Level Dropdown Submenu Styling */
.gpa-main-navbar .dropdown-submenu {
    position: relative;
}

/* Submenu Arrow styling */
.gpa-main-navbar .dropdown-submenu .submenu-arrow {
    margin-left: auto;
    font-size: 11px;
    padding-left: 10px;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

/* Override default sliding micro-arrow for items with submenus */
.gpa-main-navbar .dropdown-submenu > a::after {
    display: none !important;
}

@media (min-width: 992px) {
    /* Position the submenu absolutely on desktop */
    .gpa-main-navbar .dropdown-submenu .dropdown-menu {
        top: -10px;
        left: 100%;
        margin-top: 0;
        margin-left: 2px;
        display: none !important;
        position: absolute;
        z-index: 1000;
        min-width: 240px;
        border-top: 4px solid var(--theme-accent, #ff9933);
        border-radius: 14px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
    }
    
    /* Reveal submenu on hover on desktop */
    .gpa-main-navbar .dropdown-submenu:hover > .dropdown-menu {
        display: block !important;
        animation: slideRightSubmenu 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    /* Animate Chevron on hover */
    .gpa-main-navbar .dropdown-submenu:hover > a .submenu-arrow {
        color: var(--theme-accent, #ff9933);
        transform: translateX(4px);
    }
}

@keyframes slideRightSubmenu {
    from {
        opacity: 0;
        transform: translateX(12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Mobile viewport adjustments for submenus */
@media (max-width: 991px) {
    .gpa-main-navbar .dropdown-submenu .dropdown-menu {
        position: static !important;
        display: none !important;
        float: none;
        width: auto;
        box-shadow: none;
        background-color: rgba(3, 20, 45, 0.3) !important;
        margin: 4px 12px 4px 20px !important;
        border-left: 2px solid var(--theme-accent, #ff9933) !important;
        border-radius: 8px;
        padding: 6px 0;
        border-top: none;
    }
    
    .gpa-main-navbar .dropdown-submenu.open > .dropdown-menu {
        display: block !important;
        animation: slideDownSubmenuMobile 0.25s ease-out forwards;
    }

    .gpa-main-navbar .dropdown-submenu .dropdown-item {
        color: rgba(255, 255, 255, 0.8) !important;
        padding: 10px 20px !important;
        font-size: 0.82rem;
    }

    .gpa-main-navbar .dropdown-submenu .submenu-arrow {
        color: rgba(255, 255, 255, 0.5);
    }

    .gpa-main-navbar .dropdown-submenu.open > a .submenu-arrow {
        transform: rotate(90deg);
        color: var(--theme-accent, #ff9933);
    }
}

@keyframes slideDownSubmenuMobile {
    from {
        opacity: 0;
        max-height: 0;
        overflow: hidden;
    }
    to {
        opacity: 1;
        max-height: 500px;
    }
}

/* Premium Full-Width Mega Menu Styling */
.gpa-main-navbar .mega-menu-nav {
    position: static !important;
}

.gpa-main-navbar .mega-menu-dropdown {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: rgba(255, 255, 255, 0.99) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-top: 4px solid var(--theme-accent, #ff9933) !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.16) !important;
    padding: 0 !important;
    margin-top: 0 !important;
    z-index: 1000 !important;
    display: none;
    transform: translateY(15px);
    opacity: 0;
}

/* Open Mega Dropdown gracefully on hover on desktop */
@media (min-width: 992px) {
    .gpa-main-navbar .mega-menu-nav:hover .mega-menu-dropdown {
        display: block !important;
        animation: slideUpMegaMenu 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
}

@keyframes slideUpMegaMenu {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mega-menu-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

.mega-menu-row {
    display: flex;
    min-height: 460px;
}

/* Left Sidebar - Department List */
.mega-menu-sidebar {
    width: 26%;
    background-color: #f8fafc;
    border-right: 1px solid #e2e8f0;
    padding: 25px 0;
    flex-shrink: 0;
}

.mega-menu-sidebar-title {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #64748b;
    padding: 0 24px 12px 24px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 15px;
}

.mega-menu-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-dept-tab {
    position: relative;
    border-bottom: 1px solid #f1f5f9;
}

.mega-dept-tab-link, .mega-dept-tab-static a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 24px;
    color: #334155 !important;
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.25s ease;
    border-bottom: none !important;
}

.mega-dept-tab-link:hover, .mega-dept-tab-static a:hover {
    background-color: rgba(255, 153, 51, 0.05) !important;
    color: var(--theme-accent, #ff9933) !important;
    padding-left: 28px;
}

.mega-dept-tab.active .mega-dept-tab-link {
    background-color: #ffffff !important;
    color: var(--theme-primary, #0b3c73) !important;
    font-weight: 700;
    padding-left: 28px;
}

/* Left Indicator strip for active department */
.mega-dept-tab.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--theme-accent, #ff9933);
    z-index: 5;
}

.mega-arrow-icon {
    font-size: 10px;
    color: #94a3b8;
    transition: transform 0.25s ease;
}

.mega-dept-tab.active .mega-arrow-icon {
    transform: translateX(4px);
    color: var(--theme-accent, #ff9933);
}

/* Mobile accordion contents (hidden on desktop) */
.mega-mobile-accordion-content {
    display: none;
}

/* Right Side - Swappable Department Panels */
.mega-menu-content {
    flex-grow: 1;
    padding: 35px 40px;
    background-color: #ffffff;
    max-height: 520px;
    overflow-y: auto;
}

.mega-dept-panel {
    display: none;
    animation: fadeInPanel 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.mega-dept-panel.active {
    display: block;
}

@keyframes fadeInPanel {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mega-panel-header {
    margin-bottom: 22px;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 12px;
}

.mega-panel-subtitle {
    font-size: 9px;
    font-weight: 750;
    color: var(--theme-accent, #ff9933);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.mega-panel-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 850;
    color: var(--theme-primary, #0b3c73);
    margin: 4px 0 0 0;
    letter-spacing: 0.2px;
}

/* Gorgeous 3-Column Grid Layout */
.mega-panel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.mega-grid-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    text-decoration: none !important;
    background-color: #ffffff;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border-bottom: 1px solid #f1f5f9 !important;
}

.mega-grid-item::before, .mega-grid-item::after {
    display: none !important; /* Remove normal dropdown hover decorations */
}

.mega-grid-item:hover {
    background-color: rgba(255, 153, 51, 0.04) !important;
    border-color: rgba(255, 153, 51, 0.2) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.03);
    padding-left: 14px !important; /* Prevent parent dropdown list shifting */
}

.mega-item-icon {
    width: 36px;
    height: 36px;
    background-color: rgba(11, 60, 115, 0.05);
    color: var(--theme-primary, #0b3c73);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.mega-grid-item:hover .mega-item-icon {
    background-color: var(--theme-accent, #ff9933);
    color: #ffffff;
    transform: scale(1.05);
}

.mega-item-info {
    min-width: 0;
}

.mega-item-title {
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mega-grid-item:hover .mega-item-title {
    color: var(--theme-primary, #0b3c73) !important;
}

.mega-item-desc {
    font-size: 9.5px;
    color: #64748b;
    margin-top: 1px;
}

/* Mobile Accordions Styling for Smaller screens */
@media (max-width: 991px) {
    .gpa-main-navbar .mega-menu-dropdown {
        position: static !important;
        width: auto !important;
        background: rgba(3, 20, 45, 0.3) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-radius: 8px !important;
        margin: 8px 12px !important;
        padding: 6px 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-top: none !important;
        box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25) !important;
        display: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    
    .gpa-main-navbar .mega-menu-nav.show .mega-menu-dropdown,
    .gpa-main-navbar .mega-menu-dropdown.show {
        display: block !important;
    }

    .mega-menu-row {
        flex-direction: column;
        min-height: auto;
    }

    .mega-menu-sidebar {
        width: 100%;
        background-color: transparent;
        padding: 0;
        border-right: none;
    }

    .mega-menu-sidebar-title {
        display: none;
    }

    .mega-menu-content {
        display: none !important; /* Disable right panel on mobile */
    }

    .mega-dept-tab, .mega-dept-tab-static {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .mega-dept-tab-link, .mega-dept-tab-static a {
        color: rgba(255, 255, 255, 0.88) !important;
        padding: 12px 20px !important;
        font-size: 0.86rem;
    }

    .mega-dept-tab-link:hover, .mega-dept-tab-static a:hover {
        background-color: rgba(255, 153, 51, 0.15) !important;
        color: #ffffff !important;
        padding-left: 20px !important;
    }

    .mega-dept-tab.active .mega-dept-tab-link {
        background-color: rgba(255, 153, 51, 0.12) !important;
        color: var(--theme-accent, #ff9933) !important;
        padding-left: 20px !important;
    }

    .mega-dept-tab::before {
        display: none !important;
    }

    .mega-arrow-icon {
        color: rgba(255, 255, 255, 0.4);
        transform: rotate(0deg);
    }

    .mega-dept-tab.active .mega-arrow-icon {
        transform: rotate(90deg);
        color: var(--theme-accent, #ff9933);
    }

    .mega-mobile-accordion-content {
        display: none;
        background-color: rgba(0, 0, 0, 0.25);
        border-left: 2px solid var(--theme-accent, #ff9933);
        margin: 2px 12px 6px 20px;
        border-radius: 6px;
        padding: 6px 0;
    }

    .mega-dept-tab.active .mega-mobile-accordion-content {
        display: block;
        animation: slideDownSubmenuMobile 0.25s ease-out forwards;
    }

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

    .mega-mobile-links-list li {
        border-bottom: none !important;
    }

    .mega-mobile-links-list li a {
        display: block;
        padding: 8px 20px;
        color: rgba(255, 255, 255, 0.75) !important;
        font-size: 0.8rem;
        text-decoration: none !important;
        font-family: 'Poppins', sans-serif;
    }

    .mega-mobile-links-list li a:hover {
        color: #ffffff !important;
        background-color: rgba(255, 153, 51, 0.1);
        padding-left: 20px !important;
    }
}

/* ==========================================================================
   8. DYNAMIC NEWS TICKER / TRACKER BAR
   ========================================================================== */
.gpa-news-ticker {
    background-color: var(--theme-ticker-bg, #04244a);
    border-bottom: 2px solid var(--theme-accent, #ff9933);
    height: 40px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    z-index: 10;
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

.ticker-label {
    background-color: var(--theme-accent, #ff9933);
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 18px;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.25);
    z-index: 15;
    position: relative;
    transition: background-color 0.4s ease;
}

.ticker-content-wrap {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 100%;
}

/* Dynamic smooth CSS loop animation */
.ticker-marquee {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding-left: 100%;
    animation: tickerScroll 28s linear infinite;
}

.ticker-marquee:hover {
    animation-play-state: paused;
    /* User can pause marquee on mouse hover for easy reading! */
}

.ticker-item {
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding-right: 50px;
    transition: color 0.2s ease;
}

.ticker-item:hover {
    color: var(--theme-accent, #ff9933);
}

.ticker-bullet {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #ffffff;
    /* White bullet matching Purnea screenshot! */
    border-radius: 50% !important;
    margin-right: 12px;
}

@keyframes tickerScroll {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

/* Mobile Responsiveness for News Ticker */
@media (max-width: 768px) {
    .ticker-label {
        font-size: 0.75rem;
        padding: 0 12px;
    }

    .ticker-item {
        font-size: 0.78rem;
        padding-right: 35px;
    }
}

/* ==========================================================================
   9. TWO-COLUMN UPDATES & CAMPUS LIFE GALLERY SECTION
   ========================================================================== */
.gpa-updates-gallery-section {
    position: relative;
    background-image: url('../images/premium_campus_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 70px 0;
    border-top: 1px solid rgba(11, 60, 115, 0.08);
    border-bottom: 1px solid rgba(11, 60, 115, 0.08);
}

.gpa-updates-gallery-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(248, 250, 252, 0.88);
    pointer-events: none;
    z-index: 1;
}

.gpa-updates-gallery-section .container {
    position: relative;
    z-index: 2;
}

.gpa-updates-gallery-section .section-title {
    color: #0f172a !important;
}

.section-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    position: relative;
    padding-bottom: 8px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 45px;
    height: 3px;
    background-color: var(--theme-accent, #ff9933);
    border-radius: 2px;
    transition: background-color 0.4s ease;
}

/* Left Column: Activity Gallery Slider */
.gpa-activity-slider {
    position: relative;
    width: 100%;
    height: 480px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 16px !important;
    /* Premium rounded corners matching cards */
}

/* Reddish/Orange overlay overlay */
.gpa-activity-slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(217, 78, 52, 0.22) 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 3;
    pointer-events: none;
}

.activity-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.activity-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.activity-slide.active {
    opacity: 1;
    z-index: 2;
}

.activity-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Caption on bottom left matching the screenshot */
.activity-caption {
    position: absolute;
    bottom: 25px;
    left: 25px;
    z-index: 5;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 6px 14px;
    border-left: 3px solid #ff9933;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.caption-dot {
    width: 8px;
    height: 8px;
    background-color: #4ade80;
    /* Bright green active dot! */
    border-radius: 50% !important;
    display: inline-block;
}

/* Gallery Arrows */
.activity-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
}

.activity-arrow:hover {
    background-color: var(--theme-accent, #ff9933);
    border-color: var(--theme-accent, #ff9933);
    color: #ffffff;
}

.activity-arrow.prev {
    left: 15px;
}

.activity-arrow.next {
    right: 15px;
}

/* Right Column: Latest News Card */
.gpa-news-card {
    background: var(--theme-news-bg, linear-gradient(145deg, #1e293b 0%, #0f172a 100%));
    border-radius: 16px !important;
    /* Matches gallery slider corners */
    padding: 24px;
    height: 480px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 5px solid var(--theme-news-border, #ff9933);
    transition: background 0.4s ease, border-left-color 0.4s ease;
}

.news-scroll-container {
    height: 100%;
    overflow-y: auto;
    position: relative;
    scrollbar-width: none; /* Hide Firefox scrollbar */
}
.news-scroll-container::-webkit-scrollbar {
    display: none; /* Hide Chrome/Safari/Opera scrollbar */
}

/* Smooth continuous vertical scrolling loop */
.news-scroll-list {
    display: flex;
    flex-direction: column;
    animation: newsVerticalScroll 32s linear infinite;
}

.news-scroll-container:hover .news-scroll-list {
    animation-play-state: paused;
    /* Pause scrolling on mouse hover for readability */
}

.news-item {
    position: relative;
    padding-left: 24px;
    padding-right: 8px;
    padding-top: 2px;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.news-item:hover {
    background: rgba(255, 255, 255, 0.025);
    transform: translateX(4px);
    /* Sleek slide right on hover */
}

.news-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Premium Glowing Bullet Point */
.news-bullet {
    position: absolute;
    left: 2px;
    top: 13px;
    width: 7px;
    height: 7px;
    background-color: var(--theme-news-border, #ff9933);
    border-radius: 50% !important;
    box-shadow: 0 0 6px var(--theme-news-border, #ff9933), 0 0 10px var(--theme-news-border, #ff9933);
    animation: bulletGlow 2s infinite alternate;
    transition: background-color 0.4s ease;
}

@keyframes bulletGlow {
    from {
        transform: scale(0.9);
        opacity: 0.7;
        box-shadow: 0 0 4px var(--theme-news-border, #ff9933);
    }

    to {
        transform: scale(1.15);
        opacity: 1;
        box-shadow: 0 0 8px var(--theme-news-border, #ff9933), 0 0 12px var(--theme-news-border, #ff9933);
    }
}

/* Date Outlined Box */
.news-date {
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.25);
    /* Thin crisp white border */
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2.5px 9px;
    border-radius: 3px;
    margin-right: 8px;
    background-color: rgba(255, 255, 255, 0.04);
    letter-spacing: 0.3px;
}

/* Base category badge */
.news-badge {
    display: inline-block;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif;
    font-size: 0.65rem;
    font-weight: 750;
    padding: 3px 10px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Tender category color coded gradient */
.badge-tender {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
    /* Crimson gradient */
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Students category color coded gradient */
.badge-students {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
    /* Emerald gradient */
    border: 1px solid rgba(16, 185, 129, 0.2);
}

/* Notice/General category color coded gradient */
.badge-notice {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    /* Amber/Golden gradient */
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Notice text */
.news-text {
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.45;
    margin-top: 4px;
    transition: color 0.2s ease;
}

.news-item:hover .news-text {
    color: #ffffff;
    /* Turns bright white on hover for premium highlight */
}

@keyframes newsVerticalScroll {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(0, -50%, 0);
        /* Perfect infinite loop because we cloned the list! */
    }
}

/* ==========================================================================
   10. BENTO GRID PORTAL SECTION (STATE-OF-THE-ART EDITION)
   ========================================================================== */
.gpa-bento-section {
    background-color: #f8fafc;
    /* Slate-50 background for supreme neatness */
    border-bottom: 1px solid #e2e8f0;
    padding: 70px 0;
}

/* Master Bento Grid Wrapper */
.gpa-bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    gap: 24px;
}

/* Premium Bento Card Base */
.bento-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 12px !important;
    /* Soft pill-like modern corners */
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.015);
    /* Soft drop shadow */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.bento-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.07);
    border-color: rgba(11, 60, 115, 0.15);
}

/* Top accent color coding on cards */
.bento-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
}

.bento-welcome::before {
    background: linear-gradient(90deg, var(--theme-primary, #0b3c73), var(--theme-accent, #ff9933));
    transition: background 0.4s ease;
}

.bento-cm::before {
    background: linear-gradient(90deg, var(--theme-primary, #0b3c73), var(--theme-primary-dark, #1e5ba0));
    transition: background 0.4s ease;
}

.bento-minister::before {
    background: linear-gradient(90deg, #10b981, #059669);
    /* Emerald */
}

.bento-director::before {
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    /* Tech-Blue */
}

.bento-principal::before {
    background: linear-gradient(90deg, #ff9933, #e65c00);
    /* brand Saffron/Amber */
}

.bento-stats::before {
    background: linear-gradient(90deg, #0b3c73, #ff9933);
    /* brand Mix */
}

/* Specific Bento Placements */
.bento-welcome {
    grid-column: 3 / span 2;
    grid-row: span 2;
    justify-content: space-between;
}

.bento-cm {
    grid-column: 1 / span 1;
    grid-row: span 2;
}

.bento-minister {
    grid-column: 2 / span 1;
    grid-row: span 1;
}

.bento-director {
    grid-column: 2 / span 1;
    grid-row: span 1;
}

.bento-principal {
    grid-column: span 2;
    grid-row: span 1;
}

.bento-stats {
    grid-column: span 2;
    grid-row: span 1;
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
}

/* Portrait Image Styles */
.bento-img-wrapper {
    overflow: hidden;
    border: 1px solid #f1f5f9;
    background-color: #f8fafc;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    border-radius: 8px !important;
}

.bento-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.4s ease;
}

.bento-card:hover .bento-img-wrapper img {
    transform: scale(1.03);
}

.tall-portrait {
    height: 230px;
    width: 100%;
    border: 3px solid #ffffff;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.square-portrait {
    height: 120px;
    width: 120px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50% !important;
    border: 4px solid #ffffff;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.principal-horizontal {
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 8px !important;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.principal-horizontal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* Typography styles inside Bento */
.welcome-heading-bento {
    font-family: 'Poppins', sans-serif;
    font-size: 1.95rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
}

.welcome-heading-bento .highlight-navy {
    color: var(--theme-primary, #0b3c73);
    transition: color 0.4s ease;
}

.welcome-paragraph-bento {
    font-family: 'Poppins', sans-serif;
    font-size: 0.86rem;
    color: #475569;
    line-height: 1.65;
    text-align: justify;
}

.welcome-paragraph-bento-sm {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    color: #475569;
    line-height: 1.5;
    font-style: italic;
}

.bento-name {
    font-family: 'Poppins', sans-serif;
    font-size: 0.94rem;
    font-weight: 750;
    color: #0f172a;
    margin-top: 6px;
    margin-bottom: 2px;
}

.bento-name-sm {
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 4px;
    margin-bottom: 2px;
}

/* Stats Styles inside Bento */
.bento-stat-item {
    flex: 1;
}

.bento-stat-num {
    font-family: 'Poppins', sans-serif;
    font-size: 1.85rem;
    font-weight: 850;
    margin-bottom: 2px;
}

.text-navy {
    color: var(--theme-primary, #0b3c73);
    transition: color 0.4s ease;
}

.text-saffron {
    color: var(--theme-accent, #ff9933);
    transition: color 0.4s ease;
}

.text-emerald {
    color: #008f3a;
}

.bento-stat-lbl {
    font-family: 'Poppins', sans-serif;
    font-size: 0.66rem;
    font-weight: 650;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0;
}

.bento-stat-divider {
    height: 40px;
    width: 1px;
    background-color: #e2e8f0;
}

/* Pill Badges */
.bento-badge {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.68rem;
    font-weight: 650;
    padding: 2px 8px;
    border-radius: 20px !important;
}

.bento-badge-sm {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.62rem;
    font-weight: 650;
    padding: 2px 6px;
    border-radius: 20px !important;
}

.bento-state {
    font-family: 'Poppins', sans-serif;
    font-size: 0.64rem;
    font-weight: 600;
    color: #64748b !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0;
}

/* Action button under Welcome */
.bento-action-btn {
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--theme-primary, #0b3c73) !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.25s ease;
}

.bento-action-btn i {
    transition: transform 0.25s ease;
}

.bento-action-btn:hover {
    color: var(--theme-accent, #ff9933) !important;
}

.bento-action-btn:hover i {
    transform: translateX(4px);
}

/* Responsive Rules for Bento Grid */
@media (max-width: 992px) {
    .gpa-bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bento-welcome {
        grid-column: span 2;
        grid-row: span 1;
    }

    .bento-cm {
        grid-column: span 1;
        grid-row: span 1;
    }

    .bento-minister {
        grid-column: span 1;
        grid-row: span 1;
    }

    .bento-director {
        grid-column: span 2;
        grid-row: span 1;
    }

    .bento-principal {
        grid-column: span 2;
        grid-row: span 1;
    }

    .bento-stats {
        grid-column: span 2;
        grid-row: span 1;
    }
}

@media (max-width: 576px) {
    .gpa-bento-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .bento-welcome,
    .bento-cm,
    .bento-minister,
    .bento-director,
    .bento-principal,
    .bento-stats {
        grid-column: span 1 !important;
    }

    .bento-principal {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .bento-principal img {
        margin-right: 0 !important;
        margin-bottom: 15px !important;
    }
}

/* ==========================================================================
   10B. LEADERSHIP GRID (Simple Layout)
   ========================================================================== */
.simple-leadership-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: stretch;
    justify-content: center;
}

.simple-leader-item {
    background: #ffffff;
    border-radius: 16px !important;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Beautiful gradient top-bar for each leader profile */
.simple-leader-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--theme-primary, #0b3c73), var(--theme-accent, #ff9933));
    transition: background 0.4s ease;
}

.simple-leader-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: top;
    margin-bottom: 15px;
    border-radius: 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.simple-leader-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(11, 60, 115, 0.12);
    border-color: var(--theme-primary, #0b3c73);
}

.simple-leader-item:hover img {
    transform: scale(1.03);
    border-color: var(--theme-accent, #ff9933);
}

.simple-leader-name {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 750;
    color: #0f172a;
    margin-bottom: 4px;
}

.simple-leader-desig {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 0;
}

/* Stats Row under Welcome Heading */
.welcome-stats-row {
    display: flex;
    gap: 16px;
    border-top: 1px solid #e2e8f0;
    padding-top: 24px;
}

.welcome-stat-box {
    flex: 1;
    text-align: center;
    background: #ffffff;
    padding: 16px 10px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.welcome-stat-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(11, 60, 115, 0.06);
    border-color: rgba(11, 60, 115, 0.1);
}

.welcome-stat-box .stat-num {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    font-weight: 850;
    color: var(--theme-primary, #0b3c73);
    line-height: 1.2;
    margin-bottom: 4px;
    transition: color 0.4s ease;
}

.welcome-stat-box .stat-desc {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

@media (max-width: 768px) {
    .simple-leadership-grid {
        gap: 12px;
    }

    .simple-leader-item {
        padding: 12px;
        border-radius: 12px !important;
    }

    .simple-leader-item img {
        height: 140px;
    }

    .simple-leader-name {
        font-size: 0.85rem;
    }

    .simple-leader-desig {
        font-size: 0.72rem;
    }

    .welcome-stats-row {
        gap: 8px;
        padding-top: 18px;
    }

    .welcome-stat-box {
        padding: 10px 6px;
        border-radius: 8px;
    }

    .welcome-stat-box .stat-num {
        font-size: 1.3rem;
    }

    .welcome-stat-box .stat-desc {
        font-size: 0.58rem;
    }
}

@media (max-width: 576px) {
    .simple-leadership-grid {
        grid-template-columns: 1fr;
    }
}


/* Facility icons stylings */
.facility-icon-box {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 12px 6px;
    border-radius: 0px !important;
    /* Sharp edges */
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.facility-icon-box:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.facility-icon-box i {
    font-size: 1.35rem;
    color: #ff9933;
    /* Theme orange accent */
}

.facility-icon-box span {
    font-size: 0.7rem;
    font-weight: 600;
    color: #334155;
}

/* Read More Button styling */
.btn-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #0b3c73;
    /* Rich navy blue */
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 9px 22px;
    border-radius: 0px !important;
    /* Sharp corners */
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 10px rgba(11, 60, 115, 0.25);
}

.btn-read-more:hover {
    background-color: #ff9933;
    /* Orange accent hover */
    box-shadow: 0 4px 12px rgba(255, 153, 51, 0.35);
    transform: translateY(-1px);
}

.btn-read-more i {
    transition: transform 0.2s ease;
}

.btn-read-more:hover i {
    transform: translateX(4px);
    /* Interactive caret slide */
}

/* ==========================================================================
   11. OUR COURSES OFFERED SECTION (STATE-OF-THE-ART EDITION)
   ========================================================================== */
.gpa-courses-section {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
    padding: 80px 0;
    border-top: 3px solid var(--theme-accent);
    border-bottom: 3px solid var(--theme-accent);
    color: #ffffff;
    transition: background 0.4s ease, border-color 0.4s ease;
}

.gpa-courses-section .courses-title {
    color: #ffffff !important;
}

.gpa-courses-section .courses-highlight {
    color: var(--theme-accent) !important;
    transition: color 0.4s ease;
}

.gpa-courses-section .courses-badge {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--theme-accent) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: color 0.4s ease;
}

.gpa-courses-section .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
    margin-top: 45px;
}

/* Premium Card Base with Custom Thin Borders */
.course-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.04);
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Image Wrapper with Bottom Accent line & Soft Dark Overlay */
.course-img-wrapper {
    height: 165px;
    overflow: hidden;
    position: relative;
}

.course-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.course-img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0) 50%, rgba(15, 23, 42, 0.4) 100%);
    opacity: 0.85;
    transition: opacity 0.4s ease;
}

.course-card:hover .course-img-wrapper img {
    transform: scale(1.1);
}

.course-card:hover .course-img-overlay {
    opacity: 0.65;
}

/* Color-coded glow styles on hover */
.course-card.card-electronics:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 85, 0, 0.25);
    box-shadow: 0 16px 36px rgba(255, 85, 0, 0.14);
}

.course-card.card-computer:hover {
    transform: translateY(-8px);
    border-color: rgba(13, 110, 253, 0.25);
    box-shadow: 0 16px 36px rgba(13, 110, 253, 0.14);
}

.course-card.card-electrical:hover {
    transform: translateY(-8px);
    border-color: rgba(5, 150, 105, 0.25);
    box-shadow: 0 16px 36px rgba(5, 150, 105, 0.14);
}

.course-card.card-mechanical:hover {
    transform: translateY(-8px);
    border-color: rgba(234, 88, 12, 0.25);
    box-shadow: 0 16px 36px rgba(234, 88, 12, 0.14);
}

.course-card.card-civil:hover {
    transform: translateY(-8px);
    border-color: rgba(79, 70, 229, 0.25);
    box-shadow: 0 16px 36px rgba(79, 70, 229, 0.14);
}

/* Card Content Area */
.course-card-content {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    text-align: center;
}

/* Meta Badge Styling (Small colorful label) */
.course-meta-badge {
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #ff5500;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Curated Capsules for Seats & Duration info */
.course-meta-capsules {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    justify-content: center;
    width: 100%;
}

.meta-capsule {
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.capsule-seats {
    background-color: rgba(15, 23, 42, 0.05);
    color: #475569;
}

.capsule-duration {
    background-color: rgba(255, 153, 51, 0.08);
    color: #d97706;
}

/* Branch Title */
.course-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 18px;
    line-height: 1.35;
}

/* Interactive Pill Readmore Button with Arrow Animation */
.course-readmore-btn {
    margin-top: auto;
    background: #ff5500 !important;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 7px 22px;
    border-radius: 25px !important;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(255, 85, 0, 0.22);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.course-readmore-btn i {
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.course-readmore-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 85, 0, 0.35);
}

.course-readmore-btn:hover i {
    transform: translateX(4px);
    /* Interactive slide out of arrow */
}

/* Responsiveness for Courses Grid */
@media (max-width: 1200px) {
    .courses-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

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

@media (max-width: 576px) {
    .courses-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ==========================================================================
   11. GP Katihar CUSTOM SUB-SECTIONS (LEADERSHIP, PORTALS & FACULTIES)
   ========================================================================== */

/* A. Leadership & Welcome Section */
.gpa-welcome-leadership {
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--theme-primary, #1f2937) 22%, #ffffff) 0%,
            color-mix(in srgb, var(--theme-accent, #ff9933) 22%, #ffffff) 100%) !important;
    position: relative !important;
    overflow: hidden !important;
    border-top: 1px solid rgba(0, 0, 0, 0.03) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
    padding: 35px 0 !important;
}

/* Ambient glow blobs that use --main-color dynamically! */
.gpa-welcome-leadership::before {
    content: '' !important;
    position: absolute !important;
    top: -100px !important;
    left: -100px !important;
    width: 350px !important;
    height: 350px !important;
    background: radial-gradient(circle, color-mix(in srgb, var(--main-color, #0b3c73) 12%, transparent) 0%, transparent 70%) !important;
    filter: blur(50px) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.gpa-welcome-leadership::after {
    content: '' !important;
    position: absolute !important;
    bottom: -150px !important;
    right: -100px !important;
    width: 400px !important;
    height: 400px !important;
    background: radial-gradient(circle, color-mix(in srgb, var(--main-color, #0b3c73) 10%, transparent) 0%, transparent 70%) !important;
    filter: blur(60px) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.gpa-welcome-leadership .container {
    position: relative !important;
    z-index: 2 !important;
}

.gpa-leader-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

@media (max-width: 768px) {
    .gpa-leader-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .gpa-leader-card {
        height: 185px !important;
        border-radius: 12px !important;
    }
    .gpa-leader-name {
        font-size: 11px !important;
        bottom: 22px !important;
        left: 8px !important;
        right: 8px !important;
    }
    .gpa-leader-desig {
        font-size: 8px !important;
        bottom: 8px !important;
        left: 8px !important;
        right: 8px !important;
    }
}

.gpa-leader-card {
    position: relative !important;
    height: 240px !important; /* Compact 240px height */
    overflow: hidden !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: #111827 !important; /* Premium dark backing to prevent flashes */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding: 0 !important; /* Full edge-to-edge! */
    cursor: pointer;
}

.gpa-leader-card::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        to bottom,
        rgba(15, 23, 42, 0) 35%,
        rgba(15, 23, 42, 0.35) 55%,
        rgba(15, 23, 42, 0.85) 80%,
        rgba(15, 23, 42, 0.98) 100%
    ) !important;
    z-index: 2 !important;
    transition: all 0.4s ease !important;
}

.gpa-leader-card:hover {
    transform: translateY(-8px) !important;
    border-color: var(--theme-accent, #ff9933) !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.3), 0 0 20px color-mix(in srgb, var(--theme-accent, #ff9933) 30%, transparent) !important;
}

.gpa-leader-card:hover::after {
    background: linear-gradient(
        to bottom,
        rgba(15, 23, 42, 0) 25%,
        rgba(15, 23, 42, 0.4) 50%,
        rgba(15, 23, 42, 0.9) 75%,
        color-mix(in srgb, var(--theme-primary, #0b3c73) 92%, #000000) 100%
    ) !important;
}

.gpa-leader-img-wrapper {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: none !important;
    background: #0f172a !important;
    z-index: 1 !important;
}

.gpa-leader-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.gpa-leader-card:hover .gpa-leader-img-wrapper img {
    transform: scale(1.08) rotate(0.5deg) !important;
}

.gpa-leader-name {
    position: absolute !important;
    bottom: 30px !important; /* Compact metadata offset */
    left: 12px !important;
    right: 12px !important;
    z-index: 3 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important; /* Refined compact name font size */
    font-weight: 850 !important;
    color: #ffffff !important;
    margin: 0 !important;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-align: center !important;
}

.gpa-leader-card:hover .gpa-leader-name {
    transform: translateY(-2px) !important;
    color: #ffdf7e !important;
}

.gpa-leader-desig {
    position: absolute !important;
    bottom: 12px !important; /* Compact metadata offset */
    left: 12px !important;
    right: 12px !important;
    z-index: 3 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 9.8px !important; /* Refined compact designation font size */
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-align: center !important;
}

.gpa-leader-card:hover .gpa-leader-desig {
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

.gpa-leader-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.35rem !important;
    font-weight: 850 !important;
    color: var(--theme-primary, #1f2937) !important;
    padding-left: 12px !important;
    border-left: 4px solid var(--theme-accent, #ff9933) !important;
    margin-bottom: 24px !important;
    letter-spacing: -0.3px !important;
    transition: color 0.3s ease !important;
}

.gpa-welcome-heading {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.85rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.6px !important;
    background: linear-gradient(135deg, var(--theme-primary, #1f2937) 0%, var(--theme-accent, #ff9933) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block !important;
}

.gpa-welcome-line {
    width: 100px;
    height: 5px;
    background: linear-gradient(90deg, var(--theme-accent, #ff9933) 0%, transparent 100%) !important;
    border-radius: 50px !important;
    margin-bottom: 24px !important;
}

.gpa-welcome-text {
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.85rem !important;
    line-height: 1.8 !important;
    color: var(--theme-primary-dark, #334155) !important;
    text-align: justify !important;
}

/* Beautiful dynamic gradient drop cap for the first letter of each welcome paragraph */
.gpa-welcome-text::first-letter {
    font-size: 1.85rem !important;
    font-weight: 850 !important;
    font-family: 'Outfit', sans-serif !important;
    float: left !important;
    line-height: 1 !important;
    margin-right: 8px !important;
    margin-top: 2px !important;
    background: linear-gradient(135deg, var(--theme-primary, #1f2937) 0%, var(--theme-accent, #ff9933) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.gpa-welcome-readmore {
    background: linear-gradient(135deg, var(--theme-primary, #1f2937) 0%, var(--theme-accent, #ff9933) 100%) !important;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 750 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    padding: 11px 26px !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--theme-primary, #1f2937) 20%, transparent) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    margin-top: 10px !important;
}

.gpa-welcome-readmore:hover {
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 10px 25px color-mix(in srgb, var(--theme-primary, #1f2937) 30%, transparent) !important;
    color: #ffffff !important;
}

.gpa-welcome-readmore i {
    font-size: 0.9rem !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.gpa-welcome-readmore:hover i {
    transform: translateX(5px) !important;
}

/* B. Quick Portals Section */
.gpa-quick-portals {
    background: linear-gradient(135deg, var(--theme-primary, #0b3c73) 0%, var(--theme-primary-dark, #062b54) 100%);
    position: relative;
    overflow: hidden;
}

.gpa-quick-portals::before {
    content: '';
    position: absolute;
    top: -15%;
    left: -10%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255, 153, 51, 0.18) 0%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 1;
}

.gpa-quick-portals::after {
    content: '';
    position: absolute;
    bottom: -15%;
    right: -10%;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(11, 60, 115, 0.16) 0%, transparent 70%);
    filter: blur(75px);
    pointer-events: none;
    z-index: 1;
}

.gpa-portals-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
    z-index: 2;
}

.gpa-portal-card {
    background: #ffffff;
    border-radius: 16px !important;
    /* Elegant organic curves */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
    transform-style: preserve-3d;
    will-change: transform;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}

.gpa-portal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.25) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    transition: 0.75s;
    z-index: 5;
    pointer-events: none;
}

.gpa-portal-card:hover::before {
    left: 150%;
    transition: 0.75s;
}

.gpa-portal-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.35), 0 0 25px rgba(255, 223, 126, 0.12);
    border-color: rgba(255, 223, 126, 0.25);
}

.gpa-portal-img-wrapper {
    height: 160px;
    position: relative;
    overflow: hidden;
}

.gpa-portal-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gpa-portal-card:hover .gpa-portal-img-wrapper img {
    transform: scale(1.08);
}

.gpa-portal-logo-bg {
    background: radial-gradient(circle at center, #ffffff 0%, #f3f6ee 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Emblem / Graphic vector styling */
.library-logo-icon {
    position: absolute;
    inset: 0;
    background: rgba(10, 35, 66, 0.85);
    /* Premium blue translucent coat */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.library-logo-icon i {
    font-size: 2.2rem;
    color: #ff9933;
    /* Gold accent */
    margin-bottom: 4px;
}

.library-logo-icon span {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.library-logo-icon small {
    font-family: 'Poppins', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.anti-ragging-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
}

.anti-ragging-box {
    border: 3px solid #dc2626;
    padding: 10px 18px;
    border-radius: 8px;
    text-align: center;
    color: #dc2626;
}

.ragging-no {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 900;
    display: block;
    margin-bottom: 2px;
}

.stop-ragging-text {
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: block;
}

/* AICTE Box Emblem */
.aicte-logo-box {
    color: #ea580c;
    text-align: center;
}

.aicte-logo-box .emblem-crest {
    font-size: 2.5rem;
    margin-bottom: 4px;
}

.aicte-logo-box .emblem-text-main {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    display: block;
}

.aicte-logo-box .emblem-text-sub {
    font-family: 'Poppins', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    display: block;
}

/* NBA Ring Emblem */
.nba-logo-box {
    color: #0284c7;
    text-align: center;
}

.nba-ring {
    width: 65px;
    height: 65px;
    border: 5px solid #0284c7;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
}

.nba-acronym {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 900;
}

.nba-tagline {
    font-family: 'Poppins', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    display: block;
}

/* SBTE Seal Emblem */
.sbte-logo-box {
    color: #059669;
    text-align: center;
}

.sbte-seal {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 4px;
}

.sbte-seal i {
    font-size: 2.2rem;
}

.sbte-seal span {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
}

.sbte-title {
    font-family: 'Poppins', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: block;
}

/* AICTE, NBA, SBTE Micro-animations */
.aicte-logo-box .emblem-crest i,
.nba-ring,
.sbte-seal i {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.gpa-portal-card:hover .aicte-logo-box .emblem-crest i {
    transform: rotate(-12deg) scale(1.15);
    color: #f97316;
    filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.3));
}

.gpa-portal-card:hover .nba-ring {
    border-color: #0284c7;
    box-shadow: 0 0 18px rgba(2, 132, 199, 0.5);
    transform: scale(1.08) rotate(360deg);
}

.gpa-portal-card:hover .sbte-seal i {
    transform: translateY(-3px) scale(1.15);
    color: #10b981;
    filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.35));
}

/* Portal Card Footer */
.gpa-portal-footer {
    background: linear-gradient(90deg, var(--theme-primary-dark, #062b54) 0%, var(--theme-primary, #0b3c73) 100%);
    color: #ffffff;
    padding: 14px 18px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 750;
    letter-spacing: 0.3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.gpa-portal-footer i {
    font-size: 0.9rem;
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.gpa-portal-card:hover .gpa-portal-footer {
    background: linear-gradient(90deg, var(--theme-accent, #ff9933) 0%, var(--theme-primary, #0b3c73) 100%);
}

.gpa-portal-card:hover .gpa-portal-footer i {
    background: #ffffff;
    color: var(--theme-accent, #ff9933);
    transform: translateX(4px) scale(1.05);
}

/* C. Faculty Members Section */
.gpa-faculty-showcase {
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--theme-primary, #6f8b1b) 3%, #ffffff) 0%,
            color-mix(in srgb, var(--theme-accent, #ff9933) 3%, #ffffff) 100%) !important;
    position: relative !important;
    overflow: hidden !important;
    border-top: 1px solid rgba(0, 0, 0, 0.02) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.02) !important;
}

.gpa-faculty-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

@media (max-width: 1200px) {
    .gpa-faculty-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 992px) {
    .gpa-faculty-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 768px) {
    .gpa-faculty-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 480px) {
    .gpa-faculty-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

.gpa-faculty-card {
    height: 380px !important;
    position: relative !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: none !important;
    background: #0f172a !important;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

/* Glowing Border Wrap on Hover */
.gpa-faculty-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2.5px;
    background: linear-gradient(135deg, var(--theme-primary, #6f8b1b) 0%, var(--theme-accent, #ff9933) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.gpa-faculty-card:hover::before {
    opacity: 1;
}

.gpa-faculty-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15), 0 0 25px color-mix(in srgb, var(--theme-primary, #6f8b1b) 25%, transparent) !important;
}

/* Image wrapper fills the entire card background */
.gpa-faculty-img-wrapper {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 1 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #1e293b !important;
}

.gpa-faculty-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    filter: brightness(0.9) contrast(1.02);
}

.gpa-faculty-card:hover .gpa-faculty-img-wrapper img {
    transform: scale(1.1) !important;
    filter: brightness(0.75) contrast(1.05) saturate(1.05);
}

/* Cinematic Bottom Gradient Overlay */
.gpa-faculty-gradient-mask {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to bottom,
            rgba(15, 23, 42, 0) 0%,
            rgba(15, 23, 42, 0.25) 45%,
            rgba(15, 23, 42, 0.85) 80%,
            rgba(15, 23, 42, 0.98) 100%) !important;
    z-index: 2 !important;
    transition: all 0.4s ease !important;
}

.gpa-faculty-card:hover .gpa-faculty-gradient-mask {
    background: linear-gradient(to bottom,
            rgba(15, 23, 42, 0.15) 0%,
            rgba(15, 23, 42, 0.45) 35%,
            rgba(15, 23, 42, 0.9) 75%,
            color-mix(in srgb, var(--theme-primary, #6f8b1b) 95%, #0f172a) 100%) !important;
}

/* Elegant CSS Fallback for Missing Avatar */
.gpa-faculty-img-wrapper img::after {
    content: "👤";
    font-size: 80px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    z-index: 3;
}

/* Content overlays directly on top of the image */
.gpa-faculty-content-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 24px 20px !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.gpa-faculty-card:hover .gpa-faculty-content-overlay {
    transform: translateY(-8px) !important;
}

/* Designation Badge floating on top of name (Hidden as requested) */
.fac-overlay-badge {
    display: none !important; /* Hides the orange designation badge completely */
}

.gpa-faculty-card:hover .fac-overlay-badge {
    background: var(--theme-accent, #ff9933) !important;
    color: #ffffff !important;
    border-color: var(--theme-accent, #ff9933) !important;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--theme-accent, #ff9933) 40%, transparent) !important;
}

/* Faculty Name overlay */
.fac-overlay-name {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 6px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important;
    letter-spacing: 0.3px !important;
}

.fac-overlay-name i {
    font-size: 14px !important;
    color: var(--theme-primary, #6f8b1b) !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    animation: verifyPulse 2.5s infinite ease-in-out;
}

@keyframes verifyPulse {

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

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

/* Department Name overlay */
.fac-overlay-dept {
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #e2e8f0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.35 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

.gpa-faculty-card:hover .fac-overlay-dept {
    color: #ffffff !important;
}

/* Academic Degree badge */
.fac-overlay-edu {
    font-family: 'Poppins', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #cbd5e1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

.fac-overlay-edu i {
    font-size: 10px !important;
    color: #cbd5e1 !important;
}

.gpa-faculty-card:hover .fac-overlay-edu {
    color: #cbd5e1 !important;
}

/* View Profile premium button — always visible */
.gpa-faculty-overlay-link {
    font-family: 'Poppins', sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin-top: 8px !important;
    padding: 5px 13px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #ff9933 0%, #e07a00 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3) !important;
}

.gpa-faculty-overlay-link i {
    font-size: 0.9rem !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.gpa-faculty-card:hover .gpa-faculty-overlay-link {
    opacity: 1;
    transform: translateY(0) !important;
}

.gpa-faculty-overlay-link:hover {
    background: linear-gradient(135deg, #e07a00 0%, #c96500 100%) !important;
    transform: scale(1.05) translateY(-2px) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(255, 153, 51, 0.5) !important;
}

.gpa-faculty-overlay-link:hover i {
    transform: translateX(3px) !important;
}

/* Green Accent Faculty Section Footer Block */
.gpa-meet-faculty-footer {
    background: linear-gradient(135deg,
            var(--theme-primary, #0b3c73) 0%,
            color-mix(in srgb, var(--theme-primary, #0b3c73) 80%, var(--theme-accent, #ff9933)) 100%) !important;
    color: #ffffff;
    border-radius: 24px !important;
    margin: 30px 15px 15px 15px !important;
    padding: 35px 20px !important;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 15px 35px color-mix(in srgb, var(--theme-primary, #0b3c73) 25%, transparent) !important;
    z-index: 1;
    backdrop-filter: blur(12px) !important;
}

/* Luxury glowing mesh ambient backdrops */
.gpa-meet-faculty-footer::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, color-mix(in srgb, var(--theme-accent, #ff9933) 40%, transparent) 0%, transparent 70%) !important;
    pointer-events: none;
    filter: blur(40px) !important;
    z-index: -1;
}

.gpa-meet-faculty-footer::after {
    content: '';
    position: absolute;
    bottom: -120px;
    right: -120px;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, color-mix(in srgb, var(--theme-primary, #0b3c73) 50%, transparent) 0%, transparent 70%) !important;
    pointer-events: none;
    filter: blur(50px) !important;
    z-index: -1;
}

.meet-faculty-text {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 850 !important;
    font-size: 1.65rem !important;
    letter-spacing: -0.5px !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
    margin-bottom: 20px !important;
}

.btn-view-teachers {
    background: #ffffff !important;
    color: var(--theme-primary, #0b3c73) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    padding: 12px 35px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 8px 25px color-mix(in srgb, var(--theme-primary, #0b3c73) 30%, transparent) !important;
    border: 2px solid #ffffff !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    z-index: 10;
}

.btn-view-teachers i {
    font-size: 1rem !important;
    transition: transform 0.3s ease !important;
}

.btn-view-teachers:hover {
    background: transparent !important;
    color: #ffffff !important;
    transform: scale(1.05) translateY(-3px) !important;
    box-shadow: 0 15px 30px color-mix(in srgb, var(--theme-accent, #ff9933) 35%, transparent) !important;
    border-color: #ffffff !important;
}

.btn-view-teachers:hover i {
    transform: translateX(5px) !important;
}

.btn-view-teachers:hover i {
    transform: translateX(5px);
}

/* 10B. Notices & Important Links Section */
.gpa-notices-links-section {
    background-color: #fafbf7;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.gpa-notice-board-card {
    background: #ffffff;
    border-radius: 16px !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-top: 4px solid var(--theme-primary, #6f8b1b);
    /* Theme-cohesive top highlight */
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gpa-notice-tabs {
    display: flex;
    background: #f8fafc;
    padding: 8px;
    gap: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.gpa-tab-btn {
    flex: 1;
    border: 2px solid transparent !important;
    background: var(--tab-color) !important;
    padding: 11px 16px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff !important;
    cursor: pointer;
    border-radius: 10px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 1 !important;
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04) !important;
}

.gpa-tab-btn i {
    font-size: 1rem;
    color: #ffffff !important;
    transition: transform 0.3s ease;
}

.gpa-tab-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--tab-color) 35%, transparent) !important;
}

.gpa-tab-btn:hover i {
    transform: scale(1.15) rotate(3deg);
}

.gpa-tab-btn.active {
    border: 2px solid #ffffff !important;
    font-weight: 850;
    box-shadow: 0 8px 25px color-mix(in srgb, var(--tab-color) 50%, transparent) !important;
    transform: scale(1.05) translateY(-2px) !important;
}

.gpa-tab-btn.active i {
    color: #ffffff !important;
}

.gpa-tab-content-wrapper {
    padding: 18px 24px;
    flex-grow: 1;
    min-height: 400px;
    position: relative;
}

.gpa-tab-pane {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.gpa-tab-pane.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.notice-list-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 390px;
    overflow-y: auto;
    padding-right: 6px;
}

/* Custom premium scrollbar for notice list container */
.notice-list-container::-webkit-scrollbar {
    width: 6px;
}
.notice-list-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 10px;
}
.notice-list-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    border: 1px solid transparent;
}
.notice-list-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}


.notice-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    background: #ffffff;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.notice-list-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(111, 139, 27, 0.06);
    border-color: rgba(111, 139, 27, 0.15);
    background: #fafbf9;
}

.notice-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.notice-icon-box {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.notice-list-item:hover .notice-icon-box {
    transform: scale(1.08) rotate(-5deg);
}

.notice-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notice-item-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--theme-primary-dark, #2c3e07);
    /* Dynamic dark theme accent */
    text-decoration: none !important;
    transition: color 0.3s ease;
    line-height: 1.35;
}

.notice-item-title:hover {
    color: var(--theme-primary, #6f8b1b);
}

.notice-item-date {
    font-family: 'Poppins', sans-serif;
    font-size: 0.68rem;
    font-weight: 550;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
}

.notice-item-date i {
    font-size: 0.72rem;
    color: #94a3b8;
}

.notice-item-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Pulsing NEW Badge */
@keyframes pulseBadge {
    0% {
        transform: scale(1);
        opacity: 0.95;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
        box-shadow: 0 0 12px rgba(2, 132, 199, 0.5);
    }

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

.notice-new-badge {
    background: #0284c7;
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 8px rgba(2, 132, 199, 0.3);
    animation: pulseBadge 2s infinite ease-in-out;
}

.notice-arrow-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 0.95rem;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.notice-list-item:hover .notice-arrow-btn {
    background: var(--theme-primary, #6f8b1b);
    color: #ffffff;
    border-color: var(--theme-primary, #6f8b1b);
    transform: translateX(3px) scale(1.05);
}

/* Card Footer and View All Button styling */
.gpa-notice-card-footer {
    padding: 10px 24px 16px 24px;
    background: #ffffff;
    display: flex;
    justify-content: flex-end;
    /* Pushes the button to the bottom-right corner! */
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.btn-view-all-notices {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(90deg, var(--theme-primary, #6f8b1b) 0%, var(--theme-accent, #ff9933) 100%) !important;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 11px 24px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 5px 15px color-mix(in srgb, var(--theme-primary, #6f8b1b) 30%, transparent) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    overflow: hidden;
}

.btn-view-all-notices i {
    font-size: 0.85rem !important;
    color: #ffffff !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-view-all-notices:hover {
    box-shadow: 0 8px 22px color-mix(in srgb, var(--theme-primary, #6f8b1b) 45%, transparent) !important;
    transform: translateY(-3px) !important;
}

.btn-view-all-notices:hover i {
    transform: translateX(4px) !important;
}

/* Important Links Card */
.gpa-links-card {
    background: #ffffff;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gpa-links-header {
    background: var(--theme-primary, #6f8b1b);
    color: #ffffff;
    padding: 14px 20px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 3px solid var(--theme-accent, #ff9933);
}

.gpa-links-header i {
    font-size: 1.25rem;
    color: #ffdf7e;
}

.gpa-links-list {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gpa-link-item {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--theme-primary-dark, #556c12);
    text-decoration: none !important;
    padding: 12px 10px;
    border-bottom: 1px dashed #e2e8f0;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 6px !important;
}

.gpa-link-item:last-child {
    border-bottom: none;
}

.gpa-link-item i {
    font-size: 0.75rem;
    color: #94a3b8;
    transition: transform 0.3s ease, color 0.3s ease;
}

.gpa-link-item:hover {
    background: color-mix(in srgb, var(--theme-primary, #6f8b1b) 5%, transparent);
    color: var(--theme-primary, #6f8b1b);
    transform: translateX(6px);
}

.gpa-link-item:hover i {
    transform: translateX(3px);
    color: var(--theme-primary, #6f8b1b);
}

/* E. Latest Images Section */
.gpa-latest-images {
    background-color: var(--theme-primary, #6f8b1b);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.gallery-icon-box {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-gallery-view-all {
    border: 2px solid #ffffff;
    background: transparent;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 20px;
    border-radius: 20px !important;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-gallery-view-all:hover {
    background: #ffffff;
    color: var(--theme-primary, #6f8b1b) !important;
    transform: translateY(-1px);
}

.gpa-gallery-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.gpa-gallery-item {
    border-radius: 12px !important;
    overflow: hidden;
    position: relative;
    height: 220px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.gpa-gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.gpa-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.gpa-gallery-item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    padding: 15px 12px;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

/* F. Placement Partners Section */
.gpa-placement-partners {
    background-color: var(--theme-primary-dark, #556c12);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.gpa-partners-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.gpa-partner-card {
    background: #ffffff;
    border-radius: 12px !important;
    padding: 18px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    height: 130px;
    position: relative;
    overflow: hidden;
}

.gpa-partner-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.25) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    transition: 0.75s;
    z-index: 5;
    pointer-events: none;
}

.gpa-partner-card:hover::before {
    left: 150%;
    transition: 0.75s;
}

.gpa-partner-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22);
    border-color: rgba(255, 255, 255, 0.3);
}

.gpa-partner-logo {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.logo-placeholder {
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
}

.logo-placeholder.blue-tint {
    color: #0284c7;
    font-size: 1.25rem;
    letter-spacing: 0.5px;
}

.logo-placeholder.gold-tint {
    color: #ff9933;
    font-size: 1.3rem;
}

.logo-placeholder.dark-tint {
    color: #1e293b;
    font-size: 1.15rem;
}

.logo-placeholder.red-tint {
    color: #dc2626;
    font-size: 1.2rem;
}

.logo-placeholder.teal-tint {
    color: #0d9488;
    font-size: 1.25rem;
}

.logo-placeholder.orange-tint {
    color: #ea580c;
    font-size: 1.25rem;
}

.logo-placeholder.purple-tint {
    color: #7c3aed;
    font-size: 1.25rem;
}

.gpa-partner-name {
    font-family: 'Poppins', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    color: #475569;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: color 0.3s ease;
}

.gpa-partner-card:hover .gpa-partner-name {
    color: var(--theme-primary, #6f8b1b);
}

.gpa-partner-name i {
    font-size: 0.65rem;
    color: #94a3b8;
}

.btn-view-partners {
    background: #ffffff;
    color: var(--theme-primary-dark, #556c12) !important;
    font-family: 'Poppins', sans-serif;
    font-size: 0.92rem;
    font-weight: 800;
    padding: 10px 30px;
    border-radius: 30px !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border: 2px solid #ffffff;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-view-partners:hover {
    background: transparent;
    color: #ffffff !important;
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

/* G. Premium Institutional Footer */
.gpa-main-footer {
    background-color: var(--theme-primary, #0b3c73);
    color: #ffffff;
    text-align: left !important;
    font-size: 14px !important;
    /* Locked base font size */
}

.gpa-footer-top {
    background-color: var(--theme-primary, #0b3c73);
    padding-top: 40px !important;
    /* Compact vertical padding */
    padding-bottom: 40px !important;
}

.footer-brand-column {
    text-align: left !important;
}

.footer-logo-wrapper {
    padding: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50% !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease;
}

.footer-logo-wrapper:hover {
    transform: rotate(360deg);
}

.footer-brand-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 16px !important;
    /* Premium brand title size */
    font-weight: 900 !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
}

.footer-brand-subtitle {
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    /* Premium brand subtitle size */
    font-weight: 700 !important;
    color: #ffdf7e !important;
}

.footer-col-title {
    font-family: 'Outfit', sans-serif;
    font-size: 13px !important;
    /* Balanced, sleek column header size */
    font-weight: 850 !important;
    letter-spacing: 0.8px !important;
    margin-bottom: 22px;
    color: #ffffff;
    border-bottom: 2px solid #ff9933;
    display: inline-block;
    padding-bottom: 6px;
    text-align: left !important;
}

.footer-links-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left !important;
    align-items: flex-start !important;
}

.footer-link {
    font-family: 'Poppins', sans-serif;
    font-size: 12.8px !important;
    /* Crisp, perfectly readable links */
    font-weight: 550 !important;
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none !important;
    display: flex !important;
    align-items: flex-start !important;
    /* Align icon with the first line of wrapped text! */
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
}

.footer-link:hover {
    color: #ffdf7e !important;
    transform: translateX(6px);
}

.footer-link i {
    font-size: 0.95rem;
    opacity: 0.75;
    margin-top: 2px;
    /* Vertical align with text first line */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

.footer-link:hover i {
    transform: scale(1.15) rotate(15deg);
    opacity: 1;
    color: #ffdf7e;
}

@media (min-width: 993px) {
    .footer-nav-column {
        border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
        padding-left: 30px !important;
    }
}

.gpa-bottom-bar {
    background-color: var(--theme-primary-dark, #062b54);
    border-top: 5px solid var(--theme-accent, #ff9933);
    /* Theme Accent separator border */
    text-align: left !important;
    padding-top: 12px !important;
    /* Compact copyright bar padding */
    padding-bottom: 12px !important;
}

.footer-copyright-text {
    white-space: nowrap !important;
}

.footer-visitors-badge {
    white-space: nowrap !important;
}

@media (max-width: 991px) {
    .footer-copyright-text {
        white-space: normal !important;
        line-height: 1.65 !important;
        font-size: 0.8rem !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    .footer-visitors-badge {
        white-space: normal !important;
        line-height: 1.65 !important;
        font-size: 0.8rem !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
}

.footer-social-icons .social-icon {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff !important;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-social-icons .social-icon:hover {
    background: #ffffff;
    color: var(--theme-primary-dark, #062b54) !important;
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* Scroll to top interactive button */
.btn-scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 46px;
    height: 46px;
    border-radius: 50% !important;
    background-color: var(--theme-accent, #ff9933);
    color: #ffffff;
    border: 2px solid #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 999;
}

.btn-scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.btn-scroll-top:hover {
    background-color: #ffffff;
    color: var(--theme-primary, #6f8b1b);
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    border-color: #ffffff;
}

/* D. Custom Responsiveness for Custom Sections */
@media (max-width: 1200px) {
    .gpa-portals-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .gpa-faculty-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .gpa-gallery-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }

    .gpa-partners-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .gpa-welcome-heading {
        font-size: 1.7rem;
    }
}

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

    .gpa-faculty-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .gpa-gallery-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .gpa-partners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .gpa-leader-grid {
        gap: 16px;
    }

    .meet-faculty-text {
        font-size: 1.15rem;
    }
}

@media (max-width: 576px) {
    .gpa-portals-grid {
        grid-template-columns: 1fr;
    }

    .gpa-faculty-grid {
        grid-template-columns: 1fr;
    }



    .gpa-gallery-grid-4 {
        grid-template-columns: 1fr;
    }

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

/* ==========================================
   16. MODERN LUXURY LIGHTBOX MODAL STYLES
   ========================================== */

@keyframes nebulaBreath1 {
    0% {
        transform: translate(-10%, -10%) scale(1) rotate(0deg);
        opacity: 0.25;
    }

    50% {
        transform: translate(-5%, -5%) scale(1.15) rotate(180deg);
        opacity: 0.4;
    }

    100% {
        transform: translate(-10%, -10%) scale(1) rotate(360deg);
        opacity: 0.25;
    }
}

@keyframes nebulaBreath2 {
    0% {
        transform: translate(10%, 10%) scale(1.1) rotate(360deg);
        opacity: 0.2;
    }

    50% {
        transform: translate(5%, 5%) scale(0.9) rotate(180deg);
        opacity: 0.35;
    }

    100% {
        transform: translate(10%, 10%) scale(1.1) rotate(0deg);
        opacity: 0.2;
    }
}

.gpa-lightbox-modal {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #060903 0%, #010201 100%);
    /* Deep space backdrop */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Breathing Purple Nebula Gas Cloud - Deep Background Layer */
.gpa-lightbox-modal::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -20%;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(106, 27, 154, 0.35) 0%, transparent 70%);
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
    animation: nebulaBreath1 25s infinite alternate ease-in-out;
}

/* Breathing Cyan Nebula Gas Cloud - Deep Background Layer */
.gpa-lightbox-modal::after {
    content: "";
    position: absolute;
    bottom: -20%;
    right: -20%;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(0, 137, 123, 0.25) 0%, transparent 70%);
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
    animation: nebulaBreath2 30s infinite alternate ease-in-out;
}

.gpa-lightbox-modal.active {
    opacity: 1;
    visibility: visible;
}

.gpa-lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #ffffff;
    font-size: 38px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 10002;
}


.gpa-lightbox-close:hover {
    background: #ffffff;
    color: #111111;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.25);
}

.gpa-lightbox-content-container {
    max-width: 95%;
    max-height: 92%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
    position: relative;
    z-index: 10;
}

.gpa-lightbox-modal.active .gpa-lightbox-content-container {
    transform: scale(1);
    opacity: 1;
}

.gpa-lightbox-media-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}


.gpa-lightbox-img {
    max-width: 90vw;
    max-height: 85vh;
    /* Massive, ultra-large display height! */
    object-fit: contain;
    border-radius: 12px;
    border: none !important;
    /* Completely clean, no direct gold borders */
    outline: none !important;
    /* Completely clean, no trace outlines */
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
    /* Standard deep shadow for separation */
    display: block;
    cursor: grab;
    will-change: transform;
    position: relative;
    z-index: 5;
    /* Stack cleanly above the glow effect back-flare! */
}

.gpa-lightbox-fallback-badge {
    width: 220px;
    height: 220px;
    border-radius: 24px !important;
    background: linear-gradient(135deg, var(--theme-primary, #6f8b1b) 0%, var(--theme-primary-dark, #3e4f0d) 100%);
    border: 4px solid #ffffff;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.gpa-lightbox-fallback-badge span {
    font-family: 'Outfit', sans-serif;
    font-size: 3.8rem;
    font-weight: 850;
    letter-spacing: 1px;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    color: #ffffff;
}

.gpa-lightbox-caption {
    margin-top: 24px;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    text-align: center;
    background: rgba(255, 255, 255, 0.08) !important;
    padding: 8px 32px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    /* Simple clean white capsule border */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Hover Zoom Magnify Overlay Triggers */
.gpa-gallery-item,
.gpa-partner-card {
    cursor: pointer !important;
}

.gpa-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.gpa-gallery-item img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.gpa-gallery-item:hover img {
    transform: scale(1.1) !important;
}

.gpa-gallery-item-overlay {
    display: none !important;
    /* Completely disabled so no shadow, text, or icons cover the image! */
}

/* Placement Partner hover enhancements */
.gpa-partner-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.gpa-partner-card:hover {
    transform: translateY(-8px) scale(1.04) !important;
    box-shadow: 0 15px 30px rgba(255, 153, 51, 0.18) !important;
    border-color: var(--theme-accent, #ff9933) !important;
}

/* ==========================================
   14. PREMIUM EXECUTIVE SUBPAGE LAYOUT SYSTEM
   ========================================== */
.affiliation-container,
.gps-contact-section,
.gps-gallery-content,
.grievance-section {
    background-color: #f8fafc !important;
    background-image: radial-gradient(rgba(15, 23, 42, 0.03) 1.2px, transparent 1.2px) !important;
    background-size: 24px 24px !important;
    padding-top: 65px !important;
    padding-bottom: 95px !important;
    min-height: 55vh !important;
    /* Forces layout stretch to keep footer beautifully compact at the bottom */
}

/* Floating Glassmorphic Breadcrumbs */
.breadcrumb-custom {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    padding: 10px 24px !important;
    border-radius: 100px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 35px !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03) !important;
    font-size: 13.5px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
}

.breadcrumb-custom a {
    color: var(--theme-primary, #0b3c73) !important;
    transition: color 0.2s ease !important;
    text-decoration: none !important;
}

.breadcrumb-custom a:hover {
    color: var(--theme-accent, #ff9933) !important;
}

.breadcrumb-custom span.sep {
    color: #94a3b8 !important;
}

.breadcrumb-custom span.curr {
    color: #64748b !important;
}

/* Sidebar Nav Box Executive upgrade */
.sidebar-box {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sidebar-box:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.06) !important;
}

.sidebar-header {
    background: linear-gradient(135deg, var(--theme-primary, #0b3c73) 0%, var(--theme-primary-dark, #062b54) 100%) !important;
    padding: 22px 26px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 19px !important;
    font-weight: 850 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border-bottom: none !important;
    color: #ffffff !important;
}

.sidebar-list a {
    padding: 16px 26px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: block !important;
    text-decoration: none !important;
    position: relative !important;
}

.sidebar-list li:last-child a {
    border-bottom: none !important;
}

.sidebar-list a::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 6px;
    height: 6px;
    background-color: var(--theme-accent, #ff9933);
    border-radius: 50%;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sidebar-list a:hover {
    background-color: rgba(11, 60, 115, 0.02) !important;
    color: var(--theme-accent, #ff9933) !important;
    padding-left: 32px !important;
}

.sidebar-list a:hover::before {
    transform: translateY(-50%) scale(1);
}

.sidebar-list a.active {
    background: linear-gradient(135deg, var(--theme-primary, #0b3c73) 0%, var(--theme-primary-dark, #062b54) 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: inset -5px 0 0 var(--theme-accent, #ff9933) !important;
}

.sidebar-list a.active::before {
    display: none !important;
}

/* Premium Content Headers */
.content-header-box {
    background: #ffffff !important;
    padding: 26px 34px !important;
    border-left: 6px solid var(--theme-accent, #ff9933) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.02) !important;
    border: 1px solid rgba(15, 23, 42, 0.05) !important;
    margin-bottom: 40px !important;
}

.content-header-box h2 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 850 !important;
    font-size: 32px !important;
    color: #0f172a !important;
    letter-spacing: -0.5px !important;
}

/* Dynamic Filter Tabs */
.filter-tab {
    background: #ffffff !important;
    border: 1.5px solid rgba(15, 23, 42, 0.08) !important;
    color: #475569 !important;
    padding: 11px 26px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border-radius: 100px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.filter-tab:hover {
    color: var(--theme-accent, #ff9933) !important;
    border-color: var(--theme-accent, #ff9933) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05) !important;
}

.filter-tab.active {
    background: linear-gradient(135deg, var(--theme-primary, #0b3c73) 0%, var(--theme-primary-dark, #062b54) 100%) !important;
    color: #ffffff !important;
    border-color: var(--theme-primary, #0b3c73) !important;
    box-shadow: 0 8px 25px rgba(11, 60, 115, 0.25) !important;
    transform: translateY(-3px) !important;
}

/* Dynamic Document list styles - Premium modern UI */
.docs-header-bar, .docs-bar {
    background: linear-gradient(135deg, var(--theme-primary, #003b61) 0%, color-mix(in srgb, var(--theme-primary, #003b61) 82%, #000) 100%) !important;
    padding: 16px 24px !important;
    border-radius: 14px 14px 0 0 !important;
    margin-bottom: 0 !important;
    box-shadow: 0 8px 20px rgba(0, 59, 97, 0.12) !important;
    border-bottom: 3.5px solid var(--theme-accent, #ff9933) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    gap: 15px !important;
}

.docs-header-bar::before, .docs-bar::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 140%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.docs-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    z-index: 1 !important;
}

.docs-header-icon {
    width: 42px !important;
    height: 42px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--theme-accent, #ff9933) !important;
    font-size: 20px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    flex-shrink: 0 !important;
}

.docs-header-title-wrap {
    display: flex !important;
    flex-direction: column !important;
}

.docs-header-title {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 17.5px !important;
    font-weight: 700 !important;
    font-family: 'Outfit', 'Poppins', sans-serif !important;
    letter-spacing: 0.3px !important;
    line-height: 1.3 !important;
}

.docs-header-subtitle {
    margin: 2px 0 0 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

.docs-header-right {
    z-index: 1 !important;
    flex-shrink: 0 !important;
}

.docs-count-pill {
    background: rgba(255, 153, 51, 0.15) !important;
    color: var(--theme-accent, #ff9933) !important;
    border: 1px solid rgba(255, 153, 51, 0.3) !important;
    padding: 5px 13px !important;
    border-radius: 50px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.doc-list, .doc-list-premium {
    padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: none !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04) !important;
    margin-bottom: 30px !important;
    overflow: hidden !important;
}

.doc-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 24px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    background: #ffffff !important;
    gap: 16px !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.doc-item:last-child {
    border-bottom: none !important;
}

.doc-item::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 4.5px !important;
    background: var(--theme-accent, #ff9933) !important;
    transform: scaleY(0) !important;
    transition: transform 0.25s ease !important;
}

.doc-item:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05) !important;
    border-color: rgba(11, 60, 115, 0.15) !important;
}

.doc-title {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #1e293b !important;
    transition: color 0.2s ease !important;
}

.doc-item:hover .doc-title {
    color: var(--theme-accent, #ff9933) !important;
}

.doc-link-wrap {
    background: rgba(11, 60, 115, 0.05) !important;
    color: var(--theme-primary, #0b3c73) !important;
    padding: 9px 20px !important;
    border-radius: 100px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
}

.doc-item:hover .doc-link-wrap {
    background: var(--theme-primary, #0b3c73) !important;
    color: #ffffff !important;
}

/* Grievance & Form Card Overhaul */
.grievance-card,
.gps-contact-info-card,
.gps-contact-form-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 15px 45px rgba(15, 23, 42, 0.03) !important;
    border: 1px solid rgba(15, 23, 42, 0.05) !important;
    padding: 45px !important;
}

.gps-contact-input,
.form-control,
.form-select,
textarea {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 13px 18px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14.5px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    outline: none !important;
}

.gps-contact-input:focus,
.form-control:focus,
.form-select:focus,
textarea:focus {
    border-color: var(--theme-accent, #ff9933) !important;
    box-shadow: 0 0 0 4px rgba(255, 153, 51, 0.12) !important;
}

.gps-contact-submit,
.btn-primary {
    background: linear-gradient(135deg, var(--theme-primary, #0b3c73) 0%, var(--theme-primary-dark, #062b54) 100%) !important;
    border: none !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15.5px !important;
    padding: 14px 32px !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 25px rgba(11, 60, 115, 0.15) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.gps-contact-submit:hover,
.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px rgba(11, 60, 115, 0.25) !important;
}

/* ==========================================
   15. PRINCIPAL MESSAGE EXTREME UPGRADE
   ========================================== */
.principal-photo-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: 20px !important;
    padding: 15px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.02) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.principal-photo-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08) !important;
    border-color: var(--theme-accent, #ff9933) !important;
}

.principal-photo-frame {
    border-radius: 14px !important;
    overflow: hidden !important;
}

.regards-card {
    border: 1px solid rgba(15, 23, 42, 0.05) !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.02) !important;
    padding: 25px !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.regards-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08) !important;
    border-color: var(--theme-accent, #ff9933) !important;
}

.regards-title {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    color: #64748b !important;
    font-size: 18px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
}

.regards-name {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 850 !important;
    color: #0f172a !important;
    font-size: 20px !important;
    margin-bottom: 8px !important;
}

.regards-post {
    font-family: 'Poppins', sans-serif !important;
    color: #475569 !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    margin-bottom: 20px !important;
}

.btn-view-profile {
    background: linear-gradient(135deg, var(--theme-primary, #0b3c73) 0%, var(--theme-primary-dark, #062b54) 100%) !important;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 750 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border-radius: 30px !important;
    padding: 8px 20px !important;
    box-shadow: 0 4px 12px rgba(11, 60, 115, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    margin: 12px auto 0 auto !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Beautiful dynamic sheen shine sweep on button hover */
.btn-view-profile::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: -100% !important;
    width: 50% !important; height: 100% !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100%) !important;
    transform: skewX(-25deg) !important;
    transition: none !important;
}

.btn-view-profile:hover::before {
    left: 150% !important;
    transition: left 0.8s ease-in-out !important;
}

.btn-view-profile:hover {
    background: linear-gradient(135deg, #ff9933 0%, #f26522 100%) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-3px) scale(1.04) !important;
    box-shadow: 0 8px 20px rgba(242, 101, 34, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.btn-view-profile i {
    font-size: 1.05rem !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-view-profile:hover i {
    transform: translateX(4px) !important;
}

.message-card-wrapper {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.05) !important;
    border-radius: 20px !important;
    padding: 45px !important;
    box-shadow: 0 15px 45px rgba(15, 23, 42, 0.03) !important;
    position: relative !important;
}

.message-content {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 15.5px !important;
    line-height: 1.95 !important;
    color: #334155 !important;
}

/* =========================================================================
   MOBILE HEADER STYLE-30 ENHANCEMENT & OPTIMIZATION (STUNNING MOBILE VIEW)
   ========================================================================= */
@media (max-width: 768px) {
    .header-container.style-30 {
        padding: 24px 16px 28px 16px !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
    }

    .gpa-hero-merged-container .header-container.style-30 {
        order: 1 !important;
    }

    .gpa-hero-merged-container .gpa-main-navbar {
        order: 2 !important;
    }

    .gpa-hero-merged-container .gpa-hero-slider {
        order: 3 !important;
    }

    .content-card-wrapper {
        padding: 18px !important;
        text-align: justify !important;
    }

    .header-container.style-30 .logo-wrapper {
        width: 74px !important;
        height: 74px !important;
        margin: 0 auto !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
        border-radius: 50% !important;
        border: 2.5px solid var(--theme-accent, #ff9933) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .header-container.style-30 .header-text-container {
        max-width: 100% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    .header-container.style-30 .header-title-main {
        font-size: 1.28rem !important;
        line-height: 1.25 !important;
        text-align: center !important;
        margin: 0 0 6px 0 !important;
        letter-spacing: 0.3px !important;
        font-weight: 800 !important;
        display: block !important;
    }

    .header-container.style-30 .header-title-main span.gpa-highlight-gold {
        display: block !important;
        margin-top: 4px !important;
        font-size: 1.45rem !important;
        font-weight: 850 !important;
    }

    .header-container.style-30 .header-subtitle-school {
        font-size: 0.74rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
        max-width: 92% !important;
        margin: 4px auto 0 auto !important;
        color: rgba(255, 255, 255, 0.85) !important;
        font-weight: 600 !important;
        display: inline-block !important;
        padding: 6px 14px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 30px !important;
        letter-spacing: 0.2px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    }
}

/* =========================================================================
   16. NOTICE, TENDER, PLACEMENT & AWARDS MOBILE PREMIUM OVERHAUL
   ========================================================================= */
@media (max-width: 768px) {

    /* 2x2 Grid for Notice Tabs - highly compact & tap-friendly */
    .gpa-notice-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 8px !important;
        background: #f1f5f9 !important;
        border-radius: 12px !important;
        margin: 10px !important;
    }

    .gpa-tab-btn {
        padding: 10px 8px !important;
        font-size: 0.82rem !important;
        border-radius: 8px !important;
        justify-content: center !important;
        gap: 6px !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
        border: 1px solid color-mix(in srgb, var(--tab-color) 15%, transparent) !important;
        background: color-mix(in srgb, var(--tab-color) 8%, #ffffff) !important;
        color: var(--tab-color) !important;
        flex: none !important;
        /* Disables the desktop flex sizing */
    }

    .gpa-tab-btn i {
        color: var(--tab-color) !important;
    }

    .gpa-tab-btn.active {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
        border: 1px solid var(--tab-color) !important;
        color: #ffffff !important;
        background: var(--tab-color) !important;
    }

    .gpa-tab-btn.active i {
        color: #ffffff !important;
    }

    /* Content wrapper adjustments for mobile spacing */
    .gpa-tab-content-wrapper {
        padding: 12px 10px !important;
        min-height: auto !important;
    }

    /* Notice item card overhaul on mobile screen width */
    .notice-list-item {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 14px 16px !important;
        gap: 10px !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
    }

    .notice-list-item:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05) !important;
    }

    .notice-item-left {
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .notice-icon-box {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
        margin: 0 !important;
    }

    .notice-details {
        gap: 4px !important;
        text-align: left !important;
    }

    .notice-item-title {
        font-size: 0.86rem !important;
        line-height: 1.45 !important;
        font-weight: 700 !important;
        color: #1e293b !important;
        display: block !important;
    }

    .notice-item-date {
        font-size: 0.72rem !important;
        color: #64748b !important;
        margin-top: 2px !important;
    }

    /* Right column badges & button placement */
    .notice-item-right {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-top: 1px solid #f1f5f9 !important;
        padding-top: 8px !important;
        margin-top: 2px !important;
        width: 100% !important;
    }

    .notice-new-badge {
        font-size: 0.65rem !important;
        padding: 3px 8px !important;
        letter-spacing: 0.5px !important;
    }

    .notice-arrow-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 1.05rem !important;
        background: #f8fafc !important;
        border-color: #e2e8f0 !important;
        margin-left: auto !important;
        /* Pushes to the right end of the line */
    }
}

/* =========================================================================
   17. MOBILE NAVBAR - LEFT ALIGN ALL MENU ITEMS
   ========================================================================= */
@media (max-width: 991px) {
    #gpaMainNav .navbar-nav {
        align-items: flex-start !important;
        width: 100% !important;
        padding: 6px 0 !important;
    }

    #gpaMainNav .nav-item {
        width: 100% !important;
        text-align: left !important;
    }

    #gpaMainNav .nav-link {
        text-align: left !important;
        justify-content: flex-start !important;
        padding: 10px 14px !important;
    }

    #gpaMainNav .dropdown-menu {
        text-align: left !important;
    }

    #gpaMainNav .dropdown-item {
        text-align: left !important;
    }
}

/* =========================================================================
   18. PREMIUM LIGHTBOX CATEGORY BADGE STYLING (GLIGHTBOX)
   ========================================================================= */
.gslide-caption {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    border-top: 2.5px solid var(--main-color, var(--theme-accent, #ff9933)) !important;
    padding: 16px 20px !important;
    border-radius: 0 0 16px 16px !important;
    text-align: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
}

.gslide-title {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(15, 23, 42, 0.5) !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    padding: 7px 18px !important;
    border-radius: 50px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35), 0 0 12px rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    margin: 6px auto !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.1) !important;
    animation: gpaLightboxBadgeFloatIn 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important;
}

.gslide-title::before {
    content: "📁" !important;
    margin-right: 8px !important;
    font-size: 13.5px !important;
    filter: drop-shadow(0 0 5px var(--main-color, var(--theme-accent, #ff9933))) !important;
}

@keyframes gpaLightboxBadgeFloatIn {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.92);
    }

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

/* =========================================================================
   19. DYNAMIC THEME-COLOR OVERRIDES FOR LIGHTBOXES (GLIGHTBOX & CUSTOM)
   ========================================================================= */
.glightbox-container .gslide-description,
.glightbox-container .gdesc-inner,
.glightbox-container .gslide-caption {
    background: var(--main-color, var(--theme-primary, #0b3c73)) !important;
}

/* =========================================================================
   20. PREMIUM INTERACTIVE SMARTPHONE SOCIAL MEDIA PREVIEW
   ========================================================================= */
.gpa-phone-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
}

.gpa-phone-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: opacity 0.5s ease;
    opacity: 0;
}

.gpa-phone-modal.active .gpa-phone-modal-backdrop {
    opacity: 1;
}

.gpa-phone-wrapper {
    position: relative;
    z-index: 2;
    transform: scale(0.85) translateY(50px) rotateX(12deg);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
}

.gpa-phone-modal.active .gpa-phone-wrapper {
    transform: scale(1) translateY(0) rotateX(0deg);
    opacity: 1;
}

/* Highly Detailed Smartphone Frame (iPhone 15 Pro Max style) */
.gpa-smartphone {
    position: relative;
    width: 385px;
    height: 760px;
    background: #090d16;
    border-radius: 50px;
    border: 12px solid #22252a; /* Metallic bezel frame */
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.6), 
                0 0 0 3px rgba(255, 255, 255, 0.08),
                inset 0 0 15px rgba(255, 255, 255, 0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Subtle outer camera bump shadows/highlights */
.gpa-smartphone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 38px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    pointer-events: none;
    z-index: 10;
}

/* Dynamic Island */
.gpa-dynamic-island {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 28px;
    background: #000000;
    border-radius: 20px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.gpa-dynamic-island:hover {
    width: 140px;
    height: 32px;
}

.gpa-camera {
    width: 9px;
    height: 9px;
    background: radial-gradient(circle, #0e1e38 20%, #030a1c 80%);
    border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.4);
}

.gpa-speaker {
    width: 45px;
    height: 3px;
    background: #111;
    border-radius: 20px;
}

/* Status Bar */
.gpa-phone-status-bar {
    height: 48px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 32px 6px 32px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    z-index: 90;
    background: transparent;
    pointer-events: none;
}

.phone-status-icons {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Inner Screen Content */
.gpa-phone-screen {
    flex: 1;
    position: relative;
    background: #0f172a;
    border-radius: 38px;
    margin: 4px;
    overflow: hidden;
}

.gpa-phone-screen-content {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none; /* hide scrollbars */
}

.gpa-phone-screen-content::-webkit-scrollbar {
    display: none;
}

/* Loader */
.gpa-phone-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 80;
    transition: opacity 0.3s ease;
}

/* Home Indicator Bar */
.gpa-phone-home-bar {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 5px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    z-index: 100;
    pointer-events: none;
}

/* Close Button styling on the outside */
.gpa-phone-close-btn {
    position: absolute;
    top: -20px;
    right: -70px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.gpa-phone-close-btn:hover {
    background: var(--main-color, var(--theme-primary, #0b3c73));
    border-color: var(--main-color, var(--theme-primary, #0b3c73));
    transform: rotate(90deg) scale(1.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

@media (max-width: 991px) {
    .gpa-smartphone {
        width: 320px;
        height: 620px;
    }
    .gpa-phone-close-btn {
        top: auto;
        bottom: -70px;
        right: 50%;
        transform: translateX(50%);
    }
    .gpa-phone-close-btn:hover {
        transform: translateX(50%) rotate(90deg);
    }
}

/* APP STYLES INSIDE SMARTPHONE */

/* 1. YOUTUBE APP STYLE MOCKUP */
.yt-app-wrapper {
    background: #0f0f0f;
    color: #ffffff;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.yt-header {
    height: 44px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #282828;
}

.yt-logo {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.yt-logo i {
    color: #ff0000;
    font-size: 22px;
}

.yt-video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background: #000;
}

.yt-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.yt-video-details {
    padding: 14px;
}

.yt-video-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
}

.yt-video-views {
    font-size: 11.5px;
    color: #aaaaaa;
    margin-bottom: 14px;
}

.yt-channel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.yt-channel-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.yt-channel-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(255,255,255,0.1);
}

.yt-channel-name {
    font-size: 13.5px;
    font-weight: 700;
}

.yt-channel-subs {
    font-size: 11px;
    color: #aaaaaa;
}

.yt-sub-btn {
    background: #ffffff;
    color: #000000;
    border: none;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.yt-actions-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
}

.yt-action-pill {
    background: #272727;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* 2. INSTAGRAM APP STYLE MOCKUP */
.ig-app-wrapper {
    background: #000000;
    color: #ffffff;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.ig-header {
    height: 44px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #1a1a1a;
}

.ig-logo {
    font-family: 'Outfit', sans-serif;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -0.3px;
    background: linear-gradient(45deg, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ig-profile-header {
    padding: 16px 16px 8px 16px;
}

.ig-profile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.ig-profile-avatar-wrap {
    position: relative;
    padding: 3px;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-radius: 50%;
}

.ig-profile-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #000;
}

.ig-stat-col {
    text-align: center;
}

.ig-stat-val {
    font-size: 15px;
    font-weight: 700;
}

.ig-stat-lbl {
    font-size: 11px;
    color: #a8a8a8;
}

.ig-profile-bio {
    font-size: 12.5px;
    line-height: 1.4;
    margin-bottom: 14px;
}

.ig-profile-bio-name {
    font-weight: 700;
}

.ig-profile-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.ig-btn {
    flex: 1;
    background: #1c1c1e;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 7px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.ig-btn-primary {
    background: #0095f6;
}

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

.ig-grid-item {
    position: relative;
    width: 100%;
    padding-top: 100%; /* square ratio */
    background: #111;
    overflow: hidden;
}

.ig-grid-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ig-grid-item:hover img {
    transform: scale(1.06);
}

/* 3. WHATSAPP APP STYLE MOCKUP */
.wa-app-wrapper {
    background: #0b141a;
    color: #e9edef;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.wa-header {
    height: 52px;
    background: #202c33;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.wa-header i.back {
    color: #8696a0;
    font-size: 18px;
}

.wa-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #fff;
}

.wa-user-info {
    flex: 1;
}

.wa-username {
    font-size: 14.5px;
    font-weight: 700;
}

.wa-status {
    font-size: 11px;
    color: #00a884; /* green online indicator */
    font-weight: 500;
}

.wa-chat-area {
    flex: 1;
    padding: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wa-chat-bubble {
    position: relative;
    z-index: 2;
    max-width: 80%;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.4;
    word-wrap: break-word;
}

.wa-bubble-received {
    background: #202c33;
    align-self: flex-start;
    border-top-left-radius: 0;
}

.wa-bubble-sent {
    background: #005c4b;
    align-self: flex-end;
    border-top-right-radius: 0;
}

.wa-bubble-time {
    display: block;
    text-align: right;
    font-size: 9.5px;
    color: #8696a0;
    margin-top: 4px;
}

.wa-input-row {
    position: relative;
    z-index: 2;
    height: 54px;
    background: #202c33;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.wa-input-pill {
    flex: 1;
    background: #2a3942;
    border-radius: 20px;
    height: 38px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    color: #8696a0;
    font-size: 13px;
}

.wa-send-btn {
    width: 38px;
    height: 38px;
    background: #00a884;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
}

/* =============================================
   CLEAN & PROFESSIONAL REDESIGN STYLES
   ============================================= */
.redesign-hero-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 5px solid var(--theme-primary, #0b3c73);
    border-radius: 12px;
    padding: 24px 28px;
    color: #1e293b;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    margin-bottom: 22px;
}

.redesign-grid-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 22px 24px;
    margin-bottom: 22px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.redesign-grid-card:hover {
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05) !important;
    border-color: #cbd5e1;
}

.header-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(11, 60, 115, 0.07);
    color: var(--theme-primary, #0b3c73);
    border: 1px solid rgba(11, 60, 115, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.feature-item-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 3px solid var(--theme-primary, #0b3c73);
    border-radius: 10px;
    padding: 16px 18px;
    transition: all 0.2s ease;
    height: 100%;
}

.feature-item-card:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    border-left-color: var(--theme-accent, #ff9933);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.feature-icon-badge {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

/* Cool Modern Link Pill */
.cool-link-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 14px !important;
    background: #f0f7ff !important;
    color: #0284c7 !important;
    border: 1px solid #bae6fd !important;
    border-radius: 50px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    vertical-align: middle !important;
    margin: 2px 4px !important;
    box-shadow: 0 1px 2px rgba(2, 132, 199, 0.05) !important;
}

.cool-link-pill:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25) !important;
    transform: translateY(-1.5px) scale(1.02) !important;
}

/* 🏆 EXECUTIVE ACADEMIC & AWARD SHOWCASE UI */
.award-hero-card {
    background: linear-gradient(135deg, #0b3c73 0%, #1e3a8a 50%, #0f172a 100%) !important;
    border-radius: 16px !important;
    padding: 32px 28px !important;
    color: #ffffff !important;
    box-shadow: 0 15px 35px rgba(11, 60, 115, 0.25) !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 25px !important;
}
.award-hero-card::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -10% !important;
    width: 280px !important;
    height: 280px !important;
    background: radial-gradient(circle, rgba(255,153,51,0.25) 0%, rgba(255,255,255,0) 70%) !important;
    border-radius: 50% !important;
}
.award-hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255, 153, 51, 0.2) !important;
    color: #ff9933 !important;
    border: 1px solid rgba(255, 153, 51, 0.4) !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}
.award-card-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 25px !important;
}
.award-feature-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 24px 22px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    position: relative !important;
    overflow: hidden !important;
    border-top: 4px solid var(--card-accent, #ff9933) !important;
}
.award-feature-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.1) !important;
    border-color: #cbd5e1 !important;
}
.award-icon-box {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    margin-bottom: 16px !important;
    flex-shrink: 0 !important;
}
.award-card-title {
    font-weight: 800 !important;
    font-size: 17px !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.award-card-text {
    font-size: 14.5px !important;
    color: #475569 !important;
    line-height: 1.75 !important;
}

/* 🎯 EXECUTIVE OUTCOME-BASED EDUCATION (OBE) SHOWCASE UI */
.obe-hero-card {
    background: linear-gradient(135deg, #065f46 0%, #047857 50%, #0f172a 100%) !important;
    border-radius: 16px !important;
    padding: 32px 28px !important;
    color: #ffffff !important;
    box-shadow: 0 15px 35px rgba(6, 95, 70, 0.25) !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 25px !important;
}
.obe-hero-card::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -10% !important;
    width: 280px !important;
    height: 280px !important;
    background: radial-gradient(circle, rgba(16,185,129,0.25) 0%, rgba(255,255,255,0) 70%) !important;
    border-radius: 50% !important;
}
.obe-hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    border: 1px solid rgba(52, 211, 153, 0.4) !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}
.obe-card-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 25px !important;
}
.obe-feature-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 24px 22px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    position: relative !important;
    overflow: hidden !important;
    border-top: 4px solid var(--obe-accent, #10b981) !important;
}
.obe-feature-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.1) !important;
    border-color: #cbd5e1 !important;
}
.obe-icon-box {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    margin-bottom: 16px !important;
    flex-shrink: 0 !important;
}
.obe-card-title {
    font-weight: 800 !important;
    font-size: 17px !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
}
.obe-card-text {
    font-size: 14.5px !important;
    color: #475569 !important;
    line-height: 1.75 !important;
}

/* 🏛️ ULTRA-PROFESSIONAL EXECUTIVE ACADEMIC DESIGN SYSTEM */
.pro-content-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 22px 24px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    border-left: 5px solid var(--pro-card-accent, #0b3c73) !important;
}

.pro-content-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
    border-color: #cbd5e1 !important;
}

.pro-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.pro-card-icon-badge {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: var(--pro-icon-bg, #f0f7ff) !important;
    color: var(--pro-icon-color, #0284c7) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px !important;
    flex-shrink: 0 !important;
}

.pro-card-title {
    font-family: 'Outfit', 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: 17px !important;
    color: #0f172a !important;
    margin: 0 !important;
}

.pro-card-body {
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    color: #334155 !important;
    line-height: 1.8 !important;
}

/* Overview Banner Card */
.pro-overview-hero {
    background: linear-gradient(135deg, #0b3c73 0%, #1e3a8a 100%) !important;
    border-radius: 14px !important;
    padding: 24px 26px !important;
    color: #ffffff !important;
    margin-bottom: 24px !important;
    box-shadow: 0 10px 25px rgba(11, 60, 115, 0.2) !important;
    border-left: 5px solid #ff9933 !important;
}

.pro-overview-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    padding: 4px 12px !important;
    border-radius: 50px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
}

/* 🚀 ADVANCED LEVEL CYBER-GLASS EXECUTIVE ACADEMIC DESIGN SYSTEM */
@keyframes advParticlePulse {
    0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.3; }
    50% { transform: scale(1.25) translate(-15px, 15px); opacity: 0.6; }
}

@keyframes advBorderShimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.adv-hero-banner {
    background: linear-gradient(135deg, #091e3a 0%, #112a52 50%, #1a3668 100%) !important;
    border-radius: 18px !important;
    padding: 32px 30px !important;
    color: #ffffff !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 28px !important;
    box-shadow: 0 20px 45px rgba(9, 30, 58, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.adv-hero-banner::after {
    content: '' !important;
    position: absolute !important;
    top: -40% !important;
    right: -10% !important;
    width: 320px !important;
    height: 320px !important;
    background: radial-gradient(circle, rgba(255, 153, 51, 0.3) 0%, rgba(2, 132, 199, 0.15) 50%, rgba(0,0,0,0) 70%) !important;
    border-radius: 50% !important;
    animation: advParticlePulse 8s infinite ease-in-out !important;
    pointer-events: none !important;
}

.adv-hero-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 153, 51, 0.2) !important;
    color: #ff9933 !important;
    border: 1px solid rgba(255, 153, 51, 0.4) !important;
    padding: 6px 16px !important;
    border-radius: 50px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    margin-bottom: 14px !important;
    box-shadow: 0 4px 15px rgba(255, 153, 51, 0.15) !important;
}

.adv-hero-title {
    font-family: 'Outfit', 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: 24px !important;
    color: #ffffff !important;
    margin-bottom: 8px !important;
}

.adv-hero-desc {
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    color: #cbd5e1 !important;
    line-height: 1.8 !important;
    margin: 0 !important;
}

/* ADVANCED FEATURE CARD */
.adv-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 26px 26px !important;
    margin-bottom: 22px !important;
    box-shadow: 0 6px 25px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.adv-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--adv-color1, #ff9933), var(--adv-color2, #0284c7)) !important;
}

.adv-card:hover {
    transform: translateY(-6px) scale(1.01) !important;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(2, 132, 199, 0.2) !important;
    border-color: #cbd5e1 !important;
}

.adv-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 14px !important;
}

.adv-icon-orb {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--adv-bg1, #f0f7ff) 0%, var(--adv-bg2, #e0f2fe) 100%) !important;
    color: var(--adv-icon-color, #0284c7) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 6px 18px var(--adv-shadow, rgba(2, 132, 199, 0.15)) !important;
    transition: transform 0.35s ease !important;
}

.adv-card:hover .adv-icon-orb {
    transform: scale(1.15) rotate(8deg) !important;
}

.adv-card-title {
    font-family: 'Outfit', 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    color: #0f172a !important;
    margin: 0 !important;
    letter-spacing: 0.3px !important;
}

.adv-card-body {
    font-family: 'Poppins', sans-serif !important;
    font-size: 15.5px !important;
    color: #334155 !important;
    line-height: 1.8 !important;
}

/* 🌟 5-STAR COMPLETE REDESIGN ACADEMIC SUITE */
.gpm-academic-hero {
    background: linear-gradient(135deg, #0b3c73 0%, #1e3a8a 60%, #062b54 100%) !important;
    border-radius: 16px !important;
    padding: 30px 28px !important;
    color: #ffffff !important;
    margin-bottom: 25px !important;
    box-shadow: 0 15px 35px rgba(11, 60, 115, 0.22) !important;
    position: relative !important;
    overflow: hidden !important;
    border-left: 6px solid #ff9933 !important;
}

.gpm-academic-hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 153, 51, 0.2) !important;
    color: #ff9933 !important;
    border: 1px solid rgba(255, 153, 51, 0.4) !important;
    padding: 5px 14px !important;
    border-radius: 50px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
}

.gpm-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 25px !important;
}

.gpm-exec-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 24px 22px !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
    border-top: 4px solid var(--gpm-accent, #0b3c73) !important;
}

.gpm-exec-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.1) !important;
    border-color: #cbd5e1 !important;
}

.gpm-exec-orb {
    width: 50px !important;
    height: 50px !important;
    border-radius: 14px !important;
    background: var(--gpm-orb-bg, #f0f7ff) !important;
    color: var(--gpm-accent, #0284c7) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    margin-bottom: 16px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.3s ease !important;
}

.gpm-exec-card:hover .gpm-exec-orb {
    transform: scale(1.1) rotate(6deg) !important;
}

.gpm-exec-title {
    font-family: 'Outfit', 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: 17.5px !important;
    color: #0f172a !important;
    margin-bottom: 10px !important;
    line-height: 1.35 !important;
}

.gpm-exec-body {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14.5px !important;
    color: #475569 !important;
    line-height: 1.75 !important;
    flex: 1 !important;
}

/* 🏆 PERFECT EXECUTIVE CARD DESIGN */
.gpm-box-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 5px solid var(--box-accent, #ea580c) !important;
    border-radius: 12px !important;
    padding: 22px 24px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.3s ease !important;
}

.gpm-box-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.09) !important;
    border-color: #cbd5e1 !important;
}

.gpm-box-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
}

.gpm-box-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: var(--box-icon-bg, #fff7ed) !important;
    color: var(--box-accent, #ea580c) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.gpm-box-title {
    font-family: 'Outfit', 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: 17px !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.gpm-box-desc {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14.5px !important;
    color: #334155 !important;
    line-height: 1.75 !important;
    margin: 0 !important;
}

/* ==========================================================================
   ULTRA-RESPONSIVE FIXES FOR MOBILE & TABLET (PHONE & PAD) VIEW
   ========================================================================== */
@media (max-width: 991px) {
    /* Hide floating social bar on mobile/pad */
    .gpa-floating-social, .floating-social-bar, .floating-social, #floating-social-container {
        display: none !important;
    }

    /* Hide background SVG constellation overlay on mobile/pad */
    .tech-bg-overlay, svg.tech-bg-overlay, div.tech-bg-overlay {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* Campus Life & Gallery Section Responsiveness */
    .gallery-news-section {
        padding: 30px 12px !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .portal-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .gallery-column,
    .news-column {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Department Overview Mobile & Tablet (Phone & Pad) Responsiveness */
@media (max-width: 991px) {
    .departments-section {
        padding: 35px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .departments-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .departments-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .dept-card {
        height: auto !important;
        min-height: auto !important;
        border-radius: 14px !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
        background: #ffffff !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    .dept-card-top-img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        position: relative !important;
        overflow: hidden !important;
        background: #f1f5f9 !important;
        border-radius: 14px 14px 0 0 !important;
    }

    .dept-hod-photo {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;
        border-radius: 14px 14px 0 0 !important;
    }

    .dept-card-body {
        padding: 10px 8px 12px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: center !important;
        background: #ffffff !important;
        flex: 1 1 auto !important;
    }

    .dept-hod-row {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #334155 !important;
        margin-bottom: 4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    .dept-stats-row {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 10px !important;
        color: #64748b !important;
        margin-bottom: 6px !important;
    }

    .meta-item {
        font-size: 10px !important;
    }

    .dept-card-heading {
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        color: #0f172a !important;
        margin: 2px 0 10px 0 !important;
        height: auto !important;
        min-height: 28px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-align: center !important;
    }

    .dept-btn-wrapper {
        margin-top: auto !important;
        width: 100% !important;
        text-align: center !important;
    }

    .dept-read-more-btn {
        padding: 5px 14px !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        border-radius: 20px !important;
        background: #ff9933 !important;
        color: #ffffff !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        text-decoration: none !important;
        box-shadow: 0 2px 8px rgba(255, 153, 51, 0.3) !important;
    }
}

@media (max-width: 420px) {
    .departments-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .dept-card-top-img {
        aspect-ratio: 1 / 1 !important;
    }

    .dept-card-heading {
        font-size: 10.5px !important;
    }

    .dept-read-more-btn {
        padding: 4px 10px !important;
        font-size: 10px !important;
    }
}

    .portal-header-row {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 16px !important;
        padding-bottom: 8px !important;
        min-height: auto !important;
        width: 100% !important;
    }

    .portal-title {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 10 !important;
        padding-bottom: 6px !important;
    }

    .portal-title::after {
        content: '' !important;
        position: absolute !important;
        left: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 35px !important;
        height: 3px !important;
        background: #ff9933 !important;
        border-radius: 2px !important;
    }

    .view-all-gallery-btn {
        padding: 5px 12px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    /* Video Player Card Responsiveness */
    .video-player-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .main-video-container {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        min-height: 220px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .main-video-container video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .video-overlay-controls {
        padding: 10px 14px !important;
    }

    .video-badge {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }

    .video-top-info h3 {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    .play-trigger-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 16px !important;
    }

    /* Video Playlist 4-Column Equal Grid Responsiveness - Zero Cut Off */
    .playlist-slider-wrapper {
        padding: 8px 0 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .playlist-scroll-container {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .playlist-item {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        box-sizing: border-box !important;
    }

    .pl-thumbnail {
        aspect-ratio: 16 / 10 !important;
        height: auto !important;
        border-radius: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .pl-title {
        font-size: 9px !important;
        line-height: 1.2 !important;
        margin-top: 3px !important;
        text-align: center !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        word-break: break-word !important;
    }

    .playlist-arrow {
        display: none !important;
    }

    /* Latest News / Notices Board Column Responsiveness */
    .notices-card {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
        padding: 10px 12px !important;
        overflow: hidden !important;
        border-radius: 12px !important;
    }

    .notices-list-container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 420px !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        padding-right: 4px !important;
    }

    .notice-row-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        height: auto !important;
        min-height: auto !important;
        padding: 10px 4px !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .notice-indicator-dot {
        margin-top: 5px !important;
        flex-shrink: 0 !important;
    }

    .notice-meta-tags {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        flex-shrink: 0 !important;
        width: 78px !important;
        min-width: 78px !important;
        max-width: 78px !important;
    }

    .notice-date {
        font-size: 10px !important;
    }

    .notice-badge {
        font-size: 8.5px !important;
        padding: 2px 4px !important;
        border-radius: 4px !important;
        width: fit-content !important;
    }

    .notice-description {
        flex: 1 1 0px !important;
        min-width: 0 !important;
        max-width: calc(100% - 92px) !important;
        width: auto !important;
    .portal-title {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 10 !important;
        padding-bottom: 6px !important;
    }

    .portal-title::after {
        content: '' !important;
        position: absolute !important;
        left: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 35px !important;
        height: 3px !important;
        background: #ff9933 !important;
        border-radius: 2px !important;
    }

    .view-all-gallery-btn {
        padding: 5px 12px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    /* Video Player Card Responsiveness */
    .video-player-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .main-video-container {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .main-video-container video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .video-overlay-controls {
        padding: 10px 14px !important;
    }

    .video-badge {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }

    .video-top-info h3 {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    .play-trigger-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 16px !important;
    }

    /* Video Playlist - horizontal scroll (original) */
    .playlist-slider-wrapper {
        padding: 8px 0 0 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .playlist-scroll-container {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-behavior: smooth !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 4px 0 !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .playlist-scroll-container::-webkit-scrollbar {
        display: none !important;
    }

    .playlist-item {
        flex: 0 0 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
        box-sizing: border-box !important;
    }

    .pl-thumbnail {
        aspect-ratio: 16 / 10 !important;
        height: auto !important;
        border-radius: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .pl-title {
        font-size: 10px !important;
        line-height: 1.2 !important;
        margin-top: 3px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .playlist-arrow {
        display: none !important;
    }

    /* Latest News / Notices Board Column Responsiveness */
    .notices-card {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
        padding: 10px 12px !important;
        overflow: hidden !important;
        border-radius: 12px !important;
    }

    .notices-list-container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 420px !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        padding-right: 4px !important;
    }

    .notice-row-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        height: auto !important;
        min-height: auto !important;
        padding: 10px 4px !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .notice-indicator-dot {
        margin-top: 5px !important;
        flex-shrink: 0 !important;
    }

    .notice-meta-tags {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        flex-shrink: 0 !important;
        width: 78px !important;
        min-width: 78px !important;
        max-width: 78px !important;
    }

    .notice-date {
        font-size: 10px !important;
    }

    .notice-badge {
        font-size: 8.5px !important;
        padding: 2px 4px !important;
        border-radius: 4px !important;
        width: fit-content !important;
    }

    .notice-description {
        flex: 1 1 0px !important;
        min-width: 0 !important;
        max-width: calc(100% - 92px) !important;
        width: auto !important;
        box-sizing: border-box !important;
        font-size: 11.5px !important;
        line-height: 1.35 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        margin: 0 !important;
    }
}

/* Strict Zero Horizontal Overflow Container & Section Constraints for Phone & Pad */
@media (max-width: 991px) {
    *, *::before, *::after {
        box-sizing: border-box !important;
    }

    body, html {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .gallery-news-section {
        padding: 20px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .section-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .portal-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .gallery-column,
    .news-column {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Department Overview Mobile Responsiveness */
@media (max-width: 991px) {
    .departments-section {
        padding: 35px 0 28px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .departments-container {
        width: 100% !important;
        max-width: 1200px !important;
        padding: 0 12px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .departments-grid,
    .prof-departments-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .dept-card {
        height: auto !important;
        min-height: auto !important;
        border-radius: 16px !important;
        border: none !important;
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.06) !important;
        background: #ffffff !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    .dept-card-top-img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        max-height: 250px !important;
        position: relative !important;
        overflow: hidden !important;
        background: #f8fafc !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .dept-hod-photo {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        padding: 6px !important;
        box-sizing: border-box !important;
        border-radius: 14px 14px 0 0 !important;
        filter: contrast(1.03) brightness(1.01) !important;
    }

    .dept-card-body {
        padding: 12px 14px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        background: #ffffff !important;
        flex: 1 1 auto !important;
    }

    .dept-hod-row {
        font-size: 11.5px !important;
        font-weight: 700 !important;
        color: #475569 !important;
        margin-bottom: 4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        text-transform: uppercase !important;
    }

    .dept-card-heading {
        font-size: 12px !important;
        font-weight: 800 !important;
        line-height: 1.3 !important;
        color: #0f172a !important;
        margin: 3px 0 8px 0 !important;
        height: auto !important;
        min-height: auto !important;
        display: block !important;
        text-align: center !important;
        text-transform: uppercase !important;
    }

    .dept-stats-row {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        font-size: 11px !important;
        color: #64748b !important;
        margin-bottom: 12px !important;
        width: 100% !important;
    }

    .meta-item {
        font-size: 11px !important;
    }

    .dept-btn-wrapper {
        margin-top: auto !important;
        width: 100% !important;
        text-align: center !important;
    }

    .dept-read-more-btn {
        width: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 20px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        border-radius: 20px !important;
        background: linear-gradient(135deg, #ff9933 0%, #e68a00 100%) !important;
        color: #ffffff !important;
        gap: 5px !important;
        text-decoration: none !important;
        box-shadow: 0 3px 10px rgba(255, 153, 51, 0.3) !important;
        margin: 0 auto !important;
    }
}

/* Announcement Tabs Header Mobile & Pad Responsiveness */
@media (max-width: 991px) {
    .portal-announcements-section {
        padding: 30px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .announcements-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .announcements-tabs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .tab-btn {
        flex: 1 1 0px !important;
        min-width: 0 !important;
        padding: 10px 4px !important;
        font-size: 10.5px !important;
        font-weight: 800 !important;
        letter-spacing: 0px !important;
        gap: 4px !important;
        white-space: nowrap !important;
        text-align: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .tab-btn i {
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    .tab-btn {
        padding: 9px 3px !important;
        font-size: 9.5px !important;
        gap: 3px !important;
    }

    .tab-btn i {
        font-size: 10px !important;
    }
}

/* Placement Partners Section Mobile/Pad Responsiveness (2 per line, 4 displayed) */
@media (max-width: 991px) {
    .placement-partners-section {
        padding: 30px 12px 35px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .partners-grid-new {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        max-height: none !important;
        box-sizing: border-box !important;
    }

    /* Show exactly 4 items initially on mobile unless expanded */
    .partners-grid-new:not(.expanded) .partner-logo-card:nth-child(n+5) {
        display: none !important;
    }

    .partner-logo-card {
        padding: 14px 10px !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        box-sizing: border-box !important;
    }

    .logo-svg-wrapper {
        height: 40px !important;
        margin-bottom: 8px !important;
    }

    .logo-svg-wrapper img {
        max-height: 36px !important;
        max-width: 75px !important;
    }

    .partner-name {
        font-size: 11px !important;
        font-weight: 700 !important;
        text-align: center !important;
    }
}

/* Compact Mobile Top Settings Bar (Zero Cut Off for Theme & Font Controls) */
@media (max-width: 991px) {
    .h16-mobile-top-settings {
        padding: 3px 6px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .h16-mobile-actions {
        gap: 2px !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .h16-mobile-actions .h16-top-ribbon-link {
        font-size: 9.5px !important;
        padding: 1px 3px !important;
    }

    .h16-mobile-actions .h16-top-ribbon-link i {
        font-size: 8.5px !important;
        margin-right: 2px !important;
    }

    .h16-mobile-top-settings .h16-settings-pill {
        gap: 3px !important;
        padding: 2px 5px !important;
        border-radius: 16px !important;
        flex-shrink: 0 !important;
    }

    .h16-mobile-top-settings .theme-box {
        width: 9px !important;
        height: 9px !important;
    }

    .h16-mobile-top-settings .h16-btn-size {
        width: 16px !important;
        height: 16px !important;
        font-size: 8px !important;
        line-height: 1 !important;
        padding: 0 !important;
        border-radius: 3px !important;
    }
}

/* ==========================================================================
   DEPARTMENT OVERVIEW — THEME COLOR ACCENTS ONLY
   ========================================================================== */

/* Section Title — theme color gradient */
.departments-title {
    font-size: 2rem !important;
    font-weight: 800 !important;
    background: linear-gradient(90deg, #0066cc 0%, #00c0ff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-align: center !important;
    margin-bottom: 10px !important;
    letter-spacing: -0.5px !important;
}

/* Glowing underline in theme color */
.departments-title-line {
    width: 60px !important;
    height: 3px !important;
    background: linear-gradient(90deg, #00c0ff, #0066ff) !important;
    border-radius: 4px !important;
    margin: 0 auto 28px auto !important;
    box-shadow: 0 0 14px rgba(0, 192, 255, 0.5) !important;
}

/* Dept Card — theme top border */
.dept-card {
    border-top: 3px solid #00c0ff !important;
}

/* Dept card CTA button theme */
.dept-detail-btn {
    background: linear-gradient(135deg, #00c0ff, #0055cc) !important;
    color: #ffffff !important;
    border: none !important;
}

.dept-detail-btn:hover {
    background: linear-gradient(135deg, #00d4ff, #0044bb) !important;
    box-shadow: 0 4px 16px rgba(0, 192, 255, 0.4) !important;
}

/* ==========================================================================
   ADVANCED DEPARTMENT OVERVIEW INTERACTIVE STYLES
   ========================================================================== */

/* Department Section Header Controls */
.dept-controls-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    margin-bottom: 24px;
    width: 100%;
}

/* Search Box */
.dept-search-box {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.dept-search-box .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 15px;
    pointer-events: none;
    transition: color 0.3s ease;
}

.dept-search-box input {
    width: 100%;
    padding: 10px 42px 10px 42px;
    font-size: 14px;
    font-weight: 500;
    color: #0f172a;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 30px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    outline: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dept-search-box input:focus {
    border-color: #00c0ff;
    box-shadow: 0 0 0 4px rgba(0, 192, 255, 0.18), 0 6px 20px rgba(0, 0, 0, 0.08);
}

.dept-search-box input:focus + .search-icon {
    color: #0284c7;
}

.search-clear-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: #e2e8f0;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.search-clear-btn:hover {
    background: #cbd5e1;
    color: #0f172a;
}

/* Filter Pills */
.dept-filter-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.dept-pill-btn {
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dept-pill-btn i {
    font-size: 12px;
    color: #64748b;
    transition: color 0.25s ease;
}

.dept-pill-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
    transform: translateY(-1px);
}

.dept-pill-btn.active {
    background: linear-gradient(135deg, #00c0ff 0%, #0066cc 100%);
    color: #ffffff;
    border-color: #00c0ff;
    box-shadow: 0 4px 14px rgba(0, 192, 255, 0.35);
}

.dept-pill-btn.active i {
    color: #ffffff;
}

/* Dept Card Enhancements & 3D Spotlight Glow */
.dept-card {
    position: relative;
    border: none !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
    will-change: transform;
    overflow: hidden;
}

.dept-card:hover {
    box-shadow: 0 20px 40px -10px rgba(0, 192, 255, 0.22), 0 8px 20px rgba(0, 0, 0, 0.06) !important;
    border-bottom: 2px solid #00c0ff !important;
}

.dept-card-spotlight {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 192, 255, 0.13), transparent 40%);
    z-index: 1;
}

.dept-card:hover .dept-card-spotlight {
    opacity: 1;
}

/* HOD Online Status Indicator Dot */
.hod-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
    animation: pulseHodDot 2s infinite ease-in-out;
}

@keyframes pulseHodDot {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Pin/Bookmark Star Button */
.dept-pin-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.25s ease;
}

.dept-pin-btn:hover {
    transform: scale(1.15) rotate(12deg);
    color: #eab308;
    background: #ffffff;
}

.dept-card.is-pinned {
    border: 2px solid #f59e0b !important;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.22) !important;
}

.dept-card.is-pinned .dept-pin-btn {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #d97706;
}

.dept-card.is-pinned .dept-pin-btn i {
    font-weight: 900;
}

/* Overlay Badge on Image */
.dept-img-overlay-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 2;
}

.dept-img-overlay-badge .badge-tag {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(6px);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Card Buttons Layout */
.dept-btn-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
}

/* Card Buttons Layout & Equal 50/50 Perfect Alignment */
.dept-btn-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: auto !important;
    box-sizing: border-box !important;
}

/* Quick View Button */
.dept-quick-btn {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #0284c7 !important;
    background: #f0f9ff !important;
    border: 1.5px solid #bae6fd !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.08) !important;
}

.dept-quick-btn i {
    font-size: 11px !important;
    color: #0284c7 !important;
    transition: color 0.25s ease !important;
}

.dept-quick-btn:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
    transform: translateY(-1.5px) !important;
}

.dept-quick-btn:hover i {
    color: #ffffff !important;
}

/* Details Button */
.dept-read-more-btn {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border: 1.5px solid transparent !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.3) !important;
}

.dept-read-more-btn i {
    font-size: 11px !important;
    transition: transform 0.25s ease !important;
}

.dept-read-more-btn:hover {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 15px rgba(2, 132, 199, 0.45) !important;
    transform: translateY(-1.5px) !important;
}

.dept-read-more-btn:hover i {
    transform: translateX(3px) !important;
}

/* Mobile Small Screen Alignment Adjustments */
@media (max-width: 480px) {
    .dept-btn-wrapper {
        gap: 5px !important;
    }
    
    .dept-quick-btn,
    .dept-read-more-btn {
        height: 30px !important;
        font-size: 10px !important;
        padding: 0 6px !important;
        gap: 3px !important;
    }
}

/* No Results State */
.dept-no-results {
    text-align: center;
    padding: 40px 20px;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    margin: 20px 0;
}

.dept-no-results .no-res-icon {
    font-size: 38px;
    color: #94a3b8;
    margin-bottom: 12px;
}

.dept-no-results h4 {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 6px;
}

.dept-no-results p {
    color: #64748b;
    font-size: 14px;
    margin: 0;
}

/* Glassmorphic Quick-View Modal (REDESIGNED HERO IMAGE & MODERN LAYOUT) */
.dept-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.dept-modal-backdrop.is-active {
    opacity: 1;
    visibility: visible;
}

.dept-modal-container {
    width: 100%;
    max-width: 560px;
    background: #ffffff;
    border-radius: 28px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.dept-modal-backdrop.is-active .dept-modal-container {
    transform: scale(1) translateY(0);
}

.dept-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 22px;
    color: #ffffff;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.dept-modal-close:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
    transform: rotate(90deg);
}

.dept-modal-header-bg {
    background: linear-gradient(135deg, #0f172a 0%, #0369a1 100%);
    padding: 28px 24px 24px;
    color: #ffffff;
    position: relative;
}

.dept-modal-badge {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #38bdf8;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
}

.dept-modal-title {
    font-size: 19px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
}

.dept-modal-body {
    padding: 22px 24px;
}

/* Large HOD Showcase Hero Card */
.dept-modal-hod-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 16px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    margin-bottom: 20px;
}

.modal-hod-img-wrapper {
    position: relative;
    flex-shrink: 0;
}

.modal-hod-avatar {
    width: 96px !important;
    height: 96px !important;
    border-radius: 18px !important;
    object-fit: cover !important;
    object-position: center top !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 8px 22px rgba(2, 132, 199, 0.22) !important;
    background: #e2e8f0;
}

.hod-verified-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #0284c7;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 2.5px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.modal-hod-details .hod-tag-label {
    font-size: 11px;
    font-weight: 800;
    color: #0284c7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
    display: inline-block;
}

.modal-hod-details h4 {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    margin: 2px 0 4px 0;
    line-height: 1.35;
}

.modal-hod-details .designation {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin: 0;
}

/* Stat Box Chips */
.dept-modal-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.dept-modal-stats-grid .stat-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 12px 6px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dept-modal-stats-grid .stat-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.stat-icon-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.seats-box .stat-icon-wrapper { background: #f0f9ff; color: #0284c7; }
.year-box .stat-icon-wrapper { background: #fffbe0; color: #d97706; }
.course-box .stat-icon-wrapper { background: #f0fdf4; color: #16a34a; }
.aff-box .stat-icon-wrapper { background: #f5f3ff; color: #7c3aed; }

.dept-modal-stats-grid .stat-val {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}

/* ==========================================================================
   NEW UNIFIED EXECUTIVE DARK SLATE & CYAN GLASS PORTAL SYSTEM
   ========================================================================== */

/* Section Theme Background & Ambient Glowing Blobs (100% DYNAMIC SITE THEME) */
#announcements-links-portal,
.portal-announcements-section {
    position: relative !important;
    padding: 40px 0 35px 0 !important;
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--theme-primary, #6f8b1b) 8%, #ffffff) 0%, 
        color-mix(in srgb, var(--theme-primary, #6f8b1b) 12%, #ffffff) 50%, 
        color-mix(in srgb, var(--theme-accent, #ff9933) 8%, #ffffff) 100%
    ) !important;
    border-top: 1px solid color-mix(in srgb, var(--theme-primary, #6f8b1b) 20%, transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--theme-primary, #6f8b1b) 20%, transparent) !important;
    overflow: hidden !important;
}

.portal-bg-blob {
    position: absolute !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.portal-bg-blob.blob-1 {
    width: 500px !important;
    height: 500px !important;
    background: radial-gradient(circle, color-mix(in srgb, var(--theme-primary, #6f8b1b) 25%, transparent), transparent 70%) !important;
    top: -150px !important;
    left: -100px !important;
    filter: blur(45px) !important;
}

.portal-bg-blob.blob-2 {
    width: 500px !important;
    height: 500px !important;
    background: radial-gradient(circle, color-mix(in srgb, var(--theme-accent, #ff9933) 25%, transparent), transparent 70%) !important;
    bottom: -150px !important;
    right: -100px !important;
    filter: blur(45px) !important;
}

.portal-announcements-section .section-container {
    position: relative !important;
    z-index: 2 !important;
}

/* Main Card Containers */
.announcements-card,
.important-links-card {
    background: #ffffff !important;
    border-radius: 24px !important;
    border: none !important;
    box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.08), 0 4px 16px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Card Header Bars (Main Navy Theme Background) */
.announcements-tabs,
.neo-hub-header {
    background: linear-gradient(135deg, #00172b 0%, #002842 50%, #003b61 100%) !important;
    padding: 10px 14px !important;
    border-bottom: 3px solid #38bdf8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #ffffff !important;
    min-height: 54px !important;
}

.announcements-tabs {
    gap: 6px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.announcements-tabs::-webkit-scrollbar {
    display: none !important;
}

/* Tab Navigation Buttons */
.tab-btn {
    flex: 1 1 0px !important;
    min-width: 0 !important;
    padding: 7px 14px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 30px !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    text-transform: uppercase !important;
}

.tab-btn i {
    font-size: 12px !important;
    transition: transform 0.25s ease !important;
}

.tab-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Active Category Glowing Pill Variations */
.tab-btn.notices-tab.active {
    background: linear-gradient(135deg, #003b61 0%, #38bdf8 100%) !important;
    color: #ffffff !important;
    border-color: rgba(56, 189, 248, 0.8) !important;
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.4) !important;
}

.tab-btn.tenders-tab.active {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
    color: #ffffff !important;
    border-color: rgba(234, 88, 12, 0.8) !important;
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.4) !important;
}

.tab-btn.placement-tab.active {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
    border-color: rgba(5, 150, 105, 0.8) !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.4) !important;
}

.tab-btn.awards-tab.active {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    color: #ffffff !important;
    border-color: rgba(124, 58, 237, 0.8) !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4) !important;
}

.tab-btn.active i {
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

/* Panel Body & Announcement Rows */
.tab-content {
    padding: 12px 14px !important;
    flex: 1 1 auto !important;
    background: #ffffff !important;
}

.announcement-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}

.announcement-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 11px !important;
    padding: 8px 13px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

.announcement-row:hover {
    background: #f8fafc !important;
    border-color: #38bdf8 !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.1) !important;
}

/* Announcement Icons */
.announcement-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
    transition: transform 0.22s ease !important;
}

.announcement-icon.notices-icon { background: rgba(2, 132, 199, 0.12) !important; color: #0284c7 !important; }
.announcement-icon.tenders-icon { background: rgba(234, 88, 12, 0.12) !important; color: #ea580c !important; }
.announcement-icon.placement-icon { background: rgba(5, 150, 105, 0.12) !important; color: #059669 !important; }
.announcement-icon.awards-icon { background: rgba(124, 58, 237, 0.12) !important; color: #7c3aed !important; }

.announcement-row:hover .announcement-icon {
    transform: scale(1.08) !important;
}

/* Announcement Details */
.announcement-details {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
}

.announcement-meta-top {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-bottom: 1px !important;
}

.badge-pulse {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #bbf7d0 !important;
    font-size: 9px !important;
    font-weight: 750 !important;
    text-transform: uppercase !important;
    padding: 1px 6px !important;
    border-radius: 20px !important;
    line-height: 1.3 !important;
}

.pulse-dot {
    width: 4.5px !important;
    height: 4.5px !important;
    border-radius: 50% !important;
    background-color: #16a34a !important;
}

.badge-cat {
    font-size: 9.5px !important;
    font-weight: 650 !important;
    color: #0284c7 !important;
    background: #e0f2fe !important;
    border: 1px solid #bae6fd !important;
    padding: 1px 7px !important;
    border-radius: 20px !important;
    line-height: 1.3 !important;
}

.announcement-details h4 {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 1px 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: color 0.2s ease !important;
}

.announcement-row:hover .announcement-details h4 {
    color: #0284c7 !important;
}

.announcement-meta-bottom {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 1px !important;
}

.announcement-meta-bottom span {
    font-size: 10.5px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.announcement-meta-bottom span i {
    color: #0284c7 !important;
    font-size: 10.5px !important;
}

.announcement-meta-bottom .meta-tag {
    color: #e11d48 !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    background: #fff1f2 !important;
    padding: 1px 6px !important;
    border-radius: 5px !important;
    border: 1px solid #fecdd3 !important;
}

.announcement-meta-bottom .meta-tag i {
    color: #e11d48 !important;
    font-size: 9.5px !important;
}

/* Modern & Sleek Action Button */
.announcement-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: auto !important;
    height: auto !important;
    padding: 4px 11px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25) !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
}

.announcement-arrow .arrow-text {
    font-weight: 700 !important;
    font-size: 11px !important;
    color: #ffffff !important;
    line-height: 1 !important;
}

.announcement-arrow i {
    font-size: 9.5px !important;
    color: #ffffff !important;
    line-height: 1 !important;
    transition: transform 0.2s ease !important;
}

.announcement-row:hover .announcement-arrow {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important;
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.4) !important;
    transform: translateX(2px) !important;
    color: #ffffff !important;
}

.announcement-row:hover .announcement-arrow i {
    transform: translateX(3px) !important;
}

/* Category-specific button themes */
.announcement-row:has(.tenders-icon) .announcement-arrow {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
    box-shadow: 0 2px 6px rgba(234, 88, 12, 0.25) !important;
}
.announcement-row:has(.tenders-icon):hover .announcement-arrow {
    background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%) !important;
    box-shadow: 0 4px 10px rgba(234, 88, 12, 0.4) !important;
}

.announcement-row:has(.placement-icon) .announcement-arrow {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25) !important;
}
.announcement-row:has(.placement-icon):hover .announcement-arrow {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
    box-shadow: 0 4px 10px rgba(22, 163, 74, 0.4) !important;
}

.announcement-row:has(.awards-icon) .announcement-arrow {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25) !important;
}
.announcement-row:has(.awards-icon):hover .announcement-arrow {
    background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%) !important;
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.4) !important;
}

/* Footer View-All Action Button */
.announcements-footer {
    padding: 10px 16px !important;
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.portal-action-btn {
    padding: 8px 20px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #003b61 0%, #38bdf8 100%) !important;
    border-radius: 30px !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(56, 189, 248, 0.35) !important;
    transition: all 0.25s ease !important;
    text-transform: uppercase !important;
}

.portal-action-btn:hover {
    background: linear-gradient(135deg, #ff9933 0%, #ff5500 100%) !important;
    box-shadow: 0 8px 22px rgba(255, 153, 51, 0.5) !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

.portal-action-btn:hover {
    background: linear-gradient(135deg, #65a30d 0%, #4d7c0f 100%) !important;
    box-shadow: 0 6px 18px rgba(132, 204, 22, 0.45) !important;
    transform: translateY(-1.5px) !important;
    color: #ffffff !important;
}

.portal-action-btn i {
    transition: transform 0.25s ease !important;
}

/* Portal Grid Stretch for Equal Heights */
.portal-grid-new {
    display: grid !important;
    grid-template-columns: 1fr 340px !important;
    gap: 20px !important;
    align-items: stretch !important;
}

@media (max-width: 991px) {
    .portal-grid-new {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* ==========================================================================
   SEAMLESS CLEAN RESOURCE HUB DESIGN (FILLS CARD HEIGHT NATURALLY)
   ========================================================================== */

.neo-links-hub {
    background: #ffffff !important;
    border-radius: 24px !important;
    border: none !important;
    box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.header-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-icon-chip {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
    font-size: 14px;
}

.neo-hub-header h3 {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
}

.header-subtext {
    font-size: 10.5px;
    color: #94a3b8;
    font-weight: 600;
    display: block;
}

.live-portal-beacon {
    font-size: 10px;
    font-weight: 800;
    color: #34d399;
    background: rgba(52, 211, 153, 0.15);
    border: 1px solid rgba(52, 211, 153, 0.3);
    padding: 2px 8px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.5px;
}

.live-portal-beacon i {
    font-size: 6px;
    color: #4ade80;
    animation: beaconPulse 1.8s infinite ease-in-out;
}

@keyframes beaconPulse {
    0% { opacity: 0.4; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.3); }
    100% { opacity: 0.4; transform: scale(0.9); }
}

.neo-hub-body {
    padding: 10px 12px !important;
    flex: 1 1 auto !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.neo-links-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    height: 100% !important;
    align-content: start !important;
}

@media (max-width: 576px) {
    .neo-links-grid {
        gap: 5px !important;
    }
}

.neo-link-tile {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 7px 10px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    min-height: 40px !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.02) !important;
}

.neo-link-tile:hover {
    background: #ffffff !important;
    border-color: #38bdf8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px -2px rgba(0, 59, 97, 0.1) !important;
}

/* Icon Box & Color Themes with Blinking Effect */
.tile-icon-box {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
    transition: transform 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

.tile-icon-box i {
    animation: iconBlink 1.6s infinite ease-in-out !important;
}

@keyframes iconBlink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.35;
        transform: scale(0.85);
    }
}

.tile-icon-box.icon-aicte {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
}

.tile-icon-box.icon-skill {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
}

.tile-icon-box.icon-sbte {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
}

.tile-icon-box.icon-welfare {
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%) !important;
}

.tile-icon-box.icon-edu {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
}

.tile-icon-box.icon-dst {
    background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%) !important;
}

.tile-icon-box.icon-govt {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

.tile-icon-box.icon-bcece {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
}

.tile-icon-box.icon-default {
    background: linear-gradient(135deg, #64748b 0%, #334155 100%) !important;
}

.neo-link-tile:hover .tile-icon-box {
    transform: scale(1.06) !important;
}

.tile-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 0 !important;
}

.tile-title {
    font-family: 'Outfit', 'Inter', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: break-word !important;
    transition: color 0.2s ease !important;
}

.neo-link-tile:hover .tile-title {
    color: #0284c7 !important;
}

.tile-arrow {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 9.5px !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.neo-link-tile:hover .tile-arrow {
    background: #e0f2fe !important;
    color: #0284c7 !important;
    transform: translateX(2px) !important;
}


/* Responsive adjustments for announcements portal */
@media (max-width: 768px) {
    .portal-announcements-section {
        padding: 35px 0 25px 0 !important;
    }

    .portal-announcements-section .section-container {
        padding: 0 12px !important;
    }

    .announcements-card {
        border-radius: 16px !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06) !important;
        margin-bottom: 20px !important;
    }

    .announcements-tabs {
        padding: 8px 10px !important;
        gap: 6px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }

    .tab-btn {
        padding: 7px 12px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        flex: 1 0 auto !important;
        white-space: nowrap !important;
    }

    .tab-content {
        padding: 12px 10px !important;
    }

    .announcement-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        max-height: none !important;
        overflow-y: visible !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .announcement-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 12px !important;
        gap: 10px !important;
        border-radius: 12px !important;
        border: 1.5px solid #e2e8f0 !important;
        background: #ffffff !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
        overflow: visible !important;
        min-height: auto !important;
    }

    .announcement-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        font-size: 13px !important;
        border-radius: 9px !important;
        flex-shrink: 0 !important;
    }

    .announcement-details {
        min-width: 0 !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    .announcement-meta-top {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        margin-bottom: 2px !important;
        flex-wrap: wrap !important;
    }

    .badge-pulse {
        font-size: 8.5px !important;
        padding: 1.5px 5px !important;
    }

    .badge-cat {
        font-size: 9px !important;
        padding: 1.5px 6px !important;
    }

    .announcement-details h4 {
        font-size: 12.5px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow: visible !important;
        margin: 1px 0 !important;
    }

    .announcement-meta-bottom {
        font-size: 10px !important;
        gap: 6px !important;
        margin-top: 2px !important;
        flex-wrap: wrap !important;
    }

    .announcement-arrow {
        padding: 4px 10px !important;
        font-size: 10.5px !important;
        border-radius: 20px !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 480px) {
    .portal-announcements-section .section-container {
        padding: 0 10px !important;
    }

    .announcement-row {
        padding: 9px 10px !important;
        gap: 8px !important;
    }

    .announcement-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        font-size: 12px !important;
    }

    .announcement-details h4 {
        font-size: 12px !important;
    }

    .announcement-arrow {
        padding: 3px 8px !important;
        font-size: 10px !important;
    }
}


.dept-modal-stats-grid .stat-lbl {
    font-size: 10.5px;
    font-weight: 600;
    color: #64748b;
}

.dept-modal-highlights h5 {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 12px;
}

.highlights-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.highlights-list li {
    font-size: 12.5px;
    color: #475569;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.45;
}

.dept-modal-footer {
    padding: 16px 24px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.dept-modal-go-btn {
    padding: 9px 22px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff !important;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    border-radius: 30px;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
    transition: all 0.25s ease;
}

.dept-modal-go-btn:hover {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.45);
    transform: translateY(-1px);
}

.dept-modal-go-btn i {
    transition: transform 0.2s ease;
}

.dept-modal-go-btn:hover i {
    transform: translateX(4px);
}

/* Mobile responsiveness for modal */
@media (max-width: 576px) {
    .dept-modal-container {
        border-radius: 20px;
    }
    
    .dept-modal-body {
        padding: 16px;
    }

    .dept-modal-hod-hero {
        gap: 12px;
        padding: 12px;
    }

    .modal-hod-avatar {
        width: 76px !important;
        height: 76px !important;
        border-radius: 14px !important;
    }

    .modal-hod-details h4 {
        font-size: 15px;
    }

    .dept-modal-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* ==========================================================================
   LATEST IMAGES GALLERY SECTION (DYNAMIC THEME SWITCHER LINKED & PRO DESIGN)
   ========================================================================== */

#latest-images-portal,
.latest-images-section,
.gpa-latest-images {
    padding: 45px 0 45px 0 !important;
    position: relative !important;
    overflow: hidden !important;
    transition: background 0.4s ease, background-color 0.4s ease, background-image 0.4s ease !important;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
}

/* Theme Switcher Live Color Bindings (Navy, Olive, Maroon, Gold, Purple) */
html[data-theme="navy"] #latest-images-portal,
body.theme-navy #latest-images-portal,
html[data-theme="default"] #latest-images-portal {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
}

html[data-theme="olive"] #latest-images-portal,
body.theme-green #latest-images-portal {
    background: linear-gradient(135deg, #1c2608 0%, #2e3d0f 50%, #4a5e1a 100%) !important;
}

html[data-theme="maroon"] #latest-images-portal,
body.theme-maroon #latest-images-portal {
    background: linear-gradient(135deg, #270808 0%, #3d0f0f 50%, #7b1e1e 100%) !important;
}

html[data-theme="gold"] #latest-images-portal,
body.theme-yellow #latest-images-portal {
    background: linear-gradient(135deg, #261c00 0%, #3d2e00 50%, #7a6000 100%) !important;
}

html[data-theme="purple"] #latest-images-portal,
body.theme-purple #latest-images-portal {
    background: linear-gradient(135deg, #17072b 0%, #2e1065 50%, #6b21a8 100%) !important;
}

.js-tilt-card {
    transform-style: preserve-3d !important;
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out !important;
    will-change: transform !important;
}

.gallery-header-row-new {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 25px !important;
}

.gallery-title-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.gallery-icon-box {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 1.3rem !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
}

.gallery-title-text h2 {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
    letter-spacing: 0.3px !important;
}

.gallery-header-row-new .view-all-gallery-btn {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    padding: 7px 22px !important;
    border-radius: 30px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    backdrop-filter: blur(4px) !important;
}

.gallery-header-row-new .view-all-gallery-btn:hover {
    background: #ffffff !important;
    color: var(--theme-primary, #0b3c73) !important;
    border-color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2) !important;
}

/* ============================================================
   APPLE-STYLE 3D COVERFLOW FLIP SLIDER (USER CONTROLLED)
   ============================================================ */
.coverflow-stage {
    position: relative !important;
    width: 100% !important;
    height: 380px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    perspective: 1200px !important;
    margin: 10px 0 25px 0 !important;
}

.coverflow-track {
    position: relative !important;
    width: 100% !important;
    max-width: 950px !important;
    height: 320px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform-style: preserve-3d !important;
}

.coverflow-card {
    position: absolute !important;
    width: 320px !important;
    height: 280px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease, filter 0.5s ease, box-shadow 0.5s ease !important;
    cursor: pointer !important;
    user-select: none !important;
}

.coverflow-card a {
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.coverflow-img-wrapper {
    width: 100% !important;
    height: 82% !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
}

.coverflow-card-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 23, 43, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 22px !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.coverflow-card.active:hover .coverflow-card-overlay {
    opacity: 1 !important;
}

.coverflow-card-caption {
    height: 18% !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
}

.coverflow-card-caption span {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
}

/* 3D Coverflow State Positioning */
.coverflow-card.active {
    transform: translate3d(0, 0, 100px) rotateY(0deg) scale(1.1) !important;
    opacity: 1 !important;
    z-index: 10 !important;
    border-color: rgba(56, 189, 248, 0.8) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45), 0 0 35px rgba(56, 189, 248, 0.5) !important;
}

.coverflow-card.prev {
    transform: translate3d(-240px, 0, 0px) rotateY(32deg) scale(0.85) !important;
    opacity: 0.82 !important;
    z-index: 5 !important;
    filter: brightness(0.85) !important;
}

.coverflow-card.next {
    transform: translate3d(240px, 0, 0px) rotateY(-32deg) scale(0.85) !important;
    opacity: 0.82 !important;
    z-index: 5 !important;
    filter: brightness(0.85) !important;
}

.coverflow-card.far-prev {
    transform: translate3d(-420px, 0, -100px) rotateY(45deg) scale(0.7) !important;
    opacity: 0.85 !important;
    z-index: 2 !important;
    filter: brightness(0.75) !important;
}

.coverflow-card.far-next {
    transform: translate3d(420px, 0, -100px) rotateY(-45deg) scale(0.7) !important;
    opacity: 0.85 !important;
    z-index: 2 !important;
    filter: brightness(0.75) !important;
}

.coverflow-card.hidden-card {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0, 0, -500px) scale(0.5) !important;
    z-index: 0 !important;
}

/* Coverflow Navigation Buttons */
.coverflow-nav-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    color: #003b61 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    cursor: pointer !important;
    z-index: 20 !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.coverflow-nav-btn.prev-btn {
    left: 10px !important;
}

.coverflow-nav-btn.next-btn {
    right: 10px !important;
}

.coverflow-nav-btn:hover {
    background: #003b61 !important;
    color: #ffffff !important;
    transform: translateY(-50%) scale(1.12) !important;
    box-shadow: 0 12px 28px rgba(56, 189, 248, 0.5) !important;
}

/* Coverflow Dots Navigation */
.coverflow-dots {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

.coverflow-dot {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.coverflow-dot.active {
    width: 32px !important;
    border-radius: 12px !important;
    background: linear-gradient(90deg, #ff9933, #38bdf8) !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.6) !important;
}

@media (max-width: 768px) {
    .coverflow-stage {
        height: 320px !important;
    }
    .coverflow-card {
        width: 260px !important;
        height: 240px !important;
    }
    .coverflow-card.prev {
        transform: translate3d(-140px, 0, 0px) rotateY(25deg) scale(0.8) !important;
    }
    .coverflow-card.next {
        transform: translate3d(140px, 0, 0px) rotateY(-25deg) scale(0.8) !important;
    }
    .coverflow-card.far-prev,
    .coverflow-card.far-next {
        opacity: 0 !important;
    }
}

.bento-gallery-grid:not(.expanded) .bento-gallery-card:nth-child(n+9) {
    display: none !important;
}

.bento-gallery-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 246, 255, 0.95) 100%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
}

.bento-gallery-card a {
    text-decoration: none !important;
    display: block !important;
}

.bento-gallery-card:hover {
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.38), 0 0 25px rgba(56, 189, 248, 0.4) !important;
    border-color: rgba(56, 189, 248, 0.7) !important;
}

.bento-img-container {
    width: 100% !important;
    height: 180px !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.4s ease !important;
}

.bento-gallery-card:hover .bento-img-container {
    transform: scale(1.08) !important;
}

.bento-img-tag {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    background: rgba(0, 23, 43, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    color: #38bdf8 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    padding: 3px 9px !important;
    border-radius: 12px !important;
    letter-spacing: 0.5px !important;
    z-index: 2 !important;
}

.bento-img-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 23, 43, 0.75) 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    z-index: 1 !important;
}

.bento-gallery-card:hover .bento-img-overlay {
    opacity: 1 !important;
}

.bento-zoom-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #003b61 0%, #38bdf8 100%) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    box-shadow: 0 6px 20px rgba(56, 189, 248, 0.5) !important;
    transform: scale(0.8) !important;
    transition: transform 0.3s ease !important;
}

.bento-gallery-card:hover .bento-zoom-icon {
    transform: scale(1.1) !important;
}

.bento-img-caption {
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
}

.bento-img-caption span {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 750 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 82% !important;
    transition: color 0.25s ease !important;
}

.bento-gallery-card:hover .bento-img-caption span {
    color: #003b61 !important;
}

.bento-img-caption i {
    font-size: 12px !important;
    color: #38bdf8 !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
}

.bento-gallery-card:hover .bento-img-caption i {
    transform: translate(3px, -3px) !important;
    color: #ff9933 !important;
}

/* Photo Gallery Floating Card Frame */
.gallery-image-card {
    border-radius: 20px !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(6px) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
}

.gallery-image-card:hover {
    transform: translateY(-6px) scale(1.02) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35) !important;
}

.gallery-image-card .image-wrapper {
    height: 210px !important;
    width: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.gallery-image-card:hover .image-wrapper {
    transform: scale(1.08) !important;
}

/* Hover Dark Gradient Overlay & Glass Circle Zoom Icon */
.image-hover-overlay {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.65) 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.35s ease !important;
    backdrop-filter: blur(2px) !important;
}

.gallery-image-card:hover .image-hover-overlay {
    opacity: 1 !important;
}

.image-hover-overlay i {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
    transform: scale(0.7) !important;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.gallery-image-card:hover .image-hover-overlay i {
    transform: scale(1) !important;
}

/* Toggle Show-More Button Styling */
.gallery-action-row {
    display: flex !important;
    justify-content: center !important;
    margin-top: 25px !important;
}

.gallery-toggle-btn {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    padding: 9px 28px !important;
    border-radius: 30px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-transform: uppercase !important;
    backdrop-filter: blur(4px) !important;
}

.gallery-toggle-btn:hover {
    background: #ffffff !important;
    color: var(--theme-primary, #0b3c73) !important;
    border-color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

/* ==========================================================================
   PLACEMENT PARTNERS SECTION (DYNAMIC THEME SWITCHER LINKED & PRO DESIGN)
   ========================================================================== */

#partners-portal,
.placement-partners-section,
.gpa-placement-partners {
    padding: 45px 0 45px 0 !important;
    position: relative !important;
    overflow: hidden !important;
    transition: background 0.4s ease, background-color 0.4s ease, background-image 0.4s ease !important;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
}

/* Placement Partners Header Text Colors */
.partners-header .partners-title {
    color: #ffffff !important;
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    margin: 0 0 6px 0 !important;
}

.partners-header .partners-subtitle {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    margin-top: 8px !important;
}

.partners-header .partners-title-underline {
    background: #ff9933 !important;
    height: 3.5px !important;
    width: 60px !important;
    border-radius: 4px !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Theme Switcher Live Color Bindings for Placement Partners */
#partners-portal,
.placement-partners-section {
    background: linear-gradient(140deg, #00172b 0%, #002842 45%, #003b61 100%) !important;
    position: relative !important;
    overflow: hidden !important;
}

#partners-portal::before,
.placement-partners-section::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: 
        radial-gradient(ellipse at 15% 25%, rgba(56, 189, 248, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 75%, rgba(255, 153, 51, 0.12) 0%, transparent 55%),
        linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px) !important;
    background-size: 100% 100%, 100% 100%, 36px 36px, 36px 36px !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Partner Logo Card Styling */
.partner-logo-card {
    background: #ffffff !important;
    border-radius: 18px !important;
    padding: 18px 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    position: relative !important;
    overflow: hidden !important;
}

.partner-logo-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0% !important;
    height: 3.5px !important;
    background: linear-gradient(90deg, #ff9933, #38bdf8) !important;
    transition: width 0.35s ease !important;
    border-radius: 4px !important;
}

.partner-logo-card:hover {
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.32), 0 0 25px rgba(56, 189, 248, 0.3) !important;
    border-color: rgba(56, 189, 248, 0.6) !important;
}

.partner-logo-card:hover::after {
    width: 85% !important;
}

.partner-logo-card .partner-name {
    color: #0f172a !important;
    font-weight: 750 !important;
    font-size: 12.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: color 0.25s ease !important;
}

.partner-logo-card:hover .partner-name {
    color: #003b61 !important;
}

.partner-logo-card .partner-name i {
    font-size: 10px !important;
    color: #38bdf8 !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
}

.partner-logo-card:hover .partner-name i {
    transform: translate(3px, -3px) !important;
    color: #ff9933 !important;
}

/* Action Buttons */
.partners-toggle-btn,
.view-all-partners-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 22px !important;
    border-radius: 30px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
}

.partners-toggle-btn {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(8px) !important;
}

.partners-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
}

.view-all-partners-btn {
    background: linear-gradient(135deg, #ff9933 0%, #ff5500 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(255, 153, 51, 0.35) !important;
}

.view-all-partners-btn:hover {
    transform: translateY(-3px) scale(1.04) !important;
    box-shadow: 0 12px 28px rgba(255, 153, 51, 0.5) !important;
    color: #ffffff !important;
}

/* ============================================================
   NEXT-GEN PLACEMENT MARQUEE & METRICS BAR
   ============================================================ */

/* Placement Metrics Bar */
.partners-metrics-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin-bottom: 28px !important;
    position: relative !important;
    z-index: 2 !important;
}

.partner-metric-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 18px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 30px !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    color: #e2e8f0 !important;
    font-size: 13px !important;
    font-family: 'Outfit', sans-serif !important;
    transition: all 0.3s ease !important;
}

.partner-metric-chip:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 59, 97, 0.3) !important;
}

.partner-metric-chip i {
    font-size: 16px !important;
}

/* ============================================================
   HIGH-TECH INTERACTIVE PARTNERS GRID & FILTER BAR
   ============================================================ */

/* Filter Chips Bar */
.tech-filter-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-bottom: 30px !important;
    position: relative !important;
    z-index: 2 !important;
}

.tech-filter-chip {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #94a3b8 !important;
    padding: 8px 20px !important;
    border-radius: 25px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tech-filter-chip:hover {
    color: #ffffff !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    background: rgba(56, 189, 248, 0.15) !important;
    transform: translateY(-2px) !important;
}

.tech-filter-chip.active {
    background: linear-gradient(135deg, #003b61 0%, #38bdf8 100%) !important;
    color: #ffffff !important;
    border-color: rgba(56, 189, 248, 0.8) !important;
    box-shadow: 0 8px 22px rgba(56, 189, 248, 0.35) !important;
}

/* ============================================================
   BENTO GRID HIGH-TECH CORPORATE RECRUITER CARDS
   ============================================================ */
/* 5-Column Bento Grid (Default shows 2 rows = 10 cards) */
.bento-partners-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 18px !important;
    width: 100% !important;
}

.bento-partners-grid:not(.expanded) .bento-partner-card:nth-child(n+11) {
    display: none !important;
}

@media (max-width: 1199px) {
    .bento-partners-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .bento-partners-grid:not(.expanded) .bento-partner-card:nth-child(n+7) {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .bento-partners-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .bento-partners-grid:not(.expanded) .bento-partner-card:nth-child(n+5) {
        display: none !important;
    }
}

.bento-partner-card {
    background: linear-gradient(145deg, #ffffff 0%, #f0f7ff 100%) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
    border-radius: 22px !important;
    padding: 14px 14px 12px !important;
    box-shadow: 0 10px 30px rgba(0, 59, 97, 0.2), 0 0 15px rgba(56, 189, 248, 0.15) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
    min-height: 142px !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.bento-partner-card::after {
    content: '' !important;
    position: absolute !important;
    top: -60% !important;
    left: -60% !important;
    width: 220% !important;
    height: 220% !important;
    background: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.7) 50%, transparent 55%) !important;
    transform: rotate(30deg) translateY(-100%) !important;
    transition: transform 0.65s ease !important;
    pointer-events: none !important;
}

.bento-partner-card:hover::after {
    transform: rotate(30deg) translateY(100%) !important;
}

.bento-partner-card:hover {
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: 0 24px 55px rgba(0, 59, 97, 0.45), 0 0 35px rgba(56, 189, 248, 0.55), 0 0 15px rgba(255, 153, 51, 0.35) !important;
    border-color: #38bdf8 !important;
    background: #ffffff !important;
}

.bento-card-top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-bottom: 8px !important;
}

.bento-mini-chip {
    font-family: 'Outfit', sans-serif !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    padding: 2.5px 8px !important;
    border-radius: 10px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    background: rgba(0, 59, 97, 0.08) !important;
    color: #003b61 !important;
    border: 1px solid rgba(0, 59, 97, 0.15) !important;
}

.bento-mini-chip.core {
    background: rgba(255, 153, 51, 0.12) !important;
    color: #d97706 !important;
    border-color: rgba(255, 153, 51, 0.3) !important;
}

.bento-mini-chip.infra {
    background: rgba(56, 189, 248, 0.12) !important;
    color: #0284c7 !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
}

.bento-mini-chip.it {
    background: rgba(52, 211, 153, 0.12) !important;
    color: #059669 !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
}

.bento-verified-icon i {
    font-size: 13px !important;
    color: #10b981 !important;
    filter: drop-shadow(0 2px 6px rgba(16, 185, 129, 0.4)) !important;
}

.bento-logo-box {
    width: 100% !important;
    height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 246, 255, 0.9) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 14px !important;
    padding: 6px !important;
    box-shadow: inset 0 2px 6px rgba(0, 59, 97, 0.06), 0 0 10px rgba(56, 189, 248, 0.1) !important;
}

.bento-logo-box img {
    max-height: 44px !important;
    max-width: 105px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 3px 6px rgba(0, 59, 97, 0.15)) !important;
    transition: transform 0.3s ease, filter 0.3s ease !important;
}

.bento-partner-card:hover .bento-logo-box img {
    transform: scale(1.1) !important;
    filter: drop-shadow(0 5px 12px rgba(0, 59, 97, 0.3)) !important;
}

.bento-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 8px !important;
    border-top: 1px solid #e2e8f0 !important;
}

.bento-partner-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 80% !important;
    transition: color 0.25s ease !important;
}

.bento-partner-card:hover .bento-partner-title {
    color: #003b61 !important;
}

.bento-action-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #003b61 0%, #38bdf8 100%) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.35) !important;
    transition: all 0.25s ease !important;
}

.bento-partner-card:hover .bento-action-btn {
    background: linear-gradient(135deg, #ff9933 0%, #ff5500 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(255, 153, 51, 0.6) !important;
    transform: scale(1.18) rotate(15deg) !important;
}

/* 5-Column Tech Grid Showcase */
.tech-partners-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 18px !important;
    width: 100% !important;
}

@media (max-width: 1199px) {
    .tech-partners-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 991px) {
    .tech-partners-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Accordion limit on mobile when not expanded */
    .tech-partners-grid:not(.expanded) .tech-partner-card:nth-child(n+7) {
        display: none !important;
    }
}

/* Cyber-Glass Partner Card */
.tech-partner-card {
    background: #ffffff !important;
    border-radius: 18px !important;
    padding: 16px 14px 14px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    min-height: 140px !important;
}

.tech-partner-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: linear-gradient(90deg, #ff9933, #38bdf8) !important;
    opacity: 0.7 !important;
    transition: height 0.3s ease !important;
}

.tech-partner-card:hover {
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.32), 0 0 25px rgba(56, 189, 248, 0.35) !important;
    border-color: rgba(56, 189, 248, 0.6) !important;
}

.tech-partner-card:hover::before {
    height: 4px !important;
    opacity: 1 !important;
}

.tech-card-top-tag {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    color: #64748b !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    align-self: flex-start !important;
    margin-bottom: 6px !important;
}

.tech-logo-box {
    width: 100% !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
}

.tech-logo-box img {
    max-height: 48px !important;
    max-width: 110px !important;
    object-fit: contain !important;
    transition: transform 0.3s ease !important;
}

.tech-partner-card:hover .tech-logo-box img {
    transform: scale(1.08) !important;
}

.tech-partner-info {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding-top: 8px !important;
    border-top: 1px solid #f1f5f9 !important;
}

.tech-partner-name {
    font-family: 'Outfit', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 750 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 85% !important;
    transition: color 0.25s ease !important;
}

.tech-partner-card:hover .tech-partner-name {
    color: #003b61 !important;
}

.tech-link-arrow i {
    font-size: 11px !important;
    color: #38bdf8 !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
}

.tech-partner-card:hover .tech-link-arrow i {
    transform: translate(3px, -3px) !important;
    color: #ff9933 !important;
}

/* Dual Infinite Marquee Ribbon Container */
.partners-marquee-wrapper {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin: 10px 0 !important;
}

.partners-marquee-container {
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%) !important;
    padding: 6px 0 !important;
}

.partners-marquee-track {
    display: flex !important;
    gap: 18px !important;
    width: max-content !important;
    animation: marqueeLeft 42s linear infinite !important;
}

.partners-marquee-track.reverse {
    animation: marqueeRight 42s linear infinite !important;
}

.partners-marquee-track:hover {
    animation-play-state: paused !important;
}

@keyframes marqueeLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-33.333%); }
}

@keyframes marqueeRight {
    0% { transform: translateX(-33.333%); }
    100% { transform: translateX(0); }
}

/* Partner Marquee Card */
.partner-marquee-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 14px 22px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 220px !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    flex-shrink: 0 !important;
}

.partner-marquee-card:hover {
    transform: translateY(-6px) scale(1.04) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3), 0 0 20px rgba(56, 189, 248, 0.4) !important;
    border-color: rgba(56, 189, 248, 0.6) !important;
    background: #ffffff !important;
}

.marquee-logo-box {
    width: 85px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.marquee-logo-box img {
    max-height: 36px !important;
    max-width: 85px !important;
    object-fit: contain !important;
}

.marquee-partner-name {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    transition: color 0.25s ease !important;
}

.partner-marquee-card:hover .marquee-partner-name {
    color: #003b61 !important;
}

/* ==========================================================================
   ACADEMIC DEPARTMENTS CTA BANNER SECTION (DYNAMIC THEME SWITCHER LINKED & PRO DESIGN)
   ========================================================================== */

#dept-cta-portal,
.dept-cta-section {
    padding: 35px 20px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: background 0.4s ease, background-color 0.4s ease, background-image 0.4s ease !important;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.dept-cta-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

@media (max-width: 768px) {
    .dept-cta-container {
        flex-direction: column !important;
        text-align: center !important;
    }
}

.dept-cta-text {
    color: #ffffff !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    margin: 0 !important;
    letter-spacing: 0.3px !important;
}

.dept-cta-btn,
.dept-cta-btn i,
a.dept-cta-btn,
a.dept-cta-btn i {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
    padding: 9px 26px !important;
    border-radius: 30px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    backdrop-filter: blur(4px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
}

.dept-cta-btn:hover,
a.dept-cta-btn:hover {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

.dept-cta-btn:hover i,
a.dept-cta-btn:hover i {
    color: #0f172a !important;
}

/* Theme Switcher Live Color Bindings for Dept CTA Banner */
html[data-theme="navy"] .dept-cta-section,
body.theme-navy .dept-cta-section,
html[data-theme="default"] .dept-cta-section {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
}

html[data-theme="olive"] .dept-cta-section,
body.theme-green .dept-cta-section {
    background: linear-gradient(135deg, #1c2608 0%, #2e3d0f 50%, #4a5e1a 100%) !important;
}

html[data-theme="maroon"] .dept-cta-section,
body.theme-maroon .dept-cta-section {
    background: linear-gradient(135deg, #270808 0%, #3d0f0f 50%, #7b1e1e 100%) !important;
}

html[data-theme="gold"] .dept-cta-section,
body.theme-yellow .dept-cta-section {
    background: linear-gradient(135deg, #261c00 0%, #3d2e00 50%, #7a6000 100%) !important;
}

html[data-theme="purple"] .dept-cta-section,
body.theme-purple .dept-cta-section {
    background: linear-gradient(135deg, #17072b 0%, #2e1065 50%, #6b21a8 100%) !important;
}

/* ==========================================================================
   DYNAMIC THEME SWITCHER LINKED SECTIONS
   ========================================================================== */

.gpa-hub-section {
    padding: 50px 0 50px 0 !important;
    position: relative !important;
    overflow: hidden !important;
    transition: background 0.4s ease, background-color 0.4s ease, background-image 0.4s ease !important;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
}

.gpa-hub-header .gpa-hub-badge {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    backdrop-filter: blur(8px) !important;
}

.gpa-hub-header .gpa-hub-title {
    color: #ffffff !important;
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    margin-top: 8px !important;
}

.gpa-hub-header .gpa-hub-title span {
    color: #38bdf8 !important;
}

/* ==========================================================================
   SLOW CONTINUOUS 4-DIRECTION GRADIENT SWIRL ANIMATION
   ========================================================================== */

@keyframes slowGradientSwirl {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 50%; }
}

.gpa-hub-section,
.latest-images-section,
.placement-partners-section,
.dept-cta-section {
    background-size: 300% 300% !important;
    animation: slowGradientSwirl 18s ease infinite !important;
}

/* Multi-Stop 4-Direction Theme Gradients */
html[data-theme="navy"] #latest-images-portal,
html[data-theme="navy"] #partners-portal,
html[data-theme="navy"] .dept-cta-section,
body.theme-navy #latest-images-portal,
body.theme-navy #partners-portal,
body.theme-navy .dept-cta-section,
html[data-theme="default"] #latest-images-portal,
html[data-theme="default"] #partners-portal,
html[data-theme="default"] .dept-cta-section {
    background: linear-gradient(135deg, #0f172a 0%, #0369a1 35%, #1e293b 70%, #0f172a 100%) !important;
}

html[data-theme="olive"] #latest-images-portal,
html[data-theme="olive"] #partners-portal,
html[data-theme="olive"] .dept-cta-section,
body.theme-green #latest-images-portal,
body.theme-green #partners-portal,
body.theme-green .dept-cta-section {
    background: linear-gradient(135deg, #1c2608 0%, #4d7c0f 35%, #2e3d0f 70%, #1c2608 100%) !important;
}

html[data-theme="maroon"] #latest-images-portal,
html[data-theme="maroon"] #partners-portal,
html[data-theme="maroon"] .dept-cta-section,
body.theme-maroon #latest-images-portal,
body.theme-maroon #partners-portal,
body.theme-maroon .dept-cta-section {
    background: linear-gradient(135deg, #270808 0%, #991b1b 35%, #3d0f0f 70%, #270808 100%) !important;
}

html[data-theme="gold"] #latest-images-portal,
html[data-theme="gold"] #partners-portal,
html[data-theme="gold"] .dept-cta-section,
body.theme-yellow #latest-images-portal,
body.theme-yellow #partners-portal,
body.theme-yellow .dept-cta-section {
    background: linear-gradient(135deg, #261c00 0%, #a16207 35%, #3d2e00 70%, #261c00 100%) !important;
}

html[data-theme="purple"] #latest-images-portal,
html[data-theme="purple"] #partners-portal,
html[data-theme="purple"] .dept-cta-section,
body.theme-purple #latest-images-portal,
body.theme-purple #partners-portal,
body.theme-purple .dept-cta-section {
    background: linear-gradient(135deg, #17072b 0%, #7e22ce 35%, #2e1065 70%, #17072b 100%) !important;
}

/* ==========================================================================
   BRAND NEW EXECUTIVE BENTO GRID SYSTEM (.NEO-BENTO-SECTION) - PURE WHITE EDITION
   ========================================================================== */

.neo-bento-section {
    padding: 70px 0 !important;
    position: relative !important;
    overflow: hidden !important;
    transition: background 0.4s ease !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.bento-canvas-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.neo-bento-container {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    position: relative !important;
    z-index: 2 !important;
}

.neo-bento-header {
    text-align: center !important;
    margin-bottom: 40px !important;
}

.neo-bento-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(11, 60, 115, 0.08) !important;
    border: 1px solid rgba(11, 60, 115, 0.22) !important;
    color: #0b3c73 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 5px 16px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    box-shadow: 0 2px 8px rgba(11, 60, 115, 0.06) !important;
}

.neo-bento-pill i {
    color: #c2410c !important;
}

.neo-bento-title {
    color: #0b3c73 !important;
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    letter-spacing: -0.3px !important;
    font-family: 'Outfit', sans-serif !important;
    text-shadow: none !important;
}

.neo-bento-title span {
    color: #c2410c !important;
}

.neo-bento-subtitle {
    color: #64748b !important;
    font-size: 14px !important;
    max-width: 640px !important;
    margin: 8px auto 0 !important;
    line-height: 1.5 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
}

/* Bento Grid Layout */
.neo-bento-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}

@media (max-width: 1024px) {
    .neo-bento-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 576px) {
    .neo-bento-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Bento Card Shell - Modern Hover-Reveal Bento Card */
.bento-card {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 22px !important;
    padding: 24px 20px 20px 20px !important;
    min-height: 165px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
}

.bento-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    border-color: var(--card-accent, #0284c7) !important;
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12), 0 0 25px var(--card-glow, rgba(2, 132, 199, 0.25)) !important;
    background: #ffffff !important;
}

/* Top Row: Icon + Badge */
.bento-chip-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
}

.bento-icon-box {
    width: 60px !important;
    height: 60px !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    color: var(--card-accent, #0284c7) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
}

.bento-icon-box img {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
}

.bento-card:hover .bento-icon-box {
    transform: scale(1.1) rotate(4deg) !important;
    border-color: var(--card-accent, #0284c7) !important;
    box-shadow: 0 8px 20px var(--card-glow, rgba(2, 132, 199, 0.3)) !important;
    background: #ffffff !important;
}

/* Badge */
.bento-badge {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    padding: 4px 11px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    background: #f8fafc !important;
    color: var(--card-accent, #0284c7) !important;
    border: 1px solid var(--card-badge-border, #cbd5e1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.bento-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: currentColor !important;
    display: inline-block !important;
    box-shadow: 0 0 6px currentColor !important;
}

/* Body & Title */
.bento-chip-body {
    flex-grow: 1 !important;
}

.bento-chip-body h3.bento-title-main {
    color: #0f172a !important;
    font-size: 1.18rem !important;
    font-weight: 800 !important;
    margin: 6px 0 0 0 !important;
    line-height: 1.3 !important;
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: -0.2px !important;
    transition: color 0.3s ease !important;
}

.bento-card:hover .bento-chip-body h3.bento-title-main {
    color: var(--card-accent, #0284c7) !important;
}

/* Hover Reveal Details */
.bento-reveal-badge {
    opacity: 0;
    transform: translateY(6px);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.bento-card:hover .bento-reveal-badge {
    opacity: 1;
    transform: translateY(0);
}

.bento-reveal-details {
    max-height: 0;
    opacity: 0;
    transform: translateY(12px);
    overflow: hidden;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.bento-card:hover .bento-reveal-details {
    max-height: 160px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 10px;
    pointer-events: auto;
}

.bento-chip-body p {
    color: #64748b !important;
    font-size: 12.5px !important;
    margin: 0 !important;
    line-height: 1.45 !important;
}

/* Accent Divider Line between body and footer */
.bento-divider-line {
    height: 1px !important;
    background: #f1f5f9 !important;
    margin: 12px 0 0 0 !important;
}

/* Footer Action */
.bento-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 10px !important;
    margin-top: 0 !important;
}

.bento-action-lbl {
    color: var(--card-accent, #0284c7) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
}

/* Glowing Vibrant 3D Circle Arrow Button */
.bento-arrow-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: var(--card-btn-grad, linear-gradient(135deg, #0284c7, #0369a1)) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    box-shadow: 0 4px 12px var(--card-glow, rgba(2, 132, 199, 0.35)) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.bento-card:hover .bento-arrow-btn {
    transform: translateX(4px) scale(1.1) !important;
    box-shadow: 0 0 18px var(--card-accent, #0284c7) !important;
}

/* High Contrast Vibrant Theme Colors for Bento Cards */
.bento-theme-cyan {
    --card-accent: #0284c7;
    --card-badge-border: rgba(2, 132, 199, 0.3);
    --card-glow: rgba(2, 132, 199, 0.25);
    --card-btn-grad: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
}

.bento-theme-amber {
    --card-accent: #d97706;
    --card-badge-border: rgba(217, 119, 6, 0.3);
    --card-glow: rgba(217, 119, 6, 0.25);
    --card-btn-grad: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.bento-theme-purple {
    --card-accent: #7c3aed;
    --card-badge-border: rgba(124, 58, 237, 0.3);
    --card-glow: rgba(124, 58, 237, 0.25);
    --card-btn-grad: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.bento-theme-gold {
    --card-accent: #b45309;
    --card-badge-border: rgba(180, 83, 9, 0.3);
    --card-glow: rgba(180, 83, 9, 0.25);
    --card-btn-grad: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

.bento-theme-crimson {
    --card-accent: #dc2626;
    --card-badge-border: rgba(220, 38, 38, 0.3);
    --card-glow: rgba(220, 38, 38, 0.25);
    --card-btn-grad: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.bento-theme-orange {
    --card-accent: #ea580c;
    --card-badge-border: rgba(234, 88, 12, 0.3);
    --card-glow: rgba(234, 88, 12, 0.25);
    --card-btn-grad: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.bento-theme-blue {
    --card-accent: #2563eb;
    --card-badge-border: rgba(37, 99, 235, 0.3);
    --card-glow: rgba(37, 99, 235, 0.25);
    --card-btn-grad: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.bento-theme-emerald {
    --card-accent: #059669;
    --card-badge-border: rgba(5, 150, 105, 0.3);
    --card-glow: rgba(5, 150, 105, 0.25);
    --card-btn-grad: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* ============================================================
   GLOBAL PREMIUM HERO BANNER - DYNAMIC THEME SUPPORT
   ============================================================ */
.premium-page-banner {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: linear-gradient(135deg, var(--theme-primary, #0b3c73) 0%, var(--theme-primary-dark, #062b54) 50%, #060e1a 100%);
    padding: 28px 0 !important;
    margin-bottom: 0 !important;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 -20px 40px rgba(0, 0, 0, 0.3);
}
.affiliation-container {
    margin-top: 10px !important;
    padding-top: 0 !important;
}
.premium-page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center center;
    mask-image: radial-gradient(circle at center, black 40%, transparent 95%);
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 95%);
    pointer-events: none;
    z-index: 1;
}
.premium-page-banner-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 153, 51, 0.05) 15%, 
        var(--theme-accent, #ff9933) 50%, 
        rgba(255, 153, 51, 0.05) 85%, 
        transparent 100%);
    z-index: 3;
}
.banner-glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.18;
    pointer-events: none;
    z-index: 1;
}
.banner-glow-orb.orb-1 {
    width: 280px;
    height: 280px;
    top: -50px;
    left: -50px;
    background: var(--theme-accent, #ff9933);
}
.banner-glow-orb.orb-2 {
    width: 320px;
    height: 320px;
    bottom: -80px;
    right: -50px;
    background: var(--theme-primary, #0b3c73);
}
.premium-page-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
}
.premium-banner-tag {
    display: none !important;
}
.premium-page-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2.3rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 18px;
    letter-spacing: -1px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.premium-breadcrumb {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(13, 27, 42, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 6px 20px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.premium-breadcrumb a {
    color: #94a3b8;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    transition: all 0.3s ease;
}
.premium-breadcrumb a:hover {
    color: #ffffff;
}
.premium-breadcrumb .sep {
    color: #475569;
    margin: 0 12px;
    font-size: 10px;
}
.premium-breadcrumb .curr {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
}
@media(max-width: 768px) {
    .premium-page-banner { padding: 55px 0; margin-bottom: 30px; }
    .premium-page-title { font-size: 2.2rem; margin-bottom: 14px; }
    .premium-breadcrumb { padding: 8px 20px; font-size: 12px; }
}

/* ============================================================
   ULTRA NEXT-GEN 3D MAGNETIC SIDEBAR SYSTEM (JS ENHANCED)
   ============================================================ */
.sidebar-box.ultra-pro-sidebar {
    position: relative !important;
    transform-style: preserve-3d !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease !important;
    border: 1px solid rgba(255, 153, 51, 0.25) !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: 
        0 20px 45px rgba(11, 60, 115, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    will-change: transform;
    overflow: hidden !important;
}

.sidebar-box.ultra-pro-sidebar:hover {
    box-shadow: 
        0 30px 60px rgba(11, 60, 115, 0.14),
        0 4px 15px rgba(255, 153, 51, 0.12) !important;
    border-color: var(--theme-accent, #ff9933) !important;
}

/* Dynamic Radial Neon Spotlight Overlay */
.sidebar-glow-spotlight {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 20px;
    background: radial-gradient(
        350px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(255, 153, 51, 0.15) 0%,
        rgba(11, 60, 115, 0.05) 50%,
        transparent 80%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

/* Sidebar Header & Content Header Box 100% Unified Styling */
.sidebar-header,
.content-header-box {
    position: relative !important;
    z-index: 2 !important;
    background: linear-gradient(135deg, #061a33 0%, #0b3c73 50%, #06264c 100%) !important;
    padding: 28px 32px !important; /* Increased height & padding */
    min-height: 84px !important; /* Bold taller height */
    font-size: 18.5px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    border-bottom: none !important;
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    box-shadow: 0 8px 25px rgba(11, 60, 115, 0.18) !important;
    overflow: hidden !important;
}

.sidebar-header {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.content-header-box {
    border-radius: 20px !important;
    margin-bottom: 16px !important;
}

/* Animated Neon Bottom Line in Header */
.sidebar-header::after,
.content-header-box::after {
    content: '' !important;
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 4px !important;
    transform: none !important;
    background: linear-gradient(90deg, 
        var(--theme-accent, #ff9933) 0%, 
        #ff5500 50%, 
        transparent 100%) !important;
    box-shadow: 0 0 14px rgba(255, 153, 51, 0.9) !important;
}

.sidebar-header i,
.content-header-box h2::before {
    color: var(--theme-accent, #ff9933) !important;
    font-size: 22px !important;
    text-shadow: 0 0 14px rgba(255, 153, 51, 0.7);
    animation: pulse-icon-glow 3s infinite ease-in-out;
}

@keyframes pulse-icon-glow {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255,153,51,0.5)); }
    50% { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(255,153,51,0.9)); }
}

/* Sidebar List Container */
.sidebar-list {
    position: relative !important;
    z-index: 2 !important;
    list-style: none !important;
    list-style-type: none !important;
    padding: 10px 10px !important;
    margin: 0 !important;
}

.sidebar-list li {
    list-style: none !important;
    list-style-type: none !important;
    padding: 3px 0 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    border-bottom: none !important;
}

.sidebar-list li::before,
.sidebar-list li::after {
    content: none !important;
    display: none !important;
}

.sidebar-list a {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 13px 18px !important;
    text-decoration: none !important;
    color: #334155 !important;
    font-size: 14.5px !important;
    font-weight: 650 !important;
    border-radius: 14px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 2 !important;
    background: transparent !important;
    font-family: 'Inter', sans-serif !important;
}

.sidebar-list a i.sidebar-item-icon {
    font-size: 17px !important;
    color: var(--theme-primary, #0b3c73) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    flex-shrink: 0 !important;
}

.sidebar-list a i.sidebar-arrow-icon {
    font-size: 13px !important;
    color: #94a3b8 !important;
    margin-left: auto !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    opacity: 0.5 !important;
}

/* Hover State */
.sidebar-list a:hover {
    background: rgba(255, 153, 51, 0.08) !important;
    color: var(--theme-accent, #ff9933) !important;
    transform: translateX(6px) !important;
    box-shadow: 0 4px 15px rgba(255, 153, 51, 0.08) !important;
}

.sidebar-list a:hover i.sidebar-item-icon {
    color: var(--theme-accent, #ff9933) !important;
    transform: scale(1.25) rotate(8deg) !important;
}

.sidebar-list a:hover i.sidebar-arrow-icon {
    color: var(--theme-accent, #ff9933) !important;
    transform: translateX(4px) !important;
    opacity: 1 !important;
}

/* Active State */
.sidebar-list a.active {
    background: linear-gradient(135deg, var(--theme-primary, #0b3c73) 0%, var(--theme-primary-dark, #062b54) 100%) !important;
    color: #ffffff !important;
    font-weight: 750 !important;
    box-shadow: 
        0 10px 25px rgba(11, 60, 115, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    border-left: 4px solid var(--theme-accent, #ff9933) !important;
}

.sidebar-list a.active i.sidebar-item-icon {
    color: var(--theme-accent, #ff9933) !important;
    text-shadow: 0 0 10px rgba(255, 153, 51, 0.6) !important;
    transform: scale(1.1) !important;
}

.sidebar-list a.active i.sidebar-arrow-icon {
    color: var(--theme-accent, #ff9933) !important;
    opacity: 1 !important;
    transform: translateX(2px) !important;
}

/* Soundless Click Ripple Effect */
.sidebar-click-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 153, 51, 0.35);
    transform: scale(0);
    animation: ripple-anim 0.6s linear;
    pointer-events: none;
}

@keyframes ripple-anim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Sidebar Header Canvas Overlay */
.sidebar-header-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

/* Sidebar Live Active Pill Badge with Pulsing Dot */
.sidebar-live-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: 6px !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    background: rgba(255, 153, 51, 0.18) !important;
    border: 1px solid rgba(255, 153, 51, 0.4) !important;
}

.sidebar-live-pill .live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff9933;
    box-shadow: 0 0 8px #ff9933;
    animation: live-dot-pulse 1.8s infinite ease-in-out;
}

@keyframes live-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 6px #ff9933; }
    50% { transform: scale(1.4); opacity: 0.5; box-shadow: 0 0 14px #ff9933; }
}

/* ============================================================
   SIDEBAR LABORATORY POPUP MODAL (POP WALA LUXURY DESIGN)
   ============================================================ */
.sidebar-lab-pop-trigger {
    cursor: pointer !important;
}

.lab-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(6, 26, 51, 0.72) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 999999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.lab-modal-overlay.active {
    display: flex !important;
    opacity: 1 !important;
}

.lab-modal-dialog {
    background: #ffffff !important;
    border-radius: 24px !important;
    width: 100% !important;
    max-width: 680px !important;
    box-shadow: 
        0 25px 60px rgba(6, 26, 51, 0.35),
        0 0 0 1px rgba(11, 60, 115, 0.1) !important;
    transform: scale(0.92) translateY(24px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
    position: relative !important;
    animation: labDialogPopIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes labDialogPopIn {
    0% {
        transform: scale(0.9) translateY(20px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.lab-modal-header {
    background: linear-gradient(135deg, #061a33 0%, #0b3c73 60%, #06264c 100%) !important;
    padding: 22px 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    overflow: hidden !important;
}

.lab-modal-header::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #ff9933 0%, #ff5500 50%, transparent 100%) !important;
    box-shadow: 0 0 12px rgba(255, 153, 51, 0.8) !important;
}

.lab-modal-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.lab-modal-icon-badge {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    background: rgba(255, 153, 51, 0.18) !important;
    border: 1px solid rgba(255, 153, 51, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ff9933 !important;
    font-size: 22px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 16px rgba(255, 153, 51, 0.3) !important;
}

.lab-modal-title {
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    letter-spacing: -0.3px !important;
}

.lab-modal-subtitle {
    color: #cbd5e1 !important;
    font-size: 13px !important;
    margin: 3px 0 0 0 !important;
}

.lab-modal-close {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

.lab-modal-close:hover {
    background: #ff5500 !important;
    border-color: #ff5500 !important;
    transform: rotate(90deg) scale(1.1) !important;
    color: #ffffff !important;
}

.lab-modal-body {
    padding: 22px 26px !important;
    max-height: 65vh !important;
    overflow-y: auto !important;
    background: #f8fafc !important;
}

.lab-modal-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 13px !important;
}

.lab-card-link {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 16px 20px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

.lab-card-link:hover {
    border-color: var(--theme-accent, #ff9933) !important;
    transform: translateY(-3px) translateX(4px) !important;
    box-shadow: 0 12px 30px rgba(11, 60, 115, 0.12) !important;
    background: #ffffff !important;
}

.lab-card-link.active-lab-card {
    border-color: var(--theme-primary, #0b3c73) !important;
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%) !important;
    box-shadow: 0 8px 24px rgba(11, 60, 115, 0.14) !important;
}

.lab-card-icon-wrap {
    width: 50px !important;
    height: 50px !important;
    border-radius: 14px !important;
    background: rgba(11, 60, 115, 0.08) !important;
    color: var(--theme-primary, #0b3c73) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    flex-shrink: 0 !important;
    transition: all 0.3s ease !important;
}

.lab-card-link:hover .lab-card-icon-wrap {
    background: linear-gradient(135deg, #ff9933 0%, #ff5500 100%) !important;
    color: #ffffff !important;
    transform: scale(1.1) rotate(6deg) !important;
    box-shadow: 0 6px 16px rgba(255, 153, 51, 0.35) !important;
}

.lab-card-link.active-lab-card .lab-card-icon-wrap {
    background: linear-gradient(135deg, #0b3c73 0%, #062b54 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(11, 60, 115, 0.3) !important;
}

.lab-card-content {
    flex-grow: 1 !important;
    min-width: 0 !important;
}

.lab-card-tag {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--theme-accent, #ff9933) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 2px !important;
}

.lab-card-title {
    font-size: 16px !important;
    font-weight: 750 !important;
    color: #0f172a !important;
    margin: 0 0 3px 0 !important;
    font-family: 'Outfit', sans-serif !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.lab-card-desc {
    font-size: 13px !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.lab-card-action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
    transition: all 0.3s ease !important;
}

.lab-card-link:hover .lab-card-action {
    background: var(--theme-accent, #ff9933) !important;
    color: #ffffff !important;
    transform: translateX(4px) !important;
}

.lab-active-badge {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    background: rgba(16, 185, 129, 0.15) !important;
    color: #059669 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.lab-active-badge::before {
    content: '' !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 6px #10b981 !important;
}

.lab-modal-footer {
    padding: 14px 28px !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.lab-modal-footer-hint {
    font-size: 12.5px !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

.lab-modal-dismiss-btn {
    padding: 6px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.lab-modal-dismiss-btn:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

/* ============================================================
   ULTRA HERO CALLOUT CARD (EXECUTIVE PRO MAX)
   ============================================================ */
.ultra-hero-callout-card {
    position: relative !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%) !important;
    border: 1px solid rgba(11, 60, 115, 0.14) !important;
    border-left: 5px solid var(--theme-accent, #ff9933) !important;
    border-radius: 18px !important;
    padding: 26px 30px !important;
    box-shadow: 
        0 15px 35px rgba(11, 60, 115, 0.06),
        0 2px 6px rgba(0, 0, 0, 0.02) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
}

.ultra-hero-callout-card::before {
    content: '\F2B4'; /* Bootstrap quote icon watermark */
    font-family: 'bootstrap-icons' !important;
    position: absolute;
    top: -15px;
    right: 20px;
    font-size: 110px;
    color: rgba(11, 60, 115, 0.03);
    pointer-events: none;
    z-index: 0;
}

.ultra-hero-callout-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 
        0 25px 50px rgba(11, 60, 115, 0.12),
        0 4px 15px rgba(255, 153, 51, 0.15) !important;
    border-color: var(--theme-accent, #ff9933) !important;
}

.ultra-badge-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, var(--theme-primary, #0b3c73) 0%, #062b54 100%) !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    letter-spacing: 0.8px !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 12px rgba(11, 60, 115, 0.2) !important;
    text-transform: uppercase !important;
}

.ultra-hero-callout-body {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 14px !important;
}

.ultra-hero-text {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: 1.02rem !important;
    line-height: 1.85 !important;
    color: #1e293b !important;
    font-weight: 500 !important;
    margin-bottom: 0 !important;
    text-align: justify !important;
}

.ultra-hero-text strong,
.ultra-hero-text b {
    color: var(--theme-primary, #0b3c73) !important;
    font-weight: 750 !important;
}

/* ============================================================
   UNIFIED ULTRA PRO CONTENT BOX (MATCHING SIDEBAR 100%)
   ============================================================ */
.ultra-pro-content-box {
    position: relative !important;
    transform-style: preserve-3d !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease !important;
    border: 1px solid rgba(255, 153, 51, 0.25) !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: 
        0 20px 45px rgba(11, 60, 115, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    will-change: transform;
    overflow: hidden !important;
}

.ultra-pro-content-box:hover {
    box-shadow: 
        0 30px 60px rgba(11, 60, 115, 0.14),
        0 4px 15px rgba(255, 153, 51, 0.12) !important;
    border-color: var(--theme-accent, #ff9933) !important;
}

.ultra-pro-content-inner {
    position: relative !important;
    z-index: 2 !important;
    padding: 28px 32px !important;
}

.ultra-pro-body-text {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: 1.05rem !important;
    line-height: 1.90 !important;
    color: #1e293b !important;
    font-weight: 480 !important;
    margin-bottom: 0 !important;
    text-align: justify !important;
}

.ultra-pro-body-text::first-letter {
    float: left;
    font-size: 2.8rem;
    line-height: 0.8;
    font-weight: 900;
    margin: 4px 14px 6px 0;
    color: #ffffff;
    background: linear-gradient(135deg, var(--theme-accent, #ff9933) 0%, #ff6f00 100%);
    padding: 10px 14px;
    border-radius: 14px;
    font-family: 'Outfit', sans-serif;
    box-shadow: 0 10px 25px rgba(255, 153, 51, 0.35);
}

.ultra-pro-body-text strong,
.ultra-pro-body-text b {
    color: var(--theme-primary, #0b3c73) !important;
    font-weight: 750 !important;
}

/* ============================================================
   ULTRA NARRATIVE PARAGRAPHS
   ============================================================ */
.ultra-narrative-p {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: 1.05rem !important;
    line-height: 1.90 !important;
    color: #1e293b !important;
    font-weight: 480 !important;
    margin-bottom: 24px !important;
    text-align: justify !important;
}

.ultra-narrative-p strong,
.ultra-narrative-p b {
    color: var(--theme-primary, #0b3c73) !important;
    font-weight: 750 !important;
}

/* Executive Drop-Cap Initial Letter Badge (Exactly like user screenshot) */
.ultra-narrative-p:first-of-type::first-letter,
.history-drop-cap {
    float: left !important;
    font-size: 2.6rem !important;
    line-height: 0.85 !important;
    font-weight: 900 !important;
    margin: 4px 16px 8px 0 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #0284c7 0%, #ff9933 100%) !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    font-family: 'Outfit', sans-serif !important;
    border: 2.5px solid #ffffff !important;
    box-shadow: 0 10px 25px rgba(2, 132, 199, 0.25), 0 4px 10px rgba(255, 153, 51, 0.3) !important;
}

/* ============================================================
   CONTENT HEADER BOX (MATCHING SIDEBAR HEADER 100%)
   ============================================================ */
.content-header-box {
    position: relative !important;
    background: linear-gradient(135deg, #061a33 0%, #0b3c73 50%, #06264c 100%) !important;
    padding: 18px 24px !important;
    border-radius: 16px !important;
    border-bottom: none !important;
    box-shadow: 0 10px 30px rgba(11, 60, 115, 0.15) !important;
    margin-bottom: 16px !important; /* Reduced vertical gap */
    overflow: hidden !important;
}

.content-header-box::after {
    content: '' !important;
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 3.5px !important;
    transform: none !important;
    background: linear-gradient(90deg, 
        var(--theme-accent, #ff9933) 0%, 
        #00bcd4 50%, 
        transparent 100%) !important;
    box-shadow: 0 0 12px rgba(255, 153, 51, 0.8) !important;
}

.content-header-box h2 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.content-header-box h2::before {
    content: '\F2B4'; /* Bootstrap quote / bookmark icon */
    font-family: 'bootstrap-icons' !important;
    color: var(--theme-accent, #ff9933) !important;
    font-size: 20px !important;
    text-shadow: 0 0 10px rgba(255, 153, 51, 0.6);
}

/* ============================================================
   ULTRA EXECUTIVE QUICK STATS STRIP & HEADER BADGES
   ============================================================ */
.ultra-header-live-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    background: rgba(255, 153, 51, 0.18) !important;
    border: 1px solid rgba(255, 153, 51, 0.4) !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    position: relative !important;
    z-index: 2 !important;
}

.ultra-quick-stats-strip {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 12px 18px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(11, 60, 115, 0.1) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    backdrop-filter: blur(10px) !important;
}

.quick-stat-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    color: #334155 !important;
    transition: all 0.3s ease !important;
}

.quick-stat-item:hover {
    background: #ffffff !important;
    border-color: var(--theme-accent, #ff9933) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 153, 51, 0.12) !important;
}

/* Executive Pure Text Inline Links (No Button Capsule) */
.executive-inline-link,
.cool-link-pill {
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 2px !important;
    margin: 0 2px !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: #0284c7 !important;
    font-weight: 650 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(2, 132, 199, 0.4) !important;
    text-underline-offset: 3px !important;
    transition: all 0.25s ease !important;
}

.executive-inline-link:hover,
.cool-link-pill:hover {
    background: transparent !important;
    color: var(--theme-accent, #ff9933) !important;
    text-decoration-color: var(--theme-accent, #ff9933) !important;
    transform: none !important;
    box-shadow: none !important;
}

.quick-stat-item i {
    font-size: 15px !important;
}

/* ============================================================
   GLOBAL DUAL-TONE BACKGROUND & AMBIENT BLURRED ORBS (ALL PAGES)
   ============================================================ */
body {
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 49.8%, rgba(11, 60, 115, 0.03) 49.8%, rgba(11, 60, 115, 0.05) 50%, #f4f6f9 50.2%, #f4f6f9 100%) !important;
    background-attachment: fixed !important;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 5%;
    left: 10%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255, 153, 51, 0.05) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

body::after {
    content: '';
    position: fixed;
    bottom: 5%;
    right: 10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(11, 60, 115, 0.05) 0%, transparent 70%);
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}

/* ============================================================
   CARD-FREE PURE EXECUTIVE CONTENT WRAPPER (NO WHITE OUTER BOX)
   ============================================================ */
.content-card-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ============================================================
   ULTRA EXECUTIVE NARRATIVE CANVAS & FROSTED GLASS ELEVATION
   ============================================================ */
.content-description {
    position: relative !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(11, 60, 115, 0.1) !important;
    border-radius: 24px !important;
    padding: 36px 40px !important;
    box-shadow: 
        0 20px 50px rgba(11, 60, 115, 0.06),
        0 2px 6px rgba(0, 0, 0, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.content-description:hover {
    box-shadow: 
        0 28px 65px rgba(11, 60, 115, 0.1),
        0 4px 15px rgba(255, 153, 51, 0.08) !important;
    border-color: rgba(255, 153, 51, 0.3) !important;
}

/* Executive Callout Quote Box */
.executive-callout-quote {
    position: relative !important;
    background: linear-gradient(135deg, rgba(255, 153, 51, 0.06) 0%, rgba(11, 60, 115, 0.03) 100%) !important;
    border-left: 4px solid var(--theme-accent, #ff9933) !important;
    border-radius: 0 16px 16px 0 !important;
    padding: 20px 24px !important;
    margin: 24px 0 !important;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: 1.05rem !important;
    line-height: 1.85 !important;
    color: #0f172a !important;
    font-weight: 550 !important;
}

.executive-callout-quote::before {
    content: '\F2B4';
    font-family: 'bootstrap-icons' !important;
    color: var(--theme-accent, #ff9933) !important;
    font-size: 24px !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
}

/* Sidebar Nav Box Executive Ultra Pro Upgrade — Left Aligned & High Contrast */
.sidebar-box,
.dept-nav-card,
.ultra-pro-sidebar {
    position: relative !important;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid rgba(11, 60, 115, 0.14) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 16px 40px rgba(11, 60, 115, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sidebar-box:hover,
.dept-nav-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 24px 50px rgba(11, 60, 115, 0.12) !important;
    border-color: rgba(255, 153, 51, 0.35) !important;
}

.sidebar-header,
.dept-nav-title {
    background: linear-gradient(135deg, #061a33 0%, #0b3c73 50%, #06264c 100%) !important;
    padding: 18px 20px !important;
    font-family: 'Outfit', sans-serif !important;
    border-bottom: none !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 14px !important;
    position: relative !important;
    box-shadow: 0 6px 20px rgba(11, 60, 115, 0.18) !important;
    border-top-left-radius: 18px !important;
    border-top-right-radius: 18px !important;
    overflow: hidden !important;
    min-height: 78px !important;
}

.sidebar-header-icon-box {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 12px !important;
    background: rgba(56, 189, 248, 0.14) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
    z-index: 3 !important;
    flex-shrink: 0 !important;
    transition: all 0.3s ease !important;
}

.sidebar-header-icon-box i {
    color: #38bdf8 !important;
    font-size: 20px !important;
    text-shadow: 0 0 12px rgba(56, 189, 248, 0.6) !important;
    margin: 0 !important;
    line-height: 1 !important;
    display: block !important;
}

.sidebar-header-title-text {
    font-size: 15px !important;
    font-weight: 850 !important;
    color: #ffffff !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    word-break: break-word !important;
    display: block !important;
    z-index: 3 !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.sidebar-header::after,
.dept-nav-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3.5px !important;
    background: linear-gradient(90deg, var(--theme-accent, #ff9933) 0%, #00bcd4 50%, transparent 100%) !important;
    box-shadow: 0 0 12px rgba(255, 153, 51, 0.8) !important;
    z-index: 3 !important;
}

.sidebar-list,
.dept-nav-list {
    list-style: none !important;
    padding: 10px 10px !important;
    margin: 0 !important;
}

.sidebar-list li,
.dept-nav-item {
    list-style: none !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    border-bottom: none !important;
}

.sidebar-list a,
.dept-nav-item a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: row !important;
    gap: 13px !important;
    padding: 13px 18px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important; /* Dark high-contrast text */
    border-radius: 14px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
    background: transparent !important;
    border-bottom: none !important;
    opacity: 1 !important;
}

.sidebar-list a i.sidebar-item-icon,
.dept-nav-item a i:first-child,
.sidebar-list a > i:first-child {
    font-size: 18px !important;
    color: var(--theme-primary, #0b3c73) !important; /* Sharp dark navy icon */
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.25s ease !important;
    flex-shrink: 0 !important;
}

.sidebar-item-text,
.sidebar-list a span,
.dept-nav-item a span {
    text-align: left !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    opacity: 1 !important;
}

.sidebar-list a i.sidebar-arrow-icon,
.dept-nav-item a i.bi-chevron-right,
.sidebar-list a > i:last-child {
    font-size: 13px !important;
    color: #94a3b8 !important; /* Sharp readable chevron */
    margin-left: auto !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
    transition: all 0.25s ease !important;
}

/* Hover State */
.sidebar-list a:hover,
.dept-nav-item a:hover {
    background: rgba(255, 153, 51, 0.10) !important;
    color: var(--theme-accent, #ff9933) !important;
    transform: translateX(5px) !important;
}

.sidebar-list a:hover i.sidebar-item-icon,
.sidebar-list a:hover span,
.sidebar-list a:hover i.sidebar-arrow-icon,
.dept-nav-item a:hover i,
.dept-nav-item a:hover span {
    color: var(--theme-accent, #ff9933) !important;
}

/* Active State — Dark Navy Pill with Glowing Cyan/Saffron Indicator */
.sidebar-list a.active,
.dept-nav-item.active a {
    background: linear-gradient(135deg, #061a33 0%, #0b3c73 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 10px 25px rgba(11, 60, 115, 0.24) !important;
    border-left: 4.5px solid var(--theme-accent, #ff9933) !important;
}

.sidebar-list a.active i.sidebar-item-icon,
.sidebar-list a.active span,
.sidebar-list a.active i.sidebar-arrow-icon,
.dept-nav-item.active a i,
.dept-nav-item.active a span {
    color: #ffffff !important;
    opacity: 1 !important;
}

.sidebar-list a.active i.sidebar-item-icon,
.dept-nav-item.active a i:first-child {
    color: var(--theme-accent, #ff9933) !important;
}

/* ============================================================
   ACADEMIC MEGA MENU (LAPTOP & DESKTOP ULTRA PRO VIEW)
   ============================================================ */
.academic-mega-nav {
    position: relative;
}
.academic-mega-dropdown {
    width: 640px !important;
    max-width: 92vw !important;
    background: #0d1527 !important;
    border: 1px solid rgba(255, 153, 51, 0.3) !important;
    border-top: 4px solid #ff9933 !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 30px rgba(255, 153, 51, 0.15) !important;
    padding: 20px !important;
    margin-top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 1050 !important;
}

@media (min-width: 992px) {
    .gpa-main-navbar .dropdown:hover > .academic-mega-dropdown {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        animation: academicSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
}

@keyframes academicSlideDown {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.academic-mega-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
    margin-bottom: 16px;
}
.academic-mega-title {
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    letter-spacing: 0.5px;
}
.academic-mega-subtitle {
    color: #94a3b8;
    font-size: 12.5px;
    margin-top: 2px;
}

.academic-mega-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.academic-grid-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.academic-grid-item:hover {
    background: rgba(255, 153, 51, 0.14) !important;
    border-color: rgba(255, 153, 51, 0.45) !important;
    transform: translateX(4px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.academic-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(255, 153, 51, 0.15);
    color: #ff9933;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.academic-grid-item:hover .academic-item-icon {
    background: #ff9933;
    color: #0d1527;
    transform: scale(1.08);
}

.academic-item-title {
    color: #ffffff;
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.3;
    font-family: 'Poppins', sans-serif;
    transition: color 0.2s ease;
}

.academic-grid-item:hover .academic-item-title {
    color: #ff9933;
}

/* Mobile Responsiveness for Academic Mega Menu */
@media (max-width: 991px) {
    .academic-mega-dropdown {
        width: 100% !important;
        position: static !important;
        transform: none !important;
        background: rgba(13, 21, 39, 0.95) !important;
        box-shadow: none !important;
        margin: 8px 0 !important;
        padding: 12px !important;
    }
    .academic-mega-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .academic-mega-header {
        padding-bottom: 8px;
        margin-bottom: 10px;
    }
}

/* ==========================================================================
   BRAND NEW ULTRA-PREMIUM EXECUTIVE ADMINISTRATORS & WELCOME SECTION UI
   ========================================================================== */
.new-executive-portal {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    padding: 55px 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.new-executive-portal .aw-wrapper {
    display: flex !important;
    align-items: stretch !important;
    gap: 30px !important;
    position: relative !important;
}

/* SVG Dynamic Hub Branch Connectors */
.aw-section-header {
    margin-bottom: 14px !important;
}

.aw-section-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: rgba(0, 59, 97, 0.06) !important;
    color: #0284c7 !important;
    border: 1px solid rgba(2, 132, 199, 0.15) !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 6px !important;
}

.aw-section-title {
    color: #0f172a !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
    margin: 0 !important;
    font-family: 'Outfit', sans-serif !important;
}

.aw-section-title span {
    color: #0284c7 !important;
}

.aw-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
}

@media (max-width: 576px) {
    .aw-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

.aw-person-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.40) 100%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: 22px !important;
    padding: 20px 14px 16px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.12),
                0 4px 12px -2px rgba(15, 23, 42, 0.05),
                inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.95),
                inset 0 -1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.35s ease,
                background 0.35s ease !important;
}

.aw-person-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 40% !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%) !important;
    pointer-events: none !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
}

.aw-person-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.65) 100%) !important;
    border-color: rgba(2, 132, 199, 0.45) !important;
    box-shadow: 0 28px 56px -12px rgba(2, 132, 199, 0.28),
                0 10px 24px -4px rgba(15, 23, 42, 0.12),
                inset 0 2px 2px 0 rgba(255, 255, 255, 1) !important;
}

.aw-person-photo {
    width: 92px !important;
    height: 106px !important;
    margin: 0 auto 10px auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
}

.aw-person-card:hover .aw-person-photo {
    transform: translateY(-3px) scale(1.04) !important;
    border-color: #0284c7 !important;
    box-shadow: 0 14px 30px -4px rgba(2, 132, 199, 0.35) !important;
}

.aw-person-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
}

.aw-person-info {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

.aw-person-info strong {
    display: block !important;
    color: #0f172a !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.96rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    margin: 0 !important;
    letter-spacing: -0.2px !important;
}

.aw-designation-chip {
    display: block !important;
    color: #0284c7 !important;
    font-family: 'Outfit', 'Inter', sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    line-height: 1.25 !important;
    margin: 3px 0 0 0 !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: color 0.25s ease !important;
}

.aw-person-card:hover .aw-designation-chip {
    color: #0369a1 !important;
}

.aw-card-hover-hint {
    font-family: 'Outfit', sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--theme-primary, #003b61) 0%, #0284c7 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 30px !important;
    padding: 5px 14px !important;
    margin-top: 8px !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.aw-person-card:hover .aw-card-hover-hint {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 15px rgba(234, 88, 12, 0.4) !important;
    transform: translateY(-2px) scale(1.04) !important;
    gap: 8px !important;
}

.aw-card-hover-hint i {
    font-size: 9px !important;
    transition: transform 0.25s ease !important;
}

.aw-person-card:hover .aw-card-hover-hint i {
    transform: translateX(3px) !important;
}

/* Right Column Welcome Container */
.aw-welcome-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 22px !important;
    padding: 32px 28px !important;
    box-shadow: 0 15px 35px -10px rgba(0, 59, 97, 0.08) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
}

.aw-welcome-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.08) 0%, rgba(2, 132, 199, 0.08) 100%) !important;
    border: 1px solid rgba(234, 88, 12, 0.22) !important;
    box-shadow: 0 2px 10px rgba(234, 88, 12, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    color: #ea580c !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 12px !important;
    width: fit-content !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.aw-welcome-pill:hover {
    transform: translateY(-2px) scale(1.02) !important;
    border-color: rgba(234, 88, 12, 0.45) !important;
    box-shadow: 0 6px 18px rgba(234, 88, 12, 0.15) !important;
}

.aw-welcome-pill i {
    font-size: 0.85rem !important;
    color: #ea580c !important;
    filter: drop-shadow(0 2px 4px rgba(234, 88, 12, 0.3)) !important;
}

.aw-pill-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #ea580c !important;
    box-shadow: 0 0 8px #ea580c !important;
    animation: awPillDotPulse 2s infinite ease-in-out !important;
}

@keyframes awPillDotPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; box-shadow: 0 0 6px #ea580c; }
    50% { transform: scale(1.4); opacity: 1; box-shadow: 0 0 12px #ea580c, 0 0 20px rgba(234, 88, 12, 0.5); }
}

.aw-heading-wrapper {
    position: relative !important;
    margin-bottom: 4px !important;
}

.aw-heading {
    font-family: 'Outfit', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: clamp(2rem, 3.4vw, 2.75rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.18 !important;
    color: #0f172a !important;
    margin: 0 !important;
    perspective: 1000px !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.aw-gradient-text,
.aw-char.accent-char {
    background: linear-gradient(135deg, #ff4500 0%, #ff6b00 30%, #ff8c00 65%, #ffa500 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 900 !important;
    display: inline-block !important;
    filter: drop-shadow(0 3px 12px rgba(255, 107, 0, 0.22)) !important;
    transition: filter 0.3s ease, transform 0.3s ease !important;
}

.aw-heading:hover .aw-gradient-text,
.aw-heading:hover .aw-char.accent-char {
    filter: drop-shadow(0 4px 18px rgba(255, 107, 0, 0.45)) !important;
}

.aw-char {
    display: inline-block !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease !important;
    cursor: default !important;
}

.aw-char:hover {
    transform: translateY(-6px) scale(1.15) !important;
    filter: drop-shadow(0 6px 14px rgba(255, 107, 0, 0.35)) !important;
}

.aw-divider-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 16px 0 24px 0 !important;
}

.aw-divider-line {
    position: relative !important;
    width: 110px !important;
    height: 5px !important;
    background: linear-gradient(90deg, #0284c7 0%, #38bdf8 30%, #ff6b00 70%, #ffa500 100%) !important;
    background-size: 200% auto !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.35), 0 2px 14px rgba(255, 107, 0, 0.35) !important;
    transition: width 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease !important;
    overflow: visible !important;
    animation: awDividerGlow 4s infinite ease-in-out !important;
}

.aw-welcome-card:hover .aw-divider-line,
.aw-divider-line:hover {
    width: 160px !important;
    box-shadow: 0 3px 18px rgba(2, 132, 199, 0.5), 0 3px 22px rgba(255, 107, 0, 0.6) !important;
}

.aw-divider-line::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 10px !important;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.95) 50%, transparent 100%) !important;
    animation: awDividerShimmer 3s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none !important;
}

@keyframes awDividerShimmer {
    0% { left: -100%; }
    45%, 100% { left: 150%; }
}

@keyframes awDividerGlow {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 2px rgba(255,107,0,0.2)); }
    50% { filter: brightness(1.15) drop-shadow(0 0 8px rgba(255,107,0,0.45)); }
}

.aw-pulse-dot {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 11px !important;
    height: 11px !important;
    border-radius: 50% !important;
    background: #0284c7 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 10px #0284c7, 0 0 18px rgba(2, 132, 199, 0.8) !important;
    z-index: 2 !important;
}

.aw-radar-ring {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    border: 2px solid #0284c7 !important;
    pointer-events: none !important;
    animation: awRadarPing 2.2s cubic-bezier(0, 0, 0.2, 1) infinite !important;
}

@keyframes awRadarPing {
    0% { width: 10px; height: 10px; opacity: 1; border-width: 2px; }
    75%, 100% { width: 28px; height: 28px; opacity: 0; border-width: 0.5px; }
}

.aw-divider-subdots {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.aw-divider-subdots span {
    border-radius: 50% !important;
    background: linear-gradient(135deg, #ff6b00, #ffa500) !important;
    box-shadow: 0 0 6px rgba(255, 107, 0, 0.4) !important;
    display: inline-block !important;
}

.aw-divider-subdots span:nth-child(1) { width: 5px; height: 5px; opacity: 0.9; }
.aw-divider-subdots span:nth-child(2) { width: 4px; height: 4px; opacity: 0.6; }
.aw-divider-subdots span:nth-child(3) { width: 3px; height: 3px; opacity: 0.35; }

@media (max-width: 768px) {
    .aw-heading {
        font-size: 1.85rem !important;
        line-height: 1.22 !important;
    }
    .aw-divider-line {
        width: 90px !important;
        height: 4px !important;
    }
    .aw-welcome-card:hover .aw-divider-line,
    .aw-divider-line:hover {
        width: 130px !important;
    }
}

.aw-body-text p {
    color: #334155 !important;
    line-height: 1.75 !important;
    font-size: 1.01rem !important;
    margin-bottom: 0 !important;
}

.gpm-box-desc {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14.5px !important;
    color: #334155 !important;
    line-height: 1.75 !important;
    margin: 0 !important;
}

/* 🌟 PREMIUM STEP FLOW & PROCESS CARDS */
.premium-step-flow {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin: 20px 0 !important;
}

.premium-step-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 18px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px 22px !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.3s ease !important;
}

.premium-step-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
    border-color: #cbd5e1 !important;
}

.step-number-badge {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.step-content-body {
    flex: 1 !important;
}

.step-title {
    font-family: 'Outfit', 'Montserrat', sans-serif !important;
    font-size: 16.5px !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
    line-height: 1.35 !important;
}

.doc-item:hover {
    background-color: #f8fafc !important;
    padding-left: 30px !important;
    transform: none !important;
    box-shadow: none !important;
}

.doc-item:hover::before {
    transform: scaleY(1) !important;
}

.doc-item-left {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.doc-icon-box {
    width: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
    transition: all 0.25s ease !important;
}

.doc-icon-box.pdf-theme {
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.18) !important;
    color: #ef4444 !important;
}
.doc-item:hover .doc-icon-box.pdf-theme {
    background: #ef4444 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25) !important;
}

.doc-icon-box.word-theme {
    background: rgba(37, 99, 235, 0.08) !important;
    border: 1px solid rgba(37, 99, 235, 0.18) !important;
    color: #2563eb !important;
}
.doc-item:hover .doc-icon-box.word-theme {
    background: #2563eb !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

.doc-icon-box.excel-theme {
    background: rgba(22, 163, 74, 0.08) !important;
    border: 1px solid rgba(22, 163, 74, 0.18) !important;
    color: #16a34a !important;
}
.doc-item:hover .doc-icon-box.excel-theme {
    background: #16a34a !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25) !important;
}

.doc-icon-box.link-theme {
    background: rgba(124, 58, 237, 0.08) !important;
    border: 1px solid rgba(124, 58, 237, 0.18) !important;
    color: #7c3aed !important;
}
.doc-item:hover .doc-icon-box.link-theme {
    background: #7c3aed !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;
}

.doc-icon-box.image-theme {
    background: rgba(249, 115, 22, 0.08) !important;
    border: 1px solid rgba(249, 115, 22, 0.18) !important;
    color: #f97316 !important;
}
.doc-item:hover .doc-icon-box.image-theme {
    background: #f97316 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25) !important;
}

.doc-info-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
    flex: 1 !important;
}

.doc-title-link, .doc-title {
    font-size: 15.5px !important;
    color: #1e293b !important;
    font-weight: 650 !important;
    line-height: 1.45 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    cursor: pointer !important;
    font-family: 'Poppins', sans-serif !important;
}

.doc-item:hover .doc-title-link,
.doc-item:hover .doc-title {
    color: var(--theme-primary, #003b61) !important;
}

.doc-meta-tags {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.doc-meta-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    line-height: 1.4 !important;
}

.doc-meta-badge.pdf-theme {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #dc2626 !important;
}

.doc-meta-badge.word-theme {
    background: rgba(37, 99, 235, 0.08) !important;
    color: #2563eb !important;
}

.doc-meta-badge.excel-theme {
    background: rgba(22, 163, 74, 0.08) !important;
    color: #16a34a !important;
}

.doc-meta-badge.link-theme {
    background: rgba(124, 58, 237, 0.08) !important;
    color: #7c3aed !important;
}

.doc-meta-badge.image-theme {
    background: rgba(249, 115, 22, 0.08) !important;
    color: #ea580c !important;
}

.doc-meta-badge.date-badge {
    background: #f1f5f9 !important;
    color: #64748b !important;
}

.doc-item-right {
    flex-shrink: 0 !important;
}

.doc-action-btn, .doc-link-wrap, .doc-btn-premium {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 18px !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    border-radius: 50px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.doc-action-btn i, .doc-link-wrap i, .doc-btn-premium i {
    font-size: 14px !important;
    color: var(--theme-primary, #003b61) !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
}

.doc-item:hover .doc-action-btn,
.doc-item:hover .doc-link-wrap,
.doc-item:hover .doc-btn-premium {
    background: var(--theme-primary, #003b61) !important;
    border-color: var(--theme-primary, #003b61) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 59, 97, 0.2) !important;
    transform: translateY(-1px) !important;
}

.doc-item:hover .doc-action-btn i,
.doc-item:hover .doc-link-wrap i,
.doc-item:hover .doc-btn-premium i {
    color: #ffffff !important;
    transform: translateX(3px) !important;
}

/* Remove duplicate ::after arrow from doc links & buttons */
.content-description a.doc-title-link::after,
.content-description a.doc-action-btn::after,
.content-description a.doc-btn-premium::after,
.content-description a.doc-link-wrap::after,
.content-description .doc-list a::after,
.content-description .doc-item a::after,
a.doc-title-link::after,
a.doc-action-btn::after,
a.doc-btn-premium::after,
a.doc-link-wrap::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 768px) {
    .doc-item, .doc-item-premium {
        padding: 12px 14px !important;
        gap: 10px !important;
    }
    .doc-item:hover, .doc-item-premium:hover {
        padding-left: 14px !important;
    }
    .doc-icon-box, .doc-file-icon-box {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        font-size: 17px !important;
        border-radius: 8px !important;
    }
    .doc-title-link, .doc-title, .doc-title-premium {
        font-size: 14px !important;
        line-height: 1.4 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
    }
    .doc-action-btn, .doc-link-wrap, .doc-btn-premium {
        padding: 5px 12px !important;
        font-size: 12px !important;
    }
    .docs-header-bar, .docs-bar {
        padding: 14px 16px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .docs-count-pill {
        align-self: flex-start !important;
    }
}

@media (max-width: 576px) {
    /* Balanced outer container & column side padding on phone */
    .academic-container,
    .affiliation-container,
    .activities-container,
    .facilities-container,
    .committees-container,
    .category-container {
        padding-top: 20px !important;
        padding-bottom: 35px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .academic-container .row,
    .affiliation-container .row,
    .activities-container .row,
    .facilities-container .row,
    .committees-container .row,
    .category-container .row {
        margin-left: -6px !important;
        margin-right: -6px !important;
        --bs-gutter-x: 12px !important;
    }
    .academic-container [class*="col-"],
    .affiliation-container [class*="col-"],
    .activities-container [class*="col-"],
    .facilities-container [class*="col-"],
    .committees-container [class*="col-"],
    .category-container [class*="col-"] {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    .content-card-wrapper {
        padding: 16px 14px !important;
        border-radius: 14px !important;
        margin-bottom: 20px !important;
    }
    .content-header-box {
        padding: 14px 16px !important;
        margin-bottom: 16px !important;
        border-radius: 10px !important;
    }
    .content-header-box h2 {
        font-size: 22px !important;
    }

    .premium-step-card {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 14px !important;
    }
    .step-number-badge {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }

    /* Polished Balanced Filter Dock on Phone */
    .doc-filter-dock {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 11px 12px !important;
        gap: 10px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04) !important;
        margin-top: 10px !important;
        margin-bottom: 16px !important;
    }
    .doc-filter-dock > .d-flex {
        width: 100% !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .doc-chips-group {
        width: 100% !important;
        overflow-x: auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding: 2px 2px 5px 2px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .doc-chips-group::-webkit-scrollbar {
        display: none !important;
    }
    .filter-tab {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        padding: 5px 12px !important;
        border-radius: 50px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        color: #334155 !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
    }
    .filter-tab.active {
        background: linear-gradient(135deg, #0b3c73 0%, #062b54 100%) !important;
        color: #ffffff !important;
        border-color: #0b3c73 !important;
        box-shadow: 0 3px 10px rgba(11, 60, 115, 0.25) !important;
    }
    .filter-tab.active i {
        color: #ff9933 !important;
    }
    .doc-select-wrap {
        width: 100% !important;
    }
    .doc-select-compact {
        width: 100% !important;
        height: 36px !important;
        font-size: 12.5px !important;
        border-radius: 9px !important;
        background-color: #f8fafc !important;
    }
    .search-box-custom {
        max-width: 100% !important;
        width: 100% !important;
    }
    .search-input-custom {
        height: 36px !important;
        font-size: 13px !important;
        padding-left: 36px !important;
        border-radius: 9px !important;
        background: #f8fafc !important;
    }
    .search-icon-custom {
        font-size: 14px !important;
        left: 12px !important;
    }

    /* Compact Header Bar on Phone */
    .docs-header-bar, .docs-bar {
        padding: 12px 14px !important;
        border-radius: 12px 12px 0 0 !important;
        gap: 8px !important;
    }
    .docs-header-left {
        gap: 10px !important;
    }
    .docs-header-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
    }
    .docs-header-title {
        font-size: 14.5px !important;
    }
    .docs-header-subtitle {
        font-size: 11px !important;
    }
    .docs-count-pill {
        padding: 3px 9px !important;
        font-size: 11px !important;
    }
    .doc-list, .doc-list-premium {
        border-radius: 0 0 12px 12px !important;
        margin-bottom: 24px !important;
    }
    .doc-item, .doc-item-premium {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding: 12px 14px !important;
    }
    .doc-item:hover, .doc-item-premium:hover {
        padding-left: 14px !important;
        background-color: #f8fafc !important;
    }
    .doc-item-left {
        flex: 1 1 auto !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        min-width: 0 !important;
    }
    .doc-icon-box, .doc-file-icon-box {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        font-size: 18px !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
    }
    .doc-info-wrap, .doc-info-box {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
    }
    .doc-title-link, .doc-title, .doc-title-premium {
        font-size: 13.5px !important;
        font-weight: 650 !important;
        line-height: 1.45 !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        display: block !important;
        text-align: left !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        overflow: visible !important;
        text-overflow: unset !important;
        color: #1e293b !important;
    }
    .doc-action-btn, .doc-link-wrap, .doc-btn-premium {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 6px 14px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        border-radius: 50px !important;
        background: #f1f5f9 !important;
        color: #334155 !important;
        border: 1px solid #cbd5e1 !important;
        flex-shrink: 0 !important;
        width: auto !important;
        max-width: fit-content !important;
        white-space: nowrap !important;
        align-self: center !important;
        margin-left: auto !important;
    }
    .doc-action-btn i, .doc-link-wrap i, .doc-btn-premium i {
        font-size: 12px !important;
        color: var(--theme-primary, #0b3c73) !important;
    }
}

.aw-action-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-top: 20px !important;
    flex-wrap: wrap !important;
}

.aw-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: linear-gradient(135deg, var(--theme-primary-dark, #002842) 0%, var(--theme-primary, #003b61) 100%) !important;
    color: #ffffff !important;
    padding: 11px 26px !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    font-size: 0.84rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 6px 18px rgba(0, 40, 66, 0.25) !important;
}

.aw-cta-btn:hover {
    background: linear-gradient(135deg, var(--theme-accent, #ff9933) 0%, #ea580c 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 25px rgba(255, 153, 51, 0.45) !important;
    transform: translateY(-3px) !important;
}

.aw-cta-btn:hover i {
    transform: translateX(5px) !important;
}

.aw-approval-chip {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #047857 !important;
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
    padding: 6px 14px !important;
    border-radius: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ============================================================
   SIMPLE & PROFESSIONAL GOVERNMENT COLLEGE DEPARTMENT CARDS
   ============================================================ */
.departments-section {
    position: relative;
    padding: 60px 0;
    background: #f8fafc;
}

.departments-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.departments-header {
    text-align: center;
    margin-bottom: 40px;
}

.dept-header-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    padding: 6px 20px;
    border-radius: 20px;
    color: #0369a1;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.1px;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.departments-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2.85rem;
    font-weight: 850;
    color: #0284c7;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.departments-title span {
    color: #0284c7;
}

.departments-subtitle {
    color: #64748b;
    font-size: 17px;
    max-width: 740px;
    margin: 0 auto 16px;
    line-height: 1.6;
}

.departments-title-line {
    width: 70px;
    height: 4px;
    background: #0284c7;
    margin: 0 auto;
    border-radius: 4px;
}

/* 5 Column Single Line Grid */
.prof-departments-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 14px !important;
}

@media (max-width: 1199px) {
    .prof-departments-grid {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
        gap: 16px !important;
    }
}

/* Full Dept Card Container & Clean Card Layout */
.full-dept-card,
.clean-dept-card {
    position: relative !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 12px 30px -6px rgba(0, 59, 97, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.full-dept-card:hover,
.clean-dept-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 24px 48px -10px rgba(0, 59, 97, 0.22), 0 8px 24px -4px rgba(255, 153, 51, 0.20) !important;
    border-color: #003b61 !important;
}

/* Photo Header Box (Shows Real HOD Photo) */
.dept-photo-header-box {
    position: relative !important;
    height: 175px !important;
    width: 100% !important;
    overflow: hidden !important;
    background: #0f172a !important;
}

.dept-photo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.clean-dept-card:hover .dept-photo-img {
    transform: scale(1.08) !important;
}

.dept-photo-fallback {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 40px !important;
}

.dept-photo-gradient {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 40%, rgba(0, 0, 0, 0.85) 100%) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.dept-code-pill-tag {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(6px) !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    padding: 3px 9px !important;
    border-radius: 8px !important;
    z-index: 3 !important;
}

.dept-photo-hod-info {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    right: 10px !important;
    z-index: 3 !important;
    color: #ffffff !important;
}

.hod-mini-tag {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    color: #ff9933 !important;
    text-transform: uppercase !important;
    margin-bottom: 1px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.hod-mini-name {
    display: block !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9) !important;
}

.clean-card-body {
    padding: 12px 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    background: #ffffff !important;
    text-align: center !important;
}

.clean-hod-badge-top {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    background: rgba(255, 153, 51, 0.12) !important;
    color: #ea580c !important;
    border: 1px solid rgba(234, 88, 12, 0.22) !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    padding: 2.5px 8px !important;
    border-radius: 20px !important;
    margin: 0 auto 5px auto !important;
    width: fit-content !important;
}

.clean-dept-heading {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 850 !important;
    color: #0f172a !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.clean-hod-fullname {
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    color: #334155 !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    min-height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.clean-hod-fullname strong {
    color: #1e293b !important;
}

.clean-card-meta-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    margin-bottom: 12px !important;
}

.clean-card-meta-row .meta-pill {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 7px !important;
    padding: 4px 6px !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    white-space: nowrap !important;
}

.clean-card-meta-row .meta-pill i {
    color: #003b61 !important;
    font-size: 11px !important;
}

.clean-card-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: auto !important;
    width: 100% !important;
}

.clean-btn-quick {
    flex: 1 !important;
    background: #ffffff !important;
    color: #003b61 !important;
    border: 1.5px solid #003b61 !important;
    padding: 7px 4px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(0, 59, 97, 0.08) !important;
}

.clean-btn-quick:hover {
    background: #f0f9ff !important;
    box-shadow: 0 4px 12px rgba(0, 59, 97, 0.15) !important;
}

.clean-btn-details {
    flex: 1 !important;
    background: #003b61 !important;
    color: #ffffff !important;
    border: 1.5px solid #003b61 !important;
    padding: 7px 4px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    transition: all 0.25s ease !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 12px rgba(0, 59, 97, 0.22) !important;
}

.clean-btn-details:hover {
    background: #002842 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(0, 40, 66, 0.35) !important;
}

/* ============================================================
   BRAND NEW ULTRA-PREMIUM GLASS DEPARTMENT QUICK-VIEW MODAL
   ============================================================ */
.dept-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(2, 6, 23, 0.76) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
}

.dept-modal-backdrop.active,
.dept-modal-backdrop.is-active {
    opacity: 1 !important;
    visibility: visible !important;
}

.dept-modal-container {
    background: #ffffff !important;
    width: 100% !important;
    max-width: 620px !important;
    max-height: 90vh !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    box-shadow: 0 30px 70px -12px rgba(0, 30, 60, 0.45), 0 0 2px rgba(0, 0, 0, 0.12) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    transform: scale(0.90) translateY(24px) !important;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.dept-modal-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 90vh !important;
    overflow: hidden !important;
}

.dept-modal-backdrop.active .dept-modal-container,
.dept-modal-backdrop.is-active .dept-modal-container {
    transform: scale(1) translateY(0) !important;
}

/* Close Button */
.dept-modal-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: all 0.25s ease !important;
    line-height: 1 !important;
    padding: 0 !important;
}

.dept-modal-close:hover {
    background: rgba(255, 255, 255, 0.38) !important;
    color: #ffffff !important;
    transform: rotate(90deg) scale(1.1) !important;
}

/* Header Banner */
.dept-modal-header-bg {
    background: linear-gradient(135deg, #020617 0%, #002842 50%, #0284c7 100%) !important;
    padding: 22px 28px 18px !important;
    position: relative !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.dept-modal-header-bg::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3.5px !important;
    background: linear-gradient(90deg, #ff9933 0%, #38bdf8 50%, #10b981 100%) !important;
}

.dept-modal-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #38bdf8 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
}

.dept-modal-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.35rem !important;
    font-weight: 850 !important;
    color: #ffffff !important;
    margin: 0 !important;
    letter-spacing: -0.2px !important;
    line-height: 1.3 !important;
    padding-right: 30px !important;
}

/* Modal Body */
.dept-modal-body {
    padding: 20px 24px 16px !important;
    background: #ffffff !important;
    overflow-y: auto !important;
    max-height: calc(90vh - 135px) !important;
}

.dept-modal-body::-webkit-scrollbar {
    width: 6px;
}
.dept-modal-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
.dept-modal-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* HOD Card Banner Inside Modal */
.dept-modal-hod-hero {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 14px 18px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 6px 18px rgba(0, 59, 97, 0.06) !important;
    position: relative !important;
}

.modal-hod-img-wrapper {
    position: relative !important;
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    border-radius: 18px !important;
    overflow: visible !important;
}

.modal-hod-avatar {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 18px !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 6px 16px rgba(0, 59, 97, 0.18) !important;
}

.hod-verified-badge {
    position: absolute !important;
    bottom: -3px !important;
    right: -3px !important;
    width: 20px !important;
    height: 20px !important;
    background: #0284c7 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 9.5px !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.4) !important;
}

.hod-tag-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #0284c7 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
}

.dept-modal-hod-details h4 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 850 !important;
    color: #0f172a !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.25 !important;
}

.dept-modal-hod-details .designation {
    font-size: 12px !important;
    color: #64748b !important;
    margin: 0 !important;
    font-weight: 600 !important;
}

.hod-meta-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 6px !important;
}

.hod-meta-pill {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #bae6fd !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 2.5px 8px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Stats Box Grid */
.dept-modal-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
    gap: 9px !important;
    margin-bottom: 16px !important;
}

.dept-modal-stats-grid .stat-box {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 12px 6px !important;
    text-align: center !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dept-modal-stats-grid .stat-box:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 18px rgba(0, 59, 97, 0.08) !important;
    border-color: #0284c7 !important;
}

.stat-icon-wrapper {
    width: 36px !important;
    height: 36px !important;
    margin: 0 auto 6px auto !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
}

.seats-box .stat-icon-wrapper   { background: #e0f2fe !important; color: #0284c7 !important; }
.year-box .stat-icon-wrapper    { background: #fef3c7 !important; color: #d97706 !important; }
.faculty-box .stat-icon-wrapper { background: #ede9fe !important; color: #7c3aed !important; }
.course-box .stat-icon-wrapper  { background: #d1fae5 !important; color: #059669 !important; }
.aff-box .stat-icon-wrapper     { background: #fae8ff !important; color: #a21caf !important; }

.stat-val {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 850 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
}

.stat-lbl {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    margin-top: 2px !important;
}

/* Reusable Dynamic Section Cards */
.modal-section-card {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 13px 16px !important;
    margin-bottom: 12px !important;
}

.modal-section-card.about-card {
    border-left: 4px solid #0284c7 !important;
}

.modal-section-card.vision-card {
    border-left: 4px solid #f59e0b !important;
}

.modal-section-card.labs-card {
    border-left: 4px solid #10b981 !important;
}

.modal-section-card.contact-card {
    border-left: 4px solid #6366f1 !important;
}

.modal-section-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 7px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.modal-section-text {
    font-size: 12.5px !important;
    color: #334155 !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

/* Labs Tags */
.modal-labs-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.modal-lab-tag {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 7px !important;
    padding: 3.5px 9px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* Contact Grid */
.modal-contact-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 6px !important;
}

.modal-contact-item {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: #ffffff !important;
    padding: 5px 9px !important;
    border-radius: 7px !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 11.5px !important;
    color: #334155 !important;
    font-weight: 600 !important;
    word-break: break-word !important;
}

/* Modal Footer */
.dept-modal-footer {
    padding: 12px 24px 16px !important;
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

.dept-modal-cancel-btn {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    padding: 8px 18px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.dept-modal-cancel-btn:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

.dept-modal-go-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #003b61 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    padding: 9px 22px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(0, 59, 97, 0.25) !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Dynamic Filter Tabs */
.filter-tab {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    padding: 4px 12px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    line-height: 1.4 !important;
}

.filter-tab:hover {
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.05) !important;
}

.filter-tab.active {
    background: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25) !important;
    transform: translateY(-1px) !important;
}

.dept-modal-go-btn:hover {
    background: linear-gradient(135deg, #ff9933 0%, #ea580c 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(255, 153, 51, 0.4) !important;
}

.dept-modal-go-btn:hover i {
    transform: translateX(4px) !important;
}

/* ========================================================
   PREMIUM DEPARTMENT OVERVIEW & HIGHLIGHTS STYLING
   ======================================================== */
.dept-overview-container {
    margin-top: 25px;
    margin-bottom: 30px;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* 1. Header & Lead Intro Card */
.dept-lead-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    padding: 28px 32px;
    box-shadow: 0 10px 25px -5px rgba(11, 60, 115, 0.05), 0 4px 10px -2px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
    margin-bottom: 28px;
    transition: all 0.3s ease;
}
.dept-lead-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, var(--main-color, #0b3c73) 0%, #38bdf8 100%);
    border-radius: 4px 0 0 4px;
}
.dept-lead-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.dept-icon-badge {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--main-color, #0b3c73) 12%, #ffffff), color-mix(in srgb, var(--main-color, #0b3c73) 6%, #ffffff));
    border: 1px solid color-mix(in srgb, var(--main-color, #0b3c73) 22%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-color, #0b3c73);
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(11, 60, 115, 0.06);
}
.dept-lead-title-area {
    flex-grow: 1;
}
.dept-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: color-mix(in srgb, var(--main-color, #0b3c73) 8%, transparent);
    color: var(--main-color, #0b3c73);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 4px;
    border: 1px solid color-mix(in srgb, var(--main-color, #0b3c73) 15%, transparent);
}
.dept-main-heading {
    color: #0f172a;
    font-weight: 700;
    font-size: 21px;
    margin: 0;
    letter-spacing: -0.3px;
    line-height: 1.35;
}
.dept-lead-body {
    color: #475569;
    font-size: 15px;
    line-height: 1.8;
    text-align: justify;
    margin: 0;
    font-weight: 450;
}

/* 2. Structured Section Blocks */
.dept-section-block {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    padding: 26px 28px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    margin-bottom: 24px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dept-section-block:hover {
    box-shadow: 0 10px 30px rgba(11, 60, 115, 0.06);
    border-color: color-mix(in srgb, var(--main-color, #0b3c73) 25%, #cbd5e1);
}
.dept-section-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f1f5f9;
    position: relative;
}
.dept-section-title-wrap::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--main-color, #0b3c73);
    border-radius: 2px;
}
.dept-section-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--main-color, #0b3c73), color-mix(in srgb, var(--main-color, #0b3c73) 80%, #000));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--main-color, #0b3c73) 30%, transparent);
    flex-shrink: 0;
}
.dept-section-title {
    font-size: 17.5px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    letter-spacing: -0.2px;
}

/* 3. Feature Bullets Grid */
.dept-bullets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px 16px;
}
.dept-bullet-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dept-bullet-item:hover {
    background: #ffffff;
    border-color: color-mix(in srgb, var(--main-color, #0b3c73) 35%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(11, 60, 115, 0.06);
}
.dept-bullet-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--main-color, #0b3c73) 12%, transparent);
    color: var(--main-color, #0b3c73);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 1px;
    transition: all 0.25s ease;
}
.dept-bullet-item:hover .dept-bullet-badge {
    background: var(--main-color, #0b3c73);
    color: #ffffff;
    transform: scale(1.1);
}
.dept-bullet-text {
    font-size: 14px;
    font-weight: 550;
    color: #334155;
    line-height: 1.55;
    margin: 0;
}

/* 4. Executive Callout / Outro Banner */
.dept-cta-card {
    background: linear-gradient(135deg, #0b3c73 0%, #0d4a8e 60%, #1e40af 100%);
    border-radius: 18px;
    padding: 24px 30px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 12px 30px rgba(11, 60, 115, 0.2);
    margin-top: 28px;
    position: relative;
    overflow: hidden;
}
.dept-cta-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.dept-cta-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fbbf24;
    flex-shrink: 0;
}
.dept-cta-content {
    flex-grow: 1;
}
.dept-cta-text {
    font-size: 15.5px;
    font-weight: 600;
    color: #f8fafc;
    line-height: 1.6;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .dept-lead-card {
        padding: 20px;
    }
    .dept-section-block {
        padding: 18px;
    }
    .dept-bullets-grid {
        grid-template-columns: 1fr;
    }
    .dept-cta-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        gap: 14px;
    }
}

/* ==========================================================================
   GLOBAL DYNAMIC DOCUMENT FILTER PILLS & SEARCH BAR
   ========================================================================== */
.filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
    margin-bottom: 18px;
    width: 100%;
}
.filter-tab {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    outline: none;
    color: #334155;
    padding: 7px 15px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 6.5px;
    line-height: 1.4;
    user-select: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.filter-tab i {
    font-size: 13.5px;
    color: #64748b;
    transition: all 0.2s ease;
}
.filter-tab:hover {
    background: #f8fafc;
    color: #0f172a;
    border-color: #94a3b8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.filter-tab:hover i {
    color: #0f172a;
}
.filter-tab.active {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.28) !important;
    transform: translateY(-2px);
}
.filter-tab.active i {
    color: #38bdf8 !important;
    filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.5));
}
.search-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 25px;
}
.search-box-custom {
    position: relative;
    width: 100%;
    max-width: 500px;
    display: flex;
    align-items: center;
}
.search-icon-custom {
    position: absolute !important;
    left: 22px !important;
    color: #94a3b8 !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    pointer-events: none !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: color 0.3s ease !important;
    z-index: 3 !important;
}
.search-input-custom {
    width: 100% !important;
    padding: 13px 20px 13px 58px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 50px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    outline: none !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    background: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
}
.search-input-custom:focus {
    border-color: var(--theme-accent, #ff9933) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    background: #ffffff !important;
}
.search-input-custom:focus + .search-icon-custom {
    color: var(--theme-accent, #ff9933) !important;
}
.search-input-custom::placeholder {
    color: #94a3b8;
    font-weight: 500;
}
.search-clear-btn {
    position: absolute;
    right: 20px;
    background: none;
    border: none;
    outline: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 18px;
    padding: 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    top: 50%;
    transform: translateY(-50%);
}
.search-clear-btn:hover {
    color: #ef4444;
    transform: translateY(-50%) scale(1.1);
}

/* ============================================================
   GLOBAL SITE-WIDE PREMIUM CONTENT TYPOGRAPHY
   (Matches History Executive Typography across all pages & departments)
   ============================================================ */
.content-description,
.content-description p,
.history-content-text p,
.dept-content-text,
.dept-content-text p,
.dept-intro-desc,
.dept-about-text,
.about-intro-flex p,
.custom-page-content,
.custom-page-content p,
.page-content,
.page-content p,
.academic-content,
.academic-content p,
.facility-content,
.facility-content p,
.activity-content,
.activity-content p,
.committee-content,
.committee-content p,
.narrative-content,
.narrative-content p,
.message-content p,
.ultra-narrative-p,
.pro-content p,
.tab-content .tab-pane p,
.department-section p,
.subpage-narrative,
.main-body-content p {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 1.05rem !important;
    line-height: 1.90 !important;
    color: #1e293b !important;
    font-weight: 480 !important;
    text-align: justify !important;
    letter-spacing: 0.15px !important;
}

.content-description p,
.dept-content-text p,
.about-intro-flex p,
.custom-page-content p,
.page-content p,
.academic-content p,
.facility-content p,
.activity-content p,
.committee-content p,
.narrative-content p,
.message-content p,
.ultra-narrative-p {
    margin-bottom: 22px !important;
}

.content-description strong,
.content-description b,
.dept-content-text strong,
.dept-content-text b,
.about-intro-flex strong,
.about-intro-flex b,
.custom-page-content strong,
.custom-page-content b,
.page-content strong,
.page-content b,
.academic-content strong,
.academic-content b,
.facility-content strong,
.facility-content b,
.activity-content strong,
.activity-content b,
.committee-content strong,
.committee-content b,
.narrative-content strong,
.narrative-content b,
.ultra-narrative-p strong,
.ultra-narrative-p b {
    color: var(--theme-primary, #0b3c73) !important;
    font-weight: 750 !important;
}

.content-description ul,
.content-description ol,
.custom-page-content ul,
.custom-page-content ol,
.academic-content ul,
.academic-content ol,
.dept-content-text ul,
.dept-content-text ol {
    margin-bottom: 24px !important;
    padding-left: 24px !important;
}

.content-description li,
.custom-page-content li,
.academic-content li,
.facility-content li,
.dept-content-text li {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 1.02rem !important;
    line-height: 1.85 !important;
    color: #1e293b !important;
    margin-bottom: 10px !important;
    text-align: justify !important;
}

@media (max-width: 768px) {
    .content-description,
    .history-pro-card,
    .custom-page-content {
        padding: 20px 16px !important;
        border-radius: 14px !important;
    }

    .content-description p,
    .ultra-narrative-p,
    .ultra-pro-body-text,
    .message-content p,
    .dept-content-text p,
    .custom-page-content p,
    .academic-content p,
    .facility-content p,
    .activity-content p,
    .committee-content p,
    .narrative-content p,
    .about-intro-flex p,
    .main-body-content p,
    .content-description li,
    .custom-page-content li,
    .academic-content li,
    .facility-content li,
    .dept-content-text li {
        text-align: justify !important;
        text-justify: inter-word !important;
        font-size: 15.5px !important;
        line-height: 1.85 !important;
        letter-spacing: 0.1px !important;
        margin-bottom: 18px !important;
    }

    .ultra-narrative-p:first-of-type::first-letter,
    .history-drop-cap,
    .ultra-pro-body-text::first-letter,
    .message-content p:first-of-type::first-letter,
    .history-content-text p:first-of-type::first-letter {
        font-size: 1.5rem !important;
        line-height: 0.9 !important;
        padding: 6px 10px !important;
        margin: 2px 10px 4px 0 !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 10px rgba(2, 132, 199, 0.2) !important;
    }
}