/* Testimonial Card ---------------------------------- */
.box-desig {
    font-size: 14px;
    font-weight: 400;
}

.testi-slider {
    height: 297px;

    @include xs {
        height: 340px;
    }

    @include xs {
        height: 440px;
    }

}

.testi-image {
    &_wrapp {
        display: flex;
        gap: 24px;

        @include lg {
            margin-bottom: 50px;
        }

        @include vxs {
            flex-direction: column;
        }
    }
}

.testi-review {
    .testi-img1 {
        margin-bottom: 16px;
    }

    .box-title {
        font-family: $body-font;
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        letter-spacing: 0.02em;
        color: $title-color;
        margin-bottom: 0;
    }

    .box-text {
        font-size: 14px;
        margin-bottom: 0;
    }

}

.testiSlide1 {
    .icon-box {
        position: absolute;
        right: 14px;
        bottom: 25px;

        @include sm {
            display: none;
        }
    }
}

.testi-card {
    position: relative;
    z-index: 2;
    margin-left: 40px;

    @include lg {
        margin-left: 0;
    }

    &.style1 {
        .box-title {
            font-family: $title-font;
            font-size: 24px;
            margin-bottom: 0;
        }

        .box-desig {
            margin-top: 0;
        }
    }

    &.style2 {
        max-width: 945px;
        display: block;
        margin: auto;
        text-align: center;
        margin-bottom: 24px;

        .box-text {
            margin-bottom: 24px;
        }

        .box-title {
            font-family: $body-font;
            font-weight: 600;
            font-size: 18px;
            line-height: 28px;
            letter-spacing: 0.02em;
            margin-bottom: 0;

        }
    }

    &.style3 {
        .box-text {
            margin-bottom: 64px;
        }

        .box-title {
            font-family: $body-font;
            font-weight: 600;
            font-size: 24px;
            line-height: 34px;
            letter-spacing: 0.02em;
            margin-bottom: 0;

            @include vxs {
                font-size: 20px;
            }

        }

        .box-desig {
            margin: 0;
        }

        .box-author {
            border: none;
        }
    }

    .box-quote {
        margin-bottom: 15px;
    }

    .box-text {
        font-weight: 400;
        font-size: 24px;
        line-height: 40px;
        color: $title-color;
        margin-bottom: 70px;

        @include lg {
            font-size: 25px;
            line-height: 35px;
        }

        @include md {
            font-size: 24px;
            line-height: 34px;
        }

        @include xs {
            font-size: 20px;
            line-height: 30px;
        }

        @media(max-width: 480px) {
            font-size: 17px;
            line-height: 28px;
        }

    }

    .box-profile {
        display: flex;
        align-items: center;
        gap: 24px;

        @include vxs {
            flex-direction: column;
            align-items: flex-start;
        }
    }

    .box-author {
        max-width: 150px;
        border-radius: 50%;
        border: 2px solid $title-color;
        overflow: hidden;

        @media(max-width: 480px) {
            max-width: 100px;
        }

        @include vxs {
            max-width: 70px;
        }

        img {
            border-radius: 50%;
        }
    }

    .box-title {
        font-family: $title-font2;
        font-weight: 400;
        font-size: 32px;
        line-height: 34px;
        letter-spacing: 0.02em;
        color: $title-color;
        margin: 0;

        @include xs {
            font-size: 24px;
            line-height: 25px;
        }

    }

    .box-desig {
        font-weight: 400;
        font-size: 14px;
        color: $body-color;
        margin-bottom: 0;

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

    .box-wrapp {
        display: flex;
        justify-content: space-between;

        @include xs {
            flex-direction: column;
            gap: 10px;
        }

        .box-rating {
            text-align: right;

            .rating {
                font-weight: 400;
                font-size: 20px;
                color: $title-color;
                display: block;
            }

            .review {
                font-size: 12px;
                color: $theme-color;

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

.testi-counter {
    background: $title-color;
    border-radius: 24px;
    padding: 40px;
    background-repeat: no-repeat;
    background-position: right center;

    @include lg {
        margin-top: 30px;
    }

    .subtitle {
        font-family: $title-font;
        font-weight: 600;
        font-size: 18px;
        letter-spacing: 0.02em;
        color: $white-color;
        display: block;
        margin-bottom: 20px;
    }

    .box-counter {
        font-weight: 700;
        font-size: 88px;
        color: $white-color;
        margin-bottom: 0;

        @include ml {
            font-size: 66px;
        }

        @include sm {
            font-size: 50px;
        }
    }

    .box-text {
        font-family: $title-font;
        font-weight: 600;
        font-size: 32px;
        line-height: 48px;
        letter-spacing: 0.02em;
        color: $white-color;
        margin-bottom: 60px;

        @include sm {
            font-size: 25px;
            line-height: 35px;
        }

    }

}

.testi-ratting {
    background-color: #EBF5DE;
    border-radius: 24px;
    padding: 32px;

    @include ml {
        padding: 20px;
    }

    .testi-img {
        position: relative;
        border-radius: 24px;
        margin-bottom: 30px;
        overflow: hidden;

        img {
            border-radius: 24px;
        }
    }

    .testi-wrapp {
        display: flex;
        align-items: center;
        gap: 56px;

        @include xxl {
            gap: 20px;
        }

        @include vxs {
            flex-direction: column;
        }
    }

    .divided {
        height: 105px;
        width: 1px;
        border: 1px solid rgba(92, 95, 113, 0.2);

        @include vxs {
            display: none;
        }

    }

    .box-review {
        i {
            color: #FFA439;
        }
    }

    .ratting {
        font-weight: 500;
        font-size: 18px;
        letter-spacing: 0.02em;
        color: #03060E;
        display: block;
        margin-bottom: 15px;
    }
}

.testi-thumb {

    .tab-btn {
        position: absolute;
        width: 80px;
        height: 80px;
        z-index: 2;

        @include xl {
            display: none;
        }

        &:nth-child(1) {
            position: absolute;
            top: 0%;
            left: 5%;

            @include ml {
                left: 0;
            }
        }

        &:nth-child(2) {
            position: absolute;
            top: 35%;
            left: 5%;

            @include ml {
                left: 0;
            }
        }

        &:nth-child(3) {
            position: absolute;
            bottom: 6%;
            left: 8%;

            @include ml {
                left: 0;
            }
        }

        &:nth-child(4) {
            position: absolute;
            top: 0%;
            right: 5%;

            @include ml {
                right: 0;
            }
        }

        &:nth-child(5) {
            position: absolute;
            top: 50%;
            right: 5%;

            @include ml {
                right: 0;
            }
        }

        &:nth-child(6) {
            position: absolute;
            bottom: 0%;
            right: 15%;

            @include ml {
                right: 0;
            }
        }

        &.active {
            img {
                transform: scale(1.8);
                border: 10px solid rgba(249, 99, 99, 0.1);


            }
        }

        img {
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid rgba(92, 95, 113, 0.2);
            transition: 0.4s;
        }
    }

}

.testi-slider2 {
    max-width: 431px;
    height: 82px;


    .swiper-wrapper {
        justify-content: center;
        margin-left: 150px !important;
    }

    .swiper-slide {
        width: 72px !important;
        height: 72px;
        margin-left: -36px; // overlapping effect   

        &:first-child {
            margin-left: 0; // প্রথমটা যেন সোজা থাকে
        }

        .box-author {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid white;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                filter: blur(2px);
                transition: all 0.3s ease;
            }
        }

        &-active {
            z-index: 2;

            .box-author {
                border-color: $theme-color;

                img {
                    filter: none;
                    opacity: 1;
                }
            }
        }
    }
}

.testi-card-tab {
    max-width: 431px;
    height: 82px;
    display: flex;
    justify-content: center;

    .tab-btn {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid white;

        &:nth-child(1) {
            margin-right: -20px;
        }

        &:nth-child(2) {
            margin-right: -20px;
        }

        &:nth-child(3) {
            margin-right: -20px;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: blur(2px);
            transition: all 0.3s ease;
        }

        &.active {
            z-index: 2;
            border-color: $theme-color;

            img {
                filter: none;
                opacity: 1;

            }
        }
    }


}


/* Testimonial 2 start ---------------------------------- */
.testi-grid {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    padding: 64px 72px 64px 160px;
    display: flex;
    gap: 64px;
    background-color: $white-color;

    @include xxl {
        gap: 30px;
    }

    @include ml {
        padding: 64px 72px 64px 60px;
    }

    @include lg {
        gap: 24px;
        padding: 40px;
    }

    @include md {
        flex-direction: column;
    }

    @include xs {
        padding: 30px;
    }

    .box-author {
        position: relative;
        min-width: 160px;
        z-index: 2;

        @include sm {
            display: block;
            margin: 30px auto auto auto;
        }

        .img {
            border-radius: 50%;
        }
    }

    .box-quote {
        position: absolute;
        top: 0;
        left: -110px;
        width: 160px;
        height: 160px;
        line-height: 160px;
        text-align: center;
        border-radius: 50%;
        background: #F8F8F8;

        @include ml {
            left: -33px;
            width: 100px;
            height: 100px;
            line-height: 100px;

        }

    }

    .box-profile {
        justify-content: space-between;
        align-items: center;

        @include vxs {
            flex-direction: column;
        }

        .box-rating {
            text-align: right;

            .rating {
                font-weight: 400;
                font-size: 20px;
                color: $title-color;
                display: block;
            }

            .review {
                font-size: 12px;
                color: $theme-color;

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

    .box-review {
        color: #F3BA0E;
        font-size: 16px;
        margin-bottom: 10px;

        i {
            margin-left: 5px;
        }
    }

    .box-title {
        margin-bottom: 0;
    }

    .box-desig {
        margin-top: 0;
        font-size: 14px;
        font-weight: 400;
    }

    .box-text {
        font-weight: 400;
        font-size: 18px;
        color: #6C6D71;
        margin-bottom: 54px;

        @include sm {
            text-align: center;
        }
    }
}

/* testimonial 3 start ------------------------------*/


.testi-box {
    position: relative;
    z-index: 2;

    &.light {
        .box-text {
            color: $body-color;
        }
    }

    &-tab {
        position: relative;
        display: flex;
        gap: 24px;
        z-index: 2;
        margin-top: -150px;

        @media(max-width: 480px) {
            gap: 10px;
        }

        .tab-btn {
            min-width: 150px;
            max-height: 150px;

            @include sm {
                min-width: 100px;
                max-height: 100px;
            }

            @media(max-width: 480px) {
                min-width: 70px;
                max-height: 70px;

            }

            &:nth-child(2) {
                margin-top: 60px;

                @media(max-width: 480px) {
                    margin-top: 30px;
                }
            }

            &:nth-child(3) {
                margin-top: 120px;

                @media(max-width: 480px) {
                    margin-top: 60px;
                }
            }

            &:nth-child(4) {
                margin-top: 180px;

                @media(max-width: 480px) {
                    margin-top: 90px;
                }
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .box-quote {
        margin-bottom: 22px;
    }

    .box-text {
        font-weight: 400;
        font-size: 20px;
        letter-spacing: 0.02em;
        color: $white-color;
        margin-bottom: 50px;
    }

    .box-profile {
        gap: 34px;

        @media(max-width: 480px) {
            flex-direction: column;
            align-items: flex-start;
        }


        .box-author {
            max-width: 150px;
            border-radius: 0px;

            img {
                border-radius: 0px;
            }
        }

        .box-title {
            font-family: $title-font2;
            font-weight: 400;
            font-size: 40px;
            letter-spacing: 0.02em;
            color: $white-color;
            margin-bottom: 0;

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

        .box-desig {
            font-weight: 400;
            font-size: 14px;
            color: #999999;
            margin-top: 0;
            margin-bottom: 0;

        }
    }
}

.testi-img {
    margin-top: -380px;
    margin-right: 50px;

    @include md {
        margin: 0;
    }

    img {
        //width: 100%;
    }
}

.testi-area {
    position: relative;
    z-index: 2;

    &.light {
        .icon-box {
            .slider-arrow {
                border: 1px solid rgba(14, 14, 14, 0.3);

                img {
                    filter: invert(1);
                    transition: all 0.4s ease-in-out;
                }

                &:hover {
                    img {
                        filter: brightness(0) invert(1);
                    }
                }
            }
        }
    }

    .icon-box {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 50px;
        margin-right: 95px;

        @include sm {
            display: none;
        }

        .slider-arrow {
            width: 80px;
            height: 48px;
            line-height: 0px;
            background-color: transparent;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 48px;
            transform: rotate(-180deg);

            &:hover {
                background-color: $theme-color;
                color: $white-color;
                border-color: $theme-color;
            }

        }
    }

    .testi-line {
        width: 70%;
        height: 0px;
        border: 1px solid rgba(108, 109, 113, 0.5);
        display: block;
        margin-top: -20px;

        @include ml {
            width: 60%;
        }

        @include sm {
            display: none;
        }

    }
}


/* testimonial 3 end ------------------------------*/

.testi-area2 {
    background-color: #F8F8F8;
}

.testiSlide3 {
    .slider-controller {
        width: 929px;
        display: inline-flex;
        justify-content: center;

        @include xxl {
            width: 100%;
        }

        @include lg {
            margin-top: 0px;
        }

        .swiper-pagination-progressbar {
            background-color: #fff;
        }
    }


}

.testi-image {
    max-width: 452px;
    display: block;
    margin: auto;
    border-radius: 16px;

    @include lg {
        display: none;
    }

    img {
        border-radius: 16px;
    }
}


/* testi-home 3 area start -----------------*/
.gsap-cursor {
    &.testi-cursor {
        height: 330px;
    }
}

.testi-image-area {
    position: relative;
    z-index: 3;

    .testi-img {
        position: absolute;
        right: 0;
        top: -127%;
        z-index: 1;
    }
}