.elementor-button.pf-ghost{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  border-radius: 100px;
  border: 1px solid #ffffff !important;

  /* Fixed padding as requested */
  padding: 15px 30px 15px 35px !important;

  background: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
.elementor-button.btn-ghost,
.elementor-button.btn-ghost:hover,
.elementor-button.btn-ghost:focus{
  background: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
.elementor-button.pf-ghost-alt,
.elementor-button.btn-ghost-alt,
.btn-ghost-alt .elementor-button,
.btn-ghost-alt .elementor-button-link,
.btn-ghost-alt a.elementor-button{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  border-radius: 100px;
  border: 1px solid var(--Blue, #172764) !important;

  padding: 15px 30px 15px 35px !important;

  background: transparent !important;
  color: var(--Blue, #172764) !important;
  box-shadow: none !important;
}
.elementor-button.pf-ghost-alt:hover,
.elementor-button.pf-ghost-alt:focus,
.elementor-button.btn-ghost-alt:hover,
.elementor-button.btn-ghost-alt:focus,
.btn-ghost-alt:hover .elementor-button,
.btn-ghost-alt:focus .elementor-button,
.btn-ghost-alt:hover a.elementor-button,
.btn-ghost-alt:focus a.elementor-button{
  background-color: rgba(23,39,100,0.08) !important;
  text-decoration: none !important;
}
.elementor-button.pf-ghost-alt .elementor-button-text,
.elementor-button.btn-ghost-alt .elementor-button-text,
.btn-ghost-alt .elementor-button-text,
.btn-ghost-alt a .elementor-button-text{
  color: var(--Blue, #172764) !important;
  fill: currentColor !important;
}

/* If btn-ghost-alt is on a wrapper, force descendant pf-ghost/btn-ghost to use alt styles */
.btn-ghost-alt .pf-ghost,
.btn-ghost-alt .btn-ghost,
.btn-ghost-alt .pf-ghost.elementor-button,
.btn-ghost-alt .btn-ghost.elementor-button{
  border-color: var(--Blue, #172764) !important;
  color: var(--Blue, #172764) !important;
  background: transparent !important;
}
.btn-ghost-alt .pf-ghost .elementor-button-text,
.btn-ghost-alt .btn-ghost .elementor-button-text,
.btn-ghost-alt .pf-ghost .elementor-button-icon,
.btn-ghost-alt .btn-ghost .elementor-button-icon,
.btn-ghost-alt .pf-ghost .elementor-icon,
.btn-ghost-alt .btn-ghost .elementor-icon,
.btn-ghost-alt .pf-ghost i,
.btn-ghost-alt .btn-ghost i,
.btn-ghost-alt .pf-ghost svg,
.btn-ghost-alt .btn-ghost svg,
.btn-ghost-alt .pf-ghost .elementor-icon *,
.btn-ghost-alt .btn-ghost .elementor-icon *{
  color: var(--Blue, #172764) !important;
  fill: var(--Blue, #172764) !important;
  stroke: var(--Blue, #172764) !important;
}
.btn-ghost-alt .pf-ghost:hover .elementor-button-icon,
.btn-ghost-alt .btn-ghost:hover .elementor-button-icon,
.btn-ghost-alt .pf-ghost:focus .elementor-button-icon,
.btn-ghost-alt .btn-ghost:focus .elementor-button-icon,
.btn-ghost-alt .pf-ghost:hover .elementor-icon,
.btn-ghost-alt .btn-ghost:hover .elementor-icon,
.btn-ghost-alt .pf-ghost:focus .elementor-icon,
.btn-ghost-alt .btn-ghost:focus .elementor-icon{
  color: var(--Blue, #172764) !important;
  fill: var(--Blue, #172764) !important;
  stroke: var(--Blue, #172764) !important;
}
.elementor-button.pf-ghost:hover,
.elementor-button.pf-ghost:focus{
  background-color: rgba(0,0,0,0.04) !important;
  text-decoration: none !important;
}
.elementor-button.btn-ghost:hover,
.elementor-button.btn-ghost:focus{
  background-color: rgba(0,0,0,0.04) !important;
  text-decoration: none !important;
}

/* Keep ghost icon pseudo-elements the same teal color */
.elementor-button.pf-ghost .elementor-button-content-wrapper::before,
.elementor-button.pf-ghost .elementor-button-content-wrapper::after,
.elementor-button.pf-ghost .elementor-button-text::before,
.elementor-button.pf-ghost .elementor-button-text::after{
  color: #84DCC6 !important;
  fill: #84DCC6 !important;
  stroke: #84DCC6 !important;
  border-color: #84DCC6 !important;
  background-color: transparent !important;
  background-image: none !important;
}
.elementor-button.pf-ghost-alt .elementor-button-content-wrapper::before,
.elementor-button.pf-ghost-alt .elementor-button-content-wrapper::after,
.elementor-button.pf-ghost-alt .elementor-button-text::before,
.elementor-button.pf-ghost-alt .elementor-button-text::after,
.elementor-button.btn-ghost-alt .elementor-button-content-wrapper::before,
.elementor-button.btn-ghost-alt .elementor-button-content-wrapper::after,
.elementor-button.btn-ghost-alt .elementor-button-text::before,
.elementor-button.btn-ghost-alt .elementor-button-text::after{
  color: #172764 !important;
  fill: #172764 !important;
  stroke: #172764 !important;
  border-color: #172764 !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Button text stays white on hover/focus */
.elementor-button.pf-ghost:hover .elementor-button-text,
.elementor-button.pf-ghost:focus .elementor-button-text{
  color: #ffffff !important;
  fill: currentColor !important;
}

/* Icoonkleur omgewisseld op hover/focus: teal -> wit */
.elementor-button.pf-ghost:hover .elementor-button-icon,
.elementor-button.pf-ghost:focus .elementor-button-icon,
.elementor-button.pf-ghost:hover .elementor-icon,
.elementor-button.pf-ghost:focus .elementor-icon,
.elementor-button.pf-ghost:hover .elementor-button-icon svg,
.elementor-button.pf-ghost:focus .elementor-button-icon svg,
.elementor-button.pf-ghost:hover .elementor-button-icon i,
.elementor-button.pf-ghost:focus .elementor-button-icon i,
.elementor-button.pf-ghost:hover .elementor-button-icon .eicon,
.elementor-button.pf-ghost:focus .elementor-button-icon .eicon,
.elementor-button.pf-ghost:hover .elementor-button-icon::before,
.elementor-button.pf-ghost:focus .elementor-button-icon::before,
.elementor-button.pf-ghost:hover .elementor-button-icon::after,
.elementor-button.pf-ghost:focus .elementor-button-icon::after,
.elementor-button.pf-ghost:hover .elementor-button-content-wrapper::after,
.elementor-button.pf-ghost:focus .elementor-button-content-wrapper::after,
.elementor-button.pf-ghost:hover .elementor-button-text::after,
.elementor-button.pf-ghost:focus .elementor-button-text::after{
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

.elementor-button.pf-ghost-alt:hover .elementor-button-icon,
.elementor-button.pf-ghost-alt:focus .elementor-button-icon,
.elementor-button.pf-ghost-alt:hover .elementor-icon,
.elementor-button.pf-ghost-alt:focus .elementor-icon,
.elementor-button.pf-ghost-alt:hover .elementor-button-icon svg,
.elementor-button.pf-ghost-alt:focus .elementor-button-icon svg,
.elementor-button.pf-ghost-alt:hover .elementor-button-icon i,
.elementor-button.pf-ghost-alt:focus .elementor-button-icon i,
.btn-ghost-alt:hover .elementor-button-icon,
.btn-ghost-alt:focus .elementor-button-icon,
.btn-ghost-alt:hover .elementor-icon,
.btn-ghost-alt:focus .elementor-icon,
.btn-ghost-alt:hover .elementor-button-icon svg,
.btn-ghost-alt:focus .elementor-button-icon svg,
.btn-ghost-alt:hover .elementor-button-icon i,
.btn-ghost-alt:focus .elementor-button-icon i,
.elementor-button.pf-ghost-alt:hover .elementor-button-icon .eicon,
.elementor-button.pf-ghost-alt:focus .elementor-button-icon .eicon,
.elementor-button.pf-ghost-alt:hover .elementor-button-icon::before,
.elementor-button.pf-ghost-alt:focus .elementor-button-icon::before,
.elementor-button.pf-ghost-alt:hover .elementor-button-icon::after,
.elementor-button.pf-ghost-alt:focus .elementor-button-icon::after,
.elementor-button.pf-ghost-alt:hover .elementor-button-content-wrapper::after,
.elementor-button.pf-ghost-alt:focus .elementor-button-content-wrapper::after,
.elementor-button.pf-ghost-alt:hover .elementor-button-text::after,
.elementor-button.pf-ghost-alt:focus .elementor-button-text::after{
  color: #172764 !important;
  fill: #172764 !important;
  stroke: #172764 !important;
}

/* Icons: default and hover/focus use teal (#84DCC6) */
.elementor-button.pf-ghost .elementor-button-icon,
.elementor-button.pf-ghost .elementor-icon,
.elementor-button.pf-ghost i,
.elementor-button.pf-ghost svg,
.elementor-button.pf-ghost .elementor-icon *{
  color: #84DCC6 !important;
  fill: #84DCC6 !important;
  stroke: #84DCC6 !important;
}
.elementor-button.btn-ghost .elementor-button-icon,
.elementor-button.btn-ghost .elementor-icon,
.elementor-button.btn-ghost i,
.elementor-button.btn-ghost svg,
.elementor-button.btn-ghost .elementor-icon *{
  color: #84DCC6 !important;
  fill: #84DCC6 !important;
  stroke: #84DCC6 !important;
}
.elementor-button.pf-ghost-alt .elementor-button-icon,
.elementor-button.pf-ghost-alt .elementor-icon,
.elementor-button.pf-ghost-alt i,
.elementor-button.pf-ghost-alt svg,
.elementor-button.pf-ghost-alt .elementor-icon *,
.elementor-button.btn-ghost-alt .elementor-button-icon,
.elementor-button.btn-ghost-alt .elementor-icon,
.elementor-button.btn-ghost-alt i,
.elementor-button.btn-ghost-alt svg,
.elementor-button.btn-ghost-alt .elementor-icon *{
  color: #172764 !important;
  fill: #172764 !important;
  stroke: #172764 !important;
}
.elementor-button.pf-ghost:hover .elementor-button-icon,
.elementor-button.pf-ghost:focus .elementor-button-icon,
.elementor-button.pf-ghost:hover .elementor-icon,
.elementor-button.pf-ghost:focus .elementor-icon,
.elementor-button.pf-ghost:hover i,
.elementor-button.pf-ghost:focus i,
.elementor-button.pf-ghost:hover svg,
.elementor-button.pf-ghost:focus svg{
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}
.elementor-button.btn-ghost:hover .elementor-button-icon,
.elementor-button.btn-ghost:focus .elementor-button-icon,
.elementor-button.btn-ghost:hover .elementor-icon,
.elementor-button.btn-ghost:focus .elementor-icon,
.elementor-button.btn-ghost:hover i,
.elementor-button.btn-ghost:focus i,
.elementor-button.btn-ghost:hover svg,
.elementor-button.btn-ghost:focus svg{
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Match Elementor size paddings so ghost keeps same dimensions */
/* Ensure inner text stays white, icons use teal */
.elementor-button.pf-ghost .elementor-button-text{color: #ffffff !important; fill: currentColor !important}

/* Icon defaults handled above; keep icon wrapper specificity as teal */
.elementor-button.pf-ghost .elementor-button-icon,
.elementor-button.pf-ghost .elementor-icon-wrapper,
.elementor-button.pf-ghost .elementor-icon{color: #84DCC6 !important; fill: #84DCC6 !important}

/* Force SVG internals and presentation attributes to teal */
.elementor-button.pf-ghost svg,
.elementor-button.pf-ghost svg *,
.elementor-button.pf-ghost svg path,
.elementor-button.pf-ghost svg use,
.elementor-button.pf-ghost svg g,
.elementor-button.pf-ghost [fill],
.elementor-button.pf-ghost [stroke],
.elementor-button.pf-ghost .eicon{
  fill: #84DCC6 !important;
  stroke: #84DCC6 !important;
  color: #84DCC6 !important;
}

/* Extra targets for icon fonts / pseudo elements */
.elementor-button.pf-ghost .elementor-button-icon svg,
.elementor-button.pf-ghost .elementor-button-icon i,
.elementor-button.pf-ghost .elementor-button-icon .eicon,
.elementor-button.pf-ghost .elementor-button-icon:before,
.elementor-button.pf-ghost .elementor-button-icon:after{
  color: #84DCC6 !important;
  fill: #84DCC6 !important;
}

/* Extra high-specificity rules targeting frontend button variations (themes may add .btn-secondary etc.) */
.elementor-element .pf-ghost .elementor-button-icon,
.elementor-element .pf-ghost .elementor-icon,
.btn-secondary .pf-ghost .elementor-button-icon,
.btn-secondary .pf-ghost .elementor-icon,
.elementor-widget-button .pf-ghost .elementor-button-icon,
.elementor-widget-button .pf-ghost .elementor-icon{
  color: #84DCC6 !important;
  fill: #84DCC6 !important;
  stroke: #84DCC6 !important;
}

/* Pseudo-elements and background-icon fallbacks */
.elementor-element .pf-ghost .elementor-button-icon:before,
.elementor-element .pf-ghost .elementor-button-icon:after,
.pf-ghost:before,
.pf-ghost:after{
  color: #84DCC6 !important;
}

/* If an inline SVG uses presentation attributes, override them explicitly */
.elementor-element .pf-ghost [fill],
.elementor-element .pf-ghost [stroke]{
  fill: #84DCC6 !important;
  stroke: #84DCC6 !important;
}

/* Force pseudo-elements and masked/background SVG icons to use teal */
.elementor-button.pf-ghost::before,
.elementor-button.pf-ghost::after,
.elementor-button.pf-ghost .elementor-button-icon::before,
.elementor-button.pf-ghost .elementor-button-icon::after,
.elementor-button.pf-ghost .elementor-icon::before,
.elementor-button.pf-ghost .elementor-icon::after{
  color: #84DCC6 !important;
  fill: #84DCC6 !important;
  stroke: #84DCC6 !important;
  background-image: none !important;
  background-color: transparent !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  content: '' !important;
}

/* If theme uses background with SVG as mask, ensure background-color shows the teal */
.elementor-button.pf-ghost .elementor-button-icon,
.elementor-button.pf-ghost .elementor-icon{
  background-color: transparent !important;
}

/* Simple override for wrapper-based btn-ghost-alt */
.btn-ghost-alt .elementor-button,
.btn-ghost-alt .elementor-button-link,
.btn-ghost-alt a.elementor-button,
.btn-ghost-alt .elementor-button.elementor-button-link{
  border: 1px solid var(--Blue, #172764) !important;
  border-radius: 100px !important;
  background: transparent !important;
  color: var(--Blue, #172764) !important;
}

.btn-ghost-alt .elementor-button-text,
.btn-ghost-alt a .elementor-button-text{
  color: var(--Blue, #172764) !important;
}

.btn-ghost-alt .elementor-button-icon,
.btn-ghost-alt .elementor-icon,
.btn-ghost-alt i,
.btn-ghost-alt svg,
.btn-ghost-alt .elementor-icon *{
  color: var(--Blue, #172764) !important;
  fill: var(--Blue, #172764) !important;
  stroke: var(--Blue, #172764) !important;
}

.btn-ghost-alt .elementor-button:hover,
.btn-ghost-alt .elementor-button:focus,
.btn-ghost-alt a:hover,
.btn-ghost-alt a:focus{
  background-color: rgba(23,39,100,0.08) !important;
}

/* Extremely high specificity fallback */
body .elementor-button.pf-ghost::after,
body .elementor-button.pf-ghost .elementor-button-icon::after{
  color: #84DCC6 !important;
  fill: #84DCC6 !important;
  stroke: #84DCC6 !important;
  background-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Final catch-all: pseudo icon-elementen wit op hover/focus (omgewisseld) */
.elementor-button.pf-ghost:hover *::before,
.elementor-button.pf-ghost:hover *::after,
.elementor-button.pf-ghost:focus *::before,
.elementor-button.pf-ghost:focus *::after,
.elementor-button.btn-ghost:hover *::before,
.elementor-button.btn-ghost:hover *::after,
.elementor-button.btn-ghost:focus *::before,
.elementor-button.btn-ghost:focus *::after{
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Eigen ::after van de knop (het pijltje) op hover/focus wit -
   overschrijft de teal high-specificity fallback hierboven */
body .elementor-button.pf-ghost:hover::after,
body .elementor-button.pf-ghost:focus::after,
body .elementor-button.pf-ghost:hover .elementor-button-icon::after,
body .elementor-button.pf-ghost:focus .elementor-button-icon::after,
body .elementor-button.btn-ghost:hover::after,
body .elementor-button.btn-ghost:focus::after,
body .elementor-button.btn-ghost:hover .elementor-button-icon::after,
body .elementor-button.btn-ghost:focus .elementor-button-icon::after{
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* btn-ghost-alt: tekst altijd blauw (#172764), ook als een witte
   pf-ghost-tekstregel probeert te winnen - rust EN hover/focus */
body .elementor-button.btn-ghost-alt,
body .elementor-button.pf-ghost-alt,
body .elementor-button.btn-ghost-alt .elementor-button-text,
body .elementor-button.pf-ghost-alt .elementor-button-text,
body .btn-ghost-alt .elementor-button,
body .btn-ghost-alt .elementor-button-text,
body .btn-ghost-alt a .elementor-button-text,
body .elementor-button.btn-ghost-alt:hover,
body .elementor-button.btn-ghost-alt:focus,
body .elementor-button.pf-ghost-alt:hover,
body .elementor-button.pf-ghost-alt:focus,
body .elementor-button.btn-ghost-alt:hover .elementor-button-text,
body .elementor-button.btn-ghost-alt:focus .elementor-button-text,
body .elementor-button.pf-ghost-alt:hover .elementor-button-text,
body .elementor-button.pf-ghost-alt:focus .elementor-button-text,
body .btn-ghost-alt:hover .elementor-button,
body .btn-ghost-alt:focus .elementor-button,
body .btn-ghost-alt:hover .elementor-button-text,
body .btn-ghost-alt:focus .elementor-button-text,
/* Wrapper-situatie: btn-ghost-alt op een ouder, pf-ghost op de knop */
body .btn-ghost-alt .elementor-button.pf-ghost .elementor-button-text,
body .btn-ghost-alt .elementor-button.pf-ghost:hover .elementor-button-text,
body .btn-ghost-alt .elementor-button.pf-ghost:focus .elementor-button-text,
body .pf-ghost-alt .elementor-button.pf-ghost .elementor-button-text,
body .pf-ghost-alt .elementor-button.pf-ghost:hover .elementor-button-text,
body .pf-ghost-alt .elementor-button.pf-ghost:focus .elementor-button-text{
  color: #172764 !important;
}