.hero {
    position: relative; /* GEACTIVEERD: Dit is het anker voor de overlay */
    background-size: cover;
    background-position: center;
    height: 100vh;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden; /* Zorgt dat de overlay nooit buiten de hero komt */
  }

.hero .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.1); /* Donkere overlay */
    z-index: 1;
    height: 100%; /* Zorgt dat hij de container vult */
  }
  
  .hero .content {
    position: relative;
    z-index: 2;
    width: 80%;
  }
 
  .hero-text {
      margin: 30px 155px;
      color: white;
}

/* Standaard (Desktop): Naast elkaar */
    .button-group {
        display: flex;
        flex-direction: row;
        gap: 20px; /* Dit creëert de ruimte tussen de knoppen */
        justify-content: center;
    }

/* ==========================================
   MOBIEL (ONDER 992PX)
   ========================================== */

@media (max-width: 992px) {

    /* 1. De Hero sectie */
    .hero {
        position: relative !important; /* Dubbele check voor mobiel */
        height: auto !important;
        min-height: 80vh !important;
        padding: 100px 20px 60px 20px !important; /* Iets meer padding boven voor de bar */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* FIX: Zorg dat de overlay de nieuwe variabele hoogte volgt */
    .hero .overlay {
        height: 100% !important;
        position: absolute !important;
        inset: 0 !important;
    }

    /* 2. De tekst (Reset de 155px marge) */
    .hero .hero-text {
        margin: 20px 0 !important;
        padding: 0 !important;
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        position: relative !important;
        z-index: 2 !important;
    }

    /* 3. De Knoppen (Onder elkaar zetten) */
    .hero .content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .button-group {
        flex-direction: column;
        gap: 0px; /* Ruimte tussen de knoppen op mobiel */
        width: 100%;
    }

    /* Verwijder de margin-auto die je nu op de knoppen zelf hebt */
    .hero .button-primary {
        margin: 0 !important; 
    }

    .hero .button-primary {
        display: block !important;
        width: 100% !important;
        max-width: 280px !important; 
        margin: 10px auto !important;
        box-sizing: border-box !important; 
        text-align: center !important;
    }

    .hero .button-primary .inner {
        width: 100% !important;
        padding: 15px 0 !important;
    }

    /* 4. De Navigatie oranje balk */
    .nav-menu {
        background-color: #FF752B !important;
        display: flex !important;
        justify-content: space-between !important;
        height: 70px !important;
        width: 95% !important; 
       	margin: 0px auto !important;
        border-radius: 15px !important;
        position: fixed !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 9999 !important;
    }

    /* 5. Verberg de normale menu items in de balk */
    .nav-menu .nav-list:not(.is-active) .menu-item {
        display: none !important;
    }

    /* 6. Toon het logo in het midden */
    .nav-logo-centered {
        display: flex !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    .nav-logo-img {
        height: 45px !important;
        width: auto !important;
    }
}