@font-face {
    font-family: font-primary;
    font-weight: 300;
    src: url(/wp-content/themes/chastokol/dist/fonts/tt-norms-pro/light.ttf);
    font-display: swap;
    descent-override: 0%
}

@font-face {
    font-family: font-primary;
    font-weight: 400;
    src: url(/wp-content/themes/chastokol/dist/fonts/tt-norms-pro/regular.ttf);
    font-display: swap
}

@font-face {
    font-family: font-primary;
    font-weight: 500;
    src: url(/wp-content/themes/chastokol/dist/fonts/tt-norms-pro/medium.ttf);
    font-display: swap
}

@font-face {
    font-family: font-primary;
    font-weight: 700;
    src: url(/wp-content/themes/chastokol/dist/fonts/tt-norms-pro/bold.ttf);
    font-display: swap
}

@font-face {
    font-family: font-additional;
    font-weight: 900;
    src: url(/wp-content/themes/chastokol/dist/fonts/halvar-breitschrift/black.ttf);
    font-display: swap
}

@font-face {
    font-family: font-additional;
    font-weight: 700;
    src: url(/wp-content/themes/chastokol/dist/fonts/halvar-breitschrift/bold.ttf);
    font-display: swap
}

.f-d-title-medium-112 {
    font-family: font-primary;
    font-weight: 500;
    line-height: 110%;
    font-size: 11.2rem
}

.f-d-title-medium-96 {
    font-family: font-primary;
    font-weight: 500;
    line-height: 110%;
    font-size: 9.6rem
}

.f-d-title-medium-76 {
    font-family: font-primary;
    font-weight: 500;
    line-height: 105%;
    font-size: 7.6rem
}

.f-d-title-medium-64 {
    font-family: font-primary;
    font-weight: 500;
    line-height: 110%;
    font-size: 6.4rem
}

.f-d-title-medium-56 {
    font-family: font-primary;
    font-weight: 500;
    line-height: 105%;
    font-size: 5.6rem
}

.f-d-title-medium-45 {
    font-family: font-primary;
    font-weight: 500;
    line-height: 105%;
    font-size: 4.5rem
}

.f-d-title-medium-42 {
    font-family: font-primary;
    font-weight: 500;
    line-height: 105%;
    font-size: 4.2rem
}

.f-d-title-medium-32 {
    font-family: font-primary;
    font-weight: 500;
    line-height: 115%;
    font-size: 3.2rem
}

.f-d-title-medium-30 {
    font-family: font-primary;
    font-weight: 500;
    line-height: 115%;
    font-size: 3rem
}

.f-d-title-medium-28 {
    font-family: font-primary;
    font-weight: 500;
    line-height: 110%;
    font-size: 2.8rem
}

.f-d-title-medium-24 {
    font-family: font-primary;
    font-weight: 500;
    line-height: 110%;
    font-size: 2.4rem
}

.f-d-title-medium-20 {
    font-family: font-primary;
    font-weight: 500;
    line-height: 115%;
    font-size: 2rem
}

.f-d-title-medium-18 {
    font-family: font-primary;
    font-weight: 500;
    line-height: 120%;
    font-size: 1.8rem
}

.f-d-additionally-title-black-24 {
    font-family: font-additional;
    font-weight: 900;
    line-height: 130%;
    font-size: 2.4rem
}

.f-d-additionally-title-black-20 {
    font-family: font-additional;
    font-weight: 900;
    line-height: 130%;
    font-size: 2rem
}

.f-d-additionally-title-black-18 {
    font-family: font-additional;
    font-weight: 900;
    line-height: 130%;
    font-size: 1.8rem
}

.f-d-additionally-title-black-16 {
    font-family: font-additional;
    font-weight: 900;
    line-height: 130%;
    font-size: 1.6rem
}

.f-d-additionally-title-black-14 {
    font-family: font-additional;
    font-weight: 900;
    line-height: 130%;
    font-size: 1.4rem
}

.f-d-additionally-title-bold-24 {
    font-family: font-additional;
    font-weight: 700;
    line-height: 130%;
    font-size: 2.4rem
}

.f-d-additionally-title-bold-20 {
    font-family: font-additional;
    font-weight: 700;
    line-height: 130%;
    font-size: 2rem
}

.f-d-additionally-title-bold-18 {
    font-family: font-additional;
    font-weight: 700;
    line-height: 130%;
    font-size: 1.8rem
}

.f-d-additionally-title-bold-16 {
    font-family: font-additional;
    font-weight: 700;
    line-height: 130%;
    font-size: 1.6rem
}

.f-d-additionally-title-bold-14 {
    font-family: font-additional;
    font-weight: 700;
    line-height: 130%;
    font-size: 1.4rem
}

.f-d-body-large-bold-16 {
    font-family: font-primary;
    font-weight: 700;
    line-height: 100%;
    font-size: 1.6rem
}

.f-d-body-large-medium-16 {
    font-family: font-primary;
    font-weight: 500;
    line-height: 120%;
    font-size: 1.6rem
}

.f-d-body-large-regular-16 {
    font-family: font-primary;
    font-weight: 400;
    line-height: 130%;
    font-size: 1.6rem
}

.f-d-body-large-light-16 {
    font-family: font-primary;
    font-weight: 300;
    line-height: 130%;
    font-size: 1.6rem
}

.f-d-body-basic-bold-14 {
    font-family: font-primary;
    font-weight: 700;
    line-height: 130%;
    font-size: 1.4rem
}

.f-d-body-basic-medium-14 {
    font-family: font-primary;
    font-weight: 500;
    line-height: 125%;
    font-size: 1.4rem
}

.f-d-body-basic-regular-14 {
    font-family: font-primary;
    font-weight: 400;
    line-height: 125%;
    font-size: 1.4rem
}

.f-d-body-basic-light-14 {
    font-family: font-primary;
    font-weight: 300;
    line-height: 130%;
    font-size: 1.4rem
}

.f-d-footnote-bold-12 {
    font-family: font-primary;
    font-weight: 700;
    line-height: 115%;
    font-size: 1.2rem
}

.f-d-footnote-medium-12 {
    font-family: font-primary;
    font-weight: 500;
    line-height: 125%;
    font-size: 1.2rem
}

.f-d-footnote-regular-12 {
    font-family: font-primary;
    font-weight: 400;
    line-height: 125%;
    font-size: 1.2rem
}

.f-d-footnote-light-12 {
    font-family: font-primary;
    font-weight: 300;
    line-height: 115%;
    font-size: 1.2rem
}

.f-d-footnote-bold-10 {
    font-family: font-primary;
    font-weight: 700;
    line-height: 115%;
    font-size: 1rem
}

.f-d-footnote-medium-10 {
    font-family: font-primary;
    font-weight: 500;
    line-height: 120%;
    font-size: 1rem
}

.f-d-footnote-regular-10 {
    font-family: font-primary;
    font-weight: 400;
    line-height: 120%;
    font-size: 1rem
}

.f-d-footnote-light-10 {
    font-family: font-primary;
    font-weight: 300;
    line-height: 115%;
    font-size: 1rem
}

.f-d-footnote-bold-8 {
    font-family: font-primary;
    font-weight: 700;
    line-height: 120%;
    font-size: .8rem
}

.f-d-footnote-medium-8 {
    font-family: font-primary;
    font-weight: 500;
    line-height: 120%;
    font-size: .8rem
}

.f-d-footnote-regular-8 {
    font-family: font-primary;
    font-weight: 400;
    line-height: 120%;
    font-size: .8rem
}

.f-d-footnote-light-8 {
    font-family: font-primary;
    font-weight: 300;
    line-height: 120%;
    font-size: .8rem
}

@media (max-width: 768px) {
    .f-m-title-medium-112 {
        font-family: font-primary;
        font-weight: 500;
        line-height: 110%;
        font-size: 11.2rem
    }
    .f-m-title-medium-96 {
        font-family: font-primary;
        font-weight: 500;
        line-height: 110%;
        font-size: 9.6rem
    }
    .f-m-title-medium-76 {
        font-family: font-primary;
        font-weight: 500;
        line-height: 105%;
        font-size: 7.6rem
    }
    .f-m-title-medium-64 {
        font-family: font-primary;
        font-weight: 500;
        line-height: 110%;
        font-size: 6.4rem
    }
    .f-m-title-medium-56 {
        font-family: font-primary;
        font-weight: 500;
        line-height: 105%;
        font-size: 5.6rem
    }
    .f-m-title-medium-45 {
        font-family: font-primary;
        font-weight: 500;
        line-height: 105%;
        font-size: 4.5rem
    }
    .f-m-title-medium-42 {
        font-family: font-primary;
        font-weight: 500;
        line-height: 105%;
        font-size: 4.2rem
    }
    .f-m-title-medium-32 {
        font-family: font-primary;
        font-weight: 500;
        line-height: 115%;
        font-size: 3.2rem
    }
    .f-m-title-medium-30 {
        font-family: font-primary;
        font-weight: 500;
        line-height: 115%;
        font-size: 3rem
    }
    .f-m-title-medium-28 {
        font-family: font-primary;
        font-weight: 500;
        line-height: 110%;
        font-size: 2.8rem
    }
    .f-m-title-medium-24 {
        font-family: font-primary;
        font-weight: 500;
        line-height: 110%;
        font-size: 2.4rem
    }
    .f-m-title-medium-20 {
        font-family: font-primary;
        font-weight: 500;
        line-height: 115%;
        font-size: 2rem
    }
    .f-m-title-medium-18 {
        font-family: font-primary;
        font-weight: 500;
        line-height: 120%;
        font-size: 1.8rem
    }
    .f-m-additionally-title-black-24 {
        font-family: font-additional;
        font-weight: 900;
        line-height: 130%;
        font-size: 2.4rem
    }
    .f-m-additionally-title-black-20 {
        font-family: font-additional;
        font-weight: 900;
        line-height: 130%;
        font-size: 2rem
    }
    .f-m-additionally-title-black-18 {
        font-family: font-additional;
        font-weight: 900;
        line-height: 130%;
        font-size: 1.8rem
    }
    .f-m-additionally-title-black-16 {
        font-family: font-additional;
        font-weight: 900;
        line-height: 130%;
        font-size: 1.6rem
    }
    .f-m-additionally-title-black-14 {
        font-family: font-additional;
        font-weight: 900;
        line-height: 130%;
        font-size: 1.4rem
    }
    .f-m-additionally-title-bold-24 {
        font-family: font-additional;
        font-weight: 700;
        line-height: 130%;
        font-size: 2.4rem
    }
    .f-m-additionally-title-bold-20 {
        font-family: font-additional;
        font-weight: 700;
        line-height: 130%;
        font-size: 2rem
    }
    .f-m-additionally-title-bold-18 {
        font-family: font-additional;
        font-weight: 700;
        line-height: 130%;
        font-size: 1.8rem
    }
    .f-m-additionally-title-bold-16 {
        font-family: font-additional;
        font-weight: 700;
        line-height: 130%;
        font-size: 1.6rem
    }
    .f-m-additionally-title-bold-14 {
        font-family: font-additional;
        font-weight: 700;
        line-height: 130%;
        font-size: 1.4rem
    }
    .f-m-body-large-bold-16 {
        font-family: font-primary;
        font-weight: 700;
        line-height: 100%;
        font-size: 1.6rem
    }
    .f-m-body-large-medium-16 {
        font-family: font-primary;
        font-weight: 500;
        line-height: 120%;
        font-size: 1.6rem
    }
    .f-m-body-large-regular-16 {
        font-family: font-primary;
        font-weight: 400;
        line-height: 130%;
        font-size: 1.6rem
    }
    .f-m-body-large-light-16 {
        font-family: font-primary;
        font-weight: 300;
        line-height: 130%;
        font-size: 1.6rem
    }
    .f-m-body-basic-bold-14 {
        font-family: font-primary;
        font-weight: 700;
        line-height: 130%;
        font-size: 1.4rem
    }
    .f-m-body-basic-medium-14 {
        font-family: font-primary;
        font-weight: 500;
        line-height: 125%;
        font-size: 1.4rem
    }
    .f-m-body-basic-regular-14 {
        font-family: font-primary;
        font-weight: 400;
        line-height: 125%;
        font-size: 1.4rem
    }
    .f-m-body-basic-light-14 {
        font-family: font-primary;
        font-weight: 300;
        line-height: 130%;
        font-size: 1.4rem
    }
    .f-m-footnote-bold-12 {
        font-family: font-primary;
        font-weight: 700;
        line-height: 115%;
        font-size: 1.2rem
    }
    .f-m-footnote-medium-12 {
        font-family: font-primary;
        font-weight: 500;
        line-height: 125%;
        font-size: 1.2rem
    }
    .f-m-footnote-regular-12 {
        font-family: font-primary;
        font-weight: 400;
        line-height: 125%;
        font-size: 1.2rem
    }
    .f-m-footnote-light-12 {
        font-family: font-primary;
        font-weight: 300;
        line-height: 115%;
        font-size: 1.2rem
    }
    .f-m-footnote-bold-10 {
        font-family: font-primary;
        font-weight: 700;
        line-height: 115%;
        font-size: 1rem
    }
    .f-m-footnote-medium-10 {
        font-family: font-primary;
        font-weight: 500;
        line-height: 120%;
        font-size: 1rem
    }
    .f-m-footnote-regular-10 {
        font-family: font-primary;
        font-weight: 400;
        line-height: 120%;
        font-size: 1rem
    }
    .f-m-footnote-light-10 {
        font-family: font-primary;
        font-weight: 300;
        line-height: 115%;
        font-size: 1rem
    }
    .f-m-footnote-bold-8 {
        font-family: font-primary;
        font-weight: 700;
        line-height: 120%;
        font-size: .8rem
    }
    .f-m-footnote-medium-8 {
        font-family: font-primary;
        font-weight: 500;
        line-height: 120%;
        font-size: .8rem
    }
    .f-m-footnote-regular-8 {
        font-family: font-primary;
        font-weight: 400;
        line-height: 120%;
        font-size: .8rem
    }
    .f-m-footnote-light-8 {
        font-family: font-primary;
        font-weight: 300;
        line-height: 120%;
        font-size: .8rem
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden
}

:root {
    --color-grayscale-700: #181d1d;
    --color-grayscale-600: #333333;
    --color-grayscale-500: #4b4b4b;
    --color-grayscale-400: #969696;
    --color-grayscale-300: #e6e6e6;
    --color-grayscale-200: #f7f7f7;
    --color-grayscale-100: #fafafa;
    --color-grayscale-0: #ffffff;
    --color-primary-200: #045707;
    --color-primary-100: #307c32;
    --color-primary-0: #6fca36;
    --color-button-text: #fdfdfd;
    --color-button-disabled: #efefef;
    --color-red: #d12c2c;
    --color-image-background: #f0f0f0;
    --color-lazy: var(--color-image-background);
    --color-page: var(--color-grayscale-200);
    --color-font: var(--color-grayscale-600);
    --color-scrollbar-thumb: var(--color-primary-100);
    --color-scrollbar-track: var(--color-grayscale-200);
    --z-modal: 102;
    --z-scrollbar: 101;
    --z-header: 100;
    --screen-horisontal-padding: 21rem;
    --screen-horisontal-padding-large: 40rem;
    --section-vertical-padding: 4rem;
    --section-vertical-padding-full: calc(var(--section-vertical-padding) * 2);
    --section-bullets-padding: 5.8rem;
    --header-top-height: 3rem;
    --header-height: 8.7rem;
    --header-full-height: calc(var(--header-height) + var(--header-top-height));
    --input-height: 5rem;
    --duration-button: .2s;
    --duration-menu: .3s;
    --viewport-height: var(--inner-height, 100vh);
    --viewport-width: var(--client-width, 100vw);
    --border-radius: 2rem;
    --slider-mobile-sections-in-view: 1.27;
    --ease-in-sine: cubic-bezier(.12, 0, .39, 0);
    --ease-out-sine: cubic-bezier(.61, 1, .88, 1);
    --ease-in-out-sine: cubic-bezier(.37, 0, .63, 1);
    --ease-in-quad: cubic-bezier(.11, 0, .5, 0);
    --ease-out-quad: cubic-bezier(.5, 1, .89, 1);
    --ease-in-out-quad: cubic-bezier(.45, 0, .55, 1);
    --ease-in-cubic: cubic-bezier(.32, 0, .67, 0);
    --ease-out-cubic: cubic-bezier(.33, 1, .68, 1);
    --ease-in-out-cubic: cubic-bezier(.65, 0, .35, 1);
    --ease-in-quart: cubic-bezier(.5, 0, .75, 0);
    --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
    --ease-in-out-quart: cubic-bezier(.76, 0, .24, 1);
    --ease-in-quint: cubic-bezier(.64, 0, .78, 0);
    --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
    --ease-in-out-quint: cubic-bezier(.83, 0, .17, 1);
    --ease-in-expo: cubic-bezier(.7, 0, .84, 0);
    --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out-expo: cubic-bezier(.87, 0, .13, 1);
    --ease-in-circ: cubic-bezier(.55, 0, 1, .45);
    --ease-out-circ: cubic-bezier(0, .55, .45, 1);
    --ease-in-out-circ: cubic-bezier(.85, 0, .15, 1);
    --ease-in-back: cubic-bezier(.36, 0, .66, -.56);
    --ease-out-back: cubic-bezier(.34, 1.56, .64, 1);
    --ease-in-out-back: cubic-bezier(.68, -.6, .32, 1.6);
    --morph-duration: .3s
}

@media (max-width: 1600px) {
    :root {
        --screen-horisontal-padding: 8rem;
        --screen-horisontal-padding-large: 29rem
    }
}

@media (max-width: 1024px) {
    :root {
        --screen-horisontal-padding: 10rem;
        --screen-horisontal-padding-large: 15rem
    }
}

@media (max-width: 768px) {
    :root {
        --screen-horisontal-padding: 2rem;
        --screen-horisontal-padding-large: 2rem;
        --section-vertical-padding: 2rem;
        --header-top-height: 0rem;
        --header-height: 6.4rem;
        --section-bullets-padding: 0rem;
        --input-height: 4rem;
        --border-radius: 1.5rem
    }
}

@supports (height: 100dvh) {
    :root :root {
        --viewport-height: 100dvh
    }
}

html {
    font-size: calc(100vw / 1920 * 10)
}

@media (max-width: 1600px) {
    html {
        font-size: .625vw
    }
}

@media (max-width: 768px) {
    html {
        font-size: calc(100vw / 450 * 10)
    }
}

@media (max-width: 600px) {
    html {
        font-size: calc(100vw / 375 * 10)
    }
}

body {
    font-family: font-primary, sans-serif;
    background-color: #f7f7f7;
    background-color: var(--color-page);
    color: #333;
    color: var(--color-font);
    -webkit-tap-highlight-color: transparent;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

button,
input,
textarea {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    border: none;
    background: none;
    color: inherit
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    font-family: inherit;
    font-size: inherit
}

input::placeholder,
textarea::placeholder {
    font-family: inherit;
    font-size: inherit
}

a {
    font-family: inherit;
    color: inherit;
    -webkit-text-decoration: none;
    text-decoration: none
}

a,
button,
e-scroll-set-button,
e-scroll-step-button,
e-popover-button {
    cursor: pointer
}

button,
e-scroll-set-button,
e-scroll-step-button,
e-popover-button {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    max-width: 100%
}

img {
    width: 100%;
    height: 100%
}

picture {
    display: contents
}

.visually-hidden {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
    opacity: 0;
    transform: translate(-50%, -50%);
    pointer-events: none
}

button,
e-popover-button {
    cursor: pointer
}

ul,
ol {
    list-style: none
}

img {
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

b {
    font-weight: 600
}

e-scroll.has-overflow.bullets {
    margin-bottom: 5.8rem;
    margin-bottom: var(--section-bullets-padding)
}

e-billboard {
    touch-action: none
}

:target {
    scroll-margin-top: 10.7rem;
    scroll-margin-top: calc(var(--header-height) + 2rem)
}

.grid {
    display: grid
}

[data-white-background=true] {
    background-color: #fff;
    background-color: var(--color-grayscale-0)
}

[data-padding-top=normal] {
    padding-top: 4rem;
    padding-top: var(--section-vertical-padding)
}

[data-padding-top=full] {
    padding-top: 8rem;
    padding-top: var(--section-vertical-padding-full)
}

[data-padding-bottom=normal] {
    padding-bottom: 4rem;
    padding-bottom: var(--section-vertical-padding)
}

[data-padding-bottom=large] {
    padding-bottom: 6rem
}

@media (max-width: 768px) {
    [data-padding-bottom=large] {
        padding-bottom: 8rem;
        padding-bottom: var(--section-vertical-padding-full)
    }
}

[data-padding-bottom=full] {
    padding-bottom: 8rem;
    padding-bottom: var(--section-vertical-padding-full)
}

[data-padding-horisontal=normal] {
    padding-left: 21rem;
    padding-left: var(--screen-horisontal-padding);
    padding-right: 21rem;
    padding-right: var(--screen-horisontal-padding)
}

[data-padding-horisontal=large] {
    padding-left: 40rem;
    padding-left: var(--screen-horisontal-padding-large);
    padding-right: 40rem;
    padding-right: var(--screen-horisontal-padding-large)
}

[data-border] {
    border-bottom: 1px solid #e6e6e6;
    border-bottom: 1px solid var(--color-grayscale-300)
}

.two-color-heading b {
    font-weight: inherit;
    color: #307c32;
    color: var(--color-primary-100)
}

.hidden-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
    overscroll-behavior: contain
}

.hidden-scrollbar::-webkit-scrollbar {
    display: none
}

.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #307c32 #f7f7f7;
    scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
    -webkit-overflow-scrolling: auto !important
}

.custom-scrollbar::-webkit-scrollbar {
    height: .5rem;
    width: .5rem
}

.custom-scrollbar::-webkit-scrollbar-track {
    background-color: #f7f7f7;
    background-color: var(--color-scrollbar-track);
    border-radius: .5rem
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #307c32;
    background-color: var(--color-scrollbar-thumb);
    border-radius: .5rem
}

.filter-image {
    position: relative;
    overflow: hidden
}

.filter-image img {
    filter: grayscale(1) brightness(1.5)
}

.filter-image:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: transparent;
    mix-blend-mode: multiply;
    pointer-events: none;
    background-color: var(--picked-color);
    transition-property: background-color;
    transition-duration: .2s;
    transition-duration: var(--duration-button)
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition-property: background-color, border-color;
    transition-duration: var(--duration-button)
}

.button[data-theme=flat] {
    gap: .8rem;
    --button-color: var(--color-primary-100);
    --button-icon-fill: var(--color-primary-100);
    --button-icon-box-size: var(--arrow-size, 2.1rem)
}

@media (hover: hover) {
    .button[data-theme=flat]:hover {
        --button-color: var(--color-grayscale-400);
        --button-icon-fill: var(--color-grayscale-400)
    }
}

@media (max-width: 768px) {
    .button[data-theme=flat] {
        gap: .5rem
    }
}

.button[data-theme=only-text] {
    padding: 0rem 2rem;
    padding: var(--button-padding, 0rem 2rem)
}

@media (max-width: 768px) {
    .button[data-theme=only-text] {
        padding: 0rem 1.5rem;
        padding: var(--button-padding, 0rem 1.5rem)
    }
}

.button[data-theme=default] {
    padding: 0rem .5rem 0rem 2rem;
    padding: var(--button-padding, 0rem .5rem 0rem 2rem)
}

@media (max-width: 768px) {
    .button[data-theme=default] {
        padding: 0rem .5rem 0rem 1.5rem;
        padding: var(--button-padding, 0rem .5rem 0rem 1.5rem)
    }
}

@media (min-width: 769px) {
    .button[data-theme=default-to-only-arrow] {
        padding: 0rem .5rem 0rem 1.5rem;
        padding: var(--button-padding, 0rem .5rem 0rem 1.5rem)
    }
}

.button[data-theme=only-text],
.button[data-theme=default],
.button[data-theme=default-to-only-arrow],
.button[data-theme=only-arrow] {
    gap: 1.5rem;
    height: 4.5rem;
    height: var(--button-height, 4.5rem);
    background-color: var(--button-background-color);
    border-radius: 3rem;
    border-radius: var(--button-border-radius, 3rem);
    border: 1px solid transparent
}

@media (max-width: 768px) {
    .button[data-theme=only-text],
    .button[data-theme=default],
    .button[data-theme=default-to-only-arrow],
    .button[data-theme=only-arrow] {
        gap: 1rem
    }
}

.button[data-theme=only-text],
.button[data-theme=default],
.button[data-theme=default-to-only-arrow] {
    --button-color: var(--color-grayscale-0);
    --button-background-color: var(--color-primary-100);
    --button-icon-box-background-color: var(--color-grayscale-0);
    --button-icon-fill: var(--color-primary-100)
}

@media (min-width: 769px) {
    @media (hover: hover) {
        .button[data-theme=only-text]:not(.loading):not(:disabled):not([data-disabled]):hover {
            --button-color: var(--color-primary-100);
            --button-background-color: var(--color-grayscale-0);
            --button-icon-box-background-color: var(--color-primary-100);
            --button-icon-fill: var(--color-grayscale-0);
            border-color: var(--button-color)
        }
        .button[data-theme=default]:not(.loading):not(:disabled):not([data-disabled]):hover {
            --button-color: var(--color-primary-100);
            --button-background-color: var(--color-grayscale-0);
            --button-icon-box-background-color: var(--color-primary-100);
            --button-icon-fill: var(--color-grayscale-0);
            border-color: var(--button-color)
        }
        .button[data-theme=default-to-only-arrow]:not(.loading):not(:disabled):not([data-disabled]):hover {
            --button-color: var(--color-primary-100);
            --button-background-color: var(--color-grayscale-0);
            --button-icon-box-background-color: var(--color-primary-100);
            --button-icon-fill: var(--color-grayscale-0);
            border-color: var(--button-color)
        }
    }
}

@media (max-width: 768px) {
    .button[data-theme=default-to-only-arrow][data-theme=only-text],
    .button[data-theme=default-to-only-arrow][data-theme=default],
    .button[data-theme=default-to-only-arrow][data-theme=default-to-only-arrow] {
        --button-name-display: none;
        --button-padding: 0rem;
        --button-height: var(--arrow-size, 4rem);
        --button-icon-box-size: var(--arrow-size, 4rem);
        --button-border-radius: 50%;
        --button-background-color: transparent;
        --button-icon-box-background-color: var(--color-primary-100);
        --button-icon-fill: var(--color-grayscale-0)
    }
    @media (hover: hover) {
        .button[data-theme=default-to-only-arrow][data-theme=only-text]:not(.loading):not(:disabled):not([data-disabled]):hover {
            --button-icon-box-background-color: transparent;
            border-color: var(--color-primary-100);
            --button-icon-fill: var(--color-primary-100)
        }
        .button[data-theme=default-to-only-arrow][data-theme=default]:not(.loading):not(:disabled):not([data-disabled]):hover {
            --button-icon-box-background-color: transparent;
            border-color: var(--color-primary-100);
            --button-icon-fill: var(--color-primary-100)
        }
        .button[data-theme=default-to-only-arrow][data-theme=default-to-only-arrow]:not(.loading):not(:disabled):not([data-disabled]):hover {
            --button-icon-box-background-color: transparent;
            border-color: var(--color-primary-100);
            --button-icon-fill: var(--color-primary-100)
        }
    }
}

.button[data-theme=only-arrow] {
    --button-name-display: none;
    --button-padding: 0rem;
    --button-height: var(--arrow-size, 4rem);
    --button-icon-box-size: var(--arrow-size, 4rem);
    --button-border-radius: 50%;
    --button-background-color: transparent;
    --button-icon-box-background-color: var(--color-primary-100);
    --button-icon-fill: var(--color-grayscale-0)
}

@media (hover: hover) {
    .button[data-theme=only-arrow]:not(.loading):not(:disabled):not([data-disabled]):hover {
        --button-icon-box-background-color: transparent;
        border-color: var(--color-primary-100);
        --button-icon-fill: var(--color-primary-100)
    }
}

.button[disabled],
.button[data-disabled] {
    cursor: default
}

.button[disabled]:not([data-theme=flat]),
.button[data-disabled]:not([data-theme=flat]) {
    --button-color: var(--color-button-text);
    --button-background-color: var(--color-button-disabled);
    --button-icon-fill: var(--color-button-text);
    --button-icon-box-background-color: var(--color-button-disabled)
}

.button[data-theme=flat][disabled],
.button[data-theme=flat][data-disabled] {
    --button-color: #efefef;
    --button-icon-fill: #efefef
}

.button.loading {
    cursor: default
}

@media (max-width: 768px) {
    .button:not([data-theme=flat]) {
        height: 4rem;
        height: var(--button-height, 4rem)
    }
}

.button__name {
    line-height: 1 !important;
    display: block;
    display: var(--button-name-display, block);
    color: var(--button-color);
    transition-property: color;
    transition-duration: var(--duration-button)
}

.button__icon-box {
    flex-shrink: 0;
    width: 3.5rem;
    width: var(--button-icon-box-size, 3.5rem);
    height: 3.5rem;
    height: var(--button-icon-box-size, 3.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--button-icon-box-background-color);
    transition-property: background-color;
    transition-duration: var(--duration-button)
}

@media (max-width: 768px) {
    .button__icon-box {
        width: 3rem;
        width: var(--button-icon-box-size, 3rem);
        height: 3rem;
        height: var(--button-icon-box-size, 3rem)
    }
}

.button__icon {
    width: 60%;
    height: 60%
}

.button[data-theme=flat] .button__icon {
    width: 100%;
    height: 100%
}

.button__icon {
    transform: rotate(-45deg);
    fill: var(--button-icon-fill);
    transition-property: fill;
    transition-duration: var(--duration-button)
}

.button__loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none
}

.button.loading .button__loading {
    opacity: 1;
    pointer-events: auto
}

.button__spinner {
    width: 2.4rem;
    height: 2.4rem;
    stroke: var(--color-grayscale-200);
    fill: none;
    transform-origin: 51.5% 50%
}

.button.loading .button__spinner {
    animation: button-loading 1s infinite linear
}

.button__loading,
.button__content {
    width: 100%;
    height: 100%;
    transition-property: opacity;
    transition-duration: var(--duration-button)
}

@keyframes button-loading {
    to {
        transform: rotate(1turn)
    }
}

.not-found {
    width: 100%;
    padding-bottom: 14rem;
    padding-top: 5.5rem;
    display: flex;
    justify-content: center;
    color: var(--color-primary-100)
}

@media (max-width: 768px) {
    .not-found {
        padding: 0 var(--screen-horisontal-padding);
        padding-bottom: 10rem;
        padding-top: 6.3rem
    }
}

.not-found__inner {
    width: 84.1rem;
    display: flex;
    flex-direction: column;
    align-items: center
}

