:root {
  --color-primary: #0a0f16;
  --color-text-3-disable: #a3b1be;
  --color-text-contrast: #ffffff;
  --color-bg-sec: #f1f9f7;
  --color-bg-sec-2: #253247;
  --color-accent: #31c4b4;
  --color-teal-3: #47f7e4;
  --color-text-link: #31c4b4;
  --color-link-hover: #c1ede9;
  --color-link-contrast: #ffffff;
  --color-icon: #e7ecf2;
  --color-icon-contrast: #ffffff;
  --color-map: #c3cade;
  --color-map2: #f3e0d8;
  --color-teal-1: #0781a3;
  --color-gray-1: #2e3031;
  --color-gray-2: #474a4b;
  --color-gray-3: #5e6062;
  --color-gray-4: #b0b7c9;
  --color-gray-6: #dde4ed;
  --color-gray-7: #eaedf5;
  --color-gray-8: #ebeef6;
  --color-gray-9: #eff1f5;
  --error: #da5d32;
  --success: var(--color-accent);
  --divider: #adadad;
  --color-border: #ccd2da;
  --gradient-1: linear-gradient(
    180deg,
    var(--color-gray-8) 0%,
    rgb(251 248 247 / 0%) 100%
  );
  --gradient-2: linear-gradient(
    130deg,
    var(--color-bg-sec) 4.42%,
    var(--color-gray-6) 100%
  );
  --gradient-3: linear-gradient(
    135deg,
    var(--color-teal-3) 0%,
    var(--color-teal-1) 100%
  );
  --gradient-link:
    radial-gradient(
      136.42% 111.49% at 77.58% 50%,
      var(--color-teal-3) 0%,
      var(--color-teal-1) 100%
    ),
    radial-gradient(
      169.17% 93.3% at 35.43% 30.21%,
      var(--color-teal-3) 0%,
      var(--color-teal-1) 100%
    );
  --gradient-4: radial-gradient(
    ellipse at 16.6209px 13.3669px,
    var(--color-gray-2) 0%,
    var(--color-gray-1) 100%
  );
  --max-width: 100%;
  --b-radius: 8px;
  --space-2xs: 10px;
  --space-xs: 10px;
  --space-sm: 20px;
  --space-md: 20px;
  --space-lg: 30px;
  --space-xl: 30px;
  --space-2xl: 40px;
  --space-3xl: 40px;
  --space-4xl: 60px;
  --space-5xl: 60px;
  --space-6xl: 60px;
  --page-margin: 16px;
  @media (min-width: 768px) {
    --page-margin: 30px;
  }
  @media (min-width: 1280px) {
    --space-2xs: 10px;
    --space-xs: 16px;
    --space-sm: 20px;
    --space-md: 20px;
    --space-lg: 40px;
    --space-xl: 40px;
    --space-2xl: 50px;
    --space-3xl: 80px;
    --space-4xl: 80px;
    --space-5xl: 120px;
    --space-6xl: 120px;
    --page-margin: 40px;
  }
  @media (min-width: 1760px) {
    --max-width: 1680px;
    --page-margin: calc((50vw - var(--max-width) / 2) * 1);
  }
  @media (min-width: 1900px) {
    --space-2xs: 10px;
    --space-xs: 16px;
    --space-sm: 20px;
    --space-md: 30px;
    --space-lg: 40px;
    --space-xl: 50px;
    --space-2xl: 60px;
    --space-3xl: 80px;
    --space-4xl: 100px;
    --space-5xl: 130px;
    --space-6xl: 130px;
  }
  @media (min-width: 2100px) {
    --page-margin: 210px;
  }
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

html {
  font-family: "Roboto Flex", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  scroll-behavior: smooth;
}

body:has(.hero_main) {
  background: var(--color-bg-sec);
}

pre {
  max-width: 100%;
  overflow: auto;
  background: white;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid red;
  color: black !important;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
hr,
blockquote {
  margin: 0;
  padding: 0;
}

p:empty {
  display: none !important;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

b,
strong {
  font-weight: 500;
}

h1,
.h1 {
  font-family: "Exo 2", sans-serif;
  font-size: 46px;
  line-height: 1;
  font-weight: 600;
  width: 100%;
}

h2,
.h2 {
  font-family: "Exo 2", sans-serif;
  font-size: 42px;
  line-height: 1.095238;
  font-weight: 600;
  width: 100%;
  letter-spacing: -1.26px;
}

h3,
.h3 {
  font-family: "Exo 2", sans-serif;
  font-size: 32px;
  line-height: 1.25;
  font-weight: 600;
}

h4,
.h4 {
  font-family: "Exo 2", sans-serif;
  font-size: 22px;
  line-height: 1.09091;
  font-weight: 600;
}

.p-s {
  font-size: 14px;
  line-height: 1.42857;
}

.p-l {
  font-size: 18px;
  line-height: 1.4286;
  font-weight: 500;
}

.p-xl {
  font-size: 30px;
  line-height: 1.1667;
  font-weight: 500;
}

.relative {
  position: relative;
}

@media screen and (max-width: 1280px) {
  h1,
  .h1 {
    font-size: 36px;
    line-height: 1.1111;
  }
  h2,
  .h2 {
    font-size: 30px;
    line-height: 1.13333;
    letter-spacing: -0.9px;
  }
}

@media screen and (max-width: 1900px) {
  h3,
  .h3 {
    font-size: 24px;
    line-height: 1.1667;
  }
  h4,
  .h4 {
    font-size: 18px;
    line-height: 1.2222;
  }

  .p-l,
  .p-xl {
    font-size: 16px;
    line-height: 1.5;
  }
}

#panel {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1000;
}

#panel:not(:has(#bx-panel)) {
  display: none;
}

.caption {
  font-size: 12px;
  line-height: 1.3333;
  font-weight: 400;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  border-radius: var(--b-radius);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: transparent;
}

.button_primary {
  overflow: hidden;
  padding: 13px 14px;
  white-space: nowrap;
  @media (min-width: 768px) {
    padding: 13px 20px;
  }
}

.button_primary span {
  position: relative;
  display: inline-block;
  transition: 0.4s;
}

.button_primary span::before {
  position: absolute;
  top: 200%;
  content: attr(data-hover);
  transform: translate3d(0, 0, 0);
}

.button_primary:hover span {
  transform: translateY(-200%);
}

.button.js-search-button:hover {
  color: var(--color-accent);
}

.button_icon {
  color: inherit;
  padding: 12px;
}

.bg-link-gradient {
  background: var(--gradient-link);
  color: var(--color-primary);
  background-size: 200% 200%;
  background-position: 0% 0%;
  transition: all 0.3s ease;
}

.bg-link-gradient:hover {
  background-position: 100% 100%;
  color: var(--color-primary);
}

.bg-icon {
  background: var(--color-icon) !important;
}

.bg-white {
  background: white !important;
}

.bg-section-gradient {
  background: linear-gradient(360deg, #f1f9f7 0%, #fff 100%);
}

.color-accent {
  color: var(--color-accent) !important;
}

.swiper {
  width: 100%;
}

section {
  padding-top: var(--space-6xl);
  padding-bottom: var(--space-6xl);
  display: flex;
  flex-direction: column;
}

.container {
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
}

a {
  text-decoration: none;
  color: inherit;
  line-height: inherit;
  transition: color 0.2s ease;
}

hr {
  all: unset;
  display: block;
  border-bottom: 1px solid var(--color-gray-7);
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-start {
  align-items: flex-start;
}

.gap-2 {
  gap: 8px;
}

.gap-5 {
  gap: 20px;
}

.gap-10 {
  gap: 40px;
}

header,
footer,
main {
  max-width: 2100px;
  width: 100%;
}

.grid {
  display: grid !important;
}

.grid_basic {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--space-lg) 20px !important;
  @media (max-width: 1280px) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-lg) 10px !important;
  }
}

