/* Fonts */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(''),
    url('../fonts/open-sans-v28-latin_cyrillic-regular.woff2') format('woff2'),
    url('../fonts/open-sans-v28-latin_cyrillic-regular.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local(''),
    url('../fonts/open-sans-v28-latin_cyrillic-500.woff2') format('woff2'),
    url('../fonts/open-sans-v28-latin_cyrillic-500.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local(''),
    url('../fonts/open-sans-v28-latin_cyrillic-600.woff2') format('woff2'),
    url('../fonts/open-sans-v28-latin_cyrillic-600.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local(''),
    url('../fonts/open-sans-v28-latin_cyrillic-700.woff2') format('woff2'),
    url('../fonts/open-sans-v28-latin_cyrillic-700.woff') format('woff');
}

/* Variables */
:root {
    /* Color */
    --color-white:       #ffffff;
    --color-black:       #000000;
    --color-blue600:     #2563EB;

    --color-red500:      #BF0F0F;
    --color-red400:      #DB2D2D;

    --color-orange800:   #7C2D12;
    --color-orange600:   #DD4429;
    --color-orange500:   #FF694F;
    --color-orange100:   #FFEDD5;
    --color-orange50:    #FFF7ED;

    --color-green600:    #16A34A;
    --color-green100:    #DCFCE7;

    --color-gray900:     #1A1A1A;
    --color-gray800:     #333333;
    --color-gray700:     #4D4D4D;
    --color-gray600:     #666666;
    --color-gray500:     #808080;
    --color-gray400:     #999999;
    --color-gray300:     #B3B3B3;
    --color-gray200:     #CCCCCC;
    --color-gray100:     #E5E5E5;
    --color-gray50:      #F2F2F2;
    --color-gray10:      #FBFBFB;

    /* Font */
    --font-open-sans: "Open Sans", sans-serif;

    /* Container */
    --container-width: 1360px;

    /* Other */
    --header-height: 90px;
    --border-radius-small: 4px;
    --border-radius-medium: 12px;
    --border-radius-large: 16px;

    /* Z-index values */
    --z-index-header: 250;
    --z-index-overlay: 450;
    --z-index-modal: 1000;
    --z-index-navigation: 10000;
    --z-index-drop-down: 2000;
}

@media (max-width: 1200px) {
    :root {
        --header-height: 60px;
    }
}

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* Tag styles */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--font-open-sans);
    line-height: 1.2;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-gray800);
    overflow-y: scroll;
}

main {
    display: flex;
    flex-direction: column;
    padding-top: var(--header-height);
    min-height: calc(100vh - var(--header-height));
}

.home-wrapper {
    padding-top: 0;
}

ul,
ol {
    list-style: none;
}

a {
    color: #095be2;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

svg {
    fill: var(--color-gray900);
    transition: .2s;
}

button {
    font-family: inherit;
    border: none;
    background: none;
    cursor: pointer;
}

textarea {
    font-family: inherit;
    font-size: inherit;
    border: none;
    background: none;
}

select {
    appearance: none;
    -moz-appearance: none;
}

/* Scrollbar */
.scroll-bar {
    overflow-y: scroll;
}

.scroll-bar::-webkit-scrollbar,
body::-webkit-scrollbar {
    background-color: transparent;
    width: 14px
}

.scroll-bar::-webkit-scrollbar-button,
body::-webkit-scrollbar-button {
    display: none
}

.scroll-bar::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background-color: var(--color-gray200);
    border: 3px solid var(--color-gray50);
    border-radius: 16px
}

.scroll-bar::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background-color: var(--color-gray50);
}

.scroll-bar::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-gray500);
}

/* Lock scrollbar */
.lock-scrollbar {
    position: fixed;
    overflow-y: scroll;
    width: 100%;
}

.visually-hidden {
    clip: rect(0 0 0 0);
    height: 1px;
    position: absolute;
    width: 1px
}

/* Container */
.container {
    padding-left: calc(50% - var(--container-width) / 2);
    padding-right: calc(50% - var(--container-width) / 2);
}

@media (max-width: 1800px) {
    .container {
        padding-left: 130px;
        padding-right: 130px;
    }
}

