/*==================================================
TESTIMONIALS
==================================================*/

.testimonials{

position:relative;

overflow:hidden;

background:var(--surface);

}


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

.testimonials .section-heading{

margin-bottom:80px;

}


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

.testimonial-slider{

position:relative;

overflow:hidden;

}


/*==================================================
TRACK
==================================================*/

.testimonial-track{

display:flex;

gap:35px;

width:max-content;

animation:testimonialMarquee 35s linear infinite;

}


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

.testimonial-card{

position:relative;

width:380px;

padding:35px;

border-radius:24px;

overflow:hidden;

flex-shrink:0;

background:var(--card);

border:1px solid var(--border);

box-shadow:var(--shadow-sm);

transition:var(--transition);

}

.testimonial-card:hover{

transform:translateY(-10px);

background:var(--card-hover);

border-color:var(--border-primary);

box-shadow:

var(--shadow-lg),

var(--glow-primary);

}


/*==================================================
SCAN EFFECT
==================================================*/

.testimonial-card::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(99,232,255,.12),

transparent

);

transform:skewX(-25deg);

transition:1s;

}

.testimonial-card:hover::before{

left:160%;

}


/*==================================================
HEADER
==================================================*/

.testimonial-header{

display:flex;

align-items:center;

gap:18px;

margin-bottom:28px;

}


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

.testimonial-header img{

width:70px;

height:70px;

border-radius:50%;

object-fit:cover;

border:2px solid var(--border-primary);

box-shadow:var(--glow-primary);

}


/*==================================================
NAME
==================================================*/

.testimonial-header h4{

margin-bottom:6px;

font-size:1.2rem;

color:var(--white);

}


/*==================================================
POSITION
==================================================*/

.testimonial-header span{

font-size:.9rem;

color:var(--text-muted);

}


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

.testimonial-rating{

display:flex;

gap:6px;

margin-bottom:24px;

}

.testimonial-rating i{

color:var(--warning);

text-shadow:0 0 12px rgba(245,179,1,.45);

font-size:1rem;

}


/*==================================================
TEXT
==================================================*/

.testimonial-card p{

margin:0;

line-height:1.9;

color:var(--text-light);

}


/*==================================================
GLOW
==================================================*/

.testimonial-card::after{

content:"";

position:absolute;

left:50%;

top:-120px;

width:220px;

height:220px;

transform:translateX(-50%);

border-radius:50%;

background:

radial-gradient(

circle,

rgba(0,217,255,.16),

rgba(108,99,255,.08),

transparent 72%

);

pointer-events:none;

}

.testimonial-card .top-line{

position:absolute;

left:0;

top:0;

width:100%;

height:3px;

background:linear-gradient(

90deg,

transparent,

var(--warning),

var(--primary),

transparent

);

transform:scaleX(0);

transition:var(--transition);

}




/*==================================================
PAUSE ON HOVER
==================================================*/

.testimonial-slider:hover .testimonial-track{

animation-play-state:paused;

}


/*==================================================
TESTIMONIAL MARQUEE
==================================================*/

@keyframes testimonialMarquee{

from{

transform:translateX(0);

}

to{

transform:translateX(-50%);

}

}