@charset "UTF-8";

/* Указываем box sizing */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Убираем внутренние отступы */
ul[class],
ol[class] {
  padding: 0;
}

/* Убираем внешние отступы */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

html,
body {
  height: 100%;
  min-width: 320px;
}

/* Выставляем основные настройки по-умолчанию для body */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  font-family: 'Gilroy';
  font-style: normal;
}

.lock body {
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
  -ms-scroll-chaining: none;
  overscroll-behavior: none;
}

.wrapper {
  min-height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
}

/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
ul[class],
ol[class] {
  list-style: none;
}

/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}

/* Упрощаем работу с изображениями */
img {
  max-width: 100%;
  display: block;
}

/* Указываем понятную периодичность в потоке данных у article*/
article > * + * {
  margin-top: 1em;
}

/* Наследуем шрифты для инпутов и кнопок */
input,
button,
textarea,
select {
  font: inherit;
}

/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
@media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

[class*='__container'] {
  max-width: 100%;
  margin: 0px auto;
}

[class*='__main-container'] {
  max-width: 1400px;
  margin: 0px auto;
  padding: 0px 20px;
  /* border: 1px solid black; */
}

[class*='__headline-container'] {
  max-width: 1148px;
  margin: 0px auto;
}

.block-all-titles {
  font-family: 'Gilroy-Bold';
  font-size: 72px;
  font-weight: 700;
}

.all-list-text {
  font-size: 18px;
}

.margin_top_blocks {
  margin-top: 200px;
}

/* Header */
.header {
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  width: 100%;
  height: 123px;
  left: 0px;
  top: 0px;
  padding: 40px 80px;
  background: #ffffff;
  font-weight: 400;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img {
  width: 160px;
  max-width: 160px;
  height: 42px;
  max-height: 42px;
  z-index: 1;
}

.header_menu {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0px;
  gap: 50px;
  width: 407px;
  max-width: 407px;
  height: 23px;
  max-height: 23px;
  z-index: 1;
  margin-left: 145px;
  margin-top: -14px;
}

.header_menu a {
  text-decoration: none;
  color: #333333;
}

.header_menu a:hover {
  color: #916bef;
}

.all_services {
  flex: 0 0 304px;
  display: flex;
  justify-content: space-between;
  z-index: 1;
  margin-top: -8px;
}

.all_services label {
  display: flex;
}

.all_services_button {
  display: block;
  cursor: pointer;
}

#modal_all_services {
  display: none;
}

/* .arrow_all_services{
    align-items: center;
} */
.all_services_button svg {
  width: 14px;
  max-width: 14px;
  height: 7px;
  max-height: 7px;
  margin: 10px;
}

.all_services_button svg path {
  transition: 0.5s;
}

#modal_all_services:hover + label svg path {
  transform-origin: 0 55% 0;
  transform: rotateX(-180deg);
  transition: 0.5s;
  fill: #916bef;
}

#modal_all_services:hover + label {
  color: #916bef;
}

.header__phone {
  text-decoration: none;
  color: #916bef;
  font-weight: 400;
  font-size: 18px;
}

/* main-menu */

.cross_close-menu {
  position: absolute;
  top: 40px;
  right: 80px;
  cursor: pointer;
  width: 24px;
  height: 24px;
}

.tap_cross_close_menu {
  opacity: 0 !important;
  z-index: -10 !important;
}

.main-menu a {
  text-decoration: none;
}

.main-menu li {
  list-style: none;
}

.menu-list > li {
  display: flex;
  cursor: pointer;
  transition: 1s;
}

.services-arrow-hover {
  transform: rotateX(-180deg);
  transition: 1s;
}

.services-arrow-svg {
  fill: #916bef;
}

.menu-list-hover {
  color: #916bef;
}

.menu-list > li .services-arrow {
  width: 14px;
  height: 7px;
  margin-top: 10px;
  margin-left: 8px;
  transition: 1s;
}

.main-sub-menu .sub-menu-list {
  padding: 40px 280px;
  opacity: 0;
  z-index: -10;
  position: fixed;
  top: 123px;
  left: 0px;
  width: 100%;
  height: 100%;
  transition-duration: 0.3s;
  transition-delay: 0.3s;
  background: #ffffff;
}

.main-sub-menu .sub-menu-list-hover {
  opacity: 1;
  z-index: 20;
  overflow: hidden;
}

.main-sub-menu .sub-menu-list:hover {
  opacity: 1;
  z-index: 20;
  overflow: hidden;
}

.menu-block {
  display: flex;
  flex-direction: row;
  z-index: 1;
}

.menu-block-row {
  font-family: 'Gilroy';
  font-size: 18px;
  line-height: 23px;
}

.menu-block-row-1 {
  max-width: 330px;
  margin-right: 40px;
}

.menu-block-row-1 h2 {
  font-family: 'Gilroy-Bold';
  font-size: 28px;
  line-height: 36px;
  margin-bottom: 20px;
}

.menu-block-row-1-text {
  margin-bottom: 39px;
}

.menu-block-row-1-button {
  text-decoration: none;
  color: #ffffff;
  background: #916bef;
  padding: 19px 40px;
  border-radius: 15px;
  margin-bottom: 39px;
  transition: 0.3s;
}

.menu-block-row-1-button:hover {
  background: #a88af2;
  transition: 0.3s;
}

.menu-contacts-1 {
  margin-top: 99px;
  display: flex;
  flex-direction: column;
}

.menu-contacts-1 a {
  text-decoration: none;
  color: #333333;
  transition: 0.3s;
}

.menu-contacts-1 a:hover {
  color: #916bef;
  transition: 0.3s;
}

.menu-contacts {
  margin-top: 10px;
}

.main-sub-menu .social-networks {
  margin-top: 21px;
}

.menu-block-row-2 {
  display: flex;
  flex-direction: column;
  height: max-content;
}

.services-arrow-hover-lvls {
  transform: rotateX(-180deg);
  transition: 0.5s;
}

.services-arrow-svg-lvls {
  fill: #916bef;
}

.menu-lvl-1-col {
  display: flex;
  flex-direction: row;
  padding-bottom: 20px;
  min-width: 330px;
  color: #333333;
  align-items: center;
}

.menu-lvl-1-col svg {
  transition: 0.5s;
  position: relative;
  top: 0px;
  left: 0px;
  width: 14px;
  height: 7px;
}

.menu-lvl-1-col svg .menu-lvl-hover {
  transform: rotateX(-180deg);
  transition: 0.5s;
}

.menu-lvl-1-col li {
  margin-right: 9px;
  text-decoration: none;
  color: #333333;
  transition: 0.3s;
}

.menu-lvl-1-col .lvl-1-hover {
  transition: 0.3s;
  color: #916bef;
}

.menu-lvl-2-col svg {
  position: relative;
  top: 0px;
  left: 0px;
  transition: 0.5s;
  width: 14px;
  height: 7px;
}

.menu-lvl-2-col .lvl-2-hover {
  transition: 0.3s;
  color: #916bef;
}

.menu-block-row-3 {
  position: relative;
  min-width: 300px;
}

.menu-block-row-3 .menu-lvl-opacity {
  opacity: 1;
  transition: 0.7s;
  z-index: 10;
}

.menu-lvl-2-col {
  z-index: -20;
  transition: 0.7s;
  opacity: 0;
  position: absolute;
  top: 0px;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.menu-lvl-2-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  padding-bottom: 20px;
}

.menu-lvl-2-col a {
  margin-right: 9px;
  text-decoration: none;
  color: #333333;
}

.menu-lvl-2-col:hover {
  opacity: 1;
  z-index: 20;
}

.menu-block-row-4 {
  width: 300px;
  min-height: 866px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.menu-block-row-4 .menu-lvl-opacity {
  opacity: 1;
  transition: 0.7s;
  z-index: 10;
}

.menu-lvl-3-row {
  z-index: -20;
  transition: 0.7s;
  opacity: 0;
  position: absolute;
  top: 0px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  width: 100%;
  scroll-behavior: smooth;
}

.menu-lvl-3-row a {
  text-decoration: none;
  color: #333333;
  transition: 0.3s;
}

.menu-lvl-3-row a:hover {
  transition: 0.3s;
  color: #916bef;
}

.menu-lvl-3-row:hover {
  opacity: 1;
  z-index: 20;
}

.block-burger-menu {
  position: fixed;
  opacity: 0;
  left: 0px;
  top: 0px;
  z-index: -60;
  background: #fafafa;
  width: 100%;
  height: 100%;
  padding: 64px 40px 64px 40px;
  font-size: 18px;
  line-height: 23px;
}

.menu-block-lvl-1 {
  position: relative;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.menu-block-lvl-1 li {
  cursor: pointer;
  width: max-content;
  font-size: 18px;
}

.menu-block-lvl-1 li a {
  max-width: 240px;
  text-decoration: none;
  color: #333333;
  transition: 0.5s;
}

.menu-block-lvl-1 li a:hover {
  color: #916bef;
  transition: 0.3s;
}

.menu-block-link-1 {
  width: max-content;
  display: flex;
  flex-direction: row;
}

.menu-block-lvl-2 {
  position: absolute;
  top: 0;
  left: 100%;
  display: none;
  width: 300px;
  margin-left: 40px !important;
  cursor: initial;
}

.menu-block-lvl-2 > li {
  margin-bottom: 20px;
  max-width: 275px;
}

.menu-block-lvl-3 {
  position: absolute;
  top: 0;
  left: 100%;
  display: none;
  scroll-behavior: smooth;
  margin-left: 40px !important;
  cursor: initial;
}

.menu-block-lvl-3 > li {
  margin-bottom: 20px;
  max-width: 300px;
}

.menu-lvl-1-hover {
  display: block;
}

.menu-lvl-2-hover {
  display: block;
}

.menu-link-with-arrow {
  display: flex;
  width: 100%;
}

.menu-link-with-arrow::after {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.3206 0.292467L12.25 0.222067L12.1793 0.292467L7.0227 5.43402L1.86606 0.292467L1.79546 0.222067L1.72485 0.292467L1.2021 0.813688L1.13108 0.884503L1.2021 0.955317L6.4294 6.16728L6.9521 6.68845L7.0227 6.75885L7.09331 6.68845L7.61606 6.16722L12.8433 0.955317L12.9143 0.884503L12.8433 0.813688L12.3206 0.292467Z' fill='%23333333' stroke='%23333333' stroke-width='0.2'/%3E%3C/svg%3E");
  margin-left: 9px;
  height: 100%;
  width: 14px;
  transition: 0.5s;
}

.menu-link-with-arrow-hover::after {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.3206 0.292467L12.25 0.222067L12.1793 0.292467L7.0227 5.43403L1.86606 0.292467L1.79546 0.222067L1.72485 0.292467L1.2021 0.813688L1.13108 0.884503L1.2021 0.955317L6.4294 6.16728L6.9521 6.68845L7.0227 6.75885L7.09331 6.68845L7.61606 6.16722L12.8433 0.955317L12.9143 0.884503L12.8433 0.813688L12.3206 0.292467Z' fill='%23916BEF' stroke='%23916BEF' stroke-width='0.2'/%3E%3C/svg%3E");
  transform: rotateX(-180deg);
  transition: 0.5s;
}

.menu-link-with-arrow-hover > a {
  color: #916bef !important;
}

/* ///main-menu/// */

/* main page */
.main_page {
  left: 0px;
  margin-top: 180px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.main_page_container {
  width: 1148px;
  max-width: 1148px;
  height: 495px;
  max-height: 495px;
  margin-top: 17px;
  display: flex;
  flex-direction: column;
}

/* font-buttons */
.font_buttons {
  position: relative;
  width: 186px;
  max-width: 186px;
  height: 69px;
  max-height: 69px;
  padding: 10px 16px 10px 12px;
  left: 619px;
  background: #ffffff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.font_buttons label svg {
  width: 27px;
  max-width: 27px;
  height: 19px;
  max-height: 19px;
  margin-bottom: 0px;
}

.font_buttons-item {
  display: inline-block;
}

.font_buttons-item input[type='radio'] {
  display: none;
}

.font_buttons-item label {
  display: inline-block;
  cursor: pointer;
}

.font_buttons label {
  width: 47px;
  max-width: 47px;
  height: 49px;
  max-height: 49px;
  border-radius: 14px;
  padding: 15px 10px;
}

.font_buttons .item-1 label {
  padding: 16px 13px 14px 13px;
}

.font_buttons .item-3 label {
  padding: 15px 9px 15px 10px;
}

.font_buttons .item-1 input[type='radio']:checked + label svg path {
  fill: #ffffff !important;
}

.font_buttons-item input[type='radio']:checked + label {
  background: #333333;
}

.font_buttons .item-2 input[type='radio']:checked + label svg path {
  fill: #ffffff !important;
}

.font_buttons .item-3 input[type='radio']:checked + label svg path {
  fill: #ffffff !important;
}

/* /font-buttons */
.container_headline {
  position: absolute;
  display: flex;
  flex-direction: row;
}

.headline_text {
  font-family: 'Gilroy-Semibold';
  position: relative;
  top: 127px;
  font-weight: 600;
  font-size: 32px;
  line-height: 120%;
}

.headline_text b {
  font-family: 'Gilroy';
  font-weight: 400;
}

.word_W {
  display: none;
}

.word_F {
  display: none;
}

.main_headline {
  position: relative;
  font-family: 'Gilroy-Bold';
  font-weight: 700;
  font-size: 292px;
  margin-left: 2px;
  color: #333333;
}

.main_headline .word_color {
  color: rgba(87, 44, 194, 0.45);
}

.square {
  position: absolute;
  width: 217px;
  max-width: 217px;
  height: 285px;
  max-height: 285px;
  left: 40.3%;
  top: 20.5%;
}

.square-top {
  top: 13.7%;
  left: 40.2%;
}

.dynamic_panel {
  z-index: 3;
  position: relative;
  left: 184px;
  top: 292px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: max-content;
}

.code_shape {
  position: absolute;
  width: 285px;
  max-width: 285px;
  height: 141px;
  max-height: 141px;
  background: #ffffff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  padding: 25px;
}

.code_shape h2 {
  font-family: 'Gilroy-Bold';
  font-weight: 700;
  font-size: 26px;
  line-height: 24px;
  color: #916bef;
}

.code_shape .points {
  margin: 8px 0px 8px 0px;
}

#code_text b {
  color: #333333;
  font-family: 'Gilroy-Bold';
  font-weight: 700;
  font-size: 26px;
  line-height: 24px;
}

#typewriter {
  width: 111px;
  max-width: 111px;
  padding-bottom: 2px;
  color: #916bef;
  font-family: monospace;
  overflow: hidden;
  border-right: 0.15em solid black;
  white-space: nowrap;
  animation: typing 2s steps(17, end), blink-caret 0.75s step-end infinite;
}

/* The typing effect */
@-webkit-keyframes typing {
  from {
    width: 0;
  }

  to {
    width: 111px;
  }
}

@keyframes typing {
  from {
    width: 0;
  }

  to {
    width: 111px;
  }
}

/* The typewriter cursor effect */
@-webkit-keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: black;
  }
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: black;
  }
}

.slider_container {
  position: absolute;
  width: 247px;
  max-width: 247px;
  height: 144px;
  max-height: 144px;
  padding: 25px;
  padding-bottom: 20px;
  left: 697px;
  top: -55px;
  background: #ffffff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
}

.range {
  width: 197px;
  max-width: 197px;
  height: 20px;
  max-height: 20px;
  margin-bottom: 15px;
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  max-width: 22px;
  height: 22px;
  max-height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0);
  border: 3px solid #ffffff;
  -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.range_1 {
  -webkit-appearance: none;
  background: linear-gradient(
    270deg,
    #451ea6 0%,
    #825ce0 25.68%,
    #916bef 48.96%,
    #b699ff 72.4%,
    #f4f0ff 94.79%
  );
  border-radius: 33px;
}

.range_2 {
  -webkit-appearance: none;
  background: url(../img/main_page/checked.svg);
  border-radius: 33px;
}

/* select-style */

.select-block {
  position: relative;
  top: -9px;
  left: -15px;
  width: max-content;
  height: 160px;
  border-radius: 15px;
}

.select-block-active {
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
}
.select {
  width: 88px;
  position: relative;
  background: #ffffff;
}

.select.is-active .select-body {
  display: block;
  border-radius: 0px 0px 15px 15px;
  transition: 0.3s;
}

.select-block .is-active {
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 15px 15px 0px 0px;
}

.select-header {
  display: flex;
  cursor: pointer;
  width: 88px;
  border-radius: 15px 15px 0px 0px;
  background: #ffffff;
}

.select-current {
  font-family: 'Gilroy-Semibold';
  font-size: 24px;
  line-height: 29px;
  margin-top: 7px;
  margin-left: 15px;
  background: #ffffff;
}

.select-icon {
  margin-left: auto;
  position: relative;
  top: 18px;
  right: 11px;
  height: 7px;
  width: 11px;
  transition: 0.3s;
}

.select-icon-rotare {
  transition: 0.3s;
  transform: rotateX(180deg);
}

.select-body {
  border-top: 0;
  position: absolute;
  display: none;
  left: 0;
  right: 0;
  top: 100%;
  background: #ffffff;
  transition: 0.3s;
}

.select-item {
  font-family: 'Gilroy-Semibold';
  padding-top: 7px;
  padding-left: 15px;
  margin-top: 3px;
  font-size: 24px;
  line-height: 29px;
  cursor: pointer;
}

.select-item:hover {
  color: #916bef;
}

.select-item:hover:last-child {
  border-radius: 0px 0px 15px 15px;
}

/* ///select-style/// */

/* users-cursor */
.cursor_container {
  position: relative;
  width: 201px;
  max-width: 201px;
  height: 61px;
  max-height: 61px;
  top: 109px;
  left: 435px;
}