.grid_basic .grid-text,
.grid_basic .grid-title {
  grid-column: 1 / -1;
  @media (min-width: 1280px) {
    grid-column: 2 / 4;
  }
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  background-color: #00000080;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 1000;
}

.modal_side {
  max-width: 550px;
  left: auto;
  right: 0;
  transform: translateX(100%);
  align-items: flex-start;
}

.modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal_side.active {
  transform: translateX(0);
}

.modal__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 30px;
  position: absolute;
  width: min(507px, 90%);
  background: var(--color-icon);
  border-radius: var(--b-radius);
  position: relative;
  text-align: center;
  padding: 20px;
  @media (max-width: 768px) {
    padding: 16px;
  }
}

.modal_side .modal__container {
  width: 100%;
  max-width: 450px;
  background: transparent;
  padding: 20px;
  border-radius: 0;
  height: 100%;
  overflow-y: auto;
}

.modal_side .form__button {
  width: fit-content;
  margin-left: 0;
}

.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28.3866 13.3712L13.7582 27.9996L12.3867 26.6281L27.0151 11.9998L28.3866 13.3712Z' fill='%231D5E9A'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.7317 22.7163L27.015 27.9997L28.3864 26.6283L13.7581 12L12.3867 13.3714L19.0151 19.9998H21.7317V22.7163Z' fill='%231D5E9A'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.modal__close:hover {
  opacity: 0.8;
}

