body {
    min-height: 100vh; /* Zorgt ervoor dat de body minimaal de volledige viewporthoogte heeft */
    background: linear-gradient(to bottom, #E4ECF9 0%, #E4ECF900 120%);
    width: 100vw;

    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    /* text-align: center; */
}

a{
    transition: all 0.2s ease;
}

/* Header achtergrond */
.header {
    position: relative;
    background-color: #103055;
    color: white;
    padding: 50px 20px;
    min-height: 60vh; /* Zorgt dat de header minstens 60% van het scherm vult */
    display: flex;
    /* flex-direction: column;
    align-items: center; */
    justify-content: center;
    overflow: hidden;
    
    /* GOLF AAN DE ONDERKANT */
    /* clip-path: polygon(100% 0%, 0% 0% , 0.00% 83.29%, 2.00% 82.40%, 4.00% 81.59%, 6.00% 80.85%, 8.00% 80.21%, 10.00% 79.67%, 12.00% 79.24%, 14.00% 78.92%, 16.00% 78.73%, 18.00% 78.67%, 20.00% 78.73%, 22.00% 78.91%, 24.00% 79.22%, 26.00% 79.64%, 28.00% 80.18%, 30.00% 80.82%, 32.00% 81.55%, 34.00% 82.36%, 36.00% 83.24%, 38.00% 84.17%, 40.00% 85.14%, 42.00% 86.14%, 44.00% 87.14%, 46.00% 88.14%, 48.00% 89.11%, 50.00% 90.05%, 52.00% 90.93%, 54.00% 91.74%, 56.00% 92.48%, 58.00% 93.12%, 60.00% 93.66%, 62.00% 94.09%, 64.00% 94.41%, 66.00% 94.60%, 68.00% 94.67%, 70.00% 94.61%, 72.00% 94.42%, 74.00% 94.12%, 76.00% 93.69%, 78.00% 93.16%, 80.00% 92.52%, 82.00% 91.79%, 84.00% 90.98%, 86.00% 90.10%, 88.00% 89.17%, 90.00% 88.19%, 92.00% 87.20%, 94.00% 86.19%, 96.00% 85.20%, 98.00% 84.22%, 100.00% 83.29%); */
    clip-path: polygon(100% 0%, 0% 0% , 0.00% 87.88%, 2.00% 86.97%, 4.00% 86.13%, 6.00% 85.37%, 8.00% 84.70%, 10.00% 84.14%, 12.00% 83.70%, 14.00% 83.37%, 16.00% 83.17%, 18.00% 83.10%, 20.00% 83.17%, 22.00% 83.36%, 24.00% 83.67%, 26.00% 84.11%, 28.00% 84.67%, 30.00% 85.33%, 32.00% 86.08%, 34.00% 86.92%, 36.00% 87.83%, 38.00% 88.79%, 40.00% 89.80%, 42.00% 90.83%, 44.00% 91.87%, 46.00% 92.90%, 48.00% 93.91%, 50.00% 94.88%, 52.00% 95.79%, 54.00% 96.63%, 56.00% 97.39%, 58.00% 98.06%, 60.00% 98.62%, 62.00% 99.06%, 64.00% 99.39%, 66.00% 99.59%, 68.00% 99.66%, 70.00% 99.59%, 72.00% 99.40%, 74.00% 99.08%, 76.00% 98.65%, 78.00% 98.09%, 80.00% 97.43%, 82.00% 96.68%, 84.00% 95.84%, 86.00% 94.93%, 88.00% 93.96%, 90.00% 92.96%, 92.00% 91.93%, 94.00% 90.89%, 96.00% 89.86%, 98.00% 88.85%, 100.00% 87.88%);
}

/* Achtergrondafbeeldingen (sterretjes) */
/* .header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/img/Group111.svg') center center / cover no-repeat;
    opacity: 0.3;
    z-index: 1;
} */

.image-ster{
    position: absolute;
    z-index: 1;
}
.ster-1{
    left: 20%;
    top: 100px;
}
.ster-2{
    left: 3%;
    top: 275px;
}
.ster-3{
    right: 40%;
    top: 325px;
}
.ster-4{
    right: 10%;
    top: 150px;
}


/* Content binnen de header */
.header-content {
    position: relative;
    z-index: 3;
}

.logos {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 20px;
    margin: 0 0 75px;
}

.logos img {
    width: 200px;
    /* height: auto; */
}

/* Zorgt ervoor dat de tekst netjes gecentreerd blijft */
.text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.header-h1{
    /* margin: 0; */
    font-weight: normal;
    font-size: 50px;
    letter-spacing: 10px;
    text-align: center;
}
.header-h2{
    color: #e4b320;
    font-family: 'Times New Roman', Times, serif;
    font-size: 140px;
    margin: 0 0 20px;
    line-height: 120px;
}

.header-bigger-p{
    margin: 10px 0 0;
    font-size: 24px;
    letter-spacing: 2px;
}
.header-smaller-p{
    margin: 10px 0 0;
    font-size: 16px;
    letter-spacing: 2px;
}


/* Taal switch */
.language-switch {
    position: absolute;
    top: 30px;
    right: 30px;
    display: flex;
    gap: 10px;
    z-index: 4;
}

.language-switch img {
    width: 40px;
    cursor: pointer;
    border: 2px solid transparent;
}

.flag-nl, .flag-en {
    outline: none;
    cursor: pointer;
}

.flag-nl.flag-active, .flag-en.flag-active {
    border: 2px solid #e4b320;
}


/* SECTION STYLING */

.full-width-section {
    width: 100%; /* Zorgt ervoor dat de sectie over de hele breedte gaat */
    padding: 50px 0; /* Optionele padding boven en onder */
}

.container {
    width: 50rem; /* Breedte van de container, pas dit aan naar wens */
    max-width: 1200px; /* Maximaal de breedte van 1200px */
    margin: 0 auto; /* Centreert de container */
    padding: 20px; /* Padding binnen de container */
    /* background-color: #fff; Witte achtergrond voor de container */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); Optionele schaduw voor visueel effect */
}

