/* ================= CLIENT LOGOS ================= */

.clients-section{
  padding:80px 0;
  background:#f7f9fc;
}

/* header */

.client-header{
  text-align:center;
  margin-bottom:50px;
}

.client-title{
  font-size:clamp(26px,3vw,36px);
  margin:0;
}

.section-badge{
  display:inline-block;
  padding:6px 14px;
  background:rgba(254,88,98,.1);
  border:1px solid rgba(254,88,98,.2);
  border-radius:6px;
  font-size:12px;
  letter-spacing:.1em;
  margin-bottom:12px;
}

/* marquee container */

.clients-marquee1{
  width:100%;
  overflow:hidden;
  position:relative;
}

/* track */

.marquee-track1{
  display:flex;
  align-items:center;
  gap:80px;
  width:max-content;
  animation:logoMarquee 20s linear infinite;
}

/* pause on hover */

.clients-marquee1:hover .marquee-track1{
  animation-play-state:paused;
}

/* animation */

@keyframes logoMarquee{

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

  100%{
    transform:translateX(0);
  }

}

/* logo box */

.client-logo1{
  flex-shrink:0;
  width:160px;
  height:90px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:white;
  border-radius:12px;

  box-shadow:0 8px 20px rgba(0,0,0,.08);
  transition:.3s ease;
}

/* hover */

.client-logo1:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 30px rgba(0,0,0,.15);
}

/* image */

.client-logo1 img{
  max-width:100%;
  max-height:70px;
  object-fit:contain;

  filter:grayscale(100%);
  opacity:.7;

  transition:.3s;
}

.client-logo1:hover img{
  filter:grayscale(0);
  opacity:1;
}

/* responsive */

@media(max-width:768px){

.marquee-track1{
  gap:40px;
}

.client-logo1{
  width:120px;
  height:70px;
}

}