html {
  font-size: 16px;
  scroll-behavior:smooth!important;
}

body {
  display: flex;
  justify-content: center;
  min-height: auto;
  min-width: auto;
  width: 100%;
  margin:0;
  overflow:visible;
  align-items: center;
  background-color: var(--secondarycolour);
  display: inline-flex;
  flex-direction: column;
  height:fit-content;
  position: relative;
}


section {
  width:100%;
  overflow:visible;
}

a {
  color: var(--primarytextcolour);
  text-decoration: none;
}

#over-ons, #menu, #impressie, #contact {
  scroll-margin-top: 90px;
}
/* navbar*/
/* Dit zorgt voor het uitschakelen van scrollen wanneer het menu open is */
body.no-scroll {
  overflow: hidden;
}

/* Stel het uitklapmenu in om te scrollen als dat nodig is */
.nav-center ul {
  overflow-y: auto; /* Scroll als de inhoud te groot is voor het scherm */
}

.stickysticky {
  width:100%;
  position: sticky; 
  top: 0; 
  z-index: 1000;
}

nav {
  position: sticky;
  top: 0;
  background-color: var(--primarycolour);
  color: var(--secondarytextcolour);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 70px;
  z-index: 1000;
}

.nav-button {
  text-transform: uppercase;  
}

.nav-button:hover {
  background: var(--accent2colour);
}
.logo img {
  max-width: 200px;
  max-height: 30px;
  width: auto;
}


.nav-center {
  flex-grow: 1;
  display: flex;
  justify-content: center;
}

ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li {
  margin-right: 20px;
}

ul li a {
  color: var(--secondarytextcolour);
  text-decoration: none;
  transition: color 0.3s;
  padding: 0px 48px; 
}

ul li a:hover {
  color: var(--accent2colour);
}

/* Hamburger icon */
.checkbtn {
  font-size: 30px;
  color: var(--secondarytextcolour);
  cursor: pointer;
  display: none;
  z-index: 2; 
}

#check {
  display: none;
}


.closebtn {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 30px;
  color:var(--secondarytextcolour);
  cursor: pointer;
  display: none; /* Verberg standaard */
  z-index: 3; 
  display:none; /*als je geen kruis icoontje wil */
}
/* einde navbar */

.hero-desktop, .contactform, .information-block1-desktop, .image-links-desktop, .image-carousel-block, .socials1-desktop-tablet, .footer-desktop {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  padding: 50px 70px;
  width: 100%;
  position: relative;
}

td {
  padding: 4px 24px;
  padding-left:0px;
}
/* buttons */
button, .button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 12px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--accent1colour);
  color: var(--secondarytextcolour);
  border-radius: 8px;
  transition: 0.5s ease;
}

.btn-navbar {
  background-color: var(--accent2colour);
  color: var(--secondarytextcolour);
  padding:0px;

}

.btn-navbar:hover {
  background-color: var(--accent1colour);
}


.btn-hero {
  background-color: var(--accent1colour);
  min-width:320px;
}

.btn-hero:hover {
  transform: scale(1.05);
}

.btn-overons {
  background-color: var(--accent2colour);
  color:var(--primarycolour);
  margin-top:48px;
}

.btn-overons:hover {
  transform: scale(1.1);
}

.btn-3 {
  background-color: transparent;
  color:var(--primarycolour);
  border: solid 5px var(--primarycolour);
}

.btn-3:hover {
background-color:var(--primarycolour);
border: solid 5px var(--primarycolour);
color:var(--tertiarycolour);
}
/* einde buttons */

 .logo-rechthoek-small {
  height: auto;
  width: 250px;
  z-index: 2;
}

.logo-rechthoek-big {
  align-self: center;
  height: auto;
  width: 684px;
  max-height: 300px;
  max-width: 684px;
  min-width: 448px;
  object-fit: contain;
}


.image-links-desktop p {
  padding-left:20%;
  padding-right:20%;
}

.hero-desktop {
  gap: 83px;
  justify-content: center;
  padding: 300px 378px;
  z-index:1;
}

.background-img {
position: relative;
width: 100%;
object-fit: cover;
}

.background-img > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.background-img img.logo-rechthoek-big {
  position: relative; 
  z-index: 1; 
}