@media (max-width: 768px) {
    .not-found__inner {
        width: 100%
    }
}

.not-found__code {
    font-family: font-additional;
    font-weight: 700;
    font-size: 32rem;
    text-transform: uppercase
}

@media (max-width: 768px) {
    .not-found__code {
        font-size: 12.8rem;
        margin-bottom: 0rem
    }
}

.not-found__title {
    margin-bottom: 2rem;
    text-align: center
}

.not-found__description {
    width: 68rem;
    margin-bottom: 8rem;
    text-align: center;
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .not-found__description {
        width: 100%;
        margin-bottom: 4rem
    }
}

.header-contact {
    display: flex;
    flex-direction: column
}

.header-contact__value {
    margin-bottom: .4rem
}

@media (max-width: 768px) {
    .header-contact__value {
        margin-bottom: .8rem
    }
}

.header-contact__additional {
    opacity: .6
}

.logo {
    display: block;
    width: 18.5rem;
    height: 3.1rem
}

@media (max-width: 768px) {
    .logo {
        width: 15.2rem;
        height: 2.6rem
    }
}

.logo__image {
    width: 100%;
    height: 100%;
    fill: var(--logo-color, var(--color-grayscale-0));
    transition-property: fill;
    transition-duration: var(--duration-button)
}

@media (min-width: 769px) {
    .manager {
        display: flex;
        align-items: center;
        gap: 2rem
    }
}

.manager__image {
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover
}

@media (max-width: 768px) {
    .manager__image {
        display: none
    }
}

@media (max-width: 768px) {
    .manager__content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center
    }
}

.manager__title {
    display: block;
    margin-bottom: .3rem
}

@media (min-width: 769px) {
    @media (hover: hover) {
        .manager__title {
            transition-property:color;
            transition-duration: var(--duration-button)
        }
        .manager:hover .manager__title {
            color: var(--color-grayscale-400)
        }
    }
}

@media (max-width: 768px) {
    .manager__title {
        width: 100%;
        height: 4rem;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 3rem;
        background-color: #17c056;
        color: var(--color-grayscale-0)
    }
}

@media (min-width: 769px) {
    .manager__title__icon {
        display: none
    }
}

@media (max-width: 768px) {
    .manager__title__icon {
        width: 1.8rem;
        height: 1.8rem;
        margin-right: 1rem;
        fill: var(--color-grayscale-0)
    }
}

.manager__online {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    color: var(--color-grayscale-400)
}

.manager__online:before {
    content: "";
    width: .7rem;
    height: .7rem;
    background-color: var(--color-primary-0);
    border-radius: 50%
}

.menu-button {
    --type: toggle;
    --color: var(--color-grayscale-600);
    padding: 0 1.5rem;
    height: 3.7rem;
    display: inline-flex;
    align-items: center;
    gap: 1.08rem;
    border-radius: 3rem;
    background-color: var(--color-grayscale-0);
    border: 1px solid var(--color-grayscale-0);
    transition-property: background-color, border-color;
    transition-duration: var(--duration-menu)
}

.menu-button.opened {
    --color: var(--color-grayscale-0);
    background-color: var(--color-primary-100);
    border-color: var(--color-primary-100)
}

@media (max-width: 768px) {
    .menu-button {
        height: 3.2rem
    }
}

.menu-button__icon {
    position: relative;
    width: 1.92rem;
    height: 1.92rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.menu-button__icon:before,
.menu-button__icon:after {
    content: "";
    position: absolute;
    width: 100%;
    height: .16rem;
    border-radius: 1rem;
    background-color: var(--color);
    transition: background-color var(--duration-menu), transform var(--duration-menu)
}

.menu-button__icon:before {
    transform: translateY(-.3rem) rotate(0)
}

.menu-button__icon:after {
    transform: translateY(.3rem) rotate(0)
}

.menu-button.opened .menu-button__icon:before {
    transform: translateY(0) rotate(45deg)
}

.menu-button.opened .menu-button__icon:after {
    transform: translateY(0) rotate(-45deg)
}

.menu-button__name {
    display: grid;
    transition: color var(--duration-menu);
    color: var(--color);
    overflow: hidden
}

.menu-button__name__closed,
.menu-button__name__opened {
    grid-column: 1/1;
    grid-row: 1/1;
    line-height: 1;
    transition: transform var(--duration-menu)
}

.menu-button.opened .menu-button__name__closed {
    transform: translateY(-101%)
}

.menu-button__name__opened {
    transform: translateY(101%)
}

@media (min-width: 769px) {
    .menu-button.opened .menu-button__name__opened {
        transform: translateY(0)
    }
}

@media (max-width: 768px) {
    .menu-button__name__opened {
        width: 0px;
        transition-property: transform, width;
        transition-duration: var(--duration-menu)
    }
    .menu-button.triggered .menu-button__name__opened {
        width: 5.5rem
    }
    .menu-button.opened .menu-button__name__opened {
        transition-delay: var(--duration-menu);
        transform: translateY(0)
    }
}

.icon-box {
    width: 3.8rem;
    width: var(--icon-box-size, 3.8rem);
    height: 3.8rem;
    height: var(--icon-box-size, 3.8rem);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--icon-box-border-color, var(--color-grayscale-600));
    background-color: transparent;
    background-color: var(--icon-box-background-color, transparent);
    transition-property: color, background-color, border-color;
    transition-duration: var(--icon-box-duration, var(--duration-button));
    border-radius: .7rem
}

@media (max-width: 768px) {
    .icon-box {
        width: 4rem;
        width: var(--icon-box-size, 4rem);
        height: 4rem;
        height: var(--icon-box-size, 4rem)
    }
}

.icon-box__icon {
    width: 1.8rem;
    width: var(--icon-size, 1.8rem);
    height: 1.8rem;
    height: var(--icon-size, 1.8rem);
    fill: var(--icon-box-color, var(--color-grayscale-700));
    transition-property: fill;
    transition-duration: var(--icon-box-duration, var(--duration-button));
    transform: rotate(0);
    transform: rotate(var(--icon-box-rotation, 0deg))
}

@media (max-width: 768px) {
    .icon-box__icon {
        width: 1.895rem;
        width: var(--icon-size, 1.895rem);
        height: 1.895rem;
        height: var(--icon-size, 1.895rem)
    }
}

.menu-catalog-category-button {
    --icon-box-background-color: var(--color-grayscale-200);
    --icon-box-border-color: transparent;
    --icon-box-color: var(--color-grayscale-600);
    --icon-size: 100%;
    --icon-box-duration: var(--duration-menu);
    padding: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    transition-property: background-color, color;
    transition-duration: var(--duration-menu);
    transition-timing-function: ease
}

.menu-catalog-category-button.opened {
    --icon-box-background-color: var(--color-primary-100);
    --icon-box-color: var(--color-grayscale-0);
    background-color: var(--color-grayscale-100);
    color: var(--color-primary-100)
}

@media (min-width: 769px) {
    .menu-catalog-category-button:hover {
        --icon-box-background-color: var(--color-primary-100);
        --icon-box-color: var(--color-grayscale-0);
        background-color: var(--color-grayscale-100);
        color: var(--color-primary-100)
    }
}

@media (max-width: 768px) {
    .menu-catalog-category-button {
        --icon-box-size: 3rem;
        padding: 1.5rem var(--screen-horisontal-padding);
        border-bottom: 1px solid var(--color-grayscale-300)
    }
}

@media (min-width: 769px) {
    .menu-catalog-category-button__arrow {
        display: none
    }
}

@media (max-width: 768px) {
    .menu-catalog-category-button__arrow {
        width: 1.8rem;
        height: 1.8rem;
        margin-left: auto
    }
}

.link-image {
    position: relative;
    width: 4.6rem;
    height: 4.6rem;
    display: block;
    border-radius: .7rem;
    border: .2rem solid var(--color-grayscale-300)
}

.link-image:after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 100%;
    top: 50%;
    transform: translate(-1px, -50%);
    width: 1rem;
    height: 1rem;
    display: block;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    background-color: var(--color-grayscale-300)
}

.link-image__image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: .5rem
}

.menu-link {
    position: relative;
    display: inline-flex;
    align-items: center
}

@media (max-width: 768px) {
    .menu-link {
        padding: 1.5rem var(--screen-horisontal-padding);
        border-bottom: 1px solid var(--color-grayscale-300)
    }
}

@media (min-width: 769px) {
    .menu-link__name {
        color: var(--color-grayscale-400)
    }
}

.menu-link__image {
    position: absolute;
    right: calc(100% + .934rem);
    z-index: 1;
    opacity: 0;
    transition-property: opacity;
    transition-duration: var(--duration-button);
    transition-timing-function: ease;
    pointer-events: none
}

@media (hover: hover) {
    .menu-link:hover .menu-link__image {
        opacity: 1
    }
}

@media (max-width: 768px) {
    .menu-link__image {
        display: none
    }
}

.header-back-button {
    --type: close;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem var(--screen-horisontal-padding);
    padding-left: calc(var(--screen-horisontal-padding) * .8);
    border-top: 1px solid var(--color-grayscale-300);
    border-bottom: 1px solid var(--color-grayscale-300)
}

.header-back-button__name {
    color: var(--color-grayscale-400)
}

.header-back-button__arrow {
    fill: var(--color-grayscale-400);
    transform: scaleX(-1);
    width: 1.4rem;
    height: 1.4rem
}

.menu-catalog-category-column {
    --group: catalog-category-column;
    --close-rest-in-group: true;
    --close-rest: false;
    --click-outside: false;
    --escape: false;
    display: block
}

@media (max-width: 768px) {
    .menu-catalog-category-column {
        display: none;
        width: 100%;
        transition: opacity var(--duration-menu)
    }
    .menu-catalog-category-column.triggered {
        display: block
    }
}

@media (min-width: 769px) {
    .menu-catalog-category-column__back {
        display: none
    }
}

.menu-catalog-category-column__title {
    margin-bottom: 1.8rem
}

@media (min-width: 769px) {
    @media (hover: hover) {
        .menu-catalog-category-column__title {
            transition-property:color;
            transition-duration: var(--duration-button)
        }
        .menu-catalog-category-column__title:hover {
            color: var(--color-grayscale-400)
        }
    }
}

@media (max-width: 768px) {
    .menu-catalog-category-column__title {
        display: none
    }
}

.menu-catalog-category-column__list {
    display: grid;
    grid-auto-rows: max-content
}

@media (min-width: 769px) {
    .menu-catalog-category-column__list {
        gap: 1.5rem
    }
}

@media (min-width: 769px) {
    .menu-catalog-category-column__link_all {
        display: none
    }
}

@media (max-width: 768px) {
    .menu-catalog-category-column__link_all {
        color: var(--color-grayscale-400)
    }
}

.reset-button {
    --icon-box-size: var(--input-height);
    --icon-size: 1.6rem;
    --icon-box-rotation: 45deg;
    --icon-box-border-color: var(--color-grayscale-300)
}

@media (hover: hover) {
    .reset-button:hover {
        --icon-box-background-color: var(--color-primary-100);
        --icon-box-color: var(--color-grayscale-0);
        --icon-box-border-color: transparent
    }
}

.search-button {
    flex-shrink: 0;
    width: 12.8rem;
    border-radius: .7rem;
    height: var(--input-height);
    background-color: var(--color-primary-100);
    color: var(--color-grayscale-0);
    border: 1px solid var(--color-primary-100)
}

@media (hover: hover) {
    .search-button {
        transition-property: color, background-color, border-color;
        transition-duration: var(--duration-button)
    }
    .search-button:hover {
        background-color: transparent;
        color: var(--color-primary-100);
        border-color: var(--color-primary-100)
    }
}

@media (max-width: 768px) {
    .search-button {
        border-radius: 1.2rem
    }
}

.search {
    display: block;
    width: 100%;
    padding: 0 1rem
}

.search__form {
    width: 100%;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem
}

.search__input {
    width: 100%;
    height: var(--input-height);
    padding: 0 2rem;
    border-radius: .7rem;
    border: 1px solid var(--color-grayscale-300)
}

.search__input::-moz-placeholder {
    color: var(--color-grayscale-400)
}

.search__input::placeholder {
    color: var(--color-grayscale-400)
}

.search__reset {
    flex-shrink: 0
}

.search__suggestions {
    display: flex;
    align-items: center
}

.search__suggestions__title {
    flex-shrink: 0;
    margin-right: 1.5rem
}

.search__suggestions__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem
}

.search__suggestion,
.search__suggestion-text {
    padding: 0.5rem 1rem;
    height: 2.5rem;
    background-color: var(--color-grayscale-100);
    border-radius: .7rem
}

@media (hover: hover) {
    .search__suggestion,
    .search__suggestion-text {
        transition-property: opacity;
        transition-duration: var(--duration-button);
        transition-timing-function: ease
    }
    .search__suggestion:hover {
        opacity: .7
    }
}

.menu-catalog-category {
    --group: catalog-category;
    --close-rest-in-group: true;
    --close-rest: false;
    --click-outside: false;
    --escape: false;
    display: none;
    background-color: var(--color-grayscale-0);
    transition: opacity var(--duration-menu)
}

@media (min-width: 769px) {
    .menu-catalog-category {
        padding: 0 var(--screen-horisontal-padding);
        padding-bottom: 5rem;
        opacity: 0
    }
    .menu-catalog-category.opened {
        opacity: 1
    }
}

.menu-catalog-category.triggered {
    display: block
}

@media (min-width: 769px) {
    .menu-catalog-category__sheet {
        display: contents
    }
}

@media (max-width: 768px) {
    .menu-catalog-category__sheet {
        transition-property: transform;
        transition-duration: var(--duration-menu);
        transition-timing-function: ease
    }
    .catalog-category-column-opened .menu-catalog-category__sheet {
        transform: translate(-100%)
    }
}

@media (min-width: 769px) {
    .menu-catalog-category__back {
        display: none
    }
}

@media (min-width: 769px) {
    .menu-catalog-category__column-names {
        display: none
    }
}

@media (max-width: 768px) {
    .menu-catalog-category__column-names {
        display: grid
    }
}

.menu-catalog-category__column-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem var(--screen-horisontal-padding);
    border-bottom: 1px solid var(--color-grayscale-300)
}

.menu-catalog-category__column-name__arrow {
    width: 1.8rem;
    height: 1.8rem
}

@media (min-width: 769px) {
    .menu-catalog-category__columns {
        padding: 5rem 0;
        display: flex;
        flex-wrap: wrap;
        gap: 5rem 0
    }
}

@media (max-width: 768px) {
    .menu-catalog-category__columns {
        position: absolute;
        left: 100%;
        top: 0;
        width: 100%
    }
}

@media (min-width: 769px) {
    .menu-catalog-category__column {
        width: 30rem;
        padding: 0 1rem
    }
}

@media (max-width: 1600px) {
    .menu-catalog-category__column {
        width: 28rem
    }
}

@media (max-width: 768px) {
    .menu-catalog-category__column {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%
    }
}

@media (max-width: 768px) {
    .menu-catalog-category__search {
        display: none
    }
}

.menu-catalog {
    --history: true;
    --escape: true;
    --close-rest: true;
    --click-outside: true;
    --group: menu-catalog;
    display: none
}

.menu-catalog.triggered {
    display: block
}

.menu-catalog {
    transition: clip-path var(--duration-menu)
}

@media (min-width: 769px) {
    .menu-catalog {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0)
    }
    .menu-catalog.opened {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
    }
}

@media (max-width: 768px) {
    .menu-catalog {
        --close-rest: false;
        --click-outside: false;
        width: 100%
    }
}

@media (min-width: 769px) {
    .menu-catalog__sheet {
        display: contents
    }
}

@media (max-width: 768px) {
    .menu-catalog__sheet {
        transition-property: transform;
        transition-duration: var(--duration-menu);
        transition-timing-function: ease
    }
    .catalog-category-opened .menu-catalog__sheet {
        transform: translate(-100%)
    }
}

@media (min-width: 769px) {
    .menu-catalog__back-button {
        display: none
    }
}

.menu-catalog__buttons {
    display: flex;
    border-bottom: 1px solid var(--color-grayscale-300);
    padding: 0 var(--screen-horisontal-padding);
    background-color: var(--color-grayscale-0)
}

@media (max-width: 768px) {
    .menu-catalog__buttons {
        border: medium none currentcolor;
        border: initial;
        flex-direction: column;
        width: 100%;
        padding: 0
    }
}

@media (min-width: 769px) {
    .menu-catalog__button {
        flex: 1;
        height: 100%
    }
    .menu-catalog__button:first-child {
        border-left: 1px solid var(--color-grayscale-300)
    }
    .menu-catalog__button {
        border-right: 1px solid var(--color-grayscale-300)
    }
}

@media (max-width: 768px) {
    .menu-catalog__button {
        width: 100%
    }
}

.menu-catalog__list {
    display: grid
}

@media (min-width: 769px) {
    .menu-catalog__list {
        background-color: var(--color-grayscale-0);
        transition: clip-path var(--duration-menu);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        border-bottom: 1px solid var(--color-grayscale-300)
    }
    .catalog-category-opened .menu-catalog__list {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
    }
}

@media (max-width: 768px) {
    .menu-catalog__list {
        position: absolute;
        width: 100%;
        left: 100%;
        top: 0
    }
}

.menu-catalog__category {
    grid-column: 1/1;
    grid-row: 1/1
}

.header-submenu {
    --padding: 1.5rem;
    --border-radius: 1.5rem;
    --duration: .1s
}

@media (min-width: 769px) {
    .header-submenu {
        display: inline-block;
        position: relative;
        height: -moz-max-content;
        height: max-content
    }
}

.header-submenu__name {
    position: relative;
    --type: toggle;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition-property: opacity;
    transition-duration: var(--duration-button)
}

@media (min-width: 769px) {
    @media (hover: hover) {
        .header-submenu__name:not(.opened):hover {
            opacity:.6
        }
    }
}

.header-submenu__name:before {
    content: "";
    position: absolute;
    left: calc(var(--padding) * -1);
    top: -.3rem;
    z-index: -1;
    width: calc(100% + var(--padding) * 2);
    height: calc(100% + .6rem);
    transition-property: clip-path;
    transition-duration: var(--duration);
    transition-delay: var(--duration);
    transition-timing-function: var(--ease-out-cubic);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    background-color: var(--color-grayscale-0);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0)
}

.header-submenu__name.opened:before {
    transition-timing-function: var(--ease-in-cubic);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition-delay: 0s
}

@media (max-width: 768px) {
    .header-submenu__name {
        width: 100%;
        justify-content: space-between
    }
}

.header-submenu__name__value {
    transition-property: color;
    transition-duration: var(--duration-button);
    color: var(--header-submenu-color, var(--color-grayscale-600))
}

.header-submenu__name.opened .header-submenu__name__value {
    color: var(--color-grayscale-400)
}

.header-submenu__name__icon {
    width: 1.2rem;
    height: 1.2rem;
    display: block;
    stroke: none;
    fill: var(--header-submenu-color, var(--color-grayscale-600));
    transition-property: transform, stroke;
    transition-duration: .3s
}

@media (min-width: 769px) {
    .header-submenu__name__icon {
        transform: rotate(90deg) scaleY(1)
    }
    .header-submenu__name.opened .header-submenu__name__icon {
        fill: var(--color-grayscale-400);
        transform: rotate(90deg) scaleX(-1)
    }
    .header-submenu:not([has-links=true]) .header-submenu__name__icon {
        display: none
    }
    @media (hover: hover) {
        .header-submenu__name:not(.opened):hover .header-submenu__name__icon {
            transform: rotate(90deg) scaleX(-1)
        }
    }
}

@media (max-width: 768px) {
    .header-submenu__name__icon {
        width: 1.8rem;
        height: 1.8rem
    }
}

.header-submenu__popover {
    --click-outside: true;
    --escape: true;
    --group: menu-submnenu;
    position: absolute;
    top: 100%;
    left: calc(var(--padding) * -1);
    width: calc(100% + var(--padding) * 2);
    z-index: 1;
    display: none
}

.header-submenu__popover.triggered {
    display: block
}

.header-submenu__popover {
    transition-property: opacity;
    transition-duration: var(--duration-menu)
}

@media (max-width: 768px) {
    .header-submenu__popover {
        top: 0;
        left: 100%
    }
}

@media (min-width: 769px) {
    .header-submenu__back-button {
        display: none
    }
}

.header-submenu__links {
    width: 100%;
    min-width: 150px;
    display: grid;
    grid-auto-rows: max-content;
    background-color: var(--color-grayscale-0)
}

@media (min-width: 769px) {
    .header-submenu__links {
        gap: .5rem;
        padding: var(--padding);
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
        transition-property: clip-path;
        transition-duration: var(--duration);
        transition-timing-function: var(--ease-in-cubic);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0)
    }
    .header-submenu__popover.opened .header-submenu__links {
        transition-delay: var(--duration);
        transition-timing-function: var(--ease-out-cubic);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
    }
}

@media (hover: hover) {
    .header-submenu__link {
        transition-property: opacity;
        transition-duration: var(--duration-button)
    }
    .header-submenu__link:hover {
        opacity: .7
    }
}

@media (max-width: 768px) {
    .header-submenu__link {
        padding: 1.5rem var(--screen-horisontal-padding);
        border-bottom: 1px solid var(--color-grayscale-300)
    }
}

.location-button {
    --close-rest: false;
    display: inline-flex;
    align-items: center;
    gap: 1rem
}

@media (max-width: 768px) {
    .location-button__icon-box {
        width: 3.2rem;
        height: 3.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #f3f3f3;
        border-radius: 50%
    }
    [data-header-color=dark] .location-button__icon-box {
        border-color: var(--color-grayscale-300)
    }
}

.location-button__icon {
    width: 1.2rem;
    height: 1.2rem;
    transition-property: fill;
    transition-duration: var(--duration-button);
    fill: var(--location-button-color, var(--color-font))
}

@media (hover: hover) {
    .location-button__icon {
        transition-property: fill;
        transition-duration: var(--duration-button)
    }
    .location-button:hover .location-button__icon {
        fill: var(--color-grayscale-400)
    }
}

@media (max-width: 768px) {
    .location-button__icon {
        width: 1.4rem;
        height: 1.4rem
    }
}

.location-button__name {
    transition-property: color;
    transition-duration: var(--duration-button);
    color: var(--location-button-color, var(--color-font))
}

@media (hover: hover) {
    .location-button__name {
        transition-property: color;
        transition-duration: var(--duration-button)
    }
    .location-button:hover .location-button__name {
        color: var(--color-grayscale-400)
    }
}

@media (max-width: 768px) {
    .location-button__name {
        display: none
    }
}

.header {
    --header-color: var(--color-grayscale-0);
    --header-submenu-color: var(--header-color);
    --location-button-color: var(--header-color);
    --header-background-ease: var(--ease-out-cubic);
    --header-background-color: transparent;
    --header-border-color: rgba(255, 255, 255, .35);
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-header);
    width: 100%;
    display: block;
    transition-property: transform;
    transition-duration: var(--duration-menu)
}

[data-header-background-color=white] .header {
    --header-background-color: var(--color-grayscale-0)
}

@media (min-width: 769px) {
    [data-header-color=dark] .header {
        --header-color: var(--color-font);
        --header-border-color: var(--color-grayscale-300)
    }
}

@media (max-width: 768px) {
    [data-header-mobile-color=dark] .header {
        --header-color: var(--color-font);
        --header-border-color: var(--color-grayscale-300)
    }
}

.menu-catalog-opened .header,
.menu-catalog-closing .header,
.menu-opened .header,
.menu-closing .header,
.page-scrolled .header {
    --header-background-color: var(--color-grayscale-0);
    --header-color: var(--color-font);
    --header-border-color: var(--color-grayscale-300)
}

@media (min-width: 769px) {
    .menu-catalog-opened .header,
    .menu-catalog-closing .header,
    .menu-opened .header,
    .menu-closing .header,
    .page-scrolled .header {
        transform: translateY(calc(var(--header-top-height) * -1))
    }
}

@media (max-width: 768px) {
    .header {
        --header-submenu-color: var(--color-font)
    }
}

@media (min-width: 769px) {
    .header__top {
        position: relative;
        z-index: 2;
        height: var(--header-top-height);
        padding: 0 var(--screen-horisontal-padding);
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--header-border-color);
        transition-property: background-color;
        transition-duration: var(--duration-menu);
        transition-timing-function: var(--header-background-ease);
        will-change: background-color;
        background-color: var(--header-background-color)
    }
}

@media (max-width: 768px) {
    .header__top {
        display: contents
    }
}

.header__submenus {
    display: flex;
    gap: 4rem
}

@media (max-width: 768px) {
    .header__submenus {
        display: contents
    }
}

@media (max-width: 768px) {
    .header__submenu:last-of-type {
        margin-bottom: 5.5rem
    }
}

@media (min-width: 769px) {
    .header__middle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--header-height);
        padding: 0 var(--screen-horisontal-padding);
        border-bottom: 1px solid var(--header-border-color);
        transition-property: background-color;
        transition-duration: var(--duration-menu);
        transition-timing-function: var(--header-background-ease);
        will-change: background-color;
        background-color: var(--header-background-color)
    }
}

@media (max-width: 768px) {
    .header__middle {
        display: contents
    }
}

@media (min-width: 769px) {
    .header__mobile-top {
        display: contents
    }
}

@media (max-width: 768px) {
    .header__mobile-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.5rem var(--screen-horisontal-padding);
        transition-property: background-color;
        transition-duration: var(--duration-menu);
        transition-timing-function: var(--header-background-ease);
        will-change: background-color;
        background-color: var(--header-background-color);
        border-bottom: 1px solid var(--header-border-color)
    }
}

@media (min-width: 769px) {
    .header__logo {
        position: absolute;
        left: var(--screen-horisontal-padding);
        top: calc(var(--header-top-height) + var(--header-height) / 2);
        transform: translateY(-50%)
    }
}

.menu-catalog-opened .header__logo,
.menu-catalog-closing .header__logo,
.menu-opened .header__logo,
.menu-closing .header__logo,
.page-scrolled .header__logo {
    --logo-color: var(--color-primary-100)
}

@media (min-width: 769px) {
    [data-header-color=dark] .header__logo {
        --logo-color: var(--color-primary-100)
    }
}

@media (max-width: 768px) {
    [data-header-mobile-color=dark] .header__logo {
        --logo-color: var(--color-primary-100)
    }
}

@media (min-width: 769px) {
    .header__location-button {
        position: absolute;
        right: var(--screen-horisontal-padding);
        top: calc(var(--header-top-height) / 2);
        z-index: 3;
        transform: translateY(-50%)
    }
}

@media (max-width: 768px) {
    .header__location-button {
        margin-left: auto;
        margin-right: 1rem
    }
}

@media (min-width: 769px) {
    .header__menu-button {
        display: none
    }
}

@media (max-width: 768px) {
    .header__menu-button {
        border: 1px solid transparent;
        transition-property: border-color;
        transition-duration: var(--duration-button);
        transition-timing-function: ease
    }
    [data-header-has-border=true] .header__menu-button,
    .page-scrolled .header__menu-button {
        border-color: var(--color-primary-100)
    }
}

@media (min-width: 769px) {
    .header__catalog-button {
        margin-left: 34.7rem
    }
    .page-scrolled .header__catalog-button,
    [data-header-color=dark] .header__catalog-button {
        --color: var(--color-grayscale-0);
        background-color: var(--color-primary-100)
    }
}

@media (max-width: 768px) {
    .header__catalog-button {
        order: -1;
        padding: 0;
        padding: initial;
        height: auto;
        height: initial;
        display: inline-flex;
        align-items: center;
        gap: initial;
        border-radius: 0;
        border-radius: initial;
        background-color: transparent;
        background-color: initial;
        transition: none 0s ease 0s;
        transition: initial;
        width: 100%;
        border-top: 1px solid var(--color-grayscale-300)
    }
    .header__catalog-button .menu-button__name {
        width: 100%
    }
    .header__catalog-button .menu-button__name__opened {
        display: none
    }
    .header__catalog-button .menu-button__name__closed {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transform: none !important;
        transform: initial !important
    }
    .header__catalog-button .menu-button__icon {
        display: none
    }
    .header__catalog-button.opened {
        background-color: transparent;
        background-color: initial;
        border-color: var(--color-grayscale-300)
    }
    .header__catalog-button.opened .menu-button__name {
        color: var(--color-font)
    }
}

@media (min-width: 769px) {
    @media (hover: hover) {
        html:not(.page-scrolled) .header__catalog-button:hover {
            --color: var(--color-grayscale-0);
            background-color: var(--color-primary-100);
            border-color: var(--color-primary-100)
        }
        html:not([data-header-color=dark]) .header__catalog-button.opened:hover {
            --color: var(--color-primary-100);
            background-color: transparent;
            border-color: var(--color-primary-100)
        }
        html:not([data-header-color=dark]).page-scrolled .header__catalog-button:hover {
            --color: var(--color-primary-100);
            background-color: transparent;
            border-color: var(--color-primary-100)
        }
        html[data-header-color=dark] .header__catalog-button:hover {
            --color: var(--color-primary-100);
            background-color: transparent;
            border-color: var(--color-primary-100)
        }
    }
}

.header__catalog-button__name {
    display: inline-block;
    line-height: 1
}

@media (min-width: 769px) {
    .header__catalog-button__icon {
        display: none
    }
}

@media (max-width: 768px) {
    .header__catalog-button__icon {
        width: 1.8rem;
        height: 1.8rem
    }
}

@media (max-width: 768px) {
    .header .header-submenu__name,
    .header .header__catalog-button {
        padding: 1.5rem var(--screen-horisontal-padding);
        border-bottom: 1px solid var(--color-grayscale-300)
    }
}

.header__menu {
    --group: menu
}

@media (min-width: 769px) {
    .header__menu {
        display: contents
    }
}

@media (max-width: 768px) {
    .header__menu {
        position: absolute;
        top: calc(100% - .5px);
        left: 0;
        display: none;
        width: 100%;
        height: calc(var(--viewport-height) - var(--header-height));
        padding-bottom: 2rem;
        background-color: var(--color-grayscale-0);
        transition: clip-path var(--duration-menu);
        transition-timing-function: var(--ease-out-circ);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        overflow-x: hidden;
        overflow-y: auto;
        overflow: hidden auto
    }
    .header__menu.triggered {
        display: block
    }
    .header__menu.opened {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
    }
}

@media (min-width: 769px) {
    .header__menu__first-sheet {
        display: contents
    }
}

@media (max-width: 768px) {
    .header__menu__first-sheet {
        position: relative;
        display: flex;
        flex-direction: column;
        transition-property: transform;
        transition-duration: var(--duration-menu);
        transition-timing-function: ease
    }
    .menu-catalog-opened .header__menu__first-sheet,
    .menu-submnenu-opened .header__menu__first-sheet {
        transform: translate(-100%)
    }
}

