/* Set the background color on the carousel-container to match your bg-gray */

#clients {
  padding-top: 0px;
}

.carousel-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--off-white-color); /* Ensure this matches .bg-gray */
  }
  
  .carousel {
    overflow: hidden;
    width: 80%; /* Adjust as needed */
    position: relative;
  }
  
  /* Add the gradient fade effect on the sides */
  .carousel::before,
  .carousel::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px; /* Adjust width as needed */
    pointer-events: none;
    z-index: 2;
  }
  
  .carousel::before {
    left: 0;
    background: linear-gradient(to right, var(--off-white-color), transparent);
  }
  
  .carousel::after {
    right: 0;
    background: linear-gradient(to left, var(--off-white-color), transparent);
  }
  
  .carousel-track {
    display: flex;
    transition: transform 0.5s linear; /* Smooth, continuous scroll */
    width: auto; /* Allow track to stretch with content */
  }
  
  
  .carousel-slide {
    flex: 0 0 auto;
    width: 200px; /* Adjust width as needed */
    padding: 10px;
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally if needed */
    align-items: center; /* Center vertically */
    height: 150px; /* Set a fixed height to ensure consistent centering */
    box-sizing: border-box; /* Include padding in the height */
  }
  
  .client-logo {
    max-width: 100%; /* Ensure the logo fits within the slide width */
    max-height: 100%; /* Ensure the logo fits within the slide height */
    object-fit: contain; /* Maintain aspect ratio while fitting within bounds */
  }
  
  .clients .client-logo {
    filter: brightness(100%) contrast(100%) saturate(0%) blur(0px) hue-rotate(0deg);
    transition: filter 0.3s ease-in-out;
  }
  
  .clients .client-logo:hover {
    filter: brightness(100%) contrast(100%) saturate(100%);
  }