header {
    font-family:Bahnschrift;  
    display: flex;
    background: rgb(0, 45, 71);
    border-left: 1px solid white;
    border-bottom: 5px solid white;
    border-radius: 5px;
}


figure {
    width: 30%;
    margin-left: 1vw;
}

header img {
    max-width: 100%; /* Ensure image does not exceed the width of its container */
    height: auto; /* Maintain aspect ratio */
    margin: 0.5vw 0 0.5vw 0;
    padding: 0;
    box-sizing: border-box;
    border-radius: 5px;
}

header p {
    font-family: Bahnschrift;
    width: 80%; 
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center vertically */
    justify-content: right; /* Center horizontally */
    margin-right: 30px; /* Remove default margin */
    color: white;
    font-size: 3vw;
    font-weight: 900;
  
}


/*

main {
    inline-size:1044px;
    margin:0 auto;
}
    */



.parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, auto);
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}

    .parent > div {
        border:0px solid white;
      }

p {
    justify-content: center;
}

.image {
    max-width: 100%; /* Zorgt ervoor dat de afbeelding niet breder wordt dan zijn oorspronkelijke grootte */

    width: auto; /* Stel de breedte van de afbeelding automatisch in om de aspect ratio te behouden */
    height: 100%; /* Stel de hoogte van de afbeelding automatisch in om de aspect ratio te behouden */
    display: block; /* Zorgt ervoor dat de afbeelding correct wordt weergegeven als blokelement */
    margin: auto; /* Centreert de afbeelding binnen het blok */
}

div1 {
    grid-area: 1 / 1 / 2 / 2;
}

.div2 {
    grid-area: 4 / 4 / 5 / 5;
}

.div3 {
    grid-area: 3 / 1 / 4 / 2;
}

.div4 {
    grid-area: 5 / 5 / 7 / 6;

}

.div5 {
    grid-area: 5 / 1 / 7 / 2;
   
}

.div6 {
    grid-area: 2 / 2 / 5 / 3;
}

.div7 {
    grid-area: 1 / 4 / 3 / 5;
}

.div8 {
    grid-area: 3 / 5 / 4 / 6;
}

.div9 {
    grid-area: 1 / 3 / 2 / 4;
}

.div10 {
    grid-area: 5 / 3 / 7 / 4;
}

.div11 {
    grid-area: 3 / 3 / 4 / 4;
}

.div12 {
    grid-area: 2 / 1 / 3 / 2;
}

.div13 {
    grid-area: 4 / 1 / 5 / 2;
}

.div14 {
    grid-area: 5 / 2 / 7 / 3;
}

.div15 {
    grid-area: 1 / 2 / 2 / 3;
}

.div16 {
    grid-area: 2 / 3 / 3 / 4;
}

.div17 {
    grid-area: 4 / 3 / 5 / 4;
}

.div18 {
    grid-area: 1 / 5 / 3 / 6;
}

.div19 {
    grid-area: 3 / 4 / 4 / 5;
}

.div20 {
    grid-area: 4 / 5 / 5 / 6;
}

.div21 {
    grid-area: 5 / 4 / 7 / 5;
}


.container-employees {
    position: relative;
    max-width: 100%; /* Ensure the image does not exceed the container width */
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
    border-radius: var(--radius);
    background: rgb(0, 45, 71);
    color: white;
    font-family: Bahnschrift;
    font-size: 2vw;
    /* Flexbox for centering */
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
    text-align: center; 

}

.middle {
   
    opacity: 0;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 0%);
    text-align: center;
    inline-size: 100%;
    height:100%;
}

.container-employees:hover .middle {
    opacity: 1;
    transition: 1s ease;
}

.container-employees7:hover .middle {
    opacity: 1;
}



.text {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Verticaal centreren */
    align-items: center; /* Horizontaal centreren */
    height: 100%;
    inline-size: 100%;
    background-color: rgb(255, 127, 30);
    color: white;
}

    .text a {
        display: flex;
        justify-content: center; /* Centreren van de link inhoud */
        align-items: center; /* Centreren van de link inhoud */
        inline-size: 100%;
        text-decoration: none; /* Verwijder standaard onderstreping */
        color: white;
        font-size: 1.2vw;
    }
    
    .text > * {
        border-bottom: 1px solid white; /* Lijn tussen de blokken */
        flex-grow: 1;
        margin: 0;
        box-sizing: border-box;
    }

        .text > *:last-child {
            border-bottom: none; /* Geen lijn na het laatste blok */
        }

        .text > *:hover {
            background-color: silver;
            color: white;
          
        }


/* Footer */
.footer {
    margin-top:5px;
    background: rgb(0,45,71);
    height: auto;

}

    .footer p, .footer h3 {
        font-size: 0.75rem;
        color: white;
        padding: 0px
    }

    .footer h3 {
        font-size: 1rem;
    }
    

.footer-container {
    display: flex;
    flex-direction: column;
    margin: 0px auto 0 auto; /* Center the container */
}

.footer-column1 {
    margin-top: 2vw;
    margin-left:1vw;
    display: flex;
    flex-direction: column;
}

    .footer-column1 img {
        max-inline-size: 15%;
        height: auto;
        margin-bottom: 1vw;
        border-radius: 5px;
    }



.footer-container h3 {
    margin: 0.5vw 0 0.5vw 0;
    color: white;
}


.copyright {
    display: block;
    margin: 1vw;
    border-top: 1px solid white;
    padding-top: 1vw;
 
}


