* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 140% !important;
  letter-spacing: 0.02em;
  font-weight: 500;
  font-family: "CeraPro-Regular";
}

@font-face {
  font-family: "CeraPro-Regular";
  src: url("fonts/CeraPro-Regular.eot");
  src: url("fonts/CeraPro-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/CeraPro-Regular.woff") format("woff"), url("fonts/CeraPro-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "CeraPro-Bold";
  src: url("fonts/CeraPro-Bold.eot");
  src: url("fonts/CeraPro-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/CeraPro-Bold.woff") format("woff"), url("fonts/CeraPro-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "TTHoves-Medium";
  src: url("fonts/TTHoves-Medium.eot");
  src: url("fonts/TTHoves-Medium.eot?#iefix") format("embedded-opentype"), url("fonts/TTHoves-Medium.woff") format("woff"), url("fonts/TTHoves-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "TTHoves-Regular";
  src: url("fonts/TTHoves-Regular.eot");
  src: url("fonts/TTHoves-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/TTHoves-Regular.woff") format("woff"), url("fonts/TTHoves-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "TTHoves-DemiBold";
  src: url("fonts/TTHoves-DemiBold.eot");
  src: url("fonts/TTHoves-DemiBold.eot?#iefix") format("embedded-opentype"), url("fonts/TTHoves-DemiBold.woff") format("woff"), url("fonts/TTHoves-DemiBold.ttf") format("truetype");
}

@font-face {
  font-family: "TTNorms-Regular";
  src: url("fonts/TTNorms-Regular.eot");
  src: url("fonts/TTNorms-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/TTNorms-Regular.woff") format("woff"), url("fonts/TTNorms-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "TTNorms-Bold";
  src: url("fonts/TTNorms-Bold.eot");
  src: url("fonts/TTNorms-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/TTNorms-Bold.woff") format("woff"), url("fonts/TTNorms-Bold.ttf") format("truetype");
}

body {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-family: "CeraPro-Regular";
  color: #fff;
  background-color: #0f0728;
  overflow-x: hidden;
  position: relative; /* для правильного позиционирования псевдоэлемента */
}

a {
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

html {
  scroll-behavior: smooth;
}

.logo {
  width: 158px;
  margin-bottom: -8px;
}

.menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 50px;
  font-size: 16px;
}

.menu a:hover {
  color: #7da7ff;
}

button {
  all: unset;
  cursor: pointer; /* Это добавляет обратно указатель на кнопку */
}

#why {
  margin-top: 100px;
}

.btnform {
  background-color: #ff1100 !important;
  float: right;
}

.btnform:hover {
  background-color: #101010 !important;
}

.btn {
  display: inline-block;
  padding: 15px 30px;
  font-size: 16px;
  color: #000000;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border-radius: 5px;
  background: linear-gradient(90deg, #c1d5ff 0%, #7da7ff 100%);
}

.btn:hover {
  background: linear-gradient(90deg, #dee8ff 0%, #b7ceff 100%);
}

.btn:active {
  -webkit-transform: scale(0.98);
  -ms-transform: scale(0.98);
  transform: scale(0.98); /* Легкое уменьшение при нажатии */
}

.headerblock {
  width: 100%;
  top: 40px;
  z-index: 3;
  position: fixed;
}

.heroblock {
  position: relative;
}

.ok {
  position: fixed;
  bottom: 8px !important;
  left: 8px !important;
  background-color: #207d2e;
  color: #fff;
  padding: 13px 10px 10px 10px;
  border-radius: 10px;
  z-index: 2;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  opacity: 0;
}

/* Пример изменения состояния */
.ok.active {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0); /* Элемент перемещается на исходную позицию */
  opacity: 1; /* Прозрачность изменяется на 100% */
}

.header {
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 10px;
}

.header_blur {
  background: -o-linear-gradient(1deg, rgba(71, 15, 202, 0.2) 0.39%, rgba(64, 64, 64, 0.2) 100.92%);
  background: linear-gradient(89deg, rgba(71, 15, 202, 0.2) 0.39%, rgba(64, 64, 64, 0.2) 100.92%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.hero_info {
  padding-top: 240px;
}

h1.title {
  font-family: "TTNorms-Regular";
  font-size: 53px;
  line-height: 100% !important;
  max-width: 700px;
  background: linear-gradient(82deg, #fff 2.13%, #404ecd 88.94%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero_info_items {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 50px;
  margin-top: 70px;
}

.hero_info_item_title {
  background: linear-gradient(82deg, #fff 2.13%, #404ecd 88.94%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "CeraPro-Bold";
  font-size: 15px;
  margin-top: 20px;
}

.hero_info_item_text {
  margin-top: 15px;
}

.burger_menu {
  display: none;
}

.footer {
  padding: 100px 0px 30px 0px;
  position: relative;
}

.contact_items {
  margin-top: 30px;
}

.contact_item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 100px;
}

.contact_items_title {
  color: #bcbcbc;
}
.contact_items_info {
  text-transform: uppercase;
  margin-top: 3px;
}

.contact_block {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}
.form_body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 9px;
}

.form_input {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4px;
  height: 150px; /* Задаем высоту блока form_input */
}

.form_input input {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1; /* Делаем каждый input равным по высоте, используя flex-grow */
  padding: 8px; /* Добавляем внутренние отступы для красоты */
}

textarea {
  all: unset;
  width: 100%;
  height: 100%;
  background-color: #01030e;
  color: #fff;
  padding: 10px 15px !important;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; /* Учитывает padding внутри установленной высоты и ширины */
}

input {
  all: unset;
  background-color: #01030e;
  color: #fff;
  padding: 10px 15px !important;
}

.form_send {
  height: 150px; /* Делаем высоту form_send равной form_input */
}

/* Стили для автозаполненных полей */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #101010 inset; /* Применяем нужный фон */
  -webkit-text-fill-color: #fff; /* Применяем нужный цвет текста */
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s; /* Избегаем плавных переходов */
}

.footer_bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  position: relative;
}

.privacy {
  color: #bcbcbc;
}

.footer_img {
  position: absolute;
  bottom: 0%;
  left: 50%;
  z-index: 0;
  width: 500px;
}

.page_block {
  padding-top: 200px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0px;
  margin-bottom: 40px;
}

.footer_page {
  position: relative;
  padding-bottom: 30px;
}

p {
  margin-bottom: 15px;
}

.bold {
  font-family: "CeraPro-Bold";
  font-size: 18px;
  margin-bottom: 5px;
}

.numbers_img {
  display: block;
}

.numbers_mob_img {
  display: none;
}

.burger {
  display: none;
}

.blur {
  z-index: -1;
  position: absolute;
  top: 200px;
  left: -300px;
  width: 700px;
  height: 300px;
  transform: rotate(-47.263deg);
  flex-shrink: 0;
  border-radius: 859.748px;
  background: linear-gradient(270deg, #4c40cd 0%, #26018f 100%);
  filter: blur(137px);
}

.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  margin-top: 200px;
}

.inf_items {
  display: grid;
  margin-top: 15px;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  margin-top: 30px;
}

.inf_item {
  display: flex;
  gap: 10px;
  align-items: center;
}

.inf_item img {
  width: 50px;
}

.arrow {
  position: absolute;
  left: -60px;
  top: -22px;
  z-index: -1;
}

.about_info_title {
  position: relative;
  font-family: "TTNorms-Regular";
  font-size: 37px;
  line-height: 100% !important;
  max-width: 700px;
  background: linear-gradient(82deg, #fff 2.13%, #404ecd 88.94%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about_info_text {
  margin-top: 30px;
}

.about_info {
  max-width: 500px;
}

.inf_title {
  margin-top: 30px;
  font-size: 19px;
}

.inf_item_digit {
  color: #526acd;
}

.inf_item_text {
  margin-top: 7px;
}

.c1 {
  position: absolute;
  top: -130px;
  left: 31%;
  max-width: 1000px;
}

.serv_block {
  position: relative;
  margin-bottom: 100px;
}

.serv {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  margin-top: 100px;
  background: linear-gradient(262deg, #390a8f 10.27%, #210457 95.4%);
  border-radius: 2ch;
  padding: 50px;
}

.serv_digit {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

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

.digitblock_item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.digitblock_item_digit {
  font-family: "TTNorms-Bold";
  font-size: 40px;
}

h2.title {
  font-family: "TTNorms-Bold";
  font-size: 30px;
  background: linear-gradient(82deg, #fff 2.13%, #404ecd 88.94%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.serv_info {
  max-width: 500px;
}

.serv_info_title {
  font-family: "TTNorms-Regular";
  font-size: 30px;
  line-height: 100% !important;
}

.serv_info_text {
  margin-top: 30px;
}

.serv_info_ul {
  margin-top: 30px;
  margin-left: 30px;
}

.serv_block .blur {
  top: 0px;
  left: 26%;
}

.c2 {
  position: absolute;
  top: 10px;
  left: -200px;
  max-width: 700px;
  z-index: -2;
}

.c3 {
  position: absolute;
  top: -88px;
  left: -200px;
  max-width: 700px;
  z-index: 3;
}

.rec_left,
.rec_right {
  position: absolute;
  top: 50%; /* Центрирование по вертикали */
  transform: translateY(-50%); /* Смещение для точного центрирования */
  z-index: 1; /* Чтобы изображения находились выше других элементов */
}

.rec_left {
  left: -40px; /* Прилепляем к левой стороне */
}

.rec_right {
  right: -40px; /* Прилепляем к правой стороне */
}

.why {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  margin-top: 30px;
}

.why_items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.why_items_rew {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.why_text {
  max-width: 400px;
}

.rewblock {
  border-radius: 10px;
  background-color: #0a041d;
  padding: 20px;
}

.ava {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
}

.rewblock .why_item_text {
  margin-top: 5px;
}

.rewblock_name {
  margin-top: 15px;
  color: #8352dd;
}

.ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rlogo {
  height: 60px;
  display: flex;
  align-items: center;
}

.rlogo img {
  width: 120px;
  height: auto;
}

.why_item_title {
  font-size: 22px;
  font-family: "TTNorms-Regular";
  line-height: 100% !important;
  max-width: 700px;
  background: linear-gradient(82deg, #fff 2.13%, #404ecd 88.94%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.digitblock_item_info {
  max-width: 300px;
}

.why_item_text {
  margin-top: 20px;
}

.footer_bottom .blur {
  top: 0px;
  left: 200px;
}

.c4 {
  position: absolute;
  top: -110px;
  left: 400px;
  max-width: 700px;
  z-index: 3;
}

@media screen and (max-width: 1080px) {
  .menu {
    display: none;
  }

  .header .btn {
    background: none;
    padding: 0;
    -webkit-clip-path: none;
    clip-path: none;
    color: #fff;
  }

  h1.title {
    font-size: 26px;
    max-width: 340px;
  }

  h2.title {
    font-size: 32px;
  }

  .contact_block {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 30px;
  }

  .form_body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    margin-bottom: 9px;
  }

  .footer_img {
    display: none;
  }

  .footer {
    padding: 50px 0px;
  }

  .contact_item {
    margin-bottom: 30px;
  }

  .page_block {
    padding-top: 160px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
  }

  h2.pagetitle {
    text-transform: uppercase;
    font-size: 28px;
    font-family: "TTHoves-Medium";
  }
  .burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 30px;
    height: 30px;
  }

  .burger_active {
    gap: 15px;
  }

  .burger span {
    width: 100%;
    height: 2px;
    background-color: #fff;
  }

  .burger_menu {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 30px;
    z-index: 5;
    width: auto;
    top: 120px;
    right: 20px;
    left: 20px;
    padding: 40px;
    height: 100vh;
    background-color: #01030e;

    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform: translateY(150%);
    -ms-transform: translateY(150%);
    transform: translateY(150%);
    visibility: hidden;
    opacity: 0;
  }

  .burger_menu.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .burger_menu a {
    font-size: 28px;
  }

  .burger_menu .contact_item {
    margin-top: 30px;
  }

  .footer_bottom {
    margin-top: 40px;
  }

  .hero_info_items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 70px;
  }

  .hero_info_item_text {
    max-width: 300px;
    margin-top: 7px;
  }

  .about {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 100px;
  }

  .about_info_title {
    font-size: 28px;
  }

  .serv {
    grid-template-columns: 1fr;
    gap: 50px;
    margin-top: 100px;
    padding: 30px;
  }

  .serv_info_title {
    font-size: 28px;
  }

  .rec_left,
  .rec_right {
    display: none;
  }

  .why {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    margin-top: 30px;
  }

  .hero_info {
    padding-top: 240px;
  }

  .container {
  }

  .smooth-wrapper {
    position: relative !important;
    overflow: hidden !important;
  }

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

  .inf_items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 15px;
  }

  .why_item_text {
    max-width: 300px;
  }

  .inf_item_text {
    max-width: 300px;
  }

  .c2 {
    position: absolute;
    top: -66px;
    left: 231px;
    max-width: 234px;
    z-index: -2;
  }

  .arrow {
    position: absolute;
    left: -60px;
    top: -39px;
    z-index: -1;
  }

  .c3 {
    position: absolute;
    top: -63px;
    left: -49px;
    max-width: 400px;
    z-index: 3;
  }

  .c4 {
    position: absolute;
    top: -37px;
    left: 109px;
    max-width: 200px;
    z-index: -3;
  }

  .contact_items {
    margin-top: 0px;
  }

  .c1 {
    position: absolute;
    top: -25px;
    left: 32px;
    max-width: 600px;
  }

  .digitblock {
    margin-top: 60px;
  }
}