.bg-video-wrap {
    position: relative !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    background-color: #000 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hero-video-slider {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.video-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s ease-in-out, visibility 1.2s;
    z-index: 1;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.video-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Targets video, img, and iframes to guarantee fullscreen stretch */
.video-slide video,
.video-slide img,
.video-slide iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    /* Force Viewport Width */
    height: 100vh !important;
    /* Force Viewport Height */
    object-fit: cover !important;
    transform: scale(1.05);
    transition: transform 10s linear;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
}

.video-slide.active video,
.video-slide.active img,
.video-slide.active iframe {
    transform: scale(1);
}

/* Overlay & Glassmorphism */
.hero-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%) !important;
    z-index: 3 !important;
    pointer-events: none;
}

.hero-content-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 4 !important;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);
    transform: translateY(30px);
    opacity: 0;
    animation: slideUpFade 1.5s ease 0.5s forwards;
    width: 100%;
}

/* Typography & Buttons */
.theme-gold {
    color: #d4af37 !important;
}

.tracking-widest {
    letter-spacing: 4px !important;
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
    line-height: 1.1 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.btn-gold {
    background: linear-gradient(45deg, #d4af37, #f3e5ab) !important;
    color: #000 !important;
    border: none !important;
}

.btn-gold:hover {
    background: linear-gradient(45deg, #f3e5ab, #d4af37) !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4) !important;
    transform: translateY(-2px);
}

.glass-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

.glass-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* Controls */
.glass-control {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease;
    width: 50px !important;
    height: 50px !important;
    cursor: pointer;
}

.glass-control:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: scale(1.1);
}

.hero-dots .dot {
    width: 12px !important;
    height: 12px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    margin: 0 8px !important;
    cursor: pointer;
    transition: all 0.4s ease;
    display: inline-block !important;
}

.hero-dots .dot.active {
    background: #d4af37 !important;
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

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


/* ... (existing styles) ... */
.flex-row-reverse .editorial-content {
    padding-left: 0;
    padding-right: 3rem;
}

@media (max-width: 991px) {
    .flex-row-reverse .editorial-content {
        padding-right: 0;
    }
}

@keyframes fadeUpIn {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

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

.animate-course {
    animation: fadeUpIn 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    opacity: 0;
}

.course-art-wrapper {
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.animate-course:hover .course-art-wrapper {
    transform: translateY(-8px) scale(1.02);
}

.editorial-content {
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.animate-course:hover .editorial-content {
    transform: translateX(10px);
}

.flex-row-reverse.animate-course:hover .editorial-content {
    transform: translateX(-10px);
}

/* --- Signature Menus Section Styles --- */
.signature-menus-section {
    background-color: transparent;
    padding: 80px 0;
    position: relative;
}

/* Top Floral Pattern Background */
.signature-menus-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-image: url("../images/floral-border.png");
    background-repeat: repeat-x;
    background-size: auto 100px;
    opacity: 0.9;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}

/* Bottom Floral Pattern Background (Flipped) */
.signature-menus-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-image: url("../images/floral-border.png");
    background-repeat: repeat-x;
    background-size: auto 100px;
    opacity: 0.9;
    transform: scaleY(-1);
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}

.signature-menus-section .auto-container {
    position: relative;
    z-index: 1;
}

.luxury-nav-tabs {
    border-bottom: 2px solid #e0d5c1;
    justify-content: center;
    margin-bottom: 4rem;
    border-top: none;
    border-left: none;
    border-right: none;
}

.luxury-nav-tabs .nav-item {
    margin-bottom: -2px;
}

.luxury-nav-tabs .nav-item .nav-link {
    font-family: var(--font-family-Philosopher, 'Philosopher', serif);
    color: #666;
    border: none;
    background: transparent;
    font-size: 1.15rem;
    padding: 12px 25px;
    position: relative;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.luxury-nav-tabs .nav-item .nav-link:hover {
    color: #c49a45;
}

.luxury-nav-tabs .nav-item .nav-link.active {
    color: #8b0000;
    font-weight: bold;
    background: transparent;
    border: none;
}

.luxury-nav-tabs .nav-item .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #8b0000;
}

/* ----- VARIANT 3.1: Enhanced Double-Arch Jharokha Style ----- */
.menu-item-card {
    background: linear-gradient(180deg, #ffffff 0%, #fef8f0 100%);
    border: 1px solid #eaddc7;
    /* Pronounced Arch Shape */
    border-radius: 100px 100px 10px 10px;
    padding: 50px 20px 30px 20px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.03);
    cursor: pointer;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Inner Jharokha Frame (Perfectly Traces the Arch) */
.menu-item-card::before {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    bottom: 8px;
    left: 8px;
    border: 1px solid rgba(196, 154, 69, 0.3);
    /* Subtle Gold */
    border-radius: 92px 92px 6px 6px;
    /* Inner Arch matches outer arch */
    transition: all 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

/* Deep Red bottom accent reveal on hover */
.menu-item-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #8b0000;
    transform: scaleX(0);
    transition: transform 0.4s ease;
    transform-origin: center;
}

/* Hover effect on Card */
.menu-item-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(139, 0, 0, 0.05), 0 5px 15px rgba(196, 154, 69, 0.08);
    border-color: #c49a45;
    background: linear-gradient(180deg, #ffffff 0%, #fffdfa 100%);
}

/* Inner frame gets solid and shrinks slightly on hover */
.menu-item-card:hover::before {
    border-color: rgba(196, 154, 69, 1);
    top: 6px;
    right: 6px;
    bottom: 6px;
    left: 6px;
}

.menu-item-card:hover::after {
    transform: scaleX(1);
}

/* Orange Flower Icon */
.card-icon {
    width: 45px;
    height: 45px;
    object-fit: contain;
    margin-bottom: 20px;
    opacity: 0.9;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2;
}

/* Float the icon up and add Golden Glow on hover */
.menu-item-card:hover .card-icon {
    transform: translateY(-6px) scale(1.1);
    opacity: 1;
    /* This gives the flower a glowing 'halo' effect */
    filter: drop-shadow(0 0 12px rgba(196, 154, 69, 0.7));
}

/* Card Title */
.menu-item-card h4 {
    font-family: var(--font-family-Philosopher, 'Philosopher', serif);
    font-size: 1.15rem;
    color: #2c2c2c;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    line-height: 1.5;
    position: relative;
    z-index: 2;
    font-weight: bold;
    transition: color 0.3s ease;
}

.menu-item-card:hover h4 {
    color: #8b0000;
    /* Deep Red */
}

/* Delicate dot separator */
.card-separator {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #c49a45;
    margin: 15px auto;
    transition: all 0.4s ease;
}

.menu-item-card:hover .card-separator {
    transform: scale(1.5);
    background-color: #8b0000;
}

/* Card Subtitle */
.menu-card-subtitle {
    font-size: 0.75rem;
    color: #9c9180;
    text-transform: uppercase;
    letter-spacing: 2px;
    z-index: 2;
    transition: color 0.3s ease;
    margin-top: auto;
    font-weight: 500;
}

.menu-item-card:hover .menu-card-subtitle {
    color: #c49a45;
    /* Turns gold on hover */
}

/* Responsive Overrides for Signature Menus Section */
.signature-menus-section {
    padding: 100px 0;
    overflow: hidden;
}

/* Mobile App-like Scrollable Tabs */
.luxury-nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(196, 154, 69, 0.3);
    /* Subtle gold line */
    justify-content: flex-start;
}

/* Center tabs on larger screens */
@media (min-width: 768px) {
    .luxury-nav-tabs {
        justify-content: center;
    }
}

/* Hide Scrollbar for a cleaner look */
.luxury-nav-tabs::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari and Opera */
}

.luxury-nav-tabs {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.luxury-nav-tabs .nav-item {
    white-space: nowrap;
}

.luxury-nav-tabs .nav-link {
    color: #333;
    font-weight: 500;
    padding: 10px 20px;
    border: none;
    background: transparent;
    transition: all 0.3s ease;
}

.luxury-nav-tabs .nav-link.active {
    color: #c49a45;
    /* Gold active state */
    border-bottom: 2px solid #c49a45;
    background: transparent;
}

/* Responsive Menu Cards */
.menu-item-card {
    background: #fff;
    padding: 25px 15px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    height: 100%;
    border: 1px solid #f4f4f4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.menu-item-card:hover {
    transform: translateY(-5px) !important;
    /* Force override for animation */
    box-shadow: 0 10px 25px rgba(255, 105, 180, 0.15);
    border-color: rgba(255, 105, 180, 0.5);
}

.menu-item-card .card-icon {
    max-width: 45px;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.menu-item-card:hover .card-icon {
    transform: scale(1.1);
}

.menu-item-card h4 {
    font-size: 1.15rem;
    margin-bottom: 10px;
    font-weight: 600;
    color: #222;
}

.card-separator {
    width: 40px;
    height: 2px;
    background: #c49a45;
    margin: 0 auto 10px auto;
}

.menu-card-subtitle {
    font-size: 0.85rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Adjustments for extra small devices (Mobile) */
@media (max-width: 575px) {
    .signature-menus-section {
        padding: 100px 0;
    }

    .title-box.centered h2 {
        font-size: 1.8rem;
    }

    .menu-item-card {
        padding: 20px 10px;
    }

    .menu-item-card h4 {
        font-size: 1.05rem;
    }

    .luxury-nav-tabs .nav-link {
        padding: 8px 15px;
        font-size: 0.9rem;
    }

    .bg-video-wrap {
        aspect-ratio: 4 / 3 !important; /* Slightly taller landscape for small phones */
    }
}

@media (max-width: 1024px) {
    .bg-video-wrap {
        height: auto !important;
        min-height: unset !important;
        aspect-ratio: 16 / 9 !important;
        margin-top:65px !important;
    }
    
    .video-slide video,
    .video-slide img,
    .video-slide iframe {
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* ── Per-Slide Text Overlay & Animations ── */
.hero-video-slider {
    z-index: 4 !important; /* Elevate slider above the old global overlay */
}

.hero-overlay {
    display: none !important; /* Hide old global overlay to use the new per-slide overlay */
}

/* Move the dark gradient overlay inside the slide so the text sits on top of it */
.video-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
    z-index: 2;
    pointer-events: none;
}

.slide-content-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 3 !important; /* Places the text above the dark gradient overlay */
    pointer-events: none;
}

.slide-content-wrapper > * {
    pointer-events: auto;
}

.hero-subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
}

.hero-desc {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
    line-height: 1.6;
}

/* ── 3D Z-Axis "Fly-In" Reveal Animation ── */
.slide-up-anim {
    opacity: 0;
    transform: scale(1.4); /* Starts larger, appearing closer to the user */
    filter: blur(4px); /* Adds a slight camera-focus effect as it flies in */
}

/* Trigger animation ONLY when the specific slide becomes active */
.video-slide.active .slide-up-anim {
    /* Smooth, decelerating curve so it lands softly on the page */
    animation: heroFlyIn 1.2s cubic-bezier(0.25, 1, 0.3, 1) forwards;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }

@keyframes heroFlyIn {
    0% {
        opacity: 0;
        transform: scale(1.4);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px);
    }
}

/* ── Mobile & Tablet Text Overlay Adjustments ── */
@media (max-width: 1024px) {
    .slide-content-wrapper .hero-desc {
        display: none !important;
    }

    .slide-content-wrapper .hero-title {
        font-size: clamp(1.4rem, 4vw, 2.5rem) !important;
        margin-bottom: 10px !important;
        line-height: 1.1 !important;
    }

    .slide-content-wrapper .hero-subtitle {
        font-size: 0.75rem !important;
        margin-bottom: 6px !important;
        letter-spacing: 2px !important;
    }

    .slide-content-wrapper .btn-gold {
        padding: 8px 16px !important;
        font-size: 0.75rem !important;
    }
    
    /* On smaller screens, reduce the initial scale slightly so it doesn't overflow bounds */
    @keyframes heroFlyIn {
        0% {
            opacity: 0;
            transform: scale(1.2);
            filter: blur(4px);
        }
        100% {
            opacity: 1;
            transform: scale(1);
            filter: blur(0px);
        }
    }
}

/* ── Extra Small Mobile Adjustments ── */
@media (max-width: 576px) {
    .slide-content-wrapper .hero-title {
        font-size: 1.25rem !important;
        margin-bottom: 6px !important;
    }
    
    .slide-content-wrapper .hero-subtitle {
        font-size: 0.65rem !important;
        margin-bottom: 4px !important;
    }
    
    .slide-content-wrapper .btn-gold {
        padding: 6px 12px !important;
        font-size: 0.65rem !important;
    }
}

.container h2, .container-fluid h2{
    text-transform: uppercase;
}

/* ── Section Floral Isolation Double Borders ── */
.floral-band-wrapper {
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); 
    position: relative;
    z-index: 5;
}

/* Forces the track to scroll horizontally, cropping cleanly at the screen edge */
.floral-section-divider {
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    overflow: hidden;
    white-space: nowrap;
}

.floral-section-divider.maroon-band { background-color: #8b0000; }
.floral-section-divider.blue-band { background-color: #273868; }

/* Sets the precise gaps on either side of the green SVG motif */
.floral-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 30px; 
    padding-right: 30px; 
}

/* Sizing constraints to keep it identical to the image */
.f-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.f-leaf {
    width: 18px;
    height: 18px;
}

@media (max-width:767px){
    .editorial-course-section{
        margin-top:1rem;
    }
}


/* --- Freebie Popup Modal Styles (Based on Login Theme) --- */
            #freebieModal .modal-content {
                background-color: #4D5A3A; /* Panel Green */
                color: #f4f4f4;
                border: none;
                border-radius: 4px;
                box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
                padding: 40px 30px;
                position: relative;
            }
            #freebieModal .corner {
                position: absolute;
                width: 50px;
                height: 50px;
                border: 8px solid #d4af37;
            }
            #freebieModal .corner-tl { top: 0px; left: 0px; border-right: none; border-bottom: none; }
            #freebieModal .corner-tr { top: 0px; right: 0px; border-left: none; border-bottom: none; }
            #freebieModal .corner-bl { bottom: 0px; left: 0px; border-right: none; border-top: none; }
            #freebieModal .corner-br { bottom: 0px; right: 0px; border-left: none; border-top: none; }
            
            #freebieModal .close-modal-btn {
                position: absolute;
                top: 15px;
                right: 15px;
                color: #d4af37;
                font-size: 1.5rem;
                background: transparent;
                border: none;
                cursor: pointer;
                z-index: 10;
                transition: transform 0.3s;
            }
            #freebieModal .close-modal-btn:hover { transform: scale(1.2); }

            #freebieModal .modal-subtitle {
                font-size: 0.7rem;
                letter-spacing: 2px;
                color: #d4af37;
                text-transform: uppercase;
                margin-bottom: 15px;
            }
            #freebieModal .modal-title {
                font-family: var(--font-family-Philosopher, 'Philosopher', serif);
                font-size: 1.5rem;
                line-height: 1.2;
                color: #fff;
            }
            
            #freebieModal .custom-input {
                background: transparent !important;
                border: none;
                border-bottom: 1px solid #2a4a41;
                border-radius: 0;
                color: #f4f4f4 !important;
                padding: 10px 0;
                font-size: 0.95rem;
                box-shadow: none !important;
                transition: all 0.3s;
            }
            #freebieModal .custom-input::placeholder {
                color: #849b94;
                font-style: italic;
                font-family: 'Philosopher', sans-serif;
            }
            #freebieModal .custom-input:focus { border-bottom-color: #d4af37; }
            
            #freebieModal .btn-gold {
                background-color: #d4af37;
                color: #0a1f1a;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 2px;
                border-radius: 0;
                padding: 14px 20px;
                font-size: 0.9rem;
                border: none;
                width: 100%;
                transition: all 0.3s;
            }
            #freebieModal .btn-gold:hover {
                background-color: #e8c85c;
                transform: translateY(-2px);
                box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
            }
            #freebieModal .spam-notice {
                font-size: 0.75rem;
                color: #849b94;
                margin-top: 15px;
                display: block;
            }
            .freebie-error {
                color: #ff6b6b;
                font-size: 0.8rem;
                margin-top: 5px;
                display: none;
            }


