/*
Theme Name: West Nederland Bouw - Divi Child
Theme URI: https://westnederlandbouw.nl/
Description: Child theme for West Nederland Bouw with Divi
Author: Marije
Author URI: https://groeihero.nl/
Template: Divi
Version: 2.0.0
Text Domain: westnederlandbouw
*/





  @import url("https://use.typekit.net/uei0wbn.css");


/* ---------- Design tokens ---------- */
:root {
  --color-blue: #003660;
  --color-lightblue: #c7bdde;
  --color-red: #e94e1b;
  --color-grey: #333333;
  --color-midgrey: #707070;
  --color-lightgrey: #f5f5f5;
  --color-white: #ffffff;
  --color-black: #0F0D0F;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;

  --font-base: "source-sans-pro", sans-serif;

  --font-size-sm: clamp(0.75rem, calc(1vw + 0.5rem), 0.875rem);
  --font-size-base: 16px;
  --font-size-lg: clamp(1rem, calc(1.5vw + 0.5rem), 1.125rem);
  --font-size-xl: clamp(1.125rem, calc(2vw + 0.5rem), 1.5rem);
  --font-size-2xl: clamp(1.5rem, calc(2.5vw + 0.5rem), 2rem);
  --font-size-3xl: clamp(2rem, calc(3vw + 0.5rem), 2.5rem);

  --border-width: 1px;
  --border-radius: 4px;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);
}


/* ==========================================================================
   Global Resets & Base Styles
   ========================================================================== */
* {
  box-sizing: border-box;
}

body {
font-family: source-sans-pro, sans-serif;
  font-size: var(--font-size-base);
  color: var(--color-grey);
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-red);
  font-weight: 700;
  margin-bottom: 22px;
}

h1 {
  font-size: var(--font-size-2xl);
}

h2 {
  font-size: var(--font-size-3xl);
  color: var(--color-red);
  margin-bottom: 35px;
    font-weight:700;
}

h3 {
  font-size: var(--font-size-xl);
  color: var(--color-blue);
} 

p {
  margin-bottom: 25px;
  line-height: 1.5;
      color: var(--color-grey);
}
ul, li{
     line-height: 1.6;
      color: var(--color-grey);
}
a {
  color: var(--color-red);
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover {
  color: var(--color-red);
}



/* ==========================================================================
   Override Divi text sizes
   ========================================================================== */


#logo{
max-height: 90%;
}
#top-menu a{
    color: var(--color-black) !important;
    font-weight:400;
}
#top-menu a:hover{
    color: var(--color-red) !important;
}
.et_pb_text p,
.et_pb_text li {
  font-size: var(--font-size-base) !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

/* ==========================================================================
   KLUELIJN MENU
   ========================================================================== */
.et_pb_section.kluslijn-menu,
.kluslijn-menu .et_pb_row{
    padding:0 !important;
}

.kluslijn-menu, .kluslijn-menu li, .kluslijn-menu li a{
color: var(--color-blue);
}
.kluslijn-menu img{
    max-width: 200px;
}

/* ==========================================================================
   Override Divi text sizes
   ========================================================================== */
.cookieadmin_re_consent {
right: 15px;
background: linear-gradient(
  to left,
  #293959 0%,
  var(--color-blue) 100%
);
left:auto;
}
/* ==========================================================================
   Layout Containers
   ========================================================================== */
.center {
  margin: 0 auto;
  position: relative;
  width: 100%;
  max-width: var(--max-width);
}

.smal {
  margin: 0 auto;
  position: relative;
  width: 80%;
  max-width: 687px;
}
ul.nrs, ul.adres, ul.mail {
  position: relative;
  margin: 0;
  padding-left: 40px; /* ruimte voor het icoon */
  list-style: none;
}

ul.nrs:before, ul.adres:before, ul.mail:before {
  content: url(/wp-content/uploads/2025/10/icon-phone.svg);
  position: absolute;
  left: 0;
  top: 5px; /* uitlijning aan de bovenkant */
  width: 24px;
  height: 24px;
}
ul.adres:before {
  content: url(/wp-content/uploads/2025/10/icon-map.svg);
}
ul.mail:before {
  content: url(/wp-content/uploads/2025/10/icon-mail.svg);
}
.foot .entry-content ul{
  list-style: none !important;
  font-size: var(--font-size-sm);
}
.foot ul.nrs a, .foot ul.adres li a, .foot ul.mail li a{
  font-size: var(--font-size-sm);
  color: var(--color-grey);
}
ul.nrs li a, ul.adres li a, ul.mail li a {
  font-size: var(--font-size-base);
  color: var(--color-grey);
  text-decoration: none;
}

ul.nrs li a:hover, ul.adres li a:hover, ul.mail li a:hover {
  color: var(--color-red);
}

/* ==========================================================================
   Hero/Banner Sections
   ========================================================================== */
.hero{
     background-image: linear-gradient(90deg, rgba(226, 226, 226, 1) 0%, rgba(226, 226, 226, 0) 100%),
  url(/wp-content/uploads/2025/10/banner-img-1.png);
}
.hero .over-ons{
     background-image: linear-gradient(90deg, rgba(226, 226, 226, 1) 0%, rgba(226, 226, 226, 0) 100%),
  url(/wp-content/uploads/2025/10/banner-img2-1.png);
}

.et_pb_section.hero,
.hero .et_pb_post_title,
.hero .et_pb_post_title.et_pb_featured_bg .et_pb_title_container{
padding: 0 !important;
}
/*hero vacatures*/
.hero .et_pb_post_title.et_pb_featured_bg{
   padding: 10vh 0  !important;
}
.hero h1.entry-title, 
.landingspage-hero h1, 
.landingspage-hero .et-l h1 {
font-size: var(--font-size-2xl);
padding: 0 !important;
    max-width: 50%;
      text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.73);
}
.hero h1{
font-size: var(--font-size-2xl);
  color: var(--color-black) !important;
}
.hero p{
    color: #616061;
font-size: 18px;
}
.hero span{
    font-size:1.1rem;
  color: var(--color-black) !important;
}













