@charset "UTF-8";
:root {
  --sp: 70px;
--sp2x: calc(var(--sp) * 2);
--white: #F8F6F3;
--primary: #305C49;
--secondary: #070E11;
}
.page-spa, .service-template-service-spa {
    background: #070E11;
    color: var(--white);
}

.spa-hero {
  padding-top: 20vh;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--white);
  color: var(--secondary);
  min-height: 130vh;
}

.spa-hero:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50vh;
  width: 100%;
  background: var(--secondary);
}

.spa-hero__container {
  z-index: 2;
  position: relative;
}

.spa-hero__bg {
  background: var(--white) url(../img/spa/spa-hero__bg.webp) 50% 0/cover no-repeat;
  width: 100%;
  height: 100%;
  position: relative;
}

.spa-hero__bg-wrapper {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 20%;
  left: 0;
  z-index: 1;
  overflow: hidden;
}

.spa-hero__tag {
  font: 700 var(--h2)/100% var(--heading-font-family);
  padding: 15px 50px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 236.114px;
  border: 2px solid var(--primary);
  text-transform: uppercase;
  color: var(--primary);
}

.spa-hero__title {
  margin-top: 16px;
}

.spa-hero__subtitle {
  font: 700 var(--h3)/100% var(--heading-font-family);
  margin-top: 8px;
  text-transform: uppercase;
}

.spa-hero__image {
  -o-object-fit: contain;
  object-fit: contain;
  width: var(--container-width);
}

.spa-hero__image-wrapper {
  position: absolute;
  top: 70vh;
  left: 0;
  z-index: 2;
  left: calc(50% - var(--container-width) / 2);
}

.spa-hero__image-wrapper:before {
  content: "";
  position: absolute;
  height: 350px;
  width: 110vw;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: url(../img/spa/hero__image-decor.webp) 50% 0/cover;
}

.spa-hero__image-wrapper:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100vw;
  height: 1000px;
  background: var(--secondary);
  z-index: 5;
  transform: translate(-50%, 100%);
}

.spa-about {
  padding: var(--sp2x) 0 var(--sp2x);
  position: relative;
}

.spa-about__container {
  display: flex;
  gap: 60px;
}

.spa-about__header {
  width: 100%;
  max-width: 360px;
}

.spa-about__content {
  max-width: 360px;
}

.spa-about__text {
  margin-top: 40px;
}

.spa-about__decor {
  background: url(../img/spa/spa-about__decor.webp) 50%/contain no-repeat;
  aspect-ratio: 360/233;
  width: 100%;
  margin-top: 27px;
}

.spa-about__image {
  position: relative;
  width: 100%;
}

.spa-about__image-img {
  aspect-ratio: 1/1;
  width: 100%;
  background: 50%/cover no-repeat;
  position: relative;
  z-index: 2;
}

.spa-about__decor-text {
  position: absolute;
  bottom: 20px;
  left: -100%;
}

.spa-about__decor-text--border {
  z-index: 3;
}

.spa-about__decor-text--filled {
  z-index: 1;
}

.section-decor {
  height: 230px;
  background: url(../img/spa/section-decor.svg) 50% repeat-x;
}

.section-decor--2 {
  height: 432px;
  background: url(../img/spa/decor-black.webp) 50%/contain repeat-x;
}

.spa-services {
  padding: var(--sp) 0;
  background: url(../img/spa/spa-services__bg.svg) 50% 50% no-repeat;
}

.spa-services__container {
  display: flex;
  flex-flow: column;
  gap: 80px;
}

.spa-services .block {
  position: relative;
}

.spa-services .block--1 {
  min-height: 600px;
}

.spa-services .block--1 .block__image {
  position: absolute;
  top: 0;
  left: 0;
  aspect-ratio: 1240/600;
  width: 100%;
  background: url(../img/spa/spa-services-1.webp) 50%/contain no-repeat;
  transform: translateY(100px);
}

.spa-services .block--2 {
  display: flex;
  justify-content: flex-end;
}

.spa-services .block--3 {
  display: flex;
  gap: 70px;
}

.spa-services .block--3 .block__image {
  width: 100%;
  aspect-ratio: 820/600;
  background: url(../img/spa/spa-services-2.webp) 50%/contain no-repeat;
}

.spa-services .block--3 .block__content {
  max-width: 350px;
  width: 100%;
  transform: translateY(100px);
}

.spa-services .block__content {
  width: 100%;
  max-width: 600px;
  display: flex;
  align-items: flex-start;
  flex-flow: column;
  gap: 24px;
}

.spa-services .block__subtitle {
  max-width: 360px;
}

.spa-services .block__button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 48px;
  background: var(--primary);
  color: var(--white);
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  &:before, &:after {
    display: none;
  }
}

