/* Seamless looping marquee for the hero image rows.
   The original .header78_image-list keeps its native grid layout — we only
   wrap two copies in a .marquee-track that translates. */

.header78_image-list-top,
.header78_image-list-bottom {
  display: block !important;
  overflow: hidden;
  margin-left: 0 !important;
  width: 100% !important;
}

.header78_image-list-top > .marquee-track,
.header78_image-list-bottom > .marquee-track {
  display: flex;
  flex-shrink: 0;
  gap: 1rem;
  width: max-content;
  will-change: transform;
}

/* Inside the track, each list must size to its content (override Webflow's width:100%). */
.header78_image-list-top > .marquee-track > .header78_image-list,
.header78_image-list-bottom > .marquee-track > .header78_image-list {
  width: max-content !important;
  flex-shrink: 0;
}

.header78_image-list-top > .marquee-track {
  animation: marquee-shift-left 60s linear infinite;
}

.header78_image-list-bottom > .marquee-track {
  animation: marquee-shift-right 60s linear infinite;
}

/* Track width is (2 * L) + 1rem gap → -50% lands 0.5rem short of seamless;
   compensate with calc(-50% - 0.5rem) so list2's start aligns with list1's start. */
@keyframes marquee-shift-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - 0.5rem), 0, 0); }
}

@keyframes marquee-shift-right {
  from { transform: translate3d(calc(-50% - 0.5rem), 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .header78_image-list-top > .marquee-track,
  .header78_image-list-bottom > .marquee-track {
    animation: none;
  }
}