.hero-basic {
  padding: calc(10vh) 10px 10vh 10px;
  position: relative;
}
.hero-basic__bg {
  position: absolute;
  content: " ";
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: -10rem;
  z-index: -1;
}
.hero-basic__content h1,
.hero-basic__content h2 {
  font-size: 3.5em;
  line-height: 1.2;
  margin-bottom: 15px;
}
.hero-basic__content .lead {
  font-size:1.3em;
}
.hero-basic__btns {
  margin-top: 25px;
}
.hero-basic__btns .btn {
  margin:5px 5px;
}

.hero-basic__bg:before {
  position: absolute;
  content: " ";
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: -1;
}
.hero-basic__bg .bg-shapes {
  position: absolute;
  content: " ";
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  -webkit-mask-image: linear-gradient(to bottom, black 35%, rgba(0, 0, 0, 0));
          mask-image: linear-gradient(to bottom, black 35%, rgba(0, 0, 0, 0));
  background-image: url(/wp-content/themes/LeadDesk/images/shapes-bg.svg);
  background-size: cover;
  z-index: -1;
}
.hero-basic__bg--white:before {
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, white 100%);
}
.hero-basic__bg--blue:before {
  background-image: linear-gradient(0deg, rgba(235, 243, 253, 0) 0%, rgb(235, 243, 253) 100%);
}
.hero-basic__bg--purple:before {
  background-image: linear-gradient(0deg, rgba(231, 230, 246, 0) 0%, rgb(231, 230, 246) 100%);
}
.hero-basic__bg--green:before {
  background-image: linear-gradient(0deg, rgba(211, 246, 225, 0) 0%, rgb(211, 246, 225) 100%);
}
.hero-basic__content {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .hero-basic__content h1,
  .hero-basic__content h2 {
    font-size: 2.3em;
    margin-bottom: 8px;
  }
  .hero-basic {
    padding-top: 30px;
    padding-bottom: 10px;
  }
  .hero-basic__content .lead {
    font-size: 1.1em;
    padding-right: 10px;
    padding-left: 10px;
  }
}