:root {

    /* PUPPY RED & LYONS BLUE BRAND SYSTEM */

    --puppy-red: #E8001D;

    /* Puppy Red - vibrant, energetic */

    --puppy-red-light: #FF2D48;

    /* Lighter puppy red */

    --puppy-red-dark: #B5001A;

    /* Darker puppy red */

    --lyons-blue: #0040C1;



    --lyons-blue-light: #1A5FE0;

    /* Lighter lyons blue */

    --lyons-blue-dark: #002E8A;

    /* Darker lyons blue */



    /* Derived from brand colors */

    --brand-navy: #0040C1;

    /* Was #012C5C, now Lyons Blue */

    --brand-dark: #0A0C14;

    --text-light: #F5F7FA;

    --accent-white: #FFFFFF;

    --live-red: #E8001D;

    /* Was #D90429, now Puppy Red */

    --nav-glass: rgba(0, 20, 70, 0.95);



    /* Accent colors for vibrancy */

    --accent-yellow: #FFD600;

    --accent-orange: #FF6B2B;

    --accent-teal: #00C9B1;

    --accent-pink: #FF3D9A;

    --accent-purple: #7B2FFF;



    /* Gradient presets */

    --grad-red-blue: linear-gradient(135deg, var(--puppy-red) 0%, var(--lyons-blue) 100%);

    --grad-blue-red: linear-gradient(135deg, var(--lyons-blue) 0%, var(--puppy-red) 100%);

    --grad-red-orange: linear-gradient(135deg, var(--puppy-red) 0%, var(--accent-orange) 100%);

    --grad-blue-teal: linear-gradient(135deg, var(--lyons-blue) 0%, var(--accent-teal) 100%);

}



body.dark-theme {

    background-color: var(--brand-dark);

    color: var(--text-light);

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    overflow-x: hidden;

    cursor: none;

}



/* --- Custom Cursor --- */

.custom-cursor {

    position: fixed;

    width: 20px;

    height: 20px;

    border: 1.5px solid var(--accent-white);

    border-radius: 50%;

    transform: translate(-50%, -50%);

    pointer-events: none;

    z-index: 9999;

    transition: width 0.3s, height 0.3s, background-color 0.3s, border-color 0.3s;

    mix-blend-mode: difference;

}



.custom-cursor.cursor-hover {

    width: 40px;

    height: 40px;

    background-color: var(--accent-white);

    border-color: transparent;

    mix-blend-mode: difference;

}



/* --- Navigation & Full-Width Mega Menu Fix --- */

/* --- Navigation & Full-Width Mega Menu Fix --- */
.custom-navbar {
    background: var(--nav-glass);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(7, 7, 7, 0.438);
    padding: 1.2rem 0;
    transition: all 0.3s ease;
    height: 100px;
    border-bottom: 1px solid var(--brand-navy);
}

.navbar-brand {
    height: 800px;
}

.text-accent {
    color: var(--brand-navy);
}

/* ==========================================
   COLORFUL RAINBOW NAV LINKS (Normal & Hover)
   ========================================== */

.nav-link {
    font-weight: 700;
    margin: 0 0.3rem;
    padding: 0.6rem 1.2rem !important;
    /* Pill shape */
    border-radius: 50px;
    text-transform: uppercase;
    font-size: 1.05rem;
    letter-spacing: 1px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

    /* --- THE NORMAL STATE (Soft Shifting Rainbow) --- */
    color: var(--text-light) !important;
    /* 20% opacity vibrant colors for a colorful but readable resting state */
    /* background: linear-gradient(124deg, rgba(255, 51, 102, 0.2), rgba(255, 153, 51, 0.2), rgba(51, 204, 153, 0.2), rgba(51, 153, 255, 0.2), rgba(204, 51, 255, 0.2));
    background-size: 300% 300%;
    animation: rainbowBgFlow 6s ease infinite;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px); */
}

/* Keep text dark when the navbar turns white/light so you can still read it */
/* .theme-light .nav-link {
    color: var(--brand-dark) !important;
    border-color: rgba(0, 0, 0, 0.08);
} */

/* --- THE HOVER STATE (Vibrant Fast Rainbow) --- */
.nav-link:hover {
    color: #FFFFFF !important;
    /* Forces text to white over the bright background */
    /* 100% opacity, high saturation rainbow */
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #1de840, #1ddde8, #2b1de8, #dd00f3, #ff2400);
    background-size: 400% 400%;
    animation: rainbowBgFlow 2s linear infinite;
    /* Speeds up the animation! */
    transform: translateY(-3px) scale(1.05);
    /* Slight pop out effect */
    border-color: transparent;
    box-shadow: 0 10px 25px rgba(221, 0, 243, 0.3);
    /* Adds a colorful glowing shadow */
}

/* The flowing gradient keyframes used by both states */
@keyframes rainbowBgFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

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

/* The fix: position static allows the absolute child to span the full viewport */
.custom-dropdown {
    position: static !important;
}

/* Mega Menu Fixes */
/* --- Desktop Mega Menu --- */
.mega-menu {
    display: none;
    /* Let Bootstrap toggle this with .show */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100vw;
    background-color: rgba(1, 44, 92, 0.98) !important;
    /* Ensure brand blue */
    backdrop-filter: blur(15px);
    border: none;
    padding: 3rem 0;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.4s ease;
}

/* This is the class Bootstrap adds on click */
.mega-menu.show {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --- Mobile Fixes --- */
@media (max-width: 991px) {
    .custom-navbar {
        background: var(--nav-glass) !important;
        /* Force the dark glass look */
    }

    .navbar-collapse {
        max-height: 85vh;
        /* Keep it slightly shorter than the screen */
        overflow-y: auto;
        /* Enable vertical scroll */
        background: var(--nav-glass);
        padding: 1rem;
        -webkit-overflow-scrolling: touch;
        /* Smooth scrolling for iOS */
    }

    /* 2. Remove fixed heights from the mega menu */
    .mega-menu {
        position: static !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: none;
        /* Let BS toggle this */
        height: auto !important;
        padding: 1rem 0;
    }

    /* 3. Ensure the menu shows when clicked */
    .mega-menu.show {
        display: block !important;
    }

}







.custom-dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-menu-title {
    color: var(--accent-white);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 10px;
}

.mega-menu-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--accent-white);
}

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

.mega-menu-list li {
    margin-bottom: 0.8rem;
}

.mega-menu-list a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.mega-menu-list a:hover {
    color: var(--accent-white);
    transform: translateX(8px);
}

/* --- Animated Live Dot --- */
.live-dot {
    width: 8px;
    height: 8px;
    background-color: rgba(77, 138, 252, 0.7);
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    box-shadow: 0 0 0 0 rgba(77, 138, 252, 0.7);
    animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}


.custom-gradient-btn .live-dot {
    background-color: #dc3545;
}
.btn-cuberto.custom-gradient-btn.dropdown-toggle:after {
    display: none !important;
}

.dropdown-menu.custom-dark-menu {
    border-top: 2px solid var(--puppy-red) !important;
    background-color: var(--nav-glass) !important; 
    border-radius: 8px;
    padding: 15px 0;
}

.custom-dark-menu .dropdown-item {
    color: #FFFFFF !important; 
    background-color: transparent !important;
    font-size: 20px;
    font-weight: 600;
    transition: all 0.2s;
}




/* ==============================
   MINIMALIST MEGA MENU DESIGN
   ============================== */

/* Ensure the mega menu has enough space and matches the dark theme */
.mega-menu {
    background: linear-gradient(160deg, rgba(0, 15, 55, 0.99) 0%, rgba(5, 5, 20, 0.99) 100%) !important;
    border-top: 2px solid var(--puppy-red) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(232, 0, 29, 0.1) !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* Category Link Container */
.mega-category-link {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: none;
    /* Assuming you are using the custom magnetic cursor */
}

/* The Icon Box */
.mega-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    flex-shrink: 0;
}

/* The Category Text */
.mega-text {
    font-size: 20px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.3s ease;
    line-height: 1.4;
}

/* --- Hover Effects --- */
.mega-category-link:hover {
    transform: translateX(5px);
}

.mega-category-link:hover .mega-icon {
    background: var(--grad-red-blue);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 0 20px rgba(232, 0, 29, 0.4);
    transform: scale(1.1) rotate(-5deg);
}

.mega-category-link:hover .mega-text {
    color: var(--puppy-red);
}












/* --- JS Header Swap Utility Classes --- */
/* Your JS will add these based on the data-theme attribute */
.custom-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(1, 44, 92, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.navbar-toggler {
    border-color: var(--brand-navy) !important;
}
.custom-navbar.theme-light {
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid var(--brand-navy);
}

.custom-navbar.theme-light .navbar-brand,
.custom-navbar.theme-light .nav-link {
    color: var(--brand-dark) !important;
}

.custom-navbar.theme-light .navbar-toggler-icon {
    filter: invert(1);
}

.navbar-toggler-icon {
    filter: invert(1); 
}

.custom-navbar.theme-light .btn-secondary-outline {
    color: var(--brand-dark);
    border-color: rgba(1, 44, 92, 0.2);
}

.custom-navbar.theme-light .btn-secondary-outline::before {
    background-color: var(--brand-navy);
}

.custom-navbar.theme-light .btn-secondary-outline:hover {
    color: var(--accent-white) !important;
}



/* Invert the Primary 'Book Consultation' Button for Light Theme */
.custom-navbar.theme-light .btn-primary-solid {
    background-color: var(--brand-navy);
    color: var(--accent-white) !important;
    border-color: var(--brand-navy);
}

.custom-navbar.theme-light .btn-primary-solid::before {
    background-color: var(--brand-dark);
    /* Fills with darker black/navy on hover */
}

.custom-navbar.theme-light .btn-primary-solid:hover {
    color: var(--accent-white) !important;
    border-color: var(--brand-dark);
}





/* --- Dynamic Image Logo System --- */

.custom-logo-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* Adjust these dimensions to perfectly fit your actual logo aspect ratio */
    height: 40px;
    width: 140px;
    padding: 0;
    margin-right: 2rem;
}

.nav-logo {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    max-height: 80px;
    width: auto;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Default State (Navbar has Dark Background) */
.custom-navbar .logo-light {
    opacity: 1;
    visibility: visible;
}

.custom-navbar .logo-dark {
    opacity: 0;
    visibility: hidden;
}

/* Light Theme State (Triggered by your existing JS) */
.custom-navbar.theme-light .logo-light {
    opacity: 0;
    visibility: hidden;
}

.custom-navbar.theme-light .logo-dark {
    opacity: 1;
    visibility: visible;
}




.em-mobile-drawer {
    position: fixed;
    top: 0;
    right: -100%; /* Hidden off-screen */
    width: 320px;
    height: 100vh;
    background: rgba(1, 44, 92, 0.98); /* Brand Navy */
    backdrop-filter: blur(15px);
    z-index: 9999;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
}

.em-mobile-drawer.active {
    right: 0; /* Slide in */
}

/* Overlay Background */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Inside Drawer Styling */
.drawer-header {
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.drawer-logo {
    color: #fff;
    font-weight: 800;
    font-size: 1.4rem;
}

.em-drawer-links {
    padding: 30px 25px;
    list-style: none;
    overflow-y: auto;
}

.em-drawer-links .nav-link {
    color: #fff !important;
    font-size: 1.1rem;
    margin-bottom: 20px;
    display: block;
    border-radius: 0;
    background: none !important;
}

.drawer-section-title {
    color: var(--puppy-red);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
    font-weight: 700;
}

/* Synchronize with Navbar Light Theme */
.custom-navbar.theme-light ~ .em-mobile-drawer {
    background: rgba(255, 255, 255, 0.98);
}
.custom-navbar.theme-light ~ .em-mobile-drawer .nav-link,
.custom-navbar.theme-light ~ .em-mobile-drawer .drawer-logo {
    color: var(--brand-dark) !important;
}














/* --- Button System --- */
.btn-cuberto {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-weight: 600;
    font-size: 1.09rem;
    border-radius: 50px;
    overflow: hidden;
    z-index: 1;
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease, border-color 0.3s ease;
}

.btn-cuberto::before {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 50%;
    width: 150%;
    aspect-ratio: 1;
    border-radius: 50%;
    z-index: -1;
    transform: translateX(-50%) scale(0);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-cuberto:hover {
    transform: scale(1.08);
}

.btn-cuberto:hover::before {
    transform: translateX(-50%) scale(1.5);
}

.btn-primary-solid {
    background-color: var(--accent-white);
    color: var(--brand-dark);
    border: 1px solid var(--accent-white);
}

.btn-primary-solid::before {
    background-color: var(--brand-navy);
}

.btn-primary-solid:hover {
    color: var(--accent-white) !important;
    border-color: var(--brand-navy);
}

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

.btn-secondary-outline::before {
    background-color: var(--accent-white);
}

.btn-secondary-outline:hover {
    color: var(--brand-dark) !important;
    border-color: var(--accent-white);
}

/* ==========================================

   MODERN COLORFUL HERO SECTION

   ========================================== */



.hero-modern-wrapper {

    padding-top: 80px;

    /* Accounts for fixed navbar */

}



/* Subtle background accent to match the bright theme */

.hero-bg-blob {

    position: absolute;

    top: -10%;

    left: -5%;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, rgba(0, 86, 179, 0.04) 0%, rgba(255, 255, 255, 0) 70%);

    border-radius: 50%;

    z-index: 0;

    pointer-events: none;

}


@media (max-width: 768px) {
    .hero-bg-blob {


        width: 0;


    }
}

/* Eyebrow Pill */

.hero-badge-pill {

    display: inline-flex;

    align-items: center;

    background: #FFFFFF;

    border: 1px solid rgba(0, 0, 0, 0.08);

    padding: 8px 16px 8px 8px;

    border-radius: 50px;

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--brand-dark);

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);

}



