@import '../styles.scss';

app-header {
  box-shadow: 0 1.5rem 1rem rgba(0,0,0,0.21);
  position: relative;
  z-index: 5;
}

.hero-container {
  width: 100%;
  height: 50rem;
  overflow: hidden;

  .hero {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
  }

  .overlay {
    background-color: rgba(255, 255, 255, 0.35);
    height: 60rem;
    width: 100%;
    top: -160rem;
    display: inline-block;
    position: relative;
  }
}

.hero1 {
  width: 230.1rem;
  height: 153.6rem;
}

.hero2 {
  width: 555.1rem;
  height: 370.1rem;
}

.hero-container2 {
  width: 100%;
  height: 35rem;
  overflow: hidden;

  .hero {
    position: relative;
    left: 60%;
    top: 20%;
    transform: translateY(-50%) translateX(-50%) scale(0.5);
  }

  .overlay {
    background-color: rgba(255, 255, 255, 0.35);
    height: 60rem;
    width: 100%;
    top: -380rem;
    display: inline-block;
    position: relative;
  }
}

.bold {
  font-weight: bold;
  display: block;
}

h2 {
  color: $primary-color;
  font-size: 3rem;
  font-weight: bold;
}

.wrapper {
  max-width: 120rem;
  margin: 0 auto;
  padding: 2rem 2rem 6rem 2rem;
}

.alternate {
  background-color: $light;
}

#diensten, #advies {
  .content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
}

#wiezijnwe .wrapper, #advies .wrapper {
  display: flex;
  justify-content: space-between;

  .content {
    width: 60%;
  }

  img {
    max-width: 45%;
    height: 100%;
    margin-right: -2%;
    margin-bottom: -5rem;
  }
}

#klantworden {
  margin-bottom: 4rem;

  p + h2 {
    margin-top: 10rem;
  }

  .content img {
    display: none;
  }

  .timeline {
    border-left: 0.2rem solid $primary-color;
    padding: 1rem 3rem 2rem 3rem;
    margin-left: 2rem;

    div + div {
      margin-top: 3rem;
    }

    div {
      display: flex;
    }

    p {
      width: calc(100% - 2rem);
    }

    .circle {
      content: '';
      display: inline-block;
      width: 3rem;
      height: 3rem;
      border-radius: 2rem;
      border: 0.5rem solid $white;
      background-color: $secondary-color;
      margin: auto;
      margin-left: -5rem;

    }

    p > span {
      display: block;

      a {
        color: $secondary-color;
      }
    }
  }
}

#vacatures, #klantworden, #diensten {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;

  .content {
    width: 60%;
  }

  img {
    max-width: 45%;
    height: 100%;
    margin-bottom: -5rem;
  }
}

.wrapper-contact {
  display: flex;
  padding: 2rem 2rem;

  a {
    display: flex;
    align-items: center;
    text-decoration: none;

    p {
      margin: 0;
    }
  }

  span {
    color: $secondary-color;
    margin-right: 3rem;
    width: 1.8rem;
  }

  .text {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  div {
    width: 50%;
  }
}

.footer {
  width: 100%;
  padding-top: 5rem;
  padding-bottom: 7rem;
  text-align: center;

  span {
    font-size: 2rem;
  }
}

@media only screen and (max-width: 1200px) {
  .hero-container {
    height: 20rem;

    .hero {
      transform: translateY(-50%) translateX(-50%) scale(0.35);
      top: 25%;
    }
  }

  .hero-container2 {
    height: 20rem;

    .hero2 {
      transform: translateY(-50%) translateX(-50%) scale(0.28);
      top: 0;
    }
  }

  .wrapper {
    padding: 2rem 3rem 6rem 3rem;
  }

  #diensten {
    display: inline-block;

    img {
      position: relative;
      width: 20.4rem;
      height: 20rem;
      top: -6rem;
      left: calc(100vw - 30rem);
      transform: scale(1.25);
    }

    .content {
      z-index: 5;
      position: relative;
      width: 100%;
      margin-top: -17rem;
    }
  }

  #advies {
    margin-top: 2rem;

    .wrapper {
      display: inline-block;

      img {
        position: relative;
        width: 20.4rem;
        height: 20rem;
        top: -6rem;
        left: calc(100vw - 30rem);
        transform: scale(1.25);
      }

      .content {
        z-index: 5;
        position: relative;
        width: 100%;
        margin-top: -17rem;
      }
    }
  }

  #klantworden {
    display: inline-block;
    padding: 3rem;

    img {
      display: none;
    }

    .content {
      display: flex;
      flex-direction: column;
      align-items: center;

      z-index: 5;
      position: relative;
      width: 100%;

      h2 {
        width: 100%;
      }

      img {
        display: inline;
        margin: 3rem;
        width: 40rem;
        height: 38rem;
        max-width: 40rem;
      }

    }
    .timeline {
      div + div {
        margin-top: 0rem;
      }
    }
  }

  #wiezijnwe {
    display: inline-block;

    .wrapper {
      align-items: flex-end;
      flex-direction: column;
      margin-top:-6rem;

      img {
        width: 36rem;
        max-width: 36rem;
        height: 32rem;
        position: relative;
        top: -16rem;
      }
    }

    .wrapper .content {
      z-index: 5;
      position: relative;
      width: 100%;
      margin-top: -19rem;
    }
  }

  #vacatures {
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
      width: 50rem;
      max-width: 50rem;
      height: 100%;
      position: relative;
      top: -12rem;
    }

    .content {
      z-index: 5;
      position: relative;
      width: 100%;
      margin-top: -15rem;
    }
  }

  #contact {
    .wrapper-contact {
      display: inline;

      .text {
        padding: 3rem;
        margin-bottom: 3rem;
        width: 100%;
      }

      .google-maps {
        padding: 3rem;
        iframe{
          margin: 0 auto;
          width: calc(100vw - 6rem);
        }
    }
    }
  }
}
