/* testimonial start */
.nav-btn-testi{
    z-index: 40;
}
.testimonial{
    width: 100%;
    height: 77vh;
    background-color: var(--main-white);
    display: flex;
    overflow: scroll;
    scroll-snap-type: both proximity;
    overflow-y: hidden;
    position: relative;
    z-index: 10;
}
.card-testimonial{
    width: 250px;
    height: 444px;
    background-color: var(--main-white);
    border-radius: 10px;
    margin-left: 60px;
    background-size: cover;
    overflow: hidden;
    border: 5px solid var(--main-brown);
    transition: all 0.5s;
}
.card-testimonial:hover{
    transform: scale(1.05);
}
.text-product-2{
    font-size: 25px;
    font-weight: 600;
}
.fire .fa-fire{
    color: var(--secound-color-yellow);
    background-color: var(--main-white);
    padding: 15px;
    border-radius: 50px;
    position: relative;
    bottom: -510px;
    right: -160px;
    z-index: 50;
    font-size: 30px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}
.merek{
    background-color: var(--secound-color-yellow);
    padding: 10px 20px;
    border-radius: 5px;
    position: relative;
    bottom: -75px;
    right: -30px;
    z-index: 100;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    display: inline-block;
}
/* testimonial end */

@media screen  and  (max-width:1200px) {
    .testimonial {
        height: 100%;
    } 
    
}
@media screen and (max-width:476px) {
    .card-testimonial{
        width: 155px;
        height: 273px;
    }   
    .merek{
        padding: 5px 10px;
    }
    .merek span{
        font-size: 10px;
    }
    .testimonial {
        height: 100%;
    }
    
}