.badge-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 24px;

    height: 24px;

    background: rgba(230, 57, 70, 0.1);

    border-radius: 50%;

    margin-right: 8px;

}



/* Text Highlights */

.text-accent-blue {

    color: #0056b3;

    /* Matches the blue circle in the graphic */

}



/* New Outline Button matching the design */

.btn-outline-dark {

    background: transparent;

    color: var(--brand-dark);

    border: 1.5px solid rgba(0, 0, 0, 0.15);

}



.btn-outline-dark::before {

    background-color: rgba(0, 0, 0, 0.05);

}



.btn-outline-dark:hover {

    border-color: var(--brand-dark);

    color: var(--brand-dark);

}



/* ==========================================

   AVATAR STACK COMPONENT

   ========================================== */

.avatars-stack img,

.avatar-more {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    border: 3px solid #FFFFFF;

    object-fit: cover;

    margin-left: -15px;

    /* Creates the overlap */

    transition: transform 0.3s ease;

}



.avatars-stack img:first-child {

    margin-left: 0;

}



.avatars-stack img:hover {

    transform: translateY(-5px);

    z-index: 10;

}



.avatar-more {

    background: var(--brand-navy);

    color: #FFF;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    font-size: 0.9rem;

    z-index: 5;

}



/* ==========================================

   GRAPHICAL COMPOSITION (Right Column)

   ========================================== */

.hero-graphic-composition {

    position: relative;

    width: 100%;

    height: 600px;

    display: flex;

    align-items: center;

    justify-content: center;

}



@media (max-width: 992px) {

    .hero-graphic-composition {

        height: 500px;

    }

}



/* Main Image Arch */

.main-image-arch {

    position: absolute;

    bottom: 0;

    width: auto;

    height: 100%;

    /* border-radius: 200px 200px 0 0; */

    overflow: hidden;

    z-index: 3;

    /* box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15); */

}



.main-image-arch img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* Colorful Background Shapes */

.shape-yellow-arch {

    position: absolute;

    bottom: -15px;

    /* Offset below image */

    right: 10%;

    /* Offset right of image */

    width: 65%;

    height: 80%;

    background-color: #FFD166;

    /* Vibrant Yellow */

    border-radius: 200px 200px 0 0;

    z-index: 1;

}



.shape-blue-circle {

    position: absolute;

    top: 5%;

    left: 10%;

    width: 120px;

    height: 120px;

    background-color: #118AB2;

    /* Bright Blue */

    border-radius: 50%;

    z-index: 2;

}



.shape-pink-star {

    position: absolute;

    top: 25%;

    right: 5%;

    z-index: 4;

    animation: rotateSlow 15s linear infinite;

}



/* Navy Dots Pattern */

.shape-dots {

    position: absolute;

    bottom: 10%;

    left: 5%;

    width: 80px;

    height: 80px;

    background-image: radial-gradient(var(--brand-navy) 2px, transparent 2px);

    background-size: 15px 15px;

    z-index: 2;

    opacity: 0.3;

}



/* Floating Glass Cards */

.floating-card {

    position: absolute;

    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: 16px;

    padding: 1.2rem;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);

    z-index: 5;

    cursor: none;

}



.card-audience {

    bottom: 15%;

    left: 0;

    width: 220px;

}



.icon-circle-green {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: rgba(255, 17, 0, 0.15);

    color: var(--live-red);

    /* Darker green for visibility on light bg */

    display: flex;

    align-items: center;

    justify-content: center;

}



.card-project {

    top: 30%;

    right: 0;

    width: 180px;

}



.mini-bar {

    width: 15px;

    border-radius: 4px 4px 0 0;

}



/* Floating Animations */

.float-anim-1 {

    animation: floatY 6s ease-in-out infinite;

}



.float-anim-2 {

    animation: floatY 7s ease-in-out infinite reverse;

    /* Reverse offset */

}



@keyframes floatY {



    0%,

    100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(-15px);

    }

}



@keyframes rotateSlow {

    from {

        transform: rotate(0deg);

    }



    to {

        transform: rotate(360deg);

    }

}

















/* ==========================================

   CINEMATIC LEFT-ALIGNED HERO SECTION

   ========================================== */



.hero-cinematic-wrapper {

    position: relative;

    width: 100vw;

    height: 100vh;

    min-height: 700px;

    overflow: hidden;

    background-color: var(--brand-dark);

}



/* Background Video - Focused & Sized */

.hero-bg-video {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: 1;

}



/* Spotlight Overlay: Dark on left for text, transparent on right for video */

.hero-video-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg, rgba(10, 12, 20, 0.95) 0%, rgba(10, 12, 20, 0.7) 45%, rgba(10, 12, 20, 0.1) 100%);

    z-index: 2;

}



/* --- Responsive Typography --- */

.hero-title-main {

    font-size: clamp(2.5rem, 5vw, 3.5rem);

    line-height: 1.1;

    letter-spacing: -1.5px;

}



.hero-subtitle-main {

    font-size: clamp(1rem, 1.2vw, 1.1rem);

    line-height: 1.7;

    max-width: 550px;

}



/* --- Badges & Glass Cards --- */

.glass-badge {

    background: rgba(255, 255, 255, 1);

    border-radius: 50px;

    padding: 6px 14px 6px 6px;

    display: inline-flex;

    align-items: center;

}



.badge-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 22px;

    height: 22px;

    background: rgba(232, 0, 29, 0.1);

    border-radius: 50%;

    margin-right: 8px;

}



.glass-badge .text-white {

    color: var(--brand-dark) !important;

    /* Text is dark inside the white pill */

}



/* Absolute Positioned Project Card */

.floating-project-card {

    position: absolute;

    top: 25%;

    right: 5%;

    width: 160px;

    z-index: 10;

}



.glass-card {

    background: rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.2);

    border-radius: 12px;

    padding: 1rem;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

}



.mini-bar {

    width: 12px;

    border-radius: 3px 3px 0 0;

}



/* --- Inline Buttons --- */

.audience-gradient-pill {

    background: linear-gradient(135deg, rgba(232, 0, 29, 0.8) 0%, rgba(123, 47, 255, 0.6) 100%);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 16px;

    padding: 10px 24px 10px 16px;

    cursor: none;

}



.audience-icon-red {

    color: rgba(255, 255, 255, 0.9);

}



.btn-outline-glass {

    background: rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    color: var(--accent-white);

    border: 1px solid rgba(255, 255, 255, 0.3);

    padding: 12px 24px;

    border-radius: 50px;

    font-weight: 600;

    transition: all 0.3s ease;

    text-decoration: none;

}



.btn-outline-glass:hover {

    background: var(--accent-white);

    color: var(--brand-dark);

}



/* --- Avatars --- */

.avatars-stack img,

.avatar-more {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    border: 2px solid var(--brand-dark);

    object-fit: cover;

    margin-left: -12px;

    transition: transform 0.3s ease;

}



.avatars-stack img:first-child {

    margin-left: 0;

}



.avatars-stack img:hover {

    transform: translateY(-5px);

    z-index: 10;

}



.avatar-more {

    color: #FFF;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    font-size: 0.9rem;

    z-index: 5;

}



/* Floating Animation */

.float-anim-2 {

    animation: floatY 7s ease-in-out infinite reverse;

}



@keyframes floatY {



    0%,

    100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(-15px);

    }

}



/* --- Responsive Tweaks --- */

@media (max-width: 992px) {

    .hero-video-overlay {

        background: linear-gradient(180deg, rgba(10, 12, 20, 0.4) 0%, rgba(10, 12, 20, 0.95) 100%);

    }



    .hero-cinematic-wrapper {

        min-height: 100vh;

    }

}





@media (max-width: 568px) {

    .hero-video-overlay {

        background: linear-gradient(180deg, rgba(10, 12, 20, 0.4) 0%, rgba(10, 12, 20, 0.95) 100%);

    }



    .hero-cinematic-wrapper {

        min-height: 130vh;

    }

}











































/* --- Light Theme Variables --- */

:root {

    /* Existing variables... */

    --light-bg: #FFFFFF;

    --light-bg-alt: #F5F7FA;

    --border-light: rgba(1, 44, 92, 0.1);

}



/* Spacer Utility */

.py-6 {

    padding-top: 6rem;

    padding-bottom: 6rem;

}



/* ==========================================

   INFINITE MARQUEE SECTION

============================================= */

.marquee-section {

    background-color: var(--brand-dark);

    overflow: hidden;

    position: relative;

    border-color: rgba(255, 255, 255, 0.05) !important;

}



.marquee-container {

    width: 100%;

    display: flex;

}



.marquee-track {

    display: flex;

    width: fit-content;

    animation: marqueeScroll 30s linear infinite;

}



/* Pause animation on hover for better UX */

.marquee-track:hover {

    animation-play-state: paused;

}



.marquee-content {

    display: flex;

    flex-shrink: 0;

    align-items: center;

    padding: 0 2rem;

}



.marquee-item {

    font-size: 1.25rem;

    font-weight: 500;

    color: rgb(255, 255, 255);

    margin: 0 2rem;

    text-transform: uppercase;

    letter-spacing: 2px;

    white-space: nowrap;

}





/* Styling for the new SVG Marquee Icons */

.marquee-icon {

    width: 28px;

    height: 28px;

    /* This color maps to your text-accent class. In the dark theme, you might want this to be white or var(--accent-white) depending on how you styled .text-accent */

    color: var(--accent-white);

}







@keyframes marqueeScroll {

    0% {

        transform: translateX(0);

    }



    100% {

        transform: translateX(-50%);

    }



    /* Moves exactly one duplicate width */

}

















































































/* ==========================================

   COURSE EXPLORER (Light Theme)

============================================= */

.course-explorer {

    background-color: var(--light-bg-alt);

    color: var(--brand-dark);

}

.sticky-sidebar {

    position: sticky;

    top: 120px;

    height: fit-content;

    z-index: 5;

}


.sticky-sidebar {
    position: relative !important;
    top: 0 !important;
    margin-bottom: 40px;
    z-index: 10;
}

@media (min-width: 992px) {
    .sticky-sidebar {
        position: sticky !important;
        top: 100px;
        height: fit-content;
        margin-bottom: 0;
    }
}

@media (max-width: 768px) {
    .section-title {
        font-size: 1.8rem;
        line-height: 1.2;
    }

    .section-subtitle {
        font-size: 1rem;
        margin-bottom: 30px !important;
    }
}

.section-title {

    font-size: clamp(2rem, 3.5vw, 3rem);

    font-weight: 400;

    line-height: 1.2;

    letter-spacing: -1px;

}



.dark-variant {

    color: var(--brand-navy) !important;

    background-color: rgba(1, 44, 92, 0.1) !important;

}



/* Adjusted button for light background */

.btn-primary-solid.dark-variant {

    background-color: var(--brand-navy) !important;

    color: var(--accent-white) !important;

    border: 1px solid var(--brand-navy);

}



.btn-primary-solid.dark-variant::before {

    background-color: var(--brand-dark);

    /* Fills with darker color on hover */

}



.btn-primary-solid.dark-variant:hover {

    color: var(--accent-white) !important;

    border-color: var(--brand-dark);

}



/* Course Cards */

.course-card {

    background-color: var(--accent-white);

    border-radius: 20px;

    border: 1px solid var(--border-light);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);

    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;

    cursor: pointer;

}



.course-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 40px rgba(1, 44, 92, 0.08);

}



.course-card-title .h3 {

    font-size: 1.5rem;

    font-weight: 400;

    margin-bottom: 0;

}

.course-card-desc .p {
    --bs-text-opacity: 1;
    color: var(--bs-secondary-color) !important;
}

.course-card-desc ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 1.5rem 0 0 0 !important;
}

.course-card-desc ul li {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 12px !important;
    font-size: 0.95rem;
    color: #4a5568;
    line-height: 1.4;
}

.course-card-desc ul li svg {
    display: none !important;
}

.course-card-desc ul li::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-right: 12px;
    margin-top: 2px;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF0000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}


.course-icon-wrapper {

    width: 60px;

    height: 60px;

    background-color: var(--light-bg-alt);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: transform 0.3s ease;

}



.course-card:hover .course-icon-wrapper {

    transform: scale(1.1) rotate(-5deg);

    background-color: rgba(1, 44, 92, 0.05);

}



