/* ============================================
   CAAD Complete Website Styles
   Chennai Academy of Architecture and Design
   ============================================ */

/* ============================================
   PAGE LOADER ANIMATION
   ============================================ */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #F5B400 0%, #E5A600 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.page-loader.loaded {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

body.loading {
    overflow: hidden;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loader-logo {
    width: 300px;
    height: auto;
}

/* Image Logo Animation Styles */
.loader-logo-img {
    width: 280px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(27, 58, 95, 0.3);
    opacity: 0;
    transform: scale(0.8) translateY(20px);
    animation: logoReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}

/* Animated pulse ring behind logo */
.loader-pulse {
    position: absolute;
    width: 320px;
    height: 100px;
    border-radius: 16px;
    border: 3px solid rgba(27, 58, 95, 0.2);
    animation: pulseRing 1.5s ease-in-out infinite;
    z-index: -1;
}

/* Tagline animation */
.loader-tagline {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1B3A5F;
    margin-top: 24px;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.5s ease forwards;
    animation-delay: 0.8s;
}

/* Keyframe Animations */
@keyframes logoReveal {
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes pulseRing {

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

    50% {
        transform: scale(1.05);
        opacity: 0.2;
    }
}

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

@keyframes drawGrid {
    to {
        stroke-dashoffset: 0;
    }
}

/* Keyframe Animations */
@keyframes revealLetter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes drawGrid {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes popIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes drawInner {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fillSquare {
    to {
        opacity: 0.9;
    }
}

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

@keyframes loaderExit {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 0;
        transform: scale(1.1) translateY(-20px);
    }
}

/* CSS Variables / Design Tokens */
:root {
    /* Primary Accent - Warm Gold (from logo) */
    --color-primary: #B8965C;
    --color-primary-hover: #C9A76D;
    --color-primary-dark: #A7854B;
    --color-primary-light: rgba(184, 150, 92, 0.15);

    /* Dark Theme Colors (default) */
    --color-bg: #0C1825;
    --color-bg-secondary: #142231;
    --color-bg-tertiary: #1A2D42;
    --color-surface: #142231;
    --color-surface-elevated: #1A2D42;

    --color-dark: #0C1825;
    --color-dark-secondary: #142231;
    --color-dark-tertiary: #1A2D42;

    --color-white: #FFFFFF;
    --color-white-soft: rgba(255, 255, 255, 0.9);
    --color-white-muted: rgba(255, 255, 255, 0.6);
    --color-white-faint: rgba(255, 255, 255, 0.1);

    --color-text: #E8EDF3;
    --color-text-primary: #E8EDF3;
    --color-text-secondary: #A0B0C0;
    --color-border: rgba(255, 255, 255, 0.1);

    /* Typography */
    --font-serif: 'DM Serif Display', Georgia, serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 8rem;

    /* Max widths */
    --max-width: 1280px;
    --max-width-narrow: 900px;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Shadows - Dark theme */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 40px rgba(184, 150, 92, 0.3);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-slow: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================
   LIGHT THEME - Architectural Aesthetic
   Calm balanced whites, structured contrast,
   refined accent usage inspired by logo
   ============================================ */
[data-theme="light"] {
    /* Primary Accent - Logo Gold (for highlights & CTAs) */
    --color-primary: #B8965C;
    --color-primary-hover: #C9A76D;
    --color-primary-dark: #A7854B;
    --color-primary-light: rgba(184, 150, 92, 0.12);

    /* Innovative Light Backgrounds - Subtle gradients */
    --color-bg: linear-gradient(180deg, #FDFCFA 0%, #F5F3EF 100%);
    --color-bg-secondary: #F2F1EE;
    --color-bg-tertiary: #ECEAE6;
    --color-surface: #FFFFFF;
    --color-surface-elevated: #FFFFFF;

    /* Flat fallbacks for compatibility */
    --color-dark: #F8F7F5;
    --color-dark-secondary: #F2F1EE;
    --color-dark-tertiary: #ECEAE6;

    /* Text - Logo Dark Blue for strong hierarchy */
    --color-white: #1B3A5F;
    --color-white-soft: #2A4A6F;
    --color-white-muted: #5A6978;
    --color-white-faint: rgba(27, 58, 95, 0.05);

    --color-text: #1B3A5F;
    --color-text-primary: #1B3A5F;
    --color-text-secondary: #5A6978;
    --color-border: rgba(27, 58, 95, 0.08);

    /* Enhanced Shadows with subtle gold tint */
    --shadow-sm: 0 2px 8px rgba(27, 58, 95, 0.04), 0 1px 2px rgba(184, 150, 92, 0.02);
    --shadow-md: 0 8px 24px rgba(27, 58, 95, 0.06), 0 2px 8px rgba(184, 150, 92, 0.03);
    --shadow-lg: 0 16px 48px rgba(27, 58, 95, 0.08), 0 8px 16px rgba(184, 150, 92, 0.04);
    --shadow-glow: 0 0 32px rgba(184, 150, 92, 0.2);
}

/* ============================================
   LIGHT THEME - INNOVATIVE ENHANCEMENTS
   ============================================ */

/* Body gradient background */
[data-theme="light"] body {
    background: linear-gradient(180deg, #FDFCFA 0%, #F5F3EF 50%, #EDE9E3 100%);
    background-attachment: fixed;
}

/* Glassmorphism Cards */
[data-theme="light"] .course-card,
[data-theme="light"] .facility-card,
[data-theme="light"] .comparison-card,
[data-theme="light"] .eligibility-card,
[data-theme="light"] .step-card,
[data-theme="light"] .curriculum-item,
[data-theme="light"] .advantage-item,
[data-theme="light"] .feature-item {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 32px rgba(27, 58, 95, 0.06),
        0 0 0 1px rgba(184, 150, 92, 0.05);
}

[data-theme="light"] .course-card:hover,
[data-theme="light"] .facility-card:hover,
[data-theme="light"] .comparison-card:hover,
[data-theme="light"] .feature-item:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(184, 150, 92, 0.3);
    box-shadow: 0 12px 48px rgba(27, 58, 95, 0.1),
        0 0 0 1px rgba(184, 150, 92, 0.15);
    transform: translateY(-4px);
}

/* Gold accent line on section headers */
[data-theme="light"] .section-label {
    position: relative;
    color: #B8965C;
}

[data-theme="light"] .section-label::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 24px;
    height: 2px;
    background: linear-gradient(90deg, #B8965C, #D4B87A);
    border-radius: 1px;
}

/* Section title with subtle gold underline accent */
[data-theme="light"] .section-title {
    position: relative;
}

[data-theme="light"] .section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #B8965C 0%, rgba(184, 150, 92, 0.3) 100%);
    margin-top: 16px;
    border-radius: 2px;
}

[data-theme="light"] .section-header .section-title::after {
    margin-left: auto;
    margin-right: auto;
}

/* Featured card with gold border glow */
[data-theme="light"] .comparison-card.featured,
[data-theme="light"] .course-card.featured {
    border: 2px solid rgba(184, 150, 92, 0.4);
    box-shadow: 0 12px 48px rgba(27, 58, 95, 0.08),
        0 0 24px rgba(184, 150, 92, 0.12);
}

/* Enhanced buttons with gradient */
[data-theme="light"] .btn-primary {
    background: linear-gradient(135deg, #B8965C 0%, #D4B87A 100%);
    box-shadow: 0 4px 16px rgba(184, 150, 92, 0.3);
}

[data-theme="light"] .btn-primary:hover {
    background: linear-gradient(135deg, #C9A76D 0%, #E0C78E 100%);
    box-shadow: 0 8px 24px rgba(184, 150, 92, 0.4);
    transform: translateY(-2px);
}

/* Footer with subtle gradient - white text */
[data-theme="light"] .footer {
    background: linear-gradient(180deg, #1B3A5F 0%, #122840 100%);
}

[data-theme="light"] .footer,
[data-theme="light"] .footer * {
    --color-white: #FFFFFF;
    --color-white-soft: rgba(255, 255, 255, 0.85);
    --color-white-muted: rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .footer-tagline,
[data-theme="light"] .footer-description,
[data-theme="light"] .footer-title,
[data-theme="light"] .footer-link,
[data-theme="light"] .footer-contact-item,
[data-theme="light"] .footer-bottom,
[data-theme="light"] .footer-copyright,
[data-theme="light"] .footer-bottom-link {
    color: #FFFFFF;
}

[data-theme="light"] .footer-link,
[data-theme="light"] .footer-bottom-link {
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .footer-link:hover,
[data-theme="light"] .footer-bottom-link:hover {
    color: #B8965C;
}

[data-theme="light"] .footer-social-link {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="light"] .footer-social-link:hover {
    background: #B8965C;
    border-color: #B8965C;
}

/* CTA section with innovative gradient - white text */
[data-theme="light"] .cta-section {
    background: linear-gradient(135deg, #1B3A5F 0%, #2A4A6F 50%, #1B3A5F 100%);
    position: relative;
    overflow: hidden;
}

[data-theme="light"] .cta-section,
[data-theme="light"] .cta-section * {
    --color-white: #FFFFFF;
    --color-white-soft: rgba(255, 255, 255, 0.9);
    --color-white-muted: rgba(255, 255, 255, 0.7);
}

/* CTA Title in Warm Gold */
[data-theme="light"] .cta-title,
[data-theme="light"] .cta-section h2 {
    color: #B8965C;
}

[data-theme="light"] .cta-description,
[data-theme="light"] .cta-section p,
[data-theme="light"] .cta-text {
    color: #FFFFFF;
}

/* Fix Apply Now button (btn-white) visibility in CTA */
[data-theme="light"] .cta-section .btn-white {
    background: linear-gradient(135deg, #B8965C 0%, #D4B87A 100%);
    color: #1B3A5F;
    border: none;
    font-weight: 600;
}

[data-theme="light"] .cta-section .btn-white:hover {
    background: linear-gradient(135deg, #C9A76D 0%, #E0C78E 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(184, 150, 92, 0.4);
}

/* Fix outline button visibility */
[data-theme="light"] .cta-section .btn-outline-white,
[data-theme="light"] .cta-section .btn-secondary {
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.6);
    background: transparent;
}

[data-theme="light"] .cta-section .btn-outline-white:hover,
[data-theme="light"] .cta-section .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #FFFFFF;
}

[data-theme="light"] .cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at top right, rgba(184, 150, 92, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(184, 150, 92, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* Stats with accent underline */
[data-theme="light"] .stat-item {
    position: relative;
}

[data-theme="light"] .stat-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #B8965C, transparent);
    opacity: 0.5;
}

/* Icon containers with gradient backgrounds */
[data-theme="light"] .facility-icon,
[data-theme="light"] .eligibility-icon,
[data-theme="light"] .advantage-icon,
[data-theme="light"] .contact-icon {
    background: linear-gradient(135deg, rgba(184, 150, 92, 0.1) 0%, rgba(184, 150, 92, 0.05) 100%);
    border: 1px solid rgba(184, 150, 92, 0.15);
}

/* Quote card with decorative accent */
[data-theme="light"] .about-quote {
    background: linear-gradient(135deg, #FFFFFF 0%, #FDFCFA 100%);
    border-left: 4px solid #B8965C;
    box-shadow: 0 8px 32px rgba(27, 58, 95, 0.06);
}

/* Form inputs with focus glow */
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
    border-color: #B8965C;
    box-shadow: 0 0 0 3px rgba(184, 150, 92, 0.15);
    outline: none;
}

[data-theme="light"] .form-group input::placeholder,
[data-theme="light"] .form-group select::placeholder,
[data-theme="light"] .form-group textarea::placeholder {
    color: rgba(27, 58, 95, 0.5);
    /* #1B3A5F with 50% opacity for placeholder contrast */
}

[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea {
    color: #1B3A5F;
    background: rgba(27, 58, 95, 0.05);
    border-color: rgba(27, 58, 95, 0.15);
}

/* Navbar scrolled with glassmorphism */
[data-theme="light"] .navbar.scrolled {
    background: rgba(253, 252, 250, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(27, 58, 95, 0.08);
    box-shadow: 0 4px 20px rgba(27, 58, 95, 0.04);
}

/* Light Theme - Hero Section Override (dark background needs white text) */
[data-theme="light"] .hero,
[data-theme="light"] .hero * {
    --color-white: #FFFFFF;
    --color-white-soft: rgba(255, 255, 255, 0.9);
    --color-white-muted: rgba(255, 255, 255, 0.7);
    --color-text: #FFFFFF;
    --color-text-primary: #FFFFFF;
    --color-text-secondary: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .hero-headline,
[data-theme="light"] .hero-subheadline,
[data-theme="light"] .hero-badge,
[data-theme="light"] .hero-stats,
[data-theme="light"] .hero-content {
    color: #FFFFFF;
}

[data-theme="light"] .hero-subheadline {
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .stat-number,
[data-theme="light"] .stat-label {
    color: #FFFFFF;
}

/* Light Theme - Navbar on hero */
[data-theme="light"] .navbar:not(.scrolled) .nav-link,
[data-theme="light"] .navbar:not(.scrolled) .logo-tagline {
    color: #FFFFFF;
}

[data-theme="light"] .navbar.scrolled .nav-link,
[data-theme="light"] .navbar.scrolled .logo-tagline {
    color: #1B3A5F;
}

/* ============================================
   LIGHTBOX
   ============================================ */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(10px);
}

.lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-content-wrapper {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.lightbox.active .lightbox-content-wrapper {
    transform: scale(1);
}

.lightbox-content img {
    max-width: 100vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-2xl);
}

.lightbox-content iframe {
    width: 80vw;
    height: 45vw;
    max-width: 1200px;
    max-height: 675px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-2xl);
    border: none;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    background: transparent;
    border: none;
    color: var(--color-white);
    font-size: 3rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
    z-index: 10001;
}

.lightbox-close:hover {
    color: var(--color-primary);
    transform: rotate(90deg);
}

/* Clickable Images (Advisory Board) */
.advisory-image {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.advisory-image::after {
    content: '⤢';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    font-size: 2rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.advisory-image:hover::after {
    opacity: 1;
}

/* Video Expand Button */
.video-wrapper {
    position: relative;
}

.video-expand-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(12, 24, 37, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.3s ease;
    z-index: 10;
}

.video-wrapper:hover .video-expand-btn {
    opacity: 1;
    transform: scale(1);
}

.video-expand-btn:hover {
    background: var(--color-primary);
    color: var(--color-dark);
}

.video-expand-btn svg {
    width: 20px;
    height: 20px;
}



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

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

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

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

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

/* Container */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* Section Base */
.section {
    padding: var(--space-4xl) 0;
}

.section-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
    text-align: center;
}

.section-title {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 400;
    font-style: normal;
    color: var(--color-white);
    margin-bottom: var(--space-lg);
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    max-width: 700px;
    line-height: 1.7;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.section-header {
    text-align: left;
    margin-bottom: var(--space-md);
}

/* Label on TOP, left-aligned */
.section-header .section-label {
    text-align: left;
    margin-bottom: var(--space-md);
}

/* Title BELOW label, left-aligned */
.section-header .section-title {
    text-align: left;
}

.section-header .section-subtitle {
    text-align: left;
    margin: var(--space-md) 0 0;
}

/* ============================================
   NAVIGATION
   ============================================ */

/* ============================================
   TOP INFO BAR (Dual-Row Navbar - Row 1)
   ============================================ */

.top-info-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1001;
    background: #0c1825;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0;
    height: 36px;
    display: flex;
    align-items: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    overflow: hidden;
}

.top-info-bar.hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.top-bar-container {
    max-width: 100%;
    width: 100%;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

/* Left side: contact info */
.top-bar-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.top-bar-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.top-bar-item:hover {
    color: var(--color-primary);
}

.top-bar-item svg {
    width: 13px;
    height: 13px;
    stroke: var(--color-primary);
    flex-shrink: 0;
}

.top-bar-divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.15);
}

/* Center: static text */
.top-bar-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Inter', sans-serif;
    color: var(--color-primary);
    text-align: center;
    margin: 0 20px;
}

/* Center: scrolling ticker */
.top-bar-ticker {
    flex: 1;
    overflow: hidden;
    position: relative;
    margin: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.ticker-track {
    display: flex;
    align-items: center;
    gap: 60px;
    animation: tickerScroll 35s linear infinite;
    white-space: nowrap;
}

.ticker-track:hover {
    animation-play-state: paused;
}

.ticker-item {
    font-family: 'Inter', sans-serif;
    font-size: 0.73rem;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ticker-item::before {
    content: '◆';
    font-size: 0.45rem;
    color: var(--color-primary);
}

.ticker-highlight {
    color: var(--color-primary);
    font-weight: 600;
}

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

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

/* Right side: social links */
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.top-bar-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    border-radius: 50%;
}

.top-bar-social:hover {
    color: var(--color-primary);
    transform: scale(1.15);
}

.top-bar-social svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* Light mode top bar */
[data-theme="light"] .top-info-bar {
    background: #1b3a5f;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Mobile: hide top bar */
@media (max-width: 1024px) {
    .top-info-bar {
        display: none;
    }
}

/* ============================================
   UNIQUE & CLEAN NAVIGATION (Full Width)
   ============================================ */

.navbar {
    position: fixed;
    top: 36px;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 24px 0;
    /* Generous spacing */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    background: transparent;
    /* Completely clean start */
    border-bottom: none;
}

.navbar.scrolled {
    top: 0;
    background: rgba(12, 24, 37, 0.98);
    /* Solid dark professional look */
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    padding: 12px 0;
    /* Compact on scroll */
    border-bottom: none;
}

/* Mobile: navbar goes back to top since info bar is hidden */
@media (max-width: 1024px) {
    .navbar {
        top: 0;
    }
}

.nav-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    position: relative;
}

/* Vertical Divider */
.nav-logo::after {
    content: '';
    display: block;
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 4px;
    /* Adjust spacing around divider */
    order: 1;
    /* Place between image and text */
}

.nav-logo .logo-img {
    height: 60px;
    /* Slightly larger */
    width: auto;
    object-fit: contain;
    order: 0;
}

.nav-logo .logo-tagline {
    display: none !important;
}

.nav-logo::after {
    display: none !important;
}

/* Responsive Logo */
@media (max-width: 900px) {
    .nav-logo .logo-img {
        height: 48px;
    }

    .nav-logo .logo-tagline {
        font-size: 0.95rem;
    }
}

.footer-logo-img {
    height: 50px;
    width: auto;
    object-fit: contain;
    margin-bottom: 8px;
}


.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Navigation Link Animations - Consolidated */
.nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-white-soft);
    position: relative;
    padding: 0.5rem 0;
    transition: color var(--transition-fast);
    display: inline-block;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width 0.3s ease;
}

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

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

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Theme Toggle Button */
.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-white-faint);
    border: 1px solid var(--color-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.theme-toggle:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-white-soft);
    transition: all var(--transition-fast);
}

.theme-toggle:hover svg {
    stroke: var(--color-primary);
}

/* Show moon in dark theme, sun in light theme */
.theme-toggle .sun-icon {
    display: none;
}

.theme-toggle .moon-icon {
    display: block;
}

[data-theme="light"] .theme-toggle .sun-icon {
    display: block;
}

[data-theme="light"] .theme-toggle .moon-icon {
    display: none;
}

.btn-nav {
    padding: 0.7rem 1.5rem;
    font-size: 0.85rem;
    background: var(--color-primary);
    color: var(--color-dark);
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.btn-nav:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
}

/* Mobile Menu Toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
}

.hamburger {
    width: 24px;
    height: 2px;
    background: var(--color-white);
    transition: all var(--transition-fast);
    position: relative;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background: var(--color-white);
    transition: all var(--transition-fast);
}

.hamburger::before {
    top: -7px;
}

.hamburger::after {
    top: 7px;
}

.nav-toggle.active .hamburger {
    background: transparent;
}

.nav-toggle.active .hamburger::before {
    transform: rotate(45deg);
    top: 0;
}

.nav-toggle.active .hamburger::after {
    transform: rotate(-45deg);
    top: 0;
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Mirrored background image using pseudo-element */
/* Mirrored background image using pseudo-element */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('uploaded_media_1769327607944.jpg');
    background-size: cover;
    background-position: 30% center;
    background-repeat: no-repeat;
    transform: scaleX(-1);
    z-index: -2;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
            rgba(12, 24, 37, 0.92) 0%,
            rgba(12, 24, 37, 0.8) 30%,
            rgba(12, 24, 37, 0.5) 55%,
            rgba(12, 24, 37, 0.2) 75%,
            transparent 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    padding: var(--space-2xl);
    padding-left: clamp(2rem, 8vw, 8rem);
    padding-top: calc(var(--space-4xl) + 2rem);
    animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.6rem 1.2rem;
    background: var(--color-primary-light);
    border: 1px solid rgba(0, 180, 216, 0.4);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
    animation: pulse 2s infinite;
}

.badge-icon {
    font-size: 0.7rem;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(0, 180, 216, 0.4);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(0, 180, 216, 0);
    }
}

.hero-headline {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 400;
    line-height: 1.12;
    color: var(--color-white);
    margin-bottom: var(--space-md);
    letter-spacing: -0.02em;
}

.headline-accent {
    color: var(--color-primary);
    display: block;
    margin-top: 0.15em;
}

.hero-subheadline {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 300;
    color: var(--color-white-soft);
    margin-bottom: var(--space-xl);
    max-width: 480px;
    line-height: 1.7;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-smooth);
    letter-spacing: 0.3px;
    border: none;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-dark);
    border: 2px solid var(--color-primary);
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.btn-primary .btn-icon {
    width: 18px;
    height: 18px;
    transition: transform var(--transition-fast);
}

.btn-primary:hover .btn-icon {
    transform: translateX(4px);
}

.btn-secondary {
    background: transparent;
    color: var(--color-white);
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-white);
    transform: translateY(-2px);
}

.btn-outline-primary {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-outline-primary:hover {
    background: var(--color-primary);
    color: var(--color-dark);
    transform: translateY(-2px);
}

.btn-white {
    background: var(--color-white);
    color: var(--color-dark);
    border: 2px solid var(--color-white);
}

.btn-white:hover {
    background: transparent;
    color: var(--color-white);
    transform: translateY(-2px);
}

.btn-outline-white {
    background: transparent;
    color: var(--color-white);
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-white);
    transform: translateY(-2px);
}

.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-2xl);
}



/* Stats */
.hero-stats {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-number {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    color: var(--color-primary);
    letter-spacing: -0.02em;
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-white-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 2.5rem;
    right: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    z-index: 2;
    animation: fadeIn 1s ease-out 0.5s both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.scroll-indicator span {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-white-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--color-primary), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {

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

    50% {
        transform: scaleY(0.6);
        opacity: 0.5;
    }
}

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

.about {
    background: var(--color-dark-secondary);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

/* Section title styling moved to .section-title and .section-header */

.about-text {
    font-size: 1.05rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
    line-height: 1.8;
}

.about-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-smooth);
    text-decoration: none;
    color: inherit;
    position: relative;
    cursor: pointer;
}

.feature-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 180, 216, 0.3);
}

.feature-arrow {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    border-radius: 50%;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    margin-left: auto;
}

.feature-arrow svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.feature-item:hover .feature-arrow {
    opacity: 1;
    transform: translateX(0);
}

.feature-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
}

.feature-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-primary);
}

