/* ===================================
   HOME PAGE - LOGO SLIDER
   =================================== */

.manufacturerSection {
  background-color: #ffffff;
  padding: 60px 0;
}

.fullWidthSlider {
  width: 100%;
  overflow: hidden;
}

.logos-slider {
  display: flex;
  gap: 40px;
  align-items: center;
}

.logo-container {
  flex: 0 0 calc((100vw - 120px) / 7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.logo-container img {
  max-width: 100%;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.logo-container img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
}

/* Mobile Slider - Auto-Slide wie Desktop */
@media (max-width: 768px) {
  .manufacturerSection {
    padding: 40px 0;
  }

  .logos-slider {
    display: flex !important;
    gap: 0 !important;
    align-items: center;
    /* Allow content to exist outside for transform */
    width: max-content;
    /* Ensure container expands to fit all items explicitly */
  }

  .logo-container {
    flex: 0 0 100vw !important;
    width: 100vw !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
  }

  .logo-container img {
    max-width: 220px;
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(0%);
    opacity: 1;
  }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .logo-container {
    flex: 0 0 calc((100vw - 80px) / 4);
  }
}