/* ========================================
   RED TEXT: h2, p, tagline, descriptions
   ======================================== */
   h2,
   p,
   .media-description,
    {
     color: #FF0000 !important;
     text-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
     font-weight: 700;
   }
   
   /* Special: Keep caption overlay white (for readability on dark bg) */
   .caption-overlay p {
     color: #FFFFFF !important;
     text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
   }
   
   /* Optional: Make h2 bigger & bolder */
   h2 {
     font-size: 2.2rem;
     margin: 30px 0 15px;
     letter-spacing: 1px;
   }
   
   /* Optional: Tagline more dramatic */
   .tagline {
     font-size: 1.3rem;
     margin: 35px 0;
     letter-spacing: 1.5px;
     text-transform: uppercase;
   }
   
   /* ========================================
      CAROUSEL BUTTONS
      ======================================== */
   .carousel-buttons {
     display: flex;
     justify-content: center;
     gap: 12px;
     padding: 20px;
     flex-wrap: wrap;
     background: #111;
     border-radius: 15px;
     margin: 40px auto;
     max-width: 1000px;
   }
   .carousel-btn {
     background: #333;
     color: #fff;
     border: 2px solid #FF0000;
     padding: 14px 24px;
     border-radius: 10px;
     font-weight: 700;
     cursor: pointer;
     transition: .3s;
     font-family: 'Poppins', sans-serif;
   }
   .carousel-btn.active,
   .carousel-btn:hover {
     background: #FF0000;
     color: #000;
     box-shadow: 0 0 15px rgba(255, 0, 0, 0.6);
   }
   
   /* ========================================
      CAROUSEL CONTENT
      ======================================== */
   .carousel-content {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
   }
   .carousel-section {
     display: none;
     opacity: 0;
     transition: opacity .5s ease;
   }
   .carousel-section.active {
     display: block;
     opacity: 1;
     animation: fade .6s ease;
   }
   @keyframes fade {
     from { opacity: 0; transform: translateY(10px); }
     to { opacity: 1; transform: translateY(0); }
   }
   
   /* ========================================
      MEDIA GALLERY
      ======================================== */
   .media-gallery {
     display: flex;
     overflow-x: auto;
     gap: 18px;
     padding: 15px 0;
     scroll-snap-type: x mandatory;
     scrollbar-color: #FF0000 #111;
   }
   .media-gallery::-webkit-scrollbar {
     height: 10px;
   }
   .media-gallery::-webkit-scrollbar-track {
     background: #111;
     border-radius: 10px;
   }
   .media-gallery::-webkit-scrollbar-thumb {
     background: #FF0000;
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(255,0,0,.8);
   }
   
   /* ========================================
      MEDIA ITEM WRAPPER
      ======================================== */
   .media-item-wrapper {
     flex: 0 0 280px;
     position: relative;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
     cursor: pointer;
     transition: transform .3s ease, box-shadow .3s ease;
   }
   .media-item-wrapper:hover {
     transform: translateY(-6px);
     box-shadow: 0 0 30px rgba(255, 0, 0, 0.8);
   }
   
   /* Title Badge */
   .media-item-wrapper h5 {
     position: absolute;
     top: 10px;
     left: 10px;
     background: rgba(0, 0, 0, 0.85);
     color: #fff;
     padding: 6px 12px;
     border-radius: 8px;
     font-size: 13px;
     font-weight: 600;
     z-index: 10;
     backdrop-filter: blur(4px);
     border: 1px solid #FF0000;
   }
   
   /* ========================================
      MEDIA CONTAINER (Video/Image + Overlays)
      ======================================== */
   .media-container {
     position: relative;
     width: 100%;
     height: 220px;
     overflow: hidden;
   }
   .clickable-media {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform .4s ease;
   }
   .media-container:hover .clickable-media {
     transform: scale(1.08);
   }
   
   /* Play Button Overlay */
   .play-overlay {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 64px;
     height: 64px;
     background: rgba(255, 0, 0, 0.9);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 28px;
     color: white;
     opacity: 0;
     transition: opacity .3s ease, transform .3s ease;
     pointer-events: none;
     z-index: 5;
     box-shadow: 0 0 20px rgba(255, 0, 0, 0.7);
   }
   .media-container:hover .play-overlay {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1.1);
   }
   .play-overlay i {
     margin-left: 3px;
   }
   
   /* Caption Overlay (Bottom Fade) */
   .caption-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(transparent, rgba(0,0,0,0.9));
     color: #fff;
     padding: 30px 15px 15px;
     font-size: 13px;
     text-align: center;
     opacity: 0;
     transition: opacity .4s ease;
     pointer-events: none;
     z-index: 5;
   }
   .media-container:hover .caption-overlay {
     opacity: 1;
   }
   
   /* Pulse Animation */
   @keyframes pulse {
     0%   { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.8); }
     70%  { box-shadow: 0 0 0 18px rgba(255, 0, 0, 0); }
     100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
   }
   .play-overlay {
     animation: pulse 2s infinite;
   }
   
   /* ========================================
      FULLSCREEN LIGHTBOX
      ======================================== */
   .fs-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.98);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 9999;
     opacity: 0;
     pointer-events: none;
     transition: opacity .4s ease;
     padding: 40px;
   }
   .fs-overlay.active {
     opacity: 1;
     pointer-events: all;
     animation: fadeIn 0.4s ease;
   }
   @keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 1; }
   }
   .fs-media {
     max-width: calc(100vw - 80px);
     max-height: calc(100vh - 80px);
     object-fit: contain;
     border: 6px solid #FF0000;
     border-radius: 12px;
     box-shadow: 0 0 40px rgba(255, 0, 0, 0.9);
   }
   .close-btn {
     position: absolute;
     top: 20px;
     right: 20px;
     background: rgba(255, 255, 255, 0.15);
     color: #fff;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     font-size: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     backdrop-filter: blur(8px);
     border: 2px solid #FF0000;
     transition: .3s;
   }
   .close-btn:hover {
     background: #FF0000;
     color: #000;
     transform: rotate(90deg);
   }