@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

/* .open-sans-regular {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
} */
/* :root {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
} */
/* Chrome, Safari, Edge, Opera */
/* Убирает стрелочки у числа в input */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

*:focus:not(:focus-visible) {
  outline: none;
}

html,
body {
  font-size: 62.5%;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  /* scrollbar-gutter: stable; */
}

body {
  margin: 0;
  padding: 0;
  /* Для вызова затемнённого меню */
  position: relative;
}

body {
  height: 100%;
  overflow-x: hidden;
}

.wrapper {
  min-height: 100dvh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

a {
  text-decoration: none;
  color: #000;
}

button {
  cursor: pointer;
}

label:hover,
label:active,
label:focus,
input:hover,
input:active,
input:focus,
button:hover,
button:active,
button:focus,
textarea:hover,
textarea:active,
textarea:focus {
  outline: 0;
  outline-offset: 0;
}

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
}

ul {
  text-decoration: none;
  list-style: none;
}

section {
  margin: 0;
  padding: 0;
}

.text-color {
  color: var(--color-black-text);
}

.title-color {
  color: var(--color-black-title);
}

.cross-close {
  cursor: pointer;
}

/* Изменение rem при экранах от 1920px до 360px */
@media (max-width: 1920px) {

  html,
  body {
    font-size: calc(5px + 5 * (100vw - 360px) / 1560);
  }
}

@media (max-width: 767px) {
  [class*=container]:not(.fancybox__container) {
    padding: 0 20px;
  }
}

/* Ислкючение hover-бага на тач-устройствах (button) */
/* В структуре Block > a > img для создания дополнительного слоя */
/* над картинкой и изменения его прозрачности при наведении мыши */
/* Добавлено исключение залипания hover на мобильных */
/* То же, что и предыдущий, но с параметрами, определяющими непрозрачность */
/* opb = opacity before; opa = opacity after */
/* Центрирование отдельной секции страницы */
.center {
  margin: 0 auto;
}

/* .center {
   padding-left: calc(50% - 96.0rem);
   padding-right: calc(50% - 96.0rem);
} */
/* Общий стиль для контейнера секции страницы */
[class*=container]:not(.fancybox__container) {
  width: 100%;
  /* max-width: 1860px; */
  max-width: 1920px;
  min-width: calc(var(--width-screen-360) * 1px);
  margin: 0 auto;
  padding: 0 30px;
}

/* Делает при наведении блок прозрачным плавно */
.opacity-hover {
  -webkit-transition: opacity 0.3s ease 0s;
  transition: opacity 0.3s ease 0s;
}

.opacity-hover:hover {
  opacity: 0.75;
}

/* Делает блок прозрачным */
.opacity--zero {
  opacity: 0;
  pointer-events: none;
  /* background-color: rgba(255, 255, 255, 0); */
}

/* Делает блок непрозрачным */
.opacity--max {
  opacity: 1;
  pointer-events: all;
  /* background-color: rgba(255, 255, 255, 1); */
}

/* Удаляет блок из DOM */
.display--none {
  display: none;
}

/* Возвращает блок в DOM */
.display--block {
  display: block;
}

/* Возвращает флекс-блок в DOM */
.display--flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* Вся высота страницы */
.page-wrapper {
  /* min-height: 100dvh; */
  /*    display: flex;
  flex-direction: column; */
}

/* .main {
   flex: 1 1 auto;
} */
:root {
  --width-screen-360: 360;
  /* Цвет */
  --color-page-bg: #F5F5F5;
  --color-header-bg: #ffffff;
  --color-nav-bg: #EFF5F8;
  --color-card-bg: #F1EFF0;
  --color-black-text: #2E2E2E;
  --color-black-title: #1E1D21;
  --color-black-bg: #0F283E;
  --color-black-btn-bg: #2E2E2E;
  --color-gray-text: #929292;
  --color-grey-bg: #F8F7F6;
  --color-white-text: #ffffff;
  --color-white-bg: #ffffff;
  --color-decorated-text: #7097B0;
  --color-decorated-text-2: #307ECC;
  --color-decorated-text-3: #307ECC;
  --color-form-bg: #c8aab9;
  --color-red-bg: #EF172F;
  --color-red-text: #EF172F;
  --color-grey-txt: #b7b7b7;
  --color-yelow-bg: #EEC739;
  --color-china-text: #990202;
  /* Отступы 1919px - 360px */
  --margin-40: 40px;
  --margin-60: 60px;
  --margin-100-30: 100px;
  --margin-80-30: 80px;
  --margin-60-30: 60px;
  --margin-40-30: 40px;
  --margin-40-25: 40px;
  --margin-30-20: 30px;
  --margin-30-15: 30px;
  --margin-28-24: 28px;
  --margin-28-20: 28px;
  --margin-20-10: 20px;
  --margin-15-10: 15px;
  --padding-60-30: 60px;
  --padding-40-30: 40px;
  /* Отступы 767px - 360px - литер s */
  --margin-60s-40: 60px;
  --margin-60s-30: 60px;
  --margin-40s-30: 40px;
  --margin-40s-20: 40px;
  --margin-20s-15: 20px;
  --padding-30s-20: 30px;
  /* Увеличение - литер g */
  --margin-30sg-40: 30px;
  --margin-10sg-15: 10px;
  /* Шрифты */
  --font-size-52-36: 52px;
  --font-size-52-26: 52px;
  --font-size-52-24: 52px;
  --font-size-48-32: 48px;
  --font-size-48-28: 48px;
  --font-size-48-24: 48px;
  --font-size-48-22: 48px;
  --font-size-42-24: 42px;
  --font-size-40-22: 40px;
  --font-size-40-20: 40px;
  --font-size-36-26: 36px;
  --font-size-36-16: 36px;
  --font-size-33-18: 33px;
  --font-size-32-22: 32px;
  --font-size-29-16: 29px;
  --font-size-28-20: 28px;
  --font-size-26-18: 26px;
  --font-size-24-18: 24px;
  --font-size-24-16: 24px;
  --font-size-20-16: 20px;
  --font-size-20-14: 20px;
  --font-size-18-16: 18px;
  --font-size-16-14: 16px;
  --font-size-16-11: 16px;
}

/* Responsive */
@media (max-width: 1919px) {
  :root {
    --font-size-52-36: calc(36px + (52 - 36) * ((100vw - 360px) / (1919 - 360)));
    --font-size-52-26: calc(26px + (52 - 26) * ((100vw - 360px) / (1919 - 360)));
    --font-size-52-24: calc(24px + (52 - 24) * ((100vw - 360px) / (1919 - 360)));
    --font-size-48-32: calc(32px + (48 - 32) * ((100vw - 360px) / (1919 - 360)));
    --font-size-48-28: calc(28px + (48 - 28) * ((100vw - 360px) / (1919 - 360)));
    --font-size-48-24: calc(24px + (48 - 24) * ((100vw - 360px) / (1919 - 360)));
    --font-size-48-22: calc(22px + (48 - 22) * ((100vw - 360px) / (1919 - 360)));
    --font-size-42-24: calc(24px + (42 - 24) * ((100vw - 360px) / (1919 - 360)));
    --font-size-40-22: calc(22px + (40 - 22) * ((100vw - 360px) / (1919 - 360)));
    --font-size-40-20: calc(20px + (40 - 20) * ((100vw - 360px) / (1919 - 360)));
    --font-size-36-26: calc(26px + (36 - 26) * ((100vw - 360px) / (1919 - 360)));
    --font-size-36-16: calc(16px + (36 - 16) * ((100vw - 360px) / (1919 - 360)));
    --font-size-33-18: calc(18px + (33 - 18) * ((100vw - 360px) / (1919 - 360)));
    --font-size-32-22: calc(22px + (32 - 22) * ((100vw - 360px) / (1919 - 360)));
    --font-size-29-16: calc(16px + (29 - 16) * ((100vw - 360px) / (1919 - 360)));
    --font-size-28-20: calc(20px + (28 - 20) * ((100vw - 360px) / (1919 - 360)));
    --font-size-26-18: calc(18px + (26 - 18) * ((100vw - 360px) / (1919 - 360)));
    --font-size-24-18: calc(18px + (24 - 18) * ((100vw - 360px) / (1919 - 360)));
    --font-size-24-16: calc(16px + (24 - 16) * ((100vw - 360px) / (1919 - 360)));
    --font-size-20-16: calc(16px + (20 - 16) * ((100vw - 360px) / (1919 - 360)));
    --font-size-20-14: calc(14px + (20 - 14) * ((100vw - 360px) / (1919 - 360)));
    --font-size-18-16: calc(16px + (18 - 16) * ((100vw - 360px) / (1919 - 360)));
    --font-size-16-14: calc(14px + (16 - 14) * ((100vw - 360px) / (1919 - 360)));
    --font-size-16-11: calc(11px + (16 - 11) * ((100vw - 360px) / (1919 - 360)));
    /* Отступы 1919px - 360px */
    --margin-100-30: calc(30px + (100 - 30) * ((100vw - 360px) / (1919 - 360)));
    --margin-80-30: calc(30px + (80 - 30) * ((100vw - 360px) / (1919 - 360)));
    --margin-60-30: calc(30px + (60 - 30) * ((100vw - 360px) / (1919 - 360)));
    --margin-40-30: calc(30px + (40 - 30) * ((100vw - 360px) / (1919 - 360)));
    --margin-40-25: calc(25px + (40 - 25) * ((100vw - 360px) / (1919 - 360)));
    --margin-30-20: calc(20px + (30 - 20) * ((100vw - 360px) / (1919 - 360)));
    --margin-30-15: calc(15px + (30 - 15) * ((100vw - 360px) / (1919 - 360)));
    --margin-28-24: calc(24px + (28 - 24) * ((100vw - 360px) / (1919 - 360)));
    --margin-28-20: calc(20px + (28 - 20) * ((100vw - 360px) / (1919 - 360)));
    --margin-20-10: calc(10px + (20 - 10) * ((100vw - 360px) / (1919 - 360)));
    --margin-15-10: calc(10px + (15 - 10) * ((100vw - 360px) / (1919 - 360)));
    --padding-60-30: calc(30px + (60 - 30) * ((100vw - 360px) / (1919 - 360)));
    --padding-40-30: calc(30px + (40 - 30) * ((100vw - 360px) / (1919 - 360)));
  }
}

@media (max-width: 767px) {
  :root {
    /* Отступы 767px - 360px */
    --margin-60s-40: calc(40px + (60 - 40) * ((100vw - 360px) / (767 - 360)));
    --margin-60s-30: calc(30px + (60 - 30) * ((100vw - 360px) / (767 - 360)));
    --margin-40s-30: calc(30px + (40 - 30) * ((100vw - 360px) / (767 - 360)));
    --margin-40s-20: calc(20px + (40 - 20) * ((100vw - 360px) / (767 - 360)));
    --margin-20s-15: calc(15px + (20 - 15) * ((100vw - 360px) / (767 - 360)));
    --padding-30s-20: calc(20px + (30 - 20) * ((100vw - 360px) / (767 - 360)));
    /* Увеличение ! */
    --margin-30sg-40: calc(40px + (30 - 40) * ((100vw - 360px) / (767 - 360)));
    --margin-10sg-15: calc(15px + (10 - 15) * ((100vw - 360px) / (767 - 360)));
  }
}

.diploma .diploma__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-left: 0;
  padding-right: 0;
  margin-top: 60px;
}

.diploma__left {
  background-color: var(--color-card-bg);
  padding-top: 170px;
  padding-right: 204px;
  padding-bottom: 176px;
  padding-left: 200px;
}

.diploma .title {
  max-width: 361px;
  font-size: var(--font-size-52-24);
  font-weight: 700;
  line-height: 120%;
  text-transform: uppercase;
  color: var(--color-black-text);
  margin-bottom: 15px;
}

.diploma .line {
  border: 1px solid var(--color-decorated-text);
  background-color: var(--color-decorated-text);
  width: 150px;
  height: 3px;
  margin-bottom: 30px;
}

.diploma .text {
  font-size: var(--font-size-20-16);
  font-weight: 400;
  color: var(--color-black-text);
  margin-bottom: 50px;
}

.diploma__img {
  overflow: hidden;
}

.diploma__img img {
  /* width: 960px; */
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
}

.advantages-page .advantages {
  margin-bottom: 0;
}

.advantages-page .advantages .advantages__container {
  /* max-width: 1320px; */
  background-color: var(--color-white-bg);
  padding: 80px 300px;
}

.advantages-page .advantages .advantage {
  justify-self: center;
}

.advantages-page .advantages .title {
  font-size: var(--font-size-18-16);
  font-weight: 700;
  text-align: center;
  color: var(--color-black-text);
  margin-bottom: var(--margin-15-10);
}

