@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
@import url('https://use.typekit.net/zep3xtw.css');


@font-face {
  font-family: 'Nexa Rust Sans Demo Black';
  src: url('../../fonts/NexaRustSansDemo-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
    --border-radius: 0;
}




h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
   font-family: "nexa-rust-sans-black-2", sans-serif;
        font-weight: bold;
    text-transform: inherit;
}

body {
    font-family: "Space Grotesk", sans-serif;
    margin-right: calc(var(--medium) * -1);
    margin-left: calc(var(--medium) * -1);
}

.btn {
    font-family: "Space Grotesk", sans-serif;
    color: var(--color1);
    clip-path: polygon(
0% 8%, 1% 5.5%, 3% 3.5%, 6% 3%, 9% 2.5%, 12% 2.5%, 15% 3%, 18% 3.5%, 21% 4%, 24% 4.5%, 27% 4%, 30% 3.5%, 33% 3%, 36% 2.5%, 39% 2.5%, 42% 3%, 45% 3.5%, 48% 4%, 51% 4.5%, 54% 4%, 57% 3.5%, 60% 3%, 63% 2.5%, 66% 2.5%, 69% 3%, 72% 3.5%, 75% 4%, 78% 4.5%, 81% 4%, 84% 3.5%, 87% 3%, 90% 2.5%, 93% 2.5%, 96% 3%, 99% 5.5%, 100% 8%,
99.5% 25%, 99% 35%, 99.5% 45%, 100% 55%, 99.5% 65%, 99% 75%, 99.5% 85%, 100% 92%,
96% 96%, 93% 96.5%, 90% 96.5%, 87% 96%, 84% 95.5%, 81% 95%, 78% 94.5%, 75% 95%, 72% 95.5%, 69% 96%, 66% 96.5%, 63% 96.5%, 60% 96%, 57% 95.5%, 54% 95%, 51% 94.5%, 48% 95%, 45% 95.5%, 42% 96%, 39% 96.5%, 36% 96.5%, 33% 96%, 30% 95.5%, 27% 95%, 24% 94.5%, 21% 95%, 18% 95.5%, 15% 96%, 12% 96.5%, 9% 96.5%, 6% 96%, 3% 95.5%, 1% 92%,
0% 85%, 0.5% 75%, 1% 65%, 0.5% 55%, 0% 45%, 0.5% 35%, 1% 25%
)
}
.btn:not(.btn--simple):after {
    content: "";
    font-family: "Font Awesome 6 Pro Solid";
    font-weight: 300; /* 300=light, 400=regular, 900=solid */
    display: none;
    margin-left: .5rem;
    line-height: 1;
    background-color: unset;
    mask-size: unset;
    mask-repeat: unset;
    mask-image: unset;
}
.btn.btn--outline{
    box-shadow: 0 0 0 5px var(--color1) inset;
    background-color: var(--color1);
    color: white;
}
.btn.btn--outline:before{
    background-color: rgb(255 255 255 / 15%);
}
header{
background-color: var(--color1);
padding: 0;
}

