@keyframes scroll-left {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes scroll-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
}

.marquee-left, .marquee-right {
  display: inline-block;
  padding: 10px 0;
  will-change: transform;
}

.marquee-left {
  animation: scroll-left 100s linear infinite;
}

.marquee-right {
  animation: scroll-right 100s linear infinite;
}