@media (min-width: 769px) and (max-width: 1044px) {

    header {
        height: 13vw;
        border-bottom: 2px solid white;
    }


    .footer p, .footer h3 {
        font-size: 0.5rem;
    }



    .parent {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(8, auto);
        grid-column-gap: 2px;
        grid-row-gap: 2px;
    }

    .div1 {
        grid-area: 1 / 1 / 2 / 2;
    }

    .div2 {
        grid-area: 1 / 3 / 2 / 4;
    }

    .div3 {
        grid-area: 2 / 2 / 3 / 3;
    }

    .div4 {
        grid-area: 3 / 1 / 5 / 2;
    }

    .div5 {
        grid-area: 5 / 2 / 7 / 3;
    }

    .div6 {
        grid-area: 3 / 3 / 6 / 4;

    }

    .div10 {
        grid-area: 7 / 1 / 9 / 2;
    }

    .div8 {
        grid-area: 7 / 3 / 8 / 4;
    }

    .div7 {
        grid-area: 9 / 3 / 11 / 4;
    }

    .div9 {
        grid-area: 9 / 2 / 10 / 3;
    }

    .div11 {
        grid-area: 10 / 1 / 11 / 2;
    }

    .div12 {
        grid-area: 1 / 2 / 2 / 3;
    }

    .div13 {
        grid-area: 2 / 1 / 3 / 2;
    }

    .div14 {
        grid-area: 3 / 2 / 5 / 3;
    }

    .div15 {
        grid-area: 2 / 3 / 3 / 4;
    }

    .div16 {
        grid-area: 6 / 3 / 7 / 4;
    }

    .div17 {
        grid-area: 8 / 3 / 9 / 4;
    }

    .div18 {
        grid-area: 7 / 2 / 9 / 3;
    }

    .div19 {
        grid-area: 10 / 2 / 11 / 3;
    }

    .div20 {
        grid-area: 9 / 1 / 10 / 2;
    }

    .div21 {
        grid-area: 5 / 1 / 7 / 2;
    } 

    .container-employees {
          font-size: 3vw;
    }

    .text a {
        font-size: 2vw;
    }

        .footer {
        margin-top: 2px;
    }
}




@media only screen and (max-width: 768px) {
    header {
        height: auto;
        border-bottom: 4px solid white;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    figure {
        display: block;
        inline-size: 100%;
        margin: 0 1vw 0 1vw;
        padding: 1vw;
        box-sizing: border-box;
    }

    header p {
        font-size: 6vw;
    }



    .parent {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(19, auto);
        grid-column-gap: 4px;
        grid-row-gap: 4px;
    }

    .image {
        height: auto;
        width: 100%
    }

    .div1 {
        grid-area: 1 / 1 / 2 / 2;
        height: 150px;
    }

    .div6 {
        grid-area: 5 / 1 / 6 / 2;
        height: 500px;
    }

    .div3 {
        grid-area: 3 / 1 / 4 / 2;
        height: 150px;
    }

    .div4 {
        grid-area: 9 / 1 / 10 / 2;
        height: 300px;
    }

    .div5 {
        grid-area: 13 / 1 / 14 / 2;
        height: 300px;
    }

    .div2 {
        grid-area: 7 / 1 / 8 / 2;
    }

    .div7 {
        grid-area: 11 / 1 / 12 / 2;
        height: 300px;
    }

    .div8 {
        grid-area: 15 / 1 / 16 / 2;
    }

    .div9 {
        grid-area: 17 / 1 / 18 / 2;
        height: 200px;
    }

    .div10 {
        grid-area: 19 / 1 / 20 / 2;
        height: 250px;
    }

    .div11 {
        grid-area: 21 / 1 / 22 / 2;
    }

    .div12 {
        grid-area: 2 / 1 / 3 / 2;
        height: 150px;
        overflow: hidden;
    }

    .div12 img {
        transform: translate(0%, -12%);
    }

    .div13 {
        grid-area: 4 / 1 / 5 / 2;
        height: 250px;
        overflow: hidden;
    }

    .div13 img {
        transform: translate(0%, -17%);
    }


    .div14 {
        grid-area: 6 / 1 / 7 / 2;
        height: 300px;
        overflow: hidden;
    }
    .div14 img {
        transform: translate(0%, -15%);
    }

    .div15 {
        grid-area: 8 / 1 / 9 / 2;
        height: 200px;
        overflow: hidden;
    }

    .div16 {
        grid-area: 10 / 1 / 11 / 2;
        height: 200px;
        overflow: hidden;
    }

    .div16 img {
        transform: translate(0%, -15%);
    }

    .div17 {
        grid-area: 12 / 1 / 13 / 2;
    }

    .div18 {
        grid-area: 14 / 1 / 15 / 2;
        height: 200px;
        overflow: hidden;
    }

    .div18 img {
        transform: translate(0%, -30%);
    }

    .div19 {
        grid-area: 16 / 1 / 17 / 2;
        height: 200px;
        overflow: hidden;
    }

    .div19 img {
        transform: translate(0%, -10%);
    }


    .div20 {
        grid-area: 18 / 1 / 19 / 2;
        height: 200px;
        overflow: hidden;
    }

    .div20 img {
        transform: translate(0%, -20%);
    }

    .div21 {
        grid-area: 20 / 1 / 21 / 2;
        height: 200px;
        overflow: hidden;
    }

    .div21 img {
        transform: translate(0%, -60%);
    }

 

    .container-employees {
        font-size: 4.5vw;
    }

    .text a {
        font-size: 4vw;
    }


    .footer-column1 img {
        max-inline-size: 100%;
        padding-right: 1vw;
        box-sizing: border-box;
        margin: 0;
    }

    .footer {
        margin-top: 5px;
        background: rgb(0,45,71);
        height: auto;
    }



    .footer-container h3 {
        margin: 0;
        color: white;
    }


    .copyright {
        display: block;
        border-top: 1px solid white;
        padding-top: 1vw;
    }
}