@import url("https://fonts.googleapis.com/css2?family=Barlow&family=Barlow+Condensed:wght@400;700&family=Bellefair&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

/* COLORS */
.txt-dark {
  color: #0B0D17;
}

.bg-dark {
  background-color: #0B0D17;
}

.txt-light {
  color: #D0D6F9;
}

.bg-light {
  background-color: #D0D6F9;
}

.txt-white {
  color: #fff;
}

.bg-white {
  background-color: #fff;
}

/* COLORS */
/* TYPOGRAPHY */
.txt-1 {
  font-family: "Bellefair", serif;
  font-size: 144px;
  line-height: 171.9%;
  letter-spacing: 0px;
}

.txt-2 {
  font-family: "Bellefair", serif;
  font-size: 96px;
  line-height: 114.6%;
  letter-spacing: 0px;
}

.txt-3 {
  font-family: "Bellefair", serif;
  font-size: 56px;
  line-height: unset;
  letter-spacing: 0px;
}

.txt-4 {
  font-family: "Bellefair", serif;
  font-size: 32px;
  line-height: unset;
  letter-spacing: 0px;
}

.txt-5 {
  font-family: "Barlow Condensed", serif;
  font-size: 28px;
  line-height: unset;
  letter-spacing: 4px;
}

.txt-6 {
  font-family: "Bellefair", serif;
  font-size: 28px;
  line-height: unset;
  letter-spacing: 0px;
}

.txt-7 {
  font-family: "Barlow Condensed", serif;
  font-size: 14px;
  line-height: unset;
  letter-spacing: 2px;
}

.txt-8 {
  font-family: "Barlow Condensed", serif;
  font-size: 16px;
  line-height: unset;
  letter-spacing: 2px;
}

.txt-8-b {
  font-family: "Barlow Condensed", serif;
  font-size: 16px;
  line-height: auto;
  letter-spacing: 2.7px;
  font-weight: 700;
}

.txt-9 {
  font-family: "Barlow", serif;
  font-size: 18px;
  line-height: 180%;
  letter-spacing: 0px;
}

@media (max-width: 767px) {
  .txt-1 {
    font-family: "Bellefair", serif;
    font-size: 144px;
    line-height: 171.9%;
    letter-spacing: 0px;
  }
  .txt-2 {
    font-family: "Bellefair", serif;
    font-size: 80px;
    line-height: auto;
    letter-spacing: 0px;
  }
  .txt-3 {
    font-family: "Bellefair", serif;
    font-size: 40px;
    line-height: auto;
    letter-spacing: 0px;
  }
  .txt-4 {
    font-family: "Bellefair", serif;
    font-size: 24px;
    line-height: auto;
    letter-spacing: 0px;
  }
  .txt-5 {
    font-family: "Barlow Condensed", serif;
    font-size: 20px;
    line-height: auto;
    letter-spacing: 15%;
  }
  .txt-6 {
    font-family: "Bellefair", serif;
    font-size: 28px;
    line-height: unset;
    letter-spacing: 0px;
  }
  .txt-7 {
    font-family: "Barlow Condensed", serif;
    font-size: 14px;
    line-height: unset;
    letter-spacing: 2px;
  }
  .txt-8 {
    font-family: "Barlow Condensed", serif;
    font-size: 16px;
    line-height: 19.2%;
    letter-spacing: 2px;
  }
  .txt-9 {
    font-family: "Barlow", serif;
    font-size: 16px;
    line-height: 180%;
    letter-spacing: 0px;
  }
}
@media (max-width: 575px) {
  .txt-1 {
    font-family: "Bellefair", serif;
    font-size: 80px;
    line-height: auto;
    letter-spacing: 0px;
  }
  .txt-2 {
    font-family: "Bellefair", serif;
    font-size: 56px;
    line-height: auto;
    letter-spacing: 0px;
  }
  .txt-3 {
    font-family: "Bellefair", serif;
    font-size: 24px;
    line-height: auto;
    letter-spacing: 0px;
  }
  .txt-4 {
    font-family: "Bellefair", serif;
    font-size: 18px;
    line-height: auto;
    letter-spacing: 0px;
  }
  .txt-5 {
    font-family: "Barlow Condensed", serif;
    font-size: 20px;
    line-height: auto;
    letter-spacing: 15%;
  }
  .txt-6 {
    font-family: "Bellefair", serif;
    font-size: 16px;
    line-height: auto;
    letter-spacing: 15%;
  }
  .txt-7 {
    font-family: "Barlow Condensed", serif;
    font-size: 14px;
    line-height: unset;
    letter-spacing: 2px;
  }
  .txt-8 {
    font-family: "Barlow Condensed", serif;
    font-size: 14px;
    line-height: auto;
    letter-spacing: 15%;
  }
  .txt-9 {
    font-family: "Barlow", serif;
    font-size: 15px;
    line-height: 180%;
    letter-spacing: 0px;
  }
}
.uppercase {
  text-transform: uppercase;
}

/* TYPOGRAPHY */
/* SPACING */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

h1, h2, h3, h4, h5 {
  font-weight: 400;
}

/* padding */
.p-25 {
  padding: 2px;
}

.pt-25 {
  padding-top: 2px;
}

.pb-25 {
  padding-bottom: 2px;
}

.ps-25 {
  padding-left: 2px;
}

.pe-25 {
  padding-right: 2px;
}

.px-25 {
  padding-left: 2px;
  padding-right: 2px;
}

.py-25 {
  padding-top: 2px;
  padding-bottom: 2px;
}

/*margin*/
.m-25 {
  margin: 2px;
}

.mt-25 {
  margin-top: 2px;
}

.mb-25 {
  margin-bottom: 2px;
}

.ms-25 {
  margin-left: 2px;
}

.me-25 {
  margin-right: 2px;
}

.mx-25 {
  margin-left: 2px;
  margin-right: 2px;
}

.my-25 {
  margin-top: 2px;
  margin-bottom: 2px;
}

/*gap*/
.gap-25 {
  gap: 2px;
}

/* padding */
.p-50 {
  padding: 4px;
}

.pt-50 {
  padding-top: 4px;
}

.pb-50 {
  padding-bottom: 4px;
}

.ps-50 {
  padding-left: 4px;
}

.pe-50 {
  padding-right: 4px;
}

.px-50 {
  padding-left: 4px;
  padding-right: 4px;
}

.py-50 {
  padding-top: 4px;
  padding-bottom: 4px;
}

/*margin*/
.m-50 {
  margin: 4px;
}

.mt-50 {
  margin-top: 4px;
}

.mb-50 {
  margin-bottom: 4px;
}

.ms-50 {
  margin-left: 4px;
}

.me-50 {
  margin-right: 4px;
}

.mx-50 {
  margin-left: 4px;
  margin-right: 4px;
}

.my-50 {
  margin-top: 4px;
  margin-bottom: 4px;
}

/*gap*/
.gap-50 {
  gap: 4px;
}

/* padding */
.p-100 {
  padding: 8px;
}

.pt-100 {
  padding-top: 8px;
}

.pb-100 {
  padding-bottom: 8px;
}

.ps-100 {
  padding-left: 8px;
}

.pe-100 {
  padding-right: 8px;
}

.px-100 {
  padding-left: 8px;
  padding-right: 8px;
}

.py-100 {
  padding-top: 8px;
  padding-bottom: 8px;
}

/*margin*/
.m-100 {
  margin: 8px;
}

.mt-100 {
  margin-top: 8px;
}

.mb-100 {
  margin-bottom: 8px;
}

.ms-100 {
  margin-left: 8px;
}

.me-100 {
  margin-right: 8px;
}

.mx-100 {
  margin-left: 8px;
  margin-right: 8px;
}

.my-100 {
  margin-top: 8px;
  margin-bottom: 8px;
}

/*gap*/
.gap-100 {
  gap: 8px;
}

/* padding */
.p-150 {
  padding: 12px;
}

.pt-150 {
  padding-top: 12px;
}

.pb-150 {
  padding-bottom: 12px;
}

.ps-150 {
  padding-left: 12px;
}

.pe-150 {
  padding-right: 12px;
}

.px-150 {
  padding-left: 12px;
  padding-right: 12px;
}

.py-150 {
  padding-top: 12px;
  padding-bottom: 12px;
}

/*margin*/
.m-150 {
  margin: 12px;
}

.mt-150 {
  margin-top: 12px;
}

.mb-150 {
  margin-bottom: 12px;
}

.ms-150 {
  margin-left: 12px;
}

.me-150 {
  margin-right: 12px;
}

.mx-150 {
  margin-left: 12px;
  margin-right: 12px;
}

.my-150 {
  margin-top: 12px;
  margin-bottom: 12px;
}

/*gap*/
.gap-150 {
  gap: 12px;
}

/* padding */
.p-200 {
  padding: 16px;
}

.pt-200 {
  padding-top: 16px;
}

.pb-200 {
  padding-bottom: 16px;
}

.ps-200 {
  padding-left: 16px;
}

.pe-200 {
  padding-right: 16px;
}

.px-200 {
  padding-left: 16px;
  padding-right: 16px;
}

.py-200 {
  padding-top: 16px;
  padding-bottom: 16px;
}

/*margin*/
.m-200 {
  margin: 16px;
}

.mt-200 {
  margin-top: 16px;
}

.mb-200 {
  margin-bottom: 16px;
}

.ms-200 {
  margin-left: 16px;
}

.me-200 {
  margin-right: 16px;
}

.mx-200 {
  margin-left: 16px;
  margin-right: 16px;
}

.my-200 {
  margin-top: 16px;
  margin-bottom: 16px;
}

/*gap*/
.gap-200 {
  gap: 16px;
}

/* padding */
.p-300 {
  padding: 24px;
}

.pt-300 {
  padding-top: 24px;
}

.pb-300 {
  padding-bottom: 24px;
}

.ps-300 {
  padding-left: 24px;
}

.pe-300 {
  padding-right: 24px;
}

.px-300 {
  padding-left: 24px;
  padding-right: 24px;
}

.py-300 {
  padding-top: 24px;
  padding-bottom: 24px;
}

/*margin*/
.m-300 {
  margin: 24px;
}

.mt-300 {
  margin-top: 24px;
}

.mb-300 {
  margin-bottom: 24px;
}

.ms-300 {
  margin-left: 24px;
}

.me-300 {
  margin-right: 24px;
}

.mx-300 {
  margin-left: 24px;
  margin-right: 24px;
}

.my-300 {
  margin-top: 24px;
  margin-bottom: 24px;
}

/*gap*/
.gap-300 {
  gap: 24px;
}

/* padding */
.p-400 {
  padding: 32px;
}

.pt-400 {
  padding-top: 32px;
}

.pb-400 {
  padding-bottom: 32px;
}

.ps-400 {
  padding-left: 32px;
}

.pe-400 {
  padding-right: 32px;
}

.px-400 {
  padding-left: 32px;
  padding-right: 32px;
}

.py-400 {
  padding-top: 32px;
  padding-bottom: 32px;
}

/*margin*/
.m-400 {
  margin: 32px;
}

.mt-400 {
  margin-top: 32px;
}

.mb-400 {
  margin-bottom: 32px;
}

.ms-400 {
  margin-left: 32px;
}

.me-400 {
  margin-right: 32px;
}

.mx-400 {
  margin-left: 32px;
  margin-right: 32px;
}

.my-400 {
  margin-top: 32px;
  margin-bottom: 32px;
}

/*gap*/
.gap-400 {
  gap: 32px;
}

/* padding */
.p-500 {
  padding: 40px;
}

.pt-500 {
  padding-top: 40px;
}

.pb-500 {
  padding-bottom: 40px;
}

.ps-500 {
  padding-left: 40px;
}

.pe-500 {
  padding-right: 40px;
}

.px-500 {
  padding-left: 40px;
  padding-right: 40px;
}

.py-500 {
  padding-top: 40px;
  padding-bottom: 40px;
}

/*margin*/
.m-500 {
  margin: 40px;
}

.mt-500 {
  margin-top: 40px;
}

.mb-500 {
  margin-bottom: 40px;
}

.ms-500 {
  margin-left: 40px;
}

.me-500 {
  margin-right: 40px;
}

.mx-500 {
  margin-left: 40px;
  margin-right: 40px;
}

.my-500 {
  margin-top: 40px;
  margin-bottom: 40px;
}

/*gap*/
.gap-500 {
  gap: 40px;
}

/* padding */
.p-600 {
  padding: 48px;
}

.pt-600 {
  padding-top: 48px;
}

.pb-600 {
  padding-bottom: 48px;
}

.ps-600 {
  padding-left: 48px;
}

.pe-600 {
  padding-right: 48px;
}

.px-600 {
  padding-left: 48px;
  padding-right: 48px;
}

.py-600 {
  padding-top: 48px;
  padding-bottom: 48px;
}

/*margin*/
.m-600 {
  margin: 48px;
}

.mt-600 {
  margin-top: 48px;
}

.mb-600 {
  margin-bottom: 48px;
}

.ms-600 {
  margin-left: 48px;
}

.me-600 {
  margin-right: 48px;
}

.mx-600 {
  margin-left: 48px;
  margin-right: 48px;
}

.my-600 {
  margin-top: 48px;
  margin-bottom: 48px;
}

/*gap*/
.gap-600 {
  gap: 48px;
}

/* padding */
.p-800 {
  padding: 64px;
}

.pt-800 {
  padding-top: 64px;
}

.pb-800 {
  padding-bottom: 64px;
}

.ps-800 {
  padding-left: 64px;
}

.pe-800 {
  padding-right: 64px;
}

.px-800 {
  padding-left: 64px;
  padding-right: 64px;
}

.py-800 {
  padding-top: 64px;
  padding-bottom: 64px;
}

/*margin*/
.m-800 {
  margin: 64px;
}

.mt-800 {
  margin-top: 64px;
}

.mb-800 {
  margin-bottom: 64px;
}

.ms-800 {
  margin-left: 64px;
}

.me-800 {
  margin-right: 64px;
}

.mx-800 {
  margin-left: 64px;
  margin-right: 64px;
}

.my-800 {
  margin-top: 64px;
  margin-bottom: 64px;
}

/*gap*/
.gap-800 {
  gap: 64px;
}

/* padding */
.p-1000 {
  padding: 80px;
}

.pt-1000 {
  padding-top: 80px;
}

.pb-1000 {
  padding-bottom: 80px;
}

.ps-1000 {
  padding-left: 80px;
}

.pe-1000 {
  padding-right: 80px;
}

.px-1000 {
  padding-left: 80px;
  padding-right: 80px;
}

.py-1000 {
  padding-top: 80px;
  padding-bottom: 80px;
}

/*margin*/
.m-1000 {
  margin: 80px;
}

.mt-1000 {
  margin-top: 80px;
}

.mb-1000 {
  margin-bottom: 80px;
}

.ms-1000 {
  margin-left: 80px;
}

.me-1000 {
  margin-right: 80px;
}

.mx-1000 {
  margin-left: 80px;
  margin-right: 80px;
}

.my-1000 {
  margin-top: 80px;
  margin-bottom: 80px;
}

/*gap*/
.gap-1000 {
  gap: 80px;
}

/* padding */
.p-1200 {
  padding: 96px;
}

.pt-1200 {
  padding-top: 96px;
}

.pb-1200 {
  padding-bottom: 96px;
}

.ps-1200 {
  padding-left: 96px;
}

.pe-1200 {
  padding-right: 96px;
}

.px-1200 {
  padding-left: 96px;
  padding-right: 96px;
}

.py-1200 {
  padding-top: 96px;
  padding-bottom: 96px;
}

/*margin*/
.m-1200 {
  margin: 96px;
}

.mt-1200 {
  margin-top: 96px;
}

.mb-1200 {
  margin-bottom: 96px;
}

.ms-1200 {
  margin-left: 96px;
}

.me-1200 {
  margin-right: 96px;
}

.mx-1200 {
  margin-left: 96px;
  margin-right: 96px;
}

.my-1200 {
  margin-top: 96px;
  margin-bottom: 96px;
}

/*gap*/
.gap-1200 {
  gap: 96px;
}

/* padding */
.p-1600 {
  padding: 128px;
}

.pt-1600 {
  padding-top: 128px;
}

.pb-1600 {
  padding-bottom: 128px;
}

.ps-1600 {
  padding-left: 128px;
}

.pe-1600 {
  padding-right: 128px;
}

.px-1600 {
  padding-left: 128px;
  padding-right: 128px;
}

.py-1600 {
  padding-top: 128px;
  padding-bottom: 128px;
}

/*margin*/
.m-1600 {
  margin: 128px;
}

.mt-1600 {
  margin-top: 128px;
}

.mb-1600 {
  margin-bottom: 128px;
}

.ms-1600 {
  margin-left: 128px;
}

.me-1600 {
  margin-right: 128px;
}

.mx-1600 {
  margin-left: 128px;
  margin-right: 128px;
}

.my-1600 {
  margin-top: 128px;
  margin-bottom: 128px;
}

/*gap*/
.gap-1600 {
  gap: 128px;
}

/* SPACING */
/* flexbox */
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.align-center {
  align-items: center;
}

.justify-start {
  justify-content: start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-btween {
  justify-content: space-between;
}

/* flexbox */
/* grid */
.col-1 {
  grid-column: span 1;
}

.col-2 {
  grid-column: span 2;
}

.col-3 {
  grid-column: span 3;
}

.col-4 {
  grid-column: span 4;
}

.col-5 {
  grid-column: span 5;
}

.col-6 {
  grid-column: span 6;
}

.col-7 {
  grid-column: span 7;
}

.col-8 {
  grid-column: span 8;
}

.col-9 {
  grid-column: span 9;
}

.col-10 {
  grid-column: span 10;
}

.col-11 {
  grid-column: span 11;
}

/* grid */
/* Container */
.container {
  width: 100%;
  padding-right: 165px;
  padding-left: 165px;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 767px) {
  .container {
    width: 100%;
    padding-right: 40px;
    padding-left: 40px;
    margin-right: auto;
    margin-left: auto;
  }
}
@media (max-width: 375px) {
  .container {
    width: 100%;
    padding-right: 24px;
    padding-left: 24px;
    margin-right: auto;
    margin-left: auto;
  }
}
/* Container */
/*NAV AND BG*/
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  overflow-x: hidden;
}

.bg {
  position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: -1;
  background: url("../assets/home/background-home-desktop.jpg") no-repeat center/cover;
}
@media (max-width: 992px) {
  .bg {
    background: url("../assets/home/background-home-tablet.jpg") no-repeat center/cover;
  }
}
@media (max-width: 767px) {
  .bg {
    background: url("../assets/home/background-home-mobile.jpg") no-repeat center/cover;
  }
}

.menu-btn {
  display: none;
  cursor: pointer;
}
@media (max-width: 767px) {
  .menu-btn {
    width: 24px;
    height: 24px;
    display: block;
    background: url("../assets/shared/icon-hamburger.svg") no-repeat center/cover;
    z-index: 6;
  }
}

@media (max-width: 992px) {
  nav {
    padding: 0 !important;
    padding-left: 40px !important;
    gap: 40px;
  }
  .logo {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media (max-width: 767px) {
  nav {
    padding: 24px !important;
    position: relative;
  }
  nav:has(.nav-list.active) .menu-btn {
    background: url("../assets/shared/icon-close.svg") no-repeat center/cover !important;
  }
}
.nav-list {
  background-color: rgba(255, 255, 255, 0.0509803922);
  backdrop-filter: blur(80px);
  position: relative;
}
@media (max-width: 992px) {
  .nav-list {
    width: 100%;
    padding-right: 40px;
    justify-content: flex-end;
  }
}
@media (max-width: 767px) {
  .nav-list {
    position: absolute;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 133px;
    padding-right: 0;
    gap: 32px;
    padding-left: 0;
    top: 0;
    right: 0;
    width: 254px;
    height: 100vh;
  }
  .nav-list.active {
    display: flex;
  }
  .nav-list a {
    line-height: 100%;
  }
}

.nav-list li {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-list li:has(a.active) {
  border-bottom: 3px solid #fff;
}
@media (max-width: 767px) {
  .nav-list li:has(a.active) {
    border-bottom: none;
    border-right: 3px solid #fff;
  }
}
@media (max-width: 767px) {
  .nav-list li {
    height: 19px;
    width: 100%;
    justify-content: flex-start;
    padding-left: 32px;
  }
}

/*NAV AND BG*/

/*# sourceMappingURL=lib.css.map */