.advantages-page .advantages .text {
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  color: var(--color-black-text);
}

.more-info .more-info__container {
  padding-left: 0;
  padding-right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.more-info .image {
  overflow: hidden;
}

.more-info .image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.more-info .image img:last-child {
  display: none;
}

.more-info .info {
  padding: 60px 100px 117px;
  background-color: var(--color-nav-bg);
}

.more-info .title {
  font-size: var(--font-size-40-20);
  font-weight: 700;
  line-height: 120%;
  text-transform: uppercase;
  color: var(--color-black-text);
  max-width: 251px;
  margin-bottom: var(--margin-15-10);
}

.more-info .line {
  border: 1px solid var(--color-decorated-text);
  background-color: var(--color-decorated-text);
  width: 150px;
  height: 3px;
  margin-bottom: var(--margin-30-20);
}

.more-info .text p {
  font-size: var(--font-size-20-16);
  font-weight: 400;
  line-height: 120%;
  color: var(--color-black-text);
}

.more-info .text p~p {
  margin-top: 27px;
}

@media (max-width: 1919px) {
  .diploma .diploma__container {
    margin-top: calc(0px + 60 * (100vw - 620px) / 1299);
  }

  .diploma__left {
    padding-top: calc(30px + 140 * (100vw - 768px) / 1151);
    padding-right: calc(30px + 174 * (100vw - 768px) / 1151);
    padding-bottom: calc(30px + 146 * (100vw - 768px) / 1151);
    padding-left: calc(30px + 170 * (100vw - 768px) / 1151);
  }

  .advantages-page .advantages .advantages__container {
    padding: calc(50px + 30 * (100vw - 1200px) / 719) calc(20px + 280 * (100vw - 1200px) / 719);
  }

  .advantages-page .advantages .text {
    max-width: 410px;
  }

  .more-info .info {
    padding-top: calc(30px + 30 * (100vw - 1200px) / 719);
    padding-left: calc(30px + 70 * (100vw - 1200px) / 719);
    padding-right: calc(30px + 70 * (100vw - 1200px) / 719);
    padding-bottom: calc(30px + 87 * (100vw - 1200px) / 719);
    background-color: var(--color-nav-bg);
  }

  .more-info .text p~p {
    margin-top: calc(22px + 5 * (100vw - 360px) / 1559);
  }
}

@media (max-width: 1199px) {
  .advantages-page .advantages .advantages__container {
    padding: 50px 20px;
  }

  .more-info .more-info__container {
    grid-template-columns: 1fr;
  }

  .more-info .image img:first-child {
    display: none;
  }

  .more-info .image img:last-child {
    display: block;
  }

  .more-info .info {
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .diploma__left {
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
  }

  .diploma img {
    -o-object-position: calc(-280px + 90 * (100vw - 620px) / 147) 50%;
    object-position: calc(-280px + 90 * (100vw - 620px) / 147) 50%;
  }
}

@media (max-width: 619px) {
  .diploma .diploma__container {
    grid-template-columns: 1fr;
    padding-left: 0;
    padding-right: 0;
    margin-top: 0;
  }

  .diploma .diploma__container .red-btn {
    margin-bottom: 0;
  }

  .diploma__left {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: calc(40px + -10 * (100vw - 360px) / 259);
  }

  .diploma .title {
    margin-bottom: calc(10px + 5 * (100vw - 360px) / 259);
  }

  .diploma .line {
    margin-bottom: calc(20px + 10 * (100vw - 360px) / 259);
  }

  .diploma .text {
    margin-bottom: calc(30px + 20 * (100vw - 360px) / 259);
  }

  .diploma__img {
    height: calc(200px + 212 * (100vw - 360px) / 259);
  }

  .diploma__img img {
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
  }

  .more-info .info {
    padding-left: calc(20px + 10 * (100vw - 360px) / 259);
    padding-right: calc(20px + 10 * (100vw - 360px) / 259);
  }
}

.china-scroll .china-scroll__container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-left: 0;
  padding-right: 0;
  margin-top: 40px;
}

.china-scroll .chin-lang {
  min-height: 718px;
  background-image: url("../images/china/left_bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 60px 114px 60px 30px;
}

.china-scroll .chin-lang .title {
  font-size: var(--font-size-28-20);
  font-weight: 700;
  line-height: 120%;
  color: var(--color-china-text);
  margin-bottom: 20px;
}

.china-scroll .chin-lang .title.title-last {
  margin-bottom: 25px;
}

.china-scroll .chin-lang .subtitle {
  font-size: var(--font-size-20-16);
  font-weight: 700;
  line-height: 120%;
  color: var(--color-china-text);
  margin-bottom: 15px;
  margin-top: 50px;
}

.china-scroll .chin-lang .text p {
  font-size: var(--font-size-20-16);
  font-weight: 400;
  line-height: 120%;
  color: var(--color-china-text);
}

.china-scroll .chin-lang .text p~p {
  margin-top: 20px;
}

.china-scroll .rus-lang {
  padding-top: 60px;
  padding-right: 15px;
  padding-bottom: 75px;
  padding-left: 143px;
  background-color: var(--color-card-bg);
}

.china-scroll .rus-lang .title {
  font-size: var(--font-size-28-20);
  font-weight: 700;
  line-height: 120%;
  color: var(--color-black-text);
  margin-bottom: 20px;
}

.china-scroll .rus-lang .title.title-last {
  margin-bottom: 25px;
}

.china-scroll .rus-lang .subtitle {
  font-size: var(--font-size-20-16);
  font-weight: 700;
  line-height: 120%;
  color: var(--color-black-text);
  margin-bottom: 15px;
  margin-top: 50px;
}

.china-scroll .rus-lang .text p {
  font-size: var(--font-size-20-16);
  font-weight: 400;
  line-height: 120%;
  color: var(--color-black-text);
}

.china-scroll .rus-lang .text p~p {
  margin-top: 20px;
}

.china-scroll .chin-image {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 12%;
}

@media (max-width: 1919px) {
  .china-scroll .chin-lang {
    padding-top: calc(40px + 20 * (100vw - 1200px) / 719);
    padding-bottom: calc(40px + 20 * (100vw - 1200px) / 719);
  }

  .china-scroll .rus-lang {
    padding-left: calc(122px + 21 * (100vw - 1200px) / 719);
    padding-top: calc(40px + 20 * (100vw - 1200px) / 719);
    padding-bottom: calc(40px + 35 * (100vw - 1200px) / 719);
  }
}

@media (max-width: 1200px) {
  .china-scroll .rus-lang {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

@media (max-width: 999px) {
  .china-scroll .china-scroll__container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .china-scroll .chin-lang {
    min-height: 567px;
    padding-right: 260px;
    padding-top: calc(30px + 30 * (100vw - 360px) / 639);
    padding-bottom: calc(30px + 30 * (100vw - 360px) / 639);
    /* background-size: 80% 80%; */
    background-size: 100% 135%;
    /* background-position-y: -160px; */
    background-position-y: bottom;
  }

  .china-scroll .chin-lang .subtitle {
    margin-top: 40px;
  }

  .china-scroll .rus-lang {
    padding-left: 30px;
    padding-right: 30px;
  }

  .china-scroll .rus-lang .subtitle {
    margin-top: 40px;
  }

  .china-scroll .chin-image {
    left: auto;
    right: -100px;
    top: 8%;
  }
}

@media (max-width: 699px) {
  .china-scroll .china-scroll__container {
    margin-top: calc(0px + 40 * (100vw - 360px) / 339);
  }

  .china-scroll .chin-lang {
    padding-left: calc(20px + 10 * (100vw - 360px) / 1560);
    padding-right: calc(20px + 10 * (100vw - 360px) / 1560);
    background-size: 135% 126%;
  }

  .china-scroll .rus-lang {
    padding-left: calc(20px + 10 * (100vw - 360px) / 339);
    padding-right: calc(20px + 10 * (100vw - 360px) / 339);
    padding-top: calc(30px + 10 * (100vw - 360px) / 339);
  }

  .china-scroll .chin-image {
    display: none;
  }
}

@media (max-width: 579px) {
  .china-scroll .chin-lang {
    background-size: 165% 126%;
    min-height: 624px;
  }
}

@media (max-width: 529px) {
  .china-scroll .chin-lang {
    background-size: 204% 126%;
  }

  .china-scroll .chin-lang .title {
    margin-bottom: calc(10px + 10 * (100vw - 360px) / 169);
  }

  .china-scroll .chin-lang .title.title-last {
    margin-bottom: calc(15px + 10 * (100vw - 360px) / 169);
  }

  .china-scroll .rus-lang .title {
    margin-bottom: calc(10px + 10 * (100vw - 360px) / 169);
  }

  .china-scroll .rus-lang .title.title-last {
    margin-bottom: calc(15px + 10 * (100vw - 360px) / 169);
  }
}

@media (max-width: 429px) {
  .china-scroll .chin-lang {
    background-size: 255% 126%;
  }
}

.our-contacts .our-contacts__container {
  padding-top: 60px;
  padding-bottom: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.our-contacts .title {
  font-size: var(--font-size-52-26);
  font-weight: 700;
  line-height: 120%;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-black-text);
  margin-bottom: 15px;
}

.our-contacts .line--1 {
  border: 1px solid var(--color-decorated-text);
  background-color: var(--color-decorated-text);
  width: 150px;
  height: 3px;
  margin-bottom: var(--margin-60s-40);
}

.our-contacts .subtitle {
  font-size: var(--font-size-24-16);
  font-weight: 700;
  line-height: 120%;
  text-transform: uppercase;
  color: var(--color-black-text);
  margin-bottom: var(--margin-10sg-15);
}

.our-contacts .line--2,
.our-contacts .line--3 {
  border: 1px solid var(--color-decorated-text);
  width: 100px;
  height: 2px;
  margin-bottom: 20px;
}

.our-contacts .contacts {
  display: grid;
  grid-template-columns: auto auto 1fr;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: var(--margin-60s-40);
}

.our-contacts .contacts .telegram,
.our-contacts .contacts .viber,
.our-contacts .contacts .phone {
  gap: 10px;
}

.our-contacts .contacts .telegram img {
  width: 40px;
}

.our-contacts .contacts .viber img {
  width: 36px;
}

.our-contacts .contacts .phone img {
  width: 41px;
}

.our-contacts .contacts .telegram span,
.our-contacts .contacts .viber span {
  font-size: var(--font-size-29-16);
  font-weight: 400;
  color: var(--color-black-text);
}

.our-contacts .contacts .phone span {
  font-size: var(--font-size-33-18);
  font-weight: 400;
  color: var(--color-black-text);
}

.our-contacts .timetable {
  display: grid;
  grid-template-columns: 1fr 1fr;
  -webkit-column-gap: 69px;
  -moz-column-gap: 69px;
  column-gap: 69px;
  row-gap: 15px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: var(--margin-60s-30);
}

.our-contacts .timetable span {
  font-size: var(--font-size-24-16);
  font-weight: 400;
  line-height: 120%;
  color: var(--color-black-text);
}

.our-contacts .timetable span.time {
  justify-self: end;
}

.our-contacts .email {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
}

.our-contacts .email span {
  font-size: var(--font-size-33-18);
  font-weight: 400;
  color: var(--color-black-text);
}

.our-contacts .email img {
  width: 42px;
}

@media (max-width: 767px) {
  .our-contacts .our-contacts__container {
    padding-left: calc(20px + 10 * (100vw - 360px) / 407);
    padding-right: calc(20px + 10 * (100vw - 360px) / 407);
    padding-top: calc(40px + 20 * (100vw - 360px) / 407);
    padding-bottom: calc(30px + 70 * (100vw - 360px) / 407);
  }

  .our-contacts .contacts .telegram img {
    width: calc(24px + 16 * (100vw - 360px) / 407);
  }

  .our-contacts .contacts .viber img {
    width: calc(24px + 12 * (100vw - 360px) / 407);
  }

  .our-contacts .contacts .phone img {
    width: calc(26px + 15 * (100vw - 360px) / 407);
  }

  .our-contacts .title {
    margin-bottom: calc(10px + 5 * (100vw - 360px) / 407);
  }

  .our-contacts .email img {
    width: calc(34px + 8 * (100vw - 360px) / 407);
  }
}

@media (max-width: 549px) {
  .our-contacts .contacts {
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 10px;
  }

  .our-contacts .contacts .phone {
    grid-column: 1/3;
    grid-row: 2/3;
  }
}

.payments .payments__container {
  padding-left: 0;
  padding-right: 0;
}

.payments .page-title {
  font-size: var(--font-size-52-26);
  font-weight: 700;
  line-height: 120%;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-black-text);
  margin: 0 auto;
  margin-top: var(--margin-60-30);
  margin-bottom: 15px;
}

.payments .line {
  margin: 0 auto;
  border: 1px solid var(--color-decorated-text);
  background-color: var(--color-decorated-text);
  width: 150px;
  height: 3px;
  margin-bottom: var(--margin-40-30);
}

.payments .info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  margin-bottom: var(--margin-100-30);
}

.payments .info .title {
  font-size: var(--font-size-28-20);
  font-weight: 700;
  line-height: 120%;
  color: var(--color-black-text);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  margin-left: -20px;
}

.payments .info .title span:first-child {
  font-size: 96px;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-black-text);
}

.payments .info .title.title--1 {
  max-width: 466px;
  margin-bottom: 40px;
}

.payments .info .title.title--2 {
  max-width: 593px;
  margin-bottom: 84px;
}

.payments li {
  position: relative;
  margin-left: 45px;
}

.payments li::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  top: 0;
  left: 0;
  -webkit-transform: translate(-45px, 25%);
  -ms-transform: translate(-45px, 25%);
  transform: translate(-45px, 25%);
  background-color: var(--color-red-bg);
}

