/* Minification failed. Returning unminified contents.
(8,33): run-time error CSS1039: Token not allowed after unary operator: '-color-red'
(60,32): run-time error CSS1039: Token not allowed after unary operator: '-color-red'
(90,28): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(91,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(106,32): run-time error CSS1039: Token not allowed after unary operator: '-color-red'
(237,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(238,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(239,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(240,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(241,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(242,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(243,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(244,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(288,28): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(291,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(300,27): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(308,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family'
(314,22): run-time error CSS1039: Token not allowed after unary operator: '-color-light-gray'
(315,17): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(437,25): run-time error CSS1039: Token not allowed after unary operator: '-color-gray'
(444,29): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(495,28): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(531,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(540,21): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(548,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(567,28): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(572,32): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(582,32): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(613,32): run-time error CSS1039: Token not allowed after unary operator: '-color-red'
(618,21): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(627,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(642,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(655,21): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(704,28): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(705,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(710,17): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(714,20): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(718,32): run-time error CSS1039: Token not allowed after unary operator: '-color-red'
(719,21): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(723,32): run-time error CSS1039: Token not allowed after unary operator: '-color-red'
(724,21): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(730,24): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(769,32): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(773,32): run-time error CSS1039: Token not allowed after unary operator: '-color-red'
(877,36): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(883,25): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(998,32): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(1027,21): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1050,24): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1066,29): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1085,21): run-time error CSS1039: Token not allowed after unary operator: '-color-gray'
(1129,28): run-time error CSS1039: Token not allowed after unary operator: '-color-dark'
(1169,25): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1185,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1200,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
 */
.loading-indicator-container {
    position: relative;
    min-height: 80px;
}

.loading-indicator {
    border: 12px solid #f3f3f3;
    border-top: 12px solid var(--color-red);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 2s linear infinite;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 99;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.blocked-section::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 98;
}

.linear-loading-indicator {
    position: absolute;
    width: 100%;
    height: 5px;
    background-color: #f3f3f3;
    overflow: hidden;
    z-index: 50;
    margin-top: 20px;
}

    .linear-loading-indicator::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background-color: var(--color-red);
        animation: horizontal-line 1.5s linear infinite;
    }

@keyframes horizontal-line {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

#toast-container {
}

.breadcrumb li {
    font-size: 12px;
}

.active-customer-type-ribbon {
    text-align: center;
}

.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    background-color: var(--color-dark);
    color: var(--color-white);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: opacity 0.3s ease-in-out;
}

    .scroll-to-top:hover {
        background-color: var(--color-red);
        transition: 0.4s all ease;
    }


