html{
    font-size:62.5%;
}
body{
    font-size:1.6rem;
    margin:0;
    padding:0;
    font-family: 'Spartan', sans-serif;
    background-color:rgb(235, 226, 226);
}
.flex-container{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left:5%;
    padding-right:5%;

}
h1{
    color:hsl(300, 43%, 22%);
    text-align:center;
}
.item-1 p{
    color:#9d4edd;
    text-align:center;
}
.item-2{
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    max-width:100%;
    text-align:center;
    padding-left:5%;
    padding-right:5%;
}
/*.star-1{
    margin-left:2%;
}
.star-2{
    margin-left:5%;
}
.star-3{
    margin-left:10%;
}*/
.star{
    fill:orange;
    width:5%;
    height:20px;
}
.item-2a{
    background-color:hsl(300, 24%, 96%);
    margin-top:5%;
    border-radius:10px;
    padding:0;
    
}
.item-4{
    background-color:hsl(300, 43%, 22%);
    margin:1%;
    border-radius:10px;
    padding:3%;
}
.avatar{
    justify-self:center;
    
}
.item-3{
    background-color:hsl(300, 43%, 22%);
    margin:1%;
    border-radius:10px;
    padding:3%;
}
.item-5{
    background-color: hsl(300, 43%, 22%);
    margin:1%;
    border-radius:10px;
    padding:3%;
}
.avatar-container{
    display:grid;
    grid-template-columns: repeat(2,1fr);
}
.para{
    color:white;
    text-align:center;
    line-height:2.5rem;
}
.img{
    border-radius:50%;
}
.name p{
    color:hsl(333, 80%, 67%);
}
h3{
    color:white;
}
@media(min-width:1024px){
    .flex-container{
        display:grid;
        grid-template-columns: repeat(3,1fr);
    }
    .item-2{
       grid-column:2/-1;
    }
    .item-2a{
        padding-right:10%;
    }
    .star-1{
        margin-left:2%;
    }
    .star-2{
        margin-left:5%;
    }
    .star-3{
        margin-left:10%;
    }
    .testimonial-2{
        margin-top:15%;
    }
    .testimonial-3{
        margin-top:25%;
    }
   .item-1{
       justify-self:start;
   }
   h1{
       font-size:5.0rem;
       font-weight:bold;
   }
   .star-container{
       display:flex;
       align-items:center;
   }
   .stars-container{
       max-width:50%;
   }
}