/* ──────────────────────────────────────────────
   Contact Us page (English) — page-id-1158
   Mirrors contact-form.css (the Arabic page-id-602 version) exactly,
   with physical left/right values flipped for LTR and Gravity Form #3's
   element IDs (gform_wrapper_3, field_3_*, gform_submit_button_3) used
   instead of Form #1's.

   Scoped to body.page-id-1158 only — the Arabic page's file
   (contact-form.css, scoped to .page-contact-us/.page-id-602) is untouched.

   NOTE: the Hero selectors here target the generic `.hero` section on this
   page rather than a `.hero--<slug>` modifier class (unlike the Arabic
   file's `.hero--contact-us`), because the English page's slug — and
   therefore its auto-generated modifier class from block-hero.php — wasn't
   verified against the live site. Scoping is still fully safe either way
   since every rule is prefixed with body.page-id-1158.
   ────────────────────────────────────────────── */

/* ══════════════════ Hero: remove background image + floating social icons ══════════════════ */
body.page-id-1158 .hero {
	background: #ffffff !important;
}

body.page-id-1158 .hero .bg-fill__img,
body.page-id-1158 .hero .hero__overlay {
	display: none !important;
}

body.page-id-1158 .hero .hero__social {
	display: none !important;
}

body.page-id-1158 .hero .hero__tall {
	height: auto !important;
	min-height: 20vh !important;
}

body.page-id-1158 .hero {
	padding-top: 50px !important;
}

body.page-id-1158 .hero .hero__content {
	padding-top: 5em !important;
}

@media (max-width: 767px) {
	body.page-id-1158 .hero .hero__content {
		padding-top: 0em !important;
	}
}

@media (min-width: 768px) {
	body.page-id-1158 .hero .container {
		padding-bottom: 0 !important;
		padding-top: 0 !important;
	}
}

/* hero.less sets padding-bottom:3rem on .container at ≤599.98px —
   zeroed out for this page only, mirroring the Arabic page's fix. */
@media (max-width: 599.98px) {
	body.page-id-1158 .hero .container {
		padding-bottom: 0 !important;
	}
}

body.page-id-1158 .hero .hero__title {
	color: #16103b !important;
}

body.page-id-1158 .hero .hero__subtitle,
body.page-id-1158 .hero .hero__subtitle * {
	color: #807f7f !important;
}

body.page-id-1158 .hero .hero__subtitle {
	max-width: 50em !important;
    font-size: 1em !important;
}

@media (max-width: 767px) {
	body.page-id-1158 .hero .hero__subtitle {
		font-size: 0.7rem !important;
	}
}

body.page-id-1158 .hero .hero__content {
	max-width: none !important;
}

body.page-id-1158 .type p {
	max-width: none !important;
}

body.page-id-1158 .theme--dark p,
body.page-id-1158 .theme--dark blockquote,
body.page-id-1158 .theme--dark > ul,
body.page-id-1158 .theme--dark > ol,
body.page-id-1158 .theme--dark pre {
	color: #807f7f !important;
}

/* ══════════════════ Page max-width ══════════════════ */
body.page-id-1158 .container {
	max-width: 1100px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ══════════════════ Single-column layout (hide sidebar) ══════════════════ */
body.page-id-1158 .container--aside {
	display: block !important;
}

body.page-id-1158 .container--aside aside {
	display: none !important;
}

body.page-id-1158 .container--aside article {
	width: 100% !important;
}

/* ══════════════════ Remove any purple background behind the form ══════════════════ */
body.page-id-1158 main,
body.page-id-1158 .container--aside,
body.page-id-1158 .container--aside article,
body.page-id-1158 .type,
body.page-id-1158 .section--form,
body.page-id-1158 .form-section-wrapper,
body.page-id-1158 .container--form {
	background: #ffffff !important;
	background-image: none !important;
}

/* ══════════════════ Gravity Form #3 custom styling ══════════════════ */

body.page-id-1158 #gform_wrapper_3 {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	background: #ffffff;
	border: 1px solid #ececf3;
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(20, 15, 60, 0.06);
	padding: 56px;
	box-sizing: border-box;
	direction: ltr;
}

body.page-id-1158 #gform_3 {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}

body.page-id-1158 #gform_wrapper_3 .gform_body {
	margin: 0 !important;
}

body.page-id-1158 #gform_wrapper_3 h3.gform_title,
body.page-id-1158 #gform_wrapper_3 .gform_description {
	display: none !important;
}

