:root {
    --cpx-slide-height: 100svh;
    --cpx-animation-duration: 3s;
    --cpx-animation-easing: cubic-bezier(.19, 1, .22, 1);
}

body:not(.elementor-editor-active) {
    .cpx-banner {
        height: var(--cpx-slide-height);
        overflow: hidden;
    }

    .cpx-banner__slide {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .cpx-banner__bg {
        opacity: 0;
        transform: scale(1.1);
    }

    .cpx-banner__overlay {
        opacity: 0;
    }

    .cpx-banner__content {
        opacity: 0;
        transform: translateY(40px);
    }

    /* .cpx-banner__navigation {
        opacity: 0;
        transform: translateY(40px);
    } */

    .cpx-banner__slides {
        height: 100%;
        scroll-snap-type: y mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
        overscroll-behavior-y: none;

        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;

        /* Lock scrolling initially */
        overflow-y: hidden;
        pointer-events: none;

        a.elementor-button-link {
            pointer-events: auto;
        }

        &.scroll-enabled {
            overflow-y: auto;
            pointer-events: auto;

            &+.cpx-banner__navigation {
                transform: none;
                opacity: 1;
            }
        }

        &::-webkit-scrollbar {
            display: none;
        }
    }
}

.cpx-banner {
    position: relative;
}

.cpx-banner__slides {
    display: flex;
    flex-direction: column;
}

.cpx-banner__slide {
    position: relative;
    height: var(--cpx-slide-height);
    flex: 0 0 auto !important;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

.cpx-banner__bg {
    position: absolute;
    inset: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: opacity calc(var(--cpx-animation-duration) * 2) var(--cpx-animation-easing),
        transform calc(var(--cpx-animation-duration) * 2) var(--cpx-animation-easing);
}

.cpx-banner__overlay {
    transition: opacity calc(var(--cpx-animation-duration) * 2) var(--cpx-animation-easing);
    background-image: linear-gradient(to bottom, #151515, rgba(21, 21, 21, .22) 40%, #151515);
    transition-delay: .5s;
    pointer-events: none !important;
}

.cpx-banner__slide.active .cpx-banner__bg {
    opacity: 1;
}

.cpx-banner__content {
    position: relative;
    transition: opacity var(--cpx-animation-duration) var(--cpx-animation-easing), transform var(--cpx-animation-duration) var(--cpx-animation-easing);
    transition-delay: .75s;

    mark {
        background-color: transparent;
        position: relative;
        color: inherit;
        display: inline-block;

        &:after {
            content: '';
            position: absolute;
            bottom: 1px;
            left: 0;
            height: 4px;
            width: 0px;
            background-color: var(--e-global-color-primary);
            transition: width 1.5s var(--cpx-animation-easing);
            transition-delay: 1.5s;
        }
    }
}

@media screen and (max-width: 768px) {
    .cpx-banner__content mark:after {
        bottom: -1px;
    }
}

.cpx-banner__slide.active {
    .cpx-banner__content {
        opacity: 1;
        transform: translateY(0);

        mark:after {
            width: 100%;
        }
    }

    .cpx-banner__overlay {
        opacity: 1;
    }

    .cpx-banner__bg {
        transform: scale(1);
    }
}

.cpx-banner__navigation {
    position: absolute;
    bottom: 0;
    height: auto;
    top: auto !important;
    left: 50px !important;
    bottom: 115px !important;
    transition: opacity var(--cpx-animation-duration) var(--cpx-animation-easing), transform var(--cpx-animation-duration) var(--cpx-animation-easing);

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;

    /* .e-con-inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 15px;
    } */
}

@media screen and (max-width: 1024px) {
    .cpx-banner__navigation {
        left: 20px !important;
        bottom: 65px !important;
    }
}

@media screen and (max-width: 1024px) {
    .cpx-banner__navigation {
        display: none !important;
    }
}

.cpx-banner__nav-stripe {
    width: 3px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.3);
    transition: all var(--cpx-animation-duration) var(--cpx-animation-easing);
    border-radius: 10px;

    &:hover {
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0.5);
    }
}

.cpx-banner__nav-stripe.active {
    background-color: #ffffff;
    height: 60px;
}

html,
body {
    overscroll-behavior-y: none !important;
}

.cpx-simple-banner {
    .cpx-simple-banner__overlay {
        transition: opacity calc(var(--cpx-animation-duration) * 2) var(--cpx-animation-easing);
        background-image: linear-gradient(to bottom, #151515, rgba(21, 21, 21, .22) 40%, #151515);
        transition-delay: .5s;
        pointer-events: none !important;

        &.cpx-simple-banner__overlay--info {
            background-image: linear-gradient(to bottom, rgba(21, 21, 21, .5), rgba(21, 21, 21, .22) 40%, rgba(21, 21, 21, .35));
        }
    }
}

body:not(.elementor-editor-active) {
    .cpx-simple-banner__bg {
        opacity: 0;
        transform: scale(1.1);
        transition: opacity calc(var(--cpx-animation-duration) * 2) var(--cpx-animation-easing),
            transform calc(var(--cpx-animation-duration) * 2) var(--cpx-animation-easing);
    }

    .cpx-simple-banner {
        overflow: hidden;
        background-color: var(--e-global-color-text);
    }

    .cpx-simple-banner__overlay {
        opacity: 0;
        transition: opacity calc(var(--cpx-animation-duration) * 2) var(--cpx-animation-easing);
    }

    .cpx-simple-banner__content {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity var(--cpx-animation-duration) var(--cpx-animation-easing), transform var(--cpx-animation-duration) var(--cpx-animation-easing);
    }

    &.cpx-simple-banner--load {
        .cpx-simple-banner__bg {
            opacity: 1;
            transform: scale(1);
        }

        .cpx-simple-banner__overlay {
            opacity: 1;
        }

        .cpx-simple-banner__content {
            opacity: 1;
            transform: translateY(0);
        }
    }
}