/* Marquee Smooth Logos - Frontend CSS */
.msl-marquee{
  overflow: hidden;
  width: 100%;
  position: relative;
  padding: 10px 0;
  background: transparent;
}

/* Custom properties controlled from inline style */
.msl-marquee{
  --msl-speed: 30s;
  --msl-gap: 60px;
  --msl-height: 64px;
}

.msl-track{
  display: flex;
  align-items: center;
  gap: var(--msl-gap);
  width: max-content;           /* allow content to define width */
  will-change: transform;
  animation: msl-scroll-left var(--msl-speed) linear infinite;
}

.msl-marquee[data-dir="right"] .msl-track{
  animation-name: msl-scroll-right;
}

.msl-group{
  display: flex;
  align-items: center;
  gap: var(--msl-gap);
}

.msl-item{
  flex: 0 0 auto;
  display: inline-block;
  opacity: 0.9;
  transition: transform .2s ease, opacity .2s ease, filter .2s ease;
  filter: grayscale(20%);
}

.msl-item:hover{
  transform: scale(1.05);
  opacity: 1;
  filter: grayscale(0%);
}

.msl-item img{
  height: var(--msl-height);
  width: auto;
  display: block;
  border: 1px solid rgba(0, 0, 0, 1);
  border-radius: 4px;
  background: #fff;
  padding: 6px;
  box-sizing: border-box;
}


/* Pause on hover only if data-pause=true */
.msl-marquee[data-pause="true"]:hover .msl-track{
  animation-play-state: paused;
}

/* Seamless infinite scroll using two groups; translate by 50% */
@keyframes msl-scroll-left{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
@keyframes msl-scroll-right{
  0%{ transform: translateX(-50%); }
  100%{ transform: translateX(0); }
}

/* Mobile tweaks */
@media (max-width: 767px){
  .msl-marquee{ --msl-gap: 32px; }
  .msl-item img{ height: calc(var(--msl-height) * 0.7); }
}