.badge {

    padding: 6px 12px;

    border-radius: 30px;

    font-size: 0.75rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.badge-tech {

    background-color: rgba(0, 102, 255, 0.1);

    color: #0066ff;

}



.badge-management {

    background-color: rgba(255, 153, 0, 0.1);

    color: #ff9900;

}



.badge-accounting {

    background-color: rgba(0, 204, 102, 0.1);

    color: #00cc66;

}



.course-features li {

    font-size: 0.95rem;

    margin-bottom: 8px;

    color: #4a5568;

    display: flex;

    align-items: center;

}



.course-features svg {

    width: 16px;

    height: 16px;

    margin-right: 10px;

    stroke: var(--brand-navy);

    stroke-width: 3;

}



.link-arrow {

    display: inline-flex;

    align-items: center;

    transition: transform 0.3s ease;

}



.link-arrow svg {

    margin-left: 5px;

    transition: transform 0.3s ease;

}



.course-card:hover .link-arrow svg {

    transform: translateX(5px);

}











/* --- Course Card Image & Parallax System --- */

.card-img-container {

    position: relative;

    overflow: hidden;

    min-height: 250px;

    /* Ensures it looks good on mobile when stacked */

    border-left: 1px solid var(--border-light);

}



.card-parallax-img {

    position: absolute;

    top: -20%;

    /* Start it higher than the container */

    left: 0;

    width: 100%;

    height: 140%;

    /* Make it 40% taller so there's room to scroll */

    background-size: cover;

    background-position: center;

    will-change: transform;

    /* Performance optimization */

    /* Add a subtle zoom on card hover for extra premium feel */

    transition: scale 0.6s cubic-bezier(0.16, 1, 0.3, 1);

    scale: 1;

}



.course-card:hover .card-parallax-img {

    scale: 1.08;

}



/* Ensure padding is removed from the main card since we moved it to the inner column */

.course-card.p-0 {

    padding: 0 !important;

}













































































































/* ==========================================

   CINEMATIC HIGHLIGHT VIDEO SECTION

============================================= */

.highlight-video-section {

    background-color: var(--light-bg);

}



.video-card-wrapper {

    border-radius: 24px;

    height: 80vh;

    /* Adjust this to control how tall the video block is */

    min-height: 600px;

    /* box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); */

}



.bg-video {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: 0;

    /* Optional: Adds a slight premium zoom effect to the video itself */

    scale: 1.02;

    filter: saturate(150%);

}



.video-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    /* Darkens from top-left to bottom-right to ensure all text zones are readable */

    background: linear-gradient(135deg, rgba(7, 10, 15, 0.6) 0%, rgba(7, 10, 15, 0.2) 50%, rgba(7, 10, 15, 0.8) 100%);

    z-index: 1;

}



.video-content {

    position: relative;

    z-index: 2;

}



.highlight-title {

    font-size: clamp(2.5rem, 5vw, 3rem);

    font-weight: 400;

    line-height: 1.1;

    letter-spacing: -1px;

    max-width: 800px;

}



/* Bottom Row Typography */

.brand-logo-text {

    font-size: 1.5rem;

    font-weight: 800;

    color: var(--accent-white);

    letter-spacing: -0.5px;

}



.highlight-date {

    font-size: 0.9rem;

    font-weight: 600;

    color: rgba(255, 255, 255, 0.6);

    text-transform: uppercase;

    letter-spacing: 2px;

}



.highlight-desc {

    font-size: 0.9rem;

    font-weight: 500;

    color: rgba(255, 255, 255, 0.8);

    text-transform: uppercase;

    letter-spacing: 1px;

    max-width: 200px;

    /* Keeps the 4 words cleanly wrapped if needed on small screens */

}



/* Responsive centering fix for the bottom row */

@media (min-width: 768px) {

    .translate-middle-md {

        transform: translate(-50%, -50%) !important;

    }



    .position-md-absolute {

        position: absolute !important;

    }

}













































































































/* ==========================================

   PLACEMENT & PARTNERS SECTION

============================================= */

.placement-section {

    background-color: var(--brand-dark);

    overflow: hidden;

}



.placement-statement {

    font-size: clamp(2rem, 4.5vw, 4rem);

    font-weight: 500;

    /* Slightly softer than pure bold for elegance */

    line-height: 1.3;

    letter-spacing: -1px;

    color: var(--accent-white);

}



/* The Outlined Metric Pill */

.placement-statement strong {

    display: inline-block;

    padding: 0.1em 0.6em;

    border: 2px solid var(--accent-white);

    border-radius: 100px;

    white-space: nowrap;

    margin: 0 0.1em;

    transform: translateY(-0.05em);

}

.placement-statement strong {

    border-color: var(--puppy-red) !important;

    color: var(--puppy-red) !important;

    background: rgba(232, 0, 29, 0.08) !important;

    box-shadow: 0 0 20px rgba(232, 0, 29, 0.2);

}


/* Logo Ticker Specifics */

.logo-track {

    /* Slightly faster scroll for logos */

    animation: marqueeScroll 25s linear infinite;

}



.logo-content {

    padding: 0 2rem;

    gap: 4rem;

    /* Adds more space between logos than the text marquee */

}



.marquee-logo {

    font-size: 2rem;

    font-weight: 700;

    color: rgba(255, 255, 255, 0.4);

    /* Muted initial state */

    text-transform: lowercase;

    /* Matches the stylistic choice in the image */

    letter-spacing: -1px;

    white-space: nowrap;

    transition: color 0.4s ease, transform 0.4s ease;

    cursor: default;

}



/* Specific styling overrides for text-based logos */

.marquee-logo:nth-child(1) {

    text-transform: uppercase;

    letter-spacing: 2px;

}



/* Stripe */

.marquee-logo:nth-child(2) {

    text-transform: capitalize;

    font-weight: 600;

}



/* Spotify */

.marquee-logo:nth-child(3) {

    font-weight: 800;

}



/* Slack */

.marquee-logo:nth-child(4) {

    text-transform: capitalize;

    font-weight: 600;

}



/* Microsoft */



/* Premium hover effect: illuminates the logo when hovered */

.marquee-logo:hover {

    color: rgba(255, 255, 255, 0.9);

    transform: scale(1.05);

}















































































/* ==========================================

   BENTO GRID: WHO CAN APPLY SECTION

   ========================================== */



/* Section Base */

.bento-audience-section {

    position: relative;

    z-index: 1;

}



/* Dark Outline Badge for White Background */

.badge-dark-outline {

    background: transparent;

    color: var(--brand-dark);

    border: 1px solid var(--brand-dark);

    padding: 0.6em 1.2em;

    font-size: 0.85rem;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    border-radius: 50px;

}



/* Dark Bento Container */

.bento-wrapper {

    background-color: var(--brand-dark);

    border-radius: 32px;

    box-shadow: 0 20px 40px rgba(7, 10, 15, 0.15);

}



/* Inner Dark Cards */

.bento-card {

    background: rgba(255, 255, 255, 0.03);

    /* Subtle lightness to contrast against the wrapper */

    border: 1px solid rgba(255, 255, 255, 0.05);

    border-radius: 24px;

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

    cursor: none;

    /* Inherits custom cursor */

}



/* Card Hover States */

.bento-card:hover {

    transform: translateY(-5px);

    background: rgba(255, 255, 255, 0.06);

    border-color: var(--live-red);

    /* Uses live-green */

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

}



/* Icon Wrapper inside Bento Cards */

.bento-icon-wrapper {

    width: 50px;

    height: 50px;

    border-radius: 12px;

    background: rgba(1, 44, 92, 0.5);

    /* Uses brand-navy */

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-light);

    border: 1px solid rgba(1, 44, 92, 0.8);

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

}



.bento-card:hover .bento-icon-wrapper {

    background: var(--live-red);

    color: var(--accent-white);

    border-color: var(--live-red);

    transform: scale(1.1) rotate(-5deg);

}



/* Full Height Image Card */

.bento-image-card {

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(255, 255, 255, 0.05);

    border-radius: 24px;

    overflow: hidden;

    position: relative;

    min-height: 300px;

    /* Ensures minimum height on mobile */

    cursor: none;

}



.bento-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);

}



/* Zoom effect on image card hover */

.bento-image-card:hover .bento-img {

    transform: scale(1.05);

}



/* Gradient Overlay for Text Visibility on Image */

.bento-image-overlay {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    background: linear-gradient(to top, var(--brand-dark) 0%, transparent 100%);

    z-index: 2;

}

.why {
    line-height: 1.7;
}

.why p {
    line-height: 1.7;
    margin-bottom: 1rem;
}

.why ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
}

.why ul li {
    line-height: 1.7;
    margin-bottom: 0.5rem;
    position: relative;
}


/* .why ul li::before {
    content: "→"; 
    color: var(--puppy-red);
    margin-right: 10px;
} */

/* Utility Helpers */

.text-muted-light {

    color: rgba(245, 247, 250, 0.65);

    line-height: 1.6;

}



.text-sm {

    font-size: 1.2rem;

}











































































































/* ==========================================

   IMPACT & STATS SECTION (Light Version)

   ========================================== */



.impact-section {
    background: linear-gradient(160deg, #d0d8eb 0%, #fff5f5 50%, #fbd8d8 100%) !important;

    overflow: hidden;

    padding-bottom: 0 !important;

}



/* Typography Enhancements */

.impact-title {

    line-height: 1.2;

    letter-spacing: -1px;

}



/* New Blue Gradient and Accents */

.text-gradient-blue {

    background: linear-gradient(90deg, var(--brand-navy) 0%, #0056b3 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.text-accent-blue {

    color: #0056b3;

}









/* Helper for aligning numbers and symbols seamlessly */

.align-items-baseline {

    align-items: baseline !important;

}





.fs-7 {

    font-size: 0.8rem;

}



.tracking-wide {

    letter-spacing: 2px;

}



/* Stat Items */

.stat-item {

    padding: 1.5rem;

    transition: transform 0.4s ease;

}



.stat-item:hover {

    transform: translateY(-5px);

}



/* Enlarged Canvas Container */

.canvas-container-large {

    height: 550px;

    /* Significantly increased height to hold the larger sphere */

    /* Fades the top of the canvas so particles don't abruptly cut off near the text */

    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%);

    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%);

    z-index: 1;

}



#particleSphere {

    width: 100%;

    height: 100%;

    display: block;

    cursor: none;

}



















































































/* ==========================================

   CORE PROGRAMS SECTION (Custom Accordion)

   ========================================== */



.core-programs-section {

    background-color: var(--brand-dark);

    position: relative;

    z-index: 1;

}



/* Sticky Header on Desktop */

@media (min-width: 992px) {

    .sticky-header-wrapper {

        position: sticky;

        top: 140px;

        /* Adjust based on your navbar height */

    }

}



.title-split {

    line-height: 1.05;

    letter-spacing: -2px;

}



/* Base Accordion Resets */

.custom-accordion {

    --bs-accordion-bg: transparent;

    --bs-accordion-border-width: 0;

    --bs-accordion-border-radius: 0;

    --bs-accordion-inner-border-radius: 0;

    --bs-accordion-btn-focus-box-shadow: none;

}



.custom-accordion .accordion-item {

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    background-color: transparent;

}



/* Add bottom border only to the last item */

.custom-accordion .accordion-item:last-child {

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



/* Accordion Button Styling */

.custom-accordion .accordion-button {

    background-color: transparent;

    color: var(--text-light);

    padding: 2.5rem 0;

    display: flex;

    align-items: center;

    box-shadow: none;

    cursor: none;

    /* Let your custom cursor handle it */

}



/* Hide Default Bootstrap Arrow */

.custom-accordion .accordion-button::after {

    display: none;

}



/* Number Label */

.acc-num {

    font-size: 1.1rem;

    font-weight: 400;

    color: rgba(255, 255, 255, 0.3);

    margin-right: 2rem;

    font-family: monospace;

    /* Gives that technical 01, 02 look */

}



/* Main Title */

.acc-title {

    font-size: 1.8rem;

    font-weight: 400;

    letter-spacing: -0.5px;

    transition: color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

}



@media (min-width: 992px) {

    .acc-title {

        font-size: 2.5rem;

        /* Massive text on desktop like the design */

    }

}



/* Custom Plus/Minus Icon */

.acc-icon {

    margin-left: auto;

    width: 45px;

    height: 45px;

    border: 1px solid rgba(255, 255, 255, 0.2);

    border-radius: 50%;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

    flex-shrink: 0;

}



.acc-line-h,

.acc-line-v {

    position: absolute;

    background-color: var(--text-light);

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

}



.acc-line-h {

    width: 14px;

    height: 2px;

}



.acc-line-v {

    width: 2px;

    height: 14px;

}



/* Hover States */

.custom-accordion .accordion-button:hover .acc-title {

    color: var(--live-red);

    transform: translateX(10px);

    /* Slight nudge right on hover */

}



.custom-accordion .accordion-button:hover .acc-icon {

    border-color: var(--live-red);

    transform: rotate(90deg);

}



.custom-accordion .accordion-button:hover .acc-line-h,

.custom-accordion .accordion-button:hover .acc-line-v {

    background-color: var(--live-red);

}



/* Open (Active) States */

/* When the accordion is open, turn the + into a - by scaling the vertical line to 0 */

.custom-accordion .accordion-button:not(.collapsed) .acc-line-v {

    transform: scaleY(0);

}



.custom-accordion .accordion-button:not(.collapsed) .acc-icon {

    border-color: var(--live-red);

    background-color: rgba(255, 0, 0, 0.1);

}



.custom-accordion .accordion-button:not(.collapsed) .acc-line-h {

    background-color: var(--live-red);

}



/* Body Content Styling */

.custom-accordion .accordion-body {

    padding: 0 0 3rem 0;

    /* Only padding bottom to keep it aligned with the title */

    margin-left: 3.5rem;

    /* Aligns the list perfectly under the title, skipping the number */

}

@media (min-width: 992px) {

    .custom-accordion .accordion-body {

        margin-left: 4.5rem;

    }

}


.accordion-body ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

/* Course List Items inside Accordion */

.accordion-body ul li {

    position: relative;

    padding-left: 1.5rem;

    color: rgba(245, 247, 250, 0.75);

    /* --text-light slightly muted */

    font-size: 1.05rem;

    line-height: 1.6;

    transition: color 0.3s ease;

    cursor: none;

    /* Let your custom cursor handle it */

}



.accordion-body ul li:hover {

    color: var(--live-red);

}



.accordion-body ul li::before {

    content: '';

    position: absolute;

    left: 0;

    top: 0.5rem;

    width: 6px;

    height: 6px;

    background-color: var(--live-red);

    border-radius: 50%;

    box-shadow: 0 0 8px rgba(0, 255, 102, 0.4);

}



















.enroll-section {
    margin-top: 20px;

    background-color: #F8FAFC;

    /* A very sophisticated, icy off-white */

    position: relative;

    z-index: 1;

    overflow: hidden;

}
.contactpage-section {

    background-color: #F8FAFC;

    /* A very sophisticated, icy off-white */

    position: relative;

    z-index: 1;

    overflow: hidden;

}
/* ==========================================

   GET IN TOUCH / CONTACT SECTION (Ultra-Modern)

   ========================================== */



.contact-section {

    background-color: #F8FAFC;

    /* A very sophisticated, icy off-white */

    position: relative;

    z-index: 1;

    overflow: hidden;

}



/* Ambient Background Glow for premium feel */

.ambient-glow {

    position: absolute;

    top: -20%;

    right: -10%;

    width: 600px;

    height: 600px;

    background: radial-gradient(circle, rgba(0, 86, 179, 0.05) 0%, rgba(248, 250, 252, 0) 70%);

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

}



/* Typography & Badges */

.badge-modern {

    background: #FFFFFF;

    color: #0056b3;

    border: 1px solid rgba(0, 86, 179, 0.15);

    padding: 0.6em 1.2em;

    font-size: 0.8rem;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    border-radius: 50px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);

}