/* ==========================================================================
   Landingspages
   ========================================================================== */



.landingspage-hero span {
  padding: 0 0 5% 0;
  color: var(--color-white);
  font-weight: 700;
  font-size: 1.5rem;
  text-shadow: 1px 1px 2px rgba(20, 9, 5, 0.73);
}

.header-content {
  margin: 0 auto;
}

/* ==========================================================================
   BLOG / POST HERO – clean, centered 16:9 featured image
   ========================================================================== */

/* Title */
.post-hero .et_pb_fullwidth_section .et_pb_post_title{
      padding: 0 !important;

}
.post-hero h1,
.team-titel h1{
  font-size: 2.5em !important;
  color: #003660; /* or var(--color-red) if that's desired */
  text-transform: none;
  padding: 3em 0 1em 0 !important;
  text-shadow: none !important;
  text-align: center;
}
.team-titel h1{
  padding: 0 !important;
}
/* Container width limits (title + nieuwsbrief rows) */
.post-hero .et_pb_title_container,
.sectie-nieuwsbrief-inhoud .et_pb_row{
  max-width: var(--max-width-content, 1028px);
  width: 80%;
  margin: 0 auto !important;
}
.sectie-nieuwsbrief-inhoud  .et_pb_column_3_4 .et_pb_row_inner{
      padding-top: 0!important;

}

/* ---- Featured image: centered 16:9 with crop ---- */
.post-hero .et_pb_title_featured_image .et_pb_image_wrap,
.team-hero {
  position: relative;
  display: block;
  aspect-ratio: 16/3;
  overflow: hidden;
}

@supports not (aspect-ratio: 1) {
  .post-hero .et_pb_title_featured_image .et_pb_image_wrap,
  .team-hero {
    height: 0;
    padding-top: calc(100% * 3 / 16);
  }
}

/* ↓ The comma was missing here — that was the bug */
.post-hero .et_pb_title_featured_image .et_pb_image_wrap > img,
.team-hero .et_pb_image_wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.post-hero img.et_multi_view_hidden_image {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.post-hero .et_pb_fullwidth_section .et_pb_post_title {
  padding-bottom: 0;
}

/* ==========================================================================
   POST IMAGES
   ========================================================================== */
/* container van de afbeeldingen */
.sectie-nieuwsbrief-inhoud .et_pb_post_content p:has(img) {
    display: flex;
    flex-wrap: wrap;
}

/* losse afbeeldingen */
.sectie-nieuwsbrief-inhoud .et_pb_post_content p img {
    width: calc(33.333% - 0.5em);
    aspect-ratio: 3 / 2;
    object-fit: cover;

    margin-right: 0.5em;
    margin-bottom: 0.5em;

    border: 2px solid #fff;
    display: block;
}

/* laatste in de rij geen margin-right */
.sectie-nieuwsbrief-inhoud .et_pb_post_content p img:nth-child(3n) {
    margin-right: 0;
}


/* ==========================================================================
   intro
   ========================================================================== */
.sectie-nieuwsbrief .intro{
      font-size: 18px;
  font-weight: 700 !important;
    line-height: 1.8;

}
/* ==========================================================================
   NIEUWSBRIEF / SIDEBAR
   ========================================================================== */
.posthero, .sectie-nieuwsbrief{
  padding:0 !important;
  margin:0 !important;
}

.sectie-nieuwsbrief .et_pb_row{
  width: 70%;
}

.sectie-nieuwsbrief-inhoud{
  margin-right: 5.5% !important;
}

.sectie-nieuwsbrief-inhoud h2{
  font-size: 1.2em !important;
}

.sectie-nieuwsbrief-inhoud a{
  color: #003660 !important;
  text-decoration: underline;
}

.sectie-nieuwsbrief-inhoud #et-boc .et-l ul{
  list-style: disc;
  text-align: left;
}

.sectie-nieuwsbrief-inhoud h3,
.zijbalk-blogmenu h3{
  font-size: 20px !important;
  text-transform: uppercase !important;
  color: #003660 !important;
  font-weight: 700 !important;
}



/* Sidebar post list */
.zijbalk-blogmenu article,
.zijbalk-blogmenu article h2.entry-title{
  margin-bottom: 0 !important;
padding-bottom: 0 !important;}
.zijbalk-blogmenu  .single .post,
.zijbalk-blogmenu .single .post {
padding-bottom: 0 !important;
}
.zijbalk-blogmenu .et_multi_view_hidden{
  display: none;
}

/* Titles/links in sidebar */
.zijbalk-blogmenu .et_pb_post{ text-align: left; }
.zijbalk-blogmenu h2{ text-align: left; }

/* Fix typo + limit underline animation to entry-title links only */
.zijbalk-blogmenu h2.entry-title,
.zijbalk-blogmenu h2.entry-title a{
  font-size: 16px !important;
  color: var(--color-grey) !important;
  text-align: left !important;
  font-weight: 400;
  line-height: 1.4;
  position: relative;
  text-decoration: none;
  display: inline-block;
}

.zijbalk-blogmenu h2.entry-title a:hover{
  color: var(--color-red) !important;
}

/* Animated underline only on the entry-title link */
.zijbalk-blogmenu h2.entry-title a::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.zijbalk-blogmenu h2.entry-title a:hover::before{
  transform: scaleX(1);
}

/* ==========================================================================
  standaar featured images
   ========================================================================== */

