Current File : /home/mdkeenpw/www/wp-content/themes/logistik/assets/sass/template/sections/_testimonial.scss

/* Testimonial 1 ---------------------------------- */
.testimonial-area {
    position: relative;
    display: block;
    margin: 0 auto;
    max-width: 1520px;

    @media(max-width: 1699px) {
        margin: 0;
        max-width: 100%;
    }

    @include md {
        margin: 0 20px;
        margin-bottom: 40px;
    }

}

.testi-sec {
    margin-bottom: 70px;

    .title-area {
        @include lg {
            text-align: center;
        }
    }

    .btn-group {
        @include lg {
            justify-content: center;
        }

    }
}

.testi-slide {
    margin-bottom: -80px;
}

.testi-box-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 80px;

    @include lg {
        display: block;
    }

    .title-area {
        max-width: 520px;
    }

    .testi-box-img {
        min-width: 695px;

        @include xxl {
            min-width: 595px;
        }

        @include lg {
            display: none;
        }

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

    .slick-arrow {
        &.slick-prev {
            position: absolute;
            left: -37%;
        }

        &.slick-next {
            position: absolute;
            right: -2%;
        }

        @include xxl {
            display: none !important;
        }
    }
}

.testi-box-slider {
    width: 100%;
    max-width: 710px;
    position: relative;

    @media(max-width: 1699px) {
        max-width: 680px;
    }

    @include xxl {
        max-width: 50%;
        margin-right: 30px;
    }

    @media(max-width: 1399px) {
        max-width: 44%;
        margin-right: 0px;
    }

    @include xl {
        max-width: 37%;
    }



    @include lg {
        max-width: 100%;
        margin-right: 0px;

        .title-area {
            text-align: center;
            max-width: 100%;
        }
    }

    // @include xxl{
    //     max-width: 610px;
    // }
}

.testi-slider {
    margin-left: -400px;
    margin-top: 0px;

    @media(max-width: 1699px) {
        margin-left: -500px;
        margin-right: 30px;
    }

    @include xxl {
        margin-left: -350px;
        margin-right: 30px;
    }

    @media(max-width: 1399px) {
        margin-left: -500px;
    }

    @include xl {
        margin-left: -150%;
    }



    @include lg {
        margin-left: 0;
        margin-right: 0px;
    }

}

.testi-grid {
    position: relative;
    background-color: $smoke-color;
    padding: 33px 40px;
    overflow: hidden;
    z-index: 9;

    @include xxl {
        padding: 25px;
    }

    @include sm {
        padding: 20px;
    }

    // &_text {
    //     @media(max-width: 1399px) {
    //         font-size: 14px;
    //     }
    // }

    &.style2 {
        background: linear-gradient(180deg, #FFFFFF 0%, #F4F4F4 100%);

        &:before,
        &:after {
            display: none;
        }
    }

    .testi-overlay {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 82px;
        background-repeat: repeat;
        background-size: auto;
    }

    // &:hover {
    //     width: 100%;

    //     &:before,
    //     &:after {
    //         opacity: 1;
    //         height: 120%;
    //         width: 120%;
    //     }
    // }

    &:before,
    &:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 94px;
        background-color: $theme-color;
        opacity: 0.2;
        transition: 0.4s ease-in-out;
        z-index: -1;
        clip-path: path("M358 73.4359V94H0V0.138608C22.5247 -0.975571 49.4487 4.55008 81.4629 19.5193C196.842 73.4684 284.049 85.4807 358 73.4359Z");
    }

    &:before {
        bottom: 0;
        left: 0;
    }

    &:after {
        width: 100%;
        height: 84px;
        opacity: 1;
        left: 0;
        bottom: 0;
    }

    &_wrapper {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        margin-bottom: 15px;

        @include xs {
            gap: 6px;
        }

        .testi-ratting {
            font-weight: 700;
            font-size: 18px;
            line-height: 28px;
            color: $title-color;
            margin-bottom: 0;
        }

        .star-icon {
            font-size: 12px;

            a {
                font-size: 12px;
                opacity: 1;
            }
        }


    }

    &_profile {
        display: flex;
        align-items: center;
        gap: 25px;
        margin-bottom: 0px;

        @include sm {
            gap: 15px;
        }

    }

    &_img {
        position: relative;
        min-width: 80px;

        @include sm {
            min-width: 50px;
        }

        img {
            width: 80px;
            height: 80px;
            border-radius: 50%;

            @include sm {
                width: 50px;
                height: 50px;
            }
        }

    }

    &_icon {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 18px;
        color: $white-color;
        background-color: $theme-color;
        border-radius: 50%;
        text-align: center;
        position: absolute;
        top: 16%;
        right: 0;
        transform: translateY(-50%);

        @include sm {
            width: 20px;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
        }
    }

    &_name {
        font-family: $title-font;
        font-weight: 700;
        font-size: 18px;
        line-height: 28px;
        color: $title-color;
        margin-bottom: 5px;

        @include xxl {
            font-size: 16px;
            line-height: 20px;
        }

        @include sm {
            font-size: 14px;
            line-height: 18px;
        }
    }

    &_desig {
        font-family: $title-font;
        font-weight: 500;
        font-size: 14px;
        line-height: 24px;
        color: $title-color;
        margin-bottom: 0;
    }
}

