/*--------------------------------------------------------------
TESTIMONIALS GRID
--------------------------------------------------------------*/

.pxl-item--hidden .pxl-item--inner {
    visibility: hidden;
    opacity: 0;
    @media #{$max-sm} {
        display: none;
    }
}
.pxl-testimonial-style1 {
    .pxl-item--star {
        margin-bottom: 16px;
        .pxl-star--icon {
            display: inline-flex;
            color: #FF9529;
            font-size: 18px;
        }
    }
    .pxl-item--desc {
        font-size: 16px;
        line-height: 1.625;
    }
    .pxl-item--top { 
        padding: 38px 45px 32px;
        @media #{$max-lg} {
            padding-left: 30px;
            padding-right: 30px;
        }
        @media #{$max-sm} {
            padding-left: 24px;
            padding-right: 24px;
        }
    }
    .pxl-item--holder {
        border-top: 1px solid #F6F6F6;
        padding: 30px 45px;
        flex-wrap: nowrap;
        @media #{$max-lg} {
            padding-left: 30px;
            padding-right: 30px;
        }
        @media #{$max-sm} {
            padding-left: 24px;
            padding-right: 24px;
        }
    }
    .pxl-item--title {
        margin-bottom: 0;
        @media #{$max-sm} {
            font-size: 18px;
        }
    }
    .pxl-item--position {
        font-size: 14px;
    }
    .pxl-item--image {
        width: 79px;
        height: 79px;
        min-width: 79px;
        position: relative;
        @media #{$max-sm} {
            width: 65px;
            height: 65px;
            min-width: 65px;
        }
        img {
            @include border-radius(79px);
        }
    }
    .pxl-item--icon {
        width: 29px;
        height: 29px;
        background-color: $primary_color;
        color: #fff;
        border-radius: 29px;
        text-align: center;
        font-size: 20px;
        position: absolute;
        top: 0;
        right: -3px;
    }
    .pxl-item--inner {
        background-color: #fff;
        border-bottom: 6px solid $primary_color;
        border-radius: 10px;
        @include box-shadow(0 10px 50px rgba(#8997BA, 0.15));
        margin-bottom: 60px;
    }
    &.pxl-testimonial-carousel1 {
        margin-top: -50px;
        .pxl-item--inner {
            margin-top: 50px;
        }
        .pxl-swiper-dots.style-1 {
            position: relative;
            top: -28px;
            z-index: 99;
        }
    }
    .pxl-item--heading {
        position: absolute;
        top: 50%;
        @include transform(translate(0, -50%));
        left: 15px;
        right: 15px;
        @media #{$max-sm} {
            position: static;
            @include transform(translate(0, 0%));
            margin-bottom: 55px;
        }
        .pxl-heading {
            .pxl-heading--title {
                margin-bottom: 10px;
                letter-spacing: -0.01em;
                @media #{$max-md} {
                    font-size: 40px;
                }
                @media #{$max-sm} {
                    font-size: 36px;
                }
            }
        }
    }
    .pxl-item--hidden {
        margin-bottom: 60px;
        position: relative;
        @media #{$max-sm} {
            margin-bottom: 0;
        }
        .pxl-item--inner {
            margin-bottom: 0;
        }
    }
}

