.elementor-3814 .elementor-element.elementor-element-1139b4c{padding:10px 0px 0px 0px;--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-3814 .elementor-element.elementor-element-1139b4c .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-3814 .elementor-element.elementor-element-1139b4c .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-3814 .elementor-element.elementor-element-1139b4c .elementor-field-group.recaptcha_v3-bottomleft, .elementor-3814 .elementor-element.elementor-element-1139b4c .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-3814 .elementor-element.elementor-element-1139b4c .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-3814 .elementor-element.elementor-element-1139b4c .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-3814 .elementor-element.elementor-element-1139b4c .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-3814 .elementor-element.elementor-element-1139b4c .elementor-field-type-html{padding-bottom:0px;}.elementor-3814 .elementor-element.elementor-element-1139b4c .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-3814 .elementor-element.elementor-element-1139b4c .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-3814 .elementor-element.elementor-element-1139b4c .elementor-button{font-size:18px;}.elementor-3814 .elementor-element.elementor-element-1139b4c .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-3814 .elementor-element.elementor-element-1139b4c .elementor-button[type="submit"]{color:#ffffff;}.elementor-3814 .elementor-element.elementor-element-1139b4c .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-3814 .elementor-element.elementor-element-1139b4c .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-3814 .elementor-element.elementor-element-1139b4c .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-3814 .elementor-element.elementor-element-1139b4c .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-3814 .elementor-element.elementor-element-1139b4c .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-3814 .elementor-element.elementor-element-1139b4c .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-3814 .elementor-element.elementor-element-739b766{padding:10px 0px 0px 0px;font-size:13px;color:#FFFFFF;}.elementor-3814 .elementor-element.elementor-element-739b766 a{color:#FFFFFF;}.elementor-3814 .elementor-element.elementor-element-739b766 a:hover, .elementor-3814 .elementor-element.elementor-element-739b766 a:focus{color:#FFFFFF;}.elementor-3814 .elementor-element.elementor-element-5581e12{padding:10px 0px 0px 0px;font-size:13px;color:#FFFFFF;}.elementor-3814 .elementor-element.elementor-element-5581e12 a{color:#FFFFFF;}.elementor-3814 .elementor-element.elementor-element-5581e12 a:hover, .elementor-3814 .elementor-element.elementor-element-5581e12 a:focus{color:#FFFFFF;}.elementor-3814 .elementor-element.elementor-element-3714ebf{padding:10px 0px 0px 0px;font-size:13px;color:#FFFFFF;}.elementor-3814 .elementor-element.elementor-element-3714ebf a{color:#FFFFFF;}.elementor-3814 .elementor-element.elementor-element-3714ebf a:hover, .elementor-3814 .elementor-element.elementor-element-3714ebf a:focus{color:#FFFFFF;}.elementor-3814 .elementor-element.elementor-element-0159f3a{padding:10px 0px 0px 0px;font-size:13px;color:#FFFFFF;}.elementor-3814 .elementor-element.elementor-element-0159f3a a{color:#FFFFFF;}.elementor-3814 .elementor-element.elementor-element-0159f3a a:hover, .elementor-3814 .elementor-element.elementor-element-0159f3a a:focus{color:#FFFFFF;}.elementor-3814 .elementor-element.elementor-element-2ef151d{padding:10px 0px 0px 0px;font-size:13px;color:#FFFFFF;}.elementor-3814 .elementor-element.elementor-element-2ef151d a{color:#FFFFFF;}.elementor-3814 .elementor-element.elementor-element-2ef151d a:hover, .elementor-3814 .elementor-element.elementor-element-2ef151d a:focus{color:#FFFFFF;}.elementor-3814 .elementor-element.elementor-element-d899892{padding:10px 0px 0px 0px;font-size:13px;color:#FFFFFF;}.elementor-3814 .elementor-element.elementor-element-d899892 a{color:#FFFFFF;}.elementor-3814 .elementor-element.elementor-element-d899892 a:hover, .elementor-3814 .elementor-element.elementor-element-d899892 a:focus{color:#FFFFFF;}.elementor-3814 .elementor-element.elementor-element-73340f2{padding:10px 0px 0px 0px;font-size:13px;color:#FFFFFF;}.elementor-3814 .elementor-element.elementor-element-73340f2 a{color:#FFFFFF;}.elementor-3814 .elementor-element.elementor-element-73340f2 a:hover, .elementor-3814 .elementor-element.elementor-element-73340f2 a:focus{color:#FFFFFF;}.elementor-3814 .elementor-element.elementor-element-92d366a{--grid-template-columns:repeat(0, auto);text-align:center;--icon-size:24px;--grid-column-gap:6px;--grid-row-gap:0px;}.elementor-3814 .elementor-element.elementor-element-92d366a .elementor-social-icon{background-color:#FFFFFF;--icon-padding:10px;}.elementor-3814 .elementor-element.elementor-element-92d366a .elementor-social-icon i{color:var( --e-global-color-primary );}.elementor-3814 .elementor-element.elementor-element-92d366a .elementor-social-icon svg{fill:var( --e-global-color-primary );}.elementor-3814 .elementor-element.elementor-element-92d366a .elementor-icon{border-radius:99px 99px 99px 99px;}.elementor-3814 .elementor-element.elementor-element-369110b{padding:10px 0px 0px 0px;font-size:13px;color:#FFFFFF;}.elementor-3814 .elementor-element.elementor-element-369110b a{color:#FFFFFF;}.elementor-3814 .elementor-element.elementor-element-369110b a:hover, .elementor-3814 .elementor-element.elementor-element-369110b a:focus{color:#FFFFFF;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-3814 .elementor-element.elementor-element-73340f2{text-align:center;}}/* Start custom CSS for form, class: .elementor-element-1139b4c *//**
 * Clarity newsletter — Elementor Pro Form styling
 *
 * Makes an Elementor Pro Form widget match the Figma newsletter treatment:
 * a 500×69 grey pill (#ECECEC, 12px radius, 8px padding) holding a 13px field
 * and a 213×53 blue button (#23498A, 8px radius, 18px bold).
 *
 * ── SETUP ────────────────────────────────────────────────────────────────────
 *
 * On the Form widget:
 *   Advanced → CSS Classes ........ clarity-nl
 *   Content → Form Fields → Email
 *       Type ...................... Email
 *       ID ........................ email_address     ← Pardot's field name
 *       Placeholder ............... Email Address
 *       Required .................. Yes
 *   Content → Submit Button
 *       Text ...................... Subscribe
 *   Content → Additional Options
 *       Labels .................... Hide   (CSS hides them anyway)
 *
 * Where to paste this: Elementor → Site Settings → Custom CSS, or the widget's
 * own Advanced → Custom CSS. Nothing here depends on the page or widget id, so
 * either works.
 *
 * Everything is scoped to `.clarity-nl`, so no other form on the site changes.
 */

/* Elementor sets border-box globally, but this CSS should not depend on that:
 * with content-box the 8px padding is added to max-width and the pill comes out
 * 516px instead of 500. */
.clarity-nl,
.clarity-nl *,
.clarity-nl *::before,
.clarity-nl *::after {
	box-sizing: border-box 
}

/* ── The grey pill ──────────────────────────────────────────────────────────
 * Elementor lays fields out as a wrapping flex row of "columns" with negative
 * margins and 10px gutters. This turns that wrapper into the pill itself and
 * removes the gutters.
 */
.clarity-nl .elementor-form-fields-wrapper {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0 !important;
	width: 100% !important;
	max-width: 500px !important;
	margin: 0 !important;
	padding: 8px !important;
	background: #ECECEC !important;
	border-radius: 12px !important;
}

/* Elementor gives every field group a column width (elementor-col-100 is the
 * default, which is what forces one field per row) plus gutter padding. */
.clarity-nl .elementor-form-fields-wrapper .elementor-field-group {
	width: auto !important;
	max-width: none !important;
	flex-basis: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* The email column takes whatever is left.
 *
 * flex-basis 0, not auto: in a wrapping flex row the browser decides wrapping
 * from each item's hypothetical size, and an input's intrinsic width (~177px)
 * plus the 213px button would wrap in any container under ~406px even when the
 * field could simply have been shorter. */
.clarity-nl .elementor-form-fields-wrapper .elementor-field-type-email {
	flex: 1 1 0% !important;
	min-width: 140px !important;
}

/* The submit column is fixed at the button's width. */
.clarity-nl .elementor-form-fields-wrapper .elementor-field-type-submit,
.clarity-nl .elementor-form-fields-wrapper .e-form__buttons {
	flex: 0 0 auto !important;
	width: 213px !important;
	min-width: 0 !important;
}

/* ── The field ──────────────────────────────────────────────────────────────
 * Note the `input.` in the .elementor-3814 .elementor-element.elementor-element-1139b4c. Elementor's generated CSS targets things
 * like `.elementor-123 .elementor-field-group .elementor-field`, and themes ship
 * `input[type="email"]`, both of which out-specify a lone class. Class chain plus
 * element name beats them.
 */
.clarity-nl .elementor-field-group input.elementor-field-textual {
	width: 100% !important;
	height: 53px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 9px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: inherit !important;   /* follows the Elementor kit font */
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.365 !important;
	color: #1a1a1a !important;
}

.clarity-nl .elementor-field-group input.elementor-field-textual::placeholder {
	color: #807E7E !important;
	opacity: 1 !important;
}

/* No focus ring: the design has none, and a text input still shows focus
 * through its caret. Elementor and most themes add a blue border here. */
.clarity-nl .elementor-field-group input.elementor-field-textual:focus,
.clarity-nl .elementor-field-group input.elementor-field-textual:focus-visible {
	outline: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* Autofill: browsers force a pale yellow/blue background. The inset shadow trick
 * is the only way to repaint it. */
.clarity-nl .elementor-field-group input.elementor-field-textual:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 60px #ECECEC inset !important;
	-webkit-text-fill-color: #1a1a1a !important;
}

/* ── The button ─────────────────────────────────────────────────────────── */
.clarity-nl .elementor-field-type-submit button.elementor-button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 213px !important;
	max-width: 100% !important;
	height: 53px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background-color: #23498A !important;
	border: 0 !important;
	border-radius: 8px !important;
	font-family: inherit !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-transform: capitalize !important;
	color: #fff !important;
	cursor: pointer !important;
	transition: background-color 0.18s ease !important;
}

.clarity-nl .elementor-field-type-submit button.elementor-button:hover,
.clarity-nl .elementor-field-type-submit button.elementor-button:focus {
	background-color: #1b3a70 !important;
	color: #fff !important;
}

/* Elementor wraps button text in two spans; neither should add spacing. */
.clarity-nl .elementor-button .elementor-button-content-wrapper,
.clarity-nl .elementor-button .elementor-button-text {
	margin: 0 !important;
	padding: 0 !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
}

/* ── Labels and messages ────────────────────────────────────────────────── */

/* Hidden visually, still read by screen readers. */
.clarity-nl .elementor-field-label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Elementor's own success / error text, below the pill. `inherit` so it reads on
 * the navy footer and on a light background alike. */
.clarity-nl .elementor-message {
	margin: 8px 0 0 !important;
	max-width: 500px !important;
	font-size: 13px !important;
	line-height: 1.365 !important;
	color: inherit !important;
	background: none !important;
}

.clarity-nl .elementor-message.elementor-message-success { color: #d7ecd1 !important; }
.clarity-nl .elementor-message.elementor-message-danger  { color: #ffd3d3 !important; }

/* Required asterisk is not in the design. */
.clarity-nl .elementor-mark-required .elementor-field-label:after { content: none !important; }

/* ── Responsive ─────────────────────────────────────────────────────────────
 * Below the pill's natural width the button drops under the field. The media
 * query only knows the viewport, so `flex-wrap` above handles the case of a
 * narrow column on a wide screen.
 */
@media (max-width: 600px) {
	.clarity-nl .elementor-form-fields-wrapper {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 8px !important;
	}

	.clarity-nl .elementor-form-fields-wrapper .elementor-field-type-submit,
	.clarity-nl .elementor-form-fields-wrapper .e-form__buttons {
		width: 100% !important;
	}

	.clarity-nl .elementor-field-type-submit button.elementor-button {
		width: 100% !important;
	}
}/* End custom CSS */