:root {
      --logo-row-height: 48px;

      --logo-gap: 28px;

      --marquee-speed: 28s;

  }

  .partner-strip {

      padding: 100px 0;

  }

  .moving-logos {
      width: min(1100px, 92vw);
      margin: 0 auto;
      overflow: hidden;
      mask-image: linear-gradient(to right,
              rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 8%,
              rgba(0, 0, 0, 1) 92%, rgba(0, 0, 0, 0) 100%);
  }

  .logos-track {
      display: flex;
      align-items: center;
      gap: var(--logo-gap);
      /* The track is 2 sets wide; we animate -50% for a perfect loop */
      width: max-content;
      animation: marquee var(--marquee-speed) linear infinite;
  }

  .logos-set {
      display: flex;
      align-items: center;
      gap: var(--logo-gap);
  }

  /* Make each logo fit nicely within the row height, regardless of ratio */
  .logos-set img {
      height: var(--logo-row-height);
      width: auto;
      object-fit: contain;
      display: block;
      filter: saturate(1) contrast(1);
      /* optional subtle appearance */
      opacity: 0.95;
  }

  /* Seamless loop: move left by half the track (one set width) */
  @keyframes marquee {
      0% {
          transform: translateX(0);
      }

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

  /* Pause on hover (optional) */
  .moving-logos:hover .logos-track {
      animation-play-state: paused;
  }

  /* Respect users who prefer less motion */
  @media (prefers-reduced-motion: reduce) {
      .logos-track {
          animation: none;
      }
  }

  /* Responsive tweaks */
  @media (max-width: 992px) {
      :root {
          --logo-row-height: 42px;
          --logo-gap: 22px;
          --marquee-speed: 24s;
      }
  }

  @media (max-width: 576px) {
      :root {
          --logo-row-height: 34px;
          --logo-gap: 16px;
          --marquee-speed: 20s;
      }
  }




  .partner-images-site {
      max-width: 300px;
      height: auto;
      display: block;
      margin: 0 auto;
  }