/* ====================================================
   Masterclass Promo & Phone Mockup Section
   ==================================================== */
.masterclass-promo-section {
    padding: 20px 0;
    position: relative;
    overflow: hidden;
}

.promo-label {
    color: var(--color-one);
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: inline-block;
    font-weight: 600;
}

.promo-title {
    font-family: var(--font-family-Philosopher, 'Philosopher', serif);
    color: #4D5A3A;
    line-height: 1.15;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-size: clamp(28px, 3vw, 42px);
}

.promo-desc {
    color: #6c757d;
    font-size: 1.25rem;
    max-width: 500px;
    margin-bottom: 15px;
}

/* Smartphone CSS Mockup */
.phone-mockup-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone-mockup {
    width: 290px;
    height: 590px;
    border: 12px solid #1a1a1a; /* Thick bezel */
    border-radius: 40px;
    position: relative;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.6), 
        0 0 0 2px #333, 
        inset 0 0 0 2px #000;
    background: #000;
    z-index: 2;
}

/* The Notch */
.phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 25px;
    background: #1a1a1a;
    border-radius: 0 0 15px 15px;
    z-index: 10;
}

.phone-screen {
    width: 100%;
    height: 100%;
    border-radius: 28px;
    overflow: hidden;
    position: relative;
    background: #000;
}

