/* CSS Carousel */

.brand-marquee {
  overflow: hidden;
  background: #f8f9fa;
  height: var(--carousel-height, 100px);
  display: flex;
  align-items: center;
  padding: 0;
}
.brand-track {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 28px;
  height: 96%;
  will-change: transform;
  animation: brand-scroll var(--speed, 28s) linear infinite;
  animation-direction: var(--direction, normal); /* normal | reverse */
}
.brand-logo {
  flex: 0 0 auto;
  /* height: var(--logo-height, 80px); */
  max-height: 95%;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: grayscale(100%);
  transition:
    filter 0.2s ease,
    transform 0.2s ease;
  padding: 0;
  margin: 0;
}
.brand-logo:hover {
  filter: none;
  transform: scale(1.02);
}
.brand-marquee:hover .brand-track {
  animation-play-state: paused;
}

@keyframes brand-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}