.hero-section {
    overflow: hidden;
    padding: 80px 0px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    position: relative;
    margin-bottom: 50px;
}
.hero-content-area {max-width: 70%;margin: auto;text-align: left;float:left;}
.hero-content-area h1 {color: #ffffff;font-size: calc(40px + 3.5vw);line-height: 1em;;margin: auto auto 10px;}
.hero-content-area p {font-size: 1.2em;
    line-height: 1em;
    letter-spacing: .15em;
    margin: 0;
  padding-bottom: 1em;
    font-weight: 100;
    text-transform: uppercase;;
}}
.hero-section::after {background-image: url(https://2288549.fs1.hubspotusercontent-na1.net/hubfs/2288549/Praecipio/images/half-circle.png);background-repeat: no-repeat;width: 262px;height: 308px;background-size: contain;background-position: right;position: absolute;right: 0px;content: '';top: 100px;}

@media(max-width: 1549px){
  .hero-content-area h1 {font-size: 90px;line-height: 1;}
}

@media(max-width: 1367px){
  .hero-content-area h1 {font-size: 80px;}
  .hero-section{padding: 60px 0px 175px;}
}
@media(max-width: 1260px){
  .hero-content-area {max-width: 70%;}
}
@media(max-width: 1024px){
  .hero-content-area h1 {font-size: 60px;max-width:100%;}
  .hero-section{padding: 80px 0px 150px;}
  .hero-section::after{display:none;}
}
@media(max-width: 767px){
  .hero-content-area h1 {font-size: 50px;}
  .hero-section{padding: 60px 0px 120px;}
}
@media(max-width: 481px){
  .hero-content-area h1 {font-size: 40px;}
}

@media (max-width: 550px) {
    .hero-section {
        background-position-x: 65%;
        padding: 50px 10px;
    }
}