/* Section title already exists in your CSS; keep this if needed */
.section-title { text-align:center; margin-bottom:40px; }

.section-padding {
  padding: 44px 0 !important;
}

/* Grid container */
.clients-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* auto-fit makes it wrap */
  gap: 24px 32px;
  justify-content: center;   /* <--- centers the grid items */
  align-items: center;
  justify-items: center;     /* <--- center each logo inside its cell */
}


/* Responsive columns */
@media (max-width: 1199.98px){ .clients-grid{ grid-template-columns:repeat(4, minmax(120px,1fr)); } }
@media (max-width: 767.98px){  .clients-grid{ grid-template-columns:repeat(2, minmax(120px,1fr)); } }

/* Cards */
.client-card{
  text-align:center;
  background:#fff;
  border:0 px;
  padding:16px 12px;
}

/* Logos */
.client-logo{
  display:inline-block;
  max-width:100%;
  width:auto;
  max-height:56px;            /* adjust to match Figma */
  object-fit:contain;
  filter:none; opacity:1;     /* kill any greyscale/opacity from old slider styles */
  transition:transform .15s ease;
}
.client-link:hover .client-logo{ transform:translateY(-2px); }

/* Captions (under logo) */
.client-name{
  margin-top:8px;
  font-size:14px;
  font-weight:600;
  color:#333;
}