html, body {
	overflow-x: hidden;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #005bb5;
    color: white;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}

/* Header en navigatie */
header {
    background-color: #0078d4;
    color: white;
	display: flex;
    justify-content: flex-end; /* Plaatst de navigatie rechts */
    align-items: center;
    padding: 1em;
}


nav
	{
		display: flex;
		justify-content: flex-end;;
		flex-wrap: wrap; /* Zorgt dat items naar een nieuwe regel gaan als er te weinig ruimte is */
		gap: 0.5em;      /* Ruimte tussen de knoppen */
		padding: 0.5em;  /* Voeg wat padding toe rondom de navigatie */
	}

	nav a {
		background-color: white;
		color: #0078d4;  /* Voeg een `#` toe voor een geldige kleurcode */
		text-decoration: none;
		padding: 0.5em 1em; /* Meer padding voor betere klikbaarheid */
		font-weight: bold;
		border-radius: 4px;
		white-space: nowrap; /* Voorkomt dat de tekst binnen een knop afbreekt */
	}



.hero {
    background-color: #f4f4f4;
    padding: 2em;
    text-align: center;
	
	
}



.home {
   background-color: #f4f4f4;
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
	min-height: 60vh;; /* Minimaal 100% van de viewport-hoogte */
    display: flex; /* Voor betere uitlijning van de inhoud */
    flex-direction: column;
    justify-content: center; /* Centreert de inhoud verticaal */
    align-items: center; /* Centreert de inhoud horizontaal */
    padding: 2rem; /* Voeg wat ruimte toe rondom de inhoud */
    box-sizing: border-box; /* Zorgt ervoor dat padding niet de hoogte beïnvloedt */
	
	h1	{
		font-size: 3rem; /* Maak het groter door een rem-waarde aan te passen */
		font-weight: bold; /* Optioneel: maak de tekst vetgedrukt */
		text-align: center; /* Optioneel: centreer de tekst */
		margin-bottom: 1rem; /* Optioneel: voeg wat ruimte toe onder de kop */
		}
		
	h1,h2,h3,p {
        color: #005bb5;
       }
	
}

/* Flexbox-container voor tekst en afbeelding */
.home-content {
    display: flex;
    align-items: flex-start; /* Zorgt dat de items bovenaan uitgelijnd zijn */
    gap: 2em; /* Ruimte tussen tekst en afbeelding */
	
}

/* Stijl voor de tekstkolom */
.home-tekst {
    flex: 1; /* Neemt de beschikbare ruimte in beslag */
	max-width: 500px;
}

/* Stijl voor de afbeelding */
.home-content img {
    max-width: 300px; /* Beperk de breedte van de afbeelding */
    height: auto; /* Behoud de aspect ratio */
    border-radius: 8px; /* Optionele afronding van de hoeken */
}





.aws{
    background-color: black;
    text-align: center;
	max-width: 100%;
    margin: 0 auto;
	min-height: 60vh;; /* Minimaal 100% van de viewport-hoogte */
    display: flex; /* Voor betere uitlijning van de inhoud */
    flex-direction: column;
    justify-content: center; /* Centreert de inhoud verticaal */
    align-items: center; /* Centreert de inhoud horizontaal */
    padding: 2rem; /* Voeg wat ruimte toe rondom de inhoud */
    box-sizing: border-box; /* Zorgt ervoor dat padding niet de hoogte beïnvloedt */
	
	h1 {
		color: #E17000;
		font-size: 2rem; /* Maak het groter door een rem-waarde aan te passen */
		font-weight: bold; /* Optioneel: maak de tekst vetgedrukt */
		text-align: center; /* Optioneel: centreer de tekst */
		margin-bottom: 1rem; /* Optioneel: voeg wat ruimte toe onder de kop */
		}
	
}

/* Flexbox-container voor tekst en afbeelding */
.aws-content {
    display: flex;
    align-items: flex-start; /* Zorgt dat de items bovenaan uitgelijnd zijn */
    gap: 2em; /* Ruimte tussen tekst en afbeelding */
	
}

