@import "../../bootstrap/variables";

.full-width-image-and-video-cta-section {
    width: 100%;
    height: 700px;

    &__statistic-divider {
        width: 1px;
        height: 32px;
        opacity: 0.3;
        background-color: var(--white);
    }

    &__media-contents {
        width: 100%;
        height: 100%;

        video {
            width: 100%;
            height: 100%;
        }

        &-overlay {
            position: absolute;
            inset: 0;
            z-index: 2;
            background: linear-gradient(to right, #000 1.55%, rgba(0, 0, 0, 0.00) 98.27%);

            .dark-mode & {
                background: linear-gradient(to right, #fff 1.55%, rgba(0, 0, 0, 0.00) 98.27%);
            }

            .rtl & {
                background: linear-gradient(to left, #000 1.55%, rgba(0, 0, 0, 0.00) 98.27%);
            }

            .rtl.dark-mode & {
                background: linear-gradient(to left, #fff 1.55%, rgba(0, 0, 0, 0.00) 98.27%);
            }
        }
    }

    &__contents {
        position: absolute;
        inset: 0;
        z-index: 5;
        padding: 142px 0;
    }

    @media (max-width: $screen-sm-max) {
        height: 488px;

        &__contents {
            padding: 80px 0;
        }
    }
}