@media (min-width: 769px) {
    .header__contacts {
        display: flex;
        gap: 8.8rem;
        margin-left: auto;
        margin-right: 11.3rem;
        transition-property: color;
        transition-duration: var(--duration-menu);
        transition-timing-function: ease;
        color: var(--header-color)
    }
}

@media (max-width: 768px) {
    .header__contacts {
        padding: 0 var(--screen-horisontal-padding);
        display: grid;
        grid-auto-rows: max-content;
        grid-gap: 4.5rem;
        gap: 4.5rem;
        margin-bottom: 5.5rem
    }
}

@media (hover: hover) {
    .header__contact {
        transition-property: color;
        transition-duration: var(--duration-button);
        transition-timing-function: ease
    }
    .header__contact:hover {
        color: var(--color-grayscale-400)
    }
}

@media (min-width: 769px) {
    .header__online {
        transition-property: color;
        transition-duration: var(--duration-menu);
        color: var(--header-color)
    }
}

@media (max-width: 768px) {
    .header__online {
        padding: 0 var(--screen-horisontal-padding)
    }
}

.header__catalog {
    position: absolute;
    left: 0;
    z-index: 1;
    width: 100%
}

@media (min-width: 769px) {
    .header__catalog {
        top: 100%
    }
}

@media (max-width: 768px) {
    .header__catalog {
        top: 0;
        left: 100%
    }
}

.stat {
    display: inline-flex;
    align-items: center;
    gap: 2rem
}

.stat__icon {
    --icon-box-background-color: var(--color-grayscale-600);
    --icon-box-color: var(--color-grayscale-0)
}

.social {
    display: flex;
    gap: 1.5rem
}

@media (max-width: 768px) {
    .social {
        gap: 1rem
    }
}

@media (hover: hover) {
    .social__link:hover {
        --icon-box-background-color: var(--color-primary-100);
        --icon-box-color: var(--color-grayscale-0)
    }
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: 3.8rem;
    padding: 0 1.5rem;
    border-radius: 3rem;
    background-color: var(--color-grayscale-600)
}

@media (max-width: 768px) {
    .social-link {
        height: 4rem
    }
}

.social-link__icon {
    width: 1.6rem;
    height: 1.6rem;
    fill: var(--color-grayscale-0)
}

@media (hover: hover) {
    .social-link__icon {
        transition-property: fill;
        transition-duration: var(--duration-button)
    }
    .social-link:hover .social-link__icon {
        fill: var(--color-grayscale-400)
    }
}

@media (max-width: 768px) {
    .social-link__icon {
        width: 1.5rem;
        height: 1.5rem
    }
}

.social-link__name {
    color: var(--color-grayscale-0);
    line-height: 1 !important
}

@media (hover: hover) {
    .social-link__name {
        transition-property: color;
        transition-duration: var(--duration-button)
    }
    .social-link:hover .social-link__name {
        color: var(--color-grayscale-400)
    }
}

.footer {
    background-color: var(--color-grayscale-700);
    color: var(--color-grayscale-0)
}

@media (hover: hover) {
    .footer a,
    .footer .footer__col__more__name {
        transition-property: color;
        transition-duration: var(--duration-button)
    }
    .footer a:not(.does-not-exist):hover,
    .footer .footer__col__more__name:hover {
        color: var(--color-grayscale-400)
    }
}

.footer__main {
    width: 100%;
    padding: 0 var(--screen-horisontal-padding);
    padding-top: 4rem;
    padding-bottom: 5rem;
    display: grid;
    grid-template-columns: 34.8rem 12.2rem 22.6rem 28.8rem 29.5rem 22.2rem;
    grid-template-rows: .5rem 4.1rem 4.2rem 2.2rem max-content max-content 5.3rem 1.2rem max-content;
    grid-template-areas: "logo . . . . ." "logo . fences gates clients contacts" "description . fences gates clients contacts" ". . fences gates clients contacts" "address . fences gates clients contacts" "address . fences gates clients contacts" ". . . . . ." "stats . . . . ." "stats . . . social online"
}

@media (max-width: 1600px) {
    .footer__main {
        grid-template-columns: 35rem .5fr 1fr 1fr 1fr 1fr
    }
}

@media (max-width: 768px) {
    .footer__main {
        padding-bottom: 4rem;
        display: grid;
        grid-template-columns: 18rem 1fr;
        grid-template-rows: max-content .9rem max-content 1.5rem max-content 4rem max-content 4rem max-content 4rem max-content 4rem max-content;
        grid-template-areas: "logo logo" ". ." "description description" ". ." "address address" ". ." "contacts contacts" ". ." "social social" ". ." "clients catalog" ". ." "online online"
    }
}

.footer__logo {
    grid-area: logo
}

.footer__description {
    grid-area: description;
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .footer__description {
        max-width: 25rem
    }
}

.footer__address {
    grid-area: address
}

.footer__stats {
    grid-area: stats;
    display: grid;
    grid-auto-rows: max-content;
    grid-gap: 1.5rem;
    gap: 1.5rem
}

@media (max-width: 768px) {
    .footer__stats {
        display: none
    }
}

.footer__col__name {
    margin-bottom: 2rem;
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .footer__col__name {
        margin-bottom: 1.5rem
    }
}

.footer__col__list {
    display: grid;
    grid-auto-rows: max-content;
    grid-gap: 1.3rem;
    gap: 1.3rem
}

@media (max-width: 768px) {
    .footer__col__list {
        gap: 1.05rem
    }
}

.footer__col_fences {
    grid-area: fences
}

@media (max-width: 768px) {
    .footer__col_fences {
        display: none
    }
}

.footer__col_gates {
    grid-area: gates
}

@media (max-width: 768px) {
    .footer__col_gates {
        display: none
    }
}

.footer__col_clients {
    grid-area: clients
}

.footer__col_catalog {
    grid-area: catalog
}

@media (min-width: 769px) {
    .footer__col_catalog {
        display: none
    }
}

.footer__col_contacts {
    grid-area: contacts
}

@media (max-width: 768px) {
    .footer__col_contacts .footer__col__name {
        margin-bottom: 2.2rem
    }
}

.footer__col_social {
    grid-area: social
}

@media (max-width: 768px) {
    .footer__col_social .footer__col__name {
        display: none
    }
}

.footer__col_online {
    grid-area: online
}

.footer__contacts__hours {
    margin-top: 2.3rem;
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .footer__contacts__hours {
        margin-top: 1.6rem
    }
}

.footer__social {
    --icon-box-color: var(--color-grayscale-0)
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    padding: 2rem var(--screen-horisontal-padding);
    color: var(--color-grayscale-400);
    border-top: 1px solid var(--color-grayscale-600)
}

@media (max-width: 768px) {
    .footer__bottom {
        flex-direction: column-reverse
    }
}

@media (min-width: 769px) {
    .footer__rights {
        margin-right: 4rem
    }
}

.footer__sitemap {
    margin-right: auto
}

@media (max-width: 768px) {
    .footer__sitemap {
        display: none
    }
}

@media (min-width: 769px) {
    .footer__agreement {
        width: 22.1rem
    }
}

@media (max-width: 768px) {
    .footer__agreement {
        margin-bottom: 1rem
    }
}

.footer__col__more__label {
    cursor: pointer
}

.footer__col__more__name {
    position: relative;
    display: inline-flex;
    align-items: center
}

.footer__col__more__input:checked~.footer__col__more__name {
    display: none
}

.footer__col__more__name__icon {
    flex-shrink: 0;
    position: absolute;
    left: calc(100% + .5rem);
    top: 5%;
    width: 1.8rem;
    height: 1.8rem;
    fill: var(--color-grayscale-0);
    will-change: transform
}

@media (hover: hover) {
    .footer__col__more__name__icon {
        transition-property: fill, transform;
        transition-duration: var(--duration-button);
        transition-timing-function: ease
    }
    .footer__col__more__label:hover .footer__col__more__name__icon {
        fill: var(--color-grayscale-400);
        transform: rotate(45deg)
    }
}

.footer__col__more__links {
    display: none
}

.footer__col__more__input:checked~.footer__col__more__links {
    display: grid
}

.scrollbar {
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--z-scrollbar);
    width: .8rem;
    height: 100%;
    background-color: var(--color-scrollbar-track);
    border-radius: .5rem;
    transition: opacity .5s;
    opacity: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media (max-width: 1600px) {
    .scrollbar {
        width: .6rem
    }
}

.scrollbar.active,
.scrollbar:hover {
    opacity: 1
}

.scrollbar__thumb {
    width: 100%;
    background-color: var(--color-scrollbar-thumb);
    border-radius: .5rem
}

@media (max-width: 1024px) {
    .scrollbar {
        display: none
    }
}

.common-modal {
    --history: true;
    --escape: true;
    --click-outside: true;
    --duration: .4s;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-modal);
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0;
    transition: opacity .4s;
    transition: opacity var(--duration);
    background-color: #00000059
}

.common-modal.triggered {
    display: block
}

.common-modal.opened {
    opacity: 1
}

.common-modal__inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.common-modal__content {
    position: relative;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overflow: hidden auto
}

@media (max-width: 768px) {
    .common-modal__content {
        width: 100%;
        display: flex;
        justify-content: center
    }
}

.modal-close-button {
    --type: close;
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 2rem;
    height: 2rem
}

@media (max-width: 768px) {
    .modal-close-button {
        width: 1.8rem;
        height: 1.8rem
    }
}

.modal-close-button__icon {
    width: 100%;
    height: 100%;
    transform: rotate(45deg);
    fill: var(--color-font)
}

@media (max-width: 768px) {
    .city__close-button {
        top: 4.461rem
    }
}

.city__content {
    width: 59.3rem;
    padding: 5rem;
    height: -moz-max-content;
    height: max-content;
    border-radius: 2rem;
    background-color: var(--color-grayscale-0)
}

@media (max-width: 768px) {
    .city__content {
        padding: 4rem var(--screen-horisontal-padding)
    }
}

@media (max-width: 768px) {
    .city__content {
        border-radius: 0;
        border-radius: initial;
        min-height: var(--viewport-height)
    }
}

.city__title {
    margin-bottom: 2.5rem
}

.city__form-wrapper {
    margin-bottom: 4.2rem
}

.city__form {
    position: relative;
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem
}

@media (max-width: 768px) {
    .city__form {
        margin-bottom: 1rem
    }
}

.city__form__input {
    width: 100%;
    height: var(--input-height);
    padding: 0 2rem;
    border: 1px solid var(--color-grayscale-300);
    border-radius: .7rem
}

.city__form__input::-moz-placeholder {
    color: var(--color-grayscale-400)
}

.city__form__input::placeholder {
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .city__form__input {
        padding: 0 4.3rem
    }
}

@media (max-width: 768px) {
    .city__form__search {
        display: none
    }
}

@media (min-width: 769px) {
    .city__form__search-mobile {
        display: none
    }
}

@media (max-width: 768px) {
    .city__form__search-mobile {
        position: absolute;
        top: 1.4rem;
        left: 1.5rem;
        width: 1.3rem;
        height: 1.3rem
    }
}

.city__form__search-mobile__icon {
    width: 100%;
    height: 100%;
    fill: var(--color-font)
}

.city__detect {
    color: var(--color-primary-100)
}

.city__list {
    width: 100%;
    display: grid;
    grid-gap: 1.8rem;
    gap: 1.8rem
}

@media (max-width: 768px) {
    .city__list {
        gap: 2rem
    }
}

.city__list__item {
    width: 100%
}

.city__list__link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.city__list__link.current .city__list__link__name {
    color: var(--color-primary-100);
    font-weight: 500
}

.city__list__link__icon {
    width: 1.6rem;
    height: 1.6rem;
    display: none
}

.city__list__link.current .city__list__link__icon {
    display: block;
    fill: var(--color-primary-100)
}

@media (max-width: 768px) {
    .city__list__link__icon {
        width: 1.2rem;
        height: 1.2rem
    }
}

.thank-you {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.thank-you__check {
    width: 8rem;
    height: 8rem;
    margin-bottom: 5rem
}

@media (max-width: 768px) {
    .thank-you__check {
        width: 5rem;
        height: 5rem;
        margin-bottom: 2.5rem
    }
}

.thank-you__check__icon {
    width: 100%;
    height: 100%
}

.thank-you__title {
    text-align: center;
    max-width: 31.5rem;
    margin-bottom: 3rem
}

@media (max-width: 768px) {
    .thank-you__title {
        max-width: 23.2rem;
        margin-bottom: 1.5rem
    }
}

.thank-you__description {
    text-align: center;
    max-width: 31.5rem;
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .thank-you__description {
        max-width: 23.2rem
    }
}

.form-answer__content {
    position: relative;
    padding: 8rem;
    border-radius: var(--border-radius);
    background-color: var(--color-grayscale-0)
}

@media (max-width: 768px) {
    .form-answer__content {
        width: calc(100% - var(--screen-horisontal-padding) * 2);
        padding: 4rem;
        height: -moz-max-content;
        height: max-content
    }
}

.checkbox {
    position: relative;
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.checkbox__content {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    cursor: pointer
}

.checkbox__input:disabled:not([data-always-checked])~.checkbox__content {
    --icon-box-background-color: var(--color-grayscale-100);
    --icon-box-color: var(--color-grayscale-300)
}

.checkbox__input:disabled~.checkbox__content {
    cursor: default
}

@media (max-width: 768px) {
    .checkbox__content {
        gap: 1rem
    }
}

.checkbox__icon-box {
    flex-shrink: 0;
    width: 2rem;
    width: var(--checkbox-size, 2rem);
    height: 2rem;
    height: var(--checkbox-size, 2rem);
    will-change: transform;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--color-primary-100)
}

.checkbox__input[type=radio]~.checkbox__content .checkbox__icon-box {
    border-radius: 50%
}

.checkbox__input[type=checkbox]~.checkbox__content .checkbox__icon-box {
    border-radius: .5rem
}

@media (max-width: 768px) {
    .checkbox__input[type=checkbox]~.checkbox__content .checkbox__icon-box {
        border-radius: .3rem
    }
}

.checkbox__input[type=checkbox]:checked:not(:disabled)~.checkbox__content .checkbox__icon-box,
.checkbox__input[type=checkbox][data-always-checked]~.checkbox__content .checkbox__icon-box {
    background-color: var(--color-primary-100)
}

.checkbox__input:focus:not(:disabled)~.checkbox__content .checkbox__icon-box {
    box-shadow: 0 0 0 .2rem #307c3226
}

.checkbox__input:disabled:not([data-always-checked])~.checkbox__content .checkbox__icon-box {
    border-color: var(--color-grayscale-300)
}

@media (max-width: 768px) {
    .checkbox__icon-box {
        width: 1.5rem;
        width: var(--checkbox-size, 1.5rem);
        height: 1.5rem;
        height: var(--checkbox-size, 1.5rem);
        border-width: 1px
    }
}

.checkbox__icon-box__icon {
    fill: var(--color-primary-100);
    opacity: 0;
    will-change: transform
}

.checkbox__input[type=checkbox]~.checkbox__content .checkbox__icon-box__icon {
    width: 75%;
    height: 75%
}

.checkbox__input[type=radio]~.checkbox__content .checkbox__icon-box__icon {
    width: 100%;
    height: 100%
}

.checkbox__input:checked:not(:disabled)~.checkbox__content .checkbox__icon-box__icon,
.checkbox__input[data-always-checked]~.checkbox__content .checkbox__icon-box__icon {
    opacity: 1
}

.checkbox__input[type=checkbox]:checked:not(:disabled)~.checkbox__content .checkbox__icon-box__icon,
.checkbox__input[type=checkbox][data-always-checked]~.checkbox__content .checkbox__icon-box__icon {
    fill: var(--color-button-text)
}

.checkbox__title {
    color: #121417
}

.checkbox__input:disabled:not([data-always-checked])~.checkbox__content .checkbox__title {
    color: var(--color-grayscale-300)
}

.form-agreement {
    display: inline-flex;
    align-items: center
}

.form-agreement__input {
    display: inline-flex;
    --checkbox-size: 1.8rem;
    margin-right: 1.2rem
}

.form-agreement__input .checkbox__icon-box {
    border-color: var(--color-grayscale-400)
}

.form-agreement__input .checkbox__input:checked~.checkbox__content .checkbox__icon-box {
    border-color: var(--color-primary-100)
}

@media (max-width: 768px) {
    .form-agreement__input {
        --checkbox-size: 1.35rem;
        margin-right: 1rem
    }
}

.form-agreement__text {
    color: var(--color-grayscale-400);
    line-height: 1 !important
}

.form-agreement__text a {
    -webkit-text-decoration: underline;
    text-decoration: underline;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none
}

@media (hover: hover) {
    .form-agreement__text a {
        transition-property: color;
        transition-duration: var(--duration-button);
        transition-timing-function: ease
    }
    .form-agreement__text a:hover {
        color: var(--color-grayscale-500)
    }
}

@media (max-width: 768px) {
    .form-modal__close-button {
        top: 4.3rem
    }
}

.form-modal__form {
    padding: 5rem;
    background-color: var(--color-grayscale-0);
    border-radius: var(--border-radius)
}

@media (max-width: 768px) {
    .form-modal__form {
        border-radius: 0;
        padding: 4rem 2rem;
        min-height: var(--viewport-height)
    }
}

.form-modal__form__title {
    margin-bottom: 1.5rem
}

@media (max-width: 768px) {
    .form-modal__form__title {
        margin-bottom: .9rem
    }
}

.form-modal__form__description {
    margin-bottom: 4rem
}

@media (max-width: 768px) {
    .form-modal__form__description {
        margin-bottom: 3rem
    }
}

.form-modal__form__inputs {
    display: grid;
    grid-auto-rows: max-content;
    grid-gap: 1.5rem;
    gap: 1.5rem;
    margin-bottom: 1.5rem
}

@media (max-width: 768px) {
    .form-modal__form__inputs {
        gap: 1rem
    }
}

.form-modal__form__agreement {
    margin-bottom: 4.5rem
}

@media (max-width: 768px) {
    .form-modal__form__agreement {
        margin-bottom: 3rem
    }
}

.form-modal__form__submit-button {
    width: 100%;
    --button-height: 5rem
}

@media (max-width: 768px) {
    .form-modal__form__submit-button {
        --button-height: 4rem
    }
}

.media-wrapper {
    position: relative;
    z-index: 1;
    display: block;
    overflow: hidden
}

.media-wrapper {
    --clear-duration: 1s
}

.media-wrapper * {
    opacity: 0;
    width: 100%;
    height: 100%
}

.media-wrapper.loaded * {
    transition: opacity var(--clear-duration);
    opacity: 1
}

.media-wrapper[cover] * {
    -o-object-fit: cover;
    object-fit: cover
}

.media-wrapper[contain] * {
    -o-object-fit: contain;
    object-fit: contain
}

.media-wrapper[lazy-background]:before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: var(--lazy-background, var(--color-lazy));
    animation: media-loading 2s infinite ease-in-out;
    will-change: opacity
}

.media-wrapper[lazy-background].clear:before {
    content: normal;
    content: initial
}

@keyframes media-loading {
    50% {
        opacity: .6;
        opacity: var(--lazy-background-opacity, .6)
    }
}

.circle-button {
    width: 7rem;
    width: var(--circle-button-size, 7rem);
    height: 7rem;
    height: var(--circle-button-size, 7rem);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #307c3266;
    border-radius: 50%;
    transition-property: background-color;
    transition-duration: var(--duration-button)
}

@media (hover: hover) {
    .circle-button:hover .circle-button__icon-box {
        background-color: var(--color-grayscale-0)
    }
    .circle-button:hover .circle-button__icon-box:before {
        background-color: var(--color-primary-100)
    }
    .circle-button:hover .circle-button__icon {
        fill: #307c32
    }
}

@media (max-width: 768px) {
    .circle-button {
        width: 5rem;
        width: var(--circle-button-size, 5rem);
        height: 5rem;
        height: var(--circle-button-size, 5rem)
    }
}

.circle-button__icon-box {
    position: relative;
    z-index: 1;
    display: block;
    width: 79%;
    height: 79%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-primary-100);
    border: .3rem solid var(--color-primary-100);
    transition-property: background-color, border-color;
    transition-duration: var(--duration-button)
}

.circle-button__icon-box:before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background-color: var(--color-grayscale-0);
    transition-property: background-color;
    transition-duration: var(--duration-button)
}

.circle-button__icon {
    width: 100%;
    height: 100%;
    fill: var(--color-primary-100);
    transition-property: fill;
    transition-duration: var(--duration-button)
}

.media {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    background-color: var(--color-image-background);
    overflow: hidden
}

.media video,
.media img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

@media (max-width: 768px) {
    .media {
        height: 23.5rem
    }
}

.media__cover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: var(--color-image-background)
}

.media.playing .media__cover {
    display: none
}

.media__holder,
.media__holder iframe {
    width: 100%;
    height: 100%
}

.media__button {
    position: absolute
}

.media.playing .media__button {
    display: none
}

.video-modal__content {
    width: 124.4rem;
    height: 70rem
}

@media (max-width: 768px) {
    .video-modal__content {
        width: 100%;
        height: 21.5rem;
        max-height: 100%;
        border-radius: 0
    }
}

e-map-work-marker {
    display: none
}

.work-marker {
    --marker-size: 4rem;
    position: relative;
    width: 4rem;
    width: var(--marker-size);
    height: 4rem;
    height: var(--marker-size);
    transform: translate(-50%, -100%)
}

@media (max-width: 768px) {
    .work-marker {
        --marker-size: 3.5rem
    }
}

.work-marker__image {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    transition-property: opacity;
    transition-duration: .1s;
    transition-timing-function: ease
}

.active .work-marker__image {
    opacity: 0;
    pointer-events: none
}

.work-marker__popover {
    --x-offset: 2rem;
    display: block;
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 25rem;
    padding: 1.5rem;
    border-radius: 2rem;
    background-color: var(--color-grayscale-0);
    box-shadow: 0 0 1.5rem #00000026;
    transform: translate(-1rem, calc(var(--marker-size) / 2));
    transform: translate(calc(var(--x-offset) / 2 * -1), calc(var(--marker-size) / 2));
    opacity: 0;
    pointer-events: none;
    transition-property: opacity;
    transition-duration: .1s
}

.active .work-marker__popover {
    opacity: 1
}

@media (max-width: 768px) {
    .work-marker__popover {
        width: 17.5rem;
        padding: 1rem;
        border-radius: 1.5rem
    }
}

.work-marker__popover:after {
    content: "";
    position: absolute;
    top: 100%;
    left: var(--x-offset);
    width: 2.2rem;
    height: 2.2rem;
    clip-path: polygon(100% 0, 0 0, 50% 100%);
    transform: translateY(-50%);
    background-color: var(--color-grayscale-0)
}

@media (max-width: 768px) {
    .work-marker__popover:after {
        width: 1.8rem;
        height: 1.8rem
    }
}

.work-marker__popover__image {
    display: block;
    width: 100%;
    height: 14rem;
    margin-bottom: 1.5rem;
    border-radius: 1.2rem;
    -o-object-fit: cover;
    object-fit: cover;
    overflow: hidden
}

@media (max-width: 768px) {
    .work-marker__popover__image {
        height: 10rem;
        margin-bottom: 1rem
    }
}

.work-marker__popover__name {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 125%;
    margin-bottom: .8rem
}

@media (max-width: 768px) {
    .work-marker__popover__name {
        font-size: 1.2rem;
        margin-bottom: .7rem
    }
}

.work-marker__popover__description {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 125%;
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .work-marker__popover__description {
        font-size: 1rem
    }
}

e-map-zone {
    display: none
}

e-map {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%
}

.map-modal__content {
    position: relative;
    width: 124rem;
    height: 70rem;
    border-radius: var(--border-radius);
    background-color: var(--color-grayscale-0);
    overflow: hidden
}

.map-modal__content .modal-close-button {
    z-index: 1
}

@media (max-width: 768px) {
    .map-modal__content {
        width: 100%;
        height: var(--viewport-height);
        max-height: 100%;
        border-radius: 0
    }
}

.map-modal__map {
    display: block;
    width: 100%;
    height: 100%
}

.story__close-button {
    z-index: 2
}

.story__close-button .modal-close-button__icon {
    fill: var(--color-grayscale-0)
}

.story__content {
    width: 45rem;
    height: 80rem;
    max-height: 90%
}

@media (max-width: 768px) {
    .story__content {
        width: 100%;
        height: var(--viewport-height);
        max-height: 100%;
        border-radius: 0
    }
}

.page {
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*opacity:0;*/
    pointer-events: none
}

.page-loaded .page {
    opacity: 1;
    transition: opacity 1s;
    pointer-events: auto
}

.scroll {
    width: 100%;
    height: 100%;
    padding-top: var(--header-full-height);
    overflow-x: hidden;
    overflow-y: auto;
    overflow: hidden auto;
    scroll-behavior: smooth
}

.dragging .scroll {
    overflow: hidden
}

.advantage-card {
    width: 46.7rem;
    padding: 3rem;
    background-color: var(--color-grayscale-0);
    border-radius: var(--border-radius)
}

@media (max-width: 768px) {
    .advantage-card {
        width: 100%;
        padding: 2rem
    }
}

.advantage-card__icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    margin-bottom: 8rem;
    background-color: var(--color-primary-100);
    border-radius: 1rem
}

@media (max-width: 768px) {
    .advantage-card__icon-box {
        width: 3rem;
        height: 3rem;
        margin-bottom: 3rem;
        border-radius: .7rem
    }
}

.advantage-card__icon {
    width: 2.4rem;
    height: 2.4rem;
    fill: var(--color-grayscale-0)
}

@media (max-width: 768px) {
    .advantage-card__icon {
        width: 1.4rem;
        height: 1.4rem
    }
}

.advantage-card__title {
    margin-bottom: 2rem
}

@media (max-width: 768px) {
    .advantage-card__title {
        margin-bottom: 1.5rem
    }
}

.advantage-card__description {
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .advantage-card__description {
        text-wrap: balance
    }
}

.section {
    display: block
}

.section__heading {
    margin-bottom: 8rem
}

@media (max-width: 768px) {
    .section__heading {
        margin-bottom: 4rem
    }
}

.advantages__list {
    display: flex;
    gap: 5rem
}

@media (max-width: 768px) {
    .advantages__list {
        flex-direction: column;
        gap: 2rem
    }
}

.advantages__card {
    width: 100%;
    flex: 1
}

.slider-bullets {
    position: absolute;
    top: calc(100% + 5rem);
    left: 50%;
    display: none;
    align-items: center;
    gap: 1.5rem;
    transform: translate(-50%)
}

.slider-bullets button {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    background-color: var(--color-grayscale-300);
    border-radius: 50%;
    transition-property: background-color;
    transition-duration: var(--duration-button)
}

@media (max-width: 768px) {
    .slider-bullets button {
        width: 6px;
        height: 6px
    }
}

.slider-bullets button.current {
    background-color: var(--color-primary-100)
}

.has-overflow .slider-bullets,
.has-length .slider-bullets {
    display: flex
}

@media (max-width: 768px) {
    .slider-bullets {
        gap: 1rem
    }
    .slider-bullets[data-only-desktop=true] {
        display: none !important
    }
}

.slider-button {
    display: none;
    align-items: center;
    justify-content: center;
    width: 3.8rem;
    width: var(--slider-button-size, 3.8rem);
    height: 3.8rem;
    height: var(--slider-button-size, 3.8rem);
    background-color: var(--slider-button-color, var(--color-grayscale-0));
    border-radius: 50%;
    transition: opacity var(--duration-button);
    transition-property: opacity, background-color;
    transition-duration: var(--duration-button);
    transition-timing-function: ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: default
}

.slider-button:not([disabled]) {
    cursor: pointer
}

[data-white-background=true] .slider-button {
    background-color: var(--slider-button-color, var(--color-grayscale-200))
}

.has-overflow .slider-button,
.has-length .slider-button {
    display: inline-flex
}

@media (hover: hover) {
    .slider-button:not([disabled]):hover {
        background-color: var(--color-primary-100)
    }
}

@media (max-width: 1600px) {
    .slider-button {
        --offset: 2rem
    }
}

@media (max-width: 768px) {
    .slider-button[data-only-desktop=true] {
        display: none !important
    }
}

.slider-button[data-type=prev] {
    --step: -1;
    scale: -1
}

.slider-button[data-type=next] {
    --step: 1;
    scale: 1
}

.slider-button[data-center=true][data-type=prev],
.slider-button[data-center=true][data-type=next] {
    position: absolute;
    top: 50%;
    translate: 0% -50%
}

.slider-button[data-center=true][data-type=prev] {
    right: calc(100% + 5rem);
    right: calc(100% + var(--offset, 5rem))
}

.slider-button[data-center=true][data-type=next] {
    left: calc(100% + 5rem);
    left: calc(100% + var(--offset, 5rem))
}

.slider-button[disabled] {
    opacity: .3;
    opacity: var(--disabled-opacity, .3)
}

.slider-button__arrow {
    width: 53%;
    height: 53%;
    fill: var(--color-grayscale-600);
    transform: translate(10%);
    transition-property: fill;
    transition-duration: var(--duration-button);
    transition-timing-function: ease
}

@media (hover: hover) {
    .slider-button:not([disabled]):hover .slider-button__arrow {
        fill: var(--color-grayscale-0)
    }
}

.billboard {
    position: relative;
    width: 100%;
    height: 49.5rem;
    display: grid;
    border-radius: var(--border-radius)
}

@media (max-width: 768px) {
    .billboard {
        height: 23.5rem
    }
}

.billboard__image {
    grid-column: 1/1;
    grid-row: 1/1;
    width: 100%;
    height: 100%;
    transition-property: opacity;
    transition-duration: var(--duration-button);
    transition-timing-function: ease;
    border-radius: var(--border-radius);
    opacity: 0;
    pointer-events: none
}

.billboard__image.current {
    opacity: 1;
    pointer-events: auto
}

.billboard__buton {
    position: absolute;
    top: calc(50% - 1.9rem);
    top: calc(50% - var(--slider-button-size, 3.8rem) / 2);
    z-index: 1;
    display: none !important
}

.billboard.has-length .billboard__buton {
    display: inline-flex !important
}

@media (max-width: 768px) {
    .billboard__buton {
        top: calc(50% - 1.3rem);
        top: calc(50% - var(--slider-button-size, 2.6rem) / 2)
    }
}

@media (min-width: 769px) {
    .billboard[data-theme=inside] .billboard__buton_prev {
        left: 3rem;
        left: var(--offset, 3rem)
    }
    .billboard[data-theme=outside] .billboard__buton_prev {
        right: calc(100% + 5rem);
        right: calc(100% + var(--offset, 5rem))
    }
}

@media (max-width: 768px) {
    .billboard__buton_prev {
        left: 1.5rem
    }
}

