@import 'partials';
.client-testimonials{
    width: 100%;
    padding: 125px 0 165px;
    @media ($sm-1679){
        padding: 100px 0 120px;
    }
    @media($sm-1679){
        padding: 70px 0px;
    }
    @media($sm-1441){
        padding: 60px 0px;
    }
    @media($sm-991){
        padding: 50px 0px;
    }
    .title-wrp{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .sec-title{
            text-align: center;
            padding-bottom: 15px;
            @media ($sm-1679){
                padding-bottom: 10px;
            }
            @media ($sm-991){
                padding-bottom: 5px;
            }
        }
        .sub-txt{
            max-width: 636px;
            text-align: center;
            font-weight: 400;
            color: rgba($color: #292B2B, $alpha: 0.45);
            br{
                @media ($sm-767){
                    display: none;
                }
            }
        }
    }
    .slider-wrap{
        width: 100%;
        margin-top: 70px;
        // .slick-list{
        //     overflow-x: clip;
        // }
        @media ($sm-1679){
            margin-top: 50px;
        }
        @media ($sm-1441){
            margin-top: 40px;
        }
        @media ($sm-1199){
            margin-top: 30px;
        }
        .slick-arrow{
            width: 33px;
            height: 33px;
            background: #998E7633;
            border: 1px solid #998E76;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 33px;
            z-index: 1;
            &:hover{
                background-color: #998E76;
                &::before{
                    filter: brightness(20.5);
                }
            }
            &::before{
                content: "";
                width: 19px;
                height: 19px;
                background: url(../img/testi-slide-arrow.svg) no-repeat center;
                background-size: contain;
            }
            &.slick-next{
                right: 22%;
                @media ($sm-1679){
                    right: 14%;
                }
                @media ($sm-1199){
                    right: 30px;
                }
            }
            &.slick-prev{
                left: 22%;
                @media ($sm-1679){
                    left: 17%;
                }
                @media ($sm-1199){
                    left: 50px;
                }
                &::before{
                    transform: rotate(180deg);
                }
            }
        }
        .slide{
            padding-top: 44px;
        }
        .cont-wrp{
            border: 1px solid #998E76;
            box-shadow: 0px 6px 56px #F6F5F3;
            border-radius: 58px;
            background-color: #fff;
            padding: 133px 76px 58px;
            margin-left: 70px;
            position: relative;
            @media ($sm-1679){
                margin-left: 50px;
                padding: 100px 50px 40px;
            }
            @media ($sm-1281){
                margin-left: 40px;
                padding: 70px 40px 40px;
            }
            @media ($sm-1199){
                margin-left: 30px;
            }
            @media ($sm-991){
                padding-top: 50px;
                border-radius: 30px;
            }
            @media ($sm-579){
                margin-left: 0px;
                border-radius: 10px;
            }
            &::before{
                content: "";
                width: 96px;
                height: 96px;
                position: absolute;
                background: url(../img/slider-quotes.svg) no-repeat center;
                background-size: contain;
                left: 76px;
                top: -40px;
                @media ($sm-1679){
                    width: 80px;
                    height: 80px;
                    left: 55px;
                }
                @media ($sm-1441){
                    width: 60px;
                    height: 60px;
                    left: 50px;
                }


            }
            .para{
                font-size: 18px;
                line-height: 28px;
                color: #48402F;
                font-weight: 300;
                @media ($sm-1679){
                    font-size: 16px;
                    line-height: 26px;
                }
                @media ($sm-1199){
                    font-size: 14px;
                    line-height: 26px;
                }
            }
            .author-blk{
                display: flex;
                border-top: 1px solid #70707031;
                padding-top: 37px;
                margin-top: 70px;
                position: relative;
                @media ($sm-1679){
                    margin-top: 50px;
                    padding-top: 30px;
                }
                @media ($sm-1199){
                    margin-top: 30px;
                    padding-top: 20px;
                }
                &::after{
                    content: "";
                    width:78px;
                    height: 71px;
                    position: absolute;
                    right: 0px;
                    background: url(../img/light-quote.svg) no-repeat center;
                    background-size: contain;
                    @media ($sm-1679){
                        width: 70px;
                        height: 70px;
                    }
                    @media ($sm-1441){
                        width: 50px;
                        height: 50px;
                    }
                }
                .pic{
                    max-width: 74px;
                    margin-right: 34px;
                    @media ($sm-1679){
                        margin-right: 28px;
                        max-width: 60px;
                    }
                    @media ($sm-1199){
                        margin-right: 20px;
                        max-width: 50px;
                    }
                    img{
                        max-width: 100%;
                        display: block;
                        max-height: 74px;
                    }
                }
                .author-dtls{
                    display: flex;
                    flex: 1;
                    flex-direction: column;
                    justify-content: center;
                    .name{
                        font-weight: 600;
                        font-size: 24px;
                        line-height: 1;
                        margin-bottom: 8px;
                        color: #292B2B;
                        letter-spacing: -0.58px;
                        @media ($sm-1679){
                            font-size: 20px;
                        }
                        @media ($sm-1441){
                            font-size: 18px;
                        }
                        @media ($sm-1199){
                            font-size: 16px;
                        }
                        @media ($sm-991){
                            font-size: 14px;
                        }
                    }
                    .desig{
                        font-size: 16px;
                        line-height: 26px;
                        font-weight: 400;
                        color: #292B2B;
                        @media ($sm-1679){
                            font-size: 15px;
                            line-height: 19px;
                        }
                        @media ($sm-1441){
                            font-size: 14px;
                            line-height: 18px;
                        }
                        @media ($sm-1199){
                            font-size: 13px;
                            line-height: 17px;
                        }
                    }
                }
            }
        }
        .testimonial-slider{
            .slick-slide{
                &:not(.slick-current){
                    opacity: 0.3;
                }
            }
            .slick-dots{
                bottom: -55px;
                li {
                    button{
                        width: 16px;
                        height: 16px;
                        &::before{
                        font-size: 0px;
                        color: #fff;
                        }
                        border: 1px solid #998E76;
                        border-radius: 16px;
                        @media ($sm-1679){
                            width: 14px;
                            height: 14px;
                        }
                        @media ($sm-579){
                            width: 10px;
                            height: 10px;
                        }
                    }
                    &.slick-active{
                        button{
                            background-color: #998E76;
                            &::before{
                                background-color: transparent;
                            }
                        }
                    }
                }
            } 
        }
    }
}