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


@keyframes cta-section-full-width-floating-image-1-animation {
    0%, 100% {
        transform: translate(8px, 2px);
    }
    50% {
        transform: translate(-24px, -8px);
    }
}

@keyframes cta-section-full-width-floating-image-2-animation {
    0%, 100% {
        transform: translate(8px, 16px);
    }
    50% {
        transform: translate(-24px, -12px);
    }
}

@keyframes cta-section-full-width-side-image-1-animation {
    0%, 100% {
        transform: translate(16px, -12px);
    }
    50% {
        transform: translate(-4px, 32px);
    }
}


@keyframes cta-section-full-width-side-image-2-animation {
    0%, 100% {
        transform: translate(8px, 20px);
    }
    50% {
        transform: translate(-4px, -8px);
    }
}

.cta-section-full-width-section {
    width: 100%;
    height: 780px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 160px;

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


    &__line-1-img-box {
        width: 264px;
        height: 144px;

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

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

    &__floating-image-1 {
        position: absolute;
        width: 150px;
        height: 53px;
        left: 0;
        top: 30%;
        z-index: 1;
        animation: cta-section-full-width-floating-image-1-animation 4s ease-in-out infinite;

        img {
            max-width: 100%;
            max-height: 100%;
        }

        .rtl & {
            left: auto;
            right: 0;
        }
    }

    &__floating-image-2 {
        position: absolute;
        right: 0;
        top: 21%;
        width: 157px;
        height: 53px;
        z-index: 1;
        animation: cta-section-full-width-floating-image-2-animation 6s ease-in-out infinite;

        img {
            max-width: 100%;
            max-height: 100%;
        }

        .rtl & {
            right: auto;
            left: 0;
        }
    }


    &__side-image-1 {
        position: absolute;
        left: 0;
        bottom: 86px;
        width: 368px;
        height: 184px;
        z-index: 1;

        img {
            max-width: 100%;
            max-height: 100%;
        }

        .rtl & {
            left: auto;
            right: 0;
        }
    }

    &__side-image-2 {
        position: absolute;
        right: 0;
        bottom: 100px;
        width: 297px;
        height: 185px;
        z-index: 1;

        img {
            max-width: 100%;
            max-height: 100%;
        }

        .rtl & {
            right: auto;
            left: 0;
        }
    }

}