@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');

:root
{
    --white:#fff;
    --green:#16a085;
    --black:#444;
    --yellow:#FFDE59;
    --orange:#FE9900;
    --gray:#dedede;
    --light-gray:#f5f5f5;
    --box-shadow:.5rem .5rem 0 rgba(22, 160, 133, .2);
    --text-shadow:.2rem .2rem 0 rgba(0, 0, 0, .2);
    --border:.2rem solid var(--green);
}

*
{
    font-family: 'Poppins', sans-serif;
    margin:0; padding: 0;
    box-sizing: border-box;
    outline: none; border: none;
    text-transform: capitalize;
    transition: all .2s ease-out;
    text-decoration: none;
}

html
{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-padding-top: 7rem;
    scroll-behavior: smooth;
}

section
{
    padding:2rem 30%;
}


.heading
{
    text-align: center;
    padding-top: 4rem;
    padding-bottom: 4rem;
    text-shadow: var(--text-shadow);
    text-transform: uppercase;
    color:var(--black);
    font-size: 3.5rem;
    letter-spacing: .4rem;
}

.heading span
{
    text-transform: uppercase;
    color:var(--green);
}

.btn
{
    display: inline-block;
    margin-top: 1rem;
    padding: .5rem;
    padding-left: 1rem;
    border:var(--border);
    border-radius: .5rem;
    color:var(--green);
    cursor: pointer;
    font-size: 1.7rem;
    background: #fff;
}

.btn span
{
    padding:.7rem 1rem;
    border-radius: .5rem;
    background: var(--green);
    color:#fff;
    margin-left: .5rem;
}

.btn:hover
{
    background: var(--green);
    color:#fff;
}


.review .row
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap:2rem;
}

.review .row form
{
    flex:1 1 45rem;
    border:var(--border);
    text-align: center;
    line-height: 2.6rem;
    padding: 2rem;
    border-radius: .5rem;
    font-size: 1.6rem;
    color: var(--black);
}

.review .row form h3
{
    color:var(--black);
    padding-bottom: 1rem;
    font-size: 3rem;
}

.review .row form h4
{
    color:var(--black);
    padding-bottom: 1rem;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: left;
}

.review .row form image
{
    font-size: 1.6rem;
    font-weight: 600;
}

.review .row form .box
{
    width: 100%;
    margin:.2rem 0;
    background: var(--white);
    border-radius: .5rem;
    border:var(--border);
    font-size: 1.6rem;
    color: var(--black);
    text-transform: none;
    padding: 1rem;
}

.review-rate-box 
{
    display: flex;
    flex-direction: row-reverse;
    gap: 0.1rem;
    width: 100%;
    margin:.2rem 0;
    background: var(--white);
    border-radius: .5rem;
    border:var(--border);
    font-size: 1.6rem;
    color: var(--black);
    text-transform: none;
    padding: 1rem;
}

.review-rate-box input 
{
    display: none;
}

.review-rate-box input:hover ~ .review-star:before 
{
    color: rgba(255, 204, 51, 0.5);
}

.review-rate-box input:active + .review-star:before 
{
transform: scale(0.9);
}

.review-rate-box input:checked ~ .review-star:before 
{
    color: #ffcc33;
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.8);
}

.review-rate-box .review-star:before 
{
    content: "★";
    display: inline-block;
    font-family: "Potta One", cursive;
    font-size: 2.5rem;
    cursor: pointer;
    color: #0000;
    text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
    background-color: #aaa;
    background-clip: text;
    -webkit-background-clip: text;
    transition: all 0.3s;
}

.review .row form .btn
{
    padding:1rem 4rem;
}







/* media queries  */
@media (max-width:991px){

    html
    {
        font-size: 55%;
    }

    section
    {
        padding:2rem;
    }

}

@media (max-width:450px)
{
    .heading
    {
        font-size: 3rem;
    }
    .btn
    {
        margin-top: 1rem;
        padding: .5rem;
        padding-left: 1rem;
        font-size: 1.5rem;
    }
    
    .review .row
    {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap:2rem;
    }

    .review .row form
    {
        font-size: 1.4rem;
    }

    .review .row form h3
    {
        font-size: 2.5rem;
    }

}