.hero-desktop::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); 
  z-index: -1; 
}


.h2-opmaak {
  gap: 24px;
  justify-content: center;
  text-align:center;
}

.subtitle-opmaak {
  align-items: left;
  align-self: stretch;
  display: flex-start;
  flex: 0 0 auto;
  gap: 8px;
  justify-content: center;
  position: relative;
  width: 100%;
}


.information-block1-desktop {
  align-self: center!important;
  height: auto;
  text-align:center;
  color:var(--secondarytextcolour);
  background-color: var(--primarycolour);
}

.information-block1-desktop p {
  align-items: center;
  gap: 8px;
  justify-content: center;
  max-width: 1200px;
}

.image-links-desktop {
  display: flex;
  gap: 24px;
}

.image-links-desktop h2{
color:var(--primarytextcolour)
}

.image-links-desktop p{
text-align:center;}


.image-container {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 80px;
  width: 50%;
  justify-content:center;
}

.information-block1-desktop-1 {
  align-items: center;
  align-self: stretch;
  background-color: var(--tertiarycolour);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 32px;
  padding: 54px 183px;
  position: relative;
  width: 100%;
}

.image-carousel-block {
  background-color: var(--primarycolour);
  gap: 24px;
  height:auto;
}

.image-carousel-block h2 {
color:var(--secondarytextcolour);
}

.sfeerimpressie {
  color: var(--secondarycolour);
  font-weight: 400;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
  width: fit-content;
}

.image-carousel {
  align-self: stretch;
  background-color: var(--primarycolour);
  display: flex;
  height: 474px;
  overflow: hidden;
  width: 100%;
}

.images {
  align-items: center;
  display: inline-flex;
  gap: 48px;
  height: 314.97px;
  margin-left: -8px;
  margin-top: 0;
  overflow: hidden;
  position: relative;
  width: 3256px;
}

.rectangle {
  height: 314.97px;
  margin-top: -2179.51px;
}


.contact-block1-desktop {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 64px;
  padding: 50px 70px;
  position: relative;
  justify-content: center;
  width:100%;
}

.contact-block1-desktop .logo-rechthoek {
  width:75%;
}

.container-6 {
  align-items: center;
  display: inline-flex;
  flex-direction:row;
  flex: 0 0 auto;
  gap: 80px;
  position: relative;
  width:100%;
}



.contact-textblock {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 82px;
  position: relative;
  width: 50%;
  line-height: 2;
}