.payments .banks {
  background-color: var(--color-nav-bg);
  padding: 44px 60px 80px 80px;
}

.payments .erip {
  background-image: url("../images/payments/erip_bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 44px 60px 172px 80px;
}

.payments .erip li:first-child span {
  position: relative;
}

.payments .erip li:first-child img {
  position: absolute;
  bottom: -4px;
  left: calc(100% + 25px);
  width: 110px;
}

.payments ul {
  margin-bottom: 40px;
}

.payments li {
  font-size: var(--font-size-20-14);
  font-weight: 500;
  line-height: 120%;
}

.payments li span {
  font-weight: 700;
}

.payments li~li {
  margin-top: var(--margin-20s-15);
}

.payments p {
  font-size: var(--font-size-20-14);
  font-weight: 400;
  line-height: 120%;
  color: var(--color-black-text);
}

.payments p a {
  color: var(--color-decorated-text-3);
}

@media (max-width: 1919px) {
  .payments .banks {
    padding-left: calc(60px + 20 * (100vw - 1200px) / 719);
    padding-right: calc(30px + 30 * (100vw - 1200px) / 719);
    padding-top: calc(40px + 4 * (100vw - 1200px) / 719);
    padding-bottom: calc(40px + 40 * (100vw - 1200px) / 719);
  }

  .payments .erip {
    padding-left: calc(60px + 20 * (100vw - 1200px) / 719);
    padding-right: calc(30px + 30 * (100vw - 1200px) / 719);
    padding-top: calc(40px + 4 * (100vw - 1200px) / 719);
    padding-bottom: calc(40px + 40 * (100vw - 1200px) / 719);
  }

  .payments .erip li:first-child img {
    width: calc(37px + 73 * (100vw - 360px) / 1559);
    bottom: calc(3px + -4 * (100vw - 360px) / 1559);
  }

  .payments .info .title.title--2 {
    margin-bottom: calc(40px + 44 * (100vw - 1200px) / 719);
  }
}

@media (max-width: 1199px) {

  .payments .banks,
  .payments .erip {
    padding-left: 60px;
    padding-right: 30px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .payments .info .title.title--2 {
    margin-bottom: 40px;
  }
}

@media (max-width: 999px) {

  .payments .banks,
  .payments .erip {
    padding-left: calc(20px + 40 * (100vw - 360px) / 639);
  }

  .payments li {
    margin-left: calc(30px + 15 * (100vw - 360px) / 639);
  }

  .payments li::before {
    -webkit-transform: translate(calc(-30px + -15 * (100vw - 360px) / 639), 25%);
    -ms-transform: translate(calc(-30px + -15 * (100vw - 360px) / 639), 25%);
    transform: translate(calc(-30px + -15 * (100vw - 360px) / 639), 25%);
    top: calc(-4px + 4 * (100vw - 360px) / 639);
  }
}

@media (max-width: 767px) {
  .payments .info {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .payments .info .title {
    margin-left: 0;
  }

  .payments .info .title.title--2 {
    margin-bottom: var(--margin-40s-20);
  }

  .payments .banks,
  .payments .erip {
    /* padding-left: 60px; */
    padding-right: var(--padding-30s-20);
    padding-top: 40px;
    padding-bottom: var(--margin-40s-30);
  }

  .payments .banks ul {
    margin-bottom: var(--margin-40s-20);
  }

  .payments .erip ul {
    margin-bottom: 0;
  }
}

@media (max-width: 419px) {
  .payments .page-title {
    max-width: 320px;
  }
}

.pub-contract .pub-contract__container {
  padding-bottom: var(--margin-100-30);
}

.pub-contract .page-title {
  font-size: var(--font-size-52-26);
  font-weight: 700;
  line-height: 120%;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-black-text);
  margin-top: var(--margin-60-30);
  margin-bottom: 15px;
}

.pub-contract .line {
  border: 1px solid var(--color-decorated-text);
  background-color: var(--color-decorated-text);
  width: 150px;
  height: 3px;
  margin: 0 auto;
  margin-bottom: var(--margin-80-30);
}

.pub-contract .subtitle,
.pub-contract h2 {
  font-weight: 700;
  line-height: 120%;
  font-size: var(--font-size-20-14);
  color: var(--color-black-text);
  margin-bottom: var(--margin-28-20);
}

.pub-contract .text,
.pub-contract p {
  font-weight: 400;
  line-height: 120%;
  font-size: var(--font-size-20-14);
  color: var(--color-black-text);
}

.pub-contract .text+.subtitle,
.pub-contract p+h2 {
  margin-top: var(--font-size-52-36);
}

@media (max-width: 767px) {
  .pub-contract .pub-contract__container {
    padding-left: var(--padding-30s-20);
    padding-right: var(--padding-30s-20);
  }
}

.database .base-items {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  row-gap: 60px;
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  column-gap: 30px;
  margin-bottom: 100px;
}

.database .grid-line {
  position: absolute;
  top: 0px;
  bottom: 30px;
  width: 2px;
  background-color: var(--color-card-bg);
  z-index: 1;
}

.database .grid-line__column--1 {
  left: calc(25% - 9px);
}

.database .grid-line__column--2 {
  left: calc(50% - 2px);
}

.database .grid-line__column--3 {
  left: calc(75% + 6px);
}

.database .grid-line__column--4 {
  display: none;
}

.database .base-item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  border-bottom: 2px solid var(--color-card-bg);
}

.database .title {
  font-size: var(--font-size-52-26);
  font-weight: 700;
  line-height: 120%;
  text-transform: uppercase;
  color: var(--color-black-text);
  max-width: 548px;
  margin-top: var(--margin-60-30);
  margin-bottom: var(--margin-15-10);
}

.database .line {
  border: 1px solid var(--color-decorated-text);
  width: 150px;
  height: 3px;
  background-color: var(--color-decorated-text);
  margin-bottom: var(--margin-40-30);
}

.database .partition {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  margin-bottom: 13px;
  border-radius: 53px;
  padding: 2px 20px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  background-color: var(--color-form-bg);
  font-size: var(--font-size-16-14);
  font-weight: 500;
  text-align: center;
  color: var(--color-white-text);
}

.database .work-type {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  margin-bottom: 15px;
  border-radius: 53px;
  padding: 2px 20px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  background-color: var(--color-decorated-text);
  font-size: var(--font-size-16-14);
  font-weight: 500;
  text-align: center;
  color: var(--color-white-text);
}

.database .work-title {
  -webkit-box-flex: 2;
  -ms-flex-positive: 2;
  flex-grow: 2;
  font-size: var(--font-size-16-14);
  font-weight: 700;
  color: var(--color-black-text);
  max-width: 443px;
  margin-bottom: 27px;
}

.database .download__btn {
  font-size: var(--font-size-20-16);
  font-weight: 500;
  text-align: center;
  color: var(--color-red-text);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  gap: 5px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 30px;
}

.database .download__btn:hover {
  opacity: 0.7;
}

@media (max-width: 1919px) {
  .database .base-items {
    margin-bottom: calc(30px + 70 * (100vw - 360px) / 1559);
  }

  .database .base-items {
    row-gap: calc(20px + 40 * (100vw - 360px) / 1559);
  }
}

@media (max-width: 1549px) {
  .database .grid-line__column--1 {
    left: calc(33.333% - 6px);
  }

  .database .grid-line__column--2 {
    left: calc(66.666% + 3px);
  }

  .database .grid-line__column--3 {
    display: none;
  }
}

@media (max-width: 1169px) {
  .database .grid-line__column--1 {
    left: 50%;
  }

  .database .grid-line__column--2 {
    display: none;
  }
}

@media (max-width: 789px) {
  .database .grid-line__column--1 {
    display: none;
  }

  .database .partition,
  .database .work-type {
    width: 320px;
  }

  .database .work-title {
    max-width: none;
  }
}

@media (max-width: 619px) {
  .database .database__container {
    padding-left: calc(20px + 10 * (100vw - 360px) / 259);
    padding-right: calc(20px + 10 * (100vw - 360px) / 259);
  }

  .database .work-title {
    max-width: calc(320px + 240 * (100vw - 360px) / 259);
    margin-bottom: calc(15px + 12 * (100vw - 360px) / 259);
  }

  .database .partition {
    margin-bottom: calc(7px + 6 * (100vw - 360px) / 259);
  }

  .database .work-type {
    margin-bottom: calc(10px + 5 * (100vw - 360px) / 259);
  }

  .database .download__btn {
    margin-bottom: calc(10px + 20 * (100vw - 360px) / 259);
  }
}

.not-breakable-space {
  display: none;
}

.buttons {
  display: grid;
  max-width: 530px;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.red-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  max-width: 250px;
  height: 50px;
  background-color: var(--color-red-bg);
  border-radius: 25px;
}

.red-btn span {
  font-size: var(--font-size-20-16);
  font-weight: 500;
  color: var(--color-white-text);
}

@media (hover: hover) {
  .red-btn:hover {
    opacity: 0.7;
  }
}

@media (hover: none) {
  .red-btn:active {
    opacity: 0.7;
  }
}

.red-border-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  max-width: 250px;
  height: 50px;
  background-color: transparent;
  border-radius: 53px;
  border: 2px solid var(--color-red-bg);
}

.red-border-btn span {
  font-size: var(--font-size-20-16);
  font-weight: 500;
  color: var(--color-black-text);
}

@media (hover: hover) {
  .red-border-btn:hover {
    opacity: 0.7;
  }
}

@media (hover: none) {
  .red-border-btn:active {
    opacity: 0.7;
  }
}

.work-card {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding-top: 93px;
  padding-right: 0;
  padding-bottom: 33px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: var(--padding-60-30);
  background-color: var(--color-card-bg);
}

.work-card .info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  /* align-items: start; */
}

.work-card .title {
  max-width: 315px;
  font-size: var(--font-size-48-22);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-black-title);
  margin-bottom: 10px;
}

.work-card .line {
  width: 200px;
  border: 2px solid var(--color-decorated-text);
  margin-bottom: 27px;
}

.work-card .text {
  -webkit-box-flex: 2;
  -ms-flex-positive: 2;
  flex-grow: 2;
  font-size: var(--font-size-20-14);
  font-weight: 400;
  line-height: 120%;
  color: var(--color-black-text);
}

/* До поры скрываем альтернативную надпись на кнопках */
[class*=-btn] span:last-child {
  display: none;
}

