.strategy-directum.company-directum {
    background-color: #0b1d3f;
    background-image: none;

    @media (min-width: 1200px) {
        background-image: url(/application/images/company-management-bg.svg);
    }
}

.company-scheme {
    container-type: inline-size;
}

.company-scheme__canvas {
    position: relative;
    aspect-ratio: 1380 / 795;
    font-size: 1.3043cqw;
    color: #fff;
}

.company-scheme__rays {
    position: absolute;
    left: 50%;
    top: 40%;
    width: 139.28%;
    height: auto;
    max-width: none;
    transform: translate(-49.95%, -56.34%);
    pointer-events: none;
}

.company-scheme__box {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .78em;
    height: 15.09%;
    background: rgba(255, 122, 0, .1);
    border: 1px solid rgba(255, 122, 0, .4);
    border-radius: 1.333em;

    &.company-scheme__box_strategy {
        left: 26.52%;
        top: 0;
        width: 46.96%;
    }

    &.company-scheme__box_base {
        left: 0;
        top: 84.91%;
        width: 100%;
        padding: 0 1.222em;

        .company-scheme__tools {
            width: 100%;
            justify-content: space-between;
            gap: 0;
        }
    }
}

.company-scheme__box-title {
    font-family: 'Montserrat';
    font-weight: 700;
    line-height: 1.219;
    text-transform: uppercase;
}

.company-scheme__tools {
    display: flex;
    gap: 5em;
}

.company-scheme__tool {
    display: flex;
    align-items: center;
    gap: .667em;
    line-height: 1.444;
    white-space: nowrap;
}

.company-scheme__tool-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.667em;
    height: 2.667em;
    background: rgba(255, 255, 255, .1);
    border-radius: .444em;

    img {
        width: 1.333em;
        height: 1.333em;
    }
}

.company-scheme__group {
    position: absolute;
    display: flex;
    gap: .889em;

    &.company-scheme__group_affairs {
        left: 0;
        top: 15.6%;
        align-items: flex-end;

        .company-scheme__label {
            text-align: right;
        }
    }

    &.company-scheme__group_contracts {
        left: 9.49%;
        top: 44.53%;
    }

    &.company-scheme__group_accounting {
        left: 28.19%;
        top: 60.88%;
        flex-direction: column;
        align-items: flex-end;

        .company-scheme__label {
            text-align: right;
        }

        .company-scheme__list {
            align-self: flex-start;
            margin-top: .889em;
        }
    }

    &.company-scheme__group_other {
        left: 52.9%;
        top: 60.88%;
        flex-direction: column;

        .company-scheme__list {
            margin-top: .889em;
        }
    }

    &.company-scheme__group_hr {
        left: 70.22%;
        top: 16.23%;
        align-items: flex-end;
    }

    &.company-scheme__group_services {
        left: 67.1%;
        top: 37.61%;
    }

    &.company-scheme__group_projects {
        left: 65.43%;
        top: 52.08%;
    }
}

.company-scheme__label {
    font-family: 'Montserrat';
    font-weight: 700;
    line-height: 1.219;
    text-transform: uppercase;
    white-space: nowrap;
}

.company-scheme__list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .7778em;
    line-height: 1.4286;
    color: rgba(255, 255, 255, .6);

    li {
        position: relative;
        margin: 0;
        padding: 0 0 0 .857em;
        font-size: inherit;
        line-height: inherit;
        white-space: nowrap;

        &::before {
            content: '';
            position: absolute;
            left: .2em;
            top: .62em;
            width: .25em;
            height: .25em;
            background: currentColor;
            border-radius: 50%;
        }
    }
}

.company-scheme__core {
    position: absolute;
    left: 42.03%;
    top: 26.16%;
    width: 15.94%;
}

.company-core {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px solid #5a598c;
    background: #280c40 url(/application/images/company-management-core-ring.webp) center / cover no-repeat;
    color: #fff;
    text-decoration: none;
    isolation: isolate;

    &::before {
        content: '';
        position: absolute;
        inset: 11.36%;
        background: #ff7a00;
        border-radius: 50%;
        z-index: 0;
    }

    &:hover,
    &:focus-visible {
        color: #fff;
        text-decoration: none;
    }
}

