/* ==========================================================
   CORES — UTILITÁRIOS
========================================================== */

.color-white {
  color: var(--color-white);
}

.color-light-grey {
  color: var(--color-light-grey);
}

.color-dark-grey {
  color: var(--color-dark-grey);
}

.color-light-blue {
  color: var(--color-light-blue);
}

.color-dark-blue {
  color: var(--color-dark-blue);
}

.color-light-aqua {
  color: var(--color-light-aqua);
}

.color-dark-aqua {
  color: var(--color-dark-aqua);
}

.color-blue {
  color: var(--color-blue);
}

.color-grey93 {
  color: var(--color-grey93);
}

.color-grey59 {
  color: var(--color-grey59);
}

.color-grey38 {
  color: var(--color-grey38);
}

.color-green {
  color: var(--color-green);
}

.color-yellow {
  color: var(--color-yellow);
}

.color-red {
  color: var(--color-red);
}


/* ==========================================================
   TIPOGRAFIA
========================================================== */

.bold-82 { font-weight: 700; font-size: 82px; }
.medium-82 { font-weight: 500; font-size: 82px; }
.regular-82 { font-weight: 400; font-size: 82px; }

.bold-68 { font-weight: 700; font-size: 68px; }
.medium-68 { font-weight: 500; font-size: 68px; }
.regular-68 { font-weight: 400; font-size: 68px; }

.bold-57 { font-weight: 700; font-size: 57px; }
.medium-57 { font-weight: 500; font-size: 57px; }
.regular-57 { font-weight: 400; font-size: 57px; }

.bold-47 { font-weight: 700; font-size: 47px; }
.medium-47 { font-weight: 500; font-size: 47px; }
.regular-47 { font-weight: 400; font-size: 47px; }

.bold-39 { font-weight: 700; font-size: 39px; }
.medium-39 { font-weight: 500; font-size: 39px; }
.regular-39 { font-weight: 400; font-size: 39px; }

.bold-33 { font-weight: 700; font-size: 33px; }
.medium-33 { font-weight: 500; font-size: 33px; }
.regular-33 { font-weight: 400; font-size: 33px; }

.bold-27 { font-weight: 700; font-size: 27px; }
.medium-27 { font-weight: 500; font-size: 27px; }
.regular-27 { font-weight: 400; font-size: 27px; }

.bold-23 { font-weight: 700; font-size: 23px; }
.medium-23 { font-weight: 500; font-size: 23px; }
.regular-23 { font-weight: 400; font-size: 23px; }

.bold-19 { font-weight: 700; font-size: 19px; }
.medium-19 { font-weight: 500; font-size: 19px; }
.regular-19 { font-weight: 400; font-size: 19px; }

.bold-16 { font-weight: 700; font-size: 16px; }
.medium-16 { font-weight: 500; font-size: 16px; }
.regular-16 { font-weight: 400; font-size: 16px; }

.bold-13 { font-weight: 700; font-size: 13px; }
.medium-13 { font-weight: 500; font-size: 13px; }
.regular-13 { font-weight: 400; font-size: 13px; }

.bold-11 { font-weight: 700; font-size: 11px; }
.medium-11 { font-weight: 500; font-size: 11px; }
.regular-11 { font-weight: 400; font-size: 11px; }


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

.decoration-none {
  text-decoration: none;
}

.white-space {
  white-space: pre-line;
}


/* ==========================================================
   LINHAS DIVISÓRIAS
========================================================== */

.horizontal-line {
  border: 1px solid var(--color-dark-grey);
  margin-top: 12px;
}

.vertical-line-sm {
  border: 1px solid var(--color-dark-grey);
  height: 18px;
}


/* ==========================================================
   GUTTER BOOTSTRAP
========================================================== */

.g-6 {
  --bs-gutter-x: 4rem;
  --bs-gutter-y: 4rem;
}


/* ==========================================================
   GAP
========================================================== */

.gap-8  { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }
.gap-36 { gap: 36px; }
.gap-48 { gap: 48px; }
.gap-76 { gap: 76px; }


/* ==========================================================
   MARGIN-TOP
========================================================== */

.mt-0  { margin-top: 0px; }
.mt-12 { margin-top: 12px; }
.mt-32 { margin-top: 32px; }


/* ==========================================================
   MARGIN-BOTTOM
========================================================== */

.mb-0  { margin-bottom: 0px; }
.mb-4  { margin-bottom: 4px !important; }
.mb-6  { margin-bottom: 6px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-38 { margin-bottom: 38px; }
.mb-48 { margin-bottom: 48px; }


/* ==========================================================
   ÍCONES
========================================================== */

.icon    { width: 24px; height: 24px; }
.icon-lg { width: 32px; height: 32px; }
.icon-sm { width: 16px; height: 16px; }


/* ==========================================================
   MOBILE — TIPOGRAFIA
   @media (max-width: 992px)
========================================================== */

@media (max-width: 992px) {

  .h1-mob {
    font-family: "Outfit", sans-serif;
    font-size: 48px;
    line-height: 1.4;
    font-weight: 400;
  }

  .h2-mob {
    font-family: "Outfit", sans-serif;
    font-size: 40px;
    line-height: 1.4;
    font-weight: 400;
  }

  .h3-mob {
    font-family: "Outfit", sans-serif;
    font-size: 33px;
    line-height: 1.4;
    font-weight: 400;
  }

  .h4-mob {
    font-family: "Outfit", sans-serif;
    font-size: 28px;
    line-height: 1.4;
    font-weight: 400;
  }

  .h5-mob {
    font-family: "Outfit", sans-serif;
    font-size: 23px;
    line-height: 1.4;
    font-weight: 400;
  }

  .title-1-mob {
    font-family: "Outfit", sans-serif;
    font-size: 19px;
    line-height: 1.4;
    font-weight: 400;
  }

  .title-2-mob {
    font-family: "Outfit", sans-serif;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
  }

  .caption-mob {
    font-family: "Outfit", sans-serif;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 400;
  }

  .bold-mob {
    font-weight: 700;
  }

  .bold-23{
    font-weight: 700;
    font-size: 16px;
  }

  .bold-16{
    font-size: 12px;
  }

   .regular-16{
    font-size: 12px;
  }

  .container,
  .container-fluid,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    --bs-gutter-x: 40px;
  }

}