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

.reviews{
    padding:60px 0;
    background:#f8f6ef;
}

/* ==========================================================
   SUMMARY
========================================================== */

.reviews-summary{
    text-align:center;
    margin:45px 0 55px;
}

.reviews-stars{
    color:#d4a017;
    font-size:2rem;
    letter-spacing:4px;
}


.reviews-stars .rating-star{
    display:inline-block;
    color:transparent;
    background:linear-gradient(90deg,#d4a017 var(--star-fill),#d8d8d8 var(--star-fill));
    -webkit-background-clip:text;
    background-clip:text;
}

.reviews-score{
    font-size:56px;
    font-weight:700;
    color:#17361e;
    line-height:1;
    margin-top:10px;
}

.reviews-status{
    color:#6b8e23;
    font-size:1.2rem;
    font-weight:600;
    margin:10px 0;
}

.reviews-count{
    color:#777;
    font-size:.95rem;
}

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

.reviews-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

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

.review-card{
    position:relative;
    opacity:1;
    transform:translateY(0);
    background:#fff;
    border-radius:24px;
    padding:32px 28px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.35s ease;
    overflow:hidden;
}

.review-card.review-hidden{
    display:none;
}

.review-card.review-enter{
    animation:reviewGroupIn .45s ease both;
}

.review-card:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 45px rgba(0,0,0,.14);
}

/* Quote */

.quote-icon{
    position:absolute;
    top:18px;
    right:22px;
    font-size:70px;
    color:rgba(107,142,35,.12);
    font-family:Georgia, serif;
    line-height:1;
}

/* Stars */

.review-stars{
    color:#d4a017;
    font-size:1.1rem;
    margin-bottom:18px;
    letter-spacing:2px;
}

/* Review Text */

.review-text{
    color:#555;
    line-height:1.8;
    font-size:.96rem;
    min-height:120px;
}

/* Footer */

.review-footer{
    margin-top:28px;
}

/* User */

.review-user{
    display:flex;
    align-items:center;
    gap:14px;
}

/* Avatar */

.review-avatar{
    width:50px;
    height:50px;
    border-radius:50%;
    background:#6b8e23;
    color:#fff;
    font-size:1.2rem;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Name */

.review-user strong{
    display:block;
    color:#17361e;
    font-size:1rem;
    margin-bottom:6px;
}

/* Verified Badge */

.verified{
    display:inline-block;
    background:#edf8ef;
    color:#2e7d32;
    padding:6px 12px;
    border-radius:50px;
    font-size:.82rem;
    font-weight:600;
}


/* ==========================================================
   VIEW MORE
========================================================== */

.reviews-more{
    display:flex;
    justify-content:center;
    margin-top:34px;
}

.reviews-more-button{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 22px;
    border-radius:999px;
    background:#17361e;
    color:#fff;
    text-decoration:none;
    font-size:.92rem;
    font-weight:700;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.reviews-more-button:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(23,54,30,.18);
    background:#24512e;
}

@keyframes reviewGroupIn{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ==========================================================
   TABLET
========================================================== */

@media(max-width:992px){

    .reviews-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

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

@media(max-width:768px){

    .reviews{
        padding:60px 0;
    }

    .reviews-grid{
        grid-template-columns:1fr;
    }

    .review-text{
        min-height:auto;
    }

    .reviews-score{
        font-size:44px;
    }

    .quote-icon{
        font-size:54px;
    }

}