/* --- SLIDER STRUCTURE --- */
    .logo-sliders-wrapper {
      overflow: hidden;
      width: 100%;
      display: flex;
      position: relative;
    }

    /* Soft edge fade effect */
    .logo-sliders-wrapper::before,
    .logo-sliders-wrapper::after {
      content: "";
      height: 100%;
      position: absolute;
      width: 150px;
      z-index: 2;
      pointer-events: none;
    }
    .logo-sliders-wrapper::before {
      left: 0;
      background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 100%);
    }
    .logo-sliders-wrapper::after {
      right: 0;
      background: linear-gradient(to left, #fff 0%, rgba(255,255,255,0) 100%);
    }

    /* The flex container holding generated logos */
    .logo-sliders {
      display: flex;
      width: max-content;
      gap: 4rem; /* Generous gap between logo boxes */
      padding-right: 4rem; 
    }

    /* --- THE FIX FOR UNIFORM SIZE --- */
    .logo-item {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      /* Define the exact bounding box for every single logo */
      width: 150px;  
      height: 60px;  
    }

    .logo-item img {
      /* Force the image to fill the 150x60px box perfectly without distorting */
      width: 100%;
      height: 100%;
      object-fit: contain; 
      
      /* filter: grayscale(100%); */
      /* opacity: 0.6; */
      transition: all 0.3s ease-in-out;
    }

    .logo-item img:hover {
      filter: grayscale(0%);
      opacity: 1;
    }

    /* --- ANIMATION ENGINE --- */
    .track-left-to-right {
      animation: scrollLeftToRight 30s linear infinite;
    }

    @keyframes scrollLeftToRight {
      0% { transform: translateX(-50%); }
      100% { transform: translateX(0%); }
    }

    .track-right-to-left {
      animation: scrollRightToLeft 30s linear infinite;
    }

    @keyframes scrollRightToLeft {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-50%); }
    }

    /* Pause scrolling on hover */
    .logo-sliders-wrapper:hover .logo-sliders {
      animation-play-state: paused;
    }