/* === Client logos: color by default + responsive fit ===
   Keeps your size fixes and forces color (overrides any grayscale rules)
*/

.client-logo,
.client-logos .client-logo,
.clients .client-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px 20px !important;
  min-height: 84px !important;
  max-height: 120px !important;
  overflow: hidden !important;
  background-color: rgba(17,24,39,1) !important;
  border-radius: 12px !important;
}

/* Force color and remove any grayscale/invert/brightness utilities */
.client-logo img,
.client-logo picture img,
.client-logo svg {
  -webkit-filter: none !important;
  filter: none !important;
  opacity: 1 !important;
  background: transparent !important;

  /* Responsive fit */
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;

  /* Smoothness */
  transition: transform .22s ease, opacity .22s ease, filter .22s ease !important;
}

/* Override utility classes that might reintroduce grayscale/brightness/inversion */
.client-logo img.brightness-0,
.client-logo img.invert,
.client-logo.brightness-0 img,
.client-logo.invert img,
.brightness-0 .client-logo img,
.invert .client-logo img {
  -webkit-filter: none !important;
  filter: none !important;
}

/* Keep polish: active/hover slightly lifts but stays colored */
.client-logo:hover,
.client-logo.is-active,
.client-logo.slick-active,
.client-logo.swiper-slide-active,
.client-logo:focus-within {
  transform: translateY(-3px) !important;
}

/* If you ever want greyscale-by-default but color-on-hover, switch the two rules:
   - Put grayscale in the main selector and set filter:none on :hover / .is-active
*/