/* header */

.nav-nas {
  display: none;
}

.header-nas {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9;
  width: 100%;
}

.header-container-nas {
  display: flex;
  justify-content: end;
  align-items: center;
  padding: 12px 24px;
  position: relative;
  border-radius: 0 0 34px 34px;
  height: 64px;
  width: 375px;
  border: 2px solid #1a3a8f;
  box-shadow: 0 1px 7px 0 #163c8d;
  background: #0da4d3;
}

.menu-open-nas {
  background: url(/images/icon-open.png);
  background-position: center;
  background-size: cover;
  width: 40px;
  height: 40px;
}

.menu-btn-nas {
  transition: all 0.3s ease-in-out;
}

.menu-btn-nas:hover {
  transform: scale(1.1);
}

.nav-list-nas {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-item-nas {
  transition: all 0.3s ease-in-out;
}

.nav-link-nas {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 16px;
  padding: 0px 8px;
  height: 40px;
  background: #b2ebf4;

  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  text-align: justify;
  color: #13518c;
  transition: all 0.3s ease-in-out;
}

.link-active-nas {
  background: #f8f8f8;
}

.nav-link-nas:hover {
  background: #f8f8f8;
}

.header-btn-wrap-nas {
  display: none;
}

@media screen and (min-width: 1440px) {
  .header-container-nas {
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    padding: 20px 126px;
    width: 1440px;
    height: 80px;
    border-radius: 10px 10px 60px 60px;
  }

  .nav-nas {
    display: block;
  }

  .menu-btn-nas {
    display: none;
  }
}

/* modal  */

.modal-nas {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-97px);
  z-index: 10;

  padding: 96px 16px 88px;
  width: 284px;
  height: 812px;
  border: 2px solid #1a3a8f;
  background: #0da4d3;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu-close-nas {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 32px;
  height: 32px;

  svg {
    stroke: #f8f8f8;
    width: 22px;
    height: 22px;
  }
}

.menu-nav-list-nas {
  flex-direction: column;
  gap: 24px;
}

.menu-nav-link-nas {
  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #1a3a8f;
  border-radius: 12px;
  width: 252px;
  height: 42px;
  background: #f8f8f8;

  font-weight: 700;
  font-size: 20px;
  line-height: 120%;
  color: #163c8d;
}

.modal-links-list-nas {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 20px;

  li {
    a {
      background: #8fa2ff;
      border: 1px solid #1a3a8f;
      border-radius: 12px;
      width: 252px;
      height: 42px;
      font-weight: 700;
      font-size: 20px;
      line-height: 80%;
      color: #13518c;

      display: flex;
      align-items: center;
      justify-content: center;

      transition: all 0.3s ease-in-out;
    }
  }
}

.modal-link-nas:hover,
.menu-nav-link-nas:hover {
  transform: scale(1.1);
}

/* popup */

.popup-nas {
  position: fixed;
  z-index: 11;
  bottom: 246px;
  left: 50%;
  transform: translateX(-50%);
  padding: 20px 17px;
  border-radius: 18px;
  width: 335px;
  height: 236px;
  background: #8fa2ff;
  display: none;
  flex-direction: column;
}

.popup-title-nas {
  font-weight: 700;
  font-size: 20px;
  line-height: 200%;
  text-align: center;
  color: #edf3f8;
  margin-bottom: 4px;
}

.popup-text-nas {
  line-height: 200%;
  text-align: center;
  color: #c9d8e3;
  margin-bottom: 16px;
}

.popup-btn-wrap-nas {
  display: flex;
  gap: 21px;
}

.popup-btn-nas {
  display: flex;
  align-items: center;
  justify-content: center;

  border: 1.41px solid #feee3e;
  border-radius: 13px;
  width: 140px;
  height: 40px;
  font-family: var(--font-family);

  transition: all 0.3s ease;
}

.popup-btn-accept-nas {
  font-weight: 700;
  color: #163c8d;
  box-shadow: 0 2px 18px 0 rgba(0, 0, 0, 0.25);
  background: #feee3e;
}

.popup-btn-decline-nas {
  color: #feee3e;
  box-shadow: 0 2px 18px 0 rgba(0, 0, 0, 0.25);
  background: rgba(255, 255, 255, 0);
}

.popup-btn-nas:hover {
  transform: scale(1.1);
}

.popup-close-btn-nas:hover {
  transform: scale(1.5);
}