.phone-screen video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Screen Glare Effect */
.phone-mockup-glare {
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.05) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg);
    pointer-events: none;
    z-index: 10;
}

/* Soft gold glow behind the phone */
.phone-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(196, 154, 69, 0.3) 0%, rgba(0,0,0,0) 70%);
    z-index: 1;
    filter: blur(20px);
}

/* ====================================================
   Statistics / Counters Section
   ==================================================== */
.stats-counter-section {
    background-color: var(--color-two); /* Uses the secondary dark/theme background */
    padding: 20px 0;
    border-top: 1px solid rgba(196, 154, 69, 0.15);
    border-bottom: 1px solid rgba(196, 154, 69, 0.15);
}

.stat-block {
    text-align: center;
    padding: 20px 15px;
    position: relative;
}

/* Subtle separator lines between stats */
.stat-block:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background: rgba(196, 154, 69, 0.3);
}

.stat-number {
    font-family: var(--font-family-Philosopher, 'Philosopher', serif);
    font-size: 3.2rem;
    color: #d4af37; /* Theme Gold */
    line-height: 1;
    margin-bottom: 12px;
    text-shadow: 0 4px 10px rgba(212, 175, 55, 0.2);
}

.stat-text {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    opacity: 0.9;
}

/* ====================================================
   Responsive Breakpoints
   ==================================================== */
@media (max-width: 991px) {
    .promo-desc {
        margin-left: auto;
        margin-right: auto;
    }
    
    .stat-block:nth-child(2)::after { 
        display: none; /* Removes separator line between row 1 and 2 on tablets */
    }
    
    .stat-block { 
        margin-bottom: 30px; 
    }
    
    .masterclass-promo-section {
        padding: 30px 0;
    }
}

@media (max-width: 575px) {
    .stat-block::after { 
        display: none; /* Removes all separators on mobile stacked view */
    }
    
    .stat-block { 
        margin-bottom: 25px; 
        padding: 10px 15px;
    }
    
    .stat-number {
        font-size: 2.8rem;
    }
    
    .phone-mockup {
        width: 260px; /* Scales down mockup slightly for very small screens */
        height: 530px;
    }
}

.recaptcha-wrapper {
                overflow: hidden;
            }
            @media (max-width: 400px) {
                .recaptcha-wrapper .g-recaptcha {
                    transform: scale(0.85);
                    transform-origin: 0 0;
                }
            }

/* ====================================================
               Sticky CTA Bar Styles
               ==================================================== */
            
            /* Add padding to the body so the normal footer isn't hidden behind the sticky bar */
            body {
                padding-bottom: 70px; 
            }

            .sticky-cta-bar {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                background-color: #4D5A3A; /* Theme Dark with slight transparency */
                backdrop-filter: blur(10px);
                border-top: 2px solid #d4af37; /* Theme Gold */
                padding: 15px 0;
                z-index: 1040; /* High z-index to stay above page content but below modals */
                box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
                transition: transform 0.3s ease;
            }

            .sticky-cta-text {
                color: #ffffff;
                font-family: var(--font-family-Philosopher, 'Philosopher', serif);
                font-size: 1.3rem;
                letter-spacing: 1px;
                text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
            }

            .sticky-cta-btn {
                font-size: 0.85rem !important;
                padding: 12px 25px !important;
                font-weight: 700 !important;
                letter-spacing: 1px !important;
                white-space: normal; /* Allows text to wrap nicely on mobile */
                box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3) !important;
            }

            /* Mobile Responsiveness */
            @media (max-width: 991px) {
                body {
                    padding-bottom: 140px; /* Extra padding for stacked mobile view */
                }
                
                .sticky-cta-bar {
                    padding: 12px 0;
                }

                .sticky-cta-text {
                    font-size: 1.1rem;
                    margin-bottom: 8px !important;
                }

                .sticky-cta-btn {
                    font-size: 0.75rem !important;
                    padding: 10px 15px !important;
                    display: block;
                    width: 100%; /* Full width button on mobile */
                }
            }

/* ====================================================
               Get To Know Course - Image Grid Styles
               ==================================================== */
            .get-to-know-section {
                background: transparent; /* No background as requested */
            }

            .six-image-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 15px;
            }

            .grid-img-wrap {
                position: relative;
                aspect-ratio: 4 / 5; /* Creates a clean, uniform portrait crop for all images */
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
                border: 1px solid rgba(212, 175, 55, 0.2); /* Subtle Gold Border */
                transition: transform 0.4s ease, border-color 0.4s ease;
            }

            .grid-img-wrap img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.6s ease;
            }

            /* Hover Animation */
            .grid-img-wrap:hover {
                transform: translateY(-5px);
                border-color: #d4af37;
                box-shadow: 0 15px 30px rgba(212, 175, 55, 0.2);
            }

            .grid-img-wrap:hover img {
                transform: scale(1.08);
            }

            /* Responsive tweaks for smaller screens */
            @media (max-width: 991px) {
                .six-image-grid {
                    grid-template-columns: repeat(3, 1fr); 
                    gap: 10px;
                }
            }

            @media (max-width: 575px) {
                .six-image-grid {
                    grid-template-columns: repeat(2, 1fr); /* drops to 2 per row on small mobile */
                }
            }

/* ====================================================
   Vedang Shah Intro Card Section
   ==================================================== */
.vedang-intro-section {
    background-color: transparent; 
    padding: 60px 0;
    position: relative;
    z-index: 5;
}

.vedang-intro-card {
    background-color: var(--color-two); /* Theme dark background */
    border-radius: 24px;
    border: 1px solid rgba(196, 154, 69, 0.25); /* Subtle Gold Border */
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
    position: relative;
    /* overflow:hidden is CRUCIAL here so the full-height image respects the rounded corners */
    overflow: hidden; 
}

.intro-text-content {
    padding: 70px 40px 70px 80px;
    position: relative;
}

.intro-greeting {
    font-family: var(--font-family-Philosopher, 'Philosopher', serif);
    color: #fff; /* Theme Gold */
    font-size: 1.8rem;
    margin-bottom: 5px;
}

