/* ---------- root ---------- */
:root {
  --xxl-break: 1400px;
  --xl-break: 1200px;
  --lg-break: 992px;
  --md-break: 768px;
  --sm-break: 576px;

  --padding-section: 110px 0;
  --margin-block: 100px 0 0 0;
}

@media screen and (max-width: 1200px) {
  :root {
    --padding-section: 110px 0;
    --margin-block: 80px 0 0 0;
  }
}

@media screen and (max-width: 992px) {
  :root {
    --padding-section: 90px 0;
    --margin-block: 65px 0 0 0;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --padding-section: 70px 0;
    --margin-block: 50px 0 0 0;
  }
}

@media screen and (max-width: 576px) {
  :root {
    --padding-section: 50px 0;
    --margin-block: 45px 0 0 0;
  }
}

/* ---------- * ---------- */
* {
  box-sizing: border-box;
}

/* ---------- page ---------- */
.page {
  font-family: "Open Sans";
  padding: 0;
  margin: 0;
  color: #000;
  min-width: 375px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- page ---------- */
.main {
  margin-top: 140px;
  flex: 1;
}

/* Контент уходит под прозрачную шапку */
.main_flush {
  margin-top: 0;
}

/* ---------- container ---------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* ---------- h1-h3 ---------- */
.h1 {
  margin: 0;
  font-size: 42px;
  font-weight: 600;
  line-height: 150%;
}

.h1 strong {
  color: #650675;
}

.h1_white {
  color: #ffffff;
}

.h1_white strong {
  color: #ffffff;
}

.h1_error {
  color: #650675;
  font-size: 96px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
}

.h2 {
  margin: 0;
  font-size: 36px;
  font-weight: 600;
  line-height: 150%;
}

.h2 strong {
  color: #650675;
}

.h2_white {
  color: white;
}

.h2_center {
  text-align: center;
}

.h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 150%;
  flex: 1;
}

.h3_white {
  color: white;
}

@media screen and (max-width: 1200px) {
  .h1 {
    font-size: 38px;
  }

  .h2 {
    font-size: 32px;
  }

  .h3 {
    font-size: 17px;
  }
}

@media screen and (max-width: 992px) {
  .h1 {
    font-size: 34px;
  }

  .h2 {
    font-size: 28px;
  }
}

@media screen and (max-width: 768px) {
  .h1 {
    font-size: 30px;
  }

  .h2 {
    font-size: 24px;
  }

  .h3 {
    font-size: 14px;
  }
}

@media screen and (max-width: 576px) {
  .h1 {
    font-size: 26px;
  }

  .h2 {
    font-size: 22px;
  }
}

/* ---------- button ---------- */
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: transparent;
  border: 1px solid #650675;
  color: #650675;
  padding: 16px 28px;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
  outline: none;
  -webkit-text-decoration: none;
  text-decoration: none;
  transition: .3s;
}

.button:hover {
  background-color: #650675;
  color: #ffffff;
}

.button_white {
  color: #FFF;
  border: 1px solid #ffffff;
}

.button_white:hover {
  color: #650675;
  background-color: #ffffff;
}

/* Размеры сняты с макета: кнопка 260x50, cap-height 16px → font-size 22px.
   Начертания 600 в Open Sans нет — только 300/400/700. */
.button_large {
  padding: 12px 43px;
  font-size: 18px;
  font-weight: 400;
}

.button_light {
  color: #000000;
  background-color: #ffffff;
  border: 1px solid #ffffff;
}

.button_light:hover {
  color: #ffffff;
  background-color: transparent;
}

.button_small {
  padding: 12px 24px;
}

@media screen and (max-width: 992px) {
  .button {
    font-size: 14px;
    padding: 14px 24px;
  }
}

/* ---------- text ---------- */
.text {
  margin: 0;
  color: rgba(0, 0, 0, 0.80);
  font-size: 20px;
  font-style: normal;
  font-weight: 300;
  line-height: 150%;
}

.text_small {
  font-size: 16px;
}

.text_white {
  color: #fff;
}

.text_translucent {
  opacity: 0.8;
}

.text_bold {
  font-weight: 600;
}

