/* Mobile-specific styles */
@media screen and (max-width: 767px) {
  body {
    font-size: 16px;
    line-height: 1.5;
  }

  .mobile-only {
    display: block !important;
  }

  .navbar {
    height: auto;
  }

  .extra-margin{
margin-top: 0px !important;
  }


  .button-wrapper {
    flex-direction: column;
    align-items: center;
    /* zorgt ervoor dat knoppen de volle breedte pakken */
    gap: 12px;
  }

  .containeranalyse,
  .containerparticipatie,
  .containerparticipatie2,
  .div-block-10,
  .div-block-10-2,
  .div-block-10-producten,
  .div-block-10.kernwaardes,
  .div-block-10.opdrachtgevers,
  .div-block-10b,
  .div-block-17,
  .div-block-21,
  .div-block-29,
  .div-block-32,
  .div-block-5,
  .div-block-8,
  .div-block-6.partnergrid,
  .div-block-21-2,
  .form,
  .grid,
  .mosaic,
  .testimonial-grid,
  .project-grid,
  .w-layout-grid {
    grid-template-columns: 1fr !important;
  }

  .div-block-22{
    padding: 5%
  }

  .project-overlay {
    position: revert;
    margin-top: 20px;
  }

  .div-block-21-2{
    display: inline
  }
  
  .hide-mobile {
    display: none;
  }

  .div-block-4 {
    display: flex;
    flex-direction: column;
  }

  .div-block-8 {
    display: flex;
    flex-direction: column;
    gap: 20px
  }

  .fly-in-ver{
    padding: 5%
  }

  .button.right-btn{
    margin: 0%;
  }

  .section.landing,
  .section.footer {
    height: auto;
  }

  .chapterheading {
    font-size: 30px;
  }

  .missie {
    margin: 0px;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* Nieuwe mobiele headerstijl */
  #header .nav-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
  }

  #header .hamburger {
    font-size: 26px;
    background: none;
    border: none;
    cursor: pointer;
  }

  #main-nav {
    display: none;
    flex-direction: column;
    background-color: #fff;
    width: 100%;
    padding: 10px 0;
  }

  #main-nav.open {
    display: flex;
  }



  #main-nav .nav-link {
    padding: 12px 20px;
    text-decoration: none;
    color: #333;
    background-color: #f9f9f9;
    border-bottom: 1px solid #eee;
  }

  /* Verberg oude dropdown-structuur indien nog aanwezig */
  .dropdown,
  .dropdown-content {
    display: none !important;
  }

  .div-block-20 {
    background-image: none;
  }

  .project-categorieen {
    flex-direction: column;
    align-items: center;
  }

  .project-categorieen .button {
    width: 100%;
  }
}

/* Desktop-specific styles */
@media screen and (min-width: 768px) {

  /* Hamburgerknop verbergen */
  #header .hamburger {
    display: none;
  }

  #main-nav {
    display: flex !important;
    flex-direction: row;
    justify-content: flex-end;
    gap: 20px;
  }

  #main-nav .nav-link {
    padding: 10px 15px;
    text-decoration: none;
    color: #000;
    background: none;
    border: none;
  }


}