/* ----------------------------------------------------------- */
/* ALGEMENE STYLES
-------------------------------------------------------------- */
html {
    font-size: 16px;
    /* We zetten het "root-element" (de HTML-tag) op een font-size van 16 pixels. Vervolgens kunnen we hiernaar verwijzen met de REM-eenheid. */
    text-align: center;
    font-family: Arial;
    background-color: rgb(95, 149, 211);
}

body {
    margin: 0; /* Verwijdert de standaard marges van de body om de inhoud tegen de randen van de pagina te laten beginnen */
}

.grid-container {
    display: grid; /* Gebruikt CSS grid om een flexibele lay-out te maken */
    grid-template-columns: auto auto auto auto; /* Verdeelt de container in vier gelijke kolommen */
}

/* STYLING VAN DE HEADER */
.header {
    font-size: 25px; /* Stelt de lettergrootte in op 25px */
    font-weight: bold; /* Maakt de tekst vetgedrukt */
    grid-area: 1 / 1 / span 2 / span 4; /* Header beslaat de eerste twee rijen en vier kolommen van de grid */
    background-color: rgb(4, 93, 196); /* Achtergrondkleur van de header */
    padding: 10px; /* Voegt 10px padding toe binnen de header */
}

.header ul {
    list-style-type: none; /* Verwijdert opsommingstekens van de lijst */
    margin: 0; /* Verwijdert marge rond de lijst */
    padding: 0; /* Verwijdert padding rond de lijst */
}

.header li {
    float: none; /* Verwijdert zwevende opmaak, indien van toepassing */
    list-style-type: NONE; /* Zorgt ervoor dat er geen opsommingstekens bij de lijstitems zijn */
}

.header li a {
    display: grid; /* Stelt de linkjes in als grid-items */
    color: rgb(255, 255, 255); /* Witte tekstkleur */
    text-align: center; /* Tekst gecentreerd in het midden van de link */
    padding: 14px 16px; /* Voeg padding toe aan de linkjes voor klikbare ruimte */
    text-decoration: none; /* Verwijdert onderlijning van de linkjes */
}

.header button {
    display: grid; /* Maakt de knop een grid-element */
    color: rgb(255, 255, 255); /* Witte tekstkleur */
    text-align: center; /* Tekst centreren in de knop */
    padding: 14px 16px; /* Voegt ruimte toe rond de tekst binnen de knop */
    text-decoration: none; /* Verwijdert onderlijning van de knoptekst */
    background-color: rgb(4, 93, 196); /* Achtergrondkleur van de knop */
    border: none; /* Verwijdert standaard knoprand */
    font-size: 25px; /* Lettergrootte van de knop */
    font-weight: bold; /* Maakt de tekst in de knop vetgedrukt */
}

.header h1 {
    background-image: url(/images/Banner-image.png); /* Achtergrondafbeelding voor de header */
    grid-area: 1 / 1 / span 2 / span 4; /* Beslaat de eerste twee rijen en vier kolommen in de grid */
    height: 400px; /* Stelt de hoogte van de header in */
    text-align: center; /* Centreert de tekst horizontaal */
}

/* Styling voor het actieve item */
.active {
    background-color: rgb(20, 130, 255); /* Achtergrondkleur voor actieve navigatielink */
}

/* Hover-effect voor niet-actieve links in de header */
.header a:hover:not(.active) {
    background-color: rgb(20, 130, 255); /* Verandert de achtergrondkleur bij hover */
}

/* Uitlijning van elementen in de header */
.header .right {
    float: none; /* Verwijdert zwevend effect voor rechter uitlijning */
}

.header .left {
    float: none; /* Verwijdert zwevend effect voor linker uitlijning */
}

.grid-container-banner {
    display: grid; /* Maakt een grid lay-out voor de banner-sectie */
    grid-template-columns: auto auto auto auto; /* Verdeelt de container in vier kolommen */
}