.feature-text h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 0.25rem;
}

.feature-text p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.about-image {
    position: relative;
}

.about-image-wrapper {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.about-image-wrapper img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    display: block;
}

.about-image-accent {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-lg);
    z-index: -1;
}

.about-quote {
    position: absolute;
    bottom: -40px;
    left: -40px;
    background: var(--color-dark);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    max-width: 600px;
    box-shadow: var(--shadow-lg);
    border-left: 3px solid var(--color-primary);
}

.quote-content-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.quote-image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--color-primary);
}

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

.about-quote blockquote {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--color-white-soft);
    font-style: italic;
    line-height: 1.6;
    margin-bottom: var(--space-xs);
    text-align: justify;
}

.about-quote cite {
    font-size: 0.85rem;
    color: var(--color-primary);
    font-style: normal;
}

/* ============================================
   ABOUT PAGE — OUR STORY (EDITORIAL SPLIT)
   ============================================ */

.about-story-section {
    padding: 4rem 0 0;
    background: var(--color-dark);
}

/* Top bar: label left, year badge right */
.story-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

/* "Est. 1999" pill */
.story-year-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 1rem;
    background: var(--color-primary-light);
    border: 1px solid rgba(184, 150, 92, 0.35);
    border-radius: 2rem;
    font-size: 0.82rem;
    color: var(--color-primary);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.story-year-badge strong {
    font-weight: 800;
    margin-left: 0.2em;
}

/* Two-column split: 45/55 */
.story-split {
    display: grid;
    grid-template-columns: 45fr 55fr;
    gap: 4rem;
    align-items: start;
}

/* ── Left column ── */
.story-left {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-top: 0.5rem;
}

.story-title {
    font-size: clamp(1.8rem, 2.6vw, 2.6rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-white);
    letter-spacing: -0.03em;
    margin: 0;
}

/* Thin gold rule under title */
.story-rule {
    width: 48px;
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.story-left .about-text {
    font-size: 0.92rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Pill tags */
.story-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.25rem;
}

.story-pill {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border-radius: 2rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border: 1px solid rgba(184, 150, 92, 0.3);
    transition: background 0.2s, color 0.2s;
}

.story-pill:hover {
    background: var(--color-primary);
    color: #fff;
}

/* ── Right column: image at natural size ── */
.story-right {
    align-self: start;
}

.story-image-wrap {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    line-height: 0;      /* removes gap under inline img */
}

.story-image-wrap img {
    width: 100%;
    height: auto;        /* natural proportions — no cropping */
    display: block;
    transition: transform 0.6s ease;
}

.story-image-wrap:hover img {
    transform: scale(1.02);
}

/* ── Stats strip below ── */
.story-stats-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 3rem;
    padding: 2rem 0;
    border-top: 1px solid var(--color-border);
}

.story-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 3rem;
    text-align: center;
}

.story-stat-num {
    font-size: clamp(1.6rem, 2.5vw, 2rem);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    letter-spacing: -0.02em;
}

.story-stat-lbl {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    margin-top: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 500;
}

.story-stat-divider {
    width: 1px;
    height: 36px;
    background: var(--color-border);
    flex-shrink: 0;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .story-split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .story-right {
        order: -1; /* image first on tablet/mobile */
    }
}

@media (max-width: 768px) {
    .about-story-section {
        padding: 3rem 0 0;
    }
    .story-stat-item {
        padding: 0 1.5rem;
    }
}

@media (max-width: 560px) {
    .story-stats-strip {
        flex-wrap: wrap;
        gap: 1rem;
    }
    .story-stat-divider {
        display: none;
    }
    .story-stat-item {
        width: calc(50% - 0.5rem);
        padding: 0.75rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
    }
}

/* ============================================
   COURSES SECTION
   ============================================ */

.courses {
    background: var(--color-dark);
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.course-card {
    background: var(--color-dark-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-smooth);
    position: relative;
}

.course-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 180, 216, 0.3);
    box-shadow: var(--shadow-lg);
}

.course-card.featured {
    border-color: var(--color-primary);
}

.course-badge {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: var(--color-primary);
    color: var(--color-dark);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 1;
}

.course-image {
    height: 140px;
    background: linear-gradient(135deg, var(--color-dark-tertiary), var(--color-dark-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    border-radius: 50%;
}

.course-icon svg {
    width: 32px;
    height: 32px;
    stroke: var(--color-primary);
}

.course-content {
    padding: var(--space-lg);
}

.course-meta {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.course-duration,
.course-type {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.course-duration {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.course-type {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-secondary);
}

.course-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--color-white);
    margin-bottom: var(--space-sm);
}

.course-description {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.course-highlights {
    margin-bottom: var(--space-md);
}

.course-highlights li {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    padding: 0.4rem 0;
    padding-left: 1.2rem;
    position: relative;
}

.course-highlights li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
}

.course-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-primary);
    transition: all var(--transition-fast);
}

.course-link svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast);
}

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

.course-link:hover svg {
    transform: translateX(4px);
}

.courses-cta {
    text-align: center;
    margin-top: var(--space-2xl);
}

/* ============================================
   TESTIMONIALS SECTION
   ============================================ */

.testimonials {
    background: var(--color-dark-secondary);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.testimonial-card {
    background: var(--color-dark);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-smooth);
    display: flex;
    flex-direction: column;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 180, 216, 0.3);
}

.testimonial-card.featured {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, var(--color-dark), var(--color-dark-tertiary));
}

.testimonial-content {
    flex: 1;
}

.quote-icon {
    width: 40px;
    height: 40px;
    margin-bottom: var(--space-md);
}

.quote-icon svg {
    width: 100%;
    height: 100%;
    fill: var(--color-primary);
    opacity: 0.3;
}

.testimonial-text {
    font-size: 1rem;
    color: var(--color-white-soft);
    line-height: 1.8;
    margin-bottom: var(--space-lg);
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.author-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.author-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 0.2rem;
}

.author-title {
    font-size: 0.85rem;
    color: var(--color-primary);
    margin-bottom: 0.1rem;
}

.author-batch {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

/* ============================================
   CAMPUS SECTION
   ============================================ */

.campus {
    background: var(--color-dark);
}

.campus-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-3xl);
    align-items: stretch;
}

.campus-text {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-xl);
}

.campus-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.campus-feature {
    background: var(--color-dark-secondary);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-smooth);
}

.campus-feature:hover {
    border-color: rgba(0, 180, 216, 0.3);
}

.feature-number {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    color: var(--color-primary);
    display: block;
    margin-bottom: 0.25rem;
}

.feature-label {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.campus-images {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.campus-quick-facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--color-border);
}

.campus-fact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 10px 12px;
}

.campus-fact-icon {
    font-size: 1.15rem;
    flex-shrink: 0;
    line-height: 1;
}

.campus-fact-item div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.campus-fact-item strong {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.2;
}

.campus-fact-item span {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    line-height: 1.3;
}

.campus-image-caption {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0 4px;
}

.caption-icon {
    color: var(--color-primary);
    font-size: 0.65rem;
    flex-shrink: 0;
    margin-top: 4px;
}

.campus-image-caption p {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.campus-image-caption strong {
    color: var(--color-text);
    font-weight: 600;
}

.campus-main-img {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-lg);
}

/* ============================================
   CTA SECTION
   ============================================ */

.cta-section {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    padding: var(--space-4xl) 0;
    text-align: center;
}

.cta-content {
    max-width: 700px;
    margin: 0 auto;
}

.cta-title {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: var(--color-dark);
    margin-bottom: var(--space-md);
}

.cta-text {
    font-size: 1.15rem;
    color: rgba(12, 24, 37, 0.8);
    margin-bottom: var(--space-xl);
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.cta-note {
    font-size: 0.9rem;
    color: rgba(12, 24, 37, 0.6);
}

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

.footer {
    background: var(--color-dark-secondary);
    padding: var(--space-3xl) 0 var(--space-lg);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.footer-logo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--space-md);
}

.footer-logo .logo-text {
    font-family: var(--font-serif);
    font-size: 2rem;
    color: var(--color-white);
    letter-spacing: 3px;
}

.footer-logo .logo-tagline {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-description {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

.footer-social {
    display: flex;
    gap: var(--space-sm);
}

.social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: all var(--transition-fast);
}

.social-link svg {
    width: 18px;
    height: 18px;
    fill: var(--color-text-secondary);
    transition: fill var(--transition-fast);
}

.social-link:hover {
    background: var(--color-primary);
    transform: translateY(-2px);
}

.social-link:hover svg {
    fill: var(--color-dark);
}

.footer-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-links ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer-links a {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
    position: relative;
    display: inline-block;
}

.footer-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-primary);
    transition: width var(--transition-smooth);
}

.footer-links a:hover {
    color: var(--color-primary);
}

.footer-links a:hover::after {
    width: 100%;
}

.footer-contact address {
    font-style: normal;
}

.footer-contact p {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
    line-height: 1.6;
}

.footer-contact svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: var(--color-primary);
    margin-top: 3px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.footer-bottom-links {
    display: flex;
    gap: var(--space-lg);
}

.footer-bottom-links a {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
    position: relative;
}

.footer-bottom-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-primary);
    transition: width var(--transition-smooth);
}

.footer-bottom-links a:hover {
    color: var(--color-primary);
}

.footer-bottom-links a:hover::after {
    width: 100%;
}

/* ============================================
   ENHANCED ANIMATIONS & TRANSITIONS
   ============================================ */

/* Keyframe Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

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

@keyframes floatUp {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes glowPulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(0, 180, 216, 0.3);
    }

    50% {
        box-shadow: 0 0 40px rgba(0, 180, 216, 0.5);
    }
}

@keyframes borderGlow {

    0%,
    100% {
        border-color: rgba(0, 180, 216, 0.3);
    }

    50% {
        border-color: rgba(0, 180, 216, 0.6);
    }
}

@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

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

/* Hero Entrance Animations */
.hero-badge {
    animation: fadeInDown 0.8s ease-out 0.2s backwards;
}

.hero-headline {
    animation: fadeInUp 1s ease-out 0.4s backwards;
}

.hero-subheadline {
    animation: fadeInUp 1s ease-out 0.6s backwards;
}

.hero-cta-group {
    animation: fadeInUp 1s ease-out 0.8s backwards;
}

.hero-stats {
    animation: fadeInUp 1s ease-out 1s backwards;
}

.scroll-indicator {
    animation: fadeInUp 1s ease-out 1.2s backwards, floatUp 2s ease-in-out 2s infinite;
}

/* Page Header Entrance */
.page-header .breadcrumb {
    animation: fadeInDown 0.6s ease-out 0.1s backwards;
}

