.banner-wrapper {
  width: 100%;
  height: 160px; /* or set a fixed height like 320px */
  background-image: url("../../images/banner-bg.png"); /* update path */
  background-repeat: repeat-x;
  background-size: auto 100%;   /* keep height fixed to wrapper, preserve aspect */
  background-position: 0 0;

  overflow: hidden;
  display: flex;
  align-items: center;
  cursor: grab;

  animation: bgScroll 120s linear infinite;
}

/* Seamless sideways loop */
@keyframes bgScroll {
  from { background-position: 0 0; }
  to   { background-position: -11520px 0; } /* your image width */
}


.banner-track {
  display: flex;
  width: max-content;
  animation: bannerScroll 22s linear infinite;
}

.banner-text {
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
  padding-right: 5rem;

  color: transparent;
  -webkit-text-stroke: 2px #fff;
  transition: transform 0.3s ease, -webkit-text-stroke 0.3s ease;
}


.banner-highlight {
  color: #ffc107;
  -webkit-text-stroke: 0;
  margin-left: 0.5rem;
  animation: glowPulse 2.5s ease-in-out infinite;
}

/* Glow animation */
@keyframes glowPulse {
  0%, 100% {
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.4);
  }
  50% {
    text-shadow: 0 0 18px rgba(255, 193, 7, 0.9);
  }
}

/* Infinite scroll */
@keyframes bannerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}