@media (min-width: 769px) {
    .billboard[data-theme=inside] .billboard__buton_next {
        right: 3rem;
        right: var(--offset, 3rem)
    }
    .billboard[data-theme=outside] .billboard__buton_next {
        left: calc(100% + 5rem);
        left: calc(100% + var(--offset, 5rem))
    }
}

@media (max-width: 768px) {
    .billboard__buton_next {
        right: 1.5rem
    }
}

.billboard__bullets {
    position: absolute;
    left: 50%;
    top: auto;
    top: initial;
    z-index: 1;
    transform: translate(-50%);
    display: none !important
}

.billboard.has-length .billboard__bullets {
    display: flex !important
}

@media (min-width: 769px) {
    .billboard[data-theme=inside] .billboard__bullets {
        bottom: 3rem;
        bottom: var(--offset, 3rem)
    }
    .billboard[data-theme=outside] .billboard__bullets {
        top: calc(100% + 5rem);
        top: calc(100% + var(--offset, 5rem))
    }
}

@media (max-width: 768px) {
    .billboard__bullets {
        bottom: 1.5rem
    }
}

.billboard-section {
    padding: var(--section-vertical-padding-full) var(--screen-horisontal-padding);
    padding-bottom: 13.8rem
}

@media (max-width: 768px) {
    .billboard-section {
        padding-bottom: 4rem
    }
}

.billboard-section .billboard {
    height: 65rem
}

@media (max-width: 768px) {
    .billboard-section .billboard {
        height: 23.5rem
    }
}

.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 5.2rem var(--screen-horisontal-padding) 5rem var(--screen-horisontal-padding)
}

.breadcrumbs[data-large-padding=true] {
    padding-left: var(--screen-horisontal-padding-large);
    padding-right: var(--screen-horisontal-padding-large)
}

@media (max-width: 768px) {
    .breadcrumbs {
        padding-top: 2rem;
        padding-bottom: 4rem
    }
}

.breadcrumbs__link:not(:last-child) .breadcrumbs__link__name:after {
    content: "/";
    display: inline-block;
    margin: 0 1.5rem;
    color: inherit
}

@media (max-width: 768px) {
    .breadcrumbs__link:not(:last-child) .breadcrumbs__link__name:after {
        margin: 0 .7rem
    }
}

.breadcrumbs[data-theme=dark] .breadcrumbs__link__name {
    color: var(--color-grayscale-400)
}

.breadcrumbs[data-theme=light] .breadcrumbs__link__name {
    color: var(--color-grayscale-300)
}

.breadcrumbs[data-theme=dark] .breadcrumbs__link:last-child .breadcrumbs__link__name {
    color: var(--color-font)
}

.breadcrumbs[data-theme=light] .breadcrumbs__link:last-child .breadcrumbs__link__name {
    color: var(--color-grayscale-0)
}

@media (hover: hover) {
    .breadcrumbs__link__name__value {
        transition: color var(--duration-button)
    }
}

.breadcrumbs[data-theme=dark] .breadcrumbs__link:not(:last-child):hover .breadcrumbs__link__name__value {
    color: var(--color-font)
}

.breadcrumbs[data-theme=light] .breadcrumbs__link:not(:last-child):hover .breadcrumbs__link__name__value {
    color: var(--color-grayscale-0)
}

.had {
    width: 103.3rem
}

.had[data-margin=true] {
    margin-bottom: 8rem
}

@media (max-width: 768px) {
    .had[data-margin=true] {
        margin-bottom: 4rem
    }
}

@media (max-width: 768px) {
    .had {
        width: 100%
    }
}

.had__heading {
    margin-bottom: 3rem
}

@media (max-width: 768px) {
    .had__heading {
        margin-bottom: 2rem
    }
}

.had__description {
    color: var(--color-grayscale-400)
}

.company-intro__media {
    width: 100%;
    height: 65rem;
    border-radius: var(--border-radius)
}

@media (max-width: 768px) {
    .company-intro__media {
        height: 23.5rem
    }
}

.circle-data {
    position: relative;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

@media (min-width: 769px) {
    .circle-data {
        width: 46.7rem;
        height: 46.7rem
    }
    .circle-data[data-theme=asset] {
        width: 33.7rem;
        height: 33.7rem
    }
}

@media (max-width: 768px) {
    .circle-data {
        width: 26rem;
        height: 26rem
    }
}

.circle-data__border {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: var(--color-primary-100)
}

.circle-data__icon {
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 4rem;
    fill: var(--color-primary-100)
}

@media (min-width: 769px) {
    .circle-data[data-theme=asset] .circle-data__icon {
        margin-bottom: 1.6rem;
        width: 3rem;
        height: 3rem
    }
}

@media (max-width: 768px) {
    .circle-data__icon {
        margin-bottom: 2rem
    }
}

.circle-data__number {
    font-family: font-additional;
    font-weight: 700;
    line-height: 130%;
    font-size: 8.2rem;
    margin-bottom: .5rem;
    color: var(--color-primary-100)
}

.circle-data[data-number-size=small] .circle-data__number {
    font-size: 4.4rem;
    margin-bottom: 2.1rem
}

@media (max-width: 768px) {
    .circle-data__number {
        font-size: 4.8rem;
        margin-bottom: 0rem
    }
    .circle-data[data-number-size=small] .circle-data__number {
        font-size: 3.7rem;
        margin-bottom: .8rem
    }
}

.circle-data__title {
    max-width: 70%;
    text-align: center
}

.circles__list {
    display: flex;
    flex-wrap: wrap;
    gap: 4.9rem
}

@media (min-width: 769px) {
    .circles[data-theme=asset] .circles__list {
        gap: 5.06rem
    }
}

@media (max-width: 768px) {
    .circles__list {
        margin-left: calc(var(--screen-horisontal-padding) * -1);
        width: calc(100% + var(--screen-horisontal-padding) * 2);
        padding: 0 var(--screen-horisontal-padding);
        flex-wrap: nowrap;
        gap: 2rem;
        overflow-x: auto;
        overflow-y: hidden;
        overflow: auto hidden
    }
    .circles__list .circle-data {
        flex-shrink: 0
    }
}

@media (min-width: 769px) {
    .circles__list__circle {
        flex: 1
    }
}

.slider {
    --axis: x;
    --gap: 5rem;
    --overflow: hidden;
    --sectional: true;
    --auto-size: true;
    --mouse-drag: true;
    display: flex;
    gap: 5rem;
    gap: var(--gap);
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.slider[data-items-in-view="1"] {
    --sections-in-view: 1
}

.slider[data-items-in-view="2"] {
    --sections-in-view: 2
}

.slider[data-items-in-view="3"] {
    --sections-in-view: 3
}

.slider[data-items-in-view="4"] {
    --sections-in-view: 4
}

.slider[data-items-in-view="5"] {
    --sections-in-view: 5
}

@media (max-width: 768px) {
    .slider {
        --overflow: unset;
        --gap: 2rem
    }
    .slider[data-items-in-view="1"],
    .slider[data-items-in-view="2"],
    .slider[data-items-in-view="3"] {
        --sections-in-view: var(--slider-mobile-sections-in-view)
    }
    .slider[data-items-in-view="4"] {
        --sections-in-view: 1.6
    }
    .slider[data-items-in-view="5"] {
        --sections-in-view: 2.75
    }
}

.card-label {
    padding: .95rem 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    border-radius: .7rem;
    background-color: var(--color-grayscale-0);
    color: var(--color-primary-100)
}

@media (max-width: 768px) {
    .card-label {
        padding: .5rem 1rem;
        gap: .6rem
    }
}

.card-label__icon {
    width: 1.4rem;
    height: 1.4rem;
    fill: var(--color-primary-100)
}

.catalog-card {
    display: block;
    width: 46.7rem;
    width: var(--catalog-card-width, 46.7rem);
    border-radius: var(--border-radius)
}

@media (max-width: 768px) {
    .catalog-card {
        width: 26rem;
        width: var(--catalog-card-width, 26rem)
    }
}

.catalog-card[data-theme=category] {
    --catalog-card-width: 46.7rem;
    --catalog-card-image-height: 46.7rem
}

@media (max-width: 768px) {
    .catalog-card[data-theme=category] {
        --catalog-card-width: 26rem;
        --catalog-card-image-height: 26rem;
        --arrow-size: 4rem
    }
}

.catalog-card[data-theme=service] {
    --catalog-card-width: 33.7rem;
    --catalog-card-image-height: 33.7rem
}

@media (max-width: 768px) {
    .catalog-card[data-theme=service] {
        --catalog-card-width: 20rem;
        --catalog-card-image-height: 20rem
    }
}

.catalog-card[data-theme=media] {
    --catalog-card-width: 72.5rem;
    --catalog-card-image-height: 45rem
}

@media (max-width: 768px) {
    .catalog-card[data-theme=media] {
        --catalog-card-width: 100%;
        --catalog-card-image-height: 23.5rem
    }
}

.catalog-card__image-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 32.7rem;
    height: var(--catalog-card-image-height, 32.7rem);
    overflow: hidden;
    background-color: var( --catalog-card-image-color, var(--color-image-background));
    border-radius: var(--border-radius)
}

@media (max-width: 768px) {
    .catalog-card__image-box {
        height: 19.8rem;
        height: var(--catalog-card-image-height, 19.8rem)
    }
}

.catalog-card__play-button {
    position: absolute;
    z-index: 1
}

.catalog-card__image {
    width: 100%;
    height: 100%
}

@media (hover: hover) {
    .catalog-card__image {
        transition-property: transform;
        transition-duration: .4s;
        will-change: transform
    }
    .catalog-card:hover .catalog-card__image {
        transform: scale(1.015)
    }
}

.catalog-card__billboard {
    width: 100%;
    height: 100%
}

@media (max-width: 768px) {
    .catalog-card[data-theme=media] .catalog-card__billboard .billboard__buton_prev {
        left: 2rem
    }
}

@media (max-width: 768px) {
    .catalog-card[data-theme=media] .catalog-card__billboard .billboard__buton_next {
        right: 2rem
    }
}

.catalog-card__link {
    margin: -.5rem 0
}

.catalog-card__link[data-theme=only-arrow] {
    --arrow-size: 3.5rem
}

@media (max-width: 768px) {
    .catalog-card__link[data-theme=only-arrow] {
        --arrow-size: 3rem
    }
}

.catalog-card__content {
    display: block;
    padding: 2.1rem;
    padding-top: calc(2.1rem + var(--border-radius));
    margin-top: calc(var(--border-radius) * -1)
}

[data-white-background=true] .catalog-card__content {
    border-bottom: 1px solid var(--color-grayscale-300);
    border-left: 1px solid var(--color-grayscale-300);
    border-right: 1px solid var(--color-grayscale-300)
}

.catalog-card[data-theme=media] .catalog-card__content {
    padding: 3rem;
    padding-top: calc(3rem + var(--border-radius))
}

.catalog-card__content {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    background-color: var(--color-grayscale-0)
}

@media (max-width: 768px) {
    .catalog-card__content {
        padding: 1.5rem;
        padding-top: calc(1.5rem + var(--border-radius))
    }
    .catalog-card[data-theme=media] .catalog-card__content {
        padding: 2rem;
        padding-top: calc(2rem + var(--border-radius))
    }
}

.catalog-card__top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.catalog-card__name {
    display: block
}

.catalog-card__price {
    display: block;
    margin-top: .5rem;
    margin-bottom: .8rem;
    color: var(--color-primary-100)
}

@media (max-width: 768px) {
    .catalog-card__price {
        margin-bottom: .5rem
    }
}

.catalog-card[data-theme=category] .catalog-card__price {
    margin-top: 0
}

@media (max-width: 768px) {
    .catalog-card[data-theme=category] .catalog-card__price {
        margin-top: .5rem
    }
}

.catalog-card__labels {
    position: absolute;
    z-index: 1;
    top: 2rem;
    left: 2rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap
}

.catalog-card[data-theme=media] .catalog-card__labels {
    top: 3rem;
    left: 3rem
}

@media (max-width: 768px) {
    .catalog-card__labels {
        top: 1.5rem;
        left: 1.5rem
    }
    .catalog-card[data-theme=media] .catalog-card__labels {
        top: 2rem;
        left: 2rem
    }
}

.catalog-card__description {
    margin-top: 1.5rem;
    color: var(--color-grayscale-400);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.catalog-card[data-theme=media] .catalog-card__description {
    margin-top: 2rem
}

@media (max-width: 768px) {
    .catalog-card[data-theme=media] .catalog-card__description {
        margin-top: 1rem
    }
}

.catalog-card__more-link {
    margin-top: 4rem
}

@media (max-width: 768px) {
    .catalog-card__more-link {
        margin-top: 2rem
    }
}

.catalog-card__date {
    margin-top: 5.1rem;
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .catalog-card__date {
        margin-top: 2.5rem
    }
}

@media (max-width: 768px) {
    .team .slider {
        --sections-in-view: var(--slider-mobile-sections-in-view)
    }
}

.team__card {
    --catalog-card-image-height: 34.7rem
}

.team__card .catalog-card__description {
    margin-top: .5rem
}

@media (max-width: 768px) {
    .team__card {
        --catalog-card-image-height: 24rem
    }
    .team__card .catalog-card__description {
        margin-top: .3rem
    }
}

.video-section {
    padding: var(--section-vertical-padding-full) var(--screen-horisontal-padding)
}

.video-section__media {
    height: 65rem
}

@media (max-width: 768px) {
    .video-section__media {
        height: 23.5rem
    }
}

.accordion-2 {
    --duration: .3s;
    display: grid;
    grid-auto-rows: max-content;
    grid-gap: 2.5rem;
    gap: 2.5rem;
    width: 100%
}

@media (max-width: 768px) {
    .accordion-2 {
        width: 100%;
        gap: 2rem
    }
}

.accordion-2__item {
    width: 100%;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-grayscale-300);
    transition-property: border-color;
    transition-duration: var(--duration)
}

.accordion-2__item.opened {
    border-color: var(--color-primary-100)
}

.accordion-2__item__head {
    padding: 2.6rem 2.6rem 2.6rem 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-grayscale-300);
    transition-property: border-color;
    transition-duration: var(--duration)
}

@media (max-width: 768px) {
    .accordion-2__item__head {
        padding: 1.6rem 1.6rem 1.6rem 2rem
    }
}

.accordion-2__item__head__toggle {
    --circle-button-size: 5.4rem;
    background-color: #307c3233;
    transition-property: background-color;
    transition-duration: var(--duration)
}

@media (max-width: 768px) {
    .accordion-2__item__head__toggle {
        --circle-button-size: 3.8rem
    }
}

.accordion-2__item.opened .accordion-2__item__head__toggle {
    background-color: transparent
}

.accordion-2__item__head__toggle {
    flex-shrink: 0
}

.accordion-2__item__head__toggle .circle-button__icon-box:before {
    content: none
}

.accordion-2__item__head__toggle .circle-button__icon {
    fill: var(--color-grayscale-0);
    width: 2.2rem;
    height: 2.2rem;
    transition: transform var(--duration)
}

.accordion-2__item.opened .circle-button__icon {
    transform: rotate(45deg)
}

.accordion-2__item__body {
    transition: height var(--duration)
}

.accordion-2__item__content {
    padding: 4rem;
    max-width: 110rem
}

@media (max-width: 768px) {
    .accordion-2__item__content {
        max-width: 100%;
        padding: 2rem
    }
}

.two-sides {
    position: relative;
    display: flex;
    gap: 5rem;
    align-items: stretch
}

@media (max-width: 768px) {
    .two-sides {
        flex-direction: column;
        gap: 2rem
    }
}

.two-sides__left,
.two-sides__right {
    position: relative;
    width: 72.5rem;
    max-height: 100%;
    border-radius: var(--border-radius);
    overflow: hidden
}

.two-sides__left {
    height: auto;
    height: initial;
    height: var(--left-height, unset);
    padding: 5rem;
    padding: var(--left-padding, 5rem);
    background-color: var( --left-background, var(--background, var(--color-grayscale-0)))
}

@media (max-width: 1600px) {
    .two-sides__left {
        padding: 3rem;
        padding: var(--left-padding, 3rem)
    }
}

@media (max-width: 768px) {
    .two-sides__left {
        width: 100%;
        padding: 2rem;
        padding: var(--left-padding, 2rem)
    }
}

.two-sides__cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.two-sides__right {
    height: auto;
    height: initial;
    height: var(--right-height, unset);
    padding: 5rem;
    padding: var(--right-padding, 5rem);
    background-color: var( --right-background, var(--background, var(--color-grayscale-0)))
}

@media (max-width: 1600px) {
    .two-sides__right {
        padding: 3rem;
        padding: var(--right-padding, 3rem)
    }
}

@media (max-width: 768px) {
    .two-sides__right {
        width: 100%;
        padding: 2rem;
        padding: var(--right-padding, 2rem)
    }
}

.advice {
    --right-background: var(--color-grayscale-100);
    --left-background: var(--color-image-background)
}

@media (min-width: 769px) {
    .advice[data-size=small] .two-sides__left,
    .advice[data-size=small] .two-sides__right {
        width: 53.5rem
    }
}

@media (max-width: 768px) {
    .advice {
        --left-height: 23.5rem
    }
    .advice[data-reverse=true] {
        flex-direction: column-reverse
    }
}

.advice__label {
    margin-bottom: 4rem
}

.advice__heading {
    margin-bottom: 3rem
}

@media (min-width: 769px) {
    .advice[data-size=small] .advice__heading {
        margin-bottom: 2rem
    }
}

@media (max-width: 768px) {
    .advice__heading {
        margin-bottom: 2rem
    }
}

.advice__description {
    margin-bottom: 8rem
}

.advice[data-size=small] .advice__description {
    color: var(--color-grayscale-400)
}

@media (min-width: 769px) {
    .advice[data-size=small] .advice__description {
        margin-bottom: 5rem
    }
}

@media (max-width: 768px) {
    .advice__description {
        margin-bottom: 4rem;
        letter-spacing: -.11px
    }
}

@media (max-width: 768px) {
    .advice__link {
        display: none
    }
}

@media (min-width: 769px) {
    .advice__link_mobile {
        display: none
    }
}

.highlite {
    padding: 5rem;
    background-color: #307c3214;
    border-radius: var(--border-radius)
}

@media (max-width: 768px) {
    .highlite {
        padding: 3rem
    }
}

.highlite__title {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3rem
}

@media (max-width: 768px) {
    .highlite__title {
        gap: 2rem
    }
}

.highlite__title__icon {
    width: 2rem;
    height: 2rem;
    fill: none
}

@media (max-width: 768px) {
    .highlite__title__icon {
        width: 1.6rem;
        height: 1.6rem
    }
}

.highlite__title__value {
    color: var(--color-primary-100)
}

.highlite__description {
    display: block;
    white-space: pre-line
}

.article-chapter *:last-child {
    margin-bottom: 0
}

.article-chapter__heading {
    margin-bottom: var(--section-vertical-padding)
}

@media (max-width: 768px) {
    .article-chapter__heading {
        margin-bottom: 2rem
    }
}

.article-chapter__description {
    margin-bottom: var(--section-vertical-padding-full);
    color: var(--color-grayscale-400)
}

.article-chapter__advice {
    margin-bottom: var(--section-vertical-padding-full);
    background-color: transparent !important;
    background-color: initial !important
}

.article-chapter__highlite {
    margin-bottom: var(--section-vertical-padding-full)
}

.article-chapter__list {
    display: grid;
    grid-auto-rows: max-content;
    grid-gap: 6rem;
    gap: 6rem;
    margin-bottom: var(--section-vertical-padding-full)
}

@media (max-width: 768px) {
    .article-chapter__list {
        gap: 4rem
    }
}

.article-chapter__list__item__title {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    margin-bottom: 3rem;
    margin-left: .3em
}

@media (max-width: 768px) {
    .article-chapter__list__item__title {
        margin-bottom: 2rem
    }
}

.article-chapter__list__item__description {
    color: var(--color-grayscale-400)
}

.article-chapter__billboard {
    height: 49.5rem;
    margin-bottom: var(--section-vertical-padding-full)
}

@media (max-width: 768px) {
    .article-chapter__billboard {
        height: 23.5rem
    }
}

.article-chapter__video {
    height: 49.5rem;
    margin-bottom: var(--section-vertical-padding-full)
}

@media (max-width: 768px) {
    .article-chapter__video {
        height: 23.5rem
    }
}

.company-member {
    display: flex;
    align-items: center;
    gap: 4rem
}

.company-member[data-small=true] {
    gap: 3rem
}

@media (max-width: 768px) {
    .company-member {
        gap: 1.5rem
    }
    .company-member[data-small=true] {
        gap: 2rem
    }
}

.company-member__image {
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    border: .3rem solid var(--color-primary-100);
    overflow: hidden
}

.company-member[data-small=true] .company-member__image {
    width: 6rem;
    height: 6rem;
    border: medium none currentcolor;
    border: initial
}

@media (max-width: 768px) {
    .company-member__image {
        width: 7rem;
        height: 7rem
    }
    .company-member[data-small=true] .company-member__image {
        width: 6rem;
        height: 6rem
    }
}

.company-member__name {
    margin-bottom: .8rem;
    color: var(--color-primary-100)
}

.company-member[data-small=true] .company-member__name {
    margin-bottom: .2rem
}

@media (max-width: 768px) {
    .company-member[data-small=true] .company-member__name {
        margin-bottom: .5rem
    }
}

.chapters {
    position: relative;
    z-index: 3;
    height: -moz-max-content;
    height: max-content
}

.chapters__toggle {
    --type: toggle;
    height: 4.5rem;
    padding: 0 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    background-color: var(--color-grayscale-100);
    border-radius: 3rem;
    cursor: pointer
}

@media (max-width: 768px) {
    .chapters__toggle {
        gap: 1rem;
        height: 4rem;
        width: 100%
    }
}

.chapters__toggle__icon {
    width: 1.6rem;
    height: 1.6rem;
    fill: none;
    stroke: var(--color-font);
    transition-property: transform;
    transition-duration: var(--duration-button)
}

.chapters__toggle.opened .chapters__toggle__icon {
    transform: scaleY(-1)
}

.chapters__list {
    --click-outside: true;
    position: absolute;
    top: calc(100% + 3rem);
    left: 0;
    padding: 3rem;
    display: none;
    gap: 2rem;
    opacity: 0;
    width: 100%;
    min-width: -moz-max-content;
    min-width: max-content;
    border-radius: var(--border-radius);
    background-color: var(--color-grayscale-100);
    box-shadow: 0 .4rem 1rem #0000000d;
    transition-property: opacity;
    transition-duration: var(--duration-button);
    transition-timing-function: ease
}

.chapters__list.triggered {
    display: grid
}

.chapters__list.opened {
    opacity: 1
}

@media (max-width: 768px) {
    .chapters__list {
        top: calc(100% + 1.5rem);
        width: 100%;
        padding: 2rem;
        gap: 1.5rem
    }
}

.chapters__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2rem;
    color: var(--color-primary-100)
}

.chapters__link:before {
    content: "";
    width: 4px;
    height: 4px;
    flex-shrink: 0;
    background-color: var(--color-primary-100);
    border-radius: 50%;
    will-change: transform
}

.article-intro {
    padding-left: var(--screen-horisontal-padding-large);
    padding-right: var(--screen-horisontal-padding-large);
    padding-top: 1rem
}

@media (max-width: 768px) {
    .article-intro {
        padding-top: 0
    }
}

.article-intro__date {
    margin-bottom: 5.8rem;
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .article-intro__date {
        margin-bottom: 4rem
    }
}

.article-intro__heading {
    margin-bottom: 3rem
}

@media (max-width: 768px) {
    .article-intro__heading {
        margin-bottom: 2rem
    }
}

.article-intro__description {
    margin-bottom: 5rem;
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .article-intro__description {
        margin-bottom: 4rem
    }
}

.article-intro__image {
    width: 100%;
    height: 49.5rem;
    border-radius: var(--border-radius)
}

@media (max-width: 768px) {
    .article-intro__image {
        height: 23.5rem
    }
}

.article-intro__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5rem
}

@media (max-width: 768px) {
    .article-intro__bottom {
        margin-top: 4rem;
        flex-direction: column-reverse;
        align-items: initial
    }
}

.article-intro__author .company-member__name {
    color: var(--color-font)
}

.article-intro__author .company-member__position {
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .article-intro__author {
        margin-bottom: 5rem
    }
}

.story-card {
    width: 26rem;
    height: 30rem;
    padding: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4rem;
    border: .2rem solid var(--color-primary-100)
}

.story-card.visited {
    border-color: var(--color-grayscale-300)
}

@media (max-width: 1600px) {
    .story-card {
        width: 26rem;
        height: 28rem
    }
}

@media (max-width: 768px) {
    .story-card {
        width: 11rem;
        height: 13rem;
        padding: .3rem;
        border-radius: 2rem
    }
}

.story-card__image {
    width: 100%;
    height: 100%;
    border-radius: 3rem;
    background-color: var(--color-grayscale-300)
}

.story-card__image:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: linear-gradient(to bottom, #0000, #e6e6e6)
}

@media (max-width: 768px) {
    .story-card__image {
        border-radius: 1.5rem
    }
}

.story-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0;
    z-index: 1;
    text-wrap: balance;
    height: 3.8rem;
    margin: 3.3rem
}

.visited .story-card__title {
    opacity: .3
}

@media (max-width: 768px) {
    .story-card__title {
        -webkit-line-clamp: 3;
        height: 3.6rem;
        margin: 1.5rem
    }
}

@media (max-width: 768px) {
    .article-stories .slider {
        --sectional: true;
        --sections-in-view: 2.73
    }
}

.article-stories .story-card {
    width: 24rem;
    height: 28rem
}

@media (max-width: 1600px) {
    .article-stories .story-card {
        width: 24rem;
        height: 24rem
    }
}

@media (max-width: 768px) {
    .article-stories .story-card {
        width: 11rem;
        height: 13rem
    }
}

.article-suggestions__card {
    --catalog-card-image-height: 35rem
}

@media (max-width: 768px) {
    .article-suggestions__card {
        --catalog-card-image-height: 20rem
    }
}

.article-suggestions__card .catalog-card__labels {
    top: 3rem;
    left: 3rem
}

@media (max-width: 768px) {
    .article-suggestions__card .catalog-card__labels {
        top: 1.5rem;
        left: 1.5rem
    }
}

.article-suggestions__card .catalog-card__content {
    padding: 3rem;
    padding-top: calc(3rem + var(--border-radius))
}

@media (max-width: 768px) {
    .article-suggestions__card .catalog-card__content {
        padding: 1.5rem;
        padding-top: calc(1.5rem + var(--border-radius))
    }
}

.article-suggestions__card .catalog-card__description {
    color: var(--color-font);
    margin-top: 2rem
}

@media (max-width: 768px) {
    .article-suggestions__card .catalog-card__description {
        margin-top: 1.5rem
    }
}

.pagination {
    display: flex;
    align-items: center;
    gap: .4rem
}

.pagination__step-button {
    color: var(--color-primary-100);
    display: none
}

.pagination__step-button.active {
    display: block
}

.pagination__step-button_prev {
    margin-right: 1.2rem
}

.pagination__step-button_next {
    margin-left: 1.2rem
}

.pagination__set-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: .7rem;
    color: var(--color-grayscale-400)
}

.pagination__set-button.active {
    background-color: var(--color-primary-100);
    color: var(--color-grayscale-0)
}

.pagination__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    color: var(--color-grayscale-400)
}

.select {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.select__input-box {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    height: 4.5rem;
    padding: 0 2rem;
    border-radius: 3rem;
    background-color: var(--color-grayscale-100);
    overflow: hidden
}

.select__selected {
    pointer-events: none
}

.select__icon {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    fill: none;
    stroke: var(--color-grayscale-700)
}

.select.opened .select__icon {
    transform: scaleY(-1);
    stroke: var(--color-primary-100)
}

.select__options {
    position: absolute;
    right: 0;
    top: calc(100% + 1.5rem);
    z-index: 2;
    width: -moz-max-content;
    width: max-content;
    padding: 2rem;
    display: none;
    grid-auto-rows: max-content;
    gap: 1.5rem;
    border-radius: 1.5rem;
    background-color: var(--color-grayscale-0);
    box-shadow: 0 .4rem 1rem #0000000d
}

.select.opened .select__options {
    display: grid
}

@media (max-width: 768px) {
    .select__options {
        width: 100%;
        padding: 1.5rem;
        gap: 1rem
    }
}

.select__option {
    --padding: 1.6rem;
    position: relative;
    height: var(--input-height);
    text-align: left;
    padding: 0 1.6rem;
    padding: 0 var(--padding);
    border-radius: 1.2rem
}

.select__option.checked {
    color: var(--color-grayscale-0);
    background-color: var(--color-primary-100)
}

.select__option:not(:last-of-type):after {
    content: "";
    position: absolute;
    top: 100%;
    left: var(--padding);
    width: calc(100% - var(--padding) * 2);
    height: 1px;
    background-color: var(--color-grayscale-300)
}

.tab-button {
    flex-shrink: 0;
    height: 4.5rem;
    padding: 0 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3rem;
    color: var(--color-grayscale-400);
    background-color: --color-grayscale-0;
    background-color: var(--tab-button-background, --color-grayscale-0);
    transition-property: color, background-color;
    transition-duration: var(--duration-button);
    cursor: pointer
}

.tab-button[data-checked],
.tab-button.current {
    color: var(--color-grayscale-0);
    background-color: var(--color-primary-100)
}

@media (max-width: 768px) {
    .tab-button {
        height: 4rem;
        padding: 0 2rem
    }
}

.tab-buttons-2 {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem
}

@media (max-width: 768px) {
    .tab-buttons-2 {
        margin-left: calc(var(--screen-horisontal-padding) * -1);
        width: calc(100% + var(--screen-horisontal-padding) * 2);
        padding: 0 var(--screen-horisontal-padding);
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        overflow: auto hidden
    }
}

.articles {
    padding: var(--section-vertical-padding) var(--screen-horisontal-padding);
    padding-bottom: var(--section-vertical-padding-full);
    display: flex;
    flex-direction: column
}

.articles__list {
    margin-bottom: 8rem
}

@media (min-width: 769px) {
    .articles__list {
        --hibernate: true;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 5rem;
        gap: 5rem
    }
}

@media (max-width: 768px) {
    .articles__list {
        --axis: x;
        --gap: 2rem;
        --sectional: true;
        --auto-size: true;
        --sections-in-view: var(--slider-mobile-sections-in-view);
        --mouse-drag: true;
        display: flex;
        gap: 2rem;
        gap: var(--gap);
        margin-bottom: 4rem
    }
}

.articles__card {
    position: relative;
    z-index: 1;
    width: 100%
}

.articles__card .catalog-card__labels {
    top: 3rem;
    left: 3rem
}

@media (max-width: 768px) {
    .articles__card .catalog-card__labels {
        top: 1.5rem;
        left: 1.5rem
    }
}

.articles__card .catalog-card__content {
    padding: 3rem;
    padding-top: calc(3rem + var(--border-radius))
}

@media (max-width: 768px) {
    .articles__card .catalog-card__content {
        padding: 1.5rem;
        padding-top: calc(1.5rem + var(--border-radius))
    }
}

.articles__card .catalog-card__description {
    color: var(--color-font);
    margin-top: 2rem
}

@media (max-width: 768px) {
    .articles__card .catalog-card__description {
        margin-top: 1.5rem
    }
}

.articles__top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8rem
}

