@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
        line-height: 1.6;
            color: white;
            background-color: #050507;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }

        /* Ensure all text elements use Inter font with font smoothing */
        h1, h2, h3, h4, h5, h6, p, span, div, button, input, textarea, select, label {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }

        /* Utility Classes */
        .hidden { display: none !important; }
        .md\:hidden { display: none !important; }
        .md\:block { display: block !important; }
        .flex { display: flex; }
        .flex-col { flex-direction: column; }
        .items-center { align-items: center; }
        .justify-center { justify-content: center; }
        .justify-between { justify-content: space-between; }
        .justify-end { justify-content: flex-end; }
        .text-center { text-align: center; }
        .text-decoration-none { text-decoration: none; }
        .fixed { position: fixed; }
        .relative { position: relative; }
        .absolute { position: absolute; }
        .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
        .w-full { width: 100%; }
        .h-full { height: 100%; }
        .h-screen { height: 100vh; }
        .min-h-screen { min-height: 100vh; }
        .object-cover { object-fit: cover; }
        .rounded-lg { border-radius: 0.5rem; }
        .rounded-full { border-radius: 9999px; }
        .rounded-3xl { border-radius: 1.5rem; }
        .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
        .transition-all { transition: all 0.3s ease; }
        .duration-300 { transition-duration: 300ms; }
        .duration-1000 { transition-duration: 1000ms; }
        .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
        .cursor-pointer { cursor: pointer; }
        .overflow-hidden { overflow: hidden; }
        .overflow-x-auto { overflow-x: auto; }
        .overflow-auto { overflow: auto; }
        .flex-shrink-0 { flex-shrink: 0; }
        .backdrop-blur-sm { backdrop-filter: blur(4px); }
        .whitespace-nowrap { white-space: nowrap; }
        .z-10 { z-index: 10; }
        .z-20 { z-index: 20; }
        .z-30 { z-index: 30; }
        .z-40 { z-index: 40; }
        .z-50 { z-index: 50; }
        .z-60 { z-index: 60; }
        .z-70 { z-index: 70; }
        .z-80 { z-index: 80; }
        .z-90 { z-index: 90; }
        .z-100 { z-index: 100; }

        /* Spacing */
        .gap-2 { gap: 0.5rem; }
        .gap-4 { gap: 1rem; }
        .gap-6 { gap: 1.5rem; }
        .gap-8 { gap: 2rem; }
        .p-1 { padding: 0.25rem; }
        .p-2 { padding: 0.5rem; }
        .p-3 { padding: 0.75rem; }
        .p-4 { padding: 1rem; }
        .p-6 { padding: 1.5rem; }
        .p-8 { padding: 2rem; }
        .px-4 { padding-left: 1rem; padding-right: 1rem; }
        .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
        .px-8 { padding-left: 2rem; padding-right: 2rem; }
        .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
        .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
        .py-8 { padding-top: 2rem; padding-bottom: 2rem; }
        .py-16 { padding-top: 4rem; padding-bottom: 4rem; }
        .pb-4 { padding-bottom: 1rem; }
        .pb-6 { padding-bottom: 1.5rem; }
        .pt-8 { padding-top: 2rem; }
        .pl-16 { padding-left: 4rem; }
        .pr-6 { padding-right: 1.5rem; }
        .m-0 { margin: 0; }
        .mb-1 { margin-bottom: 0.25rem; }
        .mb-2 { margin-bottom: 0.5rem; }
        .mb-3 { margin-bottom: 0.75rem; }
        .mb-4 { margin-bottom: 1rem; }
        .mb-6 { margin-bottom: 1.5rem; }
        .mb-8 { margin-bottom: 2rem; }
        .mt-1 { margin-top: 0.25rem; }
        .mt-2 { margin-top: 0.5rem; }
        .mt-3 { margin-top: 0.75rem; }
        .mt-4 { margin-top: 1rem; }
        .mx-auto { margin-left: auto; margin-right: auto; }

        /* Positioning */
        .top-6 { top: 1.5rem; }
        .top-8 { top: 2rem; }
        .top-1\/2 { top: 50%; }
        .bottom-6 { bottom: 1.5rem; }
        .bottom-20 { bottom: 5rem; }
        .left-4 { left: 1rem; }
        .left-16 { left: 4rem; }
        .left-1\/2 { left: 50%; }
        .right-4 { right: 1rem; }
        .right-6 { right: 1.5rem; }
        .right-8 { right: 2rem; }
        .right-16 { right: 4rem; }
        .transform { transform: translateZ(0); }
        .-translate-y-1\/2 { transform: translateY(-50%); }
        .-translate-x-1\/2 { transform: translateX(-50%); }

        /* Sizing */
        .w-6 { width: 1.5rem; }
        .w-8 { width: 2rem; }
        .w-16 { width: 4rem; }
        .w-32 { width: 8rem; }
        .w-48 { width: 12rem; }
        .w-64 { width: 16rem; }
        .w-80 { width: 20rem; }
        .w-fit { width: fit-content; }
        .h-10 { height: 2.5rem; }
        .h-12 { height: 3rem; }
        .h-14 { height: 3.5rem; }
        .h-32 { height: 8rem; }
        .h-40 { height: 10rem; }
        .h-48 { height: 12rem; }
        .h-\[55vh\] { height: 55vh; }
        .max-w-sm { max-width: 24rem; }
        .max-w-md { max-width: 28rem; }
        .max-w-lg { max-width: 32rem; }
        .max-w-5xl { max-width: 64rem; }
        .max-w-7xl { max-width: 80rem; }
        
        /* Responsive max-width utilities */
        @media (max-width: 768px) {
            .max-md\:max-w-none { max-width: none; }
            .max-md\:h-full { height: 100%; }
        }

        /* Typography */
        .text-xs { font-size: 0.75rem; }
        .text-sm { font-size: 0.875rem; }
        .text-base { font-size: 1rem; }
        .text-lg { font-size: 1.125rem; }
        .text-xl { font-size: 1.25rem; }
        .text-2xl { font-size: 1.5rem; }
        .text-3xl { font-size: 1.875rem; }
        .text-4xl { font-size: 2.25rem; }
        .text-5xl { font-size: 3rem; }
        .font-normal { font-weight: 400; }
        .font-medium { font-weight: 500; }
        .font-semibold { font-weight: 600; }
        .font-bold { font-weight: 700; }
        .font-serif { font-family: 'Playfair Display', Georgia, Cambria, "Times New Roman", Times, serif; }
        .leading-tight { line-height: 1.25; }

        /* Header specific styles */
        .aspect-\[1\] { aspect-ratio: 1; }
        .shrink-0 { flex-shrink: 0; }
        .shadow-\[0px_2px_4px_rgba\(0,0,0,0\.25\)\] { box-shadow: 0px 2px 4px rgba(0,0,0,0.25); }
        .border { border-width: 1px; }
        .border-white { border-color: white; }
        
        /* Logo specific styles to prevent squeezing */
        header img[alt="Studio Logo"] {
            aspect-ratio: 1 !important;
            object-fit: contain !important;
            width: 2rem !important;
            height: 2rem !important;
        }
        
        @media (min-width: 640px) {
            header img[alt="Studio Logo"] {
                width: 2.5rem !important;
                height: 2.5rem !important;
            }
        }
        
        @media (min-width: 768px) {
            header img[alt="Studio Logo"] {
                width: 3rem !important;
                height: 3rem !important;
            }
        }
        
        @media (min-width: 1024px) {
            header img[alt="Studio Logo"] {
                width: 3.5rem !important;
                height: 3.5rem !important;
            }
        }

        /* Colors */
        .text-white { color: white; }
        .text-gray-300 { color: #d1d5db; }
        .text-gray-400 { color: #9ca3af; }
        .text-gray-600 { color: #4b5563; }
        .bg-black { background-color: black; }
        .bg-\[\#050507\] { background-color: #050507; }
        .bg-black\/20 { background-color: rgba(0, 0, 0, 0.2); }
        .bg-black\/50 { background-color: rgba(0, 0, 0, 0.5); }
        .bg-black\/70 { background-color: rgba(0, 0, 0, 0.7); }
        .bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
        .bg-white\/50 { background-color: rgba(255, 255, 255, 0.5); }
        .bg-white\/75 { background-color: rgba(255, 255, 255, 0.75); }
        .bg-\[\#AB80FB\] { background-color: #AB80FB; }
        .bg-\[\#663AC1\] { background-color: #663AC1; }
        .bg-\[\#9966ff\] { background-color: #9966ff; }
        .bg-\[\#5a2d9f\] { background-color: #5a2d9f; }
        .bg-purple-600 { background-color: #9333ea; }
        .bg-\[\#9d72f0\] { background-color: #9d72f0; }
        .bg-\[rgba\(255,254,254,0\.2\)\] { background-color: rgba(255, 254, 254, 0.2); }
        .bg-\[rgba\(255\2c 254\2c 254\2c 0\.2\)\] {
            background-color: rgba(255, 254, 254, 0.2);
        }

        /* Gradients */
        .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
        .from-\[\#AB80FB\] { --tw-gradient-from: #AB80FB; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(171, 128, 251, 0)); }
        .to-\[\#663AC1\] { --tw-gradient-to: #663AC1; }
        .hover\:from-\[\#9966ff\]:hover { --tw-gradient-from: #9966ff; }
        .hover\:to-\[\#5a2d9f\]:hover { --tw-gradient-to: #5a2d9f; }

        /* Effects */
        .scale-100 { transform: scale(1); }
        .scale-102 { transform: scale(1.02); }
        .scale-105 { transform: scale(1.05); }
        .scale-125 { transform: scale(1.25); }
        .hover\:scale-105:hover { transform: scale(1.05); }
        .hover\:scale-102:hover { transform: scale(1.02); }
        .opacity-0 { opacity: 0; }
        .opacity-50 { opacity: 0.5; }
        .group:hover .group-hover\:opacity-100 { opacity: 1; }
        .group:hover .group-hover\:bg-purple-600 { background-color: #9333ea; }
        .hover\:bg-white\/75:hover { background-color: rgba(255, 255, 255, 0.75); }
        .hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
        .drop-shadow-\[0_1px_2px_rgba\(0,0,0,0\.8\)\] { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)); }
        .drop-shadow-\[0_1px_2px_rgba\(0\2c 0\2c 0\2c 0\.8\)\] {
            --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
            filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
        }
        
        /* Text shadow for better legibility */
        .text-shadow-black {
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
        }
        
        /* Icon shadow for better legibility */
        .icon-shadow-black {
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
        }

        /* Button Styles */
        // .btn-watch {
        //     display: flex;
        //     align-items: center;
        //     justify-content: center;
        //     gap: 0.75rem;
        //     padding: 0 1.5rem;
        //     height: 3rem;
        //     min-width: 10rem;
        //     font-size: 1rem;
        //     font-weight: 500;
        //     color: white;
        //     border-radius: 0.5rem;
        //     transition: all 0.2s ease-in-out;
        //     background: linear-gradient(to bottom, #AB80FB, #663AC1);
        //     border: none;
        //     cursor: pointer;
        //     box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 4px rgba(156,163,175,0.3);
        //     border-bottom: 2px solid #663AC1;
        // }

        /* Button Hover and Focus States */
        .btn-watch:hover {
            background: linear-gradient(to bottom, #9966ff, #5a2d9f);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 4px rgba(156,163,175,0.3);
        }

        .btn-watch:focus {
            outline: none;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 4px rgba(156,163,175,0.3), 0 0 0 2px rgba(171,128,251,0.5);
        }

        /* New Action Buttons (Download/Share) */
        .action-btn-new {
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            color: white;
            cursor: pointer;
            transition: all 0.2s ease;
            backdrop-filter: blur(8px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .action-btn-new:hover {
            background-color: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.4);
            transform: scale(1.05);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
        }

        .action-btn-new:active {
            transform: scale(0.95);
        }

        /* Mobile Action Buttons */
        .mobile-action-btn-new {
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            color: white;
            cursor: pointer;
            transition: all 0.2s ease;
            backdrop-filter: blur(8px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .mobile-action-btn-new:hover {
            background-color: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.3);
            transform: scale(1.05);
        }

        .mobile-action-btn-new:active {
            transform: scale(0.95);
        }

        /* Desktop Hero Layout */
        .desktop-hero-container {
            position: relative;
            height: 100vh;
            min-height: 600px; /* Minimum height to prevent collapse */
            display: flex;
            flex-direction: column;
        }

        .desktop-hero-content {
            position: relative;
            z-index: 10;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 2rem 0;
        }

        .hero-text-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            padding: 2rem 4rem;
        }

        .photo-gallery-section {
            flex-shrink: 0;
            padding-bottom: 2rem;
            min-height: 200px; /* Ensure gallery has minimum space */
        }

        /* Responsive adjustments for smaller desktop screens */
        @media (max-height: 700px) {
            .desktop-hero-container {
                min-height: 500px;
            }
            
            .hero-text-section {
                padding-left: 2rem;
            }
            
            .photo-gallery-section {
                min-height: 150px;
                padding-bottom: 1rem;
            }
        }

        @media (max-height: 600px) {
            .desktop-hero-container {
                min-height: 450px;
            }
            
            .photo-gallery-section {
                min-height: 120px;
                padding-bottom: 0.5rem;
            }
        }

        /* Photo Gallery Styles */
        .photo-gallery-container {
            position: relative;
            width: 70vw; /* 70% of viewport width */
            margin: 0 auto;
            will-change: auto; /* Optimize for animations */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .photo-gallery-scroll {
            display: flex;
            gap: 1.5rem;
            justify-content: center;
            align-items: center;
            overflow-x: hidden; /* Prevent horizontal scrolling */
            overflow-y: hidden; /* Prevent vertical scrolling */
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding: 1rem 4rem; /* Add horizontal and vertical padding to prevent clipping */
            scroll-behavior: smooth;
            position: relative;
            transform: translateZ(0); /* Force hardware acceleration */
            min-height: 200px; /* Ensure consistent height for centering */
        }

        .photo-gallery-scroll::-webkit-scrollbar {
            display: none;
        }

        // .photo-gallery-arrow {
        //     position: absolute;
        //     top: 50%;
        //     transform: translateY(-50%);
        //     z-index: 20;
        //     background-color: rgba(255, 255, 255, 0.2);
        //     backdrop-filter: blur(4px);
        //     border-radius: 50%;
        //     width: 40px;
        //     height: 40px;
        //     display: flex;
        //     align-items: center;
        //     justify-content: center;
        //     border: none;
        //     cursor: pointer;
        //     transition: all 0.2s ease;
        //     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        // }

        .photo-gallery-arrow:hover {
            background-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-50%) scale(1.05);
            transform-origin: center center;
        }

        // .photo-gallery-arrow svg {
        //     width: 20px;
        //     height: 20px;
        //     color: white;
        //     stroke-width: 2;
        // }

        .photo-gallery-arrow-left {
            left: 0;
        }

        .photo-gallery-arrow-right {
            right: 0;
        }

        .photo-gallery {
            display: flex;
            gap: 1.5rem;
            justify-content: center;
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
            max-width: 64rem;
        margin: 0 auto;
      }

        .photo-gallery::-webkit-scrollbar {
            display: none;
        }

        .photo-card {
            width: calc((60vw - 4.5rem) / 4); /* 4 cards where total content = 60vw, gaps = 4.5rem */
            flex-shrink: 0;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            background: none;
            padding: 0;
            max-width: 200px; /* Prevent cards from becoming too wide */
        }

        .photo-card.selected {
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            transform: scale(1.15);
            transform-origin: center center;
        }

        .photo-card:hover:not(.selected) {
            transform: scale(1.02);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            transform-origin: center center;
        }

        .photo-card img {
            aspect-ratio: 1.4;
            object-fit: cover;
            width: 100%;
            border-radius: 0.5rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            transition: all 0.3s ease;
        }

        .photo-card:hover img {
            box-shadow: 0 4px 12px rgba(0,0,0,0.25);
        }

    /* Photo Gallery Responsive Breakpoints */
    @media (max-width: 1024px) {
      .photo-gallery-container {
          width: 80vw; /* Container wider for smaller screens */
      }
      .photo-card {
          width: calc((70vw - 4.5rem) / 4); /* Content = 70vw on smaller screens */
          max-width: 180px; /* Smaller max-width for smaller screens */
      }
  }

  @media (min-width: 1600px) {
      .photo-gallery-container {
          width: 65vw; /* Container for larger screens */
      }
      .photo-card {
          width: calc((55vw - 4.5rem) / 4); /* Content = 55vw on larger screens */
          max-width: 220px; /* Larger max-width for larger screens */
      }
      .photo-gallery-scroll {
          padding: 1rem 5rem; /* More padding for larger screens */
      }
  }

  @media (min-width: 2560px) {
      .photo-gallery-container {
          width: 60vw; /* Container for 4K screens */
          max-width: 1200px; /* Prevent excessive width on ultra-wide screens */
      }
      .photo-card {
          width: calc((50vw - 4.5rem) / 4); /* Content = 50vw on 4K+ screens */
          max-width: 260px; /* Adjusted max-width for 4K screens */
      }
      .photo-gallery-scroll {
          padding: 1rem 6rem; /* Extra padding for 4K screens to prevent clipping */
      }
  }

  /* Ultra-wide screen fix for better centering */
@media (min-width: 3200px) {
    .photo-gallery-container {
        width: 50vw; /* Even smaller container for ultra-wide screens */
        max-width: 1000px;
    }
    .photo-card {
        width: calc((40vw - 4.5rem) / 4);
        max-width: 220px;
    }
    .photo-gallery-scroll {
        padding: 1rem 7rem; /* Maximum padding for ultra-wide screens */
    }
}

    /* ===== RESPONSIVE TYPOGRAPHY SYSTEM ===== */
  
  /* Base Typography Reset */
  html {
      font-size: 16px; /* Base font size for rem calculations */
  }
  
  /* Main Gallery Title (H1) - Hero Section */
  .gallery-title,
  h1.text-5xl {
      font-size: 2rem; /* 32px */
      line-height: 1.2;
      font-weight: 400;
  }
  
  /* Event Type/Subtitle (H2) - Hero Section */
  .event-subtitle,
  h2#eventType,
  h2.text-xl {
      font-size: 1rem; /* 16px */
      line-height: 1.4;
      font-weight: 400;
  }
  
  /* Section Titles (H3) - Featured Sections */
  .section-title-text {
      color: white;
      font-size: 1.125rem; /* 18px */
      font-weight: 600;
      margin: 0;
      white-space: nowrap;
      flex-shrink: 0;
      line-height: 1.3;
  }
  
  /* Media Titles in Featured Cards */
  .media-title-text {
      font-size: 0.875rem; /* 14px */
      line-height: 1.4;
      font-weight: 500;
        overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
  }
  
  /* Button Text */
  .btn-watch {
      font-size: 0.875rem; /* 14px */
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0 1.25rem;
      height: 2.5rem;
      min-width: 8rem;
      color: white;
      border-radius: 0.5rem;
      transition: all 0.2s ease-in-out;
      background: linear-gradient(to bottom, #AB80FB, #663AC1);
      border: none;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 4px rgba(156,163,175,0.3);
      border-bottom: 2px solid #663AC1;
  }
  
  /* ===== TABLET BREAKPOINT (768px+) ===== */
  @media (min-width: 768px) {
      .gallery-title,
      h1.text-5xl {
          font-size: 2.5rem; /* 40px */
      }
      
      .event-subtitle,
      h2#eventType,
      h2.text-xl {
          font-size: 1.25rem; /* 20px */
      }
      
      .section-title-text {
          font-size: 1.25rem; /* 20px */
      }
      
      .media-title-text {
          font-size: 0.875rem; /* 14px */
      }
      
      .btn-watch {
          font-size: 1rem; /* 16px */
          gap: 0.75rem;
          padding: 0 1.5rem;
          height: 3rem;
          min-width: 10rem;
      }
  }
  
  /* ===== DESKTOP BREAKPOINT (1024px+) ===== */
  @media (min-width: 1024px) {
      .gallery-title,
      h1.text-5xl {
          font-size: 3rem; /* 48px */
      }
      
      .event-subtitle,
      h2#eventType,
      h2.text-xl {
          font-size: 1.5rem; /* 24px */
      }
      
      .section-title-text {
          font-size: 1.5rem; /* 24px */
      }
      
      .media-title-text {
          font-size: 1rem; /* 16px */
      }
      
      .btn-watch {
          font-size: 1rem; /* 16px */
          gap: 0.75rem;
          padding: 0 1.5rem;
          height: 3rem;
          min-width: 10rem;
      }
  }
  
  /* ===== LARGE DESKTOP BREAKPOINT (1440px+) ===== */
  @media (min-width: 1440px) {
      .gallery-title,
      h1.text-5xl {
          font-size: 3.5rem; /* 56px */
      }
      
      .event-subtitle,
      h2#eventType,
      h2.text-xl {
          font-size: 1.75rem; /* 28px */
      }
      
      .section-title-text {
          font-size: 1.625rem; /* 26px */
      }
      
      .media-title-text {
          font-size: 1.125rem; /* 18px */
      }
      
      .btn-watch {
          font-size: 1.125rem; /* 18px */
          gap: 0.75rem;
          padding: 0 2rem;
          height: 3.5rem;
          min-width: 12rem;
      }
  }
  
  /* ===== 4K DISPLAY BREAKPOINT (2560px+) ===== */
  @media (min-width: 2560px) {
      .gallery-title,
      h1.text-5xl {
          font-size: 4rem; /* 64px */
      }
      
      .event-subtitle,
      h2#eventType,
      h2.text-xl {
          font-size: 2rem; /* 32px */
      }
      
      .section-title-text {
          font-size: 1.875rem; /* 30px */
      }
      
      .media-title-text {
          font-size: 1.25rem; /* 20px */
      }
      
      .btn-watch {
          font-size: 1.25rem; /* 20px */
          gap: 1rem;
          padding: 0 2.5rem;
          height: 4rem;
          min-width: 14rem;
      }
  }

     /* Section Title Container */
//   .section-title-container {
//       display: flex;
//       align-items: center;
//       gap: 1rem;
//   }

//   .section-title-container.mobile {
//       gap: 0.75rem;
//   }

    /* ===== RESPONSIVE ICON SYSTEM ===== */
  
  /* Action Button Icons (Share/Download) */
  .action-icon {
      width: 1rem; /* 16px */
      height: 1rem;
  }

  /* Watch Button Icons */
  .watch-icon {
      width: 1.25rem;
      height: 1.25rem;
  }

  /* Section Title Icons */
  .section-title-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      background: linear-gradient(90deg, #A076F4 -0.76%, #8154DB 99.7%);
      border-radius: 8px;
      flex-shrink: 0;
  }

  .section-title-icon img,
  .section-title-icon svg {
      width: 1rem; /* 16px */
      height: 1rem;
      filter: brightness(0) invert(1);
  }
  
  /* Featured Card Play Button */
  .play-button {
      position: absolute;
      bottom: 0.75rem;
      left: 0.75rem;
      background-color: rgba(0, 0, 0, 0.7);
      border-radius: 50%;
      width: 2rem; /* 32px */
      height: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.3s ease;
  }
  
  .play-button svg {
      width: 1rem; /* 16px */
      height: 1rem;
      color: white;
  }
  
  /* Featured Arrow Icons */
  .featured-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 20;
      background-color: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(4px);
      border-radius: 50%;
      width: 2rem; /* 32px */
      height: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  
  .featured-arrow svg {
      width: 1rem; /* 16px */
      height: 1rem;
      color: white;
      stroke-width: 2;
  }
  
  /* Modal and General Icons */
  .modal-icon {
      width: 1.25rem; /* 20px */
      height: 1.25rem;
  }
  
  /* Footer Icons */
  .footer-icon {
      width: 1.25rem; /* 20px */
      height: auto;
  }
  
  /* Photo Gallery Arrow Icons */
  .photo-gallery-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 20;
      background-color: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(4px);
      border-radius: 50%;
      width: 2rem; /* 32px */
      height: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  
  .photo-gallery-arrow svg {
      width: 1rem; /* 16px */
      height: 1rem;
      color: white;
      stroke-width: 2;
  }
  
  /* ===== TABLET BREAKPOINT (768px+) ===== */
  @media (min-width: 768px) {
      .action-icon {
          width: 1.25rem; /* 20px */
          height: 1.25rem;
      }
      
      .watch-icon {
          width: 1.25rem;
          height: 1.25rem;
      }
      
      .section-title-icon {
          width: 2.25rem; /* 36px */
          height: 2.25rem;
      }
      
      .section-title-icon img,
      .section-title-icon svg {
          width: 1.125rem; /* 18px */
          height: 1.125rem;
      }
      
      .play-button {
          width: 2.5rem; /* 40px */
          height: 2.5rem;
          bottom: 1rem;
          left: 1rem;
      }
      
      .play-button svg {
          width: 1.25rem; /* 20px */
          height: 1.25rem;
      }
      
      .featured-arrow {
          width: 2.25rem; /* 36px */
          height: 2.25rem;
      }
      
      .featured-arrow svg {
          width: 1.125rem; /* 18px */
          height: 1.125rem;
      }
      
      .modal-icon {
          width: 1.5rem; /* 24px */
          height: 1.5rem;
      }
      
      .footer-icon {
          width: 1.5rem; /* 24px */
      }
      
      .photo-gallery-arrow {
          width: 2.25rem; /* 36px */
          height: 2.25rem;
      }
      
      .photo-gallery-arrow svg {
          width: 1.125rem; /* 18px */
          height: 1.125rem;
      }
  }
  
  /* ===== DESKTOP BREAKPOINT (1024px+) ===== */
  @media (min-width: 1024px) {
      .action-icon {
          width: 1.25rem; /* 20px */
          height: 1.25rem;
      }
      
      .watch-icon {
          width: 1.25rem;
          height: 1.25rem;
      }
      
      .section-title-icon {
          width: 2.5rem; /* 40px */
          height: 2.5rem;
      }
      
      .section-title-icon img,
      .section-title-icon svg {
          width: 1.25rem; /* 20px */
          height: 1.25rem;
      }
      
      .play-button {
          width: 3rem; /* 48px */
          height: 3rem;
      }
      
      .play-button svg {
          width: 1.5rem; /* 24px */
          height: 1.5rem;
      }
      
      .featured-arrow {
          width: 2.5rem; /* 40px */
          height: 2.5rem;
      }
      
      .featured-arrow svg {
          width: 1.25rem; /* 20px */
          height: 1.25rem;
      }
      
      .photo-gallery-arrow {
          width: 2.5rem; /* 40px */
          height: 2.5rem;
      }
      
      .photo-gallery-arrow svg {
          width: 1.25rem; /* 20px */
          height: 1.25rem;
      }
  }
  
  /* ===== LARGE DESKTOP BREAKPOINT (1440px+) ===== */
  @media (min-width: 1440px) {
      .action-icon {
          width: 1.5rem; /* 24px */
          height: 1.5rem;
      }
      
      .watch-icon {
          width: 1.375rem; /* 22px */
          height: 1.375rem;
      }
      
      .section-title-icon {
          width: 2.75rem; /* 44px */
          height: 2.75rem;
      }
      
      .section-title-icon img,
      .section-title-icon svg {
          width: 1.375rem; /* 22px */
          height: 1.375rem;
      }
      
      .play-button {
          width: 3.5rem; /* 56px */
          height: 3.5rem;
      }
      
      .play-button svg {
          width: 1.75rem; /* 28px */
          height: 1.75rem;
      }
      
      .featured-arrow {
          width: 2.75rem; /* 44px */
          height: 2.75rem;
      }
      
      .featured-arrow svg {
          width: 1.375rem; /* 22px */
          height: 1.375rem;
      }
      
      .photo-gallery-arrow {
          width: 2.75rem; /* 44px */
          height: 2.75rem;
      }
      
      .photo-gallery-arrow svg {
          width: 1.375rem; /* 22px */
          height: 1.375rem;
      }
  }
  
  /* ===== 4K DISPLAY BREAKPOINT (2560px+) ===== */
  @media (min-width: 2560px) {
      .action-icon {
          width: 1.75rem; /* 28px */
          height: 1.75rem;
      }
      
      .watch-icon {
          width: 1.5rem; /* 24px */
          height: 1.5rem;
      }
      
      .section-title-icon {
          width: 3rem; /* 48px */
          height: 3rem;
      }
      
      .section-title-icon img,
      .section-title-icon svg {
          width: 1.5rem; /* 24px */
          height: 1.5rem;
      }
      
      .play-button {
          width: 4rem; /* 64px */
          height: 4rem;
      }
      
      .play-button svg {
          width: 2rem; /* 32px */
          height: 2rem;
      }
      
      .featured-arrow {
          width: 3rem; /* 48px */
          height: 3rem;
      }
      
      .featured-arrow svg {
          width: 1.5rem; /* 24px */
          height: 1.5rem;
      }
      
      .photo-gallery-arrow {
          width: 3rem; /* 48px */
          height: 3rem;
      }
      
      .photo-gallery-arrow svg {
          width: 1.5rem; /* 24px */
          height: 1.5rem;
      }
  }

  /* Section Title Container */
  .section-title-container {
      display: flex;
      align-items: center;
      gap: 1rem;
  }

  .section-title-container.mobile {
      gap: 0.75rem;
  }

//   .section-title-container.mobile .section-title-icon {
//       width: 32px;
//       height: 32px;
//   }

//   .section-title-text {
//       color: white;
//       font-size: 1.5rem;
//       font-weight: 600;
//       margin: 0;
//       white-space: nowrap;
//       flex-shrink: 0;
//   }

//   .section-title-text.mobile {
//       font-size: 1.125rem;
//       font-weight: 600;
//   }
/* Old section title styles removed - now handled by responsive typography system */

  .section-title-line {
      flex: 1;
      height: 1px;
      background: #9D72F2;
      margin-left: 0.5rem;
      opacity: 0.6;
  }

  .section-title-container.mobile .section-title-line {
      margin-left: 0.25rem;
  }

  /* Media Title Ellipsis */
//   .media-title-text {
//       overflow: hidden;
//       text-overflow: ellipsis;
//       max-width: 100%;
//       display: -webkit-box;
//       -webkit-line-clamp: 2;
//       line-clamp: 2;
//       -webkit-box-orient: vertical;
//       line-height: 1.4;
//   }

//   /* Mobile: Single line for media titles */
//   @media (max-width: 768px) {
//       .media-title-text {
//           white-space: nowrap;
//           display: block;
//           -webkit-line-clamp: unset;
//           line-clamp: unset;
//           -webkit-box-orient: unset;
//       }
//   }
    /* Old media title styles removed - now handled by responsive typography system */

        /* Featured Cards Container */
        .featured-cards-container {
        position: relative;
            max-width: 100%;
        }

        /* Featured Cards */
        .featured-cards {
            display: flex;
            gap: 1rem;
            overflow-x: auto;
            padding-bottom: 1rem;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .featured-cards::-webkit-scrollbar {
            display: none;
        }

        .featured-card {
            flex-shrink: 0;
            width: 14rem;
        }

        .featured-card-image {
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .featured-card-image:hover {
        transform: scale(1.05);
      }

        .featured-card-image img {
            width: 100%;
            // height: 8rem;
            aspect-ratio: 1.4; /* 7:5 aspect ratio to match hero gallery */
            object-fit: cover;
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        .featured-card-overlay {
        position: absolute;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 0.5rem;
        opacity: 0;
        transition: opacity 0.3s ease;
      }

        .featured-card-image:hover .featured-card-overlay {
        opacity: 1;
      }

        // .play-button {
        //     position: absolute;
        //     bottom: 1rem;
        //     left: 1rem;
        //     background-color: rgba(0, 0, 0, 0.7);
        //     border-radius: 50%;
        //     width: 3rem;
        //     height: 3rem;
        //     display: flex;
        //     align-items: center;
        //     justify-content: center;
        //     transition: background-color 0.3s ease;
        // }

        .featured-card-image:hover .play-button {
            background-color: #9333ea;
        }

        /* Featured Arrow Buttons */
        // .featured-arrow {
        //     position: absolute;
        //     top: 50%;
        //     transform: translateY(-50%);
        //     z-index: 20;
        //     background-color: rgba(255, 255, 255, 0.2);
        //     backdrop-filter: blur(4px);
        //     border-radius: 50%;
        //     width: 40px;
        //     height: 40px;
        //     display: flex;
        //     align-items: center;
        //     justify-content: center;
        //     border: none;
        //     cursor: pointer;
        //     transition: all 0.2s ease;
        //     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        // }

        .featured-arrow:hover {
            background-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-50%) scale(1.05);
            transform-origin: center center;
        }

        // .featured-arrow svg {
        //     width: 20px;
        //     height: 20px;
        //     color: white;
        //     stroke-width: 2;
        // }

        .featured-arrow-left {
            left: -20px;
        }

        .featured-arrow-right {
            right: -20px;
        }

        /* Mobile Adaptive Styles */
        @media (max-width: 768px) {
            .featured-cards {
                gap: 0.75rem;
                padding-bottom: 0.75rem;
            }

            .featured-card {
                width: 12rem;
            }

            .featured-card-image img {
                // height: 8rem;
                aspect-ratio: 1.4; /* Maintain 7:5 aspect ratio on mobile too */
            }

            .play-button {
                width: 2.5rem;
                height: 2.5rem;
                bottom: 0.75rem;
                left: 0.75rem;
            }

            .featured-card-image img {
                border-radius: 0.375rem;
            }

            .featured-card-overlay {
                border-radius: 0.375rem;
            }

            /* Mobile text sizing */
            .featured-card .text-white {
                font-size: 0.875rem;
                line-height: 1.25rem;
            }

            /* Mobile section heading */
            .text-lg.font-semibold {
                font-size: 1rem;
                line-height: 1.5rem;
            }
        }

        /* Pagination Dots */
        .pagination-dots {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
        }

        .pagination-dot {
            width: 0.25rem;
            height: 0.25rem;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .pagination-dot.active {
            background-color: white;
            transform: scale(1.25);
        }

        .pagination-dot:hover:not(.active) {
            background-color: rgba(255, 255, 255, 0.75);
        }

        /* Mobile Specific */
      @media (max-width: 768px) {
            .md\:hidden { display: block !important; }
            .md\:block { display: none !important; }
            
            .photo-card {
                width: 100%;
                height: 100%;
            }
            
            .photo-card.selected {
                transform: scale(1);
            }
            
            .photo-card:hover {
                transform: scale(1);
            }
            
            .photo-card img {
                height: 100%;
                border-radius: 0;
            }
            
            .btn-watch {
                gap: 0.5rem;
          padding: 1rem;
                height: 2.5rem;
                width: 100%;
                max-width: 12rem;
                margin: 0 auto;
                font-size: 0.875rem;
            }
            
            @media (min-width: 640px) {
                .btn-watch {
                    gap: 0.75rem;
                    padding: 0 1.5rem;
                    height: 3rem;
                    max-width: 24rem;
                    font-size: 1rem;
                }
            }
            
            @media (min-width: 1024px) {
                .btn-watch {
                    gap: 0.75rem;
                    padding: 0 2rem;
                    height: 3.5rem;
                    max-width: 28rem;
                    font-size: 1.125rem;
                }
            }
        }

        /* Responsive Typography - Pixel Perfect from React App */
        @media (min-width: 640px) {
            .sm\:text-sm { 
                font-size: 0.875rem; 
                line-height: 1.25rem; 
            }
            .sm\:text-base { 
                font-size: 1rem; 
                line-height: 1.5rem; 
            }
            .sm\:text-lg { 
                font-size: 1.125rem; 
                line-height: 1.75rem; 
            }
            .sm\:text-xl { 
                font-size: 1.25rem; 
                line-height: 1.75rem; 
            }
            .sm\:text-2xl { 
                font-size: 1.5rem; 
                line-height: 2rem; 
            }
            .sm\:text-3xl { 
                font-size: 1.875rem; 
                line-height: 2.25rem; 
            }
            .sm\:text-4xl { 
                font-size: 2.25rem; 
                line-height: 2.5rem; 
            }
            .sm\:text-5xl { 
                font-size: 3rem; 
                line-height: 1; 
            }
            .sm\:gap-2 { gap: 0.5rem; }
            .sm\:gap-3 { gap: 0.75rem; }
            .sm\:px-4 { padding-left: 1rem; padding-right: 1rem; }
            .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
            .sm\:p-4 { padding: 1rem; }
            .sm\:p-6 { padding: 1.5rem; }
            .sm\:mb-1 { margin-bottom: 0.25rem; }
            .sm\:mb-2 { margin-bottom: 0.5rem; }
            .sm\:mb-4 { margin-bottom: 1rem; }
            .sm\:mb-6 { margin-bottom: 1.5rem; }
            .sm\:max-w-sm { max-width: 24rem; }
            .sm\:max-w-md { max-width: 28rem; }
            .sm\:max-w-lg { max-width: 32rem; }
            .sm\:w-4 { width: 1rem; }
            .sm\:w-5 { width: 1.25rem; }
            .sm\:w-6 { width: 1.5rem; }
            .sm\:h-10 { height: 2.5rem; }
            .sm\:h-12 { height: 3rem; }
            .sm\:h-14 { height: 3.5rem; }
        }

        @media (min-width: 768px) {
            .md\:text-base { 
                font-size: 1rem; 
                line-height: 1.5rem; 
            }
            .md\:text-lg { 
                font-size: 1.125rem; 
                line-height: 1.75rem; 
            }
            .md\:text-xl { 
                font-size: 1.25rem; 
                line-height: 1.75rem; 
            }
            .md\:text-4xl { 
                font-size: 2.25rem; 
                line-height: 2.5rem; 
            }
            .md\:text-5xl { 
                font-size: 3rem; 
                line-height: 1; 
            }
            .md\:gap-3 { gap: 0.75rem; }
            .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
            .md\:p-6 { padding: 1.5rem; }
            .md\:mb-4 { margin-bottom: 1rem; }
            .md\:mb-6 { margin-bottom: 1.5rem; }
            .md\:max-w-md { max-width: 28rem; }
            .md\:max-w-lg { max-width: 32rem; }
            .md\:w-5 { width: 1.25rem; }
            .md\:w-6 { width: 1.5rem; }
            .md\:h-12 { height: 3rem; }
            .md\:h-14 { height: 3.5rem; }
        }

        @media (min-width: 1024px) {
            .lg\:text-lg { 
                font-size: 1.125rem; 
                line-height: 1.75rem; 
            }
            .lg\:text-xl { 
                font-size: 1.25rem; 
                line-height: 1.75rem; 
            }
            .lg\:text-4xl { 
                font-size: 2.25rem; 
                line-height: 2.5rem; 
            }
            .lg\:text-5xl { 
                font-size: 3rem; 
                line-height: 1; 
            }
            .lg\:gap-3 { gap: 0.75rem; }
            .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
            .lg\:p-8 { padding: 2rem; }
            .lg\:mb-4 { margin-bottom: 1rem; }
            .lg\:max-w-lg { max-width: 32rem; }
            .lg\:max-w-md { max-width: 28rem; }
            .lg\:w-6 { width: 1.5rem; }
            .lg\:h-14 { height: 3.5rem; }
        }

        /* Hide scrollbars */
        .no-scrollbar {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
      }

        /* Video Modal Styles */
        .video-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 9999;
            background-color: black;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.2s ease-out;
        }

        .video-modal.hidden {
            display: none;
        }

        .video-modal-overlay {
            position: absolute;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.9);
        }

        .video-modal-content {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Close Button */
        .video-modal-close {
            color: white;
            background-color: rgba(0, 0, 0, 0.5);
            border: none;
            border-radius: 50%;
            padding: 0.5rem;
            cursor: pointer;
            backdrop-filter: blur(4px);
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .video-modal-close:hover {
            background-color: rgba(0, 0, 0, 0.7);
            color: #d1d5db;
        }

        .video-modal-close svg {
            width: 1.5rem;
            height: 1.5rem;
        }

        /* Video Title Header */
        .video-modal-title-header {
            flex: 1;
            text-align: center;
            margin: 0 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .video-title-header {
            color: white;
            font-size: 1.1rem;
            font-weight: 600;
            margin: 0;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 0.5rem 1rem;
            border-radius: 6px;
            backdrop-filter: blur(4px);
            white-space: nowrap;
        overflow: hidden;
            text-overflow: ellipsis;
            border: 1px solid rgba(255, 255, 255, 0.1);
            max-width: 100%;
        }

        @media (max-width: 768px) {
            .video-modal-title-header {
                max-width: 50%;
                top: 0.75rem;
            }

            .video-title-header {
                font-size: 0.9rem;
                padding: 0.4rem 0.8rem;
            }
        }



        /* Loading Indicator */
        .video-loading {
            position: absolute;
            inset: 0;
            background-color: black;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 40;
        }

        .video-loading.hidden {
            display: none;
        }

        .loading-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }

        .loading-spinner {
            width: 2rem;
            height: 2rem;
            border: 2px solid rgba(124, 106, 176, 0.3);
            border-top: 2px solid #7c6ab0;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .loading-text {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.875rem;
            font-weight: 500;
            margin: 0;
        }

        /* Video Player Container */
        .video-player-container {
            position: relative;
        width: 100%;
        height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .video-player {
            width: 100%;
            height: 100%;
            object-fit: contain;
            outline: none;
            border: none;
        }

        /* Hide default video controls */
        .video-player::-webkit-media-controls {
            display: none !important;
        }
        .video-player::-webkit-media-controls-enclosure {
            display: none !important;
        }

        /* Video.js Custom Styles */
        .video-js {
            width: 100% !important;
            height: 100% !important;
            background-color: transparent;
        }

        .video-js .vjs-tech {
            object-fit: contain;
        }

        /* Hide default Video.js controls */
        .video-js .vjs-control-bar,
        .video-js .vjs-big-play-button {
            display: none !important;
        }

        .video-js .vjs-loading-spinner {
            display: none !important;
        }

        .video-js .vjs-poster {
            background-size: contain !important;
        }

        /* Disable right-click context menu on video */
        .video-js video,
        .video-js .vjs-tech {
            pointer-events: none;
        }

        .video-player-container {
            pointer-events: auto;
        }

        /* Prevent context menu on video elements */
        .video-js,
        .video-js video,
        .video-js .vjs-tech,
        .video-player-container video {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            context-menu: none;
        }

        /* Ensure our custom controls stay on top */
        .video-controls {
            z-index: 1000;
            pointer-events: auto;
        }

        .video-controls * {
            pointer-events: auto;
        }

        /* Volume Overlay */
        .volume-overlay {
        position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            z-index: 50;
        }

        .volume-overlay.hidden {
            display: none;
        }

        .volume-icon-container {
            background-color: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(4px);
            border-radius: 50%;
            padding: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.2s ease-in-out;
        }

        .volume-icon {
            width: 2rem;
            height: 2rem;
            color: white;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.8); }
            to { opacity: 1; transform: scale(1); }
        }

        /* Video Top Controls */
        .video-top-controls {
            position: absolute;
            top: 0;
        left: 0;
        right: 0;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4), transparent);
        padding: 1.5rem;
            transition: opacity 0.3s ease;
            z-index: 50;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .video-top-controls.hidden {
        opacity: 0;
        }

        /* Video Controls */
        .video-controls {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4), transparent);
            padding: 1.5rem;
        transition: opacity 0.3s ease;
      }

        .video-controls.hidden {
            opacity: 0;
        }

        /* Progress Bar */
        .progress-container {
            margin-bottom: 1rem;
        }

        .progress-bar {
            width: 100%;
            height: 0.25rem;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 9999px;
            cursor: pointer;
            position: relative;
            transition: height 0.2s ease;
        }

        .progress-bar:hover {
            height: 0.5rem;
        }

        .progress-fill {
            height: 100%;
            background-color: white;
            border-radius: 9999px;
            transition: all 0.15s ease;
            width: 0%;
        }

        .progress-bar:hover .progress-fill {
            background-color: #9333ea;
        }

        .progress-handle {
            position: absolute;
            top: 50%;
            left: 0%;
            width: 12px;
            height: 12px;
            background-color: white;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            transition: all 0.15s ease;
            z-index: 10;
        }

        .progress-bar:hover .progress-handle {
            width: 16px;
            height: 16px;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
        }

        /* Controls Container */
        .controls-container {
            position: relative;
        }

        /* Desktop Controls */
        .desktop-controls {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .controls-left,
        .controls-right {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .video-title {
            color: white;
            font-size: 0.875rem;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 300px;
        }

        @media (max-width: 768px) {
            .video-title {
                max-width: 200px;
                font-size: 0.75rem;
            }
        }

        /* Control Buttons */
        .control-btn {
            color: white;
            background: none;
            border: none;
            padding: 0.5rem;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .control-btn:hover {
            // color: #9333ea;
            background-color: rgba(255, 255, 255, 0.1);
        }

        .control-icon {
            width: 1.5rem;
            height: 1.5rem;
        }

        /* Skip Button Icons */
        .skip-icon-container {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .skip-number {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 0.5625rem;
            font-weight: bold;
            color: white;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            width: 0.75rem;
            height: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Volume Control */
        .volume-control {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .volume-slider {
            opacity: 0;
            width: 0;
            overflow: hidden;
            transition: all 0.2s ease;
        }

        .volume-control:hover .volume-slider {
        opacity: 1;
            width: 5rem;
        }

        .volume-range {
            width: 100%;
            height: 0.25rem;
            background: #4b5563;
            border-radius: 9999px;
            appearance: none;
            cursor: pointer;
        }

        .volume-range::-webkit-slider-thumb {
            appearance: none;
            height: 0.75rem;
            width: 0.75rem;
            border-radius: 50%;
            background: #7c6ab0;
            cursor: pointer;
            border: 2px solid #ffffff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .volume-range::-moz-range-thumb {
            height: 0.75rem;
            width: 0.75rem;
            border-radius: 50%;
            background: #7c6ab0;
            cursor: pointer;
            border: 2px solid #ffffff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        /* Time Display */
        .time-display {
        color: white;
            font-size: 0.875rem;
            font-weight: 500;
        }

        /* Mobile Controls */
        .mobile-controls {
            display: none;
            flex-direction: column;
            gap: 1rem;
        }

        .mobile-controls-main {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;
        }

        .mobile-controls-secondary {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .mobile-controls-left,
        .mobile-controls-right {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .mobile-time-display {
            color: white;
            font-size: 0.875rem;
            font-weight: 500;
        }

        .mobile-control-btn {
            color: white;
            background: none;
            border: none;
            padding: 0.75rem;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mobile-control-btn:hover {
            // color: #9333ea;
            background-color: rgba(255, 255, 255, 0.1);
        }

        .mobile-play-btn {
            padding: 1rem;
        }

        .mobile-control-icon {
            width: 1.5rem;
            height: 1.5rem;
        }

        .mobile-control-icon-large {
            width: 2rem;
            height: 2rem;
        }

        .mobile-skip-icon-container {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mobile-skip-number {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 0.625rem;
            font-weight: bold;
            color: white;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            width: 0.875rem;
            height: 0.875rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Fullscreen Controls */
        .video-js.vjs-fullscreen .video-top-controls,
        .video-js.vjs-fullscreen .video-controls {
            display: flex;
            opacity: 1;
            z-index: 9999;
        }

        .video-js.vjs-fullscreen .video-top-controls.hidden,
        .video-js.vjs-fullscreen .video-controls.hidden {
            opacity: 0;
        }

        .video-js.vjs-fullscreen .video-top-controls {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
        }

        .video-js.vjs-fullscreen .video-controls {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
        }

        /* Mobile Responsive */
      @media (max-width: 768px) {
            .desktop-controls {
                display: none;
            }
            
            .mobile-controls {
                display: flex;
            }
            
            .video-controls {
          padding: 1rem;
        }
        
            .video-top-controls {
                padding: 1rem;
            }
            
            .progress-container {
                margin-bottom: 1.5rem;
            }
            
            .progress-bar {
                height: 0.5rem;
            }
        }

        /* Video Title in Bottom Controls */
  .video-title-bottom {
    color: white;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    margin: 0;
    padding: 0;
    display: block;
  }

  /* Mobile Video Title */
  .mobile-video-title {
    color: white;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    margin-bottom: 4px;
  }

  .mobile-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  /* More aggressive Video.js controls hiding */
  .video-player .vjs-control-bar,
  .video-player .vjs-big-play-button,
  .video-player .vjs-loading-spinner,
  .video-player .vjs-poster,
  .video-player .vjs-menu-button,
  .video-player .vjs-playback-rate-menu-button,
  .video-player .vjs-chapters-button,
  .video-player .vjs-descriptions-button,
  .video-player .vjs-captions-button,
  .video-player .vjs-subtitles-button,
  .video-player .vjs-audio-button,
  .video-player .vjs-fullscreen-control,
  .video-player .vjs-volume-panel,
  .video-player .vjs-current-time,
  .video-player .vjs-time-divider,
  .video-player .vjs-duration,
  .video-player .vjs-remaining-time,
  .video-player .vjs-progress-control,
  .video-player .vjs-play-control {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Hide all Video.js UI components */
  .vjs-control-bar,
  .vjs-big-play-button,
  .vjs-menu,
  .vjs-modal-dialog,
  .vjs-poster {
    display: none !important;
  }

  @media (max-width: 768px) {
    .video-title-bottom {
      font-size: 12px;
      max-width: 200px;
    }
    
    .mobile-video-title {
      font-size: 11px;
      max-width: 120px;
    }
  }

        /* Share Modal Styles */
        .share-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.2s ease-out;
        }

        .share-modal-overlay {
            position: absolute;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(4px);
        }

        .share-modal-content {
            position: relative;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            border-radius: 16px;
            width: 90%;
            max-width: 480px;
            max-height: 80vh;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .share-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .share-modal-header h3 {
            color: white;
            font-size: 1.25rem;
            font-weight: 600;
            margin: 0;
        }

        .share-modal-close {
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.7);
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0.25rem;
            line-height: 1;
            transition: color 0.2s ease;
        }

        .share-modal-close:hover {
            color: white;
        }

        .share-modal-body {
            padding: 1.5rem;
        }

        .share-modal-body p {
            color: rgba(255, 255, 255, 0.8);
            margin: 0 0 1rem 0;
            font-size: 0.875rem;
        }

        .share-link-container {
            display: flex;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }

        .share-link-container input {
            flex: 1;
            padding: 0.75rem;
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            color: white;
            font-size: 0.875rem;
        }

        .share-link-container input:focus {
            outline: none;
            border-color: #7c6ab0;
            box-shadow: 0 0 0 2px rgba(124, 106, 176, 0.2);
        }

        .copy-btn {
            padding: 0.75rem 1rem;
            background: linear-gradient(135deg, #7c6ab0, #9d72f0);
            border: none;
            border-radius: 8px;
            color: white;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .copy-btn:hover {
            background: linear-gradient(135deg, #6b5a9d, #8a61dd);
            transform: translateY(-1px);
        }

        .share-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 0.75rem;
        }

        .share-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            padding: 1rem;
            background-color: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            color: white;
            font-size: 0.75rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

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

        .share-btn.facebook:hover {
            background-color: rgba(24, 119, 242, 0.2);
            border-color: #1877f2;
        }

        .share-btn.twitter:hover {
            background-color: rgba(29, 161, 242, 0.2);
            border-color: #1da1f2;
        }

        .share-btn.whatsapp:hover {
            background-color: rgba(37, 211, 102, 0.2);
            border-color: #25d366;
        }

        /* Toast Notification */
        .toast-notification {
            position: fixed;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            color: white;
            padding: 1rem 1.5rem;
            border-radius: 8px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.875rem;
            font-weight: 500;
            z-index: 10001;
            opacity: 0;
            transition: all 0.3s ease;
            backdrop-filter: blur(8px);
        }

        .toast-notification.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        @media (max-width: 768px) {
            .share-modal-content {
                width: 95%;
                margin: 1rem;
            }
            
            .share-buttons {
          grid-template-columns: 1fr;
                gap: 0.5rem;
            }
            
            .share-btn {
                flex-direction: row;
                justify-content: center;
                padding: 0.75rem;
            }
            
            .share-link-container {
                flex-direction: column;
            }
            
            .copy-btn {
                width: 100%;
            }
        }

        /* Download Modal Styles */
        .download-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.2s ease-out;
        }

        .download-modal.hidden {
            display: none;
        }

        .download-modal-overlay {
            position: absolute;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(4px);
        }

        .download-modal-content {
            position: relative;
            background-color: #0a0a0a;
            border-radius: 12px;
            width: 95%;
            max-width: 1200px;
            height: 90vh;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .download-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.5rem 2rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            background-color: rgba(255, 255, 255, 0.02);
            flex-shrink: 0;
        }

        .download-modal-header h2 {
            color: white;
            font-size: 1.5rem;
            font-weight: 600;
            margin: 0;
        }

        .download-modal-close {
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 50%;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .download-modal-close:hover {
            color: white;
            background-color: rgba(255, 255, 255, 0.1);
        }

        .download-modal-body {
            display: flex;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }

        /* Left Sidebar - Sections */
        .download-sections {
            width: 300px;
            background-color: rgba(255, 255, 255, 0.02);
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            overflow-y: auto;
        }

        .download-section-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.5rem;
            color: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            transition: all 0.2s ease;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .download-section-item:hover {
            background-color: rgba(255, 255, 255, 0.05);
            color: white;
        }

        .download-section-item.active {
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
            border-left: 3px solid #fff;
        }

        .download-section-title {
            font-weight: 500;
            font-size: 0.95rem;
        }

        .download-section-count {
            background-color: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.8);
            padding: 0.25rem 0.5rem;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        /* Right Content - Media List */
        .download-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
            overflow: hidden;
        }

        .download-content-header {
            padding: 1rem 2rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            background-color: rgba(255, 255, 255, 0.02);
            flex-shrink: 0;
        }

        .download-quality-controls {
            display: flex;
            align-items: center;
          gap: 1rem;
        }

        .quality-label {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.875rem;
            font-weight: 500;
        }

        .quality-select {
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            color: white;
            padding: 0.5rem 0.75rem;
            font-size: 0.875rem;
            cursor: pointer;
        }

        .quality-select:focus {
            outline: none;
            border-color: #7c6ab0;
            box-shadow: 0 0 0 2px rgba(124, 106, 176, 0.2);
        }

        .download-media-list {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 1rem 2rem;
            min-height: 0;
        }

        .download-media-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0.75rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            min-height: 80px;
            width: 100%;
        }

        .download-media-item:last-child {
            border-bottom: none;
        }

        .download-media-thumbnail {
            width: 80px;
            height: 60px;
            border-radius: 6px;
            object-fit: cover;
            flex-shrink: 0;
        }

        .download-media-info {
            flex: 3;
            min-width: 0;
            overflow: hidden;
        }

        .download-media-title {
            color: white;
            font-size: 0.95rem;
            font-weight: 500;
            margin-bottom: 0.25rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
            display: block;
        }

        .download-media-details {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.8rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .download-media-actions {
            flex: 1;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 120px;
        }

        .download-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            min-width: 120px;
            height: 2.5rem;
            font-size: 0.875rem;
            font-weight: 500;
            color: white;
            border-radius: 0.375rem;
            transition: all 0.2s ease-in-out;
            background: linear-gradient(to bottom, #AB80FB, #663AC1);
            border: none;
            cursor: pointer;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 4px rgba(156,163,175,0.3);
            border-bottom: 2px solid #663AC1;
            white-space: nowrap;
        }

        .download-btn:hover {
            background: linear-gradient(to bottom, #9966ff, #5a2d9f);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 4px rgba(156,163,175,0.3);
        }

        .download-btn:focus {
            outline: none;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 4px rgba(156,163,175,0.3), 0 0 0 2px rgba(171,128,251,0.5);
        }

        .download-btn:active {
            transform: translateY(1px);
        }

        /* Tablet Landscape */
        @media (max-width: 1024px) {
            .download-modal-content {
                width: 95%;
                height: 85vh;
            }

            .download-sections {
                width: 300px;
            }

            .download-media-actions {
                min-width: 100px;
            }

            .download-btn {
                min-width: 90px;
                padding: 0.4rem 0.6rem;
                font-size: 0.8rem;
            }
        }

        /* Tablet Portrait & Mobile Landscape */
        @media (max-width: 768px) {
            .download-modal-content {
                width: 95%;
                height: 90vh;
                margin: 5vh auto;
            }

            .download-modal-header {
                padding: 1rem 1.5rem;
            }

            .download-modal-body {
                flex-direction: column;
            }

            .mobile-section-selector {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 1rem 1.5rem;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                background-color: rgba(255, 255, 255, 0.02);
            }

            .mobile-section-display {
                display: flex;
                align-items: center;
                gap: 0.75rem;
            }

            .mobile-section-display span {
                font-weight: 500;
                font-size: 1rem;
                color: rgba(255, 255, 255, 0.9);
            }

            .mobile-section-toggle {
                background: none;
                border: none;
                color: rgba(255, 255, 255, 0.7);
                cursor: pointer;
                padding: 0.5rem;
                border-radius: 6px;
                transition: all 0.2s ease;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .mobile-section-toggle:hover {
                background-color: rgba(255, 255, 255, 0.1);
                color: white;
            }

            .toggle-icon {
                width: 1.25rem;
                height: 1.25rem;
                transition: transform 0.3s ease;
            }

            .download-sections {
                display: flex;
                flex-direction: column;
                width: 100%;
                max-height: 0;
                overflow: hidden;
                background-color: rgba(255, 255, 255, 0.02);
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                transition: max-height 0.3s ease, opacity 0.3s ease;
                opacity: 0;
                padding: 0;
                margin: 0;
                height: 0;
            }

            .download-sections.mobile-expanded {
                max-height: 50vh;
                opacity: 1;
                overflow-y: auto;
                padding: 0;
                height: auto;
            }

            .download-section-item {
                padding: 1rem 1.5rem;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
                cursor: pointer;
                transition: all 0.2s ease;
                display: flex;
                align-items: center;
                justify-content: space-between;
                transform: translateY(-10px);
                opacity: 0;
                transition: all 0.3s ease;
            }

            .download-sections.mobile-expanded .download-section-item {
                transform: translateY(0);
                opacity: 1;
            }

            .download-sections.mobile-expanded .download-section-item:nth-child(1) { transition-delay: 0.05s; }
            .download-sections.mobile-expanded .download-section-item:nth-child(2) { transition-delay: 0.1s; }
            .download-sections.mobile-expanded .download-section-item:nth-child(3) { transition-delay: 0.15s; }
            .download-sections.mobile-expanded .download-section-item:nth-child(4) { transition-delay: 0.2s; }
            .download-sections.mobile-expanded .download-section-item:nth-child(5) { transition-delay: 0.25s; }

            .download-section-item:last-child {
                border-bottom: none;
            }

            .download-section-item:hover {
                background-color: rgba(255, 255, 255, 0.05);
            }

            .download-section-item.active {
                background-color: rgba(255, 255, 255, 0.1);
                border-left: 3px solid #fff;
            }

            .download-section-title {
                font-weight: 500;
                font-size: 0.95rem;
                color: rgba(255, 255, 255, 0.9);
            }

            .download-section-count {
                background-color: rgba(255, 255, 255, 0.1);
                color: rgba(255, 255, 255, 0.8);
                padding: 0.25rem 0.5rem;
                border-radius: 12px;
                font-size: 0.75rem;
                font-weight: 500;
            }

            .download-content {
                flex: 1;
                min-height: 0;
            }

            .download-content-header {
                padding: 1rem;
            }

            .download-media-list {
                padding: 1rem;
            }

            .download-media-item {
                flex-direction: row;
                align-items: center;
                gap: 1rem;
                padding: 1rem 0;
                text-align: left;
            }

            .download-media-thumbnail {
                width: 80px;
                height: 60px;
                max-width: 80px;
                align-self: flex-start;
            }

            .download-media-info {
                flex: 1;
                overflow: hidden;
            }

            .download-media-title {
                white-space: nowrap;
                line-height: 1.4;
                margin-bottom: 0.25rem;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 0.9rem;
            }

            .download-media-details {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 0.8rem;
            }

            .download-media-actions {
                width: auto;
                justify-content: flex-end;
                min-width: auto;
                flex: none;
            }

            .download-btn {
                width: auto;
                max-width: none;
                min-width: auto;
            }
        }


        /* Additional mobile fixes for very small screens */
        @media (max-width: 480px) {
            .download-sections.mobile-expanded {
                max-height: 45vh;
                height: auto;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }

            .download-section-item {
                padding: 0.75rem 1rem;
                min-height: 50px;
            }

            .mobile-section-selector {
                padding: 0.75rem 1rem;
            }
        }

        /* Desktop - Hide mobile section selector */
        @media (min-width: 769px) {
            .mobile-section-selector {
                display: none;
            }
        }

        /* Landscape warning for mobile */
        .landscape-warning {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            background: rgba(0, 0, 0, 0.95) !important;
            z-index: 99999 !important;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
            padding: 2rem;
        }

        .landscape-warning h2 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: #ff6b6b;
        }

        .landscape-warning p {
            font-size: 1rem;
            line-height: 1.5;
            max-width: 300px;
        }

        .landscape-warning .rotate-icon {
            width: 60px;
            height: 60px;
            margin-bottom: 1rem;
            animation: rotate 2s ease-in-out infinite;
        }

        @keyframes rotate {
            0% { transform: rotate(0deg); }
            25% { transform: rotate(90deg); }
            75% { transform: rotate(90deg); }
            100% { transform: rotate(0deg); }
        }

        /* Mobile Portrait */
        @media (max-width: 480px) {
            .download-modal-content {
                width: 100%;
                height: 100vh;
                margin: 0;
                border-radius: 0;
            }

            .download-modal-header {
                padding: 1rem;
            }

            .download-modal-header h2 {
                font-size: 1.25rem;
            }

            .download-section-item {
                min-width: 120px;
                height: 70px;
                padding: 0.75rem;
            }

            .download-section-title {
                font-size: 0.85rem;
            }

            .download-section-count {
                font-size: 0.7rem;
            }

            .download-content-header {
                padding: 0.75rem;
            }

            .download-media-list {
                padding: 0.75rem;
            }

            .download-media-item {
                padding: 1rem 0;
            }

            .download-media-title {
                font-size: 0.95rem;
            }
        }

        /* Playlist Side Panel Styles */
        .playlist-panel {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10001;
            display: flex;
            align-items: stretch;
            justify-content: flex-end;
            animation: fadeIn 0.3s ease-out;
        }

        .playlist-panel.hidden {
            display: none;
        }

        .playlist-overlay {
            position: absolute;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(2px);
        }

        .playlist-content {
            position: relative;
            background-color: rgba(45, 45, 45, 0.95);
            width: 420px;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            transform: translateX(0);
            animation: slideInRight 0.3s ease-out;
        }

        @keyframes slideInRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        .playlist-view {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .playlist-view.hidden {
            display: none;
        }

        .playlist-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            background-color: rgba(0, 0, 0, 0.3);
            flex-shrink: 0;
            min-height: 60px;
        }

        .playlist-title {
            color: white;
            font-size: 1.2rem;
            font-weight: 600;
            margin: 0;
        }

        .playlist-section-title {
            color: white;
            font-size: 1.1rem;
            font-weight: 500;
            margin: 0;
        }

        .playlist-close-btn,
        .playlist-back-btn {
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.8);
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 4px;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0.5rem;
            font-size: 0.875rem;
        }

        .playlist-close-btn:hover,
        .playlist-back-btn:hover {
            color: white;
            background-color: rgba(255, 255, 255, 0.1);
        }

        .playlist-header-spacer {
            width: 32px; /* Same as close button */
        }

        .playlist-body {
            flex: 1;
            overflow-y: auto;
            padding: 0;
        }

        /* Section List Styles */
        .playlist-sections-list {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .playlist-section-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.5rem;
            color: white;
            cursor: pointer;
            transition: all 0.2s ease;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            background-color: rgba(255, 255, 255, 0.02);
        }

        .playlist-section-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .playlist-section-item.selected {
            background-color: rgba(255, 255, 255, 0.15);
            border-left: 3px solid #fff;
        }

        .playlist-section-name {
            font-size: 1rem;
            font-weight: 500;
        }

        .playlist-section-arrow {
            color: rgba(255, 255, 255, 0.6);
            transition: transform 0.2s ease;
        }

        .playlist-section-item:hover .playlist-section-arrow {
            transform: translateX(4px);
        }

        /* Episodes List Styles */
        .playlist-episodes-list {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .playlist-episode-item {
            display: flex;
            align-items: flex-start;
            padding: 1rem 1.5rem;
            color: white;
            cursor: pointer;
            transition: all 0.2s ease;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            background-color: rgba(255, 255, 255, 0.02);
            position: relative;
        }

        .playlist-episode-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .playlist-episode-item.current {
            background-color: rgba(255, 255, 255, 0.15);
            border-left: 3px solid #fff;
        }

        .playlist-episode-number {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9rem;
            font-weight: 500;
            margin-right: 1rem;
            flex-shrink: 0;
            width: 20px;
        }

        .playlist-episode-thumbnail {
            width: 80px;
            height: 45px;
            object-fit: cover;
            border-radius: 4px;
            margin-right: 1rem;
            flex-shrink: 0;
        }

        .playlist-episode-info {
            flex: 1;
            min-width: 0;
        }

        .playlist-episode-title {
            font-size: 0.95rem;
            font-weight: 500;
            margin-bottom: 0.25rem;
            line-height: 1.2;
        }

        .playlist-episode-description {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .playlist-current-indicator {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #fff;
            font-size: 0.8rem;
        }

        /* Mobile responsive adjustments */
        @media (max-width: 768px) {
            .playlist-content {
                width: 100vw;
            }
            
            .playlist-episode-thumbnail {
                width: 60px;
                height: 34px;
            }
            
            .playlist-episode-title {
                font-size: 0.9rem;
            }
            
            .playlist-episode-description {
                font-size: 0.75rem;
            }
        }

        .action-btn-glass {
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            background: rgba(255,254,254,0.2); /* Same as experience capsule */
            border: none;
            border-radius: 50%;
            color: white;
            cursor: pointer;
            transition: all 0.2s;
            backdrop-filter: blur(4px); /* Same as experience capsule */
        }
        .action-btn-glass:hover {
            background: rgba(255,254,254,0.3); /* Slightly more opaque on hover */
            transform: scale(1.05);
      }

    /* Brand Details Styles */
    .brand-details-container {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        text-decoration: none;
        cursor: pointer;
        transition: opacity 0.2s ease;
    }
    
    .brand-details-container:hover {
        text-decoration: none;
        opacity: 0.8;
    }
    
    .brand-logo {
        height: 3rem;
        width: auto;
        object-fit: contain;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 50%;
        padding: 0.375rem;
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
    }
    
    .brand-name {
        color: white;
        font-size: 1rem;
        font-weight: 500;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
        white-space: nowrap;
        text-decoration: none;
        /* background: rgba(0, 0, 0, 0.2); */
        /* padding: 0.25rem 0.5rem; */
        /* border-radius: 0.375rem; */
        backdrop-filter: blur(4px);
    }
    
    /* Brand Modal Styles */
    .brand-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(4px);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }
    
    .brand-modal-content {
        background: rgba(245, 245, 240, 0.15);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 1rem;
        padding: 2rem;
        width: 100%;
        max-width: 320px;
        text-align: center;
        position: relative;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    }
    
    .brand-modal-logo {
        margin-bottom: 0.125rem;
    }
    
    .brand-modal-logo-img {
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        object-fit: contain;
        background: rgba(0, 0, 0, 0.1);
        padding: 0.5rem;
    }
    
    .brand-modal-title {
        color: white;
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0 0 2rem 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    }
    
    .brand-modal-visit-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: white;
        color: black;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 0.75rem 1.25rem;
        border-radius: 0.5rem;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
        margin-bottom: 2rem;
        transition: all 0.2s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    
    .brand-modal-visit-btn:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
        text-decoration: none;
    }
    
    .brand-modal-visit-icon {
        width: 16px;
        height: 16px;
    }
    
    .brand-modal-follow {
        margin-bottom: 2rem;
    }
    
    .brand-modal-follow-title {
        color: rgba(255, 255, 255, 0.9);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        margin: 0 0 1rem 0;
        text-transform: uppercase;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    }
    
    .brand-modal-social-icons {
        display: flex;
        justify-content: center;
        gap: 0.75rem;
        flex-wrap: wrap;
    }
    
    .brand-modal-social-icon {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        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);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.8);
        transition: all 0.2s ease;
        text-decoration: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    .brand-modal-social-icon:hover {
        background: rgba(255, 255, 255, 0.2);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        text-decoration: none;
    }
    
    .brand-modal-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.75rem;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
        text-decoration: none;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .brand-modal-footer:hover {
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
    }
    
    .brand-modal-footer-text {
        font-weight: 400;
    }
    
    .brand-modal-footer-logo {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 3px;
        object-fit: contain;
        filter: brightness(1.2) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    }
    
    @media (max-width: 768px) {
        .brand-logo {
            height: 2rem;
            padding: 0.25rem;
        }
        
        .brand-name {
            font-size: 1rem;
        }
        
        .brand-details-container {
            gap: 0.5rem;
        }
        
        .brand-modal-content {
            padding: 1.5rem;
            max-width: 280px;
        }
        
        .brand-modal-logo-img {
            width: 3rem;
            height: 3rem;
        }
        
        .brand-modal-title {
            font-size: 1.125rem;
        }
        
        .brand-modal-social-icon {
            width: 2.25rem;
            height: 2.25rem;
        }
    }

    /* Google Cast Info Modal Styles */
  .cast-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      padding: 1rem;
  }

  .cast-modal {
      background: #2a2a2a;
      border-radius: 12px;
      max-width: 60vw;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  }

  .cast-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px 0 24px;
      border-bottom: none;
  }

  .cast-modal-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: white;
      margin: 0;
  }

  .cast-modal-close {
      background: none;
      border: none;
      color: #888;
      cursor: pointer;
      padding: 4px;
      border-radius: 4px;
      transition: color 0.2s ease;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .cast-modal-close:hover {
      color: white;
      background: rgba(255, 255, 255, 0.1);
  }

  .cast-modal-content {
      padding: 20px 24px 24px 24px;
  }

  .cast-modal-text {
      color: #ccc;
      font-size: 0.9rem;
      line-height: 1.5;
      margin: 0 0 20px 0;
  }

  .cast-modal-checkbox {
      margin: 20px 0;
  }

  .cast-checkbox-label {
      display: flex;
      align-items: center;
      cursor: pointer;
      color: #ccc;
      font-size: 0.9rem;
  }

  .cast-checkbox {
      margin: 0 8px 0 0;
      width: 16px;
      height: 16px;
      accent-color: #007AFF;
  }

  .cast-checkbox-text {
      user-select: none;
  }

  .cast-modal-ok-btn {
      background: rgb(129 84 219 / var(--tw-bg-opacity, 1));
      color: white;
      border: none;
      border-radius: 8px;
      padding: 12px 24px;
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s ease;
      min-width: 80px;
  }

  .cast-modal-ok-btn:hover {
      background: rgb(129 84 219 / var(--tw-bg-opacity, 1));
  }
      @media (max-width: 768px) {
        /* Hide cast info modal on mobile devices */
        #castInfoModal {
            display: none !important;
        }
    }