@media (max-width: 1440px) {
    .container {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 1200px) {
    .container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 768px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.button {
    display: inline-grid;
    grid-auto-flow: column;
    grid-column-gap: 12px;
    justify-content: center;
    align-items: center;
    padding: 12px 32px;
    line-height: 1;
    font-size: 18px;
    font-weight: 600;
    border: 1px solid var(--color-red400);
    border-radius: var(--border-radius-small);
    color: var(--color-white);
    transition: color .2s, background-color .2s;
    z-index: 3;
}

.button_small {
    font-size: 16px;
}

.button_red {
    background-color: var(--color-red400);
}

.button_red:hover {
    background-color: var(--color-red500);
    border-color: var(--color-red500);
}

.button_red:disabled {
    cursor: default;
    user-select: none;
    border-color: var(--color-gray200);
    background-color: var(--color-gray200);
}

.button_stroke_red {
    color: var(--color-red400);
    background-color: transparent;
}

.button_stroke_red:hover {
    color: var(--color-white);
    background-color: var(--color-red500);
}

.button_gray {
    background-color: var(--color-gray400);
    border-color: var(--color-gray400);
}

.button_gray:hover {
    background-color: var(--color-gray500);
    border-color: var(--color-gray500);
}

.button_orange {
    color: var(--color-orange500);
    border-color: var(--color-orange500);
}

.button_orange:hover {
    color: var(--color-orange600);
    border-color: var(--color-orange600);
}

.button_orange .button__icon {
    fill: var(--color-orange500);
}

.button_orange:hover .button__icon {
    fill: var(--color-orange600);
}

.button__icon {
    fill: var(--color-white);
    transition: fill .2s;
}

/* Icon sizes */
.icon-small {
    width: 16px;
    height: 16px;
}

.icon-medium {
    width: 20px;
    height: 20px;
}

.icon-large {
    width: 24px;
    height: 24px;
}

.text-color-orange500 {
    color: var(--color-orange500);
}

.text-color-red500 {
    color: var(--color-red500);
}

/* Input */
.label {
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 12px;
    line-height: 1;
    font-size: 16px;
    font-weight: 600;

}
.test .label {
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 12px;
    line-height: 1;
    font-size: 16px;
    font-weight: 600;
    min-width: 43%;
}

.label__description {
    margin-left: 16px;
}

.label__subdescription {
    line-height: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gray500);
}

.input {
    position: relative;
    min-width: 50%;
    padding: 10px 16px;
    width: 100%;
    line-height: 1;
    font-size: 16px;
    border: 1px solid var(--color-gray200);
    border-radius: var(--border-radius-small);
    transition: .2s;
}

.input:focus {
    border-color: var(--color-orange600);
}

.textarea {
    padding: 8px 12px;
    width: 100%;
    line-height: 1;
    font-size: 16px;
    border: 1px solid var(--color-gray200);
    border-radius: var(--border-radius-small);
    transition: .2s;
}

.textarea:focus {
    border-color: var(--color-orange600);
}

.textarea::placeholder {
    font-size: 16px;
    color: var(--color-gray600);
}

.select {
    padding: 12px 16px;
    height: 100%;
    font-size: 16px;
    line-height: 1;
    border: 1px solid var(--color-gray200);
    border-radius: var(--border-radius-small);
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7524 15.5524L18.4024 9.89243C18.4962 9.79947 18.5706 9.68887 18.6213 9.56701C18.6721 9.44515 18.6982 9.31444 18.6982 9.18243C18.6982 9.05042 18.6721 8.91972 18.6213 8.79786C18.5706 8.676 18.4962 8.5654 18.4024 8.47243C18.2151 8.28618 17.9616 8.18164 17.6974 8.18164C17.4333 8.18164 17.1798 8.28618 16.9924 8.47243L11.9924 13.4224L7.04244 8.47243C6.85508 8.28618 6.60163 8.18164 6.33744 8.18164C6.07326 8.18164 5.81981 8.28618 5.63244 8.47243C5.53796 8.56505 5.46279 8.67549 5.41129 8.79737C5.35979 8.91924 5.33299 9.05013 5.33245 9.18243C5.33299 9.31474 5.35979 9.44562 5.41129 9.5675C5.46279 9.68937 5.53796 9.79982 5.63244 9.89243L11.2824 15.5524C11.3761 15.6539 11.4897 15.7349 11.6162 15.7904C11.7427 15.8458 11.8793 15.8744 12.0174 15.8744C12.1555 15.8744 12.2922 15.8458 12.4187 15.7904C12.5451 15.7349 12.6588 15.6539 12.7524 15.5524V15.5524Z' fill='%23808080'/%3E%3C/svg%3E%0A");
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-color: transparent;
    cursor: pointer;
}

/* Checkbox */
.check {
    position: relative;
    display: flex;
    align-items: center;
    padding: 16px 16px 16px 44px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gray800);
    border-radius: var(--border-radius-small);
    transition: .2s;
    cursor: pointer;
}