.page-header .page-title {
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.page-header .page-subtitle {
    animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

.program-badge {
    animation: scaleIn 0.6s ease-out 0.3s backwards;
}

/* ============================================
   AWARDS YEAR-WISE TABS
   ============================================ */
.awards-year-tabs {
    margin-top: 2rem;
}

.year-tab-nav {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2.5rem;
    padding: 0.5rem;
    background: var(--color-dark-secondary);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
}

.year-tab-btn {
    padding: 0.6rem 1.4rem;
    border: 2px solid transparent;
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border-radius: var(--radius-lg);
    letter-spacing: 0.5px;
    transition: all var(--transition-fast);
}

.year-tab-btn:hover {
    color: var(--color-primary);
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
}

.year-tab-btn.active {
    color: var(--color-primary);
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    font-weight: 700;
}

.year-panel {
    display: none;
}

.year-panel.active {
    display: block;
    animation: awardsYearFadeIn 0.35s ease;
}

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

@media (max-width: 768px) {
    .year-tab-btn {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
}

/* Enhanced Scroll Animations */
.animate-on-scroll {
    opacity: 1;
    transform: none;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Slide from sides */
.animate-slide-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-slide-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.animate-slide-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-slide-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale animation */
.animate-scale {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* Staggered animations for grids */
.course-card.animate-on-scroll:nth-child(1),
.vision-card.animate-on-scroll:nth-child(1),
.eligibility-card.animate-on-scroll:nth-child(1),
.facility-card.animate-on-scroll:nth-child(1),
.advantage-item.animate-on-scroll:nth-child(1) {
    transition-delay: 0.1s;
}

.course-card.animate-on-scroll:nth-child(2),
.vision-card.animate-on-scroll:nth-child(2),
.eligibility-card.animate-on-scroll:nth-child(2),
.facility-card.animate-on-scroll:nth-child(2),
.advantage-item.animate-on-scroll:nth-child(2) {
    transition-delay: 0.2s;
}

.course-card.animate-on-scroll:nth-child(3),
.vision-card.animate-on-scroll:nth-child(3),
.eligibility-card.animate-on-scroll:nth-child(3),
.facility-card.animate-on-scroll:nth-child(3),
.advantage-item.animate-on-scroll:nth-child(3) {
    transition-delay: 0.3s;
}

.course-card.animate-on-scroll:nth-child(4),
.eligibility-card.animate-on-scroll:nth-child(4),
.facility-card.animate-on-scroll:nth-child(4),
.advantage-item.animate-on-scroll:nth-child(4) {
    transition-delay: 0.4s;
}

.facility-card.animate-on-scroll:nth-child(5) {
    transition-delay: 0.5s;
}

.facility-card.animate-on-scroll:nth-child(6) {
    transition-delay: 0.6s;
}

.facility-card.animate-on-scroll:nth-child(7) {
    transition-delay: 0.7s;
}

.facility-card.animate-on-scroll:nth-child(8) {
    transition-delay: 0.8s;
}

.testimonial-card.animate-on-scroll:nth-child(1) {
    transition-delay: 0.1s;
}

.testimonial-card.animate-on-scroll:nth-child(2) {
    transition-delay: 0.25s;
}

.testimonial-card.animate-on-scroll:nth-child(3) {
    transition-delay: 0.4s;
}

.leader-card.animate-on-scroll:nth-child(1) {
    transition-delay: 0.1s;
}

.leader-card.animate-on-scroll:nth-child(2) {
    transition-delay: 0.2s;
}

.leader-card.animate-on-scroll:nth-child(3) {
    transition-delay: 0.3s;
}

.curriculum-item.animate-on-scroll:nth-child(1) {
    transition-delay: 0.1s;
}

.curriculum-item.animate-on-scroll:nth-child(2) {
    transition-delay: 0.15s;
}

.curriculum-item.animate-on-scroll:nth-child(3) {
    transition-delay: 0.2s;
}

.curriculum-item.animate-on-scroll:nth-child(4) {
    transition-delay: 0.25s;
}

.curriculum-item.animate-on-scroll:nth-child(5) {
    transition-delay: 0.3s;
}

.curriculum-item.animate-on-scroll:nth-child(6) {
    transition-delay: 0.35s;
}

.step-card.animate-on-scroll:nth-child(1) {
    transition-delay: 0.1s;
}

.step-card.animate-on-scroll:nth-child(2) {
    transition-delay: 0.2s;
}

.step-card.animate-on-scroll:nth-child(3) {
    transition-delay: 0.3s;
}

.step-card.animate-on-scroll:nth-child(4) {
    transition-delay: 0.4s;
}

.contact-item.animate-on-scroll:nth-child(1) {
    transition-delay: 0.1s;
}

.contact-item.animate-on-scroll:nth-child(2) {
    transition-delay: 0.2s;
}

.contact-item.animate-on-scroll:nth-child(3) {
    transition-delay: 0.3s;
}

.contact-item.animate-on-scroll:nth-child(4) {
    transition-delay: 0.4s;
}

/* Enhanced Button Animations */
.btn {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 180, 216, 0.4);
}

.btn-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
}

.btn-outline-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 180, 216, 0.25);
}

.btn-white:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Enhanced Card Hover Effects */
.course-card {
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.course-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.course-card.featured:hover {
    animation: borderGlow 2s ease-in-out infinite;
}

.testimonial-card {
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.vision-card,
.leader-card,
.eligibility-card,
.facility-card,
.affiliation-card,
.hostel-card,
.comparison-card {
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.vision-card:hover,
.leader-card:hover,
.eligibility-card:hover,
.facility-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Icon Animations */
.feature-icon,
.vision-icon,
.eligibility-icon,
.facility-icon,
.advantage-icon,
.contact-icon {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.feature-item:hover .feature-icon,
.vision-card:hover .vision-icon,
.eligibility-card:hover .eligibility-icon,
.facility-card:hover .facility-icon,
.advantage-item:hover .advantage-icon {
    transform: scale(1.1) rotate(5deg);
    background: var(--color-primary);
}

.feature-item:hover .feature-icon svg,
.vision-card:hover .vision-icon svg,
.eligibility-card:hover .eligibility-icon svg,
.facility-card:hover .facility-icon svg,
.advantage-item:hover .advantage-icon svg {
    stroke: var(--color-dark);
}

/* Course Icon Animation */
.course-icon {
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.course-card:hover .course-icon {
    transform: scale(1.15);
}

.course-card:hover .course-icon svg {
    stroke: var(--color-primary-hover);
}

/* Removed duplicate nav-link animations */

/* Section Title Animation */
.section-title {
    position: relative;
    display: inline-block;
}

.section-label {
    transition: all 0.3s ease;
}

.section-header:hover .section-label {
    letter-spacing: 2px;
}

/* Image Hover Effects */
.about-image-wrapper,
.campus-highlight-image {
    overflow: hidden;
}

.about-image-wrapper img,
.campus-highlight-image img,
.campus-main-img {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.about-image:hover .about-image-wrapper img,
.campus-highlight-image:hover img,
.campus-main-img:hover {
    transform: scale(1.08);
}

/* Quote Animation */
.about-quote {
    transition: all 0.5s ease;
}

.about-image:hover .about-quote {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* Footer Social Links */
.social-link,
.social-link-lg {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.social-link:hover,
.social-link-lg:hover {
    transform: translateY(-5px) scale(1.1);
}

/* Form Input Focus Animation */
.form-group input,
.form-group select,
.form-group textarea {
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 180, 216, 0.15);
}

/* Step Number Animation */
.step-number {
    transition: all 0.4s ease;
}

.step-card:hover .step-number {
    transform: scale(1.15);
    box-shadow: 0 8px 25px rgba(0, 180, 216, 0.4);
}

/* Badge Pulse */
.hero-badge,
.course-badge,
.program-badge {
    animation: pulse 3s ease-in-out infinite;
}

/* Admission Banner Glow */
.admission-banner {
    animation: glowPulse 3s ease-in-out infinite;
}

/* CTA Section Animation */
.cta-section {
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
    animation: floatUp 6s ease-in-out infinite;
}

/* Curriculum Item Hover */
.curriculum-item {
    transition: all 0.4s ease;
}

.curriculum-item:hover {
    transform: translateX(10px);
    border-left-width: 5px;
    background: var(--color-dark-tertiary);
}

/* Dropdown Menu Animation */
.dropdown-menu {
    transform-origin: top center;
}

.nav-dropdown:hover .dropdown-menu {
    animation: fadeInDown 0.3s ease-out;
}

/* Loading/Transition State */
.page-transition {
    animation: fadeInUp 0.6s ease-out;
}

/* Smooth Section Transitions */
.section {
    transition: background-color 0.3s ease;
}


/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Large Desktop */
@media (max-width: 1400px) {
    .courses-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small Laptop — Compact Navbar (1025px–1366px) */
@media (max-width: 1366px) {
    .nav-container {
        padding: 0 20px;
    }

    .nav-logo {
        gap: 10px;
        flex-shrink: 0;
    }

    .nav-logo .logo-img {
        height: 46px;
    }

    /* Hide text tagline — keep only logo image */
    .nav-logo .logo-tagline {
        display: none;
    }

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

    .nav-menu {
        gap: 0.25rem;
    }

    .nav-link {
        font-size: 0.82rem;
        padding: 0.4rem 0.3rem;
    }

    .nav-actions {
        gap: 0.5rem;
    }

    .btn-nav {
        padding: 0.55rem 1rem;
        font-size: 0.78rem;
    }
}

/* Tablet Landscape */
@media (max-width: 1024px) {

    /* ---- MOBILE NAVBAR HEADER ---- */
    .nav-container {
        padding: 0 20px;
    }

    .nav-logo {
        gap: 12px;
        flex: 1;
        min-width: 0;
    }

    .nav-logo .logo-img {
        height: 42px;
        flex-shrink: 0;
    }

    .nav-logo .logo-tagline {
        font-size: 0.8rem;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nav-logo::after {
        height: 30px;
        margin: 0 2px;
    }

    /* ---- APPLY NOW BUTTON — single line ---- */
    .nav-actions {
        gap: 0.6rem;
        flex-shrink: 0;
    }

    .nav-actions .btn-nav {
        padding: 0.55rem 1rem;
        font-size: 0.75rem;
        white-space: nowrap;
        letter-spacing: 0.3px;
    }

    /* ---- HAMBURGER ICON — clean & ordered ---- */
    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: var(--radius-md);
        background: transparent;
        border: 1px solid var(--color-border);
        transition: background 0.3s ease, border-color 0.3s ease;
        flex-shrink: 0;
    }

    .nav-toggle:hover {
        background: var(--color-primary-light);
        border-color: var(--color-primary);
    }

    .nav-toggle.active {
        background: var(--color-primary);
        border-color: var(--color-primary);
    }

    .hamburger {
        width: 18px;
        height: 2px;
        background: var(--color-white);
        border-radius: 2px;
    }

    .hamburger::before,
    .hamburger::after {
        width: 18px;
        height: 2px;
        border-radius: 2px;
    }

    .hamburger::before {
        top: -6px;
    }

    .hamburger::after {
        top: 6px;
    }

    .nav-toggle.active .hamburger {
        background: transparent;
    }

    .nav-toggle.active .hamburger::before,
    .nav-toggle.active .hamburger::after {
        background: #fff;
    }

    /* ---- MOBILE SIDEBAR — Professional Redesign ---- */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 310px;
        max-width: 85vw;
        height: 100vh;
        height: 100dvh;
        background: linear-gradient(180deg, #1B3A5F 0%, #142231 100%);
        flex-direction: column;
        padding: 0;
        gap: 0;
        transition: right 0.45s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -16px 0 48px rgba(0, 0, 0, 0.35);
        z-index: 1000;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .nav-menu.active {
        right: 0;
    }

    /* Sidebar header area with brand */
    .nav-menu::before {
        content: 'CAAD';
        display: block;
        padding: 28px 28px 20px;
        font-family: var(--font-serif);
        font-size: 1.4rem;
        font-weight: 700;
        color: #B8965C;
        letter-spacing: 2px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        margin-bottom: 8px;
        flex-shrink: 0;
    }

    /* Nav links inside sidebar — force light text on dark bg */
    .nav-menu .nav-link {
        display: flex;
        align-items: center;
        padding: 14px 28px;
        font-size: 0.92rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85) !important;
        border-left: 3px solid transparent;
        transition: all 0.3s ease;
        text-decoration: none;
        width: 100%;
    }

    .nav-menu .nav-link:hover {
        background: rgba(184, 150, 92, 0.1);
        color: #B8965C !important;
        border-left-color: #B8965C;
        padding-left: 32px;
    }

    .nav-menu .nav-link.active {
        background: rgba(184, 150, 92, 0.12);
        color: #B8965C !important;
        border-left-color: #B8965C;
        font-weight: 600;
    }

    /* Remove underline effect in sidebar */
    .nav-menu .nav-link::after {
        display: none;
    }

    /* Dropdown in sidebar */
    .nav-menu .nav-dropdown {
        width: 100%;
    }

    .nav-menu .nav-link-dropdown {
        justify-content: space-between;
    }

    .nav-menu .nav-link-dropdown .dropdown-icon {
        stroke: rgba(255, 255, 255, 0.5);
    }

    .nav-menu .dropdown-menu {
        position: static !important;
        background: rgba(0, 0, 0, 0.18);
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 4px 0;
        margin: 0;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        display: block;
    }

    .nav-menu .dropdown-item {
        padding: 10px 28px 10px 44px;
        font-size: 0.83rem;
        color: rgba(255, 255, 255, 0.55) !important;
        transition: all 0.3s ease;
    }

    .nav-menu .dropdown-item:hover {
        color: #B8965C !important;
        background: rgba(184, 150, 92, 0.08);
        padding-left: 48px;
    }

    /* Hamburger lines — force white for light theme */
    .hamburger,
    .hamburger::before,
    .hamburger::after {
        background: var(--color-text) !important;
    }

    .nav-toggle.active .hamburger {
        background: transparent !important;
    }

    .nav-toggle.active .hamburger::before,
    .nav-toggle.active .hamburger::after {
        background: #fff !important;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .about-image {
        order: -1;
    }

    .about-quote {
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: var(--space-lg);
    }

    .campus-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

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

/* Tablet Portrait */
@media (max-width: 768px) {
    .hero {
        background-position: 70% center;
        min-height: 100svh;
    }

    .hero-overlay {
        background: linear-gradient(180deg,
                rgba(12, 24, 37, 0.5) 0%,
                rgba(12, 24, 37, 0.85) 50%,
                rgba(12, 24, 37, 0.95) 100%);
    }

    .hero-content {
        padding: var(--space-lg);
        padding-top: 30vh;
        max-width: 100%;
    }

    .hero-cta-group {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .hero-stats {
        flex-wrap: wrap;
        gap: var(--space-sm) var(--space-lg);
    }

    .stat-divider {
        display: none;
    }

    .scroll-indicator {
        display: none;
    }

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

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

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

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    :root {
        --space-4xl: 4rem;
        --space-3xl: 3rem;
    }

    .hero-content {
        padding-top: 25vh;
    }

    .hero-headline {
        font-size: 2rem;
    }

    .hero-badge {
        font-size: 0.75rem;
    }

    .section {
        padding: var(--space-2xl) 0;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .feature-item {
        flex-direction: column;
        text-align: center;
    }

    .campus-features {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }

    .campus-feature {
        padding: var(--space-md);
    }

    .feature-number {
        font-size: 2rem;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

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

    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
}

/* Focus states */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* ============================================
   MULTI-PAGE ADDITIONS
   ============================================ */

/* Navigation Dropdown */
.nav-dropdown {
    position: relative;
}

.nav-link-dropdown {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.dropdown-icon {
    width: 14px;
    height: 14px;
    transition: transform var(--transition-fast);
}

.nav-dropdown:hover .dropdown-icon {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--color-dark-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 0.5rem 0;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-lg);
    z-index: 100;
}

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-item {
    display: block;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}

.dropdown-item:hover,
.dropdown-item.active {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-primary);
}

/* ============================================
   ABOUT PAGE — IMAGE BANNER
   ============================================ */

.about-page-banner {
    position: relative;
    overflow: hidden;
    min-height: 500px;
    display: flex;
    align-items: flex-end;
}

/* Full-bleed background image */
.about-banner-img {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.about-banner-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    display: block;
}

/* Dark gradient overlay so text is legible */
.about-banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.45) 45%,
        rgba(0, 0, 0, 0.15) 100%
    );
}

/* Content sits above overlay */
.about-banner-content {
    position: relative;
    z-index: 2;
    padding-top: 120px;   /* clear the fixed nav */
    padding-bottom: 3.5rem;
    text-align: left;
}

/* Override page-header centered breadcrumb + text for banner */
.about-page-banner .breadcrumb {
    justify-content: flex-start;
}

.about-page-banner .breadcrumb a,
.about-page-banner .breadcrumb span {
    color: rgba(255, 255, 255, 0.65);
}

.about-page-banner .breadcrumb a:hover {
    color: var(--color-primary);
}

.about-page-banner .page-title {
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.about-page-banner .page-subtitle {
    color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 768px) {
    .about-page-banner {
        min-height: 360px;
    }
    .about-banner-content {
        padding-bottom: 2.5rem;
    }
}

/* Page Header */
.page-header {
    background: linear-gradient(135deg, var(--color-dark-secondary), var(--color-dark-tertiary));
    padding: calc(100px + var(--space-2xl)) 0 var(--space-2xl);
    text-align: center;
}

.page-header-program {
    padding-bottom: var(--space-3xl);
}

.breadcrumb {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.breadcrumb a {
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

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

.breadcrumb span:not(:last-child) {
    opacity: 0.5;
}

.page-title {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: var(--color-white);
    margin-bottom: var(--space-sm);
}

.page-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
}

.program-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.program-badge {
    display: inline-block;
    background: var(--color-primary-light);
    color: var(--color-primary);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Active nav link - consolidated above */

/* Vision/Mission Cards */
.vision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.vision-card {
    background: var(--color-dark);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-smooth);
}

.vision-card:hover {
    border-color: rgba(0, 180, 216, 0.3);
    transform: translateY(-5px);
}

.vision-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    border-radius: 50%;
}

.vision-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--color-primary);
}

.vision-card h3 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--color-white);
    margin-bottom: var(--space-sm);
}

.vision-card p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* Leadership Grid */
.leadership-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.leader-card {
    background: var(--color-dark-secondary);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-smooth);
}

.leader-card:hover {
    border-color: rgba(0, 180, 216, 0.3);
}

.leader-avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    border-radius: 50%;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--color-primary);
    border: 3px solid var(--color-primary);
    overflow: hidden;
}

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

.affiliation-logo {
    width: 88px;
    height: 88px;
    margin: 0 auto var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: #ffffff;
    padding: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.affiliation-logo img,
.affiliation-logo svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.leader-card h3 {
    font-size: 1.1rem;
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}

.leader-title {
    font-size: 0.9rem;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.leader-bio {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Affiliations Grid — 5 cards, 3+2 centred layout */
.affiliations-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
}

/* Row 1: 3 cards each spanning 2 of 6 columns */
.affiliation-card:nth-child(-n+3) { grid-column: span 2; }

/* Row 2: 2 cards centred (cols 2–3 and cols 4–5) */
.affiliation-card:nth-child(4)    { grid-column: 2 / span 2; }
.affiliation-card:nth-child(5)    { grid-column: 4 / span 2; }

.affiliation-card {
    background: var(--color-dark);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
}

.affiliation-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 1;
}

.affiliation-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(184, 150, 92, 0.3);
}

.affiliation-card:hover::before { opacity: 1; }

/* Big white image panel */
.aff-img-area {
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 2.5rem;
    height: 190px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    transition: background 0.25s ease;
}

.affiliation-card:hover .aff-img-area { background: #f8f6f2; }

.aff-img-area img {
    max-height: 140px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

.affiliation-card:hover .aff-img-area img { transform: scale(1.06); }

/* Text body */
.aff-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 1;
    text-align: center;
    align-items: center;
}

.affiliation-card h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-white);
    margin: 0;
    line-height: 1.3;
}

.affiliation-card p {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

/* Coloured status pill */
.affiliation-status {
    display: inline-block;
    padding: 0.22rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.affiliation-status.affiliated  { background: rgba(59,130,246,0.12);  color: #3B82F6; border: 1px solid rgba(59,130,246,0.25); }
.affiliation-status.approved    { background: rgba(34,197,94,0.12);   color: #16A34A; border: 1px solid rgba(34,197,94,0.25);  }
.affiliation-status.accredited  { background: rgba(168,85,247,0.12);  color: #9333EA; border: 1px solid rgba(168,85,247,0.25); }
.affiliation-status.certified   { background: rgba(234,179,8,0.12);   color: #B45309; border: 1px solid rgba(234,179,8,0.25);  }
.affiliation-status.recognised  { background: rgba(249,115,22,0.12);  color: #EA6D00; border: 1px solid rgba(249,115,22,0.25); }

/* Gold code tag */
.affiliation-code {
    display: inline-block;
    background: var(--color-primary-light);
    color: var(--color-primary);
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-top: auto;
}

/* Responsive */
@media (max-width: 1024px) {
    .affiliations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .affiliation-card:nth-child(-n+3),
    .affiliation-card:nth-child(4),
    .affiliation-card:nth-child(5) {
        grid-column: span 1;
    }
}

@media (max-width: 560px) {
    .affiliations-grid { grid-template-columns: 1fr; }
    .aff-img-area      { height: 160px; }
}

/* Courses Grid 2 columns */
.courses-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.course-card-large .course-content {
    padding: var(--space-xl);
}

/* Advantages Grid */
.advantages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.advantage-item {
    text-align: center;
    padding: var(--space-lg);
}

.advantage-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    border-radius: 50%;
}

.advantage-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--color-primary);
}

.advantage-item h4 {
    font-size: 1rem;
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}

.advantage-item p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

/* NATA Banner */
.nata-banner {
    background: linear-gradient(135deg, var(--color-dark-tertiary), var(--color-dark));
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 180, 216, 0.3);
}

.nata-content {
    max-width: 700px;
}

.nata-content p {
    font-size: 1.05rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* Program Page Styles */
.program-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-3xl);
    align-items: start;
}

.program-details-card {
    background: var(--color-dark-secondary);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: sticky;
    top: 120px;
}

.program-details-card h3 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--color-white);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.program-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.program-info-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-label {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.info-value {
    font-size: 0.9rem;
    color: var(--color-white);
    font-weight: 500;
}

.info-value.highlight {
    color: var(--color-primary);
    font-weight: 600;
}

/* Eligibility Grid */
.eligibility-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.eligibility-card {
    background: var(--color-dark);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-smooth);
}

.eligibility-card:hover {
    border-color: rgba(0, 180, 216, 0.3);
    transform: translateY(-5px);
}

.eligibility-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    border-radius: 50%;
}

.eligibility-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-primary);
}

