:root{
    --slider-gradient:linear-gradient(135deg, rgba(126, 4, 4, 0.945), rgba(175, 5, 67, 0.732));
}
.testimonial-section {
position: relative;
/* overflow: hidden; */
overflow:visible;
padding: 50px 0;
background:
radial-gradient(circle at top left, rgba(255, 122, 0, 0.08), transparent 35%),
radial-gradient(circle at bottom right, rgba(255, 122, 0, 0.08), transparent 35%),
linear-gradient(135deg,#020617,#0f172a,#001b44);
}
.section-header{
position: relative;
z-index: 2;
margin: 0 auto 80px;
text-align: center;
max-width: 750px;
margin-bottom: 0;
}
.google-rating {
margin-top: 35px;
display: inline-flex;
align-items: center;
gap: 15px;
padding: 18px 28px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 122, 0, 0.2);
backdrop-filter: blur(12px);
}
.stars {
font-size: 1.2rem;
}
.rating-text {
font-weight: 600;
}
.rating-text span {
display: block;
margin-top: 4px;
color: rgba(255, 255, 255, 0.65);
font-size: 0.9rem;
font-weight: 400;
}
.testimonial-carousel {
position: relative;
overflow: hidden;
/* overflow:visible; */
width: 100%;
perspective: 1200px;
padding-top: 2rem;
display: flex;
}
.carousel-track {
display: flex;
align-items: center;
gap: 30px;
transition: transform 0.8s cubic-bezier(.22,1,.36,1);
will-change: transform;
}
.carousel-item {
flex: 0 0 280px;
transition: all .8s cubic-bezier(.22,1,.36,1);
}
.carousel-item {
flex: 0 0 360px;
}
.carousel-item.active {
flex: 0 0 390px;
border: 2px solid red;
border-radius: 32px;
background: var(--slider-gradient);
}
.carousel-item .testimonial-card {
transform: scale(.82);
opacity: .35;
filter: blur(2px);
transition:
transform .8s cubic-bezier(.22,1,.36,1),
opacity .8s ease,
filter .8s ease,
box-shadow .8s ease,
border-color .8s ease;
}
.carousel-item.active .testimonial-card {
transform: scale(1.08) translateY(-10px);
opacity: 1;
filter: blur(0);
}
.carousel-item.active {
z-index: 5;
}
.carousel-item.active .testimonial-card {
transform: scale(1.08);
opacity: 1;
filter: blur(0);
border-color: rgba(255,122,0,.5);
box-shadow:
0 0 30px rgba(255,122,0,.15),
0 20px 60px rgba(255,122,0,.25);
}
.carousel-item.prev,
.carousel-item.next {
z-index: 3;
}
.carousel-item.prev .testimonial-card,
.carousel-item.next .testimonial-card {
transform: scale(.88);
opacity: .7;
filter: brightness(.7);
/* padding: 10px 50px; */
}
.carousel-item.far-left .testimonial-card,
.carousel-item.far-right .testimonial-card {
transform: scale(.75);
opacity: .25;
filter: blur(3px);
}
.student-image{
width:100px;
height:100px;
margin-top:10px;
border-radius:50%;
border:3px solid rgba(255,122,0,.6);
margin-bottom: 10px;
box-shadow:
0 0 25px rgba(255,122,0,.4);
}
.student-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.language-pill {
margin-bottom: 15px;
padding: 10px 18px;
border-radius: 999px;
background: rgba(255, 122, 0, 0.1);
border: 1px solid rgba(255, 122, 0, 0.2);
color: #ff7a00;
font-size: 0.9rem;
font-weight: 600;
display:flex;
justify-content: center;
align-items: center;
}
.language-pill img{
    margin-right: 10px;
    
}
.card-stars {
margin-bottom: 15px;
font-size: 1.1rem;
}
.testimonial-text {
margin-bottom: 35px;
color: rgba(255, 255, 255, 0.78);
line-height: 1.9;
font-size: 0.98rem;
}
.student-details h3 {
margin-bottom: 8px;
font-size: 1.35rem;
font-weight: 700;
}
.student-details p {
color: #ff7a00;
font-size: 0.95rem;
font-weight: 500;
}
.slider-navigation {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.carousel-prev,
.carousel-next {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 122, 0, 0.25);
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
color: #ffffff;
font-size: 1.5rem;
cursor: pointer;
transition: all 0.3s ease;
}
.carousel-prev:hover,
.carousel-next:hover {
background: var(--slider-gradient);
border-color: red;
transform: translateY(-4px);
box-shadow: 0 15px 30px rgba(255, 122, 0, 0.25);
}
.testimonial-card,
.achievement-card,
.testimonial-cta {
opacity: 0;
transform: translateY(40px);
transition:
opacity 0.8s ease,
transform 0.8s ease;
}
.testimonial-card.show,
.achievement-card.show,
.testimonial-cta.show {
opacity: 1;
transform: translateY(0);
}
.carousel-item.active {
z-index: 10;
}
.carousel-item.active .testimonial-card {
transform: scale(1.05) translateY(-8px);
opacity: 1;
filter: blur(0);
border: 1px solid rgba(255,122,0,.6);
box-shadow:
0 0 20px rgba(255,122,0,.25),
0 0 60px rgba(255,122,0,.15),
inset 0 0 20px rgba(255,122,0,.05);
}
.carousel-item.active::before {
content: "";
position: absolute;
inset: -50px;
background:
radial-gradient(circle, rgba(255,122,0,.12), transparent 70%);
z-index: -1;
pointer-events: none;
}
.testimonial-card:hover {
transform: translateY(-6px);
transition: .4s ease;
}
.carousel-item.prev,
.carousel-item.next {
z-index: 5;
}
.carousel-item.prev .testimonial-card,
.carousel-item.next .testimonial-card {
transform: scale(.88);
opacity: .65;
filter: blur(2px);
box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.carousel-item.far-left .testimonial-card,
.carousel-item.far-right .testimonial-card {
transform: scale(.72);
opacity: .15;
filter: brightness(.6);
pointer-events: none;
}
.carousel-item.prev .testimonial-card {
transform: rotateY(10deg) scale(.88);
}
.carousel-item.next .testimonial-card {
transform: rotateY(-10deg) scale(.88);
}
.carousel-item.active .testimonial-card {
transform: rotateY(0deg) scale(1.12) translateY(-10px);
}
.carousel-track {
display: flex;
align-items: center;
gap: 30px;
transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
transform-style: preserve-3d;
will-change: transform;
}
.carousel-item {
flex: 0 0 360px;
position: relative;
transition:
transform 1s cubic-bezier(0.16, 1, 0.3, 1),
opacity 1s ease;
}
.carousel-item .testimonial-card {
transform: scale(.82) rotateY(0deg);
opacity: .25;
filter: blur(2px) brightness(.65);
transition:
transform 1s cubic-bezier(0.16,1,0.3,1),
opacity 1s ease,
filter 1s ease,
box-shadow 1s ease,
border-color 1s ease;
transform-style: preserve-3d;
}
.carousel-item.prev .testimonial-card {
transform: rotateY(20deg) translateX(20px) scale(.90);
opacity: .70;
filter: blur(1px) brightness(.85);
}
.carousel-item.next .testimonial-card {
transform: rotateY(-20deg) translateX(-20px) scale(.90);
opacity: .70;
filter: blur(1px) brightness(.85);
}
.carousel-item.far-left .testimonial-card {
transform: rotateY(35deg) translateX(40px) scale(.72);
opacity: .12;
filter: blur(4px) brightness(.55);
}
.carousel-item.far-right .testimonial-card {
transform: rotateY(-35deg) translateX(-40px) scale(.72);
opacity: .12;
filter: blur(4px) brightness(.55);
}
.carousel-item.active::before {
content: "";
position: absolute;
inset: -60px;
background:
radial-gradient(circle, rgba(255,122,0,.15), transparent 70%);
pointer-events: none;
z-index: -1;
}
.student-image {
transition:
transform .8s ease,
box-shadow .8s ease;
}
.student-image img {
transition: transform 1s ease;
}
.carousel-item.active .student-image {
transform: scale(1.08);
box-shadow: 0 0 30px rgba(255,122,0,.3);
}
.carousel-item.active .student-image img {
transform: scale(1.12);
}
.testimonial-card {
position: relative;
overflow: hidden;
background:
linear-gradient(135deg, rgba(231,76,60,.25), rgba(232,93,143,.22));
backdrop-filter: blur(25px);
border: 1px solid rgba(255,255,255,.08);
box-shadow:
0 20px 50px rgba(232,93,143,.15),
0 10px 30px rgba(231,76,60,.15),
inset 0 1px 0 rgba(255,255,255,.15);
min-height: 360px;
padding: 12px 35px !important;
border-radius: 32px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all 0.5s ease;
}
.testimonial-card::before {
content: "";
position: absolute;
top: 0;
left: -150%;
width: 80%;
height: 100%;
background:
radial-gradient(circle at top, rgba(232,93,143,.22), transparent 65%);
transition: 1.5s;
}
.carousel-item.active .testimonial-card::before {
left: 150%;
}
.language-pill,
.card-stars,
.testimonial-text,
.student-details {
transition:
opacity .8s ease,
transform .8s ease;
}
.carousel-item.active .language-pill,
.carousel-item.active .card-stars,
.carousel-item.active .testimonial-text,
.carousel-item.active .student-details {
opacity: 1;
transform: translateY(0);
}
.carousel-item:not(.active) .language-pill,
.carousel-item:not(.active) .card-stars,
.carousel-item:not(.active) .testimonial-text,
.carousel-item:not(.active) .student-details {
opacity: .65;
transform: translateY(10px);
}
@keyframes floatCard{
0%{transform:translateY(0px);}
50%{transform:translateY(-6px);}
100%{transform:translateY(0px);}
}
.carousel-item.active .testimonial-card{
animation: floatCard 4s ease-in-out infinite;
}

.testimonial-carousel {
    position: relative;
    width: 100%;
    /* Increased from 520px to 650px to accommodate the scale and shadow */
    height: 500px; 
    /* Adds internal space at the top and bottom */
    padding: 20px 0; 
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px; 
    overflow: hidden;
    margin-top: 40px;
}

.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
}