.banner {
  margin-bottom: 40px;
  background-image: linear-gradient(135deg, #7097b0 0%, #86b3d0 100%);
}

.banner__container {
  height: 600px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.banner .image {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.banner .info {
  width: 1243px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 80px 180px 0px 84px;
}

.banner .info .title {
  margin-bottom: 40px;
  width: 100%;
}

.banner .info .title h1 {
  /* font-size: var(--font-size-48-32); */
  font-size: 48px;
  font-weight: 400;
  line-height: 120%;
  color: var(--color-white-text);
}

.banner .checked-lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 904px;
  margin-bottom: 68px;
}

.banner .checked-lists li {
  font-size: 24px;
  font-weight: 400;
  color: var(--color-white-text);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  gap: 10px;
}

.welcome {
  margin-bottom: 30px;
}

.welcome .welcome__container {
  padding: 0 0;
}

.welcome__container {
  width: 100%;
  max-width: 700px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.welcome .left-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  padding-left: 50px;
  padding-bottom: 63px;
}

.welcome .left-column .title {
  max-width: 470px;
  margin-bottom: 20px;
  font-size: var(--font-size-42-24);
  font-weight: 700;
  line-height: 120%;
  text-transform: uppercase;
  color: var(--color-black-text);
}

.welcome .left-column .subtitle {
  max-width: 774px;
  font-size: var(--font-size-26-18);
  font-weight: 600;
  line-height: 120%;
  color: var(--color-black-text);
}

.welcome .left-column .subtitle:first-of-type {
  margin-bottom: 40px;
}

.welcome .left-column p {
  font-size: var(--font-size-20-14);
  font-weight: 400;
  line-height: 120%;
  color: var(--color-black-text);
}

.welcome .left-column p:first-of-type {
  margin-bottom: 60px;
}

.welcome .left-column p:not(:first-of-type) {
  margin-top: 20px;
}

.welcome .left-column p span {
  font-size: var(--font-size-20-14);
  font-weight: 600;
  line-height: 120%;
  color: var(--color-decorated-text);
}

.welcome .work-card .line {
  margin-bottom: 50px;
}

.welcome .work-card .text {
  max-width: 556px;
  margin-bottom: 60px;
}

.welcome .image {
  position: relative;
  top: -40px;
}

.cards {
  margin-bottom: var(--margin-60-30);
}

.cards .cards__container {
  padding: 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 30px;
}

.two-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.two-cards .work-card {
  min-height: 335px;
  padding: 20px 40px 53px;
}

.two-cards .work-card .title {
  max-width: 100%;
  font-size: var(--font-size-40-22);
}

.three-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}

.three-cards .work-card {
  min-height: 383px;
  padding: 47px 30px 30px;
}

.three-cards .work-card .title {
  font-size: var(--font-size-40-22);
  max-width: 100%;
}

.three-cards .bg-image {
  background-image: url("../images/main/ok_boy.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.four-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 30px;
}

.four-cards .work-card {
  min-height: 380px;
  padding: 20px 30px 30px;
}

.four-cards .work-card .title {
  font-size: var(--font-size-32-22);
  max-width: 215px;
}

.four-cards .bg-image {
  padding: 0;
  background: -webkit-gradient(linear, left top, right top, from(#dddee2), to(#e3e4e8));
  background: linear-gradient(90deg, #dddee2 0%, #e3e4e8 100%);
  /* background-color: linear-gradient(90deg, #dddee2 0%, #e3e4e8 100%); */
}

.four-cards .bg-image img {
  max-width: none;
  height: 100%;
  width: auto;
}

.four-cards .work-card__img {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.question {
  margin-bottom: 122px;
}

.question .question__container {
  background-color: var(--color-form-bg);
  padding-top: var(--padding-60-30);
  padding-bottom: var(--padding-60-30);
}

.question .title {
  font-size: var(--font-size-48-28);
  font-weight: 700;
  color: var(--color-white-text);
  margin-bottom: 8px;
}

.question .line {
  border: 2px solid var(--color-decorated-text);
  width: 150px;
  height: 0px;
  margin-bottom: 30px;
}

.question .request-form {
  display: grid;
  grid-template-columns: 250px 250px 1fr;
  gap: 30px;
  margin-bottom: 30px;
  /* Позиционируем asterisk относительно label */
  /* Абсолютное позиционирование asterisk-а */
  /* Если внутри label-а input в фокусе, то asterisk скрываем */
}

.question .request-form label {
  position: relative;
}

.question .request-form .asterisk {
  position: absolute;
  top: 10px;
  left: 170px;
  z-index: 10;
  color: var(--color-red-text);
  font-size: 16px;
}

.question .request-form label:has(input:focus) .asterisk {
  display: none;
}

.question .request-form input,
.question .request-form textarea {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-black-text);
}

.question .request-form input::-webkit-input-placeholder,
.question .request-form textarea::-webkit-input-placeholder {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray-text);
}

.question .request-form input::-moz-placeholder,
.question .request-form textarea::-moz-placeholder {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray-text);
}

.question .request-form input:-ms-input-placeholder,
.question .request-form textarea:-ms-input-placeholder {
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray-text);
}

.question .request-form input::-ms-input-placeholder,
.question .request-form textarea::-ms-input-placeholder {
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray-text);
}

.question .request-form input::placeholder,
.question .request-form textarea::placeholder {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray-text);
}

.question .request-form input:focus::-webkit-input-placeholder,
.question .request-form textarea:focus::-webkit-input-placeholder {
  color: transparent;
}

.question .request-form input:focus::-moz-placeholder,
.question .request-form textarea:focus::-moz-placeholder {
  color: transparent;
}

.question .request-form input:focus:-ms-input-placeholder,
.question .request-form textarea:focus:-ms-input-placeholder {
  color: transparent;
}

.question .request-form input:focus::-ms-input-placeholder,
.question .request-form textarea:focus::-ms-input-placeholder {
  color: transparent;
}

.question .request-form input:focus::placeholder,
.question .request-form textarea:focus::placeholder {
  color: transparent;
}

.question .request-form textarea {
  padding-top: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.question .request-form__name,
.question .request-form__phone,
.question .request-form__question {
  width: 100%;
  height: 50px;
  border-radius: 8px;
  border: none;
}

.question .form-result {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.question .remark {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-white-text);
}

.question .remark a {
  color: #307ecc;
  display: inline-block;
  vertical-align: middle;
}

.question .red-btn.no-switch {
  justify-self: end;
  margin-bottom: 4px;
}

.works-base {
  position: relative;
  margin-bottom: var(--margin-60-30);
}

.works-base .works-base__container {
  background-color: var(--color-yelow-bg);
  padding-top: 80px;
  padding-right: 121px;
  padding-bottom: 109px;
  padding-left: 188px;
}

.works-base .info {
  width: 675px;
}

.works-base .info .title {
  font-size: var(--font-size-48-28);
  font-weight: 700;
  line-height: 120%;
  color: var(--color-red-bg);
}

.works-base .info .title:nth-child(3) {
  margin-bottom: 15px;
}

.works-base .info .line {
  border: 1px solid var(--color-white-text);
  width: 150px;
  height: 3px;
  background-color: var(--color-white-bg);
  margin-bottom: 30px;
}

.works-base .info .text {
  font-size: var(--font-size-24-16);
  font-weight: 400;
  line-height: 136%;
  color: var(--color-white-text);
  margin-bottom: 60px;
}

.works-base .info .red-btn {
  background-color: var(--color-black-btn-bg);
}

.works-base .info .red-border-btn {
  border-color: var(--color-black-btn-bg);
}

.works-base .image {
  position: absolute;
  right: calc((100vw - 1920px) / 2 + 121px);
  max-width: 783px;
  top: -42px;
  width: 40.7%;
}

.works-base .image img {
  width: 100%;
}

.works-base .image.pos-static {
  display: none;
}

.advantages {
  margin-bottom: var(--margin-40-30);
}

.advantages .advantages__container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 30px;
  background-color: var(--color-grey-bg);
  padding: var(--padding-40-30) 30px;
}

.advantages .advantage {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.advantages .image {
  margin-bottom: var(--margin-20-10);
}

.advantages .title {
  font-size: var(--font-size-18-16);
  font-weight: 700;
  color: var(--color-black-text);
  margin-bottom: var(--margin-15-10);
  text-align: center;
}

.advantages .line {
  border: 1px solid var(--color-red-bg);
  background-color: var(--color-red-bg);
  width: 150px;
  height: 3px;
  margin-bottom: var(--margin-30-15);
}

.advantages .text {
  font-size: var(--font-size-16-14);
  font-weight: 400;
  color: var(--color-black-text);
  text-align: center;
}

.do-now .do-now__container {
  background-color: var(--color-decorated-text);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 30px;
  padding: 43px 150px 0 200px;
}

.do-now .info {
  padding-top: 37px;
}

.do-now .title {
  font-size: var(--font-size-48-22);
  font-weight: 700;
  line-height: 120%;
  max-width: 791px;
  color: var(--color-white-text);
  margin-bottom: 20px;
}

.do-now .line {
  border: 1px solid var(--color-white-text);
  background-color: var(--color-white-text);
  width: 150px;
  height: 3px;
  margin-bottom: 40px;
}

.do-now .text {
  font-size: var(--font-size-36-16);
  font-weight: 400;
  color: var(--color-white-text);
  max-width: 725px;
  margin-bottom: 60px;
}

.do-now .buttons {
  margin-bottom: 60px;
}

.do-now .red-btn {
  background-color: var(--color-black-btn-bg);
}

.do-now .red-border-btn {
  border-color: var(--color-black-btn-bg);
  gap: 10px;
}

.do-now .slogans {
  padding-left: 18px;
  border-left: 5px solid var(--color-red-text);
  /* background-color: var(--color-red-text); */
  /* width: 112px; */
}

.do-now .slogans .slogan {
  font-size: var(--font-size-36-26);
  font-weight: 500;
  line-height: 120%;
  text-transform: uppercase;
  color: var(--color-red-text);
}

.do-now .image {
  -ms-flex-item-align: end;
  align-self: flex-end;
}

/* Медиа-запросы для DO-NOW */
@media (max-width: 1919px) {
  .do-now .do-now__container {
    padding-top: calc(30px + 13 * (100vw - 1200px) / 719);
    padding-left: calc(50px + 150 * (100vw - 1200px) / 719);
    padding-right: calc(50px + 100 * (100vw - 1200px) / 719);
  }

  .do-now .info {
    padding-top: calc(30px + 7 * (100vw - 1200px) / 719);
  }

  .do-now .title {
    margin-bottom: calc(15px + 5 * (100vw - 1200px) / 719);
  }

  .do-now .line {
    margin-bottom: calc(30px + 10 * (100vw - 1200px) / 719);
  }

  .do-now .text {
    margin-bottom: calc(40px + 20 * (100vw - 1200px) / 719);
  }
}

@media (max-width: 1399px) {
  .do-now .image {
    width: 502px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
}

@media (max-width: 1199px) {
  .do-now .do-now__container {
    padding-left: calc(30px + 20 * (100vw - 1000px) / 199);
    padding-right: calc(30px + 20 * (100vw - 1000px) / 199);
  }
}

@media (max-width: 1049px) {
  .do-now .info {
    /* padding-top: 0px; */
    padding-bottom: 30px;
  }

  .do-now .buttons {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 40px;
  }
}

@media (max-width: 999px) {
  .do-now .do-now__container {
    padding-left: 30px;
    padding-right: 30px;
    gap: calc(15px + 15 * (100vw - 850px) / 149);
  }

  .do-now .image {
    width: calc(380px + 122 * (100vw - 772px) / 227);
  }

  .do-now .image img {
    width: 100%;
  }
}

@media (max-width: 849px) {
  .do-now .do-now__container {
    padding-top: 30px;
  }

  .do-now .info {
    padding-top: 0px;
    /* padding-bottom: 30px; */
  }

  .do-now .buttons {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 40px;
  }
}

@media (max-width: 772px) {
  .do-now .do-now__container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: calc(20px + 10 * (100vw - 650px) / 122);
    padding-right: calc(20px + 10 * (100vw - 650px) / 122);
  }

  .do-now .title {
    max-width: 480px;
  }

  .do-now .text {
    max-width: 480px;
    margin-bottom: 30px;
  }

  .do-now .buttons {
    margin-left: 0;
    margin-right: 0;
  }

  .do-now .image {
    margin-top: calc(-140px + -160 * (100vw - 650px) / 122);
    width: calc(290px + 90 * (100vw - 580px) / 192);
  }
}

@media (max-width: 649px) {
  .do-now .do-now__container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .do-now .image {
    margin-top: -140px;
    -ms-flex-item-align: end;
    align-self: flex-end;
  }
}

@media (max-width: 439px) {
  .do-now .info {
    padding-bottom: 20px;
  }

  .do-now .title {
    margin-bottom: 12px;
  }

  .do-now .line {
    margin-bottom: 20px;
  }

  .do-now .image {
    margin-top: 0px;
    -ms-flex-item-align: center;
    align-self: center;
    width: calc(180px + 45 * (100vw - 360px) / 79);
    min-width: 180px;
  }

  .do-now .breakable-space {
    display: none;
  }

  .do-now .not-breakable-space {
    display: inline-block;
  }
}

/* Медиа-запросы для ADVANTAGES */
@media (max-width: 767px) {
  .advantages .advantages__container {
    padding-left: calc(20px + 10 * (100vw - 360px) / 407);
    padding-right: calc(20px + 10 * (100vw - 360px) / 407);
    row-gap: calc(40px + -10 * (100vw - 360px) / 407);
  }
}

/* Медиа-запросы для WORKS-BASE */
@media (max-width: 1899px) {
  .works-base .works-base__container {
    padding-top: calc(60px + 20 * (100vw - 1200px) / 699);
    padding-left: calc(50px + 138 * (100vw - 1200px) / 699);
    padding-right: calc(50px + 71 * (100vw - 1200px) / 699);
    padding-bottom: calc(60px + 49 * (100vw - 1200px) / 699);
  }

  .works-base .info {
    width: calc(635px + 40 * (100vw - 1200px) / 699);
  }

  .works-base .image {
    right: calc(50px + 71 * (100vw - 1200px) / 699);
  }
}

@media (max-width: 1199px) {
  .works-base .works-base__container {
    padding-top: 60px;
    padding-left: calc(30px + 20 * (100vw - 1100px) / 99);
    padding-right: calc(30px + 20 * (100vw - 1100px) / 99);
    padding-bottom: 60px;
  }

  .works-base .info {
    width: calc(575px + 60 * (100vw - 1100px) / 99);
  }

  .works-base .image {
    right: calc(30px + 20 * (100vw - 1100px) / 99);
    top: calc(50px + -92 * (100vw - 1100px) / 99);
  }
}

@media (max-width: 1099px) {
  .works-base .works-base__container {
    padding-left: 30px;
    padding-right: 30px;
  }

  .works-base .image {
    right: 30px;
    top: 50px;
  }

  .works-base .image.pos-absolute {
    display: none;
  }

  .works-base .image.pos-static {
    display: block;
  }
}

@media (max-width: 767px) {
  .works-base .works-base__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 30px;
    padding: calc(20px + 40 * (100vw - 360px) / 407) calc(20px + 10 * (100vw - 360px) / 407) 0;
  }

  .works-base .info {
    width: 100%;
  }

  .works-base .info .line {
    margin-bottom: calc(20px + 10 * (100vw - 360px) / 407);
  }

  .works-base .info .text {
    margin-bottom: calc(25px + 35 * (100vw - 360px) / 407);
  }

  .works-base .image {
    position: static;
    -ms-flex-item-align: center;
    align-self: center;
    min-width: 180px;
  }

  .works-base .red-btn.switch {
    width: calc(127px + 123 * (100vw - 360px) / 407);
  }

  .works-base .red-border-btn.switch {
    width: calc(166px + 84 * (100vw - 360px) / 407);
  }
}

