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; }

/* 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);
}

.makelaars { position: relative; background: white; }
.makelaars-hero { padding-inline: var( --Wijzijn11-outer-area); margin-top: 175px; height: 500px; position: relative; overflow: hidden; background: white; display: flex; align-items: center; }
.makelaars-hero img { position: relative; width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; object-position: 0 -120px; }
.hero-content { position: relative; z-index: 2; color: white; width: 38rem; font-size: 20px; }
.hero-content h1 { font-size: 52px; line-height: 1; margin-block: 0; }
.hero-cta { display: flex; gap: 2rem; }
.hero-cta a { background: var(--wijzijn11-orange); font-weight: bold; font-size: 18px; border: 2px solid var(--wijzijn11-orange); color: white; margin-top: 5px; text-decoration: none; border-radius: 20px; padding-inline: 30px; padding-block: 10px; transition: all .25s ease-in-out;  }
.hero-cta a:hover { background: var(--wijzijn11-blue); color: white; border: 2px solid var(--wijzijn11-blue); }
.hero-cta a:first-child { width: 10rem; text-align: center; }

.intro { padding-bottom: 0; padding-block: 30px; font-size: 20px; }
.intro h2 { display: block; color: var(--wijzijn11-blue); font-weight: bold; font-size: 44px; margin-bottom: 30px; }

.phases { display: flex; gap: 2rem; text-align: center; padding-inline: 7.5%; background: white; font-size: 20px; padding-bottom: 60px; }
.phase { background: var(--wijzijn11-blue); padding: 30px; border-radius: 30px; color: white; }
.phase h4 { font-size: 24px; margin-bottom: 0; }
.phase p { margin-top: 0; }

.channels { padding-inline: var( --Wijzijn11-outer-area); padding-block: 90px; background: var(--wijzijn11-orange); }
.channels p { font-size: 20px; margin-top: 5px; }
.channels h2 { font-size: 46px; color: black; }
.channels h4 { font-size: 26px; line-height: 1; margin-bottom: 0; display: block; }

.usps { background: var(--wijzijn11-blue); padding-inline: 7.5%; padding-block: 90px; display: flex; gap: 5rem; justify-content: space-between; color: white; }
.usps img { width: 25rem; object-fit: contain; }
.usps .usp { display: flex; gap: 2rem; }
.usps .usp div { margin-block: auto; }
.usps .usp div p { margin-block: 0; }
.usps .usp div p:first-child { font-size: 26px; font-weight: bold; margin-bottom: 0; }
.usps span { font-size: 98px; font-weight: bold; filter: drop-shadow(2px 3px 0px #000000); font-family: 'Poppins'; min-width: 6rem; }
.usp-content { width: 60%; }
.usp-content h2 { font-size: 44px; font-weight: bold; text-align: center; display: block; padding-inline: 60px; margin-bottom: 15px; }

.cases { padding-top: 191px; }
.cases .titel { top: 30px; }
.cases .sub-titel { top: 90px; }


.vragen { position: relative; background: var(--wijzijn11-orange); padding-bottom: 100px; padding-inline: 26%; }
.vragen h2 { display: block; text-align: center; font-size: 60px; color: var(--wijzijn11-blue); padding-top: 60px; }
.vragen p { font-size: 20px; }

.row { display: flex; gap: 90px; }
label { margin-bottom: 30px; }
input, textarea { background: transparent; width: 70%; border: none; outline: none; border-bottom: 1px solid white; height: 30px; font-size: 20px; color: white;  }
.send input { all: unset; float: right; background: transparent; color: var(--wijzijn11-blue); border: 2px solid var(--wijzijn11-blue); border-radius: 20px; font-weight: bold; padding-inline: 30px; padding-block: 15px; transition: all .25s ease-in-out; }
.send input:hover { cursor: pointer; background: var(--wijzijn11-blue); color: white; }
.send a { color: var(--wijzijn11-blue); }
.send .google { display: block; width: 60%; font-size: 14px; }
.send a:hover { color: white; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output, .wpcf7 form.sent .wpcf7-response-output { border-color: white; color: white; margin-top: 70px; }
form .row label span { color: var(--wijzijn11-blue); }


/************************ Responsive ************************/
@media screen and (max-width: 1200px) {  
    .contact-intro h2, .contact-intro div { flex: 1 1 100%; }
	.vragen { padding-inline: 18%; }
    .usps { flex-wrap: wrap-reverse; }
    .usps div { width: 100%; }
    .usps img { margin-inline: auto; }
    .makelaars-hero img { object-position: center;}
}

@media screen and (max-width: 900px) {  
    .phases { flex-wrap: wrap; }
    .phase { width: 100%; }
}

@media screen and (max-width: 675px) { 
    .row { flex-wrap: wrap; gap: 0; }
    input, textarea { width: 100%; }
    .vragen { padding-inline: var(--Wijzijn11-outer-area); }
    .contact-intro h2 { text-align: center; }
    .contact-intro { padding-top: 160px; }
}

@media screen and (max-width: 575px) {
    .hero-content h1, .channels h2, .usp-content h2 { font-size: 34px; }
    .intro h2 { font-size: 30px; }
    .channels h2 { font-size: 32px; }
    .hero-content { font-size: 18px; }
    .usps img { width: 100%; }
    .hero-cta { flex-wrap: wrap; }
    .hero-cta a { width: 10rem; text-align: center; }
    .hero-cta { gap: 1rem; }
    .intro, .phases, .channels p { font-size: 18px; }
    .phase h4, .usps .usp div p:first-child, .channels h4 { font-size: 20px; }
    .cases { padding-top: 236px; }
    .usps span { font-size: 65px; margin-inline: auto; min-width: unset; }
    .usp { flex-wrap: wrap; }
    .usps .usp { gap: unset; }
    .usp-content h2 { padding-inline: 0; }
    .usps .usp div { text-align: center; }
}