.user {
  opacity: 0;
  -webkit-transition: 0.55s;
  transition: 0.55s;
  position: absolute;
}

.active {
  opacity: 1;
}

.main_page .owl-carousel {
  height: 235px;
  margin-top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide {
  max-width: 340px;
  width: 91%;
  height: 185px;
  max-height: 185px;
  margin-top: 50px;
  background: #ffffff;
  -webkit-box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}

.slide img {
  position: relative;
  width: 30px;
  height: 26px;
  left: 36%;
  top: 17%;
}

.slide h2 {
  position: relative;
  font-family: 'Gilroy-Bold';
  font-weight: 700;
  font-size: 28px;
  line-height: 35px;
  /* top: 80px; */
  top: 79px;
  /* left: 29.57px; */
  left: 9%;
  bottom: 0px;
}

.slide h3 {
  position: relative;
  font-family: 'Montserrat';
  font-weight: 400;
  font-size: 16px;
  /* top: 85px; */
  top: 86px;
  /* left: 29.57px; */
  left: 9%;
}

/* .sliding{
    width: 340px;
} */
.main_page .owl-stage {
  margin-left: 80px;
  padding-bottom: 30px;
  padding-top: 20px;
}

.sliding a {
  text-decoration: none;
  color: #333333;
}

.sliding .slide {
  position: relative;
  bottom: 0;
  -webkit-transition: 0.6s ease;
  transition: 0.6s ease;
}

.sliding:hover .slide {
  bottom: 50px;
  transition: bottom 0.8s ease 0s;
}

.sliding:hover .slide {
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
}

.sliding:hover .slide h2 {
  color: #916bef;
}

/* /main-page */
/* text-block */
.header-text-block {
  margin-top: 189px;
  display: flex;
  flex-direction: column;
}

.header-text {
  width: 1360px;
  max-width: 1360px;
  margin: 0 auto;
}

.header-text h1 {
  font-family: 'Gilroy-Bold';
  line-height: 120%;
  margin: 0;
  color: #333333;
}

.text-space {
  font-weight: 400;
  line-height: 130%;
  margin: 0 auto;

  display: flex;
  width: max-content;
  flex-direction: row;
  justify-content: space-between;
}

.text-space-1 {
  width: 710px;
  max-width: 710px;
  margin-right: 40px;
  display: flex;
  flex-direction: column;
}

.description-text-block {
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  margin-bottom: 40px;
  margin-top: 40px;
}

.text-space-2 {
  width: 610px;
  max-width: 610px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 40px;
}

.text-space-2 .text {
  margin-bottom: 20px;
}

.advantages {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.advantages-case {
  position: relative;
  width: 335px;
  max-width: 335px;
  height: 251px;
  max-height: 251px;
  border-radius: 30px;
  -webkit-box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  background: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 30px;
}

.advantages .row-advantages-1 .case-1 {
  margin-bottom: 40px;
  background: #d5c3ff;
}

.advantages-text {
  font-family: 'Gilroy-Semibold';
  font-weight: 600;
  line-height: 130%;
  margin: 0;
  color: #ffffff;
}

.advantages-case img {
  position: absolute;
  width: 90px;
  max-width: 90px;
  height: 80px;
  max-height: 80px;
  left: 64%;
  top: 53%;
}

.advantages .row-advantages-1 .case-2 .advantages-text {
  color: #333333;
}

/* row-adv-2 */
.row-advantages-2 {
  margin-left: 40px;
}

.advantages .row-advantages-2 .case-1 {
  margin-top: 50px;
  margin-bottom: 40px;
}

.advantages .row-advantages-2 .case-1 .advantages-text {
  color: #333333;
}

.advantages .row-advantages-2 .case-2 {
  background: #1f1f1f;
}

.advantages .row-advantages-2 .case-2 .advantages-text {
  color: #ffffff;
}

/* /text-block */
/* case-block */

.case-block-title {
  font-family: 'Gilroy-Bold';
  font-weight: 700;
  line-height: 89px;
  max-width: 1360px;
  width: 1360px;
  margin: 0 auto;
  color: #333333;
}

.case {
  width: 32%;
  padding: 40px;
  background: #d5c3ff;
  -webkit-box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
}

.case img {
  position: relative;
  top: -25px;
}

.case-col-br {
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  width: 426px;
  max-width: 426px;
  height: 429px;
  max-height: 429px;
  display: flex;
  align-items: flex-end;
  transition: 0.5s;
  background-position: initial;
  background-size: cover;
  background-repeat: no-repeat;
}

.case-col:nth-child(2) {
  margin-top: -110px;
}

.case-col:nth-child(3) {
  margin-top: 90px;
}

.case-col:nth-child(4) {
  margin-top: -100px;
}

.case-col:nth-child(5) {
  margin-top: -200px;
}

.case-col a {
  text-decoration: none;
}

.case-col-purple {
  background: #d5c3ff;
  background-image: url(../img/cases/photo-case-1.png);
  background-repeat: no-repeat;
  background-position: right -25px;
  background-size: 74%;
}

.case-col-purple ul {
  margin: 0px;
  padding: 0px;
}

.case-col-purple ul li {
  display: inline-flex;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #ffffff;
  background: #ccb7ff;
  border-radius: 30px;
  padding: 10px 25px;
}

.case-col-purple_bg-image {
  background-image: url(../img/cases/gif-case-4.gif);
  background-size: 50%;
  background-position: 95% 10%;
}

.case-col-block {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  gap: 40px;
  justify-content: space-between;
  margin: 0 auto;
  position: relative;
  max-width: 1360px;
  width: 1360px;
}

.case-col-block p {
  font-weight: 700;
  font-size: 28px;
  line-height: 130%;
  color: #333333;
  font-family: 'Gilroy-Bold';
  margin-bottom: 20px;
}

.case-col-block-button p {
  position: relative;
  font-size: 18px;
  line-height: 23px;
  margin-bottom: 0px !important;
  transition: 0.3s;
}

.case-col-block-button p:hover {
  color: #916bef;
  transition: 0.3s;
}

.case-col-white-text p {
  color: #ffffff;
}

.case-col-white ul {
  margin: 0px;
  padding: 0px;
}

.case-col-white ul li {
  color: #333333;
  background: #f6f6f6;
}

.case-col-black {
  background: #000000;
  background-image: url(../img/cases/photo-case-5.svg);
  background-repeat: no-repeat;
  background-size: 81%;
}

.case-col-block ul {
  margin: 0px;
  padding: 0px;
}

.case-col-black ul li {
  color: #fff;
  background: #474747;
}

.case-col-info {
  padding: 209px 40px 40px 40px;
}

.case-col-block ul li {
  margin-right: 9px;
  margin-bottom: 10px;
  display: inline-flex;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  border-radius: 30px;
  padding: 10px 25px;
}

.case-col-block-button {
  position: absolute;
  top: 93%;
  left: 57%;
  text-align: right;
}

.case-col-block-button a {
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  line-height: 130%;
  color: #333333;
}

.case-col-block-button p::before {
  background-image: url('../img/cases/btnMore.svg');
  display: inline-block;
  content: '';
  background-size: 100%;
  width: 22px;
  height: 6px;
  position: relative;
  top: -2px;
  right: 11.5px;
}

.case-col-padding {
  position: relative;
  top: 74px;
}

.case-col-1 {
  position: relative;
  margin-top: 52px;
}

.case-col-br:hover {
  transform: scale(0.95);
  transition: 0.5s;
}

/* /case-block */
/* soc-net-block */

.soc-net-block {
  display: flex;
  margin-top: 200px;
  width: max-content;
}

.soc-net-buttons {
  margin-top: 98px;
  height: 320px;
  display: grid;
  grid-template-rows:
    119px
    119px
    80px;
  grid-template-columns:
    119px
    139px
    119px
    80px;
  padding-right: 139px;
}

.soc-net-block .soc-net-buttons > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.soc-net-block .soc-net-buttons > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

.soc-net-block .soc-net-buttons > *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

.soc-net-block .soc-net-buttons > *:nth-child(4) {
  -ms-grid-row: 1;
  -ms-grid-column: 4;
}

.soc-net-text-title {
  max-width: 761px;
  margin-bottom: 40px;
}

.soc-net-text-title h2 {
  font-family: 'Gilroy-Bold';
  line-height: 120%;
  color: #333333;
}

.soc-net-text {
  width: 761px;
  max-width: 761px;
}

.soc-net-text h3 {
  font-weight: 400;
  font-size: 18px;
  line-height: 23px;
  width: 671px;
  color: #333333;
}

.soc-net-text-2 {
  margin-top: 20px;
}

.big-icon:hover {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

.small-icon:hover {
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
}

.soc-net-block .soc-net-buttons img {
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.small-icon {
  width: 60px;
  height: 60px;
  padding: 10px;
  background: #333333;
  border-radius: 18px;
}

.big-icon {
  width: 80px;
  height: 80px;
  background: #333333;
  border-radius: 20px;
  padding: 15px;
}

.soc-net-buttons a {
  width: max-content;
  height: max-content;
}

#VK {
  margin-top: 10px;
}

#VK:hover .small-icon {
  background: #0077ff;
}

#Facebook {
  margin-top: 40px;
}

#Facebook:hover .small-icon {
  background: #4e6297;
}

#Telegram {
  margin-top: 30px;
}

#Telegram:hover .big-icon {
  background: linear-gradient(180deg, #2aabee 0%, #229ed9 99.26%), #419fd9;
}

#YouTube {
  margin-top: 10px;
  margin-left: 20px;
}

#YouTube:hover .small-icon {
  background: #f40000;
}

#Behance {
  margin-top: 30px;
}

#Behance:hover .big-icon {
  background: #1c66fb;
}

#Dribbble {
  margin-top: 40px;
  margin-left: 20px;
}

#Dribbble:hover .small-icon {
  background: #ea4c89;
}

#Viber {
  margin-top: 10px;
}

#Viber:hover .small-icon {
  background: #7c509a;
}

#Instagram:hover .big-icon {
  background: linear-gradient(
    43.94deg,
    #eea054 16.16%,
    #d64763 50.11%,
    #b62a99 83.68%
  );
}

#WhatsApp:hover .big-icon {
  background: #0dc143;
}

#Skype:hover .big-icon {
  background: #00aff0;
}

/* /soc-net-block */
/* directions */
.directions-block {
  width: max-content;
  height: max-content;
  margin-top: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  /* border: 1px solid black; */
}

.directions-text-animation {
  position: relative;
  top: 106px;
  width: 760px;
  max-width: 760px;
  height: max-content;

  display: flex;
  flex-direction: column;
}

.directions-text-animation .direction-text-animation-title {
  font-family: 'Gilroy-Bold';
  font-weight: 700;
  font-size: 28px;
  line-height: 35px;
  margin-bottom: 20px;
  color: #333333;
  transition: 0.5s;
}

.directions-text-animation .direction-text-animation-title:hover {
  color: #916bef;
}

.directions-text-animation a {
  text-decoration: none;
}

.directions-text-animation h3 {
  font-weight: 400;
  font-size: 18px;
  line-height: 23px;
  color: #333333;
}

.direction-1 {
  margin-bottom: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  /* overflow: hidden; */
  justify-content: space-between;
}

.direction-1-text {
  width: 760px;
  max-width: 760px;
  margin-right: 140px;
  height: max-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.direction-1-text .dir-title {
  font-family: 'Gilroy-Bold';
  line-height: 86px;
  margin-bottom: 40px;
  color: #333333;
}

.direction-1-text .direction-1-text-title {
  font-family: 'Gilroy-Bold';
  font-weight: 700;
  font-size: 28px;
  line-height: 35px;
  margin-bottom: 20px;
  color: #333333;
  transition: 0.5s;
}

.direction-1-text a {
  text-decoration: none;
}

.direction-1-text .direction-1-text-title:hover {
  color: #916bef;
}

.direction-1-text h3 {
  font-weight: 400;
  font-size: 18px;
  line-height: 23px;
  color: #333333;
}

.direction-1-animation {
  position: relative;
  width: 460px;
  max-width: 460px;
  height: 359px;
  max-height: 359px;
}

.direction-1-animation .page-1 {
  position: relative;
  width: 460px;
  max-width: 460px;
  height: 359px;
  max-height: 359px;
  background: #1f1f1f;
  -webkit-box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  overflow: hidden;
}

.direction-1-animation .page-1 .photo-gear {
  position: absolute;
  width: 145px;
  max-width: 145px;
  top: 176px;
  left: 238px;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
  z-index: 1;
}

.direction-1-animation .page-1 .back-photo {
  position: absolute;
  width: 340px;
  max-width: 340px;
  top: 40px;
  left: 30px;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

.direction-1-animation .left-shape {
  position: absolute;
  z-index: 2;
  top: 254px;
  left: -71px;
  background: #333333;
  -webkit-box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  width: 211px;
  max-width: 211px;
  height: 75px;
  max-height: 75px;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

.direction-1-animation .left-shape-square {
  position: absolute;
  width: 42px;
  max-width: 42px;
  height: 23px;
  max-height: 23px;
  left: 25px;
  top: 26px;
}

.direction-1-animation .left-shape-pen {
  position: absolute;
  width: 59px;
  max-width: 59px;
  height: 55px;
  max-height: 55px;
  left: 84px;
  top: 10px;
  padding: 16px 11px;
  background: #1f1f1f;
  border-radius: 14px;
}

.direction-1-animation .left-shape-word-T {
  position: absolute;
  width: 23px;
  max-width: 23px;
  height: 26px;
  max-height: 26px;
  left: 165px;
  top: 25px;
}

.direction-1-animation .right-shape {
  position: absolute;
  z-index: 2;
  top: 30px;
  right: -71px;
  width: 160px;
  max-width: 160px;
  height: 74px;
  max-height: 74px;
  background: #333333;
  box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  transition: 0.5s ease;
}

.direction-1-animation .right-shape-left-stripe {
  position: absolute;
  width: 35px;
  max-width: 35px;
  height: 32px;
  max-height: 32px;
  left: 20px;
  top: 21px;
}

.direction-1-animation .right-shape-middle-stripes {
  position: absolute;
  width: 22px;
  max-width: 22px;
  height: 17px;
  max-height: 17px;
  left: 75px;
  top: 28px;
}

.direction-1-animation .right-shape-right-stripes {
  position: absolute;
  width: 23px;
  max-width: 23px;
  height: 21px;
  max-height: 21px;
  left: 117px;
  top: 26px;
}

.direction-1-animation:hover .photo-gear {
  top: 362px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.direction-1-animation:hover .back-photo {
  top: -260px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.direction-1-animation:hover .left-shape {
  opacity: 0;
  transition: 0.5s;
}

.direction-1-animation:hover .right-shape {
  opacity: 0;
  transition: 0.5s;
}

.direction-1-animation:hover #hidden-page-1 {
  user-select: unset;
  opacity: 1;
  transition: 0.6s;
}

.direction-1-animation #hidden-page-1 {
  position: absolute;
  width: 100%;
  max-width: 460px;
  height: 100%;
  max-height: 359px;
  top: 0;
  left: 0;
  background: #1f1f1f;

  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  margin: 0;
  font-weight: 600;
  font-size: 18px;
  line-height: 130%;
  color: #ffffff;
  opacity: 0;

  user-select: none;
  z-index: 2;
  transition: 0.3s ease;
}

.hidden-pages-text {
  font-family: 'Gilroy-Bold';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 131px;
  align-items: center;
  font-size: 18px;
  display: flex;
  flex-direction: row;
}

.hidden-pages-text .points {
  position: relative;
  top: -10px;
  right: 6px;
}

.direction-1-animation a {
  text-decoration: none;
}

.direction-left-animation {
  position: relative;
  width: 460px;
  max-width: 460px;
  height: 359px;
  max-height: 359px;
  background: #ffffff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  margin-right: 140px;
}

.direction-left-animation .direction-up-panel {
  position: absolute;
  width: 201px;
  max-width: 201px;
  height: 75px;
  max-height: 75px;
  opacity: 1;
  top: 40px;
  left: -71px;
  background: #ffffff;
  box-shadow: 0px 5px 36px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  transition: 0.5s ease;
}

.direction-left-animation .phones-container {
  position: absolute;
  width: 100%;
  max-width: 460px;
  height: 100%;
  max-height: 359px;
  overflow: hidden;
}

.direction-left-animation #align-left {
  position: absolute;
  width: 24px;
  max-width: 24px;
  height: 24px;
  max-height: 24px;
  left: 30px;
  top: 26px;
}

.direction-left-animation #align-center {
  position: absolute;
  width: 55px;
  max-width: 55px;
  height: 55px;
  max-height: 55px;
  left: 73px;
  top: 10px;
  background: #916bef;
  border-radius: 14px;
  padding: 16px 18px 15px 17px;
}

.direction-left-animation #align-right {
  position: absolute;
  width: 24px;
  max-width: 24px;
  height: 24px;
  max-height: 24px;
  left: 147px;
  top: 26px;
}