.title-split {

    line-height: 1.05;

    letter-spacing: -1.5px;

}



/* Contact Bento Cards */

.contact-bento-card {

    background: #FFFFFF;

    border: 1px solid rgba(0, 0, 0, 0.04);

    border-radius: 16px;

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);

    cursor: none;

    /* Inherits custom cursor */

}



a.contact-bento-card:hover {

    transform: translateY(-4px);

    border-color: rgba(0, 86, 179, 0.2);

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);

}



.contact-icon-modern {

    width: 48px;

    height: 48px;

    border-radius: 12px;

    background: #F1F5F9;

    /* Very light slate */

    color: #0056b3;

    /* Brand blue accent */

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    transition: all 0.4s ease;

}



a.contact-bento-card:hover .contact-icon-modern {

    background: #0056b3;

    color: #FFFFFF;

    transform: scale(1.05);

}



/* Social Pills */

.social-pill {

    display: inline-flex;

    align-items: center;

    font-size: 0.9rem;

    font-weight: 600;

    color: #475569;

    text-decoration: none;

    padding: 0.5rem 1rem;

    border-radius: 50px;

    background: transparent;

    border: 1px solid rgba(0, 0, 0, 0.08);

    transition: all 0.3s ease;

    cursor: none;

}



.social-pill:hover {

    background: var(--brand-dark);

    color: var(--accent-white);

    border-color: var(--brand-dark);

}



/* ==========================================

   Modern Form Styling (Stripe/Apple Aesthetic)

   ========================================== */



.modern-form-wrapper {

    background: #FFFFFF;

    border-radius: 24px;

    border: 1px solid rgba(0, 0, 0, 0.06);

    /* Ultra-smooth, multi-layered shadow */

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02),

        0 4px 8px rgba(0, 0, 0, 0.02),

        0 16px 32px rgba(0, 0, 0, 0.04),

        0 32px 64px rgba(0, 0, 0, 0.04);

}



.modern-input-group {

    display: flex;

    flex-direction: column;

    gap: 0.4rem;

}



.modern-label {

    font-size: 0.85rem;

    font-weight: 600;

    color: #334155;

    padding-left: 0.2rem;

}


.modern-span {

    font-size: 0.85rem;

    color: #334155;

    padding-left: 0.2rem;

}
.modern-input {

    background-color: #F8FAFC;

    border: 1px solid #E2E8F0;

    border-radius: 12px;

    padding: 0.85rem 1.2rem;

    font-size: 1rem;

    color: #0F172A;

    transition: all 0.3s ease;

    box-shadow: none !important;

    /* Overrides bootstrap glow */

    cursor: none;

}



/* Focus state - extremely clean border ring */

.modern-input:focus {

    background-color: #FFFFFF;

    border-color: #0056b3;

    outline: none;

    box-shadow: 0 0 0 4px rgba(0, 86, 179, 0.1) !important;

}



select.modern-input {

    appearance: none;

    -webkit-appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 1.2rem center;

    background-size: 16px;

}



/* Submit Button */

.modern-btn-submit {

    background-color: var(--brand-dark);

    color: var(--accent-white);

    border: none;

    border-radius: 12px;

    padding: 1.1rem 1.5rem;

    font-size: 1.05rem;

    font-weight: 600;

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

    cursor: none;

    position: relative;

    overflow: hidden;

}



.modern-btn-submit:hover {

    background-color: #000000;

    color: var(--accent-white);

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

}



/* Live Animated Dot Indicator (Carried over) */

.live-dot-indicator {

    width: 8px;

    height: 8px;

    background-color: var(--live-red);

    border-radius: 50%;

    position: relative;

    display: inline-block;

}



.live-dot-indicator::after {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 100%;

    height: 100%;

    background-color: var(--live-red);

    border-radius: 50%;

    animation: livePulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

    z-index: 1;

}



@keyframes livePulse {

    0% {

        transform: translate(-50%, -50%) scale(1);

        opacity: 0.8;

    }



    100% {

        transform: translate(-50%, -50%) scale(3.5);

        opacity: 0;

    }

}

































































/* ==========================================

   GALLERY SECTION (Cinematic Carousel)

   ========================================== */



.gallery-section {

    background-color: var(--brand-dark);

    position: relative;

    z-index: 1;

}



/* Ensure the wrapper respects border-radius for the absolute controls */

.gallery-wrapper {

    border-radius: 24px;

    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);

}



.gallery-inner {

    border: 1px solid rgba(255, 255, 255, 0.05);

    overflow: hidden;

    background-color: #000;

}



/* Image Container & Aspect Ratio */

.gallery-img-container {

    position: relative;

    width: 100%;

    /* Cinematic aspect ratio, adjusts beautifully on mobile */

    aspect-ratio: 21 / 9;

}



@media (max-width: 768px) {

    .gallery-img-container {

        aspect-ratio: 16 / 10;

    }

}



.gallery-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0.85;

    /* Slight dimming to let captions pop */

    transition: transform 6s ease;

    /* Slow zoom effect */

}



/* Slow zoom on active item */

.carousel-item.active .gallery-img {

    transform: scale(1.05);

}



/* Gradient Overlay for Text Readability */

.gallery-img-container::after {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(to top, rgba(7, 10, 15, 0.9) 0%, rgba(7, 10, 15, 0.2) 40%, transparent 100%);

    pointer-events: none;

}



/* Elegant Captions Bottom Left */

.gallery-caption {

    position: absolute;

    bottom: 0;

    left: 0;

    padding: 3rem;

    z-index: 5;

}



@media (max-width: 768px) {

    .gallery-caption {

        padding: 1.5rem;

        /* Make room for controls on mobile */

        padding-bottom: 5rem;

    }

}



/* Floating Controls (Bottom Right) */

.gallery-controls {

    position: absolute;

    bottom: 2rem;

    right: 2rem;

    display: flex;

    gap: 0.8rem;

    z-index: 10;

}



@media (max-width: 768px) {

    .gallery-controls {

        bottom: 1.5rem;

        right: 1.5rem;

    }

}



/* Glassmorphic Control Buttons */

.gallery-btn {

    width: 54px;

    height: 54px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.15);

    color: var(--accent-white);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

    cursor: none;

    /* Let the custom cursor handle hover */

    padding: 0;

}



.gallery-btn:hover {

    background: var(--accent-white);

    color: var(--brand-dark);

    border-color: var(--accent-white);

    transform: scale(1.1);

    /* box-shadow: 0 10px 20px rgba(0, 255, 102, 0.2); */

}



.gallery-btn:active {

    transform: scale(0.95);

}

















































































/* ==========================================

   VIDEO GALLERY (Light Background)

   ========================================== */



.video-gallery-section {

    background-color: #FFFFFF;

}



.video-card-container {

    position: relative;

    width: 100%;

    aspect-ratio: 21 / 9;

    /* Cinematic Ratio */

    background: #000;

}



@media (max-width: 768px) {

    .video-card-container {

        aspect-ratio: 16 / 9;

    }

}



.video-poster-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0.7;

    /* Darken for overlay clarity */

    transition: transform 8s linear;

}

.carousel-item strong {

    background: var(--grad-blue-red) !important;

    -webkit-background-clip: text !important;

    -webkit-text-fill-color: transparent !important;

    background-clip: text !important;

}

.carousel-item.active .video-poster-img {

    transform: scale(1.1);

}



.video-poster-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: radial-gradient(circle, transparent 20%, rgba(0, 0, 0, 0.4) 100%);

    z-index: 5;

}



/* Play Button Styling */

.play-trigger-btn {

    width: 90px;

    height: 90px;

    border-radius: 50%;

    background: #FFFFFF;

    border: none;

    color: var(--brand-navy);

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    transition: all 0.4s ease;

    cursor: none;

    padding: 0;

}



.play-trigger-btn svg {

    margin-left: 5px;

}



.play-trigger-btn:hover {

    transform: scale(1.15);

    background: var(--accent-blue);

    color: #fff;

}



/* Metadata label on slide */

.video-meta-label {

    position: absolute;

    bottom: 2rem;

    left: 2rem;

    color: #fff;

    text-align: left;

}



/* Navigation Buttons (Bottom Right - Matching Gallery) */

.video-gallery-controls {

    position: absolute;

    bottom: 2rem;

    right: 2rem;

    display: flex;

    gap: 0.8rem;

    z-index: 10;

}



.v-gallery-btn {

    width: 54px;

    height: 54px;

    border-radius: 50%;

    background: rgba(7, 10, 15, 0.05);

    border: 1px solid rgba(240, 240, 240, 0.514);

    color: var(--accent-white);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

    cursor: none;

}



.v-gallery-btn:hover {

    background: var(--light-bg);

    color: var(--brand-dark);

}



/* Modal Specifics */

#videoModal .modal-xl {

    max-width: 1000px;

}





































































/* ==========================================

   FULL-WIDTH TEXT REVIEWS

   ========================================== */



.text-review-section {

    background-color: #F8FAFC;

    position: relative;

    overflow: hidden;

}



/* Background Quote Decor */

.quote-icon-bg {

    position: absolute;

    top: 10%;

    left: 50%;

    transform: translateX(-50%);

    z-index: 0;

    pointer-events: none;

    color: var(--brand-navy);

}



/* Typography Styling */

.review-main-text {

    line-height: 1.4;

    letter-spacing: -1.5px;

    position: relative;

    z-index: 1;

}



@media (max-width: 768px) {

    .review-main-text {

        font-size: 1.5rem;

        letter-spacing: -0.5px;

    }

}



/* Reviewer Avatar */

.reviewer-avatar {

    width: 64px;

    height: 64px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid #F1F5F9;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

}



.tracking-wider {

    letter-spacing: 2px;

}



/* Bottom Center Control Pill */

.carousel-controls-center {

    display: flex;

    justify-content: center;

    position: relative;

    z-index: 5;

}



.control-pill {

    background: #FFFFFF;

    border: 1px solid rgba(0, 0, 0, 0.06);

    display: flex;

    align-items: center;

    border-radius: 100px;

    padding: 6px;

}



.control-btn {

    background: transparent;

    border: none;

    width: 44px;

    height: 44px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--brand-dark);

    transition: all 0.3s ease;

    cursor: none;

    /* Uses custom cursor */

}



.control-btn:hover {

    background-color: #F8FAFC;

    color: var(--brand-navy);

}



.control-divider {

    width: 1px;

    height: 24px;

    background-color: rgba(0, 0, 0, 0.08);

    margin: 0 4px;

}



/* Section Padding Utility */

.py-6 {

    padding-top: 6rem;

    padding-bottom: 6rem;

}





























































/* ==========================================

   FOOTER SECTION (Deep Parallax)

   ========================================== */



.footer-section {

    background-color: var(--brand-dark);

    position: relative;

    overflow: hidden;

    color: var(--text-light);

}



.border-white-10 {

    border-color: rgba(255, 255, 255, 0.08) !important;

}



.x-small {

    font-size: 0.75rem;

    opacity: 0.6;

}



/* Parallax Circuit Background */

.footer-parallax-wrapper {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

}



.circuit-layer {

    position: absolute;

    width: 200%;

    height: 200%;

    top: -50%;

    left: -50%;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M10 10L90 10M10 50L90 50M10 90L90 90M50 10L50 90' stroke='rgba(0, 255, 102, 0.03)' stroke-width='0.5' fill='none'/%3E%3Ccircle cx='10' cy='10' r='1' fill='rgba(0, 255, 102, 0.1)'/%3E%3Ccircle cx='90' cy='10' r='1' fill='rgba(0, 255, 102, 0.1)'/%3E%3Ccircle cx='50' cy='50' r='1.5' fill='#00ff66'/%3E%3C/svg%3E");

    background-repeat: repeat;

}



.layer-2 {

    opacity: 0.6;

    filter: blur(2px);

}



.layer-3 {

    opacity: 0.3;

    filter: blur(4px);

}



/* Footer Branding & Typography */

.footer-title {

    line-height: 1.1;

    letter-spacing: -2px;

}



.footer-brand {

    font-size: 1.8rem;

    font-weight: 800;

    color: var(--accent-white);

    text-decoration: none;

    letter-spacing: -1px;

}



/* Links Hover Effect */

