/* Algemene styling voor de pagina */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif; /* Standaard lettertype voor de gehele pagina */
}

/* Zorg ervoor dat de hele pagina minimaal de hoogte van de viewport heeft */
html, body {
  height: 100%;
  margin: 0;
}

img {
    image-rendering: crisp-edges;
    width: 100%;
    max-width: 350px; /* Logo past zich aan op basis van het schermformaat */
  
    height: auto; /* Houdt de verhoudingen correct */
}


/* Algemeen voor de body van de pagina */
body {
    font-family: 'Roboto', sans-serif; /* Ander lettertype voor de tekst op de pagina */
    line-height: 1.6; /* Zorgt voor een betere leesbaarheid van de tekst */
    text-align: left; /* Tekst uitlijnen naar links voor de meeste inhoud */
    background-color: #F5F5F5; /* Achtergrondkleur voor de pagina */
    color: #333; /* Donkere tekstkleur voor de inhoud */
    padding: 20px; /* Wat ruimte rondom de body */
    display: flex;
    flex-direction: column;
    min-height: 100%;
    height: 100%; /* Zorgt ervoor dat de body de hele pagina bedekt */
    margin: 0;

}

/* Basis styling voor de header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #005a9c; /* Van wit naar donkerblauw */
    position: relative; /* Belangrijk voor de positie van het mobiele menu */
}

/* Stijl voor het logo met eigen achtergrondkleur */
.logo {
    background-color: #FFFFFF; /* Kleur achtergrond voor het logo */
    padding: 10px 20px;
    border-radius: 5px; /* Ronde hoeken voor een mooie look */
}

/* Stijl voor de logo-link */
header .logo a {
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
}



/* Navigatiebalk */
nav {
    display: flex;
    justify-content: space-between; /* Zorgt ervoor dat het logo links komt en de nav rechts */
    align-items: center; /* Centreert de items verticaal */
    background-color: rgba(0, 0, 0, 0); /* Volledig transparant */
padding: 10px 20px; /* Voeg padding toe voor meer ruimte */
}

/* Standaard navigatie voor grote schermen */
nav ul.desktop-menu {
    display: flex;
    list-style-type: none;
}

nav ul.desktop-menu li {
    margin: 0 20px;
}

nav ul.desktop-menu li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    transition: color 0.3s ease;
}

nav ul.desktop-menu li a:hover {
    color: #81C784; /* Hoverkleur */
}

/* Verberg de mobiele navigatie standaard */
nav ul.mobile-menu {
    display: none;
    list-style-type: none;
    padding: 10px 0;
    background-color: #005a9c;
    position: absolute;
    top: 140px; /* Zorgt ervoor dat het mobiele menu onder de header komt */
    right: 0;
    width: 180px;
    text-align: right; /* Zorgt ervoor dat de tekst ook rechts uitgelijnd wordt */
    z-index: 10; /* Zorg ervoor dat het menu boven andere inhoud komt */
}

nav ul.mobile-menu li {
    margin: 10px 20px; /* Voegt ruimte toe en duwt de items meer naar rechts */
	border-bottom: 1px solid #ccc; /* Grijze lijn tussen de items */
    padding: 10px 0; /* Ruimte boven en onder de tekst */
    
}

nav ul.mobile-menu li a {
    color: white; /* Witte tekstkleur */
    text-decoration: none;
    display: block;
    padding: 10px;
    transition: color 0.3s ease-in-out;
}

/* Hover effect voor de links */
nav ul.mobile-menu li a:hover {
    color: #81C784; /*  kleur bij hover */
}

/* Hamburger-menu styling */
.hamburger {
    display: none;
    padding: 10px;
    background-color: white;
    border: 2px solid #81C784; /* Kleur rand */
    border-radius: 5px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); /* Optioneel, voor een schaduw rondom */
    cursor: pointer;
    font-size: 24px;
    color: #81C784; /* Verander de kleur van het icoon */
    position: absolute;
    right: 5px; /* Zorgt ervoor dat het menu rechts staat */
    top: 110px;
    z-index: 20;
}

/* Stijl voor de balkjes van het hamburger-menu */
.hamburger div {
    width: 30px; /* Breedte van de balkjes */
    height: 3px; /* Dikte van de balkjes */
    background-color: #81C784; /* Nieuwe kleur voor de balkjes */
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}

/* Animatie voor kruisje */
.hamburger.open div:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  
}


