/* --- Keep all your existing base styles here --- */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #111827; /* Dark background */
            color: #d1d5db; /* Light text */
            overflow-x: hidden; /* Prevent horizontal scroll */
        }
        .page-section { display: none; }
        .page-section.active { display: block; }
        .pulse-shadow {
            box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
            100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
        }
        .faq-toggle svg { transition: transform 0.2s ease-in-out; }
        .faq-toggle.faq-open svg { transform: rotate(45deg); }

        /* --- Customer Reviews Slider --- */
        /* ... (styles remain the same) ... */
        .customer-reviews-swiper .swiper-button-next,
        .customer-reviews-swiper .swiper-button-prev { color: #3b82f6; background-color: rgba(31, 41, 55, 0.8); width: 44px; height: 44px; border-radius: 9999px; transition: background-color 0.2s; }
        .customer-reviews-swiper .swiper-button-next:hover,
        .customer-reviews-swiper .swiper-button-prev:hover { background-color: rgba(55, 65, 81, 1); }
        .customer-reviews-swiper .swiper-button-next::after,
        .customer-reviews-swiper .swiper-button-prev::after { font-size: 1.25rem; font-weight: 800; }
        .customer-reviews-swiper .swiper-pagination-bullet { background-color: #6b7280; opacity: 0.8; width: 10px; height: 10px; transition: background-color 0.2s; }
        .customer-reviews-swiper .swiper-pagination-bullet-active { background-color: #3b82f6; opacity: 1; }
        .customer-reviews-swiper .swiper-pagination { position: static; margin-top: 2rem; }


        /* --- Content Sliders (Movies/Series/etc. - Poster Style) --- */
		

        .content-slider .swiper-slide { width: auto; flex-shrink: 0; }
        .content-slider .swiper-slide img { display: block; height: 350px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 0.5rem; transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .content-slider .swiper-slide:hover img { transform: scale(1.05); box-shadow: 0 10px 5px -3px rgba(59, 130, 246, 0.3), 0 4px 6px -4px rgba(59, 130, 246, 0.3); }
        .content-slider .swiper-button-next, .content-slider .swiper-button-prev { color: #ffffff; background-color: rgba(17, 24, 39, 0.6); width: 40px; height: 40px; border-radius: 9999px; top: 50%; transform: translateY(-50%); transition: background-color 0.2s; z-index: 10; }
        .content-slider .swiper-button-prev { left: 10px; }
        .content-slider .swiper-button-next { right: 10px; }
        .content-slider .swiper-button-next:hover, .content-slider .swiper-button-prev:hover { background-color: rgba(17, 24, 39, 0.9); }
         .content-slider .swiper-button-next::after, .content-slider .swiper-button-prev::after { font-size: 1rem; font-weight: 600; }

        /* --- Featured Match Slider (Sports Hero) --- */
        /* ... (styles remain the same) ... */
        .featured-match-swiper { width: 100%; background-color: #1f2937; border-radius: 0; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); min-height: 200px; position: relative; overflow: hidden; z-index: 0; height: 550px; }
        .featured-match-swiper .swiper-slide { display: flex; align-items: center; justify-content: flex-start; height: 100%; padding: 1rem 1rem 1rem 5%; position: relative; z-index: 1; background-size: contain; background-position: right; background-repeat: no-repeat; }
        .featured-match-swiper .swiper-slide::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 70%); z-index: 0; }
        .featured-match-swiper .swiper-button-next,
        .featured-match-swiper .swiper-button-prev { color: #ffffff; width: 44px; height: 44px; top: 50%; transform: translateY(-50%); transition: background-color 0.2s; z-index: 2; }
        .featured-match-swiper .swiper-button-next:hover,
        .featured-match-swiper .swiper-button-prev:hover { background-color: rgba(17, 24, 39, 0.4); border-radius: 9999px; }
        .featured-match-swiper .swiper-button-next::after,
        .featured-match-swiper .swiper-button-prev::after { font-size: 1.25rem; font-weight: 800; }
        .featured-match-swiper .swiper-wrapper { position: relative; z-index: 1; }
        .slide-meta-text { color: #d1d5db; }
        .slide-meta-text span.text-gray-600 { color: #6b7280; }


        /* === CONSOLIDATED HERO STYLES (Applies to Movies, Series, Kids) === */

        /* --- Video Hero Container (Movies/Series - Desktop Default) --- */
       .vjs-wrap {
    position: relative;
    aspect-ratio: 21 / 9;
    max-height: 85vh;	
    width: 100%;
    overflow: hidden;
    background: #000;
}

.vjs-wrap .video-js,
.vjs-wrap .vjs-tech {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

        .vjs-wrap .video-js {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
        }

/* --- Image Hero Container (Kids - Desktop Default) --- */
.image-hero-container {
    position: relative;
    height: 0;
    padding-top: 40% !important;   /* EXACT SAME HEIGHT AS VIDEO HERO */
    overflow: hidden;
    background: #000;
    max-width: 100%;
}

.image-hero-container img {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    object-fit: cover;
}

        /* --- Common Hero Overlay --- */
        #movie-hero-overlay {
            position: absolute; bottom: 0; left: 0; right: 0; top: 0;
            display: flex; flex-direction: column; justify-content: flex-end;
            padding: 7% 7% 2% 2%;
            background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0) 75%);
             z-index: 10; pointer-events: none;
        }
         #movie-hero-overlay > * { pointer-events: auto; max-width: 60%; }

        /* --- Common Mute Button --- */
        .custom-mute-button {
            position: absolute; top: 1rem; right: 1rem; z-index: 15;
            background-color: rgba(41, 41, 41, 0.7); border: none;
            border-radius: 0.5rem; padding: 0.6rem; cursor: pointer;
            transition: background-color 0.2s ease;
        }
        .custom-mute-button:hover { background-color: rgba(61, 61, 61, 0.9); }
        .custom-mute-button svg { width: 1.5rem; height: 1.5rem; color: white; display: block; }

        /* --- Common Hero Navigation Arrows (Visible on Desktop by default) --- */
        .hero-swiper .swiper-button-next,
        .hero-swiper .swiper-button-prev {
             color: #ffffff; width: 44px; height: 44px; top: 45%;
             transform: translateY(-50%); transition: background-color 0.2s;
             z-index: 15; /* Ensure visibility */
        }
        .hero-swiper .swiper-button-next:hover,
        .hero-swiper .swiper-button-prev:hover {
              background-color: rgba(17, 24, 39, 0.4); border-radius: 9999px;
         }
        .hero-swiper .swiper-button-next::after,
        .hero-swiper .swiper-button-prev::after { font-size: 1.25rem; font-weight: 800; }

        /* === END CONSOLIDATED HERO STYLES === */


        /* --- START: MOBILE OVERRIDES --- */
        @media (max-width: 768px) {
            /* General Slider Mobile Adjustments */
            .content-slider .swiper-button-next, .content-slider .swiper-button-prev { display: none; }
            .content-slider .swiper-slide img { height: 165px; } /* Default poster height on mobile */
            .content-slider.w-full { padding-left: 1rem; padding-right: 1rem; }
            .content-slider h2.container { padding-left: 0rem; padding-right: 0rem; }

            /* Sports Hero Mobile Adjustments */
            .featured-match-swiper .swiper-button-next, .featured-match-swiper .swiper-button-prev { display: none; }
            /* ... (keep other specific .featured-match-swiper mobile styles) ... */
             .featured-match-swiper { height: 550px; border-radius: 0; width: 100vw; margin-left: calc(-50vw + 50%); }
             .countdown-timer-wrapper .countdown-boxes .hidden.sm\:block { display: none !important; }
             .countdown-timer-wrapper .countdown-boxes span.hidden.sm\:inline { display: none !important; }
             .subscribe-hero-btn { width: calc(100% - 2rem); max-width: 300px; display: block; margin-left: auto; margin-right: auto; font-size: 1rem; padding: 0.6rem 2rem; }
             .featured-match-swiper .swiper-slide { padding: 0; justify-content: flex-start; display: flex; flex-direction: column; }
             .featured-match-swiper .swiper-slide::before { background: none; }
             .featured-match-swiper .swiper-slide .relative.z-10 { z-index: 2; width: 100%; text-shadow: none; justify-content: flex-start; align-items: flex-start; }
             .mobile-countdown-timer .countdown-boxes > div { min-width: 50px; padding: 0.35rem; }
             .mobile-countdown-timer .countdown-boxes span:first-child { font-size: 1.25rem; }
             .mobile-countdown-timer .countdown-boxes span:last-child { font-size: 0.65rem; margin-top: 0; }
             .mobile-countdown-timer .countdown-boxes span.text-xl { font-size: 1.25rem; }


             /* --- Mobile Hero Video Fix (Portrait 9:16) --- */
.vjs-wrap {
    aspect-ratio: 9 / 16; /* Portrait video */
    height: auto !important;
}
.vjs-wrap .video-js, 
.vjs-wrap .vjs-tech {
    object-fit: cover !important;
}

             .vjs-wrap .video-js .vjs-tech {
                 object-fit: cover !important; /* Fill tall screen, crop sides */
             }

             /* --- *** ADDED *** Mobile Hero Image Fix (Portrait 9:16) --- */
             .image-hero-container {
                 padding-top: 169% !important; /* 9:16 Aspect Ratio */
                 aspect-ratio: auto !important; /* Remove fixed landscape ratio */
                 height: 0;
                 position: relative; /* Needed for the img inside */
             }
             .image-hero-container img {
                 /* Position image inside the padding-based container */
                 position: absolute; top: 0; left: 0; height: 100%; width: 100%;
                 object-fit: cover; /* Crop to fill the portrait shape */
             }

             /* General Hero Mobile Adjustments */
             .hero-swiper .swiper-button-next,
             .hero-swiper .swiper-button-prev {
                display: none; /* Hide arrows on mobile */
             }
             #movie-hero-overlay { /* Common Overlay Mobile */
                 padding: 5% 5% 10% !important;
                 background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0) 100%) !important;
             }
              #movie-hero-overlay > * { max-width: 90% !important; }
        }
        /* --- END: MOBILE OVERRIDES --- */