.container h1, .container h2, .container h3{
    font-family: 'Times New Roman', Times, serif;
    color: #e8a401;
}

.container p{
    font-size: 14px;
    margin-top: 0;
}

.container a{
    font-size: 14px;
    color: #439bb1;
}
.container a:hover{
    color: #103055;
}

.container .bigger-h2{
    font-size: 32px;
}

.container .normal-h2{
    margin: 0;
}


/* FORM STYLING */

.form label {
    font-size: 14px;
}

.form-label {
    margin: 10px 0 5px;
    font-size: 16px;
    font-weight: bold;
}

.form-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.radio-group {
    display: flex;
    /* flex-direction: column; */
    margin: 10px 0;
    align-items: baseline;
    gap: 10px;
}

.radio-label {
    display: flex;
    align-items: center;
    margin: 5px 0;
    font-size: 16px;
}

.radio-input {
    margin-right: 10px;
}

.intresse-div{
    display: flex;
    align-items: center;
    gap: 30px;
}

.input-text{
    margin: 15px 0;
}
.input-text:last-of-type {
    margin-bottom: 0;
}

.input-text input{
    width: 100%;
    border: #4c70a0 1px solid;
    padding: 10px;
    border-radius: 5px;
    margin-top: 5px;
}

.form-text {
    font-size: 16px;
    margin-top: 10px;
}

.btn-aanmelden {
    background-color: #e4b320;
    width: 250px;
    color: white;
    padding: 15px 20px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 20px;
    font-size: 16px;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    transition: all 0.2s ease;
}

.btn-aanmelden:hover {
    background-color: #c99c17;
}

.logos-form {
    display: flex;
    /* justify-content: center; */
    margin-top: 40px;
    gap: 1.5rem;
    align-items: center;
}