.container-contactblock {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.container-3 {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 24px;
  justify-content: left;
  position: relative;
}

.vector {
  height: 22px;
  position: relative;
  width: 22px;
}


.vector-1 {
  height: 16.5px;
  position: relative;
  width: 22px;
}

.socials1-desktop-tablet {
  background-color: var(--accent2colour);
  gap: 32px;
  height: 100%;
}

.socials1-desktop-tablet a.social-icon {
  margin-left: 24px;
  margin-right: 24px;
}


.socials1-desktop-tablet h2 {
color:var(--primarycolour);
text-align: center;
}

.container-icons {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 40px;
  position: relative;
}

.icon-hovereffect-1 {
  align-items: center;
  display: flex;
  height: 72px;
  justify-content: center;
  position: relative;
  width: 72px;
}

.icon {
  height: 60px;
  margin-left: 0;
  width: 60px;
}

.icon-hovereffect {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 72px;
  justify-content: center;
  position: relative;
  transition: all 0.2s ease;
  width: 72px;
}

.icon-hovereffect:hover {
  transform: scale(1.1);
}

/* keurmerken */
.banner-slider {
   overflow:hidden;
   white-space: nowrap;
   position: relative;
   width:100%;
   max-width: 1320px;
   padding: 24px 0px;
   display:flex;
   justify-content: center;
  }
  
  .banner-slider .section-title {
   margin-bottom:48px;
  }
  
  .banner-slider:before,
  .banner-slider:after {
   position: absolute;
  top:0;
   width:250px;
   height:100%;
   content: "";
   z-index:2; 
  }
  
  .banner-slider:before{
  background: linear-gradient(to left, rgba(255,255,255,0), white); 
  left:0;
  display:none;
  }
  .banner-slider:after{
   background: linear-gradient(to right, rgba(255,255,255,0), white); 
   right:0;
   display:none;
   }
  
  .banner-slider:hover .logos-slide{
   animation-play-state: paused;
  }
  
  .logos-slide {
   animation: 35s slide infinite linear;
   display:inline-block;
  }
  
  .logos-slide img{
   height: 60px;
   margin: 0 40px;
  }
  
  @keyframes slide {
   from{
    transform: translateX(0);
  
   }
   to {
    transform: translateX(-100%);
   }
  }
  /*einde keurmerken*/
  
/* footer */

.footer-desktop {
  background-color: var(--primarycolour);
  height: auto;
  flex-direction: column;
  gap:24px;
}

.footer-desktop p, .footer-desktop a, .footer-desktop h4 {
  color:var(--secondarytextcolour);
  text-align:left;
}

.container-footer {
  display: flex;
  gap: 50px;
  justify-content: space-around;
  width: 100%;
  max-width: 1400px;
  color: var(--secondarytextcolour);
  align-items: stretch;
}

.contactblock {
  gap: 12px;
  min-width: 300px;
}



 .footer-container1 {
  display: flex;
  width: 25%;
}

.footer-container2 {
  display: flex;
  flex-direction: row;
  width: 75%;
  justify-content: space-around;
}

 .phone-mail-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  width: 100%;
  gap: 12px;
}

 .container-phone, .container-mail{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.container-openingstijden {
  min-width:300px;
  text-align:center!important;
}

.container-openingstijden td {
  text-align: left;
}

.container-links h4, .socials-container h4 {
  margin-bottom:8px;
}


.container-social {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  gap: 12px;
  width: 100%;
  justify-content: flex-start;
}

.container-openingstijden,  .contactgegevens-container, .container-links, .socials-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.socials-container {
  gap:16px!important;
}

.socials-container .social-media-icons {
  display: flex;
  font-size: 1.5em;
}

.socials-container .social-media-icons .social-icon {
  padding-right: 24px;
}

/* einde footer */



/* contact sectie */
.contactgegevens-container p, .openingstijden td, .openingstijden h3{
  text-align: left;
}

.image-wrapper {
  display:flex;
  justify-content: center;
  align-items: center;
  width:310px;
  height:310px;
  position:relative;
  overflow:hidden;
  transition: 0.3s ease;
}

.image-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.2;
  z-index: 2; 
  pointer-events: none; 
}

.image-wrapper img.logo-rechthoek-small {
  position:absolute;
  width:75%;
  height:50%;
  object-fit:contain;
  z-index: 2;
  }


.image-wrapper h3 {
  position: absolute;
  z-index: 2;
}



.image-container .image-wrapper{
display:flex;
justify-content: center;
align-items: center;
width:310px;
height:600px;
position:relative;
overflow:hidden;
transition: 0.3s ease;
}

.image-wrapper img .logo-rechthoek-small {
  position: absolute!important;
}

.contact-block1-desktop .image-wrapper {
  width:900px;
}

img.achtergrond-img{
  width:100%;
  height:100%;
  object-fit: cover;
  transition: 0.3s ease;
}

img.achtergrond-img:hover {
  transform:scale(1.1);
}



img.contact-logo {
position: absolute;
width: 75%;
height: 50%;
object-fit: contain;
z-index: 2;
}

.iconhover {
  transition: 0.3s ease;
}

.iconhover:hover {
  transform: scale(1.2);
}
/* contact sectie */

/* contactformulier*/
.contactform {
  background-color: var(--tertiarycolour);
}

/* forms */
.form-container {
  width: 100%;
  align-items: center;
  display: flex;
  flex-direction: column;
  p{
  max-width:1200px;
  width:100%;
  text-align: left;
  }
}

.upload-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 0px solid var(--secondarycolour);
  border-radius: 50px;

}
.upload-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: var(--secondarytextcolour);
  border-radius: 8px;
}

.file-name {
  flex-grow: 1;
  padding-left: 15px;
  color: var(--secondarycolour);
  font-family: var(--font-family-open-sans);
}

.upload-btn {
  background-color: #dddddd;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--primarycolour);
  text-align: center;
  white-space: nowrap;
  margin-bottom:0px!important;
}

