.brands{
  overflow: hidden;
}
.brands .over {
  height: 100%;
  width: 100vw;
  background-size: 100% 100%;
  overflow: hidden;
}

.brands .all {
  height: 206px;
  width: 100vw;
  overflow: hidden;
  justify-content: center;
  display: flex;
  align-items: center;
}

.brands .Marquee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 50px;
}

.brands .marquee {
  width: 18vw;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

.brands .marquee img {
  max-height: 45px;
}

.brands .Row {
  animation: Scrollone 20s linear infinite running;
}

.brands .Row:hover {
  animation-play-state: paused;
}

@keyframes Scrollone {
  0% {
    transform: translateX(-50vw);
  }

  100% {
    transform: translateX(50vw);
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  .brands .marquee {
    width: 30vw !important;
  }
}

@media (max-width: 768px) {
  .brands .all {
    width: 200vw;
  }

  .brands .marquee {
    width: 60vw;
  }

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

    100% {
      transform: translateX(100vw);
    }
  }
}

@media (max-width: 767px) {
  .brands {
    padding-top: var(--mobile-margin);
    padding-bottom: var(--mobile-margin);
  }

  .brands .all {
    width: 300vw;
  }

  .brands .Marquee {
    width: 770vw;
  }

  @keyframes Scrollone {
    0% {
      transform: translateX(-150vw);
    }

    100% {
      transform: translateX(150vw);
    }
  }
}