/* Медиа-запросы для QUESTION */
@media (max-width: 1919px) {
  .question {
    margin-bottom: calc(30px + 92 * (100vw - 767px) / 1152);
  }
}

@media (max-width: 992px) {
  .question .request-form {
    grid-template-columns: 250px 250px 1fr;
    grid-template-rows: auto auto;
  }

  .question .request-form label:first-child {
    grid-column: 1/2;
    grid-row: 1/2;
  }

  .question .request-form label:last-child {
    grid-column: 2/3;
    grid-row: 1/2;
  }

  .question .request-form textarea {
    grid-column: 1/4;
    grid-row: 2/3;
  }
}

@media (max-width: 767px) {
  .question {
    margin-bottom: 30px;
  }

  .question .question__container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .question .line {
    margin-bottom: calc(20px + 10 * (100vw - 360px) / 407);
  }

  .question .request-form {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 10px;
    margin-bottom: 10px;
  }

  .question .request-form label:first-child {
    grid-column: 1/2;
    grid-row: 1/2;
    width: 320px;
  }

  .question .request-form label:last-of-type {
    grid-column: 1/2;
    grid-row: 2/3;
    width: 320px;
  }

  .question .request-form .asterisk {
    left: calc(151px + 19 * (100vw - 360px) / 407);
    top: calc(6px + 4 * (100vw - 360px) / 407);
  }

  .question .request-form textarea {
    grid-column: 1/2;
    grid-row: 3/4;
    padding-top: calc(10px + 4 * (100vw - 360px) / 407);
  }

  .question .request-form input,
  .question .request-form textarea {
    font-size: calc(14px + 2 * (100vw - 360px) / 407);
  }

  .question .request-form input::-webkit-input-placeholder,
  .question .request-form textarea::-webkit-input-placeholder {
    font-size: calc(14px + 2 * (100vw - 360px) / 407);
  }

  .question .request-form input::-moz-placeholder,
  .question .request-form textarea::-moz-placeholder {
    font-size: calc(14px + 2 * (100vw - 360px) / 407);
  }

  .question .request-form input:-ms-input-placeholder,
  .question .request-form textarea:-ms-input-placeholder {
    font-size: calc(14px + 2 * (100vw - 360px) / 407);
  }

  .question .request-form input::-ms-input-placeholder,
  .question .request-form textarea::-ms-input-placeholder {
    font-size: calc(14px + 2 * (100vw - 360px) / 407);
  }

  .question .request-form input::placeholder,
  .question .request-form textarea::placeholder {
    font-size: calc(14px + 2 * (100vw - 360px) / 407);
  }

  .question .request-form input:focus::-webkit-input-placeholder,
  .question .request-form textarea:focus::-webkit-input-placeholder {
    color: transparent;
  }

  .question .request-form input:focus::-moz-placeholder,
  .question .request-form textarea:focus::-moz-placeholder {
    color: transparent;
  }

  .question .request-form input:focus:-ms-input-placeholder,
  .question .request-form textarea:focus:-ms-input-placeholder {
    color: transparent;
  }

  .question .request-form input:focus::-ms-input-placeholder,
  .question .request-form textarea:focus::-ms-input-placeholder {
    color: transparent;
  }

  .question .request-form input:focus::placeholder,
  .question .request-form textarea:focus::placeholder {
    color: transparent;
  }

  .question .request-form__name,
  .question .request-form__phone,
  .question .request-form__question {
    height: calc(40px + 10 * (100vw - 360px) / 407);
  }

  .question .form-result {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 30px;
  }
}

@media (max-width: 490px) {
  .question .red-btn.no-switch {
    justify-self: center;
  }
}

