/* ===== Marquee (single source of truth) ===== */
.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  background: transparent;   /* was #fff – make transparent */
  padding: 10px 0;
  white-space: nowrap;
}

/* Fade edges */
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  width: 60px;                   /* fade width */
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.marquee::after  { right: 0; background: linear-gradient(to left,  #fff, rgba(255,255,255,0)); }

.marquee-content {
  display: flex;
  min-width: max-content;
  will-change: transform;
  animation: scroll 350s linear infinite;  /* readable default speed */
  transform: translate3d(0,0,0);
}

/* Items inside the track */
.marquee-content > * {
  flex-shrink: 0;
  margin-right: 20px;            /* space between items */
}

/* Card style (keep as-is) */
.box {
  flex: 0 0 150px;
  height: 80px;
  padding: 10px;
  margin-right: 10px;
  box-sizing: border-box;
  background: #233161;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  border-radius: 10px;
  transition: transform 0.2s;
}
.box:hover { transform: scale(1.05); cursor: pointer; }

/* Seamless loop:
   Use -50% if your content is duplicated end-to-end.
   If you DON’T duplicate, change -50% to -100%. */
@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Mobile: a touch faster so users see more */
@media (max-width: 768px) {
  .marquee-content { animation-duration: 350s !important; }
}