/* Container for the marquee */
    .logo-marquee {
      overflow: hidden;
      white-space: nowrap;
      position: relative;
    }

    /* Animation track */
    .logo-track {
      display: inline-flex;
      align-items: center;
      animation: scrollLeft 25s linear infinite;
    }
    
    .logo-trackR {
      display: inline-flex;
      align-items: center;
      animation: scrollReverse 25s linear infinite;
    }

    /* Individual logos */
    .logo-item {
      flex: 0 0 auto;
      margin: 0 40px;
      opacity: 0.8;
      transition: transform 0.3s, opacity 0.3s;
    }

    .logo-item:hover {
      transform: scale(1.1);
      opacity: 1;
    }

    /* Reverse (right-to-left) scrolling animation */
    @keyframes scrollReverse {
      0% {
        transform: translateX(-50%);
      }
      100% {
        transform: translateX(0%);
      }
    }
    
     /* Animation for right-to-left scrolling */
    @keyframes scrollLeft {
      0% {
        transform: translateX(0%);
      }
      100% {
        transform: translateX(-50%);
      }
    }

    /* Make the loop seamless by duplicating logos */
    .logo-track > * {
      width: 120px;
      height: auto;
    }

    @media (max-width: 768px) {
      .logo-track > * {
        width: 80px;
        margin: 0 20px;
      }
    }