/*
 .elementor * Maple homepage sections (built by Elementor,
.elementor styled here).
 * Logical properties only,
.elementor so the same rules serve LTR (English) and RTL (Arabic).
 */

.maple-section { padding-block: 72px; }
.elementor .maple-section.maple-intents,
.elementor .maple-section.maple-services-head,
.elementor .maple-section.maple-steps-head,
.elementor .maple-section.maple-offices-head { padding-block-end: 8px; }
.elementor .maple-section.maple-intents-grid,
.elementor .maple-section.maple-services-grid,
.elementor .maple-section.maple-offices { padding-block: 16px; }
.elementor .maple-section.maple-services-more { padding-block: 24px 72px; }

.elementor .maple-center,
.elementor .maple-center .elementor-heading-title,
.elementor .maple-center p { text-align: center; }
.elementor .maple-section .maple-lead p { font-size: 1.0625rem; line-height: 1.75; color: #3d4f52; }
.elementor .maple-center.maple-lead p { max-inline-size: 680px; margin-inline: auto; }

.elementor .maple-eyebrow .elementor-heading-title {
	color: var(--maple-link); /* #007F8C: 4.8:1 on white (brand teal is 3.4:1, too light for 14px text) */
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-block-end: 8px;
}
.elementor .maple-services-head .maple-eyebrow .elementor-heading-title,
.elementor .maple-steps-head .maple-eyebrow .elementor-heading-title,
.elementor .maple-offices-head .maple-eyebrow .elementor-heading-title { text-align: center; }
.elementor .maple-heading .elementor-heading-title { color: var(--maple-ink); line-height: 1.25; }
/* Hero */
.elementor .maple-hero { padding-block: 96px; }
.elementor .maple-hero .elementor-column-wrap,
.elementor .maple-hero .elementor-widget-wrap { max-inline-size: 760px; }
.elementor .maple-hero .maple-eyebrow .elementor-heading-title { color: #7fd6de; }
.elementor .maple-hero__title .elementor-heading-title {
	color: #fff;
	font-size: clamp(2rem, 4.2vw, 3.25rem);
	font-weight: 700;
	line-height: 1.15;
}
.elementor .maple-hero__text p { color: rgba(255, 255, 255, 0.9); font-size: 1.125rem; line-height: 1.7; }
.elementor .maple-hero .maple-btn { display: inline-block; width: auto; margin-inline-end: 12px; margin-block-end: 12px; }
.elementor .maple-hero__trust { margin-block-start: 20px; }
.elementor .maple-hero__trust .elementor-icon-list-text { color: #fff; font-size: 0.95rem; }
.elementor .maple-hero__trust .elementor-icon-list-icon i,
.elementor .maple-hero__trust .elementor-icon-list-icon svg { color: #7fd6de; fill: #7fd6de; }
/* Buttons */
.elementor .maple-btn .elementor-button {
	border-radius: var(--maple-radius);
	padding: 14px 28px;
	font-weight: 600;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.elementor .maple-btn--primary .elementor-button { background: var(--maple-link); color: #fff; border: 2px solid var(--maple-link); } /* white text needs >= 4.5:1 */
.elementor .maple-btn--primary .elementor-button:hover { background: var(--maple-teal-deep); border-color: var(--maple-teal-deep); }
.elementor .maple-btn--ghost .elementor-button { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.85); }
.elementor .maple-btn--ghost .elementor-button:hover { background: #fff; color: var(--maple-ink); }
.elementor .maple-btn--outline { text-align: center; }
.elementor .maple-btn--outline .elementor-button { background: transparent; color: var(--maple-teal-deep); border: 2px solid var(--maple-teal); }
.elementor .maple-btn--outline .elementor-button:hover { background: var(--maple-teal); color: #fff; }
.elementor .maple-textlink .elementor-button { background: none; padding: 0; color: var(--maple-link); font-weight: 600; }
.elementor .maple-textlink .elementor-button:hover { color: var(--maple-teal-deep); background: none; }
/* Cards (intent, service, office) */
.elementor .maple-intents-grid { background: linear-gradient(var(--maple-tint), var(--maple-tint)); }
.elementor .maple-card .elementor-icon-box-wrapper {
	background: #fff;
	border: 1px solid #dcebed;
	border-radius: 14px;
	padding: 28px 24px;
	block-size: 100%;
	text-align: start;
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.elementor .maple-card .elementor-icon-box-wrapper:hover {
	transform: translateY(-4px);
	border-color: var(--maple-teal);
	box-shadow: 0 14px 30px rgba(13, 50, 54, 0.1);
}
.elementor .maple-card .elementor-icon-box-icon { text-align: start; margin-block-end: 16px; }
.elementor .maple-card .elementor-icon {
	inline-size: 56px;
	block-size: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--maple-tint);
	color: var(--maple-teal);
	font-size: 24px;
}
.elementor .maple-card .elementor-icon i,
.elementor .maple-card .elementor-icon svg { color: var(--maple-teal); fill: var(--maple-teal); }
.elementor .maple-card .elementor-icon-box-title { margin-block: 0 8px; font-size: 1.125rem; }
.elementor .maple-card .elementor-icon-box-title,
.elementor .maple-card .elementor-icon-box-title a { color: var(--maple-ink); }
.elementor .maple-card .elementor-icon-box-description { color: #4b5d60; line-height: 1.65; margin: 0; }
.elementor .maple-card--intent { margin-block-end: 8px; }

/* Equal-height boxes: when several cards/steps sit in one row, Elementor stretches each
   column to match the tallest, but by default only the first (single) flex "line" inside a
   column's wrap is sized to its own content, so shorter cards stay short inside a tall column.
   align-content: stretch makes that line fill the full column height; the widget + its
   container are then set to fill that line. Scoped to the row types that hold these cards. */
.elementor .maple-cards .elementor-widget-wrap,
.elementor .maple-offices .elementor-widget-wrap,
.elementor .maple-intents-grid .elementor-widget-wrap,
.elementor .maple-services-grid .elementor-widget-wrap,
.elementor .maple-steps .elementor-widget-wrap,
.elementor .maple-related .elementor-widget-wrap {
	align-content: stretch;
}
.elementor .elementor-element.maple-card,
.elementor .elementor-element.maple-step,
.elementor .elementor-element.maple-card--related {
	display: flex;
	flex-direction: column;
	inline-size: 100%;
}
.elementor .elementor-element.maple-card > .elementor-widget-container,
.elementor .elementor-element.maple-step > .elementor-widget-container,
.elementor .elementor-element.maple-card--related > .elementor-widget-container {
	display: flex;
	flex-direction: column;
	flex: 1;
	inline-size: 100%;
}

/* Why the UAE */
.elementor .maple-why__img img { border-radius: 18px; inline-size: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.elementor .maple-checklist .elementor-icon-list-item { padding-block: 6px; }
.elementor .maple-checklist .elementor-icon-list-icon i,
.elementor .maple-checklist .elementor-icon-list-icon svg { color: var(--maple-teal); fill: var(--maple-teal); }
.elementor .maple-checklist .elementor-icon-list-text { color: var(--maple-ink); font-weight: 500; }
/* Steps */
.elementor .maple-steps { background: linear-gradient(var(--maple-tint), var(--maple-tint)); }
.elementor .maple-step .elementor-widget-wrap {
	border-block-start: 3px solid var(--maple-teal);
	padding-block-start: 20px;
}
.elementor .maple-step__num .elementor-heading-title { font-size: 2.5rem; font-weight: 700; color: var(--maple-teal); opacity: 0.35; line-height: 1; }
.elementor .maple-step__title .elementor-heading-title { font-size: 1.125rem; margin-block: 12px 6px; }
.elementor .maple-step__text p { color: #4b5d60; line-height: 1.65; }
/* CTA */
.elementor .maple-cta { background: var(--maple-ink); }
.elementor .maple-cta .maple-heading .elementor-heading-title { color: #fff; }
.elementor .maple-cta .maple-eyebrow .elementor-heading-title { color: #7fd6de; }
.elementor .maple-cta .maple-lead p { color: rgba(255, 255, 255, 0.85); }
.elementor .maple-contacts .elementor-icon-list-text {
	color: #fff;
	direction: ltr;           /* phone numbers and emails stay readable in Arabic layouts */
	unicode-bidi: isolate;
}
.elementor .maple-contacts .elementor-icon-list-icon i,
.elementor .maple-contacts .elementor-icon-list-icon svg { color: #7fd6de; fill: #7fd6de; }
.elementor .maple-form { background: #fff; border-radius: 16px; padding: 8px; }

/* Arabic: no tracking or uppercase on Arabic script; .elementor slightly taller lines */
:lang(ar) .maple-eyebrow .elementor-heading-title { letter-spacing: 0; text-transform: none; font-size: 0.95rem; }
:lang(ar) .elementor .maple-section .maple-lead p,
:lang(ar) .elementor .maple-card .elementor-icon-box-description { line-height: 1.9; }
:lang(ar) .elementor .maple-hero__title .elementor-heading-title { line-height: 1.35; }
/* Card text aligns with its icon (Elementor centres icon-box content by default) */
.elementor .maple-card .elementor-icon-box-content { text-align: start; }

/* Gutter so section content never touches the viewport edge */
.elementor .maple-section > .elementor-container { padding-inline: 16px; }

@media (max-width: 767px) {
	.elementor .maple-section { padding-block: 48px; }
	.elementor .maple-hero { padding-block: 64px; }
	.elementor .maple-hero .maple-btn,
.elementor .maple-hero .maple-btn .elementor-button { display: block; inline-size: 100%; text-align: center; margin-inline-end: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.elementor .maple-card .elementor-icon-box-wrapper,
.elementor .maple-btn .elementor-button { transition: none; }
	.elementor .maple-card .elementor-icon-box-wrapper:hover { transform: none; }
}

/* ---------- Inner pages (built by build_pages.php) ---------- */
.elementor .maple-hero--inner { padding-block: 72px; }
.elementor .maple-hero--inner .maple-hero__title .elementor-heading-title { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
.elementor .maple-section.maple-section-head { padding-block: 64px 8px; }
.elementor .maple-section.maple-cards,
.elementor .maple-section.maple-checklist-block,
.elementor .maple-section.maple-steps { padding-block: 16px 24px; }
.elementor .maple-section.maple-faq { padding-block: 8px 64px; }
.elementor .maple-tint { background: var(--maple-tint); }
.elementor .maple-text .maple-heading .elementor-heading-title { margin-block-end: 12px; }
.elementor .maple-text--solo .elementor-widget-wrap { max-inline-size: 860px; margin-inline: auto; }
.elementor .maple-media img { border-radius: 18px; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* FAQ accordion */
.elementor .maple-accordion .elementor-accordion { max-inline-size: 900px; margin-inline: auto; }
.elementor .maple-accordion .elementor-accordion-item { border: 1px solid #dcebed; border-radius: 12px; margin-block-end: 12px; overflow: hidden; }
.elementor .maple-accordion .elementor-tab-title { padding: 18px 22px; color: var(--maple-ink); font-weight: 600; text-align: start; }
.elementor .maple-accordion .elementor-tab-title.elementor-active { background: var(--maple-tint); color: var(--maple-teal-deep); }
.elementor .maple-accordion .elementor-tab-title a { color: inherit; }
.elementor .maple-accordion .elementor-accordion-icon { color: var(--maple-teal); }
.elementor .maple-accordion .elementor-tab-content { padding: 4px 22px 18px; color: #4b5d60; line-height: 1.75; border-block-start: 0; }

/* Related links */
.elementor .maple-card--related .elementor-icon-box-wrapper { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.elementor .maple-card--related .elementor-icon-box-icon { margin: 0; }
.elementor .maple-card--related .elementor-icon { inline-size: 40px; block-size: 40px; font-size: 16px; }
.elementor .maple-card--related .elementor-icon-box-title { margin: 0; font-size: 1rem; }
[dir="rtl"] .elementor .maple-card--related .elementor-icon i { transform: scaleX(-1); } /* arrow points forward in RTL */

/* CTA band */
.elementor .maple-cta--band { padding-block: 56px; }
.elementor .maple-cta--band .maple-btn { margin-block-end: 16px; }

:lang(ar) .elementor .maple-accordion .elementor-tab-content,
:lang(ar) .elementor .maple-step__text p { line-height: 1.95; }

/* Contact page: two office maps side by side (stacked on tablet/phone) */
.elementor .maple-map .maple-map__title .elementor-heading-title { font-size: 1.15rem; color: var(--maple-ink); margin-block-end: 12px; }
.elementor .maple-map .elementor-column + .elementor-column { scroll-margin-top: 120px; }
@media (max-width: 1024px) { .elementor .maple-map .elementor-column + .elementor-column { margin-block-start: 24px; } }