body {
      background-color: #f8f9fa;
      font-family: "Inter", sans-serif;
    }

    /* 1. The Scroller Wrapper */
    /* This hides the overflowing content */
    .scroller-wrapper {
      overflow: hidden;
      /* Optional: Adds a fade effect at the edges */
      -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
      mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    }

    /* 2. The Scroller */
    /* This is the element we animate */
    .scroller {
      display: flex;
      width: max-content; /* Makes width fit all content */
      gap: 1.25rem; /* Space between cards (use 1rem, 1.25rem, 1.5rem) */
      /* Animation: name, duration, timing, iteration */
      animation: scroll-rtl 40s linear infinite;
    }

    /* 3. The Animation */
    @keyframes scroll-rtl {
      0% {
        transform: translateX(0);
      }
      100% {
        /* Moves left by half its width (the width of one set of items) */
        transform: translateX(-50%);
      }
    }

    /* 4. Pause on Hover */
    /* This is essential so users can click a video! */
    .scroller-wrapper:hover .scroller {
      animation-play-state: paused;
    }

    /* 5. The Review Card */
    .review-card {
      position: relative;
      width: 280px; /* A fixed width for consistent scrolling */
      flex-shrink: 0; /* Prevents items from shrinking */
      border: none;
      border-radius: 1rem; /* Nice rounded corners */
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .review-card:hover {
      transform: scale(1.05); /* Lifts the card on hover */
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    }

    .review-card img {
      width: 100%;
      height: 420px; /* Taller card, like in your screenshot */
      object-fit: cover; /* Ensures image fills the space */
      display: block;
    }

    /* 6. Play Icon Overlay */
    .play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 4rem; /* Big play icon */
      color: rgba(255, 255, 255, 0.8);
      text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
      transition: color 0.3s ease;
    }

    .review-card:hover .play-icon {
      color: #fff;
    }

    /* 7. Bootstrap Modal Styling */
    /* Make the modal responsive for video */
    .modal-video .modal-body {
      padding: 0;
      line-height: 0; /* Removes extra space around iframe */
    }

    .modal-video iframe {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9; /* Ensures 16:9 responsive video */
      border: none;
    }

    /* Custom modal size for better video viewing */
    @media (min-width: 992px) {
      .modal-lg-video {
        --bs-modal-width: 900px;
      }
    }







     /* 1. The wrapper hides the overflowing content */
    .scroller-wrapper {
      overflow: hidden;
      /* Optional: Add a fade effect at the edges */
      -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
      mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    }

    /* 2. The scroller is the element we animate */
    .scroller {
      display: flex;
      width: max-content; /* Makes the width fit all content */
      gap: 1rem; /* Space between items */
    }

    /* 3. Define the animations */
    @keyframes scroll-rtl {
      0% {
        transform: translateX(0);
      }
      100% {
        /* Moves left by half its width (the width of one set of items) */
        transform: translateX(-50%);
      }
    }

    @keyframes scroll-ltr {
      0% {
        transform: translateX(-50%);
      }
      100% {
        /* Moves right back to the start */
        transform: translateX(0);
      }
    }

    /* 4. Apply the animations */
    .scroller-right-to-left {
      animation: scroll-rtl 45s linear infinite;
    }

    .scroller-left-to-right {
      animation: scroll-ltr 45s linear infinite;
    }

    /* 5. Pause animation on hover (good UX) */
    .scroller-wrapper:hover .scroller {
      animation-play-state: paused;
    }

    /* 6. Styling for the image cards */
    .scroll-card {
      width: 320px; /* Fixed width for consistency */
      flex-shrink: 0; /* Prevents items from shrinking */
      border-radius: 0.75rem; /* Matches your image */
      overflow: hidden; /* Clips the image to the rounded corners */
    }

    .scroll-card img {
      width: 100%;
      height: 220px; /* Fixed height for all images */
      object-fit: cover; /* Ensures image fills the space, cropping as needed */
      display: block;
    }

    /* ---------------------------------
       Bonus: Top Offer Bar
    --------------------------------- */
    .offer-bar {
      background-color: #552020;
      color: #fff;
      padding: 0.5rem 0;
      overflow: hidden;
      white-space: nowrap; /* Prevents text from wrapping */
    }
    
    .offer-bar-content {
      display: inline-block; /* Allows animation */
      padding-left: 100%; /* Starts the animation off-screen */
      animation: marquee-rtl 30s linear infinite;
    }
    
    .offer-bar-content span {
      margin-right: 50px;
    }

    @keyframes marquee-rtl {
      0% { transform: translateX(0); }
      100% { transform: translateX(-100%); }
    }