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

@keyframes two-columns-hero-section-up-down-animation {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-20px);
    }
}


.two-columns-hero-section {
    width: 100%;
    height: 890px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    @media (max-width: $screen-sm-max) {
        height: auto;
    }

    &__content {
        padding-top: 162px;

        @media (max-width: $screen-sm-max) {
            padding-top: 62px;
        }
    }

    &__images-side {
        padding-top: 114px;

        @media (max-width: $screen-sm-max) {
            padding-top: 0;
        }
    }


    &__upper-cta-badge-icon {
        display: inline-block;
        animation-name: wave-animation;
        animation-duration: 2.5s;
        animation-iteration-count: infinite;
    }

    &__main-img {
        width: calc(100% - 84px);
        max-width: 624px;
        height: 100%;
        max-height: 610px;

        @media (max-width: $screen-sm-max) {
            width: 100%;
            height: 400px;
        }

        &, & img {
            border-radius: 32px;
        }
    }

    &__spinning-img {
        width: 132px;
        height: 132px;
        position: absolute;
        top: 174px;
        left: 42px;
        z-index: 2;
        transition: all 0.4s;
        animation: rotate-animation 12s infinite linear;

        .rtl & {
            left: auto;
            right: 42px;
        }

        @media (max-width: $screen-sm-max) {
            width: 88px;
            height: 88px;
            left: -24px;

            .rtl & {
                left: auto;
                right: -24px;
            }
        }
    }

    &__overlay-img {
        width: 416px;
        height: 218px;
        position: absolute;
        right: 40px;
        bottom: 60px;
        z-index: 2;
        animation: two-columns-hero-section-up-down-animation 1s infinite alternate;

        .rtl & {
            right: auto;
            left: 40px;
        }

        @media (max-width: $screen-sm-max) {
            width: 218px;
            height: 118px;
            right: 16px;
        }
    }
}

.backdrop-filter-blur-2 {
    backdrop-filter: blur(2px);
}