.hamburger.open div:nth-child(2) {
    opacity: 0;
}

.hamburger.open div:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Toon de hamburger wanneer de navigatie uit beeld is */
.hamburger.show {
    display: block;
}

/* Responsive aanpassingen voor kleinere schermen */
@media (max-width: 1250px) {
    /* Verberg de gewone desktop navigatie op kleinere schermen */
    nav ul.desktop-menu {
        display: none;
 
    }
    /* Als het scherm kleiner is dan 768px, pas de max-width aan */
@media (max-width: 768px) {
    img {
        max-width: 250px; /* Maak het logo kleiner op mobiel */
    }

.main h1 {
        font-size: 0.8rem; /* Kleinere tekst op tablets */
    }
    
  
    }
   
    
    /* Toon de hamburger knop op kleinere schermen */
    .hamburger {
        display: block;
    }

    /* Toon de mobiele navigatie als het hamburger-menu wordt ingedrukt */
    nav ul.mobile-menu {
        display: none; /* Verborgen wanneer de hamburger niet is ingedrukt */
    }

    nav ul.mobile-menu.active {
        display: flex; /* Wordt zichtbaar als de class "active" wordt toegevoegd */
        flex-direction: column;
    }

}

@media (max-width: 600px) {
    .cta-container {
        flex-direction: column; /* Stapelt knoppen onder elkaar op kleine schermen */
        gap: 10px;
        align-items: center; /* Centreert de knoppen horizontaal */
        justify-content: center; /* (Optioneel) Centreert ook verticaal als de container hoogte heeft */


    }

    .cta-button-formulieren {
        width: 100%; /* Volledige breedte op mobiel */
    }
}

main {
    flex: 1; /* Zorgt ervoor dat de content de beschikbare ruimte opvult */
}


/* Zorg ervoor dat de hoofdinhoud (main-container) de beschikbare ruimte opvult */
.content {
  flex: 1;
}

h1 {
    font-size: 1.0rem; /* 8% van de breedte van het scherm */
}


/* Footer */
footer {
    background: #005a9c; /* Van wit naar donkerblauw */
    color: white; /* Witte tekst */
    text-align: center;
    padding: 10px 0;
    width: 100%;
    margin-top: auto;  /* Duwt de footer naar de onderkant van de pagina als er ruimte over is */
 
}
    
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Minimaal de volledige hoogte van de viewport */
}


/* Stijl voor tekst in de content */
main h1 {
    font-family: 'Arial', sans-serif; /* Ander lettertype voor kopteksten */
    color: #09193E; /* Donkerblauwe kleur voor kopteksten */
    margin-top: 10px;
    margin-bottom: 20px; /* Ruimte onder de kopteksten */
    line-height: 1.2;
   
}

p {
    margin-bottom: 20px; /* Ruimte onder de paragrafen */
}

/* Hoofdinhoud (onder de navigatie, boven de footer) naar binnen brengen */
.content {
    width: 100%;
    max-width: 900px; /* Inhoud smaller maken */
    margin: 40px auto; /* Automatisch centreren */
    padding: 20px; /* Extra binnenruimte voor een luchtiger effect */
    background: white; /* Optioneel: witte achtergrond voor contrast */
    border-radius: 8px; /* Zachte hoeken voor een moderne look */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Optioneel: subtiele schaduw */
}


.aanvragen {
    background-color: #b7cce3;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.aanvragen h2 {
    color: black;
    font-size: 18px;
}

.aanvragen p {
    font-size: 16px;
    color: black;	
}

.aanvragen li {
    font-size: 16px;
    color: black;	
}



.aanvragen .cta-button {
    background: #1B2E5B;
    color: white;
    padding: 10px 15px;
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
    border-radius: 5px;
}

.aanvragen .cta-button:hover {
    background: #ffcc00;
}