/* ── 2-column grid ── */
body.page-id-1158 #gform_wrapper_3 ul.gform_fields,
body.page-id-1158 #gform_wrapper_3 .gform_fields {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	column-gap: 24px !important;
	row-gap: 22px !important;
}

body.page-id-1158 #gform_wrapper_3 ul.gform_fields li.gfield,
body.page-id-1158 #gform_wrapper_3 .gform_fields .gfield {
	display: block !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	grid-column: span 1;
}

/* Explicit field order — field IDs confirmed from the actual rendered HTML
   of Form #3 (NOT the same numbering as Form #1 — only name/company/email/
   file happen to match; phone, subject, and the honeypot are different):
     5  = Full Name          11 = Company
     12 = Contact Number      2 = Email
     6  = Subject of Contact (a plain text field here, not a <select>)
     7  = More Details
     10 = Attached File
     13 = honeypot (hidden off-screen elsewhere, not placed in the grid)

   Row 1: Full Name (5) | Company (11)         — name/phone kept on the
   Row 2: Contact Number (12) | Email (2)        physical RIGHT (col 2) to
                                                  match the Arabic page's
                                                  visual position exactly,
                                                  per explicit instruction —
                                                  not mirrored for LTR.
   Row 3: Subject of Contact (6) — full width
   Row 4: More Details (7) — full width
   Row 5: Attached File (10) — full width */
body.page-id-1158 #gform_wrapper_3 #field_3_11 { grid-column: 1; grid-row: 1; }
body.page-id-1158 #gform_wrapper_3 #field_3_5  { grid-column: 2; grid-row: 1; }
body.page-id-1158 #gform_wrapper_3 #field_3_2  { grid-column: 1; grid-row: 2; }
body.page-id-1158 #gform_wrapper_3 #field_3_12 { grid-column: 2; grid-row: 2; }
body.page-id-1158 #gform_wrapper_3 #field_3_6  { grid-column: 1 / -1; grid-row: 3; }
body.page-id-1158 #gform_wrapper_3 #field_3_7  { grid-column: 1 / -1; grid-row: 4; }
body.page-id-1158 #gform_wrapper_3 #field_3_10 { grid-column: 1 / -1; grid-row: 5; }
body.page-id-1158 #gform_wrapper_3 .gfield--type-fileupload { grid-column: 1 / -1; grid-row: 5; }

/* Textarea / select / file / html / hidden / consent always take the full row */
body.page-id-1158 #gform_wrapper_3 .gfield--type-textarea,
body.page-id-1158 #gform_wrapper_3 .gfield--type-select,
body.page-id-1158 #gform_wrapper_3 .gfield--type-html,
body.page-id-1158 #gform_wrapper_3 .gfield--type-hidden,
body.page-id-1158 #gform_wrapper_3 .gfield--type-fileupload,
body.page-id-1158 #gform_wrapper_3 .gfield--type-consent,
body.page-id-1158 #gform_wrapper_3 .gfield:has(select),
body.page-id-1158 #gform_wrapper_3 .gfield:has(textarea),
body.page-id-1158 #gform_wrapper_3 .gfield:has(input[type="file"]) {
	grid-column: 1 / -1 !important;
}

body.page-id-1158 #gform_wrapper_3 .gfield--type-select .ginput_container,
body.page-id-1158 #gform_wrapper_3 .gfield--type-textarea .ginput_container,
body.page-id-1158 #gform_wrapper_3 .gfield--type-fileupload .ginput_container {
	width: 100% !important;
}

/* ── Honeypot field — hidden off-screen (not display:none) so GF's spam
   check keeps working; same as the Arabic version. */
body.page-id-1158 #gform_wrapper_3 .gform_validation_container {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ── Labels — above the field, plain text ── */
body.page-id-1158 #gform_wrapper_3 .gfield_label {
	display: block !important;
	width: auto !important;
	background: transparent !important;
	border: none !important;
	color: #16103b !important;
	font-family: inherit !important;
	font-size: 0.85rem !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	text-align: left !important;
	padding: 0 0 8px !important;
	margin: 0 !important;
}

body.page-id-1158 #gform_wrapper_3 .gfield_label.gfield_required::after {
	content: "*" !important;
	color: #e5484d !important;
	font-weight: 700 !important;
	margin-left: 4px !important;
}

body.page-id-1158 #gform_wrapper_3 .gfield_required_text {
	display: none !important;
}

/* ── Inputs ── */
body.page-id-1158 #gform_wrapper_3 .ginput_container {
	width: 100% !important;
	padding: 0 !important;
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

