/*
  Custom overrides for Tailwind CDN.
  Keep this file for project-specific tweaks.
*/
.logo-bmw,
.logo-kia {
  display: block;
  flex: 0 0 auto;
}

.car-brands-track > div {
  flex: 0 0 auto;
}

.car-brands-track {
  -webkit-overflow-scrolling: touch;
}

/* Mobile marquee setup (default). */
.car-brands-track {
  overflow: hidden;
}

.car-brands-marquee {
  display: flex;
  width: max-content;
  gap: 2rem;
  will-change: transform;
  animation: car-brands-scroll 30s linear infinite;
}

.car-brands-inner {
  display: flex;
  align-items: center;
}

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

/* Desktop overrides (lg and up). */
@media (min-width: 1024px) {
  .car-brands-track {
    overflow: visible;
  }

  .car-brands-marquee {
    animation: none;
    transform: none;
    width: 100%;
  }

  .car-brands-inner {
    width: 100%;
    justify-content: space-between;
  }

  .car-brands-inner[aria-hidden="true"] {
    display: none;
  }
}

.logo-bmw {
  width: 2rem;
  height: 2rem;
  opacity: 1;
  filter: none;
  transition: opacity 0.2s ease;
}

.logo-kia {
  height: 3.8rem;
  width: 3.8rem;
}

.logo-bmw:hover,
a:hover .logo-bmw {
  opacity: 1;
}

.dark .logo-bmw {
  opacity: 1;
  filter: none;
}

.dark .logo-bmw:hover,
.dark a:hover .logo-bmw {
  opacity: 1;
}