.brand-carousel {
  position: relative;
  width: 100%;
  padding: 20px 0;
}

.brand-marquee {
  display: block;
  width: 100%;
  overflow: hidden;
}

.brand-slider {
  display: flex;
  gap: 0;
  width: max-content;
  animation: brand-marquee-scroll 40s linear infinite;
  will-change: transform;
}

.brand-marquee:hover .brand-slider {
  animation-play-state: paused;
}

.brand-slider-group {
  display: flex;
  flex: 0 0 auto;
}

.brand-logo {
  flex: 0 0 20vw;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem 1.5rem;
  transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}

.brand-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.brand-logo:hover {
  transform: translateY(-6px);
  border-color: rgba(209, 115, 92, 0.5);
  background: rgba(209, 115, 92, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

@media (max-width: 992px) {
  .brand-logo {
    flex-basis: 33.3333vw;
  }
}

@media (max-width: 768px) {
  .brand-logo {
    flex-basis: 40vw;
    height: 150px;
    padding: 0.75rem 1rem;
  }
}

@media (max-width: 576px) {
  .brand-logo {
    flex-basis: 50vw;
  }
}

@keyframes brand-marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}