.post-hero .et_pb_title_featured_container {
  background-image: url('https://westnederlandbouw.nl/wp-content/uploads/2025/10/wagenpark-980x558.jpg');
  background-size: cover;
  background-position: center;
  min-height: 220px;
}

/* ==========================================================================
   Intro Sections
   ========================================================================== */
.landingspage-intro h2{
  color: var(--color-red);
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
}

.landingspage-intro h3 {
  color: var(--color-blue);
  font-size: 2rem;
  font-weight: 700;
  padding-top: 20px;
}

.landingspage-intro #et-boc h3 {
  text-align: center;
}

.landingspage-intro p {

}

.et_pb_section.landingspage-intro .tekst {
  width: 90%;
  margin: 0 auto;
  text-align: center;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.wpcf7-submit,
.knop.et_pb_button,
.knop-blauw .et_pb_button,
.et_pb_button.knop-blauw,
.et_pb_button.knop-wit {
  border: 2px solid var(--color-white);
  color: var(--color-white);
  border-radius: 5px;
  font-size: 1.2rem;
  width: 100%;
  max-width: 300px;
  padding: 0.5em 1em;
  transition: all 0.3s ease;
  text-align: center;
}
.knop{
  background-color: var(--color-red);
}
.knop.et_pb_button {
  margin: 0 auto;
  background-color: var(--color-lightblue);
  padding: 3% 5%;
}
.knop-blauw{
  background-color: var(--color-blue);
}
.knop-wit {
  background-color: var(--color-white);
  color: var(--color-blue);
      border: solid var(--color-red) 2px;
  background-color: var(--color-white);
  color: var(--color-red);
}

.knop:hover,
.et_pb_button.knop-wit:hover,
.knop-wit:hover,
.et_pb_button.knop-blauw:hover,
.knop-blauw:hover {
  border: solid var(--color-blue) 2px;
  background-color: var(--color-blue);
  color: var(--color-white);
  padding: 0.5em 1em;
}

.knop-wit:after,
.et_pb_button.knop-blauw:hover:after,
.et_pb_button.knop-wit:hover:after {
  display: none;
}

/* Special Round Button */
.nieuwsbrief-knop{
    position:absolute;
    top:20em;
    right:1em;
  background: var(--color-red);
}
.hero .et_pb_button,
.nieuwsbrief-knop a{
  display: block;
  width: 9em;
  text-align: center;
  background: var(--color-red);
  padding: 2.4em .6em !important;
  border-radius: 50%;
  position: absolute;
  border: solid var(--color-white) 5px;
  font-size: 1em;
  z-index: 99;
  transition: transform 0.3s ease;
    font-size: 1.6em !important;
    right: -15%;
  bottom: -90%;
}
.hero .et_pb_button,
.nieuwsbrief-knop a p,
.nieuwsbrief-knop a h3{
     color: var(--color-white);
}
.nieuwsbrief-knop h3,
.nieuwsbrief-knop p{
    padding: 0 !important;
    margin:0;
}
.nieuwsbrief-knop a{
    padding: 2.5em 1.5em !important;
}

.hero .et_pb_more_button:hover:after {
    display:none;
}



.hero .et_pb_button:hover,
.nieuwsbrief-knop a:hover{
  transform: rotate(15deg);
      padding: 2.2em 1em;
  border: solid var(--color-white) 5px;
  background: var(--color-red);

}

.hero .et_pb_button a:after{
  content: 'voor 5% korting';
    font-size:0,9rem;
}
.hero .header-content {
margin-top: 50px;
}

.klusknop {
  display: block;
  margin: 10px auto;
  background: var(--color-red);
  color: var(--color-white);
  padding: 0.5em 0.8em;
  border-radius: 0.5em;
  font-size: 1em;
  text-align: center;
  width: 50%;
}

.klusknop span {
  font-size: 1.5em;
}

/* ==========================================================================
   Lists
   ========================================================================== */
.lijst ul,
.voordelen ul,
.wit-blok ul {
  list-style: none;
  padding-left: 0;
}

.lijst ul li,
.voordelen ul li,
.wit-blok ul li {
  position: relative;
  padding-left: 20px;
  font-size: 1em;
  line-height: 1.6;
}

.lijst ul li::before,
.voordelen ul li::before,
.wit-blok ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: .7em;
  height: .7em;
  background-color: var(--color-blue);
}

.voordelen h3,
.lijst h3 {
  color: var(--color-red);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: left;
}

.wit-blok h3 {
  color: var(--color-red);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: left;
}


/* Rode bullets voor ongeordende lijsten met row class */
.lijst ul {
  list-style: none;
  padding-left: 1.5em;
}

.lijst ul li::before {
  content: " ";
  color: #E8533C;
  font-weight: bold;
  display: inline-block;
  width: .7em;
  margin-left: -1em;
}

/* Rode nummers voor geordende lijsten met row class */
.lijst ol {
  list-style-position: outside;
  list-style: none;
  counter-reset: item;
  padding-left: 1.5em;
}

.lijst ol li::before {
  counter-increment: item;
  content: counter(item) ".";
  color: #E8533C;
  font-weight: bold;
  display: inline-block;
  width: 1.2em;
  margin-left: -1.2em;
}
.lijst ol li > strong {
  font-size: 1.2em;
  color: #E8533C;
}
.lijst ol li {
  margin-top:20px;
}
/* ==========================================================================
   Forms
   ========================================================================== */

.contact7 .et_pb_row{
  display: flex;
  flex-wrap: wrap; /* allows stacking on small screens */
  gap: 20px; /* space between columns */
}

.linkerkolom, .rechterkolom {
flex: 1;
min-width: 250px;
gap: 20px;
width: 45%;
float: left;
margin-right: 5%;
}


