.elementor-1686 .elementor-element.elementor-element-281c066{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-1686 .elementor-element.elementor-element-281c066:not(.elementor-motion-effects-element-type-background), .elementor-1686 .elementor-element.elementor-element-281c066 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1D97C3;}.elementor-1686 .elementor-element.elementor-element-ce4e8ce{width:var( --container-widget-width, 8.397% );max-width:8.397%;--container-widget-width:8.397%;--container-widget-flex-grow:0;}.elementor-1686 .elementor-element.elementor-element-ce4e8ce.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-1686 .elementor-element.elementor-element-31f262f{text-align:center;}.elementor-1686 .elementor-element.elementor-element-31f262f .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:46px;font-weight:600;color:#FFFFFF;}.elementor-1686 .elementor-element.elementor-element-55693be{width:var( --container-widget-width, 62% );max-width:62%;--container-widget-width:62%;--container-widget-flex-grow:0;text-align:center;font-family:"Poppins", Sans-serif;font-size:20px;font-weight:400;color:#FFFFFF;}.elementor-1686 .elementor-element.elementor-element-2cd1e03{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:5px 5px 5px 5px;}.elementor-1686 .elementor-element.elementor-element-2cd1e03:not(.elementor-motion-effects-element-type-background), .elementor-1686 .elementor-element.elementor-element-2cd1e03 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-1686 .elementor-element.elementor-element-6859c32{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 20px 0px 20px;}.elementor-1686 .elementor-element.elementor-element-6859c32.elementor-element{--flex-grow:0;--flex-shrink:0;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-1686 .elementor-element.elementor-element-6859c32{width:var( --container-widget-width, 195px );max-width:195px;--container-widget-width:195px;--container-widget-flex-grow:0;}}@media(max-width:767px){.elementor-1686 .elementor-element.elementor-element-55693be{--container-widget-width:85%;--container-widget-flex-grow:0;width:var( --container-widget-width, 85% );max-width:85%;}.elementor-1686 .elementor-element.elementor-element-6859c32{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}}@media(min-width:768px){.elementor-1686 .elementor-element.elementor-element-2cd1e03{--width:35%;}}/* Start custom CSS for shortcode, class: .elementor-element-6859c32 *//* =========================================
   MailPoet Form #3 — Clean, grid, strak
   - Transparante achtergrond
   - Minder ruimte tussen velden & knop
   - Strakke rounded borders via ::before
   ========================================= */

/* Formulier achtergrond transparant + reset */
#mailpoet_form_3,
#mailpoet_form_3 form.mailpoet_form{
  background: transparent !important;
}

/* ===== Layout (grid) ===== */
#mailpoet_form_3 form.mailpoet_form{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;              /* ⬅️ kleiner dan 12px */
  padding: 0 !important;            /* ⬅️ geen extra binnenruimte */
  border-radius: 0 !important;
}

/* Volledige naam links */
#mailpoet_form_3 .mailpoet_paragraph:has(#form_first_name_3){
  grid-column: 1 !important;
  margin: 0 !important;
}

/* E-mailadres rechts */
#mailpoet_form_3 .mailpoet_paragraph:has(#form_email_3){
  grid-column: 2 !important;
  margin: 0 !important;
}

/* Knop onder beide inputs (volle breedte) */
#mailpoet_form_3 .mailpoet_paragraph:has(.mailpoet_submit){
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  margin-top: 2px !important;       /* ⬅️ kleiner gat onder inputs */
}

/* ===== Input wrappers met strakke rand ===== */
#mailpoet_form_3 .mailpoet_paragraph:has(#form_first_name_3),
#mailpoet_form_3 .mailpoet_paragraph:has(#form_email_3){
  position: relative !important;
  border: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* De rand zelf (blijft strak in hoeken) */
#mailpoet_form_3 .mailpoet_paragraph:has(#form_first_name_3)::before,
#mailpoet_form_3 .mailpoet_paragraph:has(#form_email_3)::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border: 1px solid #313131 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

/* Inputs: geen eigen rand (voorkomt dubbele borders) */
#mailpoet_form_3 #form_first_name_3,
#mailpoet_form_3 #form_email_3{
  -webkit-appearance: none !important;
  appearance: none !important;

  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;

  width: 100% !important;
  height: 48px !important;
  padding: 0 16px !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* Focus: rand blauw */
#mailpoet_form_3 .mailpoet_paragraph:has(#form_first_name_3:focus)::before,
#mailpoet_form_3 .mailpoet_paragraph:has(#form_email_3:focus)::before{
  border-color: #1D97C3 !important;
}

/* ===== Submit knop ===== */
#mailpoet_form_3 .mailpoet_submit{
  width: 100% !important;
  height: 48px !important;
  border-radius: 10px !important;
  border: 0 !important;

  background: #1D97C3 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  cursor: pointer !important;
}

#mailpoet_form_3 .mailpoet_submit:hover{
  background: #177fa4 !important;
}

/* ===== Link styling (telefoon/mail) ===== */
#mailpoet_form_3 .cta-contact a{
  color: #00a6d5 !important;
  text-decoration: none !important;
}

#mailpoet_form_3 .cta-contact a:hover{
  color: #008fba !important;
  text-decoration: underline !important;
}



@media (max-width: 767px){

  /* 1) Centreer de HELE kolom/container waar dit formulier in staat */
  .elementor-element:has(#mailpoet_form_3){
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* verticaal midden */
    align-items: center !important;     /* horizontaal midden */
  }

  /* 2) Wrapper van MailPoet centreren */
  #mailpoet_form_3{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* 3) Form: 1 kolom + nette breedte */
  #mailpoet_form_3 form.mailpoet_form{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;

    width: 100% !important;
    max-width:1000px !important;   /* pas aan: 360 / 400 / 440 indien gewenst */
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /* 4) MailPoet paragraphs: kill floats/inline widths */
  #mailpoet_form_3 form.mailpoet_form .mailpoet_paragraph{
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    margin: 0 !important;
  }

  /* 5) Inputs full width + groter */
  #mailpoet_form_3 #form_first_name_3,
  #mailpoet_form_3 #form_email_3{
    width: 100% !important;
    height: 54px !important;
    display: block !important;
  }

  /* 6) Knop full width + groter */
  #mailpoet_form_3 .mailpoet_submit{
    width: 100% !important;
    height: 54px !important;
    display: block !important;
    font-size: 16px !important;
  }
}/* End custom CSS */