.search-results-dropdown {
    position: absolute;
    width: 33%;
    top: 60%;
    left: 40.5%;
    right: 0;
    z-index: 1000;
    background-color: white;
    border: 1px solid #ddd;
    border-top: none;
    display: none;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

    .search-results-dropdown .dropdown-item {
        padding: 8px 12px;
        cursor: pointer;
    }

        .search-results-dropdown .dropdown-item:hover {
            background-color: #f2f2f2;
        }

        .search-results-dropdown .dropdown-item.disabled {
            color: #888;
            cursor: default;
            pointer-events: none;
        }

.header.scroll .search-results-dropdown {
    top: 85%;
}

@media (max-width: 1279px) {
    .search-results-dropdown {
        width: 40%;
        left: 44%;
    }
}

@media (max-width: 999px) {
    .search-results-dropdown {
        width: 40%;
        top: 55%;
        left: 38%;
    }

        .search-results-dropdown .dropdown-item {
            border-bottom: 1px solid #eee;
        }

            .search-results-dropdown .dropdown-item:last-child {
                border-bottom: none;
            }
}

@media (max-width: 767px) {
    .search-results-dropdown {
        width: auto;
        top: 100%;
        left: auto;
    }

    .header.scroll .search-results-dropdown {
        top: 100%;
    }
}

@font-face {
    font-family: 'Helvetica';
    src: url('../../fonts/Helvetica-Neue-Medium.woff2') format('woff2');
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

* {
    -webkit-tap-highlight-color: transparent;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

ul, ol {
    list-style: none;
}

input, select {
    vertical-align: middle;
}

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

:root {
    --font-family: 'Montserrat', sans-serif;
    --color-dark: #191919;
    --color-red: #FF0000;
    --color-white: #FFFFFF;
    --color-light-gray: #F8F8F8;
    --color-gray: #979797;
    --color-light-blue-gray: #D2D5DA;
    --color-green: #008000;
}

a {
    color: inherit;
    text-decoration: none;
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

    a:hover {
        color: inherit;
        text-decoration: none;
    }

    a:focus {
        color: inherit;
        text-decoration: none;
    }

    a:focus {
        outline: none
    }

button {
    padding: 0;
    border: none;
    font: inherit;
    color: inherit;
    background-color: transparent;
    cursor: pointer;
    line-height: normal;
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
    -webkit-appearance: none;
}

input,
textarea {
    outline: none;
    border: none;
    background-color: var(--color-white);
    width: 100%;
    color: rgba(25, 25, 25);
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 400;
    line-height: 125%;
    letter-spacing: 0.08px;
}

    input::placeholder {
        color: rgba(25, 25, 25, 0.30);
        font-family: var(--font-family);
        font-size: 16px;
        font-weight: 400;
        line-height: 125%;
        letter-spacing: 0.08px;
    }

html, body {
    font-family: var(--font-family);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 135%;
    scroll-behavior: smooth;
    background: var(--color-light-gray);
    color: var(--color-dark);
}

.body {
    min-width: 320px;
}

    .body.no-scroll {
        overflow: hidden;
    }

main.main {
    padding-top: 189.66px;
}

.container {
    max-width: 1190px;
    width: auto;
    padding: 0 15px;
    margin: 0 auto;
}

h2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 120%;
}

h3 {
    font-weight: 600;
    line-height: 120%;
}

.navigation {
    content: '';
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12' fill='none'%3E%3Cpath d='M19 6.75C19.4142 6.75 19.75 6.41421 19.75 6C19.75 5.58579 19.4142 5.25 19 5.25V6.75ZM0.469669 5.46967C0.176777 5.76256 0.176777 6.23744 0.469669 6.53033L5.24264 11.3033C5.53553 11.5962 6.01041 11.5962 6.3033 11.3033C6.59619 11.0104 6.59619 10.5355 6.3033 10.2426L2.06066 6L6.3033 1.75736C6.59619 1.46447 6.59619 0.989593 6.3033 0.696699C6.01041 0.403806 5.53553 0.403806 5.24264 0.696699L0.469669 5.46967ZM19 5.25L1 5.25V6.75L19 6.75V5.25Z' fill='%23191919'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center left;
    padding-left: 27px;
    font-weight: 600;
    line-height: 120%;
}

@media (max-width: 1279px) {
    .container {
        max-width: 1000px;
    }

    main.main {
        padding-top: 189.72px;
    }
}

@media (max-width: 999px) {
    .container {
        max-width: 768px;
    }

    main.main {
        padding-top: 211.91px;
    }
}

@media (max-width: 767px) {
    .container {
        max-width: 480px;
    }

    main.main {
        padding-top: 177.52px;
    }
}

.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 100;
}

    .header.scroll .header__inner {
        animation: 0.4s ease 0s 1 normal none running headerIn;
        width: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        padding: 16px 0 20px;
    }

@keyframes headerIn {
    0% {
        transform: translate3d(0px, -100px, 0px);
    }

    100% {
        transform: translate3d(0px, 0px, 0px);
    }
}

.header__top {
    padding: 4px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
}

.header__top-menu {
    width: 100%;
    max-width: 400px;
}

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

        .header__top-menu ul li a {
            color: var(--color-gray);
            font-weight: 600;
            line-height: 120%;
            transition: all .1s ease;
        }

            .header__top-menu ul li a:hover {
                color: var(--color-dark);
            }

.header__top-end {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 248px;
    gap: 10px;
}

.header__top-garage,
.header__top-contacts {
    display: flex;
    align-items: center;
    gap: 7px;
}

.header__garage--icon,
.header__contacts--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: -2px;
}

    .header__garage--icon span,
    .header__contacts--icon span {
        display: none;
    }

.header__top-request,
.header__top-garage p,
.header__top-contacts p {
    font-weight: 600;
    line-height: 120%;
    transition: all .1s ease;
}

    .header__top-request:hover,
    .header__top-garage p:hover,
    .header__top-contacts p:hover {
        -webkit-text-decoration-line: underline;
        text-decoration-line: underline;
        text-decoration: underline;
        text-underline-position: under;
    }

.header__inner {
    background-color: var(--color-dark);
    padding: 24px 0;
}

.header__main {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
}

.header__logo {
    width: 100%;
    max-width: 190px;
    display: flex;
    align-items: center;
}

    .header__logo img {
        width: 100%;
    }

.header__about {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.header__about-mobile {
    display: none;
}

.header__about-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-white);
    font-size: 13px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.406px;
    width: max-content;
}

    .header__about-item span {
        color: var(--color-white);
    }

