::-webkit-scrollbar {
    width: 0px;
}

.viewPlace_690 {
    @media (max-width: 991px)  {
        max-width: 500px;
    }
}

h2 {
    font-size: clamp(1.5rem, 1.275rem + 1.125vw, 2.625rem);
    text-transform: uppercase;
    font-family: 'Montserrat';
    font-weight: 700;
}

h1, h3 {
    font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.75rem);
    text-transform: uppercase;
    font-family: 'Montserrat';
}

h4 {
    font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem);
    text-transform: uppercase;
    font-family: 'Montserrat';
    font-weight: 700;
}

h5 {
    font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem);
    text-transform: uppercase;
    font-family: 'Montserrat';
    font-weight: 700;
}

.strategy-section {
    background-color: #fff;
    padding: clamp(3rem, 2.05rem + 4.75vw, 7.75rem) 0;
    overflow: clip;
    z-index: 5;

    @media (max-width: 991px) {
        height: auto !important;
        max-height: none !important;
        position: static !important;
    }

    .inner {
        @media (max-width: 991px) {
            height: auto !important;
            max-height: none !important;
            position: static !important;
        }

        .viewPlace {
            transition: .3s linear;
            will-change: top, bottom;
        }
    }
}

.section-pt {
    padding-top: clamp(3rem, 2.05rem + 4.75vw, 7.75rem);
}

.section-pb {
    padding-bottom: clamp(3rem, 2.05rem + 4.75vw, 7.75rem);
}

.strategy-header {
    position: relative;
    overflow: hidden;
    height: 100vh;
    top: -58px;
    min-height: 500px;    
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
    font-style: italic;
    color: #625F6A;
    z-index: 1;
    align-content: center;

    .viewPlace {
        max-width: 780px;
    }
}

.strategy-header-inner {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    background-image: url(/application/images/strategy-header.svg);
    background-position: 50% 50%;
    align-content: center;
    
    @media (min-width: 1921px) {
        background-size: cover;
    }

    @media (max-width: 767px) {
        position: static !important;
    }
}

