.we-do {
  position: relative;
}

.we-do img, .hero-text p {
  display: block;
}

.we-do p {
  box-sizing: border-box;
}

.hero-text p {
  content: "";
}

.we-do h2, .hero-text span {
  text-transform: uppercase;
}

.we-do .item, .we-do {
  display: flex;
  flex-wrap: wrap;
}

.hero-text p {
  background-repeat: no-repeat;
}

.we-do p {
  width: 80%;
}

.we-do h4, .we-do h3 {
  font-family: "neurial_grotesk", sans-serif;
}

.we-do h2, .hero-text span {
  font-family: "Weekly", sans-serif;
}

.we-do {
  padding-left: 12.5%;
  padding-right: 12.5%;
}
@media screen and (min-width: 451px) and (max-width: 1200px) {
  .we-do {
    padding-left: 7.5%;
    padding-right: 7.5%;
  }
}
@media screen and (max-width: 450px) {
  .we-do {
    padding-left: 5%;
    padding-right: 5%;
  }
}

.hero-text p {
  background-image: url("/app/images/global/arrow-blue-down.png");
  background-size: 30px;
}

.we-do h2, .hero-text span {
  margin-bottom: 3em;
  color: #8d8d8d;
}

.we-do span, .we-do h3 {
  font-size: 2.4em;
}
@media screen and (min-width: 1200px) and (max-width: 1919px) {
  .we-do span, .we-do h3 {
    font-size: 2.4em;
  }
}
@media screen and (min-width: 451px) and (max-width: 1199px) {
  .we-do span, .we-do h3 {
    font-size: 2.2em;
  }
}
@media screen and (max-width: 450px) {
  .we-do span, .we-do h3 {
    font-size: 1.5em;
  }
}

.we-do h4 {
  font-size: 1.4em;
}
@media screen and (min-width: 1200px) and (max-width: 1919px) {
  .we-do h4 {
    font-size: 1.3em;
  }
}
@media screen and (min-width: 451px) and (max-width: 1199px) {
  .we-do h4 {
    font-size: 1.15em;
  }
}
@media screen and (max-width: 450px) {
  .we-do h4 {
    font-size: 1.1em;
  }
}

.we-do p {
  font-size: 1.05em;
}
@media screen and (min-width: 1200px) and (max-width: 1919px) {
  .we-do p {
    font-size: 1.05em;
  }
}
@media screen and (min-width: 451px) and (max-width: 1199px) {
  .we-do p {
    font-size: 0.95em;
  }
}
@media screen and (max-width: 450px) {
  .we-do p {
    font-size: 0.9em;
  }
}

.we-do h2, .hero-text span {
  font-size: 0.9em;
}
@media screen and (min-width: 1200px) and (max-width: 1919px) {
  .we-do h2, .hero-text span {
    font-size: 0.9em;
  }
}
@media screen and (min-width: 451px) and (max-width: 1199px) {
  .we-do h2, .hero-text span {
    font-size: 0.85em;
  }
}
@media screen and (max-width: 450px) {
  .we-do h2, .hero-text span {
    font-size: 0.8em;
  }
}

.we-do h4, .we-do h3 {
  font-weight: 900;
  line-height: 1.2em;
  margin-bottom: 1.5em;
}

.we-do h2, .hero-text span {
  font-weight: normal;
  line-height: 1.6em;
  margin-bottom: 1.5em;
}

.we-do p, .we-do span {
  font-weight: normal;
  line-height: 1.8em;
  margin-bottom: 1.5em;
}

.hero {
  background-image: url("/app/images/expertise/hero.jpg");
}
.hero h1 {
  top: 500px;
  right: 150px;
}

.hero-text {
  margin-bottom: 1.5em;
}
.hero-text h2 {
  padding-right: 3em;
  margin-bottom: 0.5em;
}
.hero-text p {
  background-position: left bottom;
  padding-bottom: 140px;
}
.hero-text span {
  color: #02BBED;
  margin-bottom: 0.5em;
}

.intro {
  margin-top: -270px;
  padding: 400px 20% 100px 20%;
}

.we-do {
  color: #FFFFFF;
  margin-bottom: 5em;
}
.we-do .item {
  flex-direction: column;
  width: 28%;
  margin: 1.5em 2.5%;
}
.we-do h2 {
  width: 100%;
}
.we-do span {
  color: #F62971;
}
.we-do img {
  width: 100%;
  margin-top: auto;
}

@media screen and (max-width: 760px) {
  .we-do .item {
    width: 95%;
    margin-left: 5%;
  }
}