.carousel-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    width: 360px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    transform-style: preserve-3d;
    will-change: transform, opacity, filter;
    pointer-events: none; /* Prevents clicks on hidden items */
}

/* CENTER (Active) */
.carousel-item.active {
    transform: translate(-50%, -50%) translateZ(150px) scale(1.1);
    opacity: 1;
    z-index: 10;
    pointer-events: auto; /* Re-enable clicks */
}

/* 1 LEFT */
.carousel-item.prev {
    transform: translate(calc(-50% - 220px), -50%) translateZ(20px) rotateY(25deg) scale(0.9);
    opacity: 0.85;
    z-index: 8;
}

/* 1 RIGHT */
.carousel-item.next {
    transform: translate(calc(-50% + 220px), -50%) translateZ(20px) rotateY(-25deg) scale(0.9);
    opacity: 0.85;
    z-index: 8;
}

/* FAR LEFT */
.carousel-item.far-left {
    transform: translate(calc(-50% - 400px), -50%) translateZ(-100px) rotateY(40deg) scale(0.75);
    opacity: 0.4;
    z-index: 6;
    filter: blur(2px);
}

/* FAR RIGHT */
.carousel-item.far-right {
    transform: translate(calc(-50% + 400px), -50%) translateZ(-100px) rotateY(-40deg) scale(0.75);
    opacity: 0.4;
    z-index: 6;
    filter: blur(2px);
}

/* HIDDEN ITEMS (The new clean way to hide out-of-bounds cards) */
.carousel-item.hidden {
    transform: translate(-50%, -50%) translateZ(-300px) scale(0.5);
    opacity: 0;
    z-index: 1;
}

/* Smooth card glow on active */
.carousel-item.active .testimonial-card {
    /* Soft, dispersed shadow reminiscent of tvOS */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.2); 
    transform: scale(1);
}

.carousel-item .testimonial-card {
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}