/* Styling voor de header */
header {
    background-color: #0A2540;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center; /* Zorg ervoor dat het logo en menu verticaal gecentreerd zijn */
    padding: 10px;
    height: auto;
    position: relative;
    z-index: 1;
}

/* Bovenste balk met contactgegevens */
.top-bar {
    background-color: #0A2540;
    color: #fff;
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    padding: 5px 40px 5px 5px; /* Voeg 40px padding toe aan de rechterkant */
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
}

.container {
    position: relative; /* Zorg dat de container in de documentstroom blijft */
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
}

/* Logo styling */
.logo {
    max-height: 125px;
    margin-right: 0px; /* Voeg ruimte toe tussen logo en menu */
	margin-top: 0px;
	z-index: 1;
}

/* Navigatie binnen de header */
nav {
    display: flex;
    justify-content: flex-end; /* Rechts uitlijnen van het menu */
    align-items: center; /* Centreer de menu-items verticaal naast het logo */
}

/* Menu-items horizontaal op één rij */
nav ul {
    display: flex;
    justify-content: flex-end;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 20px; /* Ruimte tussen de menu-items */
    flex-wrap: nowrap; /* Voorkom dat de items naar een tweede rij springen */
}

/* Menu-item styling */
nav ul li {
    text-align: center;
}

nav ul li a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 0px 0px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

nav ul li a:hover {
    background-color: #555;
    color: #fff;
}

/* Hamburger menu styling */
.hamburger {
    display: none; /* Standaard verborgen op grote schermen */
}

.hamburger div {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px 0;
    transition: 0.4s;
}

/* Responsive design voor tabletformaten */
@media (max-width: 1024px) {
    nav ul {
        display: none; /* Verberg de normale navigatie */
    }

.logo {
    max-height: 150px;
    margin-right: 0px; /* Voeg ruimte toe tussen logo en menu */
	margin-top: -5px;
	z-index: 1;
}

    .hamburger {
        display: block; /* Toon het hamburger-menu */
        position: absolute;
        top: 20px;
        right: 20px;
    }

    nav.active ul {
        display: flex;
        justify-content: center; /* Centreer de menu-items */
        align-items: center; /* Verticaal centreren */
        gap: 10px; /* Voeg wat ruimte tussen de items toe */
        flex-wrap: wrap; /* Zorg dat de items netjes naast elkaar komen */
        position: absolute;
        top: 60px;
        left: 0;
        background-color: #333;
        width: 100%;
        text-align: center;
    }
}

/* Responsive design voor mobiele apparaten */
@media (max-width: 768px) {
    nav ul {
        display: none; /* Verberg de normale navigatie op mobiel */
    }
	
.logo {
    max-height: 100px;
    margin-right: 0px; /* Voeg ruimte toe tussen logo en menu */
	margin-top: +30px;
	z-index: 1;
}

    .hamburger {
        display: block; /* Toon het hamburger-menu */
        position: absolute;
        top: 20px;
        right: 20px;
    }

    nav.active ul {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px; /* Voeg wat ruimte tussen de items toe */
        flex-wrap: wrap; /* Zorg dat de items netjes naast elkaar komen */
        position: absolute;
        top: 60px;
        left: 0;
        background-color: #333;
        width: 100%;
        text-align: center;
    }
}

/* Menu-item styling in hamburger-menu */
nav ul li {
    display: block; /* Elk menu-item op een eigen regel */
    text-align: left; /* Tekst links uitlijnen */
    padding: 1px; /* Voeg ruimte tussen de items toe voor betere leesbaarheid */
}

nav ul li a {
    display: block; /* Link over de volledige breedte van het blok */
    color: #fff;
    text-decoration: none;
    padding: 1px; /* Voeg padding toe voor klikbare ruimte */
    white-space: nowrap; /* Zorg dat de tekst op één regel blijft, zonder af te breken */
}

nav ul li a:hover {
    background-color: #555;
    color: #fff;
}