.marquee {
        background: var(--primary);
        color: white;
        padding: 0.75rem 0;
        overflow: hidden;
        position: relative;
      }

      .marquee-content {
        display: inline-block;
        white-space: nowrap;
        animation: marquee 20s linear infinite;
      }

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

        100% {
          transform: translateX(-100%);
        }
      }

      .marquee:hover .marquee-content {
        animation-play-state: paused;
      }

        /* Stop animation on hover */
      .marquee-link:hover {
        animation-play-state: paused;
      }

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

        100% {
          transform: translateX(-100%);
        }
      }