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

.testimonials{

    position:relative;

    padding:120px 0;

    background:#ffffff;

    overflow:hidden;

}

.testimonials::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    left:-220px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(37,99,235,.08),
    transparent 70%);

}

.testimonials::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-250px;

    bottom:-250px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(124,58,237,.08),
    transparent 70%);

}

.testimonials-container{

    width:min(92%,1320px);

    margin:auto;

    position:relative;

    z-index:2;

}

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

.testimonials .section-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 65px;

}

.testimonials .section-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    border-radius:30px;

    background:#eef4ff;

    border:1px solid #dbeafe;

    color:#2563eb;

    font-size:12px;

    font-weight:700;

    margin-bottom:18px;

}

.testimonials .section-badge i{

    font-size:13px;

}

.testimonials h2{

    font-size:58px;

    font-weight:800;

    color:#0f172a;

    line-height:1.15;

    margin-bottom:18px;

}

.testimonials h2 span{

    background:linear-gradient(
    90deg,
    #2563eb,
    #7c3aed);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.testimonials .section-heading p{

    max-width:650px;

    margin:auto;

    color:#64748b;

    font-size:18px;

    line-height:1.8;

}

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

.testimonial-slider{

    position:relative;

    overflow:hidden;

    width:100%;

}

.testimonial-track{

    display:flex;

    gap:24px;

    transition:transform .6s ease;

    will-change:transform;

}

/*==================================================
DEFAULT CARD WIDTH
==================================================*/

.testimonial-card{

    flex:0 0 calc((100% - 48px)/3);

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

.testimonial-card{

    position:relative;

    background:#ffffff;

    border:1px solid #edf2f7;

    border-radius:20px;

    padding:28px;

    overflow:hidden;

    transition:.35s;

    box-shadow:0 10px 30px rgba(15,23,42,.05);

}

.testimonial-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #7c3aed);

    transform:scaleX(0);

    transition:.35s;

    transform-origin:left;

}

.testimonial-card:hover::before{

    transform:scaleX(1);

}

.testimonial-card:hover{

    transform:translateY(-10px);

    box-shadow:0 22px 55px rgba(15,23,42,.10);

}

/*==================================================
TOP
==================================================*/

.testimonial-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

/*==================================================
STARS
==================================================*/

.testimonial-stars{

    display:flex;

    gap:4px;

}

.testimonial-stars i{

    color:#f59e0b;

    font-size:14px;

}

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

.quote-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#f8fafc;

    color:#cbd5e1;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    transition:.35s;

}

.testimonial-card:hover .quote-icon{

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed);

    color:#ffffff;

}

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

.testimonial-review{

    color:#64748b;

    font-size:15px;

    line-height:1.9;

    margin-bottom:22px;

    min-height:145px;

}

/*==================================================
HIGHLIGHT
==================================================*/

.testimonial-highlight{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#eef4ff;

    color:#2563eb;

    padding:8px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:600;

    margin-bottom:22px;

}

.testimonial-highlight i{

    font-size:13px;

}

/*==================================================
FOOTER
==================================================*/

.testimonial-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:18px;

    border-top:1px solid #edf2f7;

    gap:18px;

}

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

.client-info{

    display:flex;

    align-items:center;

    gap:14px;

    flex:1;

}

.client-info img{

    width:52px;

    height:52px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #eef4ff;

}

.client-info h4{

    font-size:16px;

    font-weight:700;

    color:#0f172a;

    margin-bottom:3px;

}

.client-info span{

    color:#94a3b8;

    font-size:12px;

    line-height:1.5;

}

/*==================================================
PROJECT TYPE
==================================================*/

.project-type{

    font-size:11px;

    font-weight:700;

    color:#7c3aed;

    background:#f3e8ff;

    padding:8px 12px;

    border-radius:20px;

    white-space:nowrap;

}

/*==================================================
GLASS EFFECT
==================================================*/

.testimonial-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.03),
        transparent 70%);

    opacity:0;

    transition:.35s;

    pointer-events:none;

}

.testimonial-card:hover::after{

    opacity:1;

}
/*==================================================
CONTROLS
==================================================*/

.testimonial-controls{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:22px;

    margin-top:45px;

}

/*==================================================
PREV / NEXT BUTTONS
==================================================*/

.testimonial-prev,
.testimonial-next{

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:#ffffff;

    color:#2563eb;

    border:1px solid #dbeafe;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    transition:.35s;

    box-shadow:0 8px 25px rgba(15,23,42,.05);

}

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

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed);

    color:#ffffff;

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(37,99,235,.25);

}

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

.testimonial-dots{

    display:flex;

    align-items:center;

    gap:10px;

}

.testimonial-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#d1d5db;

    cursor:pointer;

    transition:.35s;

}

.testimonial-dot.active{

    width:34px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #7c3aed);

}

/*==================================================
SCROLL ANIMATION
==================================================*/

.testimonial-card{

    opacity:0;

    transform:translateY(40px);

}

.testimonial-card.show{

    opacity:1;

    transform:translateY(0);

    transition:
    opacity .7s ease,
    transform .7s ease;

}

/*==================================================
ACTIVE CARD
==================================================*/

.testimonial-card.active{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(37,99,235,.12);

    border-color:#dbeafe;

}

/*==================================================
STAR ANIMATION
==================================================*/

.testimonial-card:hover .testimonial-stars i{

    animation:starPop .45s ease;

}

.testimonial-stars i:nth-child(2){

animation-delay:.05s;

}

.testimonial-stars i:nth-child(3){

animation-delay:.1s;

}

.testimonial-stars i:nth-child(4){

animation-delay:.15s;

}

.testimonial-stars i:nth-child(5){

animation-delay:.2s;

}

@keyframes starPop{

0%{

transform:scale(1);

}

50%{

transform:scale(1.35);

}

100%{

transform:scale(1);

}

}

/*==================================================
AVATAR
==================================================*/

.client-info img{

    transition:.35s;

}

.testimonial-card:hover .client-info img{

    transform:scale(1.08);

}

/*==================================================
CARD HOVER
==================================================*/

.testimonial-card{

    transition:
        transform .35s,
        box-shadow .35s,
        border-color .35s;

}
/*==========================================
SMOOTH
==========================================*/

.testimonial-track{

will-change:transform;

}

.testimonial-card{

transition:

transform .35s,

box-shadow .35s,

opacity .7s;

}

.testimonial-card.active{

transform:translateY(-8px);

border-color:#2563eb;

box-shadow:0 25px 60px rgba(37,99,235,.15);

}

.testimonial-card.show{

animation:fadeUp .7s ease forwards;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:translateY(0);

}

}