/* =========================================================
   HOME - CLIENTES
========================================================= */

.clients-section{
  position:relative;
  z-index:2;

  margin-top:-40px;

  padding:30px 0 30px;

  overflow:hidden;
}

/* =========================================================
   LINHA SUPERIOR
========================================================= */

.clients-section::before{
  content:"";

  position:absolute;
  top:0;
  left:50%;

  width:min(100% - 48px, 1320px);
  height:1px;

  transform:translateX(-50%);

  background:linear-gradient(
    90deg,
    transparent,
    rgba(0,0,0,.10),
    transparent
  );
}

/* =========================================================
   CONTAINER
========================================================= */

.clients-section .container{
  width:min(100% - 48px, 1320px);

  margin:0 auto;
}

/* =========================================================
   BOX
========================================================= */

.clients-box{
  width:100%;
}

/* =========================================================
   INTRO
========================================================= */

.clients-intro{
  width:100%;
  max-width:none;

  margin:0 0 70px;
}


/* =========================================================
   TÍTULO
========================================================= */

.clients-intro h2{
  width:100%;
  max-width:none;

  margin:0 0 24px;

  font-family:var(--font-secondary);

  font-size:clamp(42px,4vw,64px);
  font-weight:500;

  line-height:1.05;
  letter-spacing:-.035em;

  color:var(--en-black);

  white-space:nowrap;
}


/* =========================================================
   TEXTO
========================================================= */

.clients-intro p{
  width:100%;
  max-width:900px;

  margin:0;

  font-size:18px;
  line-height:1.75;

  color:var(--en-muted);
}

/* =========================================================
   CARROSSEL
========================================================= */

.clients-slider{
  position:relative;

  width:100%;

  padding:28px 0;

  overflow:hidden;
}

/* =========================================================
   MÁSCARAS LATERAIS
========================================================= */

.clients-slider::before,
.clients-slider::after{
  content:"";

  position:absolute;

  top:0;
  bottom:0;

  width:95px;

  z-index:5;

  pointer-events:none;
}

.clients-slider::before{
  left:0;

  background:linear-gradient(
    90deg,
    #f8f6f2 0%,
    rgba(248,246,242,.90) 35%,
    rgba(248,246,242,0) 100%
  );
}

.clients-slider::after{
  right:0;

  background:linear-gradient(
    270deg,
    #f5f6f4 0%,
    rgba(245,246,244,.90) 35%,
    rgba(245,246,244,0) 100%
  );
}

/* =========================================================
   TRACK
========================================================= */

.clients-track{
  display:flex;
  align-items:center;

  gap:100px;

  width:max-content;

  animation:endesignClientsLoop 65s linear infinite;

  will-change:transform;
}

/* =========================================================
   LOGOS
========================================================= */

.clients-track img{
  flex:0 0 auto;

  width:auto;
  height:auto;

  max-width:220px;
  max-height:120px;

  object-fit:contain;

  opacity:1;

  filter:none;

  transition:
    transform .3s ease,
    opacity .3s ease;
}

/* HOVER */

.clients-track img:hover{
  transform:scale(1.08);
}

/* =========================================================
   ANIMAÇÃO
========================================================= */

@keyframes endesignClientsLoop{

  from{
    transform:translateX(0);
  }

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

}

/* =========================================================
   PAUSAR NO HOVER
========================================================= */

.clients-slider:hover .clients-track{
  animation-play-state:paused;
}

@media (max-width: 767px){

  .clients-section{
    margin-top:-20px;
    padding:55px 0 0;
  }

  /* =======================================================
     CONTAINER
  ======================================================= */

  .clients-section .container{
    width:100%;
    max-width:none;

    padding:0 22px;
  }

  /* =======================================================
     INTRO
  ======================================================= */

  .clients-intro{
    width:100%;
    max-width:100%;

    margin:0 0 30px;

    text-align:center;
  }

  .clients-intro .section-tag{
    margin-bottom:14px;
  }

  .clients-intro h2{
    margin-bottom:20px;

    font-size:26px;
    line-height:1.08;
  }

  .clients-intro p{
    max-width:100%;

    font-size:15px;
    line-height:1.15;
	text-align: justify;
  }

  /* =======================================================
     CARROSSEL
     ESCAPA DO CONTAINER
  ======================================================= */

  .clients-slider{
    width:100vw;

    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);

    padding:0;

    overflow:hidden;
  }

  .clients-track{
    width:max-content;

    margin:0;
    padding:0;

    display:flex;
    align-items:center;

    gap:58px;

    animation-duration:45s;
  }

  /* =======================================================
     LOGOS
  ======================================================= */

  .clients-track img{
    display:block;

    width:auto;
    height:auto;

    max-width:180px;
    max-height:90px;

    margin:0;
    padding:0;

    object-fit:contain;

    flex-shrink:0;
  }

  /* =======================================================
     MÁSCARAS
  ======================================================= */

  .clients-slider::before,
  .clients-slider::after{
    width:28px;
  }

}