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

  /* NEW REALISATION */
  background: var(--extra-light-purple, #ebe9fe);
  /* Удаляем фиксированную высоту */
  min-height: 100vh; /* Минимальная высота равна высоте окна просмотра */
  height: auto;
  position: relative;
  /* Меняем overflow: hidden на auto для предотвращения обрезки контента */
  overflow: hidden;
}
/* Контейнер для секций */
.full-width-container {
  width: 100%;
  margin: 0 auto; /* Центрирование */
  display: flex;
  flex-direction: column;
  gap: 64px; /* Расстояние между секциями */
}
/* Контейнер для секций */
.section-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto; /* Центрирование */
  padding: 0 20px; /* Отступы по бокам */
  display: flex;
  flex-direction: column;
  gap: 128px; /* Расстояние между секциями */
}
/* Общий класс для секций */
.section {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative; /* Для внутреннего позиционирования */
}
.hero-section {
  width: 100%;
  min-height: 960px; /* Минимальная высота вместо фиксированной */
  height: auto; /* Высота будет определяться содержимым */
  overflow: visible; /* Изменено с hidden на visible */
  box-sizing: border-box; /* Чтобы padding не увеличивал фактический размер */
}
.hero-section-box {
  width: calc(100% - 20px); /* ширина с учетом отступов слева и справа по 120px */
  max-width: 1280px;
  min-height: 960px; /* Минимальная высота вместо фиксированной */
  height: auto; /* Высота будет определяться содержимым */
  left: 50%;
  transform: translateX(-50%);
  overflow: visible; /* Изменено с hidden на visible */
  box-sizing: border-box; /* Чтобы padding не увеличивал фактический размер */
}
.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: 919px;
  position: absolute;
  left: 20px;
  top: 170px;
}
.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, "Circe-Bold", 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%;
}
.crm-just-do-fit {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: var(--body-font-family, "Comfortaa-Regular", 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;
}
.crm-just-do-fit-mobile {
  display: none;
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: var(--body-font-family, "Comfortaa-Regular", 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;
}
.buttons {
  display: flex;
  flex-direction: row;
  gap: 23px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.button-page-form {
  background: var(--purple-accent, #7272ec);
  border-radius: 40px;
  padding: 10px 45px 10px 45px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
.button-page-form: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, "Circe-Bold", 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;
  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, "Circe-Bold", 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;
}
.component-35 {
  border-radius: 40px;
  border-style: solid;
  border-color: var(--purple-accent, #7272ec);
  border-width: 1px;
  padding: 10px 45px 10px 45px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 56px;
  position: relative;
  z-index: 100;
  cursor: pointer;
}
.component-35:hover {
  background: rgba(114, 114, 236, 0.1);
}

.button-consultation {
  color: var(--purple-accent, #7272ec);
  text-align: center;
  font-family: var(--button-font-family, "Circe-Bold", 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;
  display: flex;
  align-items: center;
  justify-content: center;
}
.download-app-cta {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  justify-content: flex-start;
  width: auto;
  position: absolute;
  left: 40px;
  top: 595px;

  z-index: 100;
}
.just-do-fit {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: var(--body-3-font-family, "Comfortaa-Regular", 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;
}
.download-buttons {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.download-app-hero-ios, .download-app-hero-android {
  background: var(--textdark, #2c2c62);
  border-radius: 15px;
  flex-shrink: 0;
  width: 195px;
  height: 60px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.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: "Circe-Bold", 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: "Circe-Bold", 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: "Circe-Bold", 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: "Circe-Bold", 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;
}
.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(--purple-accent, #7272ec);
  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(--purple-accent, #7272ec);
  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(--purple-accent, #7272ec);
  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(--purple-accent, #7272ec);
  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(--purple-accent, #7272ec);
  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;
}
.ellipse-2 {
  background: var(
          --elements,
          linear-gradient(
                  179.28deg,
                  rgba(255, 255, 255, 0.25) 0%,
                  rgba(255, 255, 255, 0.08) 100%
          )
  );
  border-radius: 50%;
  width: 678px;
  height: 678px;
  position: absolute;
  left: 892.38px;
  top: -267.93px;
  transform-origin: 0 0;
  transform: rotate(-10.165deg) scale(1, 1);
}
.ellipse-1 {
  background: var(
          --elements,
          linear-gradient(
                  179.28deg,
                  rgba(255, 255, 255, 0.25) 0%,
                  rgba(255, 255, 255, 0.08) 100%
          )
  );
  border-radius: 50%;
  width: 603px;
  height: 603px;
  position: absolute;
  left: 566px;
  top: -377.04px;
  transform-origin: 0 0;
  transform: rotate(-10.165deg) scale(1, 1);
}
.achive {
  width: 214.78px;
  height: 187.87px;
  position: absolute;
  left: 1011px;
  top: 55px;
}
.div5 {
  color: #ffffff;
  text-align: center;
  font-family: "Circe-Bold", 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: "Circe-Bold", 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;
}
.main-description-texts {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: auto;
  left: 40px;
  top: 40px;
}
.just-do-fit2 {
  color: #ffffff;
  text-align: left;
  font-family: var(--h2-font-family, "Circe-Bold", 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;
}
.text-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.jdf-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;
}
.jdf-description-text {
  color: #ffffff;
  text-align: left;
  font-family: var(--body-font-family, "Comfortaa-Regular", 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*/
}
.div6 {
  color: #ffffff;
  text-align: left;
  font-family: var(--body-font-family, "Comfortaa-Regular", 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;
}
.jdf-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, "Comfortaa-Regular", 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: 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 не увеличивал фактический размер */
}
.div8 {
  color: var(--title-text-color-light, #4a4a8d);
  text-align: center;
  font-family: var(--h2-font-family, "Circe-Bold", 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-whom-cards {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.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;
}
.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, "Circe-Bold", 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, "Comfortaa-Regular", 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(--purple-accent, #7272ec);
  text-align: left;
  font-family: "Circe-Bold", sans-serif;
  font-size: 34px;
  line-height: 130%;
  font-weight: 700;
  position: relative;
  align-self: stretch;
}
.advantages {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.advantage-icon {
  background: var(--purple-accent, #7272ec);
  border-radius: 50px;
  flex-shrink: 0;
  width: 82px;
  height: 82px;
  position: relative;
  overflow: hidden;
}
.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, "Comfortaa-Regular", 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(--purple-accent, #7272ec);
  text-align: left;
  font-family: var(--h3-font-family, "Circe-Bold", 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;
}
.advantage-text {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: var(--body-3-font-family, "Comfortaa-Regular", 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;
}
.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(--purple-accent, #7272ec);
  text-align: left;
  font-family: var(--h3-font-family, "Circe-Bold", 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;
}
.advantage-box {
  background: var(--light-purple, #cfd5f6);
  border-radius: 100px;
  border-width: 2px;
  border-style: solid;
  border-image: linear-gradient(
          -65.83deg,
          rgba(59, 198, 243, 0.03) 0%,
          rgba(34, 115, 141, 0) 100%
  );
  border-image-slice: 1;
  padding: 20px 20px 20px 0px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  height: 82px;
  position: relative;
  /*box-shadow: 3px 3px 10px 0px rgba(164, 170, 192, 1),*/
  inset 0px 0px 2px 0px rgba(248, 246, 255, 1);
  backdrop-filter: blur(12.5px);
}
.frame-benefits {
  background: var(--textdark, #2c2c62);
  border-radius: 40px;
  width: calc(100% - 40px); /* ширина с учетом отступов слева и справа по 20px */
  max-width: 1280px;
  min-height: 500px; /* Минимальная высота вместо фиксированной */
  height: auto; /* Высота будет определяться содержимым */
  left: 50%;
  transform: translateX(-50%);
  overflow: visible; /* Изменено с hidden на visible */
  padding: 40px; /* Добавим отступы внутри блока */
  box-sizing: border-box; /* Чтобы padding не увеличивал фактический размер */
}
.ellipse-22 {
  background: linear-gradient(
          89.93deg,
          rgba(59, 198, 243, 0.1) 0%,
          rgba(255, 255, 255, 0.2) 100%
  );
  border-radius: 50%;
  width: 339px;
  height: 339px;
  position: absolute;
  left: 723px;
  top: 237px;
  transform-origin: 0 0;
  transform: rotate(103.382deg) scale(1, 1);
}
.ellipse-12 {
  background: var(
          --card-inactive,
          linear-gradient(
                  179.28deg,
                  rgba(255, 255, 255, 0.25) 0%,
                  rgba(255, 255, 255, 0.08) 100%
          )
  );
  border-radius: 50%;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 838px;
  top: 110px;
  transform-origin: 0 0;
  transform: rotate(103.382deg) scale(1, 1);
}
.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;
}
.features-benefits {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  justify-content: flex-start;
  width: calc(65%);
  height: auto;
  left: 40px;
  top: 40px;
}
.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%;
}
.div17 {
  color: var(--white, #ffffff);
  text-align: left;
  font-family: var(--h1-font-family, "Circe-Bold", 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;
}
.jdf-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%;
  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: 32px;
  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, "Circe-Bold", 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, "Comfortaa-Regular", 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(--purple-accent, #7272ec);
  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, "Circe-Bold", 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(--extra-light-purple, #ebe9fe);
  text-align: left;
  font-family: var(--h4-font-family, "Circe-Bold", 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;
}
.jdf-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(--extra-light-purple, #ebe9fe);
  text-align: left;
  font-family: var(--body-3-font-family, "Comfortaa-Regular", 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, #7272ec);
  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, "Circe-Bold", 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, #7272ec);
  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;
}
.ellipse {
  width: 6.43px;
  height: 6.43px;
  position: absolute;
  left: 0;
  top: 0;
}
.ellipse-active {
  background: var(--logo-color-light, #7272ec);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
}
.ellipse2 {
  width: 6.43px;
  height: 6.43px;
  position: absolute;
  left: 14.47px;
  top: 0;
}
.ellipse-inactive {
  background: #ffffff;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
}
.ellipse3 {
  width: 6.43px;
  height: 6.43px;
  position: absolute;
  left: 28.95px;
  top: 0;
}
.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, #7272ec);
  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: "Circe-Bold", 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: "Circe-Bold", 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: "Comfortaa-Regular", 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: "Circe-Bold", 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: "Comfortaa-Regular", 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: "Circe-Bold", 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: "Comfortaa-Regular", 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: "Comfortaa-Regular", 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: "Comfortaa-Regular", 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: "Circe-Bold", 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;
}
.jdf-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, #7272ec);
  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, "Comfortaa-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;
}
.div33 {
  color: var(--white, #ffffff);
  text-align: left;
  font-family: var(--h4-font-family, "Circe-Bold", 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: 400px;
}
.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: "Comfortaa-Regular", 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: "Circe-Bold", 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;
}
.ellipse4 {
  width: 5.53px;
  height: 5.53px;
  position: absolute;
  left: 0;
  top: 0;
}
.ellipse-inactive2 {
  background: var(--textwhite, #ffffff);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
}
.ellipse5 {
  width: 5.53px;
  height: 5.53px;
  position: absolute;
  left: 12.44px;
  top: 0;
}
.ellipse6 {
  width: 5.53px;
  height: 5.53px;
  position: absolute;
  left: 24.87px;
  top: 0;
}
.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: "Circe-Bold", 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;
}
.chart {
  background: var(
          --card-inactive-light,
          linear-gradient(180deg, rgba(165, 174, 225, 1) 100%)
  );
  border-radius: 7.58px;
  border-width: 7.58px;
  border-style: solid;
  border-image: var(
          --card-inactive-light,
          linear-gradient(180deg, rgba(165, 174, 225, 1) 100%)
  );
  border-image-slice: 1;
  width: 325px;
  height: 231.2px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: calc(50% - 183px);
  box-shadow: 0px 0px 15px 2px rgba(225, 222, 255, 0.5);
  overflow: hidden;
}
.chart2 {
  width: 326.9px;
  height: 227.41px;
  position: absolute;
  left: 4.74px;
  top: 0;
}
.chart3 {
  width: 305.58px;
  height: 162.5px;
  position: absolute;
  left: 10.9px;
  top: 53.54px;
  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: "Circe-Bold", 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: "Circe-Bold", 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: "Circe-Bold", 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: "Circe-Bold", 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: "Circe-Bold", 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: "Circe-Bold", 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, "Comfortaa-Regular", 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;
}
.crm-title {
  color: var(--white, #ffffff);
  text-align: center;
  font-family: var(--h1-font-family, "Circe-Bold", 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;
}
.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, "Circe-Bold", 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;
  gap: 15px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.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, "Circe-Bold", 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;
}
.prices-title-text {
  color: var(--dark-purple, #4a4a8d);
  text-align: center;
  font-family: var(--h1-font-family, "Circe-Bold", 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(--purple-accent, #7272ec);
  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, "Circe-Bold", 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, "Comfortaa-Regular", 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;
}
.just-do-fit-crm {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: var(--body-3-font-family, "Comfortaa-Regular", 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 не увеличивал фактический размер */
}
.ellipse-23 {
  background: linear-gradient(
          89.93deg,
          rgba(59, 198, 243, 0.1) 0%,
          rgba(255, 255, 255, 0.2) 100%
  );
  border-radius: 50%;
  width: 678px;
  height: 678px;
  position: absolute;
  left: 902.38px;
  top: -267.93px;
  transform-origin: 0 0;
  transform: rotate(-10.165deg) scale(1, 1);
}
.ellipse-13 {
  background: var(
          --card-inactive,
          linear-gradient(
                  179.28deg,
                  rgba(255, 255, 255, 0.25) 0%,
                  rgba(255, 255, 255, 0.08) 100%
          )
  );
  border-radius: 50%;
  width: 603px;
  height: 603px;
  position: absolute;
  left: 576px;
  top: -377.04px;
  transform-origin: 0 0;
  transform: rotate(-10.165deg) scale(1, 1);
}
.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, "Circe-Bold", 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(--extra-light-purple, #ebe9fe);
  text-align: left;
  font-family: var(--body-2-font-family, "Comfortaa-Regular", 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;
}
.form-become-client {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 536px;
  position: relative;
}
.inputs {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-input-text {
  align-self: stretch;
  flex-shrink: 0;
  height: 90px;
  position: relative;
  width: 100%;
  max-width: 536px;
}

.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 {
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  color: var(--extra-light-purple, #ebe9fe);
  font-family: var(--body-2-font-family, "Comfortaa-Regular", 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::placeholder {
  color: rgba(255, 255, 255, 0.5); /* Цвет placeholder */
  opacity: 1; /* Firefox требует этой настройки для правильного отображения цвета */
}

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

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

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

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

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

.input-field-dark {
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  color: var(--textdark, #2c2c62);
  font-family: var(--body-2-font-family, "Comfortaa-Regular", 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(--extra-light-purple, #ebe9fe);
  font-family: var(--body-2-font-family, "Comfortaa-Regular", 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, "Comfortaa-Regular", 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, "Comfortaa-Regular", 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;
}
.privacy {
  display: flex;
  flex-direction: row;
  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(--extra-light-purple, #ebe9fe);
  text-align: left;
  font-family: var(--text-font-family, "Circe-Regular", sans-serif);
  line-height: 130%;
  font-weight: 400;
  position: relative;
  margin-top: 5px;
}
.privacy-text-dark {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: var(--text-font-family, "Circe-Regular", 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(--extra-light-purple, #ebe9fe);
  cursor: pointer;
}
.div-accept-personal-data-dark {
  text-decoration: underline;
  color: var(--textdark, #2c2c62);
  cursor: pointer;
}
.frame-contacts {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  width: calc(100% - 40px); /* Явно указываем, что контейнер должен занимать всю ширину */
  left: 50%;
  translate: -50%;
}
.contacts2 {
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 501px;
  position: relative;
}
.contacts-title-text {
  color: var(--dark-purple, #4a4a8d);
  text-align: left;
  font-family: var(--h1-font-family, "Circe-Bold", 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;
}
.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;
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 392px;
  position: relative;
}
.frame-1321314633, .frame-contacts-social-buttons {
  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, "Comfortaa-Regular", 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;
}
.jdf-contacts-address {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: var(--body-font-family, "Comfortaa-Regular", 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;
}
.jdf-contacts-phone {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: "Circe-Bold", 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; /* Изменение прозрачности при нажатии */
}

.jdf-contacts-email {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: "Circe-Bold", 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(--purple-accent, #7272ec);
  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;
}
.frame-contact-form {
  background: var(--light-purple, #cfd5f6);
  border-radius: 30px;
  border-width: 2px;
  border-style: solid;
  border-image: var(
          --stroke,
          linear-gradient(
                  -65.83deg,
                  rgba(59, 198, 243, 0.06) 0%,
                  rgba(34, 115, 141, 0) 100%
          )
  );
  border-image-slice: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.div49 {
  color: var(--dark-purple, #4a4a8d);
  text-align: left;
  font-family: var(--h5-font-family, "Circe-Bold", 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;
}
.form-contacts {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.div50 {
  color: rgba(44, 44, 98, 0.5);
  text-align: left;
  font-family: var(--body-2-font-family, "Comfortaa-Regular", 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;
}
.frame-input-area {
  flex-shrink: 0;
  width: 100%;
  max-width: 536px;
  height: 213px;
  position: relative;
}
.input-text-area-dark {
  border-radius: 12px;
  border-style: solid;
  border-color: rgba(44, 44, 98, 0.5);
  border-width: 1px;
  padding: 16px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: 178px;
  position: absolute;
  left: 0;
  top: 34px;
  overflow: hidden;
  box-sizing: border-box;
}
.input-area-dark {
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: var(--body-2-font-family, "Comfortaa-Regular", 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;
}
.input-area-dark::placeholder {
  color: rgba(44, 44, 98, 0.5); /* Цвет placeholder */
  opacity: 1; /* Firefox требует этой настройки для правильного отображения цвета */
}
/* Для старых версий браузеров нужно добавить вендорные префиксы */
.input-area-dark::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: rgba(44, 44, 98, 0.5);
}
.input-area-dark:-moz-placeholder { /* Mozilla Firefox 4-18 */
  color: rgba(44, 44, 98, 0.5);
  opacity: 1;
}
.input-area-dark::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: rgba(44, 44, 98, 0.5);
  opacity: 1;
}
.input-area-dark:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: rgba(44, 44, 98, 0.5);
}
.input-area-dark::-ms-input-placeholder { /* Microsoft Edge */
  color: rgba(44, 44, 98, 0.5);
}

.checkbox2 {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  position: relative;
  overflow: visible;
}
.div54 {
  color: var(--textdark, #2c2c62);
  text-align: left;
  font-family: "Comfortaa-Regular", 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(--purple-accent, #7272ec);
  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);
}
.bottom-empty-box {
  height: 120px;
}
.frame-footer {
  background: var(--textdark, #2c2c62);
  width: 100%;
  min-height: 394px;
  height: auto;
  /*top: 288px;*/
  overflow: visible;
}
.frame-bottom-download-box {
  background: var(--purple-accent, #7272ec);
  border-radius: 25px;
  width: calc(100% - 240px); /* ширина с учетом отступов слева и справа по 120px */
  max-width: 1200px;
  min-height: 324px; /* Минимальная высота вместо фиксированной */
  height: auto; /* Высота будет определяться содержимым */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -160px;
  overflow: hidden;
}
.text11 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 164px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 40px;
}
.div55 {
  color: var(--white, #ffffff);
  text-align: center;
  font-family: var(--h5-font-family, "Circe-Bold", 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;
}
.just-do-fit4 {
  color: var(--white, #ffffff);
  text-align: center;
  font-family: var(--h3-font-family, "Circe-Bold", 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;
}
.crm-just-do-fit2 {
  color: var(--white, #ffffff);
  text-align: center;
  font-family: var(--body-2-font-family, "Comfortaa-Regular", 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;
  width: calc(100% - 40px);
}
.download-buttons-big {
  display: flex;
  flex-direction: row;
  gap: 18px;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  left: 50%;
  translate: -50%;
  bottom: 30px;
}
.download-app-big-ios, .download-app-big-android {
  background: var(--textdark, #2c2c62);
  border-radius: 15px;
  flex-shrink: 0;
  width: 195px;
  height: 60px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.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: "Circe-Bold", 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: "Circe-Bold", 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: "Circe-Bold", 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, "Comfortaa-Regular", 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(--extra-light-purple, #ebe9fe);
  text-align: left;
  font-family: var(--body-3-font-family, "Comfortaa-Regular", 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: "Circe-Bold", 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: "Circe-Bold", 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: "Circe-Bold", 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 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 239px;
  /*height: 400px;*/
  height: auto;
}
.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(--purple-accent);
}

.div57 {
  color: var(--extra-light-purple, #ebe9fe);
  text-align: left;
  font-family: var(--menu-font-family, "Circe-Bold", 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(--extra-light-purple, #ebe9fe);
  text-align: center;
  font-family: "Circe-Regular", sans-serif;
  font-size: 16px;
  line-height: 130%;
  font-weight: 400;
  /*position: relative;*/
  margin-top: 32px;
}
.div-policy {
  color: var(--extra-light-purple, #ebe9fe);
  text-align: center;
  font-family: "Circe-Regular", sans-serif;
  font-size: 16px;
  line-height: 130%;
  font-weight: 400;
  text-decoration: underline;
  /*position: relative;*/
  cursor: pointer;
}
.frame-prices {
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
  justify-content: flex-start;
  left: 50%;
  translate: -50%;
}
.frame-prices-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 40px); /* Явно указываем, что контейнер должен занимать всю ширину */
}
.prices-cards {
  width: calc(100% - 40px); /* Явно указываем, что контейнер должен занимать всю ширину */
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  position: relative;
}
.prices-card {
  background: var(--light-purple, #cfd5f6);
  border-radius: 25px;
  flex-shrink: 0;
  width: 31%;
  min-height: 572px;
  height: auto;
  position: relative;
}
.img-prices-card-saas {
  height: auto;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(0px, 0px);
  overflow: visible;
}
.prices-card-box {
  padding: 28px 20px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 572px;
  height: auto;
}
.frame-13213146632 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex: 1;
  position: relative;
}
.prices-plan-title {
  color: var(--textdark, #2c2c62);
  text-align: center;
  font-family: var(--h5-font-family, "Circe-Bold", 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;
}
.prices-plan-price {
  color: var(--textdark, #2c2c62);
  text-align: center;
  font-family: var(--h2-font-family, "Circe-Bold", 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;
}
.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, .show-prices-details {
  background: var(--purple-accent, #7272ec);
  border-radius: 20px;
  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);
}
.show-prices-details: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(--small-button-font-family, "Circe-Bold", 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;
}
.img-prices-card-add-ons {
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
}
.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(--purple-accent, #7272ec);
  text-align: left;
  font-family: var(--body-3-font-family, "Comfortaa-Regular", 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;
}
.img-prices-card-white-label {
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
}
.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(--light-purple, #cfd5f6);
  border-radius: 25px;
  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;
}
.logo-text-logo2 {
  flex-shrink: 0;
  width: 53.49px;
  height: 60px;
  position: relative;
  cursor: pointer;
}
.just2 {
  color: var(--logo-color-light, #7272ec);
  text-align: left;
  font-family: "Circe-Bold", 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, #7272ec);
  text-align: center;
  font-family: "Circe-Bold", 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, #7272ec);
  text-align: right;
  font-family: "Circe-Bold", 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, "Circe-Bold", 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: 20px;
  border-style: solid;
  border-color: var(--purple-accent, #7272ec);
  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(--purple-accent, #7272ec);
  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-go-to-crm,
.menu-header2 .button-header-form {
  margin-top: 20px;
  width: calc(100% - 40px);
}

/* Active menu item */
.div63.active {
  color: var(--purple-accent, #7272ec);
}

/* Active language button */
.language-btn.active {
  background-color: var(--purple-accent, #7272ec);
}

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

/* Responsive Styles */
@media screen and (max-width: 1165px) {
  /* Adjust header size */
  .header {
    padding: 12px 20px;
    top: 16px;
    border-radius: 16px;
  }

  /* Hide desktop menu items and buttons */
  .menu-header2 {
    position: fixed;
    top: 0;
    right: -300px; /* Off-screen */
    width: 270px;
    height: 100vh;
    background: var(--light-purple, #cfd5f6);
    padding: 80px 20px 20px;
    flex-direction: column;
    align-items: flex-start;
    z-index: 998;
    transition: right 0.3s ease;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
  }

  .menu-header {
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid rgba(44, 44, 98, 0.1);
  }

  .div63 {
    font-size: 18px; /* Larger font for mobile */
  }

  /* Show burger menu */
  .mobile-menu-toggle {
    display: flex;
  }

  /* Hide non-essential buttons on mobile */
  .button-header-go-to-crm, .button-header-form {
    display: none;
  }

  /* Button to appear in mobile menu */
  .menu-header2 .button-header-go-to-crm,
  .menu-header2 .button-header-form {
    display: flex;
    margin-top: 20px;
    width: 100%;
    justify-content: center;
  }
}

/* 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: 1;
}

.frame-1321314649 {
  display: flex;
  flex-direction: row;
  gap: 2px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.div64 {
  color: var(--purple-accent, #7272ec);
  text-align: left;
  font-family: var(--button-font-family, "Circe-Bold", 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;
}
.button-header-go-to-crm {
  border-radius: 20px;
  border-style: solid;
  border-color: var(--purple-accent, #7272ec);
  border-width: 1px;
  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-go-to-crm:hover {
  background: rgba(114, 114, 236, 0.1);
}

.div65 {
  color: var(--purple-accent, #7272ec);
  text-align: center;
  font-family: var(--small-button-font-family, "Circe-Bold", 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, "Comfortaa-Regular", 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, "Comfortaa-Regular", 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, "Comfortaa-Regular", 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); }
}