/* ==========================
   CLIENT REVIEWS SECTION
========================== */


.client-reviews{

    padding:100px 0;

    background:#19272B;

    overflow:hidden;

}


/* ==========================
   Heading
========================== */


.review-heading{

    text-align:center;

    max-width:700px;

    margin:0 auto 60px;

}


.review-heading span{

    color:#00E5FF;

    font-size:14px;

    letter-spacing:2px;

    font-weight:600;

}


.review-heading h2{

    color:#fff;

    font-size:48px;

    margin:15px 0;

}


.review-heading p{

    color:#B8C7CC;

    font-size:18px;

}



/* ==========================
   Swiper
========================== */


.reviewSwiper{

    padding:50px 0;

    overflow:visible;

}



.swiper-slide{

    height:auto;

}



/* ==========================
   Review Card
========================== */


.review-card{


    position:relative;

    background:#243135;

    padding:35px;

    border-radius:25px;

    height:100%;

    transition:.45s ease;


    border:1px solid rgba(255,255,255,.08);


}



/* Content Above */


.review-card > *{

    position:relative;

    z-index:2;

}



/* Hover */


.review-card:hover{

    transform:translateY(-8px);

}



/* ==========================
   Active Center Card
========================== */


.swiper-slide-active .review-card{


    transform:scale(1.08);


    border:2px solid transparent;


    background:

    linear-gradient(#243135,#243135) padding-box,


    linear-gradient(

        90deg,

        #00E5FF,

        #4F8CFF,

        #8B5CFF,

        #00E5FF

    ) border-box;


    background-size:300% 100%;


    animation:

    reviewBorderMove 4s linear infinite;



    box-shadow:

    0 0 40px rgba(0,229,255,.20),

    0 30px 70px rgba(0,0,0,.45);


}




@keyframes reviewBorderMove{


    0%{

        background-position:0% 50%;

    }


    100%{

        background-position:300% 50%;

    }


}



/* ==========================
   Stars
========================== */


.review-stars{


    color:#FFD166;

    font-size:22px;

    letter-spacing:4px;

    margin-bottom:25px;

}



/* ==========================
   Review Text
========================== */


.review-card p{


    color:#D2DCE0;

    font-size:16px;

    line-height:1.8;

    margin-bottom:30px;


}



/* ==========================
   Client Info
========================== */


.client-info{


    display:flex;

    align-items:center;

    gap:15px;

}



.client-info img{


    width:55px;

    height:55px;

    border-radius:50%;

    object-fit:cover;


    border:2px solid #00E5FF;


}



.client-info h4{


    color:#fff;

    margin:0 0 5px;

    font-size:18px;


}



.client-info span{


    color:#9EB1B8;

    font-size:14px;


}



/* ==========================
   Navigation
========================== */


.review-prev,
.review-next{


    width:45px;

    height:45px;


    border-radius:50%;


    background:#243135;


    border:1px solid rgba(255,255,255,.15);


    transition:.3s;


}



.review-prev:hover,
.review-next:hover{


    border-color:#00E5FF;


    box-shadow:

    0 0 25px rgba(0,229,255,.4);


}



.review-prev::after,
.review-next::after{


    font-size:18px;

    color:#fff;


}



/* ==========================
   Pagination
========================== */


.reviewSwiper .swiper-pagination{


    position:relative;

    margin-top:40px;


}



.reviewSwiper .swiper-pagination-bullet{


    width:8px;

    height:8px;


    background:#B8C7CC;


    opacity:.5;


    transition:.3s;


}



.reviewSwiper .swiper-pagination-bullet-active{


    width:25px;

    border-radius:10px;


    background:#00E5FF;


    opacity:1;


}



/* ==========================
   Review Button
========================== */


.review-action{


    text-align:center;

    margin-top:50px;


}



.review-action a{


    display:inline-flex;

    padding:14px 30px;


    border-radius:50px;


    border:1px solid #00E5FF;


    color:#fff;


    text-decoration:none;


    transition:.35s;


}



.review-action a:hover{


    background:#00E5FF;


    color:#19272B;


    transform:translateY(-4px);


}



/* ==========================
   Mobile
========================== */


@media(max-width:768px){



.review-heading h2{


    font-size:34px;


}



.review-heading p{


    font-size:15px;


}



.review-card{


    padding:25px;


}



.swiper-slide-active .review-card{


    transform:scale(1.03);


}



}