/* Logo Carousel Styles */
.logo-carousel {
  overflow: hidden;
  padding: 10px 0;
  position: relative;
  background: #ffffff;
}

.logo-carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  -webkit-mask: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}

.logo-carousel-track {
  display: flex;
  animation: scroll var(--carousel-speed, 20s) linear infinite;
  width: calc(200% + 20px);
}

.logo-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  transition: transform 0.3s ease;
  filter: grayscale(100%) opacity(0.7);
  transition: all 0.3s ease;
}

.logo-item img {
  max-height: 100px;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* Center logo zoom effect - removed color, keeping only zoom */
.logo-item:nth-child(4) {
  transform: scale(1.15);
}

.logo-item:hover {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.05);
}

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

/* Responsive Design */

/* Desktop - 7 logos visible */
@media (min-width: 1200px) {
  .logo-item {
    width: calc(100% / 11);
  }

  .logo-item:nth-child(4) {
    transform: scale(1.15);
  }
}

/* Large tablets/small desktop - 5 logos visible */
@media (min-width: 768px) and (max-width: 1199px) {
  .logo-item {
    width: calc(100% / 5);
  }

  .logo-item:nth-child(3) {
    transform: scale(1.15);
  }

  .logo-item:nth-child(4) {
    transform: scale(1);
    filter: grayscale(100%) opacity(0.7);
  }
}

/* Mobile - 3 logos visible */
@media (max-width: 767px) {
  .logo-carousel {
    padding: 30px 0;
  }

  .logo-item {
    width: calc(100% / 3);
    padding: 0 15px;
  }

  .logo-item img {
    max-height: 50px;
  }

  .logo-item:nth-child(2) {
    transform: scale(1.15);
  }

  .logo-item:nth-child(3),
  .logo-item:nth-child(4) {
    transform: scale(1);
    filter: grayscale(100%) opacity(0.7);
  }

  .logo-carousel-track {
    animation-duration: 15s;
  }
}

/* Pause animation on hover */
.logo-carousel:hover .logo-carousel-track {
  animation-play-state: paused;
}