header.masthead {

position: relative;
overflow: hidden;
padding-top: calc(7rem + 72px);
padding-bottom: 7rem;
background: linear-gradient(0deg, $secondary 0%, $primary 100%);
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
background-size: cover;
.masthead-content {
  z-index: 1;
  position: relative;
  .masthead-heading {
    font-size: 4rem;
  }
  .masthead-subheading {
    font-size: 2rem;
  }
}
.bg-circle {
  z-index: 0;
  position: absolute;
  border-radius: 100%;
  background: linear-gradient(0deg, $primary 0%, $secondary 100%);
}
.bg-circle-1 {
  height: 90rem;
  width: 90rem;
  bottom: -55rem;
  left: -55rem;
}
.bg-circle-2 {
  height: 50rem;
  width: 50rem;
  top: -25rem;
  right: -25rem;
}
.bg-circle-3 {
  height: 20rem;
  width: 20rem;
  bottom: -10rem;
  right: 5%;
}
.bg-circle-4 {
  height: 30rem;
  width: 30rem;
  top: -5rem;
  right: 35%;
}

}

@media (min-width: 992px) {

header.masthead {
  padding-top: calc(10rem + 55px);
  padding-bottom: 10rem;
  .masthead-content {
    .masthead-heading {
      font-size: 6rem;
    }
    .masthead-subheading {
      font-size: 4rem;
    }
  }
}

}