@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html, * {
    padding: 0; 
    margin: 0; 
    box-sizing: border-box;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    scrollbar-gutter: stable;
    cursor: url('../cursor7.cur'), auto;
}

a, button, div.arrow path, a>h1, a path {cursor: url('../cursor-pointer7.cur'), pointer;}

:root {
    --color-text: #2D2D2D;
    --color-light: #F8FAFC ;
    --color-accent: #E2EEF8;
    --color-dark: #012559;
    --height-header: 5rem;
    --gap-side: 1rem;
    --gap-small: 1rem;
    --gap-medium : 2rem;
    --gap-large: 4rem;
}

@media screen and (min-width: 900px) {
    :root {
        --gap-side: 2rem;
    }
}

/* main shit */

header h1 {font-family: "Poppins", sans-serif; padding-bottom: 0.1rem; font-size: 2rem; font-weight: 600;}
header * {font-family: "Poppins", sans-serif;     font-size: 1.0rem;
    font-weight: 300;}
.desktop {display: none;}
p, li {font-size: 1.2rem;}
img {max-width: 100%;}
a, header button {color: var(--color-dark); text-underline-offset: 0.4rem; text-decoration-thickness: 1px; transition: text-underline-offset 0.2s ease-in-out;}
a:hover, header button:hover {text-underline-offset: 0.2rem;}
p a {text-underline-offset: 0.3rem;}
header a {color: var(--color-light);}
a.active {text-decoration: none; pointer-events: none;}
p {margin: var(--gap-small) 0;}
ul:not(footer ul) {margin-left: 1.2rem;}
@media screen and (min-width: 500px) {
    header * {font-size: 1.4rem;}
}
@media screen and (min-width: 900px) {
    .mobile {display: none;}
    .desktop {display: flex;}
}


/* navigatie */

header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 var(--gap-side);
    height: var(--height-header);
    color: var(--color-light);
    align-items: center;
}
header:not(.hero header) {
    position: fixed;
    top: 0; 
    background-color: var(--color-dark);
    z-index: 1000;
}
header>a.title, header>div.title {
    text-decoration: none;
    display: flex;
    align-items: center;
}
header>a.title svg, header>div.title svg {
    display: block;
    height: 1.8rem;
    padding-right: 0.6rem;
}
header>div:last-of-type {
    display: flex;
    gap: var(--gap-small);
}
header nav {
    padding-bottom: 0.2rem;
}
nav ul {
    list-style: none;
}
header nav ul {
    font-size: 1.4rem;
    display: flex;
    gap: var(--gap-small);
}
button.open-menu {
    border-radius: 0;
    text-decoration: solid underline;
    border: none;
    color: var(--color-light);
    background-color: transparent;
}

div#menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:var(--color-light);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
div#menu>button {
    position: fixed;
    top: var(--gap-side);
    right: var(--gap-side);

    width: 10%;
    aspect-ratio: 1/1;
}

div#menu ul {
    flex-direction: column;
}

div#menu li {
    text-align: center;
}

div#menu li>a {
    color: var(--color-dark);
    font-size: 1.4rem;
    line-height: 2.8rem;
}


/* structure */
body {
    overflow-x: hidden;
    width: 100vw;
    min-height: 100svh;
    background: var(--color-light);
    scrollbar-gutter: none;
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1;
}

.arrow {
    position: absolute;
    bottom: var(--gap-side);
    right: 50%;
    transform: translate(50%, 0);

    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out;
    cursor: url('../cursor-pointer2.cur'), auto;
    z-index: 999;  
}

footer .arrow {
    top: var(--gap-side);
    transform: translate(-50%, 0);
    rotate: 180deg;
}

@media screen and (min-width: 1300px) {
    
    .arrow {
        right: var(--gap-side);
        transform: translate(0,0);
    }
    footer .arrow {
        top: 50%;
        right: var(--gap-side);
        transform: translate(0, 50%);
    }    
}


.arrow:hover {
    opacity: 1;
}




div.hero {
    width: 100vw;
    height: calc(100svh);

    background-image: url('../media/hero_afbeelding.png');
    background-position: 75% center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 9999;

    display: flex;
    flex-direction: column;

     color: var(--color-light);
}

div#aanpak-weg {
    container-type: size;
    display: none;
    position: absolute;
    bottom: 20%;
    right: 5%;

    width: 40%;
    height: 30%;
}


div#aanpak-weg>a {
    position: absolute;
    font-size: 10cqh;
    color: var(--color-light);
}

div#aanpak-weg>a:nth-of-type(1) {
    bottom: 0;
    left: 0;
}
div#aanpak-weg>a:nth-of-type(2) {
    bottom: 25%;
    right: 10%;
}
div#aanpak-weg>a:nth-of-type(3) {
    bottom: 50%;
    left: 10%;
}
div#aanpak-weg>a:nth-of-type(4) {
    top: 0;
    right: 0;
}



div.hero>section {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#slogan {
    font-size: max(3rem, 4cqw);
    max-width: max(360px, 30%);
    padding: var(--gap-small) var(--gap-side);
    margin: 0;
}
#introduction {
    font-size: max(1.4rem, 1.8cqw);
    max-width: max(360px, 30%);
    padding: var(--gap-small) var(--gap-side);
    margin: 0;
}

@media screen and (max-height: 700px) {
    #slogan {
        font-size: clamp(max(1.2rem, 7cqh), 8cqw, 7cqh) ;
        max-width: max(360px, 80%);
        padding: var(--gap-small) var(--gap-side);
    }
    #introduction {
        font-size: clamp(max(1rem, 3.4cqh), 4cqw, 4cqh) ;
        max-width: max(360px, 80%);
        padding: var(--gap-small) var(--gap-side);
    }
}


main {
    padding-top: calc(var(--gap-medium) + var(--height-header));
    padding-left: var(--gap-side);
    padding-right: var(--gap-side);
    padding-bottom: calc(var(--gap-medium));
}

main>section {
    padding: var(--gap-medium) 0;
}
main>section:first-of-type {
    padding-top: 0;
}
/* main>section:not(:first-of-type) {
    padding-top: calc(2 * var(--gap-medium));
} */

footer {
    width: 100vw;
    padding: var(--gap-side);
    color: var(--color-light);
    background-color: var(--color-dark);
    padding-top: calc(2 * var(--gap-side) + 2rem);
    padding-bottom: var(--gap-medium);
    position: relative;
}

footer>.wrapper {
    margin: 0 auto;
    width: 100%; 
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: var(--gap-medium);
    text-align: center;
}

footer section {
    padding: 0 var(--gap-small);
}

footer ul {
    list-style: none;
    text-align: center;
}
footer h3 {
    margin-bottom: var(--gap-small);
}
footer * {
      font-size: 1rem;
      margin: 0;
      line-height: 1.4rem;
      color: var(--color-light);
}

@media screen and (min-width: 1300px) {
    #slogan {
        font-size: clamp(max(1.2rem, 7cqh), 8cqw, 7cqh) ;
        max-width: max(360px, 40%);
        padding: var(--gap-small) var(--gap-side);
    }
    #introduction {
        font-size: clamp(max(1rem, 4cqh), 4cqw, 4cqh) ;
        max-width: max(360px, 40%);
        padding: var(--gap-small) var(--gap-side);
    }
    div#aanpak-weg {
        display: block;
    }
    footer {
        padding-top: var(--gap-side);
        padding-bottom: var(--gap-side);
    }
    footer>.wrapper {
        max-width: 1200px;
        flex-direction: row;
        justify-content: space-around;
    }

    footer * {
        text-align: left;
    }
    
}

/* content home page */

.text h3 {
    font-family: "Poppins", sans-serif;
    font-size: 1.8rem;
    padding-bottom: var(--gap-small);
    text-align: center;
    text-transform: uppercase;
}
h2 {
    text-align: center;
    text-transform: capitalize;
    font-family: "Poppins", sans-serif;
    font-size: 2.2rem;
    padding-bottom: var(--gap-medium);
}
#over h2, #sectoren h2, #diensten h2 {
    text-align: left;
}

#sectoren * {
    text-align: left;
}

.cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-medium);
}

.cards * {
    color: var(--color-light);
}

.cards>article {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 17/10;

    color: var(--color-light);
    background-color: var(--color-dark);
}

.cards.diensten>article {
    aspect-ratio: 1/1;
}

@media screen and (min-width: 660px) {
    .cards.diensten {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .cards.diensten>article {
        width: calc((100% - var(--gap-medium)) / 2);
    }
}

@media screen and (min-width: 1200px) {
    .desktop {display: flex;}

    h2 {text-align: left;}
    .cards, .cards.diensten {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--gap-medium);
    }

    .cards>article {
        width: 100%;
        max-width: none;
        color: var(--color-light);
        background-color: var(--color-dark);
    }
}

.cards article {
    display: flex;
    flex-direction: column;
    container-type: size;
}

.cards .title, .cards .content {
    padding: 4cqw;
}

.cards.sectoren .title {
    display: flex;
    align-items: center;
    padding: 4cqw;
    padding-bottom: 0;
}

.cards.sectoren .content>div {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
}

.cards.sectoren .content img {
    height: min(6cqw);

}

.cards.sectoren h3 {
    font-size: 5cqw;
    height: 6cqw;
    align-content: center;
}
.cards.diensten h3 {
    font-size: min(7cqw, 2rem);
}

.cards.diensten img {
    height: 55%;
    object-fit: cover;
}

.cards.diensten .title {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cards p {
    margin: 0;
}

.cards.sectoren article div.content {
    padding: 4cqw;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.cards div.content>p:first-of-type {
    line-height: 6cqw;
        display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cards .content * {
    font-size: max(5cqw, 1rem);
}
.cards.diensten img {
    height: 60%;
    width: 100%;
}
.cards.diensten {
    text-align: center;
}




section#over h2 {
    text-align: center;
}
section#over>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-small);
    text-align: left;
}

section#over>div {
    margin: 0 auto;
    width: 100%;
    max-width: 550px;
}

section#over p {
    margin: 0;
}

section.text h3 {
    text-align: left;
}

section.text h4 {
    color: var(--color-dark);
    font-family: "Poppins", sans-serif;
    font-size: 1.4rem;
    margin-top: var(--gap-medium);
    text-decoration: underline dotted 2px var(--color-dark);
    text-underline-offset: 0.5rem;
    text-decoration: none;

}
section.text.intro {
    padding-top: 0;
}
section.text.intro .content {
    column-count: 1;
}
section.text.intro p {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-dark);
}

.intro p:first-of-type {
    margin-top: 0;
}

section.text article>div {
    break-inside: avoid;
}
section.text article  p {
    text-align: left;
}
.profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color-dark);
}
.profile img {
    width: 100%;
}
.profile .content {
    padding: var(--gap-small);
}
.profile p {
    font-size: 1.4rem;
    color: var(--color-light);
    padding-top: 0;
}

@media screen and (min-width: 650px) {
    .profile img {
        max-width: 200px;
    }
    .profile {
        flex-direction: row;
    }   
}

@media screen and (min-width: 1000px) {
        .profile img {
        max-width: 100%;
    }
        .profile {
        flex-direction: column;
    }   
    section.text>.content {
        column-count: 2;
        column-gap: var(--gap-large);
        break-inside: avoid;
    }  
    
    #sectoren .text {
        column-count: 3 ;
        column-gap: var(--gap-large);
    }

    #sectoren .text article, #aanpak article {
        break-inside:avoid;
    }
}

@media screen and (min-width: 1250px) {
    .profile img {
        max-width: 200px;
    }
    .profile {
        flex-direction: row;
    }   
}

#aanpak>.content {
    column-count: 1;
}

#aanpak>.content>div {
    display: flex;
    flex-direction: column;
    gap: var(--gap-large);

}

    #contact * {
        text-align: center;
    }

@media screen and (min-width: 1000px) {
    #aanpak>.content>div>* {
    width: 50%;
}

#aanpak>.content>div {
    display: flex;
    flex-direction: row;
    gap: var(--gap-large);

}
}