.eligibility-card h4 {
    font-size: 1rem;
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}

.eligibility-card p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

/* Curriculum Grid */
.curriculum-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.curriculum-item {
    background: var(--color-dark-secondary);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-primary);
}

.curriculum-item h4 {
    font-size: 1rem;
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}

.curriculum-item p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

/* Admissions Page Styles */
.admission-banner {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    text-align: center;
}

.admission-badge {
    margin-bottom: var(--space-md);
}

.badge-label {
    font-size: 0.9rem;
    color: rgba(12, 24, 37, 0.7);
}

.badge-code {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
}

.admission-banner h2 {
    font-family: var(--font-serif);
    font-size: 2rem;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.admission-banner p {
    font-size: 1.1rem;
    color: rgba(12, 24, 37, 0.8);
}

/* Comparison Grid */
.comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.comparison-card {
    background: var(--color-dark);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
}

.comparison-card.featured {
    border-color: var(--color-primary);
}

.featured-tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--color-dark);
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.comparison-card h3 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--color-white);
    margin-bottom: var(--space-lg);
    text-align: center;
}

.comparison-details {
    margin-bottom: var(--space-lg);
}

.comparison-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.comparison-row .label {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.comparison-row .value {
    color: var(--color-white);
    font-weight: 500;
    font-size: 0.9rem;
}

/* Steps Grid */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.step-card {
    text-align: center;
    padding: var(--space-lg);
}

.step-number {
    width: 50px;
    height: 50px;
    margin: 0 auto var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-dark);
    border-radius: 50%;
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
}

.step-card h4 {
    font-size: 1rem;
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}

.step-card p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

/* Form Styles */
.form-section {
    max-width: 800px;
    margin: 0 auto;
}

.form-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.enquiry-form,
.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-white);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.875rem 1rem;
    background: var(--color-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: var(--color-white);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    transition: border-color var(--transition-fast);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--color-text-secondary);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-group select {
    cursor: pointer;
}

.contact-banner {
    text-align: center;
    padding: var(--space-xl);
    background: var(--color-dark-secondary);
    border-radius: var(--radius-lg);
}

.contact-banner h3 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--color-white);
    margin-bottom: var(--space-sm);
}

.contact-banner p {
    color: var(--color-text-secondary);
    font-size: 1rem;
}

.contact-banner strong {
    color: var(--color-primary);
}

/* Facilities Page */
.campus-highlight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.campus-highlight-content {
    padding-right: var(--space-lg);
}

.location-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.75rem 1.25rem;
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    margin-top: var(--space-lg);
}

.location-badge svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-primary);
}

.location-badge span {
    font-size: 0.9rem;
    color: var(--color-primary);
    font-weight: 500;
}

.campus-highlight-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.campus-highlight-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.facilities-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.facility-card {
    background: var(--color-dark);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-smooth);
}

.facility-card:hover {
    border-color: rgba(0, 180, 216, 0.3);
    transform: translateY(-5px);
}

.facility-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    border-radius: 50%;
}

.facility-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--color-primary);
}

.facility-card h3 {
    font-size: 1rem;
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}

.facility-card p {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Hostel Section */
.hostel-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

.hostel-features {
    list-style: none;
    margin-top: var(--space-lg);
}

.hostel-features li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    color: var(--color-text-secondary);
}

.hostel-features svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-primary);
    flex-shrink: 0;
}

.hostel-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.hostel-card {
    background: var(--color-dark-secondary);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.hostel-card h4 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}

.hostel-card p {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
}

/* ============================================
   FACILITY DETAIL PAGES - UNIQUE COMPONENTS
   ============================================ */

/* --- Split Hero Block --- */
.split-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 500px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-dark);
    border: 1px solid var(--color-border);
}

.split-hero-content {
    padding: var(--space-3xl) var(--space-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.split-hero-content .overline {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.split-hero-content h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    color: var(--color-white);
    line-height: 1.2;
    margin-bottom: var(--space-md);
}

.split-hero-content p {
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-sm);
}

.split-hero-visual {
    position: relative;
    overflow: hidden;
}

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

.split-hero-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--color-dark) 0%, transparent 30%);
    pointer-events: none;
}

.split-hero.reversed {
    direction: rtl;
}

.split-hero.reversed>* {
    direction: ltr;
}

.split-hero.reversed .split-hero-visual::after {
    background: linear-gradient(-90deg, var(--color-dark) 0%, transparent 30%);
}

/* --- Accent Quote Block --- */
.accent-quote {
    position: relative;
    padding: var(--space-xl) var(--space-xl) var(--space-xl) var(--space-3xl);
    background: var(--color-dark);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-primary);
    margin-bottom: var(--space-lg);
}

.accent-quote::before {
    content: '\201C';
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    font-family: var(--font-serif);
    font-size: 4rem;
    line-height: 1;
    color: var(--color-primary);
    opacity: 0.3;
}

.accent-quote p {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--color-white);
    line-height: 1.7;
    font-style: italic;
}

/* --- Stat Strip --- */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.stat-strip .stat-item {
    padding: var(--space-xl) var(--space-md);
    text-align: center;
    background: var(--color-dark);
    border-right: 1px solid var(--color-border);
    transition: all var(--transition-smooth);
}

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

.stat-strip .stat-item:hover {
    background: var(--color-dark-secondary);
}

/* Hero stats - transparent, no dark boxes */
.hero-stats .stat-item {
    background: transparent;
    border: none;
    padding: 0;
    text-align: left;
}

.stat-item .stat-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary-light);
}

.stat-item .stat-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-primary);
}

.stat-item h4 {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}

.stat-item p {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* --- Staggered Content Blocks --- */
.stagger-blocks {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    counter-reset: stagger;
}

.stagger-block {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--space-lg);
    align-items: start;
    padding: var(--space-xl);
    background: var(--color-dark);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    transition: all var(--transition-smooth);
    counter-increment: stagger;
}

.stagger-block:hover {
    border-color: var(--color-primary);
    transform: translateX(8px);
}

.stagger-number {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--color-primary);
    opacity: 0.4;
    line-height: 1;
    text-align: center;
    padding-top: 4px;
}

.stagger-number::before {
    content: "0" counter(stagger);
}

.stagger-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    opacity: 0.8;
}

.stagger-icon svg {
    width: 42px;
    height: 42px;
}

.stagger-content h3 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}

.stagger-content p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* --- Feature List with Icons --- */
.feature-list-styled {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.feature-list-styled li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-dark);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: all var(--transition-smooth);
}

.feature-list-styled li:hover {
    border-color: var(--color-primary);
    background: var(--color-dark-secondary);
}

.feature-list-styled li svg {
    width: 22px;
    height: 22px;
    stroke: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.feature-list-styled li span {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* --- Intro Text Block (centered, max-width) --- */
.intro-text-block {
    max-width: 800px;
    margin: 0 auto var(--space-xl);
    text-align: center;
}

.intro-text-block p {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-md);
}

.intro-text-block p:last-child {
    margin-bottom: 0;
}

/* --- Highlight Banner --- */
.highlight-banner {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-xl) var(--space-2xl);
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    border-radius: var(--radius-lg);
    color: #fff;
}

.highlight-banner-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.highlight-banner-icon svg {
    width: 32px;
    height: 32px;
    stroke: #fff;
}

.highlight-banner-text h3 {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    margin-bottom: var(--space-xs);
    color: #fff;
}

.highlight-banner-text p {
    font-size: 0.95rem;
    opacity: 0.9;
    line-height: 1.6;
    color: #fff;
}

/* --- Facility Detail Content (simple centered) --- */
.facility-detail-content {
    max-width: var(--max-width-narrow);
    margin: 0 auto;
    text-align: center;
}

.facility-detail-content .about-text {
    margin-bottom: var(--space-md);
}

/* --- Responsive for Facility Pages --- */
@media (max-width: 992px) {
    .split-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .split-hero.reversed {
        direction: ltr;
    }

    .split-hero-visual {
        height: 300px;
        order: -1;
    }

    .split-hero-visual::after {
        background: linear-gradient(180deg, transparent 60%, var(--color-dark) 100%) !important;
    }

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

    .stat-strip .stat-item {
        border-bottom: 1px solid var(--color-border);
    }

    .stat-strip .stat-item:nth-child(2) {
        border-right: none;
    }

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

@media (max-width: 576px) {
    .split-hero-content {
        padding: var(--space-xl) var(--space-md);
    }

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

    .stat-strip .stat-item {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .stagger-block {
        grid-template-columns: 50px 1fr;
        padding: var(--space-md);
    }

    .stagger-number {
        font-size: 2rem;
    }

    .accent-quote {
        padding-left: var(--space-xl);
    }

    .accent-quote::before {
        font-size: 3rem;
        left: var(--space-sm);
    }

    .highlight-banner {
        flex-direction: column;
        text-align: center;
        padding: var(--space-xl) var(--space-md);
    }
}

/* Contact Page */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
}

.contact-details {
    margin-top: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.contact-item {
    display: flex;
    gap: var(--space-md);
}

.contact-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    border-radius: 50%;
}

.contact-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--color-primary);
}

.contact-text h4 {
    font-size: 1rem;
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}

.contact-text p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.contact-text a {
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

.contact-text a:hover {
    color: var(--color-primary);
}

.social-section {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.social-section h4 {
    font-size: 1rem;
    color: var(--color-white);
    margin-bottom: var(--space-md);
}

.social-links-large {
    display: flex;
    gap: var(--space-sm);
}

.social-link-lg {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: all var(--transition-fast);
}

.social-link-lg svg {
    width: 22px;
    height: 22px;
    fill: var(--color-text-secondary);
    transition: fill var(--transition-fast);
}

.social-link-lg:hover {
    background: var(--color-primary);
    transform: translateY(-3px);
}

.social-link-lg:hover svg {
    fill: var(--color-dark);
}

.contact-form-wrapper {
    background: var(--color-dark-secondary);
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
}

.contact-form-wrapper h3 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--color-white);
    margin-bottom: var(--space-lg);
}

/* Map Placeholder */
.map-placeholder {
    background: var(--color-dark);
    border-radius: var(--radius-lg);
    padding: var(--space-3xl);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.map-content svg {
    width: 60px;
    height: 60px;
    stroke: var(--color-primary);
    margin-bottom: var(--space-md);
}

.map-content h3 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--color-white);
    margin-bottom: var(--space-sm);
}

.map-content p {
    color: var(--color-text-secondary);
    font-size: 1rem;
}

/* ============================================
   RESPONSIVE - MULTI-PAGE
   ============================================ */

@media (max-width: 1024px) {

    .vision-grid,
    .leadership-grid,
    .affiliations-grid {
        grid-template-columns: 1fr;
    }

    .courses-grid-2 {
        grid-template-columns: 1fr;
    }

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

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

    .program-details-card {
        position: static;
    }

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

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

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

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

    .campus-highlight,
    .hostel-section,
    .contact-grid {
        grid-template-columns: 1fr;
    }

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

    /* Mobile Nav Dropdown */
    .nav-dropdown .dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        padding-left: var(--space-md);
        min-width: auto;
    }

    .dropdown-item {
        padding: 0.5rem 0;
    }
}

@media (max-width: 768px) {
    .page-header {
        padding: calc(80px + var(--space-xl)) 0 var(--space-xl);
    }

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

    .eligibility-grid,
    .curriculum-grid,
    .steps-grid,
    .advantages-grid,
    .facilities-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: 2rem;
    }
}

/* ============================================
   CAMPUS GALLERY
   ============================================ */

/* --- Masonry Gallery (new default) --- */
.campus-gallery {
    columns: 3;
    column-gap: var(--space-md);
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    break-inside: avoid;
    margin-bottom: var(--space-md);
    cursor: pointer;
    border: 1px solid var(--color-border);
    background: var(--color-dark);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
}

.gallery-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--color-primary);
}

.gallery-item.large {
    break-inside: avoid;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s ease;
    filter: brightness(0.92) contrast(1.05);
}

.gallery-item:hover img {
    transform: scale(1.05);
    filter: brightness(1) contrast(1.1);
}

.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(12, 24, 37, 0.6) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.gallery-item:hover::after {
    opacity: 1;
}

/* Gallery item overlay icon */
.gallery-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%) scale(0);
    background: var(--color-primary);
    border-radius: 50%;
    z-index: 2;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.gallery-item:hover::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
}

/* Gallery item caption */
.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-lg) var(--space-md);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 3;
}

.gallery-item:hover .gallery-caption {
    transform: translateY(0);
}

.gallery-caption h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: #fff;
    margin-bottom: 2px;
}