.check:hover {
    background-color: var(--color-gray50);
}

.active.check {
    background-color: var(--color-orange50);
}

.active.check:hover {
    background-color: var(--color-orange100);
}

.check__box {
    position: absolute;
    top: 50%;
    left: 16px;
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-gray200);
    border-radius: var(--border-radius-small);
    transform: translateY(-50%);
    transition: .2s;
}

.check__input:checked + .check__box {
    background-color: var(--color-orange500);
    border-color: var(--color-orange500);
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.20741 0.792787C9.39488 0.980314 9.50019 1.23462 9.50019 1.49979C9.50019 1.76495 9.39488 2.01926 9.20741 2.20679L4.20741 7.20679C4.01988 7.39426 3.76557 7.49957 3.50041 7.49957C3.23524 7.49957 2.98094 7.39426 2.79341 7.20679L0.793407 5.20679C0.611249 5.01818 0.510455 4.76558 0.512733 4.50339C0.515012 4.24119 0.62018 3.99038 0.805589 3.80497C0.990997 3.61956 1.24181 3.51439 1.50401 3.51211C1.7662 3.50983 2.0188 3.61063 2.20741 3.79279L3.50041 5.08579L7.79341 0.792787C7.98094 0.605316 8.23524 0.5 8.50041 0.5C8.76557 0.5 9.01988 0.605316 9.20741 0.792787Z' fill='white'/%3E%3C/svg%3E%0A");
    background-size: 12px 12px;
    background-position: 40% 46%;
    background-repeat: no-repeat;
}

.check__input:focus + .check__box {
    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-orange500);
}

/* Radio button */
.radio {
    position: relative;
    display: flex;
    align-items: center;
    padding: 16px 16px 16px 44px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gray800);
    border-radius: var(--border-radius-small);
    cursor: pointer;
    transition: .2s;
}

.radio:hover {
    background-color: var(--color-gray50);
}

.active.radio {
    background-color: var(--color-orange50);
}

.active.radio:hover {
    background-color: var(--color-orange100);
}

.radio__box {
    content: '';
    position: absolute;
    top: 50%;
    left: 16px;
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-gray200);
    border-radius: 50%;
    transform: translateY(-50%);
    transition: .3s;
}

.radio__box:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: var(--color-white);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: .3s;
}

.radio__input:checked + .radio__box:after {
    width: 6px;
    height: 6px;
}

.radio__input:checked + .radio__box {
    background-color: var(--color-orange500);
    border-color: var(--color-orange500);
}

.radio__input:active + .radio__box {
    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-orange500);
}

.radio__content {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 12px;
    align-items: center;
    width: 100%;
}

/* File input */
.file {
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 4px;
    justify-items: center;
    /*padding: 22px 16px 26px 16px;*/
    width: 100%;
    border: 2px dashed var(--color-gray200);
    border-radius: var(--border-radius-small);
    cursor: pointer;
    transition: border-color .2s;
}

.file:hover {
    border-color: var(--color-orange500);
}

.file__icon {
    width: 48px;
    height: 48px;
    stroke: var(--color-gray300);
    fill: transparent;
}

.file__extension {
    margin-bottom: 4px;
    line-height: 1.3;
    font-size: 12px;
    color: var(--color-gray400);
}

.order__file-list {
    display: grid;
    grid-auto-flow: row;
    justify-content: start;
    justify-items: start;
    grid-row-gap: 4px;
    margin-top: 12px;
    margin-bottom: 30px;
}