.spa-couples {
  padding-top: var(--sp);
  background: var(--white) url(../img/spa/couples-bg.webp) 50% 0/cover no-repeat;
  position: relative;
}

.spa-couples:after {
  content: "";
  position: absolute;
  height: 350px;
  width: calc(100% + 200px);
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: url(../img/spa/hero__image-decor.webp) 50%/cover;
}

.spa-couples:before {
  content: "";
  background: linear-gradient(180deg, rgba(7, 14, 17, 0) 30%, #070E11 85%);
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.spa-couples__title {
  text-align: center;
  color: var(--secondary);
}

.spa-couples__items {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 40px;
  position: relative;
  z-index: 2;
}

.spa-couples .item {
  aspect-ratio: 610/412;
  position: relative;
  overflow: hidden;
}

.spa-couples .item--locked {
  pointer-events: none;
}

.spa-couples .item--locked:after {
  content: "";
  left: 50%;
  top: 50%;
  position: absolute;
  background: url(../img/icons/lock.svg) 50%/contain no-repeat;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  transform: translate(-50%, -50%);
}

.spa-couples .item--locked .item__image:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--black-50, rgba(7, 14, 17, 0.5));
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.spa-couples .item:hover .item__name {
  transform: none;
}

.spa-couples .item:hover .item__info {
  background: var(--black-90, rgba(7, 14, 17, 0.9));
  transform: none !important;
}

.spa-couples .item:hover .item__properties,
.spa-couples .item:hover .item__description {
  opacity: 1;
}

.spa-couples .item.active .item__name {
  transform: none;
}

.spa-couples .item.active .item__info {
  background: var(--black-90, rgba(7, 14, 17, 0.9));
  transform: none !important;
}

.spa-couples .item.active .item__properties,
.spa-couples .item.active .item__description {
  opacity: 1;
}

.spa-couples .item__image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: 50%/cover no-repeat;
}

.spa-couples .item__name {
  margin-bottom: 8px;
  transform: translateY(calc(-100% - 40px));
  transition: 0.6s cubic-bezier(0, 0, 0.33, 0.99);
}

.spa-couples .item .property {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--l);
  line-height: 135%;
}

.spa-couples .item__info {
  padding: 20px;
  transition: 0.6s cubic-bezier(0, 0, 0.33, 0.99);
  position: relative;
  transform: translateY(412px);
}

.spa-couples .item__properties {
  opacity: 0;
  transition: var(--transition);
}

.spa-couples .item__description {
  margin-top: 32px;
  opacity: 0;
  transition: var(--transition);
}

.spa-contacts {
  padding-bottom: var(--sp2x);
}

.spa-contacts__container {
  display: flex;
  flex-flow: wrap;
  gap: 60px 20px;
}

.spa-contacts__decor-text {
  width: 100%;
}

.spa-contacts__col {
  width: calc(50% - 10px);
  display: flex;
  flex-flow: column;
  gap: 20px;
}

.spa-contacts__map {
  aspect-ratio: 610/412;
}

.spa-contacts__map iframe {
  width: 100%;
  height: 100%;
}

.spa-contacts__header {
  display: flex;
  align-items: flex-start;
  flex-flow: column;
  gap: 24px;
}

.spa-contacts__phone {
  font: 700 var(--h3)/100% var(--heading-font-family);
  text-transform: uppercase;
  color: var(--white);
}

.spa-contacts__text {
  max-width: 360px;
  font-size: var(--fz-default);
  line-height: 135%;
}

.spa-contacts-schedule {
  margin-top: auto;
  display: flex;
  flex-flow: column;
  gap: 16px;
}

.spa-contacts-schedule__divider {
  background: var(--white-10, rgba(248, 246, 243, 0.1));
  height: 1px;
}

.spa-contacts-schedule__items {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(2, 1fr);
}

.spa-contacts-schedule .item {
  display: flex;
  flex-flow: column;
  gap: 16px;
}

.spa-contacts-schedule .item__title {
  font-size: var(--m);
  line-height: 135%;
}

.spa-contacts-schedule .item__notation {
  font-size: var(--xs);
  line-height: 135%;
}

.spa-contacts-schedule .item__time b {
  font: 700 var(--h3)/100% var(--heading-font-family);
  text-transform: uppercase;
}

.spa-contacts__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.spa-contacts__button {
  display: inline-flex;
  padding: 15px 20px;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  flex-shrink: 0;
  background: #1E2426;
}

.footer {
  margin-top: auto;
}

.modal-overlay {
  display: none;
  padding-top: 1px;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
  overflow: auto;
  align-items: center;
  justify-content: center;
  padding-top: 60px;
}

.modal-overlay .modal-content {
  margin-bottom: 0px;
  border-radius: 4px;
}