.form-btn {
  background-color: var(--primarycolour);
  color: white;
  transition: 0.5s ease;
  margin-top: 24px;
  border:3px solid var(--primarycolour);
  width:25%;
  cursor: pointer;
}

.form-btn:hover{
  background-color: transparent;
  border: 3px solid var(--primarycolour);
  color: var(--primarycolour);
}

form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width:75%;
  max-width:1200px;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  gap:16px;
}

.col {
  flex: 1;
  margin-right: 10px;
}

.col-3 {
  flex: 1 1 25%;
  margin-right: 10px;
}

.col-6 {
  flex: 1 1 50%;
  margin-right: 0px;
}

.col-9 {
  flex: 1 1 75%;
  margin-right: 10px;
}

.col:last-child {
  margin-right: 0;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom:10px;
  text-align: left!important;
}

.bold {
  font-weight:bold;
}

input[type="text"], input[type="number"], input[type="email"], input[type="date"], textarea, select{
  width: 100%;
  padding: 10px;
  border: 0px solid var(--secondarycolour);
  border-radius: 8px;
  box-sizing: border-box;
  color:var(--primarytextcolour);
  background-color: var(--secondarytextcolour);
}

textarea {
  height: 200px;
  overflow:hidden;
  border-radius: 8px!important;
  overflow:auto;
}

label i {
  margin-right: 10px;
}
/*einde contactformulier*/


/* onze menu's sectie */
.menu-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

.menu-container h3 {
  z-index: 2;
}

.menu-img-container .menu-img-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 310px;
  height: 310px;
  position: relative;
  overflow: hidden;
  transition: 0.3s ease;
}

.menu-img-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 310px;
  height: 310px;
  position: relative;
  overflow: hidden;
  transition: 0.3s ease;
  z-index: 1;
}

.menu-img-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  transition: 0.3s ease;
}

.menu-img-wrapper img:hover {
  transform: scale(1.1);
}

.menu-img-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.2;
  z-index: 2; 
  pointer-events: none; 
}

.menu-img-wrapper h3 {
  position: absolute;
  z-index: 3; 
  color: white;
}

/* einde onze menu's sectie */



/* image carousel */
.image-carousel {
  display: flex;
  min-width:1200px;
  gap: 24px;
  padding: 16px;
  height:auto;
  list-style: none;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  /* Hide scrollbar in Firefox */
  scrollbar-width: none;
  /* Hide scrollbar in IE and Edge */
  -ms-overflow-style: none;
}

/* Hide scrollbar in webkit */
.list::-webkit-scrollbar {
  display: none;
}

.image-carousel-wrapper {
  display:flex;
  position:relative;
  width: 100%;
  overflow:hidden;
}

.item {
  flex-shrink: 0;
  width: 50%;
  height: 45vh;
  padding: 8px 0px;
  scroll-snap-align: center;
}

.item img{
  object-fit: cover;
  object-position: center;
  width:100%;
  height: 100%;
}


.content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 48px;
  font-weight: bold;
  color:var(--primarytextcolour)!important;
}

.list-wrapper {
  position: relative;
}

.btn-impressie {
  position: absolute;
  top: 50%;
  background-color: var(--tertiarycolour);
  border-radius:100%;
  border: 0px solid;
  width: 3rem;
  height: 3rem;
  transform: translateY(-50%);
  opacity: 40%;
  transition: 0.3s ease;
}

.btn-impressie:hover {
opacity:90%;
}

.btn-impressie--previous {
  left: 1.5rem;

}

.btn-impressie--next {
  right: 1.5rem;
}

.image-carousel-block i {
  color:var(--secondarytextcolour);
}



/* media query desktops */
@media (min-width: 1025px) {

  .item {
    width:30%;
  }
  .contactblock, .container-openingstijden, .container-links, .socials-container {
    min-width:300px;
  }

  .container-6 {
    width:75%;
}
.nav-button-mobile {
  display: none;
}
}

