.elementor-2323 .elementor-element.elementor-element-53ed091{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.39;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2323 .elementor-element.elementor-element-53ed091:not(.elementor-motion-effects-element-type-background), .elementor-2323 .elementor-element.elementor-element-53ed091 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-2323 .elementor-element.elementor-element-53ed091::before, .elementor-2323 .elementor-element.elementor-element-53ed091 > .elementor-background-video-container::before, .elementor-2323 .elementor-element.elementor-element-53ed091 > .e-con-inner > .elementor-background-video-container::before, .elementor-2323 .elementor-element.elementor-element-53ed091 > .elementor-background-slideshow::before, .elementor-2323 .elementor-element.elementor-element-53ed091 > .e-con-inner > .elementor-background-slideshow::before, .elementor-2323 .elementor-element.elementor-element-53ed091 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://jpverbouwservice.nl/wp-content/uploads/2025/11/aanbouw-rotterdam.jpg");--background-overlay:'';background-position:center center;background-repeat:repeat-x;background-size:contain;}.elementor-2323 .elementor-element.elementor-element-53ed091:not(.elementor-widget),.elementor-2323 .elementor-element.elementor-element-53ed091{backdrop-filter:brightness( 1.2 ) contrast( 1 ) saturate( 1 ) blur( 0px ) hue-rotate( 0deg );-webkit-backdrop-filter:brightness( 1.2 ) contrast( 1 ) saturate( 1 ) blur( 0px ) hue-rotate( 0deg );}.elementor-2323 .elementor-element.elementor-element-53ed091 > .elementor-shape-bottom svg, .elementor-2323 .elementor-element.elementor-element-53ed091 > .e-con-inner > .elementor-shape-bottom svg{width:calc(100% + 1.3px);height:101px;}.elementor-2323 .elementor-element.elementor-element-dcb61b1{width:100%;max-width:100%;}.elementor-2323 .elementor-element.elementor-element-dcb61b1 > .elementor-widget-container{padding:0px 0px 80px 0px;}.elementor-2323 .elementor-element.elementor-element-dcb61b1.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2323 .elementor-element.elementor-element-1860a47{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:0px;--padding-bottom:30px;--padding-left:0px;--padding-right:0px;}.elementor-2323 .elementor-element.elementor-element-1860a47.e-con{--align-self:center;}.elementor-2323 .elementor-element.elementor-element-b459255{--display:flex;--justify-content:center;}.elementor-2323 .elementor-element.elementor-element-b459255.e-con{--align-self:center;}.elementor-2323 .elementor-element.elementor-element-7a7e03a > .elementor-widget-container{margin:-199px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2323 .elementor-element.elementor-element-7a7e03a.elementor-element{--align-self:center;}.elementor-2323 .elementor-element.elementor-element-7a7e03a.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2323 .elementor-element.elementor-element-b1c9598{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2323 .elementor-element.elementor-element-41ca0e5 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2323 .elementor-element.elementor-element-41ca0e5.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2323 .elementor-element.elementor-element-4e16874 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2323 .elementor-element.elementor-element-4e16874.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2323 .elementor-element.elementor-element-91e4417 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2323 .elementor-element.elementor-element-91e4417.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2323 .elementor-element.elementor-element-d041137.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2323 .elementor-element.elementor-element-58e33ac.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2323 .elementor-element.elementor-element-86c5981.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2323 .elementor-element.elementor-element-016b86f.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2323 .elementor-element.elementor-element-d3689aa > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2323 .elementor-element.elementor-element-d3689aa.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2323 .elementor-element.elementor-element-c66d0a0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-70px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:40px;--padding-left:20px;--padding-right:20px;}.elementor-2323 .elementor-element.elementor-element-c66d0a0:not(.elementor-motion-effects-element-type-background), .elementor-2323 .elementor-element.elementor-element-c66d0a0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, var( --e-global-color-d614784 ) 0%, var( --e-global-color-d614784 ) 100%);}.elementor-2323 .elementor-element.elementor-element-c66d0a0:not(.elementor-widget),.elementor-2323 .elementor-element.elementor-element-c66d0a0{backdrop-filter:brightness( 1 ) contrast( 1 ) saturate( 1 ) blur( 9.7px ) hue-rotate( 0deg );-webkit-backdrop-filter:brightness( 1 ) contrast( 1 ) saturate( 1 ) blur( 9.7px ) hue-rotate( 0deg );}.elementor-2323 .elementor-element.elementor-element-6076b07{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.elementor-2323 .elementor-element.elementor-element-b292dcf.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2323 .elementor-element.elementor-element-4682190.xpro-widget-bg-overlay:before{transition:background 0.3s;}/* Start custom CSS for html, class: .elementor-element-dcb61b1 *//* ================================
   HERO CENTER – Transparante Hero
   ================================ */

.jp-hero-center {
  padding: clamp(4rem, 10vw, 7rem) 1.5rem;
  background: transparent;
  width: 100%;
  position: relative;
}

.jp-hero-center__inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.jp-hero-center__card {
  background: transparent;
  padding: 0;
  width: 100%;
}

.jp-hero-center__card-inner {
  background: transparent;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Pill bovenaan – GROEN */
.jp-hero-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1.2rem;
  border-radius: 999px;
  background: #6BBE45;
  border: 1px solid #6BBE45;
  margin-bottom: 1.2rem;
  box-shadow: 0 4px 12px rgba(107, 190, 69, 0.25);
}

.jp-hero-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #F7931E;
  margin-right: 0.5rem;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

.jp-hero-pill__text {
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.3px;
}

/* H1 – WIT met ORANJE accent */
.jp-hero-center__title {
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  line-height: 1.15;
  margin: 0 0 1.2rem;
  color: #ffffff;
  font-weight: 900;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
  max-width: 950px;
}

/* Oranje accent in H1 */
.accent-orange {
  color: #F7931E;
}

/* Lead tekst – WIT */
.jp-hero-center__lead {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.65;
  color: #ffffff;
  max-width: 850px;
  margin: 0 auto 0.8rem;
  font-weight: 500;
}

/* Body tekst – WIT */
.jp-hero-center__text {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.95);
  max-width: 800px;
  margin: 0 auto 2rem;
  font-weight: 400;
}

/* Horizontale chips met vinkjes */
.jp-hero-center__features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin: 0 0 2rem;
  max-width: 950px;
  margin-left: auto;
  margin-right: auto;
}

.jp-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  font-size: 0.9rem;
  color: #ffffff;
  white-space: nowrap;
  font-weight: 500;
  transition: all 0.3s ease;
}

.jp-hero-chip:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.jp-hero-chip__icon {
  font-size: 1rem;
  line-height: 1;
  color: #6BBE45;
  font-weight: 700;
}

/* CTA sectie */
.jp-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.jp-cta--center {
  justify-content: center;
}

/* Button basis styling */
.jp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.5rem;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  gap: 0.6rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* WhatsApp icon */
.jp-btn__icon {
  width: 1.3rem;
  height: 1.3rem;
  flex-shrink: 0;
}

/* Primary button (Gratis offerte) – ORANJE → GROEN hover */
.jp-btn--primary {
  border-color: #F7931E;
  background: #F7931E;
  color: #ffffff;
}

.jp-btn--primary:hover {
  background: #6BBE45;
  border-color: #6BBE45;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(107, 190, 69, 0.4);
}

.jp-btn--primary:active {
  transform: translateY(-1px);
}

/* WhatsApp button – Blijft GROEN op hover, alleen lift effect */
.jp-btn--whatsapp {
  border-color: #25D366;
  background: #25D366;
  color: #ffffff;
}

.jp-btn--whatsapp:hover {
  background: #25D366;
  border-color: #25D366;
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.5);
}

.jp-btn--whatsapp:active {
  transform: translateY(-1px);
}

