.marqueeContainer {
  --space: 2rem;
  display: -ms-grid;
  display: grid;
  -ms-flex-line-pack: center;
  align-content: center;
  overflow: hidden;
  gap: 40px;
  mix-blend-mode: darken;
}

.marquee {
  --duration: calc(var(--countImg) * 3s);
  --gap: calc(var(--space) * 2);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  gap: var(--gap);  
}
.marquee img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform: scale(1) !important;
  -ms-transform: scale(1) !important;
  transform: scale(1) !important;
  
}
.marquee img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.marquee__group {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: center;
  gap: var(--gap);
  min-width: 100%;

}
.marquee__animation{
  /* --duration :calc(var(--countImg) * 3); */
  justify-content:space-around;
  -webkit-animation: scroll var(--duration) linear infinite;
  animation: scroll var(--duration) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .marquee__group {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }
}
.marquee__group img {
  height: 100px;
  /* width: 200px; */
  aspect-ratio: 2/1; 
  object-fit: contain;
}

.marquee--reverse .marquee__group {
  animation-direction: reverse;
  -webkit-animation-delay: calc(var(--duration) / -2);
  animation-delay: calc(var(--duration) / -2);
}

@media screen and (max-width: 1100px) {
  .marquee__animation_3{
    justify-content:space-around;
    -webkit-animation: scroll var(--duration) linear infinite;
    animation: scroll var(--duration) linear infinite;
  }
}
@media screen and (max-width: 1400px) {
  .marquee__group img {
    height: 70px;
  }
  .marquee__animation_4{
    justify-content:space-around;
    -webkit-animation: scroll var(--duration) linear infinite;
    animation: scroll var(--duration) linear infinite;
  }
}
@media screen and (max-width: 600px) {
  .marquee{
    --gap: calc(var(--space) * 1);
  }
  .marquee__animation_2{
    justify-content:space-around;
    -webkit-animation: scroll var(--duration) linear infinite;
    animation: scroll var(--duration) linear infinite;
  }
  .marqueeContainer {
    --space: 3rem;
    width: 100%;
    -webkit-transform: translate(0%, 0);
    -ms-transform: translate(0%, 0);
    transform: translate(0%, 0);
  }
  
  .marquee__group img {
    height: 60px;
  }
  .marquee__group_phone {
    transition: all 0.5s;
  }
  .marquee__group_phone img {
    height: 70px !important;
    transition: all 0.5s !important;
  }
}

@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(calc(-100% - var(--gap)));
    transform: translateX(calc(-100% - var(--gap)));
  }
}

@keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(calc(-100% - var(--gap)));
    transform: translateX(calc(-100% - var(--gap)));
  }
}