.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Inklapbare blokken */

.accordion-container {
    width: 100%;
    max-width: auto;
    margin: left;
}

.accordion {
    cursor: pointer;
    padding: 10px 0;
}

.accordion h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5em;
    margin: 0;
    color: #333; /* Bijna zwarte kleur */
}

.panel {
    display: none;
    padding: 10px 0;
    color: #333;
}

.arrow {
    font-size: 1em;
    color: #ffffff; /* Witte kleur */
    transition: transform 0.4s;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #717a67; /* Olijf groene achtergrond */
    border-radius: 50%; /* Maakt de achtergrond een cirkel */
}

hr {
    border: none; /* Verwijder de standaard lijn */
    height: 1px; /* Hoogte van de lijn */
	width: 80%;
	max-width: auto;
    background-color: #333; /* Kleur van de lijn (donkergroene olijf matte achtergrond) */
    margin: 20px auto; /* Margin boven en onder de lijn */
	display: block;
}

/* Base Styles */
body {
    font-family: 'Ubuntu', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333; /* Donkerzwarte grijze tekstkleur */
}

a {
    color: #1a1a1a; /* Bijna zwart */
    text-decoration: none; /* Verwijdert de onderstreping van links */
}

a:hover {
    color: #000000; /* Verandert de kleur naar echt zwart wanneer de muis eroverheen gaat */
    text-decoration: underline; /* Onderstreept de link wanneer de muis eroverheen gaat */
}

/* Container */
.container {
    width: 80%;
    margin: 0 auto;
    max-width: 1200px;
}

.container h1{
    margin: 0;
	width: 100%;
    font-size: 1.5em;
    word-break: break-word; /* Allow long words to break and wrap to the next line */
}

/* Header */
header {
    background-color: #717a67; /* Donkergroene olijf matte achtergrond */
    color: #ffffff;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000; /* Zorg ervoor dat het menu boven andere elementen komt */
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5); /* Toevoegen van schaduw */
}

header.shrink {
    height: 40px; /* Verklein de hoogte van de header */
    padding: 5px 20px; /* Aanpassen aan je ontwerp */
}

header h1 {
    margin: 0;
    font-size: 1.8em;
}

.header-logo {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 200px;
    height: auto;
}

nav {
    margin-top: 10px;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
    flex-grow: 1;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: #ffffff;
    text-decoration: none;
    position: relative;
}

nav ul li a:hover {
    text-decoration: underline;
}

/* Dropdown Menu */
.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: rgba(113, 122, 103, 0.5); /* Donkergroen met 50% transparantie */
    z-index: 1;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
}

.dropdown-menu li {
    padding: 10px;
}

.dropdown-menu li a {
    color: #ffffff;
    text-decoration: none;
}

.dropdown-menu li a:hover {
    background-color: #5a6353;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.banner {
    background: url('./banner.png') no-repeat center center;
    background-size: cover;
    color: #ffffff;
    padding: 100px 0;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Toevoegen van een subtiele schaduw */
}

.banner h2 {
    font-size: 2.5em;
    margin: 0;
}

.banner p {
    font-size: 1.2em;
    margin: 20px 0;
}

button {
    background-color: #717a67; /* Dark-olive matte green */
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
}

.banner button:hover {
    background-color: #5a6353;
}

/* Main Content */
main {
    padding: 40px 0;
}

.features {
    margin-bottom: 40px;
}

.intro h2, .intro h1, .features h2 {
    color: #717a67; /* Donkergroen */
}