.pxl-testimonial-style2 {
    .pxl-item--star {
        font-size: 14px;
        color: #F8C823;
        flex-grow: 1;
    }
    .pxl-item--icon {
        color: rgba(81, 140, 245, 0.2);
        font-size: 28px;
        line-height: 1;
    }
    .pxl-top--wrap {
        background-color: #fff;
        border-radius: 10px;
        padding: 30px 30px 42px;
        @include box-shadow(0 0px 60px rgba(#8997BA, 0.25));
        position: relative;
        .pxl-item--top {
            margin-bottom: 10px;
        }
        svg {
            position: absolute;
            bottom: -15px;
            left: 46px;
        }
    }
    .pxl-item--image {
        width: 60px;
        min-width: 60px;
        img {
            border-radius: 60px;
        }
    }
    .pxl-item--title {
        font-size: 18px;
        color: #1B2E59;
        margin-bottom: 0;
    }
    .pxl-item--position {
        font-size: 16px;
        color: #6F7F90;
        line-height: 1.4;
    }
    .pxl-item--desc {
        font-size: 16px;
        line-height: 1.625;
        color: #6F7F90;
    }
    .pxl-item--holder {
        margin-top: 39px;
    }
    .pxl-item--inner {
        margin-top: 50px;
        margin-bottom: 50px;
    }
    @media #{$min-xl2} {
        &.style-1 { 
            .pxl-swiper-dots {
                position: absolute;
                top: 50%;
                transform: translate(0, -50%);
                right: -40px;
                margin-top: -50px;
                z-index: 99;
                min-width: 12px;
                width: 12px;
                display: block;
                span {
                    display: block;
                    margin: 6px 0;
                }
            }
        }
    }
    &.style-2 {
        display: flex;
        flex-wrap: wrap;
        .pxl-top--wrap {
            background-color: transparent;
            z-index: 1;
            box-shadow: none;
            &:before, &:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: #fff;
                border-radius: 10px;
                z-index: -1;
            }
            &:after {
                background-color: $primary_color;
                z-index: -2;
                top: -5px;
                left: 5px;
            }
        }
        .pxl-item--image img {
            @include box-shadow(0 0 0 3px $primary_color);
        }
        .pxl-item--inner {
            margin-bottom: 58px;
        }
    }
    .pxl-carousel-heading {
        width: 295px;
        padding-right: 20px;
        position: relative;
        z-index: 101;
        .pxl-item--wgtitle {
            font-size: 40px;
            margin-bottom: 20px;
            @media #{$max-md} {
                font-size: 36px;
            }
            @media #{$max-sm} {
                font-size: 30px;
            }
        }
        .pxl-heading {
            margin-bottom: 39px;
        }
        .pxl-swiper-dots.style-1 {
            justify-content: flex-start;
        }
        + .pxl-carousel-inner {
            width: calc(100% - 295px);
            margin: -44px 0 0 0;
            .pxl-swiper-container {
                padding: 0;
            }
            @media #{$max-sm} {
                width: 100%;
                margin-top: 60px;
            }
        }
    }
}

.pxl-testimonial-style3 {
    .pxl-item--star {
        color: #F5CA99;
    }
    .pxl-item--image {
        width: 52px;
        min-width: 52px;
        img {
            @include border-radius(52px);
        }
    }
    .pxl-item--title {
        margin-bottom: 0;
        color: #2E3D62;
        font-size: 18px;
        @include transition(all 300ms linear 0ms);
    }
    .pxl-item--desc {
        font-size: 16px;
        line-height: 1.625;
        color: #677788;
        @include transition(all 300ms linear 0ms);
    }
    .pxl-top--wrap {
        margin-bottom: 27px;
    }
    .pxl-item--position {
        line-height: 1.4;
        font-size: 16px;
        color: #677788;
        @include transition(all 300ms linear 0ms);
    }
    .pxl-item--inner {
        position: relative;
        z-index: 1;
        padding: 28px 34px 32px;
        margin-bottom: 62px;
        @media #{$max-md} {
            padding-left: 24px;
            padding-right: 24px;
        }
        .pxl-bg-shape, &:before, &:after {
            z-index: -1;
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 15px;
            opacity: 0;
            @include transition(all 300ms linear 0ms);
            background-color: #7360F2;
        }
        &:before, &:after {
            background-color: #{'rgba(var(--third-color-rgb),0.3)'};
        }
        &:before {
            left: 10px;
            right: 10px;
            bottom: -6px;
            z-index: -2;
        }
        &:after {
            z-index: -3;
            left: 20px;
            right: 20px;
            bottom: -13px;
        }
    }
    &[data-center="true"] .pxl-swiper-slide.swiper-slide-active {
        .pxl-item--inner {
            .pxl-bg-shape, &:before, &:after {
                opacity: 1;
            }
            .pxl-item--title, .pxl-item--desc, .pxl-item--position {
                color: #fff;
            }
        }
    }
}

