/*--------------------------------------------------------------
# Testimonial
--------------------------------------------------------------*/

.pxl-testimonial-carousel1, .pxl-testimonial-grid1 {
    @extend .pxl-user-select;
    .pxl-swiper-slide {
        overflow: hidden;
    }
    .pxl-item--inner {
        position: relative;
        padding: 49px 49px 46px;
        border: 1px solid $heading_color;
        @include border-radius(30px);
        @media #{$max-xs} {
            padding: 49px 29px 46px;
        }
    }
    .item--header {
        display: -webkit-box;display: -ms-flexbox;display: flex;
        -webkit-box-align: center;-ms-flex-align: center;align-items: center;
        gap: 15px;
        margin-bottom: 23px;
        @media #{$max-xs} {
           -ms-flex-wrap: wrap;flex-wrap: wrap;
        }
    }
    .item--image {
        -webkit-box-flex: 0;-ms-flex: none;flex: none;
        img {
            width: 70px;
            height: 70px;
            @include border-radius(70px);
        }
    }
    .item--title {
        font-size: 22px;
        margin-bottom: 5px;
    }
    .item--subtitle {
        font-size: 14px;
    }
    .item--description {
        font-size: 20px;
        line-height: 1.5;
        color: $heading_color;
        margin-bottom: 15px;
        @extend .pxl-font-heading;
        @media #{$max-xs} {
            font-size: 18px;
        }
    }
    .item--footer {
        display: -webkit-box;display: -ms-flexbox;display: flex;
        -webkit-box-align: center;-ms-flex-align: center;align-items: center;
        gap: 10px;
        @media #{$max-xs} {
           -ms-flex-wrap: wrap;flex-wrap: wrap;
        }
    }
    .svg-star {
        fill: $heading_color;
        .active {
            fill: #FFE500;
        }
    }
    .star--text {
        font-size: 14px;
        font-weight: 600;
    }
    .star--text-01 {
        color: $primary_color;
    }
    .item--divinder {
        position: absolute;
        right: 39px;
        top: -1px;
        width: 67px;
        height: 6px;
        background-color: $background_color;
    }
    .svg-comma {
        position: absolute;
        right: 47px;
        top: -18px;
        g rect {
            fill: $primary_color;
        }
    }
}

.pxl-testimonial-carousel1 {
    .svg-comma {
        opacity: 0;
        @include transform(translateY(10px));
        @include transition(all 300ms ease-in-out .3s);
    }
    .swiper-slide-visible {
        .svg-comma {
            opacity: 1;
            @include transform(translateY(0));
        }
    }
    &.style2 {
        .pxl-item--inner {
            padding: 30px 49px 29px;
            border-color: rgba(9, 89, 249, 0.10);
            background-color: #F2F6FE;
            @media #{$max-xs} {
                padding: 30px 29px 29px;
            }
        }
        .item--header {
            margin-bottom: 0;
        }
        .item--footer {
            margin-bottom: 7px;
        }
        .item--description {
            font-size: 16px;
            font-weight: 600;
            line-height: 1.625;
            margin-bottom: 0;
        }
        .item--divinder {
            left: 39px;
            right: auto;
            background-color: #F2F6FE;
        }
        .svg-comma {
            left: 47px;
            top: -39px;
            right: auto;
        }
    }
}
.pxl-testimonial-carousel2 {
    @extend .pxl-user-select;
    .pxl-swiper-slide {
        overflow: hidden;
    }
    .pxl-item--inner {
        position: relative;
        display: -webkit-box;display: -ms-flexbox;display: flex;
        gap: 0 150px;
        @media #{$max-xxl} {
            gap: 0 100px;
        }
        @media #{$max-md} {
            -ms-flex-wrap: wrap;flex-wrap: wrap;
            gap: 50px;
        }
    }
    .pxl-column-left {
        width: 30%;
        @media #{$max-xxl} {
            width: 35%;
        }
        @media #{$max-lg} {
            width: 40%;
        }
        @media #{$max-md} {
            width: 100%;
        }
        .pxl-wp-dot {
            text-align: left;
        }
    }
    .pxl-column-right {
        width: 90%;
        @media #{$max-lg} {
            width: 80%;
        }
        @media #{$max-md} {
            width: 100%;
        }
    }
    .sub-header--text {
        font-weight: 600;
        color: $heading_color;
        margin-bottom: 14px;
    }
    .header--text {
        max-width: 90%;
        @extend .pxl-h3-size;
    }
    .item--header {
        display: -webkit-box;display: -ms-flexbox;display: flex;
        -webkit-box-align: center;-ms-flex-align: center;align-items: center;
        gap: 15px;
        margin: 7px 0 43px;
        @media #{$max-xs} {
            -ms-flex-wrap: wrap;flex-wrap: wrap;
            margin-bottom: 10px;
            .item--content {
                width: 100%;
            }
        }
    }
    .item--image {
        -webkit-box-flex: 0;-ms-flex: none;flex: none;
        img {
            width: 70px;
            height: 70px;
            @include border-radius(70px);
        }
    }
    .item--title {
        font-size: 22px;
        margin-bottom: 5px;
    }
    .item--subtitle {
        font-size: 14px;
    }
    .item--description {
        font-size: 24px;
        line-height: 1.4166;
        color: $heading_color;
        @extend .pxl-font-heading;
        @media #{$max-xs} {
            font-size: 18px;
        }
    }
    .item--footer {
        display: -webkit-box;display: -ms-flexbox;display: flex;
        -webkit-box-align: center;-ms-flex-align: center;align-items: center;
        gap: 10px;
        @media #{$max-xs} {
           -ms-flex-wrap: wrap;flex-wrap: wrap;
        }
    }
    .svg-star {
        fill: $heading_color;
        .active {
            fill: #FFE500;
        }
    }
    .star--text {
        font-size: 14px;
        font-weight: 600;
    }
    .star--text-01 {
        color: $primary_color;
    }
    .svg-comma {
        margin-left: auto;
        g rect {
            fill: $primary_color;
        }
    }
}

.pxl-testimonial-grid1 {
    .pxl-grid-item {
        @include transition(none !important);
    }
}