.brands-marquee-wrap{
    width:100%;
    position: relative;
    overflow: hidden;
}

.brands-marquee-container{
    overflow:hidden;
    width:100%;
    padding:10px 0;
}

.brands-marquee{
    display:flex;
    width:max-content;
    will-change:transform;
    padding: 20px 0;
}

.brands-track{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
}

.brands-logo-item{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 40px;
}

.brands-logo-item img{
    height:50px;
    width:100px;
    display:block;
    object-fit:contain;
}

.brands-logo-item span{
    color:#fff;
    font-size:20px;
    font-weight:600;
    text-transform:uppercase;
}
/* =============== Marquee   ============== */

:root{
  --logo-size: 70px;
  --gap: 40px;
  --speed: 55s;
}

/* SECTION */
.logo-wall{
  position:relative;
  overflow:hidden;
  width:100%;
  background:#ffffff;
  padding:90px 0;
}
.graycontrol{
    position:absolute;

    /*
    START AFTER FIRST 10%
    */

    left:10%;

    /*
    COVER NEXT 46%
    */

    width:36%;

    top:0;
    height:100%;

    z-index:13;

    pointer-events:none;

    /*
    FORCE GRAYSCALE
    */

    backdrop-filter: grayscale(1);

    /*
    SOFT FADE RIGHT EDGE
    */

    -webkit-mask-image: linear-gradient(
        to right,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 75%,
        rgba(0,0,0,0) 100%
    );

    mask-image: linear-gradient(
        to right,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 75%,
        rgba(0,0,0,0) 100%
    );
}
/* CENTER LIGHT AREA */
.center-zone{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:300px;
  height:100%;
  z-index:2;
  pointer-events:none;

  background:linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.92) 30%,
    rgba(255,255,255,1) 50%,
    rgba(255,255,255,0.92) 70%,
    rgba(255,255,255,0) 100%
  );
}

/* CENTER LOGO */
.center-logo{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:120px;
  height:120px;
  border-radius:100%;
  background:#36a503;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;

  animation:pulseGlow 2.5s infinite ease-in-out;
}


/* GLOW PULSE */
@keyframes pulseGlow{

  0%{
    box-shadow:
      0 0 0 0 rgba(28,128,60,.45),
      0 0 30px rgba(28,140,35,.2);
  }

  70%{
    box-shadow:
      0 0 0 35px rgba(28,128,60,0),
      0 0 60px rgba(28,140,35,.35);
  }

  100%{
    box-shadow:
      0 0 0 0 rgba(28,128,60,0),
      0 0 30px rgba(28,140,35,.15);
  }

}

.center-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* MARQUEE */

.marquee{ display:flex; width:max-content; will-change:transform; transform:translate3d(0,0,0); backface-visibility:hidden; } 
.track{ display:flex; align-items:center; flex-shrink:0; }
/* ITEMS */
.logo-item{
  width:var(--logo-size);
  height:var(--logo-size);
  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;
}

.logo-item img{
  width:100%;
  height:100%;
  object-fit:contain;

/*   filter:grayscale(100%) opacity(.45); */
  transition:.45s ease;
}

/* ACTIVE + REMAIN COLORED */
.logo-item.active img{
  filter:grayscale(0%) opacity(1);
}
section.logo-wall::after,section.logo-wall::before,
.brands-marquee-wrap::before,.brands-marquee-wrap::after{
    content: '';
    position: absolute;
    top: 0;
    z-index: 10;
    height: 100%;
    width: 10%;
}
section.logo-wall::before,.brands-marquee-wrap::before{
      background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0.95) 20%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
      left: 0;
      right: auto;
}
section.logo-wall::after,.brands-marquee-wrap::after {
    right: 0;
    left: auto;
background: linear-gradient(
  to left,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,0.9) 25%,
  rgba(255,255,255,0.5) 60%,
  rgba(255,255,255,0) 100%
);
}
/* LEFT → RIGHT */
@keyframes moveRight{

  from{
    transform:translateX(-50%);
  }

  to{
    transform:translateX(0%);
  }

}

/* MOBILE */
@media(max-width:768px){

  :root{
    --logo-size:58px;
    --gap:50px;
    --speed:25s;
  }

  .logo-wall{
    padding:55px 0;
  }

  .center-zone{
    width:180px;
  }

  .center-logo{
    width:100px;
    height:100px;
  }

  .center-logo img{
    width:48px;
    height:48px;
  }
	.graycontrol{left:4%;}

}
/* marque brands */
.marquee-container {
  padding: 10px 0;
}

.marquee-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
}

.marquee-set {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.logo-itr {
  flex: 0 0 auto;
  margin: 0 30px;
	align-items: center;
  gap: 20px;
	display: flex;
  justify-content: center;
}
.logo-itr span{font-size:20px;font-weight:600;color:white;text-transform:uppercase;}
.logo-itr img {
  height: 40px;
  width: auto;
  display: block;
  object-fit: contain;
}