.brands {
    position: relative; /* Make this container the reference for positioning */
    display: flex; /* Enable flexbox layout */
    justify-content: center; /* Horizontally center the content */
    align-items: center; /* Vertically center the content */
    width: 100%; /* Ensure it takes the full width */
    height: 200px; /* Set a specific height for the container */
    overflow: hidden;
  }
  
  .brand-wrapper-scroller {
    position: relative; /* Keep this for internal positioning */
    width: 100%; /* Ensure it fills the parent width */
    height: 100%; /* Ensure it takes the full height */
  }
  
  .brands-logo {
    position: absolute; /* Stack each logo on top of the other */
    top: 50%; /* Vertically center the logos (relative to parent) */
    left: 50%; /* Horizontally center the logos (relative to parent) */
    width: 25%; /* Each logo takes up 30% of the container's width */
    height: auto; /* Let the height adjust based on the aspect ratio */
    margin-top: -50px; /* Adjust the margin-top to center logos vertically (half of height) */
    margin-left: -15%; /* Adjust margin-left to offset the width of the logo (half of 30%) */
    transition: all 0.5s ease;
  }
  
  .brand-logo-image {
    width: 100%; /* Make sure the image fills the container's width */
    height: auto; /* Ensure the image scales to maintain its aspect ratio */
    object-fit: contain; /* Ensure the aspect ratio is maintained */
  }
  
  
  
  .brand-left {
    transform: translateX(-220%);
    opacity: 0;
  }
  .brand-prev {
    transform: translateX(-110%);
  }
  .brand-active {
    transform: translateX(0);
  }
  .brand-next {
    transform: translateX(110%);
  }
  .brand-right {
    transform: translateX(220%);
    opacity: 0;
  }

  @media (max-width : 720px) {
    .brands {
        height: 100px;
    }
  }
  @media (max-width : 540px) {
    .brands-logo {
        margin-top: -40px;
    }
  }
  @media(min-width: 1025px) {
    .brands-logo {
      margin-top: -80px;
  }
  }