/* Logos Carousel */
.logo-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  user-select: none;
  -webkit-user-drag: none;
  padding: 10px 0;
}

.logo-track {
  display: flex;
  align-items: center;
  gap: 32px;                    /* space between logos */
  width: max-content;           /* shrink-wrap to content for smooth scroll */
  animation: scroll-rtl 30s linear infinite;
}

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

.logo-item {
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  opacity: 0.9;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.logo-item:hover {
  transform: scale(1.04);
  opacity: 1;
}

.logo-item img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  display: block;
  filter: grayscale(15%);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .logo-track {
    animation: none !important;
  }
}

/* Keyframes for right-to-left continuous scroll.
   Because the JS duplicates the items, translating -50% loops seamlessly. */
@keyframes scroll-rtl {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Optional: small screens spacing */
@media (max-width: 576px) {
  .logo-track { gap: 20px; }