/* Brand carousel — soft sliding, only images visible */
.brand-carousel {
  overflow: hidden;
  padding: 30px 0;
}

.brand-carousel-track {
  display: flex;
  align-items: center;
  gap: 24px;
  transform: translateX(0);
  will-change: transform;
}

.brand-carousel .single-brand-box {
  flex: 0 0 auto;
  width: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-carousel .single-brand-box a { display: block; width: 100%; }

.brand-carousel .single-brand-box img {
  display: block;
  width: 100%;
  height: 80px;
  object-fit: contain;
  transition: transform 0.6s ease, filter 0.6s ease;
}

/* Slight hover scale for subtle polish */
.brand-carousel .single-brand-box:hover img {
  transform: scale(1.03);
}

/* Remove any default underline / controls — only images visible */
.brand-carousel .single-brand-box a { text-decoration: none; }

/* Responsive adjustments */
@media (max-width: 767px) {
  .brand-carousel .single-brand-box { width: 120px; }
  .brand-carousel .single-brand-box img { height: 60px; }
}

/* Continuous seamless scroll animation (distance & duration set via JS) */
.brand-carousel-track {
  animation-name: brand-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

@keyframes brand-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--scroll-distance))); }
}