body.page-id-1158 #gform_wrapper_3 input[type="text"],
body.page-id-1158 #gform_wrapper_3 input[type="email"],
body.page-id-1158 #gform_wrapper_3 input[type="tel"],
body.page-id-1158 #gform_wrapper_3 input[type="number"],
body.page-id-1158 #gform_wrapper_3 select,
body.page-id-1158 #gform_wrapper_3 textarea {
	width: 100% !important;
	background: #fcfcfe !important;
	border: 1.5px solid #e4e3ee !important;
	border-radius: 10px !important;
	color: #16103b !important;
	padding: 14px 16px !important;
	font-family: inherit !important;
	font-size: 0.9rem !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	direction: ltr !important;
	text-align: left !important;
	outline: none !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease, background 0.2s ease !important;
	box-sizing: border-box !important;
}

body.page-id-1158 #gform_wrapper_3 input[type="text"]:focus,
body.page-id-1158 #gform_wrapper_3 input[type="email"]:focus,
body.page-id-1158 #gform_wrapper_3 input[type="tel"]:focus,
body.page-id-1158 #gform_wrapper_3 select:focus,
body.page-id-1158 #gform_wrapper_3 textarea:focus {
	border-color: #9168ea !important;
	background: #ffffff !important;
}

body.page-id-1158 #gform_wrapper_3 input::placeholder,
body.page-id-1158 #gform_wrapper_3 textarea::placeholder {
	color: #a8a6ba !important;
}

body.page-id-1158 #gform_wrapper_3 textarea {
	min-height: 120px !important;
	resize: none !important;
}

/* ── Select dropdown arrow (right side in LTR, mirrored from the Arabic
   version's left side in RTL) ── */
body.page-id-1158 #gform_wrapper_3 select {
	appearance: none !important;
	cursor: pointer !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2316103b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	padding-right: 40px !important;
}

/* ── File upload (same accessible label-over-hidden-input pattern as the
   Arabic version; see wireContactFields() in functions.php) ── */
body.page-id-1158 #gform_wrapper_3 .ginput_container_fileupload .gform_fileupload_rules {
	display: none !important;
}

body.page-id-1158 #gform_wrapper_3 .ginput_container_fileupload {
	position: relative;
	display: flex !important;
	align-items: center;
	/* flex-start = left in this LTR form, mirroring the Arabic version's
	   flex-start = right in its RTL form — same property, no flip needed. */
	justify-content: flex-start;
	width: 100% !important;
	min-height: 54px;
	background: #fcfcfe !important;
	border: 1.5px solid #e4e3ee !important;
	border-radius: 10px !important;
	padding: 8px 10px !important;
	box-sizing: border-box !important;
}

body.page-id-1158 #gform_wrapper_3 input[type="file"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

body.page-id-1158 #gform_wrapper_3 .wida-file-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	background: #f3f1fb !important;
	color: #6e4fdc !important;
	border: 1px solid #ddd4fb !important;
	border-radius: 8px !important;
	padding: 9px 16px !important;
	font-family: inherit !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	/* An inherited line-height taller than the button's own box was
	   clipping the top of the glyphs against .wida-file-btn__text's
	   overflow:hidden — pinning it to a sane value fixes that. */
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
	white-space: nowrap;
	max-width: 100%;
	transition: background 0.2s ease !important;
}

body.page-id-1158 #gform_wrapper_3 .wida-file-btn:hover {
	background: #e8e3fa !important;
}

body.page-id-1158 #gform_wrapper_3 .wida-file-btn__icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: #6e4fdc;
}

body.page-id-1158 #gform_wrapper_3 .wida-file-btn__text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.3 !important;
}

body.page-id-1158 #gform_wrapper_3 input[type="file"]:focus-visible + .wida-file-btn,
body.page-id-1158 #gform_wrapper_3 .ginput_container_fileupload:has(input[type="file"]:focus-visible) .wida-file-btn {
	outline: 2px solid #9168ea;
	outline-offset: 2px;
}

/* ── Validation ── */
body.page-id-1158 #gform_wrapper_3 .gfield_error .gfield_label {
	color: #e5484d !important;
}

body.page-id-1158 #gform_wrapper_3 .gfield_error input,
body.page-id-1158 #gform_wrapper_3 .gfield_error textarea,
body.page-id-1158 #gform_wrapper_3 .gfield_error select {
	border-color: #e5484d !important;
}