/* media query tablets*/
@media (min-width: 768px) and (max-width:1024px) {
  p {
      font-size:var(--font-size-tablet-s)!important;
    }

    h3 {
      font-size:var(--font-size-tablet-m)!important;
    }

    h2 {
      font-size:var(--font-size-tablet-l)!important;
    }

    .information-block1-desktop, .information-block1-desktop-1, .image-links-desktop, .socials1-desktop-tablet, .footer-desktop, .contact-block1-desktop{
      padding: 75px 35px 75px;
      gap:24px;
    }



    .image-carousel {
        min-width:0px;
        padding:0px;
        gap: 12px;
      }

      .image-carousel-block {
        height:50vh;
      }

    
    .item {
      width:75%;
    }

    .container-6 {
      flex-direction:column;
    }

    .image-container {
      width:100%;
    }

    .image-links-desktop p {
      padding:0;
    }


    .contact-textblock, .contactgegevens, .container-contactblock, .openingstijden, .openingstijden h3 {
      align-items:center;
      text-align:center;
    }

    .contactblock, .container-openingstijden, .container-links, .socials-container{
      align-items:center;
    }
  
    .container-openingstijden{
      width: 40%;
    }
    .container-links,.socials-container {
      width:30%;
    }



    .container-social {
      justify-content:center;
    }

 
    .container-links p {
      align-items:center;
    }

    .contact-textblock, .container-6 {
      gap:36px;
    }

    .contactblock {
      text-align:center;
    }

    .container-footer{
      display:flex;
      flex-direction:column;
      align-items:center;
    }

    .footer-container2 {
      display:flex;
      flex-direction: row;
      width:100%;
    }

    .image-carousel-block{
      padding: 75px 70px;
    }

    .image-container {
      width:75%;
    }
    
    .socials1-desktop-tablet .container-icons {
      margin:36px;
    }

    .btn-3 {
      font-size: var(--button-text-s)!important;
    }

    /*banner-slider*/
    .banner-slider:before, .banner-slider:after {
      width:100px;
     }
    /*einde abnner-slider*/

      
  /* navbar */
      nav {
        padding: 24px 35px;
      }
      
      .checkbtn {
        display: block;
        order: 1;
        margin-right: 20px;
      }
    
      .nav-center {
        position: relative; /* Zorg ervoor dat het uitklapmenu absoluut gepositioneerd is binnen deze container */
      }
    
      .nav-center ul {
        position: fixed;
        top: 54px;
        right: -100%;
        background-color: var(--primarycolour);
        opacity: 0.98;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center; 
        align-items: center;
        transition: all 0.3s ease;
        z-index: 3; 
      }
    
      ul li {
        margin: 20px 0;
      }
    
      ul li a {
        font-size: 20px;
      }
    
       /* Wanneer de checkbox input is aangevinkt (hamburger is geklikt) */
       #check:checked ~ .nav-center ul {
        right: 0;
      }
    
      /* Zorg dat de reguliere button verborgen blijft in mobiele versie */
      .nav-button {
        display: none;
      }
    
      /* Button voor mobiele versie zichtbaar maken */
      .nav-button-mobile {
        display: block;
      }
    
      .nav-button-mobile:hover {
        background-color:transparent;
        border: 2px solid var(--accent1-colour);
        color: var(--accent1-colour);
      }
    
      .closebtn {
        display: block; /* Maak zichtbaar in mobiele weergave */
        display:none; /*als je geen kruis icoontje wil */
      }

    }
    /* einde navbar*/

    