.modal__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.modal__head .form-title {
  text-align: left;
  padding-bottom: 0;
  margin-bottom: 0;
}

.modal__close-link {
  flex-shrink: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  color: var(--color-gray-3);
  text-decoration: underline;
  -webkit-text-decoration-color: var(--color-accent);
  text-decoration-color: var(--color-accent);
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  transition: all 0.3s ease;
}

.modal__close-link::before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.293 0.292969C12.6835 -0.0975556 13.3165 -0.0975556 13.707 0.292969C14.0976 0.683493 14.0976 1.31651 13.707 1.70703L8.41406 7L13.707 12.293C14.0976 12.6835 14.0976 13.3165 13.707 13.707C13.3165 14.0976 12.6835 14.0976 12.293 13.707L7 8.41406L1.70703 13.707C1.31651 14.0976 0.683493 14.0976 0.292969 13.707C-0.0975556 13.3165 -0.0975556 12.6835 0.292969 12.293L5.58594 7L0.292969 1.70703C-0.0975556 1.31651 -0.0975556 0.683493 0.292969 0.292969C0.683493 -0.0975556 1.31651 -0.0975556 1.70703 0.292969L7 5.58594L12.293 0.292969Z' fill='%230A0F16'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-position: center;
  background-color: white;
  border-radius: var(--b-radius);
  transition: all 0.3s ease;
}

.modal__close-link:hover {
  color: var(--color-accent);
}

.modal__close-link:hover::before {
  background-color: var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.293 0.292969C12.6835 -0.0975556 13.3165 -0.0975556 13.707 0.292969C14.0976 0.683493 14.0976 1.31651 13.707 1.70703L8.41406 7L13.707 12.293C14.0976 12.6835 14.0976 13.3165 13.707 13.707C13.3165 14.0976 12.6835 14.0976 12.293 13.707L7 8.41406L1.70703 13.707C1.31651 14.0976 0.683493 14.0976 0.292969 13.707C-0.0975556 13.3165 -0.0975556 12.6835 0.292969 12.293L5.58594 7L0.292969 1.70703C-0.0975556 1.31651 -0.0975556 0.683493 0.292969 0.292969C0.683493 -0.0975556 1.31651 -0.0975556 1.70703 0.292969L7 5.58594L12.293 0.292969Z' fill='white'/%3E%3C/svg%3E%0A");
}

