@import url('https://fonts.googleapis.com/css2?family=Marmelad&family=Montserrat:wght@500&family=Titan+One&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
	--font-InterRegular: 'InterRegular';
	--font-MarkProBold: 'MarkProBold';

}

@font-face {
	font-family: 'InterRegular';
	src: url('../fonts/Inter-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'MarkProBold';
	src: url('../fonts/MarkPro-Bold.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
}

body, html {
    height: 100%;
    font-family: Arial, sans-serif;
    background-color: #8AAFEC;

}

p {
    font-family: var(--font-InterRegular);
    font-size: 1.2rem;
    letter-spacing: .4px;
    line-height: 1.4;
}

h1 {
    color: black;
    text-transform: uppercase;
    font-size: xx-large;
    font-family: var(--font-MarkProBold);
    margin: 1em 0;
    text-align: center;
}

h2 {
    margin-bottom: 1em;
}

img {
    border-radius: 8%;
}

header {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px 0 #22324b, 0 4px 8px 0 #22324b;
    align-items: center;
    background-color: #22324b;
}

header nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 auto;
}

header nav ul li a {
    text-decoration: none;
    color: white;
}

header img {
    width: 150px;
    padding: 0.3em 0em;
}

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

main section img {
    width: 100%;
}

section:nth-of-type(2) h2 {
    margin-top: 1em;
}

section:nth-of-type(2) article {
    margin-bottom: 3em;
}

section:nth-of-type(2) article:nth-of-type(1) {
    display: flex;
    align-items: center;
}

section:nth-of-type(2) article img {
    width: 190px;
    height: 250px;
}

section:nth-of-type(2) article:nth-of-type(2) {
    max-width: 800px;
    line-height: 1.6;
}

section:nth-of-type(2) article:nth-of-type(2) img {
    float: left;
    margin: 0 1em 1em 0;
}



nav{
    width: inherit;
}

nav ul {
    display: flex;
    justify-content: space-around;
    max-width: 25em;
    box-sizing: content-box;
    align-items: center;
    color: #fff;
}

/* footer */

footer {
    background-color: #22324b;
    text-align: center;
    color: white;
}

footer img {
    width: 150px;
}

footer ul {
    list-style: none;
    padding: .8em;
}

footer ul li p{
    margin: 1.2em 0em;
    color: white;
}

footer ul h4 {
	font-family: var(--font-MarkProBold);
    font-size: 1.2rem;
    text-transform: uppercase;
}

footer ul li p {
    font-family: var(--font-InterRegular);
    font-size: 0.9rem;
}

footer span {
    font-size: .9rem;
}

footer ul:nth-of-type(3) li h4, h6{
    text-align: center;
    font-size: 1rem;
    margin-bottom: 1em ;
}


section {
    margin: 0 1em;
}

/* Waarom pagina */

.waarom section div img {
    width: 80vw;
    padding-right: 1em;
}

.waarom section ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    align-items: center;
}

.waarom section ul li {
    margin-bottom: 2em;
}

.waarom section ul li:nth-of-type(3){
    display: flex;
}

.waarom section ul:nth-of-type(1) li:nth-of-type(3) img:nth-of-type(1){
    margin-right: .6em;
}

.waarom section img {
    width: 49%;
}

.waarom section ul:nth-of-type(2) {
    display: flex;
    align-items: start;
    margin-bottom: 2em;
}


/* Proces Pagina */

/* Producten */



.producten section:nth-of-type(1) ul {
    list-style: none;
}

.producten section:nth-of-type(1) ul li {
    margin-bottom: 2em;
}

.producten section:nth-of-type(1) ul li img {
    max-width: 95%;
}

/* eerste */

.producten section:nth-of-type(1) ul li:nth-of-type(1) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1fr);
    column-gap: .5em;
}

.producten section:nth-of-type(1) ul li:nth-of-type(1) img {
    grid-area: 1 / 1 / 3 / 3;
}

.producten section:nth-of-type(1) ul li:nth-of-type(1) p {
    grid-area: 1 / 3 / 2 / 4; 
}


/* tweede */
.producten section:nth-of-type(1) ul li:nth-of-type(2) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1fr);
    column-gap: .5em;
}

.producten section:nth-of-type(1) ul li:nth-of-type(2) img {
    grid-area: 1 / 2 / 3 / 4;
}

.producten section:nth-of-type(1) ul li:nth-of-type(2) p {
    grid-area: 1 / 1 / 2 / 2;
}


/* derde */

.producten section:nth-of-type(1) ul li:nth-of-type(3) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1fr);
    column-gap: .5em;
}

.producten section:nth-of-type(1) ul li:nth-of-type(3) img {
    grid-area: 1 / 1 / 3 / 3;
}

.producten section:nth-of-type(1) ul li:nth-of-type(3) p {
    grid-area: 1 / 3 / 2 / 4; 
}


/* vierde */

.producten section:nth-of-type(1) ul li:nth-of-type(4) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1fr);
    column-gap: .5em;
}

.producten section:nth-of-type(1) ul li:nth-of-type(4) img {
    grid-area: 1 / 2 / 3 / 4;
}

.producten section:nth-of-type(1) ul li:nth-of-type(4) p {
    grid-area: 1 / 1 / 2 / 2;
}

.producten section:nth-of-type(1) h3 {
    text-align: center;
    text-transform: uppercase;
}


/* Prcoes carousel */

.producten section{
    display: block;
}

.producten section:nth-of-type(2) h2 {
    text-transform: uppercase;
}

.producten section:nth-of-type(2) ul {
	display: flex;
	overflow: auto;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scroll-marker-group: after;
    list-style: none;
}

.producten section:nth-of-type(2) ul::scroll-marker-group {
	display: flex;
	justify-content: center;
	gap: .5em;
    padding-bottom: 4em;
}

 
.producten section:nth-of-type(2) li::scroll-marker {
	content: '';
	height: 0.6em;
	width: 0.6em;
	background-color: #22324b;
	border-radius: 50%;
}

.producten section:nth-of-type(2) li::scroll-marker:target-current {
	background-color: red;
}


.producten section:nth-of-type(2) li {
	max-width: 20em;
    padding: 1rem;
	flex-basis: 100%;
	flex-shrink: 0;
	scroll-snap-align: center;
}

.producten section:nth-of-type(2) ul li img {
    max-width: 100%;
}

/* Locaties pagina */

.locaties article {
    padding: 1.5em 0;
}

.locaties article h2 {
    text-transform: uppercase;
}

.locaties article details {
    margin-bottom: 1em;
}

.locaties article details b {
    font-size: x-large;
}