.modal-overlay .close-button {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 10px;
  right: 10px;
  cursor: pointer;
  transition: 0.2s linear;
}

.modal-overlay .close-button:before {
  background: #fff;
  content: "";
  height: 50px;
  width: 2px;
  display: block;
  transform: translateX(25px) rotate(-45deg);
}

.modal-overlay .close-button:after {
  background: #fff;
  content: "";
  margin-top: -50px;
  height: 50px;
  width: 2px;
  display: block;
  transform: translateX(25px) rotate(45deg);
  transition: 0.2s linear;
}

#modal-video .modal-content {
  height: auto;
  width: 100%;
}

#modal-video .video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

#modal-video .video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.countdownHolder {
  margin: 0 auto;
  font: 30px/1 Roboto, sans-serif;
  text-align: center;
  letter-spacing: -3px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /*Параметры цифр */
  /*Параметры подложки для секций */
  /*Параметры секций разделения (:)*/
  /*Параметры вспомогательного текста (дни, часы, минуты, секунды)*/
}

.countdownHolder .position {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  position: relative;
  width: 0.5em;
}

.countdownHolder .digit {
  position: absolute;
  display: block;
  border-radius: 0.2em;
  text-align: center;
  color: #000;
  letter-spacing: -1px;
  left: 50%;
  transform: translateX(-50%);
}

.countdownHolder .countDays,
.countdownHolder .countHours,
.countdownHolder .countMinutes,
.countdownHolder .countSeconds {
  background: #fff;
  border-radius: 5px;
  padding: 10px;
}

.countdownHolder .countDiv {
  display: none;
  width: 10px;
  height: 1em;
  position: relative;
}

.countdownHolder .countDiv:before,
.countdownHolder .countDiv:after {
  background: #444;
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  left: 50%;
  margin-left: -3px;
  top: 0.2em;
  box-shadow: 1px 1px 1px rgba(4, 4, 4, 0.5);
  content: "";
}

.countdownHolder .countDiv:after {
  top: 0.6em;
}

.countdownHolder .textdigit {
  font-size: 15px;
  letter-spacing: 0px;
}

@media (max-width: 1260px) {
  :root {
    --sp: 40px;
    --h1: 32px;
    --h2: 24px;
    --h3: 20px;
    --l: 18px;
  }

  .spa-hero__tag {
    padding: 10px 40px;
  }

  .spa-about {
    padding-top: 84px;
  }

  .spa-about__container {
    gap: 20px;
    flex-direction: column;
  }

  .spa-about__header {
    max-width: 100%;
    display: flex;
    align-items: flex-end;
    gap: 20px;
  }

  .spa-about__text {
    margin-top: 20px;
  }

  .spa-about__decor-text {
    left: 0;
  }

  .section-decor--2 {
    height: 230px;
  }

  .spa-services .block--1 {
    min-height: 360px;
  }

  .spa-services .block--3 {
    gap: 20px;
  }

  .spa-services .block--3 .block__content {
    transform: translateY(40px);
  }

  .spa-services .block__content {
    max-width: 460px;
  }

  .spa-couples__items {
    gap: 10px;
  }

  .spa-couples .item__info {
    transform: translateY(260px);
  }

  .spa-couples .item__description {
    margin-top: 8px;
  }

  .spa-contacts__container {
    display: flex;
    flex-flow: column;
    gap: 20px;
  }

  .spa-contacts__col {
    width: 100%;
  }

  .spa-contacts__col--1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .spa-contacts-schedule__items {
    display: flex;
    flex-flow: column;
    gap: 20px;
  }

  .spa-contacts-schedule .item {
    gap: 8px;
  }
}

@media (max-width: 760px) {
  :root {
    --container-width: 100%;
  }

  .spa-hero {
    min-height: 100vh;
  }

  .spa-about__header {
    flex-direction: column;
  }

  .spa-about__content {
    max-width: 100%;
  }

  .spa-about__decor {
    position: absolute;
    width: var(--container-width);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
  }

  .spa-about__decor-text {
    bottom: 0;
    height: 80px;
  }

  .spa-services__container {
    gap: 20px;
  }

  .spa-services .block--1 {
    display: flex;
    flex-flow: column;
    gap: 24px;
  }

  .spa-services .block--1 .block__image {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
  }

  .spa-services .block--3 {
    flex-direction: column;
    gap: 20px;
  }

  .spa-services .block--3 .block__content {
    max-width: 100%;
    transform: none;
  }

  .spa-couples__items {
    display: flex;
    flex-flow: column;
    gap: 8px;
  }

  .spa-contacts__col--1 {
    display: flex;
    flex-flow: column;
  }

  .spa-contacts__map {
    width: 100%;
    aspect-ratio: auto;
    height: 480px;
  }
}