/* Stijl voor de tekstkolom */
.aws-tekst {
    flex: 1; /* Neemt de beschikbare ruimte in beslag */
	max-width: 500px;
}

/* Stijl voor de afbeelding */
.aws-content img {
    max-width: 300px; /* Beperk de breedte van de afbeelding */
    height: auto; /* Behoud de aspect ratio */
    border-radius: 8px; /* Optionele afronding van de hoeken */
}







.over {
    background-color: #005bb5;
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
	min-height: 60vh;; /* Minimaal 100% van de viewport-hoogte */
    display: flex; /* Voor betere uitlijning van de inhoud */
    flex-direction: column;
    justify-content: center; /* Centreert de inhoud verticaal */
    align-items: center; /* Centreert de inhoud horizontaal */
    padding: 2rem; /* Voeg wat ruimte toe rondom de inhoud */
    box-sizing: border-box; /* Zorgt ervoor dat padding niet de hoogte beïnvloedt */
	
	h1	{
		font-size: 3rem; /* Maak het groter door een rem-waarde aan te passen */
		font-weight: bold; /* Optioneel: maak de tekst vetgedrukt */
		text-align: center; /* Optioneel: centreer de tekst */
		margin-bottom: 1rem; /* Optioneel: voeg wat ruimte toe onder de kop */
		}
	
}

/* Flexbox-container voor tekst en afbeelding */
.over-content {
    display: flex;
    align-items: flex-start; /* Zorgt dat de items bovenaan uitgelijnd zijn */
    gap: 2em; /* Ruimte tussen tekst en afbeelding */
	
}

/* Stijl voor de tekstkolom */
.over-tekst {
    flex: 1; /* Neemt de beschikbare ruimte in beslag */
	max-width: 500px;
}

/* Stijl voor de afbeelding */
.over-content img {
    max-width: 300px; /* Beperk de breedte van de afbeelding */
    height: auto; /* Behoud de aspect ratio */
    border-radius: 8px; /* Optionele afronding van de hoeken */
}



.dynamicb {
            padding: 2rem;
            margin: 2rem;
          }



.contact {
    background-color: white;
    text-align: center;

	h1,h2,h3,p {
        color: #005bb5;
       }
}


/* Algemene sectiestijling */
section {
    padding: 2em;
    text-align: center;
}

/* Footer */
footer {
    background-color: #0078d4;
    color: white;
    text-align: center;
    padding: 1em;
    position: relative;
    bottom: 0;
    width: 100%;
}

/* Media query voor kleinere schermen */
@media (max-width: 768px) {
    header {
        padding: 1em 0.5em;
    }

    nav {
        flex-direction: row; /* Stapelt links onder elkaar */
    }

    .hero {
        padding: 1em;
    }

    section {
		max-width: 100%;
        padding: 1em;
	    text-align: center; /* Alleen toepassen indien nodig */
    }
	
	.over-content {
			flex-direction: column; /* Stapelt tekst en afbeelding onder elkaar */
			align-items: center; /* Centreert de items */
			}

	.over-content img {
			max-width: 100%; /* Zorgt dat de afbeelding niet breder wordt dan het scherm */
			height: auto;
	    }
		
    .aws-content {
        flex-direction: column; /* Stapelt tekst en afbeelding onder elkaar */
        align-items: center;    /* Centreert de items */
    }

    .aws-content img {
        max-width: 100%; /* Zorgt dat de afbeelding niet breder wordt dan het scherm */
		height: auto;
    }

    .aws-tekst {
        text-align: center; /* Centreert de tekst in de kolom */
    }
		
	
}

* {
    box-sizing: border-box;
}

button {
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
    }
button:hover {
        background-color: #005bb5;
    }
	
.btn-primary {
        background-color: #005bb5;
        color: white;
}

/* Secundaire button stijl */
.btn-secondary {
    background-color: black;
    color: #333;
}

.btn-secondary:hover {
    background-color: black;
}

* {

    box-sizing: border-box;
}