/* Speciale animatie voor WhatsApp button */
.jp-btn--whatsapp:hover .jp-btn__icon {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(10deg);
  }
}

/* CTA ondertekst – GROEN & BOLD */
.jp-cta-note {
  font-size: 1rem;
  font-weight: 600;
  color: #6BBE45;
  margin: 0 0 1.8rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Trustblok – Reviews */
.jp-hero-center__trust {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.jp-hero-center__trust-main {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* Sterren */
.jp-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.jp-stars svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #F7931E;
  filter: drop-shadow(0 2px 4px rgba(247, 147, 30, 0.3));
}

/* Rating tekst */
.jp-hero-center__rating-text {
  font-size: 0.9rem;
  color: #ffffff;
  line-height: 1;
  font-weight: 500;
}

.jp-hero-center__rating-text strong {
  font-weight: 700;
  color: #F7931E;
}

/* Trust note */
.jp-hero-center__trust-note {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
}

/* Responsive aanpassingen */
@media (max-width: 768px) {
  .jp-hero-center {
    padding: 3.5rem 1.25rem;
  }

  .jp-hero-center__card-inner {
    padding: 2rem 1.2rem;
  }

  .jp-hero-center__title {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .jp-hero-center__lead {
    font-size: 1rem;
  }

  .jp-hero-center__text {
    font-size: 0.95rem;
  }

  .jp-hero-center__features {
    gap: 0.5rem;
  }

  .jp-hero-chip {
    white-space: normal;
    text-align: center;
    font-size: 0.85rem;
    padding: 0.5rem 0.9rem;
  }

  .jp-cta {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .jp-btn {
    width: 100%;
    max-width: 100%;
    padding: 0.9rem 2rem;
  }

  .jp-hero-pill__text {
    font-size: 0.75rem;
  }

  .jp-stars svg {
    width: 1rem;
    height: 1rem;
  }

  .jp-hero-center__rating-text {
    font-size: 0.85rem;
  }

  .jp-hero-center__trust-note {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .jp-hero-center {
    padding: 2.5rem 1rem;
  }

  .jp-hero-center__title {
    font-size: 1.75rem;
  }

  .jp-hero-pill {
    padding: 0.35rem 1rem;
  }

  .jp-hero-chip {
    font-size: 0.8rem;
    padding: 0.45rem 0.8rem;
  }

  .jp-btn {
    font-size: 0.95rem;
    padding: 0.85rem 1.5rem;
  }

  .jp-btn__icon {
    width: 1.1rem;
    height: 1.1rem;
  }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-7a7e03a *//* === JP Offerte Form (compacte versie) === */
.jp-offerte-form{
  background: #fff;
  color: #0F2944;
  padding: 16px 20px;              /* minder binnenruimte */
  border-radius: 25px;
  max-width: 860px;
  margin: 0 auto;
  text-align: left;
  min-height: 200px;               /* minimale hoogte geforceerd */
}

.jp-offerte-form h2{
  font-size: 2rem;               /* kleiner */
  color: #F7931E;
  margin-bottom: 4px;              /* minder marge */
  text-align: center;
}

.jp-offerte-form .jp-subtitle{
  font-size: 1rem;               /* kleiner */
  color: #555;
  margin-bottom: 10px;
  text-align: center;
}

.jp-offerte-form label{
  display: block;
  font-weight: 600;
  margin: 6px 0 3px;               /* veel compacter */
  color: #0F2944;
}

.jp-offerte-form input,
.jp-offerte-form select,
.jp-offerte-form textarea{
  width: 100%;
  padding: 8px 10px;               /* kleinere velden */
  border-radius: 10px;
  border: 1px solid #ddd;          /* dunner */
  font-size: 0.9rem;
  outline: none;
  transition: all 0.3s ease;
  color: #0F2944;
  min-height: 36px;                /* uniforme veldhoogte */
}

.jp-offerte-form textarea{
  min-height: 20px;                /* kleiner tekstvak */
  resize: vertical;
}

.jp-submit-wrapper{
  text-align: center;
  margin-top: 10px;                /* minder ruimte */
}

.jp-offerte-form input[type="submit"]{
  background: #F7931E;
  color: #fff;
  font-weight: 600;
  border: none;
  padding: 10px 20px;              /* kleiner button */
  border-radius: 25px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s;
  font-size: 0.95rem;
}

.jp-offerte-form input[type="submit"]:hover{
  background: #6BBE45;
  transform: translateY(-2px);
}

/* === Grid Layout === */
.jp-form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;                       /* minder ruimte tussen velden */
}

@media(max-width:768px){
  .jp-form-grid{
    grid-template-columns: 1fr;
  }
}

.jp-offerte-form h2{
  font-size: 1.8rem;
  color: #F7931E;
  margin-bottom: 12px;
  text-align: center;
}

.jp-usps{
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.jp-usps li{
  font-size: 1rem;
  color: #0F2944;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.jp-usps .check{
  color: #6BBE45;
  font-weight: 700;
  font-size: 1.2rem;
}

.jp-belowtext{
  margin-top: 10px;
  font-size: 0.9rem;
  color: #555;
  font-style: italic;
}

/* --- Hardening: zorg dat niets "transparant" wordt in de hero --- */

/* 1) Form wrapper altijd boven overlay en zonder blending */
.jp-offerte-form{
  position: relative;
  z-index: 5;              /* hoger dan overlay */
  isolation: isolate;      /* voorkomt doorbloeden van mix-blend-mode */
  background: #fff;        /* expliciet wit */
}

/* 2) Inputs/select/textarea: altijd witte achtergrond */
.jp-offerte-form input,
.jp-offerte-form select,
.jp-offerte-form textarea{
  background: #fff;                 /* voorkom transparant door theme */
  -webkit-appearance: none;         /* iOS consistent */
  background-clip: padding-box;
}

/* 3) Als er blending is toegepast op de hero, forceer normal binnen form */
.jp-offerte-form, 
.jp-offerte-form *{
  mix-blend-mode: normal !important;
}

/* 4) In geval de Elementor overlay over content heen ligt: 
      verlaag z-index van de overlay in deze hero sectie */
.jp-wow-hero .elementor-background-overlay{
  z-index: 0 !important;            /* overlay achter content */
  pointer-events: none;             /* overlay blokkeert niks */
}
/* en zorg dat de hero content zelf boven de overlay staat */
.jp-wow-hero .elementor-container,
.jp-wow-hero .elementor-column,
.jp-wow-hero .elementor-widget-wrap{
  position: relative;
  z-index: 1;
}
/* Zorg dat formulier altijd padding + radius krijgt */
.jp-offerte-form{
  padding: 16px 20px !important;   /* binnenruimte */
  border-radius: 25px !important;  /* afgeronde hoeken */
  background:#fff;                 /* wit achtergrond */
  color:#0F2944;
  box-sizing: border-box;
}
.jp-offerte-form{
  box-shadow: 0 6px 20px rgba(15,41,68,.08);
}
    /* -- Scope de fix NIET naar submit/buttons -- */
.jp-offerte-form input:not([type="submit"]):not([type="button"]):not([type="reset"]),
.jp-offerte-form select,
.jp-offerte-form textarea{
  color:#0F2944 !important;
  background:#fff !important;
  caret-color:#0F2944;
}

.jp-offerte-form input:not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
.jp-offerte-form select:focus,
.jp-offerte-form textarea:focus{
  color:#0F2944 !important;
  background:#fff !important;
}

/* Autofill alleen voor tekstvelden, niet voor submit */
.jp-offerte-form input:not([type="submit"]):not([type="button"]):not([type="reset"]):-webkit-autofill,
.jp-offerte-form select:-webkit-autofill,
.jp-offerte-form textarea:-webkit-autofill{
  -webkit-text-fill-color:#0F2944 !important;
  -webkit-box-shadow:0 0 0 1000px #fff inset !important;
  caret-color:#0F2944 !important;
  transition:background-color 9999s ease-out 0s;
}

/* Opties in select leesbaar */
.jp-offerte-form select option{
  color:#0F2944;
  background:#fff;
}

/* -- Safety: herstel expliciet de submit-kleuren (voor het geval er iets anders overschrijft) -- */
.jp-offerte-form input[type="submit"]{
  background:#F7931E !important;
  color:#fff !important;
}
.jp-offerte-form input[type="submit"]:hover{
  background:#6BBE45 !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-41ca0e5 *//* ================================
   INFO SECTION (DARK BLUE)
   Ultra-fast, responsive, clean
   ================================ */

.info-section {
  padding: clamp(3.5rem, 8vw, 6rem) 1.5rem;
  background: linear-gradient(180deg, #0F2944 0%, #081a2d 100%);
  position: relative;
  overflow: hidden;
}

/* Subtle background pattern for depth */
.info-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.info-section__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Badge */
.info-section__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.3rem;
  background: rgba(247, 147, 30, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(247, 147, 30, 0.3);
  border-radius: 999px;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.info-section__badge:hover {
  background: rgba(247, 147, 30, 0.25);
  border-color: rgba(247, 147, 30, 0.5);
}

.info-section__badge-icon {
  width: 1.2rem;
  height: 1.2rem;
  color: #F7931E;
}

.info-section__badge span {
  font-size: 0.85rem;
  font-weight: 700;
  color: #F7931E;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Title */
.info-section__title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 1.2rem;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Intro */
.info-section__intro {
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 2.5rem;
  max-width: 900px;
}

/* Info Grid - Optimized for speed */
.info-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

/* Info Cards */
.info-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  padding: 2rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.info-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(247, 147, 30, 0.4);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

/* Featured card (Richtprijs) */
.info-card--featured {
  background: rgba(247, 147, 30, 0.08);
  border-color: rgba(247, 147, 30, 0.3);
}

.info-card--featured:hover {
  background: rgba(247, 147, 30, 0.12);
  border-color: #F7931E;
}

.info-card__icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
}

.info-card__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.8rem;
}

.info-card__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

.info-card__text strong {
  color: #F7931E;
  font-weight: 700;
}

/* Prices */
.info-card__prices {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.price-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  font-size: 0.9rem;
}

.price-size {
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}

.price-dots {
  flex: 1;
  border-bottom: 2px dotted rgba(255, 255, 255, 0.2);
  margin: 0 0.5rem;
}

.price-amount {
  font-weight: 800;
  color: #F7931E;
  white-space: nowrap;
}

/* CTA */
.info-section__cta {
  text-align: center;
  margin-bottom: 4rem;
}

.info-section__cta-note {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: #6BBE45;
  font-weight: 600;
}

/* Divider */
.info-section__divider {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
  margin: 3rem 0;
}

/* Q&A Header */
.info-section__qa-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.info-section__qa-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Q&A Grid - Optimized */
.qa-grid {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 3rem;
}


/* Q&A Cards */
.qa-card {
  display: flex;
  gap: 1.5rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.qa-card:hover {
  transform: translateX(4px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(247, 147, 30, 0.4);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.qa-card__number {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F7931E 0%, #E67E0F 100%);
  color: #ffffff;
  font-size: 1.3rem;
  font-weight: 900;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(247, 147, 30, 0.4);
}

.qa-card__content {
  flex: 1;
}

.qa-card__question {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.8rem;
  line-height: 1.4;
}

.qa-card__answer {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
}

.qa-card__answer strong {
  color: #F7931E;
  font-weight: 700;
}

/* Final CTA Box */
.info-section__final-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  padding: 2.5rem;
  background: rgba(247, 147, 30, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  border: 2px solid rgba(247, 147, 30, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.info-section__final-cta-icon {
  font-size: 3.5rem;
  flex-shrink: 0;
}

.info-section__final-cta-content {
  flex: 1;
  min-width: 250px;
}

.info-section__final-cta-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.info-section__final-cta-text {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* ================================
   RESPONSIVE - Mobile First
   ================================ */

@media (max-width: 768px) {
  .info-section {
    padding: 3rem 1.25rem;
  }

  .info-section__grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .qa-card {
    flex-direction: column;
    padding: 1.5rem;
  }

  .qa-card__number {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.1rem;
  }

  .info-section__final-cta {
    flex-direction: column;
    text-align: center;
    padding: 2rem 1.5rem;
  }

  .info-section__final-cta-icon {
    font-size: 3rem;
  }
}

@media (max-width: 480px) {
  .info-section__badge {
    padding: 0.5rem 1rem;
  }

  .info-section__badge span {
    font-size: 0.75rem;
  }

  .info-card {
    padding: 1.5rem;
  }

  .price-row {
    font-size: 0.85rem;
    padding: 0.6rem 0.8rem;
  }
}

/* Performance optimizations */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4e16874 *//* ================================
   GLOBAL COMPONENTS
   ================================ */

.section-label {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 999px;
  background: linear-gradient(135deg, #F7931E 0%, #E67E0F 100%);
  color: white;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(247, 147, 30, 0.3);
}

.section-label--warning {
  background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.section-heading {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 900;
  color: #0F2944;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

/* ================================
   WAT IS EEN AANBOUW SECTION
   ================================ */

.what-section {
  padding: clamp(4rem, 8vw, 6rem) 1.5rem;
  background: transparent;
}

.what-section__container {
  max-width: 1200px;
  margin: 0 auto;
}

.what-section__header {
  margin-bottom: 2.5rem;
}

.what-section__text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #475569;
  margin-bottom: 2rem;
}

/* Feature Grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1.2rem;
  margin: 2rem 0 3rem;
}

.feature-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: #ffffff;
  border-radius: 16px;
  border: 2px solid #E2E8F0;
  box-shadow: 0 2px 8px rgba(15, 41, 68, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-box:hover {
  transform: translateY(-4px);
  border-color: #6BBE45;
  box-shadow: 0 8px 24px rgba(15, 41, 68, 0.12);
}

.feature-box__icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.feature-box__text {
  font-size: 1rem;
  font-weight: 600;
  color: #0F2944;
  line-height: 1.4;
}

/* ================================
   COMPARISON CONTAINER - DARK BLUE
   ================================ */

.comparison-container {
  padding: 3rem;
  background: linear-gradient(135deg, #0F2944 0%, #081a2d 100%);
  border-radius: 24px;
  border: 2px solid rgba(247, 147, 30, 0.3);
  box-shadow: 0 8px 32px rgba(15, 41, 68, 0.2);
  position: relative;
  overflow: hidden;
}

/* Subtle pattern overlay */
.comparison-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.comparison-container__title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 2rem;
  text-align: center;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.comparison-container__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.comparison-box {
  padding: 2rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.comparison-box:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.comparison-box--highlight {
  background: rgba(247, 147, 30, 0.12);
  border-color: #F7931E;
  border-width: 3px;
}

.comparison-box--highlight:hover {
  background: rgba(247, 147, 30, 0.18);
  border-color: #F7931E;
  box-shadow: 0 8px 24px rgba(247, 147, 30, 0.3);
}

.comparison-box__label {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
}

.comparison-box--highlight .comparison-box__label {
  background: linear-gradient(135deg, #F7931E 0%, #E67E0F 100%);
  border-color: #F7931E;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(247, 147, 30, 0.3);
}

.comparison-box__text {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
}

.comparison-box--highlight .comparison-box__text {
  color: #ffffff;
}

.comparison-container__note {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
  font-style: italic;
  line-height: 1.7;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ================================
   WAAROM AANBOUW SECTION - 4 IN A ROW
   ================================ */

.why-section {
  padding: clamp(4rem, 8vw, 6rem) 1.5rem;
  background: transparent;
}

.why-section__container {
  max-width: 1300px;
  margin: 0 auto;
}

.why-section__header {
  margin-bottom: 2.5rem;
  text-align: center;
}

/* Benefits Grid - 4 kaarten op een rij! */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.benefit-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.2rem;
  padding: 2rem 1.5rem;
  background: #ffffff;
  border-radius: 20px;
  border: 2px solid #6BBE45;
  box-shadow: 0 4px 16px rgba(107, 190, 69, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.benefit-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(107, 190, 69, 0.2);
  border-color: #6BBE45;
}

.benefit-card__icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6BBE45 0%, #8FD66E 100%);
  color: white;
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(107, 190, 69, 0.3);
}

.benefit-card__text {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.7;
}

/* Conclusion */
.why-section__conclusion {
  text-align: center;
  padding: 2rem 2.5rem;
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border-radius: 20px;
  border: 2px solid #6BBE45;
  font-size: 1.2rem;
  color: #0F2944;
}

.why-section__conclusion strong {
  color: #0F2944;
  font-weight: 800;
}

/* ================================
   RESPONSIVE - Benefits Grid
   ================================ */

@media (max-width: 1200px) {
  /* Large tablets: 2x2 grid */
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .benefit-card {
    padding: 2rem;
  }
}

@media (max-width: 768px) {
  /* Mobile: 1 column */
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .benefit-card {
    flex-direction: row;
    text-align: left;
    padding: 1.8rem;
  }

  .benefit-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.2rem;
  }

  .why-section__conclusion {
    padding: 1.8rem 1.5rem;
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .benefit-card {
    padding: 1.5rem;
  }

  .benefit-card__text {
    font-size: 0.9rem;
  }
}

/* ================================
   HET PROBLEEM SECTION - 4 IN A ROW
   ================================ */

.challenge-section {
  padding: clamp(4rem, 8vw, 6rem) 1.5rem;
  background: transparent;
}

.challenge-section__container {
  max-width: 1300px;
  margin: 0 auto;
}

.challenge-section__header {
  text-align: center;
  margin-bottom: 3rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.challenge-section__subtitle {
  font-size: 1.15rem;
  color: #475569;
  margin-top: 1rem;
  font-weight: 500;
}

/* Challenge Grid - 4 kaarten op een rij! */
.challenge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.challenge-card {
  background: #ffffff;
  padding: 2rem;
  border-radius: 20px;
  border: 2px solid transparent;
  box-shadow: 0 4px 20px rgba(15, 41, 68, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.challenge-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FF6B6B 0%, #FF8E53 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.challenge-card:hover::before {
  transform: scaleX(1);
}

.challenge-card:hover {
  transform: translateY(-8px);
  border-color: #FF8E53;
  box-shadow: 0 12px 40px rgba(15, 41, 68, 0.15);
}

.challenge-card__icon {
  font-size: 3rem;
  margin-bottom: 1.2rem;
  display: block;
  opacity: 0.9;
}

.challenge-card__title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0F2944;
  margin-bottom: 0.8rem;
  line-height: 1.3;
}

.challenge-card__text {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.6;
}

/* Conclusion Box */
.challenge-section__conclusion {
  text-align: center;
  padding: 2.5rem 3rem;
  background: #0F2944;              /* donkerblauw */
  /* of als je een zachte gradient wilt:
     background: linear-gradient(135deg, #0F2944 0%, #16375F 100%);
  */
  border-radius: 20px;
  border: 2px solid #0F2944;        /* zelfde blauw als rand */
  font-size: 1.25rem;
  color: #ffffff;                   /* witte tekst */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.challenge-section__conclusion strong {
  font-weight: 800;
  color: #FDE68A;                   /* optioneel: lichte geel highlight voor nadruk */
}

/* ================================
   RESPONSIVE
   ================================ */

@media (max-width: 1200px) {
  /* Large tablets: 2x2 grid */
  .challenge-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .challenge-card {
    padding: 2rem;
  }

  .challenge-card__icon {
    font-size: 3.2rem;
  }

  .challenge-card__title {
    font-size: 1.25rem;
  }

  .challenge-card__text {
    font-size: 0.98rem;
  }
}

@media (max-width: 768px) {
  /* Mobile: 1 column */
  .what-section,
  .why-section,
  .challenge-section {
    padding: 3rem 1.25rem;
  }

  .feature-grid,
  .benefits-grid,
  .challenge-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .comparison-container {
    padding: 2rem 1.5rem;
  }

  .comparison-container__title {
    font-size: 1.4rem;
  }

  .comparison-container__grid {
    grid-template-columns: 1fr;
  }

  .comparison-box {
    padding: 1.5rem;
  }

  .comparison-container__note {
    padding: 1.2rem;
    font-size: 0.95rem;
  }

  .section-heading {
    font-size: 1.8rem;
  }

  .challenge-card {
    padding: 1.8rem;
  }

  .challenge-card__icon {
    font-size: 3rem;
  }

  .challenge-section__conclusion {
    padding: 2rem 1.5rem;
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .comparison-container {
    padding: 1.5rem 1.2rem;
  }

  .comparison-container__title {
    font-size: 1.25rem;
  }

  .comparison-box__label {
    font-size: 0.75rem;
    padding: 0.4rem 1rem;
  }

  .section-label {
    padding: 0.4rem 1rem;
    font-size: 0.75rem;
  }

  .feature-box,
  .benefit-card,
  .challenge-card {
    padding: 1.5rem;
  }

  .feature-box__icon {
    font-size: 2rem;
  }

  .challenge-card__icon {
    font-size: 2.8rem;
  }

  .challenge-card__title {
    font-size: 1.1rem;
  }
}

/* Performance optimizations */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-91e4417 *//* ================================
   ANDERE DIENSTEN SECTIE
   ================================ */

.other-services-section {
  padding: clamp(4rem, 8vw, 6rem) 1.5rem;
  background: #F8FAFC;
}

.other-services-section__container {
  max-width: 1300px;
  margin: 0 auto;
}

.other-services-section__header {
  text-align: center;
  margin-bottom: 3.5rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.other-services-section__intro {
  font-size: 1.15rem;
  color: #475569;
  margin-top: 1.2rem;
  line-height: 1.7;
  font-weight: 500;
}

/* ===== JP Services Grid – Exact zoals shortcode ===== */

/* Grid container */
.services-wrapper .jp-rec-list {
  display: grid;
  gap: 20px;
  margin: 20px 0;
  grid-template-columns: 1fr; /* standaard: 1 kolom */
}

/* Tablet: 2 kolommen */
@media (min-width: 641px) and (max-width: 1023px) {
  .services-wrapper .jp-rec-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 4 kolommen */
@media (min-width: 1024px) {
  .services-wrapper .jp-rec-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Kaart stijl - MET MIJN KLEUREN */
.services-wrapper .jp-rec-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 2px solid #E2E8F0; /* Mijn border */
  border-radius: 20px; /* Iets rondere hoeken */
  box-shadow: 0 4px 24px rgba(15, 41, 68, 0.08);
  overflow: hidden;
  transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s ease, border-color .3s ease;
}

.services-wrapper .jp-rec-card:hover {
  transform: translateY(-8px); /* Meer lift */
  box-shadow: 0 12px 32px rgba(15, 41, 68, 0.12);
  border-color: #F7931E; /* Oranje border bij hover */
}

/* Afbeelding */
.services-wrapper .jp-rec-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .5s ease; /* Langzamere zoom */
}

.services-wrapper .jp-rec-card:hover .jp-rec-img img { 
  transform: scale(1.05); 
}

/* Titel - MET MIJN KLEUREN */
.services-wrapper .jp-rec-title {
  margin: 16px 20px 8px;
  font-weight: 800; /* Zwaarder gewicht */
  font-size: 1.3rem;
  line-height: 1.3;
  color: #0F2944; /* Mijn donkerblauw */
}

.services-wrapper .jp-rec-title a { 
  color: #0F2944;
  text-decoration: none;
  transition: color .3s ease;
}

.services-wrapper .jp-rec-card:hover .jp-rec-title a {
  color: #F7931E; /* Oranje bij hover */
}

/* Excerpt - MET MIJN KLEUREN */
.services-wrapper .jp-rec-excerpt {
  margin: 0 20px 16px;
  font-size: 1rem;
  line-height: 1.7;
  color: #475569; /* Mijn tekst grijs */
  flex: 1; /* Neemt beschikbare ruimte */
}

/* Button - MET MIJN KLEUREN */
.services-wrapper .jp-rec-btn {
  margin: auto 20px 20px;
  display: inline-block;
  padding: 12px 20px;
  border-radius: 10px;
  background: rgba(247, 147, 30, 0.1); /* Licht oranje background */
  color: #F7931E; /* Oranje tekst */
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  text-align: center;
  transition: all .3s ease;
}

.services-wrapper .jp-rec-btn:hover {
  background: #F7931E; /* Oranje background */
  color: #ffffff; /* Witte tekst */
  transform: translateX(4px); /* Schuif naar rechts */
}

/* More Button Container */
.services-wrapper .jp-rec-more { 
  margin-top: 30px; 
  display: flex; 
  justify-content: center; 
}

/* More Button - MET MIJN KLEUREN */
.services-wrapper .jp-rec-morebtn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 16px 32px; 
  border-radius: 12px;
  background: linear-gradient(135deg, #F7931E 0%, #E67E0F 100%); /* Oranje gradient */
  color: #ffffff; /* Witte tekst */
  font-weight: 800;
  font-size: 1.1rem;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(247, 147, 30, 0.3);
  transition: all .3s ease;
}

.services-wrapper .jp-rec-morebtn:hover { 
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(247, 147, 30, 0.4);
  background: linear-gradient(135deg, #E67E0F 0%, #D86D0A 100%); /* Donkerder oranje */
}

/* ================================
   RESPONSIVE AANPASSINGEN
   ================================ */

@media (max-width: 768px) {
  .other-services-section {
    padding: 3.5rem 1.25rem;
  }

  .other-services-section__header {
    margin-bottom: 2.5rem;
  }

  .other-services-section__intro {
    font-size: 1.05rem;
  }

  .services-wrapper .jp-rec-card {
    border-radius: 16px;
  }

  .services-wrapper .jp-rec-title {
    font-size: 1.2rem;
    margin: 14px 16px 8px;
  }

  .services-wrapper .jp-rec-excerpt {
    font-size: 0.95rem;
    margin: 0 16px 14px;
  }

  .services-wrapper .jp-rec-btn {
    margin: auto 16px 16px;
    padding: 10px 16px;
  }

  .services-wrapper .jp-rec-morebtn {
    padding: 14px 28px;
    font-size: 1rem;
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .services-wrapper .jp-rec-title {
    font-size: 1.15rem;
  }

  .services-wrapper .jp-rec-excerpt {
    font-size: 0.9rem;
  }

  .services-wrapper .jp-rec-btn {
    font-size: 0.9rem;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d041137 *//* ================================
   ONZE AANPAK SECTION (DARK BLUE) - PERFECT ALIGNMENT
   ================================ */

.approach-section {
  padding: clamp(4rem, 10vw, 7rem) 1.5rem;
  background: linear-gradient(180deg, #0F2944 0%, #081a2d 100%);
  position: relative;
  overflow: hidden;
}

/* Subtle pattern overlay */
.approach-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.approach-section__container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Header */
.approach-section__header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-label--light {
  background: rgba(247, 147, 30, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(247, 147, 30, 0.3);
  color: #F7931E;
}

.approach-section__title {
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  font-weight: 900;
  color: #ffffff;
  margin-top: 1.2rem;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Approach Grid - VERTICAL LAYOUT */
.approach-grid {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

/* Approach Step */
.approach-step {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  padding: 3rem;
  border-radius: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.approach-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, #F7931E 0%, #E67E0F 100%);
  border-radius: 24px 0 0 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.approach-step:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(247, 147, 30, 0.4);
  transform: translateX(4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.approach-step:hover::before {
  opacity: 1;
}

.approach-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  background: linear-gradient(135deg, #F7931E 0%, #E67E0F 100%);
  border-radius: 50%;
  font-size: 2.2rem;
  font-weight: 900;
  color: white;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 24px rgba(247, 147, 30, 0.4);
}

.approach-step__title {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1.2rem;
  line-height: 1.3;
}

.approach-step__intro {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.5rem;
  line-height: 1.7;
  font-weight: 500;
}

/* List - PERFECT ALIGNMENT WITH GREEN CHECKMARKS */
.approach-step__list {
  list-style: none;
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.approach-step__list li {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border-left: 3px solid #6BBE45;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  transition: all 0.3s ease;
}

.approach-step__list li:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(4px);
}

.approach-step__list li::before {
  content: "✓";
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6BBE45 0%, #8FD66E 100%);
  color: white;
  border-radius: 50%;
  font-weight: 900;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(107, 190, 69, 0.3);
}

/* Approach Details - PERFECT GRID */
.approach-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.approach-detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.8rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.approach-detail:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(247, 147, 30, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.approach-detail__icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  display: block;
}

.approach-detail__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #F7931E;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.approach-detail__text {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
}

/* Highlight Box */
.approach-step__highlight {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.8rem;
  background: rgba(107, 190, 69, 0.12);
  border-radius: 16px;
  border: 2px solid rgba(107, 190, 69, 0.4);
  margin-top: 2rem;
  font-size: 1.05rem;
  color: #ffffff;
  line-height: 1.8;
  font-weight: 500;
}

.approach-step__highlight svg {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: #6BBE45;
  margin-top: 2px;
}

/* Timeline Container */
.timeline-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  margin: 2rem 0;
}

.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem;
  min-width: 150px;
}

.timeline-item__label {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}

.timeline-item__duration {
  font-size: 1.8rem;
  font-weight: 900;
  color: #F7931E;
  text-shadow: 0 2px 8px rgba(247, 147, 30, 0.3);
}

.timeline-item__note {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}

.timeline-item--total {
  background: rgba(247, 147, 30, 0.15);
  border-radius: 16px;
  border: 2px solid rgba(247, 147, 30, 0.4);
}

.timeline-arrow {
  font-size: 2.5rem;
  font-weight: 700;
  color: #F7931E;
}

/* ================================
   RESPONSIVE
   ================================ */

@media (max-width: 768px) {
  .approach-section {
    padding: 3.5rem 1.25rem;
  }

  .approach-step {
    padding: 2rem;
  }

  .approach-step__number {
    width: 4rem;
    height: 4rem;
    font-size: 2rem;
  }

  .approach-step__title {
    font-size: 1.7rem;
  }

  .approach-step__intro {
    font-size: 1rem;
  }

  .approach-step__list li {
    padding: 0.9rem 1.2rem;
    font-size: 1rem;
  }

  .approach-step__list li::before {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.9rem;
  }

  .approach-details {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .approach-detail {
    padding: 1.5rem;
  }

  .approach-detail__icon {
    font-size: 2.5rem;
  }

  .timeline-container {
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
  }

  .timeline-arrow {
    transform: rotate(90deg);
  }

  .timeline-item {
    min-width: 140px;
  }
}

@media (max-width: 480px) {
  .approach-step {
    padding: 1.5rem;
  }

  .approach-step__number {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.8rem;
  }

  .approach-step__title {
    font-size: 1.5rem;
  }

  .approach-step__intro {
    font-size: 0.95rem;
  }

  .approach-step__list {
    gap: 0.8rem;
  }

  .approach-step__list li {
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    gap: 1rem;
  }

  .approach-step__list li::before {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.85rem;
  }

  .approach-detail__icon {
    font-size: 2.2rem;
  }

  .approach-detail__title {
    font-size: 1.05rem;
  }

  .approach-detail__text {
    font-size: 0.9rem;
  }

  .approach-step__highlight {
    padding: 1.5rem;
    font-size: 0.95rem;
  }

  .timeline-item {
    min-width: 130px;
    padding: 1.2rem;
  }

  .timeline-item__duration {
    font-size: 1.5rem;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-58e33ac *//* ================================
   WAT IS INBEGREPEN SECTION - WIDER 2-COLUMN
   ================================ */

.included-section {
  padding: clamp(4rem, 8vw, 6rem) 1.5rem;
  background: transparent;
}

.included-section__container {
  max-width: 1300px;
  margin: 0 auto;
}

.included-section__header {
  text-align: center;
  margin-bottom: 3.5rem;
}

/* 2-Column Grid for Visual Impact */
.included-wrapper {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2.5rem;
}

/* Main block (Altijd inbegrepen) spans full width on top */
.included-block--yes {
  grid-column: 1 / -1;
}

/* Block Base */
.included-block {
  background: #ffffff;
  border-radius: 24px;
  padding: 3rem;
  border: 3px solid transparent;
  box-shadow: 0 4px 24px rgba(15, 41, 68, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.included-block:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(15, 41, 68, 0.15);
}

/* Block Header */
.included-block__header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 3px solid rgba(0, 0, 0, 0.05);
}

.included-block__icon {
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 2.2rem;
  font-weight: 900;
  color: white;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.included-block__title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #0F2944;
  line-height: 1.3;
  flex: 1;
}

/* Green Block (Altijd inbegrepen) */
.included-block--yes {
  border-color: #6BBE45;
}

.included-block--yes:hover {
  border-color: #6BBE45;
  box-shadow: 0 12px 40px rgba(107, 190, 69, 0.25);
}

.included-block--yes .included-block__icon {
  background: linear-gradient(135deg, #6BBE45 0%, #8FD66E 100%);
}

.included-block--yes .included-block__header {
  border-bottom-color: rgba(107, 190, 69, 0.2);
}

/* Make the list 2 columns for the main block */
.included-block--yes .included-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* Orange Block (Optioneel) */
.included-block--optional {
  border-color: #F7931E;
}

.included-block--optional:hover {
  border-color: #F7931E;
  box-shadow: 0 12px 40px rgba(247, 147, 30, 0.25);
}

.included-block--optional .included-block__icon {
  background: linear-gradient(135deg, #F7931E 0%, #E67E0F 100%);
}

.included-block--optional .included-block__header {
  border-bottom-color: rgba(247, 147, 30, 0.2);
}

/* Gray Block (Niet inbegrepen) */
.included-block--no {
  border-color: #94A3B8;
}

.included-block--no:hover {
  border-color: #94A3B8;
  box-shadow: 0 12px 40px rgba(148, 163, 184, 0.25);
}

.included-block--no .included-block__icon {
  background: linear-gradient(135deg, #64748B 0%, #94A3B8 100%);
}

.included-block--no .included-block__header {
  border-bottom-color: rgba(148, 163, 184, 0.2);
}

/* List Base */
.included-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.included-list li {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.2rem 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.7;
  transition: all 0.3s ease;
}

.included-list li:hover {
  background: rgba(0, 0, 0, 0.04);
  transform: translateX(6px);
}

.included-list li::before {
  content: "✓";
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 900;
  font-size: 1.1rem;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Green checkmarks */
.included-block--yes .included-list li::before {
  background: linear-gradient(135deg, #6BBE45 0%, #8FD66E 100%);
}

.included-block--yes .included-list li {
  border-left: 4px solid #6BBE45;
}

/* Orange plus signs */
.included-block--optional .included-list li::before {
  content: "+";
  background: linear-gradient(135deg, #F7931E 0%, #E67E0F 100%);
}

.included-block--optional .included-list li {
  border-left: 4px solid #F7931E;
}

/* Gray minus signs */
.included-block--no .included-list li::before {
  content: "–";
  background: linear-gradient(135deg, #64748B 0%, #94A3B8 100%);
}

.included-block--no .included-list li {
  border-left: 4px solid #94A3B8;
}

/* ================================
   RESPONSIVE
   ================================ */

@media (max-width: 1024px) {
  .included-wrapper {
    grid-template-columns: 1fr;
  }

  .included-block--yes .included-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .included-section {
    padding: 3.5rem 1.25rem;
  }

  .included-block {
    padding: 2.5rem;
  }

  .included-block__header {
    gap: 1.2rem;
    margin-bottom: 1.8rem;
    padding-bottom: 1.2rem;
  }

  .included-block__icon {
    width: 4rem;
    height: 4rem;
    font-size: 2rem;
  }

  .included-block__title {
    font-size: 1.6rem;
  }

  .included-list {
    gap: 0.9rem;
  }

  .included-list li {
    padding: 1.1rem 1.3rem;
    font-size: 1rem;
    gap: 1rem;
  }

  .included-list li::before {
    width: 1.8rem;
    height: 1.8rem;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .included-block {
    padding: 2rem;
  }

  .included-block__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .included-block__icon {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.8rem;
  }

  .included-block__title {
    font-size: 1.4rem;
  }

  .included-list {
    gap: 0.8rem;
  }

  .included-list li {
    padding: 1rem 1.2rem;
    font-size: 0.95rem;
    gap: 0.9rem;
  }

  .included-list li::before {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.9rem;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-86c5981 *//* ================================
   PRIJZEN SECTIE (DARK BLUE)
   ================================ */

.pricing-section {
  padding: clamp(4rem, 10vw, 7rem) 1.5rem;
  background: linear-gradient(180deg, #0F2944 0%, #081a2d 100%);
  position: relative;
  overflow: hidden;
}

.pricing-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.pricing-section__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.pricing-section__header {
  text-align: center;
  margin-bottom: 3.5rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.pricing-section__title {
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  font-weight: 900;
  color: #ffffff;
  margin: 1.2rem 0;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.pricing-section__intro {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.pricing-section__subtitle {
  font-size: 1.2rem;
  font-weight: 700;
  color: #F7931E;
  margin-bottom: 2.5rem;
}

/* Pricing Cards */
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.pricing-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  padding: 2.5rem 2rem;
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.pricing-card:hover {
  transform: translateY(-8px);
  border-color: rgba(247, 147, 30, 0.5);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.pricing-card--featured {
  background: rgba(247, 147, 30, 0.12);
  border-color: #F7931E;
  border-width: 3px;
}

.pricing-card--featured:hover {
  box-shadow: 0 12px 40px rgba(247, 147, 30, 0.3);
}

.pricing-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #F7931E 0%, #E67E0F 100%);
  color: white;
  padding: 0.4rem 1.2rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(247, 147, 30, 0.4);
}

.pricing-card__size {
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1rem;
}

.pricing-card__price {
  font-size: 1.4rem;
  font-weight: 900;
  color: #F7931E;
  text-shadow: 0 2px 8px rgba(247, 147, 30, 0.3);
}

/* Pricing Info */
.pricing-info {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  padding: 2.5rem;
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.pricing-info__main {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1.5rem;
  text-align: center;
}

.pricing-info__subtitle {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.2rem;
  font-weight: 600;
}

.pricing-info__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}

.pricing-info__list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.2rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border-left: 3px solid #F7931E;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
}

.pricing-info__list li::before {
  content: "•";
  color: #F7931E;
  font-size: 1.5rem;
  font-weight: 900;
}

.pricing-info__note {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
  font-style: italic;
  text-align: center;
  padding: 1.2rem;
  background: rgba(107, 190, 69, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(107, 190, 69, 0.3);
}

/* ================================
   6 STAPPEN SECTIE (DARK BLUE)
   ================================ */

.steps-section {
  padding: clamp(4rem, 10vw, 7rem) 1.5rem;
  background: linear-gradient(180deg, #081a2d 0%, #0F2944 100%);
  position: relative;
  overflow: hidden;
}

.steps-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.steps-section__container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.steps-section__header {
  text-align: center;
  margin-bottom: 4rem;
}

.steps-section__title {
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  font-weight: 900;
  color: #ffffff;
  margin-top: 1.2rem;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Steps Timeline */
.steps-timeline {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  position: relative;
}

.steps-timeline::before {
  content: '';
  position: absolute;
  left: 2rem;
  top: 3rem;
  bottom: 3rem;
  width: 3px;
  background: linear-gradient(180deg, 
    rgba(247, 147, 30, 0.5) 0%, 
    rgba(247, 147, 30, 0.2) 50%,
    rgba(247, 147, 30, 0.5) 100%
  );
}

.step-item {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

.step-item__number {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F7931E 0%, #E67E0F 100%);
  border-radius: 50%;
  font-size: 2rem;
  font-weight: 900;
  color: white;
  box-shadow: 0 8px 24px rgba(247, 147, 30, 0.4);
  position: relative;
  z-index: 2;
  border: 4px solid #0F2944;
}

.step-item__content {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  padding: 2.5rem;
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.step-item:hover .step-item__content {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(247, 147, 30, 0.4);
  transform: translateX(8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.step-item__title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.8rem;
  line-height: 1.3;
}

.step-item__text {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
}

/* ================================
   LOKALE KENNIS SECTIE (DARK BLUE)
   ================================ */

.local-section {
  padding: clamp(4rem, 10vw, 7rem) 1.5rem;
  background: linear-gradient(180deg, #0F2944 0%, #081a2d 100%);
  position: relative;
  overflow: hidden;
}

.local-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.local-section__container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.local-section__header {
  text-align: center;
  margin-bottom: 4rem;
}

.local-section__title {
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  font-weight: 900;
  color: #ffffff;
  margin-top: 1.2rem;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.local-content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* Local Block */
.local-block {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  padding: 3rem;
  border-radius: 24px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.local-block:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.local-block__title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #F7931E;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

/* Local List */
.local-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.local-list li {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border-left: 4px solid #6BBE45;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  transition: all 0.3s ease;
}

.local-list li:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(6px);
}

.local-list li::before {
  content: "📍";
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* Local Knowledge */
.local-knowledge {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.local-knowledge-item {
  display: flex;
  gap: 1.5rem;
  padding: 1.8rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.local-knowledge-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(247, 147, 30, 0.3);
  transform: translateX(6px);
}

.local-knowledge-item__icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.local-knowledge-item__content {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
}

.local-knowledge-item__content strong {
  color: #F7931E;
  font-weight: 700;
}

/* Local Note */
.local-note {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 2rem;
  background: rgba(107, 190, 69, 0.1);
  border-radius: 20px;
  border: 2px solid rgba(107, 190, 69, 0.3);
}

.local-note svg {
  flex-shrink: 0;
  color: #6BBE45;
  margin-top: 2px;
}

.local-note p {
  font-size: 1.05rem;
  color: #ffffff;
  line-height: 1.7;
  font-weight: 500;
}

/* ================================
   RESPONSIVE
   ================================ */

@media (max-width: 1024px) {
  .pricing-cards {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .pricing-section,
  .steps-section,
  .local-section {
    padding: 3.5rem 1.25rem;
  }

  .steps-timeline::before {
    left: 1.5rem;
  }

  .step-item {
    flex-direction: column;
    gap: 1.5rem;
  }

  .step-item__number {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.8rem;
  }

  .step-item__content {
    padding: 2rem;
  }

  .step-item:hover .step-item__content {
    transform: translateX(0);
    transform: translateY(-4px);
  }

  .local-knowledge-item {
    flex-direction: column;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .pricing-card {
    padding: 2rem 1.5rem;
  }

  .pricing-info {
    padding: 2rem;
  }

  .step-item__content {
    padding: 1.5rem;
  }

  .local-block {
    padding: 2rem;
  }

  .local-knowledge-item {
    padding: 1.5rem;
  }

  .local-note {
    padding: 1.5rem;
    flex-direction: column;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-016b86f *//* ================================
   PRAKTIJKVOORBEELDEN SECTIE
   ================================ */

.examples-section {
  padding: clamp(4rem, 8vw, 6rem) 1.5rem;
  background: transparent;
}

.examples-section__container {
  max-width: 1300px;
  margin: 0 auto;
}

.examples-section__header {
  text-align: center;
  margin-bottom: 3.5rem;
}

/* Examples Grid */
.examples-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Example Card */
.example-card {
  background: #ffffff;
  border-radius: 24px;
  border: 3px solid #E2E8F0;
  box-shadow: 0 4px 24px rgba(15, 41, 68, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.example-card:hover {
  transform: translateY(-8px);
  border-color: #F7931E;
  box-shadow: 0 12px 40px rgba(15, 41, 68, 0.15);
}

.example-card--luxury {
  border-color: #6366F1;
}

.example-card--luxury:hover {
  border-color: #6366F1;
  box-shadow: 0 12px 40px rgba(99, 102, 241, 0.2);
}

/* Card Image */
.example-card__image {
  position: relative;
  width: 100%;
  height: 250px;
  overflow: hidden;
  background: #F1F5F9;
}

.example-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.example-card:hover .example-card__image img {
  transform: scale(1.05);
}

.example-card__badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  padding: 0.6rem 1.3rem;
  background: linear-gradient(135deg, #F7931E 0%, #E67E0F 100%);
  color: white;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 16px rgba(247, 147, 30, 0.5);
  backdrop-filter: blur(10px);
}

.example-card__badge--luxury {
  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.5);
}

/* Card Content */
.example-card__content {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.example-card__title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0F2944;
  line-height: 1.3;
  margin-bottom: 1.5rem;
}

/* Card List */
.example-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: auto;
  padding-bottom: 1.5rem;
}

.example-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.7;
  padding-left: 1.5rem;
  position: relative;
}

.example-card__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  width: 1.2rem;
  height: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F7931E;
  font-weight: 900;
  font-size: 1rem;
}

.example-card--luxury .example-card__list li::before {
  color: #6366F1;
}

/* Card Footer */
.example-card__footer {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 2px solid rgba(0, 0, 0, 0.05);
}

.example-card__info {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.example-card__info-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.2rem;
  background: #F8FAFC;
  border-radius: 12px;
  font-size: 0.95rem;
  color: #475569;
  font-weight: 600;
  transition: all 0.3s ease;
}

.example-card__info-item:hover {
  background: #F1F5F9;
  transform: translateY(-2px);
}

.example-card__info-item svg {
  color: #F7931E;
  flex-shrink: 0;
}

.example-card__info-item--price {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  color: #F7931E;
  font-weight: 800;
  font-size: 1.05rem;
  border: 1px solid rgba(247, 147, 30, 0.2);
}

.example-card__info-item--price:hover {
  background: linear-gradient(135deg, #FFEDD5 0%, #FED7AA 100%);
}

.example-card__note {
  font-size: 0.85rem;
  color: #64748B;
  font-style: italic;
}

/* ================================
   RESPONSIVE
   ================================ */

@media (max-width: 1024px) {
  .examples-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .examples-section {
    padding: 3.5rem 1.25rem;
  }

  .example-card__image {
    height: 220px;
  }

  .example-card__content {
    padding: 2rem;
  }

  .example-card__title {
    font-size: 1.3rem;
  }

  .example-card__info {
    flex-direction: column;
    gap: 0.8rem;
  }

  .example-card__info-item {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .example-card__image {
    height: 200px;
  }

  .example-card__badge {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    top: 1rem;
    right: 1rem;
  }

  .example-card__content {
    padding: 1.5rem;
  }

  .example-card__title {
    font-size: 1.2rem;
  }

  .example-card__list li {
    font-size: 0.9rem;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d3689aa *//* ================================
   ERVARINGEN INTRO
   ================================ */

.testimonials-intro {
  padding: clamp(3rem, 6vw, 5rem) 1.5rem;
  background: transparent;
  text-align: center;
}

.testimonials-intro__container {
  max-width: 900px;
  margin: 0 auto;
}

.testimonials-intro__text {
  font-size: 1.2rem;
  color: #475569;
  margin-top: 1.2rem;
  line-height: 1.7;
  font-weight: 500;
}

/* ================================
   RESPONSIVE
   ================================ */

@media (max-width: 768px) {
  .testimonials-intro {
    padding: 2.5rem 1.25rem;
  }

  .testimonials-intro__text {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .testimonials-intro__text {
    font-size: 1rem;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4682190 *//* ================================
   FAQ SECTIE
   ================================ */

.faq-section {
  padding: clamp(4rem, 8vw, 6rem) 1.5rem;
  background: transparent;
}

.faq-section__container {
  max-width: 1000px;
  margin: 0 auto;
}

.faq-section__header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.faq-section__intro {
  font-size: 1.1rem;
  color: #475569;
  margin-top: 1rem;
  line-height: 1.7;
}

/* FAQ Grid */
.faq-grid {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* FAQ Item */
.faq-item {
  background: #ffffff;
  border: 2px solid #E2E8F0;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item:hover {
  border-color: #F7931E;
  box-shadow: 0 4px 16px rgba(15, 41, 68, 0.08);
}

.faq-item[open] {
  border-color: #F7931E;
  box-shadow: 0 8px 24px rgba(15, 41, 68, 0.12);
}

/* FAQ Question */
.faq-item__question {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.8rem;
  cursor: pointer;
  list-style: none;
  transition: all 0.3s ease;
  user-select: none;
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item:hover .faq-item__question {
  background: rgba(247, 147, 30, 0.02);
}

.faq-item__number {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F7931E 0%, #E67E0F 100%);
  color: white;
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(247, 147, 30, 0.3);
}

.faq-item__text {
  flex: 1;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0F2944;
  line-height: 1.4;
}

.faq-item__icon {
  flex-shrink: 0;
  color: #F7931E;
  transition: transform 0.3s ease;
}

.faq-item[open] .faq-item__icon {
  transform: rotate(180deg);
}

/* FAQ Answer */
.faq-item__answer {
  padding: 0 1.8rem 1.8rem;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.faq-item__answer p {
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.faq-item__answer h4 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0F2944;
  margin: 1.5rem 0 1rem;
}

/* FAQ Lists */
.faq-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 1rem 0;
}

.faq-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.8rem 1rem;
  background: rgba(247, 147, 30, 0.05);
  border-radius: 8px;
  border-left: 3px solid #F7931E;
  font-size: 1rem;
  color: #475569;
  line-height: 1.6;
}

.faq-list li strong {
  color: #0F2944;
  font-weight: 700;
}

/* FAQ Checklist */
.faq-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 1rem 0;
}

.faq-checklist li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1rem;
  background: rgba(107, 190, 69, 0.05);
  border-radius: 8px;
  border-left: 3px solid #6BBE45;
  font-size: 1rem;
  color: #475569;
  line-height: 1.6;
}

/* FAQ List Small */
.faq-list-small {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.faq-list-small li {
  font-size: 0.95rem;
  color: #475569;
  padding-left: 1.5rem;
  position: relative;
}

.faq-list-small li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #F7931E;
  font-weight: 900;
}

/* FAQ Columns */
.faq-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.faq-column {
  padding: 1.5rem;
  border-radius: 12px;
  border: 2px solid;
}

.faq-column h4 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.faq-column--green {
  background: rgba(107, 190, 69, 0.05);
  border-color: #6BBE45;
}

.faq-column--green h4 {
  color: #6BBE45;
}

.faq-column--red {
  background: rgba(255, 107, 107, 0.05);
  border-color: #FF6B6B;
}

.faq-column--red h4 {
  color: #FF6B6B;
}

/* FAQ Comparison */
.faq-comparison {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.faq-comp-item {
  padding: 1.5rem;
  background: #F8FAFC;
  border-radius: 12px;
  border: 2px solid #E2E8F0;
}

.faq-comp-item h4 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #0F2944;
  font-size: 1.15rem;
}

.faq-comp-item--winner {
  background: rgba(107, 190, 69, 0.05);
  border-color: #6BBE45;
}

.faq-comp-item--winner h4 {
  color: #6BBE45;
}

.faq-price {
  font-size: 1.3rem;
  font-weight: 800;
  color: #F7931E;
  margin: 1rem 0;
}

/* FAQ Examples */
.faq-examples {
  display: grid;
  gap: 1rem;
  margin: 1rem 0;
}

.faq-example {
  padding: 1.2rem;
  background: #F8FAFC;
  border-radius: 12px;
  border-left: 4px solid #F7931E;
}

.faq-example strong {
  display: block;
  color: #0F2944;
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
}

.faq-example p {
  margin: 0;
  font-size: 1rem;
}

.faq-example .highlight {
  color: #F7931E;
  font-weight: 800;
}

/* FAQ Savings */
.faq-savings {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 1rem 0;
}

.faq-savings li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: rgba(107, 190, 69, 0.05);
  border-radius: 8px;
  border-left: 3px solid #6BBE45;
}

.faq-savings strong {
  color: #0F2944;
  font-weight: 700;
  font-size: 1rem;
}

.faq-savings-amount {
  color: #6BBE45;
  font-weight: 800;
  font-size: 1.05rem;
  white-space: nowrap;
}

/* FAQ Boxes */
.faq-tip {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.2rem;
  background: rgba(107, 190, 69, 0.1);
  border-radius: 12px;
  border: 2px solid #6BBE45;
  margin: 1.5rem 0;
}

.faq-tip svg {
  flex-shrink: 0;
  color: #6BBE45;
  margin-top: 2px;
}

.faq-tip p {
  margin: 0;
  color: #0F2944;
  font-size: 1rem;
  line-height: 1.7;
}

.faq-note {
  padding: 1.2rem;
  background: rgba(247, 147, 30, 0.1);
  border-radius: 12px;
  border: 2px solid #F7931E;
  margin: 1.5rem 0;
}

.faq-note p {
  margin: 0;
  color: #0F2944;
  font-size: 1rem;
  line-height: 1.7;
}

.faq-warning {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.2rem;
  background: rgba(255, 107, 107, 0.1);
  border-radius: 12px;
  border: 2px solid #FF6B6B;
  margin: 1.5rem 0;
}

.faq-warning svg {
  flex-shrink: 0;
  color: #FF6B6B;
  margin-top: 2px;
}

.faq-warning p {
  margin: 0;
  color: #0F2944;
  font-size: 1rem;
  line-height: 1.7;
}

/* ================================
   RESPONSIVE
   ================================ */

@media (max-width: 768px) {
  .faq-section {
    padding: 3.5rem 1.25rem;
  }

  .faq-item__question {
    padding: 1.5rem;
    gap: 1rem;
  }

  .faq-item__number {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1rem;
  }

  .faq-item__text {
    font-size: 1.05rem;
  }

  .faq-item__answer {
    padding: 0 1.5rem 1.5rem;
  }

  .faq-columns,
  .faq-comparison {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .faq-item__question {
    padding: 1.2rem;
  }

  .faq-item__answer {
    padding: 0 1.2rem 1.2rem;
  }

  .faq-item__text {
    font-size: 1rem;
  }

  .faq-savings li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .faq-savings-amount {
    font-size: 0.95rem;
  }
}/* End custom CSS */