/* Prevent content jumping when scrollbar disappears */
html {
  scrollbar-gutter: stable;
}
.v-1,
.v-1 * {
  box-sizing: border-box;
}
.v-1 {
  /* OLD REALISATION */
  /*background: var(--primary-dark-blue-100, #f6f6f6);*/
  /*height: 14103px;*/
  /*position: relative;*/
  /*overflow: hidden;*/

  /* NEW REALISATION */
  background: var(--primary-dark-blue-100, #f6f6f6);
  /* Удаляем фиксированную высоту */
  min-height: 100vh; /* Минимальная высота равна высоте окна просмотра */
  height: auto;
  position: relative;
  /* Меняем overflow: hidden на auto для предотвращения обрезки контента */
  overflow: hidden;
}
body {
  transition: opacity 0.3s ease;
}
body.fade-out {
  opacity: 0;
}
/* Контейнер для секций */
.full-width-container {
  width: 100%;
  margin: 0 auto; /* Центрирование */
  display: flex;
  flex-direction: column;
  gap: 64px; /* Расстояние между секциями */
}

.slide-left {
  opacity: 0;
  transform: translateX(calc(-50% - 100px)); /* Centering + slide from left */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.slide-right {
  opacity: 0;
  transform: translateX(calc(-50% + 100px)); /* Centering + slide from right */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.slide-left.visible,
.slide-right.visible {
  opacity: 1;
  transform: translateX(-50%); /* Back to just centered */
}

.slide-top-full {
  opacity: 0;
  transform: translateX(-50%) translateY(-50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-bottom {
  opacity: 0;
  transform: translateX(-50%) translateY(50px); /* Both transforms together */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.slide-bottom.visible,
.slide-top-full.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0); /* Keep centering, remove Y offset */
}

.slide-top {
  opacity: 0;
  transform: translateY(-50px); /* Both transforms together */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.slide-top.visible {
  opacity: 1;
  transform: translateY(0); /* Keep centering, remove Y offset */
}

.slide-left-full {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.slide-right-full {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.slide-left-full.visible,
.slide-right-full.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-bottom-full {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.slide-bottom-full.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Контейнер для секций */
.section-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto; /* Центрирование */
  padding: 0 0; /* Отступы по бокам */
  display: flex;
  flex-direction: column;
  gap: 128px; /* Расстояние между секциями */
}
/* Общий класс для секций */
.section {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative; /* Для внутреннего позиционирования */
}
.hero-section {
  width: 100%;
  /*min-height: 715px; !* Минимальная высота вместо фиксированной *!*/
  height: 120px; /* Высота будет определяться содержимым */
  overflow: visible; /* Изменено с hidden на visible */
  box-sizing: border-box; /* Чтобы padding не увеличивал фактический размер */

  background-color: transparent;
}
.gradient-1 {
  background: radial-gradient(
          closest-side,
          rgba(114, 114, 236, 0.8) 0%,
          rgba(59, 198, 243, 0.2) 100%
  );
  border-radius: 50%;
  width: 779px;
  height: 779px;
  position: absolute;
  left: -434.35px;
  top: 31.75px;
  transform-origin: 0 0;
  transform: rotate(-14.96deg) scale(1, 1);
  filter: blur(150px);
}
.gradient-2 {
  background: linear-gradient(
          106.63deg,
          rgba(236, 252, 255, 1) 0%,
          rgba(244, 242, 255, 1) 0.009999999747378752%,
          rgba(190, 219, 253, 1) 21.35416716337204%,
          rgba(220, 216, 255, 1) 57.8125%,
          rgba(89, 43, 148, 1) 97.99790382385254%
  );
  border-radius: 50%;
  width: 795px;
  height: 795px;
  position: absolute;
  left: 736px;
  top: 376px;
  filter: blur(100px);
}
.texture {
  opacity: 0.6;
  width: 100%;
  height: 1486px;
  position: absolute;
  left: 0;
  top: 0;
  mix-blend-mode: soft-light;
  object-fit: cover;
  overflow: hidden;
}
.content {
  position: absolute;
  inset: 0;
}
.text-button {
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: flex-start;
  justify-content: flex-start;
  width: auto;
  position: absolute;
  left: 20px;

  /*top: 170px;*/
  top: 50%;                  /* push halfway down the parent */
  transform: translateY(-50%); /* shift up by half its own height */

  background-color: #4a4a8d;
}
.title-text {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.div {
  color: var(--dark-purple, #4a4a8d);
  text-align: left;
  font-family: var(--h1-font-family, "Montserrat", sans-serif);
  font-size: var(--h1-font-size, 54px);
  line-height: var(--h1-line-height, 130%);
  font-weight: var(--h1-font-weight, 700);
  position: relative;
  max-width: 919px;
  width: 100%;
  cursor: default;
}
.crm-atp {
  color: var(--primary-dark-blue-900, #002248);
  text-align: left;
  font-family: var(--hero-font-family, "Montserrat", sans-serif);
  font-size: var(--hero-font-size, 36px);
  line-height: 60px;
  font-weight: var(--hero-font-weight, 500);
  letter-spacing: 0;
  position: relative;
  width: auto;
  cursor: default;
}

.crm-atp-mobile {
  display: none;
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: var(--body-font-family, "Montserrat", sans-serif);
  font-size: var(--body-font-size, 22px);
  line-height: var(--body-line-height, 130%);
  font-weight: var(--body-font-weight, 400);
  position: relative;
  width: 527px;
  cursor: default;
}

.no_english_title {
  color: var(--primary-dark-blue-900, #002248);
  text-align: center;
  font-family: var(--no-english-title-font-family, "Montserrat", sans-serif);
  font-size: var(--no-english-title-font-size, 40px);
  line-height: var(--no-english-title-line-height, 100%);
  font-weight: var(--no-english-title-font-weight, 700);
  position: relative;
  align-self: stretch;
  cursor: default;
}

.highlight-text {
  color: var(--extra-selected-text-800-900, #ff8d00);
  font-family: var(--hero-selected-font-family, "Hamiltone", sans-serif);
  font-size: 60px;
  line-height: 80px;
  font-weight: var(--hero-selected-font-weight, 400);
  cursor: default;

  -webkit-text-stroke: 2px #ff8d00;   /* stroke width and color */
}
.highlight-text-date {
  color: var(--extra-selected-text-800-900, #ff8d00);
  font-family: var(--hero-selected-font-family, "Hamiltone", sans-serif);
  font-size: 140px;
  line-height: 80px;
  font-weight: var(--hero-selected-font-weight, 400);
  margin-left: 8px;

  -webkit-text-stroke: 1px #ff8d00;   /* stroke width and color */
  vertical-align: middle; /* align with surrounding text */
}
.highlight-middle-text {
  color: var(--extra-selected-text-800-900, #ff8d00);
  font-family: var(--hero-selected-font-family, "Hamiltone", sans-serif);
  font-size: var(--hero-selected-font-size, 58px);
  line-height: var(--hero-selected-line-height, 100%);
  font-weight: var(--hero-selected-font-weight, 400);
  padding-left: 8px;
  padding-right: 8px;

  vertical-align: middle; /* align with surrounding text */
  -webkit-text-stroke: 3px #ff8d00;   /* stroke width and color */
}

.no_english_subtitle {
  color: var(--primary-dark-blue-900, #002248);
  text-align: center;
  font-family: var(--no-english-subtitle-font-family, "Montserrat", sans-serif);
  font-size: var(--no-english-subtitle-font-size, 18px);
  line-height: var(--no-english-subtitle-line-height, 100%);
  font-weight: var(--no-english-subtitle-font-weight, 400);
  position: relative;
  align-self: stretch;
  cursor: default;
}

.no-english-card-title {
  color: var(--primary-dark-blue-900, #002248);
  text-align: center;
  font-family: var(--no-english-card-title-font-family, "Montserrat", sans-serif);
  font-size: var(--no-english-card-title-font-size, 28px);
  line-height: var(--no-english-card-title-line-height, 100%);
  font-weight: var(--no-english-card-title-font-weight, 600);
  position: relative;
  align-self: stretch;
  margin-top: 50px;
  cursor: default;
}

.buttons {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.button-do-test,
.button-do-reservation {
  background: var(--primary-dark-blue-900, #002248);
  border-radius: 16px;
  padding: 12px 140px 12px 140px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
.button-do-test:hover,
.button-do-reservation:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(114, 114, 236, 0.3);
}
.div3 {
  color: var(--white, #ffffff);
  text-align: center;
  font-family: var(--button-font-family, "Montserrat", sans-serif);
  font-size: var(--button-font-size, 14px);
  line-height: var(--button-font-height, 100%);
  font-weight: var(--button-font-weight, 600);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-sent-message-text {
  color: var(--white, #ffffff);
  text-align: center;
  font-family: var(--button-large-font-family, "Montserrat", sans-serif);
  font-size: var(--button-large-font-size, 18px);
  line-height: var(--button-large-font-height, 130%);
  font-weight: var(--button-large-font-weight, 700);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.atp {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: var(--body-3-font-family, "Montserrat", sans-serif);
  font-size: var(--body-3-font-size, 16px);
  line-height: var(--body-3-line-height, 130%);
  font-weight: var(--body-3-font-weight, 400);
  position: relative;
  align-self: stretch;
}

.curs-structure-subtitle {
  color: var(--primary-dark-blue-900, #002248);
  text-align: center;
  font-family: var(--no-english-subtitle-font-family, "Montserrat", sans-serif);
  font-size: 24px;
  line-height: var(--no-english-subtitle-line-height, 100%);
  font-weight: var(--no-english-subtitle-font-weight, 400);
  position: relative;
  align-self: stretch;
  cursor: default;
}
.curs-structure-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.curs-structure-card-box {
  flex: 1;                 /* equal width */
  height: 100%;
  display: flex;           /* ensures inner content expands properly */
  flex-direction: column;  /* allow vertical stacking */
}
.curs-structure-card-texts {
  flex: 1; /* stretch to fill parent */
  background-color: var(--white, #ffffff);
  border-radius: 40px;
  padding: 20px;
  padding-top: 40px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 350px;
  height: auto;
}
.curs-structure-card-texts:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}
.curs-structure-card-texts.plus {
  background-color: var(--neutral-800-300, #f6efe4);
}
.curs-structure-card-texts.plus:hover {
  box-shadow: 0 4px 8px rgba(255, 141, 0, 0.3);
  transition: all 0.3s ease;
}
.curs-structure-card-title {
  color: #002248;
  text-align: center;
  font-family: var(--no-english-subtitle-font-family, "Montserrat", sans-serif);
  font-size: var(--no-english-subtitle-font-size, 18px);
  line-height: var(--no-english-subtitle-line-height, 100%);
  font-weight: var(--no-english-subtitle-font-weight, 400);
  position: relative;
  align-self: stretch;
  cursor: default;
}
.curs-structure-card-subtitle {
  color: var(--extra-selected-text-800-900, #ff8d00);
  text-align: center;
  font-family: var(--no-english-title-font-family, "Montserrat", sans-serif);
  font-size: var(--no-english-title-font-size, 18px);
  line-height: var(--no-english-title-line-height, 100%);
  font-weight: var(--no-english-title-font-weight, 400);
  position: relative;
  align-self: stretch;
  cursor: default;
}
.curs-structure-card-subtitle-plus {
  color: var(--primary-dark-blue-900, #002248);
  text-align: center;
  font-family: var(--curs-price-font-family, "Hamiltone", sans-serif);
  font-size: 28px;
  line-height: var(--curs-price-line-height, 100%);
  font-weight: var(--curs-price-font-weight, 400);
  position: relative;
  align-self: stretch;
  cursor: default;

  -webkit-text-stroke: 6px #002248;   /* stroke width and color */
  vertical-align: middle; /* align with surrounding text */

  margin-top: -10px;
}
.curs-structure-card-subtitle-plus-price {
  color: var(--primary-dark-blue-900, #002248);
  text-align: center;
  font-family: var(--curs-price-font-family, "Hamiltone", sans-serif);
  font-size: 120px;
  line-height: 50px;
  font-weight: var(--curs-price-font-weight, 400);
  position: relative;
  align-self: stretch;

  -webkit-text-stroke: 4px #002248;   /* stroke width and color */
  vertical-align: middle; /* align with surrounding text */
}
.curs-structure-card-item {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.curs-structure-card-item-bg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.curs-structure-card-item-icon {
  height: 24px;
  width: 24px;
  align-self: center;
  overflow: visible;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}
.curs-structure-card-item-text {
  color: #262626;
  text-align: left;
  font-family: var(--no-english-card-item-font-family, "Montserrat", sans-serif);
  font-size: var(--no-english-card-item-font-size, 18px);
  line-height: var(--no-english-card-item-line-height, 100%);
  font-weight: var(--no-english-card-item-font-weight, 400);
  position: relative;
  flex: 1;
  cursor: default;
}
.curs-structure-card-button {
  background: var(--neutral-800-300, #f6efe4);
  border-radius: 16px;
  height: 44px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
.curs-structure-card-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(255, 141, 0, 0.3);
}
.curs-structure-card-button.plus {
  background: var(--primary-dark-blue-900, #002248);
}
.curs-structure-card-button.plus:hover {
  box-shadow: 0 4px 8px rgba(114, 114, 236, 0.3);
}
.curs-structure-card-button-text {
  color: var(--primary-dark-blue-900, #002248);
  text-align: center;
  font-family: var(--button-font-family, "Montserrat", sans-serif);
  font-size: var(--button-font-size, 14px);
  line-height: var(--button-font-height, 100%);
  font-weight: var(--button-font-weight, 600);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.curs-structure-card-button-text.plus {
  color: var(--white, #ffffff);
}
.curs-structure-note {
  color: var(--primary-dark-blue-900, #002248);
  text-align: start;
  font-family: var(--no-english-subtitle-font-family, "Montserrat", sans-serif);
  line-height: var(--no-english-subtitle-font-size, 20px);
  line-height: var(--no-english-subtitle-line-height, 100%);
  font-weight: var(--no-english-subtitle-font-weight, 400);
  position: relative;
  align-self: stretch;
  cursor: default;
}

.icon-app {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 10px;
  top: 10px;
  overflow: visible;
}
.text {
  width: 59px;
  height: 25px;
  position: absolute;
  left: 34px;
  top: 8px;
}
.get-it-on {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 8px;
  font-weight: 700;
  position: absolute;
  left: 1px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.app-store {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 700;
  position: absolute;
  left: 1px;
  top: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.icon-app2 {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 10px;
  top: 10px;
  overflow: visible;
}
.text2 {
  width: 74px;
  height: 25px;
  position: absolute;
  left: 35px;
  top: 8px;
}
.get-it-on2 {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 8px;
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.google-play {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.hero-section-images {
  width: calc(60%);
  max-width: 828px;
  max-height: 666px; /* Максимальная высота вместо фиксированной */
  height: auto; /* Высота будет определяться содержимым */

  position: absolute;
  right: 20px;
  /*top: 305px;*/
  top: 50%;                  /* push halfway down the parent */
  transform: translateY(-50%); /* shift up by half its own height */
}
.hero-section-laptop {
  width: calc(100%);
  max-width: 828px;
  max-height: 520px; /* Максимальная высота вместо фиксированной */
  height: auto; /* Высота будет определяться содержимым */
  position: absolute;
  left: 0.5px;
  top: -0.1px;
  object-fit: contain;
}
.hero-section-laptop-mobile {
  /* Hide image on big screens */
  display: none;

  /* Image style */
  width: calc(100% - 40px);
  max-width: 828px;
  max-height: 520px; /* Максимальная высота вместо фиксированной */
  height: auto; /* Высота будет определяться содержимым */
  position: relative;
  left: 0;
  top: 0;
  object-fit: contain;
  overflow: visible;
}
.hero-section-laptop-medium {
  /* Hide image on big screens */
  display: none;

  /* Image style */
  width: calc(100% - 40px);
  max-width: 828px;
  max-height: 520px; /* Максимальная высота вместо фиксированной */
  height: auto; /* Высота будет определяться содержимым */
  position: relative;
  left: 0;
  top: 0;
  object-fit: contain;
  overflow: visible;
}
.hero-section-phone {
  width: calc(50%);
  max-width: 367px;
  max-height: 360px; /* Максимальная высота вместо фиксированной */
  height: auto; /* Высота будет определяться содержимым */

  /*width: 366.83px;*/
  /*height: 360px;*/

  position: absolute;
  left: 39px;
  top: 247px;
  transform-origin: 0 0;
  transform: rotate(17.109deg) scale(1, 1);
  object-fit: cover;
}
.arrow-up {
  border-radius: 25px;
  border-style: solid;
  border-color: var(--primary-dark-blue-900, #002248);
  border-width: 1px;
  padding: 16px 32px 16px 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 40px;
  top: 782px;
  overflow: hidden;
}
.arrow {
  flex-shrink: 0;
  width: 35px;
  height: 35px;
  position: relative;
  overflow: visible;
}
.icons-social {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 50px;
  position: absolute;
  left: 1350px;
  top: 442px;
}
.icon-social-5 {
  border-radius: 30px;
  border-style: solid;
  border-color: var(--primary-dark-blue-900, #002248);
  border-width: 1.2px;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  position: relative;
  overflow: hidden;
}
.icon-social {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  overflow: hidden;
}
.vectors {
  width: 21.6px;
  height: 21.6px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  overflow: visible;
}
.icon-social-6 {
  border-radius: 30px;
  border-style: solid;
  border-color: var(--primary-dark-blue-900, #002248);
  border-width: 1.2px;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  position: relative;
  overflow: hidden;
}
.icon-social2 {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  overflow: visible;
}
.icon-social-7 {
  border-radius: 30px;
  border-style: solid;
  border-color: var(--primary-dark-blue-900, #002248);
  border-width: 1.2px;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  position: relative;
  overflow: hidden;
}
.vectors2 {
  width: 21px;
  height: 21px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  overflow: visible;
}
.icon-social-4 {
  border-radius: 30px;
  border-style: solid;
  border-color: var(--primary-dark-blue-900, #002248);
  border-width: 1.2px;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  position: relative;
  overflow: hidden;
}
.icon-social3 {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  overflow: visible;
}

.main-description {
  background: var(--textdark, #2c2c62);
  border-radius: 40px;
  width: calc(100% - 40px); /* ширина с учетом отступов слева и справа по 20px */
  max-width: 1280px;
  min-height: 491px; /* Минимальная высота вместо фиксированной */
  height: auto; /* Высота будет определяться содержимым */
  left: 50%;
  transform: translateX(-50%);
  overflow: visible; /* Изменено с hidden на visible */
  padding: 40px; /* Добавим отступы внутри блока */
  box-sizing: border-box; /* Чтобы padding не увеличивал фактический размер */
}
.elipses {
  position: absolute;
  inset: 0;
}
.achive {
  width: 214.78px;
  height: 187.87px;
  position: absolute;
  left: 1011px;
  top: 55px;
}
.div5 {
  color: #ffffff;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 25.30545997619629px;
  line-height: 31.63px;
  font-weight: 700;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 71.4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
._1 {
  color: #ffffff;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 36px;
  line-height: 30.92px;
  font-weight: 800;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 27.11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.group {
  height: auto;
  position: absolute;
  left: 0;
  top: -0.01px;
  overflow: visible;
}

.frame-solution-box {
  background: var(--white, #ffffff);
  width: 100%;
  border-radius: 40px;
}
.frame-solution-texts {
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: auto;
  left: 40px;
  top: 40px;
}
.frame-solution-texts-title {
  color: var(--primary-dark-blue-900, #002248);
  text-align: left;
  font-family: var(--no-english-card-title-font-family, "Montserrat", sans-serif);
  font-size: var(--no-english-card-title-font-size, 28px);
  line-height: var(--no-english-card-title-line-height, 100%);
  font-weight: var(--no-english-card-title-font-weight, 600);
  position: relative;
  align-self: stretch;
  cursor: default;
}
.frame-solution-rows {
  width: 100%;
  display: flex;           /* ensures inner content expands properly */
  flex-direction: column;  /* allow vertical stacking */
  gap: 16px;
}
.frame-solution-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.frame-solution-column {
  flex: 1;                 /* equal width */
  height: auto;
  display: flex;           /* ensures inner content expands properly */
  flex-direction: column;  /* allow vertical stacking */
  background-color: var(--primary-dark-blue-600, #c3ddff);
  border-radius: 24px;
  padding: 16px;
}
.frame-solution-column:hover {
  box-shadow: 0 4px 8px rgba(0, 34, 72, 0.3);
  transition: all 0.3s ease;
}
.frame-solution-column-description {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.frame-solution-column-description-item-bg {
  background-color: var(--primary-dark-blue-900, #002248);
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-solution-column-description-item-icon {
  height: 24px;
  width: 24px;
  align-self: center;
  overflow: visible;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}
.frame-solution-column-description-item-text {
  color: #022051;
  text-align: start;
  font-family: var(--no-english-card-item-font-family, "Montserrat", sans-serif);
  font-size: var(--no-english-card-item-font-size, 18px);
  line-height: var(--no-english-card-item-line-height, 100%);
  font-weight: var(--no-english-card-item-font-weight, 400);
  position: relative;
  flex: 1;
  cursor: default;
}
.frame-solution-column-description-item-text-center {
  color: #022051;
  text-align: center;
  font-family: var(--no-english-card-item-font-family, "Montserrat", sans-serif);
  font-size: var(--no-english-card-item-font-size, 18px);
  line-height: var(--no-english-card-item-line-height, 100%);
  font-weight: var(--no-english-card-item-font-weight, 400);
  position: relative;
  flex: 1;
  cursor: default;
}

.frame-solution-row2 {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.frame-solution-column2 {
  flex: 1;                 /* equal width */
  height: auto;
  display: flex;           /* ensures inner content expands properly */
  flex-direction: column;  /* allow vertical stacking */
  background-color: var(--neutral-800-300, #f6efe4);
  border-radius: 24px;
  padding: 16px;
}
.frame-solution-column2:hover {
  box-shadow: 0 4px 8px rgba(255, 141, 0, 0.3);
  transition: all 0.3s ease;
}
.frame-solution-column2-description {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.frame-solution-column2-description-item-bg {
  background-color: var(--extra-selected-text-800-900, #ff8d00);
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-solution-column2-description-item-number {
  color: var(--white, #ffffff);
  text-align: center;
  font-family: var(--no-english-card-number-font-family, "Montserrat", sans-serif);
  font-size: var(--no-english-card-number-font-size, 20px);
  line-height: var(--no-english-card-number-line-height, 100%);
  font-weight: var(--no-english-card-number-font-weight, 600);

  align-self: center;
  overflow: visible;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}

.frame-section-4-box {
  width: 100%;
  height: auto; /* Высота будет определяться содержимым */

  display: flex;
  flex-direction: column;
  gap: 40px;

  overflow: hidden; /* Изменено с hidden на visible */
  box-sizing: border-box; /* Чтобы padding не увеличивал фактический размер */
}
.frame-section-4-box-content {
  align-self: stretch;
  flex-shrink: 0;

  width: calc(100% - 20px); /* ширина с учетом отступов слева и справа по 120px */
  max-width: 1280px;
  height: auto; /* Высота будет определяться содержимым */

  left: 50%;
  transform: translateX(-50%);
  overflow: visible; /* Изменено с hidden на visible */
  box-sizing: border-box; /* Чтобы padding не увеличивал фактический размер */

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  position: relative;
}

.scroll-container {
  position: relative;
  width: 100%;
  padding: 0 60px; /* Space for buttons */
}

.scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  /*scrollbar-width: none; !* Firefox *!*/
  /*-ms-overflow-style: none; !* IE/Edge *!*/
}

/*.scroll-wrapper::-webkit-scrollbar {*/
/*  display: none; !* Chrome/Safari *!*/
/*}*/
.scroll-wrapper::-webkit-scrollbar {
  height: 8px;
}

.scroll-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.scroll-wrapper::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.image-list {
  display: flex;
  gap: 16px;
}

.image-item {
  flex: 0 0 250px; /* Fixed width, prevents wrapping */
  height: 200px;
  background: #e0e0e0;
  border: 1px solid #ccc;
  border-radius: 40px;
  margin-top: 4px;
  margin-bottom: 8px;
  overflow: hidden;
}
.image-item:hover {
  box-shadow: 0 4px 4px rgba(0, 34, 72, 0.3);
  transition: all 0.3s ease;
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  z-index: 10;
  transition: background 0.3s;
}
.scroll-btn:active,
.scroll-btn.pressed {
  opacity: 0.8;
  animation: 0.3s ease;
}

.scroll-btn-left {
  width: 40px;
  height: 40px;
  left: 10px;
  background: url('../assets/images/section_4/back_button.svg') no-repeat center / contain;
}
.scroll-btn-left:hover {
  background: url('../assets/images/section_4/back_button_active.svg') no-repeat center / contain;
}
.scroll-btn-left:disabled {
  cursor: not-allowed;
  background: url('../assets/images/section_4/back_button_inactive.svg') no-repeat center / contain;
}
.scroll-btn-left-icon {
  transition: 0.2s;
}

.scroll-btn-right {
  width: 40px;
  height: 40px;
  right: 10px;
  background: url('../assets/images/section_4/next_button.svg') no-repeat center / contain;
}
.scroll-btn-right:hover {
  background: url('../assets/images/section_4/next_button_active.svg') no-repeat center / contain;
}
.scroll-btn-right:disabled {
  cursor: not-allowed;
  background: url('../assets/images/section_4/next_button_inactive.svg') no-repeat center / contain;
}
.scroll-btn-right-icon {
  transition: 0.2s;
}



.text-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.atp-description {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 584px;
  position: relative;
}
.teenyicons-tick-circle-outline {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.atp-description-text {
  color: #ffffff;
  text-align: left;
  font-family: var(--body-font-family, "Montserrat", sans-serif);
  font-size: var(--body-font-size, 22px);
  line-height: var(--body-line-height, 130%);
  font-weight: var(--body-font-weight, 400);
  position: relative;
  flex: 1;
  /*adaptive size*/
}
.atp-description-text-block {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.div7 {
  color: #ffffff;
  text-align: left;
  font-family: var(--body-font-family, "Montserrat", sans-serif);
  font-size: var(--body-font-size, 22px);
  line-height: var(--body-line-height, 130%);
  font-weight: var(--body-font-weight, 400);
  position: relative;
  width: 1170px;
}
.frame-whom {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  justify-content: flex-start;
  width: calc(100% - 40px); /* ширина с учетом отступов слева и справа по 120px */
  max-width: 1280px;
  left: 50%;
  transform: translateX(-50%);
  overflow: visible; /* Изменено с hidden на visible */
  box-sizing: border-box; /* Чтобы padding не увеличивал фактический размер */
}
.div8 {
  color: var(--title-text-color-light, #4a4a8d);
  text-align: center;
  font-family: var(--h2-font-family, "Montserrat", sans-serif);
  font-size: var(--h2-font-size, 43px);
  line-height: var(--h2-line-height, 130%);
  font-weight: var(--h2-font-weight, 700);
  position: relative;
  align-self: stretch;
}

.frame-no-english-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.no-english-card-box {
  flex: 1;                 /* equal width */
  height: 100%;
  display: flex;           /* ensures inner content expands properly */
  flex-direction: column;  /* allow vertical stacking */

  /* animation part */
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.no-english-card-box.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays */
.no-english-card-box:nth-child(1).visible {
  transition-delay: 0s; /* First appears immediately */
}

.no-english-card-box:nth-child(2).visible {
  transition-delay: 0.2s; /* Second waits 0.2s */
}

.no-english-card-box:nth-child(3).visible {
  transition-delay: 0.4s; /* Third waits 0.4s */
}

.no-english-card {
  background: var(--white, #ffffff);
  border-radius: 25px;
  width: 31%;
  min-height: 320px;
  height: auto;
  position: relative;
}

.frame-whom-cards {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}

.frame-section-3-box {
  background: var(--primary-dark-blue-900, #002248);
  width: 100%;
  height: auto; /* Высота будет определяться содержимым */
  border-radius: 40px;

  display: flex;
  flex-direction: column;

  overflow: hidden; /* Изменено с hidden на visible */
  box-sizing: border-box; /* Чтобы padding не увеличивал фактический размер */
}
.frame-section-3-box-content {
  align-self: stretch;
  flex-shrink: 0;

  width: calc(100% - 20px); /* ширина с учетом отступов слева и справа по 120px */
  max-width: 1280px;
  height: auto; /* Высота будет определяться содержимым */

  left: 50%;
  transform: translateX(-50%);
  overflow: visible; /* Изменено с hidden на visible */
  box-sizing: border-box; /* Чтобы padding не увеличивал фактический размер */

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-top: 48px;
  margin-bottom: 48px;
  gap: 40px;
  position: relative;
}
.frame-section-3-image {
  width: 200px;
  height: 200px;
  flex-shrink: 0; /* Prevents shrinking */
}
.frame-section-3-image-svg {
  flex-shrink: 0;
  padding: 15px;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  object-fit: cover; /* Covers entire space, may crop */
  background-color: white;
}
.frame-section-3-title {
  flex: 1; /* Takes remaining space */
  color: var(--neutral-800-300, #f6efe4);
  text-align: left;
  font-family: var(--no-english-title-font-family, "Montserrat", sans-serif);
  font-size: var(--no-english-title-font-size, 38px);
  line-height: 85px;
  font-weight: var(--no-english-title-font-weight, 700);

  cursor: default;
  vertical-align: middle; /* align with surrounding text */
}

.card {
  background: var(--light-purple, #cfd5f6);
  border-radius: 25px;
  width: 31%;
  min-height: 320px;
  height: auto;
  position: relative;
}
.img-whom-bg-0 {
  height: auto;
  position: absolute;
  right: 0;
  bottom: 0;
  overflow: visible;
}
.img-whom-bg-1 {
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
}
.img-whom-bg-2 {
  height: auto;
  position: absolute;
  left: 0;
  bottom: 0;
  overflow: visible;
}
.whom-texts {
  border-radius: 25px;
  padding: 20px 20px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.customer-review {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  position: relative;
  overflow: hidden;
}
.no-english-icon {
  background-color: var(--neutral-800-300, #f6efe4);
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  left: 50%;
  transform: translateX(-50%);
}
.no-english-icon-svg {
  height: 50px;
  width: 50px;
  align-self: center;
  overflow: visible;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}
.no-english-card-texts {
  flex: 1; /* stretch to fill parent */
  background-color: var(--white, #ffffff);
  border-radius: 40px;
  margin-top: -50px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 350px;
  height: auto;
}
.no-english-card-texts:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}
.no-english-item-bg {
  background-color: var(--neutral-800-300, #f6efe4);
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.no-english-item-bg.white {
  background-color: var(--white, #ffff);
}
.no-english-item-number {
  color: var(--primary-dark-blue-900, #002248);
  text-align: center;
  font-family: var(--no-english-card-number-font-family, "Montserrat", sans-serif);
  font-size: var(--no-english-card-number-font-size, 20px);
  line-height: var(--no-english-card-number-line-height, 100%);
  font-weight: var(--no-english-card-number-font-weight, 600);

  align-self: center;
  overflow: visible;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}
.no-english-item-number.big {
  font-size: 22px;
}
.no-english-item-text {
  color: var(--primary-dark-blue-900, #002248);
  text-align: left;
  font-family: var(--no-english-card-item-font-family, "Montserrat", sans-serif);
  font-size: var(--no-english-card-item-font-size, 18px);
  line-height: var(--no-english-card-item-line-height, 100%);
  font-weight: var(--no-english-card-item-font-weight, 400);
  position: relative;
  flex: 1;
  cursor: default;
}

.group2 {
  height: auto;
  position: absolute;
  left: 0;
  top: 43px;
  transform: translate(0px, -35.91px);
  overflow: visible;
}
.whom-texts-title {
  color: var(--dark-purple, #4a4a8d);
  text-align: center;
  font-family: var(--h3-font-family, "Montserrat", sans-serif);
  font-size: var(--h3-font-size, 34px);
  line-height: var(--h3-line-height, 130%);
  font-weight: var(--h3-font-weight, 700);
  position: relative;
  align-self: stretch;
}
.whom-texts-description {
  width: 100%;
  color: var(--textdark, #2c2c62);
  text-align: center;
  font-family: var(--body-2-font-family, "Montserrat", sans-serif);
  font-size: var(--body-2-font-size, 20px);
  line-height: var(--body-2-line-height, 130%);
  font-weight: var(--body-2-font-weight, 400);
}
.briefcase-1 {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  position: relative;
  overflow: hidden;
}
.gym-1 {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  position: relative;
  overflow: hidden;
}
.frame-app {
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
  justify-content: flex-start;
  width: calc(100% - 40px); /* ширина с учетом отступов слева и справа по 120px */
  max-width: 1280px;
  left: 50%;
  transform: translateX(-50%);
  overflow: visible; /* Изменено с hidden на visible */
  box-sizing: border-box; /* Чтобы padding не увеличивал фактический размер */
}
.frame-app-box {
  display: flex;
  flex-direction: column;
  gap: 100px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-app-client {
  align-self: stretch;
  flex-shrink: 0;
  min-height: 628px; /* Минимальная высота вместо фиксированной */
  height: auto; /* Высота будет определяться содержимым */
  position: relative;

  gap: 60px;

  /* make content to be in columns */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.frame-app-client-mockups {
  display: flex;
  flex-direction: column;

  width: calc(100%);
  max-width: 512px;
  max-height: 602px; /* Максимальная высота вместо фиксированной */
  height: auto; /* Высота будет определяться содержимым */

  /*left: 20px;*/
  top: 0;
}
.frame-app-client-features {
  display: flex;
  flex-direction: column;

  gap: 60px;
  align-items: flex-start;
  justify-content: flex-start;

  width: calc(100%);
  max-width: 616px;

  /*left: 20px;*/
  top: 10px;
}
.app-section-client-get-1 {
  width: 210px;
  height: 584px;
  position: absolute;
  left: 302px;
  top: 45px;
  object-fit: cover;
}
.app-section-client-get-2 {
  width: 267px;
  height: 554px;
  position: absolute;
  left: -0.19px;
  top: -0.39px;
  object-fit: cover;
}
.div12 {
  color: var(--primary-dark-blue-900, #002248);
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 34px;
  line-height: 130%;
  font-weight: 700;
  position: relative;
  align-self: stretch;
}
.icon-adv {
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  overflow: visible;
}
.div13 {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: var(--body-3-font-family, "Montserrat", sans-serif);
  font-size: var(--body-3-font-size, 16px);
  line-height: var(--body-3-line-height, 130%);
  font-weight: var(--body-3-font-weight, 400);
  position: relative;
  flex: 1;
}
.icon-adv3 {
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  overflow: hidden;
}
.frame-app-owner {
  align-self: stretch;
  flex-shrink: 0;
  min-height: 644px; /* Минимальная высота вместо фиксированной */
  height: auto; /* Высота будет определяться содержимым */
  position: relative;

  gap: 60px;

  /* make content to be in columns */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.frame-app-owner-mockups {
  display: flex;
  flex-direction: column;

  width: calc(100%);
  max-width: 616px;
  max-height: 556px; /* Максимальная высота вместо фиксированной */
  height: auto; /* Высота будет определяться содержимым */

  /* Удаляем позиционирование */
  /*left: 20px;*/
  top: 0;
  position: relative; /* Используем относительное позиционирование */
}
.frame-app-owner-mockups-mobile {
  /* Style */
  display: none; /* Hide image on tiny screens */
  flex-direction: column;

  width: calc(100%);
  max-width: 616px;
  max-height: 556px; /* Максимальная высота вместо фиксированной */
  height: auto; /* Высота будет определяться содержимым */

  /* Удаляем позиционирование */
  /*left: 20px;*/
  top: 0;
  position: relative; /* Используем относительное позиционирование */
}
.frame-app-owner-features {
  display: flex;
  flex-direction: column;

  gap: 60px;
  align-items: flex-start;
  justify-content: flex-start;

  width: calc(100%);
  max-width: 512px;

  /* Удаляем позиционирование */
  /*left: 20px;*/
  /*top: 0;*/
  position: relative; /* Используем относительное позиционирование */
}
.div14 {
  color: var(--primary-dark-blue-900, #002248);
  text-align: left;
  font-family: var(--h3-font-family, "Montserrat", sans-serif);
  font-size: var(--h3-font-size, 34px);
  line-height: var(--h3-line-height, 130%);
  font-weight: var(--h3-font-weight, 700);
  position: relative;
}
.app-section-owner-get-laptop {
  width: calc(100%);
  /*width: 730px;*/
  max-height: 512px; /* Максимальная высота вместо фиксированной */
  height: auto; /* Высота будет определяться содержимым */
  /*position: absolute;*/
  object-fit: cover;
}
.app-section-owner-get-phone {
  width: calc(50%);
  max-width: 334px;
  max-height: 328px; /* Максимальная высота вместо фиксированной */
  height: auto; /* Высота будет определяться содержимым */
  position: absolute;
  left: 52px;
  top: 127px;
  transform-origin: 0 0;
  transform: rotate(21.82deg) scale(1, 1);
  object-fit: cover;
}
.frame-app-trainer {
  align-self: stretch;
  flex-shrink: 0;
  min-height: 607px; /* Минимальная высота вместо фиксированной */
  height: auto; /* Высота будет определяться содержимым */
  position: relative;

  gap: 60px;

  /* make content to be in columns */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.frame-app-trainer-mockups {
  display: flex;
  flex-direction: column;

  width: calc(100%);
  max-width: 512px;
  max-height: 602px; /* Максимальная высота вместо фиксированной */
  height: auto; /* Высота будет определяться содержимым */

  /*left: 70px;*/
  top: 1px;
}
.frame-app-trainer-features {
  display: flex;
  flex-direction: column;

  gap: 60px;
  align-items: flex-start;
  justify-content: flex-start;

  width: calc(100%);
  max-width: 616px;

  /*left: 20px;*/
  top: -3px;
}
.app-section-trainer-get-1 {
  width: 199.06px;
  height: 554px;
  position: absolute;
  left: 10%;
  top: -30px;
  transform-origin: 0 0;
  transform: rotate(12.127deg) scale(1, 1);
  object-fit: cover;
}
.app-section-trainer-get-2 {
  width: 267.5px;
  height: 554px;
  position: absolute;
  left: 23%;
  top: 48px;
  object-fit: cover;
}
.div16 {
  color: var(--primary-dark-blue-900, #002248);
  text-align: left;
  font-family: var(--h3-font-family, "Montserrat", sans-serif);
  font-size: var(--h3-font-size, 34px);
  line-height: var(--h3-line-height, 130%);
  font-weight: var(--h3-font-weight, 700);
  position: relative;
  align-self: stretch;
}
.frame-whom-card {
  background: var(--primary-dark-blue-900, #002248);
  border-radius: 40px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  padding: 24px;
  align-items: stretch; /* centers both columns vertically */
}
.img-benefits {
  border-radius: 40px;
  width: calc(70%);
  max-width: 512px;
  max-height: 788px;
  height: auto; /* Высота будет определяться содержимым */

  position: absolute;
  right: 0;
  bottom: 0;
  object-fit: cover;
}
.frame-whom-card-items {
  /*flex: 1;                 !* equal width *!*/
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
}
.frame-whom-card-item-text {
  color: var(--white, #ffffff);
  text-align: left;
  font-family: var(--no-english-card-item-font-family, "Montserrat", sans-serif);
  font-size: 20px;
  line-height: var(--no-english-card-item-line-height, 110%);
  font-weight: var(--no-english-card-item-font-weight, 400);
  position: relative;
  flex: 1;
  cursor: default;
}
.frame-whom-card-images {
  /*flex: 1;                 !* equal width *!*/
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* hide overflow if image is too big */
}
/* Make sure images don't overflow the column */
.frame-whom-card-images img {
  max-width: 100%;
  height: auto;
  object-fit: cover; /* ensures full image fits */
  border-radius: 16px;
  transition: opacity 0.5s ease;
}

.fade-in {
  animation: fadeIn 0.3s forwards;
}

.fade-out {
  animation: fadeOut 0.3s forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.custom-slider {
  overflow: hidden;
  width: 100%;
  max-width: 90%; /* adjust to taste */ margin: 0 auto;
  position: relative;
}
.custom-slider .slide {
  display: none;
  transition: opacity 0.5s ease;
}
.custom-slider .slide.active {
  display: block;
  opacity: 1;

  height: auto;
  object-fit: contain;
}
.custom-dots {
  text-align: center;
  list-style: none;
  padding: 0;
}
.custom-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: var(--white, #ffffff);
  border-radius: 50%;
  cursor: pointer;
}
.custom-dots .dot.active {
  background: var(--accent-secondary, #a5aee1);
}


.text-list-benefits {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: calc(100%);
  position: relative;
}
.frame-1321314613 {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 716px;
  position: absolute;
  left: 30px;
  top: 50%;
  translate: 0 -50%;
}
.atp-description3 {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.frame-crm {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  width: calc(100% - 40px); /* ширина с учетом отступов слева и справа по 120px */
  max-width: 1280px;
  left: 50%;

  gap: 24px;
  /*transform: translateX(-50%);*/
}
.frame-crm-description {
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 50%; /* Точно 50% от родительского контейнера */
  /*padding-right: 15px; !* Небольшой отступ справа для лучшего визуального разделения *!*/
  box-sizing: border-box;
}
.frame-1321314610 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

/* Стили для заголовка */
.div18 {
  color: var(--title-text-color-light, #4a4a8d);
  text-align: left;
  font-family: var(--h2-font-family, "Montserrat", sans-serif);
  font-size: var(--h2-font-size, 43px);
  line-height: var(--h2-line-height, 130%);
  font-weight: var(--h2-font-weight, 700);
  position: relative;
  width: 100%;
  word-wrap: break-word;
}

/* Стили для текста */
.div19 {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: var(--body-font-family, "Montserrat", sans-serif);
  font-size: var(--body-font-size, 22px);
  line-height: var(--body-line-height, 130%);
  font-weight: var(--body-font-weight, 400);
  position: relative;
  width: 100%;
  word-wrap: break-word;
}
/* Обновляем правую часть с изображением */
.frame-crm-image {
  width: 50%; /* Точно 50% от родительского контейнера */
  padding-left: 15px; /* Небольшой отступ слева для лучшего визуального разделения */
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Обновляем правую часть с изображением */
.frame-crm-image-mobile {
  width: 100%; /* Точно 50% от родительского контейнера */
  padding-left: 15px; /* Небольшой отступ слева для лучшего визуального разделения */
  box-sizing: border-box;
  display: none; /* Hide image on tiny screens */
  justify-content: center;
  align-items: center;
}
/* Стили для изображений внутри макбука */
.shadow, .crm-laptop-ru {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.frame-crm-full-control {
  background: var(--primary-dark-blue-900, #002248);
  width: 100%;
  min-height: 4192px; /* Минимальная высота вместо фиксированной */
  height: auto; /* Высота будет определяться содержимым */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 60px;

  overflow: hidden; /* Изменено с hidden на visible */
  box-sizing: border-box; /* Чтобы padding не увеличивал фактический размер */
}
.functionality {
  align-self: stretch;
  flex-shrink: 0;

  width: calc(100%);
  height: auto; /* Высота будет определяться содержимым */
  position: relative;
}
.frame-crm-full-control-box {
  align-self: stretch;
  flex-shrink: 0;

  width: calc(100% - 20px); /* ширина с учетом отступов слева и справа по 120px */
  max-width: 1280px;
  height: auto; /* Высота будет определяться содержимым */

  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  overflow: visible; /* Изменено с hidden на visible */
  box-sizing: border-box; /* Чтобы padding не увеличивал фактический размер */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 120px;
  position: relative;
}
.block-full-control {
  align-self: stretch;
  flex-shrink: 0;

  width: calc(100%);
  min-height: 600px;
  height: auto; /* Высота будет определяться содержимым */
  position: relative;
}
.frame-full-control-texts {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 30%;
  position: absolute;
  left: 40px;
  top: 70px;
}
.div20 {
  color: var(--white, #ffffff);
  text-align: left;
  font-family: var(--h3-font-family, "Montserrat", sans-serif);
  font-size: var(--h3-font-size, 34px);
  line-height: var(--h3-line-height, 130%);
  font-weight: var(--h3-font-weight, 700);
  position: relative;
}
.frame-13213146132 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.div21 {
  color: var(--primary-dark-blue-100, #f6f6f6);
  text-align: left;
  font-family: var(--h4-font-family, "Montserrat", sans-serif);
  font-size: var(--h4-font-size, 28px);
  line-height: var(--h4-line-height, 130%);
  font-weight: var(--h4-font-weight, 700);
  position: relative;
  width: 100%;
}
.text-list3 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.atp-description4 {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 100%;
  position: relative;
}
.pepicons-pencil-star-circle {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}
.group-star {
  width: 100%;
  height: 100%;
}
.div22 {
  color: var(--primary-dark-blue-100, #f6f6f6);
  text-align: left;
  font-family: var(--body-3-font-family, "Montserrat", sans-serif);
  font-size: var(--body-3-font-size, 16px);
  line-height: var(--body-3-line-height, 130%);
  font-weight: var(--body-3-font-weight, 400);
  position: relative;
  flex: 1;
}
.group-5331 {
  position: absolute;
  inset: 0;
}
.frame-full-control-mockups-small {
  width: 338px;
  height: 600px;
  position: absolute;
  right: 20px;
  top: 0;
}
.frame-full-control-mockup-main {
  width: 350px;
  height: 600px;
  position: absolute;
  right: calc(50% - 196px);
  top: 50%;
  translate: 0 -50%;
}
.img-crm-full-control-1 {
  max-width: 370px;
  width: auto;
  height: 600px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  object-fit: cover;
  overflow: visible;
}
.frame-1321314652 {
  display: flex;
  flex-direction: row;
  gap: 50px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 315px;
  position: absolute;
  left: 22.64px;
  top: -0.5px;
}
.img-crm-full-control-2 {
  flex-shrink: 0;
  width: 132.3px;
  height: 274px;
  position: relative;
  object-fit: cover;
}
.img-crm-full-control-3 {
  flex-shrink: 0;
  width: 132.3px;
  height: 274px;
  position: relative;
  object-fit: cover;
}
.img-crm-full-control-4 {
  flex-shrink: 0;
  width: 132.3px;
  height: 274px;
  position: relative;
  object-fit: cover;
}
.img-crm-full-control-5 {
  flex-shrink: 0;
  width: 132.3px;
  height: 274px;
  position: relative;
  object-fit: cover;
}
.rectangle-1043 {
  background: #cfd5f6;
  width: 127px;
  height: 32px;
  position: absolute;
  left: 234px;
  top: 229px;
}
.rectangle-1044 {
  background: #cfd5f6;
  width: 127px;
  height: 32px;
  position: absolute;
  left: 107px;
  top: 262px;
}
.buttons2 {
  background: var(--accent-color-light, #002248);
  border-radius: 18px;
  padding: 9px 58.5px 9px 58.5px;
  display: flex;
  flex-direction: row;
  gap: 9px;
  align-items: center;
  justify-content: center;
  width: 158.4px;
  height: 36px;
  position: absolute;
  left: 73px;
  top: 264px;
  box-shadow: -4.44px 0px 11.11px 0px rgba(225, 222, 255, 0.5);
  overflow: hidden;
}
.div23 {
  color: #ffffff;
  text-align: center;
  font-family: var(--header-3-font-family, "Montserrat", sans-serif);
  font-size: var(--header-3-font-size, 16px);
  line-height: var(--header-3-line-height, 130%);
  font-weight: var(--header-3-font-weight, 700);
  position: relative;
  width: 125.1px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.buttons3 {
  background: var(--accent-color-light, #002248);
  border-radius: 18px;
  padding: 9px 58.5px 9px 58.5px;
  display: flex;
  flex-direction: row;
  gap: 9px;
  align-items: center;
  justify-content: center;
  width: 158.4px;
  height: 36px;
  position: absolute;
  left: 237px;
  top: 223px;
  box-shadow: 4.44px 0px 11.11px 0px rgba(225, 222, 255, 0.5);
  overflow: hidden;
}
.block-easy-booking {
  align-self: stretch;
  flex-shrink: 0;

  width: calc(100%);
  min-height: 600px;
  height: auto; /* Высота будет определяться содержимым */
  position: relative;
}
.frame-easy-booking-mockups {
  width: 60%;
  height: 600px;
  position: absolute;
  left: 40px;
  top: 15px;
  overflow: visible;
}
.img-easy_booking-1 {
  width: 265px;
  height: 550px;
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  object-fit: cover;
}
.main-mockup-2 {
  width: 370px;
  height: 600px;
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
}
.img-easy_booking-2 {
  max-width: 370px;
  width: auto;
  height: 600px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  object-fit: cover;
  overflow: visible;
}
.pict {
  border-radius: 15px;
  width: 316px;
  height: 216.3px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 79px;
  box-shadow: 0px 0px 18.66px 1.24px rgba(255, 255, 255, 0.5);
  overflow: hidden;
}
.pagination {
  width: 35.38px;
  height: 6.43px;
  position: absolute;
  left: 267.76px;
  top: 12.87px;
}
.frame-1321314654 {
  width: 246px;
  height: 329px;
  position: absolute;
  left: 22px;
  top: 247px;
  overflow: hidden;
}
.workout-card {
  background: var(--card-bg-light, #ebe9fe);
  border-radius: 20.44px 20.44px 0px 0px;
  width: 246px;
  height: 469.51px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: -0.26px;
  overflow: hidden;
}
.buttons4 {
  background: var(--accent-color-light, #002248);
  border-radius: 13.63px;
  padding: 6.81px 15.67px 6.81px 15.67px;
  display: flex;
  flex-direction: row;
  gap: 6.81px;
  align-items: center;
  justify-content: center;
  width: 134.24px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 162.86px;
  overflow: hidden;
}
.div24 {
  color: var(--textwhite, #ffffff);
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 10.903046607971191px;
  line-height: 130%;
  font-weight: 700;
  position: relative;
  width: 102.9px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comment {
  display: flex;
  flex-direction: column;
  gap: 2.73px;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 112.44px;
}
.div25 {
  color: var(--title-text-color-light, #4a4a8d);
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 9.540165901184082px;
  line-height: 130%;
  font-weight: 700;
  position: relative;
  width: 224.19px;
}
.input {
  background: var(--inputfieldbg, #ffffff);
  border-radius: 20.44px;
  padding: 3.41px 10.9px 3.41px 10.9px;
  display: flex;
  flex-direction: row;
  gap: 5.45px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 224.19px;
  height: 27.26px;
  position: relative;
  overflow: hidden;
}
.text5 {
  display: flex;
  flex-direction: row;
  gap: 6.81px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.div26 {
  color: var(--secondary-text, #cbcbcb);
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 8.177285194396973px;
  line-height: 130%;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.share {
  display: flex;
  flex-direction: column;
  gap: 2.73px;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  left: 10.9px;
  top: 325.73px;
}
.div27 {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 9.540165901184082px;
  line-height: 130%;
  font-weight: 700;
  position: relative;
  width: 224.19px;
}
.icons {
  flex-shrink: 0;
  width: 204.43px;
  height: 59.97px;
  position: relative;
}
.icons-2 {
  display: flex;
  flex-direction: column;
  gap: 8.18px;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  left: 133.56px;
  top: 32.71px;
  transform-origin: 0 0;
  transform: rotate(90deg) scale(1, 1);
}
.icon-color {
  flex-shrink: 0;
  width: 27.26px;
  height: 27.26px;
  position: relative;
  overflow: visible;
}
.icon-color2 {
  flex-shrink: 0;
  width: 27.26px;
  height: 27.26px;
  position: relative;
  transform-origin: 0 0;
  transform: rotate(-90deg) scale(1, 1);
  overflow: hidden;
}
._6-twitter {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
  overflow: visible;
}
.icon-color3 {
  border-radius: 4.09px;
  flex-shrink: 0;
  width: 27.26px;
  height: 27.26px;
  position: relative;
  transform-origin: 0 0;
  transform: rotate(-90deg) scale(1, 1);
  overflow: hidden;
}
._2697657-apple-messages-bubble-communication-conversation-icon-1 {
  width: 27.26px;
  height: 27.26px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  overflow: hidden;
}
.symbols-6 {
  height: auto;
  position: absolute;
  left: -0.68px;
  top: -0.68px;
  overflow: visible;
}
.icon-color4 {
  flex-shrink: 0;
  width: 27.26px;
  height: 27.26px;
  position: relative;
  overflow: visible;
}
.icons-1 {
  display: flex;
  flex-direction: column;
  gap: 8.18px;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  left: 204.43px;
  top: 0;
  transform-origin: 0 0;
  transform: rotate(90deg) scale(1, 1);
}
.icon-color5 {
  flex-shrink: 0;
  width: 27.26px;
  height: 27.26px;
  position: relative;
  overflow: visible;
}
.icon-color6 {
  flex-shrink: 0;
  width: 27.26px;
  height: 27.26px;
  position: relative;
  overflow: visible;
}
.icon-color7 {
  flex-shrink: 0;
  width: 27.26px;
  height: 27.26px;
  position: relative;
  overflow: visible;
}
._3-instagram {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
  overflow: visible;
}
.icon-color8 {
  flex-shrink: 0;
  width: 27.26px;
  height: 27.26px;
  position: relative;
  overflow: visible;
}
.icon-color9 {
  flex-shrink: 0;
  width: 27.26px;
  height: 27.26px;
  position: relative;
  overflow: visible;
}
.about-workout {
  display: flex;
  flex-direction: column;
  gap: 2.73px;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  left: 10.9px;
  top: 237.14px;
}
.div28 {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 8.177285194396973px;
  line-height: 130%;
  font-weight: 400;
  position: relative;
  width: 224.19px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.staff-card-1 {
  padding: 8.86px 0px 8.86px 0px;
  width: 224.19px;
  height: 29.98px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 198.98px;
}
.staff-card-3 {
  border-style: solid;
  border-color: var(--secondary-text, #cbcbcb);
  border-width: 0.34px 0px 0.34px 0px;
  padding: 2.73px 0px 2.73px 0px;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  left: 0;
  top: 0;
}
.frame-1321314268 {
  flex-shrink: 0;
  width: 224.19px;
  height: 24.53px;
  position: relative;
}
.frame-1321314270 {
  display: flex;
  flex-direction: row;
  gap: 6.81px;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  left: 0;
  top: 0.34px;
}
.div29 {
  color: var(--title-text-color-light, #4a4a8d);
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 9.540165901184082px;
  line-height: 130%;
  font-weight: 700;
  position: relative;
}
.frame-1321314271 {
  display: flex;
  flex-direction: row;
  gap: 6.81px;
  align-items: flex-start;
  justify-content: flex-end;
  position: absolute;
  left: 207.16px;
  top: 50%;
  translate: 0 -50%;
}
.arrowla {
  flex-shrink: 0;
  width: 17.04px;
  height: 17.04px;
  position: relative;
  overflow: visible;
}
.div30 {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 8.177285194396973px;
  line-height: 130%;
  font-weight: 400;
  position: absolute;
  left: 0;
  top: 13.63px;
  width: 76.32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.available-seats {
  display: flex;
  flex-direction: column;
  gap: 2.73px;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 78.37px;
}
._2-10 {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 8.177285194396973px;
  line-height: 130%;
  font-weight: 400;
  position: relative;
  width: 224.19px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.date {
  display: flex;
  flex-direction: column;
  gap: 2.73px;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  left: 10.9px;
  top: 33.39px;
}
._12-10-00-50 {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 8.177285194396973px;
  line-height: 130%;
  font-weight: 400;
  position: relative;
  width: 224.19px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.div31 {
  color: var(--title-text-color-light, #4a4a8d);
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 14.99168872833252px;
  line-height: 130%;
  font-weight: 700;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 5.45px;
  width: 224.19px;
}
.home-indicator {
  width: 265.76px;
  height: 23.17px;
  position: absolute;
  left: -10.22px;
  top: 320.28px;
}
.home-indicator2 {
  background: #ffffff;
  border-radius: 68.14px;
  width: 91.31px;
  height: 3.41px;
  position: absolute;
  left: 50%;
  translate: -50%;
  bottom: 5.45px;
}
.frame-easy-booking-texts {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 30%;
  position: absolute;
  right: 40px;
  top: 75px;
}
.atp-description5 {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.group16 {
  width: 96.15%;
  height: 96.15%;
  position: absolute;
  right: 1.92%;
  left: 1.92%;
  bottom: 1.92%;
  top: 1.92%;
  overflow: visible;
}
.block-balance-history {
  align-self: stretch;
  flex-shrink: 0;

  width: calc(100%);
  min-height: 600px;
  height: auto; /* Высота будет определяться содержимым */
  position: relative;
}
.group-5335 {
  position: absolute;
  inset: 0;
}
.img-history-main {
  width: 265px;
  height: 550px;
  position: absolute;
  right: 20px;
  top: 25px;
  object-fit: cover;
}
.frame-balance-history-mockup-main {
  width: 350px;
  height: 600px;
  position: absolute;
  right: calc(50% - 200px);
  top: 50%;
  translate: 0 -50%;
}
.img-balance-main {
  max-width: 350px;
  width: auto;
  height: 600px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  object-fit: cover;
  overflow: visible;
}
.filter {
  background: var(--accent-color-light, #002248);
  border-radius: 18px;
  padding: 9px 58.5px 9px 58.5px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: center;
  justify-content: center;
  width: 126px;
  height: 24px;
  position: absolute;
  left: -18px;
  top: 85px;
  box-shadow: -2px 0px 5px 0px rgba(225, 222, 255, 0.5);
  overflow: hidden;
}
.div32 {
  color: #000000;
  text-align: center;
  font-family: var(--filter-small-text-font-family, "Montserrat-Bold", sans-serif);
  font-size: var(--filter-small-text-font-size, 10px);
  line-height: var(--filter-small-text-line-height, 130%);
  font-weight: var(--filter-small-text-font-weight, 700);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame-balance-history-texts {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 35%;
  position: absolute;
  left: 40px;
  top: 127px;
}
.block-shop {
  align-self: stretch;
  flex-shrink: 0;

  width: calc(100%);
  min-height: 600px;
  height: auto; /* Высота будет определяться содержимым */
  position: relative;
}
.frame-shop-texts {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 30%;
  position: absolute;
  left: 40px;
  top: 96px;
}
.group-5333 {
  position: absolute;
  inset: 0;
}
.frame-shop-mockups-small {
  width: 338px;
  height: 600px;
  position: absolute;
  right: 20px;
  top: 0;
}
.img-store-1 {
  width: 45%;
  height: 350px;
  position: absolute;
  left: 0;
  top: 0;
  object-fit: contain;
}
.img-store-2 {
  width: 45%;
  height: 350px;
  position: absolute;
  right: 0;
  bottom: 0;
  object-fit: contain;
}
.frame-shop-mockup-main {
  width: 350px;
  height: 600px;
  position: absolute;
  right: calc(50% - 196px);
  top: 50%;
  translate: 0 -50%;
}
.img-store-main {
  max-width: 350px;
  width: auto;
  height: 600px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  object-fit: cover;
  overflow: visible;
}
.frame-1321314670 {
  border-radius: 10.36px;
  width: 286px;
  height: 114px;
  position: absolute;
  left: calc(50% - 161.5px);
  top: 128.17px;
  box-shadow: -4px 0px 12px 1px rgba(255, 255, 255, 0.5);
}
.frame-1321314391 {
  border-radius: 10.36px;
  width: 286px;
  height: 114px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 0;
  overflow: hidden;
}
.div34 {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 8.290908813476562px;
  line-height: 130%;
  font-weight: 400;
  position: absolute;
  left: 42.53px;
  top: 31.09px;
  width: 168.58px;
}
.div35 {
  color: var(--title-text-color-light, #4a4a8d);
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 11.054545402526855px;
  line-height: 130%;
  font-weight: 700;
  position: absolute;
  left: calc(50% - 100.47px);
  top: calc(50% - 45.95px);
  width: 160.98px;
}
.pagination2 {
  width: 30.4px;
  height: 5.53px;
  position: absolute;
  left: calc(50% - -3.16px);
  top: 102.95px;
}
.frame-1321314396 {
  background: var(--accent-secondary, #a5aee1);
  border-radius: 0px 6.91px 6.91px 0px;
  width: 113.31px;
  height: 20.73px;
  position: absolute;
  left: 37px;
  top: calc(50% - -14.16px);
  overflow: hidden;
}
._13 {
  color: var(--textwhite, #ffffff);
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 9.672727584838867px;
  line-height: 130%;
  font-weight: 700;
  position: absolute;
  left: 5.53px;
  top: 50%;
  translate: 0 -50%;
  width: 102.25px;
}
.picture2 {
  border-radius: 9.06px;
  width: 154px;
  height: 132px;
  position: absolute;
  left: calc(50% - -7.5px);
  top: calc(50% - 36px);
  overflow: hidden;
  object-fit: cover;
  aspect-ratio: 154/132;
}
.block-statistics {
  align-self: stretch;
  flex-shrink: 0;

  width: calc(100%);
  min-height: 600px;
  height: auto; /* Высота будет определяться содержимым */
  position: relative;
}
.group-5334 {
  position: absolute;
  inset: 0;
}
.frame-statistics-mockups-small {
  display: flex;
  flex-direction: row;
  gap: 50px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 315px;
  position: absolute;
  left: 20px;
  top: 0;
}
.img-statistics-1 {
  flex-shrink: 0;
  width: 132.3px;
  height: 274px;
  position: relative;
  object-fit: cover;
}
.img-statistics-2 {
  flex-shrink: 0;
  width: 132.3px;
  height: 274px;
  position: relative;
  object-fit: cover;
}
.img-statistics-3 {
  flex-shrink: 0;
  width: 132.3px;
  height: 274px;
  position: relative;
  object-fit: cover;
}
.img-statistics-4 {
  flex-shrink: 0;
  width: 132.3px;
  height: 274px;
  position: relative;
  object-fit: cover;
}
.frame-statistics-mockup-main {
  width: 350px;
  height: 600px;
  position: absolute;
  right: calc(50% - 150px);
  top: 50%;
  translate: 0 -50%;
}
.img-statistics-main {
  max-width: 350px;
  width: auto;
  height: 600px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  object-fit: cover;
  overflow: visible;
}
.dots {
  width: 308.89px;
  height: 117.49px;
  position: absolute;
  left: 9.47px;
  top: 50.22px;
}
.other-icons {
  width: 5.69px;
  height: 5.69px;
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
}
.other-icons2 {
  width: 5.69px;
  height: 5.69px;
  position: absolute;
  left: 43.59px;
  top: 17.05px;
  overflow: visible;
}
.other-icons3 {
  width: 5.69px;
  height: 5.69px;
  position: absolute;
  left: 82.44px;
  top: 63.48px;
  overflow: visible;
}
.other-icons4 {
  width: 5.69px;
  height: 5.69px;
  position: absolute;
  left: 115.6px;
  top: 57.8px;
  overflow: visible;
}
.other-icons5 {
  width: 5.69px;
  height: 5.69px;
  position: absolute;
  left: 177.19px;
  top: 52.11px;
  overflow: visible;
}
.other-icons6 {
  width: 5.69px;
  height: 5.69px;
  position: absolute;
  left: 209.4px;
  top: 69.17px;
  overflow: visible;
}
.other-icons7 {
  width: 5.69px;
  height: 5.69px;
  position: absolute;
  left: 247.3px;
  top: 80.54px;
  overflow: visible;
}
.other-icons8 {
  width: 5.69px;
  height: 5.69px;
  position: absolute;
  left: 282.36px;
  top: 90.96px;
  overflow: visible;
}
.other-icons9 {
  width: 5.69px;
  height: 5.69px;
  position: absolute;
  left: 303.21px;
  top: 111.81px;
  overflow: visible;
}
.lines {
  border-style: solid;
  border-color: var(--secondary-text, #cbcbcb);
  border-width: 0px 0px 0.95px 0.95px;
  width: 326.9px;
  height: 227.41px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 0;
  overflow: hidden;
}
.text6 {
  background: rgba(2, 15, 19, 0);
  padding: 0.95px 3.79px 0.95px 3.79px;
  display: flex;
  flex-direction: row;
  gap: 9.48px;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 214.14px;
  overflow: hidden;
}
.div36 {
  color: #ffffff;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 11.370261192321777px;
  line-height: 130%;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.text7 {
  background: rgba(2, 15, 19, 0);
  padding: 3.79px 0.95px 3.79px 0.95px;
  display: flex;
  flex-direction: row;
  gap: 9.48px;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
.div37 {
  color: #ffffff;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 11.370261192321777px;
  line-height: 130%;
  font-weight: 700;
  position: relative;
  transform-origin: 0 0;
  transform: rotate(-90deg) scale(1, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.text8 {
  background: rgba(2, 15, 19, 0);
  padding: 0.95px 3.79px 0.95px 3.79px;
  display: flex;
  flex-direction: row;
  gap: 9.48px;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 281.41px;
  top: 214.14px;
  overflow: hidden;
}
.text9 {
  background: rgba(2, 15, 19, 0);
  padding: 0.95px 3.79px 0.95px 3.79px;
  display: flex;
  flex-direction: row;
  gap: 9.48px;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 126.97px;
  top: 214.14px;
  overflow: hidden;
}
.period {
  width: 245px;
  height: 38.01px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 120px;
}
.period-stats {
  background: var(--accent-secondary, #a5aee1);
  border-radius: 10.86px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 1px;
  width: 245px;
  height: 22px;
  position: absolute;
  left: 0;
  top: 18px;
}
.segmented-picker-option {
  width: 61.08px;
  height: 19px;
  position: absolute;
  left: 1.36px;
  top: 50%;
  translate: 0 -50%;
}
.separator {
  background: #ffffff;
  border-radius: 0.34px;
  width: 0.57%;
  height: 57.14%;
  position: absolute;
  right: 1.15%;
  left: 98.28%;
  bottom: 21.43%;
  top: 21.43%;
}
.label {
  color: #ffffff;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 9.501384735107422px;
  line-height: 130%;
  font-weight: 700;
  position: absolute;
  right: 5.43px;
  left: 5.4296875px;
  top: 50%;
  translate: 0 -50%;
  height: 10.86px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.segmented-picker-option2 {
  width: 61.08px;
  height: 19px;
  position: absolute;
  left: 61.76px;
  top: 50%;
  translate: 0 -50%;
}
.segmented-picker-option3 {
  width: 61.08px;
  height: 19px;
  position: absolute;
  left: 122.16px;
  top: 50%;
  translate: 0 -50%;
}
.label2 {
  color: #ffffff;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 9.501384735107422px;
  line-height: 130%;
  font-weight: 700;
  position: absolute;
  right: 5.43px;
  left: 5.429868698120117px;
  top: 50%;
  translate: 0 -50%;
  height: 10.86px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.segmented-picker-option4 {
  background: #ffffff;
  border-radius: 11px;
  width: 70.71px;
  height: 22px;
  position: absolute;
  left: 177.75px;
  top: 50%;
  translate: 0 -50%;
  box-shadow: 0px 0px 6.29px 0px rgba(0, 0, 0, 0.4);
}
.label3 {
  color: var(--accent-secondary, #a5aee1);
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 11.000000953674316px;
  line-height: 130%;
  font-weight: 700;
  position: absolute;
  right: 6.29px;
  left: 6.28515625px;
  top: 50%;
  translate: 0 -50%;
  height: 12.57px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.div38 {
  color: var(--title-text-color-light, #4a4a8d);
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 9.501384735107422px;
  line-height: 130%;
  font-weight: 700;
  position: absolute;
  left: 5.43px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame-statistics-texts {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 30%;
  position: absolute;
  right: 40px;
  top: 45px;
}
.div39 {
  color: var(--white, #ffffff);
  text-align: left;
  font-family: var(--body-3-font-family, "Montserrat", sans-serif);
  font-size: var(--body-3-font-size, 16px);
  line-height: var(--body-3-line-height, 130%);
  font-weight: var(--body-3-font-weight, 400);
  position: relative;
  flex: 1;
}
.cards-arrows {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  justify-content: space-around;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;

  margin-top: 60px;
}
.frame-1321314616 {
  width: calc(100% - 40px);
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  position: relative;
}
.card-crm {
  background: var(--light-purple, #cfd5f6);
  border-radius: 25px;
  flex-shrink: 0;
  width: 31%;
  min-height: 330px;
  height: auto;
  position: relative;
  overflow: hidden;
}
.img-crm-functionality-bg {
  height: auto;
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translate(0px, 0px);
  overflow: visible;
}
.card-crm-texts {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 350px;
  height: auto; /* Высота будет определяться содержимым */
}
.div40 {
  color: var(--textdark, #2c2c62);
  text-align: center;
  font-family: var(--h4-font-family, "Montserrat", sans-serif);
  font-size: var(--h4-font-size, 28px);
  line-height: var(--h4-line-height, 130%);
  font-weight: var(--h4-font-weight, 700);
  position: relative;
}
.functional-description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  margin-bottom: 0px;
  gap: 24px; /* figma confirmed */
}
.teenyicons-tick-circle-outline15 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline16 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline17 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline18 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.img-card-crm-reception-bg {
  height: auto;
  position: absolute;
  right: 0;
  bottom: 0;
  overflow: visible;
}
.teenyicons-tick-circle-outline19 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline20 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline21 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline22 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.img-card-crm-client-bg {
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
}
.teenyicons-tick-circle-outline23 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline24 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline25 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline26 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-feedbacks {
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
  justify-content: flex-start;
  width: 1349px;
  left: 50%;
  translate: -50%;
}
.feedbacks-title-text {
  color: var(--dark-purple, #4a4a8d);
  text-align: center;
  font-family: var(--h1-font-family, "Montserrat", sans-serif);
  font-size: var(--h1-font-size, 54px);
  line-height: var(--h1-line-height, 130%);
  font-weight: var(--h1-font-weight, 700);
  position: relative;
  align-self: stretch;
}
.arrow2 {
  border-radius: 28.57px;
  border-style: solid;
  border-color: var(--primary-dark-blue-900, #002248);
  border-width: 0.71px;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  position: relative;
  overflow: hidden;
}
.arrow3 {
  width: 25px;
  height: 25px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  overflow: visible;
}
.frame-1321314629 {
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.review {
  background: var(--light-purple, #cfd5f6);
  border-radius: 25px;
  flex-shrink: 0;
  width: 584px;
  height: 395px;
  position: relative;
  box-shadow: 3px 3px 10px 0px rgba(164, 170, 192, 1),
  inset 0px 0px 4px 0px rgba(248, 246, 255, 0.5);
  backdrop-filter: blur(12.5px);
}
.frame-1321314627 {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 528px;
  position: absolute;
  left: 28px;
  top: 28px;
}
.frame-1321314626 {
  display: flex;
  flex-direction: row;
  gap: 30px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.review-avatar {
  border-radius: 40px;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  position: relative;
  overflow: hidden;
  object-fit: cover;
}
.frame-1321314628 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 279px;
  position: relative;
}
.div42 {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: var(--h5-font-family, "Montserrat", sans-serif);
  font-size: var(--h5-font-size, 24px);
  line-height: var(--h5-line-height, 130%);
  font-weight: var(--h5-font-weight, 700);
  position: relative;
  align-self: stretch;
}
.div43 {
  color: var(--dark-purple, #4a4a8d);
  text-align: left;
  font-family: var(--body-3-font-family, "Montserrat", sans-serif);
  font-size: var(--body-3-font-size, 16px);
  line-height: var(--body-3-line-height, 130%);
  font-weight: var(--body-3-font-weight, 400);
  position: relative;
  align-self: stretch;
}
.atp-crm {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: var(--body-3-font-family, "Montserrat", sans-serif);
  font-size: var(--body-3-font-size, 16px);
  line-height: var(--body-3-line-height, 130%);
  font-weight: var(--body-3-font-weight, 400);
  position: relative;
  align-self: stretch;
}
.vector {
  width: 58px;
  height: 42px;
  position: absolute;
  right: 40px;
  top: 47px;
  overflow: visible;
}
.vector2 {
  width: 58px;
  height: 42px;
  position: absolute;
  right: 40px;
  top: 47px;
  overflow: visible;
}
.arrow4 {
  width: 25px;
  height: 25px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  overflow: visible;
}
.frame-become-client {
  background: var(--textdark, #2c2c62);
  border-radius: 40px;
  width: calc(100% - 40px); /* ширина с учетом отступов слева и справа по 20px */
  max-width: 1280px;
  min-height: 805px; /* Минимальная высота вместо фиксированной */
  height: auto; /* Высота будет определяться содержимым */
  left: 50%;
  transform: translateX(-50%);
  overflow: visible; /* Изменено с hidden на visible */
  padding: 40px; /* Добавим отступы внутри блока */
  box-sizing: border-box; /* Чтобы padding не увеличивал фактический размер */
}
.picture-guys {
  width: calc(50% - 0px); /* ширина с учетом отступов слева и справа по 120px */
  max-width: 652px;
  height: 726px;
  position: absolute;
  right: 12px;
  bottom: 0;
  object-fit: contain;
}
.become-client-box {
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 650px;
  position: absolute;
  left: 60px;
  top: calc(50% - 340.5px);
}
.become-client-title {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.become-client-text {
  color: #ffffff;
  text-align: left;
  font-family: var(--h1-font-family, "Montserrat", sans-serif);
  font-size: var(--h1-font-size, 54px);
  line-height: var(--h1-line-height, 130%);
  font-weight: var(--h1-font-weight, 700);
  position: relative;
  align-self: stretch;
}
.crm-2 {
  color: var(--primary-dark-blue-100, #f6f6f6);
  text-align: left;
  font-family: var(--body-2-font-family, "Montserrat", sans-serif);
  font-size: var(--body-2-font-size, 20px);
  line-height: var(--body-2-line-height, 130%);
  font-weight: var(--body-2-font-weight, 400);
  position: relative;
  align-self: stretch;
}

.input-text-field {
  border-radius: 12px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.5);
  border-width: 1px;
  padding: 12px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 56px;
  position: relative;
  top: 34px;
  box-sizing: border-box;
}
.input-text-field-dark {
  border-radius: 12px;
  border-style: solid;
  border-color: rgba(44, 44, 98, 0.5);
  border-width: 1px;
  padding: 12px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 56px;
  position: relative;
  top: 34px;
  box-sizing: border-box;
}

.input-field-dark {
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  color: var(--textdark, #2c2c62);
  font-family: var(--body-2-font-family, "Montserrat", sans-serif);
  font-size: var(--body-2-font-size, 20px);
  line-height: var(--body-2-line-height, 130%);
  font-weight: var(--body-2-font-weight, 400);
  position: relative;
  z-index: 2;
}
.input-field-dark::placeholder {
  color: rgba(44, 44, 98, 0.5); /* Цвет placeholder */
  opacity: 1; /* Firefox требует этой настройки для правильного отображения цвета */
}

/* Для старых версий браузеров нужно добавить вендорные префиксы */
.input-field-dark::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: rgba(44, 44, 98, 0.5);
}

.input-field-dark:-moz-placeholder { /* Mozilla Firefox 4-18 */
  color: rgba(44, 44, 98, 0.5);
  opacity: 1;
}

.input-field-dark::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: rgba(44, 44, 98, 0.5);
  opacity: 1;
}

.input-field-dark:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: rgba(44, 44, 98, 0.5);
}

.input-field-dark::-ms-input-placeholder { /* Microsoft Edge */
  color: rgba(44, 44, 98, 0.5);
}

.placeholder-input-field {
  color: var(--primary-dark-blue-100, #f6f6f6);
  font-family: var(--body-2-font-family, "Montserrat", sans-serif);
  font-size: var(--body-2-font-size, 16px);
  opacity: 0.7;
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 1;
}

.input-field:focus + .placeholder,
.input-field:not(:placeholder-shown) + .placeholder {
  opacity: 0;
}

.title-input-text {
  color: var(--white, #ffffff);
  text-align: left;
  font-family: var(--body-2-font-family, "Montserrat", sans-serif);
  font-size: var(--body-2-font-size, 20px);
  line-height: var(--body-2-line-height, 130%);
  font-weight: var(--body-2-font-weight, 400);
  position: absolute;
  left: 0;
  top: 0;
}
.title-input-text-dark {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: var(--body-2-font-family, "Montserrat", sans-serif);
  font-size: var(--body-2-font-size, 20px);
  line-height: var(--body-2-line-height, 130%);
  font-weight: var(--body-2-font-weight, 400);
  position: absolute;
  left: 0;
  top: 0;
}

.frame-1321314592 {
  align-self: stretch;
  flex-shrink: 0;
  height: 90px;
  position: relative;
}
.frame-1321314593 {
  align-self: stretch;
  flex-shrink: 0;
  height: 90px;
  position: relative;
}
.checkbox-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 15px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}

/* Контейнер для чекбокса */
.checkbox-container {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

/* Скрываем стандартный чекбокс */
.checkbox-input, .checkbox-input-contacts {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Стили для кастомного чекбокса */
.checkbox-custom {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Стили для иконок */
.checkbox-unchecked,
.checkbox-checked {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: opacity 0.2s ease;
}

/* По умолчанию показываем только unchecked */
.checkbox-checked {
  opacity: 0;
}

/* Когда чекбокс активен, показываем только checked */
.checkbox-input:checked ~ .checkbox-custom .checkbox-unchecked {
  opacity: 0;
}
.checkbox-input:checked ~ .checkbox-custom .checkbox-checked {
  opacity: 1;
}
/* Эффект фокуса для доступности */
.checkbox-input:focus ~ .checkbox-custom {
  box-shadow: 0 0 0 2px rgba(114, 114, 236, 0.3);
  border-radius: 6px;
}

/* Когда чекбокс активен, показываем только checked */
.checkbox-input-contacts:checked ~ .checkbox-custom .checkbox-unchecked {
  opacity: 0;
}
.checkbox-input-contacts:checked ~ .checkbox-custom .checkbox-checked {
  opacity: 1;
}
/* Эффект фокуса для доступности */
.checkbox-input-contacts:focus ~ .checkbox-custom {
  box-shadow: 0 0 0 2px rgba(114, 114, 236, 0.3);
  border-radius: 6px;
}

.privacy-text {
  color: var(--primary-dark-blue-900, #002248);
  text-align: left;
  font-family: var(--text-font-family, "Montserrat", sans-serif);
  line-height: 130%;
  font-weight: 400;
  position: relative;
  margin-top: 5px;
}
.checkbox-text-dark {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: var(--text-font-family, "Montserrat", sans-serif);
  line-height: 130%;
  font-weight: 400;
  position: relative;
  margin-top: 5px;
}
.privacy-text-span {
}
.div-accept-personal-data {
  text-decoration: underline;
  color: var(--primary-dark-blue-100, #f6f6f6);
  cursor: pointer;
}
.div-accept-personal-data-dark {
  text-decoration: underline;
  color: var(--textdark, #2c2c62);
  cursor: pointer;
}
.frame-1321314634 {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-1321314633 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.country {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.component-1 {
  flex-shrink: 0;
  width: 20px;
  height: 15px;
  position: relative;
  overflow: hidden;
}
.group29 {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
  overflow: visible;
}
.div48 {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: var(--body-font-family, "Montserrat", sans-serif);
  font-size: var(--body-font-size, 22px);
  line-height: var(--body-line-height, 130%);
  font-weight: var(--body-font-weight, 400);
  position: relative;
  width: 360px;
}
.atp-contacts-address {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: var(--body-font-family, "Montserrat", sans-serif);
  font-size: var(--body-font-size, 22px);
  line-height: var(--body-line-height, 130%);
  font-weight: var(--body-font-weight, 400);
  position: relative;
  width: 360px;
}
.atp-contacts-phone {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  position: relative;
  align-self: stretch;
}
.phone-link {
  color: inherit; /* Наследует цвет текста от родителя */
  text-decoration: none; /* Убираем подчеркивание ссылки */
  cursor: pointer; /* Меняем курсор на указатель при наведении */
  transition: opacity 0.2s ease; /* Плавный переход для эффекта наведения */
}
.phone-link:hover {
  opacity: 0.8; /* Небольшое изменение прозрачности при наведении */
}
.phone-link:active {
  opacity: 0.6; /* Изменение прозрачности при нажатии */
}

.atp-contacts-email {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  position: relative;
  align-self: stretch;
}
.email-link {
  color: inherit; /* Наследует цвет текста от родителя */
  text-decoration: none; /* Убираем подчеркивание ссылки */
  cursor: pointer; /* Меняем курсор на указатель при наведении */
  transition: opacity 0.2s ease; /* Плавный переход для эффекта наведения */
}
.email-link:hover {
  opacity: 0.8; /* Небольшое изменение прозрачности при наведении */
}
.email-link:active {
  opacity: 0.6; /* Изменение прозрачности при нажатии */
}

/*.social-media-icons {*/
/*  display: flex;*/
/*  flex-direction: row;*/
/*  gap: 15px;*/
/*  align-items: center;*/
/*  justify-content: flex-start;*/
/*  flex-shrink: 0;*/
/*  position: relative;*/
/*}*/
/* Для правильного расположения контейнеров */
.social-media-icons {
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap; /* Для адаптивности на маленьких экранах */
  margin-top: 10px;
}
.social-link {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s ease;
  display: inline-block; /* Будет заменено на 'none' через JS если ссылка не задана */
}
.social-link:hover {
  opacity: 0.8;
}
.social-link:active {
  opacity: 0.6;
}

.icon-social-42 {
  border-radius: 25px;
  border-style: solid;
  border-color: var(--primary-dark-blue-900, #002248);
  border-width: 1px;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  position: relative;
  overflow: hidden;
}
.icon-social4 {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  overflow: visible;
}
.icon-social5 {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  overflow: visible;
}
.icon-social6 {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  overflow: hidden;
}
.vectors3 {
  width: 18px;
  height: 18px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  overflow: visible;
}
.icon-social7 {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  overflow: visible;
}
.vectors4 {
  width: 17.5px;
  height: 17.5px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  overflow: visible;
}
.div49 {
  color: var(--dark-purple, #4a4a8d);
  text-align: left;
  font-family: var(--h5-font-family, "Montserrat", sans-serif);
  font-size: var(--h5-font-size, 24px);
  line-height: var(--h5-line-height, 130%);
  font-weight: var(--h5-font-weight, 700);
  position: relative;
}
.div50 {
  color: rgba(44, 44, 98, 0.5);
  text-align: left;
  font-family: var(--body-2-font-family, "Montserrat", sans-serif);
  font-size: var(--body-2-font-size, 20px);
  line-height: var(--body-2-line-height, 130%);
  font-weight: var(--body-2-font-weight, 400);
  position: relative;
  flex: 1;
}

.checkbox2 {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  position: relative;
  overflow: visible;
}
.div54 {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 130%;
  font-weight: 400;
  position: relative;
}
.div-54-span {
}
.div-54-span2 {
  text-decoration: underline;
}
.button-sent-message, .button-become-client {
  background: var(--primary-dark-blue-900, #002248);
  border-radius: 40px;
  padding: 10px 45px 10px 45px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 536px;
  height: 56px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.button-sent-message:hover, .button-become-client:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(114, 114, 236, 0.3);
}
.frame-footer {
  background: var(--primary-dark-blue-900, #002248);
  width: 100%;
  height: auto; /* Высота будет определяться содержимым */

  display: flex;
  flex-direction: column;

  overflow: hidden; /* Изменено с hidden на visible */
  box-sizing: border-box; /* Чтобы padding не увеличивал фактический размер */
}
.icon-apple-store {
  width: 30px;
  height: 30px;
  position: absolute;
  left: 15px;
  top: 15px;
  overflow: visible;
}
.text-apple-store {
  width: 105px;
  height: 37.5px;
  position: absolute;
  left: 55px;
  top: 12px;
}
.get-it-on-text {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 700;
  position: absolute;
  left: 1px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.app-store-text {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 700;
  position: absolute;
  left: 1.5px;
  top: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.icon-google-play {
  width: 30px;
  height: 30px;
  position: absolute;
  left: 15px;
  top: 15px;
  overflow: visible;
}
.text-google-play {
  width: 105px;
  height: 37.5px;
  position: absolute;
  left: 55px;
  top: 12px;
}
.google-play-text {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.group-5336 {
  position: absolute;
  inset: 0;
}
.frame-social-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 131px;
}
.social-media-title {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: var(--body-font-family, "Montserrat", sans-serif);
  font-size: var(--body-font-size, 22px);
  line-height: var(--body-line-height, 130%);
  font-weight: var(--body-font-weight, 400);
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.div56 {
  color: var(--primary-dark-blue-100, #f6f6f6);
  text-align: left;
  font-family: var(--body-3-font-family, "Montserrat", sans-serif);
  font-size: var(--body-3-font-size, 16px);
  line-height: var(--body-3-line-height, 130%);
  font-weight: var(--body-3-font-weight, 400);
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.social {
  flex-shrink: 0;
  width: 95px;
  height: 40px;
  position: relative;
}
.icon-social-43 {
  border-radius: 25px;
  border-style: solid;
  border-color: var(--white, #ffffff);
  border-width: 1px;
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
.icon-social8 {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  overflow: visible;
}
.icon-social-44 {
  border-radius: 25px;
  border-style: solid;
  border-color: var(--white, #ffffff);
  border-width: 1px;
  width: 40px;
  height: 40px;
  position: absolute;
  left: 55px;
  top: 0;
  overflow: hidden;
}
.icon-social9 {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  overflow: visible;
}
.logo-text-logo {
  width: 71.33px;
  height: 80px;
  position: absolute;
  left: 123px;
  top: 213px;
}
.just {
  color: var(--white, #ffffff);
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 16.06425666809082px;
  line-height: 130%;
  font-weight: 700;
  position: absolute;
  right: 0%;
  left: 0%;
  width: 100%;
  bottom: 66.67%;
  top: 0%;
  height: 33.33%;
}
.do {
  color: var(--white, #ffffff);
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 30.843372344970703px;
  line-height: 130%;
  font-weight: 700;
  position: absolute;
  right: 0%;
  left: 1.35%;
  width: 98.65%;
  bottom: 33.33%;
  top: 33.33%;
  height: 33.33%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fit {
  color: var(--white, #ffffff);
  text-align: right;
  font-family: "Montserrat", sans-serif;
  font-size: 20.883533477783203px;
  line-height: 130%;
  font-weight: 700;
  position: absolute;
  right: 0%;
  left: 1.35%;
  width: 98.65%;
  bottom: 0%;
  top: 66.67%;
  height: 33.33%;
}
.frame-footer-items {
  align-self: stretch;
  flex-shrink: 0;

  width: calc(100% - 20px); /* ширина с учетом отступов слева и справа по 120px */
  max-width: 1280px;
  height: auto; /* Высота будет определяться содержимым */

  left: 50%;
  transform: translateX(-50%);
  overflow: visible; /* Изменено с hidden на visible */
  box-sizing: border-box; /* Чтобы padding не увеличивал фактический размер */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: 40px;
  margin-bottom: 40px;
  /*gap: 40px;*/
  position: relative;
}

.frame-footer-contact-us-title {
  color: var(--white, #ffffff);
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 32px;
  line-height: 100%;
  font-weight: 700;
  position: relative;
  align-self: stretch;
  cursor: default;
}
.frame-footer-contact-us-subtitle {
  color: var(--white, #ffffff);
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  line-height: 100%;
  font-weight: 400;
  position: relative;
  align-self: stretch;
  cursor: default;

  margin-top: 8px;
}

.frame-footer-contact-us-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;

  margin-top: 36px;
}
.frame-footer-contact-us-column {
  flex: 1;                 /* equal width */
  height: auto;
  display: flex;           /* ensures inner content expands properly */
  flex-direction: column;  /* allow vertical stacking */
  border-radius: 24px;
  padding: 16px;
}
.frame-footer-contact-us-item-text {
  color: var(--white, #ffffff);
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  line-height: 100%;
  font-weight: 400;
  position: relative;
  flex: 1;
}
.frame-footer-contact-us-item-text:hover {
  text-decoration: underline; /* underline on hover */
  text-underline-offset: 5px; /* distance between text and underline */
}

.menu-header {
  padding: 4px 0px 4px 0px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.menu-header:hover .div63 {
  color: var(--primary-dark-blue-900);
  text-decoration: underline; /* underline on hover */
  text-underline-offset: 5px; /* distance between text and underline */
}

.div57 {
  color: var(--primary-dark-blue-100, #f6f6f6);
  text-align: left;
  font-family: var(--menu-font-family, "Montserrat", sans-serif);
  font-size: var(--menu-font-size, 16px);
  line-height: var(--menu-font-height, 130%);
  font-weight: var(--menu-font-weight, 700);
  position: relative;
}
.frame-copyrights {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;

  width: calc(100%); /* ширина с учетом отступов слева и справа по 20px */
  max-width: 1280px;

  position: absolute;
  bottom: 40px;
}
.div-copyrights {
  color: var(--white, #ffffff);
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  line-height: 130%;
  font-weight: 400;
  cursor: default;

  margin-top: 8px;
}
.div-policy {
  width: 100%;
  color: var(--primary-dark-blue-100, #f6f6f6);
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 130%;
  font-weight: 400;
  text-decoration: underline;
  /*position: relative;*/
  cursor: pointer;

  margin-top: 40px;
}
.frame-13213146632 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex: 1;
  position: relative;
}
.teenyicons-tick-circle-outline27 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline28 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline29 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline30 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline31 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.button-header-form {
  background: var(--primary-dark-blue-900, #002248);
  border-radius: 16px;
  padding: 11px 25px 11px 25px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.button-header-form:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(114, 114, 236, 0.3);
}

.button-header-text {
  color: var(--white, #ffffff);
  text-align: center;
  font-family: var(--menu-font-family, "Montserrat", sans-serif);
  font-size: var(--menu-font-family, 14px);
  line-height: var(--menu-font-family, 100%);
  font-weight: var(--menu-font-family, 400);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-header-icon {
  height: 24px;
  width: 24px;
}
.teenyicons-tick-circle-outline32 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline33 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline34 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline35 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline36 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline37 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.div62 {
  color: var(--primary-dark-blue-900, #002248);
  text-align: left;
  font-family: var(--body-3-font-family, "Montserrat", sans-serif);
  font-size: var(--body-3-font-size, 16px);
  line-height: var(--body-3-line-height, 130%);
  font-weight: var(--body-3-font-weight, 400);
  position: relative;
  flex: 1;
}
.teenyicons-tick-circle-outline38 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline39 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline40 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline41 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline42 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline43 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline44 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline45 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline46 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
.teenyicons-tick-circle-outline47 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
  aspect-ratio: 1;
}
/* Base header css */
.header {
  z-index: 999;
  background: var(--white, #ffffff);
  border-radius: 30px;
  padding: 16px 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 40px);
  max-width: 1280px;
  position: fixed;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease;
  box-sizing: border-box;
}
.text-logo {
  display: flex;
  flex-direction: row;
  gap: 60px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.header-img-logo {
  flex-shrink: 0;
  width: 150px;
  height: 60px;
  position: relative;
  cursor: pointer;
}
.just2 {
  color: var(--logo-color-light, #002248);
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  line-height: 130%;
  font-weight: 700;
  position: absolute;
  right: 0%;
  left: 0%;
  width: 100%;
  bottom: 66.67%;
  top: 0%;
  height: 33.33%;
}
.do2 {
  color: var(--logo-color-light, #002248);
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  line-height: 130%;
  font-weight: 700;
  position: absolute;
  right: 0%;
  left: 1.35%;
  width: 98.65%;
  bottom: 33.33%;
  top: 33.33%;
  height: 33.33%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fit2 {
  color: var(--logo-color-light, #002248);
  text-align: right;
  font-family: "Montserrat", sans-serif;
  font-size: 15.662650108337402px;
  line-height: 130%;
  font-weight: 700;
  position: absolute;
  right: 0%;
  left: 1.35%;
  width: 98.65%;
  bottom: 0%;
  top: 66.67%;
  height: 33.33%;
}
.menu-header2 {
  display: flex;
  flex-direction: row;
  gap: 30px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.div63 {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: var(--menu-font-family, "Montserrat", sans-serif);
  font-size: var(--menu-font-size, 16px);
  line-height: var(--menu-font-height, 130%);
  font-weight: var(--menu-font-weight, 700);
  position: relative;
  cursor: pointer;
}
.buttons5 {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-13213146592 {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.button-header2 {
  border-radius: 16px;
  border-style: solid;
  border-color: var(--primary-dark-blue-900, #002248);
  border-width: 1px;
  padding: 11px 25px 11px 25px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.button-header2:hover {
  background: rgba(114, 114, 236, 0.1);
}

/* Mobile menu button (hidden by default) */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  cursor: pointer;
  z-index: 1001;
}

.burger-line {
  width: 100%;
  height: 3px;
  background-color: var(--primary-dark-blue-900, #002248);
  border-radius: 3px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Mobile menu overlay (hidden by default) */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 997;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* When buttons are moved to mobile menu */
.menu-header2 .button-header-form {
  margin-top: 20px;
  width: calc(100% - 40px);
}

/* Active menu item */
.div63.active {
  color: var(--primary-dark-blue-900, #002248);
  text-decoration: underline; /* underline on hover */
  text-underline-offset: 5px; /* distance between text and underline */
}

/* Active language button */
.language-btn.active {
  background-color: var(--primary-dark-blue-900, #002248);
}

.language-btn.active .div64 {
  color: #ffffff;
}

/* Mobile menu active state */
.header.mobile-menu-open .mobile-menu-toggle .burger-line:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.header.mobile-menu-open .mobile-menu-toggle .burger-line:nth-child(2) {
  opacity: 0;
}

.header.mobile-menu-open .mobile-menu-toggle .burger-line:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

.header.mobile-menu-open .menu-header2 {
  right: 0; /* Slide in */
}

.header.mobile-menu-open .mobile-menu-overlay {
  display: block;
  opacity: 0.5;
  border-radius: 30px;
}

.frame-1321314649 {
  display: flex;
  flex-direction: row;
  gap: 2px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.div64 {
  color: var(--primary-dark-blue-900, #002248);
  text-align: left;
  font-family: var(--button-font-family, "Montserrat", sans-serif);
  font-size: var(--button-font-size, 14px);
  line-height: var(--button-font-height, 130%);
  font-weight: var(--button-font-weight, 700);
  position: relative;
}

.div65 {
  color: var(--primary-dark-blue-900, #002248);
  text-align: center;
  font-family: var(--small-button-font-family, "Montserrat", sans-serif);
  font-size: var(--small-button-font-size, 14px);
  line-height: var(--small-button-line-height, 130%);
  font-weight: var(--small-button-font-weight, 700);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Стили для формы обратной связи и обработки ошибок */

/* Стили для полей ввода с ошибкой */
.input-error {
  border-color: #ff3e3e !important;
  box-shadow: 0 0 0 1px rgba(255, 62, 62, 0.5) !important;
}

.input-text-field-dark .input-error {
  background-color: rgba(255, 62, 62, 0.03) !important;
}

/* Сообщение об ошибке */
.error-message {
  color: #ff3e3e;
  font-size: 14px;
  margin-top: 5px;
  font-family: var(--body-3-font-family, "Montserrat", sans-serif);
  font-weight: 400;
  display: none;
}

/* Стили для текста о согласии с ошибкой */
.privacy-text-error {
  color: #ff3e3e !important;
}

.privacy-text-error a {
  color: #ff3e3e !important;
  border-color: #ff3e3e !important;
}

/* Сообщение об успешной отправке */
.success-message {
  background-color: rgba(39, 174, 96, 0.1);
  color: #27ae60;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  margin-top: 20px;
  font-family: var(--body-2-font-family, "Montserrat", sans-serif);
  font-size: var(--body-2-font-size, 20px);
  line-height: var(--body-2-line-height, 130%);
  font-weight: var(--body-2-font-weight, 400);
  animation: fadeIn 0.3s ease;
}

/* Серверная ошибка */
.server-error-message {
  background-color: rgba(255, 62, 62, 0.1);
  color: #ff3e3e;
  padding: 15px;
  border-radius: 12px;
  text-align: center;
  margin-bottom: 20px;
  font-family: var(--body-3-font-family, "Montserrat", sans-serif);
  font-size: 16px;
  line-height: 130%;
  font-weight: 400;
  animation: fadeIn 0.3s ease;
}

/* Стили для состояния загрузки кнопки */
.button-sent-message.loading {
  opacity: 0.7;
  pointer-events: none;
  position: relative;
}

.button-sent-message.loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  animation: spin 1s linear infinite;
}

/* Анимация появления */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Анимация загрузки */
@keyframes spin {
  to { transform: translateY(-50%) rotate(360deg); }
}