.header-banner {
    text-align: center; /* Centreert de tekst binnen de banner */
    color: white; /* Witte tekstkleur */
    background-image: url(/images/Banner-image.png); /* Achtergrondafbeelding voor de banner */
    height: 500px; /* Hoogte van de banner */
    grid-area: 1 / 1 / span 1 / span 4; /* Banner neemt één rij en vier kolommen in beslag */
}

.grid-container-main {
    display: grid; /* Maakt een grid lay-out voor het hoofdgedeelte */
    grid-template-columns: auto; /* Eén kolom voor de main-content */
    gap: 10px; /* Ruimte tussen de grid-items */
}

.main {
    grid-area: 1 / 1 / span 2 / span 4; /* Main-content neemt twee rijen en vier kolommen in beslag */
    border-top: 10px solid rgb(20, 130, 255); /* Bovenrand met blauwe kleur */
    border-bottom: 10px solid rgb(20, 130, 255); /* Onderrand met blauwe kleur */
    background-color: rgb(4, 93, 196); /* Achtergrondkleur van het hoofdgedeelte */
}

.main section {
    padding: 10px; /* Voegt 10px ruimte rond de inhoud toe */
    border: 10px solid rgb(20, 130, 255); /* Blauw rand om de sectie */
    background-color: rgb(255, 255, 255); /* Witte achtergrondkleur */
}

.main h2 {
    color: white; /* Witte tekstkleur voor h2 kop */
    font-size: 70px; /* Grote lettergrootte voor kop */
}

.main h3 {
    font-size: 30px; /* Middelgrote lettergrootte voor h3 kop */
    font-weight: bold; /* Maakt de h3 tekst vetgedrukt */
}

.main p {
    display: none; /* Verbergt paragrafen standaard */
}

.main .button {
    background-color: rgb(20, 130, 255); /* Achtergrondkleur van de knop */
    border: none; /* Verwijdert standaard rand van de knop */
    color: white; /* Witte tekstkleur */
    padding: 15px 32px; /* Ruimte binnen de knop */
    text-align: center; /* Centreert de tekst in de knop */
    text-decoration: none; /* Verwijdert onderlijning van de knoptekst */
    display: inline-block; /* Zorgt dat de knop zich als een blokelement gedraagt */
    font-size: 16px; /* Standaard lettergrootte voor de knop */
    margin: 4px 2px; /* Kleine marge rond de knop */
    cursor: pointer; /* Verandert de muisaanwijzer naar pointer bij hover */
    font-weight: bold; /* Maakt de knoptekst vetgedrukt */
}

.main img {
    width: 100%; /* Zet de afbeelding in het hoofdgedeelte op volledige breedte */
}

.grid-container-footer {
    display: grid; /* Maakt een grid lay-out voor de footer */
    grid-template-columns: auto; /* Eén kolom voor de footer */
    gap: 10px; /* Ruimte tussen de items in de footer */
}

.footer {
    grid-area: 1 / 1 / span 4 / span 4; /* Footer neemt één rij en vier kolommen in beslag */
    background-color: rgb(4, 93, 196); /* Achtergrondkleur van de footer */
    color: white; /* Witte tekstkleur */
}

.footer li {
    padding: 10px; /* Voegt 10px padding rond elk lijstitem toe */
    list-style-type: none; /* Verwijdert opsommingstekens van de lijst */
}

.footer li a {
    display: inline; /* Zet de link in lijn met andere elementen */
    color: rgb(255, 255, 255); /* Witte tekstkleur voor de links */
    text-align: center; /* Centreert de tekst */
    padding: 14px 16px; /* Ruimte rond de linktekst */
    text-decoration: none; /* Verwijdert standaard onderlijning */
    text-decoration: underline; /* Voegt onderlijning toe voor de links */
}


.footer h4 {
    border-bottom: 5px solid rgb(20, 130, 255); /* Blauwe onderrand voor h4 koppen in de footer */
}

.footer img {
    width: 50px; /* Stelt de breedte van afbeeldingen in de footer in op 50px */
}

/* STYLING VOOR CURSUSSEN-SECTIE */
.grid-container-main-cursussen {
    display: grid; /* Maakt een grid lay-out voor het cursussen-gedeelte */
    grid-template-columns: auto auto auto auto; /* Verdeelt het grid in vier gelijke kolommen */
}

.main-cursussen {
    grid-area: 1 / 1 / span 4 / span 4; /* Neemt vier rijen en vier kolommen in beslag in het grid */
    border-top: 10px solid rgb(20, 130, 255); /* Blauwe bovenrand */
    border-bottom: 10px solid rgb(20, 130, 255); /* Blauwe onderrand */
    background-color: rgb(4, 93, 196); /* Achtergrondkleur van de cursussen-sectie */
}

.main-cursussen section {
    background-color: white; /* Witte achtergrondkleur voor secties binnen de cursussen-sectie */
}

.main-cursussen section img {
    height: 400px; /* Stelt de hoogte van de afbeeldingen in op 400px */
    width: 100%; /* Zet de afbeeldingen op volledige breedte van hun container */
    border-top: 10px solid rgb(20, 130, 255); /* Blauwe bovenrand */
    border-bottom: 10px solid rgb(20, 130, 255); /* Blauwe onderrand */
}

.main-cursussen section h2 {
    padding-top: 100px; /* Voegt ruimte boven de h2-kop toe */
    font-size: 60px; /* Grote lettergrootte voor de h2 kop */
    margin: 0; /* Verwijdert marge rond de h2 kop */
}

.main-cursussen section h3 {
    border: 10px solid rgb(20, 130, 255); /* Blauwe rand rond de h3 kop */
    border-bottom: none; /* Verwijdert de onderkant van de rand */
    padding-top: 50px; /* Ruimte boven de h3 kop */
    font-size: 30px; /* Middelgrote lettergrootte voor de h3 kop */
    margin: 0; /* Verwijdert marge rond de h3 kop */
    padding: 10px; /* Voeg padding toe binnen de h3 kop */
}

.main-cursussen section p {
    border-top: none; /* Verwijdert de bovenrand */
    align-items: center; /* Centreert de items verticaal binnen het element */
    font-weight: bold; /* Maakt de tekst vetgedrukt */
    font-size: 20px; /* Stelt de lettergrootte in op 20px */
    margin: 0; /* Verwijdert marge rond de paragraaf */
}

/* Verborgen elementen in de cursussen-sectie */
.main-cursussen .hidden-item1 {
    display: none; /* Verbergt item standaard */
}

.main-cursussen .hidden-item2 {
    display: grid; /* Stelt item in als grid wanneer het zichtbaar moet zijn */
}

/* Dropdown styling in de cursussen-sectie */
.main-cursussen .dropdown {
    position: relative; /* Positioneert het dropdown-menu relatief */
    display: inline-block; /* Maakt het mogelijk om dropdown-menu's inline naast elkaar te plaatsen */
}

.main-cursussen .dropdown-content {
    display: none; /* Verbergt de inhoud van het dropdown-menu standaard */
    position: relative; /* Relatieve positionering binnen de dropdown */
    background-color: rgb(4, 93, 196); /* Blauwe achtergrondkleur */
    min-width: 140px; /* Minimale breedte van het dropdown-menu */
    box-shadow: 0px 8px 16px 0px rgb(4, 93, 196); /* Schaduw voor diepte-effect */
    padding: 12px 16px; /* Padding binnen de dropdown-content */
    z-index: 1; /* Boven andere elementen plaatsen */
    background-color: white; /* Witte achtergrondkleur binnen het dropdown-menu */
}

/* Toont dropdown-content bij hover */
.main-cursussen .dropdown:hover .dropdown-content {
    display: block; /* Maakt het dropdown-menu zichtbaar bij hover */
}