.intro-name {
    font-family: var(--font-family-Philosopher, 'Philosopher', serif);
    font-size: clamp(28px, 3vw, 42px);
    color: #c49a6c;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 5px;
}

.intro-desc {
    font-size: 1.15rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
}

/* ── The Faded Full-Height Image Setup ── */
.intro-image-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 45%; /* Increased width gives 'cover' more room, reducing the zoom effect */
    z-index: 1;
}

.img-fade-overlay {
    position: absolute;
    inset: 0;
    /* A slightly stronger, longer gradient to blend the wider image box */
    background: linear-gradient(to right, var(--color-two) 0%, var(--color-two) 10%, transparent 75%);
    z-index: 2;
    pointer-events: none;
}

.intro-img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: right 10%; /* Anchors to the right and slightly down from the top */
    opacity: 0.25; 
    mix-blend-mode: luminosity; 
    position: relative;
    z-index: 1;
}

/* ====================================================
   Mobile & Tablet Responsiveness
   ==================================================== */
@media (max-width: 991px) {
    .intro-text-content {
        padding: 50px 30px 20px 30px;
        text-align: center;
    }
    
    .intro-image-wrapper {
        position: relative;
        /* Reducing width prevents the extreme horizontal zoom on tablets */
        width: 75%; 
        height: 420px; 
        margin: -30px auto 0 auto; /* Centers the image block */
        margin-top: 1rem;
    }

    .img-fade-overlay {
        /* Fades Top, Left, and Right edges to blend perfectly into the card without harsh lines */
        background: 
            linear-gradient(to bottom, var(--color-two) 0%, transparent 35%),
            linear-gradient(to right, var(--color-two) 0%, transparent 15%, transparent 85%, var(--color-two) 100%);
    }

    .intro-img {
        /* Locks the focus exactly on the upper-middle section to keep the face beautifully visible */
        object-position: center 20% !important; 
    }
}

@media (max-width: 575px) {
    .vedang-intro-section {
        padding: 30px 0;
    }
    .intro-text-content {
        padding: 40px 20px 10px 20px;
    }
    /* .intro-name {
        font-size: 2.2rem;
    } */
    .intro-desc {
        font-size: 1.05rem;
    }
    .intro-image-wrapper {
        width: 100%; /* Phones are narrow enough that 100% width won't over-zoom */
        height: 350px;
    }
    .img-fade-overlay {
        /* Standard top fade for tiny mobile screens */
        background: linear-gradient(to bottom, var(--color-two) 0%, transparent 35%);
    }
    .intro-img {
        /* Slightly higher anchor for smaller phone screens */
        object-position: center 15% !important; 
    }
}

/* ====================================================
   Awards & Recognitions Infinite Slider
   ==================================================== */
.awards-slider-section {
    position: relative;
    overflow: hidden;
}

.awards-marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.awards-marquee-track {
    display: inline-flex;
    width: max-content;
    /* 30s is the speed. Adjust this lower for faster, higher for slower */
    animation: marqueeScroll 35s linear infinite; 
}

/* Hovering over the track pauses the animation (Only for devices with a mouse/cursor) */
@media (hover: hover) {
    .awards-marquee-container:hover .awards-marquee-track {
        animation-play-state: paused;
    }
}

@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); } /* Scrolls exactly half the track (Set 1) then perfectly resets */
}

.award-title{
    font-family: var(--font-family-Philosopher, 'Philosopher', serif);
    color: #4D5A3A;
    text-transform: uppercase;
    font-size: clamp(28px, 3vw, 42px);
}

/* ── Individual Award Cards (Perfect 1:1 Squares) ── */
.award-slider-item {
    position: relative;
    width: 320px; /* Base size on desktop */
    margin-right: 25px; /* Creates the gap between items */
    aspect-ratio: 1 / 1; /* Guarantees the box is a perfect square */
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(196, 154, 69, 0.15); 
    transition: transform 0.4s ease, border-color 0.4s ease;
    cursor: pointer;
    background-color: transparent; 
    flex-shrink: 0;
    white-space: normal; /* Fixes text wrapping inside the flex marquee */
}

/* Hover lift effect */
.award-slider-item:hover {
    transform: translateY(-8px);
    border-color: #d4af37; 
}

/* Because the container is 1:1, cover will fit 1:1 images perfectly with ZERO cropping */
.slider-img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.award-slider-item:hover .slider-img {
    transform: scale(1.08); 
}

.slider-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26,26,26, 0.95) 0%, rgba(26,26,26, 0.2) 60%, transparent 100%);
    z-index: 1;
    transition: background 0.4s ease;
}

.award-slider-item:hover .slider-overlay {
    background: linear-gradient(to top, rgba(26,26,26, 0.95) 0%, rgba(196,154,69, 0.3) 100%);
}

.slider-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 25px;
    z-index: 2;
}

.slider-icon {
    color: #d4af37;
    font-size: 24px;
    margin-bottom: 10px;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s ease;
}

.award-slider-item:hover .slider-icon {
    transform: translateY(0);
    opacity: 1; 
}

.slider-title {
    color: #fff;
    font-family: var(--font-family-Philosopher, 'Philosopher', serif);
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 5px;
    transition: color 0.3s ease;
}

.award-slider-item:hover .slider-title {
    color: #d4af37;
}

.slider-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .award-slider-item {
        width: 280px; /* Slightly smaller squares on tablet */
        margin-right: 20px;
    }
    .slider-content { padding: 20px; }
    .slider-title { font-size: 1.3rem; }
    
    .slider-icon {
        transform: translateY(0);
        opacity: 1; /* Always visible on touch devices */
        font-size: 20px;
    }
}

@media (max-width: 575px) {
    .award-slider-item {
        width: 250px; /* Scales down perfectly for mobile while keeping 1:1 */
        margin-right: 15px;
    }
    .awards-marquee-track {
        animation: marqueeScroll 25s linear infinite; /* Scrolls slightly faster on narrow phone screens */
    }
    .slider-title { font-size: 1.2rem; }
    .slider-desc { font-size: 0.75rem; }
}

/* ====================================================
   Course Curriculum Timeline
   ==================================================== */
.course-timeline-section {
    position: relative;
    overflow: hidden;
    padding: 30px 0;
}

.timeline-container {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 0;
}

.timeline-title{
    font-family: var(--font-family-Philosopher, 'Philosopher', serif);
    color: #4D5A3A;
    text-transform: uppercase;
    font-size: clamp(28px, 3vw, 42px);
}

/* Background Track */
.timeline-track {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateX(-50%);
    border-radius: 4px;
    z-index: 1;
}

/* Glowing Scroll Progress Line */
.timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: #d4af37; /* Theme Gold */
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.8), 0 0 30px rgba(212, 175, 55, 0.4);
    border-radius: 4px;
    transition: height 0.15s ease-out; /* Buttery smooth reverse scrub */
}