/* ----------------------------- */
/* Медиа-запросы для CARDS */
@media (max-width: 1675px) {
  .four-cards {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .four-cards .bg-image {
    grid-column: 1/4;
    grid-row: 2/3;
    overflow: hidden;
  }
}

@media (max-width: 1199px) {
  .three-cards {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .three-cards .work-card {
    min-height: 335px;
    padding: 47px 30px 30px;
  }

  .three-cards .work-card:first-child {
    grid-column: 1/2;
    -webkit-transform: translateX(calc(50% + 15px));
    -ms-transform: translateX(calc(50% + 15px));
    transform: translateX(calc(50% + 15px));
  }

  .three-cards .work-card:nth-child(2) {
    grid-column: 1/2;
  }

  .four-cards {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .four-cards .work-card {
    min-height: 335px;
  }

  .four-cards .bg-image {
    grid-column: 2/3;
    grid-row: 2/3;
    overflow: hidden;
    height: 335px;
  }
}

@media (max-width: 849px) {
  .cards .two-cards {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .two-cards .work-card {
    min-height: 285px;
  }

  .three-cards .work-card {
    min-height: 285px;
  }

  .three-cards .work-card:first-child {
    grid-column: 1/3;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  .three-cards .work-card:nth-child(2) {
    grid-column: 1/3;
    height: auto;
  }

  .three-cards .work-card:last-child {
    grid-column: 1/3;
    height: auto;
  }

  .three-cards .bg-image {
    width: 360px;
    justify-self: center;
  }

  .four-cards {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }

  .four-cards .work-card {
    min-height: 285px;
  }

  .four-cards .work-card:first-child {
    grid-column: 1/2;
    grid-row: 1/2;
  }

  .four-cards .work-card:nth-child(2) {
    grid-column: 1/2;
    grid-row: 2/3;
  }

  .four-cards .work-card:nth-child(3) {
    grid-column: 1/2;
    grid-row: 3/4;
  }

  .four-cards .work-card:last-child {
    grid-column: 1/2;
    grid-row: 4/5;
  }
}

@media (max-width: 767px) {
  .four-cards .work-card {
    min-height: 289px;
  }

  .four-cards .bg-image {
    grid-column: 2/3;
    grid-row: 2/3;
    overflow: hidden;
    height: calc(289px + 46 * (100vw - 360px) / 407);
  }
}

/* ----------------------------- */
/* Медиа-запросы для WELCOM */
@media (max-width: 1919px) {
  .welcome .left-column {
    padding-left: calc(30px + 20 * (100vw - 767px) / 1152);
  }

  .welcome .red-btn span {
    font-size: calc(16px + 4 * (100vw - 1199px) / 720);
  }

  .welcome .red-border-btn span {
    font-size: calc(16px + 4 * (100vw - 1199px) / 720);
  }

  .welcome .work-card {
    padding-top: calc(20px + 73 * (100vw - 360px) / 1559);
  }
}

@media (max-width: 1450px) {
  .welcome .left-column {
    padding-bottom: 20px;
  }

  .welcome .left-column .subtitle:first-of-type {
    margin-bottom: calc(30px + 10 * (100vw - 849px) / 601);
  }

  .welcome .left-column p:first-of-type {
    margin-bottom: calc(30px + 30 * (100vw - 849px) / 601);
  }
}

@media (max-width: 1199px) {
  .welcome .buttons {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 849px) {
  .welcome__container {
    grid-template-columns: 1fr;
  }

  .welcome .left-column {
    padding-right: 20px;
  }
}

@media (max-width: 767px) {

  .welcome .work-card,
  .cards .work-card {
    padding: 20px;
  }

  .work-card .title {
    max-width: 210px;
  }

  .work-card .line {
    margin-bottom: calc(20px + 30 * (100vw - 360px) / 407);
  }

  .work-card .text {
    margin-bottom: calc(20px + 40 * (100vw - 360px) / 407);
  }

  .welcome {
    margin-bottom: 10px;
  }

  .welcome__container {
    padding: 0 0px;
    gap: calc(20px + 10 * (100vw - 360px) / 407);
  }

  .welcome .left-column {
    padding: 0 20px calc(0px + 20 * (100vw - 360px) / 407);
    /* padding-right: 20px; */
    /* padding-bottom: calc(0px + (20 - 0) * ((100vw - 360px) / (767 - 360))); */
  }

  .welcome .left-column .title {
    margin-bottom: calc(15px + 5 * (100vw - 360px) / 407);
  }

  .welcome .left-column .subtitle:first-of-type {
    margin-bottom: calc(20px + 8.6 * (100vw - 360px) / 407);
  }

  .welcome .left-column p:first-of-type {
    margin-bottom: calc(20px + -4 * (100vw - 360px) / 407);
  }

  .welcome .left-column p:not(:first-of-type) {
    margin-top: calc(10px + 10 * (100vw - 360px) / 407);
  }

  .welcome .right-column {
    padding: 0px 0;
  }

  .welcome .image {
    display: none;
  }

  .welcome .info {
    width: 100%;
  }

  .welcome .info .line {
    margin-bottom: calc(20px + 30 * (100vw - 360px) / 407);
  }

  .welcome .info .text {
    max-width: 100%;
    margin-bottom: calc(20px + 40 * (100vw - 360px) / 407);
  }

  .welcome .work-card {
    min-height: calc(255px + 30 * (100vw - 360px) / 407);
  }

  .welcome .buttons {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .cards .cards__container {
    gap: 10px;
  }

  .cards .two-cards,
  .cards .three-cards,
  .cards .four-cards {
    gap: 10px;
  }

  .cards .bg-image {
    padding: 0 20px;
  }

  .two-cards .work-card {
    min-height: calc(255px + 30 * (100vw - 360px) / 407);
  }

  .three-cards .work-card {
    min-height: calc(255px + 30 * (100vw - 360px) / 407);
  }

  .four-cards .work-card {
    min-height: calc(255px + 30 * (100vw - 360px) / 407);
  }
}

/* ------------------------- */
/* Медиа-запросы для BANNER */
@media (max-width: 1919px) {
  .banner .image {
    width: calc(380px + 121 * (100vw - 1399px) / 520);
  }

  .banner .info {
    padding-right: calc(20px + 160 * (100vw - 1399px) / 520);
    padding-left: calc(20px + 64 * (100vw - 1399px) / 520);
    padding-top: calc(30px + 50 * (100vw - 1150px) / 769);
  }

  .banner .info .title {
    margin-bottom: calc(30px + 10 * (100vw - 1150px) / 769);
  }

  .banner .info .title h1 {
    font-size: calc(36px + 12 * (100vw - 1150px) / 769);
  }

  .banner .checked-lists {
    max-width: calc(630px + 274 * (100vw - 1070px) / 769);
  }

  .banner .checked-lists li {
    font-size: calc(18px + 6 * (100vw - 1150px) / 769);
  }

  .banner .red-btn span {
    font-size: calc(16px + 4 * (100vw - 1250px) / 669);
  }

  .banner .red-border-btn span {
    font-size: calc(16px + 4 * (100vw - 1250px) / 669);
  }
}

@media (max-width: 1399px) {
  .banner .image {
    /* flex-shrink: 1; */
    width: 380px;
  }
}

@media (max-width: 1150px) {
  .banner .banner__container {
    padding: 0 calc(20px + 10 * (100vw - 767px) / 383);
  }

  .banner .image {
    width: calc(264px + 116 * (100vw - 767px) / 383);
  }

  .banner .info {
    padding-top: calc(20px + 10 * (100vw - 767px) / 383);
  }

  .banner .info .title h1 {
    font-size: calc(28px + 8 * (100vw - 767px) / 383);
  }

  .banner .checked-lists {
    /* max-width: none; */
    max-width: 659px;
    gap: 20px;
    margin-bottom: calc(5px + 63 * (100vw - 767px) / 383);
  }

  .banner .checked-lists li {
    font-size: calc(16px + 2 * (100vw - 767px) / 383);
  }

  .banner .checked-lists--left {
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
}

@media (max-width: 767px) {
  .banner {
    margin-bottom: calc(30px + 10 * (100vw - 360px) / 407);
  }

  .banner .banner__container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    padding: 0 20px;
  }

  .banner .info {
    width: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 30px;
  }

  .banner .info .title {
    width: 100%;
    margin-bottom: 30px;
  }

  .banner .info .title h1 {
    text-align: center;
  }

  .banner .checked-lists {
    width: 100%;
    margin-bottom: 30px;
  }

  .banner .image {
    -ms-flex-item-align: center;
    align-self: center;
  }

  .banner .red-btn {
    -ms-flex-item-align: end;
    align-self: flex-end;
  }
}

@media (max-width: 490px) {
  .banner .image {
    max-width: none;
    width: 180px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }

  .banner .checked-lists {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0;
  }

  .banner .red-btn.no-switch {
    -ms-flex-item-align: center;
    align-self: center;
  }
}

@media (max-width: 379px) {
  .not-breakable-space {
    display: block;
  }

  .breakable-space {
    display: none;
  }
}

/* --------------------- */
/* Общие */
@media (max-width: 1199px) {
  .buttons .red-btn span {
    font-size: 16px;
  }

  .buttons .red-border-btn span {
    font-size: 16px;
  }
}

@media (max-width: 1150px) {
  [class*=-btn] {
    height: calc(40px + 10 * (100vw - 767px) / 383);
    border-radius: calc(20px + 5 * (100vw - 767px) / 383);
  }

  .red-btn.no-switch {
    width: calc(180px + 70 * (100vw - 767px) / 383);
  }
}

@media (max-width: 849px) {
  .red-btn.no-switch {
    /* width: 180px; */
    width: 250px;
    height: 40px;
    border-radius: 20px;
    margin-bottom: 10px;
  }
}

@media (max-width: 767px) {
  .buttons {
    grid-template-columns: 1fr 1fr;
    gap: calc(10px + 20 * (100vw - 360px) / 407);
    max-width: calc(290px + 240 * (100vw - 360px) / 407);
    width: 100%;
    margin: 0 auto;
  }

  [class*=-btn] {
    height: 40px;
    border-radius: 53px;
  }

  .red-btn.no-switch {
    width: calc(180px + 70 * (100vw - 360px) / 407);
    height: 40px;
    border-radius: 20px;
    margin-bottom: 10px;
  }
}

/* --------------------- */
.footer {
  background-color: var(--color-black-bg);
}

.footer .footer__container {
  width: 100%;
  padding-top: 60px;
  padding-bottom: 30px;
}

.footer__grid {
  display: grid;
  grid-template-columns: calc(25% + 20px) 1fr 1fr 1fr;
  margin-bottom: 12px;
  /* Первая колонка */
  /* Вторая, третья и четвёртая колонка */
  /* Прячем "хвост", который появится позже для имитации объединения колонок  */
}

.footer__grid .first__column .policy {
  visibility: hidden;
}

.footer__grid .first__column .policy span {
  color: var(--color-gray-text);
}

.footer__grid span {
  color: var(--color-white-text);
  font-size: 16px;
  font-weight: 400;
}

.footer__grid .logo {
  margin-bottom: 50px;
}

.footer__grid .socials {
  margin-bottom: 20px;
}

.footer__grid .phone,
.footer__grid .mail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 9px;
  margin-bottom: 5px;
}

.footer__grid .ie,
.footer__grid .address {
  margin-bottom: 4px;
}

.footer__grid .phone span {
  font-size: 18px;
}

.footer__grid .list-tail {
  display: none;
}

.footer__grid li>span {
  display: inline-block;
  font-size: 20px;
  font-weight: 300;
  color: var(--color-gray-text);
  margin-bottom: 12px;
}

.footer__grid li>a {
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-white-text);
  margin-bottom: 8px;
}

.footer__grid li>a:hover {
  opacity: 0.7;
}

.footer__grid a:hover {
  cursor: pointer;
  opacity: 0.7;
}

.footer__grid--bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.footer__grid--bottom a {
  /* display: inline-block; */
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--color-gray-text);
  font-weight: 400;
}

.footer__grid--bottom a:first-child {
  font-size: 16px;
}

.footer__grid--bottom a:first-child:hover {
  cursor: pointer;
  opacity: 0.7;
}

.footer__grid--bottom a:last-child {
  font-size: 20px;
  /* Сдвигаем на половину длины текста */
  -webkit-transform: translateX(-85px);
  -ms-transform: translateX(-85px);
  transform: translateX(-85px);
}

@media (max-width: 1199px) {
  .footer__grid {
    grid-template-columns: 300px 1fr 1fr 1fr;
  }

  .footer .footer__container {
    padding-top: calc(30px + 30 * (100vw - 360px) / 839);
    padding-bottom: calc(15px + 15 * (100vw - 360px) / 839);
  }
}

@media (max-width: 950px) {
  .footer {
    --footer-first-column: calc(300px + (350 - 300) * ((100vw - 768px) / (950 - 768)));
  }

  .footer__grid {
    grid-template-columns: var(--footer-first-column) 1fr 1fr;
    grid-template-rows: repeat(1, auto);
  }

  .footer__grid .list-tail {
    display: block;
  }

  .footer .fourth__column {
    display: none;
  }

  .footer .fourth__column li:first-child {
    display: none;
  }
}

@media (max-width: 767px) {
  .footer {
    --footer-first-column: calc(300px + (350 - 300) * ((100vw - 620px) / (767 - 620)));
  }

  .footer .footer__container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer__grid {
    grid-template-columns: var(--footer-first-column) 1fr;
    grid-template-rows: repeat(2, auto);
  }

  .footer .first__column .policy {
    display: block;
    margin-top: 12px;
    margin-bottom: 30px;
    visibility: visible;
  }

  .footer .second__column {
    grid-column: 1/2;
    grid-row: 2/3;
  }

  .footer .third__column {
    grid-column: 2/3;
    grid-row: 1/3;
  }

  .footer__grid--bottom {
    grid-template-columns: 1fr;
  }

  .footer__grid--bottom a:first-child {
    display: none;
  }

  .footer__grid--bottom a:last-child {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    justify-self: center;
  }
}

@media (max-width: 619px) {
  .footer__grid {
    grid-template-columns: 300px 1fr;
    /* grid-template-rows: repeat(2, auto); */
  }
}

@media (max-width: 519px) {
  .footer__grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
    margin-bottom: 30px;
  }

  .footer .second__column {
    grid-column: 1/2;
    grid-row: 2/3;
  }

  .footer .second__column li:last-child a {
    margin-bottom: 0;
  }

  .footer .third__column {
    grid-column: 1/2;
    grid-row: 3/4;
    margin-top: 30px;
  }
}

.header-nav {
  background-color: var(--color-nav-bg);
}

.header-nav__container {
  height: 50px;
}

.header-nav ul {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 28px;
}

.header-nav ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  padding-left: 16px;
  padding-right: 16px;
}

.header-nav ul li a {
  text-transform: uppercase;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-black-text);
}

/* === Отключаем hover в пункте меню nav текущей страницы ===  */
.main-page .header-nav ul li:not(.main-page):hover a {
  color: var(--color-red-text);
}

.china_lang-page .header-nav ul li:not(.china_lang-page):not(.main-page):hover a {
  color: var(--color-red-text);
}

.works_base-page .header-nav ul li:not(.works_base-page):not(.main-page):hover a {
  color: var(--color-red-text);
}

.advantages-page .header-nav ul li:not(.advantages-page):not(.main-page):hover a {
  color: var(--color-red-text);
}

.pub_contract-page .header-nav ul li:not(.pub_contract-page):not(.main-page):hover a {
  color: var(--color-red-text);
}

.payments-page .header-nav ul li:not(.payments-page):not(.main-page):hover a {
  color: var(--color-red-text);
}

.contacts-page .header-nav ul li:not(.contacts-page):not(.main-page):hover a {
  color: var(--color-red-text);
}

/* --- / Отключаем hover в пункте меню nav текущей страницы ---  */
/* === Закрашиваем красным пункт меню nav текущей страницы ===  */
/* .main-page {
    .header-nav ul li.main-page {
        background-color: var(--color-red-bg);

        &:hover a {
            opacity: .7;
        }

        & a {
            color: var(--color-white-text);
        }
    }
} */
/* Здесь исключаем привязку к главной странице только для первой закладки */
.header-nav ul li.main-page {
  background-color: var(--color-red-bg);
}

.header-nav ul li.main-page:hover a {
  opacity: 0.7;
}

.header-nav ul li.main-page a {
  color: var(--color-white-text);
}

.header-nav ul li.is-active a {
  color: var(--color-red-text) !important;
}


/* --- / Закрашиваем красным пункт меню nav текущей страницы ---  */
@media (max-width: 1543px) {
  .header-nav ul {
    gap: calc(0px + 28 * (100vw - 1200px) / 343);
  }

  .header-nav ul li a {
    font-size: calc(10px + 6 * (100vw - 1000px) / 543);
  }
}

@media (max-width: 999px) {
  .header-nav ul {
    gap: 0;
  }

  .header-nav ul li {
    padding-left: calc(3px + 13 * (100vw - 620px) / 379);
    padding-right: calc(3px + 13 * (100vw - 620px) / 379);
  }

  .header-nav ul li a {
    font-size: 10px;
  }
}

@media (max-width: 767px) {
  .header-nav .header-nav__container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 619px) {
  .header-nav {
    display: none;
  }
}

.header__container {
  height: 70px;
  display: grid;
  grid-template-columns: minmax(189px, 1fr) minmax(220px, auto) 1fr;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  column-gap: 30px;
  background-color: var(--color-header-bg);
}

.socials img {
  width: 36px;
  height: 36px;
}

.socials ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
}

.socials li a:hover {
  opacity: 0.7;
}

.logo img {
  width: 220px;
  height: auto;
}

.contacts {
  width: 540px;
  justify-self: end;
  display: grid;
  grid-template-columns: 87px 59px 193px 20px 19px 22.5px 112px;
  grid-template-rows: repeat(2, auto);
  -webkit-column-gap: 6px;
  -moz-column-gap: 6px;
  column-gap: 6px;
}

.contacts a:hover {
  cursor: pointer;
  opacity: 0.7;
}

.contacts span {
  color: var(--color-black-text);
  font-size: 14px;
}

.contacts .telegram,
.contacts .viber,
.contacts .phone,
.contacts .mail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 5px;
}

.contacts .phone span,
.contacts .mail span {
  font-size: 16px;
}

.contacts .clock-img img {
  width: 22.5px;
  height: 22.5px;
}

.contacts .clock-text span,
.contacts .clock-time span {
  font-size: 16px;
  color: var(--color-grey-txt);
}

.contacts .telegram {
  grid-column: 1/2;
  grid-row: 1/2;
}

.contacts .viber {
  grid-column: 2/3;
  grid-row: 1/2;
}

.contacts .phone {
  grid-column: 3/4;
  grid-row: 1/2;
}

.contacts .mail {
  grid-column: 3/4;
  grid-row: 2/3;
}

.contacts .clock-line {
  grid-column: 5/6;
  grid-row: 1/3;
  border-left: 1px solid var(--color-grey-txt);
  height: 30px;
  align-self: center;
}

.contacts .clock-img {
  grid-column: 6/7;
  grid-row: 1/3;
  align-self: center;
}

.contacts .clock-text {
  grid-column: 7/8;
  grid-row: 1/2;
}

.contacts .clock-time {
  grid-column: 7/8;
  grid-row: 2/3;
}

.burger {
  display: none;
  width: 27px;
}