.cookies {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1500;
  pointer-events: auto !important;
}

.cookies__wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 32px 32px;
  background: white;
  position: relative;
}

.cookies__text {
  font-size: 14px;
  line-height: 1.14;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cookies__text a {
  text-decoration: underline;
  text-underline-offset: 3px;
  -webkit-text-decoration-color: var(--color-accent);
  text-decoration-color: var(--color-accent);
  transition: all 0.3s ease;
}

.cookies__text a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.cookies.hidden {
  pointer-events: none !important;
}

.cookies__close-btn {
  position: absolute;
  right: 8px;
  top: 8px;
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.293 0.292969C12.6835 -0.0975556 13.3165 -0.0975556 13.707 0.292969C14.0976 0.683493 14.0976 1.31651 13.707 1.70703L8.41406 7L13.707 12.293C14.0976 12.6835 14.0976 13.3165 13.707 13.707C13.3165 14.0976 12.6835 14.0976 12.293 13.707L7 8.41406L1.70703 13.707C1.31651 14.0976 0.683493 14.0976 0.292969 13.707C-0.0975556 13.3165 -0.0975556 12.6835 0.292969 12.293L5.58594 7L0.292969 1.70703C-0.0975556 1.31651 -0.0975556 0.683493 0.292969 0.292969C0.683493 -0.0975556 1.31651 -0.0975556 1.70703 0.292969L7 5.58594L12.293 0.292969Z' fill='%230A0F16'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 10px 10px;
  background-position: center;
  background-color: white;
  border-radius: var(--b-radius);
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.cookies__close-btn:hover {
  background-color: var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.293 0.292969C12.6835 -0.0975556 13.3165 -0.0975556 13.707 0.292969C14.0976 0.683493 14.0976 1.31651 13.707 1.70703L8.41406 7L13.707 12.293C14.0976 12.6835 14.0976 13.3165 13.707 13.707C13.3165 14.0976 12.6835 14.0976 12.293 13.707L7 8.41406L1.70703 13.707C1.31651 14.0976 0.683493 14.0976 0.292969 13.707C-0.0975556 13.3165 -0.0975556 12.6835 0.292969 12.293L5.58594 7L0.292969 1.70703C-0.0975556 1.31651 -0.0975556 0.683493 0.292969 0.292969C0.683493 -0.0975556 1.31651 -0.0975556 1.70703 0.292969L7 5.58594L12.293 0.292969Z' fill='white'/%3E%3C/svg%3E%0A");
}

/* body:has(:not(.cookies.hidden)) {
  pointer-events: none;
} */

@media screen and (width < 768px) {
  .cookies__wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}

.hidden {
  display: none !important;
}

.link-arrow {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--color-primary);
  color: white;
  padding: 12px 25px;
  text-decoration: none;
  border-radius: var(--b-radius);
  border: none;
  width: -webkit-fit-content;
  width: fit-content;
  align-self: center;
}

.link-arrow::after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.3536 12.3536C21.5488 12.1583 21.5488 11.8417 21.3536 11.6464L18.1716 8.46447C17.9763 8.2692 17.6597 8.2692 17.4645 8.46447C17.2692 8.65973 17.2692 8.97631 17.4645 9.17157L20.2929 12L17.4645 14.8284C17.2692 15.0237 17.2692 15.3403 17.4645 15.5355C17.6597 15.7308 17.9763 15.7308 18.1716 15.5355L21.3536 12.3536ZM3 12L3 12.5L21 12.5L21 12L21 11.5L3 11.5L3 12Z' fill='white'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: all 0.3s ease;
}

.link-arrow:hover::after {
  transform: translateX(5px);
}

.show-more-link {
  display: flex;
  align-items: center;
  color: var(---color-primary);
  line-height: 1.375;
  -webkit-text-decoration: underline rgba(49, 196, 180, 0.6) dashed;
  text-decoration: underline rgba(49, 196, 180, 0.6) dashed;
  text-underline-offset: 4px;
  transition: all 0.3s ease;
  grid-column: 1 / -1;
  margin: 0 auto;
}

