@import url("https://fonts.googleapis.com/css2?family=Lexend&display=swap");
* {
  box-sizing: border-box;
}

body {
  background: rgb(22, 23, 27);
  font-family: "Lexend", sans-serif;
  margin: 0;
  padding: 0;
}

textarea:focus,
input:focus {
  outline: none;
}

.container {
  margin: 0 auto;
  max-width: 400px;
  padding: 0 32px;
}

.container_thank {
  margin: 0 auto;
  max-width: 400px;
  padding: 0 16px;
}

.step .step_item {
  display: none;
}
.step .step_item.active {
  display: block;
}
.step__footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: linear-gradient(180deg, rgba(22, 23, 27, 0) 0%, rgba(22, 23, 27, 0.4) 13.5%, rgba(22, 23, 27, 0.6) 25%, rgba(22, 23, 27, 0.8) 38.5%, rgba(22, 23, 27, 0.9) 51%, rgba(22, 23, 27, 0.95) 65.5%, #16171B 83.5%);
}
.step__footer__wrapper {
  padding: 0 16px;
}
.step__wrapper {
  padding: 90px 16px 32px 16px;
  background: linear-gradient(180deg, rgba(22, 23, 27, 0) 0%, rgba(22, 23, 27, 0.4) 13.5%, rgba(22, 23, 27, 0.6) 25%, rgba(22, 23, 27, 0.8) 38.5%, rgba(22, 23, 27, 0.9) 51%, rgba(22, 23, 27, 0.95) 65.5%, #16171B 83.5%);
}
.step__wrapper.empty {
  background: unset;
}
.step__wrapper.bg {
  padding: 120px 16px 32px 16px;
}
.step__wrapper.btn_step9 {
  padding: 22px 16px 32px 16px;
}
.step__wrapper .message_step1 {
  width: 185px;
  position: relative;
  top: -106px;
}
.step__wrapper.chat {
  padding: 30px 16px 32px 16px;
  position: fixed;
  bottom: 0;
  width: 100%;
}
.step__first {
  background: url(/assets/img/step_main.webp) no-repeat;
  background-size: cover;
  position: fixed;
  height: 100%;
  width: 100%;
}
.step__questions__field {
  background: rgb(30, 31, 36);
  border-radius: 100px;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  cursor: pointer;
  height: 56px;
}
.step__questions__field.last {
  margin-bottom: 22px;
}
.step__questions__field.active input:is([type=checkbox], [type=radio]) {
  background: url("/assets/img/ic_radiobutton.svg"), rgb(255, 74, 118) no-repeat;
  background-size: cover;
  border: 2px solid rgb(255, 74, 118);
}
.step__questions__field input:is([type=checkbox], [type=radio]) {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  background: transparent;
  border: 2px solid rgb(110, 118, 137);
  border-radius: 0.3em;
  transition: background-color 300ms, border-color 300ms;
}
.step__questions__field label {
  color: rgb(140, 147, 164);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
}
.step__questions__field label.active {
  color: rgb(255, 255, 255);
}
.step__questions__field input:is([type=radio]) {
  border-radius: 50%;
}
.step__questions__buttons_wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.step__questions__button {
  border-radius: 100px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  padding: 14px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: rgb(255, 255, 255);
}
.step__questions__button img {
  width: 24px;
  height: 24px;
}
.step__questions__button.bold {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
}
.step__questions__button.no {
  background: rgb(40, 42, 49);
}
.step__questions__button.yes {
  background: rgb(255, 74, 118);
}
.step__form {
  display: none;
  background: url("/assets/img/step_2_girl.webp");
  background-size: contain;
  position: fixed;
  height: 100%;
  width: 100%;
}
.step__form.step2.real {
  background: url("/assets/img/step_2_girl.webp");
  background-size: contain;
}
.step__form.step2.anime {
  background: url("/assets/img/step_2_anime.webp") no-repeat;
  background-size: contain;
}
.step__form.step3 {
  background: url("/assets/img/step_3_girl.webp") no-repeat;
  background-size: 100%;
}
.step__form.step3.real {
  background: url("/assets/img/step_3_girl.webp") no-repeat;
  background-size: 100%;
}
.step__form.step3.anime {
  background: url("/assets/img/step_3_anime.webp") no-repeat;
  background-size: 100%;
}
.step__form.step4 {
  background: url("/assets/img/step_4_blond.webp") no-repeat;
  background-size: contain;
}
.step__form.step4.blonde {
  background: url("/assets/img/step_4_blond.webp") no-repeat;
  background-size: contain;
}
.step__form.step4.brunette {
  background: url("/assets/img/step_4_brunette.webp") no-repeat;
  background-size: contain;
}
.step__form.step4.dyed {
  background: url("/assets/img/step_4_dyed.webp") no-repeat;
  background-size: contain;
}
.step__form.step5 {
  background: url("/assets/img/step_5_blond.webp") no-repeat center top;
  background-size: contain;
}
.step__form.step5.blonde {
  background: url("/assets/img/step_5_blond.webp") no-repeat center top;
  background-size: contain;
}
.step__form.step5.brunette {
  background: url("/assets/img/step_5_brunette.webp") no-repeat center top;
  background-size: contain;
}
.step__form.step5.dyed {
  background: url("/assets/img/step_5_dyed.webp") no-repeat center top;
  background-size: contain;
}
.step__form.step6 {
  background: url("/assets/img/step_6_small.webp") no-repeat;
  background-size: contain;
}
.step__form.step6.small {
  background: url("/assets/img/step_6_small.webp") no-repeat;
  background-size: contain;
}
.step__form.step6.large {
  background: url("/assets/img/step_6_large.webp") no-repeat;
  background-size: contain;
}
.step__form.step7 {
  background: url("/assets/img/step_7_small.webp") no-repeat;
  background-size: contain;
}
.step__form.step7.small {
  background: url("/assets/img/step_7_small.webp") no-repeat;
  background-size: contain;
}
.step__form.step7.medium {
  background: url("/assets/img/step_7_medium.webp") no-repeat;
  background-size: contain;
}
.step__form.step7.large7 {
  background: url("/assets/img/step_7_large.webp") no-repeat;
  background-size: contain;
}
.step__form.step8 {
  background: url("/assets/img/step_8_fully.webp") no-repeat;
  background-size: contain;
}
.step__form.step8.open {
  background: url("/assets/img/step_8_open.webp") no-repeat;
  background-size: contain;
}
.step__form.step8.fully {
  background: url("/assets/img/step_8_fully.webp") no-repeat;
  background-size: contain;
}
.step__form.step8.cover {
  background-size: cover;
  background-position: center;
}
.step__form.step9 {
  background: url("/assets/img/step_9_elsa.webp") no-repeat center top;
  background-size: cover;
}
.step__form.step9.elsa {
  background: url("/assets/img/step_9_elsa.webp") no-repeat center top;
  background-size: cover;
}
.step__form.step9.martha {
  background: url("/assets/img/step_9_martha.webp") no-repeat center top;
  background-size: cover;
}
.step__form.step9.lily {
  background: url("/assets/img/step_9_lily.webp") no-repeat center top;
  background-size: cover;
}
.step__form.step9.ayane {
  background: url("/assets/img/step_9_ayane.webp") no-repeat center top;
  background-size: cover;
}
.step__form.step9 .step__footer__wrapper {
  display: none;
}
.step__form.step10 {
  background: rgb(22, 23, 27);
}
.step__title {
  text-align: center;
  color: rgb(255, 255, 255);
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
  margin-bottom: 12px;
}
.step__title.question {
  font-size: 28px;
  line-height: 35px;
}
.step__title span {
  color: rgb(255, 74, 118);
}
.step__title.last_screen {
  text-align: left;
  font-size: 28px;
  line-height: 35px;
}
.step__description {
  color: rgb(180, 184, 197);
  font-size: 14px;
  line-height: 17.5px;
  font-weight: 400;
}
.step__button {
  background: rgb(255, 74, 118);
  color: rgb(255, 255, 255);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  border-radius: 100px;
  margin: 0 auto;
  display: block;
  padding: 20px 45px;
  text-decoration: none;
  width: 100%;
  text-align: center;
}
.step__button.chat {
  padding: 20px 0;
}
.step__chat__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid rgb(46, 48, 55);
}
.step__chat__header__wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.step__chat__header__image {
  max-width: 48px;
  border-radius: 50%;
}
.step__chat__header__name {
  color: rgb(255, 255, 255);
  font-size: 14px;
  line-height: 17.5px;
  font-weight: 400;
  text-transform: capitalize;
}
.step__chat__header__online {
  color: rgb(18, 255, 18);
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
}
.step__chat__body {
  padding: 0 24px 0 24px;
  position: fixed;
  bottom: 92px;
}
.step__chat__message {
  background: rgb(40, 42, 49);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  padding: 14px 12px;
  color: rgb(255, 255, 255);
  font-size: 14px;
  line-height: 17.5px;
  font-weight: 400;
  max-width: 256px;
  height: 60px;
  margin-bottom: 8px;
}
.step__chat__message_image {
  max-width: 256px;
  padding: 255px 0 0 0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  height: 347px;
  margin-bottom: 32px;
}
.step__chat__message_image.elsa {
  background: url("/assets/img/elsa_bg.webp") no-repeat;
  background-size: cover;
}
.step__chat__message_image.martha {
  background: url("/assets/img/martha_bg.webp") no-repeat;
  background-size: cover;
}
.step__chat__message_image.lily {
  background: url("/assets/img/lily_bg.webp") no-repeat;
  background-size: cover;
}
.step__chat__message_image.ayane {
  background: url("/assets/img/ayane_bg.webp") no-repeat;
  background-size: cover;
}
.step__chat__message_image__text {
  background: linear-gradient(180deg, rgba(22, 23, 27, 0) 0%, rgba(22, 23, 27, 0.337788) 28.5%, rgba(22, 23, 27, 0.628) 66%, rgba(22, 23, 27, 0.8) 100%);
  padding: 61px 21px 16px 21px;
  color: rgb(255, 255, 255);
  text-align: center;
  font-size: 14px;
  line-height: 17.5px;
  font-weight: 400;
}
.step .off_page {
  padding: 0 16px;
}
.step .off_page__main {
  padding: 10px 0 24px 0;
}
.step .off_page__main__image {
  max-width: 140px;
  border-radius: 50%;
  border: 5px solid rgb(255, 74, 118);
  margin: 0 auto 24px;
  display: block;
}
.step .off_page__main__title {
  color: rgb(255, 255, 255);
  text-align: center;
  font-size: 28px;
  line-height: 35px;
  font-weight: 500;
  margin-bottom: 8px;
}
.step .off_page__main__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.step .off_page__main__wrapper span {
  border-right: 1px solid rgb(40, 42, 48);
  height: 16px;
}
.step .off_page__main__inf__title {
  color: rgb(255, 255, 255);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  margin-bottom: 2px;
}
.step .off_page__main__inf__description {
  color: rgb(140, 147, 164);
  font-size: 10px;
  line-height: 12.5px;
  font-weight: 300;
}
.step .off_page__block {
  padding: 10px 16px 30px 16px;
  text-align: center;
}
.step .off_page__block__images_wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}
.step .off_page__block__images_wrapper img {
  max-width: 50px;
}
.step .off_page__block__images_wrapper.anime {
  display: none;
}
.step .off_page__block__images_wrapper.real {
  display: block;
}
.step .off_page__block__image {
  max-width: 296px;
  width: 100%;
}
.step .off_page__block__title {
  color: rgb(255, 255, 255);
  margin-bottom: 4px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
}
.step .off_page__block__description {
  color: rgb(180, 184, 197);
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
}
.step .off_page__slider {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 8px;
  margin-top: 30px;
}
.step .off_page__slider__item_sub {
  display: flex;
  align-items: center;
  gap: 8px;
}
.step .off_page__slider__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 16px;
  background: rgb(45, 47, 55);
  border: 2px solid rgb(45, 47, 55);
  padding: 12px 16px;
  margin-bottom: 8px;
  width: 328px;
  height: 72px;
}
.step .off_page__slider__item.active {
  background: rgba(255, 74, 118, 0.15);
  border: 2px solid rgb(255, 74, 118);
}
.step .off_page__slider__item__image {
  max-width: 48px;
  border-radius: 50%;
}
.step .off_page__slider__item__title {
  color: rgb(255, 255, 255);
  margin-bottom: 2px;
  text-align: left;
  font-size: 14px;
  font-weight: 400;
}
.step .off_page__slider__item__title.right {
  text-align: right;
}
.step .off_page__slider__item__title_sub {
  text-align: left;
  font-size: 12px;
  font-weight: 400;
  color: rgb(255, 74, 118);
}
.step .off_page__slider__item__description {
  color: rgb(180, 184, 197);
  text-align: left;
  font-size: 12px;
  font-weight: 300;
}
.step .off_page__slider__item__description.right {
  text-align: right;
}
.step .off_page__footer_text {
  text-align: center;
  color: rgb(18, 255, 18);
  font-size: 14px;
  line-height: 17.5px;
  font-weight: 400;
  padding-bottom: 170px;
  height: 100px;
}
.step .off_page__footer {
  width: 100%;
  background: rgb(22, 23, 27);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: 105px;
  margin: 0 auto;
  transform: translateY(105px);
}
.step .off_page__footer__wrapper {
  padding: 16px;
}
.step .off_page__footer__menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 20px 16px;
  width: 100%;
}
.step .off_page__footer__menu__link {
  text-decoration: none;
  color: rgb(88, 95, 113);
  font-size: 12px;
  line-height: 15px;
  font-weight: 300;
}

