nav { z-index: 99; }
nav ul li a { color: black; }
nav ul li a:hover { filter: none; }
nav .mobile { filter: none; }
#navToggle span { background: black; }
#navToggle.open span { background: white; }
nav .menu .fa-angle-down { color: black; }
nav .menu .fa-angle-down.current { color: var(--wijzijn11-orange); }

/* NAVIGATION UNDERSCORE ANIMATION */
nav #menu-mainmenu .menu-item { position: relative; }
nav #menu-mainmenu .menu-item > a:after { 
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: solid 3px var(--wijzijn11-orange);
    transform: scaleX(0);  
    transition: all 300ms ease-in-out;
}

nav #menu-mainmenu .menu-item > a:hover:after, nav.scrolled .menu-item > a.current {
    transform: scaleX(1);
    color: var(--wijzijn11-orange);
}

nav .mobile { filter: none; }
html { background: var(--wijzijn11-blue); }
.top { position: relative; background: var(--wijzijn11-blue); height: 260px; z-index: -1; }
.werken { position: relative; background: white; padding-inline: var( --Wijzijn11-outer-area); padding-block: 60px; padding-top: 250px; }
.werken h2 { color: var(--wijzijn11-blue); font-weight: bold; font-style: italic; font-size: 44px; margin-bottom: 30px; display: block; text-align: center; }
.werken p { font-size: 20px; }

.meten { position: relative; background: var(--wijzijn11-orange); padding-inline: var(--Wijzijn11-outer-area); display: flex; justify-content: space-between; padding-block: 60px; }
.meten div { width: 48%; margin-block: auto; }
.meten img { width: 45%; object-fit: cover; border-radius: 50px; }
.meten h2 { font-size: 38px; font-weight: bold; }
.meten p { font-size: 20px; }

.delen { position: relative; background: var(--wijzijn11-orange); padding-inline: var(--Wijzijn11-outer-area); display: flex; justify-content: center; padding-bottom: 60px; gap: 90px; }
.delen div { width: 60%; margin-block: auto; }
.delen img { width: 130px; object-fit: contain; }
.delen p { font-size: 20px; }

.cases { padding-top: 60px; }
.cases-titel { position: relative; background: white; color: var(--wijzijn11-blue); font-size: 48px; font-weight: bold; padding-top: 90px; display: block; text-align: center; padding-inline: var(--Wijzijn11-outer-area); }
.cases .titel, .cases .sub-titel { display: none; }

.logos { padding-bottom: 90px; }


/************************ SINGLE ************************/
.single-intro { position: relative; background: white; padding-top: 250px; padding-inline: var(--Wijzijn11-outer-area); padding-bottom: 90px; }
.single-intro h2 { display: block; color: var(--wijzijn11-blue); font-size: 44px; font-weight: bold; font-style: italic;  text-align: center; }
.single-intro p, .single-intro li { font-size: 20px; }

.blauw-mid { position: relative; background: var(--wijzijn11-blue); display: flex; justify-content: space-between; gap: 60px; padding-inline: var(--Wijzijn11-outer-area); padding-block: 90px; }
.blauw-mid div { width: 56%; color: white; }
.blauw-mid div h2 { font-size: 44px; font-weight: bold; }
.blauw-mid div p, .blauw-mid div li { font-size: 20px; }
.blauw-mid img { height: 500px; width: 380px; object-fit: cover; border-radius: 60px; }

.onderdelen-mid { position: relative; background: white; padding-block: 90px; padding-inline: var(--Wijzijn11-outer-area); }
.onderdelen-mid h2 { display: block; color: var(--wijzijn11-blue); font-size: 44px; font-weight: bold; margin-bottom: 60px; }
.onderdelen { display: flex; gap: 30px; flex-wrap: wrap; }
.onderdeel { width: 130px; background: var(--wijzijn11-orange); padding-block: 15px; padding-inline: 30px; border-radius: 40px; /*color: white;*/ font-size: 26px; text-align: center; }
.onderdeel p { margin: 0; }
.onderdeel img { height: 30px; margin-inline: auto; }

.oranje-mid { position: relative; background: var(--wijzijn11-orange); padding-inline: var(--Wijzijn11-outer-area); padding-block: 60px; }
.oranje-mid h2 { display: block; font-size: 44px; font-weight: bold; text-align: center; }
.oranje-mid p { font-size: 20px; }
.stappen { display: flex; gap: 30px; justify-content: space-between; }
.stap-1, .stap-2, .stap-3, .stap-4 { width: 20%; }  
.stap-1 > div:first-child, .stap-2 > div:first-child, .stap-3 > div:first-child, .stap-4 > div:first-child { height: 200px; display: flex; justify-content: center; margin-block: 30px; }
.stap-1 img { width: 50px; margin-block: auto; } 
.stap-2 img { width: 100px; margin-block: auto; } 
.stap-3 img { width: 150px; margin-block: auto; } 
.stap-4 img { width: 200px; margin-block: auto; } 

.case-titel { position: relative; padding-inline: var(--Wijzijn11-outer-area); background: white; display: block; color: var(--wijzijn11-blue); text-align: center; font-size: 44px; font-style: italic; font-weight: bold; }

.diensten-overig { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; background: var(--wijzijn11-blue); padding-bottom: 60px; padding-inline: var(--Wijzijn11-outer-area); }
.diensten-overig > h2 { width: 100%; display: block; color: white; font-size: 44px; font-weight: bold; text-align: center; padding-block: 30px; }
.diensten-overig .dienst-card { flex: 0 0 20%; height: unset; }
.diensten-overig .dienst-card h2 { font-size: 22px; }
.diensten-overig .dienst-card p { display: none; }


/************************ Responsive ************************/
@media screen and (max-width: 1485px) {  
	.diensten-overig { justify-content: center; gap: 30px; }
	.diensten-overig .dienst-card { flex: 0 0 32%; }
}

@media screen and (max-width: 1420px) {  
    nav ul li a, #navToggle.open span { color: white; }
}

@media screen and (max-width: 1100px) {  
    .blauw-mid { flex-wrap: wrap; }
    .blauw-mid div { width: 100%; }
    .blauw-mid img { margin-inline: auto; }
	.stappen { flex-wrap: wrap; gap: 0; }
	.stap-1, .stap-2, .stap-3, .stap-4 { width: 100%; }  
	.stap-1 > div:first-child, .stap-2 > div:first-child, .stap-3 > div:first-child, .stap-4 > div:first-child { height: unset; }
}

@media screen and (max-width: 900px) {  
    .single-intro, .werken { padding-top: 200px; }
    .meten { flex-wrap: wrap; }
    .meten div { width: 100%; }
    .meten img { margin-top: 30px; width: 100%; }
    .delen { flex-wrap: wrap-reverse; gap: 30px; }
    .delen div { width: 100%; }
    .delen img { width: 35%; margin-inline: auto; margin-bottom: 30px; }
}

@media screen and (max-width: 475px) {
    .vooruit div h2 { font-size: 26px; }
    .top { height: 130px; }
	.werken { padding-top: 130px; }
    .onderdeel { margin-inline: auto; }
    .blauw-mid img { width: 100%; }
    .single-intro { padding-top: 130px; }
	.diensten-overig .dienst-card { flex: 1 0 32%; height: 150px; }
	.single-intro h2 { font-size: 40px; }
	.diensten-overig > h2, .blauw-mid div h2 { font-size: 38px; }
}