@media (max-width: 768px) {
    .articles__top {
        flex-direction: column;
        margin-bottom: 4rem
    }
}

.articles__tabs {
    max-width: 129.6rem;
    --tab-button-background: var(--color-grayscale-100)
}

@media (max-width: 768px) {
    .articles__tabs {
        max-width: none;
        max-width: initial;
        margin-bottom: 1.5rem
    }
}

.articles__select {
    width: 18.9rem
}

@media (max-width: 768px) {
    .articles__select {
        width: 100%
    }
}

.articles__more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: -moz-max-content;
    width: max-content;
    height: 5rem;
    margin: 0 auto;
    padding: 0 2.5rem;
    margin-bottom: 6rem;
    background-color: var(--color-grayscale-100);
    border: 1px solid var(--color-grayscale-100);
    border-radius: 3rem
}

@media (hover: hover) {
    .articles__more-button {
        transition-property: color, background-color, border-color;
        transition-duration: var(--duration-button);
        transition-timing-function: ease
    }
    .articles__more-button:hover {
        border-color: var(--color-primary-100);
        background-color: transparent;
        color: var(--color-primary-100)
    }
}

@media (max-width: 768px) {
    .articles__more-button {
        height: 4.5rem;
        margin-bottom: 3rem
    }
}

.articles__pagination {
    margin: 0 auto
}

.blog-intro {
    padding: 0 var(--screen-horisontal-padding);
    padding-bottom: var(--section-vertical-padding-full)
}

.blog-intro__heading {
    margin-bottom: 8rem
}

@media (max-width: 768px) {
    .blog-intro__heading {
        margin-bottom: 4rem
    }
}

.calculator-tab .checkbox__content {
    --icon-box-background-color: rgba(165, 165, 165, .4);
    --icon-box-color: var(--color-grayscale-400);
    --icon-box-border-color: transparent;
    --icon-size: 100%;
    --icon-box-size: 4.5rem;
    --icon-box-duration: 0s;
    --checkbox-size: 2.4rem;
    padding: 2.8rem 3rem;
    border-radius: var(--border-radius);
    border: .2rem solid var(--color-grayscale-300)
}

@media (max-width: 768px) {
    .calculator-tab .checkbox__content {
        --icon-box-size: 3rem;
        --checkbox-size: 1.5rem;
        padding: 1.5rem 2.3rem 1.5rem 1.5rem
    }
}

.calculator-tab .checkbox__input:checked~.checkbox__content {
    border-color: var(--color-primary-100);
    --icon-box-background-color: var(--color-primary-100);
    --icon-box-color: var(--color-grayscale-0)
}

.calculator-tab .checkbox__icon-box {
    border-color: var(--color-grayscale-300)
}

.calculator-tab .checkbox__input:checked~.checkbox__content .checkbox__icon-box {
    border-color: var(--color-primary-100)
}

.calculator-tab .checkbox__title-icon {
    margin-left: 1.6rem;
    margin-right: 1.4rem
}

@media (max-width: 768px) {
    .calculator-tab .checkbox__title-icon {
        margin-left: 0rem;
        margin-right: 0rem
    }
}

.calculator-tab .checkbox__title {
    color: var(--color-grayscale-300)
}

@media (max-width: 768px) {
    .calculator-tab .checkbox__title {
        margin-left: .5rem
    }
}

.calculator-tab .checkbox__input:checked~.checkbox__content .checkbox__title {
    color: var(--color-primary-100)
}

.explanation {
    display: block;
    color: var(--color-grayscale-400)
}

.explanation a,
.explanation button,
.explanation e-popover-button {
    color: var(--color-primary-100);
    -webkit-text-decoration: underline;
    text-decoration: underline;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
    text-underline-offset: .2em
}

@media (hover: hover) {
    .explanation a,
    .explanation button,
    .explanation e-popover-button {
        transition-property: color;
        transition-duration: var(--duration-button)
    }
    .explanation a:hover,
    .explanation button:hover,
    .explanation e-popover-button:hover {
        color: var(--color-grayscale-400)
    }
}

.arrow-hint {
    --pointer-size: 2.2rem;
    position: relative;
    width: 30rem;
    padding: 2rem;
    border-radius: var(--border-radius);
    background-color: var(--color-grayscale-0);
    pointer-events: none;
    box-shadow: ;
    filter: drop-shadow(0 .4rem 1rem rgba(34, 34, 34, .17))
}

@media (max-width: 768px) {
    .arrow-hint {
        --pointer-size: 1.7rem;
        width: 20rem;
        padding: 1.5rem
    }
}

.arrow-hint:before {
    content: "";
    position: absolute;
    top: -0;
    top: calc(var(--hover-extra-size, 0) * -2);
    left: 0;
    display: block;
    width: 100%;
    height: 0;
    height: calc(var(--hover-extra-size, 0) * 2)
}

.arrow-hint:after {
    content: "";
    position: absolute;
    width: var(--pointer-size);
    height: var(--pointer-size);
    background-color: var(--color-grayscale-0);
    border-radius: .5rem
}

.arrow-hint[data-arrow-position=top]:after {
    left: 50%;
    bottom: calc(100% - 1px);
    transform: translate(-50%, 50%) rotate(45deg)
}

.arrow-hint[data-arrow-position=bottom]:after {
    left: 50%;
    top: calc(100% - 1px);
    transform: translate(-50%, -50%) rotate(45deg)
}

.arrow-hint[data-arrow-position=left]:after {
    right: calc(100% - 1px);
    top: 50%;
    transform: translate(50%, -50%) rotate(45deg)
}

.arrow-hint[data-arrow-position=bottom-left]:after {
    left: 2.5rem;
    top: calc(100% - 1px);
    transform: translateY(-50%) rotate(45deg)
}

.arrow-hint[data-arrow-position=right]:after {
    left: calc(100% - 1px);
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg)
}

.info:hover .arrow-hint {
    opacity: 1;
    pointer-events: auto
}

.dots-button {
    display: flex;
    align-items: center;
    justify-content: center
}

.dots-button:not([data-flat=true]) {
    --gap: 1rem;
    width: 5.5rem;
    height: 4.5rem;
    height: var(--dots-button-height, 4.5rem);
    background-color: var(--color-grayscale-0);
    border-radius: 3rem
}

@media (max-width: 768px) {
    .dots-button:not([data-flat=true]) {
        height: 4rem;
        height: var(--dots-button-height, 4rem)
    }
}

.dots-button[data-flat=true] {
    --gap: 1rem;
    width: 2.3rem;
    height: 2.3rem
}

@media (max-width: 768px) {
    .dots-button[data-flat=true] {
        --gap: .7rem;
        width: 1.4rem;
        height: 1.4rem
    }
}

.dots-button__dot {
    --opened: 0;
    --shown: 1;
    position: absolute;
    width: 2rem;
    height: .383rem;
    border-radius: calc(50% + 0rem);
    border-radius: calc(50% * (1 - var(--opened)) + 1rem * var(--opened));
    background-color: var(--color-grayscale-600);
    transform: translate(calc((var(--gap)) * var(--dir) * (1 - 0))) rotate(calc(45deg * 0 * var(--dir))) scaleX(.2) scaleY(1);
    transform: translate(calc((var(--gap)) * var(--dir) * (1 - var(--opened)))) rotate(calc(45deg * var(--opened) * var(--dir))) scaleX(calc((.2 * var(--shown)) + .8 * var(--opened) * var(--shown))) scaleY(calc(1 - .4 * var(--opened)));
    transition-property: transform;
    transition-duration: var(--duration-button);
    transition-timing-function: ease
}

@media (max-width: 768px) {
    .dots-button__dot {
        width: 1.6rem;
        height: .3rem
    }
}

.dots-button.opened .dots-button__dot {
    --opened: 1
}

.dots-button__dot_1 {
    --dir: -1
}

.dots-button__dot_2 {
    --dir: 0
}

.dots-button.opened .dots-button__dot_2 {
    --shown: 0
}

.dots-button__dot_3 {
    --dir: 1
}

.manager-2 {
    display: inline-block;
    height: -moz-max-content;
    height: max-content;
    background-color: var(--color-grayscale-100);
    border-radius: var(--border-radius)
}

.manager-2__main {
    padding: 3rem;
    display: flex;
    align-items: center;
    gap: 1.5rem
}

@media (max-width: 768px) {
    .manager-2__main {
        padding: 1.5rem;
        gap: 1rem
    }
}

.manager-2__image {
    width: 13.4rem;
    height: 13.4rem;
    border-radius: 1.5rem
}

@media (max-width: 768px) {
    .manager-2__image {
        width: 8.5rem;
        height: 8.5rem;
        border-radius: 1.2rem
    }
}

.manager-2__right {
    flex: 1;
    padding: 2rem 4.2rem 3rem 2.5rem;
    border-radius: 1.5rem;
    background-color: var(--color-grayscale-0)
}

@media (max-width: 768px) {
    .manager-2__right {
        padding: 1rem 1.5rem 1.5rem;
        border-radius: 1.2rem
    }
}

.manager-2__online {
    color: var(--color-primary-100);
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem
}

.manager-2__online:before {
    content: "";
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background-color: var(--color-primary-100)
}

@media (max-width: 768px) {
    .manager-2__online:before {
        width: .6rem;
        height: .6rem
    }
}

@media (max-width: 768px) {
    .manager-2__online {
        gap: 1.2rem;
        margin-bottom: 1.2rem
    }
}

.manager-2__name {
    margin-bottom: .5rem
}

@media (max-width: 768px) {
    .manager-2__name {
        margin-bottom: 0rem
    }
}

.manager-2__position {
    color: var(--color-grayscale-400)
}

.manager-2__method {
    position: relative;
    z-index: 1;
    padding: 0 3rem;
    height: 5.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-grayscale-200);
    border-top: 1px solid var(--color-grayscale-300);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius)
}

@media (max-width: 768px) {
    .manager-2__method {
        padding: 0 1.5rem;
        height: 3.5rem
    }
}

.manager-2__method__variants {
    display: inline-block
}

.manager-2__method__variants__button {
    --type: toggle
}

.manager-2__method__variants__popover {
    --click-outside: true;
    position: absolute;
    top: calc(100% + 1.5rem);
    right: 0;
    z-index: -1;
    display: none;
    gap: 1.5rem;
    padding: 1.5rem;
    background-color: var(--color-grayscale-200);
    border-radius: var(--border-radius);
    box-shadow: .5rem .5rem 3rem #0000001a;
    opacity: 0;
    transition-property: opacity;
    transition-duration: var(--duration-button)
}

.manager-2__method__variants__popover.triggered {
    display: flex
}

.manager-2__method__variants__popover.opened {
    opacity: 1
}

@media (max-width: 768px) {
    .manager-2__method__variants__popover {
        gap: 1rem;
        padding: 1rem
    }
}

.manager-2__method__variant {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .7rem;
    background-color: var(--color-primary-100)
}

.manager-2__method__variant[data-type=tg] {
    background-color: #08c
}

.manager-2__method__variant[data-type=wa] {
    background-color: #25d366
}

.manager-2__method__variant[data-type=vk] {
    background-color: #4c75a3
}

@media (hover: hover) {
    .manager-2__method__variant {
        transition-property: opacity;
        transition-duration: var(--duration-button);
        transition-timing-function: ease
    }
    .manager-2__method__variant:hover {
        opacity: .7
    }
}

@media (max-width: 768px) {
    .manager-2__method__variant {
        width: 3rem;
        height: 3rem
    }
}

.manager-2__method__variant__icon {
    width: 60%;
    height: 60%;
    fill: var(--color-grayscale-0)
}

.progress {
    --color: var(--color-primary-100)
}

.progress.state-1 {
    --color: #f34848
}

.progress.state-2 {
    --color: #ff8833
}

.progress.state-3 {
    --color: #fcc900
}

.progress.state-4 {
    --color: var(--color-primary-100)
}

.progress__title {
    margin-bottom: 2.5rem
}

.progress__title__percent {
    color: var(--color);
    transition-property: color;
    transition-duration: var(--duration-button)
}

.progress__steps {
    display: flex;
    gap: 1.5rem
}

@media (max-width: 768px) {
    .progress__steps {
        gap: 1rem
    }
}

.progress__step {
    width: 100%;
    height: .4rem;
    border-radius: 100rem;
    transition-property: background-color;
    transition-duration: var(--duration-button);
    background-color: var(--color-grayscale-200)
}

.progress__step.active {
    background-color: var(--color)
}

@media (max-width: 768px) {
    .progress__step {
        height: .3rem
    }
}

.calculator {
    --padding: 5rem;
    --info-margin: 4rem;
    --content-padding: .5rem;
    --border-radius: 1.5rem;
    position: relative;
    width: 100%;
    height: 79.3rem;
    display: flex;
    background-color: var(--color-grayscale-0);
    border-radius: 1.5rem;
    border-radius: var(--border-radius)
}

@media (max-width: 768px) {
    .calculator {
        --padding: 2rem;
        --border-radius: 1.2rem;
        height: auto;
        height: initial;
        flex-direction: column-reverse
    }
}

.calculator__form {
    display: contents
}

.calculator__left {
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 51.7rem;
    padding: var(--padding)
}

@media (min-width: 769px) {
    .calculator__left {
        border-right: 1px solid var(--color-grayscale-300)
    }
}

@media (max-width: 768px) {
    .calculator__left {
        border-top: 1px solid var(--color-grayscale-300);
        width: 100%
    }
}

.calculator__help {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 5rem
}

@media (max-width: 768px) {
    .calculator__help {
        margin-bottom: 2rem;
        gap: 1rem
    }
}

.calculator__help__question {
    width: 2.2rem;
    height: 2.2rem;
    fill: var(--color-grayscale-600)
}

@media (max-width: 768px) {
    .calculator__help__question {
        width: 1.5rem;
        height: 1.5rem
    }
}

.calculator__left__grid {
    flex-basis: 100%;
    overflow: hidden
}

.calculator__manager-wrapper {
    position: relative;
    margin-top: auto
}

.calculator__manager-hint {
    width: 98%;
    margin-bottom: 4.2rem;
    padding: 1.2rem 1.6rem
}

.calculator__manager-hint.inactive {
    display: none
}

@media (max-width: 768px) {
    .calculator__manager-hint {
        padding: 1.3rem
    }
}

.calculator__manager {
    border: 1px solid var(--color-grayscale-300);
    background-color: transparent;
    background-color: initial;
    width: 100%
}

.calculator__manager .manager-2__main {
    padding: 2rem;
    gap: 4rem
}

@media (max-width: 768px) {
    .calculator__manager .manager-2__main {
        padding: 1rem;
        gap: 2rem
    }
}

.calculator__manager .manager-2__image {
    flex-shrink: 0;
    width: 12rem;
    height: 12rem
}

@media (max-width: 768px) {
    .calculator__manager .manager-2__image {
        width: 7.5rem;
        height: 7.5rem
    }
}

.calculator__manager .manager-2__right {
    padding: 0;
    background-color: transparent;
    background-color: initial
}

.calculator__manager .manager-2__method {
    padding: 0 2rem;
    background-color: transparent;
    background-color: initial
}

@media (max-width: 768px) {
    .calculator__manager .manager-2__method {
        padding: 0 1rem
    }
}

.calculator__right {
    flex-grow: 1;
    padding: var(--padding);
    display: flex;
    flex-direction: column
}

@media (min-width: 769px) {
    .calculator__right {
        margin-left: calc(var(--content-padding) * -1)
    }
}

.calculator__right__top {
    margin-bottom: 5rem
}

@media (min-width: 769px) {
    .calculator__right__top {
        padding-left: var(--content-padding)
    }
}

@media (max-width: 768px) {
    .calculator__right__top {
        margin-bottom: 3rem
    }
}

.calculator__picket {
    margin-bottom: 5rem
}

.calculator__picket .checkbox__title {
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .calculator__picket {
        margin-bottom: 3rem
    }
}

.calculator__step-name {
    margin-bottom: 3rem
}

.calculator__right__grid {
    flex-basis: 100%
}

.has-overflow .calculator__right__grid {
    overflow: hidden
}

.calculator__right__grid {
    margin-bottom: 3.2rem
}

@media (max-width: 768px) {
    .calculator__right__grid {
        margin-bottom: 2rem
    }
}

.calculator__nav {
    display: flex;
    align-items: center;
    gap: 1.5rem
}

@media (min-width: 769px) {
    .calculator__nav {
        margin-top: auto;
        margin-left: auto
    }
}

@media (max-width: 768px) {
    .calculator__nav {
        gap: 1rem
    }
}

.calculator__prev-button,
.calculator__next-button {
    height: 4.5rem;
    padding: 0 2rem;
    border-radius: 3rem
}

@media (max-width: 768px) {
    .calculator__prev-button,
    .calculator__next-button {
        height: 4rem;
        padding: 0 1.5rem
    }
}

.calculator__prev-button {
    border: 1px solid var(--color-grayscale-300);
    color: var(--color-grayscale-400);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: none
}

@media (hover: hover) {
    .calculator__prev-button {
        transition-property: opacity;
        transition-duration: var(--duration-button);
        transition-timing-function: ease
    }
    .calculator__prev-button:hover {
        opacity: .6
    }
}

.calculator:not([data-step="1"]) .calculator__prev-button {
    display: block
}

.calculator__next-button {
    color: var(--color-grayscale-0);
    background-color: var(--color-primary-100);
    border: 1px solid var(--color-primary-100);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media (hover: hover) {
    .calculator__next-button {
        transition-property: background-color, border-color, color;
        transition-duration: var(--duration-button);
        transition-timing-function: ease
    }
    .calculator__next-button:hover {
        background-color: transparent;
        color: var(--color-primary-100)
    }
}

.calculator__thank-you {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: var(--color-grayscale-0);
    border-radius: var(--border-radius)
}

.unactive.calculator__step-info,
.unactive.calculator__step {
    display: none
}

.calculator__step {
    height: 100%;
    padding-right: 6rem;
    display: flex;
    flex-direction: column
}

.has-overflow .calculator__step {
    overflow-x: hidden;
    overflow-y: auto;
    overflow: hidden auto
}

@media (min-width: 769px) {
    .calculator__step {
        padding-left: var(--content-padding)
    }
}

@media (max-width: 768px) {
    .calculator__step {
        padding-right: 2rem
    }
}

.calculator__step-info {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overflow: hidden auto
}

.radio-card {
    width: 24.1rem;
    position: relative;
    display: inline-block;
    cursor: pointer
}

@media (max-width: 768px) {
    .radio-card {
        width: 13rem
    }
}

.radio-card__image {
    width: 100%;
    height: 24.1rem;
    margin-bottom: 1.5rem;
    border-radius: var(--border-radius);
    background-color: var(--color-image-background);
    border: .2rem solid transparent;
    transition-property: border-color;
    transition-duration: var(--duration-button)
}

.radio-card__input:checked~.radio-card__content .radio-card__image {
    border-color: var(--color-primary-100)
}

@media (max-width: 768px) {
    .radio-card__image {
        height: 13rem;
        border-width: 1px
    }
}

.radio-card__name {
    display: block;
    color: var(--color-grayscale-400);
    transition-property: color;
    transition-duration: var(--duration-button)
}

.radio-card__input:checked~.radio-card__content .radio-card__name {
    color: var(--color-primary-100)
}

.radio-cards {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5rem;
    gap: 5rem
}

@media (max-width: 768px) {
    .radio-cards {
        max-height: 40rem;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem
    }
}

.radio-cards__card {
    width: 100%
}

.calculator-popover {
    grid-column: 1/1;
    grid-row: 1/1;
    --group: calculator-info;
    --close-rest-in-group: true;
    display: none;
    transition-property: opacity;
    transition-duration: var(--duration-button);
    transition-timing-function: ease;
    opacity: 0
}

.calculator-popover.triggered {
    display: block
}

.calculator-popover.opened {
    opacity: 1
}

.calculator-text-info {
    display: grid;
    grid-auto-rows: max-content;
    grid-gap: 2rem;
    gap: 2rem;
    margin-bottom: var(--info-margin)
}

.calculator-text-info__item {
    color: var(--color-grayscale-400)
}

.calculator-inputs {
    width: 100%
}

.calculator-inputs:not(:last-of-type) {
    margin-bottom: 5rem
}

@media (max-width: 768px) {
    .calculator-inputs:not(:last-of-type) {
        margin-bottom: 4rem
    }
}

@media (max-width: 768px) {
    .calculator-inputs e-input[type=date] {
        --gap: 0rem
    }
}

.calculator-inputs__list {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5rem;
    gap: 5rem
}

@media (max-width: 768px) {
    .calculator-inputs__list {
        grid-template-columns: 100%;
        gap: 3rem
    }
}

.calculator-inputs__title {
    margin-bottom: 5rem
}

@media (max-width: 768px) {
    .calculator-inputs__title {
        margin-bottom: 3rem
    }
}

.calculator-image-info__billboard {
    --offset: 2rem;
    width: 100%;
    height: 24rem;
    margin-bottom: 2rem;
    background-color: var(--color-image-background);
    border-radius: var(--border-radius)
}

@media (max-width: 768px) {
    .calculator-image-info__billboard {
        --offset: 1.5rem;
        height: 18rem;
        margin-bottom: 1.5rem
    }
}

.calculator-image-info__billboard .billboard__buton {
    --slider-button-size: 2.8rem
}

@media (max-width: 768px) {
    .calculator-image-info__billboard .billboard__buton {
        --slider-button-size: 2.4rem
    }
}

.calculator-image-info__desc {
    color: var(--color-grayscale-400)
}

.color-option {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden
}

.color-option__inner {
    --__unchecked-rgba-channel: var(--unchecked-color, 247);
    --__checked-rgba-channel: var(--checked-color, 255);
    --__rgba-channel: var(--__unchecked-rgba-channel);
    --__background: rgba( var(--__rgba-channel), var(--__rgba-channel), var(--__rgba-channel), 1)
}

.color-option.active .color-option__inner,
.color-option__input:checked~.color-option__inner {
    --__rgba-channel: var(--__checked-rgba-channel)
}

.color-option__inner {
    text-align: left
}

@media (min-width: 769px) {
    .color-option__inner {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 2rem;
        padding: 1.5rem;
        border-radius: var(--border-radius);
        background-color: var(--__background);
        transition-property: background-color;
        transition-duration: var(--duration-button)
    }
}

@media (max-width: 768px) {
    .color-option__inner {
        display: flex;
        align-items: center
    }
    .color-option:not([data-mobile-small=true]) .color-option__inner {
        width: 100%;
        gap: 1rem;
        padding: 1rem;
        border-radius: var(--border-radius);
        background-color: var(--__background);
        transition-property: background-color;
        transition-duration: var(--duration-button)
    }
}

.color-option__color {
    flex-shrink: 0;
    position: relative;
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%
}

.color-option__color:after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--color, var(--color-grayscale-100));
    border-radius: 50%
}

@media (max-width: 768px) {
    .color-option__color {
        width: 3rem;
        height: 3rem
    }
    .color-option[data-mobile-small=true] .color-option__color {
        width: 3.8rem;
        height: 3.8rem;
        border: 1px solid transparent
    }
    .color-option[data-mobile-small=true] .color-option__color:after {
        width: 79%;
        height: 79%
    }
    .color-option.active[data-mobile-small=true] .color-option__color,
    .color-option[data-mobile-small=true] .color-option__input:checked~.color-option__inner .color-option__color {
        border-color: var(--color-grayscale-300)
    }
}

.color-option__content {
    overflow: hidden;
    width: 100%
}

@media (max-width: 768px) {
    .color-option[data-mobile-small=true] .color-option__content {
        display: none
    }
}

.color-option__id {
    display: block;
    margin-bottom: .3rem
}

@media (max-width: 768px) {
    .color-option__id {
        margin-bottom: 0
    }
}

.color-option__name {
    position: relative;
    width: 100%
}

@media (max-width: 768px) {
    .color-option__name:after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        width: 3rem;
        height: 100%;
        background: linear-gradient(to right, rgba(var(--__rgba-channel), var(--__rgba-channel), var(--__rgba-channel), 0), rgba(var(--__rgba-channel), var(--__rgba-channel), var(--__rgba-channel), 1))
    }
}

.color-option__name__value {
    color: var(--color-grayscale-400);
    display: block;
    width: -moz-max-content;
    width: max-content
}

.calculator__color-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2.5rem 5rem;
    gap: 2.5rem 5rem
}

@media (max-width: 768px) {
    .calculator__color-options {
        gap: 1.5rem;
        max-height: 22.9rem
    }
}

.calculator__color-option {
    --unchecked-color: 255;
    --checked-color: 250
}

.calculator-color-info {
    margin-bottom: var(--info-margin)
}

.calculator-color-info__image {
    width: 100%;
    height: 24rem;
    margin-bottom: 2rem;
    /*background-color: var(--color-image-background);*/
    border-radius: var(--border-radius);
    -o-object-fit: contain;
    object-fit: contain
}

@media (max-width: 768px) {
    .calculator-color-info__image {
        height: 18rem;
        margin-bottom: 1.5rem
    }
}

.calculator-color-info__description {
    color: var(--color-grayscale-400)
}

.calculator-checkboxes {
    display: flex;
    gap: 5rem;
    margin-bottom: 5rem
}

@media (max-width: 768px) {
    .calculator-checkboxes {
        flex-direction: column;
        gap: 2rem;
        margin-bottom: 4rem
    }
}

.info {
    --icon-size: var(--info-icon-size, 2.4rem);
    position: relative;
    display: inline-block
}

@media (max-width: 768px) {
    .info {
        --icon-size: var(--info-icon-size, 1.3rem)
    }
}

.info__icon {
    width: var(--icon-size);
    height: var(--icon-size);
    fill: var(--color-primary-100)
}

.info__explanation {
    position: absolute;
    top: calc(100% + var(--icon-size) / 2 + var(--pointer-size) / 2);
    left: 50%;
    transform: translate(-50%);
    opacity: 0;
    transition-property: opacity;
    transition-duration: var(--duration-button)
}

.info:hover .info__explanation {
    opacity: 1;
    pointer-events: auto
}

.price-range {
    width: 62.5rem;
    padding: 3rem;
    border-radius: var(--border-radius);
    background-color: var(--color-grayscale-0)
}

@media (max-width: 768px) {
    .price-range {
        width: 100%;
        padding: 2rem
    }
}

.price-range__title {
    margin-bottom: 1rem;
    color: var(--color-grayscale-400)
}

.price-range__price {
    margin-bottom: 2.3rem
}

@media (max-width: 768px) {
    .price-range__price {
        margin-bottom: 2rem;
        display: inline-flex;
        align-items: center;
        gap: 1rem
    }
}

.price-range__price__value {
    color: var(--color-primary-100)
}

.price-range__info {
    z-index: 2
}

@media (min-width: 769px) {
    .price-range__info {
        display: none
    }
}

.price-range__graph {
    --padding-left: 1rem;
    position: relative;
    width: 96%;
    height: 24.9rem;
    margin-bottom: 4.8rem;
    overflow: hidden
}

@media (max-width: 768px) {
    .price-range__graph {
        --padding-left: .55rem;
        width: 100%;
        height: 16rem;
        margin-bottom: 2rem
    }
}

.price-range__graph__rows {
    position: absolute;
    top: 2.5rem;
    left: var(--padding-left);
    width: calc(100% - var(--padding-left) * 2);
    height: 17.4rem;
    display: flex;
    flex-direction: column-reverse;
    gap: 3rem
}

@media (max-width: 768px) {
    .price-range__graph__rows {
        top: 1.56rem;
        height: 11.426rem;
        gap: 1.513rem
    }
}

.price-range__graph__row {
    width: 100%;
    width: calc(100% * var(--scale, 1));
    height: 3.8rem;
    border-radius: 1rem;
    transform-origin: left
}

@media (max-width: 768px) {
    .price-range__graph__row {
        height: 2.8rem;
        border-radius: .7rem
    }
}

.price-range__graph__row_start {
    background-color: var(--color-grayscale-300)
}

.price-range__graph__row_average {
    background-color: var(--color-primary-100)
}

.price-range__graph__row_end {
    background-color: #858585
}

.price-range__graph__cols {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-right: 1px solid #e6e6e6
}

.price-range__graph__col {
    flex-shrink: 0;
    width: 13.5rem;
    height: 100%;
    padding-left: var(--padding-left);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-left: 1px solid #e6e6e6;
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .price-range__graph__col {
        width: 7.348rem;
        padding-bottom: .3rem
    }
}

.price-range__footnotes {
    display: flex;
    align-items: center;
    gap: 3rem
}

.price-range__footnote {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem
}

.price-range__footnote:before {
    content: "";
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: .2rem;
    border-radius: .5rem
}

@media (max-width: 768px) {
    .price-range__footnote:before {
        width: 1rem;
        height: 1rem;
        border-radius: .3rem
    }
}

@media (max-width: 768px) {
    .price-range__footnote {
        gap: .5rem
    }
}

.price-range__footnote_start:before {
    background-color: var(--color-grayscale-300)
}

.price-range__footnote_average:before {
    background-color: var(--color-primary-100)
}

.price-range__footnote_end:before {
    background-color: #858585
}

.calculator__price-range {
    width: 100%;
    padding: 2rem;
    background-color: var(--color-grayscale-100)
}

@media (max-width: 768px) {
    .calculator__price-range {
        padding: 1.5rem
    }
}

.calculator__price-range .price-range__title {
    font-family: font-primary;
    font-weight: 400;
    line-height: 125%;
    font-size: 1.2rem;
    margin-bottom: 1rem
}

.calculator__price-range .price-range__price {
    font-family: font-primary;
    font-weight: 500;
    line-height: 110%;
    font-size: 2.8rem;
    margin-bottom: 2rem
}

@media (max-width: 768px) {
    .calculator__price-range .price-range__price {
        font-size: 2.4rem
    }
}

.calculator__price-range .price-range__graph {
    height: 20.464rem;
    margin-bottom: 2rem
}

.calculator__price-range .price-range__graph__cols {
    font-family: font-primary;
    font-weight: 400;
    line-height: 120%;
    font-size: .8rem
}