.burger img {
  width: 100%;
}

@media (max-width: 1099px) {
  .header {
    padding-top: 18px;
    padding-bottom: 19px;
  }

  .header__container {
    height: auto;
    /* display: grid; */
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, auto);
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    /* column-gap: 30px; */
    row-gap: 10px;
    -webkit-column-gap: 100px;
    -moz-column-gap: 100px;
    column-gap: 100px;
  }

  .header__container .socials {
    justify-self: start;
    grid-column: 2/3;
    grid-row: 1/2;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }

  .header__container .logo {
    justify-self: end;
    grid-column: 1/2;
    grid-row: 1/2;
  }

  .header__container .contacts {
    justify-self: center;
    grid-column: 1/3;
    grid-row: 2/3;
  }
}

@media (max-width: 767px) {
  .header .header__container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .logo img {
    width: calc(160px + 60 * (100vw - 360px) / 407);
  }
}

@media (max-width: 619px) {
  .header {
    padding-top: 0;
    padding-bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: calc(40px + 27 * (100vw - 360px) / 407);
  }

  .header__container {
    grid-template-columns: 1fr 34px;
    grid-template-rows: repeat(1, auto);
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
  }

  .header__container .logo {
    justify-self: center;
    margin-left: 30px;
  }

  .socials {
    display: none;
  }

  .contacts {
    display: none;
  }

  .burger {
    display: block;
    justify-self: end;
    -ms-flex-item-align: center;
    align-self: center;
  }
}

.shadow-top {
  position: fixed;
  -webkit-transform: translateY(-150%);
  -ms-transform: translateY(-150%);
  transform: translateY(-150%);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  /* width: 100dvw;
  height: 100dvh; */
  background-color: rgba(0, 0, 0, 0);
  z-index: 100;
  -webkit-transition: background-color 0.5s, -webkit-transform 0.5s;
  transition: background-color 0.5s, -webkit-transform 0.5s;
  transition: transform 0.5s, background-color 0.5s;
  transition: transform 0.5s, background-color 0.5s, -webkit-transform 0.5s;
}

.shadow-top .shadow-top__container {
  padding-left: 0;
  padding-right: 0;
}

.shadow-top--shown {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  background-color: rgba(0, 0, 0, 0.5);
}

.shadow-top .burger-window {
  /* position: relative; */
  position: absolute;
  right: calc((100vw - 1920px) / 2);
  /* display: flex; */
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 300px;
  height: auto;
  padding: 20px;
  padding-top: 9px;
  background-color: var(--color-white-bg);
}

.shadow-top .cross-close {
  position: absolute;
  top: 8px;
  right: 24px;
}

.shadow-top .logo {
  margin-bottom: 28px;
  width: 159px;
  height: 23px;
  margin-left: 20px;
}

.shadow-top .logo img {
  width: 100%;
  height: 100%;
}

.shadow-top .socials {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin-bottom: 30px;
}

.shadow-top .socials li {
  width: 30px;
  height: 30px;
}

.shadow-top .socials li img {
  width: 100%;
  height: 100%;
}

.shadow-top .burger-nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 30px;
}

.shadow-top .burger-nav ul li:hover {
  background-color: var(--color-red-bg);
}

.shadow-top .burger-nav ul li:hover a {
  display: inline-block;
  width: 100%;
  color: var(--color-white-text);
}

.shadow-top .burger-nav ul a {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-black-text);
}

.shadow-top .line-top,
.shadow-top .line-bottom {
  border: 1px solid var(--color-grey-txt);
  width: 100%;
  height: 0px;
}

.shadow-top .line-top {
  margin-bottom: 15px;
}

.shadow-top .line-bottom {
  margin-bottom: 10px;
}

.shadow-top .contacts {
  display: grid;
  grid-template-columns: 20px 20px 1fr;
  grid-template-rows: auto auto;
  -webkit-column-gap: 10px;
  -moz-column-gap: 10px;
  column-gap: 10px;
  margin-bottom: 10px;
}

.shadow-top .contacts .telegram span,
.shadow-top .contacts .viber span {
  display: none;
}

.shadow-top .clock {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.shadow-top .clock span {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-grey-txt);
}

.shadow-top .clock-img {
  width: 22px;
}

.shadow-top .clock-img img {
  width: 100%;
}

@media (max-width: 1920px) {
  .shadow-top .burger-window {
    right: 0;
  }
}

/* Только Тень */
.shadow {
  position: fixed;
  -webkit-transform: translateX(-150%);
  -ms-transform: translateX(-150%);
  transform: translateX(-150%);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  /* width: 100dvw;
  height: 100dvh; */
  background-color: rgba(0, 0, 0, 0);
  z-index: 100;
  -webkit-transition: background-color 0.5s, -webkit-transform 0.5s;
  transition: background-color 0.5s, -webkit-transform 0.5s;
  transition: transform 0.5s, background-color 0.5s;
  transition: transform 0.5s, background-color 0.5s, -webkit-transform 0.5s;
}

.shadow .shadow__container {
  padding-left: 0;
  padding-right: 0;
}

.shadow--shown {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  background-color: rgba(0, 0, 0, 0.5);
}

/* Окна внутри тени */
.shadow {
  /* Дополнительный экран для прозрачного фонового изображения */
  /* Отодвигаем его за псевдоэлемент с фоновым изображением */
}

.shadow .white-bg {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: calc(100% - 40px);
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  background-color: var(--color-white-bg);
  left: 50%;
  -webkit-transform: translate(-50%, 230px);
  -ms-transform: translate(-50%, 230px);
  transform: translate(-50%, 230px);
}

.shadow .call-order-form {
  max-width: 650px;
  position: relative;
  padding: 60px;
  /* Фоновое изображение на псевдоэлемент и отодвигаем его за контент */
}

.shadow .call-order-form::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background-image: url("../images/main/call_order_form_bg.png");
  /* Картинка с прозрачностью 0.6 */
  /* background-image: url('../../../images/main/call_order_form_bg_opacity_06.png'); */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: screen;
  opacity: 0.6;
}

.shadow .cross-close {
  position: absolute;
  top: 20px;
  right: 20px;
}

.shadow .title {
  font-size: var(--font-size-48-24);
  font-weight: 700;
  color: var(--color-black-text);
  margin-bottom: 8px;
}

.shadow .line {
  border: 1px solid var(--color-decorated-text);
  background-color: var(--color-decorated-text);
  width: 150px;
  height: 3px;
  margin-bottom: 30px;
}

.shadow .question-form {
  display: grid;
  grid-template-columns: 250px 250px;
  gap: 30px;
  margin-bottom: 32px;
  /* Позиционируем asterisk относительно label */
  /* Абсолютное позиционирование asterisk-а */
  /* Если внутри label-а input в фокусе, то asterisk скрываем */
}

.shadow .question-form .question-form__field,
.shadow .question-form label {
  position: relative;
}

.shadow .question-form .asterisk {
  position: absolute;
  top: 10px;
  left: 170px;
  z-index: 10;
  color: var(--color-red-text);
  font-size: 16px;
}

.shadow .question-form .question-form__field:has(input:focus) .asterisk,
.shadow .question-form label:has(input:focus) .asterisk {
  display: none;
}

.shadow .question-form input {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-black-text);
  border: 1px solid var(--color-gray-text);
  border-radius: 8px;
  width: 250px;
  height: 50px;
}

.shadow .question-form input::-webkit-input-placeholder {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray-text);
}

.shadow .question-form input::-moz-placeholder {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray-text);
}

.shadow .question-form input:-ms-input-placeholder {
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray-text);
}

.shadow .question-form input::-ms-input-placeholder {
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray-text);
}

.shadow .question-form input::placeholder {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray-text);
}

.shadow .question-form input:focus::-webkit-input-placeholder {
  color: transparent;
}

.shadow .question-form input:focus::-moz-placeholder {
  color: transparent;
}

.shadow .question-form input:focus:-ms-input-placeholder {
  color: transparent;
}

.shadow .question-form input:focus::-ms-input-placeholder {
  color: transparent;
}

.shadow .question-form input:focus::placeholder {
  color: transparent;
}

.shadow .question-form__name,
.shadow .question-form__phone {
  width: 100%;
  height: 50px;
  border-radius: 8px;
  border: none;
}