.timeline-row {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

/* Basic Item Properties */
.timeline-item {
    position: relative;
    width: 50%;
    padding: 20px 45px;
    opacity: 0.3; /* Faded out until scrolled into view */
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: translateY(30px);
}

.timeline-item.active {
    opacity: 1;
    transform: translateY(0);
}

.timeline-item.left-side {
    left: 0;
}

.timeline-item.right-side {
    left: 50%;
}

/* Number Nodes on the line */
.timeline-node {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background-color: #4D5A3A;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-Philosopher, 'Philosopher', serif);
    font-size: 1.2rem;
    font-weight: bold;
    z-index: 3;
    transition: all 0.4s ease;
}

.timeline-item.left-side .timeline-node { right: -22px; }
.timeline-item.right-side .timeline-node { left: -22px; }

/* Node Glow effect when active */
.timeline-item.active .timeline-node {
    border-color: #d4af37;
    background-color: #4D5A3A;
    color: #d4af37;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
    transform: translateY(-50%) scale(1.1);
}

/* Card Contents */
.timeline-content {
    background-color: var(--color-two);
    border: 1px solid rgba(196, 154, 69, 0.15);
    border-radius: 16px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.timeline-item.left-side .timeline-content {
    flex-direction: row-reverse;
    text-align: right;
}

.timeline-item.active .timeline-content {
    border-color: rgba(196, 154, 69, 0.5);
}

.timeline-item:hover .timeline-content {
    transform: translateY(-5px);
    border-color: #d4af37;
    box-shadow: 0 10px 30px rgba(0,0,0, 0.5);
}

/* Perfect 1:1 Image Settings */
.timeline-img-wrap {
    width: 110px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1; /* Guarantees a perfect square box */
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.timeline-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Centers and perfectly crops odd-sized images without distortion */
    object-position: center;
    transition: transform 0.5s ease;
}

.timeline-item:hover .timeline-img {
    transform: scale(1.1);
}

.timeline-text {
    font-size: 1.15rem;
    color: #fff;
    margin: 0;
    line-height: 1.4;
    font-family: var(--font-family-Philosopher, 'Philosopher', serif);
}


/* ====================================================
   Tablet & Mobile Responsiveness (Left Line, Standard Stack)
   ==================================================== */
@media (max-width: 991px) {
    .timeline-track {
        left: 30px;
        transform: none;
    }

    .timeline-row {
        display: flex;
        flex-direction: column;
        padding-left: 70px;
    }

    .timeline-item {
        width: 100%;
        left: 0 !important;
        padding: 0 0 30px 0 !important;
    }

    .timeline-node {
        left: -62px !important;
        right: auto !important;
        top: 50% !important;
    }

    .timeline-item.left-side .timeline-content,
    .timeline-item.right-side .timeline-content {
        flex-direction: row;
        text-align: left;
    }

    .timeline-img-wrap {
        width: 110px; /* Good size for tablets */
    }
    
    .timeline-text {
        font-size: 1.1rem;
    }
}

/* Minor adjustments for very small phone screens */
@media (max-width: 575px) {
    .timeline-img-wrap {
        width: 80px;
    }
    
    .timeline-text {
        font-size: 1rem;
    }
}

.timeline-cta-card {
    background-color: var(--color-two); /* Dark secondary theme background */
    border: 1px solid rgba(196, 154, 69, 0.25); /* Subtle Gold Border */
    border-radius: 24px;
    padding: 60px 40px;
    max-width: 850px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

@media (max-width: 767px) {
    .timeline-cta-card {
        padding: 40px 20px;
        border-radius: 20px;
    }
}

/* ====================================================
   Target Audience Section (Infinite Dual-Marquee)
   ==================================================== */
.target-audience-infinite {
    background-color: var(--color-two); /* Dark theme background */
    padding: 40px 0;
    overflow: hidden; /* Prevents horizontal scrollbar */
    position: relative;
}

.target-audience-title{
    font-family: var(--font-family-Philosopher, 'Philosopher', serif);
    line-height: 1.15;
    text-transform: uppercase;
    font-size: clamp(28px, 3vw, 42px);
}

.audience-marquee-wrapper {
    position: relative;
    width: 100%;
    /* Creates a cinematic fade out on the left and right edges */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.audience-track {
    display: flex;
    width: max-content;
    gap: 25px; /* Space between pills */
}

/* Pause the animation if the user hovers over the track to read it */
.audience-track:hover {
    animation-play-state: paused !important;
}

/* Track 1 moves left constantly */
.track-left {
    animation: scrollLeft 45s linear infinite;
}

/* Track 2 moves right constantly */
.track-right {
    /* Notice we start it slightly offset so the items don't perfectly align with row 1, making it look organic */
    animation: scrollRight 40s linear infinite;
}

@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Exactly half the width (resets seamlessly because of duplicated items) */
}

@keyframes scrollRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* ── The "Pill" Design (Not a Card) ── */
.audience-pill {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 16px 35px;
    border-radius: 50px; /* Makes it a pill shape instead of a box */
    background: transparent;
    border: 1px solid rgba(196, 154, 69, 0.4); /* Subtle theme gold border */
    transition: all 0.4s ease;
    cursor: default;
    white-space: nowrap; /* Prevents text from stacking */
}

/* Glowing Hover Invert Effect */
.audience-pill:hover {
    background: #d4af37; /* Theme Gold Background */
    border-color: #d4af37;
}

.pill-icon {
    font-size: 20px;
    color: #d4af37;
    transition: color 0.4s ease;
}

.pill-text {
    font-family: var(--font-family-Philosopher, 'Philosopher', serif);
    font-size: 1.25rem;
    color: #fff;
    letter-spacing: 0.5px;
    transition: color 0.4s ease;
}

/* Change text and icon to dark color when hovered (for contrast against gold) */
.audience-pill:hover .pill-icon,
.audience-pill:hover .pill-text {
    color: var(--color-one);
}


/* ====================================================
   Mobile & Tablet Adjustments
   ==================================================== */
@media (max-width: 991px) {
    .audience-pill {
        padding: 14px 25px;
    }
    .pill-text {
        font-size: 1.15rem;
    }
}

@media (max-width: 575px) {
    .target-audience-infinite {
        padding: 60px 0;
    }
    .audience-marquee-wrapper {
        /* Shorten the fade mask slightly for narrow screens */
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    }
    .audience-track {
        gap: 15px;
    }
    .audience-pill {
        padding: 12px 20px;
        gap: 10px;
    }
    .pill-icon {
        font-size: 16px;
    }
    .pill-text {
        font-size: 1rem;
    }
}

/* ====================================================
   Our Mission Section (Compact Glassmorphism)
   ==================================================== */
.our-mission-section {
    background-color: var(--color-one); 
    position: relative;
    overflow: hidden;
}

.mission-content-wrapper {
    position: relative;
    padding: 30px 0; /* Drastically reduced to prevent image stretching */
}

/* ── The Left-Anchored Clear Image ── */
.mission-bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 55%; /* Keeps it contained to the left */
    z-index: 1;
}

.mission-fade-overlay {
    position: absolute;
    inset: 0;
    /* Extremely soft fade, just enough to blend the right edge into the dark background */
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 65%, var(--color-one) 100%);
    z-index: 2;
    pointer-events: none;
}

.mission-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0.65; /* High visibility, no maroon tint */
    z-index: 1;
}

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

/* ── The Floating Frosted Glass Card ── */
.mission-glass-card {
    background: rgba(26, 26, 26, 0.65); /* Slightly darker to contrast against the brighter image */
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(196, 154, 69, 0.25); 
    border-radius: 16px; /* Tighter, more compact corners */
    padding: 40px 40px; /* Reduced padding from 60px 50px */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    position: relative;
}

/* Decorative quote mark */
.mission-glass-card::before {
    content: '"';
    position: absolute;
    top: 10px;
    right: 30px;
    font-family: var(--font-family-Philosopher, 'Philosopher', serif);
    font-size: 120px; /* Scaled down */
    color: rgba(196, 154, 69, 0.12); 
    line-height: 1;
    pointer-events: none;
}

.mission-title {
    font-family: var(--font-family-Philosopher, 'Philosopher', serif);
    font-size: clamp(2.2rem, 3.5vw, 3.2rem); /* Scaled down */
    color: #fff;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mission-text {
    font-size: 1.05rem; /* Scaled down slightly */
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}

/* ── Bottom Highlights inside the Card ── */
.border-top-gold {
    border-top: 1px dashed rgba(196, 154, 69, 0.3);
}

.stat-highlight {
    font-family: var(--font-family-Philosopher, 'Philosopher', serif);
    color: #d4af37;
    font-size: 1.8rem; /* Scaled down */
    margin-bottom: 5px;
}

.stat-label {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
    opacity: 0.85;
}

/* ====================================================
   Mobile & Tablet Responsiveness
   ==================================================== */