.file__name {
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 4px;
    justify-content: start;
    align-items: center;
    margin-top: 4px;
    margin-left: 16px;
    max-width: 500px;
    font-size: 16px;
    font-weight: 600;
    color: #2563eb;
    cursor: pointer;
    transition: color .2s;
}

.file__name:hover {
    color: var(--color-red400);
}

.file__name span {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.file__name-icon {
    fill: var(--color-gray400);
}

.file__name:hover .file__name-icon {
    fill: var(--color-red400);
}

.file__description {
    line-height: 1.5;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray500);
}

.box {
    padding: 48px 64px;
    background-color: var(--color-white);
    border-radius: var(--border-radius-medium);
}

.box_small {
    padding: 48px;
}

@media (max-width: 1440px) {
    .box {
        padding: 48px 32px;
    }
}

@media (max-width: 1200px) {
    .box_small {
        padding: 32px 24px;
    }
}

@media (max-width: 768px) {
    .box {
        padding: 32px 16px;
    }

    .box_small {
        padding: 24px 12px;
    }
    .box_shadow {
        box-shadow: -2px -2px 8px rgba(0, 0, 0, 0.05), 8px 8px 16px rgba(0, 0, 0, 0.1);
    }
}

.headline-background {
    position: absolute;
    top: 48px;
    left: calc(50% - var(--container-width) / 2 - 160px);
    width: max-content;
    line-height: 1;
    font-size: 100px;
    font-weight: 700;
    color: rgba(51, 51, 51, 0.04);
    user-select: none;
    z-index: -1;
}

@media (max-width: 1800px) {
    .headline-background {
        top: 42px;
        left: 130px;
        font-size: 80px;
    }
}

@media (max-width: 1440px) {
    .headline-background {
        top: 32px;
        left: 40px;
    }
}

@media (max-width: 1200px) {
    .headline-background {
        top: 42px;
        left: 24px;
        font-size: 50px;
    }
}

@media (max-width: 768px) {
    .headline-background {
        display: none;
        top: 34px;
        left: 4px;
        font-size: 32px;
    }
}

/* Headline */
.headline {
    line-height: 1.5;
    font-size: 64px;
    font-weight: 600;
}

.headline_indent {
    margin-bottom: 48px;
}

@media (max-width: 1800px) {
    .headline {
        font-size: 48px;
    }
}

@media (max-width: 1440px) {
    .headline {
        font-size: 38px;
    }
}

@media (max-width: 768px) {
    .headline {
        font-size: 28px;
    }

    .headline_indent {
        margin-bottom: 24px;
    }
}

/* Section logo */
.section-logo {
    position: absolute;
    top: 0;
    right: calc(50% - var(--container-width) / 2 - 410px);
    width: 824px;
    height: 756px;
    z-index: -1;
}

.section-logo_left {
    right: unset;
    left: calc(50% - var(--container-width) / 2 - 410px);
}

@media (max-width: 1800px) {
    .section-logo {
        right: -150px;
        width: 614px;
        height: 562px;
    }

    .section-logo_left {
        right: unset;
        left: -410px;
    }
}

@media (max-width: 1440px) {
    .section-logo {
        width: 438px;
        height: 400px;
    }
}

.section-logo_large {
    width: 1052px;
    height: 964px;
}

/* Header */
.header {
    position: fixed;
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    padding-bottom: 24px;
    width: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: var(--z-index-header);
}

.header__menu {
    display: none;
}

.header__logo-link {
    display: flex;
}

.header__logo {
    height: 42px;
}

.header__group {
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 32px;
    justify-content: end;
    align-items: center;
}

.header__link-logo {
    display: flex;
}

.header__list {
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 32px;
    justify-content: end;
    align-items: center;
}

.header__list li:first-child {
    margin-right: 32px;
}

.header__link {
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 8px;
    justify-content: start;
    align-items: center;
    padding: 8px 0;
    line-height: 1.5;
    color: var(--color-white);
    transition: .2s;
}

.header__link:hover {
    color: var(--color-orange500);
}

.header__icon {
    fill: var(--color-white);
}

.header__link:hover .header__icon {
    fill: var(--color-orange500);
}

