body {

    background-color: #343a40;

    height: auto;

    width: 100%;

    margin: 0;

}



header {

    position: sticky;

    top: 0;

    z-index: 1000; /* Zorg ervoor dat de header boven andere elementen blijft */

    background-color: white; /* Optionele achtergrondkleur */

    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Optionele schaduw voor zichtbaarheid */

}



.dd-carousel-black {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.4); /* Semi-transparant zwart */

    z-index: 1;

}



.dd-carousel-img {

    height: 100%;

    object-fit: cover;

}



.dd-landing-title {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    color: white;

    z-index: 2;

    text-align: center;

}

.dd-landing-title h1 {

    font-size: 40px;

}

.dd-landing-title h2 {

    font-size: 25px;

}



.dd-subpagina-title {

    position: relative;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    color: white;

    z-index: 2;

    text-align: center;

    text-shadow: 0px 0px 5px rgb(0, 0, 0)

}

.dd-subpagina-title h1 {

    font-size: 40px;

}

.dd-subpagina-title h2 {

    font-size: 25px;

}



.dd-spacer {

    background-color: rgba(0, 0, 0, 0);

}



.dd-main {

    background-color: #212529;

    display: flex;

    justify-content: space-between;

    padding: 50px;

    padding-left: 10px;

    padding-right: 10px;

    color: #fff;

    height: 600px;

}



.dd-main-spacer {

    width: 15%;

}



.dd-main-inhoud {

    width: 100%;

    align-self: center;

}



.dd-main-logo {

    height: 50%;

    align-self: center;

    border-radius: 10px;

}



.dd-main-button {

    background-color: #2D9FDE;

    border-radius: 10px;

    padding: 10px;

    border: none;

    margin-top: 10px;

    color: #fff;

    transition: box-shadow 0.2s ease, background-color 0.2s ease;

}



.dd-main-button:hover {

    box-shadow: 0px 0px 10px #414141;

    background-color: #2482b4;

    transition: all 0.2s ease;

}



.dd-head-image {

    height: 50vh;

    width: 100%;

    position: relative;

    object-fit: cover;

    animation: fadeIn 1s ease-in-out forwards;

    z-index: -1;

}



.dd-head-image-box {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



.dd-solliciteren-container {

    padding: 70px;

    border-radius: 50px;

}



.dd-solliciteren-onderwereld {

    padding: 70px;

}







/* ********** */

/*   Footer   */

/* ********** */

.dd-footer {

    display: flex;

    padding: 20px;

    height: 300px;

    background-color: #212529;

}



.dd-footer-copy {

    display: flex;

    padding: 20px;

    height: 80px;

    background-color: #212529;

    color: white;

}



.dd-footer-kolom {

    width: 15%;

    height: 10px;

    text-align: left;

    padding: 10px;

    box-sizing: border-box;

    color: white;

}



.dd-footer-knop {

    color: aliceblue;

    height: 30px;

    margin-right: 50px;

    margin-bottom: 10px;

    border-bottom: 2px solid #012A56;

    transition: border-bottom ease-in-out 0.1s;

}



.dd-footer-knop-fivem {

    color: aliceblue;

    height: 30px;

    margin-right: 50px;

    margin-bottom: 10px;

    border-bottom: 2px solid #012A56;

    transition: all ease-in-out 0.1s;

}



.dd-footer-tekst {

    color: #fff;

    text-decoration: none;

}



.dd-footer-streep {

    background-color: #012A56;

    height: 2px;

}



.dd-footer-knop-fivem:hover {
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(135deg, rgba(255, 135, 55, 1), rgba(229, 154, 79, 1));
    border-image-slice: 1;

    border-radius: 10px;

    transition: all ease-in-out 0.1s;

}

.dd-footer-knop:hover {

    border-bottom: 2px solid #2D9FDE;

    transition: border-bottom ease-in-out 0.1s;

}







/* ********* */

/* Keyframes */

/* ********* */

@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}







/* ********* */

/* Scrollbar */

/* ********* */

html {

    scrollbar-width: thin; /* Dunne scrollbar */

}







/* Alert */

.custom-alert {

    background-color: #4CAF50; /* Groen voor goedkeuring */

    color: white;

    padding: 20px;

    margin: 20px 0;

    border-radius: 5px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    max-width: 400px;

    margin: auto;

    z-index: 1000;

}



.custom-alert button {

    background-color: #f44336; /* Rood voor de sluitknop */

    color: white;

    border: none;

    border-radius: 5px;

    padding: 10px;

    cursor: pointer;

}



.custom-alert button:hover {

    background-color: #d32f2f;

}  


@media screen and (max-width: 800px)  {
    .dd-main-logo {
        display: none;
    }

    .dd-main {
        height: auto;
    }
    .dd-main iframe {
        display: none;
    }
    #footer-spacer-kolom {
        display: none;
    }
    .dd-footer {
        flex-wrap: wrap;
        flex: 2;
        height: auto;
    }
    .dd-footer-copy {
        flex-direction: row;
        width: 100%;
        height: auto;
    }
    .dd-footer-kolom {
        width: 50%;
        height: auto;
    }
}