.direction-left-animation:hover .direction-up-panel {
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.direction-left-animation .phones {
  position: absolute;
  width: 231px;
  max-width: 231px;
}
.direction-left-animation .phone-1 {
  left: 43px;
  top: 149px;
  transition: 0.5s ease;
}

.direction-left-animation:hover .phone-1 {
  top: 360px;
  transition: 0.5s;
}

.direction-left-animation .phone-2 {
  left: 241px;
  top: 29px;
  transition: 0.5s ease;
}

.direction-left-animation:hover .phone-2 {
  top: -260px;
  transition: 0.5s;
}

.hidden-page-2 {
  background: #ffffff;
  color: #333333;
}

.direction-left-animation a {
  text-decoration: none;
}

.directions {
  position: relative;
  height: max-content;
  max-height: 359px;
  margin-bottom: 100px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.direction-left-animation:hover
  + .directions-text-animation
  .direction-text-animation-title {
  color: #916bef;
  transition: 0.5s;
}

.directions-text-animation-hover h2 {
  color: #916bef;
  transition: 0.5s;
}

.direction-right-animation {
  position: relative;
  width: 460px;
  max-width: 460px;
  height: 359px;
  max-height: 359px;
  background: #d5c3ff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  margin-left: 140px;
}

.directions-photos {
  position: absolute;
  border-radius: 30px;
  width: 460px;
  max-width: 460px;
  height: 359px;
  max-height: 359px;
  overflow: hidden;
}

.direction-right-animation #direction-3-photo-1 {
  width: 241px;
  max-width: 241px;
  height: 205px;
  max-height: 205px;
  position: absolute;
  left: -79px;
  top: 34px;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

.direction-right-animation #direction-3-photo-2 {
  position: absolute;
  width: 433px;
  max-width: 433px;
  height: 137px;
  max-height: 137px;
  left: 151px;
  top: 190px;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

.direction-3-panel-1 {
  position: absolute;
  width: 182px;
  max-width: 182px;
  height: 69px;
  max-height: 69px;
  opacity: 1;
  top: 250px;
  left: -71px;
  background: #ffffff;
  box-shadow: 0px 5px 36px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  transition: 0.5s ease;
}

.direction-3-panel-1 #align-left {
  position: absolute;
  width: 50px;
  max-width: 50px;
  max-height: 46px;
  top: 11px;
  left: 23px;
  background: #1f1f1f;
  border-radius: 14px;
  padding: 13px 14px 12px 13px;
}

.direction-3-panel-1 #align-center {
  position: absolute;
  width: 21px;
  max-width: 21px;
  height: 23px;
  max-height: 23px;
  top: 24px;
  left: 95px;
}

.direction-3-panel-1 #align-right {
  position: absolute;
  width: 23px;
  max-width: 23px;
  height: 21px;
  max-height: 21px;
  top: 25px;
  left: 139px;
}

.direction-3-panel-2 {
  position: absolute;
  width: 340px;
  max-width: 340px;
  height: 69px;
  max-height: 69px;
  top: 50px;
  left: 187px;
  background: #ffffff;
  box-shadow: 0px 6px 41px rgba(0, 0, 0, 0.08);
  border-radius: 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: 0.5s ease;
}

.direction-3-panel-2 h2 {
  margin: 0;
  font-weight: 400;
  font-size: 25px;
  line-height: 30px;
  color: #333333;
  margin-left: 23px;
}

.direction-3-panel-2 img {
  width: 25px;
  max-width: 25px;
  height: 25px;
  max-height: 25px;
  margin-right: 36px;
}

.direction-right-animation .hidden-pages {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: 100%;
  max-height: 359px;
  background: #d5c3ff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  margin: 0;
  font-family: 'Gilroy-Bold';
  font-weight: 600;
  font-size: 18px;
  line-height: 130%;
  color: #333333;
  opacity: 0;
  user-select: none;
  z-index: 1;
  transition: 0.3s ease;
}

.direction-right-animation a {
  text-decoration: none;
}

.direction-right-animation:hover .direction-3-panel-1 {
  opacity: 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.direction-right-animation:hover .direction-3-panel-2 {
  opacity: 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.direction-right-animation:hover .hidden-pages {
  -webkit-user-select: unset;
  -moz-user-select: unset;
  -ms-user-select: unset;
  user-select: unset;
  opacity: 1;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}

.direction-right-animation:hover #direction-3-photo-1 {
  left: -60%;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.direction-right-animation:hover #direction-3-photo-2 {
  left: 100%;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

#direction-4 {
  background: #1f1f1f;
}

.directions-photos .circles {
  position: absolute;
  width: 240px;
  max-width: 240px;
  height: 293px;
  max-height: 293px;
  left: 266px;
  top: 94px;
  transition: 0.5s ease;
}

.directions-photos .images_all {
  position: absolute;
  width: 183px;
  max-width: 183px;
  top: 34px;
  left: 47px;
  transition: 0.5s ease;
}

.direction-left-animation:hover .circles {
  top: 320px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.direction-left-animation:hover .images_all {
  top: -335px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.direction-4-panel {
  position: absolute;
  width: 208px;
  max-width: 208px;
  height: 69px;
  max-height: 69px;
  top: 42px;
  left: 308px;
  background: #333333;
  box-shadow: 0px 5px 34px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  transition: 0.5s ease;
}

.direction-4-panel .diagram-1 {
  position: absolute;
  width: 45px;
  max-width: 45px;
  height: 25px;
  max-height: 25px;
  top: 23px;
  left: 20px;
}

.direction-4-panel .diagram-2 {
  position: absolute;
  width: 25px;
  max-width: 25px;
  height: 28px;
  max-height: 28px;
  top: 20px;
  left: 87px;
}

.direction-4-panel .diagram-3 {
  position: absolute;
  width: 49px;
  max-width: 49px;
  height: 49px;
  max-height: 49px;
  top: 10px;
  left: 139px;
}

.direction-left-animation:hover .direction-4-panel {
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.direction-left-animation:hover .hidden-pages {
  user-select: unset;
  opacity: 1;
  transition: 0.6s;
  /* transform: scale(1.01); */
}

.direction-left-animation .hidden-pages {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: 100%;
  max-height: 359px;
  background: #ffffff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  margin: 0;
  font-family: 'Gilroy-Bold';
  font-weight: 600;
  font-size: 18px;
  line-height: 130%;
  color: #333333;
  opacity: 0;
  user-select: none;
  z-index: 1;
  transition: 0.3s ease;
}

.hidden-pages-text b {
  font-size: 30px;
  color: #916bef;
}

.direction-left-animation:hover .hidden-pages {
  user-select: unset;
  opacity: 1;
  transition: 0.6s;
}

#hidden-page-4 {
  background: #1f1f1f;
  color: #ffffff;
}

#direction-5 {
  background: #ffffff;
}

.direction-5-horn {
  position: absolute;
  width: 395px;
  max-width: 395px;
  height: 268px;
  max-height: 268px;
  top: 35px;
  left: 26px;
  transition: 0.5s ease;
}

.direction-5-panel {
  position: absolute;
  top: 250px;
  left: -75px;
  width: 200px;
  max-width: 200px;
  height: 69px;
  max-height: 69px;
  background: #ffffff;
  box-shadow: 0px 8px 58px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  transition: 0.5s ease;
}

.direction-5-panel .calender-1 {
  position: absolute;
  width: 25px;
  max-width: 25px;
  width: 25px;
  max-height: 25px;
  top: 21px;
  left: 28px;
}

.direction-5-panel .calender-2 {
  position: absolute;
  width: 52px;
  max-width: 52px;
  height: 49px;
  max-height: 49px;
  top: 10px;
  left: 72px;
}

.direction-5-panel .calender-3 {
  position: absolute;
  width: 25px;
  max-width: 25px;
  width: 25px;
  max-height: 25px;
  top: 21px;
  left: 147px;
}

.direction-right-animation:hover .direction-5-horn {
  top: -270px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.direction-right-animation:hover .direction-5-panel {
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

#hidden-page-5 {
  background: #ffffff;
  color: #333333;
}

#direction-6 {
  background: #d5c3ff;
}

#direction-6 .message-up {
  position: absolute;
  width: 348px;
  max-width: 348px;
  height: 229px;
  max-height: 229px;
  top: 26px;
  left: 42px;
  transition: 0.5s ease;
}

#direction-6 .message-down {
  position: absolute;
  width: 364px;
  max-width: 364px;
  height: 221px;
  max-height: 221px;
  top: 150px;
  left: 81px;
  transition: 0.5s ease;
}

.direction-6-panel {
  position: absolute;
  width: 185px;
  max-width: 185px;
  height: 69px;
  max-height: 69px;
  top: 40px;
  left: -85px;
  background: #ffffff;
  box-shadow: 0px 5px 36px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  transition: 0.5s ease;
}

.direction-6-panel .user-left {
  position: absolute;
  width: 51px;
  max-width: 51px;
  height: 51px;
  max-height: 51px;
  top: 9px;
  left: 20px;
}

.direction-6-panel .user-middle {
  position: absolute;
  width: 30px;
  max-width: 30px;
  height: 30px;
  max-height: 30px;
  top: 19px;
  left: 89px;
}

.direction-6-panel .user-right {
  position: absolute;
  width: 30px;
  max-width: 30px;
  height: 30px;
  max-height: 30px;
  top: 19px;
  left: 137px;
}

#hidden-page-6 {
  background: #d5c3ff;
}

.direction-left-animation:hover .direction-6-panel {
  opacity: 0;
  transition: 0.5s;
}

#direction-6:hover .message-up {
  top: -240px;
  transition: 0.5s;
}

#direction-6:hover .message-down {
  top: 360px;
  transition: 0.5s;
}

#direction-7 {
  background: #1f1f1f;
}

#direction-7 .all-figure {
  position: absolute;
  width: 397px;
  max-width: 397px;
  height: 321px;
  max-height: 321px;
  top: 43px;
  left: 5px;
  transition: 0.5s ease;
}

.direction-7-panel {
  position: absolute;
  width: 248px;
  max-width: 248px;
  height: 77px;
  max-height: 77px;
  top: 36px;
  left: 307px;
  background: #333333;
  box-shadow: 0px 5px 34px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  transition: 0.5s ease;
}

.direction-7-panel .user-dir-7 {
  position: absolute;
  width: 50px;
  max-width: 50px;
  height: 50px;
  max-height: 50px;
  top: 14px;
  left: 21px;
}

.direction-7-panel .lines {
  position: absolute;
  width: 125px;
  max-width: 125px;
  height: 50px;
  max-height: 50px;
  top: 14px;
  left: 90px;
}

.direction-7-panel .lines-2 {
  display: none;
}

.direction-right-animation:hover .direction-7-panel {
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

#hidden-page-7 {
  background: #1f1f1f;
  color: #ffffff;
}

#direction-7:hover .all-figure {
  top: 360px;
  transition: 0.5s;
}

#direction-8 .words-LO {
  position: absolute;
  width: 201px;
  max-width: 201px;
  height: 127px;
  max-height: 127px;
  top: 161px;
  left: 38px;
  transition: 0.5s ease;
}

#direction-8 .words-GO {
  position: absolute;
  width: 310px;
  max-width: 310px;
  height: 356px;
  max-height: 356px;
  left: 225px;
  top: -69px;
  transition: 0.5s ease;
}

.direction-8-panel-left {
  position: absolute;
  width: 199px;
  max-width: 199px;
  height: 63px;
  max-height: 63px;
  top: 40px;
  left: -56px;
  background: #ffffff;
  box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  transition: 0.5s ease;
}

.direction-8-panel-left .square-1 {
  position: absolute;
  width: 26px;
  max-width: 26px;
  height: 26px;
  max-height: 26px;
  top: 18px;
  left: 20px;
}

.direction-8-panel-left .square-2 {
  position: absolute;
  width: 26px;
  max-width: 26px;
  height: 26px;
  max-height: 26px;
  top: 18px;
  left: 64px;
}

.direction-8-panel-left .square-3 {
  position: absolute;
  width: 41px;
  max-width: 41px;
  height: 41px;
  max-height: 41px;
  top: 11px;
  left: 102px;
}

.direction-8-panel-left .square-4 {
  position: absolute;
  width: 26px;
  max-width: 26px;
  height: 26px;
  max-height: 26px;
  top: 18px;
  left: 154px;
}

.direction-8-panel-down {
  position: absolute;
  width: 194px;
  max-width: 194px;
  height: 69px;
  max-height: 69px;
  top: 309px;
  left: 200px;
  background: #ffffff;
  box-shadow: 0px 6px 42px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  transition: 0.5s ease;
}

.direction-8-panel-down .cursor {
  position: absolute;
  width: 35px;
  max-width: 35px;
  height: 24px;
  max-height: 24px;
  top: 23px;
  left: 25px;
}

.direction-8-panel-down .connection {
  position: absolute;
  width: 52px;
  max-width: 52px;
  height: 49px;
  max-height: 49px;
  top: 10px;
  left: 76px;
}

.direction-8-panel-down .rhombus {
  position: absolute;
  width: 22px;
  max-width: 22px;
  height: 22px;
  max-height: 22px;
  top: 23px;
  left: 147px;
}

.direction-left-animation:hover .direction-8-panel-left {
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.direction-left-animation:hover .direction-8-panel-down {
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

#direction-8:hover .words-LO {
  left: -210px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

#direction-8:hover .words-GO {
  left: 100%;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

#direction-9 .word-T {
  position: absolute;
  width: 124px;
  max-width: 124px;
  height: 146px;
  max-height: 146px;
  top: 33px;
  left: 31px;
  transition: 0.5s ease;
}

#direction-9 .lines {
  position: absolute;
  width: 196px;
  max-width: 196px;
  height: 120px;
  max-height: 120px;
  top: 185px;
  left: 204px;
  transition: 0.5s ease;
}

.direction-9-panel {
  position: absolute;
  width: 216px;
  max-width: 216px;
  height: 69px;
  max-height: 69px;
  top: 50px;
  left: 317px;
  background: #ffffff;
  box-shadow: 0px 7px 49px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  transition: 0.5s ease;
}

.direction-9-panel .first-a {
  position: absolute;
  width: 18px;
  max-width: 18px;
  height: 18px;
  max-height: 18px;
  top: 27px;
  left: 19px;
}

.direction-9-panel .second-a {
  position: absolute;
  width: 49px;
  max-width: 49px;
  height: 49px;
  max-height: 49px;
  top: 10px;
  left: 54px;
  background: #1f1f1f;
  border-radius: 16px;
  padding: 16px;
}

.direction-9-panel .third-a {
  position: absolute;
  width: 23px;
  max-width: 23px;
  height: 24px;
  max-height: 24px;
  top: 21px;
  left: 119px;
}

.direction-9-panel .forth-a {
  position: absolute;
  width: 23px;
  max-width: 23px;
  height: 23px;
  max-height: 23px;
  top: 22px;
  left: 174px;
}

.direction-right-animation:hover .direction-9-panel {
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

#direction-9:hover .word-T {
  top: -160px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

#direction-9:hover .lines {
  top: 370px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

#direction-10 {
  background: #1f1f1f;
}

#direction-10 .all-figure {
  position: absolute;
  width: 464px;
  max-width: 464px;
  height: 414px;
  max-height: 414px;
  top: 41px;
  left: -51px;
  transition: 0.5s ease;
}

.direction-10-panel {
  position: absolute;
  width: 195px;
  max-width: 195px;
  height: 69px;
  max-height: 69px;
  top: 250px;
  left: 360px;
  background: #333333;
  box-shadow: 0px 5px 34px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  transition: 0.5s ease;
}

.direction-10-panel .left-lines {
  position: absolute;
  width: 56px;
  max-width: 56px;
  height: 49px;
  max-height: 49px;
  top: 10px;
  left: 20px;
}

.direction-10-panel .middle-lines {
  position: absolute;
  width: 22px;
  max-width: 22px;
  height: 19px;
  max-height: 19px;
  top: 24px;
  left: 94px;
}

.direction-10-panel .right-lines {
  position: absolute;
  width: 22px;
  max-width: 22px;
  height: 19px;
  max-height: 19px;
  top: 24px;
  left: 149px;
}

#hidden-page-10 {
  background: #1f1f1f;
  color: #ffffff;
}

