@font-face {
  font-family: "Bebas-Neue";
  src: url("../fonts/BebasNeue-Regular-3df5ce270d9be084289b86bfad5c938f.otf") format("opentype");
  src: url("../fonts/BebasNeue-Regular-b000da1bb6fac5299f88edc053e308f6.ttf") format("ttf");
  src: url("../fonts/BebasNeue-Regular-ecd55fe378ca55b798688660c2450f47.woff") format("woff");
  src: url("../fonts/BebasNeue-Regular-9ab0e4d2bce41d15eed44aff0bbb28ff.woff2") format("woff2");
}
@font-face {
  font-family: "Rubik-Bold";
  src: url("../fonts/Rubik-Bold-efc0da30f3c67f52dbd1c889471f2791.otf") format("opentype");
  src: url("../fonts/Rubik-Bold-7b07c57c4d13c72907a5b6b6f463190e.ttf") format("ttf");
  src: url("../fonts/Rubik-Bold-580b67a66d63b8b4348ad557cac011e2.woff") format("woff");
  src: url("../fonts/Rubik-Bold-e5fee759494b351b2f21590e1ecfb3a9.woff2") format("woff2");
}
@font-face {
  font-family: "Rubik-Regular";
  src: url("../fonts/Rubik-Regular-8285fe317d2937d1771c5eefeade105b.otf") format("opentype");
  src: url("../fonts/Rubik-Regular-b75bd2619e6ce2e3e7407fa40baeaf42.ttf") format("ttf");
  src: url("../fonts/Rubik-Regular-f444d90e44b69a2bf1893add76062c47.woff") format("woff");
  src: url("../fonts/Rubik-Regular-04e04d3b0f17ed6a5836f4a144dfbe1a.woff2") format("woff2");
}
@font-face {
  font-family: "RubikGlitch-Regular";
  src: url("../fonts/RubikGlitch-Regular-9a9a6a458aec42bd9e1b151011d377a4.otf") format("opentype");
  src: url("../fonts/RubikGlitch-Regular-b54c4b7c1ba6b2c78074550c0a619982.ttf") format("ttf");
  src: url("../fonts/RubikGlitch-Regular-06b8c9a1b51d85ef2b927a46c36a2beb.woff") format("woff");
  src: url("../fonts/RubikGlitch-Regular-efc05b75f8135f720119928d53d9afd8.woff2") format("woff2");
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  --main-color:#56C4A3;
  --dark-background: #000;
  --light-font: #fff;
  --h1-font-family: Bebas-Neue;
  --main-font-family: Rubik-Bold;
  --light-font-family: Rubik-Regular;
  --cta-font-family: RubikGlitch-Regular;
  --z-index-overflow: 100;
  --z-index-overflow-over: 105;
}

html {
  font-size: 14px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--main-font-family);
  background-color: var(--dark-background);
  color: var(--light-font);
}

h1 {
  font-family: var(--h1-font-family);
}

.hide-on-desktop {
  display: block;
}

.hide-on-mobile {
  display: none;
}

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.container {
  max-width: 100vw;
  padding: 2em 2.5em;
  margin: 0 auto;
}

.main__nav {
  position: fixed;
  top: 0;
  z-index: var(--z-index-overflow-over);
}

.main__nav {
  transition: background-color 0.5s;
}

.nav--scrolled, .nav--scrolled .desktop-nav__container-list--active {
  background-color: var(--dark-background);
}

.nav--scrolled .desktop-nav__container-list .desktop-nav__menu-list .desktop-nav__item a:hover {
  color: var(--main-color);
}

.nav--scrolled .desktop-nav__container-list .desktop-nav__menu-list .desktop-nav__item:hover a:before {
  background-image: url("/img/svg/underline-white.svg");
}

.desktop-nav__container {
  position: fixed;
  top: 0;
  z-index: 101;
}

.hidden {
  opacity: 0;
  visibility: hidden;
}

nav {
  width: 100%;
  font-family: var(--h1-font-family);
}

nav a, .desktop-nav__container a {
  text-decoration: none;
  color: var(--light-color);
}

