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

.testimonials{

    padding:120px 0;

    background:var(--bg);

}

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

.section-header{

    text-align:center;

    max-width:750px;

    margin:0 auto 60px;

}

.section-subtitle{

    display:block;

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.section-header h2{

    color:#fff;

    font-size:56px;

    font-weight:800;

    line-height:1.15;

    margin-bottom:20px;

}

.section-header p{

    color:var(--text);

    font-size:18px;

    line-height:1.8;

    max-width:700px;

    margin:0 auto;

}

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

.testimonial-grid{

    display:grid;

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

    gap:30px;

}

.testimonial-grid img{

    width:100%;

    border-radius:20px;

    border:1px solid rgba(255,255,255,.08);

    transition:.35s ease;

    cursor:pointer;

    box-shadow:0 10px 30px rgba(0,0,0,.20);

}

.testimonial-grid img:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 40px rgba(255,79,135,.18);

}

.last-image{

    grid-column:1 / 3;

    justify-self:center;

    width:50%;

    max-width:380px;

}

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

@media (max-width:992px){

    .testimonials{

        padding:90px 0;

    }

    .section-header h2{

        font-size:42px;

    }

    .section-header p{

        font-size:17px;

    }

    .testimonial-grid{

        gap:24px;

    }

    .last-image{

        width:70%;

    }

}

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

@media (max-width:768px){

    .testimonials{

        padding:80px 0;

    }

    .section-header{

        margin-bottom:45px;

    }

    .section-header h2{

        font-size:32px;

    }

    .section-header p{

        font-size:16px;

    }

    .testimonial-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .last-image{

        grid-column:auto;

        width:100%;

        max-width:100%;

    }

}

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

@media (max-width:480px){

    .section-header h2{

        font-size:28px;

    }

    .section-header p{

        font-size:15px;

    }

    .testimonial-grid{

        gap:16px;

    }

}