@font-face {
  font-family: "SF Pro Display";
  src: url("../fonts/SFProDisplay-Regular.ttf");
  font-weight: 400;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("../fonts/SFProDisplay-Medium.ttf");
  font-weight: 500;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("../fonts/SFProDisplay-Bold.ttf");
  font-weight: 700;
}
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  /* preloading */
}

body {
  font-family: "SF Pro Display", sans-serif;
  font-weight: 400;
  color: #0e0e10;
  overflow-x: hidden;
  font-size: 1.6rem;
  z-index: -9999;
  min-height: 100vh;
}

/* *************************************** GENERAL ***************************************** */
a {
  text-decoration: none;
  display: inline-block;
}

.container {
  max-width: 144rem;
  margin: 0 auto;
  position: relative;
  padding: 0 17.6rem;
  overflow: hidden;
}

/* *************************************** HEADER ***************************************** */
header {
  z-index: 9999;
  position: absolute;
  top: 3.6rem;
  left: 0;
  right: 0;
}
header .container {
  display: flex;
  align-items: center;
  gap: 4.8rem;
  z-index: 9999;
}
header .container .logo {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
header .container .logo img {
  display: inline-block;
  width: 4rem;
}
header .container .logo span {
  color: var(--black, #0e0e10);
  text-align: center;
  font-family: "SF Pro Display", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem;
  /* 133.333% */
  letter-spacing: 0.03rem;
}
header .container nav {
  display: flex;
  align-items: center;
  gap: 3.2rem;
}
header .container nav a {
  color: var(--black, #0e0e10);
  font-family: "SF Pro Display", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.8rem;
  /* 120% */
  letter-spacing: 0.03rem;
}
header .container .button {
  display: inline-flex;
  padding: 1.1rem 2.4rem;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  border-radius: 1.2rem;
  border: 2px solid var(--white, #fff);
  color: var(--white, #fff);
  text-align: center;
  font-family: "SF Pro Display", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.8rem;
  /* 120% */
  letter-spacing: 0.03rem;
  margin-left: auto;
}
header .container .mobile-nav-btn {
  display: none;
}

/* *************************************** FOOTER *********************************  */
footer {
  height: 10.4rem;
}
footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3.2rem;
  padding-top: 2.4rem;
}
footer .container::before {
  content: "";
  display: block;
  height: 1px;
  width: 108.8rem;
  background-color: rgba(14, 14, 16, 0.12);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
footer .container .logo {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
footer .container .logo img {
  display: inline-block;
  width: 4rem;
}
footer .container .logo span {
  color: var(--black, #0e0e10);
  text-align: center;
  font-family: "SF Pro Display", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem;
  /* 133.333% */
  letter-spacing: 0.03rem;
}
footer .container .copy {
  color: var(--black, #0e0e10);
  text-align: right;
  font-family: Open Sans;
  font-family: "SF Pro Display", sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  opacity: 0.56;
}

/* *************************************** POLICY *********************************  */
.privacy {
  max-width: 770px;
  padding: 17rem 0 8rem;
  margin: 0 auto;
}
.privacy h1 {
  font-family: "SF Pro Display", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 5rem;
  line-height: 120%;
  color: #0e0e10;
  margin-bottom: 3.2rem;
}
.privacy h2 {
  font-family: "SF Pro Display", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 32px;
  line-height: 120%;
  color: #0e0e10;
  margin: 3.2rem 0 1.6rem;
}
.privacy p,
.privacy a,
.privacy ul,
.privacy ul li {
  font-family: "SF Pro Display", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 150%;
  color: rgba(14, 14, 16, 0.56);
  margin-bottom: 1.6rem;
}
.privacy ul {
  padding-left: 2.4rem;
}
.privacy ul li {
  margin-bottom: 0;
}
.privacy a {
  text-decoration: underline;
}

header .container .button.button--policy {
  border: 2px solid #122148;
  color: #122148;
}

/* *************************************** SCROLLBAR *********************************  */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #fff;
}

::-webkit-scrollbar-thumb {
  background: #122148;
  border-radius: 12px;
}

::-webkit-scrollbar-thumb:hover {
  background: #0f1b38;
}

@media only screen and (max-width: 1400px) {
  .container {
    padding: 0 12rem;
  }
}
@media only screen and (max-width: 1300px) {
  .hero .container .img-hero {
    right: 4.5rem;
  }
}
@media only screen and (max-width: 1200px) {
  html {
    font-size: 56.25%;
  }

  .container {
    padding: 0 8rem;
  }
}
@media only screen and (max-width: 992px) {
  html {
    font-size: 50%;
  }

  .container {
    padding: 0 6rem;
  }
}
@media only screen and (max-width: 950px) {
  .hero .container .img-hero {
    bottom: 20px;
    right: 4rem;
    width: 52.7rem;
  }
}
@media only screen and (max-width: 900px) {
  .hero .container .img-hero {
    position: relative;
    bottom: 0;
    right: 0;
    width: 52.7rem;
  }

  .hero .container {
    height: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 48px;
  }

  .hero .container .bg-hero {
    display: none;
  }

  header .container .button {
    border: 2px solid var(--white, #0e0e10);
    color: var(--white, #0e0e10);
  }

  .hero .container .content {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 115px;
  }
  .hero .container .content h1,
.hero .container .content p {
    text-align: center;
  }
}
@media only screen and (max-width: 768px) {
  .container {
    padding: 0 4rem;
  }

  header {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    position: fixed;
    top: 0;
    height: 7.2rem;
  }
  header .container {
    height: 100%;
    justify-content: space-between;
  }
  header .container .button {
    display: none;
  }

  header {
    z-index: 99999;
  }
  header.menu-opened .container nav {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.25s ease-out;
  }

  header .container nav {
    position: fixed;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    top: 7.2rem;
    left: 0;
    right: 0;
    height: calc(100vh - 7.2rem);
    z-index: 99999999;
    pointer-events: none;
    opacity: 0;
    align-items: center;
    justify-content: center;
    gap: 32px;
    transform: translateY(64px);
    transition: all 0.1s ease-out;
  }
  header .container nav a {
    font-size: 20px;
    line-height: 24px;
  }
  header .container nav a.button {
    margin-left: 0;
    font-size: 20px;
    line-height: 24px;
    margin-top: 16px;
    font-weight: 400;
  }
  header .container .logo {
    z-index: 999999999;
  }
  header .container .mobile-nav-btn {
    position: relative;
    z-index: 999999999;
    outline: none;
    display: flex;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: none;
    background: #122148;
    position: relative;
  }
  header .container .ham {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 400ms;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transform: scale(0.9);
  }
  header .container .hamRotate.active {
    transform: scale(0.9) rotate(45deg);
  }
  header .container .hamRotate180.active {
    transform: scale(0.9) rotate(180deg);
  }
  header .container .line {
    fill: none;
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
    stroke: #ffffff;
    stroke-width: 6;
    stroke-linecap: round;
  }
  header .container .ham8 .top {
    stroke-dasharray: 40 160;
  }
  header .container .ham8 .middle {
    stroke-dasharray: 40 142;
    transform-origin: 50%;
    transition: transform 400ms;
  }
  header .container .ham8 .bottom {
    stroke-dasharray: 40 85;
    transform-origin: 50%;
    transition: transform 400ms, stroke-dashoffset 400ms;
  }
  header .container .ham8.active .top {
    stroke-dashoffset: -64px;
  }
  header .container .ham8.active .middle {
    transform: rotate(90deg);
  }
  header .container .ham8.active .bottom {
    stroke-dashoffset: -64px;
  }

  .features .container .blocks .block .image {
    width: 320px;
    height: 320px;
  }

  .features .container .blocks .block .image img {
    height: 264px;
  }

  .help .container {
    height: auto;
    padding-top: 80px;
    padding-bottom: 80px;
    justify-content: center;
  }
  .help .container .wrapper {
    flex-direction: column;
    align-items: center;
  }
  .help .container .wrapper .text h2,
.help .container .wrapper .text p {
    text-align: center;
  }
}
@media only screen and (max-width: 640px) {
  .container {
    padding: 0 16px;
  }

  .features .container .blocks .block {
    flex-direction: column-reverse;
    align-items: center;
    gap: 48px;
  }
  .features .container .blocks .block.block--2 {
    flex-direction: column;
  }
}
@media only screen and (max-width: 576px) {
  .container {
    padding: 0 16px;
  }
}
@media only screen and (max-width: 480px) {
  .hero .container .content {
    margin-top: 96px;
  }

  .hero .container .content h1 {
    font-size: 40px;
  }

  .hero .container .img-hero {
    width: 360px;
  }

  .features .container h2 {
    font-size: 32px;
  }

  .features .container .blocks .block .text::before {
    display: none;
  }

  .features .container .blocks .block {
    gap: 32px;
  }

  .features .container .blocks .block.block--1,
.features .container .blocks .block .block--2 {
    margin-bottom: 32px;
  }

  .features .container .blocks .block .text {
    margin-top: 0;
  }

  .features {
    margin-bottom: 64px;
  }

  .help .container {
    padding-top: 48px;
    padding-bottom: 64px;
  }

  .help .container .wrapper form {
    width: 100%;
  }

  .help .container .wrapper form input,
.help .container .wrapper form textarea {
    width: 100%;
  }
}
@media only screen and (max-width: 375px) {
  .hero .container .img-hero {
    width: 320px;
  }
}

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