/* --- 1. THEME VARIABLES --- */
        :root {
            /* Brand Identity Colors */
            --brand-navy: #022e47;
            --brand-cream: #FAF8F1;
            --brand-orange: #f68f1d;
            --brand-pink: #ea3b60;
            
            /* Default LIGHT Theme Mapping */
            --bg-body: var(--brand-cream);
            --text-main: var(--brand-navy);
            --text-muted: rgba(2, 46, 71, 0.6);
            --nav-bg-scrolled: rgba(250, 248, 241, 0.95);
            --nav-mobile-bg: #FAF8F1;
            --nav-mobile-shadow: rgba(0,0,0,0.1);
            
            /* Footer is always dark */
            --footer-bg: var(--brand-navy);
            
            --vf-grad: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange) 65%, var(--brand-pink) 100%);
            
            --font-display: 'Bakbak One', cursive;
            --font-body: 'Work Sans', sans-serif;
        }

        /* DARK THEME OVERRIDES */
        [data-theme="dark"] {
            --bg-body: #011a2a; 
            --text-main: #e6e6e6;
            --text-muted: rgba(255, 255, 255, 0.6);
            --nav-bg-scrolled: rgba(1, 26, 42, 0.95);
            --nav-mobile-bg: #022e47;
            --nav-mobile-shadow: rgba(0,0,0,0.4);
        }

        /* --- 2. GLOBAL STYLES --- */
        body {
            background-color: var(--bg-body);
            font-family: var(--font-body);
            color: var(--text-main);
            overflow-x: hidden;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-display);
            text-transform: uppercase;
            font-weight: 600; /* Semi-bold globally */
        }

        .text-gradient {
            background: var(--vf-grad);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* --- 3. AMBIENT BACKGROUND --- */
        .ambient-light {
            position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
            z-index: -1; pointer-events: none; overflow: hidden;
            background: var(--bg-body);
            transition: background-color 0.3s ease;
        }

        .orb {
            position: absolute; border-radius: 50%;
            filter: blur(80px); opacity: 0.5;
            animation: floatOrb 20s infinite ease-in-out;
        }

        .orb-1 { width: 100vw; height: 100vw; background: var(--brand-orange); top: -10%; left: -10%; opacity: 0.15;}
        .orb-2 { width: 30vw; height: 30vw; background: var(--brand-pink); bottom: 10%; right: -5%; animation-delay: -5s; opacity: 0.15;}
        .orb-3 { width: 60vw; height: 60vw; background: #ff5500; top: 40%; left: 40%; animation-delay: -10s; opacity: 0.1;}

        @keyframes floatOrb {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(30px, -50px) scale(1.1); }
        }

        .hero-title {
            font-family: var(--font-display);
            line-height: 0.7;
            letter-spacing: -0.001em;
            font-size: clamp(3rem, 8vw, 5.5rem);
            text-transform: uppercase;
            margin-bottom: 2rem;
            padding-bottom: 15px; /* Prevents clipping of the descenders */
        }

        /* Rule 3, 4 & 8: Hero Subtext */
        .hero-subtext {
            font-family: var(--font-body);
            line-height: 1.3;
            font-weight: 600;
            font-size: 1.25rem;
            margin-bottom: 2rem;
            color: var(--text-muted);
        }

        /* Rule 5: Universal Button */
        .btn-universal {
            background: var(--vf-grad);
            color: white !important;
            padding: 16px 32px;
            border-radius: 100px;
            font-family: var(--font-body);
            font-weight: 700;
            text-transform: uppercase;
            text-decoration: none;
            letter-spacing: 1px;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            border: none;
            box-shadow: 0 10px 20px rgba(246, 143, 29, 0.3);
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .btn-universal:hover {
            transform: translateY(-4px);
            box-shadow: 0 15px 25px rgba(246, 143, 29, 0.5);
        }

        /* Interactive Role Pills */
        .role-pill {
            background: rgba(246, 143, 29, 0.08);
            color: var(--brand-orange);
            border: 1px solid rgba(246, 143, 29, 0.3);
            padding: 12px 24px;
            border-radius: 50px;
            font-weight: 600;
            font-family: var(--font-body);
            display: inline-block;
            margin: 5px 5px 15px 0;
            transition: all 0.3s ease;
            cursor: default;
        }

        .role-pill:hover {
            background: var(--vf-grad);
            color: white !important;
            border-color: transparent;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(234, 59, 96, 0.3);
        }

        /* Info Glass Card */
        .info-glass-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-left: 4px solid var(--brand-orange);
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }

        [data-theme="dark"] .info-glass-card {
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-left: 4px solid var(--brand-orange);
        }

        /* Alumni Section specific styling */
        .alumni-section {
            position: relative;
            padding: 100px 0;
            margin-top: 50px;
        }

        .quote-text {
            font-family: var(--font-display);
            font-size: 1.5rem;
            color: var(--brand-pink);
            line-height: 1.4;
            border-left: 3px solid var(--brand-orange);
            padding-left: 20px;
            margin: 2rem 0;
        }
		
		
		/* --- 7. HERO SECTION (RESTORED & STYLED) --- */
        .hero-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            padding-top: 100px; /* Offset for fixed nav */
        }
        .hero-section {
            padding-top: 0 !important; /* Overrides previous padding to let image hit the top */
        }

        /* --- UPDATED FULL-BLEED HERO (HTML IMAGE VERSION) --- */
        .hero-image-placeholder {
            width: 100vw; 
            height: 100vh; 
            min-height: 700px;
            position: relative; /* Crucial for absolute positioning inside it */
            display: flex;
            flex-direction: column;
            justify-content: flex-end; 
            margin-top: 0; 
            overflow: hidden; /* Prevents the image from spilling out */
        }

        /* The new class for your HTML img tag */
        .hero-bg-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* Makes the image fill the space without stretching */
            object-position: center; /* Keeps the image centered */
            z-index: 0; /* Puts the image at the very back */
        }

        /* Dark gradient overlay sits above the image */
        .hero-image-placeholder::after {
            content: '';
            position: absolute;
            bottom: 0; 
            left: 0; 
            width: 100%; 
            height: 75%; 
            background: linear-gradient(to top, rgba(2, 46, 71, 0.95) 0%, rgba(2, 46, 71, 0.5) 50%, rgba(2, 46, 71, 0) 100%);
            z-index: 1; /* Sits directly above the image */
            pointer-events: none;
        }

        /* Ensure your glass box and text sit above the overlay */
        .hero-content-dock {
            position: relative;
            z-index: 2; /* Highest level so it's clickable and readable */
            padding-bottom: 5rem;
        }

        @media (max-width: 991px) {
            .hero-content-dock {
                padding-bottom: 3rem;
            }
        }
		
		/* --- UPDATED: SMOKEY ONYX GLASS BOX WITH GRADIENT LINE --- */
        .hero-glass-box {
            background: linear-gradient(135deg, rgba(2, 46, 71, 0.3) 0%, rgba(0, 0, 0, 0.15) 100%);
            backdrop-filter: blur(24px); 
            -webkit-backdrop-filter: blur(24px); 
            
            /* Thin outer border for sides and bottom */
            border: 1px solid rgba(255, 255, 255, 0.08); 
            border-top: none; /* We remove the solid border to make room for the gradient */
            
            padding: 3.5rem;
            border-radius: 20px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
            
            position: relative; /* Needed to position the gradient line */
            overflow: hidden; /* Keeps the gradient line inside the rounded corners */
            
            animation: glassFadeIn 1s ease-out forwards;
        }

        /* 1. The Verafede Gradient Top Line */
        .hero-glass-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px; /* Thickness of the line */
            background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange) 65%, var(--brand-pink) 100%);
            z-index: 10;
        }

        /* 2. Lock the specific text to pure white */
        .hero-glass-box .hero-title {
            color: #ffffff;
        }

        .hero-glass-box .hero-subtext {
            color: #ffffff;
            opacity: 0.95; /* Keeps it crisp and legible */
        }

        /* Adjust padding for smaller screens */
        @media (max-width: 768px) {
            .hero-glass-box {
                padding: 2.5rem;
                border-radius: 16px;
            }
        }

        @keyframes glassFadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
		
		/* --- DEPARTMENT IMAGE CARDS --- */
        .dept-card {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            aspect-ratio: 4/3; /* Keeps all images uniformly shaped */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
            background-color: #f8f9fa; /* Fallback color */
        }

        .dept-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
        }

        .dept-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .dept-card:hover .dept-img {
            transform: scale(1.05); /* Slight zoom on hover */
        }

        .dept-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 1.5rem 1rem 1rem;
            /* Dark gradient to ensure text readability */
            background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
            display: flex;
            align-items: flex-end;
        }

        .dept-name {
            color: #ffffff;
            font-weight: 600;
            font-size: 1rem;
            margin: 0;
            line-height: 1.2;
        }
		
		/* --- PROGRAM DETAILS BANNER --- */
        .program-details-banner {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border for light mode */
            border-left: 4px solid var(--brand-orange);
            padding: 2.5rem 3rem;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            margin-bottom: 3rem;
        }

       /* --- ASYMMETRIC ALTERNATING DEPT CARDS --- */