.strategy-how-manage {
    position: relative;
    z-index: 2;
    min-height: 100vh;

    @media (max-width: 799px) {
        background-size: 100%;
    }

    .strategy-how-manage-inner {
        width: 100%;
        height: 100vh;        
        top: 0;
        background-position: 50% 50%;
        background-color: #0B1D3F;
        background-image: radial-gradient(50% 50% at 50% 50%, #331B78 0%, rgba(11, 29, 63, 0) 100%);
        background-size: calc(100% - 100px) 200%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        padding: 96px 0;
        align-content: center;
        min-height: calc(100vh - 200px);

        @media (max-width: 1346px) and (min-width: 768px) {
            max-height: 100vh;
            padding: 48px 0;
            min-height: 100vh;
        }

        @media (max-width: 767px) {
            position: static !important;
            max-height: none;
            padding: 48px 0;
        }
    }  
    
    &.fixed {
        .strategy-how-manage-inner {
            position: fixed;
        }        
    }

    h2 {
        color: #6E778E;
        font-size: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
        max-width: 505px;
        text-align: center;
        position: relative;

        @media (max-width: 1199px) {
            max-width: 400px;
        }
        
        @media (max-width: 991px) {
            margin: 60px 0 30px 0;
        }

        i {
            width: clamp(6.25rem, 5.65rem + 3vw, 9.25rem);
            aspect-ratio: 1/1;
            background-image: url(/application/images/strategy-question-icon.svg);
            position: absolute;
            top: calc(-20px - clamp(6.25rem, 5.65rem + 3vw, 9.25rem)/2);
            left: calc(50% - clamp(6.25rem, 5.65rem + 3vw, 9.25rem)/2);
            background-size: contain;
            z-index: -1;
        }

        span {
            color: #fff;
            font-size: clamp(1.625rem, 1.3rem + 1.625vw, 3.25rem);
        }
    }

    .manage-point {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #fff;
        position: relative;
        width: 100%;
        max-width: 389px;

        @media (max-width: 767px) and (min-width: 576px) {
            max-width: 500px;
        }

        @media (max-width: 575px) {
            max-width: 100%;
        }
    }

    .manage-point__circle {
        min-width: clamp(1.5rem, 1.325rem + 0.875vw, 2.375rem);
        max-width: clamp(1.5rem, 1.325rem + 0.875vw, 2.375rem);
        aspect-ratio: 1/1;
        background: radial-gradient(50% 50% at 50% 50%, #9B7DF1 0%, rgba(11, 29, 63, 0) 100%);
        backdrop-filter: blur(10px);
    } 
}

.how-to-change {
    z-index: 3;
    position: relative;

    .how-to-change-inner {
        width: 100%;
        height: 100%;
        bottom: 0;
        padding: clamp(3rem, 2.05rem + 4.5vw, 7rem) 0;
    }
    

    &.fixed {
        .how-to-change-inner {
            position: fixed;
        }        
    }

    h2 {
        @media (min-width: 991px) {
            max-width: 40%;
            min-width: 40%;
        }
    }

    .how-to-change-arrow {
        min-width: 148px;
    }
}

.strategy-switcher {
    display: flex;
    gap: clamp(1.25rem, 0.875rem + 1.875vw, 3.125rem);
    justify-content: center;

    @media (max-width: 1439px) {
        align-items: center;
    }
}

.strategy-switcher-trigger {
    width: 100%;
    height: 1px;
    background-color: red;
}

.strategy-switcher__content {
    display: flex;
    flex-direction: column;
    gap: 42px;
    max-width: 400px;

    .switcher-point__title {
        font-size: clamp(1.25rem, 1.175rem + 0.375vw, 1.625rem);
        text-transform: uppercase;
        font-family: 'Montserrat';
        font-weight: 700;
        padding-bottom: .5rem;        
    }

    .switcher-point {
        font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem);
        opacity: .3;
        cursor: pointer;
        transition: .4s ease-in-out;

        @media (max-width: 991px) {
            opacity: 1;
        }

        .switcher-point__title {
            @media (max-width: 991px) {
                color: #FF7A00; 
            }
        }

        &.active {
            opacity: 1;

            .switcher-point__title {
                color: #FF7A00;                
            }
        }
    }
}

.strategy-switcher__scheme {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 16px;

    @media (max-width: 991px) {
        display: none;
    }

    .scheme-item {
        border-radius: 24px;
        padding: 16px 20px;
        text-align: center;
        background-color: rgba(239, 243, 248, 1);
        display: flex;
        flex-direction: column;
        justify-content:center;
        gap: 24px;
        align-items: center;
        position: relative;
        transition: .4s ease-in-out;
        opacity: 0;        

        &:before {
            content: '';
            position: absolute;
            top: calc(50% - 74px);
            left: -74px;
            width: 148px;
            aspect-ratio: 1/1;
            background-image: url(/application/images/strategy-icon-check.svg);
            background-size: contain;
            background-repeat: no-repeat;
            opacity: 0;
            transition: .4s ease-in-out;
        }

        &.active {
            background-color: rgba(255, 122, 0, 0.1);

            &:before {
                opacity: 1;
            }
        }
    }

    .scheme-item[data-scheme] {
        cursor: pointer;
    }

    .scheme-item__title {
        font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
        font-weight: 700;
        text-transform: uppercase;
        font-family: 'Montserrat';
        font-weight: 700;
        text-align: center;
    }

    .scheme-item__title_vertical {
        position: absolute;
        transform: rotate(90deg);
    }

    .scheme-item__flex {
        display: flex;
        flex-wrap: wrap;
        justify-content:space-around;
        align-items: center;
        gap: clamp(0.625rem, 0.575rem + 0.25vw, 0.875rem); 
        width: 100%;  
    }

    .scheme-solution {
        display: flex;
        align-items: center;
        gap: clamp(0.625rem, 0.6rem + 0.125vw, 0.75rem);
        font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
    }

    .scheme-solution__img {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
        border-radius: 8px;
        background-color: #fff;

        img {
            width: 24px;
            aspect-ratio: 1/1;
        }
    }

    .scheme-solution_tile {
        justify-content: center;
        border-radius: 16px;
        background-color: #fff;
        width: 84px;
        aspect-ratio: 1/1;
    }
}

.strategy-directum {
    background-position: 50% 50%;
    background-image: url(/application/images/strategy-directum-bg.svg);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    align-content: center;
    color: #fff;

    h2 {
        color: #fff;
    }
}

.strategy-directum-mobile {
    background: rgba(255, 122, 0, 0.1);
    border: 0.5px solid rgba(255, 122, 0, 1);
    border-radius: 24px;
    padding: 16px 12px;
    text-align: center;

    @media (max-width: 359px) {
        padding: 16px 8px;
    }
}

.strategy-directum-mobile__title {
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    font-family: 'Montserrat';
    font-weight: 700;
}

.strategy-directum-mobile__item {
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 12px;
    gap: 12px;
    min-width: 140px;

    @media (max-width: 359px) {
        gap: 6px;
        min-width: 124px;
    }

    .strategy-icon {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(255, 255, 255, 0.1);
    }
}

.strategy-directum__title {
    text-align: center;
    position: relative;
    padding: 0;
    width: 100%;
    aspect-ratio: 1/1;
    justify-content: center;
    align-items: center;
    display: flex;
    max-width: 320px;
    margin: auto;

    &:before {
        content: '';
        position: absolute;
        width: 100%;
        aspect-ratio: 1/1;
        background: rgba(255, 122, 0, .2);
        top: 0;
        left: 0;
        border-radius: 50%;
    }

    &:after {
        content: '';
        position: absolute;
        width: 50%;
        aspect-ratio: 1/1;
        background: rgba(255, 122, 0, 1);
        top: 25%;
        left: 25%;
        border-radius: 50%;
    }

    h3 {
        z-index: 1;
        color: #fff;
    }
}

.one-slide-content {
    h5 {
        color: #fff;
        padding-top: 0;
        text-align: center;
        padding-bottom: 34px;
    }

    ul {
        list-style-image: none;
        opacity: .5;
        max-width: 320px;
        margin: auto;

        li {
            padding: 0;
        }
    }

    .slick-list {
        padding: 0;
    }

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

    .slick-next, .slick-prev {
        display: block !important;
        background-image: url(/application/images/strategy-slider-arrow.svg);
        width: 24px;
        height: 24px;
        top: 0;
    }
}

.strategy-executive {
    display: flex;    
    justify-content: space-between;
    gap: clamp(1rem, 0.575rem + 2.125vw, 3.125rem);

    @media (max-width: 991px) {
        flex-wrap: wrap;
    }
}

.strategy-executive__content {
    max-width: 400px;

    @media (max-width: 991px) {
        max-width: 100%;
    }
}

.strategy-executive__grid {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: clamp(0.75rem, 0.675rem + 0.375vw, 1.125rem);

    @media (max-width: 575px) {
        display: flex;
        flex-wrap: wrap;
    }

    .executive-grid-element {
        background: rgba(239, 243, 248, 1);
        border-radius: 24px;
        padding: clamp(0.75rem, 0.6rem + 0.75vw, 1.5rem);
        align-content: center;
        font-size: clamp(0.7rem, 0.7rem + 0.25vw, 1.125rem);
        text-transform: uppercase;
        font-family: 'Montserrat';
        font-weight: 700;

        @media (max-width: 575px) {
            width: calc(50% - clamp(0.75rem, 0.675rem + 0.375vw, 1.125rem)/2);
        }
    }
}

.strategy-executive__img {
    width: calc(100% - 400px);
    text-align: center;
    align-content: center;

    @media (max-width: 991px) {
        width: 100%;
    }

    svg {
        .sector {
            opacity: 0;

            text {
                font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem);
                text-transform: uppercase;
                font-family: 'Montserrat';
                font-weight: 700;
                fill: black;
                transition: .4s ease-in-out;
                cursor: default;
            }

            path {
                transition: .4s ease-in-out;
                fill: transparent;
            }

            &:hover {
                text {
                    fill: white;
                }

                path {
                    fill: rgb(255, 122, 0);
                }
            }
        }
    }
}

.strategy-complete {
    background-color: rgba(255, 170, 51, 1);
    color: #fff;

    h2 {
        color: #fff;
    }
}

.strategy-complete-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 690px;

    @media (max-width: 767px) {
        max-width: 100%;
    }
}

.strategy-complete-content__item {
    border: 1px solid #fff;
    border-radius: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
    font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem);
}

.strategy-complete-img {
    margin-top: -20%;
    position: relative;
    z-index: -1;
    max-width: 585px;

    @media (max-width: 991px) {
        position: absolute;
        bottom: -20%;
        left: -24px;
        margin-top: unset;
        width: 100%;
    }
}

.strategy-form {
    position: relative;

    &:before {
        content: '';
        width: 1248px;
        aspect-ratio: 624/319;
        transform: rotate(-150deg);
        position: absolute;
        bottom: -25%;
        left: -10%;
        background-image: radial-gradient(50% 50% at 50% 50%, #D3DDFF 0%, rgba(255, 255, 255, 0) 100%);
        background-repeat: no-repeat;
        max-width: 100%;
        max-height: 100%;

        @media (max-width: 991px) {
            display: none;
        }
    }
}

#footer {
    position: relative;
    z-index: 5;
}