.header__language {
    padding-left: 12px;
    width: 66px;
    line-height: 1.5;
    font-family: var(--font-open-sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-white);
    background-image: url("../sprites/arrow.svg");
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: 100% 50%;
    background-color: transparent;
    border-radius: unset;
    appearance: none;
    cursor: pointer;
}

.header__language-item {
    padding: 0 5px;
    color: var(--color-gray800);
}

.header__account {
    display: none;
}

@media (max-width: 1200px) {
    .header {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .header__menu {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: -6px;
        padding: 6px;
    }

    .header__link-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .header__logo {
        width: 135px;
        height: 33px;
    }

    .header__group {
        display: none;
    }

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

    .header__account-icon {
        fill: var(--color-white);
    }
}

.navigation {
    display: none;
}

@media (max-width: 1200px) {
    .navigation {
        position: fixed;
        top: 0;
        left: 0;
        display: grid;
        grid-auto-flow: row;
        align-content: start;
        padding: 32px 16px;
        max-width: 390px;
        width: 100%;
        height: 100vh;
        color: var(--color-white);
        background-color: var(--color-gray900);
        transform: translate3d(-100%, 0, 0);
        transition: .3s;
        overflow-y: auto;
        z-index: var(--z-index-navigation);
    }

    .active.navigation {
        transform: translate3d(0, 0, 0);
    }

    .navigation__close {
        position: absolute;
        top: 32px;
        right: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 6px;
    }

    .navigation__close svg {
        transform: rotate(45deg);
    }

    .navigation__label {
        margin-bottom: 48px;
        line-height: 1.5;
        font-size: 24px;
        font-weight: 700;
    }

    .navigation__list {
        display: grid;
        grid-auto-flow: row;
        grid-row-gap: 16px;
        margin-bottom: 32px;
    }

    .navigation__item {
        display: grid;
        grid-auto-flow: column;
        grid-column-gap: 8px;
        justify-content: start;
        align-items: center;
        line-height: 1.5;
        font-size: 16px;
        font-weight: 500;
        color: var(--color-white);
    }

    .navigation__account {
        margin-bottom: 16px;
    }

    .navigation__language {
        display: grid;
        grid-auto-flow: column;
        grid-column-gap: 24px;
        justify-content: start;
        margin-bottom: 32px;
    }

    .navigation__language-item {
        position: relative;
        padding-bottom: 6px;
        line-height: 1;
        font-size: 18px;
        font-weight: 600;
        color: var(--color-gray400);
        border-bottom: 2px solid transparent;
        transition: .2s;
    }

    .active.navigation__language-item {
        color: var(--color-white);
        border-color: var(--color-white);
    }

    .navigation__language-item + .navigation__language-item:before {
        content: '';
        position: absolute;
        left: -12px;
        width: 1px;
        height: 24px;
        background-color: var(--color-gray600);
    }

    .navigation__contacts {
        display: grid;
        grid-auto-flow: row;
        grid-row-gap: 16px;
        margin-bottom: 32px;
        padding-top: 32px;
        line-height: 1.5;
        font-size: 16px;
        font-weight: 500;
        color: var(--color-white);
        border-top: 1px solid var(--color-gray700);
    }

    .navigation__contact {
        display: grid;
        grid-auto-flow: column;
        grid-column-gap: 12px;
        justify-content: start;
        align-items: start;
    }

    .navigation__icon {
        fill: var(--color-white);
    }

    .navigation__socials {
        display: grid;
        grid-auto-flow: column;
        grid-column-gap: 12px;
        justify-content: start;
        align-items: center;
        margin-left: -6px;
    }

    .navigation__social {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 6px;
    }

    .navigation__social-icon {
        width: 32px;
        height: 32px;
        fill: var(--color-white);
    }

    .navigation__decor {
        position: absolute;
        bottom: 12px;
        left: 16px;
        width: 160px;
        height: 146px;
    }
}

/* Footer */
.footer {
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 48px;
    padding-top: 48px;
    color: var(--color-white);
    background-color: var(--color-gray900);
}

.footer__content {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-column-gap: 96px;
}

.footer__group {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: start;
}

.footer__column {
    position: relative;
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 24px;
    align-content: start;
}

.footer__column_social:after {
    content: '';
    position: absolute;
    left: -48px;
    width: 1px;
    height: 100%;
    background-color: var(--color-gray700);
}

.footer__headline {
    line-height: 1.5;
    font-size: 20px;
    font-weight: 700;
}

.footer__list {
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 16px;
}

.footer__list_logo {
    max-width: 307px;
    line-height: 1.5;
}

.footer__logo {
    width: 307px;
    height: 72px;
}

.footer__link {
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 12px;
    justify-content: start;
    align-items: center;
    font-size: 16px;
    color: var(--color-white);
    transition: .2s;
}

.footer__link:hover {
    color: var(--color-orange500);
}

.footer__icon {
    fill: var(--color-white);
}

.footer__link:hover .footer__icon {
    fill: var(--color-orange500);
}

.footer__social {
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 24px;
    justify-content: start;
    align-items: center;
    margin-top: 54px;
}

.footer__social-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer__social-icon {
    width: 32px;
    height: 32px;
    fill: var(--color-white);
}

.footer__social-item:hover .footer__social-icon {
    fill: var(--color-orange500);
}

.footer__language {
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 24px;
    justify-content: start;
}

.footer__language-item {
    position: relative;
    padding-bottom: 6px;
    color: var(--color-gray400);
    border-bottom: 2px solid transparent;
    transition: .2s;
}

.footer__language-item:hover {
    color: var(--color-white);
    border-color: var(--color-white);
}

.active.footer__language-item {
    color: var(--color-white);
    border-color: var(--color-white);
}

.footer__language-item + .footer__language-item:before {
    content: '';
    position: absolute;
    left: -12px;
    width: 1px;
    height: 24px;
    background-color: var(--color-gray600);
}

.footer__copyright {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 16px;
    line-height: 1;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-white);
    background-color: var(--color-gray800);
}

