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

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes scrollLeft {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0%);
    }
}

.sliding-testimonials-2-rows-section {


    .testimonials-scroll-wrapper {
        direction: ltr !important;

        .testimonials-scroll-animation {
            position: relative;
            display: flex;
            flex-wrap: nowrap;
            white-space: nowrap;
            gap: 24px;
            width: max-content;

            &.scroll-right-left {
                animation: scroll 80s linear infinite;
                animation-fill-mode: forwards;
            }

            &.scroll-left-right {
                animation: scrollLeft 80s linear infinite;
            }
        }

    }

    .testimonials-swiper-ltr {
        padding-left: 88px;
        padding-right: 24px;
    }

    .sliding-testimonial-card {
        flex: 0 0 auto;
        width: 440px;
        min-width: 440px;
        height: 264px;
        white-space: normal;

        &-mask {
            position: absolute;
            inset: 8px;
            bottom: -8px;
            border-radius: 24px;
            opacity: 0.5;
            background-color: var(--white);
            z-index: 1;
        }

        &__comment {
            height: 172px;
            overflow: hidden;
        }

        @media (max-width: $screen-sm-max) {
            width: 340px;
            min-width: 340px;
            height: 264px;
        }
    }


    &__cta-floating-img {
        width: 160px;
        height: 160px;
        margin-right: 140px;
        margin-left: 88px;

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

        .rtl & {
            margin-right: 88px;
            margin-left: 140px;
        }

        @media (max-width: $screen-sm-max) {
            width: 80px;
            height: 80px;
            margin-right: 48px;
            margin-left: 8px;
        }
    }
}