.show-more-link.js-show-more {
  display: none;
}

.show-more-link:hover {
  color: var(--color-accent);
}

.show-more-link::after {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.7383 15.8164C26.1196 15.4172 26.7519 15.4022 27.1514 15.7832C27.5507 16.1646 27.5658 16.7978 27.1846 17.1973L20.7227 23.9648L20 24.7227L19.2764 23.9648L12.8145 17.1973C12.4334 16.7979 12.4486 16.1645 12.8477 15.7832C13.2471 15.4021 13.8804 15.417 14.2617 15.8164L19.999 21.8262L25.7383 15.8164Z' fill='%230A0F16'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.form-title {
  text-align: center;
  padding-bottom: 30px;
}

.section {
  padding: 0 0 var(--space-6xl);
  gap: var(--space-lg);
}

.section.form {
  padding-bottom: var(--space-5xl);
}

.section_top {
  background: linear-gradient(180deg, #fff 0%, #f1f9f7 24.8%);
  padding-top: 154px;
  @media (min-width: 1280px) {
    padding-top: 184px;
  }
  @media (min-width: 1900px) {
    padding-top: 204px;
  }
}

.section_top-bg {
  background: linear-gradient(180deg, #f1f9f7 0%, #dde4ed 100%);
}

.main:has(.page-head) .section_top,
.main:has(.hero-section) .section_top {
  padding-top: 60px;
  @media (min-width: 1280px) {
    padding-top: 100px;
  }
}

.section_top + .section_top {
  padding-top: 0 !important;
}

.section_inner-top {
  padding-top: 60px;
  @media (min-width: 1280px) {
    padding-top: 120px;
  }
  @media (min-width: 1900px) {
    padding-top: 130px;
  }
}

.section__wrapper {
  width: 100%;
  max-width: var(--max-width);
  padding: 0 var(--page-margin);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  @media (min-width: 1760px) {
    padding: 0;
    margin: 0 auto;
  }
}

.section__header {
  max-width: 830px;
  display: flex;
  gap: 32px;
}

.section__description {
  max-width: 830px;
  color: var(--color-gray-3);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.33333;
  grid-column: span 1;
}

.h1.section__detail-text {
  text-align: center;
  margin: 0 auto;
  max-width: 1022px;
  letter-spacing: -1.38px;
  @media (max-width: 768px) {
    font-size: 24px;
    line-height: 1.08333;
    letter-spacing: -0.24px;
  }
}

.section:has(.section__detail-text-img) {
  position: relative;
  background: white;
}

.section:has(.section__detail-text-img) .section__wrapper {
  position: relative;
  z-index: 2;
}

.section__detail-text-img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 94.3229vw;
  max-width: 100%;
  height: auto;
  pointer-events: none;
  @media (max-width: 768px) {
    display: none;
  }
  @media (min-width: 1280px) {
    bottom: -50px;
  }
}

.page-head {
  height: 900px;
  padding: 242px 0 105px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  background: var(--color-primary);
  overflow: hidden;
  color: white;
}

.page-head.hero-section {
  height: auto;
  max-height: unset;
  @media (min-width: 1280px) {
    height: min(100vh, 1280px);
  }
}

.page-head__bg {
  width: 100%;
  height: 109.6667%;
  position: absolute;
  top: 3.5556%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}

.page-head__bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(circle, var(--color-primary) 5.5px, transparent 5.5px),
    radial-gradient(circle, var(--color-primary) 5.5px, transparent 5.5px);
  background-size: 17px 22px;
  background-position:
    0px 0px,
    8.5px 11px;
}

.page-head__bg-ellipse {
  position: absolute;
  border-radius: 50%;
}