.footer-links li {

    margin-bottom: 0.8rem;

}



.footer-links a {

    color: rgba(245, 247, 250, 0.6);

    text-decoration: none;

    transition: all 0.3s ease;

    font-size: 0.95rem;

}



.footer-links a:hover {

    color: var(--live-red);

    padding-left: 5px;

}



/* CTA Button Styling */

.btn-footer-cta {

    display: inline-flex;

    align-items: center;

    padding: 1.2rem 2.5rem;

    background: var(--accent-white);

    color: var(--brand-dark);

    border-radius: 100px;

    font-weight: 700;

    text-decoration: none;

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

}



.btn-footer-cta:hover {

    background: var(--live-red);

    transform: translateY(-5px) scale(1.05);

    box-shadow: 0 20px 40px rgba(0, 255, 102, 0.3);

}







































/* ==========================================

   FOOTER SECTION (Fixed Circuit Animation)

   ========================================== */

.footer-section {

    background-color: var(--brand-dark);

    position: relative;

    overflow: hidden;

    color: var(--text-light);

    min-height: 80vh;

    /* Ensures enough scroll space for parallax */

}



.footer-parallax-wrapper {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    overflow: hidden;

}



.circuit-layer {

    position: absolute;

    /* Extra large to prevent edges showing during rotation/parallax */

    width: 200%;

    height: 200%;

    top: -50%;

    left: -50%;

    background-size: 150px 150px;

    background-repeat: repeat;

    will-change: transform;

}



/* Layer 1: Deepest/Slowest */

.layer-1 {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M10 10 L90 10 L90 90 L10 90 Z' stroke='rgba(0, 255, 102, 0.05)' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");

    opacity: 0.4;

}



/* Layer 2: Middle - Pulsing Circuitry */

.layer-2 {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M0 50 L30 50 L40 30 L60 70 L70 50 L100 50' stroke='rgba(0, 255, 102, 0.08)' stroke-width='1' fill='none'/%3E%3Ccircle cx='40' cy='30' r='1' fill='%2300FF66'/%3E%3C/svg%3E");

    animation: circuitPulse 8s infinite alternate ease-in-out;

}



/* Layer 3: Top/Fastest - Detailed Nodes */

.layer-3 {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='10' cy='10' r='1' fill='rgba(0, 255, 102, 0.2)'/%3E%3Cpath d='M10 10 L50 10 L50 50' stroke='rgba(0, 255, 102, 0.05)' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");

}



@keyframes circuitPulse {

    0% {

        opacity: 0.2;

        transform: scale(1);

    }



    100% {

        opacity: 0.6;

        transform: scale(1.05);

    }

}



.footer-cta-box,

.footer-bottom-nav,

.footer-copyright {

    position: relative;

    z-index: 10;

    /* Ensures content is above the background layers */

}





























/* ==========================================

   FOOTER BOTTOM SOCIAL ICONS

   ========================================== */



.footer-social-icon {

    color: rgba(245, 247, 250, 0.5);

    /* Muted state matching text-muted-light */

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);

    cursor: none;

    /* Inherits custom cursor */

}



.footer-social-icon:hover {

    color: var(--accent-white);

    /* Illuminates white on hover */

    transform: translateY(-3px) scale(1.1);

}













/* ==========================================

   FOOTER MAP STYLING

============================================= */



.footer-map-wrapper {

    width: 100%;

    height: 160px;

    /* Keeps it compact in the footer */

    border-radius: 16px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.1);



    /* Premium touch: CSS filter to make Google Maps 'Dark Mode' */

    filter: grayscale(80%) invert(90%) contrast(85%);

    transition: filter 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

    cursor: none;

    /* Let your custom cursor handle it */

}



/* Returns map to full color when hovered */

.footer-map-wrapper:hover {

    filter: grayscale(0%) invert(0%) contrast(100%);

    border-color: var(--live-green);

}


























































/* ==========================================

   WHATSAPP FLOATING BUTTON

   ========================================== */


.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 65px; /* Circle shape */
    height: 65px;
    background-color: #25D366;
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.35);
    z-index: 1050;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy transition */
}

/* The Message Bubble */
.whatsapp-text {
    position: absolute;
    right: 80px; /* Position to the left of the button */
    bottom: 10px;
    background: white;
    color: #333; /* Darker text for readability in the bubble */
    padding: 10px 20px;
    border-radius: 15px 15px 15px 15px; /* Chat bubble shape */
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    
    /* Hide by default */
    /* opacity: 0;
    visibility: hidden;
    transform: translateX(20px) scale(0.8);
    transition: all 0.3s ease; */
}

/* Hover State */
.whatsapp-float:hover {
    transform: scale(1.1);
}

.whatsapp-float:hover .whatsapp-text {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
}

/* @keyframes initialPop {
    0% { opacity: 0; transform: translateX(20px); }
    10% { opacity: 1; transform: translateX(0); }
    90% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(20px); }
} */

/* Mobile adjustments */
@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 55px;
        height: 55px;
    }
    
    /* Hide the text entirely on mobile to avoid overlapping content */
    .whatsapp-text {
        display: none;
    }
}



/* ==============================

   BODY & PAGE BACKGROUND

   ============================== */

body.dark-theme {

    background-color: #0A0C14;

    background-image:

        radial-gradient(ellipse at 20% 0%, rgba(232, 0, 29, 0.08) 0%, transparent 50%),

        radial-gradient(ellipse at 80% 0%, rgba(0, 64, 193, 0.10) 0%, transparent 50%),

        radial-gradient(ellipse at 50% 100%, rgba(0, 64, 193, 0.06) 0%, transparent 60%);

}



/* ==============================

   NAVBAR — Red & Blue gradient edge

   ============================== */

.custom-navbar {

    background: rgba(0, 20, 70, 0.96) !important;

    border-bottom: 2px solid transparent !important;

    border-image: linear-gradient(90deg, var(--puppy-red), var(--lyons-blue), var(--puppy-red)) 1 !important;

    box-shadow: 0 4px 30px rgba(232, 0, 29, 0.15), 0 2px 10px rgba(0, 64, 193, 0.15);

}



.custom-navbar.navbar-scrolled {

    background: rgba(0, 15, 55, 0.98) !important;

    box-shadow: 0 8px 32px rgba(232, 0, 29, 0.2), 0 4px 16px rgba(0, 64, 193, 0.2);

}



/* Nav links — vivid rainbow stays, just make sure colors pop */

/* .nav-link {

    background: linear-gradient(124deg, rgba(232, 0, 29, 0.18), rgba(0, 64, 193, 0.18), rgba(232, 0, 29, 0.18)) !important;

    border: 1px solid rgba(255, 255, 255, 0.18) !important;

} */



.nav-link:hover {

     background: var(--grad-red-blue)!important;

    box-shadow: 0 8px 25px rgba(232, 0, 29, 0.4), 0 0 20px rgba(0, 64, 193, 0.3) !important;

    color: var(--text-light) !important;

}



/* GET IN TOUCH button */

.btn-primary-solid {

    background: var(--grad-red-blue) !important;

    color: #fff !important;

    border: none !important;

    box-shadow: 0 4px 15px rgba(232, 0, 27, 0.068) !important;

}



.btn-primary-solid::before {

    background: var(--lyons-blue) !important;

}



.btn-primary-solid:hover {

    color: #fff !important;

    box-shadow: 0 8px 25px rgba(232, 0, 27, 0.164) !important;

}



/* Light theme nav */

.custom-navbar.theme-light {

    background: rgba(255, 255, 255, 0.97) !important;

    border-bottom: 2px solid transparent !important;

    border-image: linear-gradient(90deg, var(--puppy-red), var(--lyons-blue)) 1 !important;

}



.custom-navbar.theme-light .btn-primary-solid {

    background: var(--grad-red-blue) !important;

    color: #fff !important;

}



/* ==============================

   HERO SECTION — Vivid & Energetic

   ============================== */

.hero-modern-wrapper {

    background: linear-gradient(160deg, #fff5f5 0%, #f0f4ff 40%, #fff8f0 100%) !important;

    position: relative;

    overflow: hidden;

}



.hero-modern-wrapper::before {

    content: '';

    position: absolute;

    top: -100px;

    right: -100px;

    width: 600px;

    height: 600px;

    background: radial-gradient(circle, rgba(232, 0, 29, 0.08) 0%, transparent 70%);

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

}



.hero-modern-wrapper::after {

    content: '';

    position: absolute;

    bottom: -100px;

    left: -100px;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, rgba(0, 64, 193, 0.08) 0%, transparent 70%);

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

}