.logo {
    /* width: 150px; */
    margin: 0 10px;
    height: 85px;
}
.tri{
    height: 85px;
}

.cal{
    height: 110px;
}



/* FOOTER SECTION */

.full-width-section.banner-foto {
    width: 100%; /* Zorgt ervoor dat de sectie de volledige breedte van de pagina neemt */
    height: 700px; /* Pas de hoogte aan afhankelijk van hoe groot je de footer wilt */
    background-image: url('/img/Group119.png'); /* Voeg hier de juiste padnaam toe naar je afbeelding */
    background-size: cover; /* Zorgt ervoor dat de afbeelding niet vervormt, maar de sectie volledig bedekt */
    background-position: center; /* Centreert de afbeelding in de sectie */
    background-repeat: no-repeat; /* Zorgt ervoor dat de afbeelding niet wordt herhaald */
    display: flex; /* Optioneel, om inhoud in de footer te centreren als je dat wilt */
    justify-content: center; /* Optioneel, horizontaal centreren */
    align-items: center; /* Optioneel, verticaal centreren */
}  

footer{
    padding: 15px;
    background-color: #f3f8ff;
    display: flex;
    justify-content: center;
    color: #103055;
}
footer a{
    color: #103055;
    text-decoration: none;
}
footer a:hover{
    color: #00b2c5;
}

.cf-turnstile{
    margin: 20px 0;
}


/* .lang-en { display: none; } Start met Engels verborgen */
  

.text-form-section{
    padding: 0 !important;
}


/* Responsiveness */
@media (min-width: 768px) {
    .header-h1{
        margin: 0;
    }
}


@media (max-width: 768px) {
    .header {
        padding: 30px 0 0;
        /* clip-path: ellipse(100% 90% at 50% 100%); Iets minder scherpe golf op mobiel */
        min-height: 425px; /* Zorgt dat de header minstens 60% van het scherm vult */
    }
    .header.en {
        min-height: 450px;
    }
    .logos {
        margin: 30px 0 45px;
    }
    .logos img {
        /* height: 20px; */
        width: 130px;
    }

    .language-switch {
        position: absolute;
        top: 20px;
        right: 30px;
        display: flex;
        gap: 10px;
        z-index: 4;
    }
    .language-switch img {
        width: 30px;
    }

    .container {
        width: 80%;
        padding: 10px; /* Padding binnen de container */
    }


    .header-h1{
        /* margin: 0; */
        font-weight: normal;
        font-size: 22px;
        letter-spacing: 10px;
    }
    .header-h2{
        color: #e4b320;
        font-family: 'Times New Roman', Times, serif;
        font-size: 64px;
        margin: 0 0 20px;
        line-height: 50px;
    }
    
    .header-bigger-p{
        margin: 10px 0 0;
        font-size: 14px;
        letter-spacing: 2px;
    }
    .header-smaller-p{
        margin: 10px 0 0;
        font-size: 14px;
        letter-spacing: 2px;
        text-align: center;
    }

    .logos-form{
        flex-direction: column;
        gap: 0;
    }

    .input-text input {
        width: 90%;
        border: #4c70a0 1px solid;
        padding: 10px;
        border-radius: 5px;
        margin-top: 5px;
    }

    .full-width-section{
        padding:  25px 0 0;
    }

    .full-width-section.banner-foto{
        height: 175px;
        padding: 0 0 25px;
    }


    body{
        background: linear-gradient(to bottom, #E4ECF9 0%, #E4ECF900 150%);
    }

    footer{
        text-align: center;
    }

    .intresse-div{
        gap: 0px;
        flex-direction: column;
        align-items: flex-start;
        margin: 10px 0;
    }
    .intresse-div .radio-group{
        margin: 5px 0;
    }


    .image-ster{
        position: absolute;
        z-index: 1;
    }
    .ster-1{
        left: 10%;
        top: 30px;
    }
    .ster-2{
        left: 30%;
        top: 225px;
    }
    .ster-3{
        display: none;
    }
    .ster-4{
        display: none;
    }

}