@media screen and (max-width: 992px) {
  .text {
    font-size: 18px;
  }
}

@media screen and (max-width: 768px) {
  .text {
    font-size: 16px;
  }

  .text.text_small {
    font-size: 14px;
  }
}

@media screen and (max-width: 576px) {
  .text {
    font-size: 14px;
  }
}

/* ---------- popup-fancybox-custom ---------- */
.popup-fancybox-custom {
  display: none;
}

/* ---------- label ---------- */
.label {
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: 0.3s;
}

.label:hover {
  color: #650675;
}

/* ---------- input ---------- */
.input {
  outline: none;
  padding: 12px 20px 12px 25px;
  border: 1px solid #828282;
  border-radius: 5px;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 0.2px;
  width: 100%;
  transition: .3s;
  font-family: "Open Sans";
}

.input:active {
  border: 1px solid #650675;
}

.input:focus {
  border: 1px solid #650675;
  box-shadow: 0px 0px 10px 0px rgba(89, 6, 108, 0.2);
}

/* ---------- textarea ---------- */
.textarea {
  outline: none;
  padding: 12px 20px 12px 25px;
  border: 1px solid #828282;
  border-radius: 5px;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 0.2px;
  width: 100%;
  transition: .3s;
  resize: none;
  font-family: "Open Sans";
}

.textarea:active {
  border: 1px solid #650675;
}

.textarea:focus {
  border: 1px solid #650675;
}

/* ---------- checkbox ---------- */
.join__approval {
  display: flex;
  align-items: flex-start;
  padding: 0;
  border: 0;
  margin: 0;
  margin-bottom: 65px;
}

