/* about-hero.css – Page-specific styles for /about */

/* =====================================================
   Marquee animations for the "Who we work with" section
   ===================================================== */

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

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

.animate-marquee-left {
  animation: marquee-left 30s linear infinite;
  will-change: transform;
}

.animate-marquee-right {
  animation: marquee-right 30s linear infinite;
  will-change: transform;
}

/* Pause on hover */
.animate-marquee-left:hover,
.animate-marquee-right:hover {
  animation-play-state: paused;
}