/*              globals           */
* {
    --color-red-500: #FB3A66;
    --color-red-600: #C91F46;
    --color-red-700: #7B0923;
    --color-green-500: #77B18C;
    --color-green-600: #47895F;
    --color-green-700: #004318;
    --color-yellow-500: #FFC659;
    --color-yellow-600: #F4AB1E;
    --color-yellow-700: #8C6110;
    --color-background: #FFFBE7;
    --color-background-2: #FFF6C0;
    --color-text: #462E00;
    --border-radius: 1rem;
    --horizontal-padding: calc(0.75rem + 2vw);
    --vertical-padding: 5rem;
    --max-width: 1440px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: var(--color-text);
}


body {
    width: 100%;
    background-color: var(--color-background);
    overflow-x: hidden;
}

span.green {
    color: var(--color-green-500);
}

span.red {
    color: var(--color-red-500);
}

span.yellow {
    color: var(--color-yellow-500);
}


/*              fonts           */
.h1,
.h2,
.h3 {
    font-family: "Changa One", sans-serif;
}

p,
.h4,
h5{
    font-family: "geist", sans-serif;
}

.numbers {
    font-family: "Averia Sans Libre", sans-serif;
}


.h1 {
    text-transform: uppercase;
    color: var(--color-text);
    font-weight: 900;
    font-size: 40px
}

.h2 {
font-size: 52px;
text-transform: uppercase;
}

.h3 {
    font-size: 1.5rem;
    text-transform: uppercase;
}

.h4 {
    font-size: 0.875rem;
    line-height: 1.3;
    text-transform: uppercase;
    font-weight: 600;
}

h5 {
    font-size: 24px;
    line-height: 150%;
    font-weight: 700;
}

.center {
    text-align: center;
}


p {
    line-height: 1.4;
}

.numbers {
    font-size: 6rem;
    font-family: "Averia Sans Libre", sans-serif;
}
.half-width {
    width: 64%;
}
.slogan .h1, .verbeteren .h1 {
    position: relative;
    font-size: 24px;
    font-weight: 400;
    padding: 20px 0 20px 0;
    font-size: clamp(2rem, 0.5rem + 5vw, 5rem);
    text-transform: none;
}


main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slogan {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    max-width: var(--max-width);
    padding: var(--vertical-padding) var(--horizontal-padding);
}
.script {
    font-family: 'Changa One', sans-serif;
    position: absolute;
    font-size: 1.5rem;
    top: 6.5rem;
    left: -7rem;
    transform: rotate(-12deg);
    color: var(--color-text);
}

.arrow {
    position: absolute;
    top: 9rem;
    left: -2.5rem;
    transform: rotate(-100deg);
}

.full-image {
    margin-top: -2rem;
    width: 100%;
}

.button-img {
    width: 30%;
}

.professionals-wrapper .script {
top: 44rem;
left: 16rem;
transform: rotate(5deg);
}

.professionals-wrapper .arrow {
top: 40rem;
left: 21rem;
transform: rotate(180deg) scale(-1);
}

button {
    padding: 1rem 2rem;
    background-color: var(--color-green-500);
    color: var(--color-green-700);
    border: .5rem solid var(--color-green-600);
    border-radius: calc(var(--border-radius) * 0.5);
    width: fit-content;
}

header {
    width: 100%;
    height: 600px;
    background-image: url(./images/jana-tafel.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 250px;
    background-color: var(--color-yellow-500);
    border-bottom-right-radius: 3rem;
    padding: 1rem 4rem 1rem 2rem;
}

header nav ul {

    display: flex;
}

.over,
.professionals {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: var(--color-background-2);
    align-items: center;
}

.over-wrapper,
.professionals-wrapper {
    position: relative;
    display: flex;
    gap: 1rem;
    flex-direction: column;
    padding: var(--vertical-padding) var(--horizontal-padding) 8rem var(--horizontal-padding); 
    width: 1170px;
}

.professionals-wrapper {
align-items: center;}

.over .h1,
.professionals .h1 {
    padding-bottom: 2rem;
}

.over-cards,
.professionals-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;

}

.over-card,
.professionals-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex: 1;
    color: var(--color-red-700);
    padding: 4rem 2.5rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 99%;
    /* aspect-ratio: 300 / 348; */
}

