.promo {
    padding-top: 135px;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    gap: 215px;
    background-size: 100%;
    background-size: cover;
    position: relative;
    z-index: 2;
    background-position: bottom right;
    &::after {
        position: absolute;
        content: '';
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(270deg, rgba(6, 20, 53, 0) 44.71%, rgba(6, 20, 53, 0.5) 85.16%);
        z-index: -1;
        pointer-events: none;
    }
    .content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 12px;
        padding: 10px 10px 10px 20px;
        gap: 10px;
        border-left: 4px solid;
        border-image: linear-gradient(184.17deg,  #E3CA96 9.76%, #A8894C 53.73%, #B28E42 77.78%, #93763A 86.51%, #98793B 95.7%) 1 100%;
        >span {
            font-weight: 400;
            font-size: 12px;
            line-height: 120%;
            text-transform: uppercase;
            color: rgba(174, 176, 180, 0.6);
        }
        h1 {
            font-weight: 600;
            font-size: 50px;
            line-height: 100%;
            color: rgba(0, 0, 0, 0);
            background-clip: text;
            background-image: linear-gradient(74.17deg, #917234 7.74%, #E3CA96 26.76%, #CDB27C 47.44%, #A8894C 53.73%, #B28E42 77.78%, #93763A 86.51%, #98793B 95.7%);
        }
        p {
            font-weight: 500;
            font-size: 20px;
            line-height: 120%;
            color: var(--text-1);
        }
    }
}
.page-content {
    display: grid;
    grid-template-columns: 34% 66%;
    row-gap: 100px;
    margin-bottom: 100px;
    padding-bottom: 100px;
    position: relative;
    &::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: url(/resource/themes/ur/assets/images/content-bg.png) repeat-y;
        background-size: cover;
        background-position: top center;
        z-index: -1;
        pointer-events: none;
    }
    aside {
        position: relative;
        width: 100%;
        height: 100%;
        background: #EFF0F4;
        padding: 40px;
        padding-left: calc(((100vw - 1240px) / 2) - 8px);
        border-right: 1px solid rgba(1, 7, 23, 0.1);
        .burger {
            display: none;
            justify-content: center;
            align-items: center;
            width: 42px;
            height: 42px;
            background: var(--bg-1);
            border: 1px solid var(--bg-1);
            position: relative;
            overflow: hidden;
            transition: var(--transition-1);
            position: absolute;
            left: calc(100% + 2px);
            top: 2px;
            .icon {
                pointer-events: none;
                width: 22px;
                height: 22px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                &::before,
                &::after {
                    content: '';
                    transform: scaleX(1);
                }
                > span {
                    transform: scaleX(0.667);
                }
                &::before,
                &::after,
                >span {
                    width: 100%;
                    height: 1px;
                    background-color: var(--main-bg);
                    transition: var(--transition-1);
                }
            }
        }
        &.open {
            .burger {
                .icon {
                    >span {
                        background: rgba(0, 0, 0, 0);
                    }
                    &::before {
                        transform: scaleX(1) rotateZ(-45deg) translate(-8px, 8px);
                    }
                    &::after {
                        transform: scaleX(1) rotateZ(45deg) translate(-7px, -7px);
                    }
                }
            }
        }
        > .content {
            display: flex;
            flex-direction: column;
            position: sticky;
            top: 40px;

        }
        .top {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            position: relative;
            &::before, &::after {
                content: '';
                position: absolute;
                top: 100%;
                right: 0;
                left: 0;
                height: 20px;
            }
            &::before {
                backdrop-filter: blur(2px);
                mask-image: linear-gradient(to bottom, rgba(239, 240, 244, 0.96) 70%, rgba(239, 240, 244, 0));
                z-index: 10;
                }
            &::after {
                background: linear-gradient(to bottom, rgba(239, 240, 244, 0.9), rgba(239, 240, 244, 0));
            }
            div {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                gap: 2px;
                aspect-ratio: 1/1;
                transition: .35s linear;
                border: 1px solid rgba(1, 7, 23, 0.1);
                background: var(--main-bg);
                position: relative;
                padding: 20px 4px 14px;
                cursor: pointer;
                &:not(.active):hover {
                    border-color: rgba(201, 168, 76, 1);
                }
                &::before {
                    font-family: 'icon';
                    width: 56px;
                    height: 56px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: .35s;
                    color: rgba(0, 0, 0, 0);
                    background-clip: text;
                    background-image: linear-gradient(74.17deg, rgba(1, 7, 23, .6), rgba(1, 7, 23, .6) 95.7%);
                }
                &.legal {
                    &::before {
                        content: '\e015';
                        font-size: 46px;
                    }
                }
                &.personnel {
                    &::before {
                        content: '\e016';
                        font-size: 50px;
                    }
                }
                &::after {
                    content: '';
                    position: absolute;
                    bottom: -1px;
                    left: -1px;
                    right: -1px;
                    height: 4px;
                    background: linear-gradient(74.17deg, rgba(0,0,0,0), rgba(0,0,0,0) 100%);
                    transition: .35s linear;
                }
                p {
                    font-weight: 500;
                    font-size: 14px;
                    line-height: 120%;
                    text-align: center;
                    text-transform: uppercase;
                    color: var(--text-2);
                    opacity: 0.6;
                    transition: .35s linear;
                }
                &.active {
                    background: var(--text-9);
                    border-color: rgba(0,0,0,0);
                    &::before {
                    background-image: linear-gradient(74.17deg, #917234 7.74%, #E3CA96 26.76%, #CDB27C 47.44%, #A8894C 53.73%, #B28E42 77.78%, #93763A 86.51%, #98793B 95.7%);
                    }
                    &::after {
                        background: linear-gradient(74.17deg, #917234 7.74%, #E3CA96 26.76%, #CDB27C 47.44%, #A8894C 53.73%, #B28E42 77.78%, #93763A 86.51%, #98793B 95.7%);
                    }
                    p {
                        opacity: 1;
                    }
                }

            }
        }
        nav {
            width: 100%;
            display: none;
            opacity: 0;
            transition: .35s linear;
            overflow-y: auto;
            max-height: calc(100dvh - 210px);
            padding-bottom: 20px;
            &::-webkit-scrollbar {
                width: 0;
            }
            &.active {
                display: flex;
                opacity: 1;
            }
            .ws-menu {
                display: grid;
                grid-auto-rows: auto;
                grid-auto-flow: row;
                width: 100%;
                height: 100%;
                >.item {
                    display: grid;
                    grid-template-rows: minmax(52px, auto) 0fr;
                    transition: 0.3s  linear;
                    overflow: hidden;
                    border-bottom: 1px solid rgba(119, 123, 134, 0.2);
                    > p, > a {
                        position: relative;
                        display: inline-flex;
                        justify-content: space-between;
                        align-items: center;
                        cursor: pointer;
                        transition: 0.2s linear;
                        width: 100%;
                        font-weight: 500;
                        font-size: 16px;
                        line-height: 100%;
                        opacity: 0.7;
                        color: var(--bg-1);
                        padding: 18px 24px 18px 0;
                        &::after, &::before {
                            position: absolute;
                            content: '';
                            right: 0;
                            height: 7px;
                            width: 1px;
                            opacity: 1;
                            background: var(--text-4);
                            transition: 0.2s linear;
                        }
                        &::before {
                            top: 19px;
                        }
                        &::after {
                            top: 26px;
                        }
                        &:hover {
                            opacity: 1;
                            &:before, &::after {
                                height: 8px;
                            }
                            &::before {
                                transform: rotate(-45deg) translate(-2px, -2px);
                            }
                            &::after {
                                transform: rotate(45deg) translate(-3px, 1px);
                            }
                        }
                    }
                    > p {
                        &::after, &::before {
                            right: 0;
                            height: 1px;
                            width: 7px;
                            top: 25px;
                        }
                        &::before {
                            right: 7px;
                        }
                        &:hover {
                            &:before, &::after {
                                height: 1px;
                            }
                            &::before {
                                transform: rotate(45deg) translate(1px, -1px);
                            }
                            &::after {
                                transform: rotate(-45deg) translate(-1px, -1px);
                            }
                        }
                    }
                    &.arbitration {
                        p {
                            opacity: 1;
                            font-weight: 700;
                        }
                    }
                    .sub-menu {
                        overflow: hidden;
                        transition: 0.3s linear;
                        display: grid;
                        grid-auto-flow: row;
                        grid-auto-rows: minmax(32px, auto);
                        border-left: 1px solid rgba(201, 168, 76, 0.3);
                        justify-content: flex-start;
                        .item {
                            display: flex;
                            align-items: center;
                            justify-content: flex-start;
                            gap: 15px;
                            position: relative;
                            padding-left: 12px;
                            transform: translateX(0px);
                            transition: 0.35s linear;
                            border-left: 3px solid rgba(0,0,0,0);
                            border-image: linear-gradient(184.17deg,  rgba(0,0,0,0), rgba(0,0,0,0) 100%) 1 100%;
                            img {
                                width: 5px;
                            }
                            a {
                                font-weight: 300;
                                font-size: 16px;
                                position: relative;
                                display: flex;
                                align-items: center;
                                text-align: left;
                                color: var(--bg-1);
                                opacity: 0.7;
                                font-weight: 300;
                                transition: .35s linear;
                            }
                                &::after {
                                    content: '';
                                    right: 0;
                                    height: 6px;
                                    aspect-ratio: 1/1;
                                    background: var(--text-4);
                                    transition: 0.35s linear;
                                    opacity: 0;
                                }
                            &:hover {
                                border-image: linear-gradient(184.17deg,  #E3CA96 9.76%, #A8894C 53.73%, #B28E42 77.78%, #93763A 86.51%, #98793B 95.7%) 1 100%;
                                a {
                                    text-shadow: 0 0 1px currentColor;
                                }
                                &::after {
                                    opacity: 1;
                                }
                            }
                        }
                    }
                    &.open {
                        grid-template-rows: minmax(52px, auto) 1fr;
                        padding-bottom: 16px;
                        > p {
                            &::before, &::after {
                                width: 8px;
                            }
                            &::before {
                                transform: rotate(-45deg) translate(5px, -4px);
                            }
                            &::after {
                                transform: rotate(45deg) translate(-5px, -4px);
                            }
                            &:hover {
                                &::before, &::after {
                                    width: 8px;
                                }
                                &::before {
                                    transform: rotate(-45deg) translate(5px, -4px);
                                }
                                &::after {
                                    transform: rotate(45deg) translate(-5px, -4px);
                                }
                            }
                        }
                    }
                }
            }
            p {
                user-select: none; 
            }
        }
    }
    .article {
        display: flex;
        flex-direction: column;
        padding: 40px;
        gap: 40px;
        padding-right: calc(((100vw - 1240px) / 2) - 8px);
        .first {
            padding: 40px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: var(--text-9);
            border-left: 2px solid;
            border-image: linear-gradient(69.96deg, #917234 0.32%, #E3CA96 49.92%, #CDB27C 100%) 1 100%;
            >p {
                font-weight: 300;
                font-style: Italic;
                font-size: 16px;
                line-height: 140%;
                color: var(--text-2);
                opacity: 0.8;
            }
            .person {
                display: grid;
                grid-template-columns: minmax(144px, 18%) 1fr;
                grid-auto-rows: auto;
                grid-template-rows: minmax(20px, auto);
                gap: 6px 20px;
                margin-top: 30px;
                img {
                    aspect-ratio: 1/1;
                    grid-area: 1 / 1 / 5 / 2;
                }
                *:not(img) {
                    grid-column: 2;
                }
                h2 {
                    font-weight: 500;
                    font-size: 20px;
                    line-height: 140%;
                    color: var(--text-2);
                }
                p {
                    font-weight: 300;
                    color: var(--text-2);
                    opacity: .7;
                }
                >span {
                    font-weight: 300;
                    font-size: 14px;
                    line-height: 140%;
                    color: var(--text-7);
                    opacity: 0.7;
                }
                button {
                    width: 266px;
                    span {
                        display: flex;
                        align-items: center;
                        gap: 6px;
                        &::before {
                            width: 20px;
                            aspect-ratio: 1/1;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            content: '\e008';
                            font-family: 'icon';
                            font-size: 16px;
                        }
                    }
                    &::before, &::after {
                        border-width: 140px;
                    }
                    &::before {
                        border-top-width: 140px;
                        border-left-width: 140px;
                    }
                    &::after {
                        border-bottom-width: 140px;
                        border-right-width: 140px;
                    }
                }
            }
        }
        .documents {
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: 10px;
            .item {
                display: grid;
                grid-template-rows: minmax(60px, auto) 0fr;
                position: relative;
                transition: .5s linear;
                background: var(--text-9);
                .head {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 0;
                    transition: .3s linear;
                    position: relative;
                    padding: 20px;
                    align-self: start;
                    h2 {
                        font-weight: 600;
                        font-size: 16px;
                        line-height: 120%;
                        text-transform: uppercase;
                        color: var(--text-2);
                        opacity: 0.65;
                        transition: 0.2s linear;
                    }
                    &::after, &::before {
                        right: 0;
                        height: 2px;
                        width: 10px;
                        top: 30px;
                        position: absolute;
                        content: '';
                        right: 20px;
                        background: var(--text-7);
                        opacity: 0.7;
                        transition: 0.2s linear;
                    }
                    &::before {
                        right: 30px;
                    }
                    &:hover {
                        &::before, &::after {
                            color: var(--text-2);
                            opacity: 1;
                        }
                        &::before {
                            transform: rotate(45deg) translate(2px, -2px);
                        }
                        &::after {
                            transform: rotate(-45deg) translate(-1px, -1px);
                        }
                    }
                }
                .content {
                    transition: .3s linear;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    opacity: 0;
                    >p {
                        font-weight: 500;
                        color: var(--text-2);
                    }
                    .items {
                        display: grid;
                        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                        gap: 10px;
                        margin-bottom: 10px;
                        label {
                            padding: 10px;
                            gap: 4px 10px;
                            background: #EFF0F4;
                            border: none;
                            display: grid;
                            grid-template-columns: 20px 1fr 20px;
                            align-items: flex-start;
                            position: relative;
                            &::before, &::after {
                                font-family: 'icon';
                                width: 20px;
                                aspect-ratio: 1/1;
                                font-size: 17px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                color: var(--text-6);
                            }
                            &::before {
                                content: '\e034';
                                top: 0;
                                left: 0;
                            }
                            &::after {
                                content: '\e033';
                                bottom: 0;
                                right: 0;

                            }
                            span {
                                font-size: 16px;
                                line-height: 120%;
                                grid-column: 2 / 3;
                                &:first-of-type {
                                    font-weight: 500;
                                    color: var(--text-2);
                                    opacity: 0.7;
                                }
                                &:last-of-type {
                                    font-weight: 300;
                                    color: var(--text-6);
                                }
                            }
                            &:hover {
                                span:before {
                                    color: var(--text-4);
                                }
                            }
                            input {
                                position: absolute;
                                z-index: -1;
                                opacity: 0;
                                display: block;
                                width: 0;
                                height: 0;
                            }
                        }
                    }
                }
                &.open {
                    grid-template-rows: minmax(60px, auto) 1fr;
                    .head {
                        h2 {
                            opacity: 1;
                        }
                        &::before , &::after {
                            background: var(--text-2);
                            opacity: 1;
                        }
                        &::before {
                            transform: rotate(-45deg) translate(2px, 2px);
                        }
                        &::after {
                            transform: rotate(45deg) translate(-1px, 1px);
                        }
                        &:hover {
                            &::before {
                                transform: rotate(-45deg) translate(2px, 2px);
                            }
                            &::after {
                                transform: rotate(45deg) translate(-1px, 1px);
                            }
                        }
                    }
                    .content {
                        gap: 10px;
                        padding: 0 20px 10px;
                        opacity: 1;
                    }
                }
            }
        }
    }
    .related {
        grid-column: 1/-1;
        .title {
            display: flex;
            align-items: center;
            padding-left: 6px;
            width: 100%;
            min-height: 26px;
            border-left: 4px solid rgba(174, 176, 180, 0.5);
            font-weight: 400;
            font-size: 12px;
            line-height: 120%;
            text-transform: uppercase;
            color: var(--text-6);
            opacity: 0.5;
            margin-bottom: 10px;
        }
        h2 {
            display: inline-flex;
            justify-content: space-between;
            font-weight: 600;
            font-size: 24px;
            line-height: 120%;
            margin-bottom: 40px;
            gap: 20px;
            flex-wrap: wrap-reverse;
            width: 100%;
            color: var(--text-2);
            a {
                font-weight: 400;
                font-size: 14px;
                line-height: 120%;
                color: rgba(1, 7, 23, .7);
                display: flex;
                align-items: center;
                gap: 4px;
                transition: .3s;
                margin-left: auto;
                &::after {
                    content: '\e006';
                    font-family: 'icon';
                    font-size: 12px;
                    width: 16px;
                    aspect-ratio: 1/1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                &:hover {
                    color: var(--text-4);
                }
            }
        }
        .items {
            display: flex;
            gap: 20px;
            .item {
                padding: 30px;
                border: 1px solid;
                border-image-source: radial-gradient(54.75% 73% at 100% 100.35%, rgba(46, 49, 146, 0) 0%, rgba(46, 49, 146, 0.1) 100%);
                border-image-slice: 1;
                background: var(--main-bg);
                display: flex;
                flex-direction: column;
                align-items: stretch;
                &::before {
                    font-family: 'icon';
                    width: 24px;
                    height: 31px;
                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    border-bottom: 1px solid rgba(205, 178, 150, 1);
                    color: var(--text-7);
                    font-size: 22px;
                    margin-bottom: 6px;
                }
                &:first-child::before {
                    content: '\e024';
                }
                &:nth-child(2)::before {
                    content: '\e025';
                }
                &:last-child::before {
                    content: '\e026';
                }
                h3 {
                    margin-bottom: 10px;
                    font-weight: 500;
                    font-size: 20px;
                    line-height: 118%;
                    color: var(--text-2);
                }
                p {
                    margin-bottom: 24px;
                    font-weight: 300;
                    font-size: 16px;
                    line-height: 120%;
                    color: var(--text-2);
                    opacity: .65;
                }
                a {
                    margin-top: auto;
                    margin-left: auto;
                    color: rgba(119, 123, 134, .5);
                    display: flex;
                    align-items: center;
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 120%;
                    letter-spacing: 0px;
                    gap: 4px;
                    transition: .2s;
                    &::after {
                        content: '\e006';
                        font-family: 'icon';
                        font-size: 12px;
                        width: 16px;
                        aspect-ratio: 1/1;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    &:hover {
                        color: var(--text-4);
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 1340px) {
    .page-content {
        aside {
            padding-left: 40px;
        }
        .article {
            padding-right: 40px;
        }
    }
}
@media screen and (max-width: 1279px) {
    .promo {
        padding-top: 110px;
        background-position: 60% center;
        .content {
            h1 {
                font-size: 44px;
            }
            h2 {
                font-size: 18px;
            }
            p {
                font-size: 18px;
            }
        }
    }
    .page-content {
        grid-template-columns: 27% 73%;
        row-gap: 50px;
        padding-bottom: 50px;
        margin-bottom: 50px;
        aside {
            padding: 20px;
            .top {
                div {
                    &::before {
                        width: 50px;
                        height: 50px;
                    }
                    &.legal::before {
                        font-size: 42px;
                    }
                    &.personnel {
                        &::before {
                            font-size: 42px;
                        }
                    }
                    p {
                        font-size: 12px;
                    }
                }
            }
            nav {
                .ws-menu {
                    >.item {
                        > a {
                            &::after, &::before {
                                height: 10px;
                                right: 5px;
                            }
                            &::before {
                                top: 18px;
                                transform: rotate(-45deg) translateY(1px);
                            }
                            &::after {
                                top: 26px;
                                transform: rotate(45deg) translateY(-1px);
                            }
                            &:hover {
                                &::before {
                                    top: 18px;
                                    transform: rotate(-45deg) translateY(1px);
                                }
                                &::after {
                                    top: 26px;
                                    transform: rotate(45deg) translateY(-1px);
                                }
                            }
                        }
                        > p {
                            &::after, &::before {
                                width: 9px;
                                height: 1px;
                                transform: unset;
                                bottom: unset;
                                top: 26px;
                                right: -2px;
                            }
                            &::before {
                                transform: rotate(45deg) translate(0px, 0px);
                                right: 5px;
                            }
                            &::after {
                                transform: rotate(-45deg) translate(-1px, -1px);
                            }
                            &:hover {
                                &::after, &::before {
                                    width: 9px;
                                    height: 1px;
                                    transform: unset;
                                    bottom: unset;
                                    top: 26px;
                                    right: -2px;
                                }
                                &::before {
                                    transform: rotate(45deg) translate(0px, 0px);
                                    right: 5px;
                                }
                                &::after {
                                    transform: rotate(-45deg) translate(-1px, -1px);
                                }
                            }
                        }
                        &.open {
                            > p {
                                &::before {
                                    transform: rotate(-45deg) translate(1px, 1px);
                                }
                                &::after {
                                    transform: rotate(45deg) translate(-1px, 1px);
                                }
                                &:hover {
                                    &::before {
                                        transform: rotate(-45deg) translate(1px, 1px);
                                    }
                                    &::after {
                                        transform: rotate(45deg) translate(-1px, 1px);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .article {
            padding-right: 20px;
            .documents {
                .item {
                    & .head {
                        &::before {
                            transform: rotate(45deg) translate(2px, -2px);
                        }
                        &::after {
                            transform: rotate(-45deg) translate(-1px, -1px);
                        }
                        &:hover {
                            &::before {
                                transform: rotate(45deg) translate(2px, -2px);
                            }
                            &::after {
                                transform: rotate(-45deg) translate(-1px, -1px);
                            }
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 1130px) {
    .promo {
        background-position: 77% center;
    }
    .page-content {
        grid-template-columns: 100%;
        position: relative;
        aside {
            position: absolute;
            top: 0;
            bottom: 0;
            z-index: 10;
            max-width: 305px;
            transition: .3s linear;
            left: -305px;
            height: auto;
            .burger {
                display: flex;
            }
            &.open {
                left: 0;
            }
            .content {
                position: static;
            }
            nav {
                overflow-y: unset;
            }
        }
        .related {
            .items {
                gap: 10px;
                overflow: auto;
                .item {
                    width: 275px;
                    min-width: 275px;
                }
            }
        }
    }
}
@media screen and (max-width: 767px) {
    .promo {
        padding-top: 73px;
        gap: 90px;
        .content {
            h1 {
                font-size: 28px;
            }
            p {
                font-size: 16px;
            }
        }
    }
    .page-content {
        .article {
            padding: 50px 10px 0;
            .first {
                padding: 20px;
                .person {
                    grid-template-columns: 100%;
                    img {
                        max-width: 144px;
                    }
                    *:not(img) {
                        grid-column: 1;
                    }
                }
            }
        }
    }
}