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

@keyframes upDownSmoothFAQFloatingImg {
    0%, 100% {
        transform: translateY(8px);
    }
    50% {
        transform: translateY(-24px);
    }
}


.faq-6-col-section {
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 88px 0;

    &__floating-image {
        position: absolute;
        bottom: -120px;
        left: 60%;
        width: 208px;
        height: 208px;
        z-index: 1;

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

        .rtl & {
            left: auto;
            right: 60%;
        }
    }


    &__floating-image-2 {
        position: absolute;
        bottom: 120px;
        left: -72px;
        width: 139px;
        height: 127px;
        animation: upDownSmoothFAQFloatingImg 2s ease-in-out infinite;
        z-index: 1;

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

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

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

        &__floating-image, &__floating-image-2 {
            display: none;
        }

    }
}