/* ── Logo Carousel Wrapper ────────────────────────── */
.logo-carousel .elementor-loop-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  gap: 48px;
  padding: 16px 0;

  /* The animation */
  animation: logo-scroll 50s linear infinite;
  width: max-content;
}

/* ── Each card/item ───────────────────────────────── */
.logo-carousel .elementor-loop-container > * {
  flex: 0 0 auto;
  width: 160px; /* adjust to your logo size */
  transition: opacity 0.3s ease, filter 0.3s ease;
}

/* ── Images inside ────────────────────────────────── */
.logo-carousel .elementor-loop-container img {
  width: 100%;
  height: 70px;
  object-fit: contain;
  display: block;
}

/* ── Scroll keyframes ─────────────────────────────── */
@keyframes logo-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Fade edges ───────────────────────────────────── */
.logo-carousel {
  position: relative;
}

.logo-carousel::before,
.logo-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.logo-carousel::before {
  left: 0;
  background: linear-gradient(to right, #ffffff, transparent);
}

.logo-carousel::after {
  right: 0;
  background: linear-gradient(to left, #ffffff, transparent);
}

/* Hide empty loop items */
.logo-carousel .elementor-loop-container > *:has(img[src=""]),
.logo-carousel .elementor-loop-container > *:not(:has(img)) {
  display: none !important;
}