// 
// testi.scss
// 

.testimonial{
    .testi-slider{
        margin: 0 20px;
        .item{
            .testi-box{
                background: linear-gradient(80deg, rgb(70, 165, 189) 0%, rgb(17, 106, 141) 100%);
                border-radius: 20px;
                box-shadow: $box-shadow-lg;
                margin: 20px 0;
                cursor:grab;

                .social-icon{
                    i{
                        color: rgba($white, 0.5);
                    }
                }
            }
        }
    }

    .tns-nav{
        text-align: center;
        button{
            height: 12px;
            width: 12px;
            border-radius: 12px;
            margin: 0 8px;
            padding: 4px;
            background-color: rgba($primary, 0.2);
            border: none;
        }
        .tns-nav-active{
            background-color: $primary;
        }
    }
}


.app-slider{
    cursor: alias;
    .swiper-container{
        padding: 18px 0 50px 0;
        .fream-phone{
            position: absolute;
            z-index: 9;
            left: 50%;
            transform: translate(-50%);
            top: 0;
            height: 441px !important;
            width: 211px !important;
        }

        .swiper-wrapper{
            img{
                border-radius: 20px;
            }
        }
        .swiper-pagination-bullet-active {
            opacity: 1;
            background: $primary;
        }
    }
    img{
        width: 100%;
    }
}

@media (max-width:1200px){
    .app-slider{
        .swiper-container{
            padding: 15px 0 50px 0;
            .fream-phone{
                width: 180px;
            }
        }
    }
}


@media (max-width:992px) {
    .testimonial{
        #testi-slider-iw{
            margin: 0 !important;
        }
    }

    .app-slider{
        .swiper-container{
            padding: 15px 0 50px 0;
            .fream-phone{
                width: 260px;
            }
        }
    }
}

@media (max-width:768px) {
    .fream-phone{
        display: none;
    }
}


body[data-layout-mode="dark"] {
    .testimonial {
        background-color: $body-dark-bg !important;
        color: $white;
    }
    .app-slider{
        background-color: $body-dark-bg !important;
        color: $white !important;
    }
}