@media screen and (min-width: 1440px) {
  .popup-nas {
    position: fixed;
    z-index: 11;
    bottom: 39px;
    left: 50%;
    transform: translateX(-280px);
    padding: 40px 47px;
    width: 960px;
    height: 306px;
    display: none;
    align-items: center;
  }

  .popup-title-nas {
    font-size: 40px;
    line-height: 100%;
    margin-bottom: 16px;
  }

  .popup-text-nas {
    font-size: 24px;
    line-height: 208%;
  }

  .popup-btn-wrap-nas {
    gap: 30px;
  }

  .popup-btn-nas {
    border: 2px solid #feee3e;
    border-radius: 18px;
    width: 200px;
    height: 54px;
  }

  .popup-btn-accept-nas {
    font-weight: 700;
    font-size: 20px;
  }

  .popup-btn-decline-nas {
    font-size: 24px;
  }
}

/* hero  */

#home {
  background: url(/images/hero-bg.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero-container-nas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 88px 23px 24px 17px;
}

.hero-title-nas {
  font-weight: 600;
  font-size: 40px;
  line-height: 150%;
  letter-spacing: -0.02em;
  text-align: center;
  background: linear-gradient(180deg, #e6fffa 0%, #b2ebf4 100%);
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: 4px 4px 0 #13518c, -4px 4px 0 #13518c, 4px -4px 0 #13518c,
    -4px -4px 0 #13518c, 0 4px 0 #13518c, 0 -4px 0 #13518c, 4px 0 0 #13518c,
    -4px 0 0 #13518c;
  margin-bottom: 16px;
}

.hero-pic-nas {
  background: url(/images/hero-pic.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  position: absolute;
  top: 46px;
  left: -61px;
  z-index: -1;

  width: 270px;
  height: 211px;
}

.hero-text-nas {
  font-weight: 400;
  font-size: 20px;
  line-height: 200%;
  letter-spacing: -0.02em;
  text-align: justify;
  color: #f8f8f8;

  border-left: 2px solid #2acbff;
  padding: 0px 20px;

  span {
    color: #fff647;
  }
}

.hero-title-lower-nas {
  font-weight: 700;
  font-size: 24px;
  line-height: 167%;
  letter-spacing: -0.02em;
  text-align: justify;
  color: #2acbff;
  margin-top: 16px;
  margin-bottom: 8px;
}

.hero-link-nas {
  background: url(/images/hero-btn.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 180px;
  height: 63px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  text-align: justify;
  text-shadow: 2px 2px 0 #975101, -2px 2px 0 #975101, 2px -2px 0 #975101,
    -2px -2px 0 #975101, 0 2px 0 #975101, 0 -2px 0 #975101, 2px 0 0 #975101,
    -2px 0 0 #975101;

  transition: all 0.3s ease;
}

.hero-link-nas:hover {
  transform: scale(1.1);
}

@media screen and (min-width: 1440px) {
  .hero-container-nas {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    padding: 188px 731px 110px 40px;
  }

  .hero-title-nas {
    font-size: 64px;
    line-height: 125%;
    text-align: justify;
    margin-bottom: 24px;
  }

  .hero-pic-nas {
    top: 197px;
    left: 613px;

    width: 911px;
    height: 713px;
  }

  .hero-text-nas {
    font-size: 24px;
    line-height: 250%;
  }

  .hero-title-lower-nas {
    font-size: 36px;
    width: 631px;
    margin-top: 32px;
    margin-bottom: 40px;
  }
}

/* about  */

.about-text-nas {
  text-align: left;
  font-weight: 400;
  font-size: 20px;
  line-height: 150%;
}

@media screen and (min-width: 1440px) {
  .about-container-nas {
    padding-bottom: 390px;
  }

  .about-subtitle-nas {
    width: 640px;
  }

  .about-text-nas {
    position: absolute;
    top: 41px;
    right: 40px;

    font-size: 32px;
    width: 640px;
  }
}

/* how */

.how-heading-nas {
  font-size: 20px;
  line-height: 150%;
  margin-bottom: 16px;
}

.how-item-nas {
  width: 330px;
  height: 330px;

  p {
    position: absolute;
    top: 46px;
    left: 50%;
    transform: translate(-50%);
    width: 220px;

    font-weight: 600;
    line-height: 150%;
    text-align: center;
    color: #13518c;
  }
}

.how-item-nas:nth-child(1) {
  background: url(/images/how/1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.how-item-nas:nth-child(2) {
  background: url(/images/how/2.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.how-item-nas:nth-child(3) {
  background: url(/images/how/3.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.how-text-nas {
  display: none;
}

.how-bg-nas {
  position: absolute;
  top: 8px;
  left: -128px;
  background: url(/images/how/how-bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 598px;
  height: 349px;
}

@media screen and (min-width: 1440px) {
  .how-container-nas {
    padding-left: 9px;
    padding-right: 9px;
  }

  .how-title-nas,
  .how-subtitle-nas,
  .how-heading-nas {
    padding-left: 31px;
  }

  .how-heading-nas {
    font-size: 40px;
    margin-bottom: 32px;
  }

  .how-wrapper-nas {
    display: flex;
  }

  .how-item-nas {
    width: 494px;
    height: 494px;

    p {
      top: 60px;
      width: 329px;
      font-size: 24px;
    }
  }

  .how-item-nas:nth-child(1),
  .how-item-nas:nth-child(2) {
    margin-right: -28px;
  }

  .how-text-nas {
    display: block;
    font-weight: 700;
    font-size: 36px;
    line-height: 167%;
    letter-spacing: -0.02em;
    text-align: center;
    color: #2acbff;
    width: calc(1250px + 86px);
    padding-left: 86px;
    margin-top: 32px;
  }

  .how-bg-nas {
    top: 0;
    left: -106px;
    width: 1692px;
    height: 100%;
  }
}

/* features */

#features {
  background: url(/images/hero-bg.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.features-heading-nas {
  font-weight: 400;
  font-size: 20px;
  line-height: 150%;
  color: #fff;
  margin-bottom: 36px;
}

.features-list-nas {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.features-item-nas {
  display: flex;
  flex-direction: column;
  width: 100%;

  img {
    width: 26px;
    height: 25px;
    margin-bottom: 8px;
  }

  h5 {
    font-weight: 700;
    font-size: 20px;
    line-height: 140%;
    margin-bottom: 12px;
  }

  p {
    line-height: 150%;
    color: #f8f8f8;
  }
}

.features-item-nas:nth-child(1) {
  h5 {
    color: #b7b401;
  }
}

.features-item-nas:nth-child(2) {
  h5 {
    color: #fe39a8;
  }
}

.features-item-nas:nth-child(3) {
  margin-bottom: 217px;

  h5 {
    color: #fbca29;
  }
}

.features-item-nas:nth-child(4) {
  align-items: end;

  h5 {
    color: #fd6900;
  }
}

.features-item-nas:nth-child(5) {
  align-items: end;

  h5 {
    color: #099afb;
  }
}

.features-item-nas:nth-child(6) {
  align-items: end;

  h5 {
    color: #8fa2ff;
  }
}

.features-pic-nas {
  position: absolute;
  bottom: 358px;
  right: 29px;
  background: url(/images/features-mob.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 316px;
  height: 233px;
}

@media screen and (min-width: 1440px) {
  .features-heading-nas {
    font-size: 40px;
    color: #f8f8f8;
    margin-bottom: 32px;
  }

  .features-list-nas {
    padding-left: 60px;
    width: 660px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 32px 24px;
  }

  .features-item-nas {
    width: 288px;
    padding: 8px 0;

    img {
      width: 46px;
      height: 45px;
      margin-bottom: 16px;
    }

    h5 {
      font-size: 32px;
      margin-bottom: 16px;
    }

    p {
      font-size: 24px;
    }
  }

  .features-item-nas:nth-child(3) {
    margin-bottom: 0;
  }

  .features-item-nas:nth-child(4),
  .features-item-nas:nth-child(5),
  .features-item-nas:nth-child(6) {
    align-items: start;
  }

  .features-pic-nas {
    bottom: 44px;
    right: 39px;
    background: url(/images/features-desk.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 715px;
    height: 930px;
  }
}

/* levels */

.levels-heading-nas {
  font-size: 20px;
  line-height: 150%;
  margin-bottom: 16px;
}

.levels-item-nas {
  background: url(/images/levels-pic-mob.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 310px;
  height: 211px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 22px;

  h3 {
    font-weight: 700;
    font-size: 40px;
    color: grey;
    text-shadow: 3px 3px 0 #2acbff, -3px 3px 0 #2acbff, 3px -3px 0 #2acbff,
      -3px -3px 0 #2acbff, 0 3px 0 #2acbff, 0 -3px 0 #2acbff, 3px 0 0 #2acbff,
      -3px 0 0 #2acbff;
  }

  h4 {
    font-weight: 700;
    font-size: 20px;
    color: #2acbff;
    margin-bottom: 8px;
  }

  p {
    text-align: center;
    color: #f8f8f8;
  }
}

.levels-text-nas {
  font-weight: 700;
  font-size: 24px;
  line-height: 167%;
  letter-spacing: -0.02em;
  text-align: center;
  color: #2acbff;
  margin-top: 44px;
}

@media screen and (min-width: 1440px) {
  .levels-heading-nas {
    font-size: 40px;
    color: #f8f8f8;
    margin-bottom: 38px;

    span {
      font-weight: 600;
    }
  }

  .levels-wrapper-nas {
    display: flex;
    gap: 38px;
    justify-content: center;
    width: 100%;
  }

  .levels-item-nas {
    background: url(/images/levels-pic-desk.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 313px;

    h3 {
      font-size: 64px;
    }

    h4 {
      font-size: 24px;
    }

    p {
      font-size: 20px;
    }
  }

  .levels-text-nas {
    font-size: 36px;
    line-height: normal;
    width: 1150px;
    padding-left: 208px;
    margin-top: 30px;
  }
}

/* design */

#design {
  background: url(/images/design-bg-mob.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.design-text-nas {
  font-size: 20px;
  line-height: 150%;
}

.design-bg-blur-nas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: rgba(143, 162, 255, 0.3);
}

@media screen and (min-width: 1440px) {
  #design {
    background: url(/images/design-bg-desk.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .design-text-nas {
    font-size: 32px;
    color: #f8f8f8;
  }
}

/* studio */

#studio {
  background: url(/images/studio-bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.studio-text-nas {
  font-size: 20px;
  line-height: 150%;
}

.studio-text-first-nas {
  margin-bottom: 8px;

  span {
    color: #2acbff;
  }
}

.studio-text-second-nas {
  span {
    color: #c1d16e;
  }
}

@media screen and (min-width: 1440px) {
  .studio-text-nas {
    color: #f8f8f8;
    font-weight: 500;
    font-size: 32px;

    span {
      font-weight: 700;
    }
  }

  .studio-text-first-nas {
    margin-bottom: 24px;
  }
}

/* footer */

#footer {
  background: #354fa3;
}

.footer-container-nas {
  padding: 24px 20px 32px;
}

.footer-links-wrap-nas {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-links-list-nas {
  display: flex;
  align-items: center;
  gap: 24px;
}

.footer-links-item-nas {
  transition: all 0.3s ease;

  a {
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    color: #fcfaff;
  }
}

.footer-links-item-nas:hover {
  transform: scale(1.1);
}

.footer-disclaimer-nas {
  font-weight: 400;
  font-size: 20px;
  line-height: 150%;
  color: #fd6900;
}

.footer-author-list-nas {
  display: flex;
  gap: 60px;
}

.footer-author-item-nas {
  line-height: 150%;
  color: #fcfaff;
}

.footer-text-nas {
  font-size: 12px;
  line-height: 150%;
  color: #fcfaff;
  width: 100%;
  text-align: center;
  position: relative;
  margin-top: 33px;
}

.footer-text-nas:before {
  position: absolute;
  left: 0;
  top: -8px;
  content: "";
  background: #fcfaff;
  height: 1px;
  width: 100%;
}

@media screen and (min-width: 1440px) {
  .footer-container-nas {
    padding: 40px 64px;
  }

  .footer-links-wrap-nas {
    position: absolute;
    top: 40px;
    right: 199px;
    margin-bottom: 0;
    gap: 11px;
  }

  .footer-links-item-nas {
    a {
      font-weight: 700;
      font-size: 24px;
    }
  }

  .footer-disclaimer-nas {
    width: 365px;
  }

  .footer-author-list-nas {
    flex-direction: column;
    gap: 24px;
  }

  .footer-author-item-nas {
    font-size: 20px;
  }

  .footer-text-nas {
    font-size: 14px;
    margin-top: 118px;
  }

  .footer-text-nas:before {
    top: -32px;
  }
}

/* ********************* */

.hidden-nas {
  display: none;
}