.direction-left-animation:hover .direction-10-panel {
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

#direction-10:hover .all-figure {
  left: -420px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.direction-10 {
  margin-bottom: 200px;
}

/* -------------------------------------------------------- */
.contact-us {
  position: relative;
}

.thanks-contact-us {
  position: absolute !important;
  top: 0;
  display: none;
}

.thanks-contact-us h3 {
  width: 489px;
}

.contact-us-container {
  position: relative;
  margin: 0 auto;
  width: 1360px;
  max-width: 1360px;
  height: 451px;
  max-height: 451px;
  background: #1f1f1f;
  -webkit-box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  overflow: hidden;
}

.contact-us-container h2 {
  position: absolute;
  top: 100px;
  left: 100px;
  font-family: 'Gilroy-Bold';
  line-height: 89px;
  color: #ffffff;
}

.form-contact-us {
  position: relative;
  top: 230px;
  left: 100px;
  width: 909px;
  max-width: 909px;
  height: 60px;
  max-height: 60px;
}

div.wpcf7 .ajax-loader {
  display: none !important;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  display: none !important;
}

.contact-us-container .wpcf7-not-valid-tip {
  position: absolute;
  top: -70%;
  left: 0%;
  width: max-content;
}

.contact-us-container .wpcf7-form-control-wrap {
  position: initial !important;
}

.form-contact-us p {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.form-contact-us .contact {
  width: 310px;
  max-width: 310px;
  height: 60px;
  max-height: 60px;
  background: #ffffff;
  border-radius: 15px;
  padding: 30px;
}

.form-contact-us input {
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  color: #868686;
}

.form-contact-us input::placeholder {
  position: relative;
}

.form-contact-us .submit-contact {
  position: relative;
  width: 229px;
  max-width: 229px;
  height: 60px;
  max-height: 60px;
  background: #916bef;
  box-shadow: 0px 5px 37px rgba(0, 0, 0, 0.15);
  border-radius: 15px;
  color: #ffffff;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  border: none;
  cursor: pointer;
  transition: 0.3s;
}

.form-contact-us .submit-contact:hover {
  background: #a88af2;
  transition: 0.3s;
}

.contact-us-container h3 {
  position: relative;
  left: 100px;
  top: 250px;
  color: #f6f6f6;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
}

.contact-us-container .wb-page {
  position: absolute;
  width: 618px;
  max-width: 618px;
  height: 300px;
  max-height: 300px;
  left: 1054px;
  top: -46px;
}

.contact-us-container .focus-page {
  position: absolute;
  width: 536px;
  max-width: 536px;
  height: 170px;
  max-height: 170px;
  left: 910px;
  top: 325px;
}

.contact-us-panel {
  position: absolute;
  width: 219px;
  max-width: 219px;
  height: 75px;
  max-height: 75px;
  top: 63px;
  left: 954px;
  background: #333333;
  box-shadow: 0px 5px 37px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
}

.contact-us-panel .cursor {
  position: absolute;
  width: 37px;
  max-width: 37px;
  height: 25px;
  max-height: 25px;
  top: 25px;
  left: 29px;
}

.contact-us-panel .pen {
  position: absolute;
  width: 59px;
  max-width: 59px;
  height: 55px;
  max-height: 55px;
  top: 10px;
  left: 86px;
}

.contact-us-panel .rhombus {
  position: absolute;
  width: 25px;
  max-width: 25px;
  height: 25px;
  max-height: 25px;
  top: 24px;
  left: 167px;
}

/* ---------------------------------- */

.team-container {
  position: relative;
  width: 1400px;
  max-width: 1400px;
  height: max-content;
  margin-top: 200px;
  display: flex;
  flex-direction: row;
}

.team-text {
  position: relative;
  width: 556px;
  max-width: 556px;
  height: max-content;
  top: 329px;
}

.team-headline h2 {
  position: absolute;
  top: 200px;
  font-family: 'Gilroy-Bold';
  line-height: 89px;
  color: #333333;
}

.team-text h3 {
  font-weight: 400;
  font-size: 18px;
  line-height: 130%;
  margin-bottom: 59px;
  color: #333333;
}

.more-employees {
  color: #ffffff;
  padding: 19px 25px;
  text-decoration: none;
  background: #916bef;
  border-radius: 20px;
  font-family: 'Gilroy-Semibold';
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  transition: 0.3s;
}

.more-employees:hover {
  background: #a88af2;
  transition: 0.3s;
}

.team-photo {
  position: relative;
  margin-left: 94px;
  width: 700px;
  max-width: 700px;
  height: 720px;
  max-height: 720px;
  font-family: 'Gilroy-Semibold';
  font-weight: 600;
  font-size: 18px;
  line-height: 130%;
  color: #333333;
  display: flex;
  flex-direction: row;
}

.team-name {
  width: max-content;
  padding: 18px;
  background: #ffffff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 15px;
}

.gen-dir img,
.Chief-Executive-Officer img,
.ProjectManager img {
  width: 140px;
  max-width: 140px;
  height: 140px;
  max-height: 140px;
}

.supervisor-design img {
  width: 120px;
  max-width: 120px;
  height: 120px;
  max-height: 120px;
}

.team-photo .row-2 img {
  width: 160px;
  max-width: 160px;
  height: 160px;
  max-height: 160px;
}

.gen-dir {
  position: relative;
  left: 40px;
}

.supervisor-design {
  position: relative;
  top: 190px;
}

.top-margin-team-name,
.top-margin-team-img img {
  position: relative;
  top: 40px;
}

.supervisor-SEO {
  position: relative;
  top: 280px;
  left: -40px;
}

.supervisor-SEO-name {
  position: relative;
  top: 130px;
}

.ProjectManager {
  position: relative;
  top: 220px;
  left: 19px;
}

/* Numbers block */
.numbers-block {
  margin-top: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  width: max-content;
}

.numbers-block .row-1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  height: 864px;
  max-height: 864px;
}

.numbers-block .headline {
  font-family: 'Gilroy-Bold';
  line-height: 120%;
  width: 1053px;
  max-width: 1053px;
  color: #333333;
}

.numbers-block .bg-shape {
  position: relative;
  width: 1060px;
  max-width: 1060px;
  height: 428px;
  max-height: 428px;
  background: #1f1f1f;
  border-radius: 30px;
  left: 100px;
  top: 40px;
  overflow: hidden;
}

.numbers-block .code-shape {
  position: absolute;
  width: 261px;
  left: 46px;
  top: -4px;
}

.numbers-block .figure-bg {
  position: absolute;
  width: 963px;
  left: 103px;
  top: -123px;
}

.numbers-block .text-block {
  position: relative;
  margin-top: -86px;
  padding: 40px;
  width: 560px;
  max-width: 560px;
  height: 264px;
  max-height: 264px;
  background: #ffffff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
}

.numbers-block .text-block h3 {
  width: 480px;
  max-width: 480px;
  font-weight: 400;
  font-size: 18px;
  line-height: 23px;
  color: #333333;
}

.numbers-block .row-2 {
  position: relative;
  left: 0;
  width: 306px;
  max-width: 306px;
  min-width: 306px;
  height: 682px;
  max-height: 682px;
  background: #ffffff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  padding: 40px;
}

.numbers-block .row-2 .out-num {
  color: #916bef;
  font-family: 'Gilroy-Bold';
  font-weight: 700;
  font-size: 96px;
  line-height: 119px;
}

.numbers-block .row-2 h2 {
  font-weight: 400;
  font-size: 18px;
  line-height: 23px;
  color: #333333;
}

.numbers-block .row-2 #num-2,
.numbers-block .row-2 #num-3 {
  margin-top: 50px;
}

/* ------------------------------------------------------ */

.benefits-block {
  margin-top: 200px;
  display: flex;
  flex-direction: column;
  width: max-content;
}

.benefits-rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns:
    466px
    466px
    428px;
}

.benefits-block .headline {
  line-height: 89px;
  color: #333333;
  font-family: 'Gilroy-Bold';
}

.benefits-block .row {
  display: flex;
  flex-direction: row;
  margin-top: 40px;
  width: max-content;
}

.row:last-child {
  grid-column: auto / span 2;
}

.benefits-list {
  position: absolute;
  width: 50px;
  max-width: 50px;
  height: 50px;
  max-height: 50px;
  background: #916bef;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 15px;
  padding: 15px;
  transition: 0.3s ease;
}

.benefits-block .row h2 {
  font-family: 'Gilroy-Bold';
  margin-left: 70px;
  font-weight: 700;
  font-size: 28px;
  line-height: 35px;
  color: #333333;
  transition: 0.3s ease;
}

.benefits-block h3 {
  margin-left: 70px;
  margin-top: 20px;
  font-weight: 400;
  font-size: 18px;
  line-height: 130%;
  color: #333333;
}

.benefits-block .col-end {
  width: 426px;
  max-width: 426px;
  height: 182px;
  max-height: 182px;
}

.benefits-block .col-1,
.benefits-block .col-2,
.benefits-block .col-3 {
  width: 426px;
  max-width: 426px;
  height: 182px;
  max-height: 182px;
}

.benefits-block .row-2 .col-1 {
  max-width: 380px;
}

.benefits-block .row-3 .col-1 {
  width: 426px;
  max-width: 426px;
  height: 239px;
  max-height: 239px;
}

.benefits-block .row-3 .col-2 h3 {
  margin-top: 0px;
  margin-left: 0px;
}

.benefits-block .row-3 .col-2 {
  margin: 0;
  margin-top: 62px;
  width: 625px;
  max-width: 625px;
  height: 115px;
  max-height: 115px;
  margin-left: 40px;
}

.benefits-block .col:hover {
  cursor: pointer;
}

.benefits-block .col:hover h2 {
  color: #916bef;
}

.benefits-block .col:hover img {
  transform: scale(1.1);
  transition: 0.3s;
}

/* ----------------------------------------- */

.discussion-block-container {
  width: max-content;
}

.discussion-block-container .wpcf7-not-valid-tip {
  position: absolute;
  top: -10px;
  left: 0;
}

.discussion-block-container .wpcf7-form-control-wrap {
  position: initial;
}

.discussion-block {
  position: relative;
  margin-top: 200px;
  max-width: 1360px;
  width: 1360px;
  max-height: 451px;
  height: 451px;
  background: #1f1f1f;
  border-radius: 30px;
  overflow: hidden;
}

.discussion-block .discussion-text {
  padding-top: 100px;
  padding-left: 100px;
}

.discussion-block .discussion-text .block-all-titles {
  font-family: 'Gilroy-Bold';
  line-height: 89px;
  color: #ffffff;
}

.discussion-block .discussion-text h2 {
  font-weight: 400;
  font-size: 18px;
  line-height: 130%;
  margin-top: 20px;
  color: #ffffff;
}

.discussion-text .contact-us {
  text-decoration: none;
  border: none;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  color: #ffffff;
  background: #916bef;
  border-radius: 15px;
  margin-top: 40px;
  padding: 19px 40px;
  cursor: pointer;
  transition: 0.3s;
}

.discussion-text .contact-us:hover {
  background: #a88af2;
  transition: 0.3s;
}

.discussion-block .wb {
  position: absolute;
  width: 609px;
  max-width: 609px;
  height: 301px;
  max-height: 301px;
  top: 112px;
  left: 901px;
}

.discussion-block .code-shape {
  position: absolute;
  padding: 19px;
  width: 253px;
  max-width: 253px;
  height: 122px;
  max-height: 122px;
  background: #333333;
  box-shadow: 0px 5px 37px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  top: 35px;
  left: 987px;
}

.discussion-block .shape-down {
  position: absolute;
  width: 217px;
  max-width: 217px;
  height: 75px;
  max-height: 75px;
  top: 335px;
  left: 840px;
}

.discussion_modal {
  position: fixed;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;

  width: 960px;
  height: 701px;

  z-index: 20;
  display: none;

  background: #1f1f1f;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  font-size: 18px;
  line-height: 22px;
}

.discussion_modal.is-show,
.discussion_overlay.is-show {
  display: block;
}

.discussion_modal_cross {
  position: absolute;
  top: -22px;
  right: -22px;
  fill: #ffffff;

  width: 22px;
  height: 22px;
  cursor: pointer;
}

.discussion_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 10;
  display: none;
}

.discussion_modal_box {
  width: 100%;
  height: 100%;
  padding: 100px;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
}

.discussion-modal-headline {
  font-family: 'Gilroy-Bold';
  font-size: 72px;
  line-height: 89px;
}

.discussion-modal-inputs {
  display: flex;
  flex-direction: row;
  gap: 40px;
  position: relative;
}

.discussion-modal-input {
  width: 360px;
  height: 60px;
  border-radius: 15px;
  padding: 19px 30px;
  margin-top: 20px;
}

.discussion-modal-textarea textarea {
  width: 760px;
  max-width: 760px;
  min-width: 760px;
  height: 192px;
  max-height: 192px;
  min-height: 192px;
  border-radius: 15px;
  padding: 30px;
  margin-top: 20px;
}

.discussion-button-container {
  margin-top: 39px;
  text-align: initial;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.discussion-button-container .wpcf7-submit {
  text-decoration: none;
  color: #ffffff;
  background: #916bef;
  border-radius: 15px;
  padding: 19px 40px;
  margin-right: 20px;
  transition: 0.3s;
}

.discussion-button-container .wpcf7-submit:hover {
  background: #a88af2;
  transition: 0.3s;
}

.thanks-discussion-block-text {
  position: absolute;
  top: 55%;
  left: 25%;
  width: 50%;
  text-align: center;
  display: none;
}

.discussion-button-container-text {
  width: 511px;
}

.discussion-focus-page {
  position: absolute;
  width: 535px;
  top: 601px;
  left: 558px;
}

.discussion-code-shape {
  position: absolute;
  width: 253px;
  top: 640px;
  left: -52px;
}

.discussion-wf {
  position: absolute;
  width: 521px;
  top: -35px;
  left: 720px;
}

.discussion-shape-down {
  position: absolute;
  width: 217px;
  top: 45px;
  left: 702px;
}
/* ------------------------------------------------- */

.infographics-block {
  margin-top: 200px;
  display: flex;
  flex-direction: column;
  margin-bottom: 200px;
  width: max-content;
}

.infographics-block .headline {
  line-height: 89px;
  margin-bottom: 40px;
  color: #333333;
}

.infographics-block .infographics-text h2 {
  font-weight: 400;
  font-size: 18px;
  line-height: 130%;
  color: #333333;
}

.infographics-block .col-1 {
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  width: max-content;
}

.infographics-block .col-2 {
  width: max-content;
}

.infographics-block .step-1 {
  width: 373px;
  max-width: 373px;
  height: 116px;
  max-height: 116px;
  margin-right: 185px;
}

.infographics-block .steps {
  display: flex;
  flex-direction: row;
  padding: 40px;
  background: #ffffff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  align-items: center;
}

.infographics-block .steps h2 {
  font-family: 'Gilroy-Bold';
  font-weight: 700;
  font-size: 28px;
  line-height: 130%;
  margin-right: 20px;
  color: #333333;
  width: max-content;
}

.infographics-block .steps h3 {
  font-weight: 400;
  font-size: 18px;
  line-height: 130%;
  color: #333333;
}

.infographics-block .step-3 {
  width: 294px;
  max-width: 294px;
  height: 116px;
  max-height: 116px;
  margin-right: 264px;
  background: #ffffff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
}

.infographics-block .step-5 {
  width: 244px;
  max-width: 244px;
  height: 116px;
  max-height: 116px;
}

.infographics-block .col-2 img {
  width: 1156px;
  max-width: 1156px;
  margin-top: 40px;
  z-index: 1;
}

.infographics-block .col-3 {
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  width: max-content;
}

.infographics-block .step-2 {
  width: 340px;
  max-width: 340px;
  height: 116px;
  max-height: 116px;
  margin-right: 218px;
  margin-left: 279px;
}

.infographics-block .step-4 {
  width: 317px;
  max-width: 317px;
  height: 116px;
  max-height: 116px;
}

/* ------------------------------------------- */

.articles-block {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1400px;
  margin-bottom: 200px;
  max-height: 1200px;
}

.articles-block .headline h2 {
  font-family: 'Gilroy-Bold';
  line-height: 89px;
  margin-bottom: 0px;
}

.article-tab {
  width: max-content;
  text-decoration: none;
}

.article {
  position: relative;
  /* margin-top: 40px; */
  width: 660px;
  max-width: 660px;
  height: 505px;
  max-height: 505px;
  background: #ffffff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  padding: 40px;
}

.back-color-article {
  position: absolute;
  top: 0;
  left: 0;
  width: 660px;
  max-width: 660px;
  height: 267px;
  max-height: 267px;
  background: #d5c3ff;
  border-radius: 30px 30px 0px 0px;
  padding: 40px;
}

.back-color-article .article-hashtag {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #ffffff;
  width: max-content;
  background: #ccb7ff;
  border-radius: 30px;
  padding: 10px 25px;
}

.article-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 178px;
  margin-top: 254px;
  color: #333333;
}

.article-text .article-text-title {
  font-family: 'Gilroy-Bold';
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
  transition: 0.3s;
}

.article:hover .article-text .article-text-title {
  transition: 0.3s;
  color: #916bef;
}

.article-text .article-text-content {
  margin-top: 20px;
  font-weight: 400;
  font-size: 18px;
  line-height: 23px;
  overflow: hidden;
}

.article-text .article-text-date {
  margin-top: 20px;
  font-family: 'Gilroy-Semibold';
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
}

.article-2 .back-color-article {
  background: #1f1f1f;
}

.article-2 .back-color-article .article-hashtag {
  background: #474747;
  color: #ffffff;
}

.article-3 .back-color-article {
  background: #ffffff;
}

.article-3 .back-color-article .article-hashtag {
  background: #f6f6f6;
  color: #333333;
}

.articles-block .articles-button {
  font-family: 'Gilroy-Semibold';
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  line-height: 130%;
  color: #333333;
  position: relative;
  left: 5px;
  top: -10px;
}

.articles-block .articles-button:hover .articles-button-text {
  transition: 0.3s;
  color: #916bef;
}

.articles-block .articles-button-text::before {
  background-image: url('../img/cases/btnMore.svg');
  background-repeat: no-repeat;
  display: inline-block;
  content: '';
  background-size: 100%;
  width: 22px;
  height: 6px;
  position: relative;
  top: -2px;
  right: 9px;
}

/* -------------------------------------------- */
.question-block {
  display: flex;
  flex-direction: column;
  margin-bottom: 200px;
  width: max-content;
}

.question-block .headline h2 {
  line-height: 89px;
  color: #333333;
}

.tabs {
  margin-top: 40px;
  width: max-content;
}

.question-nav {
  position: relative;
  width: max-content;
  height: 54px;
  border: 1px solid #f6f6f6;
  border-radius: 15px;
  font-size: 0;
}
.question-tab {
  font-family: 'Gilroy';
  display: inline-block;
  position: relative;
  top: -3px;
  z-index: 1;
  text-decoration: none;
  text-align: center;
  color: #333333;
  cursor: pointer;

  font-size: 18px;
}
.question-nav .animation {
  position: absolute;
  height: 100%;
  top: 0;
  z-index: 0;
  transition: all 0.5s ease 0s;
  border-radius: 15px;
}
.question-tab:nth-child(1) {
  width: 163px;
}
.question-tab:nth-child(2) {
  width: 94px;
}
.question-tab:nth-child(3) {
  width: 218px;
}
.question-tab:nth-child(4) {
  width: 236px;
}
.question-tab:nth-child(5) {
  width: 169px;
}
.question-tab:nth-child(6) {
  width: 239px;
}
.question-tab:nth-child(1):hover ~ .animation {
  width: 163px;
  left: 0;
  background-color: #f6f6f6;
}
.question-tab:nth-child(2):hover ~ .animation {
  width: 94px;
  left: 163px;
  background-color: #f6f6f6;
}
.question-tab:nth-child(3):hover ~ .animation {
  width: 218px;
  left: 257px;
  background-color: #f6f6f6;
}
.question-tab:nth-child(4):hover ~ .animation {
  width: 236px;
  left: 475px;
  background-color: #f6f6f6;
}
.question-tab:nth-child(5):hover ~ .animation {
  width: 169px;
  left: 711px;
  background-color: #f6f6f6;
}
.question-tab:nth-child(6):hover ~ .animation {
  width: 239px;
  left: 880px;
  background-color: #f6f6f6;
}