.footer__copyright a:hover {
    text-decoration: underline;
}

@media (max-width: 1440px) {
    .footer {
        grid-row-gap: 32px;
        padding-top: 32px;
    }

    .footer__content {
        grid-column-gap: 80px;
    }

    .footer__list_logo {
        max-width: 248px;
        line-height: 1.5;
    }

    .footer__logo {
        width: 248px;
        height: 60px;
    }

    .footer__list {
        grid-row-gap: 12px;
        font-size: 14px;
    }

    .footer__column {
        grid-row-gap: 16px;
    }

    .footer__headline {
        font-size: 16px;
    }

    .footer__link {
        font-size: 14px;
    }

    .footer__column_social:after {
        left: -32px;
    }

    .footer__social-icon {
        width: 24px;
        height: 24px;
    }

    .footer__copyright {
        font-size: 14px;
    }
}

@media (max-width: 1200px) {
    .footer__content {
        grid-template-columns: 1fr;
        grid-row-gap: 12px;
    }

    .footer__link_address {
        max-width: 192px;
    }

    .footer__column_social {
        grid-auto-flow: column;
        justify-content: space-between;
    }

    .footer__social {
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .footer__content {
        grid-row-gap: 24px;
    }

    .footer__group {
        grid-auto-flow: unset;
        grid-template-columns: 1fr 1fr;
        grid-row-gap: 24px;
    }

    .footer__list_logo {
        grid-row: 2 / 3;
    }

    .footer__copyright {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        grid-row-gap: 12px;
        justify-items: center;
        padding-top: 12px;
        padding-bottom: 12px;
        font-size: 12px;
    }
}

@media (max-width: 568px) {
    .footer__group {
        grid-template-columns: 1fr;
    }

    .footer__group .footer__column:last-child {
        grid-row: 1 / 2;
    }

    .footer__list_logo {
        grid-row: 3 / 4;
    }
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    display: grid;
    grid-auto-flow: row;
    max-width: 466px;
    width: calc(100% - 32px);
    transform: translate(-50%, -60%);
    opacity: 0;
    visibility: hidden;
    z-index: var(--z-index-modal);
    transition: .3s;
}

.modal_success {
    text-align: center;
    max-width: 510px;
}

.modal_error {
    text-align: center;
    max-width: 410px;
}

.active.modal {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
}

.modal__image {
    justify-self: center;
    margin-bottom: 16px;
    width: 64px;
    height: 64px;
}

.modal__headline {
    margin-bottom: 24px;
    line-height: 1;
    font-size: 30px;
    font-weight: 600;
}

.modal__description {
    margin-bottom: 32px;
    line-height: 1.3;
    font-size: 18px;
}

.modal__link {
    width: 100%;
}

@media (max-width: 768px) {
    .modal__image {
        margin-bottom: 24px;
        width: 48px;
        height: 48px;
    }

    .modal__headline {
        margin-bottom: 16px;
        font-size: 20px;
    }

    .modal__description {
        margin-bottom: 24px;
        font-size: 16px;
    }
}

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: var(--z-index-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.25);
    visibility: hidden;
    opacity: 0;
    transition: .3s;
}