.page-head__bg-ellipse:nth-child(1) {
  width: 457.57px;
  height: 223.18px;
  background: radial-gradient(
    61.82% 37.34% at 53.39% 36.5%,
    #71e0ff 0%,
    #0c4b92 100%
  );
  filter: blur(106.95px);
  z-index: -5;
  left: 52.3574%;
  top: 22.751%;
  transform: rotate(-30.13deg);
}

.page-head__bg-ellipse:nth-child(2) {
  width: 518.1px;
  height: 261.73px;
  background: rgba(49, 196, 180, 0.36);
  filter: blur(85.6px);
  z-index: -4;
  left: 68.42%;
  top: 56.05%;
  transform: rotate(-28.8deg);
}

.page-head__bg-ellipse:nth-child(3) {
  width: 794.02px;
  height: 226.54px;
  background: radial-gradient(
    65.94% 103.14% at 53.39% 36.5%,
    #33ffe9 0%,
    #0e1c2c 100%
  );
  filter: blur(129.8px);
  z-index: -3;
  left: 5.21%;
  top: 35.574%;
  transform: rotate(-42.96deg);
}

.page-head__bg-ellipse:nth-child(4) {
  width: 916.94px;
  height: 377.51px;
  background: radial-gradient(
    124.29% 166.39% at 64.34% 33.31%,
    #31c4b4 0%,
    #2737ac 71.35%,
    #0e1c2c 100%
  );
  filter: blur(129.8px);
  z-index: -2;
  left: 19.85%;
  top: 43.23%;
  transform: rotate(-50.77deg);
}

.page-head__bg-ellipse:nth-child(5) {
  width: 560.35px;
  height: 215.43px;
  background: linear-gradient(267.98deg, #2cffe8 2.19%, #1b998b 97.68%);
  filter: blur(47.6px);
  z-index: -1;
  left: 36.73%;
  top: 46.021%;
  transform: rotate(-50.77deg);
}

.page-head__blur {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}

.page-head__bg-big-ellipse {
  position: absolute;
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
  filter: blur(143.6px);
}

.page-head__bg-big-ellipse:nth-child(1) {
  width: 98.96%;
  height: 185.33%;
  top: 28%;
  background: #0c2c50;
  z-index: 1;
}

.page-head__bg-big-ellipse:nth-child(2) {
  width: 88.4375%;
  height: 147.1111%;
  top: 45.8889%;
  background: #31c4b4;
  z-index: 2;
}

.page-head__bg-big-ellipse:nth-child(3) {
  width: 65.8854%;
  height: 77.6667%;
  top: 68.7778%;
  background: #d5dde7;
  z-index: 3;
}

.page-head__bg-big-ellipse:nth-child(4) {
  width: 133.1771%;
  height: 190%;
  top: 108.1111%;
  background: #dde4ed;
  z-index: 4;
}

.page-head__container {
  position: relative;
  z-index: 3;
  height: 100%;
}

.page-head__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
  height: 100%;
}

.page-head__content:has(.swiper-wrapper) {
  overflow: hidden;
}

.page-head__content_right {
  flex-direction: column-reverse;
  grid-column: 1 / -1;
  padding: 0 var(--page-margin);
  margin: 0 calc(var(--page-margin) * -1);
  width: calc(100% + var(--page-margin) * 2);
  @media (min-width: 1280px) {
    width: 100%;
    padding: 0;
    margin: 0;
    flex-direction: column;
    grid-column: 4 / -1;
  }
}

.page-head__slider-controls {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 20px;
  @media (min-width: 1280px) {
    padding-bottom: 60px;
    gap: 50px;
  }
}

.page-head__slider-controls:not(:has(.swiper-slide:nth-child(2)))
  .swiper-buttons {
  display: none;
}

.page-head__description {
  font-weight: 500;
  line-height: 1.375;
  margin-top: 20px;
  @media (min-width: 1280px) {
    margin-top: 30px;
  }
  @media (min-width: 1900px) {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.33333;
  }
}

