/* --------------------- Kleuren --------------------- */
:root {
  --blue: #1D51B5;
  --red: #EE2235;
  --black: #292929;
  --darkgrey: #707070;
  --lightblue: #EDF8FE;
  --white: white;

  --margin-sections: 250px auto;
}

/* --------------------- Fonts --------------------- */
body{
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  

h1{
  font-family: "Tenor Sans", sans-serif;
  font-weight: 400;

  font-size: 3.5em;
  color: var(--black);
}

h2{
  font-family: "Tenor Sans", sans-serif;
  font-weight: 400;

  font-size: 2.5em;
  color: var(--black);
}

h3{
  font-family: "Manrope", sans-serif;
  font-size: 1.2em;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 10px;
}

p{
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-size: 1em;
  line-height: 1.6em;

  color: (var(--black));
}

li{
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-size: 1em;
    line-height: 1.6em;
    margin-bottom: 15px;
  
    color: (var(--black));
  }

.bold{
  font-size: 1.2em;
  font-weight: 600;
}

/* --------------------- Algemeen --------------------- */

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

.container{
  width: 80vw;
  margin-left: 10vw;
}

.btn{
  color: var(--black);
  padding: 10px 20px;
  border-radius: 30px;
  text-decoration: none !important;
  font-size: 0.9em;
}

.btn.outline{
  border: 1px solid var(--black);
}

.btn.filled{
  color: var(--white);
  background-color: var(--blue);
}



/* --------------------- section 1 - Titel --------------------- */
.sectie1{
  margin: var(--margin-sections)
}

.header-buttons .btn{
margin-right: 30px;
}

.header-buttons{
  margin-top: 50px;
}

.sectie1 h1{
  max-width: 1000px;
}

/* --------------------- section 2 - Header --------------------- */
.sectie2{
  margin: var(--margin-sections)
}

.sectie2.full-foto img{
  width: 100%;
  height: 60vh;
  object-fit: cover;
  object-position: center;
}

/* --------------------- section 3 - Over --------------------- */
.sectie3{
  margin: var(--margin-sections)
}

.sectie3 .container.over-vandico{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}

.sectie3 .bold{
  margin-bottom: 30px;
  padding-right: 100px;
}

/* --------------------- section 4 - Slider --------------------- */
.sectie4{
  margin: var(--margin-sections)
}

.marquee {
  width: 100%;
  overflow: hidden;
}

.marquee-inner {
  display: flex;
  animation: marquee 10s linear infinite; /* Verander 10s naar de gewenste tijd */
  gap: 50px;
  align-items: center;

}

.marquee img {
  width: 100%;
  height: 100%;
}






/* --------------------- section 5 - Diensten --------------------- */
.sectie5{
  margin: var(--margin-sections)
}

.sectie5 .container.diensten{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.sectie5 .container.diensten .item{
  padding: 50px;
  background-color: var(--lightblue);
  border-radius: 10px;
}

.sectie5 .container.diensten .item.uitleg{
  padding: 0px;
  padding-right: 100px;
  background-color: var(--white);
}

.sectie5 .container.diensten .item.uitleg h2{
  margin-bottom: 30px;
}

.sectie5 .container.diensten .item.cta{
  grid-column: span 2;
  text-align: center;
  display: flex;

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

.sectie5 .container.diensten .item.cta p{
  font-family: "Tenor Sans", sans-serif;
  font-weight: 400;

  font-size: 2em;
  line-height: 1.2em;
  color: var(--black);
  text-align: center;
  margin-bottom: 30px;
  max-width: 800px;
}

.sectie5 .item.dienst img{
  width: 50px;
  max-height: 50px;
  margin-bottom: 15px;
}

/* --------------------- section 6 - Referenties --------------------- */

.sectie6{
  margin: var(--margin-sections)
}

.sectie6 .referentie-container-logo{
  display: grid;
  gap: 50px;
  grid-template-columns: repeat(5,1fr);
  margin-top: 50px;
}
.sectie6 .referentie-text{
  margin-bottom: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}


.sectie6 .referentie-text p{
  max-width: 40vw;
}

.sectie6 .referentie-text p{
  display: flex;
  align-items: center;
}

.sectie6 .referentie-container-logo img{
  opacity: 0.4;
  transition: 0.3s all;

  height: 75px;
    object-fit: contain;
    max-width: 150px;
}

.sectie6 .referentie-container-logo img:hover{
  opacity: 1;
  transition: 0.3s all;
}

/* --------------------- section 7 - Full foto --------------------- */

.sectie7{
  margin: var(--margin-sections)
}

.sectie7.full-foto img{
  width: 100%;
  aspect-ratio: 16 / 6;
  object-fit: cover;
  object-position: center;
}


/* --------------------- section 8 - Werkwijze --------------------- */

.sectie8{
  margin: var(--margin-sections)
}

.sectie8.werkwijze .container.werkwijze{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}

.sectie8 .werkwijze-titel h2{
  position: sticky;
  top: 300px;
  max-width: 250px;
}

.sectie8 .werkwijze-item{
  display: flex;
  flex-direction: row;
  padding: 50px 0;

  border-bottom: 1px solid var(--black);
}

.sectie8 .werkwijze-item:first-child{
  padding: 0 0 50px 0;
}

.sectie8 .werkwijze-item:last-child{
  padding: 50px 0 0 0;
  border: none;
}

.sectie8 .werkwijze-nummer{
  min-width: 100px;
}


/* --------------------- section 9 - Checklist --------------------- */

.sectie9{
  margin: var(--margin-sections);
  background-color: var(--lightblue);
}

.sectie9 .container.checklist{
  width: 90vw;
  margin-left: 0px;

  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.sectie9 .checklist-tekst h2{
  margin-bottom: 15px;
}

.sectie9 .checklist-tekst p{
  margin-bottom: 30px;
}

.sectie9 .checklist-tekst{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  padding: 100px 0px;
}

.sectie9 img{
  height: 100%;
  object-fit: cover;
  object-position: bottom right;
  width: 100%;
}


/* --------------------- section 10 - Contact --------------------- */

.sectie10{
  margin: var(--margin-sections)
}

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

.sectie10 .contact-tekst-info{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 100px;
  row-gap: 30px;
}

.sectie10 .contact-tekst-info{
  margin-top: 30px;
}

.sectie10 .contact-tekst h2{
margin-bottom: 30px;
}

.sectie10 .contact-info-titel{
  color: var(--darkgrey);
  font-weight: 600;
}

.sectie10 a{
  text-decoration: none;
  color: var(--black);
}

.sectie10 .contact-foto img{
  height: 100%;
  object-fit: cover;
  width: 100%;
}


/* --------------------- Policies --------------------- */
.container.policy{
    margin-top: 80px;
}

.container.policy h3{
    margin-top: 30px;
}

.container.policy h2{
    margin-bottom: 10px;
}


/* --------------------- footer--------------------- */
footer{
  background-color: var(--black);
  padding-top: 100px;
}

.footer-tekst-algemeen {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 10px;
}

.footer-tekst-diensten {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 10px;
}

footer li a {
  color: var(--white);
  text-decoration: none;
  font-size: 0.9em;
}

footer h3 {
  color: var(--white);
  text-decoration: none;
  font-size: 1em;
  margin-bottom: 0px;
}

footer .footer-container-tekst{
  display: flex;
  justify-content: flex-end;
}

footer .footer-tekst-algemeen{
  margin-right: 100px;
}

footer img{
  display: flex;
  max-width: 175px;
}

footer .container.footer-tekst{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 100px;
  background-color: var(--black);
}

footer .footer-info{
  display: flex;
  padding: 25px 0;
  justify-content: space-between;
  color: white;
  font-size: 0.9em;
}

footer .footer-info a{
margin-left: 15px;
color: white;
text-decoration: none;
}

footer .footer-info a:first-child{
  margin-left: 0px;
  }

footer
/* --------------------- Laad scherm --------------------- */


/* --------------------- Fontchange scherm --------------------- */

/* --------------------- Mediaquerries --------------------- */

@media screen and (min-width: 850px) {
  .mobile-show{
    display: none;
  }
}
@media screen and (max-width: 1200px) {
   /* ------ Sectie 5 ------ */
   .sectie5 .container.diensten {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .sectie5 .container.diensten .item.cta{
    grid-column: unset;
  }

  .sectie5 .container.diensten .item.uitleg{
    padding-right: 0px;
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 1000px) {
    /* ------ Sectie 9 ------ */

    .sectie9 .container.checklist {
      width: 80vw;
      margin-left: 10vw;
      display: grid;
      grid-template-columns: 1fr;
      gap: 0px;
      padding: 100px 0 0 0;
    }
    
    .sectie9 .checklist-tekst {
      grid-row-start: 1;
      padding: 0px 0 0 0;
    }
  }

@media screen and (max-width: 850px) {

  /* ------ Algemeen ------ */
  :root {
    --margin-sections: 150px auto;
  }

  .mobile-show{
    display: inline-block;
  }

  .mobile-hide{
    display: none;
  }

  /* ------ Sectie 1 ------ */
  .sectie1{
    height: 100vh;
    margin: 0px 0;
    display: flex;
    align-items: center;
  }

  /* ------ Sectie 2 ------ */
  .sectie2{
    margin: 0;
  }

  /* ------ Sectie 3 ------ */
  .sectie3 .container.over-vandico {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .sectie3 .bold{
    margin-bottom: 0px;
  }

  .sectie3 .btn.outline.mobile-show{
    margin-top: 30px;
  }

  .sectie3 .bold{
    padding-right: unset;
  }

  /* ------ Sectie 4 ------ */
  .marquee img {
    width: 250px;
    height: 100%;
  }

    /* ------ Sectie 5 ------ */
    .sectie5 .container.diensten {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
    }

  /* ------ Sectie 6 ------ */
  .sectie6 .referentie-container-logo {
    display: grid;
    gap: 50px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 50px;
}

/* ------ Sectie 8 ------ */
.sectie8.werkwijze .container.werkwijze {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
}

/* ------ Sectie 10 ------ */
.sectie10 .container.contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 100px;

}

/* ------ footer ------ */
footer .container.footer-tekst {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 75px;
  background-color: var(--black);
  flex-direction: column;
  gap: 50px;
}
}
@media screen and (max-width: 650px) {

  /* ------ Sectie 5 ------ */
  .sectie5 .container.diensten {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* ------ Sectie 6 ------ */
  .sectie6 .referentie-text{
    flex-direction: column;
  }

  .sectie6 .referentie-text p{
    max-width: unset;
  }
  
  /* ------ Sectie 8 ------ */
.sectie8.werkwijze .container.werkwijze {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
}

 /* ------ Sectie 10 ------ */
.sectie10 .contact-tekst-info{
    grid-template-columns: 1fr;
}

/* ------ Sectie 1 ------ */
.header-buttons{
    display: flex;
    flex-direction: column;

    align-items: flex-start;
    gap: 20px;
}
.header-buttons .btn{
        display: inline-block !important;
}

/* ------ FONTS ------ */
h1{
    font-size: 2.5em;
}

}