.join__custom-checkbox {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.join__custom-checkbox+label {
  display: inline-flex;
  align-items: center;
  user-select: none;
  margin-top: 4px;
}

.join__custom-checkbox+label::before {
  content: '';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  flex-grow: 0;
  background: #FFFFFF;
  border: 1px solid #828282;
  border-radius: 4px;
  cursor: pointer;
}

.join__custom-checkbox:checked+label::before {
  border-color: #650675;
  background-color: #650675;
  color: #ffffff;
  content: "\e801";
  font-family: "fontello";
  font-size: 12px;
}

.join__custom-checkbox:not(:disabled):not(:checked)+label:hover::before {
  border-color: #650675;
}

.join__custom-checkbox:not(:disabled):active+label::before {
  background-color: #b3d7ff;
  border-color: #b3d7ff;
}

.join__custom-checkbox:disabled+label::before {
  background-color: #828282;
}

/* ---------- data-link ---------- */
.data-link {
  margin: 0;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

.data-link_black {
  color: #000;
}

.data-link+.data-link {
  margin-top: 20px;
}

.data-icons {
  color: rgba(255, 255, 255, 0.80);
  transition: 0.3s;
}

.data-link.data-link_black .data-icons {
  color: #000;
}

.data-link:hover .data-icons {
  color: rgba(255, 255, 255, 1);
}

.data-text {
  color: rgba(255, 255, 255, 0.80);
  font-size: 16px;
  font-weight: 300;
  line-height: 150%;
  transition: 0.3s;
}

.data-link.data-link_black .data-text {
  color: #000;
}

.data-text:hover {
  color: rgba(255, 255, 255, 1);
}

/* ---------- header ---------- */
.header {
  padding: 32px 0px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background-color: #ffffff;
  transition: background-color .3s .3s, top .3s;
}

.header.header_top {
  top: -135px;
}

.header_shadow {
  padding: 14px 0;
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.20);
}

/* Прозрачная шапка поверх hero — только на Главной.
   При скролле JS вешает header_shadow, и шапка снова становится белой. */
.header_transparent {
  background-color: transparent;
}

.header_transparent .header__menu-link,
.header_transparent .header__telephone-number,
.header_transparent .header__telephone-icons {
  color: #ffffff;
}

.header_transparent .header__telephone-icons {
  border-color: #ffffff;
}

/* На прозрачной (непролистанной) шапке hover не красит текст в фиолетовый
   (сливался бы с hero), а усиливает акцент: остаётся белым и «жирнеет».
   Утолщение через text-shadow, а не font-weight — ширина не меняется,
   поэтому соседние пункты меню не сдвигаются.
   Когда шапка пролистана и белеет (header_shadow) — работает обычный hover. */
.header_transparent:not(.header_shadow) .header__menu-link:hover,
.header_transparent:not(.header_shadow) .header__telephone:hover .header__telephone-number {
  color: #ffffff;
  text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor;
}

.header_transparent:not(.header_shadow) .header__telephone:hover .header__telephone-icons {
  color: #ffffff;
  border-color: #ffffff;
}

.header_transparent .header__navigation-burger span {
  background-color: #ffffff;
}

.header_transparent.header_shadow {
  background-color: #ffffff;
}

.header_transparent.header_shadow .header__menu-link,
.header_transparent.header_shadow .header__telephone-number,
.header_transparent.header_shadow .header__telephone-icons {
  color: #000000;
}

.header_transparent.header_shadow .header__telephone-icons {
  border-color: #000000;
}

.header_transparent.header_shadow .header__navigation-burger span {
  background-color: #000000;
}

.header__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo-link {
  width: 210px;
}

.header__logo-link_events_none {
  pointer-events: none;
  user-select: none;
}

.header__logo {
  display: flex;
  width: 100%;
}

/* Логотипы наложены друг на друга и переключаются прозрачностью.
   Тайминг повторяет transition фона у .header (задержка .3s, длительность .3s),
   иначе логотип успевает смениться раньше фона и на миг пропадает. */
.header_transparent .header__logo-link {
  position: relative;
}

.header_transparent .header__logo {
  transition: opacity .3s .3s;
}

.header_transparent .header__logo_dark {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.header_transparent.header_shadow .header__logo_light {
  opacity: 0;
}

.header_transparent.header_shadow .header__logo_dark {
  opacity: 1;
}

/* Логотип 300px (в макете 302), его центр совпадает с центром строки меню.
   Телефон выводим из потока — иначе колонка «телефон + меню» центруется
   целиком и логотип встаёт выше меню на ~22px. Единое правило для ВСЕХ шапок
   (и прозрачной на Главной/ETL, и сплошных на остальных страницах), иначе
   логотип на сплошных шапках мельче и смещён. Только десктоп: ниже 1121px
   меню прячется в бургер. */
@media screen and (min-width: 1121px) {
  .header__row {
    position: relative;
  }

  .header__logo-link {
    width: 300px;
  }

  .header__telephone {
    position: absolute;
    top: -14px;
    right: 0;
  }
}

.header__nav-column {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
}

.header__telephone {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 15px;
}

.header__telephone-icons {
  color: #000;
  border: 1px solid black;
  border-radius: 5px;
  padding: 2px;
  font-size: 14px;
  transition: 0.3;
}

.header__telephone:hover .header__telephone-icons {
  border: 1px solid #650675;
  color: #650675;
}

.header__telephone-number {
  color: #000;
  font-size: 18px;
  font-weight: 300;
  line-height: 132%;
  letter-spacing: 0.36px;
  transition: 0.3s;
}

.header__telephone:hover .header__telephone-number {
  color: #650675;
}

.header__menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.header__menu-link {
  text-decoration: none;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.header__menu-link_current {
  color: #650675;
}

.header__menu-link:hover {
  color: #650675;
}

.header__menu-link:after {
  background-color: #650675;
  margin-top: 5px;
  display: block;
  content: "";
  height: 1px;
  width: 0%;
  -webkit-transition: width .3s ease-in-out;
  -moz--transition: width .3s ease-in-out;
  transition: width .3s ease-in-out;
}

.header__menu-link:hover:after,
.header__menu-link:focus:after {
  width: 100%;
}

.header__navigation {
  display: none;
  position: relative;
  transition: .3s;
}

.header__navigation-burger {
  display: block;
  position: relative;
  height: 50px;
  width: 34px;
  z-index: 999999999999;
  cursor: pointer;
  box-sizing: content-box;
  transition: .2s;
}

.header__navigation-burger span {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 3px;
  background-color: #000;
  transition-duration: .2s;
}

.header__navigation-burger span:nth-child(1) {
  top: 14px;
  right: 0;
  left: auto;
  transform: translateX(0%);
}

.header__navigation-burger span:nth-child(2) {
  top: 23px;
}

.header__navigation-burger span:nth-child(3) {
  bottom: 14px;
  left: 0;
  transform: translateX(0%);
}

.header__navigation-burger_active span:nth-child(1) {
  transform: translate(0px, 10px) rotate(-48deg);
  background-color: #000000;
  width: 26px;
}

.header__navigation-burger_active span:nth-child(2) {
  transition-duration: 0s;
  opacity: 0;

}

.header__navigation-burger_active span:nth-child(3) {
  transform: translate(8px, -9px) rotate(45deg);
  background-color: #000000;
  width: 26px;
}

.header__navigation-column {
  display: block;
  position: fixed;
  top: 16px;
  right: 16px;
  height: 50px;
  width: 50px;
  z-index: -1;
  transition-duration: .1s;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.header__navigation-column_open {
  background-color: #ffffff;
  max-width: 375px;
  width: 100%;
  height: 600px;
  right: 0px;
  top: 0px;
  border-radius: 0;
  z-index: 99;
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.20);
  opacity: 1;
  pointer-events: all;
}

.header__navigation-items {
  display: none;
}

.header__navigation-items_show {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.header__navigation-item {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  background-color: transparent;
  width: 100%;
  opacity: 0;
  animation-name: fadein;
  animation-duration: .2s;
  animation-fill-mode: forwards;
  padding-left: 30px;
  border-left: 5px solid transparent;
}

.header__navigation-item_current {
  background-color: #F4F4F4;
  border-left: 5px solid #650675;
}

.header__navigation-item:nth-child(1) {
  padding: 20px 0 15px 30px;
  margin-left: 5px;
}

.header__navigation-link {
  margin: 0;
  padding: 20px 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  text-decoration: none;
  color: #000000;
  text-align: left;
}

.header__data {
  border-top: 1px solid rgba(0, 0, 0, 0.30);
  padding-top: 20px;
  margin-right: 30px;
}

.header__navigation-link_current {
  pointer-events: none;
  cursor: default;
  font-weight: 600;
  color: #650675;
}


@media screen and (max-width: 1120px) {
  .header__logo-link {
    width: 170px;
  }

  .header__nav {
    display: none;
  }

  .header__navigation {
    display: block;
  }

  .header {
    padding: 20px 0;
  }
}

@media screen and (max-width: 576px) {
  .header__logo-link {
    width: 100px;
  }

  .header__telephone {
    gap: 10px;
  }

  .header__telephone-icons {
    font-size: 12px;
  }

  .header__telephone-number {
    font-size: 12px;
  }
}

/* ---------- footer ---------- */
.footer {
  background-color: #1A1A1A;
  padding: 60px 0;
  margin-top: auto;
}

/* Футер Главной — фиолетовый с сеткой-«созвездием» из макета */
.footer_promo {
  background-color: #693571;
  background-image: url("../images/footer/footer-bg.jpg");
  background-size: cover;
  background-position: center center;
}

.footer__row {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.footer__logo {}

.footer__logo-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer__logo-text {
  margin: 0;
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.footer__text {
  margin: 60px 0 0 0;
  color: rgba(255, 255, 255, 0.80);
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 150%;
}

.footer__information {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  max-width: 600px;
}

.footer__title {
  margin: 0;
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  padding-bottom: 30px;
}

@media screen and (max-width: 992px) {
  .footer__information {
    flex-direction: column;
    gap: 25px;
  }

  .footer__title {
    padding-bottom: 15px;
  }

  .footer__data-link+.footer__data-link {
    margin-top: 10px;
  }
}

@media screen and (max-width: 768px) {
  .footer {
    padding: 40px 0 70px 0;
  }

  .footer__row {
    flex-direction: column;
    align-items: center;
    gap: 35px;
  }

  .footer__text {
    margin: 0;
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    text-align: center;
  }

  .footer__title {
    text-align: center;
  }

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