.shadow .form-result {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.shadow .remark {
  color: #2e2e2e;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-black-text);
}

.shadow .remark a {
  color: var(--color-decorated-text-2);
  display: inline-block;
  vertical-align: middle;
}

.shadow .red-btn.no-switch {
  height: 50px;
  border-radius: 54px;
  justify-self: end;
  margin-bottom: 4px;
}

.order-accepted-window .call-order-form {
  padding-right: 55px;
  padding-bottom: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.order-accepted-window .message {
  font-size: var(--font-size-24-18);
  font-weight: 700;
  color: var(--color-black-text);
  margin-bottom: 30px;
}

.order-accepted-window .checkbox-order-accepted__image {
  -ms-flex-item-align: center;
  align-self: center;
}

@media (max-width: 1199px) {
  .shadow .white-bg {
    -webkit-transform: translate(-50%, calc(70px + 160 * (100vw - 360px) / 839));
    -ms-transform: translate(-50%, calc(70px + 160 * (100vw - 360px) / 839));
    transform: translate(-50%, calc(70px + 160 * (100vw - 360px) / 839));
  }
}

@media (max-width: 689px) {
  .shadow .white-bg {
    max-width: 100%;
  }

  .shadow .call-order-form {
    padding-left: calc(30px + 30 * (100vw - 590px) / 99);
    padding-right: calc(30px + 30 * (100vw - 590px) / 99);
    padding-top: calc(30px + 30 * (100vw - 590px) / 99);
    padding-bottom: calc(30px + 30 * (100vw - 590px) / 99);
  }

  .shadow .question-form {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 32px;
  }

  .shadow .question-form input {
    width: 100%;
  }

  .shadow .form-result {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 30px;
  }

  .shadow .red-btn.no-switch {
    width: 250px;
  }

  .order-accepted-window .call-order-form {
    padding-top: 60px;
    padding-bottom: calc(50px + -10 * (100vw - 360px) / 329);
  }
}

@media (max-width: 589px) {
  .shadow .call-order-form {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .order-accepted-window .call-order-form {
    padding-top: 60px;
    padding-bottom: 50px;
  }
}

@media (max-width: 489px) {
  .shadow .call-order-form {
    padding-left: calc(20px + 10 * (100vw - 360px) / 129);
    padding-right: calc(20px + 10 * (100vw - 360px) / 129);
    padding-top: calc(60px + -30 * (100vw - 360px) / 129);
    padding-bottom: calc(60px + -30 * (100vw - 360px) / 129);
  }

  .shadow .line {
    margin-bottom: calc(20px + 10 * (100vw - 360px) / 129);
  }

  .shadow .question-form {
    grid-template-columns: 320px;
    gap: calc(15px + 15 * (100vw - 360px) / 129);
    margin-bottom: calc(10px + 22 * (100vw - 360px) / 129);
  }

  .shadow .question-form input {
    height: calc(40px + 10 * (100vw - 360px) / 129);
  }

  .shadow .form-result {
    gap: calc(40px + -10 * (100vw - 360px) / 129);
  }

  .shadow .red-btn.no-switch {
    justify-self: center;
    width: calc(181px + 69 * (100vw - 360px) / 129);
    height: calc(40px + 10 * (100vw - 360px) / 129);
  }

  .order-accepted-window .call-order-form {
    padding-top: 60px;
    padding-bottom: 50px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .order-accepted-window .title {
    margin-bottom: calc(15px + -7 * (100vw - 360px) / 129);
  }

  .order-accepted-window .message {
    text-align: center;
    margin-bottom: calc(40px + -10 * (100vw - 360px) / 129);
  }
}

.shadow-bottom {
  position: fixed;
  -webkit-transform: translateY(150%);
  -ms-transform: translateY(150%);
  transform: translateY(150%);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  /* width: 100dvw;
  height: 100dvh; */
  background-color: rgba(0, 0, 0, 0);
  z-index: 100;
  -webkit-transition: background-color 0.5s, -webkit-transform 0.5s;
  transition: background-color 0.5s, -webkit-transform 0.5s;
  transition: transform 0.5s, background-color 0.5s;
  transition: transform 0.5s, background-color 0.5s, -webkit-transform 0.5s;
}

.shadow-bottom .shadow-bottom__container {
  padding-left: 0;
  padding-right: 0;
}

.shadow-bottom--shown {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  background-color: rgba(0, 0, 0, 0.5);
}

.shadow-bottom .cookie-window {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  padding-top: 65px;
  padding-bottom: 65px;
  background-color: var(--color-white-bg);
  position: absolute;
  bottom: 0;
  left: 0;
}

.shadow-bottom .text {
  max-width: 573px;
  justify-self: end;
  font-size: var(--font-size-16-11);
  font-weight: 700;
  color: var(--color-black-text);
  margin-left: 20px;
}

.shadow-bottom .text span {
  /* font: 700 16px $font-family; */
  color: var(--color-decorated-text-2);
}

.shadow-bottom .text a {
  color: var(--color-red-text);
}

.shadow-bottom .text a:hover {
  text-decoration: underline;
}

.shadow-bottom .buttons {
  margin-right: 20px;
}

@media (max-width: 1919px) {
  .shadow-bottom .cookie-window {
    padding-top: calc(20px + 45 * (100vw - 360px) / 1559);
    padding-bottom: calc(20px + 45 * (100vw - 360px) / 1559);
    gap: calc(20px + 30 * (100vw - 360px) / 1559);
  }
}

@media (max-width: 767px) {
  .shadow-bottom .cookie-window {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .shadow-bottom .text {
    margin-right: 20px;
    margin-left: 20px;
    justify-self: center;
    text-align: center;
  }

  .shadow-bottom .buttons {
    min-width: 270px;
    width: 100%;
    grid-template-columns: 45% 55%;
    margin-right: 45px;
    margin-left: 45px;
    justify-self: center;
  }

  .shadow-bottom .red-btn {
    width: calc(119px + 131 * (100vw - 360px) / 407);
    justify-self: flex-end;
  }

  .shadow-bottom .red-border-btn {
    width: calc(140px + 110 * (100vw - 360px) / 407);
    justify-self: flex-start;
  }
}

.shadow-fade {
  position: fixed;
  -webkit-transform: translateX(150%);
  -ms-transform: translateX(150%);
  transform: translateX(150%);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  /* width: 100dvw;
  height: 100dvh; */
  background-color: rgba(0, 0, 0, 0);
  z-index: 100;
  -webkit-transition: background-color 0.5s, -webkit-transform 0.5s;
  transition: background-color 0.5s, -webkit-transform 0.5s;
  transition: transform 0.5s, background-color 0.5s;
  transition: transform 0.5s, background-color 0.5s, -webkit-transform 0.5s;
}

.shadow-fade .shadow-fade__container {
  padding-left: 0;
  padding-right: 0;
}

.shadow-fade--shown {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  background-color: rgba(0, 0, 0, 0.5);
}

.shadow-fade .shadow-fade__container {
  height: 100%;
}

.shadow-fade .work-order-window {
  position: relative;
  /* position: fixed; */
  background-color: var(--color-form-bg);
  padding-top: 60px;
  padding-bottom: 45px;
  padding-left: 60px;
  padding-right: 60px;
  width: 85%;
  border-radius: 15px;
  /* margin: 0 auto; */
  /* margin-top: 193px; */
  /* margin-top: -69px; */

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.shadow-fade .work-order-window .cross-close {
  position: absolute;
  right: 20px;
  top: 20px;
}

.shadow-fade .title {
  font-size: var(--font-size-48-28);
  font-weight: 700;
  color: var(--color-white-text);
  margin-bottom: 8px;
}

.shadow-fade .line {
  border: 2px solid var(--color-decorated-text);
  width: 150px;
  height: 0px;
  margin-bottom: var(--margin-40-25);
}

.shadow-fade .request-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  margin-bottom: 15px;
  /* Позиционируем asterisk относительно label */
  /* Абсолютное позиционирование asterisk-а */
  /* Если внутри label-а input в фокусе, то asterisk скрываем */
  /*         & label:has(input:focus) .asterisk {
      display: none;
  } */
  /*         & label.drop-down:hover .works-items {
      transform: scale(1);
  }

  & label.drop-down:hover img {
      transform: scale(-1);
  } */
}

.request-form__file-field {}

.request-form__file-name {
  font-size: 12px;
  position: relative;
  left: 20px;
  top: 5px;
}

/* responsive */
@media (max-width: 480px) {
  .request-form__file-name {
    display: none;
  }
}

/* responsive */

.shadow-fade .request-form .request-form__field,
.shadow-fade .request-form label {
  position: relative;
  -ms-flex-item-align: end;
  align-self: flex-end;
}

.shadow-fade .request-form .request-form__field .label,
.shadow-fade .request-form label span {
  display: inline-block;
}

.shadow-fade .request-form .request-form__field .label,
.shadow-fade .request-form label span:not(span span) {
  font-size: var(--font-size-20-16);
  font-weight: 500;
  color: var(--color-black-text);
  margin-left: 20px;
  margin-bottom: 5px;
}

.shadow-fade .request-form label .form-checkmark {
  position: absolute;
  right: 10px;
  bottom: 20px;
  z-index: 10;
  pointer-events: none;
}

.shadow-fade .request-form .asterisk {
  color: var(--color-red-text);
}

.shadow-fade .request-form select,
.shadow-fade .request-form input,
.shadow-fade .request-form textarea {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-black-text);

  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  line-height: 1;
}

.shadow-fade .request-form select {
  appearance: none;
  background-image: url('./../images/main/form/form_checkmark.svg');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

.shadow-fade .request-form input::-webkit-input-placeholder,
.shadow-fade .request-form textarea::-webkit-input-placeholder {
  /* position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); */
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray-text);
}

.shadow-fade .request-form input::-moz-placeholder,
.shadow-fade .request-form textarea::-moz-placeholder {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray-text);
}

.shadow-fade .request-form input:-ms-input-placeholder,
.shadow-fade .request-form textarea:-ms-input-placeholder {
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray-text);
}

.shadow-fade .request-form input::-ms-input-placeholder,
.shadow-fade .request-form textarea::-ms-input-placeholder {
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray-text);
}

.shadow-fade .request-form input::placeholder,
.shadow-fade .request-form textarea::placeholder {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray-text);
}

.shadow-fade .request-form input:focus::-webkit-input-placeholder,
.shadow-fade .request-form textarea:focus::-webkit-input-placeholder {
  color: transparent;
}

.shadow-fade .request-form input:focus::-moz-placeholder,
.shadow-fade .request-form textarea:focus::-moz-placeholder {
  color: transparent;
}

.shadow-fade .request-form input:focus:-ms-input-placeholder,
.shadow-fade .request-form textarea:focus:-ms-input-placeholder {
  color: transparent;
}

.shadow-fade .request-form input:focus::-ms-input-placeholder,
.shadow-fade .request-form textarea:focus::-ms-input-placeholder {
  color: transparent;
}

.shadow-fade .request-form input:focus::placeholder,
.shadow-fade .request-form textarea:focus::placeholder {
  color: transparent;
}

.shadow-fade .request-form textarea {
  padding-top: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.shadow-fade .request-form .textarea {
  grid-column: 1/4;
}

.shadow-fade .request-form__type,
.shadow-fade .request-form__theme,
.shadow-fade .request-form__subject,
.shadow-fade .request-form__comment,
.shadow-fade .request-form__name,
.shadow-fade .request-form__phone,
.shadow-fade .request-form__email {
  width: 100%;
  height: 50px;
  border-radius: 8px;
  border: none;
}

.shadow-fade .request-form .red-border-btn {
  gap: 10px;
  border: 2px solid var(--color-black-btn-bg);
  margin-top: 10px;
}

.shadow-fade .request-form .red-border-btn img+span {
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.shadow-fade .request-form .red-border-btn span {
  color: var(--color-white-text);
}

.shadow-fade .request-form .red-border-btn img {
  display: inline-block !important;
}

.shadow-fade .request-form .works-items {
  position: absolute;
  z-index: 100;
  top: 75px;
  width: 100%;
  background-color: var(--color-header-bg);
  padding-top: 8px;
  padding-right: 20px;
  padding-bottom: 20px;
  border-radius: 8px;
  /* display: flex; */
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  border: 1px solid #e6e6e7;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  /*             &:hover {
      transform: scale(1);
  } */
}

.shadow-fade .request-form .works-items .works-item {
  cursor: pointer;
}

.shadow-fade .request-form .works-items .works-item:hover {
  background-color: var(--color-grey-bg);
}

.shadow-fade .request-form .red-btn {
  grid-column: 3/4;
  justify-self: end;
  margin-top: 10px;
}

.shadow-fade .form-result {
  display: grid;
  grid-template-columns: 1fr;
}

.shadow-fade .remark {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-white-text);
  justify-self: end;
}

.shadow-fade .remark a {
  color: #307ecc;
  display: inline-block;
  vertical-align: middle;
}

@media (hover: hover) {
  .shadow-fade .request-form label.drop-down:hover .works-items {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

@media (hover: none) {
  .shadow-fade .request-form label.drop-down:active .works-items {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

@media (hover: hover) {
  .shadow-fade .request-form label.drop-down:hover img {
    -webkit-transform: scale(-1);
    -ms-transform: scale(-1);
    transform: scale(-1);
  }
}

@media (hover: none) {
  .shadow-fade .request-form label.drop-down:active img {
    -webkit-transform: scale(-1);
    -ms-transform: scale(-1);
    transform: scale(-1);
  }
}

@media (max-width: 1919px) {
  .shadow-fade .request-form .works-items {
    top: calc(60px + 15 * (100vw - 360px) / 1559);
  }

  .shadow-fade .work-order-window {
    /* margin-top: calc(0px + 193 * (100vw - 360px) / 1559); */
    padding-left: calc(30px + 30 * (100vw - 1000px) / 919);
    padding-right: calc(30px + 30 * (100vw - 1000px) / 919);
    padding-top: calc(50px + 10 * (100vw - 1000px) / 919);
    padding-bottom: calc(30px + 15 * (100vw - 1000px) / 919);
  }
}

@media (max-width: 999px) {
  .shadow-fade .work-order-window {
    padding-top: 50px;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media (max-width: 849px) {
  .shadow-fade .work-order-window {
    width: 100%;
  }

  .shadow-fade .request-form {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .shadow-fade .request-form label .form-checkmark {
    bottom: 14px;
  }

  .shadow-fade .request-form .textarea {
    grid-column: 1/2;
  }

  .shadow-fade .request-form .red-btn {
    grid-column: 1/2;
    justify-self: start;
  }

  .shadow-fade .request-form select,
  .shadow-fade .request-form input {
    height: 40px;
  }

  .shadow-fade .request-form textarea {
    height: 40px;
  }

  .shadow-fade .request-form .red-btn {
    margin-top: 0;
  }

  .shadow-fade .request-form .red-border-btn {
    margin-top: 20px;
  }

  .shadow-fade .form-result .remark {
    font-size: calc(12px + 2 * (100vw - 360px) / 489);
    color: var(--color-black-text);
  }
}

@media (orientation: landscape) and (max-width: 800px) {
  .shadow-fade {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .shadow-fade .work-order-window {
    margin-top: 0;
    padding-top: 30px;
    padding-bottom: 10px;
    border-radius: 0;
  }

  .shadow-fade .work-order-window .line {
    margin-bottom: 15px;
  }

  .shadow-fade .request-form {
    grid-template-columns: 1fr 1fr;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
  }

  .shadow-fade .request-form .work-subject {
    display: none;
  }

  .shadow-fade .request-form .textarea {
    display: none;
  }

  .shadow-fade .request-form .user-email {
    display: none;
  }

  .shadow-fade .request-form .red-btn {
    grid-column: 2/3;
    margin-top: 20px;
  }

  .shadow-fade .request-form .red-border-btn {
    justify-self: end;
  }
}

@media (max-width: 619px) {
  .shadow-fade .work-order-window {
    padding-left: calc(20px + 10 * (100vw - 360px) / 259);
    padding-right: calc(20px + 10 * (100vw - 360px) / 259);
    /* transform: translateY(5%); */
  }

  .shadow-fade .request-form {
    margin-bottom: calc(20px + -5 * (100vw - 360px) / 259);
  }

  .shadow-fade .request-form .red-border-btn {
    width: calc(192px + 58 * (100vw - 360px) / 259);
    justify-self: center;
  }

  .shadow-fade .request-form .red-btn {
    width: calc(192px + 58 * (100vw - 360px) / 259);
    justify-self: center;
  }
}

@media (max-width: 375px) {
  .shadow-fade .request-form .textarea {
    display: none;
  }

  .shadow-fade .request-form .user-email {
    display: none;
  }
}

.is-error {
  outline: 3px solid var(--color-red-text) !important;
}

form {
  position: relative;
}


@media (min-width: 1199px) {
  body {
    zoom: 88%;
  }
}


@media (min-width: 1024px) {
  .advantages .advantages__container {
    grid-template-columns: repeat(5, 1fr);
  }
}