.calculator__price-range .price-range__graph__col {
    width: 9.398rem;
    padding-bottom: .25rem
}

@media (max-width: 768px) {
    .calculator__price-range .price-range__graph__col {
        width: 7.348rem
    }
}

.calculator__price-range .price-range__graph__rows {
    gap: 1.935rem;
    top: 1.996rem;
    height: 14.6rem
}

.calculator__price-range .price-range__graph__row {
    height: 3.5rem
}

@media (max-width: 768px) {
    .calculator__price-range .price-range__graph__row {
        height: 2.8rem
    }
}

.calculators__top {
    padding: var(--section-vertical-padding-full) var(--screen-horisontal-padding);
    padding-top: 0
}

.calculators__heading {
    margin-bottom: 8rem
}

@media (max-width: 768px) {
    .calculators__heading {
        margin-bottom: 4rem
    }
}

@media (max-width: 768px) {
    .calculators__tabs {
        margin-left: calc(var(--screen-horisontal-padding) * -1);
        width: calc(100% + var(--screen-horisontal-padding) * 2);
        padding: 0 var(--screen-horisontal-padding);
        overflow-x: auto;
        overflow-y: hidden;
        overflow: auto hidden
    }
}

.calculators__tabs__inner {
    display: flex;
    justify-content: space-between;
    gap: 4.9rem
}

.calculators__tabs__inner .checkbox__content {
    width: 100%
}

@media (max-width: 768px) {
    .calculators__tabs__inner {
        width: -moz-max-content;
        width: max-content;
        gap: 2rem
    }
}

.calculators__tab {
    width: 100%
}

@media (max-width: 768px) {
    .calculators__tab {
        width: -moz-max-content;
        width: max-content
    }
}

.calculators__list {
    padding: var(--section-vertical-padding-full) var(--screen-horisontal-padding)
}

.calculators__calculator {
    display: none
}

.calculators__calculator.active {
    display: flex
}

.vkontakte-link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    height: 4.5rem;
    padding: 0rem 2rem 0rem 1.5rem;
    border-radius: 3rem;
    background-color: #07f
}

@media (hover: hover) {
    .vkontakte-link {
        will-change: opacity;
        transition-property: opacity;
        transition-duration: var(--duration-button)
    }
    .vkontakte-link:hover {
        opacity: .8
    }
}

@media (max-width: 768px) {
    .vkontakte-link {
        gap: .9rem;
        height: 4rem;
        padding: 0rem 2rem 0rem 1rem
    }
}

.vkontakte-link__icon {
    width: 2.6rem;
    height: 2.6rem;
    fill: var(--color-grayscale-0)
}

@media (max-width: 768px) {
    .vkontakte-link__icon {
        width: 2.3rem;
        height: 2.3rem
    }
}

.vkontakte-link__name {
    line-height: 1 !important;
    color: var(--color-grayscale-0)
}

.vkontakte {
    padding: var(--section-vertical-padding-full) var(--screen-horisontal-padding)
}

@media (max-width: 768px) {
    .vkontakte {
        --left-height: 23.5rem;
        flex-direction: column-reverse
    }
}

.vkontakte__heading {
    margin-bottom: 3rem
}

@media (max-width: 768px) {
    .vkontakte__heading {
        margin-bottom: 2rem
    }
}

.vkontakte__description {
    color: var(--color-grayscale-400);
    margin-bottom: 5rem
}

@media (max-width: 768px) {
    .vkontakte__description {
        margin-bottom: 4rem
    }
}

.video-review-card.video-review-card {
    --min-height: 38.7rem;
    width: 72.5rem;
    min-height: 38.7rem;
    display: flex;
    overflow: hidden;
    border-radius: var(--border-radius);
    background-color: var(--color-grayscale-0)
}

@media (max-width: 768px) {
    .video-review-card {
        width: 26rem;
        min-height: 0;
        min-height: initial;
        flex-direction: column-reverse
    }
}

.video-review-card__content {
    display: flex;
    flex-direction: column;
    padding: 3rem;
    border: 1px solid var(--color-grayscale-300)
}

@media (min-width: 769px) {
    .video-review-card__content {
        border-right: 0;
        margin-right: calc(var(--border-radius) * -1);
        border-top-left-radius: 2rem;
        border-bottom-left-radius: 2rem
    }
}

@media (max-width: 768px) {
    .video-review-card__content {
        margin-top: -1.5rem;
        padding: 3rem 1.5rem 1.5rem;
        border-bottom-left-radius: 1.5rem;
        border-bottom-right-radius: 1.5rem
    }
}

.video-review-card__name {
    margin-bottom: 1.9rem;
    color: var(--color-primary-100)
}

@media (max-width: 768px) {
    .video-review-card__name {
        margin-bottom: 1.3rem
    }
}

.video-review-card__description {
    margin-bottom: 3rem
}

.video-review-card__stats {
    margin-top: auto;
    display: grid;
    grid-gap: .6rem;
    gap: .6rem
}

@media (max-width: 768px) {
    .video-review-card__stats {
        gap: .3rem
    }
}

.video-review-card__stat {
    display: inline-flex;
    gap: 1ch
}

.video-review-card__stat__title {
    color: var(--color-grayscale-400)
}

.video-review-card__image-box {
    flex-shrink: 0;
    width: 33.7rem;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius)
}

@media (max-width: 768px) {
    .video-review-card__image-box {
        width: 100%;
        height: 30rem;
        min-height: 0;
        min-height: initial;
        border-radius: 1.5rem
    }
}

.video-review-card__image {
    width: 100%;
    height: 100%
}

.video-review-card__play-button {
    position: absolute;
    z-index: 1
}

.social-link-button {
    height: 4.5rem;
    padding: 0 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    border-radius: 3rem
}

@media (hover: hover) {
    .social-link-button {
        transition-property: opacity;
        transition-duration: var(--duration-button)
    }
    .social-link-button:hover {
        opacity: .8
    }
}

.social-link-button[data-type=wa] {
    background-color: #17c056
}

.social-link-button[data-type=tg] {
    background-color: #229ed9
}

@media (max-width: 768px) {
    .social-link-button {
        height: 4rem
    }
}

.social-link-button__icon {
    width: 2.5rem;
    height: 2.5rem;
    fill: var(--color-grayscale-0);
    will-change: transform
}

@media (max-width: 768px) {
    .social-link-button__icon {
        width: 1.8rem;
        height: 1.8rem
    }
}

.social-link-button__name {
    color: var(--color-grayscale-0);
    line-height: 1 !important
}

.connect {
    padding: var(--section-vertical-padding-full) var(--screen-horisontal-padding);
    --right-padding: 0
}

@media (min-width: 769px) {
    .connect[data-theme=questions] {
        --left-height: 49.6rem
    }
}

@media (max-width: 768px) {
    .connect {
        --left-height: max-content;
        --right-height: 23.5rem
    }
}

.connect__content {
    height: 100%;
    display: flex;
    flex-direction: column
}

.connect__heading {
    margin-bottom: 3rem
}

@media (max-width: 768px) {
    .connect__heading {
        margin-bottom: 2rem
    }
}

.connect__description {
    width: 46.6rem;
    margin-bottom: 5rem;
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .connect__description {
        width: 100%;
        margin-bottom: 4rem
    }
}

.connect__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 11rem
}

@media (min-width: 769px) {
    .connect[data-theme=questions] .connect__socials {
        margin-bottom: 8rem
    }
}

@media (max-width: 768px) {
    .connect__socials {
        margin-bottom: 4rem;
        gap: 1rem
    }
}

.connect__districts,
.connect__member {
    margin-top: auto
}

.connect__districts__title {
    margin-bottom: 2.3rem
}

@media (max-width: 768px) {
    .connect__districts__title {
        margin-bottom: 1.5rem
    }
}

.connect__districts__list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.3rem
}

@media (max-width: 768px) {
    .connect__districts__list {
        gap: 1rem
    }
}

.connect__district {
    padding: .85rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--color-grayscale-100);
    border-radius: .7rem
}

@media (max-width: 768px) {
    .connect__district {
        padding: .5rem 1rem;
        gap: .6rem
    }
}

.connect__district__icon {
    width: 1.4rem;
    height: 1.4rem;
    fill: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .connect__district__icon {
        width: 1.1rem;
        height: 1.1rem
    }
}

.connect__district__name {
    color: var(--color-grayscale-500)
}

.stage-card {
    width: 46.7rem;
    padding: 3rem;
    border-radius: var(--border-radius);
    background-color: var(--color-grayscale-0)
}

@media (max-width: 768px) {
    .stage-card {
        width: 26rem;
        padding: 1.5rem
    }
}

.stage-card__title {
    margin-bottom: 2rem
}

@media (max-width: 768px) {
    .stage-card__title {
        margin-bottom: 1rem
    }
}

.stage-card__description {
    margin-bottom: 3rem;
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .stage-card__description {
        margin-bottom: 2rem
    }
}

.stage-card__time {
    display: inline-block;
    margin-bottom: 5rem;
    padding: 1rem 1.5rem;
    background-color: var(--color-grayscale-100);
    color: var(--color-primary-100);
    border-radius: .7rem
}

@media (max-width: 768px) {
    .stage-card__time {
        margin-bottom: 3rem
    }
}

.stage-card__includes__title {
    margin-bottom: 3rem
}

@media (max-width: 768px) {
    .stage-card__includes__title {
        margin-bottom: 1.5rem
    }
}

.stage-card__includes__list {
    display: grid;
    grid-auto-rows: max-content;
    grid-gap: 1rem;
    gap: 1rem
}

@media (max-width: 768px) {
    .stage-card__includes__list {
        gap: .7rem
    }
}

.stage-card__includes__list__item {
    display: inline-flex;
    align-items: center;
    color: var(--color-grayscale-400)
}

.stage-card__includes__list__item:before {
    content: "";
    width: .6rem;
    height: .6rem;
    margin-right: 1.5rem;
    background-color: var(--color-primary-100);
    border-radius: 50%
}

@media (max-width: 768px) {
    .stage-card__includes__list__item:before {
        width: .4rem;
        height: .4rem;
        margin-right: 1rem
    }
}

.product-images {
    display: block;
    max-width: 72.5rem
}

.product-images__current {
    width: 100%;
    height: 72.5rem;
    margin-bottom: 3rem;
    border-radius: var(--border-radius)
}

@media (max-width: 768px) {
    .product-images__current {
        height: 33.5rem;
        margin-bottom: 1.5rem
    }
}

.product-images__slider {
    --gap: 3.1rem;
    --axis: x;
    --auto-size: true;
    --sections-in-view: 5;
    --overflow: hidden;
    --sectional: true;
    --mouse-drag: true
}

@media (max-width: 768px) {
    .product-images__slider {
        --gap: 1.5rem;
        --sections-in-view: 4
    }
}

.product-images__slider__image {
    width: 12rem;
    height: 12rem;
    border-radius: var(--border-radius);
    background-color: var(--color-grayscale-100);
    border: 1px solid transparent;
    transition-property: opacity;
    transition-duration: var(--duration-button);
    transition-timing-function: ease
}

.product-images__slider__image.current {
    opacity: .5
}

@media (max-width: 768px) {
    .product-images__slider__image {
        width: 7rem;
        height: 7rem
    }
}

.product-images__button {
    --disabled-opacity: 1;
    position: absolute;
    z-index: 2;
    bottom: 49.4rem
}

@media (max-width: 768px) {
    .product-images__button {
        --slider-button-size: 2.6rem;
        bottom: 24rem
    }
}

.product-images__button_prev {
    left: 3rem
}

@media (max-width: 768px) {
    .product-images__button_prev {
        left: 1.5rem
    }
}

.product-images__button_next {
    right: 3rem
}

@media (max-width: 768px) {
    .product-images__button_next {
        right: 1.5rem
    }
}

.product-images__bullets {
    z-index: 2;
    top: auto;
    top: initial;
    bottom: 18rem
}

@media (max-width: 768px) {
    .product-images__bullets {
        bottom: 10rem
    }
}

.product-card {
    --left-background: transparent;
    --right-background: transparent;
    --left-padding: 0rem;
    --right-padding: 2.25rem 0rem 0rem 0rem;
    padding: var(--section-vertical-padding) var(--screen-horisontal-padding);
    background-color: var(--color-grayscale-0)
}

@media (max-width: 768px) {
    .product-card {
        --right-padding: 2rem 0rem 0rem 0rem
    }
}

.product-card__heading {
    margin-bottom: 2rem
}

@media (max-width: 768px) {
    .product-card__heading {
        margin-bottom: 1rem
    }
}

.product-card__price-line {
    margin-bottom: 5rem
}

@media (max-width: 768px) {
    .product-card__price-line {
        display: flex;
        align-items: center;
        gap: 2rem;
        flex-wrap: wrap;
        margin-bottom: 3rem
    }
}

.product-card__price {
    color: var(--color-primary-100)
}

@media (min-width: 769px) {
    .product-card__price {
        margin-bottom: 1rem
    }
}

.product-card__installment {
    color: var(--color-grayscale-400)
}

.product-card__order-button {
    margin-bottom: 6rem
}

@media (max-width: 768px) {
    .product-card__order-button {
        margin-bottom: 4rem
    }
}

.product-card__description {
    margin-bottom: 4rem;
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .product-card__description {
        margin-bottom: 4rem
    }
}

.product-card__parameters {
    margin-bottom: 2.8rem
}

@media (max-width: 768px) {
    .product-card__parameters {
        margin-bottom: 2rem
    }
}

.product-card__parameter {
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-grayscale-300)
}

.product-card__parameter__title {
    color: var(--color-grayscale-400)
}

.product-card__parameter__value {
    text-align: right;
    width: 30rem;
    color: var(--color-grayscale-600)
}

@media (max-width: 768px) {
    .product-card__parameter__value {
        text-align: left;
        width: 15.5rem
    }
}

.characteristics {
    width: 100%
}

.characteristics__item {
    display: flex;
    justify-content: space-between;
    text-wrap: balance;
    padding: 1.4rem 3rem
}

.characteristics__item:nth-child(odd) {
    background-color: #fcfcfc
}

.characteristics__item:nth-child(2n) {
    background-color: #f4f4f4
}

@media (max-width: 768px) {
    .characteristics__item {
        padding: 1.1rem 1.503rem
    }
}

@media (max-width: 768px) {
    .characteristics__item__title {
        max-width: 16.5rem
    }
}

.characteristics__item__value {
    text-align: right
}

@media (max-width: 768px) {
    .characteristics__item__value {
        text-align: left;
        max-width: 9.6rem
    }
}

.product-info {
    display: block;
    padding: var(--section-vertical-padding-full) var(--screen-horisontal-padding);
    padding-top: 5.5rem;
    background-color: var(--color-grayscale-0)
}

@media (min-width: 769px) {
    .product-info__category-names {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 1rem;
        gap: 1rem;
        margin-bottom: 8.5rem
    }
}

@media (max-width: 768px) {
    .product-info__category-names {
        margin-left: calc(var(--screen-horisontal-padding) * -1);
        width: calc(100% + var(--screen-horisontal-padding) * 2);
        padding: 0 var(--screen-horisontal-padding);
        display: flex;
        gap: 1rem;
        margin-bottom: 4rem;
        overflow-x: auto;
        overflow-y: hidden;
        overflow: auto hidden
    }
}

.product-info__category-button {
    position: relative;
    z-index: 1;
    --tab-button-background: var(--color-grayscale-100)
}

.product-info__categories {
    display: grid
}

.product-info__category {
    grid-column: 1/1;
    grid-row: 1/1;
    display: none
}

.product-info__category.current {
    display: block
}

.product-info__category__title {
    margin-bottom: 8rem
}

@media (max-width: 768px) {
    .product-info__category__title {
        margin-bottom: 4rem
    }
}

.product-info__category__content {
    display: flex;
    justify-content: space-between;
    gap: 5rem
}

@media (max-width: 768px) {
    .product-info__category__content {
        flex-direction: column;
        gap: 4rem
    }
}

.product-info__manager {
    flex-shrink: 0
}

.product-info__category__text {
    white-space: pre-line;
    color: var(--color-grayscale-400)
}

.completed-works__map {
    display: block;
    height: 56.2rem;
    overflow: hidden;
    border-radius: var(--border-radius);
    margin-top: calc(var(--section-vertical-padding-full) + var(--section-bullets-padding))
}

@media (max-width: 768px) {
    .completed-works__map {
        height: 56.2rem
    }
}

.title-value-stat__value {
    margin-bottom: 1rem
}

@media (max-width: 768px) {
    .title-value-stat__value {
        margin-bottom: .5rem
    }
}

.category-intro {
    --padding: calc(var(--screen-horisontal-padding) * .76);
    padding: 2.5rem var(--padding) var(--section-vertical-padding) var(--padding);
    padding-bottom: 0
}

@media (max-width: 768px) {
    .category-intro {
        padding: 0;
        margin-top: calc(var(--header-height) * -1)
    }
}

.category-intro__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 65rem;
    padding: 4rem 4.9rem 5rem;
    border-radius: var(--border-radius);
    color: var(--color-grayscale-0);
    overflow: hidden
}

@media (max-width: 768px) {
    .category-intro__content {
        height: 60.5rem;
        border-radius: 0;
        padding: 0 var(--screen-horisontal-padding);
        padding-top: calc(var(--header-height) + 2rem)
    }
}

@media (max-width: 768px) and (max-aspect-ratio: 3/5) {
    .category-intro__content {
        height: var(--viewport-height);
        padding-bottom: 5.5rem
    }
}

.category-intro__image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    filter: blur(.2rem)
}

@media (max-width: 768px) {
    .category-intro__image {
        width: 102%;
        left: -1%
    }
}

.category-intro__breadcrubms {
    padding: 0;
    margin-bottom: 4rem
}

@media (max-width: 768px) {
    .category-intro__breadcrubms {
        margin-bottom: 2rem
    }
}

.category-intro__heading {
    margin-bottom: 5rem;
    width: 107rem
}

@media (max-width: 768px) {
    .category-intro__heading {
        margin-bottom: 4rem;
        width: 100%
    }
}

.category-intro__installment {
    width: -moz-max-content;
    width: max-content
}

.category-intro__stats {
    display: flex;
    gap: 9rem
}

@media (min-width: 769px) {
    .category-intro__stats {
        margin-top: auto
    }
}

@media (max-width: 768px) {
    .category-intro__stats {
        flex-direction: column;
        gap: 4rem;
        margin-top: 4.6rem
    }
}

@media (max-width: 768px) and (max-aspect-ratio: 3/5) {
    .category-intro__stats {
        /*margin-top: auto*/
    }
}


.step {
    width: 33.7rem;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius);
    background-color: var(--color-grayscale-0)
}

@media (max-width: 1600px) {
    .step {
        padding: 2rem
    }
}

@media (max-width: 768px) {
    .step {
        width: 26rem;
        padding: 2rem
    }
}

.step__number {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary-100);
    color: var(--color-grayscale-0);
    border-radius: 50%
}

@media (max-width: 768px) {
    .step__number {
        width: 2.5rem;
        height: 2.5rem;
        margin-bottom: 2rem
    }
}

.step__title {
    margin-bottom: 2rem
}

@media (max-width: 768px) {
    .step__title {
        margin-bottom: 1.5rem
    }
}

.step__description {
    color: var(--color-grayscale-400)
}

@media (min-width: 769px) {
    .steps__slider {
        --gap: 5rem;
        --hibernate: true;
        display: flex;
        gap: 5rem;
        gap: var(--gap)
    }
}

@media (max-width: 768px) {
    .steps__slider {
        --axis: x;
        --gap: 2rem;
        --mouse-drag: true
    }
}

@media (min-width: 769px) {
    .steps__slider__item {
        width: 100%;
        flex: 1
    }
}

.text-review-card {
    width: 46.7rem;
    padding: 3rem;
    background-color: var(--color-grayscale-200);
    border-radius: var(--border-radius);
    overflow: hidden
}

@media (max-width: 768px) {
    .text-review-card {
        width: 26rem;
        padding: 3rem 1.5rem
    }
}

.text-review-card__top {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-bottom: 5rem
}

@media (max-width: 768px) {
    .text-review-card__top {
        gap: 1.5rem;
        margin-bottom: 3rem
    }
}

.text-review-card__person {
    flex-shrink: 0;
    width: 13rem;
    height: 13rem;
    border-radius: 50%;
    border: .4rem solid var(--color-primary-100);
    overflow: hidden
}

@media (max-width: 768px) {
    .text-review-card__person {
        width: 7rem;
        height: 7rem;
        border-width: .2rem
    }
}

.text-review-card__name {
    color: var(--color-primary-100);
    margin-bottom: 1.3rem
}

@media (max-width: 768px) {
    .text-review-card__name {
        margin-bottom: .8rem
    }
}

.text-review-card__review {
    width: 100%;
    border-radius: 1.5rem;
    background-color: var(--color-grayscale-0)
}

.accordion {
    --duration: .3s;
    display: grid;
    grid-auto-rows: max-content;
    grid-gap: 2rem;
    gap: 2rem;
    width: 72.5rem
}

@media (max-width: 768px) {
    .accordion {
        width: 100%;
        gap: 1rem
    }
}

.accordion__item {
    width: 100%;
    border-radius: var(--border-radius);
    background-color: var(--color-grayscale-0);
    color: var(--color-primary-100);
    transition-property: color, background-color;
    transition-duration: var(--duration)
}

.accordion__item.opened {
    color: var(--color-grayscale-0);
    background-color: var(--color-primary-100)
}

.accordion__item__head {
    padding: 1.5rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media (max-width: 768px) {
    .accordion__item__head {
        padding: 1.5rem
    }
}

.accordion__item__head__toggle {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    width: 4.5rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-grayscale-200);
    border-radius: 50%;
    transition-property: background-color;
    transition-duration: var(--duration)
}

.accordion__item__head__toggle:before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 3.1rem;
    height: 3.1rem;
    background-color: var(--color-primary-100);
    transition-property: background-color;
    transition-duration: var(--duration);
    border-radius: 50%
}

.accordion__item.opened .accordion__item__head__toggle {
    background-color: transparent
}

.accordion__item.opened .accordion__item__head__toggle:before {
    background-color: var(--color-grayscale-0)
}

@media (max-width: 768px) {
    .accordion__item__head__toggle {
        width: 4rem;
        height: 4rem
    }
    .accordion__item__head__toggle:before {
        width: 3rem;
        height: 3rem
    }
}

.accordion__item__head__toggle__icon {
    width: 1.7rem;
    height: 1.7rem;
    transition-property: fill, transform;
    transition-duration: var(--duration);
    will-change: transform;
    fill: var(--color-grayscale-0)
}

.accordion__item.opened .accordion__item__head__toggle__icon {
    fill: var(--color-primary-100);
    transform: rotate(45deg)
}

@media (max-width: 768px) {
    .accordion__item__head__toggle__icon {
        width: 1.6rem;
        height: 1.6rem
    }
}

.accordion__item__body {
    transition: height var(--duration)
}

.accordion__item__content {
    padding: 1.2rem 3rem 2.4rem
}

@media (max-width: 768px) {
    .accordion__item__content {
        padding: 1rem 1.5rem 2rem
    }
}

.qa {
    --right-padding: 0rem;
    --right-background: transparent;
    --left-height: 55.3rem;
    padding: var(--section-vertical-padding-full) var(--screen-horisontal-padding)
}

@media (max-width: 768px) {
    .qa {
        --left-height: max-content
    }
}

.qa__content {
    display: flex;
    flex-direction: column;
    height: 100%
}

.qa__heading {
    margin-bottom: 3rem
}

@media (max-width: 768px) {
    .qa__heading {
        margin-bottom: 2rem
    }
}

.qa__description {
    margin-bottom: 5rem;
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .qa__description {
        margin-bottom: 4rem
    }
}

.qa__link {
    width: -moz-max-content;
    width: max-content;
    margin-bottom: 4rem
}

.qa__director {
    margin-top: auto
}

.qa__accordion {
    width: 100%
}

.keywords {
    padding: var(--screen-horisontal-padding);
    padding-top: var(--section-vertical-padding-full);
    padding-bottom: 0;
    border-top: 1px solid var(--color-grayscale-300)
}

.keywords__slider {
    --axis: x;
    --gap: 5rem;
    --overflow: hidden;
    --sectional: true;
    --sections-in-view: 4;
    --auto-size: true;
    --mouse-drag: true;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: flex;
    gap: 5rem;
    gap: var(--gap)
}

@media (max-width: 768px) {
    .keywords__slider {
        --overflow: unset;
        --gap: 2rem;
        --sections-in-view: var(--slider-mobile-sections-in-view)
    }
}

.keywords__keyword {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 5.75rem;
    border-radius: var(--border-radius);
    background-color: var(--color-grayscale-0)
}

@media (max-width: 1600px) {
    .keywords__keyword {
        padding: 3rem
    }
}

@media (max-width: 768px) {
    .keywords__keyword {
        padding: 2.1rem 0
    }
}

.work-example {
    --left-background: var(--color-image-background);
    --right-background: var(--color-grayscale-0)
}

@media (max-width: 768px) {
    .work-example {
        width: 26rem;
        gap: 0
    }
    .work-example .two-sides__left {
        padding: 0;
        z-index: 1
    }
    .work-example .two-sides__right {
        margin-top: -2.4rem;
        border-radius: 0;
        padding: 3.5rem 1.5rem 1.5rem;
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius)
    }
}

.work-example__image-box {
    width: 100%;
    height: 100%
}

@media (max-width: 768px) {
    .work-example__image-box {
        height: 20rem
    }
}

.work-example__labels {
    position: absolute;
    top: 2rem;
    left: 2rem;
    z-index: 2
}

@media (max-width: 768px) {
    .work-example__labels {
        top: 1.5rem;
        left: 1.5rem
    }
}

.work-example__image {
    width: 100%;
    height: 100%
}

@media (min-width: 769px) {
    .work-example__image {
        position: absolute;
        top: 0;
        left: 0
    }
}

.work-example__content {
    display: flex;
    flex-direction: column
}

.work-example__title {
    margin-bottom: 1rem
}

@media (max-width: 768px) {
    .work-example__title {
        margin-bottom: .5rem
    }
}

.work-example__price {
    margin-bottom: 3rem;
    color: var(--color-primary-100)
}

@media (max-width: 768px) {
    .work-example__price {
        margin-bottom: 2rem
    }
}

.work-example__description {
    margin-bottom: 5rem;
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .work-example__description {
        margin-bottom: 2rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis
    }
}

.work-example__link {
    width: -moz-max-content;
    width: max-content
}

@media (max-width: 768px) {
    .work-example__link {
        display: none
    }
}

.work-example__link-mobile {
    width: -moz-max-content;
    width: max-content
}

@media (min-width: 769px) {
    .work-example__link-mobile {
        display: none
    }
}

.prices .section__heading {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.prices__link {
    margin-top: 1rem
}

@media (max-width: 768px) {
    .prices__link {
        margin-top: .5rem
    }
}

@media (max-width: 768px) {
    .prices__table-wrapper {
        padding: .2rem var(--screen-horisontal-padding);
        width: calc(100% + var(--screen-horisontal-padding) * 2);
        margin-left: calc(var(--screen-horisontal-padding) * -1);
        overflow-x: auto;
        overflow-y: hidden;
        overflow: auto hidden
    }
}

.prices__table {
    width: 100%;
    border-collapse: collapse;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 -1px #e8e8e8
}

@media (max-width: 768px) {
    .prices__table {
        width: 78.3rem
    }
}

.prices__table thead tr {
    text-align: left;
    color: var(--color-grayscale-400)
}

.prices__table th,
.prices__table td {
    font-weight: 400;
    padding: 1.4rem 2rem
}

@media (max-width: 768px) {
    .prices__table th,
    .prices__table td {
        padding: 1.1rem 2rem
    }
}

.prices__table tbody tr:nth-of-type(odd) {
    background-color: #f4f4f4
}

.prices__table tbody tr:nth-of-type(2n) {
    background-color: #fcfcfc
}

.demo-calculator {
    --left-background: var(--color-grayscale-100);
    --right-background: var(--color-grayscale-100);
    padding: calc(var(--section-vertical-padding) * 2) var(--screen-horisontal-padding);
    background-color: var(--color-grayscale-0)
}

@media (min-width: 769px) {
    .demo-calculator .two-sides__right {
        height: auto;
        height: initial;
        max-height: 100%
    }
}

@media (max-width: 768px) {
    .demo-calculator {
        padding-top: 10.6rem;
        flex-direction: column-reverse
    }
    .demo-calculator .two-sides__left {
        position: static;
        position: initial
    }
}

@media (max-width: 768px) {
    .demo-calculator .price-range {
        background-color: transparent;
        padding: 0
    }
}

.demo-calculator__heading {
    margin-bottom: 5rem
}

@media (max-width: 768px) {
    .demo-calculator__heading {
        position: absolute;
        top: calc(var(--section-vertical-padding) * 2);
        left: var(--screen-horisontal-padding);
        margin-bottom: 4rem
    }
}

@media (max-width: 768px) {
    .demo-calculator__heading__hidden-on-mobile {
        display: none
    }
}

.demo-calculator__form {
    padding-bottom: 5rem
}

@media (max-width: 768px) {
    .demo-calculator__form {
        padding-bottom: 2rem;
        border-bottom: 1px solid var(--color-grayscale-300)
    }
}

.demo-calculator__form__inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1.5rem;
    gap: 1.5rem;
    margin-bottom: 2.5rem
}

@media (max-width: 768px) {
    .demo-calculator__form__inputs {
        margin-bottom: 1.5rem;
        gap: 1rem
    }
}

@media (max-width: 768px) {
    .demo-calculator__form__input-3 {
        grid-column: 1/3
    }
}

@media (max-width: 768px) {
    .demo-calculator__form__input-4 {
        grid-column: 1/3
    }
}

.demo-calculator__form__input-5 {
    grid-column: 1/3
}

.demo-calculator__form__agreement {
    margin-bottom: 5rem
}

@media (max-width: 768px) {
    .demo-calculator__form__agreement {
        margin-bottom: 2rem
    }
}

@media (max-width: 768px) {
    .demo-calculator__from-explanation {
        padding-top: 2rem
    }
}

.demo-calculator__range {
    width: 100%
}

@media (min-width: 769px) {
    .demo-calculator__range {
        margin-bottom: 6.2rem
    }
}

.demo-calculator__explanation {
    text-wrap: balance
}

@media (max-width: 768px) {
    .demo-calculator__explanation {
        display: none
    }
}

.phone {
    display: inline-flex;
    align-items: center;
    gap: 2rem
}

@media (max-width: 768px) {
    .phone {
        gap: 1.5rem
    }
}

.phone__icon-box {
    width: 4.5rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-primary-100)
}

@media (max-width: 768px) {
    .phone__icon-box {
        width: 3rem;
        height: 3rem
    }
}