.intro {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.news-item {
    width: 100%; /* Volledige breedte voor mobiel */
    margin-bottom: 20px;
    padding: 10px;
    background-color: #717a67; /* Achtergrondkleur voor nieuwsblokken */
    border: 1px solid #ddd; /* Rand om nieuwsblokken */
    box-sizing: border-box; /* Zorgt ervoor dat padding in breedte is opgenomen */
    position: relative; /* Om positie van nieuwsfoto te regelen */
    overflow: hidden; /* Verborgen overloop om afgeronde hoeken toe te passen */
    border-radius: 8px; /* Afgeronde hoeken */
}

.news-item h3 {
	color: #ffffff; /* Wit */
}

.news-item .news-image {
    width: 100%; /* Nieuwsfoto breedte gelijk aan nieuwsblok breedte */
    height: auto;
    margin-bottom: 10px;
    display: block;
    border-radius: 8px; /* Afgeronde hoeken voor de nieuwsfoto */
}

.news-item h3 {
    font-size: 1.2em;
    margin: 5px 0;
}

.news-item p {
    font-size: 1em;
    line-height: 1.4;
    color: #ffffff;
}

.features {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.feature {
    width: 100%; /* Volledige breedte voor mobiel */
    text-align: center;
    margin-bottom: 20px;
}

.feature h1, .feature h2, .feature h3 {
    color: #717a67; /* Donkergroen */
}

.page-section h1, .page-section h2, .page-section h3 {
    color: #717a67; /* Donkergroen */
}

/*Agenda */
/* Aside (Agenda) */
.agenda {
    width: 100%; /* Volledige breedte voor mobiel */
    background-color: #f9f9f9;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.agenda h2 {
    color: #717a67; /* Donkergroen */
    font-size: 1.5em;
    margin-bottom: 10px;
}

.agenda ul {
    list-style: none;
    padding: 0;
}

.agenda ul li {
    margin-bottom: 10px;
}

.agenda ul li a {
    color: #333; /* Donkerzwart grijze tekstkleur */
    text-decoration: none;
}

.agenda ul li a:hover {
    text-decoration: underline;
}

/* Footer */
footer {
    background-color: #717a67; /* Donkergroen */
    color: #ffffff;
    text-align: center;
    padding: 20px 0;
    position: relative;
}

footer p {
    margin: 0;
    display: inline-block;
}

.social-links {
    margin-top: 10px;
}

.social-link {
    color: #ffffff;
    font-size: 1.5em;
    margin: 0 10px;
}

.social-link:hover {
    opacity: 0.8;
}

.rounded-image {
    width: 300px; /* Breedte van de afbeelding */
	max-width: auto;
    overflow: hidden; /* Verborgen overflow om de afgeronde hoeken te tonen */
    border-radius: 1%; /* Afgeronde hoeken maken de afbeelding rond */
    float: right; /* Uitlijnen naar rechts */
}
.rounded-image img {
    width: 100%; /* Zorg ervoor dat de afbeelding binnen de container past */
	max-width: auto;
    height: auto; /* Behoud de aspect ratio van de afbeelding */
    display: block; /* Maak de afbeelding een block element */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtiele schaduw voor een zwevend effect */
}

.box-widget {
    width: 100%;
    background-color: #717a67; /* Donkergroene olijf matte achtergrond */
    color: #ffffff; /* Witte tekst */
    padding: 10px;
    border-radius: 8px; /* Afgeronde hoeken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtiele schaduw voor een zwevend effect */
    margin: 20px auto; /* Centreert de widget en voegt boven- en ondermarge toe */
}

.box-widget h2 {
    margin-top: 0; /* Verwijdert de bovenmarge van het kopje */
    font-size: 1.5em; /* Vergroot de tekst van het kopje */
	color: #ffffff;
}

.box-widget p {
    font-size: 1em; /* Standaard tekstgrootte voor de paragraaf */
    line-height: 1.5; /* Verbeterde leesbaarheid */
}

/* Media Queries voor mobielvriendelijkheid */
@media (max-width: 600px) {
    .header-logo {
        width: 150px; /* Aanpassing logo grootte voor kleinere schermen */
    }
	
	.nav {
		width: 100%;
	}
	
	.header {
		width: 100%;
	}

    .banner h2 {
        font-size: 2em; /* Aanpassing van de bannerkopgrootte voor kleinere schermen */
    }

    .banner p {
        font-size: 1em; /* Aanpassing van de banner alineagrootte voor kleinere schermen */
    }

    .feature {
        width: 100%; /* Volledige breedte voor mobiel */
    }

    .agenda {
        width: 100%; /* Volledige breedte voor mobiel */
    }

    .news-item {
        width: 100%; /* Volledige breedte voor mobiel */
    }

    .news-item .news-image {
        border-radius: 8px; /* Behoud afgeronde hoeken voor de nieuwsfoto op mobiel */
    }
	
	.box-widget {
        padding: 15px;
		width: 100%;
    }

    .box-widget h2 {
        font-size: 1.2em; /* Iets kleinere tekst voor het kopje */
    }

    .box-widget p {
        font-size: 0.9em; /* Iets kleinere tekst voor de paragraaf */
    }
	
	.rounded-image {
		width: 100%;
	}
	.rounded-image img {
		width: 100%;
	}
}