/* --------------------- Algemeen--------------------- */
  p {
      font-size: 1em;
  }

  /* --------------------- section 1 text-header--------------------- */
  .uitleg p {
      margin: 0 auto;
      width: 60vw;
      font-size: 2em;
      line-height: 1.2em;

      font-weight: 200;
      text-align: center;
  }

  .uitleg h2 {
      margin: 0 auto;
      width: 60vw;
      font-size: 3.6em;
      line-height: 1.2em;

      font-weight: 400;
      text-align: center;
      margin-bottom: 25px;
  }

  .cases-title-container h2 {
      font-size: 1.8em;
      letter-spacing: 0.05px;
  }

  .sectie1 {
      padding: 15vh 0;
      width: 90vw;
      margin-left: 5vw;
      margin-top: -100px;

      display: flex;
      align-content: center;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      animation-name: header;
      animation-duration: 2s;

  }

  /* --------------------- section 2 foto-header--------------------- */

  @keyframes header {
      0% {
          height: calc(85vh)
      }

      50% {
          height: calc(85vh)
      }

      75% {
          height: calc(75vh)
      }

      100% {
          height: calc(75vh)
      }
  }

  .section2 {
      margin: 0 auto;
      width: 80vw;
      aspect-ratio: 16/7;

      background-color: aliceblue;
      margin-top: 5vh;
  }

  .section2 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }


  /* --------------------- section 3 services--------------------- */

  .section3 {
      margin: 0 auto;
      width: 80vw;
      margin-top: 150px;
  }

  .section3 .container {
      display: grid;
      gap: 150px;
      grid-template-columns: 1fr 2fr;
  }

  .service1 {
      border: 1px solid red;
  }

  .number {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
  }

  .column {
      columns: 2;
      font-size: 0.9em !important;
      margin-top: 50px;
      gap: 30px;
  }

  .circle {
      background-color: #121212 !important;
      width: 10px;
      height: 10px;
      color: black;
      border-radius: 50%;
  }

  .title {
      font-size: 36px;
      font-weight: bold;
  }

  .content.services {
      font-size: 18px;
      line-height: 1.5;
      display: flex;
      flex-direction: column;
      gap: 100px;
  }

  .divider {
      border-top: 1px solid #121212 !important;
      margin: 20px 0;
  }

  .section3 .title h2 {
      font-size: 1em;
      letter-spacing: 0.05px;
  }

  .service-content {
      display: grid;
      gap: 50px;
      grid-template-columns: 1fr 2fr;
  }

  .content.foto video {
      position: sticky;
      top: 50px;

  }

  /* --------------------- section 4 --------------------- */

  .section4 {
      margin-top: 150px;
  }

  .section4 .container {
      margin: 0 auto;
      width: 80vw;
      padding: 150px 0;

      color: white;
  }

  .section4 .container h2 {
      font-size: 3.6em;
      line-height: 1.2em;

      font-weight: 400;
      text-align: center;
      margin-bottom: 25px;
      text-align: left;
  }

  .section4 .container h3 {
      font-size: 1.2em;
      text-align: left;
      margin-bottom: 15px;
  }

  .section4 .container .content {
      display: grid;
      gap: 100px;
      grid-template-columns: 1fr 1fr 1fr;
      margin-top: 50px;
  }




  /* ---------------------  Queries --------------------- */


  @media screen and (max-width: 950px) {
      .section4 .container .content {
          display: grid;
          gap: 75px;
          grid-template-columns: 1fr 1fr;
          margin-top: 50px;
      }

      .section3 .container {
          display: grid;
          gap: 100px;
          grid-template-columns: 200px 1fr;
      }

      .service-content {
          display: grid;
          gap: 50px;
          grid-template-columns: 1fr;
      }
  }

  @media screen and (max-width: 800px) {
      .content.foto {
          display: none;
      }

      .section3 .container {
          display: grid;
          gap: 0px;
          grid-template-columns: 1fr;
      }

      .uitleg p {
        width: 70vw;
        font-size: 1.5em;
        line-height: 1.2em;
      }
     
      .uitleg h2 {
        width: 70vw;
        font-size: 3.1em;
        line-height: 1.2em;
      }
  }



  @media screen and (max-width: 650px) {
      .section4 .container .content {
          display: grid;
          gap: 75px;
          grid-template-columns: 1fr;
          margin-top: 50px;
      }

      .uitleg p {
        width: 90vw;
        font-size: 1.3em;
        line-height: 1.2em;
      }
     
      .uitleg h2 {
        width: 90vw;
        font-size: 2.5em;
        line-height: 1.2em;
      }
  }