body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    /* Zorgt ervoor dat de hele pagina 100% van het scherm beslaat */
}

body,
.contact-info,
.construction-note,
header h1 {
    font-family: 'Open Sans', sans-serif;
    position: relative;
    z-index: 3;
    /* Standaard lettertype */
}

.contact-info,
.construction-note {

    /* Zorgt dat deze elementen boven de achtergrond blijven */
}

header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
}

/* Wrapper voor de inhoud (exclusief footer) */
/* Main-content wrapper boven de footer */
.main-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Houd de volledige hoogte in acht */
    position: relative;
    background-color: #000;
    /* Zwarte achtergrond */
    z-index: 1;
    /* Zorg dat de inhoud boven andere elementen staat */
}

.image-section {
    position: relative;
    text-align: center;
    height: calc(100vh - 4rem);
    /* Past de hoogte aan zodat de header en afbeelding samen het hele scherm vullen */
}

.image-section img {
    display: block;
    width: 100%;
    height: 100%;
    /* Zorgt ervoor dat de afbeelding de sectie vult */
    object-fit: cover;
    /* Past de afbeelding aan zonder uit te rekken */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* Stapelt elementen verticaal */
    justify-content: flex-start;
    /* Plaatst de elementen vanaf de bovenkant */
    align-items: center;
    background-color: rgba(50, 50, 50, 0.7);
    /* Donkergrijs met transparantie */
    color: white;
    gap: 2rem;
    /* Voegt ruimte toe tussen de contact-info en construction-note */
    padding-top: 2rem;
    /* Ruimte tussen de header en de eerste box */
}

.contact-info {
    display: grid;
    grid-template-columns: 50% 50%;
    /* Links en rechts elk 50% */
    gap: 1rem;
    /* Ruimte tussen rijen */
    background: rgba(50, 50, 50, 0.8);
    padding: 1.5rem;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    color: white;
    max-width: 800px;
    /* Zorg dat het geheel netjes blijft */
    width: 80%;
    /* Flexibele breedte */
    margin: 0 auto;
    /* Centreer de box */
}

.label {
    text-align: left;
    /* Links uitgelijnd */
    font-weight: bold;
    display: flex;
    align-items: center;
    /* Centreer verticaal met iconen */
}

.value {
    text-align: right;
    /* Rechts uitgelijnd */
}

.value a {
    color: white;
    /* Zorgt ervoor dat de tekst wit blijft */
    text-decoration: none;
    /* Verwijdert de onderstreping */
}

.value a:hover {
    text-decoration: underline;
    /* Voegt een onderstreping toe bij hover */
    color: #ffcc00;
    /* Optionele kleurverandering bij hover */
}

.contact-info,
.construction-note {
    max-width: 800px;
    /* Stel dezelfde maximale breedte in */
    width: 80%;
    /* Flexibele breedte die zich aanpast aan het scherm */
    margin: 0 auto;
    /* Centreer beide boxen */
}

.construction-note {
    margin: 2rem auto;
    /* Zorgt voor wat ruimte boven en onder de tekstbox */
    padding: 1rem;
    background-color: rgba(50, 50, 50, 0.8);
    /* Donkergrijze achtergrond */
    border-radius: 10px;
    color: #fff;
    text-align: center;
    font-style: italic;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    /* Zelfde schaduw als contact-info */
}

.label i {
    color: #ffcc00;
    /* Geel of een kleur naar keuze */
    margin-right: 0.5rem;
    /* Ruimte tussen het icoon en de tekst */
}

/* Responsieve aanpassingen voor kleinere schermen */
@media (max-width: 600px) {
    .contact-info {
        grid-template-columns: 1fr; /* Eén kolom (labels en waarden onder elkaar) */
        text-align: left; /* Alles links uitgelijnd */
    }

    .value {
        text-align: left; /* Waarden ook links uitgelijnd */
    }

    .overlay {
        padding: 4rem 1rem; /* Extra ruimte voor kleinere schermen */
    }

    header {
        font-size: 1.2rem; /* Kleinere tekst voor de header */
        padding: 1rem;
    }

    footer {
        font-size: 0.8rem; /* Kleinere tekst in de footer */
    }
}


/* Wrapper voor de gehele pagina-inhoud */
.privacy-policy-page, .homepage-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Zorgt ervoor dat de pagina de volledige schermhoogte gebruikt */
    background-color: #000; /* Zwarte achtergrond */
    color: #fff; /* Witte tekst */
    padding: 2rem;
    box-sizing: border-box; /* Inclusief padding bij breedte/hoogte */
}

/* Privacy policy-specifieke stijlen */
.privacy-policy-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #000;
    color: #fff;
    padding: 2rem;
    box-sizing: border-box;
}

.privacy-policy-page h1,
.privacy-policy-page h2 {
    color: #fff;
    margin-bottom: 1rem;
}

.privacy-policy-page p,
.privacy-policy-page ul,
.privacy-policy-page a {
    color: #fff;
    line-height: 1.5;
}

.privacy-policy-page a:hover {
    text-decoration: underline;
}

/* Footer-stijlen */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1rem;
    font-size: 0.9rem;
    margin-top: auto;
    box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.5);
}

footer a {
    color: #ffcc00;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}