/* Container styling */
    .logo-carousel {
      background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
      padding: 2rem 0;
      overflow: hidden;
      position: relative;
    }

    /* The scroller strip */
    .logo-track {
      display: flex;
      gap: 2.5rem;
      align-items: center;
      /* make it run continuously */
      animation: scroll-left linear infinite;
      animation-duration: 20s; /* change to speed-up/slow-down */
      will-change: transform;
    }

    /* Duplicate track to create seamless infinite loop */
    .logo-track--wrap {
      display: flex;
      width: max-content;
    }

    .logo-item {
      flex: 0 0 auto;
      width: 140px; /* logo box width */
      display: flex;
      justify-content: center;
      align-items: center;
      filter: drop-shadow(0 6px 20px rgba(3, 10, 34, 0.06));
      background: #ffffff;
      padding: 0.6rem;
      border-radius: 12px;
    }

    .logo-item img {
      max-width: 100%;
      max-height: 48px;
      object-fit: contain;
      display: block;
    }

    /* Pause on hover */
    .logo-carousel:hover .logo-track {
      animation-play-state: paused;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .logo-item { width: 110px; }
      .logo-item img { max-height: 40px; }
      .logo-track { gap: 1.4rem; animation-duration: 22s; }
    }

    @media (max-width: 480px) {
      .logo-item { width: 86px; }
      .logo-item img { max-height: 28px; }
      .logo-track { gap: 1rem; animation-duration: 26s; }
    }

    /* Animation keyframes: move from 0 to -50% of the track width (duplicate technique) */
    @keyframes scroll-left {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* Optional: subtle gradient overlays on edges for premium look */
    .logo-carousel::before,
    .logo-carousel::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 7rem;
      pointer-events: none;
      z-index: 2;
    }
    .logo-carousel::before {
      left: 0;
      background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 55%);
    }
    .logo-carousel::after {
      right: 0;
      background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 55%);
    }

    /* Accessibility: visually-hidden text for screen readers */
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }