:root {
    --pink: #f5a9d7;
    --pink-light: #f7b1dc;
    --blue: #91ace8;
    --yellow: #f7df72;
    --green: #ccd56b;
    --cream: #fbfaf0;
    --black: #050505;
    --radius: 32px;

    --title-font: "Montserrat", sans-serif, font-weight: 700;
    --body-font: "Montserrat", sans-serif;
}

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    line-height: normal;
    font-family: var(--body-font);
    color: var(--black);
    background: var(--cream);
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

footer {
    background-color: black;
    height: 70px;
    width: 100%;
}

h4 {
    position: relative;
    font-size: 64px;
    font-weight: 800;
    font-family: Montserrat;
    color: #000;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: center;

}

h5 {
    width: 594px;
    height: 103px;
    position: relative;
    font-size: 48px;
    font-weight: 800;
    font-family: Montserrat;
    color: #000;
    text-align: left;
}



p {
    font-weight: 400;
    font-size: 16px;
    font-family: Montserrat;

}

/*clickable images*/
.clickable-image {
    cursor: zoom-in;
}

/* Donkere achtergrond */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: none;
    justify-content: center;
    align-items: center;

    padding: 40px;
    background-color: rgba(0, 0, 0, 0.85);
}

/* Wordt toegevoegd met JavaScript */
.lightbox.is-open {
    display: flex;
}

/* Vergrote afbeelding */
.lightbox-image {
    display: block;
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
}

/* Kruisje rechtsboven */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;

    border: 0;
    padding: 0;
    background: transparent;
    color: white;

    font-size: 50px;
    line-height: 1;
    cursor: pointer;
}


/*navigatiebalk code*/

.siteHeader {
    height: 80px;
    padding: 24px 64px 24px 99px;
    background: var(--blue);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 20;

}

.logoLink {
    font-weight: 700;
    font-size: 36px;
}

.nav {
    display: flex;
    align-items: center;
    gap: 42px;
    font-weight: 700;
    font-size: 24px;
}

/*Home pagina */

.hero {

    width: 100%;
    height: 840px;
    position: relative;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    text-align: left;
    font-size: 24px;
    color: #000;
    font-family: Montserrat;

    top: 0px;
    left: 0px;
    background-color: #ffbbe6;
}

.heroTitel {
    position: absolute;
    margin: 0;
    top: 120px;
    left: 104px;
    font-size: 80px;
    font-weight: 800;
    width: 638px;
}

.heroTekst {
    position: absolute;
    margin: 0;
    top: 450px;
    left: 104px;
    font-size: 16px;
    font-weight: 500;
    display: inline-block;
    width: 550px;
    height: 141px;
}

.button-view-my-work {
    position: absolute;
    top: 700px;
    left: 104px;
    z-index: 2;

    width: 301px;
    height: 62px;
    padding: 0 20px 0 32px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-radius: 44px;
    background-color: #ffe38c;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);

    color: var(--cream);
    font-size: 24px;
    font-weight: 700;
}

.view-my-work {
    position: static;
    width: auto;
    height: auto;
}

.button-view-my-work-item {
    position: static;
    width: 25px;
    height: auto;
}


.heroRechts {
    position: absolute;
    top: 120px;
    right: 64px;
    filter: drop-shadow(7px 7px 4px rgba(0, 0, 0, 0.25));
    width: 580px;
    height: 690.3px;
}

/*projects*/

h2 {
    position: relative;
    font-size: 64px;
    font-weight: 800;
    font-family: Montserrat;
    color: #000;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: start;
    margin-left: 110px;
    margin-top: 25px;
}

.projectKaart {
    width: 1196px;
    max-width: calc(100% - 80px);
    height: 463px;
    margin: 60px auto 0;

    display: flex;
    overflow: hidden;

    border-radius: 44px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.projectAfbeelding {
    width: 50%;
    height: 100%;
    flex-shrink: 0;
}

.projectAfbeelding img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.projectTekst {
    width: 50%;
    height: 100%;
    padding: 60px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.projectTekst h3 {
    margin: 0 0 20px;
    font-size: 48px;
    line-height: 1;
}

.projectTekst p {
    max-width: 470px;
    margin: 0;

    font-size: 20px;
    line-height: 1.4;
    font-weight: 500;
}

.projectKaartGeel {
    background-color: #f3d876;
}

.projectKaartGroen {
    background-color: #c7ce67;
}

.projectKaartRoze {
    background-color: var(--pink);
}

/*button more work*/
.moreWorkRij {
    width: 1196px;
    max-width: calc(100% - 80px);
    margin: 60px auto;

    display: flex;
    justify-content: flex-end;
}

.projects .button-view-my-work {
    position: static;

    width: 301px;
    height: 62px;
    padding: 0 20px 0 32px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background-color: var(--pink);

}

/*about me*/
.titelStijl {
    margin: 0 0 70px;

    font-family: Montserrat, sans-serif;
    font-size: 64px;
    line-height: 1;
    font-weight: 800;

    text-align: left;
}

.aboutMeFoto {
    display: flex;
    justify-content: center;

}

.aboutMeFoto2 {
    width: min(800px, 100%);
    height: auto;
}

.aboutMeSection {
    display: flex;
    justify-content: center;
}

.aboutMeTekst {
    width: min(800px, 100%);
    height: auto;
}

.cvSectie {
    width: min(800px, 100%);
    max-width: calc(100% - 80px);
    margin: 100px auto;
}

.cvTitel {
    display: block;
    margin: 0 0 70px;

    font-size: 24px;
    line-height: 1;
    font-weight: 800;
    text-align: left;
}


/* Volledige timeline */

.timeline {
    position: relative;
}


/* Verticale zwarte lijn */

.timeline::before {
    content: "";
    position: absolute;

    top: 10px;
    bottom: 10px;
    left: 295px;

    width: 3px;
    background-color: var(--black);
}


/* Eén regel van de timeline */

.timelineItem {
    position: relative;

    display: grid;
    grid-template-columns: 260px 70px 1fr;
    align-items: start;

    min-height: 150px;
}


/* Datum links */

.timelineDatum {
    margin: 0;
    padding-top: 1px;

    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
}


/* Zwarte punt */

.timelineMarker {
    position: relative;
    z-index: 2;

    justify-self: center;

    width: 20px;
    height: 20px;

    border-radius: 50%;
    background-color: var(--black);
}


/* Tekst rechts */

.timelineTekst {
    max-width: 600px;
}

.timelineTekst h3 {
    margin: 0 0 8px;

    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
}

.timelineTekst p {
    margin: 0;

    font-size: 20px;
    line-height: 1.35;
    font-weight: 400;
}

/*witruimte*/
.witruimte {
    height: 100px;
}


/*KLEM*/
/*


/* KLEM PROJECTPAGINA */

.pagina {
    width: 1276px;
    max-width: calc(100% - 80px);
    margin: 0 auto;
    padding: 35px 0 100px;
}

.back {
    display: inline-flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 25px;

    font-size: 20px;
    font-weight: 700;
}

.backIcon {
    width: 42px;
    height: auto;
}

.klemTitel {
    max-width: 1100px;
    margin: 0 0 70px;

    font-size: 64px;
    line-height: 1.1;
    font-weight: 800;
}

.klemIntro {
    display: grid;
    grid-template-columns: 1fr 500px;
    gap: 90px;
    align-items: start;
}

.klemIntroTekst {
    max-width: 640px;
}

.klemIntroTekst p {
    margin: 0 0 32px;

    font-size: 16px;
    line-height: 1.3;
    font-weight: 400;
}

.klemVraag {
    max-width: 600px;
}

.klemLijn {
    width: 38px;
    height: 2px;
    margin: -10px 0 32px;

    background-color: var(--black);
}

.klemIntroAfbeelding img {
    width: 100%;
    height: 700px;
    object-fit: cover;

    border-radius: 44px;
}

.klemSectie {
    margin-top: 100px;
}

.klemSectieTitel {
    display: block;
    margin: 0 0 28px;

    font-size: 48px;
    line-height: 1.1;
    font-weight: 800;
    text-align: left;
}

.klemGroteAfbeelding {
    width: 100%;
    height: auto;
    border-radius: 44px;
}

.klemWebsiteLink {
    margin-top: 50px;
}

.klemWebsiteLink p {
    margin: 0 0 25px;
    font-size: 30px;
    line-height: 1.3;
}

.klemWebsiteLink a {
    text-decoration: underline;
}

.klemWebsiteLink img {
    width: 300px;
    height: auto;
}

/*breaking point*/
.breakingpointIntroAfbeelding {
    width: 150%;
    height: 700px;
    object-fit: contain;

    border-radius: 44px;
}

.breakingpointGame {
    display: flex;
    flex-direction: row;
    gap: 20px;
    border-radius: 44px;
}

/*ins outs*/

.insIntroAfbeelding {
    width: 130%;
    height: 700px;
    object-fit: cover;

    border-radius: 44px;


}

.ins3 {
    width: 80%;
    border-radius: 44px;
}

.muzieumIntroTekst {
    max-width: 1240px;

}

.blendsIntro {
    display: grid;
    grid-template-columns: 1fr 500px;
    gap: 90px;
    align-items: start;

}

.blendsIntroAfbeelding {

    width: 100%;
    height: auto;
    border-radius: 44px;
}

.videoContainer {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 44px;
    background-color: #000;
}

.videoContainer iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Carrière Kameleon */

.carriereGrid {
    width: 100%;

    display: grid;
    grid-template-columns: 37% 1fr;
    gap: 32px;
    align-items: start;
}

.carriereKolom {
    display: flex;
    flex-direction: column;
}

/* Links is de verticale ruimte tussen de foto's groter */

.carriereKolomLinks {
    gap: 64px;
}

/* Rechts staan de drie foto's dichter bij elkaar */

.carriereKolomRechts {
    gap: 40px;
}

.carriereFoto {
    display: block;
    width: 100%;
    object-fit: cover;
}


/* Lange installatie-afbeelding linksboven */

.carriereFoto1 {
    aspect-ratio: 0.56 / 1;
    border-radius: 44px;
}


/* Brede foto rechtsboven */

.carriereFoto2 {
    aspect-ratio: 1.5 / 1;
    border-radius: 44px;

}


/* Productenfoto rechts in het midden */

.carriereFoto3 {
    aspect-ratio: 1.5 / 1;
    border-radius: 44px;

}


/* Resultaatkaart linksonder */

.carriereFoto4 {
    aspect-ratio: 0.68 / 1;
    border-radius: 44px;

}


/* Scannerbeeld rechtsonder */

.carriereFoto5 {
    aspect-ratio: 1.5 / 1;
    border-radius: 44px;

}

.carrierefoto9 {
    aspect-ratio: 0.93 / 1;
    border-radius: 44px;
}

/* Slideshow container */
.slideshowContainer {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Caption text */
.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active,
.dot:hover {
    background-color: #717171;
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}



@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

.buttonMoreWork {
    width: 1196px;
    max-width: calc(100% - 80px);
    margin: 60px auto;

    display: flex;
    justify-content: flex-end;
}

.buttonMoreWork .button-view-my-work {
    position: static;

    width: 301px;
    height: 62px;
    padding: 0 20px 0 32px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background-color: var(--pink);

}

/* TABLET */
@media (max-width: 1100px) {

    /* Navigatie */

    .siteHeader {
        height: auto;
        min-height: 80px;
        padding: 20px 40px;
    }

    .logoLink {
        font-size: 30px;
    }

    .nav {
        gap: 30px;
        font-size: 20px;
    }


    /* Hero */

    .hero {
        height: auto;
        min-height: 700px;
        padding: 80px 40px;

        display: grid;
        grid-template-columns: 1fr 0.8fr;
        grid-template-areas:
            "tekst afbeelding"
            "button afbeelding";
        gap: 40px;
        align-items: center;
    }

    .heroLinks {
        grid-area: tekst;
    }

    .heroTitel {
        position: static;
        width: auto;
        margin: 0 0 30px;

        font-size: clamp(50px, 7vw, 70px);
        line-height: 1.05;
    }

    .heroTekst {
        position: static;
        width: auto;
        height: auto;
        margin: 0;

        display: block;
        font-size: 16px;
        line-height: 1.5;
    }

    .hero>.button-view-my-work {
        grid-area: button;
        position: static;
    }

    .heroRechts {
        grid-area: afbeelding;
        position: static;

        width: 100%;
        height: auto;
    }

    .heroRechts img {
        width: 100%;
        height: auto;
    }


    /* Projecten */

    h2 {
        margin: 60px 0 20px;
        font-size: 56px;
    }

    .projectKaart {
        max-width: calc(100% - 80px);
        height: 400px;
    }

    .projectTekst {
        padding: 40px;
    }

    .projectTekst h3 {
        font-size: 40px;
    }

    .projectTekst p {
        font-size: 17px;
    }

    /*about me*/
    .cvSectie {
        max-width: calc(100% - 60px);
        margin: 80px auto;
    }

    .cvTitel {
        margin-bottom: 55px;
        font-size: 52px;
    }

    .timelineItem {
        grid-template-columns: 190px 50px 1fr;
        min-height: 160px;
    }

    .timeline::before {
        left: 214px;
    }

    .timelineDatum,
    .timelineTekst p {
        font-size: 17px;
    }

    .timelineTekst h3 {
        font-size: 20px;
    }
}

/* MOBIEL */
@media (max-width: 800px) {

    /* Navigatie */

    .siteHeader {
        padding: 18px 24px;
    }

    .logoLink {
        font-size: 24px;
    }

    .nav {
        gap: 18px;
        font-size: 16px;
    }


    /* Hero */

    .hero {
        min-height: auto;
        padding: 60px 24px;

        grid-template-columns: 1fr;
        grid-template-areas:
            "tekst"
            "afbeelding"
            "button";
        gap: 40px;
    }

    .heroTitel {
        font-size: clamp(45px, 12vw, 65px);
        line-height: 1;
    }

    .heroTekst {
        font-size: 15px;
        line-height: 1.6;
    }

    .heroRechts {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }

    .hero>.button-view-my-work {
        width: 100%;
        max-width: 301px;
    }


    /* Projecten */

    h2 {
        margin: 50px 0 10px;
        font-size: 44px;
    }

    .projectKaart {
        width: auto;
        max-width: none;
        height: auto;
        margin: 40px 24px 0;

        flex-direction: column;
        border-radius: 28px;
    }

    .projectAfbeelding,
    .projectTekst {
        width: 100%;
    }

    .projectAfbeelding {
        height: 300px;
    }

    .projectTekst {
        height: auto;
        min-height: 300px;
        padding: 40px 30px;
    }

    .projectTekst h3 {
        margin-bottom: 18px;
        font-size: 38px;
    }

    .projectTekst p {
        max-width: none;
        font-size: 16px;
        line-height: 1.5;
    }

    /* Bij de groene kaart staat de afbeelding in HTML als tweede.
       Hiermee komt hij op mobiel toch boven de tekst. */

    .projectKaartGroen .projectAfbeelding {
        order: -1;
    }


    /* More work button */

    .moreWorkRij {
        width: auto;
        max-width: none;
        margin: 40px 24px 60px;
        justify-content: center;
    }

    .projects .button-view-my-work {
        width: 100%;
        max-width: 301px;
    }

    /*about me*/
    .cvSectie {
        max-width: none;
        margin: 65px 24px;
    }

    .cvTitel {
        margin-bottom: 45px;
        font-size: 42px;
    }

    .timeline {
        padding-left: 38px;
    }

    .timeline::before {
        top: 8px;
        bottom: 15px;
        left: 9px;
    }

    .timelineItem {
        display: block;
        min-height: 0;
        margin-bottom: 55px;
    }

    .timelineItem:last-child {
        margin-bottom: 0;
    }

    .timelineMarker {
        position: absolute;
        top: 0;
        left: -38px;
    }

    .timelineDatum {
        margin-bottom: 12px;
        padding: 0;

        font-size: 16px;
    }

    .timelineTekst h3 {
        margin-bottom: 7px;
        font-size: 20px;
    }

    .timelineTekst p {
        font-size: 16px;
        line-height: 1.45;
    }
}