/* =====================================
   MELANNIE SERVICES
   TESTIMONIALS PAGE STYLES
===================================== */

/* =====================================
   HERO
===================================== */

.testimonials-hero{

background:
linear-gradient(
rgba(255,255,255,.88),
rgba(255,255,255,.88)
),
url('../images/testimonials-hero.jpg');

background-size:cover;
background-position:center;

}

/* =====================================
   STATS SECTION
===================================== */

.stats-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:30px;

}

.stat-card{

background:white;

padding:35px;

text-align:center;

border-radius:var(--radius);

box-shadow:var(--shadow);

transition:var(--transition);

}

.stat-card:hover{

transform:translateY(-6px);

}

.stat-card h2{

font-size:3rem;

color:var(--primary);

margin-bottom:10px;

}

.stat-card p{

color:var(--gray);

font-weight:500;

}

/* =====================================
   TESTIMONIAL GRID
===================================== */

.testimonial-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:30px;

}

.testimonial-card{

background:white;

padding:35px;

border-radius:var(--radius);

box-shadow:var(--shadow);

position:relative;

transition:var(--transition);

}

.testimonial-card:hover{

transform:translateY(-8px);

}

.testimonial-card::before{

content:"❝";

position:absolute;

top:15px;

left:20px;

font-size:4rem;

color:rgba(232,92,148,.15);

}

/* =====================================
   STAR RATINGS
===================================== */

.stars{

font-size:1.4rem;

color:#FFD700;

margin-bottom:15px;

letter-spacing:3px;

}

.testimonial-card p{

margin-bottom:20px;

line-height:1.8;

}

.testimonial-card h4{

color:var(--primary);

font-weight:600;

}

/* =====================================
   SUCCESS STORIES
===================================== */

.success-story{

background:white;

padding:35px;

border-radius:var(--radius);

box-shadow:var(--shadow);

}

.success-story h3{

margin-bottom:15px;

color:var(--primary);

}

/* =====================================
   GOOGLE REVIEW WIDGET
===================================== */

.google-review-widget{

background:white;

padding:50px;

border-radius:var(--radius);

box-shadow:var(--shadow);

text-align:center;

}

.google-review-widget h3{

margin-bottom:15px;

}

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

.video-testimonials{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(350px,1fr));

gap:30px;

}

.video-card{

background:white;

padding:20px;

border-radius:var(--radius);

box-shadow:var(--shadow);

}

.video-card iframe{

width:100%;

height:250px;

border:none;

border-radius:10px;

}

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

.review-form-wrapper{

max-width:800px;

margin:auto;

background:white;

padding:50px;

border-radius:var(--radius);

box-shadow:var(--shadow);

}

.review-form{

display:flex;

flex-direction:column;

gap:15px;

}

.review-form input,
.review-form textarea,
.review-form select{

padding:15px;

border:1px solid #ddd;

border-radius:10px;

font-family:'Poppins',sans-serif;

}

.review-form textarea{

min-height:180px;

resize:vertical;

}

.review-form button{

padding:18px;

background:var(--primary);

color:white;

border:none;

border-radius:50px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.review-form button:hover{

background:var(--primary-dark);

}

/* =====================================
   TRUST BADGES
===================================== */

.trust-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:25px;

}

.trust-badge{

background:white;

padding:30px;

text-align:center;

border-radius:var(--radius);

box-shadow:var(--shadow);

font-weight:600;

transition:.3s;

}

.trust-badge:hover{

transform:translateY(-6px);

}

.trust-badge span{

display:block;

font-size:2rem;

margin-bottom:10px;

color:var(--primary);

}

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

.review-counter{

text-align:center;

margin-bottom:40px;

}

.review-counter h2{

font-size:3rem;

color:var(--primary);

}

.review-counter p{

color:var(--gray);

}

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

.review-filters{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

margin-bottom:40px;

}

.review-filter{

padding:10px 20px;

background:white;

border-radius:50px;

cursor:pointer;

box-shadow:var(--shadow);

transition:.3s;

}

.review-filter.active{

background:var(--primary);

color:white;

}

/* =====================================
   CTA
===================================== */

.testimonial-cta{

text-align:center;

background:var(--secondary);

border-radius:var(--radius);

padding:60px 30px;

}

.testimonial-cta h2{

margin-bottom:15px;

}

.testimonial-cta p{

margin-bottom:25px;

}

/* =====================================
   MOBILE
===================================== */

@media(max-width:768px){

.testimonial-grid{

grid-template-columns:1fr;

}

.video-testimonials{

grid-template-columns:1fr;

}

.review-form-wrapper{

padding:30px;

}

.stat-card h2{

font-size:2.5rem;

}

}

@media(max-width:480px){

.review-form-wrapper{

padding:20px;

}

.stat-card{

padding:25px;

}

.testimonial-card{

padding:25px;

}

.google-review-widget{

padding:30px 20px;

}

}