/* Keyframe animation for the rotation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Style for the SVG loader */
.loader_image {
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(22, 23, 27, 0) 0%, rgba(22, 23, 27, 0.15) 15.5%, rgba(22, 23, 27, 0.3) 27.61%, rgba(22, 23, 27, 0.5) 41.91%, rgba(22, 23, 27, 0.65) 59.94%, rgba(22, 23, 27, 0.75) 76%, rgba(22, 23, 27, 0.9) 100%);
  padding-bottom: 32px;
  padding-top: 30px;
}
.loader_image img {
  animation: spin 2s linear infinite;
  object-fit: cover;
  width: 80px;
  display: block;
  margin: 0 auto 8px;
}
.loader_image .text_loader {
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  text-align: center;
  color: #FFFFFF;
}

.thank_you__main {
  padding: 20px 0 0 0;
}
.thank_you__main__title {
  font-family: "Lexend", sans-serif;
  text-align: center;
  color: rgb(255, 255, 255);
  font-size: 28px;
  line-height: 35px;
  font-weight: 500;
  margin-bottom: 8px;
}
.thank_you__main__description {
  text-align: center;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: rgb(180, 184, 197);
  margin-bottom: 25px;
}
.thank_you__main__description span {
  font-family: "Lexend", sans-serif;
  color: rgb(255, 255, 255);
  font-weight: 700;
}
.thank_you__main__image {
  width: 100%;
}
.thank_you__subscription {
  padding-bottom: 60px;
}
.thank_you__subscription__title {
  text-align: center;
  color: rgb(255, 255, 255);
  font-size: 16px;
  line-height: 19px;
  font-weight: 700;
  margin-bottom: 12px;
}
.thank_you__subscription__wrapper {
  background: rgb(40, 42, 49);
  padding: 16px;
  border-radius: 20px;
}
.thank_you__subscription__list {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.thank_you__subscription__list span {
  color: rgb(255, 255, 255);
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
}

.whats_next {
  text-align: center;
  padding-bottom: 55px;
}
.whats_next__title {
  color: rgb(255, 255, 255);
  font-size: 16px;
  line-height: 19px;
  font-weight: 700;
  margin-bottom: 8px;
}
.whats_next__image {
  max-width: 80px;
  padding: 20px 0;
}
.whats_next__description {
  color: rgb(180, 184, 197);
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
}
.whats_next__description span {
  color: rgb(255, 255, 255);
}
.whats_next__description.sm-fw {
  font-weight: 300;
}
.whats_next__title_sub {
  font-family: "Lexend", sans-serif;
  color: rgb(255, 74, 118);
  font-size: 28px;
  line-height: 35px;
  font-weight: 500;
  margin-bottom: 10px;
  margin-top: 60px;
}
.whats_next__description_sub {
  color: rgb(180, 184, 197);
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
}

.footer__link {
  padding-bottom: 24px;
}
.footer__link .btn {
  border-radius: 100px;
  padding: 18px 0;
  font-family: "Lexend", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  margin-bottom: 8px;
  height: 60px;
}
.footer__link__gp {
  background: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  color: rgb(22, 23, 27);
  text-decoration: none;
}
.footer__link__gp img {
  max-width: 22px;
}
.footer__link__send_email {
  background: rgb(34, 35, 41);
  color: rgb(255, 255, 255);
  text-align: center;
  font-size: 14px !important;
  line-height: 20px !important;
}
.footer__link__menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
}
.footer__link__menu__link {
  color: #585F71;
  text-decoration: none;
  font-size: 12px;
  line-height: 15px;
  font-weight: 300;
}
.footer__link__email_support {
  padding: 10px 0 0 0;
  text-align: center;
  color: #B4B8C5;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
}
.footer__link__email_support a {
  color: #B4B8C5;
  text-decoration: none;
}

