/* === WE WORK WITH SECTION === */
.partners-section {
  background-color: #ffffff;
  text-align: center;
  padding: 40px 0;
  overflow: hidden;
  border-top: 2px solid #e5e5e5;
}

.partners-section h3 {
  font-size: 1.6rem;
  color: #000;
  margin-bottom: 25px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.logo-slider {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.logo-track {
  display: flex;
  width: calc(200px * 20);
  animation: scrollLogos 50s linear infinite;
}

.logo-track img {
  width: 120px;
  height: auto;
  margin: 0 30px;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Brand-specific size tweaks */
.logo-box[alt="Mercedes-Benz"] {
  transform: scale(1.25); /* slightly larger */
}

.logo-track img:hover {
}

/* === MOBILE: single logo slides in → stays → slides out === */
/* === MOBILE: each logo slides in, pauses, fully exits before next === */

/* === MOBILE: each logo slides in, pauses, fully exits before next === */
/* === MOBILE: each logo slides in, pauses, fully exits before next === */

    .book-btn {
    display: none !important;
  }

    .submenu {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #111;
  }

  .menu-item.open .submenu {
    display: flex;
  }

  .partners-section {
    background: #fff;
    text-align: center;
    padding: 40px 0;
  }

  .logo-slider {
    position: relative;
    width: 100%;
    height: 120px;
    overflow: hidden;
  }

  .logo-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: auto;
    opacity: 0;
    transform: translate(100%, -50%);
    transition: transform 0.6s ease, opacity 0.4s ease;
  }

  .logo-box.active {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .logo-box.exit {
    opacity: 0;
    transform: translate(-250%, -50%);
  }

  /* ============================
   DESKTOP SCROLLING LOGO BAR
   ============================ */
/* ===============================
   🖥 DESKTOP AUTO SCROLL LOGO BAR
   =============================== */
/* ===============================
   🖥 DESKTOP AUTO SCROLL LOGO BAR (CENTERED)
/* ===============================================
   🖥 DESKTOP VIEW (Awan Auto Inc) — min-width: 900px
   =============================================== */
/* ===============================================
   🖥 DESKTOP VIEW (Awan Auto Inc) — min-width: 900px
   =============================================== */
@media (min-width: 900px) {
  .logo-carousel {
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
    max-width: 1000px;
    position: relative;
    padding: 20px 0;
  }

  .logo-track {
    display: flex;
    transition: transform 0.8s ease-in-out;
    will-change: transform;
  }

  .logo-card {
    flex: 0 0 calc(100% / 16);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .logo-card.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .logo-card img {
    width: 115px;
    height: auto;
    object-fit: contain;
    filter: grayscale(0%);
    transition: filter 0.3s;
  }

  .logo-card img:hover {
    filter: grayscale(0%);
  }

  .logo-dots {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .logo-dots .dot {
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    transition: background 0.3s;
    cursor: pointer;
  }

  .logo-dots .dot.active {
    background: rgba(238, 3, 3, 0.85);
  }

  /* ✅ Force hide desktop carousel on mobile */
} /* ✅ this bracket was missing before — fixes the dots! */


/* ✅ FINAL DEVICE VISIBILITY FIX */
@media (max-width: 900px) {
  /* Show mobile, hide desktop */
  .mobile-slider {
    display: block !important;
    visibility: visible !important;
  }
  .logo-carousel,
  .logo-dots,
  .desktop-slider {
    display: none !important;
    visibility: hidden !important;
  }
}

/* ✅ FINAL DEVICE VISIBILITY FIX */
/* ================================
   ✅ FINAL DEVICE VISIBILITY FIX
   ================================ */

/* 📱 Mobile view (up to 900px) */
/* ================================
   FINAL DEVICE VISIBILITY FIX
   ================================ */

/* 📱 Mobile view (up to 900px) */
@media (max-width: 900px) {
  /* Hide desktop carousel + dots */
  .logo-carousel,
  .desktop-slider {
    display: none !important;
    visibility: hidden !important;
  }

  /* Show mobile fade slider */
  .mobile-slider {
    display: block !important;
    visibility: visible !important;
  }
}

/* 🖥 Desktop view (from 901px up) */
@media (min-width: 901px) {
  /* Hide mobile slider completely */
  .mobile-slider {
    display: none !important;
    visibility: hidden !important;
  }

  /* Show desktop carousel and dots */
  .logo-carousel,
  .logo-dots,
  .desktop-slider {
    display: block !important;
    visibility: visible !important;
  }

  /* ✅ Dot alignment & style */
  .logo-dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
  }

  .logo-dots .logo-dot {
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
  }

  .logo-dots .logo-dot.active {
    background: rgba(253, 3, 3, 0.85);
  }
}@media (min-width: 900px) {
  .logo-carousel {
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
    max-width: 1000px;
    position: relative;
    padding: 20px 0;
  }

  .logo-track {
    display: flex;
    transition: transform 0.8s ease-in-out;
    will-change: transform;
  }

  .logo-card {
    flex: 0 0 calc(100% / 16);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .logo-card.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .logo-card img {
    width: 115px;
    height: auto;
    object-fit: contain;
    filter: grayscale(0%);
    transition: filter 0.3s;
  }

  .logo-card img:hover {
    filter: grayscale(0%);
  }

  .logo-dots {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .logo-dots .dot {
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    transition: background 0.3s;
    cursor: pointer;
  }

  .logo-dots .dot.active {
    background: rgba(32, 204, 69, 0.85);
  }

  /* ✅ Force hide desktop carousel on mobile */
} /* ✅ this bracket was missing before — fixes the dots! */