@media (max-width: 991px) {
    .mission-content-wrapper {
        padding: 50px 0;
    }
    
    .mission-bg-wrapper {
        width: 100%;
        height: 500px; /* Significantly increased height to show more image */
    }
    
    .mission-fade-overlay {
        background: linear-gradient(to bottom, transparent 0%, transparent 60%, var(--color-one) 100%);
    }
    
    .mission-bg-img {
        opacity: 0.6; /* Keeps it bright and visible */
        object-position: center top; /* Anchors focus to the top/middle */
    }
    
    .mission-glass-card {
        /* Pushed down drastically to expose 380px of pure image before the card starts */
        margin-top: 380px; 
        padding: 40px 30px;
    }
    
    .mission-glass-card::before {
        font-size: 90px;
        right: 20px;
    }
}

@media (max-width: 575px) {
    .mission-content-wrapper {
        padding: 30px 0;
    }
    
    .mission-bg-wrapper {
        height: 380px; /* Large, generous height for mobile */
    }
    
    .mission-glass-card {
        /* Exposes 280px of pure image before the glass card overlaps the bottom 100px */
        margin-top: 280px; 
        padding: 30px 20px;
    }
    
    .mission-title {
        font-size: 2rem;
    }
    
    .mission-text {
        font-size: 0.95rem;
    }
    
    .stat-highlight {
        font-size: 1.6rem;
    }
}

/* ====================================================
   VIP Membership Ticket Layout
   ==================================================== */
.membership-details-section {
    background-color: transparent; /* No background as requested */
    padding: 80px 0;
    position: relative;
    z-index: 5;
}

.membership-ticket-wrapper {
    background: rgba(26, 26, 26, 0.4); /* Extremely subtle frosted glass to ensure text readability */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(196, 154, 69, 0.3); /* Theme Gold border */
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.membership-ticket-wrapper:hover {
    border-color: rgba(196, 154, 69, 0.7);
    transform: translateY(-5px);
}

/* Creates the "Ticket Cutout" holes on top and bottom of the divider */
.membership-ticket-wrapper::before,
.membership-ticket-wrapper::after {
    content: '';
    position: absolute;
    left: 41.66667%; /* Aligns perfectly with the col-lg-5 grid split */
    width: 40px;
    height: 40px;
    background-color: var(--color-one); /* Matches dark page background to look like a hole */
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 2;
    border: 1px solid rgba(196, 154, 69, 0.3);
}

.membership-ticket-wrapper::before {
    top: -20px; /* Top hole */
}

.membership-ticket-wrapper::after {
    bottom: -20px; /* Bottom hole */
}

/* Left Side: Pricing */
.ticket-left {
    padding: 60px 50px;
    border-right: 2px dashed rgba(196, 154, 69, 0.3); /* The perforated ticket edge */
}

/* Right Side: Features */
.ticket-right {
    padding: 60px 50px;
}

.membership-title {
    font-family: var(--font-family-Philosopher, 'Philosopher', serif);
    font-size: clamp(2rem, 3vw, 2.6rem);
    color: #fff;
    line-height: 1.2;
    margin-bottom: 10px;
}

.price-block .currency {
    font-size: 1.6rem;
    color: #d4af37;
    vertical-align: top;
    font-weight: 600;
}

.price-block .amount {
    font-family: var(--font-family-Philosopher, 'Philosopher', serif);
    font-size: 4.5rem;
    color: #d4af37;
    line-height: 1;
    text-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
}

.badge-gold {
    display: inline-block;
    background: linear-gradient(45deg, #d4af37, #f3e5ab);
    color: #000;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 0.85rem;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.particulars-title {
    font-family: var(--font-family-Philosopher, 'Philosopher', serif);
    color: #d4af37;
    font-size: 1.8rem;
    margin-bottom: 30px;
}

.premium-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.premium-features-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 22px;
    color: rgba(255, 255, 255, 0.85); /* Proper theme font color */
    font-size: 1.1rem;
    line-height: 1.6;
}

.premium-features-list li:last-child {
    margin-bottom: 0;
}

.feature-icon {
    color: #d4af37;
    font-size: 1.2rem;
    margin-top: 5px;
    margin-right: 18px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.feature-text strong {
    color: #fff;
    font-weight: 600;
}

/* ── Membership Ticket Updates ── */
.one-time-fee-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
}

/* Enhancing badge-gold to act as a clickable interactive button */
a.badge-gold.register-btn {
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-block;
}

a.badge-gold.register-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
    color: #0a1f1a; /* Keeps the text dark on hover for contrast */
}

/* ====================================================
   Mobile & Tablet Responsiveness
   ==================================================== */
@media (max-width: 991px) {
    .membership-ticket-wrapper::before,
    .membership-ticket-wrapper::after {
        display: none; /* Hide the holes when stacked vertically */
    }
    
    .ticket-left {
        border-right: none;
        border-bottom: 2px dashed rgba(196, 154, 69, 0.3); /* Move perforation to the bottom */
        padding: 50px 40px;
    }
    
    .ticket-right {
        padding: 50px 40px;
    }
    
    .price-block .amount {
        font-size: 4rem;
    }
}

@media (max-width: 575px) {
    .ticket-left, .ticket-right {
        padding: 40px 20px;
    }
    
    .price-block .amount {
        font-size: 3.2rem;
    }
    
    .premium-features-list li {
        font-size: 1rem;
    }
}

/* ====================================================
   FAQ Section (Transparent Accordion & Bug Fixes)
   ==================================================== */
.faq-section {
    background-color: transparent; /* No background */
    position: relative;
    overflow: hidden;
}

.luxury-accordion .card {
    background-color: var(--color-one); /* Forces transparent background */
    border: 1px solid rgba(196, 154, 69, 0.3); /* Subtle gold border */
    border-radius: 12px !important; 
    margin-bottom: 15px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.luxury-accordion .card:hover {
    border-color: rgba(196, 154, 69, 0.7);
}

.luxury-accordion .card-header {
    background-color: transparent;
    border-bottom: none;
    padding: 0;
}

/* FIX FOR THE BLUE FOCUS/CLICK BOX BUG */
.luxury-accordion .btn-link,
.luxury-accordion .btn-link:focus,
.luxury-accordion .btn-link:active,
.luxury-accordion .btn-link:focus-visible {
    color: #fff;
    font-family: var(--font-family-Philosopher, 'Philosopher', serif);
    font-size: 1.3rem;
    font-weight: 500;
    width: 100%;
    padding: 22px 25px;
    text-decoration: none !important; /* Overrides bootstrap underline */
    outline: none !important; /* Removes blue outline */
    box-shadow: none !important; /* Removes blue glow */
    position: relative;
    padding-right: 50px; 
    transition: color 0.3s ease;
    white-space: normal;
    text-align: left;
    background-color: transparent !important;
}

.luxury-accordion .btn-link:hover {
    color: #d4af37;
}

/* Custom +/- Icon Animation */
.luxury-accordion .toggle-icon {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
}

.luxury-accordion .toggle-icon::before,
.luxury-accordion .toggle-icon::after {
    content: '';
    position: absolute;
    background-color: #d4af37;
    transition: transform 0.3s ease;
}

.luxury-accordion .toggle-icon::before {
    top: 7px;
    left: 0;
    width: 16px;
    height: 2px;
}

.luxury-accordion .toggle-icon::after {
    top: 0;
    left: 7px;
    width: 2px;
    height: 16px;
}

/* When OPEN (Not Collapsed): Make it a Minus sign & add dashed border */
.luxury-accordion .btn-link:not(.collapsed) .toggle-icon::after {
    transform: rotate(90deg) scale(0);
}

.luxury-accordion .btn-link:not(.collapsed) {
    color: #d4af37;
    border-bottom: 1px dashed rgba(196, 154, 69, 0.4);
}

.luxury-accordion .card-body {
    padding: 25px;
    color: rgba(255, 255, 255, 0.85); /* Proper text color */
    font-size: 1.05rem;
    line-height: 1.7;
    background-color: transparent !important; /* No dark inner background */
}

/* ── FAQ Contact Banner & Instagram Card ─ */
.faq-contact-banner {
    background: var(--color-one); /* Changed from dark gradient to transparent */
    border: 1px dashed rgba(196, 154, 69, 0.4); /* Gold dashed border */
    border-radius: 16px;
    padding: 40px;
}

.contact-banner-title {
    font-family: var(--font-family-Philosopher, 'Philosopher', serif);
    font-size: 2rem;
    color: #fff;
    margin-bottom: 15px;
}

.contact-banner-desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.15rem;
    line-height: 1.5;
}