.page-head__image {
  position: absolute;
  right: -11.6vw;
  bottom: -2vw;
  width: 100vw;
  max-width: 450px;
  height: auto;
  object-fit: contain;
  object-position: right bottom;
  z-index: 3;
  @media (min-width: 768px) {
    max-width: 550px;
    bottom: -5vw;
  }
  @media (min-width: 1024px) {
    max-width: 750px;
  }
  @media (min-width: 1280px) {
    right: -11.6vw;
    bottom: -12.1875vw;
    width: 68.75vw;
    max-width: 1320px;
  }
}

.page-head__caption {
  color: var(--color-gray-3);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.28571;
  text-transform: uppercase;
  width: 100%;
}

.chips + .page-head__title {
  margin-top: 20px;
}

.page-head__title {
  letter-spacing: -1.08px;
  @media (min-width: 1280px) {
    letter-spacing: -1.38px;
  }
}

.page-head__slider {
  position: relative;
  overflow: hidden;
  grid-column: 1 / -1;
  @media (min-width: 1280px) {
    grid-column: 2 / 4;
  }
}

.catalog-section.page-head {
  padding-top: 162px;
  height: auto;
  padding-bottom: 282px;
  @media (min-width: 1280px) {
    height: min(100vh, 1280px);
    padding-top: 222px;
    padding-bottom: 92px;
  }
  @media (min-width: 1900px) {
    padding-top: 242px;
    padding-bottom: 102px;
  }
}

.catalog-section {
  .page-head__container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    @media (min-width: 1280px) {
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
  }
  .page-head__content {
    max-width: 450px;
    justify-content: flex-start;
    @media (min-width: 1280px) {
      max-width: 100%;
      justify-content: space-between;
    }
  }
}

.chips {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.chips__item {
  padding: 5px 11px;
  border-radius: var(--b-radius);
  outline: 1px solid rgba(230, 245, 241, 0.2);
  outline-offset: -1px;
  background: rgba(230, 245, 241, 0.2);
  color: white;
  font-size: 14px;
  line-height: 1.28571;
}

.chips__item_accent {
  background: var(--color-accent);
  outline: 1px solid var(--color-accent);
  border-radius: 23px;
  color: var(--color-primary);
}

*[data-fancybox] {
  cursor: pointer;
}

.swiper-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: var(--space-2xl);
  pointer-events: none;
}

.swiper-button {
  display: flex;
  width: 60px;
  height: 48px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border: none;
  border-radius: var(--b-radius);
  background: var(--color-gray-4);
  transition: all 0.3s ease;
  pointer-events: auto;
}

