*{
  font-family: "Barlow Semi Condensed", sans-serif;
}

p{
  font-size:16px;
}

body{
  margin:0px;
  padding:0px;
  background-color: hsl(210, 46%, 95%)
}

.test1-class, .test2-class, .test4-class{
  color:white;
}

.test1-class{
  background-color: hsl(263, 55%, 52%);
  background-image: url(images/bg-pattern-quotation.svg);
  background-repeat: no-repeat;
  background-position: 90% 0;
}

.test2-class{
  background-color: hsl(217, 19%, 35%);
}

.test3-class, .test5-class{
  background-color: hsl(0, 0%, 100%);
}

.test4-class{
  background-color: hsl(219, 29%, 14%);
}

.test1-class, .test2-class, .test3-class, .test4-class, .test5-class{
  padding:25px 35px;
  border-radius:8px;
}

.image-class{
  height:30px;
  width:30px;
  border-radius:50%;
  margin-right:10px;
}

.info-class{
  display:flex;
  flex-direction:row;
  justify-content: flex-start;
  align-items:center;
}

h5,h6{
  margin:3px;
  font-weight:500;
}

h6{
  opacity:50%;
}

.review-class{
  opacity: 70%;
  line-height:1.5;
}

.stat-class{
  font-weight: 600;
  font-size:20px;
}

main{
  display: grid;
  grid-template-columns:70% 20%;
  justify-content: center;
}

.testimonal-class{
  display:grid;
  grid-template-rows:1fr 1fr;
  row-gap:30px;
}

.top-class{
  display:grid;
  grid-template-columns:60% 30%;
  column-gap:30px;
}

.bottom-class{
  display:grid;
  grid-template-columns:30% 60%;
  column-gap:30px;
}

@media screen and (max-width: 768px){
  main{
    grid-template-columns:1fr;
    row-gap:30px;
  }

  .top-class{
    grid-template-columns:1fr;
    row-gap:30px;
  }

  .bottom-class{
    grid-template-columns:1fr;
    row-gap:30px;
  }

  body{
    padding:30px;
  }
}