.contact-banner-desc a {
    text-decoration: none;
    transition: color 0.3s ease;
}
.contact-banner-desc a:hover {
    color: #fff;
}

/* Instagram Floating Thumbnail Card */
.insta-profile-card {
    display: flex;
    align-items: center;
    background: var(--color-one);
    padding: 15px 20px;
    border-radius: 50px;
    border: 1px solid rgba(196, 154, 69, 0.4);
    text-decoration: none !important;
    transition: transform 0.3s ease, border-color 0.3s ease;
    width: 100%;
    max-width: 320px;
}

.insta-profile-card:hover {
    transform: translateY(-5px);
    border-color: #d4af37;
}

.insta-dp {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #d4af37;
    padding: 2px;
}

.insta-dp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.insta-info {
    margin-left: 15px;
    display: flex;
    flex-direction: column;
}

.insta-name {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
}

.insta-handle {
    color: #d4af37;
    font-size: 0.8rem;
    margin-top: 2px;
}

.insta-arrow {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.3s ease;
}

.insta-profile-card:hover .insta-arrow {
    color: #d4af37;
}

/* ====================================================
   Mobile & Tablet Responsiveness
   ==================================================== */
@media (max-width: 767px) {
    .luxury-accordion .btn-link {
        font-size: 1.15rem;
        padding: 18px 20px;
        padding-right: 40px;
    }
    
    .luxury-accordion .card-body {
        padding: 20px;
        font-size: 0.95rem;
    }
    
    .faq-contact-banner {
        padding: 30px 20px;
    }
    
    .contact-banner-title {
        font-size: 1.6rem;
    }
    
    .contact-banner-desc {
        font-size: 1rem;
    }
}

/* ====================================================
   Course Modules Accordion (Editorial Section)
   ==================================================== */
.course-module-accordion .module-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(196, 154, 69, 0.3); /* Subtle gold divider */
    border-radius: 0;
}

.course-module-accordion .module-card:last-child {
    border-bottom: none;
}

.course-module-accordion .module-header {
    padding: 0;
}

.course-module-accordion .module-btn {
    color: #333;
    font-weight: 600;
    font-size: 16px;
    padding: 14px 0;
    text-decoration: none !important;
    box-shadow: none !important;
    display: flex;
    align-items: flex-start;
    white-space: normal;
    line-height: 1.4;
}

.course-module-accordion .module-btn:hover,
.course-module-accordion .module-btn:focus,
.course-module-accordion .module-btn:not(.collapsed) {
    color: #d4af37;
    outline: none !important;
}

.course-module-accordion .module-toggle-icon {
    color: #d4af37;
    font-size: 12px;
    margin-right: 12px;
    margin-top: 4px; /* Aligns arrow nicely with multi-line text */
    transition: transform 0.3s ease;
}

/* Flips the arrow when opened */
.course-module-accordion .module-btn:not(.collapsed) .module-toggle-icon {
    transform: rotate(180deg);
}

.course-module-accordion .module-body {
    padding: 5px 15px 20px 24px;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.7;
    text-align: justify;
}

/* ====================================================
   Exclusive Masterclass Section (Compact & Transparent)
   ==================================================== */
.exclusive-masterclass-section {
    background-color: transparent !important; /* No background color */
    padding: 30px 0;
    position: relative;
}

.masterclass-transparent-card {
    background-color: var(--color-one);; /* No background color */
    border: 1px dashed rgba(196, 154, 69, 0.4); /* Elegant dashed gold border to define the area */
    border-radius: 20px;
    padding: 50px 40px;
    position: relative;
}

/* ── Content Column Styling ── */
.masterclass-title {
    font-family: var(--font-family-Philosopher, 'Philosopher', serif);
    font-size: clamp(1.8rem, 3vw, 2.4rem); /* Slightly smaller, more refined text */
    color: #fff;
    line-height: 1.2;
    margin-bottom: 5px;
}

.text-gold {
    color: #d4af37 !important;
}

.masterclass-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.masterclass-features-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.85); 
    font-size: 1.05rem; /* Reduced slightly for compactness */
    line-height: 1.5;
}

.masterclass-features-list li:last-child {
    margin-bottom: 0;
}

.masterclass-features-list li i {
    color: #d4af37; 
    font-size: 1.1rem;
    margin-top: 4px;
    margin-right: 15px;
    flex-shrink: 0;
}

/* ─ Unique Floating Arch Image Styling ── */
.masterclass-floating-img {
    position: relative;
    width: 100%;
    max-width: 280px; /* Drastically reduced image size */
    aspect-ratio: 3 / 4; /* Perfect portrait ratio */
    z-index: 2;
}

.masterclass-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 140px 140px 15px 15px; /* Creates the premium Arch shape */
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    position: relative;
    z-index: 2;
}

/* Gold wireframe offset behind the image */
.img-accent-frame {
    position: absolute;
    top: -15px;
    right: -15px;
    bottom: 15px;
    left: 15px;
    border: 2px solid #d4af37;
    border-radius: 140px 140px 15px 15px;
    z-index: 1;
    opacity: 0.6;
    transition: transform 0.4s ease;
}

.masterclass-floating-img:hover .img-accent-frame {
    transform: translate(-10px, 10px); /* Subtle shift effect on hover */
}

/* ====================================================
   Mobile & Tablet Responsiveness
   ==================================================== */
@media (max-width: 991px) {
    .masterclass-transparent-card {
        padding: 40px 30px;
        text-align: center;
    }
    
    .masterclass-features-list li {
        text-align: left; /* Keep bullets readable while title is centered */
    }
    
    .masterclass-floating-img {
        max-width: 250px; /* Slightly smaller on tablet */
        margin: 0 auto;
    }
}

@media (max-width: 575px) {
    .masterclass-transparent-card {
        padding: 30px 20px;
    }
    
    .masterclass-title {
        font-size: 1.8rem;
    }
    
    .masterclass-features-list li {
        font-size: 0.95rem;
    }
    
    .masterclass-floating-img {
        max-width: 220px; /* Perfect size for mobile phones */
    }
    
    /* Adjust offset for smaller screen */
    .img-accent-frame {
        top: -10px;
        right: -10px;
        bottom: 10px;
        left: 10px;
    }
}

/* ====================================================
   Our Work Section (Mobile Video Portfolio)
   ==================================================== */
.our-work-section {
    background-color: transparent; 
    position: relative;
    padding: 40px 0;
    overflow: hidden;
}

.work-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16; /* Mobile Portrait Video Ratio */
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(196, 154, 69, 0.3); /* Subtle theme gold border */
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    background-color: #000; 
}

/* Luxury hover effect */
.work-video-wrap:hover {
    transform: translateY(-8px);
    border-color: #d4af37;
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.3) !important;
}

/* Forces videos to cover the frame perfectly */
.work-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    pointer-events: none; /* Prevents users from accidentally pausing */
}

/* ====================================================
   Mobile & Tablet Responsiveness
   ==================================================== */
@media (max-width: 991px) {
    .our-work-section {
        padding: 30px 0;
    }
    
    .work-video-wrap {
        border-radius: 12px;
    }
}