body.page-id-1158 #gform_wrapper_3 .validation_message,
body.page-id-1158 #gform_wrapper_3 .gfield_validation_message {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	color: #e5484d !important;
	font-size: 0.8rem !important;
	margin-top: 6px !important;
}

body.page-id-1158 #gform_wrapper_3 .validation_message:empty,
body.page-id-1158 #gform_wrapper_3 .gfield_validation_message:empty {
	display: none !important;
	margin-top: 0 !important;
}

/* ── Footer / Submit button ── */
body.page-id-1158 #gform_wrapper_3 .gform_footer {
	grid-column: 1 / -1;
	display: flex !important;
	align-items: center;
	justify-content: space-between !important;
	margin: 28px 0 0 !important;
	padding: 0 !important;
}

body.page-id-1158 #gform_wrapper_3 .gform_required_legend {
	display: none !important;
}

body.page-id-1158 #gform_wrapper_3 .gform_footer::before {
	content: "* Required fields";
	order: 2;
	color: #8a87a0 !important;
	font-size: 0.85rem !important;
}

body.page-id-1158 #gform_submit_button_3,
body.page-id-1158 #gform_wrapper_3 .gform_footer .gform_button,
body.page-id-1158 #gform_wrapper_3 .gform_footer input[type="submit"] {
	background: #6e4fdc !important;
	background-image: none !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 17px 48px !important;
	min-width: 220px !important;
	justify-content: center !important;
	font-size: 0.92rem !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	/* Same inherited oversized line-height that was clipping the file
	   button's text — here it was tall enough to visually push the arrow
	   onto its own line instead of sitting beside the label. */
	line-height: 1 !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
	width: auto !important;
	box-sizing: border-box !important;
	display: inline-flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	white-space: nowrap !important;
	align-items: center !important;
	gap: 10px !important;
	transition: background 0.25s ease, transform 0.15s ease !important;
}

body.page-id-1158 #gform_submit_button_3::before,
body.page-id-1158 #gform_wrapper_3 .gform_footer .gform_button::before,
body.page-id-1158 #gform_wrapper_3 .gform_footer input[type="submit"]::before {
	content: none !important;
	background-image: none !important;
}

/* Arrow icon mirrored to point the other way (the Arabic version's arrow
   points toward the text's reading-start / right; this one points left to
   match, i.e. the icon shape itself is flipped horizontally). */
body.page-id-1158 #gform_submit_button_3::after,
body.page-id-1158 #gform_wrapper_3 .gform_footer .gform_button::after,
body.page-id-1158 #gform_wrapper_3 .gform_footer input[type="submit"]::after {
	content: "" !important;
	order: 2 !important;
	width: 18px !important;
	height: 18px !important;
	position: static !important;
	flex-shrink: 0 !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12H19M19 12L13 6M19 12L13 18' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
	opacity: 1 !important;
	transform: none !important;
	pointer-events: none !important;
}

body.page-id-1158 #gform_submit_button_3:hover,
body.page-id-1158 #gform_wrapper_3 .gform_footer .gform_button:hover,
body.page-id-1158 #gform_wrapper_3 .gform_footer input[type="submit"]:hover {
	background: #5b3fc4 !important;
	transform: translateY(-1px) !important;
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
	body.page-id-1158 #gform_wrapper_3 {
		padding: 28px 20px;
		border-radius: 16px;
	}

	body.page-id-1158 #gform_wrapper_3 ul.gform_fields,
	body.page-id-1158 #gform_wrapper_3 .gform_fields {
		grid-template-columns: 1fr !important;
	}

	body.page-id-1158 #gform_wrapper_3 #field_3_11,
	body.page-id-1158 #gform_wrapper_3 #field_3_5,
	body.page-id-1158 #gform_wrapper_3 #field_3_2,
	body.page-id-1158 #gform_wrapper_3 #field_3_12,
	body.page-id-1158 #gform_wrapper_3 #field_3_6,
	body.page-id-1158 #gform_wrapper_3 #field_3_7,
	body.page-id-1158 #gform_wrapper_3 #field_3_10,
	body.page-id-1158 #gform_wrapper_3 .gfield--type-fileupload {
		grid-column: 1 !important;
		grid-row: auto !important;
	}

	body.page-id-1158 #gform_wrapper_3 .gform_footer {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 14px;
	}

	body.page-id-1158 #gform_wrapper_3 .gform_footer .gform_button,
	body.page-id-1158 #gform_wrapper_3 .gform_footer input[type="submit"] {
		width: 100% !important;
		justify-content: center;
	}
}