.contact7 input,
.contact7 textarea,
.offerte input,
.offerte textarea,
.contact7 .wpcf7-list-item-label input {
  background: var(--color-white);
 /* border: 1px solid var(--color-lightblue); */
  border: 1px solid var(--color-grey); 
  /* border-width: 0 3px 3px 0; */
  padding: 2%;
  color: #333;
  border-radius: 6px;
  max-width: 100%;
  height: 40px;
  width: 100%;
}
.contact7 .foot-form input,
.contact7 .foot-form textarea,
.contact7 .foot-form .wpcf7-list-item label input {
  border: 1px solid var(--color-blue);
  color: #333;
}

input.wpcf7-submit{
    border: 1px solid var(--color-red);
    color:#fff !important;
}
.upload input{
      border: 0 none; 

}

.contact7 textarea {
  min-height: 120px;
}


.contact-rood input,
.contact-rood textarea {
  background: var(--color-white);
  border: 1px solid var(--color-blue);
  padding: 1% 5% 3% 5%;
  color: #333;
  border-radius: 6px;
  max-width: 100%;
  height: 40px;
  width: 100%;
}

.contact-rood .wpcf7-submit {
  background: var(--color-blue);
}

input.wpcf7-submit {
  background: var(--color-red);
  color: var(--color-white);
  padding: 1.3% 5%;
  text-align: center;
}




.contact7 label {
  color: var(--color-grey);
  text-align: left;
}

/* Verberg de originele radio/checkbox */
.contact7 [type="radio"],
.contact7 [type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.contact7 .foot-form [type="radio"],
.contact7 .foot-form [type="checkbox"] {
  position: relative !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  pointer-events: auto !important;
}

/* Maak de container en label klikbaar */
.contact7 .wpcf7-list-item {
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 10px;
}

.contact7 .wpcf7-list-item label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 0;
  user-select: none;
}

/* Style de custom radio/checkbox */
.contact7 [type="radio"] + .wpcf7-list-item-label,
.contact7 [type="checkbox"] + .wpcf7-list-item-label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  line-height: 20px;
}

/* De cirkel/vierkant (before) 
.contact7 [type="radio"] + .wpcf7-list-item-label::before,
.contact7 [type="checkbox"] + .wpcf7-list-item-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-lightgrey);
  box-sizing: border-box;
  background: white;
}*/
/* De cirkel/vierkant (before) 
.contact7 .foot-form [type="radio"]+.wpcf7-list-item-label::before,
.contact7 .foot-form [type="checkbox"]+.wpcf7-list-item-label::before {

  width: 20px;
  height: 20px;
  border: 2px solid var(--color-blue);
  box-sizing: border-box;
  background: white;
}*/
/* Radio is rond 
.contact7 [type="radio"] + .wpcf7-list-item-label::before {
  border-radius: 50%;
}
*/
/* De vul-cirkel/vinkje (after) */
.contact7 [type="radio"] + .wpcf7-list-item-label::after,
.contact7 [type="checkbox"] + .wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 10px;
  height: 10px;
  background: var(--color-red);
  box-sizing: border-box;
  transition: all 0.2s;
  opacity: 0;
  transform: scale(0.01);
}

/* Radio after is ook rond */
.contact7 [type="radio"] + .wpcf7-list-item-label::after {
  border-radius: 50%;
}

/* Checked state */
.contact7 [type="radio"]:checked + .wpcf7-list-item-label::after,
.contact7 [type="checkbox"]:checked +

.contact7.nieuwsbrief input,
#sib-form input {
  border: 1px solid var(--color-midgrey);
  color: var(--color-grey);
  border-radius: 6px;
  width: 65%;
  padding: 1em 0.5em;
}

/* Checked state */
.contact7 .foot-form [type="radio"]:checked+.wpcf7-list-item-label::after,
.contact7 .foot-form [type="checkbox"]:checked+.contact7.nieuwsbrief input,
#sib-form input {
  border: 1px solid var(--color-blue);
  color: var(--color-red);

}
#sib-form input {
border: 1px solid #c7bdde;
border-width: .5px 3px 3px .5px;
    padding: 1em;
font-size: var(--font-size-base);
}

#sib-form input[type="text"] {
  width: 100%;
  text-align: left;
}

#sib-form label {
  color: var(--color-grey);
  margin-right: 5%;
  display: block;
  width: 100%;
  padding: 3% 0 1% 0;
}

.contact7.nieuwsbrief [type="submit"],
.contact7.nieuwsbrief .wpcf7-submit,
.sib-form-block__button {
  background: var(--color-red);
  max-width: auto;
  width: auto;
  padding: 1% 5% 3% 5%;
  color: var(--color-white);
}

.contact7.nieuwsbrief .wpcf7-checkbox label {
  width: 100%;
  display: block;
  float: left;
  line-height: 1.6;
}

.contact7.nieuwsbrief [type="submit"] {
  background: var(--color-red);
  text-align: center;
  height: auto;
  float: right;
}

.contact7.nieuwsbrief .wpcf7-list-item-label {
  border: 0px solid var(--color-white);
}

.contact7.nieuwsbrief [type="radio"] {
  top: 30px;
  left: 0;
  width: 20px;
  height: 20px;
  border: 2px solid grey;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: #46b450;
  text-align: center;
}

/* ==========================================================================
   kluslijn forms
   ========================================================================== */