.gallery-caption p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 992px) {
    .campus-gallery {
        columns: 2;
    }
}

@media (max-width: 576px) {
    .campus-gallery {
        columns: 1;
    }
}

/* --- Poster Grid (for placement infographic posters) --- */
.poster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-lg);
    align-items: start;
}

.poster-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-dark);
    border: 1px solid var(--color-border);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.5s ease, border-color 0.3s ease;
}

.poster-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--color-primary);
    border-color: var(--color-primary);
}

.poster-card img {
    width: 100%;
    height: auto;
    display: block;
    transition: filter 0.4s ease;
    filter: brightness(0.95);
}

.poster-card:hover img {
    filter: brightness(1.05);
}

.poster-card .poster-label {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    padding: 6px 14px;
    background: var(--color-primary);
    color: var(--color-dark);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 100px;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(184, 150, 92, 0.3);
}

.poster-card .poster-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-lg);
    background: linear-gradient(0deg, rgba(12, 24, 37, 0.95) 0%, rgba(12, 24, 37, 0.6) 60%, transparent 100%);
    transform: translateY(30px);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.poster-card:hover .poster-overlay {
    transform: translateY(0);
    opacity: 1;
}

.poster-overlay h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 4px;
}

.poster-overlay p {
    font-size: 0.8rem;
    color: var(--color-primary);
    font-weight: 500;
}

@media (max-width: 768px) {
    .poster-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--space-md);
    }
}

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

/* --- Showcase Slider (horizontal scroll gallery) --- */
.showcase-slider {
    display: flex;
    gap: var(--space-lg);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: var(--space-md) 0 var(--space-xl);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

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

.showcase-slide {
    flex: 0 0 auto;
    width: 380px;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-dark);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.showcase-slide:hover {
    transform: scale(1.03);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.showcase-slide img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.showcase-slide:hover img {
    transform: scale(1.05);
}

.showcase-slide .slide-info {
    padding: var(--space-md) var(--space-lg);
    border-top: 2px solid var(--color-primary);
}

.slide-info h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--color-text);
    margin-bottom: 4px;
}

.slide-info p {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* Scroll hint fade edges */
.showcase-wrapper {
    position: relative;
}

.showcase-wrapper::before,
.showcase-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}

.showcase-wrapper::before {
    left: 0;
    background: linear-gradient(90deg, var(--color-dark) 0%, transparent 100%);
}

.showcase-wrapper::after {
    right: 0;
    background: linear-gradient(-90deg, var(--color-dark) 0%, transparent 100%);
}

[style*="--color-dark-secondary"] .showcase-wrapper::before {
    background: linear-gradient(90deg, var(--color-dark-secondary) 0%, transparent 100%);
}

[style*="--color-dark-secondary"] .showcase-wrapper::after {
    background: linear-gradient(-90deg, var(--color-dark-secondary) 0%, transparent 100%);
}

@media (max-width: 576px) {
    .showcase-slide {
        width: 300px;
    }
}

/* --- Facility Gallery Grid (shows ALL images visibly) --- */
.facility-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-lg);
    padding: var(--space-md) 0;
}

.facility-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-dark-secondary);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
}

.facility-gallery-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.facility-gallery-item img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

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

.facility-gallery-item .gallery-caption {
    padding: var(--space-sm) var(--space-md);
    border-top: 2px solid var(--color-primary);
}

.gallery-caption h4 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--color-text);
    margin-bottom: 2px;
}

.gallery-caption p {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

/* Span first item across 2 cols for visual interest */
.facility-gallery-item:first-child {
    grid-column: span 2;
}

.facility-gallery-item:first-child img {
    height: 320px;
}

@media (max-width: 768px) {
    .facility-gallery {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }

    .facility-gallery-item:first-child {
        grid-column: span 1;
    }

    .facility-gallery-item:first-child img {
        height: 240px;
    }
}

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

/* --- Lightbox --- */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.lightbox-caption {
    margin-top: 15px;
    color: white;
    text-align: center;
    font-family: var(--font-body);
    font-size: 1.1rem;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    background: none;
    border: none;
    z-index: 10000;
    transition: color 0.3s;
}

.lightbox-close:hover {
    color: var(--color-primary);
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: none;
    font-size: 24px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.3s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: var(--color-primary);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-prev {
    left: 30px;
}

.lightbox-next {
    right: 30px;
}

@media (max-width: 768px) {
    .lightbox-prev {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }
}

/* --- Batch Section Divider --- */
.batch-divider {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.batch-divider .batch-year {
    flex-shrink: 0;
    padding: var(--space-sm) var(--space-xl);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: var(--radius-lg);
    letter-spacing: 1px;
    box-shadow: 0 4px 20px rgba(184, 150, 92, 0.25);
}

.batch-divider .batch-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--color-primary), transparent);
}

.batch-divider .batch-count {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* ============================================
   MANAGEMENT TEAM SECTION
   ============================================ */

.management {
    background: var(--color-dark);
}

.management-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
    margin-bottom: var(--space-3xl);
}

/* Trust Card — full-width dark banner */
.management-card.trust-card {
    grid-column: 1 / -1;
    text-align: left;
    background: linear-gradient(135deg, #0C1825 0%, #1B3A5F 100%);
    border: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
}

.management-card.trust-card::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(184, 150, 92, 0.07);
    pointer-events: none;
}

.management-card.trust-card::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 180px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(184, 150, 92, 0.05);
    pointer-events: none;
}

.trust-card-inner {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 40px 48px;
    position: relative;
    z-index: 1;
}

.trust-logo-wrap {
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    border: 1px solid rgba(184, 150, 92, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

.trust-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Vertical divider between logo and info */
.trust-divider {
    width: 1px;
    height: 120px;
    background: rgba(184, 150, 92, 0.25);
    flex-shrink: 0;
}

.trust-info {
    flex: 1;
}

.trust-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #B8965C;
    margin-bottom: 6px;
}

.trust-name {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    color: #ffffff;
    margin-bottom: 4px;
    line-height: 1.2;
}

.trust-group {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 18px;
    font-style: italic;
}

.trust-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.trust-tag {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    background: rgba(184, 150, 92, 0.15);
    border: 1px solid rgba(184, 150, 92, 0.35);
    color: #B8965C;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.trust-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 32px;
}

.trust-highlight-item {
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.72);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}

.highlight-icon {
    color: #B8965C;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 2px;
    font-weight: 700;
}

.management-card {
    background: var(--color-dark-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-smooth);
    text-align: center;
}

.management-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 180, 216, 0.3);
    box-shadow: var(--shadow-lg);
}

.management-card.featured {
    border-color: var(--color-primary);
}

.management-image {
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: var(--color-dark-tertiary);
}

.management-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform var(--transition-smooth);
}

.management-card:hover .management-image img {
    transform: scale(1.05);
}

.management-content {
    padding: var(--space-lg);
}

.management-name {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}

.management-role {
    font-size: 0.9rem;
    color: var(--color-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-xs);
}

.management-credentials {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

/* Advisory Board */
/* Director — horizontal layout */
.management-card.director-card {
    grid-column: 1 / -1;
    text-align: left;
    background: var(--color-dark-secondary);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: visible;
}

.management-card.director-card:hover {
    transform: none;
    border-color: rgba(184, 150, 92, 0.25);
}

.director-inner {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.director-image-wrap {
    flex-shrink: 0;
    width: 280px;
    min-height: 340px;
    overflow: hidden;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.director-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.director-content {
    flex: 1;
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.director-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-primary);
}

.director-name {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    color: var(--color-text);
    line-height: 1.2;
    margin: 0;
}

.director-credentials {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.director-vision {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    font-style: italic;
    border-left: 3px solid var(--color-primary);
    padding-left: 16px;
    margin: 8px 0 16px;
}

.director-highlights {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.director-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-num {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.stat-label {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
    max-width: 120px;
}

.director-stat .stat-label {
    color: var(--color-text);
    opacity: 0.75;
}

@media (max-width: 768px) {
    .director-inner {
        flex-direction: column;
    }

    .director-image-wrap {
        width: 100%;
        min-height: 260px;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .director-content {
        padding: 24px 20px;
    }

    .director-highlights {
        gap: 20px;
    }
}

.advisory-section {
    margin-top: var(--space-2xl);
    padding-top: var(--space-2xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.advisory-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--color-white);
    text-align: center;
    margin-bottom: var(--space-xl);
}

.advisory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.advisory-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: var(--color-dark-secondary);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-smooth);
}

.advisory-card:hover {
    border-color: rgba(0, 180, 216, 0.3);
    background: var(--color-dark-tertiary);
}

.advisory-image {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--color-primary);
}

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

.advisory-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 0.25rem;
}

.advisory-role {
    font-size: 0.85rem;
    color: var(--color-primary);
    margin-bottom: 0.25rem;
}

.advisory-subtitle {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

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

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

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

    .trust-card-inner {
        flex-direction: column;
        text-align: center;
        padding: 28px 20px;
        gap: 20px;
    }

    .trust-divider {
        display: none;
    }

    .trust-tags {
        justify-content: center;
    }

    .trust-highlights {
        grid-template-columns: 1fr;
        text-align: left;
    }

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

    .advisory-card {
        flex-direction: column;
        text-align: center;
    }
}

/* ============================================
   INTERNATIONAL COLLABORATIONS SECTION
   ============================================ */

.collaborations {
    background: var(--color-dark-secondary);
}

.collaborations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.collaboration-card {
    background: var(--color-dark);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-smooth);
}

.collaboration-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 180, 216, 0.3);
    box-shadow: var(--shadow-lg);
}

.collaboration-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.collaboration-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-smooth);
}

.collaboration-image .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.collaboration-image:hover .image-overlay {
    opacity: 1;
}

.collaboration-image .image-overlay span {
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
}

.collaboration-card:hover .collaboration-image img {
    transform: scale(1.1);
}

.collaboration-content {
    padding: var(--space-lg);
}

.collaboration-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}

.collaboration-location {
    font-size: 0.85rem;
    color: var(--color-primary);
    font-weight: 500;
    margin-bottom: var(--space-sm);
}

.collaboration-description {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* Collaboration Slider */
.collaboration-slider {
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin-top: var(--space-xl);
}

.slider-track {
    display: flex;
    gap: var(--space-md);
    animation: scrollSlider 20s linear infinite;
}

.slider-item {
    flex-shrink: 0;
    width: 300px;
    height: 200px;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.slider-item .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.slider-item:hover .image-overlay {
    opacity: 1;
}

.slider-item .image-overlay span {
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
}

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

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

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

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

    .slider-item {
        width: 250px;
        height: 170px;
    }
}

/* ============================================
   PLACEMENTS SECTION
   ============================================ */

.placements {
    background: var(--color-dark);
}

.placements-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-3xl);
    margin-bottom: var(--space-3xl);
    padding: var(--space-xl) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.placement-stat {
    text-align: center;
}

.placement-stat .stat-number {
    font-family: var(--font-serif);
    font-size: 3rem;
    color: var(--color-primary);
    display: block;
    line-height: 1;
}

.placement-stat .stat-label {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: var(--space-xs);
    display: block;
}

.placements-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

.placement-category {
    background: var(--color-dark-secondary);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-smooth);
}

.placement-category:hover {
    border-color: rgba(0, 180, 216, 0.3);
    transform: translateY(-5px);
}

.category-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    border-radius: 50%;
}

.category-icon svg {
    width: 32px;
    height: 32px;
    stroke: var(--color-primary);
}

.placement-category h3 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--color-white);
    margin-bottom: var(--space-sm);
}

.placement-category p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.higher-education-logos {
    text-align: center;
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.higher-education-logos h4 {
    font-size: 1rem;
    color: var(--color-white);
    margin-bottom: var(--space-md);
    font-weight: 500;
}

.university-names {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
}

.university-tag {
    padding: 0.6rem 1.2rem;
    background: var(--color-dark-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}

.university-tag:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

@media (max-width: 992px) {
    .placements-stats {
        gap: var(--space-xl);
    }

    .placement-stat .stat-number {
        font-size: 2.5rem;
    }

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

@media (max-width: 576px) {
    .placements-stats {
        flex-direction: column;
        gap: var(--space-lg);
    }

    .placements-categories {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   AWARDS SECTION
   ============================================ */

.awards {
    background: var(--color-dark-secondary);
}

.awards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.award-card {
    background: var(--color-dark);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-smooth);
}

.award-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 180, 216, 0.3);
    box-shadow: var(--shadow-lg);
}

.award-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
}

.award-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-smooth);
}

.award-card:hover .award-image img {
    transform: scale(1.05);
}

.award-content {
    padding: var(--space-lg);
}

.award-badge {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    background: var(--color-primary-light);
    border: 1px solid rgba(0, 180, 216, 0.3);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-sm);
}

.award-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--color-white);
    margin-bottom: var(--space-sm);
}

.award-description {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.awards-more {
    overflow: hidden;
    margin-top: var(--space-lg);
}

.awards-scroll {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
}

.awards-scroll img {
    width: 200px;
    height: 150px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all var(--transition-smooth);
}

.awards-scroll img:hover {
    border-color: var(--color-primary);
    transform: scale(1.05);
}

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

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

    .awards-scroll {
        flex-wrap: wrap;
    }

    .awards-scroll img {
        width: 150px;
        height: 120px;
    }
}

/* ============================================
   IMAGE LIGHTBOX MODAL
   ============================================ */

.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.lightbox.active .lightbox-content {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 10001;
}

.lightbox-close:hover {
    color: var(--color-primary);
}

/* Image overlay for clickable effect */
.image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.image-overlay span {
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    background: rgba(0, 180, 216, 0.9);
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.award-image {
    position: relative;
    cursor: pointer;
}

.award-image:hover .image-overlay {
    opacity: 1;
}

.award-image:hover img {
    transform: scale(1.05);
}

/* ============================================
   PREMIUM ARCHITECTURAL ANIMATIONS
   Elegant, professional motion design
   ============================================ */

/* Animation Timing Variables */
:root {
    --ease-architectural: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-smooth-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-elegant: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-slow: 1s;
    --duration-medium: 0.7s;
    --duration-fast: 0.4s;
}

/* ============================================
   HERO CINEMATIC ENTRY ANIMATIONS
   ============================================ */

/* Initial hidden states for hero elements */
.hero-badge,
.hero-headline,
.hero-subheadline,
.hero-cta-group,
.hero-stats,
.scroll-indicator {
    opacity: 0;
}

/* Hero Badge - Fade in from above with scale */
.hero-badge {
    animation: heroFadeDown 0.8s var(--ease-smooth-out) 0.3s forwards;
}

@keyframes heroFadeDown {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
    }

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

/* Hero Headline - Elegant reveal with slight blur */
.hero-headline {
    animation: heroReveal 1.2s var(--ease-smooth-out) 0.5s forwards;
}

@keyframes heroReveal {
    from {
        opacity: 0;
        transform: translateY(40px);
        filter: blur(4px);
    }

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

/* Hero Subheadline - Soft fade up */
.hero-subheadline {
    animation: heroFadeUp 0.9s var(--ease-architectural) 0.8s forwards;
}

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Hero CTA Group - Fade up with stagger effect via CSS */
.hero-cta-group {
    animation: heroFadeUp 0.8s var(--ease-architectural) 1s forwards;
}

/* Hero Stats - Panel slide in */
.hero-stats {
    animation: panelSlideUp 0.9s var(--ease-smooth-out) 1.2s forwards;
}

@keyframes panelSlideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

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

/* Scroll Indicator - Delayed gentle fade */
.scroll-indicator {
    animation: gentleFade 1s ease-out 2s forwards;
}

@keyframes gentleFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */

/* Base reveal state */
.reveal {
    opacity: 0;
    transition: all var(--duration-medium) var(--ease-architectural);
}

.reveal.visible {
    opacity: 1;
}

/* Fade Up Reveal */
.reveal-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Fade Up Slow - More dramatic for section headers */
.reveal-fade-up-slow {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity var(--duration-slow) var(--ease-architectural),
        transform var(--duration-slow) var(--ease-smooth-out);
}

.reveal-fade-up-slow.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Slide from Left */
.reveal-slide-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity var(--duration-medium) var(--ease-architectural),
        transform var(--duration-medium) var(--ease-smooth-out);
}

.reveal-slide-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Slide from Right */
.reveal-slide-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity var(--duration-medium) var(--ease-architectural),
        transform var(--duration-medium) var(--ease-smooth-out);
}

.reveal-slide-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale Reveal */
.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity var(--duration-medium) var(--ease-architectural),
        transform var(--duration-medium) var(--ease-smooth-out);
}

.reveal-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* Panel Reveal - Architectural wall/panel movement */
.reveal-panel {
    opacity: 0;
    transform: translateY(80px) rotateX(8deg);
    transform-origin: bottom center;
    transition: opacity var(--duration-slow) var(--ease-architectural),
        transform var(--duration-slow) var(--ease-smooth-out);
}

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

/* Mask Reveal - Content revealed behind sliding mask */
.reveal-mask {
    position: relative;
    overflow: hidden;
}

.reveal-mask::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-dark);
    transform: scaleX(1);
    transform-origin: right;
    transition: transform 0.8s var(--ease-smooth-out);
}

.reveal-mask.visible::after {
    transform: scaleX(0);
}

/* ============================================
   STAGGER ANIMATIONS FOR GRIDS
   ============================================ */

