/* =========================================
EDGE FADE
========================================= */

.fd-brand-section::before,
.fd-brand-section::after{

  content:"";

  position:absolute;

  top:0;

  width:90px;
  height:100%;

  z-index:5;

  pointer-events:none;

}

/* LEFT */

.fd-brand-section::before{

  left:0;

  background:linear-gradient(
    to right,
    rgba(248,250,252,1) 0%,
    rgba(248,250,252,.92) 35%,
    rgba(248,250,252,.55) 68%,
    rgba(248,250,252,0) 100%
  );

}

/* RIGHT */

.fd-brand-section::after{

  right:0;

  background:linear-gradient(
    to left,
    rgba(248,250,252,1) 0%,
    rgba(248,250,252,.92) 35%,
    rgba(248,250,252,.55) 68%,
    rgba(248,250,252,0) 100%
  );

}

@media(max-width:767px){

  .fd-brand-section::before,
  .fd-brand-section::after{
    width:55px;
  }

}

/* =========================================
BRANDS SECTION
========================================= */

.fd-brand-section{
  position:relative;
  padding:85px 0;
  overflow:hidden;
}

.fd-brand-heading-wrap{
  text-align:center;
  max-width:860px;
  margin:0 auto 50px;
  padding:0 18px;
}

.fd-marquee-wrap{
  position:relative;
  overflow:hidden;
  margin-top:38px;

  display:flex;
  flex-direction:column;
  gap:14px;
}

.fd-marquee{
  display:flex;
  align-items:center;

  width:max-content;

  min-height:115px;

  will-change:transform;

  opacity:0;

   animation:
    fd-marquee-left 80s linear infinite,
    fd-marquee-fade .35s ease forwards;
}

.fd-marquee.reverse{
  animation:
    fd-marquee-right 80s linear infinite,
    fd-marquee-fade .35s ease forwards;
}

@keyframes fd-marquee-left{

  from{
    transform:translateX(0);
  }

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

}

@keyframes fd-marquee-right{

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

  to{
    transform:translateX(0);
  }

}

.fd-brand-track{
  display:flex;
  align-items:center;
  min-height:115px;
}

.fd-brand-card{
  flex:0 0 auto;

  width:260px;
  height:110px;

  margin-right:22px;

  position:relative;
  overflow:hidden;

  display:grid;
  place-items:center;

  padding:8px 18px;

  background:#ffffff;

  border:1px solid #e7edf3;
}

@keyframes fd-marquee-fade{

  to{
    opacity:1;
  }

}

.fd-logo-skeleton{
  position:absolute;
  inset:0;

  background:linear-gradient(
    90deg,
    #f1f5f9 25%,
    #e2e8f0 50%,
    #f1f5f9 75%
  );

  background-size:200% 100%;

  animation:fd-shimmer 1.5s infinite linear;

  transition:opacity .4s ease;

  z-index:1;
}

@keyframes fd-shimmer{

  from{
    background-position:200% 0;
  }

  to{
    background-position:-200% 0;
  }

}

.fd-brand-card img{
  max-width:215px;
  max-height:72px;

  width:auto;
  height:auto;

  object-fit:contain;
  object-position:center;

  display:block;

  z-index:3;

  opacity:1;

  transition:transform .3s ease;
}

/* =========================================
MOBILE
========================================= */

@media(max-width:767px){

  .fd-brand-card{
    width:180px;
    height:82px;

    padding:6px 10px;
  }

  .fd-brand-card img{
   max-width:155px;
   max-height:56px;

   width:auto;
   height:auto;
  }

  .fd-marquee-wrap{
    min-height:180px;
  }

  .fd-marquee,
  .fd-brand-track{
    min-height:82px;
  }

}