.fade-in {
    opacity: 1;
    visibility: visible;
}

.login {
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 48px;
}

.login__headline {
    justify-self: center;
    line-height: 1;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-orange500);
}

.login__form {
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 24px;
}

.login__label {
    position: relative;
}

.login__forgot {
    position: absolute;
    top: 0;
    right: 0;
}

.login__label .input {
    padding-right: 40px;
}

.login__forgot-button {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 16px;
}

.login__forgot-button svg {
    fill: var(--color-gray500);
}

.login__form-button {
    margin-top: 8px;
}

.login__button span {
    width: max-content;
}

.login__group {
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 8px;
    justify-content: start;
    justify-self: center;
    line-height: 1;
    font-size: 14px;
    color: var(--color-gray600);
}

.login__link {
    line-height: 1;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-red400);
    transition: .2s;
}

.login__link:hover {
    text-decoration: underline;
    color: var(--color-red500);
}


@media (max-width: 1440px) {
    .login__button {
        padding: 12px 20px;
        width: 100%;
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .login {
        grid-row-gap: 32px;
    }
}

/* Breadcrumbs */
.breadcrumbs {
    display: grid;
    grid-auto-flow: column;
    justify-content: flex-start;
    align-items: center;
    padding: 16px calc(50% - var(--container-width) / 2);
}

.breadcrumbs__item {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
}

.breadcrumbs__item:after {
    content: '';
    display: block;
    margin: 0 4px;
    height: 12px;
    width: 12px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5407 11.2895L9.88071 5.63955C9.78775 5.54582 9.67715 5.47143 9.55529 5.42066C9.43343 5.36989 9.30273 5.34375 9.17071 5.34375C9.0387 5.34375 8.908 5.36989 8.78614 5.42066C8.66428 5.47143 8.55368 5.54582 8.46071 5.63955C8.27446 5.82691 8.16992 6.08036 8.16992 6.34455C8.16992 6.60873 8.27446 6.86219 8.46071 7.04955L13.4107 12.0495L8.46071 16.9995C8.27446 17.1869 8.16992 17.4404 8.16992 17.7045C8.16992 17.9687 8.27446 18.2222 8.46071 18.4095C8.55333 18.504 8.66377 18.5792 8.78565 18.6307C8.90752 18.6822 9.03841 18.709 9.17071 18.7095C9.30302 18.709 9.4339 18.6822 9.55578 18.6307C9.67765 18.5792 9.7881 18.504 9.88071 18.4095L15.5407 12.7595C15.6422 12.6659 15.7232 12.5523 15.7786 12.4258C15.834 12.2993 15.8626 12.1627 15.8626 12.0245C15.8626 11.8864 15.834 11.7498 15.7786 11.6233C15.7232 11.4968 15.6422 11.3832 15.5407 11.2895Z' fill='%23B3B3B3'/%3E%3C/svg%3E%0A");
    background-size: 12px 12px;
}

.breadcrumbs__item:last-of-type:after {
    display: none;
}

.breadcrumbs__link {
    line-height: 1.5;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray300);
    transition: color .2s;
}

.breadcrumbs__item:not(.active):hover .breadcrumbs__link {
    color: var(--color-gray500);
}

.active.breadcrumbs__item {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gray700);
}

@media (max-width: 1800px) {
    .breadcrumbs {
        padding: 16px 130px;
    }
}

@media (max-width: 1440px) {
    .breadcrumbs {
        padding: 16px 40px;
    }
}

@media (max-width: 1200px) {
    .breadcrumbs {
        padding: 16px 24px;
    }
}

@media (max-width: 768px) {
    .breadcrumbs {
        padding: 16px;
    }
}