.hero-section{
  position:relative;
  min-height:455px;
  overflow:hidden;
  background:#001F5B;
}

.hero-bg-image{
  position:absolute;
  inset:0;
  background:url('/assets/images/beach_car.webp') center center / cover no-repeat;
  z-index:1;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(0,31,91,.92) 0%,
    rgba(0,31,91,.70) 36%,
    rgba(0,31,91,.22) 58%,
    rgba(0,31,91,.04) 100%
  );
  z-index:2;
}

.hero-wave-white,
.hero-wave-teal{
  display:none !important;
}

.hero-content{
  position:relative;
  z-index:5;
  width:52%;
  padding:68px 0 0 46px;
  color:#fff;
}

.hero-content h1{
  margin:0 0 22px;
  font-size:39px;
  line-height:1.09;
  font-weight:900;
}

.hero-content h1 span{
  color:var(--teal2);
}

.hero-sub{
  font-size:16px;
  line-height:1.4;
  font-weight:800;
  margin:0 0 18px;
}

.hero-line{
  font-size:14px;
  margin:0 0 22px;
}

@media(max-width:820px){
  .hero-section{
    min-height:620px;
  }

  .hero-bg-image{
    background-position:center bottom;
  }

  .hero-overlay{
    background:linear-gradient(
      180deg,
      rgba(0,31,91,.92) 0%,
      rgba(0,31,91,.70) 48%,
      rgba(0,31,91,.18) 100%
    );
  }

  .hero-content{
    width:100%;
    padding:54px 28px 0;
  }

  .hero-content h1{
    font-size:38px;
  }
}

/* hero crop fix */
.hero-section{
  min-height:520px !important;
}

.hero-bg-image{
  background-size:cover !important;
  background-position:center center !important;
}

@media(min-width:821px){
  .hero-section{
    min-height:500px !important;
  }
}

@media(max-width:820px){
  .hero-section{
    min-height:590px !important;
  }

  .hero-bg-image{
    background-size:cover !important;
    background-position:center bottom !important;
  }
}

/* show more of the full hero artwork */
.hero-section{
  min-height:520px !important;
}

.hero-bg-image{
  background-size:contain !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:#001F5B;
}

@media(max-width:820px){
  .hero-section{
    min-height:620px !important;
  }

  .hero-bg-image{
    background-size:cover !important;
    background-position:center bottom !important;
  }
}

/* hero fill fix */
.hero-section{
  min-height:540px !important;
}

.hero-bg-image{
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

@media(min-width:821px){
  .hero-bg-image{
    background-position:center center !important;
  }
}

@media(max-width:820px){
  .hero-section{
    min-height:620px !important;
  }

  .hero-bg-image{
    background-position:center bottom !important;
  }
}