/* IMPORT THE FRAMEWORK */
.service h2, .service, .services, .hero-benefits li {
  position: relative;
}

.hero-benefits li:after, .hero-benefits {
  position: absolute;
}

.service .img-wrapper img, .hero-benefits li:after, .hero-benefits, .service h2 {
  display: block;
}

.service {
  box-sizing: border-box;
}

.service h2, .hero-benefits li {
  text-transform: uppercase;
}

.services, .hero-benefits {
  display: flex;
  flex-wrap: wrap;
}

.hero-benefits {
  justify-content: flex-end;
}

.service h2 {
  font-family: "neurial_grotesk", sans-serif;
}

.services {
  padding-left: 5%;
  padding-right: 5%;
}
@media screen and (max-width: 1921px) {
  .services {
    padding-left: 4.5em;
    padding-right: 4.5em;
  }
}
@media screen and (max-width: 960px) {
  .services {
    padding-left: 5%;
    padding-right: 5%;
  }
}

.service h2 {
  font-size: 1.5em;
}
@media screen and (min-width: 1200px) and (max-width: 1919px) {
  .service h2 {
    font-size: 1.4em;
  }
}
@media screen and (min-width: 451px) and (max-width: 1199px) {
  .service h2 {
    font-size: 1.3em;
  }
}
@media screen and (max-width: 450px) {
  .service h2 {
    font-size: 1.2em;
  }
}

.service li {
  font-size: 1em;
}
@media screen and (min-width: 1200px) and (max-width: 1919px) {
  .service li {
    font-size: 1em;
  }
}
@media screen and (min-width: 451px) and (max-width: 1199px) {
  .service li {
    font-size: 1em;
  }
}
@media screen and (max-width: 450px) {
  .service li {
    font-size: 0.95em;
  }
}

.service h2 {
  font-weight: bold;
  line-height: 1.4em;
  margin-bottom: 1.5em;
}

.hero {
  height: 900px;
  background-image: url("/app/images/home/hero.jpg");
}

.hero-benefits {
  width: 90%;
  bottom: 40px;
  left: 5%;
  right: 5%;
}
.hero-benefits li {
  color: #FFFFFF;
  padding: 0 3%;
}
.hero-benefits li:after {
  content: " ";
  border-left: 3px solid #229780;
  height: 58px;
  top: 0px;
  left: 0;
}

@media screen and (max-width: 760px) {
  .hero {
    height: 700px;
  }

  .hero-text {
    margin-bottom: 3em;
  }

  .hero-benefits {
    width: 90%;
    bottom: 38px;
    left: 5%;
    right: 5%;
  }
  .hero-benefits li {
    color: #FFFFFF;
    width: 100%;
    padding-left: 2.5%;
    line-height: 2em;
  }
  .hero-benefits li:after {
    content: " ";
    border-left: 3px solid #229780;
    height: 58px;
    top: 0px;
    left: 0;
  }
}
@media screen and (max-width: 320px) {
  .hero-benefits {
    display: none;
  }
}
.service {
  width: 33.33%;
  padding: 0 1% 7.5em 1%;
}
.service h2 {
  padding-left: 7.5%;
  border-left: 3px solid #229780;
}
.service li {
  padding: 0.8em 0;
  border-top: 1px solid #97c1b3;
}
.service li:last-of-type {
  border-bottom: 1px solid #97c1b3;
}
.service .img-wrapper {
  margin-bottom: 1.5em;
}
.service .img-wrapper img {
  width: 100%;
}

@media screen and (max-width: 960px) {
  .service {
    width: 100%;
    padding-bottom: 3em;
  }
}