/* ==========================================
   TESTIMONIAL SECTION
========================================== */

.testimonial-section{
    background:#f8fbff;
    padding:80px 0;
    overflow:hidden;
}

.testimonial-section .container{
    width:90%;
    max-width:1300px;
    margin:auto;
}

/* ==========================================
   HEADING
========================================== */

.testimonial-heading{
    text-align:center;
    margin-bottom:40px;
}

.testimonial-tag{

    display:inline-block;
    background:#087a68;
    color:#fff;

    padding:8px 22px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    margin-bottom:18px;

}

.testimonial-heading h2{

    font-size:42px;

    color:#222;

    margin-bottom:15px;

}

.testimonial-heading p{

    width:700px;

    max-width:100%;

    margin:auto;

    color:#666;

    line-height:28px;

    font-size:16px;

}


/* ==========================================
   TABS
========================================== */

.testimonial-tabs{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-bottom:45px;

}

.tab-btn{

    border:none;

    background:#ffffff;

    padding:14px 35px;

    border-radius:40px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    box-shadow:0 5px 18px rgba(0,0,0,.08);

    transition:.3s;

}

.tab-btn:hover{

    background:#087a68;

    color:#fff;

}

.tab-btn.active{

    background:#087a68;

    color:#fff;

}


/* ==========================================
   CONTENT
========================================== */

.testimonial-content{

    display:none;

}

.testimonial-content.active{

    display:block;

}


/* ==========================================
   SLIDER
========================================== */

.testimonial-slider{

    display:flex;

    align-items:center;

    gap:20px;

}

.testimonial-track{

    display:flex;

    gap:30px;

    overflow:hidden;

    width:100%;

}


/* ==========================================
   SLIDER BUTTONS
========================================== */

.slider-btn{

    width:50px;

    height:50px;

    border:none;

    background:#087a68;

    color:#fff;

    border-radius:50%;

    font-size:24px;

    cursor:pointer;

    transition:.3s;

}

.slider-btn:hover{

    background:#084298;

    transform:scale(1.08);

}


/* ==========================================
   VIDEO CARD
========================================== */

.video-card{

    width:360px;

    min-width:360px;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.3s;

}

.video-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.15);

}


/* ==========================================
   VIDEO IMAGE
========================================== */

.video-image{

    position:relative;

    height:230px;

}

.video-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


/* ==========================================
   PLAY BUTTON
========================================== */

.play-btn{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:75px;

    height:75px;

    border-radius:50%;

    background:#ffffff;

    color:#087a68;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    cursor:pointer;

    transition:.3s;

}

.play-btn:hover{

    transform:translate(-50%,-50%) scale(1.15);

}


/* ==========================================
   VIDEO INFO
========================================== */

.video-info{

    padding:25px;

}

.video-info h3{

    margin:0;

    font-size:22px;

    color:#222;

}

.video-info span{

    display:block;

    margin-top:8px;

    color:#777;

    font-size:15px;

}
/* ==========================================
   TEXT TESTIMONIAL CARD
========================================== */

.text-card{

    width:360px;
    min-width:360px;

    background:#ffffff;

    border-radius:20px;

    padding:30px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.3s;

}

.text-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}


/* ==========================================
   QUOTE ICON
========================================== */

.quote-icon{

    width:60px;
    height:60px;

    background:#087a68;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:35px;

    margin-bottom:20px;

}


/* ==========================================
   RATING
========================================== */

.rating{

    color:#ffb400;

    font-size:22px;

    margin-bottom:18px;

    letter-spacing:3px;

}


/* ==========================================
   REVIEW
========================================== */

.text-card p{

    color:#555;

    line-height:28px;

    font-size:15px;

    margin-bottom:30px;

}


/* ==========================================
   CLIENT INFO
========================================== */

.client-info{

    display:flex;

    align-items:center;

    gap:15px;

}

.client-info img{

    width:65px;

    height:65px;

    border-radius:50%;

    object-fit:cover;

}

.client-info h4{

    margin:0;

    font-size:18px;

    color:#222;

}

.client-info span{

    color:#777;

    font-size:14px;

}


/* ==========================================
   SLIDER DOTS
========================================== */

.slider-dots{

    display:flex;

    justify-content:center;

    margin-top:40px;

    gap:12px;

}

.dot{

    width:12px;

    height:12px;

    background:#cccccc;

    border-radius:50%;

    cursor:pointer;

    transition:.3s;

}

.dot.active{

    width:35px;

    border-radius:30px;

    background:#087a68;

}


/* ==========================================
   VIDEO MODAL
========================================== */

.video-modal{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.8);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.video-box{

    width:900px;

    max-width:90%;

    background:#fff;

    padding:15px;

    border-radius:15px;

    position:relative;

}

.video-box iframe{

    width:100%;

    height:500px;

    border:none;

}

.close-video{

    position:absolute;

    top:-15px;

    right:-15px;

    width:40px;

    height:40px;

    background:#ff3b3b;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    font-size:28px;

    font-weight:bold;

}


/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:991px){

    .testimonial-heading h2{

        font-size:34px;

    }

    .video-card,
    .text-card{

        width:300px;
        min-width:300px;

    }

    .video-image{

        height:190px;

    }

    .video-box iframe{

        height:380px;

    }

}


@media(max-width:768px){

    .testimonial-slider{

        gap:10px;

    }

    .slider-btn{

        width:42px;

        height:42px;

        font-size:20px;

    }

    .video-card,
    .text-card{

        width:100%;
        min-width:100%;

    }

    .testimonial-track{

        gap:15px;

    }

    .video-box iframe{

        height:260px;

    }

    .testimonial-heading h2{

        font-size:28px;

    }

    .testimonial-heading p{

        font-size:14px;

        line-height:24px;

    }

}


@media(max-width:480px){

    .testimonial-section{

        padding:60px 0;

    }

    .tab-btn{

        padding:12px 20px;

        font-size:14px;

    }

    .quote-icon{

        width:50px;

        height:50px;

        font-size:28px;

    }

    .client-info img{

        width:55px;

        height:55px;

    }

    .client-info h4{

        font-size:16px;

    }

}