.hero {
      background-image: url(../img/educational.jpg);
      max-height: 400px;
      background-position: center;
      background-size: cover;
      background-attachment: fixed;
      position: relative;
      z-index: 2;
  }

  .hero::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(214, 210, 224, 0.397);
      z-index: -1;
  }

  section {
      padding-top: 50px;
      padding-bottom: 50px;
  }