/* --- Logo Carousel Section --- */
#logo-carousel-section {
  background-color: #000;
  padding-top: 1rem;
  margin-bottom: 50px;
}

.logo-container {
  max-width: 1280px; /* max-w-screen-xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem;
}

.logo-container h2 {
  text-align: center;
  color: #c2a550;
  margin-bottom: 4rem;
}

/* --- Scroller & Animation --- */
.scroller-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Fading edges effect */
  mask-image: linear-gradient(
    to right,
    transparent,
    black 20%,
    black 80%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 20%,
    black 80%,
    transparent
  );
}

.scroller-list {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.scroller-list li {
  flex-shrink: 0;
  margin-right: 4rem; /* space-x-16 */
}

.scroller-list img {
  height: 5rem;
  width: auto;
}

/* Define the scrolling animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Move the container by the width of one logo + its margin */
    /* Adjust this value if your logo sizes or count change */
    transform: translateX(calc(-220px * 7));
  }
}

/* Apply the animation when the 'animate-scroll' class is present */
.animate-scroll {
  animation: scroll 40s linear infinite;
}