.phone__icon {
    width: 38%;
    height: 38%;
    fill: var(--color-grayscale-0)
}

.phone__value {
    color: var(--color-primary-100)
}

.call-request__inner {
    padding: 5rem;
    display: flex;
    gap: 7.6rem;
    background-color: var(--color-grayscale-0);
    border-radius: var(--border-radius)
}

@media (max-width: 768px) {
    .call-request__inner {
        gap: 2rem;
        padding: 2rem;
        flex-direction: column
    }
}

@media (min-width: 769px) {
    .call-request__info {
        padding-right: 10rem;
        border-right: 1px solid var(--color-grayscale-300)
    }
}

@media (max-width: 768px) {
    .call-request__info {
        padding-bottom: 4rem;
        border-bottom: 1px solid var(--color-grayscale-300)
    }
}

.call-request__heading {
    margin-bottom: 3rem
}

@media (max-width: 768px) {
    .call-request__heading {
        margin-bottom: 2rem
    }
}

.call-request__description {
    margin-bottom: 6.2rem;
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .call-request__description {
        margin-bottom: 4rem
    }
}

.call-request__form {
    flex-shrink: 0;
    width: 62.5rem;
    display: flex;
    flex-direction: column
}

@media (max-width: 768px) {
    .call-request__form {
        width: 100%
    }
}

.call-request__form__input {
    margin-bottom: 1.5rem
}

@media (max-width: 768px) {
    .call-request__form__input {
        margin-bottom: 1rem
    }
}

.call-request__form-agreement {
    margin-top: 1rem;
    margin-bottom: 5rem
}

@media (max-width: 768px) {
    .call-request__form-agreement {
        margin-top: .65rem;
        margin-bottom: 2rem
    }
}

.call-request__form__submit {
    width: -moz-max-content;
    width: max-content
}

.color-options {
    --left-background: #f0f0f0;
    position: relative;
    padding: calc(var(--section-vertical-padding) * 2) var(--screen-horisontal-padding);
    border-top: 1px solid var(--color-grayscale-300);
    border-bottom: 1px solid var(--color-grayscale-300)
}

.color-options .two-sides__left {
    display: flex;
    align-items: center;
    justify-content: center
}

@media (max-width: 768px) {
    .color-options {
        --left-padding: 4rem 4rem 11rem 4rem;
        padding-top: 10.6rem
    }
    .color-options .two-sides__right {
        position: static;
        position: initial
    }
}

.color-options__image {
    position: relative;
    width: 56.5rem;
    height: 55.3rem;
    overflow: hidden;
    -o-object-fit: cover;
    object-fit: cover
}

@media (max-width: 768px) {
    .color-options__image {
        width: 25.5rem;
        height: 25rem
    }
}

.color-options__heading {
    margin-bottom: 5rem
}

@media (max-width: 768px) {
    .color-options__heading {
        position: absolute;
        left: var(--screen-horisontal-padding);
        top: var(--section-vertical-padding-full)
    }
}

.color-options__category-pick {
    margin-bottom: 3rem
}

.color-options__category-pick__title {
    margin-bottom: 1.5rem;
    color: var(--color-grayscale-400)
}

.color-options__category-pick__input {
    width: 100%;
    display: block
}

.color-options__categories {
    display: grid;
    margin-bottom: 3rem;
    padding: 2rem;
    height: 36rem;
    border-radius: var(--border-radius);
    background-color: var(--color-grayscale-100)
}

@media (min-width: 769px) {
    .color-options__categories {
        overflow-x: hidden;
        overflow-y: auto;
        overflow: hidden auto
    }
}

@media (max-width: 768px) {
    .color-options__categories {
        --width: 22.3rem;
        position: absolute;
        top: 43.4rem;
        left: 50%;
        align-items: center;
        width: 22.3rem;
        width: var(--width);
        padding: 0;
        height: 4.6rem;
        background-color: var(--color-grayscale-0);
        border-radius: 1.2rem;
        transform: translate(-50%)
    }
}

.color-options__category {
    grid-column: 1/1;
    grid-row: 1/1;
    width: 100%
}

@media (min-width: 769px) {
    .color-options__category {
        --hibernate: true;
        height: -moz-max-content;
        height: max-content;
        display: none;
        grid-auto-rows: max-content;
        grid-template-columns: 1fr 1fr;
        gap: 2rem
    }
    .color-options__category.current {
        display: grid
    }
}

@media (max-width: 768px) {
    .color-options__category {
        --axis: x;
        --auto-size: true;
        --sectional: true;
        --sections-in-view: 5;
        --overflow: hidden;
        --mouse-drag: true;
        display: none;
        width: var(--width)
    }
    .color-options__category.current {
        display: flex
    }
}

.color-options__category__button {
    --slider-button-size: 2.6rem;
    position: absolute;
    top: calc(50% - 1.3rem);
    top: calc(50% - var(--slider-button-size) / 2)
}

.color-options__category__button_left {
    right: calc(100% + 1.5rem)
}

.color-options__category__button_right {
    left: calc(100% + 1.5rem)
}

.color-options__result {
    width: 100%
}

.color-options__result__title {
    margin-bottom: 1.5rem;
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .color-options__result__title {
        margin-bottom: 1rem
    }
}

.color-options__result__content {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 2rem;
    background-color: var(--color-grayscale-100);
    border-radius: var(--border-radius)
}

@media (max-width: 768px) {
    .color-options__result__content {
        padding: 1.5rem;
        flex-wrap: wrap
    }
}

.color-options__result__color {
    position: relative;
    width: 10.4rem;
    height: 10.4rem;
    margin-right: 3rem;
    border-radius: 2rem;
    background-color: var(--picked-color, var(--color-grayscale-0));
    transition-property: background-color;
    transition-duration: var(--duration-button)
}

@media (max-width: 768px) {
    .color-options__result__color {
        width: 6rem;
        height: 6rem;
        margin-right: 2.5rem;
        border-radius: 1.2rem
    }
}

.color-options__result__info {
    display: grid;
    grid-auto-rows: max-content;
    grid-gap: 1rem;
    gap: 1rem
}

@media (max-width: 768px) {
    .color-options__result__info {
        gap: .5rem
    }
}

@media (max-width: 768px) {
    .color-options__result__info__item {
        display: flex;
        gap: .5rem
    }
}

.color-options__result__info__item__tilte {
    color: var(--color-grayscale-400)
}

.color-options__result__button {
    margin-top: auto
}

@media (min-width: 769px) {
    .color-options__result__button {
        margin-left: auto
    }
}

@media (max-width: 768px) {
    .color-options__result__button {
        margin-top: 3rem
    }
}

.estimate {
    padding: var(--section-vertical-padding-full) var(--screen-horisontal-padding);
    background-color: var(--color-grayscale-0);
    --right-background: var(--color-grayscale-100)
}

@media (max-width: 768px) {
    .estimate .two-sides__left {
        display: none
    }
}

.estimate .two-sides__right {
    overflow: visible;
    overflow: initial
}

.estimate__content {
    display: flex;
    flex-direction: column
}

.estimate__heading {
    margin-bottom: 3rem
}

@media (max-width: 768px) {
    .estimate__heading {
        margin-bottom: 2rem
    }
}

.estimate__description {
    margin-bottom: 5rem;
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .estimate__description {
        width: 100%;
        margin-bottom: 4rem
    }
}

.estimate__form__input {
    display: block;
    margin-bottom: 1.5rem
}

@media (max-width: 768px) {
    .estimate__form__input {
        margin-bottom: 1rem
    }
}

.estimate__form__agreement {
    margin-top: 1.1rem;
    margin-bottom: 8rem
}

@media (max-width: 768px) {
    .estimate__form__agreement {
        margin-top: .5rem;
        margin-bottom: 2rem
    }
}

.estimate__form__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media (max-width: 768px) {
    .estimate__form__bottom {
        align-items: flex-start;
        flex-direction: column-reverse
    }
}

.estimate__form__member {
    gap: 3rem
}

@media (max-width: 768px) {
    .estimate__form__member {
        gap: 1.5rem
    }
}

.estimate__form__member .company-member__image {
    width: 8rem;
    height: 8rem
}

@media (max-width: 768px) {
    .estimate__form__member .company-member__image {
        width: 7rem;
        height: 7rem
    }
}

@media (max-width: 768px) {
    .estimate__form__button {
        margin-bottom: 4rem
    }
}

.rest-tabs {
    position: relative;
    display: inline-block
}

.rest-tabs__toggle {
    --type: toggle
}

.rest-tabs__popover {
    --click-outside: true;
    position: absolute;
    top: calc(100% + 2.5rem);
    right: 0;
    width: 28rem;
    max-height: 40rem;
    border-radius: 2rem;
    background-color: var(--color-grayscale-0);
    display: none;
    opacity: 0;
    transition-property: opacity;
    transition-duration: var(--duration-button);
    overflow-x: hidden;
    overflow-y: auto;
    overflow: hidden auto;
    box-shadow: 0 .4rem 1rem #0000001a
}

.rest-tabs__popover.triggered {
    display: block
}

.rest-tabs__popover.opened {
    opacity: 1
}

@media (max-width: 768px) {
    .rest-tabs__popover {
        top: calc(100% + 2.2rem);
        width: 33.5rem
    }
}

.rest-tabs__button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    transition-property: color, background-color, border-color;
    transition-duration: var(--duration-button);
    transition-timing-function: ease;
    color: var(--color-grayscale-400)
}

.rest-tabs__button:not(:last-child) {
    border-bottom: 1px solid var(--color-grayscale-300)
}

.rest-tabs__button[data-checked] {
    background-color: var(--color-primary-100);
    color: var(--color-grayscale-0)
}

@media (max-width: 768px) {
    .rest-tabs__button {
        padding: 1rem 1rem 1rem 2rem
    }
}

.rest-tabs__button__image {
    width: 4.9rem;
    height: 4.9rem;
    border-radius: 1rem;
    background-color: var(--color-image-background)
}

.tab-buttons {
    --dots-button-height: 4.5rem;
    --tab-button-background: var(--color-grayscale-0);
    display: flex;
    gap: 1.5rem;
    width: 100%
}

@media (max-width: 768px) {
    .tab-buttons {
        --dots-button-height: 4rem
    }
}

.tab-buttons__rest {
    z-index: 5
}

@media (max-width: 768px) {
    .tab-buttons__rest {
        margin-left: auto
    }
}

.product-variant {
    --background: var(--color-grayscale-0)
}

@media (max-width: 768px) {
    .product-variant {
        --left-height: 23.5rem
    }
}

.product-variant__title {
    margin-bottom: 3rem
}

@media (max-width: 768px) {
    .product-variant__title {
        margin-bottom: 2rem
    }
}

.product-variant__description {
    margin-bottom: 5rem;
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .product-variant__description {
        margin-bottom: 4rem
    }
}

.product-variant__parameters {
    margin-bottom: 10.7rem;
    padding: 2.5rem;
    border-radius: 2rem;
    background-color: var(--color-grayscale-100)
}

@media (max-width: 768px) {
    .product-variant__parameters {
        padding: 2rem;
        margin-bottom: 4rem;
        border-radius: 1.2rem
    }
}

.product-variant__parameters__title {
    margin-bottom: 2.3rem
}

@media (max-width: 768px) {
    .product-variant__parameters__title {
        margin-bottom: 2.1rem
    }
}

.product-variant__parameters__list {
    margin-bottom: 4rem;
    display: grid;
    grid-gap: .5rem;
    gap: .5rem;
    grid-auto-rows: max-content
}

@media (max-width: 768px) {
    .product-variant__parameters__list {
        gap: 1.5rem;
        margin-bottom: 2rem
    }
}

.product-variant__parameters__list__item {
    color: var(--color-grayscale-400)
}

.product-variant__price {
    color: var(--color-primary-100)
}

.product-variants__buttons {
    margin-bottom: 8rem
}

@media (max-width: 768px) {
    .product-variants__buttons {
        margin-bottom: 3rem
    }
}

.product-variants__list {
    display: grid;
    grid-template-columns: 100%
}

.product-variants__list__item {
    grid-column: 1/1;
    grid-row: 1/1
}

.communication__columns {
    display: flex;
    gap: 5rem
}

@media (max-width: 768px) {
    .communication__columns {
        flex-direction: column;
        gap: 4rem
    }
}

.communication__column {
    width: 33.7rem
}

.communication__column__head {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3.5rem
}

@media (max-width: 768px) {
    .communication__column__head {
        gap: 1rem;
        margin-bottom: 1rem
    }
}

.communication__column__icon {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    fill: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .communication__column__icon {
        width: 1.3rem;
        height: 1.3rem
    }
}

.communication__column__name {
    color: var(--color-grayscale-400)
}

.communication__column__social {
    --icon-box-border-color: transparent;
    --icon-box-background-color: var(--color-grayscale-200);
    --icon-box-color: var(--color-primary-100);
    --icon-box-size: 4.6rem;
    --icon-size: 2.2rem
}

@media (max-width: 768px) {
    .communication__column__social {
        --icon-box-size: 3.8rem;
        --icon-size: 1.8rem
    }
}

.communication__column__link {
    position: relative;
    color: var(--color-grayscale-600)
}

@media (hover: hover) {
    .communication__column__link {
        transition-property: color;
        transition-duration: var(--duration-button);
        transition-timing-function: ease
    }
    .communication__column__link:after {
        content: "";
        position: absolute;
        bottom: -5px;
        left: 0;
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--color-primary-100);
        pointer-events: none;
        transition-property: transform;
        transition-duration: var(--duration-button);
        transition-timing-function: ease;
        transform-origin: right;
        transform: scaleX(0)
    }
    .communication__column__link:hover:after {
        transform-origin: left;
        transform: scaleX(1)
    }
    .communication__column__link:hover {
        color: var(--color-primary-100)
    }
}

.map__holder {
    width: 100%;
    height: 56.2rem;
    overflow: hidden;
    border-radius: var(--border-radius);
    background-color: var(--color-image-background)
}

.address-card {
    --catalog-card-image-height: 33.7rem;
    --slider-button-size: 3.4rem;
    --offset: 2.5rem;
    width: 46.7rem
}

@media (max-width: 768px) {
    .address-card {
        --catalog-card-image-height: 23.5rem;
        width: 100%
    }
}

.address-card .catalog-card__content {
    padding: 3rem;
    padding-top: calc(3rem + var(--border-radius))
}

@media (max-width: 768px) {
    .address-card .catalog-card__content {
        padding: 2rem;
        padding-top: calc(2rem + var(--border-radius))
    }
}

.address-card__items {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: 100%;
    grid-gap: 3rem;
    gap: 3rem
}

.address-card__item__title {
    margin-bottom: 1rem;
    color: var(--color-grayscale-400)
}

.address-card__item__description {
    max-width: 90%
}

@media (max-width: 768px) {
    .address-card__item__description {
        max-width: 80%
    }
}

.address-cards__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5rem;
    gap: 5rem
}

@media (max-width: 768px) {
    .address-cards__list {
        grid-template-columns: 100%;
        gap: 4rem
    }
}

.address-cards__list__item {
    width: 100%
}

.delivery-card {
    width: 33.7rem;
    min-height: 21.2rem;
    padding: 3rem;
    background-color: var(--color-grayscale-0);
    border-radius: var(--border-radius)
}

@media (max-width: 768px) {
    .delivery-card {
        width: 26rem;
        padding: 2rem;
        min-height: 16.8rem
    }
}

.delivery-card__name {
    margin-bottom: 3rem
}

[data-zone="1"] .delivery-card__name {
    background-color: #9ee29399;
    color: #40673a
}

[data-zone="2"] .delivery-card__name {
    background-color: #ffe77999;
    color: #766400
}

[data-zone="3"] .delivery-card__name {
    background-color: #ffaf4b99;
    color: #945300
}

[data-zone="4"] .delivery-card__name {
    background-color: #fa9b8d;
    color: #851100
}

.delivery-card__description {
    margin-bottom: 2rem;
    color: var(--color-grayscale-400)
}

.delivery-card__price {
    color: var(--color-grayscale-400)
}

.payment-card {
    width: 46.7rem;
    min-height: 26.9rem;
    padding: 3rem;
    background-color: var(--color-grayscale-0);
    border-radius: var(--border-radius)
}

@media (max-width: 768px) {
    .payment-card {
        width: 100%;
        min-height: 20.6rem;
        padding: 2rem
    }
}

.payment-card__images {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 6rem
}

@media (max-width: 768px) {
    .payment-card__images {
        margin-bottom: 3rem
    }
}

.payment-card__image-box {
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-grayscale-200)
}

.payment-card__image-box[data-box-type=large] {
    border-radius: .5rem;
    width: 7.429rem
}

@media (max-width: 768px) {
    .payment-card__image-box[data-box-type=large] {
        width: 6.5rem
    }
}

.payment-card__image-box[data-box-type=small] {
    width: 4rem;
    border-radius: .7rem
}

@media (max-width: 768px) {
    .payment-card__image-box[data-box-type=small] {
        width: 3.5rem
    }
}

@media (max-width: 768px) {
    .payment-card__image-box {
        height: 3.5rem
    }
}

.payment-card__image {
    max-width: 90%;
    max-height: 90%
}

.payment-card__title {
    margin-bottom: 2rem
}

@media (max-width: 768px) {
    .payment-card__title {
        margin-bottom: 1rem
    }
}

.payment-card__description {
    color: var(--color-grayscale-400)
}

.delivery {
    --swipe: false
}

.delivery__tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.5rem;
    margin-bottom: 8rem
}

@media (max-width: 768px) {
    .delivery__tabs {
        gap: 1rem;
        margin-bottom: 4rem
    }
}

.delivery__tab {
    --tab-button-background: var(--color-grayscale-0);
    flex: 1
}

.delivery__slide {
    display: none
}

.delivery__slide.current {
    display: block
}

.delivery__zones__list {
    --gap: 5rem;
    display: flex;
    gap: 5rem;
    gap: var(--gap);
    margin-bottom: 8rem
}

@media (max-width: 768px) {
    .delivery__zones__list {
        margin-bottom: 4rem
    }
}

@media (min-width: 769px) {
    .delivery__zones__list {
        --hibernate: true
    }
}

@media (max-width: 768px) {
    .delivery__zones__list {
        --axis: x;
        --gap: 2rem;
        --sectional: true;
        --auto-size: true;
        --sections-in-view: var(--slider-mobile-sections-in-view);
        --mouse-drag: true
    }
}

.delivery__zones__zone {
    flex: 1
}

.delivery__zones__map-wrapper {
    position: relative;
    padding-top: var(--section-vertical-padding-full)
}

.delivery__zones__map-wrapper:before {
    content: "";
    position: absolute;
    left: calc(var(--screen-horisontal-padding) * -1);
    top: 0;
    width: calc(100% + var(--screen-horisontal-padding) * 2);
    height: 1px;
    background-color: var(--color-grayscale-300)
}

.delivery__zones__map {
    width: 100%;
    height: 56.4rem;
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: var(--color-grayscale-0)
}

@media (max-width: 768px) {
    .delivery__zones__map {
        height: 37.6rem
    }
}

.delivery__payment__cards {
    display: flex;
    gap: 5rem
}

@media (max-width: 768px) {
    .delivery__payment__cards {
        gap: 2rem;
        flex-direction: column
    }
}

.delivery__payment__card {
    flex: 1
}

.table-list {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overflow: auto hidden
}

.table-list__list {
    width: 100%;
    border-radius: var(--border-radius);
    overflow-x: auto;
    overflow-y: hidden;
    overflow: auto hidden
}

@media (max-width: 768px) {
    .table-list__list {
        width: 65.6rem
    }
}

.table-list__item {
    display: flex;
    gap: 3rem;
    padding: 1.4rem 2rem
}

.table-list__item:nth-child(odd) {
    background-color: #f4f4f4
}

.table-list__item:nth-child(2n) {
    background-color: #fcfcfc
}

@media (max-width: 768px) {
    .table-list__item {
        padding: 1.1rem 2rem
    }
}

.table-list__item__name {
    flex-shrink: 0;
    width: 41.7rem
}

@media (max-width: 768px) {
    .table-list__item__name {
        width: 13rem
    }
}

.company-details {
    padding: var(--section-vertical-padding-full) var(--screen-horisontal-padding)
}

@media (max-width: 768px) {
    .company-details {
        padding-left: 0;
        padding-right: 0
    }
}

@media (max-width: 768px) {
    .company-details__list {
        padding: 0 var(--screen-horisontal-padding)
    }
    .company-details__list .table-list__item:not(:last-child):not(:first-child) .table-list__item__value {
        max-width: 30.3rem
    }
    .company-details__list .table-list__item:first-child .table-list__item__value {
        max-width: 25.4rem
    }
}

.installment-card {
    background-color: var(--color-grayscale-0);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    width: 46.7rem;
    min-height: 30.7rem;
    padding: 3rem
}

@media (max-width: 768px) {
    .installment-card {
        width: 100%;
        min-height: 20.1rem;
        padding: 2rem
    }
}

.installment-card__labels {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 6rem
}

@media (max-width: 768px) {
    .installment-card__labels {
        margin-bottom: 3rem
    }
}

.installment-card__label {
    background-color: var(--color-primary-100);
    color: var(--color-grayscale-0)
}

.installment-card__name {
    margin-bottom: 2rem
}

@media (max-width: 768px) {
    .installment-card__name {
        margin-bottom: 1rem
    }
}

.installment-card__description {
    margin-bottom: 4rem;
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .installment-card__description {
        margin-bottom: 2rem
    }
}

.installment-card__link {
    margin-top: auto;
    width: -moz-max-content;
    width: max-content
}

.installment-intro__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5rem;
    gap: 5rem
}

.installment-intro__cards .installment-card {
    width: 100%
}

@media (max-width: 768px) {
    .installment-intro__cards {
        grid-template-columns: 100%;
        gap: 2rem
    }
}

.partner-card {
    width: 100%
}

.partner-card__image-box {
    height: 32.7rem;
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2rem;
    background-color: var(--color-grayscale-200)
}

@media (max-width: 768px) {
    .partner-card__image-box {
        height: 20rem;
        margin-bottom: 2rem
    }
}

.partner-card__image {
    max-width: 24.388rem;
    max-height: 24.388rem
}

@media (max-width: 768px) {
    .partner-card__image {
        max-width: 17.71rem;
        max-height: 17.71rem
    }
}

.partner-card__title {
    margin-bottom: 1rem
}

@media (max-width: 768px) {
    .partner-card__title {
        margin-bottom: .5rem
    }
}

.partner-card__description {
    color: var(--color-grayscale-400)
}

.partners {
    padding: var(--section-vertical-padding-full) var(--screen-horisontal-padding);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 8rem 5rem;
    gap: 8rem 5rem
}

@media (max-width: 768px) {
    .partners {
        grid-template-columns: 100%;
        gap: 4rem
    }
}

.photo-gallery {
    padding: var(--section-vertical-padding-full) var(--screen-horisontal-padding);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 8rem 5rem;
    gap: 8rem 5rem
}

@media (max-width: 768px) {
    .photo-gallery {
        grid-template-columns: 100%;
        gap: 4rem
    }
}

.photo-gallery__card {
    width: 100%
}

.technical {
    white-space: pre-line;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 130%;
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .technical {
        font-size: 1.4rem;
        font-weight: 400;
        color: #878786
    }
}

.technical h2,
.technical h3,
.technical h4,
.technical h5,
.technical h6 {
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 110%;
    color: var(--color-grayscale-600);
    margin-top: 4rem;
    margin-bottom: 1.3rem
}

.technical h2:first-child,
.technical h3:first-child,
.technical h4:first-child,
.technical h5:first-child,
.technical h6:first-child {
    margin-top: 0
}

@media (max-width: 768px) {
    .technical h2,
    .technical h3,
    .technical h4,
    .technical h5,
    .technical h6 {
        font-size: 1.4rem;
        font-weight: 500;
        line-height: 125%;
        margin-top: 1.5rem;
        margin-bottom: 0rem;
        color: #303033
    }
}

.qa2__filter {
    width: 100%
}

.qa2__tab-buttons {
    margin-bottom: 8rem;
    --tab-button-background: var(--color-grayscale-0)
}

@media (max-width: 768px) {
    .qa2__tab-buttons {
        margin-bottom: 4rem
    }
}

.qa2__accordion .accordion-2__item {
    display: none;
    background-color: var(--color-grayscale-0)
}

.qa2__accordion .accordion-2__item:not(.opened) {
    border-color: transparent
}

.qa2__accordion .accordion-2__item.active {
    display: block
}

.qa2__accordion .accordion-2__item:not(.opened) .accordion-2__item__head {
    border-color: transparent
}

.search-match {
    display: block;
    padding: 3rem
}

@media (hover: hover) {
    .search-match {
        transition-property: opacity;
        transition-duration: var(--duration-button)
    }
    .search-match:hover {
        opacity: .5
    }
}

@media (min-width: 769px) {
    .search-match {
        display: flex
    }
}

@media (max-width: 768px) {
    .search-match {
        padding: 2rem
    }
}

.search-match__category {
    flex-shrink: 0
}

@media (min-width: 769px) {
    .search-match__category {
        width: 44rem
    }
}

@media (max-width: 768px) {
    .search-match__category {
        display: flex;
        gap: 1rem;
        margin-bottom: 4rem
    }
}

.search-match__category__title {
    display: block;
    margin-bottom: .5rem;
    color: var(--color-grayscale-400)
}

.search-match__category__name {
    color: var(--color-primary-100)
}

.search-match__title {
    display: block;
    margin-bottom: 1.5rem
}

@media (max-width: 768px) {
    .search-match__title {
        margin-bottom: 1rem
    }
}

.search-result {
    padding: 0 var(--screen-horisontal-padding);
    padding-bottom: 8.2rem
}

@media (max-width: 768px) {
    .search-result {
        padding-bottom: 4rem
    }
}

.search-result__form-wrapper {
    margin-bottom: 7.8rem
}

@media (max-width: 768px) {
    .search-result__form-wrapper {
        margin-bottom: 4rem
    }
}

.search-result__form {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 3rem
}

@media (max-width: 768px) {
    .search-result__form {
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 1.5rem
    }
}

.search-result__form__input-field {
    width: 100%;
    position: relative
}

.search-result__form__input {
    padding: 0 2rem;
    width: 100%;
    height: var(--input-height);
    background-color: var(--color-grayscale-0);
    border-radius: .7rem
}

@media (max-width: 768px) {
    .search-result__form__input {
        border-radius: 1.2rem
    }
}

.search-result__form__reset-button {
    position: absolute;
    top: 50%;
    right: 2rem;
    width: 1.3rem;
    height: 1.3rem;
    transform: translateY(-50%) rotate(45deg)
}

@media (max-width: 768px) {
    .search-result__form__reset-button {
        width: 1.1rem;
        height: 1.1rem;
        right: 1.5rem
    }
}

.search-result__form__reset-button__icon {
    width: 100%;
    height: 100%;
    fill: var(--color-grayscale-600)
}

@media (max-width: 768px) {
    .search-result__form__submit {
        width: 100%
    }
}

.search-result__amount__title {
    color: var(--color-grayscale-400)
}

.search-result__list {
    background-color: var(--color-grayscale-0);
    border-radius: .7rem;
    overflow: hidden
}

.search-result__list__item:not(:last-child) {
    border-bottom: 1px solid var(--color-grayscale-300)
}

.nav {
    width: 100%;
    height: 100%;
    padding: 0rem var(--screen-horisontal-padding);
    padding-bottom: var(--header-height);
    display: grid;
    grid-auto-rows: max-content;
    grid-gap: 4rem;
    gap: 4rem
}

.nav__folder {
    display: block
}

.nav__folder__title {
    text-transform: capitalize;
    font-size: 2rem;
    font-weight: 600;
    cursor: pointer
}

.nav__folder__list {
    width: 100%
}

@media (max-width: 768px) {
    .nav__folder__list {
        width: 100%
    }
}

.nav__folder__list__inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 3rem;
    gap: 3rem;
    padding-top: 2rem;
    padding-left: 2rem
}

@media (max-width: 1600px) {
    .nav__folder__list__inner {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media (max-width: 768px) {
    .nav__folder__list__inner {
        grid-template-columns: repeat(1, 1fr)
    }
}

.nav__link {
    font-size: 1.6rem;
    width: -moz-max-content;
    width: max-content;
    white-space: break-all
}

.wrapper[data-astro-cid-zjigtr3y] {
    height: var(--viewport-height)
}

e-pixel-perfect {
    padding: var(--imagePaddingTop) 0
}

.description-button[data-astro-cid-zjigtr3y] {
    font-size: 2.4vmin;
    position: fixed;
    bottom: 1vmin;
    left: 50%;
    padding: 1vmin 2vmin;
    background-color: #fff;
    color: #000;
    transform: translate(-50%);
    cursor: pointer
}

.description[data-astro-cid-zjigtr3y] {
    --escape: true;
    --click-outside: true;
    --history: true;
    --restore: true;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999999;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: none;
    transition: opacity .3s;
    background-color: #000000e6
}

.description__inner[data-astro-cid-zjigtr3y] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.description__content[data-astro-cid-zjigtr3y] {
    font-size: 2vmin;
    width: 70vmin;
    max-height: 80%;
    white-space: pre-line;
    padding: 2vmin;
    background-color: #fff;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
    overflow: hidden auto
}

@media (max-width: 768px) {
    .description__content[data-astro-cid-zjigtr3y] {
        width: 90%
    }
}

.description__content[data-astro-cid-zjigtr3y] h1 {
    font-size: 4vmin;
    margin: 3vmin 0
}

.description__content[data-astro-cid-zjigtr3y] h2 {
    font-size: 3.6vmin;
    margin: 2vmin 0
}

.description__content[data-astro-cid-zjigtr3y] h3 {
    font-size: 3.2vmin;
    margin: 2vmin 0
}

.description__content[data-astro-cid-zjigtr3y] h4,
.description__content[data-astro-cid-zjigtr3y] h5,
.description__content[data-astro-cid-zjigtr3y] h6 {
    font-size: 2.8vmin;
    margin: 2vmin 0
}

.description__content[data-astro-cid-zjigtr3y] ul,
.description__content[data-astro-cid-zjigtr3y] ol {
    display: grid;
    grid-gap: 1vmin;
    gap: 1vmin;
    margin: 2vmin 0
}

.description__content[data-astro-cid-zjigtr3y] ul {
    list-style: disc
}

.description__content[data-astro-cid-zjigtr3y] ol {
    list-style: decimal
}

.description__content[data-astro-cid-zjigtr3y] li {
    list-style-position: inside
}

.description__content[data-astro-cid-zjigtr3y] p {
    margin-bottom: 2vmin
}

.description__content[data-astro-cid-zjigtr3y] code {
    display: block;
    font-size: inherit;
    color: #000;
    background-color: #e9e9e9;
    padding: .5vmin;
    font-size: 105%
}

.open-close-state {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    height: 3.8rem;
    padding: 0 1.5rem;
    border-radius: .7rem
}

.open-close-state[data-state=open] {
    background-color: var(--color-primary-100)
}

.open-close-state[data-state=closed] {
    background-color: #d12c2c
}

@media (max-width: 768px) {
    .open-close-state {
        gap: .6rem;
        height: 2.6rem;
        padding: 0 1rem
    }
}

.open-close-state__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    will-change: transform
}

.open-close-state__icon:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--color-grayscale-0);
    border-radius: 50%;
    opacity: .3
}