.hero-badge-pill {

    background: linear-gradient(135deg, #fff0f2 0%, #f0f5ff 100%) !important;

    border: 1.5px solid rgba(232, 0, 29, 0.2) !important;

    box-shadow: 0 4px 15px rgba(232, 0, 29, 0.08) !important;

}



.badge-icon {

    background: linear-gradient(135deg, rgba(232, 0, 29, 0.15) 0%, rgba(0, 64, 193, 0.15) 100%) !important;

}



.text-accent-blue {

    background: var(--grad-blue-red) !important;

    -webkit-background-clip: text !important;

    -webkit-text-fill-color: transparent !important;

    background-clip: text !important;

}



/* Hero CTA buttons */

.btn-primary-solid.dark-variant {

    background: var(--grad-red-blue) !important;

    color: #fff !important;

    border: none !important;

    box-shadow: 0 6px 20px rgba(232, 0, 29, 0.3) !important;

}



.btn-primary-solid.dark-variant:hover {

    box-shadow: 0 12px 30px rgba(232, 0, 29, 0.4), 0 0 20px rgba(0, 64, 193, 0.3) !important;

    transform: scale(1.08) translateY(-2px) !important;

}



.btn-primary-solid.dark-variant::before {

    background: var(--lyons-blue-dark) !important;

}



.btn-outline-dark {

    background: transparent !important;

    color: var(--lyons-blue) !important;

    border: 2px solid var(--lyons-blue) !important;

}



.btn-outline-dark:hover {

    background: var(--lyons-blue) !important;

    color: #fff !important;

    box-shadow: 0 8px 20px rgba(0, 64, 193, 0.3) !important;

}



/* Hero floating cards */

.floating-card {

    border: 2px solid rgba(232, 0, 29, 0.15) !important;

    box-shadow: 0 20px 40px rgba(232, 0, 29, 0.1), 0 5px 15px rgba(0, 64, 193, 0.08) !important;

}



.icon-circle-green {

    background: linear-gradient(135deg, rgba(232, 0, 29, 0.12) 0%, rgba(0, 64, 193, 0.12) 100%) !important;

    color: var(--puppy-red) !important;

}



/* Hero graphic shapes */

.shape-yellow-arch {

    background: linear-gradient(160deg, #FFD600 0%, var(--accent-orange) 100%) !important;

    box-shadow: 0 20px 60px rgba(255, 214, 0, 0.3);

}



.shape-blue-circle {

    background: linear-gradient(135deg, var(--lyons-blue) 0%, #7B2FFF 100%) !important;

    box-shadow: 0 10px 40px rgba(0, 64, 193, 0.4) !important;

    animation: pulseBlueBall 4s ease-in-out infinite;

}



@keyframes pulseBlueBall {



    0%,

    100% {

        transform: scale(1);

        box-shadow: 0 10px 40px rgba(0, 64, 193, 0.4);

    }



    50% {

        transform: scale(1.08);

        box-shadow: 0 20px 60px rgba(0, 64, 193, 0.6);

    }

}



.shape-pink-star path {

    fill: var(--puppy-red) !important;

}



.avatar-more {

    background: var(--grad-red-blue) !important;

}



/* ==============================

   MARQUEE SECTION — Vibrant Dark

   ============================== */

.marquee-section {

    background: linear-gradient(135deg, #0A0C14 0%, #0A1A40 50%, #1A0008 100%) !important;

    border-color: rgba(232, 0, 29, 0.2) !important;

    border-top: 2px solid transparent !important;

    border-bottom: 2px solid transparent !important;

    position: relative;

}



.marquee-section::before {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg, rgba(232, 0, 29, 0.05), rgba(0, 64, 193, 0.08), rgba(232, 0, 29, 0.05));

    pointer-events: none;

}



.marquee-item {

    color: rgba(255, 255, 255, 0.9) !important;

}



.marquee-icon {

    color: var(--puppy-red) !important;

    filter: drop-shadow(0 0 6px rgba(232, 0, 29, 0.5));

}



/* ==============================

   COURSE EXPLORER — Bright & Bold

   ============================== */

.course-explorer {

    background: linear-gradient(160deg, #f8f9ff 0%, #fff5f5 50%, #f0f7ff 100%) !important;

}



/* Section eyebrow badges */

.badge-dark-outline {

    background: linear-gradient(135deg, rgba(232, 0, 29, 0.07) 0%, rgba(0, 64, 193, 0.07) 100%) !important;

    color: var(--lyons-blue) !important;

    border: 1.5px solid var(--lyons-blue) !important;

}



/* Section titles in light sections */

.course-explorer .section-title {

    color: #0A0C14 !important;

}



/* Sticky sidebar tab buttons — colorful */

.sidebar-filter-btn {

    transition: all 0.3s ease !important;

}



/* Course cards — punch them up */

.course-card {

    border: 1.5px solid rgba(0, 64, 193, 0.08) !important;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04) !important;

    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.course-card:hover {

    border-color: var(--puppy-red) !important;

    box-shadow: 0 20px 50px rgba(232, 0, 29, 0.12), 0 0 0 3px rgba(232, 0, 29, 0.06) !important;

    transform: translateY(-10px) !important;

}



.badge-It-courses {

    background: linear-gradient(135deg, rgba(0, 64, 193, 0.12) 0%, rgba(0, 201, 177, 0.12) 100%) !important;

    color: var(--lyons-blue) !important;

    border: 1px solid rgba(0, 64, 193, 0.2);

}



.badge-Management-courses {

    background: linear-gradient(135deg, rgba(255, 107, 43, 0.12) 0%, rgba(255, 214, 0, 0.12) 100%) !important;

    color: #d45500 !important;

    border: 1px solid rgba(255, 107, 43, 0.2);

}



.badge-Accounting-courses {

    background: linear-gradient(135deg, rgba(0, 64, 193, 0.12) 0%, rgba(123, 47, 255, 0.12) 100%) !important;

    color: #6600cc !important;

    border: 1px solid rgba(123, 47, 255, 0.2);

}



.course-features svg {

    stroke: var(--puppy-red) !important;

}



.link-arrow {

    color: var(--lyons-blue) !important;

    font-weight: 700 !important;

}



.link-arrow:hover {

    color: var(--puppy-red) !important;

}



/* Text accent for light sections */

.text-accent {

    color: var(--puppy-red) !important;

}



/* ==============================

   HIGHLIGHT VIDEO SECTION

   ============================== */

.highlight-video-section {

    background: linear-gradient(160deg, #fff5f5 0%, #f0f4ff 100%) !important;

}



.video-card-wrapper {

    outline: 4px solid transparent;

    outline-offset: -4px;

    background: linear-gradient(#fff, #fff) padding-box,

        var(--grad-red-blue) border-box;

    border: 4px solid transparent;

    box-shadow: 0 40px 80px rgba(232, 0, 29, 0.15), 0 0 60px rgba(0, 64, 193, 0.1) !important;

}



.video-overlay {

    background: linear-gradient(135deg, rgba(0, 20, 70, 0.7) 0%, rgba(100, 0, 20, 0.4) 50%, rgba(0, 20, 70, 0.85) 100%) !important;

}



.highlight-video-section .btn-primary-solid {

    background: var(--grad-red-blue) !important;

    color: #fff !important;

    border: none !important;

    box-shadow: 0 8px 25px rgba(232, 0, 29, 0.4) !important;

}



/* ==============================

   PLACEMENT / PARTNERS SECTION — Dark & Vivid

   ============================== */

.placement-section {

    background: linear-gradient(160deg, #0A0C14 0%, #001040 50%, #1A0008 100%) !important;

    position: relative;

}



.placement-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background:

        radial-gradient(ellipse at 20% 50%, rgba(232, 0, 29, 0.06) 0%, transparent 60%),

        radial-gradient(ellipse at 80% 50%, rgba(0, 64, 193, 0.08) 0%, transparent 60%);

    pointer-events: none;

}



.metric-pill {

    border-color: var(--puppy-red) !important;

    color: var(--puppy-red) !important;

    background: rgba(232, 0, 29, 0.08) !important;

    box-shadow: 0 0 20px rgba(232, 0, 29, 0.2);

}



.marquee-logo:hover {

    color: var(--puppy-red) !important;

    text-shadow: 0 0 20px rgba(232, 0, 29, 0.4);

}



/* ==============================

   BENTO AUDIENCE SECTION — Electric Dark

   ============================== */

.bento-audience-section {

    background: linear-gradient(160deg, #f5f7ff 0%, #fff0f2 100%) !important;

}



.bento-wrapper {

    background: linear-gradient(160deg, #0A0C14 0%, #001040 40%, #1A0008 100%) !important;

    border: 2px solid rgba(232, 0, 29, 0.15) !important;

    box-shadow: 0 30px 80px rgba(232, 0, 29, 0.1), 0 10px 30px rgba(0, 64, 193, 0.1) !important;

}



.bento-card {

    background: rgba(255, 255, 255, 0.04) !important;

    border: 1px solid rgba(255, 255, 255, 0.08) !important;

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;

}



.bento-card:hover {

    background: rgba(232, 0, 29, 0.08) !important;

    border-color: var(--puppy-red) !important;

    box-shadow: 0 10px 30px rgba(232, 0, 29, 0.2), 0 0 0 1px rgba(232, 0, 29, 0.15) !important;

    transform: translateY(-5px) !important;

}



.bento-icon-wrapper {

    background: linear-gradient(135deg, rgba(232, 0, 29, 0.2), rgba(0, 64, 193, 0.2)) !important;

    border: 1px solid rgba(232, 0, 29, 0.3) !important;

    color: #fff !important;

}



.bento-card:hover .bento-icon-wrapper {

    background: var(--grad-red-blue) !important;

    border-color: transparent !important;

    box-shadow: 0 8px 20px rgba(232, 0, 29, 0.4) !important;

}

.bento-card ul {
    list-style: none;
    /* remove default bullets */
    padding-left: 0;
}

.bento-card ul li {
    position: relative;
    padding-left: 18px;
    /* space for symbol */
}

.bento-card ul li::before {
    content: "✦";
    position: absolute;
    left: 0;
    color: currentColor;
    /* or set your own color */
}

/* ==============================

   IMPACT / STATS SECTION — Electric White

   ============================== */

.impact-section {

      background: linear-gradient(160deg, #d0d8eb 0%, #fff5f5 50%, #fbd8d8 100%) !important;

}



.section-title strong {

    background: var(--grad-red-blue) !important;

    -webkit-background-clip: text !important;

    -webkit-text-fill-color: transparent !important;

    background-clip: text !important;

}



.stat-item:hover {

    transform: translateY(-8px) !important;

}



/* Particle sphere gets a red-blue tint overlay */

.canvas-container-large {

    filter: hue-rotate(0deg) saturate(1.2);

}



/* ==============================

   CORE PROGRAMS / ACCORDION SECTION

   ============================== */

.core-programs-section {

    background: linear-gradient(160deg, #0A0C14 0%, #001040 50%, #1A0008 100%) !important;

}

.custom-accordion .accordion-item {

    border-top: 1px solid rgba(232, 0, 29, 0.15) !important;

}



.custom-accordion .accordion-item:last-child {

    border-bottom: 1px solid rgba(232, 0, 29, 0.15) !important;

}



.custom-accordion .accordion-button:hover .acc-title {

    color: var(--puppy-red) !important;

}



.custom-accordion .accordion-button:hover .acc-icon {

    border-color: var(--puppy-red) !important;

    background: rgba(232, 0, 29, 0.1) !important;

    transform: rotate(90deg) !important;

    box-shadow: 0 0 15px rgba(232, 0, 29, 0.3) !important;

}



.custom-accordion .accordion-button:hover .acc-line-h,

.custom-accordion .accordion-button:hover .acc-line-v {

    background-color: var(--puppy-red) !important;

}



.custom-accordion .accordion-button:not(.collapsed) .acc-icon {

    background: rgba(232, 0, 29, 0.15) !important;

    border-color: var(--puppy-red) !important;

    box-shadow: 0 0 15px rgba(232, 0, 29, 0.25) !important;

}



.course-list-item:hover {

    color: var(--puppy-red) !important;

}



.course-list-item::before {

    background: var(--grad-red-blue) !important;

    box-shadow: 0 0 10px rgba(232, 0, 29, 0.5) !important;

}



/* ==============================

   CONTACT SECTION — Bright & Fresh

   ============================== */

.contact-section {

       background: linear-gradient(160deg, #d0d8eb 0%, #fff5f5 50%, #fbd8d8 100%) !important;

}



.ambient-glow {

    background: radial-gradient(circle, rgba(232, 0, 29, 0.06) 0%, rgba(0, 64, 193, 0.06) 50%, transparent 70%) !important;

}



.badge-modern {

    background: linear-gradient(135deg, #fff0f2, #f0f5ff) !important;

    color: var(--lyons-blue) !important;

    border: 1.5px solid rgba(0, 64, 193, 0.2) !important;

}



.contact-bento-card {

    border: 1.5px solid rgba(0, 0, 0, 0.05) !important;

    transition: all 0.4s ease !important;

}



a.contact-bento-card:hover {

    border-color: var(--puppy-red) !important;

    box-shadow: 0 20px 40px rgba(232, 0, 29, 0.1), 0 0 0 3px rgba(232, 0, 29, 0.05) !important;

    transform: translateY(-5px) !important;

}



.contact-icon-modern {

    background: linear-gradient(135deg, rgba(232, 0, 29, 0.08), rgba(0, 64, 193, 0.08)) !important;

    color: var(--lyons-blue) !important;

}



a.contact-bento-card:hover .contact-icon-modern {

    background: var(--grad-red-blue) !important;

    color: #fff !important;

}



.modern-input:focus {

    border-color: var(--lyons-blue) !important;

    box-shadow: 0 0 0 4px rgba(0, 64, 193, 0.12) !important;

}



.modern-btn-submit {

    background: var(--grad-red-blue) !important;

    color: #fff !important;

    box-shadow: 0 6px 20px rgba(232, 0, 29, 0.3) !important;

}



.modern-btn-submit:hover {

    background: var(--lyons-blue-dark) !important;

    box-shadow: 0 12px 30px rgba(232, 0, 29, 0.4) !important;

    transform: translateY(-3px) !important;

}



.social-pill:hover {

    background: var(--grad-red-blue) !important;

    border-color: transparent !important;

    color: #fff !important;

}



.live-dot-indicator,

.live-dot-indicator::after {

    background-color: var(--puppy-red) !important;

}



/* ==============================

   GALLERY / TESTIMONIALS — Dark Vivid

   ============================== */

.v-gallery-section,

.reviews-section {

    background: linear-gradient(160deg, #0A0C14 0%, #001040 50%, #1A0008 100%) !important;

}



/* ==============================

   FOOTER — Intense Dark with Color

   ============================== */

.footer-section {

    background: linear-gradient(160deg, #0A0C14 0%, #001040 40%, #100008 100%) !important;

    border-top: 3px solid transparent !important;

    border-image: var(--grad-red-blue) 1 !important;

}



.footer-links a:hover {

    color: var(--puppy-red) !important;

}



.btn-footer-cta {

    background: var(--grad-red-blue) !important;

    color: #fff !important;

    box-shadow: 0 15px 40px rgba(232, 0, 29, 0.3) !important;

}



.btn-footer-cta:hover {

    background: var(--lyons-blue) !important;

    box-shadow: 0 20px 50px rgba(0, 64, 193, 0.4) !important;

}



.footer-social-icon:hover {

    color: var(--puppy-red) !important;

    filter: drop-shadow(0 0 8px rgba(232, 0, 29, 0.4));

}



.footer-map-wrapper:hover {

    border-color: var(--puppy-red) !important;

    box-shadow: 0 0 20px rgba(232, 0, 29, 0.2);

}



/* Circuit layer colors — red/blue instead of green */

.layer-1 {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M10 10 L90 10 L90 90 L10 90 Z' stroke='rgba(232, 0, 29, 0.06)' stroke-width='0.5' fill='none'/%3E%3C/svg%3E") !important;

}



.layer-2 {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M0 50 L30 50 L40 30 L60 70 L70 50 L100 50' stroke='rgba(0, 64, 193, 0.10)' stroke-width='1' fill='none'/%3E%3Ccircle cx='40' cy='30' r='1' fill='%230040C1'/%3E%3C/svg%3E") !important;

}



.layer-3 {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='10' cy='10' r='1' fill='rgba(232, 0, 29, 0.2)'/%3E%3Cpath d='M10 10 L50 10 L50 50' stroke='rgba(0, 64, 193, 0.06)' stroke-width='0.5' fill='none'/%3E%3C/svg%3E") !important;

}



/* ==============================

   MEGA MENU — Rich Blue  

   ============================== */

.mega-menu {

    background: linear-gradient(160deg, rgba(0, 20, 80, 0.99) 0%, rgba(10, 0, 40, 0.99) 100%) !important;

    border-top: 2px solid var(--puppy-red) !important;

    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(232, 0, 29, 0.1) !important;

}



.mega-menu-title::after {

    background: var(--grad-red-blue) !important;

    width: 40px !important;

    height: 2px !important;

}



.mega-menu-list a:hover {

    color: var(--puppy-red) !important;

}



/* ==============================

   ANIMATED SLIDE-UP (page load feel)

   ============================== */

.animated-slide-up {

    animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;

}



.animated-slide-up.delay-1 {

    animation-delay: 0.15s;

}



.animated-slide-up.delay-2 {

    animation-delay: 0.3s;

}



.animated-slide-up.delay-3 {

    animation-delay: 0.45s;

}



@keyframes slideUpFade {

    from {

        opacity: 0;

        transform: translateY(40px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* ==============================

   COLORFUL FLOATING DECORATIVE ORBS

   Added behind certain sections

   ============================== */

.hero-modern-wrapper .hero-bg-blob {

    background: radial-gradient(circle, rgba(232, 0, 29, 0.06) 0%, rgba(0, 64, 193, 0.04) 50%, transparent 70%) !important;

    width: 700px !important;

    height: 700px !important;

}



/* ==============================

   PUPPY RED LIVE DOT 

   ============================== */

.live-dot {

    background-color: var(--accent-white) !important;

    box-shadow: 0 0 0 0 var(--accent-white) !important;

}



/* ==============================

   SECTION BORDERS — colorful accents

   ============================== */

.border-bottom.border-dark {

    border-color: rgba(232, 0, 29, 0.2) !important;

}



/* ==============================

   ACCORDION TITLE ACTIVE COLOR

   ============================== */

.custom-accordion .accordion-button:not(.collapsed) .acc-title {

    background: var(--grad-red-blue);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



/* ==============================

   PARTICLE SPHERE — red-blue palette

   ============================== */

/* The sphere color is controlled in script.js (rgba(1, 44, 92, ...))

   We handle it via CSS filter for a quick color shift */

#particleSphere {

    filter: hue-rotate(200deg) saturate(1.5) !important;

}



/* ==============================

   MOBILE RESPONSIVE

   ============================== */

@media (max-width: 768px) {

    .hero-modern-wrapper {

        background: linear-gradient(160deg, #fff5f5 0%, #f0f4ff 100%) !important;

    }



    .bento-wrapper {

        border-radius: 20px !important;

    }

}



/* ==============================

   COLORFUL SECTION ACCENT BORDERS

   ============================== */

.highlight-video-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 3px;

    background: var(--grad-red-blue);

    z-index: 10;

}



.placement-section::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 2px;

    background: var(--grad-blue-red);

}



/* ==============================

   TESTIMONIAL STARS / RATINGS

   ============================== */

.text-warning {

    color: var(--accent-yellow) !important;

}



/* Review cards hover accent */

.review-card:hover,

.testimonial-card:hover {

    border-color: var(--puppy-red) !important;

    box-shadow: 0 15px 40px rgba(232, 0, 29, 0.1) !important;

}



/* ==============================

   GALLERY HOVER OVERLAY

   ============================== */

.v-gallery-btn,

.play-btn,

.play-trigger-btn {

    background: var(--grad-red-blue) !important;

    color: #fff !important;

    box-shadow: 0 8px 25px rgba(232, 0, 29, 0.35) !important;

}



/* ==============================

   ALL LINK-ARROWS

   ============================== */

a.link-arrow {

    font-weight: 700 !important;

}



/* ==============================

   SCROLLBAR — red/blue themed

   ============================== */

::-webkit-scrollbar {

    width: 6px;

}



::-webkit-scrollbar-track {

    background: #0A0C14;

}



::-webkit-scrollbar-thumb {

    background: linear-gradient(180deg, var(--puppy-red), var(--lyons-blue));

    border-radius: 3px;

}



::-webkit-scrollbar-thumb:hover {

    background: var(--puppy-red);

}



/* ==============================

   WHATSAPP BUTTON — keep green but add red ring

   ============================== */

.whatsapp-float {

    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.35), 0 0 0 3px rgba(232, 0, 29, 0.15) !important;

}



/* ==============================

   CURSOR — red-blue glow

   ============================== */

.custom-cursor {

    border-color: var(--puppy-red) !important;

    box-shadow: 0 0 10px rgba(232, 0, 29, 0.3);

}



.custom-cursor.cursor-hover {

    background-color: var(--lyons-blue) !important;

    border-color: var(--lyons-blue) !important;

    box-shadow: 0 0 20px rgba(0, 64, 193, 0.5) !important;

}



















































/* ============================================================

   ABOUT US PAGE STYLISH STUDENT JOURNEY ROADMAP

   ============================================================ */



.journey-container {

    padding: 2rem 0;

}



/* --- Connecting Line & Traveling Light Beam --- */

.journey-animated-line {

    position: absolute;

    top: 75px;

    /* Perfect alignment with the center of the orbs inside the cards */

    left: 12%;

    right: 12%;

    height: 3px;

    background: rgba(0, 64, 193, 0.1);

    border-radius: 4px;

    z-index: 1;

    overflow: hidden;

}



.traveling-dot {

    position: absolute;

    top: 0;

    left: 0;

    width: 30%;

    height: 100%;

    /* Creates a shooting light effect using the brand red */

    background: linear-gradient(90deg, transparent, var(--puppy-red), transparent);

    animation: travelDot 3s infinite ease-in-out;

}



@keyframes travelDot {

    0% {

        left: -30%;

    }



    100% {

        left: 100%;

    }

}



/* --- Journey Cards --- */

.journey-card {

    background: #ffffff;

    border: 1px solid rgba(0, 0, 0, 0.308);

    border-radius: 24px;

    padding: 2.5rem 1.5rem;

    height: 100%;

    position: relative;

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);

    z-index: 2;

}



.journey-card:hover {

    transform: translateY(-12px);

    box-shadow: 0 20px 40px rgba(0, 64, 193, 0.08);

    border-color: rgba(0, 64, 193, 0.15);

}



/* Specific styling for the final goal card */

.journey-card.final-step:hover {

    box-shadow: 0 20px 40px rgba(232, 0, 29, 0.1);

    border-color: rgba(232, 0, 29, 0.15);

}



/* --- Step Orbs --- */

.step-orb {

    width: 70px;

    height: 70px;

    margin: 0 auto;

    background: #fff;

    border: 3px solid var(--lyons-blue);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

    font-weight: 800;

    color: var(--lyons-blue);

    box-shadow: 0 0 0 6px rgba(0, 64, 193, 0.05);

    /* Soft outer ring */

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

    position: relative;

}



/* Intense pulse effect when the card is hovered */

.journey-card:hover .step-orb {

    background: var(--lyons-blue);

    color: #fff;

    box-shadow: 0 0 0 10px rgba(0, 64, 193, 0.1), 0 10px 20px rgba(0, 64, 193, 0.3);

    transform: scale(1.1);

}



/* --- Final Step Orb Overrides --- */

.step-orb-final {

    border-color: var(--puppy-red);

    color: var(--puppy-red);

    box-shadow: 0 0 0 6px rgba(232, 0, 29, 0.05);

}



.journey-card.final-step:hover .step-orb-final {

    background: var(--grad-red-blue);

    color: #fff;

    border-color: transparent;

    box-shadow: 0 0 0 10px rgba(232, 0, 29, 0.1), 0 10px 20px rgba(232, 0, 29, 0.3);

    transform: scale(1.15);

    /* Slightly bigger pop for the final achievement */

}













































































/* ============================================================

   DYNAMIC COURSE LISTING PAGE (IT Courses Template)

   ============================================================ */



/* Base Page Styling */

.listing-page-body {

    background-color: #05060A;

    /* Extremely deep, rich black */

    color: #F5F7FA;

    font-family: 'Inter', sans-serif;

    -webkit-font-smoothing: antialiased;

}



/* --- Listing Hero Section --- */

.category-hero {

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    background: linear-gradient(180deg, #0A0D14 0%, #05060A 100%);

    overflow: hidden;

}

.category-hero P{
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(245, 247, 250, 0.65);
    max-width: 600px;
}
.category-hero ul li{
    font-size: 14px;
    line-height: 1.6;
    color: rgba(245, 247, 250, 0.65);
    max-width: 600px;
}

.min-vh-50 {

    min-height: 50vh;

}



.tech-grid-bg {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),

        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);

    background-size: 40px 40px;

    mask-image: radial-gradient(circle at center, black 0%, transparent 80%);

    -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 80%);

    z-index: 0;

}



.hero-glow-orb {

    position: absolute;

    top: -50px;

    left: 10%;

    /* Shifted left to match the text */

    width: 600px;

    height: 400px;

    background: radial-gradient(ellipse at center, rgba(0, 64, 193, 0.15) 0%, transparent 70%);

    pointer-events: none;

    z-index: 1;

}



/* --- Right Side Hero Image & Animated Shape --- */

.hero-image-wrapper {

    position: relative;

    width: 100%;

    height: 400px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.animated-shape-bg {

    position: absolute;

    width: 320px;

    height: 320px;

    /* Uses brand gradient to tie into the overall system */

    background: linear-gradient(135deg, var(--puppy-red, #E8001D) 0%, var(--lyons-blue, #0040C1) 100%);

    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

    animation: morphShape 8s ease-in-out infinite;

    z-index: 1;

    opacity: 0.65;

    filter: blur(8px);

}



.hero-png-img {

    position: relative;

    z-index: 2;

    max-width: 90%;

    max-height: 110%;

    object-fit: contain;

    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));

    animation: floatImg 6s ease-in-out infinite;

}



@keyframes morphShape {

    0% {

        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

    }



    33% {

        border-radius: 70% 30% 40% 60% / 60% 40% 60% 40%;

    }



    66% {

        border-radius: 40% 60% 70% 30% / 40% 50% 50% 60%;

    }



    100% {

        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

    }

}



@keyframes floatImg {



    0%,

    100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(-15px);

    }

}



/* --- Typography --- */

.letter-spacing-tight {

    letter-spacing: -1.5px;

}



.text-gradient-primary {

    background: linear-gradient(135deg, #FFFFFF 0%, #a1b5d8 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.text-muted-light {

    color: rgba(255, 255, 255, 0.6);

}



/* --- Breadcrumb --- */

.custom-breadcrumb {

    padding: 6px 16px;

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50px;

    list-style: none;

    font-size: 0.85rem;

    font-weight: 500;

}



.custom-breadcrumb .breadcrumb-item a {

    color: rgba(255, 255, 255, 0.5);

    text-decoration: none;

    transition: color 0.3s ease;

}



.custom-breadcrumb .breadcrumb-item a:hover {

    color: #FFFFFF;

}



.custom-breadcrumb .breadcrumb-item.active {

    color: var(--puppy-red, #E8001D);

}



.custom-breadcrumb .breadcrumb-item+.breadcrumb-item::before {

    content: "›";

    color: rgba(255, 255, 255, 0.3);

}



/* --- Premium Course Card Grid --- */

.premium-course-card {

    display: flex;

    flex-direction: column;

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid rgba(255, 255, 255, 0.05);

    border-radius: 20px;

    overflow: hidden;

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

}



.premium-course-card:hover {

    transform: translateY(-8px);

    background: rgba(255, 255, 255, 0.04);

    border-color: rgba(232, 0, 29, 0.4);

    /* Subtle red glow border */

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(232, 0, 29, 0.1);

}



/* Card Image System */

.card-img-wrapper {

    position: relative;

    height: 220px;

    overflow: hidden;

    background: #111;

}



.card-img-wrapper img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0.7;

    transition: transform 0.6s ease, opacity 0.6s ease;

}



.premium-course-card:hover .card-img-wrapper img {

    transform: scale(1.08);

    opacity: 0.9;

}



.img-overlay-gradient {

    position: absolute;

    inset: 0;

    background: linear-gradient(to top, rgba(5, 6, 10, 1) 0%, rgba(5, 6, 10, 0) 100%);

    pointer-events: none;

}



/* Dynamic Tech Badges */

.tech-badge {

    position: absolute;

    top: 1rem;

    left: 1rem;

    padding: 4px 12px;

    border-radius: 6px;

    font-size: 0.75rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    z-index: 2;

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

}



.badge-ai {

    background: rgba(0, 64, 193, 0.8);

    color: #fff;

    border: 1px solid rgba(255, 255, 255, 0.2);

}



.badge-dev {

    background: rgba(232, 0, 29, 0.8);

    color: #fff;

    border: 1px solid rgba(255, 255, 255, 0.2);

}



.badge-sec {

    background: rgba(0, 201, 177, 0.8);

    color: #fff;

    border: 1px solid rgba(255, 255, 255, 0.2);

}



.badge-mkt {

    background: rgba(255, 214, 0, 0.8);

    color: #000;

    border: 1px solid rgba(255, 255, 255, 0.2);

}



/* Card Content */

.card-content {

    padding: 1.5rem;

}



.course-title {

    font-size: 1.25rem;

    font-weight: 600;

    color: #FFFFFF;

    margin-bottom: 0;

    transition: color 0.3s ease;

}



.premium-course-card:hover .course-title {

    color: var(--puppy-red, #E8001D);

}



.course-desc {

    font-size: 0.9rem;

    color: rgba(255, 255, 255, 0.5);

    line-height: 1.5;

}



/* Card Footer Meta */

.border-top-dark {

    border-top: 1px solid rgba(255, 255, 255, 0.08);

}



.action-text {

    font-size: 0.9rem;

    font-weight: 600;

    color: var(--lyons-blue, #4a8cff);

    /* Lightened for dark mode contrast */

    display: flex;

    align-items: center;

    transition: color 0.3s ease;

}



.action-text svg {

    margin-left: 6px;

    transition: transform 0.3s ease;

}



.premium-course-card:hover .action-text {

    color: var(--puppy-red, #E8001D);

}



.premium-course-card:hover .action-text svg {

    transform: translateX(4px);

}



/* Bottom CTA Button */

.btn-premium-cta {

    background: #FFFFFF;

    color: #05060A;

    padding: 12px 32px;

    border-radius: 50px;

    font-weight: 700;

    font-size: 1rem;

    transition: all 0.3s ease;

    text-decoration: none;

    display: inline-block;

}



.btn-premium-cta:hover {

    background: var(--puppy-red, #E8001D);

    color: #FFFFFF;

    box-shadow: 0 10px 25px rgba(232, 0, 29, 0.3);

}



































































/* ============================================================

   ARTIFICIAL INTELLIGENCE - COURSE DETAIL PAGE

   ============================================================ */



.course-detail-body {

    background-color: #030408;

    /* Extremely deep, tech-focused black */

}



/* --- Cinematic Course Hero --- */

.course-editorial-hero {

    height: 85vh;

    min-height: 600px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    overflow: hidden;

}



.hero-bg-image {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center 20%;

    z-index: 1;

    filter: grayscale(20%) brightness(0.8);

    transform: scale(1.05);

    animation: slowPan 20s linear infinite alternate;

}



@keyframes slowPan {

    0% {

        transform: scale(1.05) translate(0, 0);

    }



    100% {

        transform: scale(1.1) translate(-2%, 2%);

    }

}



.hero-gradient-overlay {

    position: absolute;

    inset: 0;

    /* Heavy dark gradient from left and bottom to ensure text readability */

    background: linear-gradient(90deg, rgba(3, 4, 8, 1) 0%, rgba(3, 4, 8, 0.8) 40%, rgba(3, 4, 8, 0.2) 100%),

        linear-gradient(0deg, rgba(3, 4, 8, 1) 0%, rgba(3, 4, 8, 0) 50%);

    z-index: 2;

}



/* Meta Pills */

.course-meta-pill {

    display: inline-flex;

    align-items: center;

    background: rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    color: rgba(255, 255, 255, 0.8);

    padding: 6px 14px;

    border-radius: 50px;

    font-size: 0.85rem;

    font-weight: 500;

}



/* --- Tech Stack Pills (Bento Grid) --- */

.bento-card strong {

    background: rgba(0, 64, 193, 0.1);

    border: 1px solid rgba(0, 64, 193, 0.3);

    color: #a1b5d8;

    padding: 6px 12px;

    border-radius: 8px;

    font-size: 0.85rem;

    font-weight: 600;

    transition: all 0.3s ease;

}



.bento-card strong:hover {

    background: rgba(232, 0, 29, 0.1);

    border-color: rgba(232, 0, 29, 0.4);

    color: var(--puppy-red);

    transform: translateY(-2px);

}



/* --- Glowing Vertical Learning Roadmap --- */

.bg-dark-alt {

    background-color: #06080E;

}



/* ============================================================

   UPGRADED GLOWING ROADMAP (Circuit Style)

   ============================================================ */



.roadmap-timeline-wrapper {

    position: relative;

    max-width: 1100px;

    /* Slightly wider to accommodate larger cards */

    margin: 0 auto;

    padding: 2rem 0;

}



/* The Main Vertical Line */

.roadmap-glow-line {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 50%;

    width: 2px;

    background: rgba(255, 255, 255, 0.08);

    transform: translateX(-50%);

    overflow: hidden;

}



.roadmap-traveling-dot {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 150px;

    background: linear-gradient(180deg, transparent, var(--lyons-blue), var(--puppy-red), transparent);

    animation: travelDown 4s infinite linear;

    box-shadow: 0 0 20px var(--puppy-red);

}



@keyframes travelDown {

    0% {

        top: -150px;

    }



    100% {

        top: 100%;

    }

}



.roadmap-item {

    position: relative;

    width: 50%;

    padding: 2rem 4rem;

    perspective: 1000px;

    /* For 3D tilt effect */

}



.roadmap-item.left {

    left: 0;

    text-align: right;

}



.roadmap-item.right {

    left: 50%;

    text-align: left;

}



/* Horizontal Connecting Lines */

.roadmap-connector {

    position: absolute;

    top: 70px;

    /* Align with the center of the dot */

    width: 4rem;

    height: 2px;

    background: rgba(255, 255, 255, 0.1);

    z-index: 1;

    transition: all 0.4s ease;

}



.roadmap-item.left .roadmap-connector {

    right: 0;

}



.roadmap-item.right .roadmap-connector {

    left: 0;

}



.roadmap-item:hover .roadmap-connector {

    background: var(--lyons-blue);

    box-shadow: 0 0 10px var(--lyons-blue);

}



.roadmap-item:hover .final-connector {

    background: var(--puppy-red);

    box-shadow: 0 0 10px var(--puppy-red);

}



/* The Number Dots */

.roadmap-dot {

    position: absolute;

    top: 50px;

    width: 44px;

    height: 44px;

    border-radius: 50%;

    background-color: #0A0C14;

    border: 2px solid rgba(255, 255, 255, 0.2);

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 800;

    font-size: 1.2rem;

    color: rgba(255, 255, 255, 0.6);

    z-index: 3;

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.5);

    /* Cut out background line */

}



.roadmap-item.left .roadmap-dot {

    right: -22px;

}



.roadmap-item.right .roadmap-dot {

    left: -22px;

}



/* Pulse Animation on Dots */

.roadmap-item:hover .roadmap-dot {

    border-color: var(--lyons-blue);

    color: #ffffff;

    background: rgba(0, 64, 193, 0.3);

    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 64, 193, 0.6);

    transform: scale(1.15);

}



.roadmap-item:hover .final-dot {

    border-color: var(--puppy-red);

    background: var(--grad-red-blue);

    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.5), 0 0 30px rgba(232, 0, 29, 0.6);

}



/* The Content Cards */

.roadmap-content {

    position: relative;

    padding: 2.5rem;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid rgba(255, 255, 255, 0.05);

    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);

    text-align: left;

    /* Keep text left aligned even on the left side */

    overflow: hidden;

    z-index: 2;

}



/* Abstract Background Watermarks */

.card-bg-watermark {

    position: absolute;

    bottom: -20%;

    right: -10%;

    width: 200px;

    height: 200px;

    color: rgba(255, 255, 255, 0.02);

    /* Extremely faint */

    z-index: 0;

    transition: all 0.8s ease;

    pointer-events: none;

}



.card-bg-watermark svg {

    width: 100%;

    height: 100%;

}



/* Card Hover States */

.roadmap-item:hover .roadmap-content {

    transform: translateY(-8px) scale(1.02);

    border-color: rgba(0, 64, 193, 0.4);

    background: rgba(255, 255, 255, 0.04);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 64, 193, 0.1);

}



.roadmap-item:hover .final-card {

    border-color: rgba(232, 0, 29, 0.5);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 30px rgba(232, 0, 29, 0.1);

}



/* Rotate and colorize the watermark slightly on hover */

.roadmap-item:hover .card-bg-watermark {

    color: rgba(0, 64, 193, 0.08);

    transform: rotate(-15deg) scale(1.1);

}



.roadmap-item:hover .final-card .card-bg-watermark {

    color: rgba(232, 0, 29, 0.08);

}



.border-white-10 {

    border-color: rgba(255, 255, 255, 0.1) !important;

}



/* Responsive Adjustments */

@media (max-width: 768px) {

    .roadmap-glow-line {

        left: 30px;

    }



    .roadmap-item {

        width: 100%;

        left: 0 !important;

        padding: 1.5rem 1rem 1.5rem 60px;

    }



    .roadmap-connector {

        top: 45px;

        width: 30px;

    }



    .roadmap-item.left .roadmap-connector,

    .roadmap-item.right .roadmap-connector {

        left: 30px;

        right: auto;

    }



    .roadmap-item .roadmap-dot {

        top: 25px;

        left: 8px !important;

        right: auto !important;

    }



    .roadmap-content {

        padding: 1.5rem;

    }

    .course-editorial-hero {

        height: 85vh;

        min-height: 1300px;

        border-bottom: 1px solid rgba(255, 255, 255, 0.05);

        overflow: hidden;

    }
}



/* --- Syllabus Accordion Overrides --- */

.syllabus-accordion .accordion-item {

    border-color: rgba(255, 255, 255, 0.05) !important;

}



.module-duration {

    font-size: 0.85rem;

    font-weight: 600;

    color: rgba(255, 255, 255, 0.4);

    background: rgba(255, 255, 255, 0.03);

    padding: 4px 12px;

    border-radius: 50px;

    border: 1px solid rgba(255, 255, 255, 0.05);

}



/* --- Bottom CTA --- */

.bottom-cta-editorial {

    background-color: #030408;

    border-top: 1px solid rgba(255, 255, 255, 0.05);

}


/* --- Hover State Executions --- */
.gallery-mosaic-item:hover img {
    transform: scale(1.08);
    filter: brightness(1);
}

.gallery-mosaic-item:hover .mosaic-overlay {
    opacity: 1;
    transform: translateY(0);
}

.gallery-mosaic-item:hover .mosaic-category,
.gallery-mosaic-item:hover .mosaic-title {
    transform: translateY(0);
    opacity: 1;
}

.gallery-mosaic-item:hover .mosaic-icon {
    transform: scale(1) rotate(0);
    opacity: 1;
    background: var(--grad-red-blue);
    border-color: transparent;
}

/* --- Lightbox Modal --- */
.lightbox-modal {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    background: rgba(5, 6, 10, 0.9);
}

.lightbox-target-img {
    max-height: 90vh;
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, 0.1);
}








/* ============================================================
   5-COLUMN UNIFORM GALLERY PAGE
   ============================================================ */

.gallery-page-body {
    background-color: #05060A;
}

.gallery-hero {
    min-height: 40vh;
    padding-bottom: 2rem;
    background: linear-gradient(180deg, #0A0D14 0%, #05060A 100%);
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- Filter Pills --- */
.filter-pill {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.filter-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
}

.filter-pill.active {
    background: var(--lyons-blue);
    color: #FFFFFF;
    border-color: var(--lyons-blue);
    box-shadow: 0 5px 20px rgba(0, 64, 193, 0.4);
}

/* --- Uniform 5-Column Grid --- */
.uniform-gallery-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    /* Space between images */
    width: 100%;
}

/* Base Image Thumbnail (Perfect Square) */
.gallery-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Forces the uniform square ratio */
    border-radius: 12px;
    overflow: hidden;
    background: #111;
    display: none;
    /* Hidden by default, JS handles visibility */
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* The actual image inside the square */
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Crops center to fill the 1:1 square without distortion */
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    filter: brightness(0.85);
}

/* Hover Glass Overlay */
/* --- Advanced Hover Glass Overlay --- */
.gallery-hover-glass {
    position: absolute;
    inset: 0;
    /* Gradient sweeps up from the bottom to ensure text readability */
    background: linear-gradient(to top, rgba(5, 6, 10, 0.95) 0%, rgba(0, 20, 70, 0.4) 50%, rgba(0, 20, 70, 0.1) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Pushes meta text to the bottom */
    padding: 1.25rem;
    opacity: 0;
    transition: all 0.4s ease;
    pointer-events: none;
}

/* Center Expand Icon */
.expand-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Bottom Event Meta Data */
.gallery-meta {
    transform: translateY(15px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
    /* Slight delay for cascading effect */
}

/* --- Hover State Triggers --- */
.gallery-item:hover img {
    transform: scale(1.1);
    filter: brightness(1);
}

.gallery-item:hover .gallery-hover-glass {
    opacity: 1;
}

.gallery-item:hover .expand-icon {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    background: var(--grad-red-blue);
    border-color: transparent;
}

.gallery-item:hover .gallery-meta {
    transform: translateY(0);
    opacity: 1;
}

/* Responsive Grid Adjustments */
@media (max-width: 1400px) {
    .uniform-gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

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

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

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

/* --- Lightbox Modal (Original Ratio Display) --- */
.lightbox-modal {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    background: rgba(5, 6, 10, 0.95);
}

/* This guarantees the image scales correctly without cropping */
.lightbox-target-img {
    width: auto;
    max-width: 95vw;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
    /* CRITICAL: Displays original aspect ratio */
    border-radius: 12px;
}





/* --- Custom Lightbox Close Button --- */
.custom-lightbox-close {
    position: fixed;
    top: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
    /* Ensures it sits above the image */
    cursor: none;
    /* Inherits your custom magnetic cursor */
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.custom-lightbox-close:hover {
    background: var(--puppy-red);
    /* Your brand red */
    color: #ffffff;
    border-color: transparent;
    transform: rotate(90deg) scale(1.1);
    /* Spin and pop effect */
    box-shadow: 0 10px 25px rgba(232, 0, 29, 0.4);
}

/* Ensure the modal dialog takes up the full screen properly */
.lightbox-modal .modal-dialog {
    max-width: 100%;
    margin: 0;
}

/* Modal Background Tuning */
.lightbox-modal {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(5, 6, 10, 0.95);
}

.lightbox-target-img {
    width: auto;
    max-width: 90vw;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
















/* --- Video Gallery Dark Glass Controls --- */
.v-gallery-btn.dark-glass-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px);
    box-shadow: none !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.v-gallery-btn.dark-glass-btn:hover {
    background: var(--puppy-red) !important;
    /* Glows red on hover */
    border-color: transparent !important;
    box-shadow: 0 10px 25px rgba(232, 0, 29, 0.4) !important;
    transform: scale(1.15) !important;
    /* Slight pop effect */
}































/* ============================================================
   DYNAMIC TESTIMONIAL GRID
   ============================================================ */

.glass-review-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

/* Large decorative quote mark in the background of each card */
.glass-review-card::before {
    content: '"';
    position: absolute;
    top: -20px;
    right: 20px;
    font-size: 10rem;
    font-family: Georgia, serif;
    color: rgba(255, 255, 255, 0.02);
    line-height: 1;
    pointer-events: none;
    transition: color 0.4s ease;
}

.glass-review-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(0, 64, 193, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 64, 193, 0.05);
}

.glass-review-card:hover::before {
    color: rgba(0, 64, 193, 0.05);
    /* Quote mark glows blue on hover */
}

.glass-review-card.active-glow:hover {
    border-color: rgba(232, 0, 29, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(232, 0, 29, 0.05);
}

.glass-review-card.active-glow:hover::before {
    color: rgba(232, 0, 29, 0.05);
    /* Quote mark glows red on hover */
}

.review-text {
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 300;
}

/* Avatar Borders */
.border-puppy-red {
    border: 2px solid var(--puppy-red);
}

.border-lyons-blue {
    border: 2px solid var(--lyons-blue);
}

.border-white-20 {
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.border-white-10 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}


.hero-description-wrapper ul {
list-style-type: none;
    text-align: left;     
    display: inline-block;
    padding-left: 20px;
    margin-top: 10px;
}

.hero-description-wrapper li {
    margin-bottom: 8px;
    list-style-type: disc;
}



/* --- Fade In Animation for Filtering --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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