.kluslijn ul.et_pb_tabs_controls{
    background-color: #003660;
}
.kluslijn .et_pb_tabs_controls li a {
color: #c7bdde;
    padding: .5em 1em;
vertical-align: middle;
font-size: 1.2em;
}
.kluslijn .et_pb_tabs{
    border: 0px none;
}
.kluslijn .et_pb_tabs_controls li {
border: 0 none;

}
.kluslijn .et_pb_tabs_controls li.et_pb_tab_active {
background-color: #003660;
        border-bottom: 0 none;
    border-top: 1px solid #c7bdde;
    border-left: 1px solid #c7bdde;
    border-right: 1px solid #c7bdde;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}

.kluslijn p, 
.kluslijn h3,
.kluslijn li{
    color:var(--color-white);
}
.kluslijn p{
margin: 1.5em 0;
}
.kluslijn label,
.kluslijn .et_pb_tab_active a {
    color:var(--color-white) !important;
    padding:1em;
}
.kluslijn #sib-container {
    background: transparent;
}
.kluslijn .lijst ul li::before{
    background-color:var(--color-white);
}
.kluslijn .et_pb_tabs_controls li::before{
    display:none;
}

.kluslijn input[type=text], 
.kluslijn textarea,
.kluslijn  input[type="email"], 
.kluslijn  input[type="tel"]{
    width: 100%;
    max-width: 100%;
    border-style: solid;
border-color: rgb(199, 189, 222);
border-image: none;
border-width: 0.5px 3px 3px 0.5px;
padding: 1em;
font-size: var(--font-size-base);
}

/* ==========================================================================
   Blogs en tips
   ========================================================================== */

.nieuwsoverzicht .pagination .alignleft a {
    font-size: 0;
}

.nieuwsoverzicht .pagination .alignleft a::after {
    content: "« Oudere berichten";
    font-size: 16px;
}


.nieuwsoverzicht .pagination .alignright a {
    font-size: 0;
}

.nieuwsoverzicht .pagination .alignright a::after {
    content: "Nieuwere berichten »";
    font-size: 16px;
}
.nieuwsoverzicht h2{
    height:70px;
    display:block;
    margin-bottom: 10px;
}
.nieuwsoverzicht .post-content-inner{
height: 150px;
}
/* Nieuwsoverzicht: fallback-afbeelding zonder binnenpadding */
.nieuwsoverzicht .et_pb_post.et_pb_no_thumb::before {
    content: "";
    display: block;
    width: calc(100% + 40px);
    aspect-ratio: 400 / 250;
    background-image: url("https://westnederlandbouw.nl/wp-content/uploads/2025/10/wagenpark-400x250.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: -20px -20px 20px -20px;
}



/* ==========================================================================
   Contact Form 7 Styling - Mobile First
   ========================================================================== */

/* Base Input & Textarea Styling */

  #sib-container input:-ms-input-placeholder,
  #sib-container input::placeholder{
    text-align: left;
    font-family: Helvetica, sans-serif;
 color:var(--color-lightblue);
  }


  #sib-container textarea::placeholder {
    text-align: left;
    font-family: Helvetica, sans-serif;
 color:var(--color-lightblue);
  }

  #sib-container a {
    text-decoration: underline;
 color:var(--color-lightblue);
  }





.sib-form-block__button{
  text-align: right;
  display: block;
  margin-left: auto;
font-size: 1.2em;
text-transform: uppercase;
}

/* ==========================================================================
   Form Messages
   ========================================================================== */

.wpcf7-response-output {
  border-radius: 6px;
  padding: 1em;
  margin-block-start: 1em;
  font-family: var(--font-base);
}

.wpcf7-mail-sent-ok {
  background-color: #d4edda; /* ⚠️ NOT IN HOUSESTYLE - success green */
  border-color: #c3e6cb; /* ⚠️ NOT IN HOUSESTYLE - success green border */
  color: #155724; /* ⚠️ NOT IN HOUSESTYLE - success green text */
}

.wpcf7-validation-errors {
  background-color: #f8d7da; /* ⚠️ NOT IN HOUSESTYLE - error red background */
  border-color: #f5c6cb; /* ⚠️ NOT IN HOUSESTYLE - error red border */
  color: #721c24; /* ⚠️ NOT IN HOUSESTYLE - error red text */
}

/* ==========================================================================
   Brevo Form Styling (for future use)
   ========================================================================== */

  #sib-container input:-ms-input-placeholder {
    text-align: left;
    color: #003660;
  }

  #sib-container input::placeholder {
    text-align: left;
    color: #c0ccda;
  }

  #sib-container textarea::placeholder {
    text-align: left;
    color: #003660;
  }

  #sib-container a {
    text-decoration: underline;
    color: #c7bdde;
  }




/* ==========================================================================
   Special Sections
   ========================================================================== */
.main h2{
    margin-bottom: 22px;
font-size: 24px;
    text-align:left !important;
}

/* White Box
.wit-blok {
  background: var(--color-white);
  padding: 5%;
  box-shadow: 0px 2px 24px 9px rgba(0, 0, 0, 0.24);
  -webkit-box-shadow: 0px 2px 24px 9px rgba(0, 0, 0, 0.24);
  -moz-box-shadow: 0px 2px 24px 9px rgba(0, 0, 0, 0.24);
}

 Contact Box & services Overview 
.diensten-overzicht {
  background: url('/wp-content/uploads/2025/03/services-bg.png');
}*/


/* ============================================================
   Divi Portfolio Module – 4 / 2 / 1 layout + ratio + red borders
   ============================================================ */
.services h2 a{
   color: var(--color-black); 
  font-size: var(--font-size-base);
}
.services h2 a:hover{
   color: var(--color-red); 
  font-size: var(--font-size-base);
}
.et_pb_portfolio_grid .et_pb_portfolio_grid_items {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important; /* 4 columns desktop */
  gap: 20px !important;
  clear: both !important;
}

/* Elk item netjes binnen grid */
.et_pb_portfolio_grid .et_pb_portfolio_item {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  box-sizing: border-box;
}

