h1 {
  font-size: 56px;
  color: #ffffff;
}

@media (max-width:768px) {
  .h1, h1 {
    font-size: 45px;
    color: #ffffff;
  }
}

@media (max-width:576px) {
  .h1, h1 {
    font-size: 32px;
    color: #ffffff;
  }
}

h2 {
  font-size: 28px;
  color: rgb(255,255,255);
}

@media (min-width:992px) {
  .h2, h2 {
    margin-right: 28%;
    margin-left: 28%;
  }
}

@media (max-width:768px) {
  .h2, h2 {
    font-size: 16px;
  }
}

@media (max-width: 992px) {
  .action-button {
    max-width: 150px;
  }
}

@media (max-width: 576px) {
  .header-logo {
    max-width: 210px;
  }
}

@media (min-width: 768px) {
  .header-logo {
    max-width: 320px;
  }
}

.header-logo {
  text-align: center;
  width: 100%;
  padding-bottom: 20px;
}

.header-container {
  text-align: center;
  background: linear-gradient(#13234c, #c068dd);
  border-radius: 40px;
  padding-top: 80px;
  margin-top: 30px;
  margin-bottom: 350px;
}

@media (max-width: 576px) {
  .header-container {
    height: 580px;
    margin-bottom: 160px;
  }
}

.hero-image {
  max-width: 946px;
  margin-top: 3%;
  width: 100%;
  margin-bottom: -250px;
}

@media (min-width: 768px) {
  .hero-image {
    /*margin-bottom: -250px;*/
  }
}

@media (max-width: 576px) {
  .hero-image {
    /*margin-bottom: -50px;*/
  }
}

h3 {
  font-family: Roboto, sans-serif;
  font-size: 40px;
  color: #313131;
}

@media (max-width: 768px) {
  h3 {
    font-size: 30px;
  }
}

@media (max-width: 576px) {
  h3 {
    font-size: 24px;
  }
}

.copy {
  font-family: Roboto, sans-serif;
  font-size: 16px;
  color: #747474;
  line-height: 26px;
}