.news {
    background-image: url(9a11ba7668.JPEG); /* Vervang dit met het pad naar jouw afbeelding */
    background-size: cover;  /* Zorgt ervoor dat de afbeelding de gehele container bedekt */
    background-position: center center;  /* Centreert de afbeelding in de container */
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.news h2 {
    color: white;
}

.news p {
    font-size: 16px;
    color: white;
}

.news .cta-button {
    background: #1B2E5B;
    color: white;
    padding: 10px 15px;
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
    border-radius: 5px;
}

.news .cta-button:hover {
    background: #ffcc00;
}
.news2 {
   
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.news2 h2 {
    color: white;
}

.news2 p {
    font-size: 16px;
    color: white;
}

.news2 .cta-button {
    background: #1B2E5B;
    color: white;
    padding: 10px 15px;
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
    border-radius: 5px;
}

.news2 .cta-button:hover {
    background: #ffcc00;
}
.voorwaarden {
    background-color: #DFE7F9;
    width: 100%;
    padding: 20px;
    margin 0 auto;
    border-radius: 8px;
    margin-top: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.voorwaarden h2 {
    font-size: 20px;
    font-weight: bold;
}

. voorwaarden p, ul {
    margin-left: 0; /* Zorgt dat de lijst en tekst op dezelfde lijn beginnen */
    padding-left: 0; /* Verwijdert extra inspringing van de lijst */
}

.contact {
    background-color: #e7eef6;
    width: 100%;
    max-width: 100%;        /* Laat de sectie maximaal de beschikbare ruimte gebruiken */
    min-width: 100%;       /* Minimale breedte van 800px */
    padding: 20px;
    margin 0 auto;
    box-sizing: border-box; /* Zorg dat padding en border in de breedte worden meegeteld */
    border-radius: 8px;
    margin-top: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: inherit; /* Zorgt ervoor dat de tekstkleur de zelfde blijft als de omliggende tekst */
    text-decoration: none; /* Verwijdert de onderstreping */
}

/* Ruimte tussen naam en adres */
.contact .space {
    height: 10px; /* De hoogte van de ruimte tussen de naam en het adres */
}



.lijst-voorwaarden {
    list-style-position: outside;
    padding-left: 20px; /* Ruimte voor de bullet */
   
}

.waarschuwing {
    background-color: #ffcccb;
    width: 100%;
    padding: 20px;
    margin 0 auto;
    border-radius: 8px;
    margin-top: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Verwijder standaard linkstijl */
.phone-number {
    color: inherit; /* Neem de kleur over van de omliggende tekst */
    text-decoration: none; /* Verwijder onderstreping */
}

/* Zorg ervoor dat de telefoonnummers geen specifieke stijl krijgen in browsers */
a[href^="tel:"] {
    color: inherit; /* Neem de kleur over van de omliggende tekst */
    text-decoration: none; /* Verwijder onderstreping */
}

/* Hover-effect */
.phone-number:hover {
    color: #81C784; /* Nieuwe kleur bij hover, bijvoorbeeld een blauwe kleur */
    text-decoration: underline; /* Onderstreping bij hover */
}

/* Zorg ervoor dat de telefoonnummers geen specifieke stijl krijgen in browsers */
a[href^="tel:"] {
    color: inherit; /* Neem de kleur over van de omliggende tekst */
    text-decoration: none; /* Verwijder onderstreping */
}


.no-margin {
   
    margin-bottom: 0; /* Verwijdert de standaard ondermarge */
    color: inherit; /* Zorgt ervoor dat de tekstkleur de zelfde blijft als de omliggende tekst */
    text-decoration: none; /* Verwijdert de onderstreping */
}

.no-margin span {
    margin-right: 10px; /* Ruimte tussen het icoon en de tekst */
    color: #005a9c !important; /* Kleur van het icoon (bijvoorbeeld blauw) */
    vertical-align: middle; /* Zorgt ervoor dat het icoon goed uitgelijnd is met de tekst */
}


.cta-button {
    background: #1B2E5B;
    color: white;
    padding: 10px 15px;
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
    border-radius: 5px;
}

.cta-button:hover {
    background: #ffcc00;
}	

.cta-container {
    display: flex; /* Zet de knoppen naast elkaar */
    gap: 20px; /* Ruimte tussen de knoppen */
    justify-content: center; /* Centreert de knoppen in de container */
    margin-bottom: 40px; /* Voeg ruimte toe onder de knoppen */
}



.cta-button-formulieren {
    display: flex;
    flex-direction: column; /* Zorgt ervoor dat tekst en subtekst onder elkaar staan */
    justify-content: center; /* Centreert horizontaal */
    align-items: center; /* Centreert verticaal */
    margin-top: 10px;
    border-radius: 5px;
    width: 250px; /* Bepaalt de breedte van de knop */
    height: 100px; /* Bepaalt de hoogte van de knop */
    text-align: center;
    font-size: 18px; /* Maakt de tekst beter leesbaar */
    font-weight: bold; /* Geeft de knop een krachtigere uitstraling */
    color: white; /* Tekstkleur */
    background-color: #334677; /* Blauwe achtergrondkleur */
    border: none; /* Verwijdert standaard knopborder */
    border-radius: 8px; /* Maakt de hoeken afgerond */
    cursor: pointer; /* Zorgt voor een klik-indicatie */
    text-decoration: none; /* Voorkomt onderlijning bij links */
    padding: 0 20px; /* Extra ruimte binnen de knop aan de zijkanten */
	
}


.cta-button-formulieren:hover {
    background: #ffcc00;
}

.cta-button-formulieren .small-text {
    font-size: 0.8em; /* Maak de tekst kleiner */
    font-weight: normal; /* Optioneel, maakt het minder vet */
     margin-top: 5px; /* Optioneel, voegt wat ruimte toe tussen de regels */
}



	
/* Stijl voor de terug naar boven knop */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: Black; /* Donkerblauwe achtergrond */
    color: white; /* Witte tekst */
    border: none;
    border-radius: 4px; /* Zachte hoeken voor een moderne look */
    padding: 12px;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    display: none; /* Knop is verborgen totdat er gescrold wordt */
    z-index: 1000;
    /* Maak de knop vierkant */
    width: 50px; /* Zet de breedte */
    height: 50px; /* Zet de hoogte gelijk aan de breedte voor een vierkante knop */

}


/* Hover effect */
.back-to-top:hover {
     background-color: #81C784; /* Gouden kleur bij hover */
    border-color: #000000; /* Verander de randkleur naar donkerblauw bij hover */
}


.back-to-top i {
    font-size: 24px; /* Pas de grootte van het icoon aan */
}

/* Hover effect voor het Font Awesome icoon */
.back-to-top:hover i {
    background: #81C784; /* Verander de kleur van het icoon naar donkerblauw bij hover */
}

.lijst-container {
    width: 80%; /* Past de breedte aan naar wens */
    margin: 0 auto; /* Centreert de container */
    padding: 20px;
    background-color: #f9f9f9; /* Achtergrondkleur voor de container */
    border: 1px solid #ccc; /* Rand om de container */
    border-radius: 5px; /* Afgeronde hoeken */
}

.lijst-container ol {
    list-style-type: decimal; /* Standaard nummering voor hoofdlijst */
    padding-left: 20px; /* Ruimte aan de linkerkant */
    font-weight: bold;	
}

.lijst-container ol ol {
    list-style-type: lower-alpha; /* Nummering voor subniveaus (a, b, c, ...) */
    padding-left: 30px; /* Extra ruimte voor subniveaus */
    font-weight: normal; 
}

.lijst-container ol ol ol {
      list-style-type: lower-roman; /* Subsubniveaus: a, b, c */
      padding-left: 40px; /* Extra ruimte voor subsubniveaus */
      font-weight: normal;
}

#table {
    width: 100%; /* Laat de tabel de volledige breedte gebruiken */
    border-collapse: collapse; /* Zorgt dat grenzen niet dubbel zijn */
    margin: 20px 0; /* Voegt wat ruimte boven en onder de tabel toe */
    font-size: 1em; /* Lettergrootte */
    text-align: left; /* Uitlijning van tekst in cellen */
}

/* Opmaak van de koppen */
#table th {
    background-color: #334677; /* Donkerrode achtergrond voor koptekst */
    color: white; /* Witte tekst */
    padding: 10px; /* Ruimte binnen de cellen */
    border: 1px solid #ddd; /* Grijze rand */
    height: 75px; /* Pas aan naar wens */
    vertical-align: middle; /* Zorgt dat tekst gecentreerd wordt */
    
}

/* Opmaak van de cellen */
#table td {
    padding: 10px; /* Ruimte in de cellen */
    border: 1px solid #ddd; /* Rand rond elke cel */
    height: 75px; /* Pas aan naar wens */
    vertical-align: middle; /* Zorgt dat tekst gecentreerd wordt */
    
}

/* Om en om rij-kleuren */
#table tr:nth-child(even) {
    background-color: #f9f9f9; /* Lichtgrijze achtergrond voor even rijen */
}

/* Hover-effect voor rijen */
#table tr:hover {
    background-color: #f1f1f1; /* Subtiele highlight bij hover */
}