.brands {
  position: relative;
  overflow: hidden;
  height: 8rem;
}

.brands:hover .brands__wrapper,
.brands:hover .brands__preWrapper {
  animation-play-state: paused; /* Pause the scrolling when hovering over the brands container */

}

.brands__preWrapper {
  position: relative;
  width: 100%;
  height: 6rem;
  transform: translateX(0%);
  animation: scroll1 8s linear infinite;
  animation-delay: 4s;
  animation-direction: alternate;
  will-change: transform;
}

.brands__wrapper {
  position: absolute;
  white-space: nowrap;
  transform: translateX(0%) translateZ(0);
  animation: scroll2 8s linear infinite;
  animation-delay: 4s;
  animation-direction: alternate;
  will-change: transform;
}

.brands__wrapper > a,
.brands__wrapper > img {
  position: relative;
  display: inline-block;
  margin: 0 1rem;
  vertical-align: middle;
  transition: transform 0.3s ease-in-out; /* Add transition for smooth scaling */
}

.brands__wrapper > a img {
  max-width: 9rem;
  max-height: 5rem;
}

/* Scale the image when hovered */
.brands__wrapper > a img:hover {
  transform: scale(1.1); /* Adjust scale as needed */
  transition: transform 0.3s ease-in-out !important;
}

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

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