/* Stagger delay utility classes */
.stagger-1 {
    transition-delay: 0.1s !important;
}

.stagger-2 {
    transition-delay: 0.2s !important;
}

.stagger-3 {
    transition-delay: 0.3s !important;
}

.stagger-4 {
    transition-delay: 0.4s !important;
}

.stagger-5 {
    transition-delay: 0.5s !important;
}

.stagger-6 {
    transition-delay: 0.6s !important;
}

/* ============================================
   PARALLAX EFFECTS
   ============================================ */

.parallax-slow {
    will-change: transform;
    transition: transform 0.1s linear;
}

.parallax-medium {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* Subtle parallax for about image */
.about-image-wrapper {
    overflow: hidden;
}

.about-image-wrapper img {
    transition: transform 0.3s var(--ease-elegant);
}

/* ============================================
   ENHANCED HOVER ANIMATIONS
   ============================================ */

/* Card Hover - Premium lift effect */
.course-card,
.testimonial-card,
.management-card,
.collaboration-card,
.award-card,
.placement-category,
.advisory-card {
    transition: transform 0.5s var(--ease-smooth-out),
        box-shadow 0.5s var(--ease-elegant),
        border-color 0.4s ease;
}

.course-card:hover,
.management-card:hover,
.collaboration-card:hover,
.award-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.testimonial-card:hover {
    transform: translateY(-8px) scale(1.02);
}

.placement-category:hover,
.advisory-card:hover {
    transform: translateY(-8px);
}

/* Button Hover - Refined scale */
.btn {
    transition: all 0.4s var(--ease-smooth-out);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s var(--ease-architectural);
}

.btn:hover::before {
    left: 100%;
}

.btn-primary:hover,
.btn-nav:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 30px rgba(184, 150, 92, 0.3);
}

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

/* Removed duplicate nav-link styles */

/* Image Hover - Smooth zoom */
.course-card .course-icon,
.about-image-wrapper img,
.campus-main-img,
.management-image img,
.collaboration-image img,
.award-image img {
    transition: transform 0.6s var(--ease-smooth-out);
}

.course-card:hover .course-icon svg {
    transform: scale(1.1);
}

.about-image-wrapper:hover img,
.campus-main-img:hover {
    transform: scale(1.05);
}

/* Feature Item Hover */
.feature-item {
    transition: transform 0.4s var(--ease-smooth-out);
}

.feature-item:hover {
    transform: translateX(8px);
}

.feature-icon {
    transition: all 0.4s var(--ease-smooth-out);
}

.feature-item:hover .feature-icon {
    background: var(--color-primary);
    transform: scale(1.1);
}

.feature-item:hover .feature-icon svg {
    stroke: var(--color-dark);
}

/* Campus Feature Hover */
.campus-feature {
    transition: transform 0.4s var(--ease-smooth-out),
        background 0.4s ease;
}

.campus-feature:hover {
    transform: translateY(-5px);
    background: rgba(184, 150, 92, 0.1);
}

/* ============================================
   SECTION BACKGROUND TRANSITIONS
   ============================================ */

.section {
    position: relative;
}

/* Subtle gradient transition between sections */
.about::before,
.courses::before,
.testimonials::before,
.management::before,
.campus::before,
.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(180deg, rgba(12, 24, 37, 0) 0%, transparent 100%);
    pointer-events: none;
    opacity: 0.5;
}

/* ============================================
   FOOTER ANIMATIONS
   ============================================ */

.footer-brand,
.footer-links,
.footer-contact {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s var(--ease-architectural),
        transform 0.6s var(--ease-smooth-out);
}

.footer-brand.visible,
.footer-links.visible,
.footer-contact.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Social link hover */
.social-link {
    transition: transform 0.4s var(--ease-smooth-out),
        color 0.3s ease,
        background 0.3s ease;
}

.social-link:hover {
    transform: translateY(-5px) scale(1.1);
}

/* Footer link hover */
.footer-links a {
    transition: color 0.3s ease, transform 0.3s var(--ease-smooth-out);
    display: inline-block;
}

.footer-links a:hover {
    transform: translateX(5px);
}

/* ============================================
   NAVBAR ANIMATIONS
   ============================================ */

.navbar {
    transition: background 0.4s var(--ease-elegant),
        box-shadow 0.4s ease,
        transform 0.4s var(--ease-smooth-out);
}

.navbar.scrolled {
    background: rgba(12, 24, 37, 0.98);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* Logo animation */
.nav-logo {
    transition: transform 0.4s var(--ease-smooth-out);
}

.nav-logo:hover {
    transform: scale(1.02);
}

/* ============================================
   QUOTE ANIMATION
   ============================================ */

.about-quote {
    position: relative;
    overflow: hidden;
}

.about-quote blockquote {
    transition: transform 0.5s var(--ease-smooth-out);
}

.about-quote:hover blockquote {
    transform: translateX(5px);
}

/* ============================================
   STAT COUNTER ANIMATION
   ============================================ */

.stat-number {
    display: inline-block;
    transition: transform 0.4s var(--ease-smooth-out);
}

.stat-item:hover .stat-number {
    transform: scale(1.1);
}

/* ============================================
   TESTIMONIAL QUOTE ANIMATION
   ============================================ */

.quote-icon {
    transition: transform 0.5s var(--ease-smooth-out),
        opacity 0.4s ease;
}

.testimonial-card:hover .quote-icon {
    transform: scale(1.2) rotate(-5deg);
    opacity: 0.3;
}

/* ============================================
   CTA SECTION ANIMATION
   ============================================ */

.cta-content {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s var(--ease-architectural),
        transform 0.8s var(--ease-smooth-out);
}

.cta-content.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   REDUCED MOTION PREFERENCE
   ============================================ */

@media (prefers-reduced-motion: reduce) {

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

    .hero-badge,
    .hero-headline,
    .hero-subheadline,
    .hero-cta-group,
    .hero-stats,
    .scroll-indicator {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .reveal,
    .reveal-fade-up,
    .reveal-fade-up-slow,
    .reveal-slide-left,
    .reveal-slide-right,
    .reveal-scale,
    .reveal-panel {
        opacity: 1;
        transform: none;
    }
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {

    /* Reduce animation intensity on mobile */
    .reveal-fade-up,
    .reveal-fade-up-slow {
        transform: translateY(30px);
    }

    .reveal-slide-left,
    .reveal-slide-right {
        transform: translateY(30px);
    }

    .reveal-panel {
        transform: translateY(40px) rotateX(0);
    }

    /* Disable parallax on mobile */
    .parallax-slow,
    .parallax-medium {
        transform: none !important;
    }
}

/* ============================================
   ARCHITECTURAL TOOL ANIMATIONS
   Blueprint-style drafting motion design
   ============================================ */

/* ============================================
   BLUEPRINT LINE-DRAWING ANIMATION
   ============================================ */

/* Building outline SVG animation */
.blueprint-outline {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    width: 400px;
    height: 350px;
    opacity: 0.15;
    pointer-events: none;
    z-index: 1;
}

.blueprint-outline svg {
    width: 100%;
    height: 100%;
}

.blueprint-line {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawBlueprint 3s var(--ease-architectural) forwards;
}

.blueprint-line-delayed {
    animation-delay: 0.5s;
}

.blueprint-line-delayed-2 {
    animation-delay: 1s;
}

.blueprint-line-delayed-3 {
    animation-delay: 1.5s;
}

@keyframes drawBlueprint {
    to {
        stroke-dashoffset: 0;
    }
}

/* ============================================
   ARCHITECTURAL GRID OVERLAY
   ============================================ */

.arch-grid-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.5s var(--ease-architectural);
}

.arch-grid-overlay.visible {
    opacity: 1;
}

.arch-grid-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(184, 150, 92, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(184, 150, 92, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

/* Grid lines that sweep in */
.grid-line-horizontal,
.grid-line-vertical {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(184, 150, 92, 0.2), transparent);
    pointer-events: none;
}

.grid-line-horizontal {
    height: 1px;
    width: 0;
    left: 0;
    animation: sweepHorizontal 2s var(--ease-smooth-out) forwards;
}

.grid-line-vertical {
    width: 1px;
    height: 0;
    top: 0;
    background: linear-gradient(180deg, transparent, rgba(184, 150, 92, 0.2), transparent);
    animation: sweepVertical 2s var(--ease-smooth-out) forwards;
}

@keyframes sweepHorizontal {
    to {
        width: 100%;
    }
}

@keyframes sweepVertical {
    to {
        height: 100%;
    }
}

/* ============================================
   COMPASS & RULER FLOATING ELEMENTS
   ============================================ */

.arch-tool {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    opacity: 0.1;
    transition: transform 0.3s var(--ease-smooth-out);
}

.arch-tool-compass {
    top: 15%;
    right: 8%;
    width: 80px;
    height: 80px;
    animation: gentleFloat 8s ease-in-out infinite, compassRotate 20s linear infinite;
}

.arch-tool-ruler {
    bottom: 20%;
    right: 15%;
    width: 120px;
    height: 30px;
    animation: gentleFloat 10s ease-in-out infinite reverse;
    animation-delay: -2s;
}

.arch-tool-pencil {
    top: 60%;
    right: 5%;
    width: 100px;
    height: 20px;
    transform: rotate(-45deg);
    animation: pencilDraw 6s ease-in-out infinite;
}

.arch-tool svg {
    width: 100%;
    height: 100%;
    stroke: var(--color-primary);
    fill: none;
    stroke-width: 1;
}

@keyframes gentleFloat {

    0%,
    100% {
        transform: translateY(0) translateX(0);
    }

    25% {
        transform: translateY(-10px) translateX(5px);
    }

    50% {
        transform: translateY(-5px) translateX(-5px);
    }

    75% {
        transform: translateY(-15px) translateX(3px);
    }
}

@keyframes compassRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pencilDraw {

    0%,
    100% {
        transform: rotate(-45deg) translateX(0);
    }

    50% {
        transform: rotate(-45deg) translateX(20px);
    }
}

/* Scroll-based tool movement */
.arch-tool.scrolled {
    transform: translateY(var(--scroll-offset, 0));
}

/* ============================================
   SECTION DIVIDER SWEEP ANIMATION
   ============================================ */

.section-sweep {
    position: relative;
    overflow: hidden;
}

.section-sweep::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
            transparent,
            rgba(184, 150, 92, 0.5),
            var(--color-primary),
            rgba(184, 150, 92, 0.5),
            transparent);
    transition: left 1.2s var(--ease-smooth-out);
}

.section-sweep.visible::before {
    left: 100%;
}

/* Panel slide transition for sections */
.panel-reveal {
    position: relative;
    overflow: hidden;
}

.panel-reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-dark);
    transform: scaleX(1);
    transform-origin: right;
    transition: transform 1s var(--ease-smooth-out);
}

.panel-reveal.visible::after {
    transform: scaleX(0);
}

/* ============================================
   DRAFT SHEET EFFECT FOR CARDS
   ============================================ */

.draft-sheet {
    transform: translateY(30px) rotate(2deg);
    opacity: 0;
    transition:
        transform 0.8s var(--ease-smooth-out),
        opacity 0.6s ease-out;
    transform-origin: center bottom;
}

.draft-sheet.visible {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
}

/* Staggered rotation for multiple cards */
.draft-sheet:nth-child(odd) {
    transform: translateY(30px) rotate(-1.5deg);
}

.draft-sheet:nth-child(even) {
    transform: translateY(30px) rotate(1.5deg);
}

.draft-sheet.visible:nth-child(odd),
.draft-sheet.visible:nth-child(even) {
    transform: translateY(0) rotate(0deg);
}

/* Paper shadow effect */
.draft-sheet::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 5%;
    right: 5%;
    height: 20px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.8s ease-out 0.3s;
    z-index: -1;
}

.draft-sheet.visible::before {
    opacity: 1;
}

/* ============================================
   BLUEPRINT UNFOLD EFFECT FOR IMAGES
   ============================================ */

.blueprint-unfold {
    position: relative;
    overflow: hidden;
}

.blueprint-unfold img {
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 1s var(--ease-smooth-out);
}

.blueprint-unfold.visible img {
    transform: scaleY(1);
}

/* Alternative: Horizontal unfold */
.blueprint-unfold-horizontal {
    position: relative;
    overflow: hidden;
}

.blueprint-unfold-horizontal::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-dark-secondary);
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 1.2s var(--ease-smooth-out);
    z-index: 1;
}

.blueprint-unfold-horizontal.visible::before {
    transform: scaleX(0);
}

/* ============================================
   MEASUREMENT MARKS DECORATION
   ============================================ */

.measurement-marks {
    position: absolute;
    pointer-events: none;
    opacity: 0.08;
}

.measurement-marks-top {
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background-image: repeating-linear-gradient(90deg,
            var(--color-primary) 0,
            var(--color-primary) 1px,
            transparent 1px,
            transparent 50px);
}

.measurement-marks-left {
    top: 0;
    bottom: 0;
    left: 0;
    width: 20px;
    background-image: repeating-linear-gradient(180deg,
            var(--color-primary) 0,
            var(--color-primary) 1px,
            transparent 1px,
            transparent 50px);
}

/* ============================================
   CORNER BRACKETS DECORATION
   ============================================ */

