:root {
    /* =========================
   REVIEWS VARIABLES
========================= */

/* section */
--reviews-padding:120px;

--reviews-bg:
linear-gradient(
180deg,
#0b0c0e 100%
);

--reviews-text-color:#d7dbe0;

/* header */
--reviews-header-width:800px;
--reviews-header-margin:0 auto 80px;

/* google button */
--reviews-google-gap:10px;
--reviews-google-padding:10px 16px;

--reviews-google-border:
rgba(255,255,255,0.08);

--reviews-google-radius:999px;

--reviews-google-bg:
rgba(255,255,255,0.02);

--reviews-google-color:#9aa3ad;

--reviews-google-size:14px;

--reviews-google-margin:18px;

/* ONLY COLOR CHANGED */
--reviews-google-hover-border:
rgba(79,134,198,0.40);

--reviews-google-hover-color:#d7dbe0;

--reviews-google-icon:18px;

/* title */
--reviews-title-size:42px;
--reviews-title-weight:900;
--reviews-title-color:#d7dbe0;
--reviews-title-spacing:-1px;

/* text */
--reviews-subtitle-margin:10px;
--reviews-subtitle-color:#8f98a3;
--reviews-subtitle-size:16px;

/* grid */
--reviews-grid-columns:repeat(3,1fr);
--reviews-grid-gap:30px;
--reviews-grid-width:1200px;

/* card */
--reviews-card-bg:
rgba(255,255,255,0.02);

--reviews-card-border:
rgba(255,255,255,0.06);

--reviews-card-padding:30px;
--reviews-card-radius:18px;

/* ONLY COLOR CHANGED */
--reviews-card-hover-border:
rgba(79,134,198,0.25);

/* stars */
--reviews-stars-color:#f5c542;
--reviews-stars-size:16px;
--reviews-stars-spacing:2px;
--reviews-stars-margin:15px;

/* review text */
--reviews-card-text-color:#bfc6cd;
--reviews-card-text-size:15px;
--reviews-card-text-line:1.7;

/* author */
--reviews-author-margin:18px;
--reviews-author-size:13px;
--reviews-author-color:#8f98a3;

/* mobile */
--reviews-mobile-title:30px;
}







/* =========================
   REVIEWS
========================= */

.reviews{

padding:var(--reviews-padding) 0;

background:
var(--reviews-bg);

color:var(--reviews-text-color);

}

/* HEADER */

.reviews-header{

text-align:center;

max-width:var(--reviews-header-width);

margin:var(--reviews-header-margin);

}

.google-btn{

display:inline-flex;

align-items:center;

gap:var(--reviews-google-gap);

padding:var(--reviews-google-padding);

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

border-radius:
var(--reviews-google-radius);

background:
var(--reviews-google-bg);

text-decoration:none;

color:
var(--reviews-google-color);

font-size:
var(--reviews-google-size);

transition:.3s ease;

margin-bottom:
var(--reviews-google-margin);

}

.google-btn img{

width:var(--reviews-google-icon);

}

.google-btn:hover{

border-color:
var(--reviews-google-hover-border);

transform:translateY(-2px);

color:
var(--reviews-google-hover-color);

}

.reviews-header h2{

font-size:var(--reviews-title-size);

font-weight:var(--reviews-title-weight);

margin:0;

color:var(--reviews-title-color);

letter-spacing:var(--reviews-title-spacing);

}

.reviews-header p{

margin-top:var(--reviews-subtitle-margin);

color:var(--reviews-subtitle-color);

font-size:var(--reviews-subtitle-size);

}

/* GRID */

.reviews-grid{

display:grid;

grid-template-columns:
var(--reviews-grid-columns);

gap:var(--reviews-grid-gap);

max-width:var(--reviews-grid-width);

margin:0 auto;

}

/* CARD */

.review-card{

background:
var(--reviews-card-bg);

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

padding:
var(--reviews-card-padding);

border-radius:
var(--reviews-card-radius);

transition:.3s ease;

}

.review-card:hover{

transform:translateY(-6px);

border-color:
var(--reviews-card-hover-border);

}

/* STARS */

.stars{

color:var(--reviews-stars-color);

font-size:var(--reviews-stars-size);

letter-spacing:
var(--reviews-stars-spacing);

margin-bottom:
var(--reviews-stars-margin);

}

/* TEXT */

.review-card p{

color:
var(--reviews-card-text-color);

font-size:
var(--reviews-card-text-size);

line-height:
var(--reviews-card-text-line);

}

/* AUTHOR */

.author{

margin-top:
var(--reviews-author-margin);

font-size:
var(--reviews-author-size);

color:
var(--reviews-author-color);

}

/* RESPONSIVE */

@media(max-width:900px){

.reviews-grid{

grid-template-columns:1fr;

}

.reviews-header h2{

font-size:
var(--reviews-mobile-title);

}

}