:root {
  --logo-h: 68px;
  --gap: 10px;
  --fade-edge: 60px;
}

body {
  background: transparent;
}

.clients-wrap {
  position: relative;
  overflow: hidden;
  background: transparent;
  border: 0;
}

/* subtle edge fade like many SaaS sites */

.clients-wrap::before, .clients-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--fade-edge);
  pointer-events: none;
  z-index: 2;
}

.clients-wrap::before {
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}

.clients-wrap::after {
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}

/* If your page background isn't white, change these fade colors to match,
       or remove the ::before/::after blocks entirely. */

.clients-slider {
  margin: 0;
}

/* Slick adds outlines/spacing; keep it clean */

.clients-slider .slick-track {
  display: flex;
  align-items: center;
}

.clients-slider .slick-slide {
  height: auto;
}

.logo-item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 6px calc(var(--gap) / 2);
  outline: none;
}

.logo-item {
}

.logo-item img {
  height: var(--logo-h);
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .75;
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}

.logo-item:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-1px);
}

/* remove slick dots/arrows space */

.slick-dotted.slick-slider {
  margin-bottom: 0;
}

.slick-prev, .slick-next, .slick-dots {
  display: none !important;
}

@media (max-width: 576px) {
  :root {
    --logo-h: 38px;
    --gap: 38px;
    --fade-edge: 40px;
  }
}

@media (max-width: 576px) {
  .logo-item img {
    max-width: 140px;
  }
}