/* media query mobile*/
@media (max-width: 767px) {
  p {
    font-size:var(--font-size-tablet-s)!important;
  }

  h3 {
    font-size:var(--font-size-tablet-m)!important;
  }

  h2 {
    font-size:var(--font-size-tablet-l)!important;
  }


.hero-desktop {
  padding: 48px 35px 48px;
  gap: 48px;
  height: 80vh;
}

.hero-desktop .logo-rechthoek-big {
  max-width: 75%;
  min-width:35%;
  background-size: contain;
  background-repeat: no-repeat;
}

.hero-desktop .btn-hero {
  min-width:35%;
}

.button-text-l {
  font-size: var(--font-size-tablet-m)!important;
}

.button-text-m {
  font-size: var(--font-size-tablet-s)!important;
}

.information-block1-desktop, .contactform, .information-block1-desktop-1, .image-links-desktop, .socials1-desktop-tablet, .footer-desktop, .contact-block1-desktop{
  padding: 50px 35px 50px;
  gap:24px;
}

.information-block1-desktop p, .information-block1-desktop h3{
  text-align: left;
}

.btn-overons{
  margin-top:25px;
  margin-bottom:25px;
}

.btn-3 {

  border: solid 4px var(--primarycolour);
}

.image-links-desktop, .socials1-desktop-tablet{
  gap:24px;
}
.image-links-desktop p {
  padding: 0px;
}

.image-carousel-block {
  padding-left:0px;
  padding-right:0px;
}

.image-carousel {
  min-width:0px;
  gap: 12px;
}

.item {
  width:75%;
}

.container-6 {
  flex-direction:column;
  gap:48px;
}

.image-container .image-wrapper {
  max-height:50vh;
}

.image-container, .contact-textblock, .contact-block1-desktop {
  width:100%;
  gap:48px;
}

.socials1-desktop-tablet {
  gap: 48px;
  height:auto;
}

.container-icons {
  padding-bottom:24px;
}


.container-footer, .footer-container2 {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  width:100%;
  gap:36px;
}

.contactgegevens-container p{
  text-align: center;
}

.contactgegevens-container .fa-solid {
  display:none;
}

.phone-mail-container {
  align-items: center;
}
.contactblock, .container-openingstijden, .container-links, .container-links p, .socials-container, .contact-textblock, .contactgegevens, .container-contactblock, .openingstijden, .openingstijden h3{
  align-items:center;
  text-align:center!important;
}

.container-contactblock {
  align-items:center;
  gap:12px;
}
.footer-container1{
  width:100%;
  justify-content: center;
}
/*offerte */
.row {
  flex-direction: column;
}

.col-6, .col, .form-btn {
  width:100%;
}

form, .open-sol-form .form-btn {
  width:100%;
}
/* einde offerte*/

/*banner slider */
.banner-slider:before, .banner-slider:after {
  width:0px;
  }
  
.banner-slider {
  gap:48px;
  padding:50px 35px;
}

/*einde banner-slider*/

/*navbar*/
nav {
  padding: 24px 35px;
}
.checkbtn {
  display: block;
  order: 1;
  margin-right: 20px;
}

.nav-center {
  position: relative; /* Zorg ervoor dat het uitklapmenu absoluut gepositioneerd is binnen deze container */
}

.nav-center ul {
  position: fixed;
  top: 82px;
  right: -100%;
  background-color: var(--primarycolour);
  opacity: 0.98;
  width: 100%;
  height: calc(100vh - 82px);
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;
  transition: all 0.3s ease;
  z-index: 3; 
}

ul li {
  margin: 20px 0;
}

ul li a {
  font-size: 20px;
}

 /* Wanneer de checkbox input is aangevinkt (hamburger is geklikt) */
 #check:checked ~ .nav-center ul {
  right: 0;
}

/* Zorg dat de reguliere button verborgen blijft in mobiele versie */
.nav-button {
  display: none;
}

/* Button voor mobiele versie zichtbaar maken */
.nav-button-mobile {
  display: block;
}

.nav-button-mobile:hover, .nav-button-mobile:active {
  background-color:transparent;
  border: 2px solid var(--secondarycolour);
  color: var(--secondarycolour);
}

.closebtn {
  display: block; /* Maak zichtbaar in mobiele weergave */
  display:none; /*als je geen kruis icoontje wil */
}
/*einde navbar*/
}

/* CUSTOM CSS */

label {
  margin-bottom: 6px!important;
}

.nav-button {
  font-weight: 600!important;
}

.form-container p {
  width:75%;
}

.button, button {
  cursor:pointer;
}

/* mobile custom css */
@media (max-width: 767px) {

  .contactgegevens-container {
    align-items: center;
  }

  .socials1-desktop-tablet a.social-icon {
    margin-left: 16px;
    margin-right: 16px;
  }

  .social-media-icons {
    font-size: 2em!important;
}

}


/* tablet custom css */
@media (min-width: 768px) and (max-width:1024px) {

  .contactgegevens-container, .phone-mail-container {
    align-items: center;
  }



.container-openingstijden {
  width: 30%;
}

.container-links, .socials-container {
  width: auto;
}

.phone-mail-container {
  gap:12!important;
}
}

@media (min-width: 1024px) and (max-width:1300px) { 

  .contactblock, .container-openingstijden, .container-links, .socials-container {
    min-width: auto !important;
}
}