@font-face {
  font-family: "Gotham";
  src: url("/fonts/gotham-extra-light.woff2") format("woff2");
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: 0;
  border: 0;
  text-decoration: none;
  list-style: none;
  font-family: "Inter", sans-serif;
}

main {
  background: #fafcfc;
}
:root {
  --primary-color: #2a7d7c;
  --secondary-color: #12294b;
  --gray-color: #f9f9f9;
  --white-color: #ffffff;

  /* font color */
  --text-color: #12294b;

  /* font-size */
  --super-title-font-size: 48px;
  --title-font-size: 20px;
  --text-font-size: 18px;
  --tiny-font-size: 13px;
  --super-title-font-weight: 600;
  --super-title-line-height: 1.05;
  --title-font-weight: 500;
  --text-line-height: 1.8;

  /* space-config */
  --main-padding: 55px;

  --title-margin-bottom: 22px;
  --title-line-margin-bottom: 28px;

  --logo_size: 150px;
}

.container {
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
  padding: 10px var(--main-padding);
}

.btn {
  border: 1px solid var(--primary-color);
  padding: 13px 45px;
  border-radius: 50px;
  transition: 0.3s;
  color: var(--primary-color);
  font-size: var(--text-font-size);
}

.filled-btn {
  background: var(--primary-color);
  color: var(--white-color);
}

.filled-btn:hover {
  background-color: #016e6e;
  transform: translateY(-2px);
}

.outline-btn {
  background: rgba(255, 255, 255, 0.75);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.outline-btn:hover {
  background: var(--primary-color);
  color: white;
}

@media (max-width: 1200px) {
  :root {
    --logo_size: 100px;
  }
}
@media (max-width: 1100px) {
  :root {
    --super-title-font-size: 45px;
    --main-padding: 35px;
  }
}

@media (max-width: 992px) {
  :root {
    /* font-size */
    --text-font-size: 18px;
  }
}

@media (max-width: 576px) {
  :root {
    /* font-size */
    --super-title-font-size: 30px;
  }
}

@media (max-width: 480px) {
  :root {
    /* font-size */
    --super-title-font-size: 25px;
    --text-font-size: 16px;
    --logo_size: 100px;
  }
}
@media (max-width: 400px) {
  :root {
    --main-padding: 25px;
  }
}