.pxl-testimonial-style4 {
    .pxl-item--subtitle {
        font-size: 20px;
        font-weight: 700;
        text-transform: uppercase;
        color: $primary_color;
        letter-spacing: 2px;
        margin-bottom: 38px;
        @media #{$max-lg} {
            font-size: 18px;
        }
    }
    .pxl-item--desc {
        font-size: 30px;
        color: #2E3D62;
        font-style: italic;
        line-height: 1.33333;
        font-weight: 500;
        position: relative;
        z-index: 1;
        margin-bottom: 42px;
        @media #{$max-lg} {
            font-size: 24px;
        }
    }
    .pxl-item--title {
        margin-bottom: 4px;
        font-size: 24px;
        color: #2E3D62;
        @media #{$max-lg} {
            font-size: 20px;
        }
    }
    .pxl-item--position {
        font-size: 16px;
        color: #677788;
    }
    .pxl-item--icon {
        position: absolute;
        left: 0;
        z-index: -1;
        top: 50%;
        @include transform(translate(0, -50%));
        color: #E2F8FC;
        line-height: 1;
        margin-top: -20px;
        i {
            font-size: 260px;
        }
    }
}

.pxl-testimonial-style5 {
    .pxl-item--star {
        margin: 10px 0;
        .pxl-star--icon {
            display: inline-flex;
            color: #FF9529;
            font-size: 18px;
            @media #{$max-lg} {
                font-size: 14px;
            }
        }
    }
    .pxl-item--desc { 
        padding: 40px 50px 62px;
        color: #677788;
        font-size: 20px;
        line-height: 1.6;
        .pxl-item--star {
            display: none;
        }
        @media #{$min-xxl2} {
            padding-left: 60px;
            padding-right: 60px;
        }
        @media #{$max-lg} {
            padding-left: 30px;
            padding-right: 30px;
            font-size: 18px;
        }
        @media #{$max-sm} {
            padding: 34px 24px;
            font-size: 17px;
            .pxl-item--star {
                display: block;
                margin-top: 22px;
            }
        }
    }
    .pxl-item--top {
        display: flex;
        flex-wrap: wrap;
        background-color: #F5F9FD;
        padding: 20px 50px;
        flex-wrap: nowrap;
        border-radius: 16px;
        @media #{$min-xxl2} {
            padding-left: 60px;
            padding-right: 60px;
        }
        @media #{$max-lg} {
            padding-left: 30px;
            padding-right: 30px;
        }
        @media #{$max-sm} {
            padding-left: 24px;
            padding-right: 24px;
            .pxl-item--star {
                display: none;
            }
        }
    }
    .pxl-item--title {
        margin-bottom: 0;
        @media #{$max-lg} {
            font-size: 18px;
        }
        @media #{$max-sm} {
            font-size: 16px;
        }
    }
    .pxl-item--position {
        font-size: 14px;
    }
    .pxl-item--image {
        width: 79px;
        height: 79px;
        min-width: 79px;
        position: relative;
        @media #{$max-lg} {
            width: 65px;
            height: 65px;
            min-width: 65px;
        }
        img {
            @include border-radius(79px);
        }
    }
    .pxl-item--icon {
        width: 29px;
        height: 29px;
        background-color: $third_color;
        color: #fff;
        border-radius: 29px;
        text-align: center;
        font-size: 20px;
        position: absolute;
        top: 0;
        right: -3px;
    }
    .pxl-item--holder {
        flex-grow: 1;
        margin: 10px 0;
        flex-wrap: nowrap;
    }
    .pxl-item--inner {
        background-color: #fff;
        border-radius: 16px;
        @include box-shadow(0 10px 50px rgba(#8997BA, 0.15));
        margin-bottom: 60px;
        overflow: hidden;
    }
}

body.rtl {
    .pxl-testimonial-style1 .pxl-item--icon {
        right: auto;
        left: -3px;
    }
    .pxl-testimonial-style2 .pxl-top--wrap svg {
        left: auto;
        right: 46px;
    }
    .pxl-icon-box4 .pxl-item--button {
        left: auto;
        right: 0;
    }
}