.question-active {
  position: relative;
  top: -3px;
  border-radius: 15px;
  color: #ffffff;
  background: #916bef;
  line-height: 60px;
}

.tab {
  width: 1360px;
  max-width: 1360px;
}

.tab .acor-body {
  font-family: 'Gilroy';
  height: 0;
  box-sizing: border-box;
  transition: color 0.5s, padding 0.5s;
  overflow: hidden;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  color: #333333;
}

.tab .acor-body p {
  margin-bottom: 10px;
  padding: 20px 0px 30px 0px;
  width: 855px;
  max-width: 855px;
}

.tab label {
  font-family: 'Gilroy-Bold';
  cursor: pointer;
  background: #ffffff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  display: block;
  padding: 40px;
  color: #333333;
  font-weight: 700;
  font-size: 28px;
  line-height: 130%;
  box-sizing: border-box;
  transition: color 0.35s;
  margin-top: 40px;
}

.tab input {
  display: none;
}

.tab label:before {
  content: '';
  background: url(../img/questions-block/arrow.svg) no-repeat;
  width: 23px;
  height: 23px;
  background-size: 23px;
  float: right;
  margin-top: 7px;
}

.tab input:checked + label {
  color: #916bef;
  height: max-content;
}

.tab input:checked + label:before {
  transition: transform 0.24s;
  transform: rotate(90deg);
  transition: 0.5s;
}

.tab input:checked + label .acor-body {
  height: auto;
  color: #333333;
}

.tab label img {
  float: right;
}

/* ------------------------------------------- */

.request-block-container {
  width: max-content;
}
.request-block {
  position: relative;
  background: #ffffff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  width: max-content;
  margin-bottom: 200px;
  overflow: hidden;
}

.request-block .headline h2 {
  font-family: 'Gilroy-Bold';
  line-height: 89px;
  color: #333333;
  padding: 100px 0px 0px 100px;
}

.request-nav {
  position: relative;
  left: 100px;
  margin-top: 43px;
  width: max-content;
  height: 54px;
  border: 1px solid #f6f6f6;
  border-radius: 15px;
  font-size: 0;
}
.request-tab {
  font-family: 'Gilroy';
  display: inline-block;
  position: relative;
  top: -3px;
  z-index: 1;
  text-decoration: none;
  text-align: center;
  color: #333333;
  cursor: pointer;

  font-size: 18px;
}
.request-nav .animation {
  position: absolute;
  height: 100%;
  top: 0;
  z-index: 0;
  transition: all 0.5s ease 0s;
  border-radius: 15px;
}

.request-tab {
  width: 100%;
}

.request-nav .your-radio {
  display: inline-block;
  cursor: pointer;
}

.request-nav .your-radio span {
  cursor: pointer;
}

.request-nav .your-radio:nth-child(1) {
  width: 161px;
}
.request-nav .your-radio:nth-child(2) {
  width: 123px;
}
.request-nav .your-radio:nth-child(3) {
  width: 95px;
}
.request-nav .your-radio:nth-child(4) {
  width: 100px;
}
.request-nav .your-radio:nth-child(5) {
  width: 101px;
}
.request-nav .your-radio:nth-child(1):hover ~ .animation {
  width: 161px;
  left: 0;
  background-color: #f6f6f6;
}
.request-nav .your-radio:nth-child(2):hover ~ .animation {
  width: 123px;
  left: 161px;
  background-color: #f6f6f6;
}
.request-nav .your-radio:nth-child(3):hover ~ .animation {
  width: 95px;
  left: 284px;
  background-color: #f6f6f6;
}
.request-nav .your-radio:nth-child(4):hover ~ .animation {
  width: 100px;
  left: 379px;
  background-color: #f6f6f6;
}
.request-nav .your-radio:nth-child(5):hover ~ .animation {
  width: 101px;
  left: 479px;
  background-color: #f6f6f6;
}

.request-active {
  position: relative;
  top: -3px;
  border-radius: 15px;
  color: #ffffff;
  background: #916bef;
  line-height: 60px;
}

.request-form-container {
  margin-left: 100px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  padding-right: 100px;
}

.request-form input {
  padding: 19px 0px 19px 30px;
  border: none;
  width: 360px;
  max-width: 360px;
  height: 60px;
  max-height: 60px;
  background: #f6f6f6;
  border-radius: 15px;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
}

.request-form-name,
.request-form-phone {
  margin-right: 36px;
}

.request-textarea {
  border: none;
  width: 1160px;
  max-width: 1160px;
  height: 192px;
  max-height: 192px;
  background: #f6f6f6;
  border-radius: 15px;
  margin-top: 20px;
  padding: 30px;
  margin-bottom: 40px;
  resize: none;
}

.request-form-container textarea::placeholder {
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  color: #868686;
}

.request-block .pictures-block .pic {
  position: absolute;
  width: 452px;
  max-width: 452px;
  height: 1026px;
  max-height: 1026px;
  top: -71px;
  right: -164px;
}

.request-block .pictures-block .hidden-img {
  display: none;
}

.request-form-container .but-container {
  display: flex;
  flex-direction: row;
  margin-bottom: 100px;
  align-items: center;
}

.request-form-container .but-container input {
  border: none;
  font-family: 'Gilroy-Semibold';
  padding: 19px 40px;
  margin-right: 20px;
  background: #916bef;
  border-radius: 15px;
  color: #ffffff;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  transition: 0.3s;
  cursor: pointer;
}

.request-form-container .but-container input:hover {
  background: #a88af2;
  transition: 0.3s;
}

.request-form-container .but-container .but-container-text {
  color: #333333;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  width: 310px;
}

.request-block .block-up {
  position: absolute;
  width: 265px;
  max-width: 265px;
  height: 137px;
  max-height: 137px;
  top: 45px;
  left: 917px;
  box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
}

.request-block .block-down {
  position: absolute;
  width: 174px;
  max-width: 174px;
  height: 68px;
  max-height: 68px;
  left: 972px;
  bottom: 53px;
  box-shadow: 0px 8px 58px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
}

.request-block .wpcf7-not-valid-tip {
  position: absolute;
  top: 0;
  left: 300%;
}

.request-block .request-form {
  position: relative;
}

.request-block .wpcf7-form-control-wrap {
  position: initial;
}

.request-block span.wpcf7-list-item {
  margin: 0;
}

.request-block span.wpcf7-list-item input {
  display: none;
}

.thanks-request-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: none;
}

.thanks-request-block {
  margin-top: 0px !important;
}

.thanks-request-block .headline h2 {
  margin-top: 15%;
}

.thanks-request-block .headline div {
  margin-top: 40px;
  margin-left: 100px;
  font-size: 18px;
  line-height: 22px;
  width: 526px;
}

.request-block .wpcf7 form.sent .wpcf7-response-output {
  position: absolute;
  top: 0;
}

/* ----------------------------------------- */

.reviews-block {
  position: relative;
}

.reviews-block h2 {
  line-height: 89px;
  color: #333333;
}

.reviews-block .block-all-titles {
  margin-left: 260px;
}

.reviews-sliding .review-slide h2 {
  font-family: 'Gilroy-Bold';
  font-weight: 700;
  font-size: 28px;
  line-height: 35px;
  color: #333333;
  margin-bottom: 20px;
}

.reviews-sliding .review-slide h3 {
  font-family: 'Gilroy-Bold';
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  margin-top: 20px;
  color: #333333;
}

.reviews-sliding .review-slide textarea {
  width: 433px;
  max-width: 433px;
  height: 253px;
  max-height: 253px;
  padding-right: 20px;
  line-height: 23px;
  resize: none;
  border: none;
  outline: none;
  cursor: pointer;
}

.reviews-sliding .review-slide textarea::-webkit-scrollbar {
  width: 1.5px;
  background-color: #f6f6f6;
}

.reviews-sliding .review-slide textarea::-webkit-scrollbar-thumb {
  background-color: #333333;
}

.reviews-sliding {
  width: max-content;
  background: #ffffff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
}

.reviews-sliding .review-slide {
  width: 493px;
  max-width: 493px;
  height: 430px;
  max-height: 430px;
  padding: 40px 20px 42px 40px;
  cursor: pointer;
  font-size: 18px;
  line-height: 23px;
}

.reviews-block .owl-stage {
  padding-top: 40px;
  padding-bottom: 30px;
  margin-left: 14%;
  margin-bottom: 220px;
}

.reviews-block .reviews-more-button {
  font-family: 'Gilroy-Semibold';
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  line-height: 130%;
  color: #333333;
  position: relative;
  cursor: pointer;
  left: 1187px;
  top: -218px;
  z-index: 1;
}

.reviews-block .reviews-more-button:hover p {
  transition: 0.3s;
  color: #916bef;
}

.reviews-block .reviews-more-button p::before {
  background-image: url('../img/cases/btnMore.svg');
  background-repeat: no-repeat;
  display: inline-block;
  content: '';
  background-size: 100%;
  width: 22px;
  height: 6px;
  position: relative;
  top: -2px;
  right: 11.5px;
}

/*------------------------ footer ------------------------ */
.main-footer {
  border-radius: 30px 30px 0px 0px;
  padding: 100px 0px 100px 0px;
  background: #333333;
  display: flex;
  flex-direction: row;
  color: #ffffff;
}

.main-footer .contacts {
  position: relative;
  left: 280px;
  display: flex;
  flex-direction: column;
}

.main-footer .contacts .logo {
  width: 200px;
  max-width: 200px;
  height: 62px;
  max-height: 62px;
}

.main-footer .social-networks {
  width: 280px;
  max-width: 280px;
  height: 100px;
  max-height: 100px;
  display: flex;
  flex-direction: column;
  margin-top: 60px;
  margin-bottom: 40px;
}

.main-footer-container {
  padding: 0 15px;
  display: flex;
}

.soc-net-imgs img {
  width: 40px;
  max-width: 40px;
  height: 40px;
  max-height: 40px;
  margin-right: 20px;
  padding: 6px;
  height: max-content;
  background: #1f1f1f;
  background-image: linear-gradient(223.75deg, #1f1f1f 6.83%, #1f1f1f 92.5%);
  backface-visibility: hidden;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.4s linear;
}

.soc-net-row-1 {
  display: flex;
  margin-bottom: 20px;
}

.soc-net-row-2 {
  display: flex;
}

#footer_instagram:hover {
  background-image: linear-gradient(
    43.94deg,
    #eea054 16.16%,
    #d64763 50.11%,
    #b62a99 83.68%
  );
}

#footer_dribbble:hover {
  background: #ea4c89;
}

#footer_youtube:hover {
  background: #f40000;
}

#footer_vk:hover {
  background: #0077ff;
}

#footer_behance:hover {
  background: #1c66fb;
}

#footer_telegram:hover {
  background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#2aabee),
      color-stop(99.26%, #229ed9)
    ),
    #419fd9;
  background: linear-gradient(180deg, #2aabee 0%, #229ed9 99.26%), #419fd9;
}

#footer_whatsApp:hover {
  background: #0dc143;
}

#footer_skype:hover {
  background: #00aff0;
}

#footer_viber:hover {
  background: #7c509a;
}

#footer_facebook:hover {
  background: #4e6297;
}

.main-footer h3 {
}

.footer_contacts {
  font-weight: 400;
  font-size: 18px;
  line-height: 23px;
  margin-bottom: 10px;
  color: #ffffff;
  text-decoration: none;
  transition: 0.3s;
  cursor: pointer;
}

.footer_contacts:hover {
  color: #916bef;
  transition: 0.3s;
}

.headline_about_company h2 {
  font-family: 'Gilroy-Bold';
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
}

.about-company {
  position: relative;
  left: 600px;
}

.links_footer a {
  text-decoration: none;
  color: #ffffff;
  transition: 0.5s;
}

.links_footer a:hover {
  color: #916bef;
  transition: 0.5s;
}

.links-about-company {
  display: flex;
  flex-direction: column;
  font-weight: 400;
  font-size: 18px;
  line-height: 23px;
}

.links-about-company li {
  margin-top: 20px;
}

.footer-services {
  position: relative;
  left: 730px;
}

.links_footer .links {
  display: flex;
  flex-direction: column;
  font-weight: 400;
  font-size: 18px;
  line-height: 23px;
}

.links_footer .links_1 li {
  margin-top: 20px;
}

.services-links {
  display: flex;
  flex-direction: row;
}

.links_footer .links_2 {
  position: relative;
  top: 20px;
  left: 199px;
}

.links_footer .links_2 li {
  margin: 0;
  margin-bottom: 10px;
}

.down_footer {
  width: 100%;
  height: 63px;
  background: #1f1f1f;
  display: flex;
  flex-direction: row;
  color: #ffffff;
}

.down_footer h3 {
  font-weight: 400;
  font-size: 18px;
  line-height: 23px;
}

.down_footer .col-1 {
  margin-left: 280px;
}

.down_footer .cols {
  margin-top: 20px;
}

.down_footer .col-2 {
  width: 594px;
  max-width: 594px;
  display: flex;
  justify-content: space-between;
  margin-left: 431px;
}

.down_footer .col-2 a {
  text-decoration: none;
  color: #ffffff;
  transition: 0.5s;
  font-weight: 400;
  font-size: 18px;
  line-height: 23px;
}

.down_footer .col-2 a:hover {
  color: #916bef;
  transition: 0.5s;
}

.about_us_mobile_class ul {
  display: flex;
  flex-direction: column;
  max-width: 220px;
  max-height: 500px;
  overflow: hidden;
  overflow-y: scroll;
  gap: 10px;
}

.services_mobile_menu_class {
  position: relative;
  display: none;
}

.mobile-menu-services {
  position: absolute;
  width: 260px;
  max-height: 350px;
  margin-top: 24px;
  overflow: hidden;
  overflow-y: scroll;
  display: none;
}

