:root {
  /* Colors */
  --white: #fff;
  --black: #000;
  --black-kia: #04121f;
  --blue-hover: #0f2b45;
  --gray-light: #f9f9f9;

  /* Transition */
  --transition-duration: 0.3s;

  /* Font Size */
  --fz-xxl: clamp(3.666rem, 3.142rem + 2.62vw, 5.5rem);
  --fz-xl: clamp(2.5rem, 2.3571rem + 0.7143vw, 3rem);
  --fz-l: clamp(2rem, 1.8571rem + 0.7143vw, 2.5rem);
  --fz-md: clamp(1.625rem, 1.5179rem + 0.5357vw, 2rem);
  --fz-normal: clamp(1.125rem, 1.0179rem + 0.5357vw, 1.5rem);
  --fz-s: clamp(0.85rem, 0.6786rem + 0.3571vw, 1rem);
  --fz-xs: clamp(0.7875rem, 0.6518rem + 0.1786vw, 0.8125rem);
  --fz-xxs: clamp(0.5625rem, 0.5089rem + 0.2679vw, 0.75rem);
}

* {
  font-family: 'kiaotflight', sans-serif;
  font-size: 16px;
}

html,
body {
  font-size: 16px;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  text-align: center;
  line-height: initial;
}

strong,
b,
.bold,
.strong {
  font-family: 'kiaotfbold', 'sans-serif' !important;
}

h1 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1.2rem;
}

h3 {
  font-size: 1.1rem;
}

.kia-normal {
  font-family: 'kiaotfmedium';
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  width: 100%;
  height: auto;
}

/*utilities*/
.black-kia {
  color: var(--black-kia);
}

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

.header {
  width: 100%;
  border-bottom: 1px solid white;
  padding: 1.5625rem;
  align-items: center;
  @media screen and (min-width: 768px) {
    justify-content: center !important;
    padding-bottom: 2rem;
    padding-top: 2rem;
  }
}

/* Buttons */
.button-big {
  padding: clamp(0.916625rem, 0.7857rem + 0.6548vw, 1.375rem)
    clamp(2.291625rem, 1.9642rem + 1.637vw, 3.4375rem);
  font-size: var(--fz-normal);
  font-weight: normal;
}

.button-medium {
  padding: clamp(0.75rem, 0.6429rem + 0.5357vw, 1.125rem)
    clamp(1.666rem, 1.4277rem + 1.1914vw, 2.5rem);
  font-size: var(--fz-normal);
  font-weight: normal;
}

.button-small {
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  font-weight: normal;
}

.button-kia-solid {
  background-color: var(--black-kia);
  color: var(--white);
  transition: all var(--transition-duration);
}

.button-kia-solid:hover {
  background-color: var(--blue-hover);
}

.button-kia-solid-white {
  background-color: var(--white);
  color: var(--black-kia);
  border: var(--black-kia);
  transition: all var(--transition-duration);
}

.button-kia-solid-white:hover {
  background-color: var(--black-kia);
  color: var(--white);
  border: var(--white);
}

.button-kia-line {
  background-color: transparent;
  border: 1px solid var(--white);
  color: var(--white);
  transition: all var(--transition-duration);
}

.button-kia-line:hover {
  background-color: var(--white);
  color: var(--black-kia) !important;
}

.button-kia-line-dark {
  background-color: transparent;
  border: 1px solid var(--black);
  color: var(--black);
  transition: all var(--transition-duration);
}
.button-kia-line-dark:hover {
  background-color: var(--black);
  color: var(--white);
}

.label-new-ligth,
.label-new-dark {
  font-size: var(--fz-xxs);
  font-size: 800;
  text-transform: uppercase;
  padding: 0.5rem 1.125rem;
  width: max-content;
}

.label-new-ligth {
  color: var(--black-kia);
  background-color: var(--white);
}

.label-new-dark {
  color: var(--white);
  background-color: var(--black-kia);
}

.button-kia-line span.spinner-border {
  display: none;
}

.button-kia-line.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.button-kia-line.disabled span.spinner-border {
  display: inline-block;
}

.f-button svg {
  filter: unset;
}