.open-close-state__icon:after {
    content: "";
    position: absolute;
    width: 69%;
    height: 69%;
    background-color: var(--color-grayscale-0);
    border-radius: 50%
}

.open-close-state__value {
    position: relative;
    color: var(--color-grayscale-0)
}

.vacancy-icon-info {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap
}

.vacancy-icon-info__item {
    display: inline-flex;
    align-items: center;
    gap: 1rem
}

.vacancy-icon-info__item__icon {
    width: 1.6rem;
    height: 1.6rem;
    fill: var(--color-grayscale-600)
}

@media (max-width: 768px) {
    .vacancy-icon-info__item__icon {
        width: 1.4rem;
        height: 1.4rem
    }
}

.vacancy__card {
    display: block;
    width: 46.7rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-grayscale-300)
}

.vacancy[data-state=closed] .vacancy__card {
    pointer-events: none
}

@media (max-width: 768px) {
    .vacancy__card {
        width: 100%
    }
}

.vacancy__card__main {
    padding: 3rem
}

@media (max-width: 768px) {
    .vacancy__card__main {
        padding: 2rem
    }
}

.vacancy__card__state {
    margin-bottom: 3rem
}

.vacancy__card__title {
    margin-bottom: 2rem
}

@media (max-width: 768px) {
    .vacancy__card__title {
        margin-bottom: 1rem
    }
}

.vacancy__card__icon-info {
    margin-bottom: 4rem
}

@media (max-width: 768px) {
    .vacancy__card__icon-info {
        margin-bottom: 3rem
    }
}

.vacancy__card__description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-grayscale-400)
}

.vacancy__card__bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 3rem;
    border-top: 1px solid var(--color-grayscale-300)
}

@media (max-width: 768px) {
    .vacancy__card__bottom {
        padding: 1.5rem 2rem
    }
}

@media (max-width: 768px) {
    .vacancy__popover__close-button {
        top: 4.7rem
    }
}

.vacancy__popover__content {
    --padding: 5rem;
    width: 112rem;
    height: 80rem;
    padding: 5rem;
    padding: var(--padding);
    background-color: var(--color-grayscale-0);
    border-radius: 2rem;
    overflow-x: hidden;
    overflow-y: auto;
    overflow: hidden auto
}

@media (max-width: 768px) {
    .vacancy__popover__content {
        --padding: 2rem;
        padding-top: 4.1rem;
        width: 100%;
        min-height: var(--viewport-height);
        height: -moz-max-content;
        height: max-content;
        border-radius: 0;
        overflow: hidden
    }
}

.vacancy__popover__state {
    margin-bottom: 5rem
}

@media (max-width: 768px) {
    .vacancy__popover__state {
        margin-bottom: 3rem
    }
}

.vacancy__popover__title {
    margin-bottom: 2rem
}

@media (max-width: 768px) {
    .vacancy__popover__title {
        margin-bottom: 1rem
    }
}

.vacancy__popover__icon-info {
    margin-bottom: 4rem
}

@media (max-width: 768px) {
    .vacancy__popover__icon-info {
        margin-bottom: 3rem
    }
}

.vacancy__popover__salary {
    margin-bottom: 6rem
}

@media (max-width: 768px) {
    .vacancy__popover__salary {
        margin-bottom: 4rem
    }
}

.vacancy__popover__text {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 130%;
    margin-bottom: var(--padding);
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .vacancy__popover__text {
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 125%;
        margin-bottom: 3rem
    }
}

.vacancy__popover__text div {
    white-space: pre-line
}

.vacancy__popover__text div:not(:last-child) {
    margin-bottom: 3rem
}

.vacancy__popover__text h1,
.vacancy__popover__text h2,
.vacancy__popover__text h3,
.vacancy__popover__text h4,
.vacancy__popover__text h5,
.vacancy__popover__text h6 {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 120%;
    color: var(--color-font)
}

@media (max-width: 768px) {
    .vacancy__popover__text h1,
    .vacancy__popover__text h2,
    .vacancy__popover__text h3,
    .vacancy__popover__text h4,
    .vacancy__popover__text h5,
    .vacancy__popover__text h6 {
        font-size: 1.4rem;
        font-weight: 500;
        line-height: 125%
    }
}

.vacancy__popover__bottom {
    position: relative;
    padding-top: var(--padding)
}

@media (max-width: 768px) {
    .vacancy__popover__bottom {
        padding-top: 3rem
    }
}

.vacancy__popover__bottom:before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(var(--padding) * -1);
    width: calc(100% + var(--padding));
    height: 1px;
    background-color: var(--color-grayscale-300)
}

.vacancy__popover__contact {
    display: block;
    margin-bottom: 1rem
}

@media (max-width: 768px) {
    .vacancy__popover__contact {
        margin-bottom: .5rem
    }
}

.vacancy__popover__hours {
    margin-top: 2rem;
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .vacancy__popover__hours {
        margin-bottom: 1.5rem
    }
}

.vacancies__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5rem;
    gap: 5rem
}

@media (max-width: 768px) {
    .vacancies__list {
        grid-template-columns: 100%;
        gap: 2rem
    }
}

.vacancies__card,
.vacancies__card .vacancy__card {
    width: 100%
}

.calculator-link {
    width: 6rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-primary-100)
}

@media (hover: hover) {
    .calculator-link {
        transition-property: background-color;
        transition-duration: var(--duration-button)
    }
    .calculator-link:hover {
        background-color: var(--color-grayscale-0)
    }
}

@media (max-width: 768px) {
    .calculator-link {
        width: 4.5rem;
        height: 4.5rem
    }
}

.calculator-link__icon {
    width: 3rem;
    height: 3rem;
    fill: var(--color-grayscale-0)
}

@media (hover: hover) {
    .calculator-link__icon {
        transition-property: fill;
        transition-duration: var(--duration-button)
    }
    .calculator-link:hover .calculator-link__icon {
        fill: var(--color-primary-100)
    }
}

@media (max-width: 768px) {
    .calculator-link__icon {
        width: 2.234rem;
        height: 2.234rem
    }
}

.home-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 19.7rem var(--screen-horisontal-padding) 6rem var(--screen-horisontal-padding);
    margin-top: calc(var(--header-full-height) * -1);
    color: var(--color-grayscale-0)
}

@media (min-width: 769px) {
    .home-intro {
        min-height: 96.2rem
    }
}

@media (min-width: 769px) and (min-aspect-ratio: 13/10) and (max-aspect-ratio: 13/5) {
    .home-intro {
        height: var(--viewport-height);
        min-height: 0;
        min-height: initial
    }
}

@media (max-width: 768px) {
    .home-intro {
        padding: 10.2rem var(--screen-horisontal-padding) 5.5rem var(--screen-horisontal-padding);
        min-height: 60.5rem
    }
}

@media (max-width: 768px) and (max-aspect-ratio: 67/100) {
    .home-intro {
        height: var(--viewport-height);
        min-height: 0;
        min-height: initial
    }
}

.home-intro__background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    filter: blur(.2rem)
}

.home-intro__heading {
    margin-bottom: 8rem
}

@media (min-width: 769px) {
    .home-intro__heading {
        width: 86.6rem
    }
}

@media (max-width: 768px) {
    .home-intro__heading {
        margin-bottom: 4rem
    }
}

.home-intro__installment {
    width: -moz-max-content;
    width: max-content
}

.home-intro__stats {
    display: flex;
    gap: 12.8rem
}

@media (min-width: 769px) {
    .home-intro__stats {
        margin-top: auto
    }
}

@media (max-width: 768px) {
    .home-intro__stats {
        flex-direction: column;
        gap: 4rem;
        margin-top: auto
    }
}

.home-intro__calculator {
    position: absolute;
    right: var(--screen-horisontal-padding);
    bottom: 6rem
}

@media (max-width: 768px) {
    .home-intro__calculator {
        bottom: 2.2rem
    }
}

.turnkey-fences {
    padding: var(--section-vertical-padding-full) var(--screen-horisontal-padding)
}

.turnkey-fences__top {
    margin-bottom: 5rem
}

@media (max-width: 768px) {
    .turnkey-fences__top {
        --left-height: 23.5rem;
        margin-bottom: 2rem
    }
}

.turnkey-fences__heading {
    margin-bottom: 3rem
}

@media (max-width: 768px) {
    .turnkey-fences__heading {
        margin-bottom: 2rem
    }
}

.turnkey-fences__description {
    color: var(--color-grayscale-400);
    margin-bottom: 6.3rem
}

@media (max-width: 768px) {
    .turnkey-fences__description {
        margin-bottom: 4rem
    }
}

@media (max-width: 768px) {
    .turnkey-fences__stats {
        margin-left: calc(var(--screen-horisontal-padding) * -1);
        width: calc(100% + var(--screen-horisontal-padding) * 2);
        padding: 0 var(--screen-horisontal-padding);
        overflow-x: auto;
        overflow-y: hidden;
        overflow: auto hidden
    }
}

.turnkey-fences__stats__inner {
    width: 100%;
    display: flex;
    gap: 5.1rem
}

@media (min-width: 769px) {
    .turnkey-fences__stats__inner {
        flex-wrap: wrap
    }
}

@media (max-width: 768px) {
    .turnkey-fences__stats__inner {
        width: -moz-max-content;
        width: max-content;
        gap: 2rem
    }
}

.turnkey-fences__stats__item {
    flex: 1;
    padding: 3rem;
    padding-right: 0;
    border-radius: var(--border-radius);
    background-color: var(--color-grayscale-0)
}

.turnkey-fences__stats__item .title-value-stat__value {
    color: var(--color-primary-100)
}

.turnkey-fences__stats__item .title-value-stat__title {
    color: var(--color-grayscale-400)
}

@media (max-width: 768px) {
    .turnkey-fences__stats__item {
        width: 26rem;
        padding: 2rem
    }
}

/**
 * Swiper 11.2.6
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: March 19, 2025
 */

@font-face {
    font-family: swiper-icons;
    src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

:host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
    transform: translate3d(0px, 0, 0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px
}

.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide {
    transform-style: preserve-3d
}

.swiper-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper {
    scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: none
}

.swiper-css-mode.swiper-centered>.swiper-wrapper::before {
    content: '';
    flex-shrink: 0;
    order: 9999
}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.swiper-virtual .swiper-slide {
    -webkit-backface-visibility: hidden;
    transform: translateZ(0)
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
    height: 1px;
    width: var(--swiper-virtual-size)
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
    width: 1px;
    height: var(--swiper-virtual-size)
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset, 50%);
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color))
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none
}

.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev {
    display: none !important
}

.swiper-button-next svg,
.swiper-button-prev svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center
}

.swiper-rtl .swiper-button-next svg,
.swiper-rtl .swiper-button-prev svg {
    transform: rotate(180deg)
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 10px);
    right: auto
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 10px);
    left: auto
}

.swiper-button-lock {
    display: none
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    content: 'prev'
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 10px);
    left: auto
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    content: 'next'
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-pagination-disabled>.swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
    display: none !important
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, 8px);
    top: var(--swiper-pagination-top, auto);
    left: 0;
    width: 100%
}

.swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(.33);
    position: relative
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    transform: scale(.33)
}

.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    display: inline-block;
    border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .2)
}

button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet:only-child {
    display: none !important
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color))
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical>.swiper-pagination-bullets {
    right: var(--swiper-pagination-right, 8px);
    left: var(--swiper-pagination-left, auto);
    top: 50%;
    transform: translate3d(0px, -50%, 0)
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    transition: .2s transform, .2s top
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s left
}

.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s right
}

.swiper-pagination-fraction {
    color: var(--swiper-pagination-fraction-color, inherit)
}

.swiper-pagination-progressbar {
    background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));
    position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: right top
}

.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0
}

.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-vertical>.swiper-pagination-progressbar {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0
}

.swiper-pagination-lock {
    display: none
}

.swiper-scrollbar {
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    position: relative;
    touch-action: none;
    background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, .1))
}

.swiper-scrollbar-disabled>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
    display: none !important
}

.swiper-horizontal>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
    position: absolute;
    left: var(--swiper-scrollbar-sides-offset, 1%);
    bottom: var(--swiper-scrollbar-bottom, 4px);
    top: var(--swiper-scrollbar-top, auto);
    z-index: 50;
    height: var(--swiper-scrollbar-size, 4px);
    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
}

.swiper-scrollbar.swiper-scrollbar-vertical,
.swiper-vertical>.swiper-scrollbar {
    position: absolute;
    left: var(--swiper-scrollbar-left, auto);
    right: var(--swiper-scrollbar-right, 4px);
    top: var(--swiper-scrollbar-sides-offset, 1%);
    z-index: 50;
    width: var(--swiper-scrollbar-size, 4px);
    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
}

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, .5));
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    left: 0;
    top: 0
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-scrollbar-lock {
    display: none
}

.swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

.swiper-zoom-container>canvas,
.swiper-zoom-container>img,
.swiper-zoom-container>svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

.swiper-slide-zoomed {
    cursor: move;
    touch-action: none
}

.swiper .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000
}

.swiper-free-mode>.swiper-wrapper {
    transition-timing-function: ease-out;
    margin: 0 auto
}

.swiper-grid>.swiper-wrapper {
    flex-wrap: wrap
}

.swiper-grid-column>.swiper-wrapper {
    flex-wrap: wrap;
    flex-direction: column
}

.swiper-fade.swiper-free-mode .swiper-slide {
    transition-timing-function: ease-out
}

.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity
}

.swiper-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-fade .swiper-slide-active {
    pointer-events: auto
}

.swiper-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper.swiper-cube {
    overflow: visible
}

.swiper-cube .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%
}

.swiper-cube .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-cube.swiper-rtl .swiper-slide {
    transform-origin: 100% 0
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 100%;
    opacity: .6;
    z-index: 0
}

.swiper-cube .swiper-cube-shadow:before {
    content: '';
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    filter: blur(50px)
}

.swiper-cube .swiper-slide-next+.swiper-slide {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper.swiper-flip {
    overflow: visible
}

.swiper-flip .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1
}

.swiper-flip .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-creative .swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform, opacity, height
}

.swiper.swiper-cards {
    overflow: visible
}

.swiper-cards .swiper-slide {
    transform-origin: center bottom;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden
}

.map-site__block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.map-site__title {
    margin-bottom: 10px;
}

.map-site__ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.map-site__li {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.map-site__link {
    transition: 0.3s;
}

.map-site__link:hover {
    background-color: #307C32;
    color: #ffffff;
}

.common-modal__close_btn {
    width: 2.4rem;
    height: 2.4rem;
    padding: 0.4rem;
    display: inline-block;
    position: absolute;
    top: 2%;
    right: 1%;
    background: #ffffff;
    border-radius: 50%;
    z-index: 2;
    --type: close;
}

.common-modal__close_btn svg {
    width: 100%;
    height: 100%;
}

.main-input__wrap {
    position: relative;
    display: block;
}

.main-input {
    box-sizing: border-box;
    font-size: 1.6rem;
    line-height: 130%;
    font-weight: 400;
    width: 100%;
    height: var(--input-height, 5rem);
    padding: 1.4rem 2rem;
    display: block;
    border-radius: var(--border-radius, 1.5rem);
    border: medium;
    background-color: var(--color-grayscale-0);
    background-color: var(--color-grayscale-100);
}

.main-input__icons {
    position: absolute;
    right: 1.2rem;
    top: calc(var(--input-height) / 2);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.main-input__icon {
    width: 1.7rem;
    height: 1.7rem;
}

.main-input__validity-icons {
    display: grid;
}

.main-input__invalid-icon,
.main-input__valid-icon {
    grid-area: 1 / 1 / 1 / 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition-property: opacity;
    transition-duration: var(--duration-button);
}

.main-input__invalid-icon {
    fill: var(--color-red);
}

.main-input__valid-icon {
    fill: var(--color-primary-100);
}

.main-input__wrap:has(input.invalid) .main-input__invalid-icon {
    opacity: 1;
}

.main-input__wrap:has(input.valid) .main-input__valid-icon {
    opacity: 1;
}

.menu-link__image.link-image {
    width: 5.2rem;
    height: 5.2rem;
}

.myslider__wrap {
    position: relative;
}

.catalogSlider__wrap.catalogSlider__wrap:not(:has(.swiper-slide:nth-of-type(4))) .myslider__bullets,
.catalogSlider__wrap.catalogSlider__wrap:not(:has(.swiper-slide:nth-of-type(4))) .myslider__btn_wrap,
.catalogCateg__wrap.catalogCateg__wrap:not(:has(.swiper-slide:nth-of-type(3))) .myslider__btn_wrap {
    display: none;
}

.myslider__wrap {
    --gap: 5rem;
    --offset: 2rem;
}

.tagsSlider .swiper-slide *,
.readAlsoSlider .swiper-slide * {
    width: 100%;
}

.myslider__bullets {
    position: static;
    margin-top: 3rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .myslider__bullets {
        display: none;
    }
}

.myslider__bullet {
    width: 8px;
    height: 8px;
    background-color: var(--color-grayscale-300);
    opacity: 1;
    border-radius: 50%;
    transition-property: background-color;
    transition-duration: 400ms;
}

.myslider__bullet.swiper-pagination-bullet-active {
    background-color: var(--color-primary-100);
}

.myslider__btn_wrap {
    width: 100%;
    height: 0;
    display: flex;
    justify-content: space-between;
    -webkit-touch-callout: none;
    user-select: none;
}

.myslider__btn {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.8rem;
    width: var(--slider-button-size, 3.8rem);
    height: 3.8rem;
    height: var(--slider-button-size, 3.8rem);
    background-color: var(--slider-button-color, var(--color-grayscale-0));
    border-radius: 50%;
    transform: translate(0, -100%);
    transition: opacity var(--duration-button);
    transition-property: opacity, background-color;
    transition-duration: var(--duration-button) transition-timing-function: ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: default;
}

.myslider__btn.prev {
    right: calc(100% + var(--offset, 5rem));
    transform: translate(0, -100%) scale(-1, 1);
}

.myslider__btn.next {
    left: calc(100% + var(--offset, 5rem));
}

.myslider__btn:hover {
    background-color: var(--color-primary-100);
}

.myslider__btn:hover svg {
    fill: var(--color-grayscale-0);
}

@media (max-width: 768px) {
    .catalogSlider,
    .catalog2Slider,
    .worksSlider,
    .worksGallerySlider,
    .reviewsSlider,
    .feedbackSlider,
    .tagsSlider,
    .teamSlider,
    .storySlider,
    .myslider__overflow_visible {
        overflow: visible;
    }
}

.myslider__wrap:has(.swiper-slide-active:first-of-type) .myslider__btn.prev {
    opacity: .3;
    opacity: var(--disabled-opacity, .3);
}

.myslider__wrap:has(.swiper-slide-active:first-of-type) .myslider__btn.prev:hover {
    background-color: var(--slider-button-color, var(--color-grayscale-0));
}

.myslider__wrap:has(.swiper-slide-active:first-of-type) .myslider__btn.prev:hover svg {
    fill: var(--color-grayscale-600);
}

.catalogSlider__wrap:has(.swiper-slide-active:nth-last-child(3)) .myslider__btn.next,
.catalog2Slider__wrap:has(.swiper-slide-active:nth-last-child(4)) .myslider__btn.next,
.worksSlider__wrap:has(.swiper-slide-active:nth-last-child(3)) .myslider__btn.next,
.worksGallerySlider__wrap:has(.swiper-slide-active:nth-last-child(3)) .myslider__btn.next,
.reviewsSlider__wrap:has(.swiper-slide-active:nth-last-child(2)) .myslider__btn.next,
.feedbackSlider__wrap:has(.swiper-slide-active:nth-last-child(3)) .myslider__btn.next,
.teamSlider__wrap:has(.swiper-slide-active:nth-last-child(4)) .myslider__btn.next,
.storySlider__wrap:has(.swiper-slide-active:nth-last-child(4)) .myslider__btn.next,
.readAlsoSlider__wrap:has(.swiper-slide-active:nth-last-child(4)) .myslider__btn.next,
.readAlsoSlider__wrap:has(.swiper-slide-active:nth-last-child(3)) .myslider__btn.next,
.myslider__col_1:has(.swiper-slide-active:nth-last-child(1)) .myslider__btn.next,
.myslider__col_2:has(.swiper-slide-active:nth-last-child(2)) .myslider__btn.next,
.myslider__col_3:has(.swiper-slide-active:nth-last-child(3)) .myslider__btn.next,
.myslider__col_4:has(.swiper-slide-active:nth-last-child(4)) .myslider__btn.next,
.myslider__col_5:has(.swiper-slide-active:nth-last-child(5)) .myslider__btn.next,
.myslider__col_6:has(.swiper-slide-active:nth-last-child(6)) .myslider__btn.next,
.myslider__col_7:has(.swiper-slide-active:nth-last-child(7)) .myslider__btn.next {
    opacity: .3;
    opacity: var(--disabled-opacity, .3);
}

.catalogSlider__wrap:has(.swiper-slide-active:nth-last-child(3)) .myslider__btn.next:hover,
.catalog2Slider__wrap:has(.swiper-slide-active:nth-last-child(4)) .myslider__btn.next:hover,
.worksSlider__wrap:has(.swiper-slide-active:nth-last-child(3)) .myslider__btn.next:hover,
.worksGallerySlider__wrap:has(.swiper-slide-active:nth-last-child(3)) .myslider__btn.next:hover,
.reviewsSlider__wrap:has(.swiper-slide-active:nth-last-child(2)) .myslider__btn.next:hover,
.feedbackSlider__wrap:has(.swiper-slide-active:nth-last-child(3)) .myslider__btn.next:hover,
.teamSlider__wrap:has(.swiper-slide-active:nth-last-child(4)) .myslider__btn.next:hover,
.storySlider__wrap:has(.swiper-slide-active:nth-last-child(4)) .myslider__btn.next:hover,
.readAlsoSlider__wrap:has(.swiper-slide-active:nth-last-child(4)) .myslider__btn.next:hover,
.readAlsoSlider__wrap:has(.swiper-slide-active:nth-last-child(3)) .myslider__btn.next:hover,
.myslider__col_1:has(.swiper-slide-active:nth-last-child(1)) .myslider__btn.next:hover,
.myslider__col_2:has(.swiper-slide-active:nth-last-child(2)) .myslider__btn.next:hover,
.myslider__col_3:has(.swiper-slide-active:nth-last-child(3)) .myslider__btn.next:hover,
.myslider__col_4:has(.swiper-slide-active:nth-last-child(4)) .myslider__btn.next:hover,
.myslider__col_5:has(.swiper-slide-active:nth-last-child(5)) .myslider__btn.next:hover,
.myslider__col_6:has(.swiper-slide-active:nth-last-child(6)) .myslider__btn.next:hover,
.myslider__col_7:has(.swiper-slide-active:nth-last-child(7)) .myslider__btn.next:hover {
    background-color: var(--slider-button-color, var(--color-grayscale-0));
}

.catalogSlider__wrap:has(.swiper-slide-active:nth-last-child(3)) .myslider__btn.next:hover svg,
.catalog2Slider__wrap:has(.swiper-slide-active:nth-last-child(4)) .myslider__btn.next:hover svg,
.worksSlider__wrap:has(.swiper-slide-active:nth-last-child(3)) .myslider__btn.next:hover svg,
.worksGallerySlider__wrap:has(.swiper-slide-active:nth-last-child(3)) .myslider__btn.next:hover svg,
.reviewsSlider__wrap:has(.swiper-slide-active:nth-last-child(2)) .myslider__btn.next:hover svg,
.feedbackSlider__wrap:has(.swiper-slide-active:nth-last-child(3)) .myslider__btn.next:hover svg,
.teamSlider__wrap:has(.swiper-slide-active:nth-last-child(4)) .myslider__btn.next:hover svg,
.storySlider__wrap:has(.swiper-slide-active:nth-last-child(4)) .myslider__btn.next:hover svg,
.readAlsoSlider__wrap:has(.swiper-slide-active:nth-last-child(4)) .myslider__btn.next:hover svg,
.readAlsoSlider__wrap:has(.swiper-slide-active:nth-last-child(3)) .myslider__btn.next:hover svg,
.myslider__col_1:has(.swiper-slide-active:nth-last-child(1)) .myslider__btn.next:hover svg,
.myslider__col_2:has(.swiper-slide-active:nth-last-child(2)) .myslider__btn.next:hover svg,
.myslider__col_3:has(.swiper-slide-active:nth-last-child(3)) .myslider__btn.next:hover svg,
.myslider__col_4:has(.swiper-slide-active:nth-last-child(4)) .myslider__btn.next:hover svg,
.myslider__col_5:has(.swiper-slide-active:nth-last-child(5)) .myslider__btn.next:hover svg,
.myslider__col_6:has(.swiper-slide-active:nth-last-child(6)) .myslider__btn.next:hover svg,
.myslider__col_7:has(.swiper-slide-active:nth-last-child(7)) .myslider__btn.next:hover svg {
    fill: var(--color-grayscale-600);
}

.header-contact__additional,
.header-contact__additional:hover,
.header__contact,
.header-contact__phone,
.header__contact:hover {
    transition: all 400ms;
}

.page-loaded:has(.home-intro) .header__contact:hover .header-contact__additional {
    color: #fff;
    opacity: 1;
    transition: all 400ms;
}

.page-loaded.page-scrolled:has(.home-intro) .header__contact:hover .header-contact__additional {
    color: inherit;
    transition: all 400ms;
}

.header__contact:hover .header-contact__phone,
.header-contact__phone:hover {
    color: var(--color-primary-100);
}

.product-info__category-button {
    font-weight: 500;
}

.header-submenu__links {
    margin-top: -2.5rem;
    padding-top: 4rem;
    border-radius: 1.5rem;
}

.header-submenu__name {
    z-index: 2;
}

.vacancy__popover__content_wrap {
    position: relative;
    min-height: 100%;
}

.vacancy__popover_boxshadow {
    position: absolute;
    bottom: 0;
    left: 0.2rem;
    width: calc(100% - 0.4rem);
    height: 1.5rem;
    box-shadow: inset 0px -7px 4px -4px rgba(0, 0, 0, 0.7);
    border-radius: 0 0 5rem 5rem;
}

.vacancy__popover_boxshadow_hide {
    position: absolute;
    bottom: -5rem;
    left: -5rem;
    width: calc(100% + 10rem);
    height: 5rem;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(250, 250, 250, 0) 100%);
    border-radius: 0;
}

.articles__list.blog .articles__card {
    display: grid;
    grid-template-rows: 2fr 1.2fr;
}

@media (max-width: 768px) {
    .articles__list.blog {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    .articles__list.blog .articles__card {
        grid-template-rows: 1fr 0.73fr;
    }
}

.articles__list.blog .catalog-card__content.catalog-card__content {
    display: flex;
    flex-direction: column;
}

.articles__list.blog .catalog-card__date.catalog-card__date {
    margin-top: auto;
}

.readAlsoSlider__wrap .myslider__btn.prev,
.readAlsoSlider__wrap .myslider__btn.next {
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.readAlsoSlider__wrap .myslider__btn:hover {
    background-color: var(--color-primary-100) !important;
}

.readAlsoSlider__wrap .myslider__btn:hover svg {
    fill: var(--color-grayscale-0) !important;
}

.readAlsoSlider .swiper-slide * {
    width: auto !important;
}

@media (max-width: 768px) {
    .readAlsoSlider__wrap .myslider__btn.prev {
        right: auto !important;
        left: 20px !important;
    }
    .readAlsoSlider__wrap .myslider__btn.next {
        left: auto !important;
        right: 20px !important;
    }
}

.descr-block {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
    cursor: pointer;
}

.descr-block .button__icon-box {
    width: 2rem;
    height: 2rem;
    background: #fff;
    transition: .2s all;
}

.descr-block:hover .button__icon-box {
    background: #307C32;
}

.descr-block .button__icon {
    fill: #307C32;
}

.descr-block:hover .button__icon {
    fill: #fff;
}

.intro__stats {
    align-items: center;
}

#descr-form .common-modal__inner {
    max-width: 80%;
    margin: 0 auto;
    max-height: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-grayscale-0);
    border-radius: 20px;
}

.modal-close-button {
    position: fixed;
}

@media (min-width: 768px) {
    #descr-form .common-modal__inner {
        height: auto;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }
    #descr-form .common-modal__content {
        max-height: 80vh !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 768px) {
    .descr-block {
        margin-left: 0;
        margin-bottom: 40px
    }
    .descr-block .button__icon-box {
        width: 1.6rem;
        height: 1.6rem
    }
    #descr-form .common-modal__inner {
        max-width: 90%;
        padding-bottom: 40px;
    }
}

@media (min-width: 769px) {
    .work-example.two-sides {
        min-height: 410px;
    }
}

.flex-offer {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.custom-call-btn {
    background-color: #fff !important;
}

.custom-call-btn .button__name {
    color: #000;
}

.custom-call-btn .social-link__icon {
    background: #307c32;
    fill: #fff;
    transition: .0s all !important;
}

.custom-call-btn .button__icon-box {
    background-color: #307c32 !important;
    transition: .0s all !important;
}

.flex-offer .custom-call-btn:hover {
    background-color: #307c32 !important;
}

.custom-call-btn:hover .button__name {
    color: #fff;
}

.custom-call-btn:hover .button__icon-box {
    background-color: #fff !important;
}

.custom-call-btn:hover .social-link__icon {
    fill: #307c32;
    background: #fff;
}

#ask-form .modal-close-button {
    position: absolute
}

.modal-close-button {
    position: absolute;
}

@media (max-width: 768px) {
    .product-card__price-line {
        align-items: flex-end;
    }
    .completed-works__map {
        max-height: 350px;
    }
    [data-header-background-color=white] .location-button__icon-box {
        border-color: #307c32;
    }
    [data-header-background-color=white] .location-button__icon {
        fill: #307c32;
    }
    [data-header-background-color=white] .logo__image {
        fill: #307c32;
    }
}

.article-chapter__description ul li:before {
    top: 8px !important;
}

@media (hover: hover) {
    .circle-button:hover .circle-button__icon {
        fill: #307c32 !important;
    }
}

.breadcrumbs {
    flex-wrap: nowrap;
    overflow-x: scroll;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none
}