.swiper-button::after {
  content: "";
  display: block;
  width: 21px;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg width='21' height='8' viewBox='0 0 21 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.146447 3.32809C-0.0488155 3.52335 -0.0488155 3.83993 0.146447 4.03519L3.32843 7.21717C3.52369 7.41244 3.84027 7.41244 4.03553 7.21717C4.2308 7.02191 4.2308 6.70533 4.03553 6.51007L1.20711 3.68164L4.03553 0.853214C4.2308 0.657951 4.2308 0.341369 4.03553 0.146107C3.84027 -0.0491555 3.52369 -0.0491555 3.32843 0.146107L0.146447 3.32809ZM0.5 3.68164V4.18164H20.5V3.68164V3.18164H0.5V3.68164Z' fill='white'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.swiper-button_next::after {
  transform: rotate(180deg);
}

.swiper-button:hover {
  border-radius: 24px;
  background: var(--color-primary);
}

.swiper-button-disabled.swiper-button {
  opacity: 0.5;
  pointer-events: none;
}

.swiper:has(.swiper-pagination) {
  padding-bottom: 52px;
}

.swiper:has(.swiper-pagination-lock) {
  padding-bottom: 0;
}

.swiper-pagination-lock {
  display: none !important;
}

.swiper-pagination.custom-pagination:not(.swiper-pagination-bullets-dynamic) {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.custom-pagination:not(.swiper-pagination-bullets-dynamic)
  .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: var(--color-gray-4);
  margin: 0 !important;
}

.custom-pagination .swiper-pagination-bullet-active {
  background: var(--color-accent);
}

.custom-pagination.swiper-pagination-bullets-dynamic {
  .swiper-pagination-bullet {
    transform: scale(0.88);
  }
  .swiper-pagination-bullet-active-next {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-main {
    transform: scale(1.2);
  }
}

.text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.text h1 {
  display: none !important;
}

.text h2,
.text h3,
.text h4 {
  font-size: 18px;
  @media screen and (min-width: 1900px) {
    font-size: 22px;
  }
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.text > *:nth-child(1) {
  margin-top: 0;
}

.text > *:last-child {
  margin-bottom: 0;
}

.text ul,
ul.list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.text ul li,
ul.list li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.text ul li::before,
ul.list li::before {
  content: "";
  display: block;
  width: 18px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='20' viewBox='0 0 18 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='10' r='4' fill='%2331C4B4'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}

.text li:has(b) {
  display: flex;
  flex-direction: column;
  color: var(--color-gray-3);
  b {
    color: var(--color-primary);
    font-weight: 500;
  }
}

.text ol {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
}

.text ol > li:has(b) {
  gap: 5px;
}

.text ul li:has(b) {
  position: relative;
  padding-left: 26px;
}

.text ul li:has(b)::before {
  position: absolute;
  top: 2px;
  left: 0;
}

.text ol > li[data-index] {
  position: relative;
  padding-left: 40px;
}

.text ol > li[data-index]::before {
  content: attr(data-index);
  position: absolute;
  top: 0;
  left: 0;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  color: var(--color-accent);
}

.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgba(14, 28, 44, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.loader-container.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* .loader {
  --color-1: #c1ede9;
  --color-2: #31c4b4;
  --size: 1px;
  width: calc(48 * var(--size));
  height: calc(48 * var(--size));
  border: calc(3 * var(--size)) dotted var(--color-1);
  border-style: solid solid dotted dotted;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation 2s linear infinite;
}

.loader::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: calc(3 * var(--size)) dotted var(--color-2);
  border-style: solid solid dotted;
  width: calc(24 * var(--size));
  height: calc(24 * var(--size));
  border-radius: 50%;
  animation: rotationBack 1s linear infinite;
  transform-origin: center center;
} */

.loader {
  position: relative;
  width: 154px;
  height: 154px;
  transform: scale(0.7);
}

.loader > * {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.loader__gear {
  z-index: 2;
  clip-path: polygon(0px 0px, 100% 0px, 100% 38%, 40% 38%, 0 18%);
}

.gear {
  fill: white;
  transform-origin: center;
}

.loader__mask-accent-cutout {
  transform-box: fill-box;
  transform-origin: center;
}

.loader__mask-white-cutout {
  transform-box: fill-box;
  transform-origin: center;
}

.loader-container.active .gear {
  animation: rotation 4s linear infinite;
}

.loader-container.active .loader__mask-accent-cutout {
  animation: rotationBack 1.5s linear 0.2s infinite;
}

.loader-container.active .loader__mask-white-cutout {
  animation: rotation 1.5s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

body:has(.drop-menu.active) .header #navigation {
  position: relative;
  z-index: -1;
}

html::-webkit-scrollbar,
html .scrollbar::-webkit-scrollbar,
html .form__options::-webkit-scrollbar {
  width: 10px;
}

html::-webkit-scrollbar-track,
html .scrollbar::-webkit-scrollbar-track,
html .form__options::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb,
html .scrollbar::-webkit-scrollbar-thumb,
html .form__options::-webkit-scrollbar-thumb {
  background-color: var(--color-accent);
  border-radius: 4px;
  border: 1px solid white;
}