@media (max-width: 575px) {
    .our-work-section {
        padding: 30px 0 0px;
    }
    
    /* Slight gap adjustments for mobile 2x2 grid */
    .our-work-section .col-6 {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ====================================================
   Our Work Section - Mobile Swipeable Stack (<= 1024px)
   ==================================================== */
@media (max-width: 1023px) {
    /* Transform the Bootstrap row into a horizontally scrolling grid */
    .our-work-section .row {
        display: grid !important;
        grid-template-rows: repeat(2, auto); /* Creates exactly 2 stacked rows */
        grid-auto-flow: column; /* Forces new items into the next column */
        grid-auto-columns: 85vw; /* Sets each stack to take up 85% of screen width */
        gap: 20px 15px; /* Vertical gap between stacked videos, horizontal gap between columns */
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory; /* Snaps seamlessly to the next stack on swipe */
        margin-left: 0;
        margin-right: 0;
        padding: 0 15px 20px 15px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Hides scrollbar for Firefox */
    }
    
    /* Hides scrollbar for Chrome/Safari */
    .our-work-section .row::-webkit-scrollbar {
        display: none; 
    }
    
    /* Override the Bootstrap column behavior */
    .our-work-section .row > div {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important; /* Overrides the mb-4 */
        scroll-snap-align: center; /* Ensures the stack centers perfectly on swipe */
    }
    
    .our-work-section .work-video-wrap {
        width: 100%;
        border-radius: 16px;
        aspect-ratio: 9/16; /* Maintains the exact portrait aspect ratio */
    }
}

/* ====================================================
   Target Audience Section - Mobile 2-Column Flex Fix
   Breakpoint: Standard mobile (below 768px)
==================================================== */
@media (max-width: 767px) {
    /* Change from grid to flex to handle narrow viewports without overflow cut-off */
    .audience-static-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center;
        gap: 0; /* Gap is managed via margins below for flexbox stability */
        width: 100% !important; /* Ensure the grid container respects its parent width */
        box-sizing: border-box; /* Include padding in width calculation */
    }

    /* Adjust card sizing, spacing, and dimensions for 2-column flexible layout */
    .audience-static-card {
        /* Force two columns by making each card 50% width minus calculated margins */
        width: calc(50% - 12px) !important; 
        margin: 6px !important; /* Creates a controlled 12px horizontal and vertical gap (summed) */
        padding: 12px 10px !important; /* Scaled-down card padding for mobile */
        gap: 10px !important; /* Scaled-down internal element gap */
        border-radius: 10px !important; /* Tighter corners for smaller elements */
        cursor: default !important; /* Retain default interaction (no cursor hand) on mobile */
    }

    /* Prevent the hover lift/transform on mobile, which is for large screens only (non-hover UX) */
    .audience-static-card:hover {
        transform: none !important;
        background: rgba(255, 255, 255, 0.05) !important; /* Retain original background on hover */
        border-color: rgba(196, 154, 69, 0.2) !important; /* Retain original border on hover */
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 15px rgba(196, 154, 69, 0.1) !important; /* Retain original shadow on hover */
    }

    /* Scale down the icon wrapper size and font size for icons */
    .audience-static-card .icon-wrap {
        width: 32px !important; /* Reduced icon size on mobile */
        height: 32px !important;
        font-size: 15px !important; /* Reduced icon font size */
        flex-shrink: 0; /* Prevent icon from shrinking in flexbox layout */
    }

    /* Proportionately scale down the text within the card text block */
    .audience-static-card .card-text {
        font-size: 11px !important; /* Reduced card text font size */
        line-height: 1.3 !important; /* Scaled-down line height */
        letter-spacing: 0 !important; /* Reduced letter-spacing on mobile */
        font-weight: 500 !important; /* Adjust font-weight if needed for smaller size */
        word-wrap: break-word !important; /* Force word wrapping inside narrow mobile cards */
        hyphens: auto !important; /* Add hyphenation for clean multi-line breaks on mobile */
    }
}

@media (min-width: 768px) {
    .audience-static-grid {
        gap: 20px;
        padding: 10px 15px;
    }
}

/* ====================================================
   Masterclass Highlight Advertisement Section
==================================================== */
.masterclass-ad-section {
    position: relative;
    z-index: 5;
}

.ad-showcase-wrapper {
    background: linear-gradient(145deg, var(--color-two) 0%, #111 100%);
    border-radius: 24px;
    border: 1px solid rgba(196, 154, 69, 0.3);
    overflow: hidden;
    position: relative;
}

/* Optional: Subtle background glow behind the card */
.ad-showcase-wrapper::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(196, 154, 69, 0.05) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* Video Styling */
.video-ad-col {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.2);
    border-right: 1px solid rgba(196, 154, 69, 0.15);
}

.ad-video-container {
    position: relative;
    width: 100%;
    max-width: 320px; /* Constrains it to a realistic phone width */
    aspect-ratio: 9 / 16; /* Forces vertical mobile ratio */
    margin: 40px auto;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid #d4af37;
    box-shadow: 0 15px 35px rgba(0,0,0,0.6), 0 0 25px rgba(196, 154, 69, 0.2);
}

.ad-video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* "Must Watch" Pulsing Badge */
.ad-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #8b0000;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 12px;
    border-radius: 30px;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(139, 0, 0, 0.5);
    animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(139, 0, 0, 0.7); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(139, 0, 0, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(139, 0, 0, 0); }
}

/* Text Content Styling */
.text-ad-col {
    position: relative;
    z-index: 2;
}

.ad-title {
    font-family: var(--font-family-Philosopher, 'Philosopher', serif);
    font-size: clamp(2rem, 3.5vw, 3rem);
    color: #fff;
    line-height: 1.2;
}

.ad-desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.15rem;
    line-height: 1.7;
}

.ad-highlights-list {
    list-style: none;
    padding: 0;
}

.ad-highlights-list li {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 12px;
    display: flex;
}

.ad-highlights-list li i {
    color: #d4af37;
    margin-right: 12px;
    font-size: 1.2rem;
}

/* Pulsing Gold CTA */
.pulse-gold-btn {
    animation: goldBtnPulse 2s infinite;
}

@keyframes goldBtnPulse {
    0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.6); }
    70% { box-shadow: 0 0 0 15px rgba(212, 175, 55, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

/* Mobile & Tablet Adjustments */
@media (max-width: 991px) {
    .video-ad-col {
        border-right: none;
        border-bottom: 1px solid rgba(196, 154, 69, 0.15);
        padding: 30px 15px !important;
    }
    
    .ad-video-container {
        margin: 0 auto;
        max-width: 260px; /* Scales video down for tablets/phones */
    }
    
    .text-ad-col {
        padding: 40px 20px !important;
    }
}

/* ====================================================
   Masterclass Advertisement Section - Mobile Full Width
==================================================== */
@media (max-width: 575px) {
    /* Remove horizontal padding from the container */
    .masterclass-ad-section .auto-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Make the outer showcase wrapper flush with the screen edges */
    .ad-showcase-wrapper {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }

    /* REVERSE ORDER: Forces the text to appear above the video */
    .masterclass-ad-section .row {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    /* Remove padding around the video column */
    .video-ad-col {
        padding: 0 !important;
        border-bottom: none !important;
    }

    /* Force the video to take up 100% of the screen width */
    .ad-video-container {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        /* Border moved to top to create a separator between text and video */
        border-top: 1px solid rgba(196, 154, 69, 0.3) !important; 
    }
    
    /* Adjust badge placement for edge-to-edge video */
    .ad-badge {
        top: 20px;
        right: 20px;
    }

    /* Pad the text nicely since we removed the container padding */
    .text-ad-col {
        padding: 40px 20px 35px 20px !important;
    }
}

/* Ensure overlays do not block clicks on videos */
.hero-overlay, 
.phone-mockup-glare, 
.video-overlay-glow, 
.img-fade-overlay {
    pointer-events: none !important;
}

video {
    cursor: pointer !important;
    pointer-events: auto !important;
}

.work-slider-arrows {
    display: none !important;
}

/* Show arrows and ensure smooth scrolling on tablet/mobile */
@media (max-width: 1024px) {
    .work-slider-arrows {
        display: flex !important;
    }
    
    #work-scroll-container {
        scroll-behavior: smooth;
    }
}