.testi-box {
    &-area {
        max-width: 1180px;
        margin: -45px auto 0 auto;
        position: relative;
        display: flex;
        align-items: center;
        gap: 80px;
    }

    &-slide {
        flex: 1;
        width: 100%;
        max-width: 694px;
        position: relative;

        .icon-box {
            position: absolute;
            bottom: 15px;
            right: 0;
        }
    }

    &-img {
        min-width: 375px;
    }

    &_quote {
        margin-bottom: 18px;
    }

    &_profile {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    &_avater {
        border-radius: 99px;
        overflow: hidden;
    }

    &_name {
        margin-bottom: 8px;
    }

    &_desig {
        margin-bottom: 0;
        display: block;
    }

    &_text {
        margin-bottom: 22px;
    }

    &_review {
        color: $yellow-color;

        i {
            margin-right: 3px;
        }
    }
}

@include xl {
    .testi-box-slide {
        max-width: 660px;
    }
}

@include lg {
    .testi-box-slide {
        max-width: 520px;
    }

    .testi-box-area {
        gap: 40px;
    }
}

@include md {
    .testi-box {
        &-area {
            display: block;
        }

        &-slide {
            max-width: 100%;
        }

        &-img {
            margin-bottom: -30px;
        }
    }
}

@media (max-width: 420px) {
    .testi-box {
        &-slide {
            max-width: 100%;

            .icon-box {
                display: none;
            }
        }

        &-img {
            min-width: auto;
            max-width: 100%;
        }
    }
}

/* Testimonial 2 ---------------------------------- */
.testi-card {
    position: relative;
    background: linear-gradient(180deg, #FFFFFF 0%, #F4F4F4 100%);
    padding: 33px 40px;
    z-index: 9;
    margin-bottom: -20px;

    &.style2 {
        background-color: $smoke-color;
        margin-bottom: 0;
        .testi-card {
            &_wrapper {
                justify-content: flex-start;
                gap: 10px; 
            }
            &_text {
                border-bottom: none;
                padding-bottom: 0px;
                margin-bottom: 30px;
            }
        }

    }

    @media(max-width: 1399px) {
        padding: 33px 35px;
    }

    @include xs {
        padding: 25px;
    }

    &_overlay {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        z-index: -1;
    }

    &_wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-bottom: 18px;

        .testi-ratting {
            font-weight: 700;
            font-size: 18px;
            line-height: 28px;
            color: $title-color;
            margin-bottom: 0;
        }

        .star-icon {
            font-size: 12px;

            a {
                font-size: 12px;
                opacity: 1;
            }
        }

    }

    &_profile {
        display: flex;
        align-items: center;
        gap: 25px;
        margin-bottom: 0px;

    }

    &_img {
        position: relative;
        min-width: 70px;

        img {
            width: 70px;
            height: 70px;
            border-radius: 50%;
        }

    }

    &_icon {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 18px;
        color: $white-color;
        background-color: $theme-color;
        border-radius: 50%;
        text-align: center;
        position: absolute;
        top: 16%;
        right: 0;
        transform: translateY(-50%);
    }

    &_name {
        font-family: $title-font;
        font-weight: 700;
        font-size: 18px;
        line-height: 28px;
        color: $title-color;
        margin-bottom: 5px;

        @include xs {
            font-size: 16px;
        }
    }

    &_desig {
        font-family: $title-font;
        font-weight: 500;
        font-size: 14px;
        line-height: 24px;
        color: $title-color;
        margin-bottom: 0;
    }

    &_text {
        border-bottom: 1px solid #D9D9D9;
        padding-bottom: 30px;
        margin-bottom: 30px;
    }
}

.testi-client-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
    @include lg{
        margin-bottom: 40px; 
    }

    .client-counter {}

    .cilent-box {
        &_title {
            font-weight: 700;
            font-size: 20px;
            line-height: 30px;
            color: $white-color;
            margin-bottom: 0;
        }

        &_counter {
            color: $white-color;  
            margin-bottom: 0;
        }
    }
}


#testiSlide2 {
    .slick-list {
        padding-bottom: 30px !important;
    }
}

@include lg {
    #testiSlide2 .slick-list {
        padding-left: 25% !important;
        padding-right: 25% !important;
    }
}

@include md {
    #testiSlide2 .slick-list {
        padding-left: 15% !important;
        padding-right: 15% !important;
    }
}

@include sm {
    .testi-card {
        flex-direction: column;

    }
}

@include vxs {
    .testi-card {
        &_content {
            padding: 30px 12px;
        }
    }
}