.over-card:nth-of-type(1),
.professionals-card:nth-of-type(1) {
    background-image: url(./images/yellow-squiggle-about.svg);
}

.over-card:nth-of-type(2),
.professionals-card:nth-of-type(2) {
    background-image: url(./images/red-squiggle-about.svg);
}

.over-card:nth-of-type(3),
.professionals-card:nth-of-type(3) {
    background-image: url(./images/green-squiggle-about.svg);
}

.over-card img {
    height: 30%;
}

.over-card div, .professionals-card div {
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

.kruisbestuiving {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10rem;
    padding: var(--vertical-padding) var(--horizontal-padding);
    max-width: var(--max-width);
}

.kruisbestuiving .text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kruisbestuiving img {
    width: 100%;

}


.veilig {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
}

.veilig-wrapper {
    padding: var(--vertical-padding) var(--horizontal-padding);
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-direction: column;
    width: var(--max-width);
}

.steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: fit-content;
}

.steps div {
    max-width: 60ch;
}

.steps .h4 {
    font-size: 24px;
    font-weight: 800;
    text-transform: none;
}

.professionals {
    background-color: var(--color-background-2);
}


.verbeteren {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: var(--color-background-2);
    padding: var(--vertical-padding) var(--horizontal-padding);
}

.verbeteren-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: var(--max-width)
}

.verbeteren>* {
    width: 100%;
}

.verbeteren-steps {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.verbeteren-step {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.verbeteren-step:nth-of-type(even) {
    padding-left: 10rem;
}

footer {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-yellow-500);
    padding: 4rem 2rem;
}

.credits {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    width: 100%;
    padding: 1rem 2rem;
    background-color: var(--color-text);
}

.credits p {
color: white;}

.gevolgen {
    display: flex;
    width: 100%;
    gap: 2rem;
    align-items: center;
    flex-direction: column;
    padding: var(--vertical-padding) var(--horizontal-padding);
    width: 1017px;
}

.gevolgen-cards {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

.gevolgen-card {
    display: flex;
    justify-content: center;
    padding: 2rem;
    align-items: center;
    height: 200px;
    width: 100%;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 99%;
    /* aspect-ratio: 309 / 200; */
}

.gevolgen-card .h4 {
    font-size: 1.2rem;
    text-transform: none;
    font-family: "Changa One";
}

.gevolgen-card:nth-of-type(3n+1) {
    background-image: url(./images/yellow-squiglge.svg);

    /* color: var(--color-yellow-700);
    border: .5rem solid var(--color-yellow-600);
    background-color: var(--color-yellow-500); */
}

.gevolgen-card:nth-of-type(3n+2) {
    background-image: url(./images/green-squiggle.svg);
    /* color: var(--color-green-700);
    border: .5rem solid var(--color-green-600);
    background-color: var(--color-green-500);*/
}

.gevolgen-card:nth-of-type(3n) {
    background-image: url(./images/red-squiggle.svg);
    /* color: var(--color-red-700);
    border: .5rem solid var(--color-red-600);
    background-color: var(--color-red-500); */
}




@media (min-width: 600px) {
    .gevolgen-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {

    .over-cards,
    .professionals-cards {
        flex-direction: row;
    }

    .kruisbestuiving {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 3rem;
        padding: 4rem 2rem;
    }

    .kruisbestuiving img {
        width: 60%;
        margin-right: -10%;
    }

    .verbeteren-wrapper {
        flex-direction: row;
    }

    .verbeteren-wrapper>* {
        width: 50%;
    }

    .gevolgen-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .steps {
        flex-direction: row;
    }

    .steps:nth-of-type(even) .number-order {order: 1;}

    .steps:nth-of-type(even) .text-order { order: 3;}

    .steps:nth-of-type(even) .image-order { order: 1;}

    .steps:nth-of-type(odd) .number-order { order: 1; }

    .steps:nth-of-type(odd) .text-order {order: 2; }

    .steps:nth-of-type(odd) .image-order {order: 3; }
}

.number-order {
    order: 1;
}

.text-order {
    order: 2;
}

.image-order {
    order: 3;
}

.divider {
    width:90%;
    max-width: var(--max-width);
}