.service-hero-section{
  background-image: linear-gradient(180deg, var(--color--secondary-3), var(--color--transparent));
  margin-top: -150px;
  padding-top: 180px;
  padding-bottom: 80px;
  position: relative;
}
.hero-shadow-image-wrap{
  z-index: 0;
  height: 1100px;
  position: absolute;
  inset: 0% 0% auto auto;
}
.hero-shadow-image{
  height: 100%;
}
.service-hero-wrapper{
  z-index: 99;
  text-align: center;
  position: relative;
}
.service-hero-description{
  width: 60%;
  margin: 30px auto 0;
}
@media screen and (min-width: 1280px){
.service-hero-section{
    margin-top: -150px;
    padding-top: 180px;
    padding-bottom: 100px;
  }
}
@media screen and (min-width: 1440px){
.service-hero-section{
    margin-top: -140px;
    padding-top: 180px;
    padding-bottom: 100px;
  }
}
@media screen and (min-width: 1920px){
.service-hero-section{
    margin-top: -140px;
    padding-top: 220px;
    padding-bottom: 140px;
  }
}
@media screen and (max-width: 991px){
.service-hero-section{
    padding-top: 160px;
    padding-bottom: 70px;
  }
}
@media screen and (max-width: 767px){
.service-hero-section{
    padding-top: 160px;
    padding-bottom: 50px;
  }
.service-hero-description{
    width: 90%;
    margin-top: 10px;
  }
}
@media screen and (max-width: 479px){
.service-hero-description{
    width: 100%;
    margin-top: 20px;
  }
}