@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,600;0,700;0,800;0,900;1,900&display=swap');

:root {
  --agency-one: #07162d;
  --agency-two: #9e1428;
  --agency-three: #ffc857;
  --agency-light-bg: #f5f5f5;
  --agency-dark-bg: #07080a;
  --agency-light-text: #f5f5f5;
  --agency-dark-text: #07080a;
  --agency-success: #4caf50;
  --agency-warning: #ffc857;
  --agency-error: #9e1428;
  --agency-font-primary: 'Barlow', sans-serif;
}

body {
  font-family: 'Barlow', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-black {
  font-family: 'Barlow', sans-serif !important;
  font-weight: 900 !important;
}

/* -------------------------------------------------------------
 * COMPONENTES Y MARQUESINAS DE LA AGENCIA
 * ------------------------------------------------------------- */
@keyframes marqueeLeft {
  0% {
    transform: translateX(0);
  }

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

@keyframes marqueeRight {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

.animate-marquee-left {
  display: flex;
  width: max-content;
  animation: marqueeLeft 35s linear infinite;
}

.animate-marquee-right {
  display: flex;
  width: max-content;
  animation: marqueeRight 35s linear infinite;
}

.animate-marquee-left:hover,
.animate-marquee-right:hover {
  animation-play-state: paused;
}