/* Behoud de originele verhouding, afgeronde hoeken en rode rand */
.et_pb_portfolio_grid .et_portfolio_image {
  position: relative;
  display: block;
  padding-top: 60%; /* jouw oude ratio */
  border: 2px solid var(--color-red); /* rode rand */
  border-radius: 10px; /* afgeronde hoeken */
  overflow: hidden;
}

.et_pb_portfolio_grid .et_portfolio_image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px; /* afgerond */
}

/* Overlay verbergen als in je eerdere code */
.et_pb_portfolio_grid .et_overlay::before {
  display: none !important;
}

/* Titels blijven netjes gecentreerd */
.et_pb_portfolio_grid .et_pb_module_header {
  text-align: center;
  margin-top: 15px;
  font-family: var(--color-black);
  font-size: var(--font-size-base);
}


/* Force Dutch Read More text */
.et_pb_posts .more-link,
.et_pb_blog_grid .more-link,
.et_pb_post .more-link {
    font-size: 0 !important;
    line-height: 0 !important;
}

.et_pb_posts .more-link:after,
.et_pb_blog_grid .more-link:after,
.et_pb_post .more-link:after {
    content: "Lees verder →" !important;
    font-size: 14px !important;
    line-height: normal !important;
    display: inline-block !important;
}






















