*{
    margin: 0;
    padding: 0;
}
.company-logos-marquee {
  background: #000;
  position: relative;
  width: 100%;
  padding: 40px 0;
  overflow: hidden;
}

/* Marquee rows with duplicated logo set for infinite loop */
.logo-row {
  display: flex;
  gap: 50px;
  align-items: center;
  width: max-content;
  position: relative;
  will-change: transform;
}
.logo-row img {
  /* height: 54px; */
  filter: brightness(0) invert(1);
  /* opacity: 0.77; */
  transition: transform 0.2s, opacity 0.2s;
}
.logo-row img:hover {
  transform: scale(1.09);
  opacity: 1;
}

/* Infinite left-to-right animation */
.marquee-left-right {
    animation: marquee-ltr 20s linear infinite;
    margin-bottom: 24px;
}
/* Infinite right-to-left animation */
.marquee-right-left {
  animation: marquee-rtl 20s linear infinite;
}

/* Pause the animation only while hovering over the marquee row */
.logo-row:hover {
  animation-play-state: paused;
}

@keyframes marquee-ltr {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
@keyframes marquee-rtl {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Fade sides for sunset effect */
.logo-fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  pointer-events: none;
  z-index: 3;
}
.logo-fade-left {
  left: 0;
  background: linear-gradient(to right, #000 85%, transparent);
}
.logo-fade-right {
  right: 0;
  background: linear-gradient(to left, #000 85%, transparent);
}

@media (max-width: 700px) {
  .logo-row img { height: 30px; }
  .logo-row { gap: 22px; }
  .logo-fade { width: 45px; }
}