/*========== Carousel Settings ==========*/


.logo-carousel {
  max-width: 85%;
  margin: 0 auto;
  padding: 60px 20px;
  text-align: center;
}

.logo-carousel h2 {
  margin-bottom: 10px;
}

.logo-carousel p {
  margin-bottom: 40px;
  color: #333;
}

/*========== Carousel Track ==========*/
.carousel {
  position: relative;
  overflow: hidden;
}
.carousel-track {
  display: flex;
  width: calc( (60% / var(--visible-items)) * 12 ); /* duplicate 6 items twice for seamless scroll */
  animation: scroll infinite linear var(--scroll-speed);
}
.carousel-track:hover {
  animation-play-state: paused; /* pause on hover */
}

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

/*========== Logo Items ==========*/
.logo-item {
  flex: 0 0 calc(100% / var(--visible-items));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.logo-item img {
  max-width: 40%;
  filter: grayscale(100%);
  transition: filter 0.3s ease, transform 0.3s ease;
}
.logo-item img:hover {
  filter: grayscale(0);
  transform: scale(1.2);
}

@media (max-width: 768px){
  .carousel-track {
     width: calc((140% / var(--visible-items)) * 8);
  }
}

@media only screen and (max-width: 425px) {
  .logo-item img {
    max-width: 50%;
  }
  .carousel-track {
     width: calc((140% / var(--visible-items)) * 12);
  }
  .logo-item {
    padding: 10px 0px;
  }