.hero-section {
  width: 100%;
  height: 100vh;
  background: url("../images/terms.png");
  background-size: cover;
  background-position: bottom bottom;
  background-repeat: no-repeat;
  position: relative;
  z-index: 10;
}
.terms-box {
    margin-bottom: 20px;
}

.terms-box p {
    margin-bottom: 5px;
}
@media screen and (max-width: 768px) {
  .hero-section {
     height: 90vh;
     background-position: center center;
  }
  .hero-container {
    padding-top: 75%;
  }
  .hero-container h2 {
    font-size: 2.7rem;
  }
  .hero-container p {
    font-size: 18px;
  }
}
@media screen and (max-width: 580px) {
    .hero-container {
        padding-top: 110%;
    }
}