/* Hover-effect voor links in de cursussen-sectie */
.main-cursussen a:hover:not(.active) {
    background-color: rgb(20, 130, 255); /* Achtergrondkleur bij hover, tenzij de link actief is */
}

.main-cursussen .right {
    float: none; /* Verwijdert float effect voor elementen rechts */
}

/* Styling voor knoppen in de cursussen-sectie */
.main-cursussen .button {
    background-color: rgb(20, 130, 255); /* Blauwe achtergrondkleur van de knop */
    border: none; /* Verwijdert rand van de knop */
    color: white; /* Witte tekstkleur */
    padding: 15px 32px; /* Padding binnen de knop */
    text-align: center; /* Centreert tekst in de knop */
    text-decoration: none; /* Verwijdert onderlijning van knoptekst */
    display: inline-block; /* Knop gedraagt zich als blok */
    font-size: 16px; /* Lettergrootte van de knop */
    margin: 4px 2px; /* Ruimte rond de knop */
    cursor: pointer; /* Verandert muiscursor naar pointer bij hover */
    font-weight: bold; /* Maakt tekst vetgedrukt */
}

/* STYLING VOOR CONTACTSECTIE */
.grid-container-main-contact {
    display: grid; /* Grid lay-out voor de contactsectie */
    grid-template-columns: auto auto auto auto; /* Vier kolommen in het contactgedeelte */
}

.main-contact {
    grid-area: 1 / 1 / span 4 / span 4; /* Neemt vier rijen en vier kolommen in beslag */
    border-top: 10px solid rgb(20, 130, 255); /* Blauwe bovenrand */
    border-bottom: 10px solid rgb(20, 130, 255); /* Blauwe onderrand */
    background-color: rgb(4, 93, 196); /* Blauwe achtergrondkleur */
}


/* STYLING VOOR DE CONTACTSECTIE */
.main-contact section {
    background-color: white; /* Witte achtergrondkleur voor secties binnen de contactsectie */
}

.main-contact section h2 {
    padding-top: 100px; /* Voegt ruimte boven de h2 kop toe */
    font-size: 30px; /* Lettergrootte van de h2 kop */
    margin: 0; /* Verwijdert marge rond de h2 kop */
}

.main-contact section p {
    border-top: none; /* Verwijdert bovenrand van de paragraaf */
    align-items: center; /* Centreert de inhoud verticaal */
    font-weight: bold; /* Maakt tekst vetgedrukt */
    font-size: 20px; /* Stelt de lettergrootte in op 20px */
    margin: 0; /* Verwijdert marge rond de paragraaf */
}

.main-contact section img {
    width: 100%; /* Zet de afbeelding op volledige breedte van de container */
}

.main-contact form {
    padding-top: 100px; /* Ruimte boven het formulier */
    border-top: 10px solid rgb(20, 130, 255); /* Blauwe bovenrand voor het formulier */
}

.main-contact section label {
    align-items: center; /* Centreert de label-inhoud verticaal */
    font-weight: bold; /* Maakt de labeltekst vetgedrukt */
    font-size: 20px; /* Stelt de lettergrootte in op 20px */
    margin: 0; /* Verwijdert marge rond het label */
}

.main-contact .button {
    background-color: rgb(20, 130, 255); /* Blauwe achtergrondkleur van de knop */
    border: none; /* Verwijdert standaard knoprand */
    color: white; /* Witte tekstkleur */
    padding: 15px 32px; /* Ruimte binnen de knop */
    text-align: center; /* Centreert de tekst in de knop */
    text-decoration: none; /* Verwijdert onderlijning van knoptekst */
    display: inline-block; /* Zorgt dat de knop zich als een blokelement gedraagt */
    font-size: 16px; /* Standaard lettergrootte voor de knop */
    margin: 4px 2px; /* Ruimte rond de knop */
    cursor: pointer; /* Verandert de cursor naar pointer bij hover */
    font-weight: bold; /* Maakt de knoptekst vetgedrukt */
}