.nav__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1em 1.5em;
}

.nav__container-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-index-higher);
}

.nav__logo {
  width: 100%;
  height: auto;
}

.nav__container-btn {
  cursor: pointer;
  z-index: var(--z-index-overflow-over);
}

.desktop-nav__container-btn {
  position: absolute;
  top: 15px;
  right: 15px;
}

.desktop-nav__container a {
  font-size: 2.5rem;
}

.desktop-nav__container {
  z-index: var(--z-index-overflow);
}

.btn {
  display: block;
  width: 80%;
  padding: 0.1em 1.5em;
  text-decoration: none;
  color: var(--light-font);
  font-family: var(--h1-font-family);
  font-size: 2.15rem;
  text-transform: uppercase;
  border: 3px solid var(--light-font);
  border-image: url("/img/svg/underline-white.svg") 30% stretch;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
.btn:hover {
  background-color: var(--light-font);
  color: var(--main-color);
}

.section__title {
  font-family: var(--h1-font-family);
  font-size: 2.8rem;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  letter-spacing: 3px;
}
.section__separator {
  width: 100%;
  height: 10px;
  background-image: url("/img/svg/underline-white.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
  margin: 0.5em 0 1em;
}

@media screen and (min-width: 1100px) {
  .nav__container-btn {
    position: relative;
    margin-top: -10px;
    z-index: var(--z-index-overflow-over);
  }
  .nav__container-btn:before {
    position: absolute;
    display: block;
    content: "menu";
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
  }
}
.nav__btn-bars, .desktop-nav__btn-bars {
  position: relative;
  height: 60px;
  width: 60px;
  background: url("/img/svg/menu-list.svg") no-repeat center;
}

.nav__container .nav__container-list .nav__item--primary:hover a, .desktop-nav__container .desktop-nav__container-list .desktop-nav__item--primary:hover a {
  position: relative;
  color: var(--dark-background);
  transition: color 0.3s;
}

.nav__container .nav__container-list .nav__item--primary:hover a:before, .desktop-nav__container .desktop-nav__container-list .desktop-nav__item--primary:hover a:before {
  display: block;
  position: absolute;
  content: "";
  bottom: 50%;
  width: 90%;
  height: 10px;
  left: 50%;
  transform: translate(-50%, 50%);
  background: url("/img/svg/underline-dark-color.svg") no-repeat center;
}

.desktop-nav__container .desktop-nav__container-list .desktop-nav__item--primary:hover a:before {
  width: 200%;
}

.nav__container-btn--active .nav__btn-bars .nav__btn-bar, .desktop-nav__container-btn--active .desktop-nav__btn-bars .desktop-nav__btn-bar {
  background-color: transparent;
}

.nav__container-btn--active .nav__btn-bars .nav__btn-bar:before {
  transform: translateY(9px) rotate(-45deg);
}

.nav__container-btn--active .nav__btn-bars .nav__btn-bar:after {
  transform: translateY(-9px) rotate(45deg);
}

.nav__container-list, .desktop-nav__container-list {
  position: absolute;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  transform-origin: right;
  transform: scaleX(0);
  background-color: var(--main-color);
  overflow: hidden;
  font-size: 1.43rem;
  z-index: var(--z-index-overflow);
  transition: transform 0.5s;
}

.desktop-nav__container-list {
  max-width: 60vw;
  right: 0;
}

.nav__container-list .nav__menu-list, .desktop-nav__container-list .desktop-nav__menu-list {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.nav__container-list .nav__menu-list,
.nav__container-list .nav__menu-info,
.desktop-nav__container-list .desktop-nav__menu-list,
.desktop-nav__container-list .desktop-nav__menu-info {
  transform: translateX(200%);
  transition: transform 0.4s;
}

.nav__container-list .nav__item,
.nav__container-list .nav__menu-info,
.nav__container-list .nav__item-list,
.desktop-nav__container-list .desktop-nav__item,
.desktop-nav__container-list .desktop-nav__menu-info,
.desktop-nav__container-list .desktop-nav__item-list {
  opacity: 90%;
}

.nav__container-list .nav__menu-info,
.desktop-nav__container-list .desktop-nav__menu-info {
  margin: 1.5em 0 0 1em;
  width: 80%;
  font-family: var(--light-font-family);
  text-transform: uppercase;
}

.nav__container-list ul,
.desktop-nav__container-list ul {
  width: 100%;
  list-style: none;
  text-align: center;
}

.nav__container-list .nav__item,
.desktop-nav__container-list .desktop-nav__item {
  margin: 2em 0;
}

.nav__container-list .nav__item a,
.desktop-nav__container-list .desktop-nav__item a {
  display: block;
  width: 100%;
  text-transform: uppercase;
}

.nav__container-list .nav__item-list a,
.desktop-nav__container-list .desktop-nav__item-list a {
  padding-left: 1.2em;
}

.nav__container-list--active, .desktop-nav__container-list--active {
  transform: scaleX(1);
  transform-origin: right;
}

.nav__container-list--active .nav__menu-list,
.nav__container-list--active .nav__menu-info,
.desktop-nav__container-list--active .desktop-nav__menu-list,
.desktop-nav__container-list--active .desktop-nav__menu-info {
  transform: translateX(0);
}

footer {
  width: 100%;
  background: var(--dark-background);
}

footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer__text {
  text-transform: uppercase;
  font-family: var(--h1-font-family);
  font-size: 1.2rem;
}

.footer__text a {
  color: var(--light-font);
}

@media screen and (min-width: 992px) {
  .nav__container-list .nav__item a, .desktop-nav__container-list .desktop-nav__item a {
    font-size: 4rem;
  }
}
@media screen and (min-width: 1100px) {
  .desktop-nav__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1em 1.5em;
  }
  .hide-on-desktop {
    display: none;
  }
  .hide-on-mobile {
    display: block;
  }
  .nav__logo {
    width: 115%;
  }
  .nav__menu-info {
    display: none;
  }
  .nav__container-list .nav__item-list a {
    padding-left: 0;
  }
  .nav__container-list .nav__menu-list,
  .nav__container-list .nav__menu-info {
    transform: translateX(0%);
  }
  .nav__item--primary,
  .nav__item-list {
    position: relative;
  }
  .nav__menu-list .nav__item--primary {
    margin: 0;
    padding: 0;
  }
  .nav__container-list .nav__menu-list {
    display: flex;
    flex-direction: row;
  }
  .nav__container-list {
    align-items: flex-end;
    justify-content: center;
    flex-direction: row;
    position: relative;
    background-color: transparent;
    transform: scaleX(1);
    overflow: visible;
    max-height: none;
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
  }
  .nav__container-list:before {
    display: none;
  }
  .nav__container {
    max-width: 1880px;
    margin: 0 auto;
  }
  .nav__container .nav__item,
  .nav__container .nav__item-list {
    position: relative;
    margin-right: 1em;
    text-align: center;
    font-family: var(--light-text);
  }
  .nav__container .nav__item a,
  .nav__container .nav__item-list a {
    padding-inline: 1.5em;
    text-align: center;
    font-size: 2.8rem;
  }
  .nav__container .nav__container-list .nav__item--primary:hover a {
    color: var(--main-color);
  }
  .nav__container .nav__container-list .nav__item--primary:hover a:before {
    bottom: -10%;
    background: url("/img/svg/underline-main-color.svg") no-repeat center;
  }
  .nav__container .nav__container-list .nav__item-list:hover .nav__item-list-anchor {
    color: var(--main-color);
  }
  .container {
    max-width: 1880px;
  }
  .footer__text {
    font-size: 2.2rem;
  }
  .section__title {
    font-size: 4.14rem;
  }
  .section__separator {
    width: 50%;
    margin: 0 auto 4em;
  }
  .nav__container-list {
    margin-left: 35%;
  }
}
@media screen and (min-width: 1400px) {
  .nav__container-list {
    margin-left: 30%;
  }
}

/*# sourceMappingURL=app.css-8a2d9f735324b5b528d9f3cc0d209faa.map */