.dept-list-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 40px; /* Softer, high-end rounded corners */
    margin-bottom: 6rem; /* More breathing room between sections */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Image "Pop-out" Effect */
.dept-list-image-wrapper {
    padding: 1.5rem;
    height: 100%;
}

.dept-list-img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    transition: transform 0.5s ease;
}

/* Hover Effects */
.dept-list-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-10px);
    border-color: var(--brand-orange);
}

.dept-list-card:hover .dept-list-img {
    transform: scale(1.02) rotate(-2deg); /* Slight organic tilt on hover */
}

/* Text Styling */
.dept-list-text {
    padding: 3rem 5rem;
}

/* Alternating Logic: Image Right for even cards */
@media (min-width: 992px) {
    .dept-item:nth-child(even) .row {
        flex-direction: row-reverse;
    }
    .dept-item:nth-child(even) .dept-list-text {
        text-align: right;
    }
}

/* Mobile Fixes */
@media (max-width: 991px) {
    .dept-list-text {
        padding: 2rem;
        text-align: center;
    }
    .dept-list-card {
        margin-bottom: 3rem;
    }
}
		
		.faded-image-card {
    background-color: white; /* Light mode default */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Soft aesthetic shadow */
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* Dark Mode Adaptation */
[data-theme="dark"] .faded-image-card {
    background-color: #041f2e; /* Slightly lighter navy than main background */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* The Image Wrapper with the Aesthetic Fade Mask */
.image-wrapper-faded {
    position: relative;
    width: 100%;
    height: 180px; /* Static height for consistency */
    overflow: hidden;
    
    /* THE MAGIC FADE (Adjust the % to control the spread) */
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 60%);
    mask-image: linear-gradient(to top, transparent 0%, black 60%);
}

.image-wrapper-faded img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Optional: Slight image zoom on card hover to feel alive */
.faded-image-card:hover .image-wrapper-faded img {
    transform: scale(1.05);
}

.card-content-faded {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-num-aesthetic {
    font-family: var(--font-display);
    font-size: 2.2rem;
    color: #f68f1d;
    line-height: 1;
    margin-bottom: 10px;
    opacity: 0.8;
}

.card-title-faded {
    font-family: var(--font-display);
    font-size: 1.15rem;
    text-transform: uppercase;
    color: #022e47; /* Verafede Navy (light mode) */
    margin-bottom: 8px;
    line-height: 1.1;
    letter-spacing: 1px;
}

[data-theme="dark"] .card-title-faded {
    color: white;
}

.card-desc-faded {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.4;
    color: #4a5a6b; /* Muted text */
    margin: 0;
    font-weight: 500;
}

[data-theme="dark"] .card-desc-faded {
    color: rgba(255,255,255,0.7);
}

/* ==========================================================
   REQUIREMENT PILL (Card 03)
   ========================================================== */
.aesthetic-pill {
    background-color: rgba(246, 143, 29, 0.1); /* Soft orange background */
    color: #f68f1d; /* Verafede Orange text */
    border: 1px solid rgba(246, 143, 29, 0.3);
    padding: 6px 12px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
}

/* Dark mode adaptation (Optional, if you want it to pop more on dark backgrounds) */
[data-theme="dark"] .aesthetic-pill {
    background-color: rgba(246, 143, 29, 0.15);
    border-color: rgba(246, 143, 29, 0.4);
}

		/* --- BRAND LOGO THEME ADAPTATION --- */
		/* Set a uniform height so it fits cleanly in the navbar */
		.brand-logo {
			height: 70px; /* Adjust this value if you want the logo bigger or smaller */
			width: auto;
		object-fit: contain;
		}

		/* Default (Light Theme) Settings */
		.logo-light {
			display: block;
		}
		.logo-dark {
			display: none;
		}

		/* Dark Theme Settings */
		/* Targets the images when your JS adds data-theme="dark" to the html tag */
		html[data-theme="dark"] .logo-light {
			display: none;
		}
		html[data-theme="dark"] .logo-dark {
			display: block;
		}
		
		/* Custom class for adaptive text based on your data-theme logic */
		.theme-text {
			color: var(--brand-navy, #022e47);
		}

		[data-theme="dark"] .theme-text {
			color: #ffffff;
		}
		
		/* Base Card Structure & Light Mode */
.pleasing-info-card {
    background-color: #ffffff; 
    border: 1px solid rgba(0,0,0,0.05); 
    border-radius: 16px; 
    padding: 40px 30px; 
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 15px 35px rgba(0,0,0,0.03); 
}

/* Dark Mode - Using your exact .vf-svc-card glassmorphism properties */
[data-theme="dark"] .pleasing-info-card {
    background: rgba(0, 0, 0, 0.4); /* The sleek black mask */
    backdrop-filter: blur(12px); /* High-end glass blur */
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.08); /* Subtle edge highlight */
    box-shadow: none; /* Removes the light mode shadow to keep it clean */
}

/* Specific styling for the floating icon */
.floating-gradient-icon {
    width: 70px;
    height: 70px;
    background: var(--vf-grad); /* Verafede Orange-Pink Gradient */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    font-size: 1.8rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 20px rgba(246, 143, 29, 0.3); 
}

/* Custom Shared Grid Layout */
.vf-composite-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center; /* Centers the card vertically against the image */
    position: relative;
}

/* The Card overlaps the image by sharing grid tracks */
.vf-grid-card {
    grid-column: 1 / 6; /* Card takes up columns 1 through 5 */
    grid-row: 1;
    z-index: 2; /* Ensures the card sits on top */
}

/* The Image acts as the grand backdrop for the right side */
.vf-grid-img-wrapper {
    grid-column: 5 / 13; /* Image starts at column 5, creating a 1-column overlap! */
    grid-row: 1;
    z-index: 1;
    height: 100%;
    min-height: 450px;
}

.vf-grid-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* Mobile Responsiveness: Stack them beautifully on smaller screens */
@media (max-width: 991px) {
    .vf-composite-grid {
        display: flex;
        flex-direction: column-reverse; /* Puts the card below the image on mobile */
        gap: 2rem;
    }
    .vf-grid-img-wrapper {
        min-height: 300px;
    }
}

/* Base Track Card - Light Mode */
.internship-track-card {
    background-color: #ffffff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Double-Width Image Card */
.internship-img-card {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    background-color: #f8f9fa; /* Slight background before image loads */
}

/* Dark Mode - Glassmorphism & Borders */
[data-theme="dark"] .internship-track-card {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

[data-theme="dark"] .internship-img-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background-color: rgba(0,0,0,0.4);
    box-shadow: none;
}

/* Hover Effect - Lifts the cards */
.internship-track-card:hover, .internship-img-card:hover {
    transform: translateY(-8px);
}

.internship-track-card:hover {
    border-color: rgba(246, 143, 29, 0.3); /* Uses your brand orange */
}

[data-theme="dark"] .internship-track-card:hover, [data-theme="dark"] .internship-img-card:hover {
    box-shadow: 0 15px 35px rgba(246, 143, 29, 0.15);
}

/* Icon Wrapper */
.track-icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    background: rgba(255, 120, 0, 0.08);
    color: var(--brand-orange);
    transition: all 0.3s ease;
}

.internship-track-card:hover .track-icon-wrapper {
    background: var(--brand-orange);
    color: #ffffff;
    transform: scale(1.1);
}

/* Role List */
.role-list {
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.85;
}

.role-list li {
    margin-bottom: 0.6rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.role-list i {
    margin-top: 4px;
    font-size: 0.75rem;
    opacity: 0.9;
}

/* Skill Pills */
.skill-pill {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 50px;
    background: rgba(150, 150, 150, 0.1);
    letter-spacing: 0.5px;
    transition: background 0.3s ease;
}

[data-theme="dark"] .skill-pill {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
}

/* Custom compact list for role responsibilities */
.role-list {
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.85;
}

.role-list li {
    margin-bottom: 0.6rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.role-list i {
    margin-top: 4px;
    font-size: 0.75rem;
    opacity: 0.9;
}

/* Section Header Box - Light Mode */
.section-header-box {
    background-color: #ffffff; /* Changed to sleek solid white */
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 24px;
    padding: 4rem 2rem;
    margin-bottom: 3.5rem; /* Space between the box and the cards */
    position: relative;
    overflow: hidden;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02); /* Matching shadow to tie it to the cards */
}

/* Section Header Box - Dark Mode Glassmorphism (Stays exactly the same) */
[data-theme="dark"] .section-header-box {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none; /* Keeps it perfectly flat and glassy in dark mode */
}

/* Custom Carousel Container */
.custom-carousel {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.05);
    background-color: #f8f9fa; 
    position: relative;
    
    /* ADDED: Keeps the square from becoming too massive on desktop */
    max-width: 600px; 
    margin: 0 auto; /* Centers the square in the middle of the screen */
}

[data-theme="dark"] .custom-carousel {
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    background-color: rgba(0,0,0,0.4);
}

/* Force images to be a perfect 1x1 square */
.custom-carousel .carousel-item img {
    width: 100%;
    aspect-ratio: 1 / 1; /* This is the magic line that makes it square! */
    object-fit: cover; /* Ensures the image fills the square without stretching */
    height: auto; /* Removes the old fixed height */
}


/* --- THE UPGRADED NAVIGATION BUTTONS --- */
.carousel-control-prev, .carousel-control-next {
    width: 10%; /* Wider hit area for easier clicking */
    opacity: 1; /* Removes Bootstrap's default fading */
}

/* Solid floating circle for the arrows */
.nav-btn-circle {
    width: 55px;
    height: 55px;
    background-color: var(--brand-orange, #f68f1d);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(246, 143, 29, 0.4);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    font-size: 1.2rem;
}

/* Hover effect: inverts colors and pops out */
.carousel-control-prev:hover .nav-btn-circle, 
.carousel-control-next:hover .nav-btn-circle {
    background-color: #ffffff;
    color: var(--brand-orange, #f68f1d);
    transform: scale(1.15);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* --- THE UPGRADED INDICATORS --- */
.carousel-indicators {
    background: rgba(0, 0, 0, 0.4); /* Dark pill background so dots are always visible */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 10px 20px;
    border-radius: 50px;
    bottom: 20px;
    margin-bottom: 0;
    width: auto;
    left: 50%;
    transform: translateX(-50%); /* Keeps it perfectly centered */
}

.custom-carousel .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ffffff;
    opacity: 0.5;
    border: none;
    margin: 0 6px;
    transition: all 0.3s ease;
}

.custom-carousel .carousel-indicators .active {
    opacity: 1;
    background-color: var(--brand-orange, #f68f1d);
    transform: scale(1.4); 
}

/* Shared Square Styling for both Carousel and Image Card */
.square-box-container {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.05);
    background-color: #ffffff;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Forces 1x1 shape */
    transition: transform 0.4s ease;
}

[data-theme="dark"] .square-box-container {
    background-color: rgba(0,0,0,0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.square-box-container:hover {
    transform: translateY(-5px);
}

/* Ensure images inside always fill the square */
.square-box-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Keep Navigation Buttons centered in their half-width container */
.carousel-control-prev, .carousel-control-next {
    width: 15%;
}

/* Smaller 1x1 Squares for the bottom row */
.square-box-sm {
    border-radius: 20px; /* Slightly tighter radius for smaller boxes */
    overflow: hidden;
    aspect-ratio: 1 / 1;
    width: 100%;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

[data-theme="dark"] .square-box-sm {
    background-color: rgba(0,0,0,0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.square-box-sm:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.square-box-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Full-width Alumni Banner // separator */
.alumni-wide-banner {
    width: 100%;
    height: 400px; /* Adjust height as needed */
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.4s ease;
}

[data-theme="dark"] .alumni-wide-banner {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.alumni-wide-banner:hover {
    transform: scale(1.01);
}

.alumni-wide-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Optional: Text overlay for the wide banner */
.banner-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
}

/* Alumni Top Separator Styling */
.alumni-top-separator {
    width: 100%;
    overflow: hidden;
    /* No borders or shadows here so it feels like a native part of the page design */
}

.alumni-top-separator img {
    display: block;
    width: 100%;
    height: auto; /* Maintains natural slim separator height */
    object-fit: contain; /* Ensures the whole separator is visible */
    opacity: 0.9; /* Optional: makes it slightly subtle */
}

/* Removes any potential overflow issues and ensures zero margin */
.full-bleed-separator {
    width: 100vw; /* Forces 100% of the viewport width */
    margin-left: calc(-50vw + 50%); /* Centers it if it were inside a container, but safe here */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Simple version if outside container */
.full-bleed-separator img {
    display: block;
    width: 100%;
    height: auto; 
    object-fit: cover; /* Ensures no gaps at the edges */
}

/* Ensure the row doesn't create horizontal scrollbars */
.alumni-section {
    overflow-x: hidden;
}

/* Portrait Video Wrapper */
.portrait-video-wrapper {
    aspect-ratio: 9 / 16; /* Perfect vertical video sizing */
    border-radius: 32px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    border: 8px solid #ffffff; /* Gives it a sleek phone-like bezel */
    transform: rotate(2deg); /* A playful, dynamic tilt */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    background-color: #f8f9fa;
}

[data-theme="dark"] .portrait-video-wrapper {
    border-color: rgba(255,255,255,0.05);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    background-color: rgba(0,0,0,0.4);
}

/* Hover Effect: Straightens out and pops up */
.portrait-video-wrapper:hover {
    transform: rotate(0deg) scale(1.02);
}

.portrait-video-wrapper .video-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Floating Play Button Overlay */
.play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: var(--brand-orange, #f68f1d);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    padding-left: 5px; /* Visually centers the play triangle */
    box-shadow: 0 10px 25px rgba(246, 143, 29, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.portrait-video-wrapper:hover .play-button-overlay {
    transform: translate(-50%, -50%) scale(1.15);
    background: var(--brand-pink, #e83e8c); /* Fun color swap on hover */
    box-shadow: 0 15px 30px rgba(232, 62, 140, 0.4);
}

/* Ensure the video fills the 9:16 box perfectly without stretching */
.portrait-video-wrapper .alumni-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crops the video beautifully to fit the vertical frame */
    display: block;
}

/* Clean & Aesthetic Info Card */
.aesthetic-info-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0,0,0,0.03);
    position: relative;
}

/* Dark Mode Integration */
[data-theme="dark"] .aesthetic-info-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Elegant Quote Styling */
.aesthetic-quote {
    position: relative;
    padding-left: 1.5rem;
    border-left: 3px solid var(--brand-orange, #f68f1d);
    margin: 1.5rem 0;
}

.aesthetic-quote p {
    font-size: 1.15rem;
    font-style: italic;
    font-weight: 500;
    color: var(--brand-orange, #f68f1d);
    line-height: 1.6;
}

/* Subtle background quote icon */
.quote-icon-bg {
    position: absolute;
    top: -15px;
    left: -15px;
    font-size: 2.5rem;
    color: var(--brand-orange, #f68f1d);
    opacity: 0.15;
    z-index: 0;
}

/* Small Accent Circle for the announcement */
.announcement-icon-circle {
    width: 45px;
    height: 45px;
    min-width: 45px;
    background: rgba(232, 62, 140, 0.1); /* Soft pink tint */
    color: var(--brand-pink, #e83e8c);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.aesthetic-pill {
    width: fit-content; 
    /* A very soft, 5% transparent navy background */
    background: rgba(2, 46, 71, 0.05); 
    /* Subtle 15% transparent navy border */
    border: 1px solid rgba(2, 46, 71, 0.15); 
    /* Solid navy text */
    color: var(--brand-navy); 
    padding: 0.8rem 2.5rem;
    border-radius: 50px; 
    font-weight: 600;
    font-size: 1.15rem;
    /* Soft navy shadow to give it depth */
    box-shadow: 0 8px 20px rgba(2, 46, 71, 0.06); 
    transition: transform 0.3s ease;
}

/* Hover effect */
.aesthetic-pill:hover {
    transform: translateY(-2px);
}

/* Dark Mode Integration (Keeps it white so it doesn't disappear against dark backgrounds) */
[data-theme="dark"] .aesthetic-pill {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

/* 1. The Description Block */
.editorial-desc {
    padding-left: 1.5rem;
    border-left: 4px solid var(--brand-pink, #e83e8c);
    margin-bottom: 2rem;
}

/* 2. The Floating Navy Quote Card */
.highlight-quote-card {
    /* Uses your nice navy color for high contrast! */
    background: linear-gradient(135deg, var(--brand-navy, #022e47), #0a4b70);
    color: #ffffff;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 15px 30px rgba(2, 46, 71, 0.15);
    position: relative;
    margin-bottom: 2rem;
    /* This makes it "pop out" to the left slightly for an overlapping 3D effect */
    transform: translateX(-15px); 
}

.highlight-quote-card .fa-quote-right {
    position: absolute;
    top: -20px;
    right: 25px;
    font-size: 3.5rem;
    color: var(--brand-orange, #f68f1d);
    opacity: 0.9;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
}

/* 3. The Action Callout Box */
.action-callout {
    background: rgba(246, 143, 29, 0.05); /* Very soft orange tint */
    border: 2px dashed rgba(246, 143, 29, 0.3); /* Playful dashed border */
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    transition: all 0.3s ease;
}

.action-callout:hover {
    background: rgba(246, 143, 29, 0.1);
    border-color: var(--brand-orange, #f68f1d);
    transform: translateY(-3px);
}

.action-icon-square {
    background: #ffffff;
    color: var(--brand-orange, #f68f1d);
    width: 55px;
    height: 55px;
    min-width: 55px;
    border-radius: 14px; /* A modern "squircle" instead of a perfect circle */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
}

/* Dark Mode Tweaks */
[data-theme="dark"] .highlight-quote-card {
    background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
    border: 1px solid rgba(255,255,255,0.05);
}
[data-theme="dark"] .action-icon-square {
    background: rgba(255, 255, 255, 0.1);
}

/* --- Verafede Brand Color Variables --- */
:root {
    --brand-orange: #f68f1d;
    --brand-pink: #e83e8c;
    --brand-navy: #022e47; /* Navy from previous turns */
    /* Define the specific brand gradient used for the box */
    --vf-grad: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange) 65%, var(--brand-pink) 100%);
    /* Define text color for high contrast against gradients */
    --text-on-gradient: #ffffff;
}

/* --- Base Styling (Light Mode Default) --- */
.highlight-quote-card {
    /* Apply the vibrant Verafede gradient background */
    background: var(--vf-grad);
    /* Enforce white text color for contrast against the gradient, per request */
    color: var(--text-on-gradient);
    padding: 2.5rem;
    border-radius: 16px;
    /* Soft dark shadow for depth in light mode */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    margin-bottom: 2rem;
    transform: translateX(-15px); /* Layout tweak from previous turns */
    border: none; /* No border on this vibrant box */
    transition: all 0.3s ease; /* Smooth transition when switching themes */
}

/* Styling the Quote Icon */
.highlight-quote-card .fa-quote-right {
    position: absolute;
    top: -20px;
    right: 25px;
    font-size: 4rem;
    /* Use white for the icon to match the text and pop against the gradient */
    color: #ffffff;
    opacity: 0.9;
    /* Dark drop shadow ensures the white icon pops against the vibrant background */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}
/* --- Dark Mode Override for Quote Card --- */
[data-theme="dark"] .highlight-quote-card {
    /* Force the Verafede gradient to stay active in dark mode! */
    background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange) 65%, var(--brand-pink) 100%) !important;
    border: none; 
    /* Make the shadow slightly darker so it blends into the dark background */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4); 
}

/* Lock the text and the quote icon to pure white in dark mode */
[data-theme="dark"] .highlight-quote-card p,
[data-theme="dark"] .highlight-quote-card .fa-quote-right {
    color: #ffffff !important;
}

/* --- Application Form Styles --- */
.vf-form-card {
    background: var(--bg-surface, rgba(255, 255, 255, 0.8));
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(150, 150, 150, 0.15);
}

[data-theme="dark"] .vf-form-card {
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.vf-form-label {
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    color: var(--theme-text);
    margin-bottom: 0.5rem;
}

.vf-form-input {
    border-radius: 12px;
    padding: 0.8rem 1.2rem;
    border: 1px solid rgba(150, 150, 150, 0.3);
    background: transparent;
    color: var(--theme-text);
    transition: all 0.3s ease;
}

[data-theme="dark"] .vf-form-input {
    color: #fff;
    background: rgba(0, 0, 0, 0.2);
}

.vf-form-input:focus {
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 4px rgba(246, 143, 29, 0.15);
    background: transparent;
    color: var(--theme-text);
}

/* --- Modern Drag & Drop Upload Zone --- */
.vf-upload-zone {
    position: relative;
    border: 2px dashed rgba(150, 150, 150, 0.4);
    border-radius: 16px;
    padding: 2.5rem 1.5rem;
    background: rgba(150, 150, 150, 0.03);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}

[data-theme="dark"] .vf-upload-zone {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.15);
}

.vf-upload-zone:hover, .vf-upload-zone.dragover {
    border-color: var(--brand-orange);
    background: rgba(246, 143, 29, 0.05);
}

[data-theme="dark"] .vf-upload-zone:hover, [data-theme="dark"] .vf-upload-zone.dragover {
    border-color: var(--brand-pink);
    background: rgba(232, 62, 140, 0.08);
}

.vf-upload-zone.file-selected {
    border-color: var(--brand-pink);
    border-style: solid;
    background: rgba(232, 62, 140, 0.03);
}

.upload-icon {
    font-size: 2.5rem;
    color: var(--brand-pink);
    margin-bottom: 0.5rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.vf-upload-zone:hover .upload-icon, .vf-upload-zone.dragover .upload-icon {
    transform: translateY(-5px);
    color: var(--brand-orange);
}

.upload-text {
    color: var(--theme-text);
    font-size: 0.95rem;
}

/* --- Sliding Gradient Submit Button --- */
.btn-gradient-slide {
    /* Uses the Verafede brand colors with fallbacks */
    background-image: linear-gradient(
        to right, 
        var(--brand-pink, #e83e8c) 0%, 
        var(--brand-orange, #f68f1d) 50%, 
        var(--brand-pink, #e83e8c) 100%
    );
    background-size: 200% auto;
    color: white !important; /* Forces text to stay white */
    border: none;
    border-radius: 50px;
    padding: 1rem 2.5rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: background-position 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-gradient-slide:hover {
    /* Slides the background gradient to the right */
    background-position: right center;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(232, 62, 140, 0.3);
    text-decoration: none;
}

.btn-gradient-slide:active {
    transform: translateY(1px);
    box-shadow: 0 5px 10px rgba(232, 62, 140, 0.2);
}

.btn-gradient-slide i {
    transition: transform 0.3s ease;
}

.btn-gradient-slide:hover i {
    transform: translateX(4px);
}

/* --- Dark Mode Form Text Overrides --- */

/* 1. Main Headings and Paragraphs */
[data-theme="dark"] .theme-text {
    color: #ffffff !important;
}

/* 2. Form Labels */
[data-theme="dark"] .vf-form-label {
    color: #ffffff !important;
}

/* 3. Input & Select Field Text */
[data-theme="dark"] .vf-form-input {
    color: #ffffff !important;
    background-color: rgba(0, 0, 0, 0.3) !important; /* Slightly dark background for inputs */
}

/* 4. Placeholder Text inside Inputs */
[data-theme="dark"] .vf-form-input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 5. Dropdown Options (Select Menu) */
[data-theme="dark"] .form-select.vf-form-input option {
    color: #ffffff !important;
    background-color: #1e1e1e !important; /* Ensures white text is readable against a dark dropdown background */
}

/* 6. Upload Zone Text */
[data-theme="dark"] .upload-text,
[data-theme="dark"] .upload-text strong {
    color: #ffffff !important;
}

[data-theme="dark"] .upload-subtext {
    color: rgba(255, 255, 255, 0.7) !important; /* Slightly faded white for subtext */
}

/* --- Structured Modal & Dark Mode Adjustments --- */

.vf-modal-content {
    background-color: var(--bg-surface, #ffffff);
}

[data-theme="dark"] .vf-modal-content {
    background-color: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .vf-btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Inner Summary Card Background */
[data-theme="dark"] .vf-summary-card {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Document Upload Display Cards */
.vf-doc-card {
    background: #ffffff;
    border: 1px solid rgba(150, 150, 150, 0.15);
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

[data-theme="dark"] .vf-doc-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: none;
}

/* Outline Button Styling (Edit Details) */
.vf-btn-outline {
    border: 2px solid rgba(150, 150, 150, 0.3);
    color: var(--text-color, #333);
    background: transparent;
}

.vf-btn-outline:hover {
    background: rgba(150, 150, 150, 0.05);
}

[data-theme="dark"] .vf-btn-outline {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .vf-btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
}

.portrait-video-wrapper {
    max-width: 350px;
    aspect-ratio: 9 / 16;
    background-color: #000; /* Adds a black background for the bars */
    display: flex;
    align-items: center;
    justify-content: center;
}

.portrait-video-wrapper video {
    width: 100%;
    height: auto;
    /* 'contain' keeps the whole video visible without cropping */
    object-fit: contain; 
}

.portrait-video-wrapper {
    width: 100%;
    height: auto; /* Let the height be determined by the content */
}

.portrait-video-wrapper video {
    width: 100%;
    height: auto;
    display: block; /* This is crucial: it removes a tiny default bottom margin that inline elements have */
}

.asterisk {
  color: #dc3545; /* Bootstrap danger red */
  font-weight: bold;
}

/* Wrapper to align with textboxes */
.vf-recaptcha-wrapper {
  width: 100%; /* same width as inputs */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  border-radius: 8px;
  background: var(--vf-grad);
  box-shadow: 0 6px 12px rgba(2, 46, 71, 0.25);
}

/* Scale the widget to match input width */
.vf-recaptcha-wrapper .g-recaptcha {
  transform: scale(1.05); /* adjust scale to match textbox height */
  transform-origin: center;
}

/* Red outline when invalid */
.vf-recaptcha-wrapper.is-invalid {
  border: 2px solid #dc3545;
}

/* --- MARQUEE LOGIC --- */
.vf-marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Subtle fade on edges for a polished look */
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.vf-marquee-track {
    display: flex;
    width: max-content;
    gap: 32px; /* Slightly wider gap for larger horizontal cards */
    padding: 20px 0; 
    
    /* Animation speed increased to 120s because the track is now much wider */
    animation: vf-scroll-marquee 120s linear infinite;
}

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

@keyframes vf-scroll-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 16px)); /* 16px is half the 32px gap */ }
}

/* --- HORIZONTAL CARD STYLING --- */
.vf-review-card {
    flex: 0 0 750px; /* Widened for horizontal layout */
    background-color: color-mix(in srgb, var(--text-main) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-main) 10%, transparent);
    border-radius: 16px;
    
    /* Reduced top and bottom padding to lessen height */
    padding: 24px 40px 24px; 
    
    /* OPTIONAL: Add a max-height or strict height if it's still too tall */
    max-height: 300px;
    
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: grab; 
}

.vf-review-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

[data-theme="dark"] .vf-review-card:hover {
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

/* Gradient Top Accent */
.vf-card-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: var(--vf-grad);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

/* Decorative Quote */
.vf-quote-icon {
    font-family: var(--font-display);
    font-size: 100px; /* Slightly larger for the wider card */
    line-height: 1;
    position: absolute;
    top: 20px;
    right: 32px;
    opacity: 0.1;
    background: var(--vf-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vf-review-text {
    font-family: var(--font-body);
    font-size: 1.05rem; /* Slightly bumped up for readability */
    line-height: 1.7;
    color: var(--text-main);
    margin-bottom: 40px; /* Pushes the author section down */
    position: relative;
    z-index: 2;
    padding-right: 40px; /* Prevents text from overlapping the giant quote mark */
}

/* Horizontal Author Details & Tags */
.vf-review-author {
    margin-top: auto;
    border-top: 1px solid color-mix(in srgb, var(--text-main) 10%, transparent);
    padding-top: 24px;
    
    /* Flexbox puts them on the exact same line */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.vf-author-name {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.125rem;
    margin: 0; /* Removed bottom margin to keep alignment strict */
    white-space: nowrap; /* Prevents the name from breaking into two lines */
}

.vf-author-tags {
    display: flex;
    flex-wrap: nowrap; /* Keep tags on one line */
    gap: 8px;
}

.vf-tag {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 50px;
    background-color: color-mix(in srgb, var(--text-main) 8%, transparent);
    color: var(--text-main);
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.vf-tag-alumni {
    border: 1px solid var(--brand-orange);
    background-color: transparent;
}

.vf-tag-current {
    border: 1px solid var(--brand-pink);
    background-color: transparent;
}

/* Mobile Responsive overrides */
@media (max-width: 900px) {
    .vf-review-card {
        flex: 0 0 85vw; /* Take up screen width on mobile */
        padding: 32px 24px 24px;
    }
    
    .vf-review-text {
        padding-right: 0;
    }

    .vf-review-author {
        /* On small screens, we revert to stacked so it doesn't break the layout */
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .vf-author-name {
        white-space: normal;
    }
    
    .vf-author-tags {
        flex-wrap: wrap;
    }
}

/* --- REDESIGNED HEADER --- */
.vf-reviews-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 64px;
    margin-bottom: 64px; /* Increased from 48px for a more premium, airy feel */
    padding: 0 20px;
}

/* Eyebrow / Kicker */
.vf-eyebrow {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em; /* Wide tracking for contrast against the tight heading */
    color: var(--text-main);
    margin-top: 100px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0.8;
}

/* Small gradient accent dot */
.vf-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vf-grad);
    display: inline-block;
}



/* ==========================================================================
   PARTNER UNIVERSITIES SECTION - PREMIUM REDESIGN
   ========================================================================== */

/* Layout & Typography */
.vf-partner-universities {
    padding: 6rem 1.5rem;
    background-color: var(--bg-body);
    overflow: hidden;
}

.vf-heading {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    letter-spacing: -0.04em; /* Strict adherence to brand guidelines */
    margin-bottom: 1rem;
    line-height: 1.1;
    color: var(--text-main); 
}

.vf-subheading {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 650px;
    margin: 0 auto 3rem auto;
}

/* Gradient Text Animation */
.text-gradient {
    background: var(--vf-grad);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 6s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- Marquee Container System --- */
.vf-marquee-section {
    overflow: hidden;
    width: 100%;
    position: relative;
    padding: 2rem 0 4rem 0;
    display: flex;
    flex-direction: column;
    gap: 3rem; /* Space between the two scrolling lines */
}

.vf-marquee-track {
    display: flex;
    width: max-content;
    gap: 2rem;
    padding: 1rem 0; /* Gives space for the hover lift effect */
}

/* Pause animation on hover */
.vf-marquee-track:hover {
    animation-play-state: paused !important;
}

/* --- Animations --- */
/* Line 1: Left to Right (Moves towards the right) */
.marquee-left-to-right {
    animation: slide-right 60s linear infinite;
}

/* Line 2: Right to Left (Moves towards the left) */
.marquee-right-to-left {
    animation: slide-left 60s linear infinite;
}

@keyframes slide-right {
    /* calc(-50% - 1rem) perfectly offsets exactly half the content + half the gap */
    0% { transform: translateX(calc(-50% - 1rem)); }
    100% { transform: translateX(0); }
}

@keyframes slide-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 1rem)); }
}

/* --- The Wrapper & Card (Fixed Uniform Sizes) --- */
.vf-floating-wrapper {
    width: 260px; 
    flex-shrink: 0; /* Crucial: Prevents flexbox from squeezing cards in the marquee */
    perspective: 1200px;
}

.vf-logo-card {
    position: relative;
    height: 340px; /* Absolute uniform height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 3rem 1.5rem;
    background: rgba(128, 128, 128, 0.04); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 24px;
    z-index: 1;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Gradient Border Mask */
.vf-logo-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 2px; 
    background: var(--vf-grad, linear-gradient(135deg, #F68F1D, #FFC107)); /* Fallback added */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.3; 
    transition: opacity 0.5s ease;
    z-index: -1;
}

/* Hover Lift Effect */
.vf-floating-wrapper:hover .vf-logo-card {
    transform: translateY(-10px) rotateX(6deg) rotateY(-6deg);
    background: rgba(128, 128, 128, 0.08);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.1), 
        0 0 30px rgba(246, 143, 29, 0.15); 
}

.vf-floating-wrapper:hover .vf-logo-card::before {
    opacity: 1; 
}

/* --- Logo & Caption --- */
.vf-logo-inner {
    height: 120px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: transform 0.5s ease;
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.08)); 
}

.vf-logo-inner img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.vf-caption {
    font-family: var(--font-body, sans-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main, #333);
    text-align: center;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1; 
    width: 100%;
    line-height: 1.3;
}