/* STYLING VOOR DE INFORMATIESECTIE */
.grid-container-main-informatie {
    display: grid; /* Maakt een grid lay-out voor de informatielay-out */
    grid-template-columns: auto auto auto auto; /* Vier kolommen in het grid */
}

.main-informatie {
    grid-area: 1 / 1 / span 4 / span 4; /* Neemt vier rijen en vier kolommen in beslag */
    border-top: 10px solid rgb(20, 130, 255); /* Blauwe bovenrand */
    border-bottom: 10px solid rgb(20, 130, 255); /* Blauwe onderrand */
    background-color: rgb(4, 93, 196); /* Blauwe achtergrondkleur */
}

.main-informatie section {
    background-color: white; /* Witte achtergrondkleur voor secties in de informatielay-out */
}

.main-informatie section h2 {
    border-top: 10px solid rgb(20, 130, 255); /* Blauwe bovenrand voor h2 kop */
    padding-top: 100px; /* Voegt ruimte boven de h2 kop toe */
    font-size: 30px; /* Lettergrootte van de h2 kop */
    margin: 0; /* Verwijdert marge rond de h2 kop */
}

.main-informatie section p {
    border-top: none; /* Verwijdert bovenrand van de paragraaf */
    align-items: center; /* Centreert de inhoud verticaal */
    font-size: 20px; /* Lettergrootte van de paragraaftekst */
    margin: 0; /* Verwijdert marge rond de paragraaf */
}

.main-informatie ul {
    list-style-type: none; /* Verwijdert opsommingstekens van de lijst */
    margin: 0; /* Verwijdert marge rond de lijst */
    padding: 0; /* Verwijdert padding binnen de lijst */
}

.main-informatie li {
    float: none; /* Verwijdert float opmaak van lijstitems */
}

/* MEDIA QUERIES VOOR GROTERE SCHERMEN */
@media screen and (min-width: 600px) {
    .header .right {
        float: right; /* Lijstitems in de header aan de rechterkant */
    }
    
    .header .left {
        float: left; /* Lijstitems in de header aan de linkerkant */
    }
    
    .header li {
        float: left; /* Lijstitems in de header links uitgelijnd */
    }

    .grid-container-main {
        grid-template-columns: auto auto auto auto; /* Vier kolommen in het hoofdgedeelte op grotere schermen */
    }

    .main p {
        display: grid; /* Paragrafen worden weergegeven als grid-items */
        font-size: 20px; /* Lettergrootte van 20px */
        font-weight: bold; /* Tekst vetgedrukt */
    }

    .grid-container-footer {
        display: grid; /* Maakt een grid lay-out voor de footer */
        grid-template-columns: auto auto auto auto; /* Vier kolommen in de footer */
        gap: 10px; /* Ruimte tussen items in de footer */
    }

    .main-cursussen section p {
        border: 10px solid rgb(20, 130, 255); /* Blauwe rand om de paragraaf */
        border-top: none; /* Verwijdert bovenrand */
        align-items: center; /* Centreert inhoud verticaal */
        font-weight: bold; /* Maakt tekst vetgedrukt */
        font-size: 20px; /* Stelt de lettergrootte in op 20px */
        margin: 0; /* Verwijdert marge rond de paragraaf */
    }

    .main-cursussen section img {
        height: 500px; /* Stelt de hoogte van de afbeelding in op 500px */
        width: 400px; /* Stelt de breedte van de afbeelding in op 400px */
        border: 10px solid rgb(20, 130, 255); /* Blauwe rand om de afbeelding */
    }

    .main-cursussen .hidden-item1 {
        display: grid; /* Maakt verborgen item zichtbaar als grid-item */
    }
    
    .main-cursussen .hidden-item2 {
        display: none; /* Verbergt het item standaard */
    }
}