/* Tablet: 2 columns */
@media (max-width: 980px) {
  .et_pb_portfolio_grid .et_pb_portfolio_grid_items {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile: 1 column */
@media (max-width: 600px) {
  .et_pb_portfolio_grid .et_pb_portfolio_grid_items {
    grid-template-columns: 1fr !important;
  }
}



/* ==========================================================================
   Werken bij en vacaturepagina's
   ========================================================================== */
.werken-bij  article{
  border-top: 1px solid var(--color-grey);
padding-top: var(--space-lg);
position: relative;
cursor: pointer;
}
.werken-bij  article:before{
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.werken-bij .et_pb_post {
  position: relative; /* zodat ::after zich hierbinnen kan positioneren */
  padding-right: 3rem; /* ruimte voor de pijl */
}

.werken-bij .post-content::after {
  content: url('/wp-content/uploads/2025/11/arrow-right-circle.svg');
  position: absolute;
  right: 0; /* rechts in de kolom */
  top: 50%; /* verticaal centreren */
  transform: translateY(-50%); /* echt gecentreerd */
  display: inline-block;
  width: 1.5rem;
  height: auto;
}

/* Tekststijl */
.werken-bij h5 {
  color: var(--color-grey);
  font-weight: 900;
  margin-bottom: 0;
}

.werken-bij p {
  color: var(--color-midgrey);
}

/* Extra: clearfix zichtbaar houden */
.werken-bij .clearfix:after {
  visibility: visible;
}


























































/* Diensten Overzicht 
.diensten-overzicht article,
.et-db #et-boc .et-l .et_pb_blog_grid .et_pb_post,
.et-db #et-boc .et-l .et_pb_blog_grid_wrapper .et_pb_blog_grid article {
  background: transparent;
  border: 0 none;
}

.diensten-overzicht h5,
.diensten-overzicht h5 a,
.diensten-overzicht h2,
.diensten-overzicht h2 a {
  text-align: center;
  color: var(--color-heading);
  font-weight: 700;
  font-size: 16px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: -10px;
}

.diensten-overzicht img {
  margin-bottom: 8px;
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  border: 1px solid var(--color-primary);
}

.diensten-overzicht .et_pb_main_blurb_image {
  display: block;
  height: 150px;
  overflow: hidden;
}

.et-db #et-boc .et-l .et_pb_image_container {
  margin-bottom: 0;
}
*/
/* FAQ Section */
.faq {
  width: 90%;
  margin: 0 auto;
}

.faq h5 {
  color: var(--color-secondary);
  font-size: 1.2em;
  font-weight: 700;
  padding: 20px;
  margin-bottom: 5px;
}

.faq .et_pb_toggle_item {
  width: 100%;
  border-top: 0.5px solid var(--color-lightblue);
}

.faq .et_pb_toggle_close h5 {
  background: #efefef;
  color: var(--color-secondary);
}

.faq .et_pb_toggle_open h5 {
  background: var(--color-white);
  border-top: 0.5px #424242 solid;
  color: var(--color-secondary);
  font-weight: 700;
}

.faq p {
  padding-left: 20px;
  padding-bottom: 20px;
}

.faq .et_pb_toggle_close .et_pb_toggle_title:before {
  font-family: var(--font-body);
  font-weight: 400;
  float: right;
  content: "\25B6";
  font-size: 0.8em;
  color: var(--color-lightblue);
}

.faq .et_pb_toggle_open .et_pb_toggle_title:before {
  font-family: var(--font-body);
  font-weight: 400;
  content: "\25BC";
  float: right;
  font-size: 0.8em;
  color: var(--color-lightblue);
}

.et_pb_accordion .et_pb_toggle_close .et_pb_toggle_title,
.et_pb_accordion .et_pb_toggle_title {
  display: block;
}

.et_pb_accordion .et_pb_toggle {
  margin-bottom: 0;
}

.et_pb_accordion .et_pb_toggle_content {
  display: none;
}

/* Hoe Werkt Section */
.hoe-werkt {
  width: 90%;
  margin: 30px auto;
}

/* Kluslijn Section */
.kluslijn {
  background: var(--color-secondary);
}

.kluslijn .et_pb_row {
  width: 90%;
  margin: 0 auto;
}

.kluslijn h1,
.kluslijn h3,
.offerte h3 {
  text-transform: uppercase;
}

.kluslijn h3 {
  font-size: 1.6em;
}

.kluslijn,
.kluslijn label {
  color: var(--color-white);
  text-align: left;
}

.introtekst h3 {
  color: var(--color-lightblue);
}

.kluslijn img {
  width: 100px;
  max-width: 20%;
}

.kluslijn .contact7 {
  color: var(--color-white);
}

/* Footer */
#main-footer{
    display:none
}




.et_pb_section.footer,
.footer .et-l .et_pb_section,
.foot-onder{
  margin: 0 !important;
  padding: 0 !important;
}
.foot-onder .et_pb_section,
.foot-onder .et_pb_text p,
.et_pb_section.foot-onder{
padding: 0 !important;
margin: 0 !important;
      font-size: var(--font-size-sm) !important;
}
.foot-onder .et_pb_row{
  padding-top: 0 !important;
  
}
.foot-onder .et_pb_section  p, .foot-onder .et_pb_section  a{
padding: 0 !important;
      font-size: var(--font-size-sm) !important;

}
.foot a, .foot p a, .foot p, .foot-onder p, .foot-onder p a, .kleine-tekst p{
    
  font-size: var(--font-size-sm);
}
/* servicess Menu */
.servicess-menu {
  padding: 0;
  margin-bottom: -54px;
}

.servicess-menu img,
.servicess-menu .et_pb_menu__logo img {
  height: auto;
  max-height: 80px;
  width: auto;
}

.servicess-menu .et_pb_menu__menu,
.servicess-menu .et_pb_menu__wrap {
  display: block;
  float: right;
}

/* servicesbox */
.et_pb_section.servicesbox {
  display: none;
}

/* servicess Section */
.servicess .post-content {
  display: none;
}

.services-content {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

.el-flex-row {
  display: flex;
  flex-wrap: wrap;
}

/* Voordelen Section with Background */

/* Scheidingsbeeld */
.scheidingsbeeld {
  max-height: 200px;
}

/* Planning Table */
.planning {
  margin: 30px auto;
  overflow-x: auto;               /* horizontaal scrollbaar op mobiel */
}

.planning table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
}

.planning tr:nth-of-type(odd) {
  background: var(--color-lightblue);
}

.planning th {
  background: var(--color-blue);
  color: white;
  font-weight: bold;
}

.planning .wit th {
  background: var(--color-white);
  color: #003660;
}

.planning td,
.planning th {
  padding: 6px;
  border: 0;
  text-align: left;
}
.planning img{
width:100%;
    max-width:100px;
    margin: 0 auto;
}
/* ZOMERACTIE 2026 */
.zomeractie .zomertitel {
  margin-bottom:0 !important;
}

.zomeractie .form {
  max-width: 867px;
  margin: 0 auto;
}

.zomeractie input[type=text],
.zomeractie textarea,
.zomeractie input[type="email"],
.zomeractie input[type="tel"] {
  width: 100%;
  max-width: 100%;
  border-style: solid;
  border-color: var(--color-red);
  border-image: none;
  border-width: 2px;
  padding: 1em;
  font-size: var(--font-size-base);
}
.zomeractie .wpcf7-submit {
  border: 2px solid var(--color-white);
  color: var(--color-white);
  border-radius: 5px;
  font-size: 1.2rem;
  width: 100%;
  max-width: 300px;
  padding: 1% 5%;
  background-color: var(--color-red);
}

.zomeractie.form .et_pb_row, zomeractie.voorwaarden .et_pb_row {
  display: flex;
  align-items: flex-end;
}
.zomeractie.form .et_pb_row,
zomeractie.voorwaarden .et_pb_row {
  display: flex;
  align-items: flex-end;
}
.zomeractie.form .et_pb_column,
.zomeractie.voorwaarden .et_pb_column {
  margin: auto auto 0 auto;
}
.zomeractie.form form{
  width:80%;
}


/* Blurb afbeelding direct tegen titel */
.zomeractie.service-plaatjes .et_pb_main_blurb_image {
  margin-bottom: 0 !important;
}

/* Blauwe titelbalk */
.zomeractie.service-plaatjes .et_pb_module_header {
  background-color: var(--color-blue);
  padding: var(--space-sm);
  margin: 0;
}

.zomeractie.service-plaatjes .et_pb_blurb_content {
  position: relative;
  margin: 0;
  max-width: none;
}

.zomeractie.service-plaatjes .et_pb_main_blurb_image {
  margin: 0 !important;
}

.zomeractie.service-plaatjes .et_pb_main_blurb_image img {
  display: block;
  width: 100%;
}

/* blauwe balk over onderkant afbeelding */
.zomeractie.service-plaatjes .et_pb_blurb_container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.zomeractie.service-plaatjes .et_pb_module_header {
  margin: 0;
  padding: var(--space-sm);
  background: var(--color-blue);
  color: var(--color-white) !important;
}
.zomeractie.service-plaatjes .top{
margin-bottom: 22%;
}

.zomeractie.service-plaatjes .et_pb_module_header span {
  color: var(--color-white) !important;
}

.zomeractie .voorwaarden {
  list-style-position: outside;}
.zomeractie .voorwaarden li{
  font-size: var(--font-size-sm);
      padding-left: 0.25rem;
}


.zomeractie .formulier-knop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
}

.zomeractie .formulier-knop .et_pb_button {
  background-color: var(--color-red);
  color: var(--color-white);
}

.zomeractie .formulier-knop .et_pb_button:hover {
  background-color: var(--color-blue);
  color: var(--color-white);
}

.zomeractie .formulier-knop .et_pb_button:hover::after {
  display: none;
}





















/* Responsive design - adjusted breakpoints*/
@media (max-width: 1400px) {
    .services .et_pb_salvattore_content .column {
        width: calc(25% - 0.75%) !important; /* 4 columns */
        flex: 0 0 calc(25% - 0.75%) !important;
    }
}
@media (max-width: 1024px) {
    .services .et_pb_salvattore_content .column {
        width: calc(33.333% - 0.67%) !important; /* 3 columns */
        flex: 0 0 calc(33.333% - 0.67%) !important;
    }
}

@media (max-width: 768px) {
  .planning td,
  .planning th {
    padding: 8px 4px;
    font-size: 14px;
  }
    }


@media (max-width: 480px) {
    .mijn-team-overzicht .et_pb_salvattore_content .column,
    .mijn-team-onder .et_pb_salvattore_content .column {
        width: 100% !important; /* 1 column */
        flex: 0 0 100% !important;
    }
}

/* Kleine verbetering voor mobiel */
@media (max-width: 600px) {

}


/* ==========================================================================
   Tablet (768px+)
   ========================================================================== */
@media only screen and (min-width: 768px) {
    
   .hero .et_pb_button,
.nieuwsbrief-knop a{
  right: 10%;
  bottom: -60%;

} 
    
  .landingspage-hero h1{
    font-size: 2.5rem;
    padding: 10% 0 3% 0;
      padding: 3% 0;
text-transform: uppercase;
color: #FFF;
font-weight: 700;
font-size: var(--font-size-2xl);
text-shadow: 1px 1px 2px rgba(20,9,5,0.73);
  }
  .landingspage-intro h2{
    font-size: 4rem !important;
      color:var(--color-red);
  }

  .landingspage-hero span {
font-size: var(--font-size-xl);
    padding: 0 0 10% 0;
       color:var(--color-blue);
 }


  .et_pb_row {
    width: 80%;
  }

  .sectie.et_pb_section {
    padding: 40px 0;
  }

  .et_pb_section.landingspage-intro .tekst {
    width: 80%;
  }

  .faq {
    width: 80%;
  }

    

  .hoe-werkt {
    width: 80%;
  }

  .landingspage-intro p {
  }

  .wpcf7-submit {
    width: 50%;
  }

  .services-content {
    max-width: 60%;
  }

  .services-content p {
    font-size: 1.1em;
  }

  .foot {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .kluslijn h1.entry-title {
    padding-top: 0;
  }
    .kluslijn .et_pb_row {
  width: 100%;
  max-width: 740px; /* sweet spot for most forms */
  margin: 0 auto;
  padding: 1.5rem;
}
  .kluslijn .contact7 input,
  .kluslijn .contact7 textarea {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
  }
  .kluslijn .contact7 input,
  .kluslijn .contact7 textarea {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
  }

  .kluslijn form p {
    text-align: left;
  }

  input.wpcf7-submit {
    float: right;
    width: 30%;
    padding:.5% 5% 2% 5%;
    text-align: center;
  }

  .btn {
    width: 9em;
    padding: 2.2em 0.5em;
    font-size: 1.6em;
  }
    
    
        .services .et_pb_salvattore_content .column {
        width: calc(50% - 0.5%) !important; /* 2 columns */
        flex: 0 0 calc(50% - 0.5%) !important;
	}
    /* ==========================================================================
  nieuwe code
   ========================================================================== */
.contact7 .et_pb_row {
    flex-direction: column; /* stacks on mobile */
  }
    
    
    
}

/* ==========================================================================
   Mobile (max 479px)
   ========================================================================== */
@media only screen and (max-width: 479px) {
  .bericht-header h1.entry-title {
    color: var(--color-secondary);
    text-align: center;
  }

  .sectie-nieuwsbrief .et_pb_module {
    width: 90%;
    margin: 0 auto;
  }

  .et-db #et-boc .et-l .sectie-nieuwsbrief .et_pb_row {
    padding-top: 0;
  }
}

/* ==========================================================================
   Desktop (981px+)
   ========================================================================== */
@media only screen and (min-width: 981px) {
  .smal {
    width: 60%;
    max-width: 687px;
  }

  h1.entry-title,
  .landingspage-hero h1,
  .landingspage-hero .et-l h1 {
    font-size: 3rem;
    padding: 20% 0 3% 0;
  }



  .landingspage-hero span {
    font-size: 2rem;
    padding: 0 0 20% 0;
  }

  .landingspage-intro h2,
  .et-l .landingspage-intro h2 {
    font-size: 4rem;
  }

  .sectie-nieuwsbrief-inhoud h2,
  .et-l .sectie-nieuwsbrief-inhoud h2 {
    font-size: 1.6em;
  }

  .sectie-nieuwsbrief-inhoud h3 {
    font-size: 20px;
    text-transform: uppercase;
    padding-top: 25px;
  }

  .landingspage-intro p {
  }


  .et_pb_section.footer,
  .et_pb_section.services-menu {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .header-content {
    padding-right: 30%;
  }

  .hero-services .et_pb_title_container {
    width: 80%;
    max-width: var(--max-width-content);
    padding-top: 0;
  }

  .et_pb_section.landingspage-intro .tekst {
    width: 60%;
  }

  .faq {
    width: 60%;
    max-width: 678px;
  }

  .hoe-werkt {
    width: 60%;
    max-width: 678px;
  }

  .voordelen .et_pb_row {
    background: linear-gradient(to right, transparent 45%, white 45%);
  }

  .foot .et_pb_row {
    max-width: var(--max-width-content);
  }
}

/* ==========================================================================
   Contact Form 7 Overrides
   ========================================================================== */
div.wpcf7 .ajax-loader {
  display: none;
}

div.wpcf7-response-output {
  margin: 2em 0.5em 1em;
  padding: 0.2em 1em;
  border: none;
  padding: 0;
  margin: 0;
  text-align: right;
  margin-top: 20px;
}