.corner-bracket {
    position: absolute;
    width: 40px;
    height: 40px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.corner-bracket.visible {
    opacity: 0.15;
}

.corner-bracket::before,
.corner-bracket::after {
    content: '';
    position: absolute;
    background: var(--color-primary);
}

.corner-bracket-tl::before {
    top: 0;
    left: 0;
    width: 20px;
    height: 2px;
}

.corner-bracket-tl::after {
    top: 0;
    left: 0;
    width: 2px;
    height: 20px;
}

.corner-bracket-tr::before {
    top: 0;
    right: 0;
    width: 20px;
    height: 2px;
}

.corner-bracket-tr::after {
    top: 0;
    right: 0;
    width: 2px;
    height: 20px;
}

.corner-bracket-bl::before {
    bottom: 0;
    left: 0;
    width: 20px;
    height: 2px;
}

.corner-bracket-bl::after {
    bottom: 0;
    left: 0;
    width: 2px;
    height: 20px;
}

.corner-bracket-br::before {
    bottom: 0;
    right: 0;
    width: 20px;
    height: 2px;
}

.corner-bracket-br::after {
    bottom: 0;
    right: 0;
    width: 2px;
    height: 20px;
}

/* ============================================
   CROSSHAIR DECORATION
   ============================================ */

.crosshair {
    position: absolute;
    width: 30px;
    height: 30px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.crosshair.visible {
    opacity: 0.12;
}

.crosshair::before,
.crosshair::after {
    content: '';
    position: absolute;
    background: var(--color-primary);
}

.crosshair::before {
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    transform: translateY(-50%);
}

.crosshair::after {
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    transform: translateX(-50%);
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    .blueprint-outline {
        width: 200px;
        height: 175px;
        right: 2%;
        opacity: 0.1;
    }

    .arch-tool {
        display: none;
    }

    .arch-grid-overlay::before {
        background-size: 30px 30px;
    }

    .corner-bracket {
        width: 25px;
        height: 25px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .blueprint-line,
    .arch-tool,
    .grid-line-horizontal,
    .grid-line-vertical {
        animation: none;
    }

    .blueprint-line {
        stroke-dashoffset: 0;
    }
}

/* ============================================
   VIDEO GALLERY SECTION
   ============================================ */

.videos {
    background: var(--color-dark);
}

.video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.video-card {
    background: var(--color-dark-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-smooth);
}

.video-card:hover {
    border-color: rgba(184, 150, 92, 0.3);
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* Featured video spans full width on first row */
.video-featured {
    grid-column: 1 / -1;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-info {
    padding: var(--space-lg);
}

.video-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}

.video-featured .video-title {
    font-size: 1.5rem;
}

.video-description {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.video-cta {
    text-align: center;
    padding-top: var(--space-lg);
}

.btn-icon-left {
    width: 20px;
    height: 20px;
    margin-right: var(--space-sm);
    vertical-align: middle;
}

/* Responsive */
@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: 1fr;
    }

    .video-featured {
        grid-column: 1;
    }

    .video-title {
        font-size: 1.1rem;
    }

    .video-featured .video-title {
        font-size: 1.25rem;
    }
}

/* ============================================
   WELCOME MODAL
   ============================================ */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

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

.modal-content {
    background: var(--color-bg-secondary);
    border-radius: 24px;
    padding: 3rem 2.5rem;
    max-width: 460px;
    width: 90%;
    position: relative;
    transform: scale(0.95) translateY(20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-overlay.active .modal-content {
    transform: scale(1) translateY(0);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(128, 128, 128, 0.1);
    color: var(--color-white);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: rgba(128, 128, 128, 0.2);
    transform: rotate(90deg);
}

.modal-close svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
}

.modal-body {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-logo {
    width: auto;
    height: 52px;
    max-width: 200px;
    object-fit: contain;
    margin: 0 auto 1.5rem;
}

.modal-body h2 {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    color: var(--color-white);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.modal-body p {
    font-family: 'Inter', sans-serif;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.modal-description {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    color: var(--color-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0 !important;
}

.modal-body .btn {
    width: 100%;
    padding: 16px 24px;
    font-size: 1rem;
    letter-spacing: 0.5px;
    border-radius: 12px;
    text-transform: uppercase;
    font-weight: 600;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.modal-body .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

/* Light mode overrides */
[data-theme="light"] .modal-content {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 25px 60px -12px rgba(27, 58, 95, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .modal-body h2 {
    color: #1b3a5f;
}

[data-theme="light"] .modal-close {
    background: #f0f4f8;
    color: #4a5568;
}

[data-theme="light"] .modal-close:hover {
    background: #e2e8f0;
    color: #1a202c;
}

/* Feature item active state */
.feature-item.active {
    background: rgba(0, 180, 216, 0.1);
    border-color: rgba(0, 180, 216, 0.5);
}

/* About image transition */
#aboutImage {
    transition: opacity 0.3s ease;
}

/* ============================================
   HERO SLIDER
   ============================================ */

.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

/* Ensure hero content is above slider */
.hero-content {
    position: relative;
    z-index: 2;
}

.hero-overlay {
    z-index: 1;
}

/* ============================================
   STACKING CARDS SECTION
   ============================================ */

/* ============================================
   STACKING CARDS SECTION (CSS Sticky)
   ============================================ */

.stacking-section {
    position: relative;
    padding: var(--space-3xl) 0 10vh 0;
    overflow: visible;
    /* Important for sticky to work */
}

.stacking-cards-container {
    position: relative;
    max-width: 1000px;
    margin: var(--space-3xl) auto 0;
    padding-bottom: var(--space-3xl);
}

.stacking-card {
    position: sticky;
    top: 15vh;
    /* Stick position */
    height: 60vh;
    /* Card height */
    min-height: 400px;
    margin-bottom: 40px;
    /* Spacing between cards when scrolling */
    perspective: 1000px;
}

/* Stacking effect spacing adjustments */
.stacking-card:nth-child(1) {
    top: calc(15vh + 0px);
}

.stacking-card:nth-child(2) {
    top: calc(15vh + 10px);
}

.stacking-card:nth-child(3) {
    top: calc(15vh + 20px);
}

.stacking-card:nth-child(4) {
    top: calc(15vh + 30px);
}

.stacking-card:nth-child(5) {
    top: calc(15vh + 40px);
}

.stacking-card:nth-child(6) {
    top: calc(15vh + 50px);
}

.stacking-card:nth-child(7) {
    top: calc(15vh + 60px);
}

.stacking-card:nth-child(8) {
    top: calc(15vh + 70px);
}

.card-inner {
    position: relative;
    height: 100%;
    width: 100%;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    display: flex;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Alternate layout for even cards */
.stacking-card:nth-child(even) .card-inner {
    flex-direction: row-reverse;
}

.stacking-card:nth-child(even) .card-number {
    left: auto;
    right: 20px;
}

[data-theme="light"] .card-inner {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 20px 60px rgba(27, 58, 95, 0.1);
}

.card-content {
    flex: 1;
    padding: var(--space-2xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
    overflow-y: auto;
    /* Allow scrolling if content is too long */
}

.card-number {
    font-size: 6rem;
    font-weight: 700;
    color: rgba(184, 150, 92, 0.15);
    /* Primary color faded */
    position: absolute;
    top: 10px;
    left: 20px;
    line-height: 1;
    z-index: -1;
}

.card-content h3 {
    font-size: 1.8rem;
    color: var(--color-text);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
}

.card-details p {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-xs);
}

.card-details strong {
    color: var(--color-primary);
}

.card-image {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 100%;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.card-inner:hover .card-image img {
    transform: scale(1.05);
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .stacking-card {
        height: auto;
        min-height: auto;
        top: 120px;
        margin-bottom: var(--space-xl);
    }

    .stacking-card:nth-child(n) {
        top: 120px;
        /* Remove staggered top for mobile to save space or keep simple */
    }

    .card-inner {
        flex-direction: column-reverse;
        height: auto;
    }

    .card-image {
        flex: none;
        height: 250px;
    }

    .card-content {
        padding: var(--space-lg);
    }

    .card-number {
        font-size: 4rem;
        top: 10px;
        right: 20px;
        left: auto;
    }
}


/* ============================================
   FLOATING CTA & SLIDE PANEL
   ============================================ */

.floating-cta {
    position: fixed;
    top: 45%;
    right: 0;
    transform: translateY(-50%);
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 8px 0 0 8px;
    padding: 24px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: -4px 8px 24px rgba(0, 180, 216, 0.4);
    transition: all 0.3s ease;
    z-index: 9999;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.floating-cta span {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 2px;
}

.floating-cta:hover {
    transform: translateY(-50%) translateX(-8px);
    box-shadow: -8px 12px 32px rgba(0, 180, 216, 0.6);
}

.floating-cta svg {
    width: 20px;
    height: 20px;
}

.slide-panel {
    position: fixed;
    top: 0;
    right: -500px;
    width: 500px;
    height: 100vh;
    background: var(--color-bg-secondary);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10001;
    overflow-y: auto;
}

.slide-panel.active {
    right: 0;
}

.slide-panel-header {
    padding: var(--space-xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: var(--color-bg-secondary);
    z-index: 10;
}

.slide-panel-header h3 {
    font-size: 1.5rem;
    color: var(--color-white);
    margin: 0;
}

.panel-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.panel-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.panel-close svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-white);
}

.slide-panel-body {
    padding: var(--space-xl);
}

.panel-intro {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
    line-height: 1.6;
}

.enquiry-form {
    margin-bottom: var(--space-2xl);
}

.form-group {
    margin-bottom: var(--space-lg);
}

.form-group label {
    display: block;
    color: var(--color-white);
    font-weight: 500;
    margin-bottom: var(--space-sm);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--color-white);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background: rgba(255, 255, 255, 0.08);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.btn-block {
    width: 100%;
}

.panel-contact-info {
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.panel-contact-info h4 {
    color: var(--color-white);
    margin-bottom: var(--space-md);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.contact-item svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-primary);
    flex-shrink: 0;
}

.panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 10000;
}

.panel-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Light mode */
[data-theme="light"] .slide-panel {
    background: rgba(255, 255, 255, 0.98);
}

[data-theme="light"] .slide-panel-header {
    background: rgba(255, 255, 255, 0.98);
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--color-text);
}

[data-theme="light"] .panel-contact-info {
    border-top-color: rgba(0, 0, 0, 0.1);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .slide-panel {
        width: 100%;
        right: -100%;
    }

    .floating-cta span {
        display: none;
    }

    .floating-cta {
        width: 48px;
        height: 48px;
        padding: 12px;
        justify-content: center;
        border-radius: 8px 0 0 8px;
        writing-mode: horizontal-tb;
    }
}

/* ============================================
   HORIZONTAL SCROLL LAYOUT (Course Page - Enhanced)
   ============================================ */

/* Hide scrollbar but allow functionality */
.horizontal-scroll-layout .stacking-cards-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 32px;
    padding: 20px 4px 64px 4px;
    scroll-snap-type: x mandatory;
    margin-top: 20px;
    width: 100%;
    align-items: stretch;
    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.horizontal-scroll-layout .stacking-cards-container::-webkit-scrollbar {
    display: none;
}

/* Card Styling - Premium Look */
.horizontal-scroll-layout .stacking-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    flex: 0 0 400px;
    max-width: 400px;
    height: auto !important;
    min-height: 380px;
    margin-bottom: 0 !important;
    scroll-snap-align: center;
    border-radius: 20px;
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.horizontal-scroll-layout .stacking-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 180, 216, 0.15);
    border-color: rgba(0, 180, 216, 0.3);
}

.horizontal-scroll-layout .card-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Image Handling - REMOVED per user request */
.horizontal-scroll-layout .card-image {
    display: none;
}

/* Content Handling */
.horizontal-scroll-layout .card-content {
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.horizontal-scroll-layout .card-number {
    font-size: 3rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    position: absolute;
    top: 20px;
    right: 20px;
    line-height: 1;
    z-index: 2;
}

.horizontal-scroll-layout h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(to right, #fff, #a5a5a5);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] .horizontal-scroll-layout h3 {
    background: linear-gradient(to right, #1b3a5f, #b8965c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] .horizontal-scroll-layout .stacking-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 30px rgba(27, 58, 95, 0.1);
}

[data-theme="light"] .horizontal-scroll-layout .stacking-card:hover {
    box-shadow: 0 20px 40px rgba(27, 58, 95, 0.18);
    border-color: rgba(184, 150, 92, 0.4);
}

[data-theme="light"] .horizontal-scroll-layout .card-number {
    color: rgba(27, 58, 95, 0.08);
}

/* ============================================
   ADVANCED ARCHITECTURAL LOADER (Is City)
   ============================================ */

.arch-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-dark);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
    perspective: 1000px;
}

.arch-loader-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
}

.iso-city {
    position: relative;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    transform: rotateX(60deg) rotateZ(45deg);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.iso-block {
    position: relative;
    width: 40px;
    height: 40px;
    margin: 2px;
    background: #1a1a1a;
    transform-style: preserve-3d;
    transform: translateZ(0);
    transition: transform 0.4s ease;
    animation: cityBuild 3s ease-in-out infinite;
    box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.4);
}

/* Create 3D Cube Effect for each block */
.iso-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-primary);
    transform: translateZ(20px);
    opacity: 0.8;
}

.iso-block::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.3;
    filter: blur(8px);
    transform: translateZ(-2px);
}

/* Sides of the cubes */
.iso-block .side {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-dark-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.iso-block .side.front {
    transform: rotateY(0deg) translateZ(20px);
}

.iso-block .side.back {
    transform: rotateY(180deg) translateZ(20px);
}

.iso-block .side.right {
    transform: rotateY(90deg) translateZ(20px);
    background: #2a2a2a;
}

.iso-block .side.left {
    transform: rotateY(-90deg) translateZ(20px);
    background: #2a2a2a;
}

.iso-block .side.top {
    transform: rotateX(90deg) translateZ(20px);
    background: var(--color-primary);
}

.iso-block .side.bottom {
    transform: rotateX(-90deg) translateZ(20px);
}

/* Staggered Animation for diverse heights */
.iso-block:nth-child(1) {
    animation-delay: 0.1s;
    --h: 60px;
}

.iso-block:nth-child(2) {
    animation-delay: 0.3s;
    --h: 100px;
}

.iso-block:nth-child(3) {
    animation-delay: 0.2s;
    --h: 40px;
}

.iso-block:nth-child(4) {
    animation-delay: 0.5s;
    --h: 120px;
}

.iso-block:nth-child(5) {
    animation-delay: 0.4s;
    --h: 80px;
}

.iso-block:nth-child(6) {
    animation-delay: 0.6s;
    --h: 60px;
}

.iso-block:nth-child(7) {
    animation-delay: 0.8s;
    --h: 140px;
    background: var(--color-primary);
}

/* Main Tower */
.iso-block:nth-child(8) {
    animation-delay: 0.7s;
    --h: 90px;
}

.iso-block:nth-child(9) {
    animation-delay: 0.5s;
    --h: 50px;
}

@keyframes cityBuild {

    0%,
    100% {
        transform: translateZ(0);
        opacity: 0.3;
    }

    50% {
        transform: translateZ(var(--h));
        opacity: 1;
        box-shadow: -20px 20px 30px rgba(0, 180, 216, 0.3);
        /* Glow effect */
    }
}

.loader-text-container {
    position: absolute;
    bottom: 15%;
    text-align: center;
    width: 100%;
}

.loader-title {
    font-family: 'DM Serif Display', serif;
    font-size: 2rem;
    letter-spacing: 4px;
    color: var(--color-white);
    text-transform: uppercase;
    margin-bottom: 8px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.loader-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: var(--color-primary);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.horizontal-scroll-layout .card-details p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0.8rem;
    color: var(--color-text-secondary);
}

.horizontal-scroll-layout .card-details strong {
    color: var(--color-primary);
}

/* Navigation Controls styling */
.scroll-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    margin-bottom: 20px;
    padding-right: 10px;
}

.scroll-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.scroll-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: scale(1.1);
}

.scroll-btn svg {
    width: 24px;
    height: 24px;
}

[data-theme="light"] .scroll-btn {
    background: rgba(27, 58, 95, 0.08);
    border: 1px solid rgba(27, 58, 95, 0.2);
    color: #1b3a5f;
}

[data-theme="light"] .scroll-btn svg {
    stroke: #1b3a5f;
}

[data-theme="light"] .scroll-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

[data-theme="light"] .scroll-btn:hover svg {
    stroke: #fff;
}

.scroll-progress-track {
    width: 200px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.scroll-progress-bar {
    height: 100%;
    background: var(--color-primary);
    width: 0%;
    transition: width 0.1s linear;
}

[data-theme="light"] .scroll-progress-track {
    background: rgba(27, 58, 95, 0.12);
}

[data-theme="light"] .scroll-progress-bar {
    background: linear-gradient(to right, #1b3a5f, #b8965c);
}

@media (max-width: 768px) {
    .horizontal-scroll-layout .stacking-card {
        flex: 0 0 85vw;
        max-width: 85vw;
        min-height: auto;
    }

    .horizontal-scroll-layout .stacking-cards-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .scroll-controls {
        display: none;
        /* Auto-hide controls on mobile, swipe is better */
    }
}

/* ============================================
   ALUMNI PAGE - Cards, Blog, Stats, Animations
   ============================================ */

/* Alumni Profile Grid */
.alumni-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.alumni-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 0.4s ease;
}

.alumni-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--color-primary);
    border-color: var(--color-primary);
}

.alumni-card-inner {
    position: relative;
    text-align: center;
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
}

/* Avatar */
.alumni-avatar {
    width: 110px;
    height: 110px;
    margin: 0 auto var(--space-md);
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--color-primary);
    box-shadow: 0 8px 24px rgba(184, 150, 92, 0.25);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.5s ease,
                border-color 0.4s ease;
    position: relative;
    z-index: 2;
}

.alumni-card:hover .alumni-avatar {
    transform: scale(1.08);
    box-shadow: 0 12px 32px rgba(184, 150, 92, 0.4);
}

.alumni-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.alumni-card:hover .alumni-avatar img {
    transform: scale(1.1);
}

.alumni-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: var(--color-primary);
    background: var(--color-primary-light);
}

/* Hover Icons Row */
.alumni-hover-icons {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: var(--space-md);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease 0.1s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
    position: relative;
    z-index: 2;
}

.alumni-card:hover .alumni-hover-icons {
    opacity: 1;
    transform: translateY(0);
}

.alumni-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-decoration: none;
}

.alumni-icon-btn svg {
    width: 18px;
    height: 18px;
}

.alumni-icon-btn:hover {
    background: var(--color-primary);
    color: #fff;
    transform: scale(1.15);
}

.alumni-icon-btn:nth-child(1) { transition-delay: 0.05s; }
.alumni-icon-btn:nth-child(2) { transition-delay: 0.1s; }
.alumni-icon-btn:nth-child(3) { transition-delay: 0.15s; }

/* Alumni Info */
.alumni-info {
    position: relative;
    z-index: 2;
}

.alumni-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 4px 12px;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 100px;
    margin-bottom: var(--space-sm);
    letter-spacing: 0.3px;
}

.alumni-badge svg {
    flex-shrink: 0;
}

.alumni-info h3 {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: var(--color-text);
    margin-bottom: 4px;
}

.alumni-role {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 2px;
}

.alumni-class {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}

.alumni-bio {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Decorative top accent on card */
.alumni-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover), var(--color-primary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 3;
}

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

/* Subtle shimmer on hover */
.alumni-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(184, 150, 92, 0.04), transparent);
    transition: left 0.8s ease;
    pointer-events: none;
    z-index: 1;
}

.alumni-card:hover::after {
    left: 100%;
}


/* ============================================
   ALUMNI BLOG CARDS
   ============================================ */
.alumni-blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.alumni-blog-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.5s ease,
                border-color 0.4s ease;
    display: flex;
    flex-direction: column;
}

.alumni-blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--color-primary);
    border-color: var(--color-primary);
}

/* Featured card spans full width */
.alumni-blog-featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
}

.alumni-blog-featured .alumni-blog-img {
    min-height: 300px;
}

/* Blog image area */
.alumni-blog-img {
    position: relative;
    min-height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-dark-secondary) 0%, var(--color-dark-tertiary) 100%);
}

.alumni-blog-img-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    opacity: 0.3;
    transition: opacity 0.4s ease, transform 0.6s ease;
}

.alumni-blog-card:hover .alumni-blog-img-placeholder {
    opacity: 0.15;
    transform: scale(1.1);
}

/* Blog overlay */
.alumni-blog-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-md);
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.alumni-blog-card:hover .alumni-blog-overlay {
    opacity: 1;
}