.company-core__play {
    position: absolute;
    left: 34.55%;
    top: 23.64%;
    width: 40.91%;
    height: auto;
    z-index: 1;
    transform: scale(.7778);
    transition: transform .4s ease, z-index 0s .2s;
    will-change: transform;

    .company-core:hover &,
    .company-core:focus-visible & {
        z-index: 3;
        transform: scale(1);
    }
}

.company-core__title {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    font-family: 'Montserrat';
    font-weight: 700;
    line-height: 1.219;
    text-align: center;
    text-transform: uppercase;
    transition: opacity .4s ease;

    .company-core:hover &,
    .company-core:focus-visible & {
        opacity: .3;
    }
}

.company-core__caption {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    font-family: 'Montserrat';
    font-size: .6667em;
    font-weight: 700;
    line-height: 1.219;
    text-transform: uppercase;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity .4s ease;

    .company-core:hover &,
    .company-core:focus-visible & {
        opacity: 1;
    }
}

.company-scheme-mobile {
    max-width: 480px;
    margin-inline: auto;
    color: #fff;
}

.company-scheme-mobile__box {
    position: relative;
    z-index: 2;
    background: rgba(255, 122, 0, .1);
    border: 1px solid rgba(255, 122, 0, .4);
    border-radius: 24px;

    &.company-scheme-mobile__box_strategy {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 12px;
    }

    &.company-scheme-mobile__box_base {
        margin-top: 24px;
        padding: 17px 8px 22px;

        .company-scheme-mobile__box-title {
            text-align: center;
            margin-bottom: 20px;
        }

        .company-scheme-mobile__tools {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }
    }
}

.company-scheme-mobile__box-title {
    font-family: 'Montserrat';
    font-size: 14px;
    font-weight: 700;
    line-height: 1.22;
    text-transform: uppercase;
}

.company-scheme-mobile__tools {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.company-scheme-mobile__tool {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    line-height: 1.5;
}

.company-scheme-mobile__tool-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, .1);
    border-radius: 8px;
}

.company-core-mobile {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 249px;
    aspect-ratio: 1 / 1;
    margin: -53px auto 0;

    &::before,
    &::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }

    &::before {
        width: 100%;
        height: 100%;
        background: rgba(255, 122, 0, .3);
    }

    &::after {
        width: 105px;
        height: 105px;
        background: #ff7a00;
    }
}

.company-core-mobile__title {
    font-family: 'Montserrat';
    font-size: 18px;
    font-weight: 700;
    line-height: 1.22;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    margin-top: 16px;
}

.company-core-mobile__video {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 15px;
    font-size: 12px;
    line-height: 16px;
    color: #fff;
    text-decoration: none;
    background: rgba(40, 12, 64, .2);
    border-radius: 24px;
    transition: background-color .3s ease;

    &:hover,
    &:focus-visible {
        color: #fff;
        text-decoration: none;
        background: rgba(40, 12, 64, .5);
    }
}

.company-tasks-slider {
    position: relative;
    z-index: 2;
    margin-top: -59px;
    padding: 0 40px;

    .slick-list {
        padding: 0;
    }

    .slick-track .slick-slide {
        display: block;
        margin: 0;
        padding: 0;
    }

    .slick-arrow {
        display: block !important;
        top: -5px;
        width: 24px;
        height: 28px;
        opacity: 1;
        background: url(/application/images/strategy-slider-arrow.svg) center / 13px 26px no-repeat;

        &::before {
            display: none;
        }
    }

    .slick-prev {
        left: 0;
        transform: none;
    }

    .slick-next {
        right: 0;
        left: auto;
        transform: rotate(180deg);
    }
}

.company-tasks-slider__item {
    padding: 0 11px;
}

.company-tasks-slider__title {
    font-family: 'Montserrat';
    font-size: 14px;
    font-weight: 700;
    line-height: 1.22;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.company-tasks-slider__list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .6);

    li {
        position: relative;
        margin: 0;
        padding: 0 0 0 12px;
        font-size: inherit;
        line-height: inherit;

        &::before {
            content: '';
            position: absolute;
            left: 3px;
            top: 8px;
            width: 3px;
            height: 3px;
            background: currentColor;
            border-radius: 50%;
        }
    }
}