@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100;400;500;700&display=swap');


body{
    display: flex;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    font-family: 'League Spartan', sans-serif;
}



#social-proof{
 display: flex;
 flex-direction: column;
 padding: 9%;
 gap:10px;
 background-color: hsl(300, 24%, 96%);
 position: relative;
 
}

.bg-pattern-top{
position: absolute;
top: 0px;
left: 0px;

}

.bg-pattern-bottom{
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.description{
    width:80% ;
    color: hsl(300, 43%, 22%);
    position: relative;
    bottom: 80px;
}


.heading{
    font-weight: 700;
    font-size: 60px;
    color: hsl(300, 43%, 22%);
    position: relative;
   
}

.heading-p{
    font-size: 1rem;
    position: relative;
    line-height: 20px;
}

#ratings{
    display: flex;
    width: 100%;
    gap: 45%;
}

.rated {
    font-weight: 600;
    color: hsl(300, 43%, 22%);

}

#first-rate{
    position: relative;
    right: 180%;
}

#second-rate{
    position: relative;
    right: 160%;
}

#third-rate{
    position: relative;
    right: 140%;
}

.stars-reviewed{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.golden{
    position: relative;
    bottom: 3px;
    
}

.star-rate{
    background-color: hsl(333, 80%, 67%,0.2) ;
    border-radius: 7px;
    width: 220%;
    padding: 13px;
    padding-left: 30px;
    display: flex;
    gap: 20px;
    right: 100%;
    position: relative;
}

#reviews{
    display: flex;
    gap: 20px;
}


.card {
    width: 100%;
    background-color: hsl(300, 43%, 22%);
    color: white;
    border-radius: 8px;
    padding: 40px;
}

.customer{
    width: 35px;
    border-radius: 100px;
    position: relative;
}

.buyer {
    display: flex;
    gap: 20px;
    align-items: center;
    padding-bottom: 10px;
    font-weight: 400;
}

.info{
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.verified{
    color: hsl(333, 80%, 67%);
    font-weight: 400;
}

.name{
    font-weight: 600;
}

p {
    font-weight: 400;
    line-height: 120%;
}

#buyer2{
    position: relative;
    top: 15px;
}

#buyer3{
    position: relative;
    top: 30px;
}



@media only screen and (max-width: 450px) {
    
    #social-proof{
    display: flex;
    padding: 9%;
    gap:50px;
    background-color: hsl(300, 24%, 96%);
    position: relative;
    }  
    
    .bg-pattern-top{
        position: absolute;
        top: 0px;
        left: 0px;
        
        }
        

    .description{
        text-align: center;
    }

    #ratings{
        display: flex;
        flex-direction: column;
        padding-top: 70px;
        justify-content: center;
        align-items: center;
        
    }

    .heading{
        font-weight: 700;
        font-size: 2rem;
        color: hsl(300, 43%, 22%);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .heading-p{
        display: flex;
        justify-content: stretch;
        font-size: 0.9rem;
    }

    #reviews{
        display: flex;
        gap: 20px;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .star-rate{
        background-color: hsl(333, 80%, 67%,0.2) ;
        border-radius: 7px;
        width: 120%;
        padding-right: 10px;
        padding-left: 10px;
        display: flex;
        flex-direction:column;
        gap: 20px;
        position: relative;
        left:-30px;
        justify-content: center;
        align-items: center;
    }
    .stars-reviewed{
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 70%;
    }
    
.card {
    width: 70%;
    background-color: hsl(300, 43%, 22%);
    color: white;
    border-radius: 8px;
    padding: 30px;
}

}