.mobile-menu-services .sub-menu {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

.mobile-menu-services .sub-menu li .sub-menu li {
  margin-left: 20px;
}

.mobile-menu-services .sub-menu li .sub-menu li a {
  margin-left: 10px;
}

.mobile-menu-services .sub-menu li .sub-menu li::marker {
  content: url(../img/services-page/text-2/line.svg);
}
/* /footer */

/* ------------- media 1919 --------------------- */

@media (max-width: 1919px) {
  .block-all-titles {
    font-size: calc(51px + (72 - 51) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .all-list-text {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .margin_top_blocks {
    margin-top: calc(142px + (200 - 142) * ((100vw - 1366px) / (1920 - 1366)));
  }

  /* Header */
  .header {
    height: calc(87px + (123 - 87) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)))
      calc(57px + (80 - 57) * ((100vw - 1366px) / (1920 - 1366)));
    font-size: calc(12.8px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .logo img {
    width: calc(114px + (160 - 114) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(30px + (42 - 30) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .header_menu {
    gap: calc(35px + (50 - 35) * ((100vw - 1366px) / (1920 - 1366)));
    width: calc(289px + (407 - 289) * ((100vw - 1366px) / (1920 - 1366)));
    max-width: 407px;
    height: calc(16px + (23 - 16) * ((100vw - 1366px) / (1920 - 1366)));
    margin-left: calc(98px + (145 - 98) * ((100vw - 1366px) / (1920 - 1366)));
    margin-top: calc(-8px + (-14 - -8) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .all_services {
    flex: 0 0 calc(216px + (304 - 216) * ((100vw - 1366px) / (1920 - 1366)));
    margin-top: calc(-3px + (-8 - -3) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .all_services_button svg {
    width: calc(11px + (14 - 11) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(5px + (7 - 5) * ((100vw - 1366px) / (1920 - 1366)));
    margin: calc(8px + (10 - 8) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .header__phone {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
  }

  /* main-menu */
  .cross_close-menu {
    top: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
    right: calc(57px + (80 - 57) * ((100vw - 1366px) / (1920 - 1366)));
    width: calc(16px + (24 - 16) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(16px + (24 - 16) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .menu-list > li .services-arrow {
    width: calc(8px + (14 - 8) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(4px + (7 - 4) * ((100vw - 1366px) / (1920 - 1366)));
    margin-top: calc(7px + (10 - 7) * ((100vw - 1366px) / (1920 - 1366)));
    margin-left: calc(6px + (8 - 6) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .main-sub-menu .sub-menu-list {
    padding: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)))
      calc(199px + (280 - 199) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(85px + (123 - 85) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .menu-block-row {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(17px + (23 - 17) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .menu-block-row-1 {
    max-width: calc(235px + (330 - 235) * ((100vw - 1366px) / (1920 - 1366)));
    margin-right: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .menu-block-row-1 h2 {
    font-size: calc(20px + (28 - 20) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(26px + (36 - 26) * ((100vw - 1366px) / (1920 - 1366)));
    margin-bottom: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .menu-block-row-1-text {
    margin-bottom: calc(28px + (39 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .menu-block-row-1-button {
    padding: calc(13px + (19 - 13) * ((100vw - 1366px) / (1920 - 1366)))
      calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .menu-contacts-1 {
    margin-top: calc(67px + (99 - 67) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .menu-contacts {
    margin-top: calc(7px + (10 - 7) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .main-sub-menu .social-networks {
    margin-top: calc(14px + (21 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .menu-lvl-1-col {
    padding-bottom: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    min-width: calc(214px + (330 - 214) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .menu-lvl-1-col svg {
    width: calc(8px + (14 - 8) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(4px + (7 - 4) * ((100vw - 1366px) / (1920 - 1366)));
    left: -1px;
  }

  .menu-lvl-1-col li {
    margin-right: calc(7px + (9 - 7) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .menu-lvl-2-col svg {
    width: calc(8px + (14 - 8) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(4px + (7 - 4) * ((100vw - 1366px) / (1920 - 1366)));
    top: -2px;
  }

  .menu-block-row-3 {
    min-width: calc(214px + (300 - 214) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .menu-lvl-2-row {
    padding-bottom: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .menu-lvl-2-col a {
    margin-right: calc(7px + (9 - 7) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .menu-block-row-4 {
    width: calc(240px + (300 - 240) * ((100vw - 1366px) / (1920 - 1366)));
    min-height: calc(630px + (866 - 630) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .menu-lvl-3-row {
    top: 0px;
    gap: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }
  /* ///////////////// */

  .menu-block-lvl-1 {
    width: calc(213px + (300 - 213) * ((100vw - 1366px) / (1920 - 1366)));
    gap: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .menu-block-lvl-1 li {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .menu-block-lvl-1 li a {
    max-width: calc(175px + (240 - 175) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .menu-block-lvl-2 {
    width: calc(213px + (300 - 213) * ((100vw - 1366px) / (1920 - 1366)));
    margin-left: calc(
      28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366))
    ) !important;
  }

  .menu-block-lvl-2 > li {
    margin-bottom: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    max-width: calc(185px + (275 - 185) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .menu-block-lvl-3 {
    margin-left: calc(
      28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366))
    ) !important;
  }

  .menu-block-lvl-3 > li {
    margin-bottom: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    max-width: calc(213px + (300 - 213) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .menu-link-with-arrow::after {
    margin-left: calc(7px + (9 - 7) * ((100vw - 1366px) / (1920 - 1366)));
    width: calc(8px + (14 - 8) * ((100vw - 1366px) / (1920 - 1366)));
  }
  /* ///main-menu/// */

  /* main page */
  .main_page {
    margin-top: calc(100px + (180 - 100) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .main_page_container {
    width: calc(816px + (1148 - 816) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(350px + (495 - 350) * ((100vw - 1366px) / (1920 - 1366)));
  }

  /* font-buttons */
  .font_buttons {
    width: calc(132px + (186 - 132) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(49px + (69 - 49) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(7px + (10 - 7) * ((100vw - 1366px) / (1920 - 1366)))
      calc(11px + (16 - 11) * ((100vw - 1366px) / (1920 - 1366)))
      calc(7px + (10 - 7) * ((100vw - 1366px) / (1920 - 1366)))
      calc(8px + (12 - 8) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(440px + (619 - 440) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .font_buttons label svg {
    width: calc(19px + (27 - 19) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(13px + (19 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    margin-bottom: calc(3px + (0 - 3) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .font_buttons label {
    width: calc(33px + (47 - 33) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(35px + (49 - 35) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(10px + (14 - 10) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(10px + (15 - 10) * ((100vw - 1366px) / (1920 - 1366)))
      calc(7px + (10 - 7) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .font_buttons .item-1 label {
    padding: calc(11px + (16 - 11) * ((100vw - 1366px) / (1920 - 1366)))
      calc(9px + (13 - 9) * ((100vw - 1366px) / (1920 - 1366)))
      calc(10px + (14 - 10) * ((100vw - 1366px) / (1920 - 1366)))
      calc(9px + (13 - 9) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .font_buttons .item-3 label {
    padding: calc(10px + (15 - 10) * ((100vw - 1366px) / (1920 - 1366)))
      calc(6px + (9 - 6) * ((100vw - 1366px) / (1920 - 1366)))
      calc(10px + (15 - 10) * ((100vw - 1366px) / (1920 - 1366)))
      calc(7px + (10 - 7) * ((100vw - 1366px) / (1920 - 1366)));
  }

  /* /font-buttons */

  .headline_text {
    top: calc(90px + (127 - 90) * ((100vw - 1366px) / (1920 - 1366)));
    font-size: calc(22px + (32 - 22) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .main_headline {
    font-size: calc(207px + (292 - 207) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .square {
    width: calc(154px + (217 - 154) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(202px + (285 - 202) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .dynamic_panel {
    left: calc(130px + (184 - 130) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(208px + (292 - 208) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .code_shape {
    width: calc(202px + (285 - 202) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(100px + (141 - 100) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(17px + (25 - 17) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .code_shape h2 {
    font-size: calc(18px + (26 - 18) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(17px + (24 - 17) * ((100vw - 1366px) / (1920 - 1366)));
  }

  #code_text b {
    font-size: calc(18px + (26 - 18) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(17px + (24 - 17) * ((100vw - 1366px) / (1920 - 1366)));
  }

  #typewriter {
    width: calc(79px + (111 - 79) * ((100vw - 1366px) / (1920 - 1366)));
  }

  /* The typing effect */
  @-webkit-keyframes typing {
    from {
      width: 0;
    }

    to {
      width: calc(79px + (111 - 79) * ((100vw - 1366px) / (1920 - 1366)));
    }
  }

  @keyframes typing {
    from {
      width: 0;
    }

    to {
      width: calc(79px + (111 - 79) * ((100vw - 1366px) / (1920 - 1366)));
    }
  }

  .slider_container {
    width: calc(175px + (247 - 175) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(102px + (144 - 102) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(17px + (25 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    padding-bottom: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(495px + (697 - 495) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(-38px + (-55 - -38) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .range {
    width: calc(140px + (197 - 140) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    margin-bottom: calc(10px + (15 - 10) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .range::-webkit-slider-thumb {
    width: calc(15px + (22 - 15) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(15px + (22 - 15) * ((100vw - 1366px) / (1920 - 1366)));
    border: calc(2px + (3 - 2) * ((100vw - 1366px) / (1920 - 1366))) solid
      #ffffff;
  }

  /* select-style */

  .select-block {
    top: calc(-5px + (-9 - -5) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(-10px + (-15 - -10) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(113px + (160 - 113) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .select {
    width: calc(62px + (88 - 62) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .select.is-active .select-body {
    border-radius: 0px 0px
      calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)))
      calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .select-block .is-active {
    border-radius: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)))
      calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366))) 0px 0px;
  }

  .select-header {
    width: calc(62px + (88 - 62) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)))
      calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366))) 0px 0px;
  }

  .select-current {
    font-size: calc(17px + (24 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(21px + (29 - 21) * ((100vw - 1366px) / (1920 - 1366)));
    margin-top: calc(5px + (7 - 5) * ((100vw - 1366px) / (1920 - 1366)));
    margin-left: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .select-icon {
    top: calc(12px + (18 - 12) * ((100vw - 1366px) / (1920 - 1366)));
    right: calc(7px + (11 - 7) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(5px + (7 - 5) * ((100vw - 1366px) / (1920 - 1366)));
    width: calc(7px + (11 - 7) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .select-item {
    padding-top: calc(5px + (7 - 5) * ((100vw - 1366px) / (1920 - 1366)));
    padding-left: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
    margin-top: calc(2px + (3 - 2) * ((100vw - 1366px) / (1920 - 1366)));
    font-size: calc(17px + (24 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(21px + (29 - 21) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .select-item:hover:last-child {
    border-radius: 0px 0px
      calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)))
      calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
  }

  /* ///select-style/// */

  /* users-cursor */
  .cursor_container {
    width: calc(143px + (201 - 143) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(41px + (61 - 41) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(61px + (109 - 61) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(309px + (435 - 309) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .slide {
    height: calc(132px + (185 - 132) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .slide img {
    width: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(19px + (26 - 19) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .slide h2 {
    font-size: calc(20px + (28 - 20) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(49px + (79 - 49) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .slide h3 {
    font-size: calc(11px + (16 - 11) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(43px + (86 - 43) * ((100vw - 1366px) / (1920 - 1366)));
  }

  /* /main-page */
  /* text-block */
  .header-text-block {
    margin-top: calc(90px + (189 - 90) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .header-text {
    width: calc(978px + (1360 - 978) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .text-space-1 {
    width: calc(505px + (710 - 505) * ((100vw - 1366px) / (1920 - 1366)));
    margin-right: calc(29px + (40 - 29) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .description-text-block {
    margin-bottom: calc(29px + (40 - 29) * ((100vw - 1366px) / (1920 - 1366)));
    margin-top: calc(29px + (40 - 29) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .text-space-2 {
    width: calc(434px + (610 - 434) * ((100vw - 1366px) / (1920 - 1366)));
    margin-top: calc(29px + (40 - 29) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .text-space-2 .text {
    margin-bottom: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .advantages-case {
    width: calc(238px + (335 - 238) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(179px + (251 - 179) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .advantages .row-advantages-1 .case-1 {
    margin-bottom: calc(29px + (40 - 29) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .advantages-case img {
    width: calc(64px + (90 - 64) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(57px + (80 - 57) * ((100vw - 1366px) / (1920 - 1366)));
  }

  /* row-adv-2 */
  .row-advantages-2 {
    margin-left: calc(29px + (40 - 29) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .advantages .row-advantages-2 .case-1 {
    margin-top: calc(35px + (50 - 35) * ((100vw - 1366px) / (1920 - 1366)));
    margin-bottom: calc(29px + (40 - 29) * ((100vw - 1366px) / (1920 - 1366)));
  }

  /* /text-block */
  /* case-block */

  .case-block-title {
    line-height: calc(63px + (89 - 63) * ((100vw - 1366px) / (1920 - 1366)));
    width: calc(968px + (1360 - 968) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .case-col-br {
    width: calc(303px + (426 - 303) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(305px + (429 - 305) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .case-col-block {
    width: calc(968px + (1360 - 968) * ((100vw - 1366px) / (1920 - 1366)));
    gap: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .case-col-block p {
    font-size: calc(20px + (28 - 20) * ((100vw - 1366px) / (1920 - 1366)));
    margin-bottom: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .case-col-info {
    padding: calc(149px + (209 - 149) * ((100vw - 1366px) / (1920 - 1366)))
      calc(29px + (40 - 29) * ((100vw - 1366px) / (1920 - 1366)))
      calc(29px + (40 - 29) * ((100vw - 1366px) / (1920 - 1366)))
      calc(29px + (40 - 29) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .case-col-block ul li {
    margin-right: calc(6px + (9 - 6) * ((100vw - 1366px) / (1920 - 1366)));
    margin-bottom: calc(7px + (10 - 7) * ((100vw - 1366px) / (1920 - 1366)));
    font-size: calc(11px + (16 - 11) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(14px + (19 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(7px + (10 - 7) * ((100vw - 1366px) / (1920 - 1366)))
      calc(18px + (25 - 18) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .case-col-block-button {
    top: calc(94% + (93 - 94) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .case-col-block-button a {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .case-col-block-button p {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(17px + (23 - 17) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .case-col-block-button p::before {
    width: calc(16px + (22 - 16) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(4.5px + (6 - 4.5) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .case-col-padding {
    margin-top: calc(-61px + (74 - -61) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .case-col-1 {
    margin-top: calc(14px + (52 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .case-col:nth-child(2) {
    margin-top: calc(-80px + (-110 - -80) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .case-col:nth-child(3) {
    margin-top: calc(60px + (90 - 60) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .case-col:nth-child(4) {
    margin-top: calc(-65px + (-100 - -65) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .case-col:nth-child(5) {
    margin-top: calc(
      -130px + (-200 - -130) * ((100vw - 1366px) / (1920 - 1366))
    );
  }

  /* /case-block */
  /* soc-net-block */

  .soc-net-block {
    margin-top: calc(139px + (200 - 139) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .soc-net-buttons {
    margin-top: calc(70px + (98 - 70) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(228px + (320 - 228) * ((100vw - 1366px) / (1920 - 1366)));
    grid-template-rows:
      calc(84px + (119 - 84) * ((100vw - 1366px) / (1920 - 1366)))
      calc(84px + (119 - 84) * ((100vw - 1366px) / (1920 - 1366)))
      calc(58px + (80 - 58) * ((100vw - 1366px) / (1920 - 1366)));
    grid-template-columns:
      calc(84px + (119 - 84) * ((100vw - 1366px) / (1920 - 1366)))
      calc(99px + (139 - 99) * ((100vw - 1366px) / (1920 - 1366)))
      calc(84px + (119 - 84) * ((100vw - 1366px) / (1920 - 1366)))
      calc(58px + (80 - 58) * ((100vw - 1366px) / (1920 - 1366)));
    padding-right: calc(99px + (139 - 99) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .soc-net-text-title {
    margin-bottom: calc(29px + (40 - 29) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .soc-net-text {
    width: calc(541px + (761 - 541) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .soc-net-text h3 {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(17px + (23 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    width: calc(477px + (671 - 477) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .soc-net-text-2 {
    margin-top: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .small-icon {
    width: calc(43px + (60 - 43) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(43px + (60 - 43) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(7px + (10 - 7) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .big-icon {
    width: calc(57px + (80 - 57) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(57px + (80 - 57) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
  }

  #VK {
    margin-top: calc(7px + (10 - 7) * ((100vw - 1366px) / (1920 - 1366)));
  }

  #Facebook {
    margin-top: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  #Telegram {
    margin-top: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
  }

  #YouTube {
    margin-top: calc(7px + (10 - 7) * ((100vw - 1366px) / (1920 - 1366)));
    margin-left: calc(15px + (20 - 15) * ((100vw - 1366px) / (1920 - 1366)));
  }

  #Behance {
    margin-top: calc(22px + (30 - 22) * ((100vw - 1366px) / (1920 - 1366)));
  }

  #Dribbble {
    margin-top: calc(29px + (40 - 29) * ((100vw - 1366px) / (1920 - 1366)));
    margin-left: calc(15px + (20 - 15) * ((100vw - 1366px) / (1920 - 1366)));
  }

  #Viber {
    margin-top: calc(8px + (10 - 8) * ((100vw - 1366px) / (1920 - 1366)));
  }

  /* /soc-net-block */
  /* directions */
  .directions-block {
    margin-top: calc(142px + (200 - 142) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .directions-text-animation {
    top: calc(76px + (106 - 76) * ((100vw - 1366px) / (1920 - 1366)));
    width: calc(541px + (760 - 541) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .directions-text-animation .direction-text-animation-title {
    font-size: calc(20px + (28 - 20) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(25px + (35 - 25) * ((100vw - 1366px) / (1920 - 1366)));
    margin-bottom: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .directions-text-animation h3 {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(17px + (23 - 17) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-1 {
    margin-bottom: calc(71px + (100 - 71) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-1-text {
    width: calc(541px + (760 - 541) * ((100vw - 1366px) / (1920 - 1366)));
    margin-right: calc(96px + (140 - 96) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-1-text .dir-title {
    line-height: calc(61px + (86 - 61) * ((100vw - 1366px) / (1920 - 1366)));
    margin-bottom: calc(29px + (40 - 29) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-1-text .direction-1-text-title {
    font-size: calc(20px + (28 - 20) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(28px + (35 - 28) * ((100vw - 1366px) / (1920 - 1366)));
    margin-bottom: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-1-text h3 {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(17px + (23 - 17) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-1-animation {
    width: calc(327px + (460 - 327) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(255px + (359 - 255) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-1-animation .page-1 {
    width: calc(327px + (460 - 327) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(255px + (359 - 255) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-1-animation .page-1 .photo-gear {
    width: calc(100px + (145 - 100) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(129px + (176 - 129) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(174px + (238 - 174) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-1-animation .page-1 .back-photo {
    width: calc(242px + (340 - 242) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(29px + (40 - 29) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(22px + (30 - 22) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-1-animation .left-shape {
    top: calc(181px + (254 - 181) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(-51px + (-71 - -51) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    width: calc(150px + (211 - 150) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(53px + (75 - 53) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-1-animation .left-shape-square {
    width: calc(30px + (42 - 30) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(17px + (23 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    max-height: 23px;
    left: calc(18px + (25 - 18) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(19px + (26 - 19) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-1-animation .left-shape-pen {
    width: calc(42px + (59 - 42) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(39px + (55 - 39) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(60px + (84 - 60) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(7px + (10 - 7) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(12px + (16 - 12) * ((100vw - 1366px) / (1920 - 1366)))
      calc(8px + (11 - 8) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(10px + (14 - 10) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-1-animation .left-shape-word-T {
    width: calc(18px + (23 - 18) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(20px + (26 - 20) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(117px + (165 - 117) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(17px + (25 - 17) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-1-animation .right-shape {
    top: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
    right: calc(-51px + (-71 - -51) * ((100vw - 1366px) / (1920 - 1366)));
    width: calc(114px + (160 - 114) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(53px + (74 - 53) * ((100vw - 1366px) / (1920 - 1366)));
    background: #333333;
    box-shadow: 0px calc(4px + (5 - 4) * ((100vw - 1366px) / (1920 - 1366)))
      calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)))
      rgba(0, 0, 0, 0.15);
    border-radius: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-1-animation .right-shape-left-stripe {
    width: calc(25px + (35 - 25) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(23px + (32 - 23) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(15px + (21 - 15) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-1-animation .right-shape-middle-stripes {
    width: calc(16px + (22 - 16) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(12px + (17 - 12) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(53px + (75 - 53) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(20px + (28 - 20) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-1-animation .right-shape-right-stripes {
    width: calc(16px + (23 - 16) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(15px + (21 - 15) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(83px + (117 - 83) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(19px + (26 - 19) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .hidden-pages-text {
    width: calc(93px + (131 - 93) * ((100vw - 1366px) / (1920 - 1366)));
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .hidden-pages-text .points {
    top: calc(-7px + (-10 - -7) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-left-animation {
    width: calc(327px + (460 - 327) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(255px + (359 - 255) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
    margin-right: calc(
      100px + (140 - 100) * ((100vw - 1366px) / (1920 - 1366))
    );
  }

  .direction-left-animation .direction-up-panel {
    width: calc(143px + (201 - 143) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(53px + (75 - 53) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(-51px + (-71 - -51) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-left-animation #align-left {
    width: calc(17px + (24 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(17px + (24 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(18px + (26 - 18) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-left-animation #align-center {
    width: calc(39px + (55 - 39) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(39px + (55 - 39) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(52px + (73 - 52) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(7px + (10 - 7) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(10px + (14 - 10) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(11px + (16 - 11) * ((100vw - 1366px) / (1920 - 1366)))
      calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)))
      calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)))
      calc(12px + (17 - 12) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-left-animation #align-right {
    width: calc(17px + (24 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(17px + (24 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(105px + (147 - 105) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(18px + (26 - 18) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-left-animation .phones {
    width: calc(164px + (231 - 164) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .direction-left-animation .phone-1 {
    left: calc(31px + (43 - 31) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(105px + (149 - 105) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-left-animation .phone-2 {
    left: calc(171px + (241 - 171) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(21px + (29 - 21) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .directions {
    margin-bottom: calc(71px + (100 - 71) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-right-animation {
    width: calc(327px + (460 - 327) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(255px + (359 - 255) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
    margin-left: calc(100px + (140 - 100) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .directions-photos {
    border-radius: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
    width: calc(327px + (460 - 327) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(255px + (359 - 255) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-right-animation #direction-3-photo-1 {
    width: calc(171px + (241 - 171) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(146px + (205 - 146) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(-56px + (-79 - -56) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(16px + (34 - 16) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-right-animation #direction-3-photo-2 {
    width: calc(308px + (433 - 308) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(97px + (137 - 97) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(107px + (151 - 107) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(135px + (190 - 135) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-3-panel-1 {
    width: calc(129px + (182 - 129) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(49px + (69 - 49) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(178px + (250 - 178) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(-50px + (-71 - -50) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-3-panel-1 #align-left {
    width: calc(36px + (50 - 33) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(8px + (11 - 8) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(16px + (23 - 16) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(10px + (14 - 10) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(10px + (13 - 10) * ((100vw - 1366px) / (1920 - 1366)))
      calc(11px + (14 - 11) * ((100vw - 1366px) / (1920 - 1366)))
      calc(9px + (12 - 9) * ((100vw - 1366px) / (1920 - 1366)))
      calc(10px + (13 - 10) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-3-panel-1 #align-center {
    width: calc(15px + (21 - 15) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(17px + (23 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(17px + (24 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(68px + (95 - 68) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-3-panel-1 #align-right {
    width: calc(17px + (23 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(15px + (21 - 15) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(18px + (25 - 18) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(98px + (139 - 98) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-3-panel-2 {
    width: calc(242px + (340 - 242) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(49px + (69 - 49) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(36px + (50 - 36) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(133px + (187 - 133) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(16px + (23 - 16) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-3-panel-2 h2 {
    font-size: calc(18px + (25 - 18) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(22px + (30 - 22) * ((100vw - 1366px) / (1920 - 1366)));
    margin-left: calc(16px + (23 - 16) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-3-panel-2 img {
    width: calc(18px + (25 - 18) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(18px + (25 - 18) * ((100vw - 1366px) / (1920 - 1366)));
    margin-right: calc(25px + (36 - 25) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .directions-photos .circles {
    width: calc(171px + (240 - 171) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(209px + (293 - 209) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(189px + (266 - 189) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(66px + (94 - 66) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .directions-photos .images_all {
    width: calc(130px + (183 - 130) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(24px + (34 - 24) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(33px + (47 - 33) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-4-panel {
    width: calc(148px + (208 - 148) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(49px + (69 - 49) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(30px + (42 - 30) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(219px + (308 - 219) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-4-panel .diagram-1 {
    width: calc(33px + (45 - 33) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(18px + (25 - 18) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(16px + (23 - 16) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-4-panel .diagram-2 {
    width: calc(18px + (25 - 18) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(20px + (28 - 20) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(62px + (87 - 62) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-4-panel .diagram-3 {
    width: calc(35px + (49 - 35) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(35px + (49 - 35) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(7px + (10 - 7) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(99px + (139 - 99) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .hidden-pages-text b {
    font-size: calc(24px + (30 - 24) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-5-horn {
    width: calc(281px + (395 - 281) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(191px + (268 - 191) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(25px + (35 - 25) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(19px + (26 - 19) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-5-panel {
    top: calc(178px + (250 - 178) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(-53px + (-75 - -53) * ((100vw - 1366px) / (1920 - 1366)));
    width: calc(143px + (200 - 143) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(49px + (69 - 49) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-5-panel .calender-1 {
    width: calc(17px + (25 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    width: calc(17px + (25 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(15px + (21 - 15) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(20px + (28 - 20) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-5-panel .calender-2 {
    width: calc(37px + (52 - 37) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(35px + (49 - 35) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(7px + (10 - 7) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(51px + (72 - 51) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-5-panel .calender-3 {
    width: calc(17px + (25 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    width: calc(17px + (25 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(15px + (21 - 15) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(105px + (147 - 105) * ((100vw - 1366px) / (1920 - 1366)));
  }

  #direction-6 .message-up {
    width: calc(248px + (348 - 248) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(163px + (229 - 163) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(18px + (26 - 18) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(30px + (42 - 30) * ((100vw - 1366px) / (1920 - 1366)));
  }

  #direction-6 .message-down {
    width: calc(259px + (364 - 259) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(157px + (221 - 157) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(107px + (150 - 107) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(58px + (81 - 58) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-6-panel {
    width: calc(131px + (185 - 131) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(49px + (69 - 49) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(-60px + (-85 - -60) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-6-panel .user-left {
    width: calc(36px + (51 - 36) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(36px + (51 - 36) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(6px + (9 - 6) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-6-panel .user-middle {
    width: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(14px + (19 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(63px + (89 - 63) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-6-panel .user-right {
    width: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(14px + (19 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(98px + (137 - 98) * ((100vw - 1366px) / (1920 - 1366)));
  }

  #direction-7 .all-figure {
    width: calc(282px + (397 - 282) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(229px + (321 - 229) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(31px + (43 - 31) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(3px + (5 - 3) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-7-panel {
    width: calc(176px + (248 - 176) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(55px + (77 - 55) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(26px + (36 - 26) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(218px + (307 - 218) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-7-panel .user-dir-7 {
    width: calc(35px + (50 - 35) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(35px + (50 - 35) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(10px + (14 - 10) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(15px + (21 - 15) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-7-panel .lines {
    width: calc(89px + (125 - 89) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(35px + (50 - 35) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(10px + (14 - 10) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(64px + (90 - 64) * ((100vw - 1366px) / (1920 - 1366)));
  }

  #direction-8 .words-LO {
    width: calc(143px + (201 - 143) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(90px + (127 - 90) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(114px + (161 - 114) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(27px + (38 - 27) * ((100vw - 1366px) / (1920 - 1366)));
  }

  #direction-8 .words-GO {
    width: calc(220px + (310 - 220) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(253px + (356 - 253) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(160px + (225 - 160) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(-49px + (-69 - -49) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-8-panel-left {
    width: calc(141px + (199 - 141) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(45px + (63 - 45) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(-40px + (-56 - -40) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-8-panel-left .square-1 {
    width: calc(18px + (26 - 18) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(18px + (26 - 18) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-8-panel-left .square-2 {
    width: calc(18px + (26 - 18) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(18px + (26 - 18) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(46px + (64 - 46) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-8-panel-left .square-3 {
    width: calc(29px + (41 - 29) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(29px + (41 - 29) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(8px + (11 - 8) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(73px + (102 - 73) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-8-panel-left .square-4 {
    width: calc(18px + (26 - 18) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(18px + (26 - 18) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(110px + (154 - 110) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-8-panel-down {
    width: calc(138px + (194 - 138) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(49px + (69 - 49) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(220px + (309 - 220) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(142px + (200 - 142) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-8-panel-down .cursor {
    width: calc(24px + (35 - 24) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(16px + (24 - 16) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(16px + (23 - 16) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(18px + (25 - 18) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-8-panel-down .connection {
    width: calc(37px + (52 - 37) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(35px + (49 - 35) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(7px + (10 - 7) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(54px + (76 - 54) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-8-panel-down .rhombus {
    width: calc(16px + (22 - 16) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(16px + (22 - 16) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(16px + (23 - 16) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(104px + (147 - 104) * ((100vw - 1366px) / (1920 - 1366)));
  }

  #direction-9 .word-T {
    width: calc(88px + (124 - 88) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(104px + (146 - 104) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(23px + (33 - 23) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(22px + (31 - 22) * ((100vw - 1366px) / (1920 - 1366)));
  }

  #direction-9 .lines {
    width: calc(139px + (196 - 139) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(85px + (120 - 85) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(131px + (185 - 131) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(145px + (204 - 145) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-9-panel {
    width: calc(154px + (216 - 154) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(49px + (69 - 49) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(36px + (50 - 36) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(225px + (317 - 225) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-9-panel .first-a {
    width: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(19px + (27 - 19) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(13px + (19 - 13) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-9-panel .second-a {
    width: calc(35px + (49 - 35) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(35px + (49 - 35) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(7px + (10 - 7) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(38px + (54 - 38) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(12px + (16 - 12) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(11px + (16 - 11) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-9-panel .third-a {
    width: calc(16px + (23 - 16) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(17px + (24 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(14px + (21 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(85px + (119 - 85) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-9-panel .forth-a {
    width: calc(16px + (23 - 16) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(16px + (23 - 16) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(15px + (22 - 15) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(123px + (174 - 123) * ((100vw - 1366px) / (1920 - 1366)));
  }

  #direction-10 .all-figure {
    width: calc(330px + (464 - 330) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(295px + (414 - 295) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(29px + (41 - 29) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(-32px + (-51 - -32) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-10-panel {
    width: calc(139px + (195 - 139) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(49px + (69 - 49) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(178px + (250 - 178) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(256px + (360 - 256) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-10-panel .left-lines {
    width: calc(40px + (56 - 40) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(35px + (49 - 35) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(7px + (10 - 7) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-10-panel .middle-lines {
    width: calc(15px + (22 - 15) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(13px + (19 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(17px + (24 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(66px + (94 - 66) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-10-panel .right-lines {
    width: calc(15px + (22 - 15) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(13px + (19 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(17px + (24 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(106px + (149 - 106) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .direction-10 {
    margin-bottom: calc(
      142px + (200 - 142) * ((100vw - 1366px) / (1920 - 1366))
    );
  }

  /* -------------------------------------------------------- */

  .contact-us-container {
    width: calc(968px + (1360 - 968) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(321px + (451 - 321) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .contact-us-container h2 {
    top: calc(71px + (100 - 71) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(71px + (100 - 71) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(63px + (89 - 63) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .form-contact-us {
    top: calc(162px + (230 - 162) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(71px + (100 - 71) * ((100vw - 1366px) / (1920 - 1366)));
    width: calc(647px + (909 - 647) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(43px + (60 - 43) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .form-contact-us .contact {
    width: calc(220px + (310 - 220) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(43px + (60 - 43) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .form-contact-us input {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(15px + (22 - 15) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .form-contact-us .submit-contact {
    width: calc(163px + (229 - 163) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(43px + (60 - 43) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(16px + (22 - 16) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .contact-us-container .wpcf7-not-valid-tip {
    font-size: calc(13px + (16 - 13) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .contact-us-container h3 {
    left: calc(71px + (100 - 71) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(177px + (250 - 177) * ((100vw - 1366px) / (1920 - 1366)));
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(15px + (22 - 15) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .contact-us-container .wb-page {
    width: calc(440px + (618 - 440) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(213px + (300 - 213) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(750px + (1054 - 750) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(-33px + (-46 - -33) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .contact-us-container .focus-page {
    width: calc(381px + (536 - 381) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(121px + (170 - 121) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(647px + (910 - 647) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(231px + (325 - 231) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .contact-us-panel {
    width: calc(156px + (219 - 156) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(53px + (75 - 53) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(45px + (63 - 45) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(679px + (954 - 679) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .contact-us-panel .cursor {
    width: calc(26px + (37 - 26) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(18px + (25 - 18) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(18px + (25 - 18) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(20px + (29 - 20) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .contact-us-panel .pen {
    width: calc(42px + (59 - 42) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(39px + (55 - 39) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(7px + (10 - 7) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(61px + (86 - 61) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .contact-us-panel .rhombus {
    width: calc(17px + (25 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(17px + (25 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(17px + (24 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(118px + (167 - 118) * ((100vw - 1366px) / (1920 - 1366)));
  }

  /* ---------------------------------- */

  .team-container {
    width: calc(1000px + (1390 - 1000) * ((100vw - 1366px) / (1920 - 1366)));
    margin-top: calc(142px + (200 - 142) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .team-text {
    width: calc(396px + (556 - 396) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(234px + (329 - 234) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .team-headline h2 {
    top: calc(142px + (200 - 142) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(63px + (89 - 63) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .team-text h3 {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    margin-bottom: calc(42px + (59 - 42) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .more-employees {
    padding: calc(13px + (19 - 13) * ((100vw - 1366px) / (1920 - 1366)))
      calc(18px + (25 - 18) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(16px + (22 - 16) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .team-photo {
    margin-left: calc(60px + (94 - 60) * ((100vw - 1366px) / (1920 - 1366)));
    width: calc(497px + (700 - 497) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(512px + (720 - 512) * ((100vw - 1366px) / (1920 - 1366)));
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .team-name {
    padding: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .gen-dir img,
  .Chief-Executive-Officer img,
  .ProjectManager img {
    width: calc(100px + (140 - 100) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(100px + (140 - 100) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .supervisor-design img {
    width: calc(86px + (120 - 86) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(86px + (120 - 86) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .team-photo .row-2 img {
    width: calc(114px + (160 - 114) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(114px + (160 - 114) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .gen-dir {
    left: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .supervisor-design {
    top: calc(135px + (190 - 135) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .top-margin-team-name,
  .top-margin-team-img img {
    top: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .supervisor-SEO {
    top: calc(199px + (280 - 199) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(-28px + (-40 - -28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .supervisor-SEO-name {
    top: calc(92px + (130 - 92) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .ProjectManager {
    top: calc(157px + (220 - 157) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(14px + (19 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  /* Numbers block */
  .numbers-block {
    margin-top: calc(142px + (200 - 142) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .numbers-block .row-1 {
    height: calc(615px + (864 - 615) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .numbers-block .headline {
    width: calc(749px + (1053 - 749) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .numbers-block .bg-shape {
    width: calc(754px + (1060 - 754) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(304px + (428 - 304) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(71px + (100 - 71) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .numbers-block .code-shape {
    width: calc(185px + (261 - 185) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(32px + (46 - 32) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(-3px + (-4 - -3) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .numbers-block .figure-bg {
    width: calc(670px + (943 - 670) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(73px + (103 - 73) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(-87px + (-123 - -87) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .numbers-block .text-block {
    margin-top: calc(-61px + (-86 - -61) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
    width: calc(398px + (560 - 398) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(188px + (264 - 188) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .numbers-block .text-block h3 {
    width: calc(342px + (480 - 342) * ((100vw - 1366px) / (1920 - 1366)));
    font-size: calc(12px + (18 - 12) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(17px + (23 - 17) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .numbers-block .row-2 {
    width: calc(217px + (306 - 217) * ((100vw - 1366px) / (1920 - 1366)));
    min-width: calc(217px + (306 - 217) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(485px + (682 - 485) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .numbers-block .row-2 .out-num {
    font-size: calc(68px + (96 - 68) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(85px + (119 - 85) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .numbers-block .row-2 h2 {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(17px + (23 - 17) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .numbers-block .row-2 #num-2,
  .numbers-block .row-2 #num-3 {
    margin-top: calc(35px + (50 - 35) * ((100vw - 1366px) / (1920 - 1366)));
  }

  /* ------------------------------------------------------ */

  .benefits-block {
    margin-top: calc(142px + (200 - 142) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .benefits-rows {
    grid-template-columns:
      calc(331px + (466 - 331) * ((100vw - 1366px) / (1920 - 1366)))
      calc(331px + (466 - 331) * ((100vw - 1366px) / (1920 - 1366)))
      calc(303px + (428 - 303) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .benefits-block .headline {
    line-height: calc(63px + (89 - 63) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .benefits-block .row {
    margin-top: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .benefits-list {
    width: calc(35px + (50 - 35) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(35px + (50 - 35) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .benefits-block .row h2 {
    margin-left: calc(50px + (70 - 50) * ((100vw - 1366px) / (1920 - 1366)));
    font-size: calc(20px + (28 - 20) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(25px + (35 - 25) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .benefits-block h3 {
    margin-left: calc(50px + (70 - 50) * ((100vw - 1366px) / (1920 - 1366)));
    margin-top: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .benefits-block .col-end {
    width: calc(303px + (426 - 303) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(129px + (182 - 129) * ((100vw - 1366px) / (1920 - 1366)));
    margin-left: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .benefits-block .col-1,
  .benefits-block .col-2,
  .benefits-block .col-3 {
    width: calc(303px + (426 - 303) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(129px + (182 - 129) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .benefits-block .row-3 .col-1 {
    width: calc(303px + (426 - 303) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(170px + (239 - 170) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .benefits-block .row-3 .col-2 {
    margin-top: calc(44px + (62 - 44) * ((100vw - 1366px) / (1920 - 1366)));
    width: calc(444px + (625 - 444) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(82px + (115 - 82) * ((100vw - 1366px) / (1920 - 1366)));
    margin-left: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  /* ----------------------------------------- */
  .discussion-block {
    margin-top: calc(140px + (200 - 140) * ((100vw - 1366px) / (1920 - 1366)));
    width: calc(967px + (1360 - 967) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(320px + (451 - 320) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .discussion-block-container .wpcf7-not-valid-tip {
    top: calc(-5px + (-10 - -5) * ((100vw - 1366px) / (1920 - 1366)));
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .discussion-block .discussion-text {
    padding-top: calc(71px + (100 - 71) * ((100vw - 1366px) / (1920 - 1366)));
    padding-left: calc(71px + (100 - 71) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .discussion-block .discussion-text .block-all-titles {
    line-height: calc(63px + (89 - 63) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .discussion-block .discussion-text h2 {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    margin-top: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .discussion-text .contact-us {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(16px + (22 - 16) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
    margin-top: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(13px + (19 - 13) * ((100vw - 1366px) / (1920 - 1366)))
      calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .discussion-block .wb {
    width: calc(433px + (609 - 433) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(213px + (301 - 213) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(80px + (112 - 80) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(641px + (901 - 641) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .discussion-block .code-shape {
    padding: calc(13px + (19 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    width: calc(180px + (253 - 180) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(86px + (122 - 86) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(24px + (35 - 24) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(702px + (987 - 702) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .discussion-block .shape-down {
    width: calc(154px + (217 - 154) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(53px + (75 - 53) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(238px + (335 - 238) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(597px + (840 - 597) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .discussion_modal {
    width: calc(683px + (960 - 683) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(499px + (701 - 499) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(15px + (22 - 15) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .discussion_modal_cross {
    top: calc(-16px + (-22 - -16) * ((100vw - 1366px) / (1920 - 1366)));
    right: calc(-16px + (-22 - -16) * ((100vw - 1366px) / (1920 - 1366)));
    width: calc(16px + (22 - 16) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(16px + (22 - 16) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .discussion_modal_box {
    padding: calc(70px + (100 - 70) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .discussion-modal-headline {
    font-size: calc(51px + (72 - 51) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(63px + (89 - 63) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .discussion-modal-inputs {
    gap: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .discussion-modal-input {
    width: calc(256px + (360 - 256) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(42px + (60 - 42) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(13px + (19 - 13) * ((100vw - 1366px) / (1920 - 1366)))
      calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
    margin-top: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .discussion-modal-textarea textarea {
    width: calc(540px + (760 - 540) * ((100vw - 1366px) / (1920 - 1366)));
    max-width: calc(540px + (760 - 540) * ((100vw - 1366px) / (1920 - 1366)));
    min-width: calc(540px + (760 - 540) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(136px + (192 - 136) * ((100vw - 1366px) / (1920 - 1366)));
    max-height: calc(136px + (192 - 136) * ((100vw - 1366px) / (1920 - 1366)));
    min-height: calc(136px + (192 - 136) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
    margin-top: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .discussion-button-container {
    margin-top: calc(28px + (39 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .discussion-button-container .wpcf7-submit {
    border-radius: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(13px + (19 - 13) * ((100vw - 1366px) / (1920 - 1366)))
      calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
    margin-right: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .discussion-button-container-text {
    width: calc(363px + (511 - 363) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .discussion-focus-page {
    width: calc(381px + (535 - 381) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(427px + (601 - 427) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(397px + (558 - 397) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .discussion-code-shape {
    width: calc(180px + (253 - 180) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(455px + (640 - 455) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(-37px + (-52 - -37) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .discussion-wf {
    width: calc(370px + (521 - 370) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(-25px + (-35 - -25) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(512px + (720 - 512) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .discussion-shape-down {
    width: calc(154px + (217 - 154) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(32px + (45 - 32) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(500px + (702 - 500) * ((100vw - 1366px) / (1920 - 1366)));
  }

  /* ------------------------------------------------- */

  .infographics-block {
    margin-top: calc(140px + (200 - 140) * ((100vw - 1366px) / (1920 - 1366)));
    margin-bottom: calc(
      140px + (200 - 140) * ((100vw - 1366px) / (1920 - 1366))
    );
  }

  .infographics-block .headline {
    line-height: calc(63px + (89 - 63) * ((100vw - 1366px) / (1920 - 1366)));
    margin-bottom: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .infographics-block .infographics-text h2 {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .infographics-block .col-1 {
    margin-top: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .infographics-block .step-1 {
    width: calc(265px + (373 - 265) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(82px + (116 - 82) * ((100vw - 1366px) / (1920 - 1366)));
    margin-right: calc(
      131px + (185 - 131) * ((100vw - 1366px) / (1920 - 1366))
    );
  }

  .infographics-block .steps {
    padding: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .infographics-block .steps h2 {
    font-size: calc(20px + (28 - 20) * ((100vw - 1366px) / (1920 - 1366)));
    margin-right: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .infographics-block .steps h3 {
    font-size: calc(12px + (18 - 12) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .infographics-block .step-3 {
    width: calc(209px + (294 - 209) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(82px + (116 - 82) * ((100vw - 1366px) / (1920 - 1366)));
    margin-right: calc(
      187px + (264 - 187) * ((100vw - 1366px) / (1920 - 1366))
    );
  }

  .infographics-block .step-5 {
    width: calc(173px + (244 - 173) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(82px + (116 - 82) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .infographics-block .col-2 img {
    width: calc(822px + (1156 - 822) * ((100vw - 1366px) / (1920 - 1366)));
    margin-top: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .infographics-block .col-3 {
    margin-top: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .infographics-block .step-2 {
    width: calc(241px + (340 - 241) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(82px + (116 - 82) * ((100vw - 1366px) / (1920 - 1366)));
    margin-right: calc(
      155px + (218 - 155) * ((100vw - 1366px) / (1920 - 1366))
    );
    margin-left: calc(198px + (279 - 198) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .infographics-block .step-4 {
    width: calc(225px + (317 - 225) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(82px + (116 - 82) * ((100vw - 1366px) / (1920 - 1366)));
  }

  /* ------------------------------------------- */

  .articles-block {
    max-width: calc(
      1005px + (1400 - 1005) * ((100vw - 1366px) / (1920 - 1366))
    );
    margin-bottom: calc(
      142px + (200 - 142) * ((100vw - 1366px) / (1920 - 1366))
    );
    gap: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .articles-block .headline h2 {
    line-height: calc(51px + (89 - 51) * ((100vw - 1366px) / (1920 - 1366)));
    margin-bottom: calc(10px + (0 - 10) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .article {
    width: calc(469px + (660 - 469) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(359px + (505 - 359) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .back-color-article {
    width: calc(469px + (660 - 469) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(190px + (267 - 190) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)))
      calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366))) 0px 0px;
    padding: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .back-color-article .article-hashtag {
    font-size: calc(11px + (16 - 11) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(14px + (19 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(7px + (10 - 7) * ((100vw - 1366px) / (1920 - 1366)))
      calc(17px + (25 - 17) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .article-text {
    margin-top: calc(172px + (247 - 172) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(127px + (178 - 127) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .article-text .article-text-title {
    font-size: calc(20px + (28 - 20) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(26px + (36 - 26) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .article-text .article-text-content {
    margin-top: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(17px + (23 - 17) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .article-text .article-text-date {
    margin-top: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    font-size: calc(11px + (16 - 11) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .articles-block .row-2 img {
    width: calc(89px + (126 - 89) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(17px + (24 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    margin-top: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .articles-block .articles-button {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(2px + (8 - 2) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(-10px + (30 - -10) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .articles-block .articles-button-text::before {
    width: calc(16px + (22 - 16) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(5px + (6 - 5) * ((100vw - 1366px) / (1920 - 1366)));
    top: -2px;
    right: calc(6px + (9 - 6) * ((100vw - 1366px) / (1920 - 1366)));
  }

  /* -------------------------------------------- */
  .question-block {
    margin-bottom: calc(
      142px + (200 - 142) * ((100vw - 1366px) / (1920 - 1366))
    );
  }

  .question-block .headline h2 {
    line-height: calc(63px + (89 - 63) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .tabs {
    margin-top: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .question-nav {
    height: calc(38px + (54 - 38) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .question-tab {
    top: calc(-2px + (-3 - -2) * ((100vw - 1366px) / (1920 - 1366)));
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .question-nav .animation {
    border-radius: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .question-tab:nth-child(1) {
    width: calc(116px + (163 - 116) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .question-tab:nth-child(2) {
    width: calc(67px + (94 - 67) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .question-tab:nth-child(3) {
    width: calc(155px + (218 - 155) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .question-tab:nth-child(4) {
    width: calc(168px + (236 - 168) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .question-tab:nth-child(5) {
    width: calc(120px + (169 - 120) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .question-tab:nth-child(6) {
    width: calc(170px + (239 - 170) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .question-tab:nth-child(1):hover ~ .animation {
    width: calc(116px + (163 - 116) * ((100vw - 1366px) / (1920 - 1366)));
    left: 0;
  }
  .question-tab:nth-child(2):hover ~ .animation {
    width: calc(67px + (94 - 67) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(116px + (163 - 116) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .question-tab:nth-child(3):hover ~ .animation {
    width: calc(155px + (218 - 155) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(184px + (257 - 184) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .question-tab:nth-child(4):hover ~ .animation {
    width: calc(168px + (236 - 168) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(340px + (475 - 340) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .question-tab:nth-child(5):hover ~ .animation {
    width: calc(120px + (169 - 120) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(508px + (711 - 508) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .question-tab:nth-child(6):hover ~ .animation {
    width: calc(170px + (239 - 170) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(629px + (880 - 629) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .question-active {
    top: calc(-2px + (-3 - -2) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(42px + (60 - 42) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .tab {
    width: calc(968px + (1360 - 968) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .tab .acor-body {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(15px + (22 - 15) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .tab .acor-body p {
    padding: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366))) 0px
      calc(16px + (30 - 16) * ((100vw - 1366px) / (1920 - 1366))) 0px;
    width: calc(608px + (855 - 608) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .tab label {
    padding: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
    font-size: calc(20px + (28 - 20) * ((100vw - 1366px) / (1920 - 1366)));
    margin-top: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .tab label:before {
    background-size: calc(
      16px + (23 - 16) * ((100vw - 1366px) / (1920 - 1366))
    );
  }

  /* ------------------------------------------- */

  .request-block {
    border-radius: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
    margin-bottom: calc(
      142px + (200 - 142) * ((100vw - 1366px) / (1920 - 1366))
    );
  }

  .request-block .headline h2 {
    line-height: calc(63px + (89 - 63) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(71px + (100 - 71) * ((100vw - 1366px) / (1920 - 1366))) 0px
      0px calc(71px + (100 - 71) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .request-nav {
    left: calc(70px + (100 - 70) * ((100vw - 1366px) / (1920 - 1366)));
    margin-top: calc(30px + (43 - 30) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(38px + (54 - 38) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .request-tab {
    top: -3px;
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .request-nav .animation {
    border-radius: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .request-nav .your-radio:nth-child(1) {
    width: calc(114px + (161 - 114) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .request-nav .your-radio:nth-child(2) {
    width: calc(87px + (123 - 87) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .request-nav .your-radio:nth-child(3) {
    width: calc(71px + (95 - 71) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .request-nav .your-radio:nth-child(4) {
    width: calc(67px + (100 - 67) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .request-nav .your-radio:nth-child(5) {
    width: calc(85px + (101 - 85) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .request-nav .your-radio:nth-child(1):hover ~ .animation {
    width: calc(114px + (161 - 114) * ((100vw - 1366px) / (1920 - 1366)));
    left: 0;
  }
  .request-nav .your-radio:nth-child(2):hover ~ .animation {
    width: calc(87px + (123 - 87) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(114px + (161 - 114) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .request-nav .your-radio:nth-child(3):hover ~ .animation {
    width: calc(71px + (95 - 71) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(202px + (284 - 202) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .request-nav .your-radio:nth-child(4):hover ~ .animation {
    width: calc(67px + (100 - 67) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(270px + (379 - 270) * ((100vw - 1366px) / (1920 - 1366)));
  }
  .request-nav .your-radio:nth-child(5):hover ~ .animation {
    width: calc(85px + (101 - 85) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(341px + (479 - 341) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .request-active {
    top: -3px;
    border-radius: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(43px + (60 - 43) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .request-form-container {
    margin-left: calc(71px + (100 - 71) * ((100vw - 1366px) / (1920 - 1366)));
    margin-top: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    padding-right: calc(71px + (100 - 71) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .request-form input {
    width: calc(256px + (360 - 256) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(42px + (60 - 42) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(15px + (22 - 15) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .request-form-name,
  .request-form-phone {
    margin-right: calc(24px + (36 - 24) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .request-textarea {
    width: calc(825px + (1160 - 825) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(136px + (192 - 136) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
    margin-top: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
    margin-bottom: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .request-form-container textarea::placeholder {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(15px + (22 - 15) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .request-block .pictures-block .pic {
    width: calc(321px + (452 - 321) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(728px + (1026 - 728) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(-50px + (-71 - -50) * ((100vw - 1366px) / (1920 - 1366)));
    right: calc(-117px + (-164 - -117) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .request-form-container .but-container {
    margin-bottom: calc(71px + (100 - 71) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .request-form-container .but-container input {
    padding: calc(13px + (19 - 13) * ((100vw - 1366px) / (1920 - 1366)))
      calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
    margin-right: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(11px + (15 - 11) * ((100vw - 1366px) / (1920 - 1366)));
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(15px + (22 - 15) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .request-form-container .but-container .but-container-text {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(15px + (22 - 15) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .thanks-request-block .headline div {
    margin-top: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
    margin-left: calc(71px + (100 - 71) * ((100vw - 1366px) / (1920 - 1366)));
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    width: calc(374px + (526 - 374) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .request-block .block-up {
    width: calc(188px + (265 - 188) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(97px + (137 - 97) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(32px + (45 - 32) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(652px + (917 - 652) * ((100vw - 1366px) / (1920 - 1366)));
    box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.08);
    border-radius: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .request-block .block-down {
    width: calc(123px + (174 - 123) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(48px + (68 - 48) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(691px + (972 - 691) * ((100vw - 1366px) / (1920 - 1366)));
    bottom: calc(37px + (53 - 37) * ((100vw - 1366px) / (1920 - 1366)));
    box-shadow: 0px 8px 58px rgba(0, 0, 0, 0.08);
    border-radius: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  /* ----------------------------------------- */

  .reviews-block h2 {
    line-height: calc(63px + (89 - 63) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .reviews-block .block-all-titles {
    margin-left: calc(180px + (260 - 180) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .reviews-sliding .review-slide h2 {
    font-size: calc(20px + (28 - 20) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(25px + (35 - 25) * ((100vw - 1366px) / (1920 - 1366)));
    margin-bottom: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .reviews-sliding .review-slide h3 {
    font-size: calc(11px + (16 - 11) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    margin-top: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .reviews-sliding .review-slide textarea {
    line-height: calc(17px + (23 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    padding-right: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    width: calc(308px + (433 - 308) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(187px + (253 - 187) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .reviews-sliding {
    border-radius: calc(21px + (30 - 21) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .reviews-sliding .review-slide {
    width: calc(350px + (493 - 350) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(305px + (430 - 305) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)))
      calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)))
      calc(30px + (42 - 30) * ((100vw - 1366px) / (1920 - 1366)))
      calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
    font-size: calc(12px + (18 - 12) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(17px + (23 - 17) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .reviews-block .owl-stage {
    padding-top: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
    padding-bottom: calc(22px + (30 - 22) * ((100vw - 1366px) / (1920 - 1366)));
    margin-bottom: calc(
      155px + (220 - 155) * ((100vw - 1366px) / (1920 - 1366))
    );
  }

  .reviews-block .reviews-more-button {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(844px + (1187 - 844) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(-152px + (-218 - -152) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .reviews-block .reviews-more-button p::before {
    width: calc(16px + (22 - 16) * ((100vw - 1366px) / (1920 - 1366)));
    right: calc(7px + (11.5 - 7) * ((100vw - 1366px) / (1920 - 1366)));
    top: calc(0px + (-2 - 0) * ((100vw - 1366px) / (1920 - 1366)));
  }

  /*------------------------ footer ------------------------ */
  .main-footer {
    padding: calc(71px + (100 - 71) * ((100vw - 1366px) / (1920 - 1366))) 0px
      calc(71px + (100 - 71) * ((100vw - 1366px) / (1920 - 1366))) 0px;
  }

  .main-footer .contacts {
    left: calc(199px + (280 - 199) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .main-footer .contacts .logo {
    width: calc(142px + (200 - 142) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(44px + (62 - 44) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .main-footer .social-networks {
    width: calc(199px + (280 - 199) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(71px + (100 - 71) * ((100vw - 1366px) / (1920 - 1366)));
    margin-top: calc(42px + (60 - 42) * ((100vw - 1366px) / (1920 - 1366)));
    margin-bottom: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .soc-net-imgs img {
    width: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
    height: calc(28px + (40 - 28) * ((100vw - 1366px) / (1920 - 1366)));
    margin-right: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    padding: calc(5px + (6 - 5) * ((100vw - 1366px) / (1920 - 1366)));
    border-radius: calc(9px + (12 - 9) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .soc-net-row-1 {
    margin-bottom: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .footer_contacts {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(17px + (23 - 17) * ((100vw - 1366px) / (1920 - 1366)));
    margin-bottom: calc(7px + (10 - 7) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .headline_about_company h2 {
    font-size: calc(20px + (28 - 20) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(26px + (36 - 26) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .about-company {
    left: calc(427px + (600 - 427) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .links-about-company {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(17px + (23 - 17) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .links-about-company li {
    margin-top: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .footer-services {
    left: calc(527px + (730 - 527) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .links_footer .links {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(17px + (23 - 17) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .links_footer .links_1 li {
    margin-top: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .links_footer .links_2 {
    top: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
    left: calc(141px + (199 - 141) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .links_footer .links_2 li {
    margin-bottom: calc(7px + (10 - 7) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .down_footer {
    height: calc(45px + (63 - 45) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .down_footer h3 {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(17px + (23 - 17) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .down_footer .col-1 {
    margin-left: calc(199px + (280 - 199) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .down_footer .cols {
    margin-top: calc(14px + (20 - 14) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .down_footer .col-2 {
    width: calc(422px + (594 - 422) * ((100vw - 1366px) / (1920 - 1366)));
    margin-left: calc(306px + (431 - 306) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .down_footer .col-2 a {
    font-size: calc(13px + (18 - 13) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(17px + (23 - 17) * ((100vw - 1366px) / (1920 - 1366)));
  }
  /* /footer */
}