@import url('styles/hero.css');

@import url('styles/icons.css');

@import url('styles/about.css');

@import url('styles/divider.css');

@import url('styles/carousel.css');

@import url('styles/call.css');

@import url('styles/plans.css');

@import url('styles/map.css');

@import url('styles/footer.css');

@import url('styles/form.css');

:root {
  --g1: #063D44;
  --g2: #0A5359;
  --o1: #F39763;
  --o2: #F2DCC5;
  --o3: #FFFAF7;
  --o4: #FFFEFD;
  --c1: #F2F3F3;
  --c2: #E7E9E9;
  --c3: #D4D8D8;
  --c4: #BCC1C2;
  --c5: #A3ACAD;
  --c6: #8C9797;
  --c7: #788686;
  --c8: #687273;
  --c9: #576060;
  --c10: #454E4E;
  --c11: #303636;
  --c12: #1C2020;
  --c13: #111313;
  --title-font: "Baskervville", sans-serif;
  --text-font: "Nunito", sans-serif;
  --h1-size: 12vmin;
  --h2-size: 11vmin;
  --h3-size: 7vmin;
  --text-size: 5vmin;
  --small-text-size: 3vmin;
  --font-light: 300;
  --font-medium: 400;
  --font-bold: 700;
}


@import url('https://fonts.googleapis.com/css2?family=Baskervville:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

h1,
h2,
h3 {
  color: var(--c11);
}

h1 {
  font-family: var(--title-font);
  font-size: var(--h1-size);
  font-weight: var(--font-bold);
}

h2 {
  font-family: var(--title-font);
  font-size: var(--h2-size);
  font-weight: var(--font-light)
}

h3 {
  font-family: var(--text-font);
  font-size: var(--h3-size);
  font-weight: var(--font-bold);
}

p {
  font-family: var(--text-font);
  font-size: var(--text-size);
  font-weight: var(--font-medium);
  color: var(--c11);
  line-height: 1.5;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

small {
  font-family: var(--text-font);
  font-size: var(--small-text-size);
  font-weight: var(--font-light);
  color: var(--c11);
}

.call-button {
  font-family: var(--text-font);
  font-weight: var(--font-bold);
  font-size: var(--text-size);
  background-color: var(--o1);
  color: var(--o3);
  padding: 1rem 5vmin;
  border-radius: 10px;
}

.alert {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9999;
}

@media only screen and (min-width: 768px) {
  h2 {
    font-size: 6vmin;
  }

  p {
    font-size: 2.5vmin;
  }
}

@media only screen and (min-width: 1024px) {
  h2 {
    font-size: 7vmin;
  }

  p {
    font-size: 3vmin;
  }
}