.alumni-blog-category {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 5px 14px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 100px;
    width: fit-content;
    transform: translateY(-8px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s, opacity 0.3s ease 0.1s;
}

.alumni-blog-card:hover .alumni-blog-category {
    transform: translateY(0);
    opacity: 1;
}

.alumni-blog-hover-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    align-self: flex-end;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    padding: 8px 16px;
    border-radius: 100px;
    transform: translateY(8px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s,
                opacity 0.3s ease 0.15s,
                background 0.3s ease;
    cursor: pointer;
}

.alumni-blog-card:hover .alumni-blog-hover-action {
    transform: translateY(0);
    opacity: 1;
}

.alumni-blog-hover-action:hover {
    background: rgba(255,255,255,0.25);
}

/* Blog content */
.alumni-blog-content {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.alumni-blog-meta {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.alumni-blog-date,
.alumni-blog-read {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.alumni-blog-content h3 {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
    line-height: 1.4;
    transition: color 0.3s ease;
}

.alumni-blog-card:hover .alumni-blog-content h3 {
    color: var(--color-primary);
}

.alumni-blog-content p {
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-md);
    flex: 1;
}

.alumni-blog-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.3s ease, color 0.3s ease;
}

.alumni-blog-link:hover {
    gap: 0.75rem;
    color: var(--color-primary-dark);
}

.alumni-blog-link svg {
    transition: transform 0.3s ease;
}

.alumni-blog-link:hover svg {
    transform: translateX(3px);
}


/* ============================================
   ALUMNI STATS SECTION - FLIP CARDS
   ============================================ */
.alumni-stats-section {
    background: linear-gradient(135deg, #1B3A5F 0%, #142231 100%);
    position: relative;
    overflow: hidden;
}

.alumni-stats-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 50%, rgba(184, 150, 92, 0.08) 0%, transparent 60%),
                radial-gradient(circle at 80% 50%, rgba(184, 150, 92, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.alumni-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    position: relative;
    z-index: 1;
}

/* Flip card container — sets the 3D perspective */
.alumni-stat-flip {
    perspective: 1000px;
    height: 280px;
}

/* Inner wrapper — holds both faces and rotates */
.alumni-stat-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}

.alumni-stat-flip:hover .alumni-stat-flip-inner {
    transform: rotateY(180deg);
}

/* Shared face styles */
.alumni-stat-front,
.alumni-stat-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-xl) var(--space-md);
}

/* ---- FRONT FACE ---- */
.alumni-stat-front {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 2;
}

.alumni-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-md);
    border-radius: 50%;
    background: rgba(184, 150, 92, 0.12);
    color: #B8965C;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s ease;
}

.alumni-stat-number {
    display: block;
    font-family: var(--font-serif);
    font-size: 2.2rem;
    color: #fff;
    margin-bottom: 4px;
}

.alumni-stat-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    margin-bottom: var(--space-sm);
}

/* "Hover for details" hint */
.alumni-stat-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: auto;
    padding-top: var(--space-xs);
    animation: hintPulse 2.5s ease-in-out infinite;
}

@keyframes hintPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* ---- BACK FACE ---- */
.alumni-stat-back {
    background: linear-gradient(135deg, rgba(184, 150, 92, 0.15) 0%, rgba(184, 150, 92, 0.05) 100%);
    border: 1px solid rgba(184, 150, 92, 0.3);
    transform: rotateY(180deg);
    padding: var(--space-lg) var(--space-md);
}

.alumni-stat-back-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto var(--space-sm);
    border-radius: 50%;
    background: rgba(184, 150, 92, 0.2);
    color: #B8965C;
}

.alumni-stat-back h4 {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: var(--space-sm);
}

.alumni-stat-details {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
}

.alumni-stat-details li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.alumni-stat-details li:last-child {
    border-bottom: none;
}

.alumni-stat-details li svg {
    flex-shrink: 0;
    color: #B8965C;
    margin-top: 2px;
}


/* ============================================
   ALUMNI PAGE RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .alumni-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .alumni-blog-featured {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 768px) {
    .alumni-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }

    .alumni-blog-grid {
        grid-template-columns: 1fr;
    }

    .alumni-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    .alumni-stat-flip {
        height: 260px;
    }

    .alumni-stat-number {
        font-size: 1.8rem;
    }
}

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

    .alumni-stat-flip {
        height: 250px;
    }
}


/* ============================================
   MOBILE HEADER & SECTION ALIGNMENT FIXES
   ============================================ */

/* -- Mobile: section headers center-aligned for cleaner look -- */
@media (max-width: 768px) {
    .section-header {
        text-align: center;
        margin-bottom: var(--space-lg);
    }

    .section-header .section-label {
        text-align: center;
    }

    .section-header .section-title {
        text-align: center;
        font-size: clamp(1.8rem, 6vw, 2.5rem);
    }

    .section-header .section-title::after {
        margin-left: auto;
        margin-right: auto;
    }

    .section-header .section-subtitle {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .page-header {
        padding: calc(70px + var(--space-lg)) 0 var(--space-lg);
    }

    .page-title {
        font-size: clamp(1.8rem, 7vw, 2.5rem);
    }

    .page-subtitle {
        font-size: 0.95rem;
    }

    .breadcrumb {
        font-size: 0.78rem;
    }
}

@media (max-width: 480px) {
    .section-header .section-title {
        font-size: 1.6rem;
    }

    .page-title {
        font-size: 1.7rem;
    }

    .nav-logo .logo-tagline {
        display: none;
    }

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

    .nav-logo .logo-img {
        height: 38px;
    }

    .nav-actions .btn-nav {
        padding: 0.5rem 0.85rem;
        font-size: 0.7rem;
    }
}

/* ================================================
   ALUMNI CAMPUS CAROUSEL
   ================================================ */

.alumni-carousel-section {
    background: linear-gradient(180deg, #f8f9fc 0%, #f0f2f5 100%);
}

.alumni-carousel {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(27, 58, 95, 0.15);
    background: #1B3A5F;
}

.alumni-carousel-track {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/* Slides */
.alumni-carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.alumni-carousel-slide.active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

.alumni-carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Caption overlay */
.alumni-carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 32px 28px;
    background: linear-gradient(0deg, rgba(10, 20, 35, 0.85) 0%, rgba(10, 20, 35, 0.4) 60%, transparent 100%);
    color: #fff;
    transform: translateY(10px);
    opacity: 0;
    transition: transform 0.5s ease 0.2s, opacity 0.5s ease 0.2s;
}

.alumni-carousel-slide.active .alumni-carousel-caption {
    transform: translateY(0);
    opacity: 1;
}

.alumni-carousel-caption h4 {
    font-family: 'DM Serif Display', serif;
    font-size: 1.35rem;
    margin: 0 0 6px;
    color: #fff;
}

.alumni-carousel-caption p {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
}

/* Navigation buttons */
.alumni-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.alumni-carousel-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-50%) scale(1.08);
}

.alumni-carousel-prev {
    left: 16px;
}

.alumni-carousel-next {
    right: 16px;
}

/* Dots */
.alumni-carousel-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 10px;
    align-items: center;
}

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

.alumni-carousel-dot.active {
    background: #C8A96E;
    width: 28px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(200, 169, 110, 0.5);
}

.alumni-carousel-dot:hover:not(.active) {
    background: rgba(255, 255, 255, 0.6);
}

/* Carousel progress bar */
.alumni-carousel-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #C8A96E, #E8D5A8);
    z-index: 10;
    width: 0%;
    transition: width 0.1s linear;
}

/* Carousel responsive */
@media (max-width: 768px) {
    .alumni-carousel {
        border-radius: 12px;
    }

    .alumni-carousel-btn {
        width: 38px;
        height: 38px;
    }

    .alumni-carousel-prev {
        left: 10px;
    }

    .alumni-carousel-next {
        right: 10px;
    }

    .alumni-carousel-caption {
        padding: 30px 20px 22px;
    }

    .alumni-carousel-caption h4 {
        font-size: 1.1rem;
    }

    .alumni-carousel-caption p {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .alumni-carousel-btn {
        width: 34px;
        height: 34px;
    }

    .alumni-carousel-btn svg {
        width: 18px;
        height: 18px;
    }

    .alumni-carousel-caption h4 {
        font-size: 1rem;
    }

    .alumni-carousel-dots {
        bottom: 10px;
        gap: 7px;
    }

    .alumni-carousel-dot {
        width: 8px;
        height: 8px;
    }

    .alumni-carousel-dot.active {
        width: 22px;
    }
}

/* ================================================
   ADMISSIONS BLINKING BADGE
   ================================================ */

.admission-blink-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 26px;
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(200, 56, 56, 0.1), rgba(200, 56, 56, 0.05));
    border: 1.5px solid rgba(200, 56, 56, 0.25);
    margin-bottom: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #C83838;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    animation: admissionBadgePulse 2s ease-in-out infinite;
}

.blink-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #C83838;
    display: inline-block;
    animation: blinkDot 1.2s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(200, 56, 56, 0.5);
}

@keyframes blinkDot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 6px rgba(200, 56, 56, 0.5);
    }
    50% {
        opacity: 0.3;
        transform: scale(0.7);
        box-shadow: 0 0 2px rgba(200, 56, 56, 0.2);
    }
}

@keyframes admissionBadgePulse {
    0%, 100% {
        border-color: rgba(200, 56, 56, 0.25);
        box-shadow: 0 0 0 0 rgba(200, 56, 56, 0);
    }
    50% {
        border-color: rgba(200, 56, 56, 0.5);
        box-shadow: 0 0 15px rgba(200, 56, 56, 0.1);
    }
}

/* Modal override for alumni admission with Carousel */
.alumni-admission-modal {
    padding: 0 !important;
    max-width: 520px !important;
    overflow: hidden;
    max-height: 92vh;
    overflow-y: auto;
    scrollbar-width: none;
}

.alumni-admission-modal::-webkit-scrollbar {
    display: none;
}

/* Carousel wrapper inside modal — sits at the top, edge to edge */
.modal-carousel-wrapper {
    position: relative;
    width: 100%;
    background: #1B3A5F;
    flex-shrink: 0;
}

.modal-carousel-wrapper .alumni-carousel-track {
    aspect-ratio: 16 / 7;
}

/* Close button floats above carousel */
.alumni-admission-modal .modal-close {
    z-index: 20;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    top: 14px;
    right: 14px;
}

.alumni-admission-modal .modal-close:hover {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    transform: rotate(90deg);
}

/* Info body below carousel */
.alumni-admission-modal .modal-body {
    padding: 1.1rem 1.75rem 1.5rem;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
}

.alumni-admission-modal .modal-body p {
    margin-bottom: 0;
    font-size: 0.88rem;
}

.alumni-admission-modal .modal-body h2 {
    background: linear-gradient(135deg, #1B3A5F, #C8A96E);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.alumni-admission-modal .modal-logo {
    margin-bottom: 0.4rem;
    max-width: 90px;
}

.alumni-admission-modal .btn-primary {
    display: block;
    width: 100%;
    padding: 14px 24px;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 10px;
    background: linear-gradient(135deg, #C8A96E, #B8944E);
    color: #fff;
    text-decoration: none;
    text-align: center;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(200, 169, 110, 0.35);
}

.alumni-admission-modal .btn-primary:hover {
    background: linear-gradient(135deg, #B8944E, #A8843E);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(200, 169, 110, 0.45);
}

/* Responsive tweaks for modal carousel */
@media (max-width: 680px) {
    .alumni-admission-modal {
        max-width: 96vw !important;
    }

    .modal-carousel-wrapper .alumni-carousel-track {
        aspect-ratio: 16 / 9;
    }

    .alumni-admission-modal .modal-body {
        padding: 1.5rem 1.5rem 1.75rem;
    }
}

@media (max-width: 480px) {
    .alumni-admission-modal .modal-body {
        padding: 1.25rem 1.25rem 1.5rem;
    }

    .modal-carousel-wrapper .alumni-carousel-track {
        aspect-ratio: 4 / 3;
    }
}

/* ================================================
   ALUMNI STORY SIDE CTA PANEL
   ================================================ */

/* Backdrop overlay */
.alumni-story-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 35, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 9998;
    pointer-events: none;
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.alumni-story-backdrop.active {
    background: rgba(10, 20, 35, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: auto;
    cursor: pointer;
}

/* Side panel */
.alumni-story-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 460px;
    max-width: 92vw;
    height: 100vh;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
    z-index: 9999;
    transform: translateX(110%);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.alumni-story-panel.active {
    transform: translateX(0);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.2);
}

/* Close button */
.alumni-story-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(27, 58, 95, 0.12);
    background: rgba(255, 255, 255, 0.9);
    color: #1B3A5F;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.alumni-story-close:hover {
    background: #1B3A5F;
    color: #fff;
    border-color: #1B3A5F;
    transform: rotate(90deg);
}

/* Header section */
.alumni-story-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 36px 32px 24px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
}

.alumni-story-panel.active .alumni-story-header {
    opacity: 1;
    transform: translateY(0);
}

/* Avatar */
.alumni-story-avatar {
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #1B3A5F, #C8A96E);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'DM Serif Display', serif;
    font-size: 1.6rem;
    font-weight: 700;
    box-shadow: 0 4px 20px rgba(27, 58, 95, 0.25);
    position: relative;
}

.alumni-story-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.alumni-story-avatar::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid rgba(200, 169, 110, 0.5);
    pointer-events: none;
}

/* Meta info */
.alumni-story-meta {
    flex: 1;
    min-width: 0;
}

.alumni-story-name {
    font-family: 'DM Serif Display', serif;
    font-size: 1.45rem;
    color: #1B3A5F;
    margin: 0 0 4px;
    line-height: 1.25;
}

.alumni-story-role {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    color: #6B7B8D;
    margin: 0 0 12px;
    font-weight: 500;
}

/* Tags */
.alumni-story-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.alumni-story-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.alumni-story-tag svg {
    flex-shrink: 0;
}

.alumni-story-tag-location {
    background: rgba(27, 58, 95, 0.08);
    color: #1B3A5F;
}

.alumni-story-tag-class {
    background: rgba(200, 169, 110, 0.15);
    color: #9A7B3C;
}

.alumni-story-tag-category {
    background: rgba(46, 125, 50, 0.1);
    color: #2E7D32;
}

/* Divider */
.alumni-story-divider {
    height: 1px;
    margin: 0 32px;
    background: linear-gradient(90deg, transparent, rgba(200, 169, 110, 0.4), rgba(27, 58, 95, 0.15), transparent);
    opacity: 0;
    transform: scaleX(0);
    transition: opacity 0.4s ease 0.25s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

.alumni-story-panel.active .alumni-story-divider {
    opacity: 1;
    transform: scaleX(1);
}

/* Body / Story content */
.alumni-story-body {
    flex: 1;
    padding: 24px 32px;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
}

.alumni-story-panel.active .alumni-story-body {
    opacity: 1;
    transform: translateY(0);
}

.alumni-story-body::-webkit-scrollbar {
    width: 5px;
}

.alumni-story-body::-webkit-scrollbar-track {
    background: transparent;
}

.alumni-story-body::-webkit-scrollbar-thumb {
    background: rgba(27, 58, 95, 0.15);
    border-radius: 10px;
}

.alumni-story-body::-webkit-scrollbar-thumb:hover {
    background: rgba(27, 58, 95, 0.3);
}

.alumni-story-body-title {
    font-family: 'DM Serif Display', serif;
    font-size: 1.05rem;
    color: #1B3A5F;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alumni-story-body-title svg {
    color: #C8A96E;
}

.alumni-story-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    line-height: 1.8;
    color: #4A5568;
    margin: 0;
    text-align: justify;
}

/* Footer CTA buttons */
.alumni-story-footer {
    padding: 20px 32px 28px;
    display: flex;
    gap: 12px;
    border-top: 1px solid rgba(27, 58, 95, 0.08);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
}

.alumni-story-panel.active .alumni-story-footer {
    opacity: 1;
    transform: translateY(0);
}

.alumni-story-cta-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #1B3A5F, #2A5A8F);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(27, 58, 95, 0.25);
    letter-spacing: 0.02em;
}

.alumni-story-cta-btn:hover {
    background: linear-gradient(135deg, #142E4A, #1B3A5F);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(27, 58, 95, 0.35);
}

.alumni-story-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    color: #1B3A5F;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    border: 1.5px solid rgba(27, 58, 95, 0.2);
    transition: all 0.3s ease;
    letter-spacing: 0.02em;
}

.alumni-story-secondary-btn:hover {
    background: rgba(27, 58, 95, 0.05);
    border-color: rgba(27, 58, 95, 0.4);
    transform: translateY(-2px);
}

/* Make blog card clickable areas more obvious */
.alumni-blog-hover-action {
    cursor: pointer;
}

.alumni-blog-link {
    cursor: pointer;
}

/* Responsive side panel */
@media (max-width: 768px) {
    .alumni-story-panel {
        width: 100%;
        max-width: 100vw;
    }

    .alumni-story-header {
        padding: 32px 24px 20px;
        gap: 16px;
    }

    .alumni-story-avatar {
        width: 66px;
        height: 66px;
        min-width: 66px;
        font-size: 1.35rem;
    }

    .alumni-story-name {
        font-size: 1.25rem;
    }

    .alumni-story-divider {
        margin: 0 24px;
    }

    .alumni-story-body {
        padding: 20px 24px;
    }

    .alumni-story-footer {
        padding: 16px 24px 24px;
        flex-direction: column;
    }

    .alumni-story-text {
        font-size: 0.88rem;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .alumni-story-header {
        flex-direction: column;
        text-align: center;
        padding: 28px 20px 16px;
    }

    .alumni-story-tags {
        justify-content: center;
    }

    .alumni-story-close {
        top: 12px;
        right: 12px;
        width: 38px;
        height: 38px;
    }

    .alumni-story-divider {
        margin: 0 20px;
    }

    .alumni-story-body {
        padding: 16px 20px;
    }

    .alumni-story-footer {
        padding: 14px 20px 20px;
    }

    .alumni-story-name {
        font-size: 1.15rem;
    }
}

/* Body scroll lock when panel is open */
body.alumni-story-open {
    overflow: hidden;
}