a.header__about-item:hover {
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    text-decoration: underline;
    text-underline-position: under;
    color: var(--color-white);
}

.header__about-item br {
    display: none;
}

.header__search-button {
    display: none;
}

.header__search {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 5px 5px 5px 14px;
    width: 100%;
    max-width: 295px;
    height: 45px;
    background-color: var(--color-white);
    border-radius: 5px;
}

    .header__search input {
        background-color: var(--color-white);
        width: 100%;
        padding-right: 10px;
    }

        .header__search input::placeholder {
            font-size: 12px;
        }

    .header__search button {
        background-color: var(--color-dark);
        width: 35px;
        height: 35px;
        min-width: 35px;
        border-radius: 4.375px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.header__user-actions {
    width: 100%;
    max-width: 241px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 10px;
}

.header__cart {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .header__cart span {
        position: absolute;
        width: 29px;
        height: 29px;
        background-color: var(--color-red);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-white);
        font-family: 'Helvetica', sans-serif;
        font-size: 16px;
        line-height: normal;
        top: -8px;
        right: -21px;
    }

.header__user-account {
    color: var(--color-white);
    width: 100%;
    max-width: 150px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.header__profile-icon {
    display: none;
}

.header__profile,
.header__logout {
    color: var(--color-white);
    font-size: 16px;
    line-height: 125%;
    letter-spacing: 0.08px;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    text-decoration: underline;
    text-underline-position: under;
}

    .header__profile:hover,
    .header__logout:hover {
        text-decoration: none;
        color: var(--color-white);
    }

.header__burger {
    display: none;
    align-items: center;
    justify-content: center;
}

.header__menu {
    width: 100%;
    max-width: 1146px;
    margin: 0 auto;
}

    .header__menu ul {
        width: 100%;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
    }

        .header__menu ul li {
            width: auto;
            height: auto;
        }

            .header__menu ul li.header__box {
                max-width: 158px;
                width: 100%;
                position: relative;
            }

.header__link {
    padding: 10px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    font-size: 14px;
    font-weight: 600;
    line-height: 125%;
    min-height: 55px;
}

a.header__link:hover {
    background-color: var(--color-dark);
    color: var(--color-white);
    transition-duration: 0.25s;
}

.header__link-open {
    color: var(--color-dark);
}

    .header__link-open .svg-arrow {
        fill: var(--color-dark);
    }

    .header__link-open.active {
        background-color: var(--color-red);
        color: var(--color-white);
    }

    .header__link-open:hover {
        background-color: var(--color-red);
        color: var(--color-white);
        transition-duration: 0.25s;
    }

        .header__link-open:hover .svg-arrow,
        .header__link-open.active .svg-arrow {
            fill: var(--color-white);
        }

.header__menu-top,
.header__block {
    display: none;
}

.header__link-menu {
    position: absolute;
    background-color: #FFFFFF;
    left: 0;
    right: 0;
    overflow: auto;
    opacity: 0;
    pointer-events: none;
    transition: all .1s ease;
    box-shadow: 0px 1px 4px 0px rgba(12, 12, 13, 0.10), 0px 1px 4px 0px rgba(12, 12, 13, 0.05);
}

.header__link-open.active ~ .header__link-menu {
    opacity: 1;
    pointer-events: all;
}

.header__link-open.active svg {
    transform: rotate(180deg);
}

.header__link-menu {
    width: max-content;
    /*max-height: 275px;*/
}

    .header__link-menu::-webkit-scrollbar {
        width: 3px;
    }

    .header__link-menu::-webkit-scrollbar-track {
        background-color: var(--color-white);
    }

    .header__link-menu::-webkit-scrollbar-thumb {
        background-color: var(--color-red);
        border-radius: 6px;
    }

@media (max-width: 1279px) {
    .header__main {
        gap: 20px;
    }

    .header__user-account {
        max-width: 140px;
    }
}

@media (max-width: 999px) {
    .header__about-item br {
        display: block;
    }

    .header__main {
        gap: 10px;
    }

    .header__logo {
        max-width: 150px;
    }

    .header__search {
        max-width: 170px;
    }

    .header__user-actions {
        max-width: 200px;
    }

    .header__link {
        padding: 21px 11px;
        font-size: 14px;
    }

    .header__menu ul li.header__box {
        max-width: 130px;
    }
}

@media (max-width: 767px) {
    .header.scroll .header__inner {
        top: -78px;
        animation: none;
        padding: 20px 0;
    }

    .header__top {
        flex-direction: column;
        gap: 20px;
        padding: 8px 0;
    }

    .header__top-end {
        max-width: 224px;
    }

    .header__top-menu {
        display: none;
    }

        .header__top-menu ul li a,
        .header__top-request,
        .header__top-garage p,
        .header__top-contacts p {
            font-size: 13px;
        }

            .header__top-garage p span,
            .header__top-contacts p span {
                display: none;
            }

    .header__top-request,
    .header__top-garage p,
    .header__top-contacts p {
        -webkit-text-decoration-line: underline;
        text-decoration-line: underline;
        text-decoration: underline;
        text-underline-position: under;
    }

    .header__top-garage,
    .header__top-contacts {
        gap: 6px;
    }

    .header__garage--icon,
    .header__contacts--icon {
        margin: 0;
    }

        .header__garage--icon span,
        .header__contacts--icon span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 19.634px;
            height: 19.634px;
            background-color: var(--color-dark);
            border-radius: 50%;
            font-family: 'Helvetica', sans-serif;
            font-size: 12px;
            font-weight: 500;
            line-height: normal;
            color: var(--color-white);
            margin-left: -4px;
        }

    .header__inner {
        padding: 16px 0;
    }

    .header__about {
        display: none;
    }

    .header__about-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        opacity: 0.6;
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.20);
    }

    .header__logo {
        max-width: 111px;
    }

    .header__main {
        position: relative;
    }

    .header__search {
        position: absolute;
        opacity: 0;
        pointer-events: none;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        top: 37px;
        max-width: 250px;
        transition: all .1s ease;
        z-index: 100;
        -webkit-box-shadow: 0px 0px 32px -8px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 32px -8px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 32px -8px rgba(0,0,0,0.75);
    }

        .header__search.active {
            opacity: 1;
            pointer-events: all;
        }

    .header__cart svg {
        max-width: 25px;
    }

    .header__cart span {
        position: absolute;
        width: 23.598px;
        height: 23.598px;
        font-size: 13.02px;
        top: -6px;
        right: -17.5px;
    }

    .header__burger {
        display: flex;
    }

    .header__profile {
        font-size: 0;
    }

    .header__profile-icon,
    .header__search-button {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header__profile-registration {
        display: none;
    }

    .header__logout {
        display: none;
    }

    .header__user-account {
        width: auto;
    }

    .header__search-button {
        order: 1;
    }

    .header__user-account {
        order: 2;
    }

    .header__cart {
        order: 3;
    }

    .header__user-actions {
        max-width: 120px;
        margin-bottom: 2px;
    }

    .header__menu-content {
        position: fixed;
        inset: 0;
        top: 133px;
        overflow: auto;
        background-color: var(--color-dark);
        padding: 16px 0 35px;
        transform: translateX(100%);
        transition: all .1s ease;
    }

        .header__menu-content.active {
            transform: translateX(0);
        }

        .header__menu-content .container {
            display: flex;
            flex-direction: column;
            gap: 40px;
        }

    .header__menu ul {
        flex-direction: column;
        align-items: start;
        gap: 40px;
    }

        .header__menu ul li.header__box {
            width: auto;
            max-width: none;
        }

    .header__link {
        padding: 0;
        color: var(--color-white);
        min-height: auto;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        width: max-content;
    }

    .header__link-open {
        background-color: transparent;
        font-size: 24px;
        gap: 30px;
        align-items: center;
        justify-content: start;
        width: max-content;
    }

        .header__link-open svg {
            transform: rotate(-90deg);
        }

        .header__link-open .svg-arrow {
            fill: var(--color-white);
        }

    .header__block {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

        .header__block ul {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

            .header__block ul li a {
                color: var(--color-white);
                opacity: 0.6;
                transition: all .1s ease;
                font-size: 18px;
                font-weight: 600;
                line-height: 120%;
            }

                .header__block ul li a:hover {
                    opacity: 1;
                }

    .header__menu-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header__menu-name {
        color: var(--color-gray);
        font-size: 18px;
        font-weight: 600;
        line-height: 120%;
    }

    .header__menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header__link-menu {
        opacity: 1;
        pointer-events: all;
        display: none;
        position: initial;
        background-color: transparent;
        margin-top: 20px;
        max-height: none;
        height: auto;
    }

    .header__link-menu--content {
        max-height: none;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .header__link-open.active ~ .header__link-menu {
        display: flex;
    }

    a.header__link:hover {
        background: transparent;
    }

    .header__link-open.active svg {
        transform: rotate(0deg);
    }
}

.footer {
    background-color: var(--color-dark);
    padding: 49px 0 16px;
}

.footer__top {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 42px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}

.footer__logo {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 153px;
}

    .footer__logo img {
        width: 100%;
    }

.footer__block {
    width: 100%;
    max-width: 452px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: start;
}

    .footer__block ul {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

        .footer__block ul li a {
            color: var(--color-white);
            opacity: 0.6;
            transition: all .1s ease;
        }

            .footer__block ul li a:hover {
                opacity: 1;
            }

.footer__about {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer__about-item {
    color: var(--color-white);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .footer__about-item p span {
        color: rgba(255, 255, 255, 0.60);
    }

a.footer__about-item:hover {
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    text-decoration: underline;
    text-underline-position: under;
    color: var(--color-white);
}

.footer__social {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    gap: 16px;
}

.footer__social-item {
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .1s ease;
}

    .footer__social-item:hover {
        background-color: rgba(255, 255, 255, 0.1);
        border-color: transparent;
    }

.footer__copy {
    margin-top: 14px;
    text-align: center;
    color: rgba(255, 255, 255, 0.50);
    font-size: 10px;
    font-weight: 700;
    line-height: 125%; /* 12.5px */
}

@media (max-width: 1279px) {
    .footer__top {
        gap: 32px;
    }

    .footer__block {
        max-width: 372px;
    }
}

@media (max-width: 999px) {
    .footer__block {
        flex-direction: column;
    }

    .footer__social {
        margin-top: 0;
    }

    .footer__logo {
        max-width: 100px;
    }
}

@media (max-width: 767px) {
    .footer {
        padding-top: 52px;
    }

    .footer__top {
        gap: 60px;
        flex-direction: column;
    }

    .footer__logo {
        max-width: 153.64px;
    }

    .footer__about {
        gap: 20px;
    }

    .footer__about-item {
        font-size: 18px;
        gap: 16px;
    }

        .footer__about-item:first-of-type {
            gap: 14px;
        }

        .footer__about-item p {
            display: flex;
            flex-direction: column;
        }

        .footer__about-item:first-of-type svg {
            min-width: 20px;
            min-height: 18px;
        }

        .footer__about-item:nth-of-type(2) svg {
            min-width: 18px;
            min-height: 24px;
        }

        .footer__about-item:last-of-type svg {
            min-width: 19px;
            min-height: 14px;
        }

    .footer__social {
        gap: 30px;
    }

    .footer__social-item {
        width: 62px;
        height: 62px;
        min-width: 62px;
    }

        .footer__social-item svg {
            min-width: 23.53px;
            min-height: 23.53px;
        }

    .footer__block {
        order: 1;
    }

        .footer__block,
        .footer__block ul {
            gap: 16px;
        }

            .footer__block ul li a {
                font-size: 18px;
            }
}