.popup {
  display: none;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999999;
}
.popup__content {
  background: #282A31;
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  border-radius: 32px;
  padding: 16px;
  width: 328px;
  height: 200px;
}
.popup__content__title {
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 19px;
  font-weight: 600;
}
.popup__content__email {
  color: #FFFFFF;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  background: #373A43;
  border-radius: 100px;
  padding: 20px 75px;
  border: none;
  width: 296px;
  margin-bottom: 20px;
}
.popup__content__email::placeholder {
  color: #4A4E59;
}
.popup__content__link_closed, .popup__content__button {
  background: #373A43;
  border-radius: 100px;
  color: #FFFFFF;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  padding: 14px 55px;
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 144px;
  border: none;
}
.popup__content__link_closed.active, .popup__content__button.active {
  background: #FF4A76;
}
.popup__content__link_closed {
  display: none;
  margin: 0 auto;
  text-decoration: none;
  background: #FF4A76;
  text-align: center;
}
.popup .thank_message {
  display: none;
  text-align: center;
  color: #FFFFFF;
  font-size: 24px;
  line-height: 29px;
  font-weight: 600;
  margin-bottom: 20px;
  margin-top: 36px;
}

@media (max-height: 700px) {
  .step__form.step5 {
    background-size: cover !important;
  }
}

/*# sourceMappingURL=style.css.map */
