/* 
* Base CSS
* -----------------------------------------------------
*/

:root {
  /* ================= Colors ================= */
  --primary-color: #419293;
  --primary-color-light: ;
  --primary-color-dark: ;
  --secondary-color: #97abae;
  --tertiary-color: ;
  --text-color: #252525;

  /* --swiper-pagination-color: #595477;
    --swiper-pagination-bullet-size: 12px;
    --swiper-pagination-bullet-width: 12px;
    --swiper-pagination-bullet-height: 12px;
    --swiper-pagination-bullet-inactive-color: none;
    --swiper-pagination-bullet-inactive-opacity: 0.2;
    --swiper-pagination-bullet-opacity: 1; */
}

/* .swiper-pagination-bullet {
    border: 3px solid #595477;
    border-radius: 50%;
} */

button,
input,
select {
  outline: none;
  border: none;
  background: none;
}

a {
  color: inherit !important;
  text-decoration: none !important;
}

.picture img {
  width: 100%;
  object-fit: cover;
}

input[type='checkbox'] {
  appearance: none;
  background-color: none;
  cursor: pointer;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1em;
  height: 1em;
  border: 1px solid #fff;
  border-radius: 0.05em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

input[type='checkbox']::before {
  content: '';
  width: 8px;
  height: 8px;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em #fff;
}

input[type='checkbox']:checked::before {
  transform: scale(1);
}

h1 {
  color: inherit;
  font-family: 'BeautiqueDisplay', sans-serif;
  font-weight: 400 !important;
  font-size: 50px !important;
  line-height: 56px;
}

h2 {
  color: var(--primary-color);
  font-family: 'BeautiqueDisplay', sans-serif;
  font-weight: 400 !important;
  font-size: 33px !important;
  line-height: auto;
}
h3 {
  color: inherit;
  text-transform: uppercase;
  font-family: 'Arquitecta', sans-serif;
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 0.1em;
}
h4 {
  color: var(--primary-color);
  text-transform: uppercase;
  font-family: 'Arquitecta', sans-serif;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: auto;
  letter-spacing: 0.1em;
}

p {
  color: var(--text-color);
  font-family: 'Arquitecta', sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: normal;
}
@media (max-width: 998px) {
  h1 {
    font-size: 42px !important;
  }
  h2 {
    font-size: 30px !important;
  }
  h3 {
    font-size: 20px !important;
  }
  br {
    display: none;
  }
}
@media (max-width: 480px) {
  h1 {
    font-size: 32px !important;
  }

  h2 {
    font-size: 26px !important;
  }

  h3 {
    font-size: 16px !important;
  }
  h4 {
    font-size: 12px !important;
  }
  p {
    font-size: 18px;
  }
}

.button button {
  background-color: #419293;
  color: white;
  padding-block: 6px;
  padding-inline: 18px;
  transition: opacity 300ms ease;
}

.button button:hover {
  opacity: .8;
}