* {
  padding: 0;
  margin: 0;
  border: none;
}

.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}

.hero-img {
  background-image: url("../images/Background.svg");
  background-repeat: no-repeat;
}

.hero {
  font-family: 'Spartan', sans-serif;
  padding: 15vh 12vw;
}

.hero-heading {
  font-weight: 700;
  font-size: 45px;
  line-height: 50px;
  color: #502050;
  max-width: 367px;
}

.hero-para {
  font-weight: 500;
  color: #937B92;
  font-size: 15px;
  line-height: 25px;
  letter-spacing: -0.04em;
  max-width: 430px;
}

.achivement {
  padding-left: 5vw;
}

.achivement-txt {
  font-weight: bold;
  font-size: 13px;
  color: #512051;
  text-align: center;
}

.rating {
  max-width: 400px;
  height: 45px;
  background-color: #F3F0F3;
  border-radius: 10px;
  padding-left: 40px;
}

.stars {
  width: 100%;
}

.rat-box-2 {
  margin-left: 2vw;
}

.rat-box-3 {
  margin-left: 4vw;
}

.box-1, .box-2, .box-3 {
  border-radius: 10px;
  background-color: #512051;
  padding: 30px 23px 5px 23px;
}

.box-2 {
  margin-top: 30px;
}

.box-3 {
  margin-top: 60px;
}

.profile-img {
  width: 40px;
  border-radius: 50px;
}

.profile-name {
  font-weight: 600;
  font-size: 13px;
  line-height: 25px;
  color: #fff;
}

.verification {
  font-size: 13px;
  line-height: 25px;
  color: #EE68A4;
}

.comment {
  font-weight: 500;
  font-size: 13px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: #F7F2F7;
}

@media (max-width: 767px) {
  .hero {
    padding-top: 10vh;
    padding-bottom: 10vh;
  }
  .hero-heading, .hero-para {
    text-align: center;
    }
  .rat-box-1, .rat-box-2, .rat-box-3 {
    min-width: 310px;
    margin-left: 0;
    margin-right: 4vw;
  }
  .rat-box-3 {
    margin-bottom: 3vh;
  }
  .stars{
    padding-right: 1vw;
  }
  .achivement {
    padding-left: 5vw;
  }
  .box-3 {
    margin-top: 30px;
  }
}

@media (max-width: 405px) {
  .achivement {
    padding-left: 0;
  }
}