.slider {
      overflow: hidden;
      position: relative;
      width: 100%;
      display: flex; /* Use flexbox for the container */
    }

    .slider .logos {
      display: flex;
      align-items: center;
      justify-content: space-around;
      animation: slide 20s linear infinite;
      flex-shrink: 0;
      width: max-content; /* Ensure logos stay in one line */
    }

    .slider img {
      max-height: 80px;
      max-width: 150px;
      margin: 0 30px;
      object-fit: contain;
    }

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

    /* Responsive tweaks */
    @media (max-width: 768px) {
      .slider img {
        max-height: 60px;
        max-width: 100px;
        margin: 0 15px;
      }
    }