header nav.navbar .navbar-brand {
   max-width: 150px;
    padding: 10px 15px ;
    margin-bottom: 0px;
}
header nav.navbar .navbar-nav > .nav-item > .nav-link {
    color: var(--color2);
}
header nav.navbar .navbar-nav:hover > .nav-item:not(:hover) > .nav-link:hover,
header nav.navbar .navbar-nav:hover > .nav-item.current-menu-item:not(:hover) > .nav-link {
    color: var(--color2);
}
.gform_wrapper form .gform_body .gform_fields .gfield .ginput_container input, .gform_wrapper form .gform_body .gform_fields .gfield .ginput_container select {
    border: 1px solid var(--color1);
}
.gform_wrapper form .gform_body .gform_fields .gfield:is(.gfield--type-radio, .gfield--type-checkbox) :is(.gfield_radio, .gfield_checkbox) .gchoice label:before{
    border: 1px solid var(--color1);
}
.gform_wrapper form .gform_body .gform_fields .gfield:is(.gfield--type-radio, .gfield--type-checkbox) :is(.gfield_radio, .gfield_checkbox) .gchoice input:checked + label:before{
    background-color: var(--color1);
}
article.article .article-content:not(.article-content--background) :is(h3, h4, h5, h6) {
    color: var(--color1);
}
/* article.article .article-image :is(img, video, iframe){
    clip-path: polygon(0% 6.5%, 1% 6.3%, 2% 6.2%, 3% 6.1%, 4% 6.0%, 5% 5.9%, 6% 5.8%, 7% 5.7%, 8% 5.6%, 9% 5.5%, 10% 5.4%, 11% 5.3%, 12% 5.2%, 13% 5.2%, 14% 5.3%, 15% 5.4%, 16% 5.5%, 17% 5.6%, 18% 5.7%, 19% 5.6%, 20% 5.5%, 21% 5.4%, 22% 5.3%, 23% 5.2%, 24% 5.2%, 25% 5.3%, 26% 5.4%, 27% 5.5%, 28% 5.6%, 29% 5.7%, 30% 5.6%, 31% 5.5%, 32% 5.4%, 33% 5.3%, 34% 5.2%, 35% 5.2%, 36% 5.3%, 37% 5.4%, 38% 5.5%, 39% 5.6%, 40% 5.7%, 41% 5.6%, 42% 5.5%, 43% 5.4%, 44% 5.3%, 45% 5.2%, 46% 5.2%, 47% 5.3%, 48% 5.4%, 49% 5.5%, 50% 5.6%, 51% 5.7%, 52% 5.6%, 53% 5.5%, 54% 5.4%, 55% 5.3%, 56% 5.2%, 57% 5.2%, 58% 5.3%, 59% 5.4%, 60% 5.5%, 61% 5.6%, 62% 5.7%, 63% 5.6%, 64% 5.5%, 65% 5.4%, 66% 5.3%, 67% 5.2%, 68% 5.2%, 69% 5.3%, 70% 5.4%, 71% 5.5%, 72% 5.6%, 73% 5.7%, 74% 5.6%, 75% 5.5%, 76% 5.4%, 77% 5.3%, 78% 5.2%, 79% 5.2%, 80% 5.3%, 81% 5.4%, 82% 5.5%, 83% 5.6%, 84% 5.7%, 85% 5.6%, 86% 5.5%, 87% 5.4%, 88% 5.3%, 89% 5.2%, 90% 5.2%, 91% 5.3%, 92% 5.4%, 93% 5.5%, 94% 5.6%, 95% 5.7%, 96% 5.6%, 97% 5.5%, 98% 5.4%, 99% 5.3%, 100% 5.2%, 100% 94.8%, 99% 94.7%, 98% 94.6%, 97% 94.5%, 96% 94.4%, 95% 94.3%, 94% 94.2%, 93% 94.3%, 92% 94.4%, 91% 94.5%, 90% 94.6%, 89% 94.7%, 88% 94.6%, 87% 94.5%, 86% 94.4%, 85% 94.3%, 84% 94.2%, 83% 94.3%, 82% 94.4%, 81% 94.5%, 80% 94.6%, 79% 94.7%, 78% 94.6%, 77% 94.5%, 76% 94.4%, 75% 94.3%, 74% 94.2%, 73% 94.3%, 72% 94.4%, 71% 94.5%, 70% 94.6%, 69% 94.7%, 68% 94.6%, 67% 94.5%, 66% 94.4%, 65% 94.3%, 64% 94.2%, 63% 94.3%, 62% 94.4%, 61% 94.5%, 60% 94.6%, 59% 94.7%, 58% 94.6%, 57% 94.5%, 56% 94.4%, 55% 94.3%, 54% 94.2%, 53% 94.3%, 52% 94.4%, 51% 94.5%, 50% 94.6%, 49% 94.7%, 48% 94.6%, 47% 94.5%, 46% 94.4%, 45% 94.3%, 44% 94.2%, 43% 94.3%, 42% 94.4%, 41% 94.5%, 40% 94.6%, 39% 94.7%, 38% 94.6%, 37% 94.5%, 36% 94.4%, 35% 94.3%, 34% 94.2%, 33% 94.3%, 32% 94.4%, 31% 94.5%, 30% 94.6%, 29% 94.7%, 28% 94.6%, 27% 94.5%, 26% 94.4%, 25% 94.3%, 24% 94.2%, 23% 94.3%, 22% 94.4%, 21% 94.5%, 20% 94.6%, 19% 94.7%, 18% 94.6%, 17% 94.5%, 16% 94.4%, 15% 94.3%, 14% 94.2%, 13% 94.3%, 12% 94.4%, 11% 94.5%, 10% 94.6%, 9% 94.7%, 8% 94.6%, 7% 94.5%, 6% 94.4%, 5% 94.3%, 4% 94.2%, 3% 94.3%, 2% 94.4%, 1% 94.5%, 0% 94.6%, 0% 5.2%);
} */
article.article.article--background[data-background="color1"] .article-content h4{
    color: var(--color2);
}
article.article.article--background[data-background="color1"]::before{
content: url(http://zuidoevers.nieuwbouwwvgontwikkeling.nl/wp-content/uploads/sites/8/2026/06/before-transparant.svg);
position: absolute;
width: 100%;
bottom: calc(100% - 1px);
line-height: 0;
mask: url(http://zuidoevers.nieuwbouwwvgontwikkeling.nl/wp-content/uploads/sites/8/2026/06/before.svg) no-repeat center / contain;
background: var(--color1);
}
article.article.article--background[data-background="color1"]::after{
content: url(http://zuidoevers.nieuwbouwwvgontwikkeling.nl/wp-content/uploads/sites/8/2026/06/after-transparant.svg);
position: absolute;
width: 100%;
top: calc(100% - 1px);
line-height: 0;
mask: url(http://zuidoevers.nieuwbouwwvgontwikkeling.nl/wp-content/uploads/sites/8/2026/06/after.svg) no-repeat center / contain;
background: var(--color1);
}
header::after{
content: url(http://zuidoevers.nieuwbouwwvgontwikkeling.nl/wp-content/uploads/sites/8/2026/06/after-transparant.svg);
position: absolute;
width: 100%;
top: calc(100% - 10px);
line-height: 0;
mask: url(http://zuidoevers.nieuwbouwwvgontwikkeling.nl/wp-content/uploads/sites/8/2026/06/after.svg) no-repeat center / contain;
background: var(--color1);
}
article.article.article--background[data-background="color1"] + article.article{
    margin: calc(var(--extralarge) * 2) 0;
}
article.article.article--background[data-background="color1"] + section.downloads{
    margin: var(--extralarge) 0;
}
article.article.article--background[data-background="color1"] + section.cards{
    margin: 0px 0px var(--extralarge) 0;
}
/* section.header .header-image:after {
    content: url(/wp-content/uploads/sites/2/2026/01/shapes.svg);
    display: block;
    width: 40%;
    height: auto;
    position: absolute;
    right: 0;
    bottom: 0;
    line-height: 0;
} */
 article.article .article-sidebar{
padding: var(--extralarge) var(--medium);
background: var(--color4);
color: var(--color2);
clip-path: polygon(0% 6.5%, 1% 6.3%, 2% 6.2%, 3% 6.1%, 4% 6.0%, 5% 5.9%, 6% 5.8%, 7% 5.7%, 8% 5.6%, 9% 5.5%, 10% 5.4%, 11% 5.3%, 12% 5.2%, 13% 5.2%, 14% 5.3%, 15% 5.4%, 16% 5.5%, 17% 5.6%, 18% 5.7%, 19% 5.6%, 20% 5.5%, 21% 5.4%, 22% 5.3%, 23% 5.2%, 24% 5.2%, 25% 5.3%, 26% 5.4%, 27% 5.5%, 28% 5.6%, 29% 5.7%, 30% 5.6%, 31% 5.5%, 32% 5.4%, 33% 5.3%, 34% 5.2%, 35% 5.2%, 36% 5.3%, 37% 5.4%, 38% 5.5%, 39% 5.6%, 40% 5.7%, 41% 5.6%, 42% 5.5%, 43% 5.4%, 44% 5.3%, 45% 5.2%, 46% 5.2%, 47% 5.3%, 48% 5.4%, 49% 5.5%, 50% 5.6%, 51% 5.7%, 52% 5.6%, 53% 5.5%, 54% 5.4%, 55% 5.3%, 56% 5.2%, 57% 5.2%, 58% 5.3%, 59% 5.4%, 60% 5.5%, 61% 5.6%, 62% 5.7%, 63% 5.6%, 64% 5.5%, 65% 5.4%, 66% 5.3%, 67% 5.2%, 68% 5.2%, 69% 5.3%, 70% 5.4%, 71% 5.5%, 72% 5.6%, 73% 5.7%, 74% 5.6%, 75% 5.5%, 76% 5.4%, 77% 5.3%, 78% 5.2%, 79% 5.2%, 80% 5.3%, 81% 5.4%, 82% 5.5%, 83% 5.6%, 84% 5.7%, 85% 5.6%, 86% 5.5%, 87% 5.4%, 88% 5.3%, 89% 5.2%, 90% 5.2%, 91% 5.3%, 92% 5.4%, 93% 5.5%, 94% 5.6%, 95% 5.7%, 96% 5.6%, 97% 5.5%, 98% 5.4%, 99% 5.3%, 100% 5.2%, 100% 94.8%, 99% 94.7%, 98% 94.6%, 97% 94.5%, 96% 94.4%, 95% 94.3%, 94% 94.2%, 93% 94.3%, 92% 94.4%, 91% 94.5%, 90% 94.6%, 89% 94.7%, 88% 94.6%, 87% 94.5%, 86% 94.4%, 85% 94.3%, 84% 94.2%, 83% 94.3%, 82% 94.4%, 81% 94.5%, 80% 94.6%, 79% 94.7%, 78% 94.6%, 77% 94.5%, 76% 94.4%, 75% 94.3%, 74% 94.2%, 73% 94.3%, 72% 94.4%, 71% 94.5%, 70% 94.6%, 69% 94.7%, 68% 94.6%, 67% 94.5%, 66% 94.4%, 65% 94.3%, 64% 94.2%, 63% 94.3%, 62% 94.4%, 61% 94.5%, 60% 94.6%, 59% 94.7%, 58% 94.6%, 57% 94.5%, 56% 94.4%, 55% 94.3%, 54% 94.2%, 53% 94.3%, 52% 94.4%, 51% 94.5%, 50% 94.6%, 49% 94.7%, 48% 94.6%, 47% 94.5%, 46% 94.4%, 45% 94.3%, 44% 94.2%, 43% 94.3%, 42% 94.4%, 41% 94.5%, 40% 94.6%, 39% 94.7%, 38% 94.6%, 37% 94.5%, 36% 94.4%, 35% 94.3%, 34% 94.2%, 33% 94.3%, 32% 94.4%, 31% 94.5%, 30% 94.6%, 29% 94.7%, 28% 94.6%, 27% 94.5%, 26% 94.4%, 25% 94.3%, 24% 94.2%, 23% 94.3%, 22% 94.4%, 21% 94.5%, 20% 94.6%, 19% 94.7%, 18% 94.6%, 17% 94.5%, 16% 94.4%, 15% 94.3%, 14% 94.2%, 13% 94.3%, 12% 94.4%, 11% 94.5%, 10% 94.6%, 9% 94.7%, 8% 94.6%, 7% 94.5%, 6% 94.4%, 5% 94.3%, 4% 94.2%, 3% 94.3%, 2% 94.4%, 1% 94.5%, 0% 94.6%, 0% 5.2%);
 }
 article.article.article--background[data-background="color2"] .article-content{
    color: var(--color1);
 }
article.article.article--background:not([data-background="color3"]):not(:has(.article-content--background)) {
    color: var(--color2); 
}
/* article.article.article--background[data-background="color1"] {
    background: linear-gradient(0deg, rgba(32, 60, 128, 0.9), rgba(32, 60, 128, 0.9)), var(--image1);
} */

article.article.article--background[data-background="color2"] {
     background-size: cover;
    background-position: center;
}

article.article.article--background[data-background="color3"] {
    background-size: cover;
    background-position: center;
}


article.article.article--background[data-background="color4"] {
     background-size: cover;
    background-position: center;
}


section.header + article.article.article--background[data-background="color1"] {
    background: var(--color1);
    color: var(--color2);
}

section.header + article.article.article--background[data-background="color2"] {
    background: var(--color2);
    color: var(--color1);
}
section.header + article.article.article--background[data-background="color2"] h3, section.header + article.article.article--background[data-background="color2"] h4, section.header + article.article.article--background[data-background="color2"] h5 {
color: var(--color1);
}
section.header + article.article.article--background[data-background="color2"] .btn {
    color: white;
    background-color: var(--color1);
}
section.header + article.article.article--background[data-background="color3"] {
    background: var(--color3);
}

section.header + article.article.article--background[data-background="color4"] {
    background: var(--color4);
}
section.cards{
    overflow: visible;
    margin-bottom: calc(var(--extralarge) * 2);
}
section.cards::before {
content: '';
position: absolute;
width: 200vw;
height: 50%;
background: var(--color2);
} 
section.cards::after{
content: url(http://zuidoevers.nieuwbouwwvgontwikkeling.nl/wp-content/uploads/sites/8/2026/06/before-transparant.svg);
position: absolute;
width: 100%;
bottom: calc(100% - 10px);
line-height: 0;
mask: url(http://zuidoevers.nieuwbouwwvgontwikkeling.nl/wp-content/uploads/sites/8/2026/06/before.svg) no-repeat center / contain;
background: var(--color2);
}
/* section.cards::after {
content: url('../../images/zuidoevers.svg');
position: absolute;
top: 25px;
left: 100px;
} */
.tax-woningen_type section.cards::before {
height: 30%;
top: 0;
}
.tax-woningen_type section.cards:has(.cards-header--background) {
padding-top: 0;
}
section.intro{
    color: var(--color2);
}
section.partners {
    background-color: var(--color4);
    background-size: cover;
    background-position: center;
    
}

section.cards .cards-header{
    padding-top: var(--extralarge);
}
.card .card-footer .btn{
    clip-path: none;
}
section.intro + section.cards {
    margin-top: 0;
}
.accordion .accordion-item {
     color: var(--color2);
     background-color: var(--color4);
}
/* section.header {
    height: 60vh;
} */
section.header .header-content .header-content__status {
    border-radius: 0
}
section.header .header-content h1 {
    color: var(--color2);
        text-shadow: 0px 0px 17px #000000;
}

.single-woningen article.article.article--background[data-background="color3"] {
    background-color: white;
}
article.article[data-background="color4"] .gform_wrapper form .gform_body .gform_fields .gfield.gfield--type-html :is(h4, h5, h6) {
    color: #ffffff
}
footer{
    color: black;
}
section.partners .partners-header .partners-header__logo {
min-height: 100px;
justify-self: center;
}
article.article:not(.article--background)[data-background]:has(+ section.partners) {
    margin-bottom: var(--extralarge);
}
@media (max-width: 992px) {
    :root {
        --border-radius: 0 30px 0 0;
    }
    body{
        margin: 0px;
    }
    header nav.navbar .navbar-brand {
        max-width: 180px;
        padding: 10px;
    }
    section.cards{
        overflow: hidden;
    }
    header nav.navbar .navbar-toggler {
        color: var(--color2);
    }
    header .navbar-collapse.open {
    background-color: var(--color1);
    padding-top: var(--large);
    }
    article.article.article--background:not(:has(.article-content--background)):after {
    height: unset;
    }
    .btn{
        border-radius: 0px;
    }
    .article.article .article-image{
    border-radius: 0px;
    }
    .card{
        border-radius: 0px;
    }
    .card .card-image img{
        border-radius: 0px;
    }
    .accordion .accordion-item{
        border-radius: 0px;
    }
}



 .article-image::after {
    content: "";
    position: absolute;
    inset: 0;

    background-color: white;

    -webkit-mask: url('http://zuidoevers.nieuwbouwwvgontwikkeling.nl/wp-content/uploads/sites/8/2026/06/shape.svg') left bottom no-repeat;
    mask: url('http://zuidoevers.nieuwbouwwvgontwikkeling.nl/wp-content/uploads/sites/8/2026/06/shape.svg') left bottom no-repeat;
    mask-size: 20%;
    pointer-events: none;
}