/*==================================================
                UZAYO REVIEWS.CSS
                PART 1
==================================================*/


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

.reviews{

    padding:140px 0;

    background:var(--color-light);

}



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

.reviews .section-header{

    max-width:700px;

    margin:0 auto 80px;

    text-align:center;

}

.reviews .section-tag{

    display:inline-block;

    margin-bottom:18px;

    color:var(--color-gold);

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:.82rem;

    font-weight:600;

}

.reviews .section-header h2{

    margin-bottom:25px;

}

.reviews .section-header p{

    max-width:620px;

    margin:auto;

}



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

.reviews-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}



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

.review-card{

    background:white;

    border-radius:30px;

    padding:45px;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:0 25px 60px rgba(0,0,0,.05);

    transition:.4s ease;

}

.review-card:hover{

    transform:translateY(-10px);

    box-shadow:0 35px 80px rgba(0,0,0,.08);

}



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

.review-stars{

    color:var(--color-gold);

    font-size:1.15rem;

    letter-spacing:4px;

    margin-bottom:28px;

}



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

.review-text{

    font-size:1rem;

    line-height:2;

    color:var(--color-text);

    margin-bottom:35px;

}



/*======================================
            AUTHOR
======================================*/

.review-author{

    display:flex;

    flex-direction:column;

    gap:6px;

}

.review-author strong{

    font-size:1rem;

    color:var(--color-black);

}

.review-author span{

    font-size:.88rem;

    color:var(--color-muted);

}

/*==================================================
                UZAYO REVIEWS.CSS
                PART 2
==================================================*/


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

.reviews-summary{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-top:90px;

}

.summary-item{

    background:white;

    border-radius:24px;

    padding:40px 30px;

    text-align:center;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:0 20px 50px rgba(0,0,0,.05);

    transition:.35s ease;

}

.summary-item:hover{

    transform:translateY(-8px);

    box-shadow:0 35px 80px rgba(0,0,0,.08);

}

.summary-item h3{

    font-family:var(--font-heading);

    font-size:3rem;

    color:var(--color-gold);

    margin-bottom:12px;

    line-height:1;

}

.summary-item p{

    color:var(--color-grey-600);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.85rem;

}



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

.review-card{

    position:relative;

    overflow:hidden;

}

.review-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.45),

            transparent

        );

    transform:skewX(-18deg);

    transition:.8s ease;

}

.review-card:hover::before{

    left:170%;

}

.review-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:30px;

    border:1px solid transparent;

    transition:.35s ease;

    pointer-events:none;

}

.review-card:hover::after{

    border-color:rgba(184,155,94,.30);

}



/*======================================
            RESPONSIVE
======================================*/

@media(max-width:1100px){

.reviews-grid{

grid-template-columns:repeat(2,1fr);

}

.reviews-summary{

grid-template-columns:repeat(3,1fr);

gap:20px;

}

}



@media(max-width:768px){

.reviews{

padding:90px 0;

}

.reviews-grid{

grid-template-columns:1fr;

gap:25px;

}

.review-card{

padding:35px;

}

.reviews-summary{

grid-template-columns:1fr;

margin-top:60px;

}

.summary-item{

padding:30px;

}

.summary-item h3{

font-size:2.4rem;

}

}



@media(max-width:480px){

.review-card{

padding:28px;

border-radius:22px;

}

.review-text{

font-size:.95rem;

line-height:1.8;

}

.summary-item{

border-radius:20px;

}

.summary-item h3{

font-size:2rem;

}

}



/*======================================
            ACCESSIBILITY
======================================*/

.review-card:focus-within,

.summary-item:focus-within{

outline:3px solid var(--color-gold);

outline-offset:4px;

}



/*======================================
        REDUCED MOTION
======================================*/

@media(prefers-reduced-motion:reduce){

.review-card,

.summary-item{

transition:none;

animation:none;

}

.review-card::before{

display:none;

}

}



/*======================================
            PERFORMANCE
======================================*/

.review-card,

.summary-item{

will-change:transform;

}

.review-stars{

user-select:none;

}



/*======================================
            FINAL POLISH
======================================*/

.reviews{

position:relative;

isolation:isolate;

overflow:hidden;

}

.reviews::before{

content:"";

position:absolute;

top:-180px;

right:-180px;

width:420px;

height:420px;

border-radius:50%;

background:rgba(184,155,94,.05);

filter:blur(40px);

z-index:0;

}

.reviews .container{

position:relative;

z-index:2;

}