/* ============================================================
   QUALIMARK — Arabic Header / Navbar overrides
   Guarantees a pixel-perfect match with index-ar.html
   Applies ONLY when the document is Arabic (html[lang="ar"]).
   Uses explicit custom classes added in header.php so the rules
   work regardless of Tailwind CDN generation.
   ============================================================ */

/* ------------------------------------------------------------
   1) Header container — bounded width + centered + side padding
      Original design uses container-max = 1280px.
   ------------------------------------------------------------ */
html[lang="ar"] header .qualimark-header-container {
	width: 100%;
	max-width: 1280px;               /* = container-max from index-ar.html */
	margin-inline: auto;             /* margin: 0 auto */
	padding-inline: 1.5rem;          /* padding: 0 1.5rem */
}

/* ------------------------------------------------------------
   2) Brand logo — exact size (h-12 / md:h-14) + alignment
   ------------------------------------------------------------ */
html[lang="ar"] header .qualimark-brand {
	display: flex !important;
	align-items: center !important;
	transform: scale(0.95) !important; /* scale-95 (as in original) */
}
html[lang="ar"] header .qualimark-brand img {
	height: 48px !important;         /* h-12 */
	width: auto !important;
	object-fit: contain !important;
}
@media (min-width: 768px) {
	html[lang="ar"] header .qualimark-brand img {
		height: 56px !important;     /* md:h-14 */
	}
}

/* ------------------------------------------------------------
   3) Navigation menu — Cairo (matches the "الخدمات الأساسية"
      heading font), size, weight, spacing, colors
   ------------------------------------------------------------ */
html[lang="ar"] header .qualimark-nav {
	gap: 32px !important;            /* gap-8 */
}
html[lang="ar"] header .qualimark-nav a {
	font-family: 'Cairo', 'Tajawal', sans-serif !important;
	font-size: 14px !important;      /* text-label-md */
	font-weight: 600 !important;     /* font-label-md weight */
	line-height: 1 !important;
	letter-spacing: 0.05em !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	height: 100% !important;
	transition: color 0.2s ease !important;
}
/* Active link ("الرئيسية"): primary blue + 2px blue underline */
html[lang="ar"] header .qualimark-nav a[aria-current="page"] {
	color: #003b65 !important;       /* text-primary */
	font-weight: 700 !important;     /* font-bold */
	border-bottom: 2px solid #003b65 !important; /* border-b-2 border-primary */
	padding-bottom: 4px !important;  /* pb-1 */
}
html[lang="ar"] header .qualimark-nav a:not([aria-current="page"]) {
	color: #42474f !important;       /* text-on-surface-variant */
	border-bottom: none !important;
}
html[lang="ar"] header .qualimark-nav a:hover {
	color: #006d3c !important;       /* hover:text-secondary */
}

/* Mobile menu links — same Cairo font as the desktop nav. */
html[lang="ar"] .js-mobile-menu a {
	font-family: 'Cairo', 'Tajawal', sans-serif !important;
	font-size: 14px !important;      /* text-label-md */
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0.05em !important;
}

/* ------------------------------------------------------------
   4) Language switcher icon — circle 40px + gray
   ------------------------------------------------------------ */
html[lang="ar"] header .qualimark-lang {
	width: auto !important;          /* fits icon + "EN" label */
	height: 40px !important;         /* h-10 */
	padding-inline: 12px !important;
	gap: 6px !important;
	border-radius: 9999px !important;/* rounded-full */
	color: #42474f !important;       /* text-on-surface-variant */
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
html[lang="ar"] header .qualimark-lang .qualimark-lang-label {
	font-family: 'Cairo', 'Tajawal', sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
}
html[lang="ar"] header .qualimark-lang:hover {
	background-color: #ebeef3 !important; /* hover:bg-surface-container */
	color: #003b65 !important;            /* hover:text-primary */
}
/* Language switcher group — three compact pills (AR/EN/PT). */
html[lang="ar"] header .qualimark-langs {
	gap: 4px !important;
}
html[lang="ar"] header .qualimark-langs .qualimark-lang {
	height: 36px !important;
	padding-inline: 10px !important;
	gap: 0 !important;
}
html[lang="ar"] header .qualimark-langs .qualimark-lang.is-active {
	background-color: #ebeef3 !important;
	color: #003b65 !important;
}

/* ------------------------------------------------------------
   5) CTA button "اطلب عرض سعر" — dark green #006d3c + white text
      (matches bg-secondary / text-on-secondary from index-ar.html)
   ------------------------------------------------------------ */
html[lang="ar"] header .qualimark-cta {
	background-color: #006d3c !important;          /* bg-secondary */
	color: #ffffff !important;                     /* text-on-secondary */
	font-family: 'Tajawal', 'Cairo', sans-serif !important;
	font-size: 14px !important;                    /* text-label-md */
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0.05em !important;
	padding: 10px 24px !important;                 /* py-2.5 px-6 */
	border-radius: 4px !important;                 /* rounded = 0.25rem */
	box-shadow: 0 4px 14px 0 rgba(0, 109, 60, 0.2) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
html[lang="ar"] header .qualimark-cta:hover {
	background-color: rgba(0, 109, 60, 0.9) !important; /* hover:bg-secondary/90 */
	color: #ffffff !important;
}

/* ------------------------------------------------------------
   6) Mobile menu toggle — matches original
   ------------------------------------------------------------ */
html[lang="ar"] header .qualimark-nav-toggle {
	width: 40px !important;
	height: 40px !important;
	color: #42474f !important;
}

/* ------------------------------------------------------------
   7) Header in NORMAL FLOW — it scrolls away with the page.
      Matches index-ar.html: the header sits at the very top of
      the page only and does NOT follow the scroll (no sticky,
      no fixed). All position sticky/fixed (from Tailwind classes
      like .sticky or JS-added classes) are cancelled here.
   ------------------------------------------------------------ */
html[lang="ar"] header,
html[lang="ar"] header.docked,
html[lang="ar"] .site-header,
html[lang="ar"] header.is-sticky,
html[lang="ar"] header.header-scrolled,
html[lang="ar"] body > header {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	width: 100% !important;
	z-index: auto !important;
	box-shadow: none !important;
	transform: none !important;
	margin-top: 0 !important;
}
/* No offset is needed anymore — the header is back in the flow.
   Unified light background (bg-surface #f7f9ff of index-ar.html) so
   no white strip from the body/container shows between sections. */
html[lang="ar"] body {
	overflow-x: clip !important;
	padding-top: 0 !important;
	background-color: #f7f9ff !important; /* bg-surface */
}
/* Opaque white background like index-ar.html (bg-surface-container-lowest). */
html[lang="ar"] header {
	background-color: #ffffff !important;
}

/* ------------------------------------------------------------
   8) HERO CARD — anchored to the RIGHT with a side margin (RTL)
      Matches index-ar.html: the dark card is NOT centered; it
      starts from the right edge of the bounded container with a
      comfortable margin, never glued to the screen edge.
   ------------------------------------------------------------ */
/* Card wrapper (the bounded container, 1280px + centered + side padding). */
html[lang="ar"] #hero-slider .relative.z-10 {
	width: 100% !important;
	max-width: 1280px !important;           /* container-max */
	margin-inline: auto !important;         /* mx-auto */
	padding-inline: 1.5rem !important;      /* px-margin-mobile (16px) */
}
@media (min-width: 768px) {
	html[lang="ar"] #hero-slider .relative.z-10 {
		padding-inline: 3rem !important;    /* md:px-margin-desktop (48px) */
	}
}

/* The dark card itself: anchored to the right, never centered. */
html[lang="ar"] #hero-slider .max-w-2xl {
	max-width: 42rem !important;            /* 672px (max-w-2xl) */
	margin-inline-start: 0 !important;      /* right side (RTL) */
	margin-inline-end: auto !important;     /* margin-left:auto pushes it right */
	text-align: right !important;           /* right-aligned content */
}

/* All card texts: strictly right-aligned. */
html[lang="ar"] #hero-slider .max-w-2xl h1,
html[lang="ar"] #hero-slider .max-w-2xl p,
html[lang="ar"] #hero-slider .max-w-2xl span,
html[lang="ar"] #hero-slider .max-w-2xl a {
	text-align: right !important;
}

/* Badge (service chip) + buttons: start from the far right of the card. */
html[lang="ar"] #hero-slider .max-w-2xl .hs-reveal {
	justify-content: flex-start !important;
	align-items: flex-start !important;
}
html[lang="ar"] #hero-slider .max-w-2xl .flex,
html[lang="ar"] #hero-slider .max-w-2xl .inline-flex {
	justify-content: flex-start !important;
}
html[lang="ar"] #hero-slider .max-w-2xl .hs-reveal.inline-flex {
	align-self: flex-start !important;
}

/* Hero primary CTA (استكشف الخدمة) — force brand green #006d3c. */
html[lang="ar"] #hero-slider .max-w-2xl a.bg-secondary {
	background-color: #006d3c !important;   /* secondary */
	color: #ffffff !important;              /* on-secondary */
	border-color: transparent !important;
}
html[lang="ar"] #hero-slider .max-w-2xl a.bg-secondary:hover {
	background-color: rgba(0, 109, 60, 0.9) !important; /* hover:bg-secondary/90 */
	color: #ffffff !important;
}

/* ------------------------------------------------------------
   9) CORE SERVICES (الخدمات الأساسية) — bounded & centered
      Matches index-ar.html: section container is capped at
      container-max (1280px), centered, with side padding, so the
      5 service cards keep equal, compact proportions instead of
      stretching across the full viewport width.
   ------------------------------------------------------------ */
/* 0) Clear gap between the hero image and the heading (خبراتنا).
      Same value as py-section-gap (80px) in index-ar.html. */
html[lang="ar"] section#services {
	padding-top: 80px !important;
	padding-bottom: 80px !important;
}

/* 1) Main container limits: cap width, center, add side padding. */
html[lang="ar"] section#services > div {
	max-width: 1280px !important;         /* container-max from index-ar.html */
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1rem !important;        /* px-margin-mobile (16px) */
	padding-right: 1rem !important;
}
@media (min-width: 768px) {
	html[lang="ar"] section#services > div {
		padding-left: 3rem !important;    /* md:px-margin-desktop (48px) */
		padding-right: 3rem !important;
	}
}

/* 2) Title block: strictly centered + green divider. */
html[lang="ar"] section#services .text-center,
html[lang="ar"] section#services .text-center span,
html[lang="ar"] section#services .text-center h2 {
	text-align: center !important;
}
html[lang="ar"] section#services .text-center .bg-secondary {
	background-color: #006d3c !important; /* secondary green */
	margin-left: auto !important;
	margin-right: auto !important;
}

/* 3) Grid: equal columns (1 / 2 / 3) + consistent 24px gap.
      (6 service cards are laid out 3 + 3 on wide screens.) */
html[lang="ar"] section#services .grid {
	display: grid !important;
	grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
	gap: 24px !important;                 /* gap-gutter */
}
@media (min-width: 768px) {
	html[lang="ar"] section#services .grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (min-width: 1024px) {
	html[lang="ar"] section#services .grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}
@media (min-width: 1280px) {
	html[lang="ar"] section#services .grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

/* 4) Cards: vertical, tidy, not squashed or over-stretched. */
html[lang="ar"] section#services .grid > div {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	padding: 1.5rem !important;           /* p-6 (24px) */
}
@media (min-width: 768px) {
	html[lang="ar"] section#services .grid > div {
		padding: 2rem !important;         /* md:p-8 (32px) */
	}
}
@media (min-width: 1280px) {
	html[lang="ar"] section#services .grid > div {
		padding: 1.5rem !important;       /* xl:p-6 (24px) */
	}
}
/* Card text: right-aligned (RTL) and tidy. */
html[lang="ar"] section#services .grid > div h3,
html[lang="ar"] section#services .grid > div p,
html[lang="ar"] section#services .grid > div a {
	text-align: right !important;
}

/* ------------------------------------------------------------
   9-b) CORE SERVICES typography — exact match with index-ar.html
      (Cairo for headings, Tajawal for body; sizes from the
      original Tailwind config: label-md 14 / headline-sm 24 /
      headline-md 32 / body-md 16).
   ------------------------------------------------------------ */
/* Badge (خبراتنا) — text-label-md / font-label-md */
html[lang="ar"] section#services .text-center span {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: #006d3c !important;              /* text-secondary */
}
/* Section title (الخدمات الأساسية) — text-headline-md / font-headline-md */
html[lang="ar"] section#services .text-center h2 {
	font-family: 'Cairo', 'Tajawal', sans-serif !important;
	font-size: 32px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: #003b65 !important;              /* text-primary */
}
/* Card titles — text-headline-sm / font-headline-sm */
html[lang="ar"] section#services .grid > div h3 {
	font-family: 'Cairo', 'Tajawal', sans-serif !important;
	font-size: 24px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: #003b65 !important;              /* text-primary */
}
/* Card body text — text-body-md / font-body-md */
html[lang="ar"] section#services .grid > div p {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: #42474f !important;              /* text-on-surface-variant */
}
/* Card link (استكشف الخدمة) — text-label-md / font-label-md */
html[lang="ar"] section#services .grid > div a {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0.05em !important;
	color: #006d3c !important;              /* text-secondary */
}

/* ------------------------------------------------------------
   10) INTERNATIONAL SOLUTIONS (حلول دولية) — match index-ar.html
       The section that immediately follows #services. Applied to
       the Arabic page only.
   ------------------------------------------------------------ */
/* 1) Container: capped at 1280px (container-max), centered, side
      padding + py-section-gap (80px) exactly like the original. */
html[lang="ar"] section#services + section > div.relative.z-10 {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1rem !important;        /* px-margin-mobile (16px) */
	padding-right: 1rem !important;
	padding-top: 80px !important;         /* py-section-gap */
	padding-bottom: 80px !important;
}
@media (min-width: 768px) {
	html[lang="ar"] section#services + section > div.relative.z-10 {
		padding-left: 3rem !important;    /* md:px-margin-desktop (48px) */
		padding-right: 3rem !important;
	}
}

/* 2) Two columns on desktop, 48px gap, vertically centered. */
html[lang="ar"] section#services + section .flex.flex-col {
	gap: 3rem !important;                 /* gap-12 (48px) */
}
@media (min-width: 1024px) {
	html[lang="ar"] section#services + section .flex.flex-col {
		flex-direction: row !important;
		align-items: center !important;
	}
	html[lang="ar"] section#services + section .flex.flex-col > div {
		width: 50% !important;            /* lg:w-1/2 */
	}
}

/* 3) Badge (دعم التجارة العالمية) — text-label-sm / font-label-sm */
html[lang="ar"] section#services + section .inline-flex span.text-label-sm {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: #ffffff !important;            /* text-surface-container-lowest */
}

/* 4) Heading — text-display-lg-mobile / md:text-headline-md (Cairo) */
html[lang="ar"] section#services + section h2 {
	font-family: 'Cairo', 'Tajawal', sans-serif !important;
	font-size: 32px !important;           /* headline-md */
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: #ffffff !important;            /* text-on-primary */
}
@media (max-width: 767px) {
	html[lang="ar"] section#services + section h2 {
		font-size: 36px !important;       /* display-lg-mobile */
		font-weight: 700 !important;
	}
}
html[lang="ar"] section#services + section h2 .text-secondary-fixed {
	color: #89f9af !important;            /* secondary-fixed */
}

/* 5) Paragraph — text-body-lg / font-body-lg (Tajawal) */
html[lang="ar"] section#services + section p.text-body-lg {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, 0.8) !important; /* text-on-primary/80 */
}

/* 6) CTA button — bg-secondary (green) + text-label-md (Tajawal) */
html[lang="ar"] section#services + section a.bg-secondary {
	background-color: #006d3c !important; /* secondary */
	color: #ffffff !important;            /* on-secondary */
	border-color: transparent !important;
	font-family: 'Tajawal', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0.05em !important;
}
html[lang="ar"] section#services + section a.bg-secondary:hover {
	background-color: rgba(0, 109, 60, 0.9) !important;
	color: #ffffff !important;
}

/* 7) Background — force the brand blue (bg-primary #003b65) like
      index-ar.html, plus the two decorative overlays. */
html[lang="ar"] section#services + section {
	background-color: #003b65 !important; /* bg-primary */
	color: #ffffff !important;            /* text-on-primary */
}
/* Geometric dotted overlay (radial white dots at 10% opacity). */
html[lang="ar"] section#services + section > div.absolute.inset-0.z-0 {
	background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0) !important;
	background-size: 32px 32px !important;
	opacity: 0.1 !important;
}
/* Green gradient wash from the left edge (from-secondary/20). */
html[lang="ar"] section#services + section > div.absolute.top-0.left-0 {
	background-image: linear-gradient(to right, rgba(0, 109, 60, 0.2), rgba(0, 109, 60, 0)) !important;
	opacity: 1 !important;
}

/* ------------------------------------------------------------
   11) ELECTRONIC INSPECTION SYSTEM (سعودي جاب) — match index-ar.html
       The 3rd section after #services. Arabic page only.
   ------------------------------------------------------------ */
/* 1) Electronic Inspection section: NO outer margins — spacing is
      handled by inner padding only, matching the seamless look of
      index-ar.html. */
html[lang="ar"] section#services + section + section {
	margin-top: 0 !important;             /* remove mt-8 */
	margin-bottom: 0 !important;          /* remove mb-section-gap */
	padding-top: 80px !important;         /* py-section-gap via padding */
	padding-bottom: 80px !important;
	background-color: #f7f9ff !important; /* bg-surface — same tint as index-ar.html */
}

/* 2) Container: capped 1280px + centered + side padding. */
html[lang="ar"] section#services + section + section > div {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1rem !important;        /* px-margin-mobile (16px) */
	padding-right: 1rem !important;
}
@media (min-width: 768px) {
	html[lang="ar"] section#services + section + section > div {
		padding-left: 3rem !important;    /* md:px-margin-desktop (48px) */
		padding-right: 3rem !important;
	}
}

/* 3) Grid: 1 col mobile / 2 equal cols on lg, 24px gap, centered. */
html[lang="ar"] section#services + section + section .grid {
	display: grid !important;
	grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
	gap: 24px !important;                 /* gap-gutter */
	align-items: center !important;
}
@media (min-width: 1024px) {
	html[lang="ar"] section#services + section + section .grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* 4) Heading — text-headline-md / font-headline-md (Cairo). */
html[lang="ar"] section#services + section + section h1 {
	font-family: 'Cairo', 'Tajawal', sans-serif !important;
	font-size: 32px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: #003b65 !important;            /* text-primary */
	text-align: right !important;
}
/* Paragraph — text-body-lg / font-body-lg (Tajawal). */
html[lang="ar"] section#services + section + section p.text-body-lg {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	color: #42474f !important;            /* text-on-surface-variant */
	text-align: right !important;
}

/* 5) CTA button — bg-primary (blue) + text-label-md (Tajawal). */
html[lang="ar"] section#services + section + section button,
html[lang="ar"] section#services + section + section a.bg-primary {
	background-color: #003b65 !important; /* bg-primary */
	color: #ffffff !important;            /* on-primary */
	border-radius: 8px !important;        /* rounded-lg */
	font-family: 'Tajawal', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0.05em !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;                  /* gap-2 */
	padding: 12px 32px !important;        /* px-8 py-3 */
	text-decoration: none !important;     /* avoid underlined link */
	cursor: pointer !important;
	border: none !important;
}
html[lang="ar"] section#services + section + section button:hover,
html[lang="ar"] section#services + section + section a.bg-primary:hover {
	background-color: rgba(0, 59, 101, 0.9) !important; /* hover:bg-primary/90 */
	color: #ffffff !important;
}

/* 6) Image card (400px) + overlay caption text. */
html[lang="ar"] section#services + section + section .relative.h-\[400px\] {
	height: 400px !important;
	border-radius: 12px !important;       /* rounded-xl */
	overflow: hidden !important;
}
html[lang="ar"] section#services + section + section .relative.h-\[400px\] img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}
html[lang="ar"] section#services + section + section .relative.h-\[400px\] h3 {
	font-family: 'Cairo', 'Tajawal', sans-serif !important;
	font-size: 24px !important;           /* headline-sm */
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: #ffffff !important;
	text-align: right !important;
}
html[lang="ar"] section#services + section + section .relative.h-\[400px\] p {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 16px !important;           /* body-md */
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: rgba(255, 255, 255, 0.9) !important; /* text-on-primary/90 */
	text-align: right !important;
}

/* ------------------------------------------------------------
   12) CoC CERTIFICATE WORKFLOW (مسار إصدار شهادة المطابقة) —
       match index-ar.html. 4th section after #services.
   ------------------------------------------------------------ */
/* 1) CoC workflow section: NO outer margins — inner padding only,
      same surface tint (#f7f9ff) so it flows seamlessly after the
      Electronic Inspection section. */
html[lang="ar"] #coc-workflow {
	margin-top: 0 !important;             /* remove mb-section-gap */
	margin-bottom: 0 !important;
	padding-top: 80px !important;         /* spacing via padding */
	padding-bottom: 80px !important;
	background-color: #f7f9ff !important; /* bg-surface */
}

/* 2) Container: capped 1280px + centered + side padding. */
html[lang="ar"] #coc-workflow > div {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1rem !important;        /* px-margin-mobile (16px) */
	padding-right: 1rem !important;
}
@media (min-width: 768px) {
	html[lang="ar"] #coc-workflow > div {
		padding-left: 3rem !important;    /* md:px-margin-desktop (48px) */
		padding-right: 3rem !important;
	}
}

/* 3) Title block: centered + typography. */
html[lang="ar"] #coc-workflow .text-center,
html[lang="ar"] #coc-workflow .text-center h2,
html[lang="ar"] #coc-workflow .text-center p {
	text-align: center !important;
}
html[lang="ar"] #coc-workflow h2 {
	font-family: 'Cairo', 'Tajawal', sans-serif !important;
	font-size: 32px !important;           /* headline-md */
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: #003b65 !important;            /* text-primary */
}
html[lang="ar"] #coc-workflow .text-center p {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 18px !important;           /* body-lg */
	font-weight: 400 !important;
	line-height: 1.6 !important;
	color: #42474f !important;            /* text-on-surface-variant */
	max-width: 42rem !important;          /* max-w-2xl */
	margin-left: auto !important;
	margin-right: auto !important;
}

/* 4) Grid: 1 / 2 / 4 columns, 16px gap, 200px rows. */
html[lang="ar"] #coc-workflow .grid {
	display: grid !important;
	grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
	gap: 16px !important;                 /* gap-4 */
	grid-auto-rows: 200px !important;     /* auto-rows-[200px] */
}
@media (min-width: 768px) {
	html[lang="ar"] #coc-workflow .grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (min-width: 1024px) {
	html[lang="ar"] #coc-workflow .grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

/* 5) Cards: flex layout + spans for the wide / tall cards. */
html[lang="ar"] #coc-workflow .grid > div {
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	border-radius: 12px !important;       /* rounded-xl */
}
@media (min-width: 1024px) {
	html[lang="ar"] #coc-workflow .grid > div:nth-child(1),
	html[lang="ar"] #coc-workflow .grid > div:nth-child(4),
	html[lang="ar"] #coc-workflow .grid > div:nth-child(7) {
		grid-column: span 2 / span 2 !important; /* lg:col-span-2 */
	}
	html[lang="ar"] #coc-workflow .grid > div:nth-child(4) {
		grid-row: span 2 / span 2 !important;    /* row-span-2 (image) */
	}
}

/* 6) Light cards: background + typography. */
html[lang="ar"] #coc-workflow .grid > div:not(:nth-child(4)):not(:nth-child(7)) {
	background-color: #ffffff !important; /* bg-surface-container-lowest */
	border: 1px solid rgba(194, 199, 209, 0.5) !important; /* border-outline-variant/50 */
}
html[lang="ar"] #coc-workflow .grid > div h3 {
	font-family: 'Cairo', 'Tajawal', sans-serif !important;
	font-size: 24px !important;           /* headline-sm */
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: #003b65 !important;            /* text-primary */
}
html[lang="ar"] #coc-workflow .grid > div p {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 16px !important;           /* body-md */
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: #42474f !important;            /* text-on-surface-variant */
}
html[lang="ar"] #coc-workflow .grid > div span.text-label-sm {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 12px !important;           /* label-sm */
	font-weight: 500 !important;
	line-height: 1 !important;
}

/* 7) Large image card (child 4): photo + blue gradient overlay. */
html[lang="ar"] #coc-workflow .grid > div:nth-child(4) {
	overflow: hidden !important;
}
html[lang="ar"] #coc-workflow .grid > div:nth-child(4) img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}
html[lang="ar"] #coc-workflow .grid > div:nth-child(4) > div:last-child {
	background-image: linear-gradient(to top, rgba(0, 59, 101, 0.9), rgba(0, 59, 101, 0.5), rgba(0, 59, 101, 0)) !important;
}
html[lang="ar"] #coc-workflow .grid > div:nth-child(4) h3 {
	color: #ffffff !important;
	font-size: 36px !important;           /* display-lg-mobile */
	font-weight: 700 !important;
	line-height: 1.2 !important;
}
html[lang="ar"] #coc-workflow .grid > div:nth-child(4) p {
	color: rgba(255, 255, 255, 0.9) !important;
}

/* 8) Final blue card (child 7). */
html[lang="ar"] #coc-workflow .grid > div:nth-child(7) {
	background-color: #003b65 !important; /* bg-primary */
	color: #ffffff !important;
}
html[lang="ar"] #coc-workflow .grid > div:nth-child(7) h3 {
	color: #ffffff !important;
}
html[lang="ar"] #coc-workflow .grid > div:nth-child(7) p {
	color: rgba(255, 255, 255, 0.8) !important;
}
html[lang="ar"] #coc-workflow .grid > div:nth-child(7) span.text-label-sm {
	color: #003b65 !important;
	background-color: #89f9af !important; /* bg-secondary-fixed */
}

/* 9) Card text alignment: right (RTL). */
html[lang="ar"] #coc-workflow .grid > div h3,
html[lang="ar"] #coc-workflow .grid > div p {
	text-align: right !important;
}

/* ------------------------------------------------------------
   14) SAUDI G.A.P AUTHORIZED REPRESENTATIVE (ممثل Saudi G.A.P) —
       match index-ar.html: blue bg #003b65, white text, 1280px.
   ------------------------------------------------------------ */
/* 1) Section: brand blue (bg-primary #003b65) + white text. */
html[lang="ar"] #saudi-gap-section {
	background-color: #003b65 !important; /* bg-primary */
	color: #ffffff !important;            /* text-on-primary */
}

/* 2) Container: capped 1280px + centered + side padding + 80px. */
html[lang="ar"] #saudi-gap-section > div.relative.z-10 {
	max-width: 1280px !important;         /* container-max */
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1rem !important;        /* px-margin-mobile (16px) */
	padding-right: 1rem !important;
	padding-top: 80px !important;         /* py-section-gap */
	padding-bottom: 80px !important;
}
@media (min-width: 768px) {
	html[lang="ar"] #saudi-gap-section > div.relative.z-10 {
		padding-left: 3rem !important;    /* md:px-margin-desktop (48px) */
		padding-right: 3rem !important;
	}
}

/* 3) Decorative overlays: white dots + green wash from the left. */
html[lang="ar"] #saudi-gap-section > div.absolute.inset-0 {
	background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0) !important;
	background-size: 32px 32px !important;
	opacity: 0.1 !important;
}
html[lang="ar"] #saudi-gap-section > div.absolute.top-0.left-0 {
	background-image: linear-gradient(to right, rgba(0, 109, 60, 0.2), rgba(0, 109, 60, 0)) !important;
	opacity: 1 !important;
}

/* 4) Layout: two columns on lg + 48px gap + vertically centered. */
html[lang="ar"] #saudi-gap-section .flex.flex-col {
	gap: 3rem !important;                 /* gap-12 (48px) */
}
@media (min-width: 1024px) {
	html[lang="ar"] #saudi-gap-section .flex.flex-col {
		flex-direction: row !important;
		align-items: center !important;
	}
	html[lang="ar"] #saudi-gap-section .flex.flex-col > div {
		width: 50% !important;            /* lg:w-1/2 */
	}
}

/* 5) Badge (الممثل المعتمد لأنظمة Saudi G.A.P). */
html[lang="ar"] #saudi-gap-section .inline-flex span.text-label-sm {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 12px !important;           /* label-sm */
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: #ffffff !important;            /* text-surface-container-lowest */
}

/* 6) Heading — Cairo 32px white + green highlight #89f9af. */
html[lang="ar"] #saudi-gap-section h2 {
	font-family: 'Cairo', 'Tajawal', sans-serif !important;
	font-size: 32px !important;           /* headline-md */
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: #ffffff !important;
}
@media (max-width: 767px) {
	html[lang="ar"] #saudi-gap-section h2 {
		font-size: 36px !important;       /* display-lg-mobile */
		font-weight: 700 !important;
	}
}
html[lang="ar"] #saudi-gap-section h2 .text-secondary-fixed {
	color: #89f9af !important;            /* secondary-fixed */
}

/* 7) Paragraph — Tajawal 18px white 80%. */
html[lang="ar"] #saudi-gap-section p.text-body-lg {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 18px !important;           /* body-lg */
	font-weight: 400 !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, 0.8) !important; /* text-on-primary/80 */
}

/* 8) CTA button — green #006d3c + white text. */
html[lang="ar"] #saudi-gap-section a.bg-secondary {
	background-color: #006d3c !important; /* secondary */
	color: #ffffff !important;            /* on-secondary */
	border-color: transparent !important;
	font-family: 'Tajawal', sans-serif !important;
	font-size: 14px !important;           /* label-md */
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0.05em !important;
}
html[lang="ar"] #saudi-gap-section a.bg-secondary:hover {
	background-color: rgba(0, 109, 60, 0.9) !important;
	color: #ffffff !important;
}

/* 9) Logo card — white surface (bg-surface-container-lowest) + aspect-video. */
html[lang="ar"] #saudi-gap-section .aspect-video {
	aspect-ratio: 16 / 9 !important;
	background-color: #ffffff !important; /* bg-surface-container-lowest */
	border: 1px solid rgba(255, 255, 255, 0.1) !important; /* border-white/10 */
	border-radius: 12px !important;       /* rounded-xl */
	overflow: hidden !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
html[lang="ar"] #saudi-gap-section .aspect-video img {
	width: 100% !important;
	max-width: 24rem !important;          /* max-w-sm (384px) */
	height: auto !important;
	object-fit: contain !important;
}
/* CoC banner photo — show the WHOLE image, centered & contained
   (the photo is ~square, so contain + auto sizing keeps it fully visible). */
html[lang="ar"] #saudi-gap-section .aspect-video img.coc-img {
	max-width: 100% !important;
	width: auto !important;
	max-height: 100% !important;
	height: auto !important;
	object-fit: contain !important;
	object-position: center !important;
}

/* 10) RTL: content right-aligned. */
html[lang="ar"] #saudi-gap-section h2,
html[lang="ar"] #saudi-gap-section p.text-body-lg {
	text-align: right !important;
}

/* ------------------------------------------------------------
   15) SMART TRACKING & SUPPLY CHAINS (التتبع الذكي وسلاسل الإمداد) —
       match index-ar.html: bg-surface-container-low #f1f4f9, 1280px.
   ------------------------------------------------------------ */
/* 1) Section: surface-container-low (#f1f4f9) + py-section-gap +
      px-margin-desktop (48px). */
html[lang="ar"] #smart-tracking {
	background-color: #f1f4f9 !important; /* bg-surface-container-low */
	padding-top: 80px !important;         /* py-section-gap */
	padding-bottom: 80px !important;
	padding-left: 48px !important;        /* px-margin-desktop */
	padding-right: 48px !important;
}
@media (max-width: 767px) {
	html[lang="ar"] #smart-tracking {
		padding-left: 16px !important;    /* px-margin-mobile */
		padding-right: 16px !important;
	}
}

/* 2) Container: capped 1280px + centered. */
html[lang="ar"] #smart-tracking > div {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* 3) Layout: 12-col grid on lg + 24px gap (gap-gutter) + centered. */
html[lang="ar"] #smart-tracking .max-w-container-max.grid {
	display: grid !important;
	grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
	gap: 24px !important;
	align-items: center !important;
}
@media (min-width: 1024px) {
	html[lang="ar"] #smart-tracking .max-w-container-max.grid {
		grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
	}
	html[lang="ar"] #smart-tracking .max-w-container-max.grid > div:first-child {
		grid-column: span 5 / span 5 !important; /* lg:col-span-5 */
	}
	html[lang="ar"] #smart-tracking .max-w-container-max.grid > div:last-child {
		grid-column: span 7 / span 7 !important; /* lg:col-span-7 */
	}
}

/* 4) Heading — Cairo 32px primary + right-aligned. */
html[lang="ar"] #smart-tracking h2 {
	font-family: 'Cairo', 'Tajawal', sans-serif !important;
	font-size: 32px !important;           /* headline-md */
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: #003b65 !important;            /* text-primary */
	text-align: right !important;
}
/* Paragraph — Tajawal 18px. */
html[lang="ar"] #smart-tracking p.text-body-lg {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 18px !important;           /* body-lg */
	font-weight: 400 !important;
	line-height: 1.6 !important;
	color: #42474f !important;            /* text-on-surface-variant */
	text-align: right !important;
}

/* 5) Left list items (check_circle). */
html[lang="ar"] #smart-tracking ul li {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;                 /* gap-3 */
}
html[lang="ar"] #smart-tracking ul li .material-symbols-outlined {
	color: #006d3c !important;            /* text-secondary */
}
html[lang="ar"] #smart-tracking ul li h4 {
	font-family: 'Cairo', 'Tajawal', sans-serif !important;
	font-size: 14px !important;           /* label-md */
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: #181c20 !important;            /* text-on-surface */
	text-align: right !important;
}
html[lang="ar"] #smart-tracking ul li p {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 14px !important;           /* text-sm */
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: #42474f !important;            /* text-on-surface-variant */
	text-align: right !important;
}

/* 6) Right column: 2-col mini-grid + 16px gap + relative. */
html[lang="ar"] #smart-tracking .max-w-container-max.grid > div:last-child {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 16px !important;                 /* gap-4 */
	position: relative !important;
}

/* 7) Tracking cards — white + primary bottom border + rounded-lg. */
html[lang="ar"] #smart-tracking .tech-shadow {
	box-shadow: 0 8px 32px rgba(0, 59, 101, 0.08) !important;
}
html[lang="ar"] #smart-tracking .bg-surface-container-lowest {
	background-color: #ffffff !important; /* bg-surface-container-lowest */
	border-bottom: 2px solid #003b65 !important; /* border-b-2 border-primary */
	border-radius: 8px !important;        /* rounded-lg */
	padding: 24px !important;             /* p-6 */
}
html[lang="ar"] #smart-tracking .bg-surface-container-lowest .material-symbols-outlined {
	color: #003b65 !important;            /* text-primary */
	font-size: 30px !important;           /* text-3xl */
}
html[lang="ar"] #smart-tracking .bg-surface-container-lowest h4 {
	font-family: 'Cairo', 'Tajawal', sans-serif !important;
	font-size: 14px !important;           /* label-md */
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: #181c20 !important;            /* text-on-surface */
	text-align: right !important;
}

/* 8) Map image card — 192px tall + cover + rounded + shadow. */
html[lang="ar"] #smart-tracking .h-48 {
	height: 192px !important;             /* h-48 (12rem) */
	border-radius: 8px !important;        /* rounded-lg */
	overflow: hidden !important;
	box-shadow: 0 8px 32px rgba(0, 59, 101, 0.08) !important;
}
html[lang="ar"] #smart-tracking .h-48 img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* ------------------------------------------------------------
   16) FOOTER — match index-ar.html: bg-primary #003b65, white
       text, 1280px bounded, right-aligned (RTL).
   ------------------------------------------------------------ */
/* 1) Footer: brand blue #003b65 + white text + relative for map. */
html[lang="ar"] footer {
	background-color: #003b65 !important; /* bg-primary */
	color: #ffffff !important;            /* text-on-primary */
	position: relative !important;
	overflow: hidden !important;
}

/* 2) Main grid (4 cols): capped 1280px + centered + side padding. */
html[lang="ar"] footer > div:first-child {
	max-width: 1280px !important;         /* container-max */
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1rem !important;        /* px-margin-mobile (16px) */
	padding-right: 1rem !important;
	padding-top: 80px !important;         /* py-section-gap */
	padding-bottom: 80px !important;
}
@media (min-width: 768px) {
	html[lang="ar"] footer > div:first-child {
		padding-left: 3rem !important;    /* md:px-margin-desktop (48px) */
		padding-right: 3rem !important;
	}
}

/* 3) Grid: 1 col mobile / 4 cols md + 24px gap (gap-gutter). */
html[lang="ar"] footer > div:first-child {
	display: grid !important;
	grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
	gap: 24px !important;
}
@media (min-width: 768px) {
	html[lang="ar"] footer > div:first-child {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

/* 4) Column spans: brand 1 / links 1 / offices 2. */
html[lang="ar"] footer > div:first-child > div:nth-child(1),
html[lang="ar"] footer > div:first-child > div:nth-child(2) {
	grid-column: span 1 / span 1 !important;
}
html[lang="ar"] footer > div:first-child > div:nth-child(3) {
	grid-column: span 2 / span 2 !important; /* md:col-span-2 */
}

/* 5) Brand logo: 48px / md 56px (h-12 / md:h-14). */
html[lang="ar"] footer .mb-6 a img {
	height: 48px !important;
	width: auto !important;
	object-fit: contain !important;
}
@media (min-width: 768px) {
	html[lang="ar"] footer .mb-6 a img {
		height: 56px !important;
	}
}

/* 6) Tagline — Tajawal 16px white 80% (text-on-primary/80). */
html[lang="ar"] footer p.text-body-md {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 16px !important;           /* body-md */
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: rgba(255, 255, 255, 0.8) !important;
}

/* 7) Social circle: 40px + white/10 tint. */
html[lang="ar"] footer .w-10.h-10 {
	width: 40px !important;
	height: 40px !important;
	border-radius: 9999px !important;
	background-color: rgba(255, 255, 255, 0.1) !important; /* bg-white/10 */
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #ffffff !important;
}

/* 8) Column titles — Cairo 24px white (headline-sm). */
html[lang="ar"] footer h4 {
	font-family: 'Cairo', 'Tajawal', sans-serif !important;
	font-size: 24px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: #ffffff !important;
	text-align: right !important;
}

/* 9) Quick links — Tajawal 16px white 80%, hover green #89f9af. */
html[lang="ar"] footer ul li a {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: rgba(255, 255, 255, 0.8) !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	text-align: right !important;
}
html[lang="ar"] footer ul li a:hover {
	color: #89f9af !important;            /* hover:text-secondary-fixed-dim */
}

/* 10) Offices address — Tajawal 16px white 80%. */
html[lang="ar"] footer address p {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: rgba(255, 255, 255, 0.8) !important;
	text-align: right !important;
}

/* 11) Copyright bar: capped 1280px + centered + space-between. */
html[lang="ar"] footer > div:nth-child(2) {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1rem !important;
	padding-right: 1rem !important;
}
@media (min-width: 768px) {
	html[lang="ar"] footer > div:nth-child(2) {
		padding-left: 3rem !important;
		padding-right: 3rem !important;
	}
}

/* 12) Copyright text — white 60%. */
html[lang="ar"] footer > div:nth-child(2) p,
html[lang="ar"] footer > div:nth-child(2) span {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: rgba(255, 255, 255, 0.6) !important; /* text-on-primary/60 */
}
html[lang="ar"] footer > div:nth-child(2) a {
	color: rgba(255, 255, 255, 0.6) !important;
}
html[lang="ar"] footer > div:nth-child(2) a:hover {
	color: #ffffff !important;
}

/* 13) Footer links + language row: RTL alignment. */
html[lang="ar"] footer > div:nth-child(2) {
	justify-content: space-between !important;
	align-items: center !important;
}
html[lang="ar"] footer > div:nth-child(2) .flex {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

/* ------------------------------------------------------------
   17) MEWA PARTNERSHIP (التوافق مع أنظمة وزارة التجارة) — new
       section below Saudi G.A.P. Image on the RIGHT, text on the
       LEFT, surface tint #f7f9ff, 1280px bounded.
   ------------------------------------------------------------ */
/* 1) Section: EXACT copy of the Saudi G.A.P (ممثلين لأنظمة) background —
      #003b65 + white dotted pattern + green wash from the left. */
html[lang="ar"] #mewa-section {
	background-color: #003b65 !important; /* bg-primary (same as above) */
	color: #ffffff !important;            /* text-on-primary */
	/* White dotted pattern (equivalent to the inset-0 opacity-10 div) + green wash (left half). */
	background-image:
		radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.1) 1px, transparent 0),
		linear-gradient(to right, rgba(0, 109, 60, 0.2), rgba(0, 109, 60, 0)) !important;
	background-size: 32px 32px, 50% 100% !important; /* dots full / green wash left half */
	background-position: center, left center !important;
	background-repeat: repeat, no-repeat !important;
	padding-top: 80px !important;         /* py-section-gap */
	padding-bottom: 80px !important;
	padding-left: 1rem !important;        /* px-margin-mobile (16px) */
	padding-right: 1rem !important;
}
@media (min-width: 768px) {
	html[lang="ar"] #mewa-section {
		padding-left: 3rem !important;    /* md:px-margin-desktop (48px) */
		padding-right: 3rem !important;
	}
}

/* 2) Container: capped 1280px + centered. */
html[lang="ar"] #mewa-section > div {
	max-width: 1280px !important;         /* container-max */
	margin-left: auto !important;
	margin-right: auto !important;
}

/* 3) Layout: two equal columns on lg + 48px gap (gap-12). */
html[lang="ar"] #mewa-section .flex.flex-col {
	gap: 3rem !important;
}
@media (min-width: 1024px) {
	html[lang="ar"] #mewa-section .flex.flex-col {
		flex-direction: row !important;
		align-items: center !important;
	}
	html[lang="ar"] #mewa-section .flex.flex-col > div {
		width: 50% !important;            /* lg:w-1/2 */
	}
}

/* 4) Badge (التوافق التنظيمي) — same treatment as the Saudi G.A.P
      badge: white/10 pill + light green label. */
html[lang="ar"] #mewa-section .inline-flex {
	background-color: rgba(255, 255, 255, 0.1) !important; /* bg-surface-container-lowest/10 */
	border-color: rgba(255, 255, 255, 0.2) !important;      /* border-surface-container-lowest/20 */
	backdrop-filter: blur(4px) !important;                  /* backdrop-blur-sm */
}
html[lang="ar"] #mewa-section .inline-flex span.text-label-sm {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 12px !important;           /* label-sm */
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: #89f9af !important;            /* text-secondary-fixed */
}

/* 5) Heading — Cairo 32px white + light green highlight. */
html[lang="ar"] #mewa-section h2 {
	font-family: 'Cairo', 'Tajawal', sans-serif !important;
	font-size: 32px !important;           /* headline-md */
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: #ffffff !important;            /* text-on-primary */
	text-align: right !important;
}
@media (max-width: 767px) {
	html[lang="ar"] #mewa-section h2 {
		font-size: 28px !important;
	}
}
html[lang="ar"] #mewa-section h2 .text-secondary {
	color: #89f9af !important;            /* light green on blue */
}

/* 6) Paragraph — Tajawal 18px white 80%. */
html[lang="ar"] #mewa-section p.text-body-lg {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 18px !important;           /* body-lg */
	font-weight: 400 !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, 0.8) !important; /* text-on-primary/80 */
	text-align: right !important;
}

/* 7) CTA button — green #006d3c + white text. */
html[lang="ar"] #mewa-section a.bg-secondary {
	background-color: #006d3c !important; /* secondary */
	color: #ffffff !important;            /* on-secondary */
	border-color: transparent !important;
	font-family: 'Tajawal', sans-serif !important;
	font-size: 14px !important;           /* label-md */
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0.05em !important;
}
html[lang="ar"] #mewa-section a.bg-secondary:hover {
	background-color: rgba(0, 109, 60, 0.9) !important;
	color: #ffffff !important;
}

/* 8) Logo card — white (bg-surface-container-lowest) + aspect-video,
      centered, same treatment as the Saudi G.A.P card but on the right. */
html[lang="ar"] #mewa-section .aspect-video {
	aspect-ratio: 16 / 9 !important;
	background-color: #ffffff !important; /* bg-surface-container-lowest */
	border: 1px solid rgba(194, 199, 209, 0.2) !important; /* border-outline-variant/20 */
	border-radius: 12px !important;       /* rounded-xl */
	overflow: hidden !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
html[lang="ar"] #mewa-section .aspect-video img {
	width: 100% !important;
	max-width: 24rem !important;          /* max-w-sm (384px) */
	height: auto !important;
	object-fit: contain !important;
}

/* ------------------------------------------------------------
   20) ABOUT US PAGE (صفحة من نحن) — professional redesign.
       Shared template (both languages) → generic selectors, fully
       custom classes so Tailwind CDN cannot interfere.
   ------------------------------------------------------------ */

/* ============ HERO ============ */
:is(#about-hero, #sect-hero) {
	position: relative !important;
	overflow: hidden !important;
	background-color: #003b65 !important;
	color: #ffffff !important;
	padding: 100px 16px 130px !important;
	text-align: center !important;
}
:is(#about-hero, #sect-hero) .ah-dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.14) 1px, transparent 0);
	background-size: 30px 30px;
}
:is(#about-hero, #sect-hero) .ah-grad {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(0, 109, 60, 0.3), transparent 48%);
}
:is(#about-hero, #sect-hero) .ah-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.55;
	pointer-events: none;
}
:is(#about-hero, #sect-hero) .ah-glow-a { width: 440px; height: 440px; background: #0a4d80; top: -150px; inset-inline-start: -90px; }
:is(#about-hero, #sect-hero) .ah-glow-b { width: 380px; height: 380px; background: #00723e; bottom: -130px; inset-inline-end: -80px; opacity: 0.35; }
:is(#about-hero, #sect-hero) .ah-ring {
	position: absolute;
	border: 1.5px solid rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	pointer-events: none;
}
:is(#about-hero, #sect-hero) .ah-ring-1 { width: 560px; height: 560px; top: -240px; left: 50%; transform: translateX(-50%); }
:is(#about-hero, #sect-hero) .ah-ring-2 { width: 760px; height: 760px; bottom: -480px; left: 50%; transform: translateX(-50%); }
:is(#about-hero, #sect-hero) .ah-content { position: relative; z-index: 3; max-width: 920px; margin: 0 auto; }

:is(#about-hero, #sect-hero) .ah-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 20px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.22);
	backdrop-filter: blur(6px);
	font-family: 'Tajawal', 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #89f9af;
	margin-bottom: 26px;
}
:is(#about-hero, #sect-hero) .ah-badge .material-symbols-outlined { font-size: 16px; }
:is(#about-hero, #sect-hero) h1 {
	font-family: 'Cairo', 'Montserrat', sans-serif;
	font-size: 56px;
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 20px;
	color: #ffffff;
	letter-spacing: -0.01em;
}
@media (max-width: 767px) {
	:is(#about-hero, #sect-hero) h1 { font-size: 38px; }
}
:is(#about-hero, #sect-hero) h1 .ah-accent { color: #89f9af; }
:is(#about-hero, #sect-hero) .ah-divider {
	width: 90px;
	height: 4px;
	border-radius: 99px;
	background: linear-gradient(90deg, #89f9af, #006d3c);
	margin: 0 auto 38px;
}
:is(#about-hero, #sect-hero) .ah-lead {
	font-family: 'Tajawal', 'Inter', sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.75;
	color: #ffffff;
	margin: 0 auto 12px;
	max-width: 760px;
}
:is(#about-hero, #sect-hero) .ah-sub {
	font-family: 'Tajawal', 'Inter', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.82);
	margin: 0 auto 34px;
	max-width: 720px;
}
:is(#about-hero, #sect-hero) .ah-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 42px;
}
:is(#about-hero, #sect-hero) .ah-actions a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 32px;
	border-radius: 12px;
	text-decoration: none;
	font-family: 'Tajawal', 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 700;
	transition: all 0.25s ease;
}
:is(#about-hero, #sect-hero) .ah-actions a .material-symbols-outlined { font-size: 18px; }
:is(#about-hero, #sect-hero) .ah-btn-primary {
	background: #006d3c;
	color: #ffffff;
	box-shadow: 0 12px 32px rgba(0, 109, 60, 0.35);
}
:is(#about-hero, #sect-hero) .ah-btn-primary:hover {
	background: #007d45;
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgba(0, 109, 60, 0.45);
}
:is(#about-hero, #sect-hero) .ah-btn-ghost {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.25);
}
:is(#about-hero, #sect-hero) .ah-btn-ghost:hover {
	background: rgba(255, 255, 255, 0.16);
	transform: translateY(-3px);
}
:is(#about-hero, #sect-hero) .ah-chips {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
:is(#about-hero, #sect-hero) .ah-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.92);
	font-family: 'Tajawal', 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 500;
}
:is(#about-hero, #sect-hero) .ah-chip .material-symbols-outlined { font-size: 17px; color: #89f9af; }

/* ============ INTRO (من نحن) ============ */
#about-intro {
	background: #f7f9ff;
	padding: 96px 16px;
}
#about-intro .max-w-container-max {
	max-width: 1240px;
	margin: 0 auto;
}
#about-intro .ai-grid {
	display: grid;
	gap: 56px;
	align-items: center;
}
@media (min-width: 1024px) {
	#about-intro .ai-grid { grid-template-columns: 1.02fr 0.98fr; }
}

#about-intro .ai-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border-radius: 999px;
	background: rgba(0, 109, 60, 0.1);
	border: 1px solid rgba(0, 109, 60, 0.2);
	font-family: 'Tajawal', 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #006d3c;
	margin-bottom: 22px;
}
#about-intro .ai-badge .material-symbols-outlined { font-size: 15px; }
#about-intro h2 {
	font-family: 'Cairo', 'Montserrat', sans-serif;
	font-size: 36px;
	font-weight: 800;
	color: #003b65;
	line-height: 1.3;
	margin: 0 0 18px;
}
@media (max-width: 767px) {
	#about-intro h2 { font-size: 28px; }
}
#about-intro .ai-text {
	font-family: 'Tajawal', 'Inter', sans-serif;
	font-size: 18px;
	line-height: 2;
	color: #42474f;
	margin: 0 0 18px;
}
#about-intro .ai-quote {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: #ffffff;
	border-inline-start: 4px solid #006d3c;
	border-radius: 0 14px 14px 0;
	padding: 18px 22px;
	box-shadow: 0 8px 24px rgba(0, 59, 101, 0.06);
	margin-top: 8px;
}
#about-intro .ai-quote .material-symbols-outlined { color: #006d3c; font-size: 26px; flex-shrink: 0; }
#about-intro .ai-quote p {
	font-family: 'Tajawal', 'Inter', sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.8;
	color: #003b65;
	margin: 0;
}

/* Pillars cards. */
#about-intro .ai-pillars { display: flex; flex-direction: column; gap: 18px; }
#about-intro .ai-pillar {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	background: #ffffff;
	border: 1px solid rgba(194, 199, 209, 0.4);
	border-radius: 16px;
	padding: 22px 24px;
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
}
#about-intro .ai-pillar::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 5px;
	height: 100%;
	background: var(--pc, #003b65);
}
#about-intro .ai-pillar:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 44px rgba(0, 59, 101, 0.12);
	border-color: var(--pc, #003b65);
}
#about-intro .ai-pillar .ai-ic {
	width: 58px;
	height: 58px;
	border-radius: 14px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
#about-intro .ai-pillar .ai-ic .material-symbols-outlined { font-size: 29px; }
#about-intro .ai-pillar.blue .ai-ic { background: rgba(0, 59, 101, 0.1); color: #003b65; }
#about-intro .ai-pillar.green .ai-ic { background: rgba(0, 109, 60, 0.1); color: #006d3c; }
#about-intro .ai-pillar.gold .ai-ic { background: rgba(240, 180, 41, 0.14); color: #a97c00; }
#about-intro .ai-pillar h3 {
	font-family: 'Cairo', 'Montserrat', sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: #003b65;
	margin: 0 0 7px;
}
#about-intro .ai-pillar p {
	font-family: 'Tajawal', 'Inter', sans-serif;
	font-size: 15px;
	line-height: 1.75;
	color: #42474f;
	margin: 0;
}
#about-intro .ai-pillar .ai-step {
	position: absolute;
	top: 10px;
	inset-inline-end: 16px;
	font-family: 'Cairo', sans-serif;
	font-size: 44px;
	font-weight: 800;
	color: rgba(0, 59, 101, 0.06);
	line-height: 1;
}

/* ============ VISION & MISSION ============ */
#about-vm {
	position: relative;
	background: linear-gradient(180deg, #eef2f8 0%, #f7f9ff 100%);
	padding: 96px 16px 110px;
	overflow: hidden;
}
#about-vm .max-w-container-max {
	max-width: 1240px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
#about-vm .vm-head { text-align: center; margin-bottom: 56px; }
#about-vm .vm-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border-radius: 999px;
	background: rgba(0, 59, 101, 0.08);
	border: 1px solid rgba(0, 59, 101, 0.16);
	font-family: 'Tajawal', 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #003b65;
	margin-bottom: 18px;
}
#about-vm .vm-head h2 {
	font-family: 'Cairo', 'Montserrat', sans-serif;
	font-size: 38px;
	font-weight: 800;
	color: #003b65;
	margin: 0 0 14px;
}
#about-vm .vm-head p {
	font-family: 'Tajawal', 'Inter', sans-serif;
	font-size: 17px;
	color: #42474f;
	margin: 0;
}
#about-vm .vm-divider {
	width: 70px;
	height: 4px;
	border-radius: 99px;
	background: linear-gradient(90deg, #003b65, #006d3c);
	margin: 18px auto 0;
}

#about-vm .vm-cards { display: grid; gap: 28px; }
@media (min-width: 900px) {
	#about-vm .vm-cards { grid-template-columns: 1fr 1fr; }
}
#about-vm .vm-card {
	position: relative;
	background: #ffffff;
	border-radius: 24px;
	padding: 40px 36px;
	border: 1px solid rgba(194, 199, 209, 0.25);
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0, 59, 101, 0.08);
	transition: all 0.35s ease;
}
#about-vm .vm-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 30px 70px rgba(0, 59, 101, 0.16);
}
#about-vm .vm-card::after {
	content: '';
	position: absolute;
	top: -70px;
	inset-inline-end: -70px;
	width: 190px;
	height: 190px;
	border-radius: 50%;
	background: var(--vg, rgba(0, 59, 101, 0.05));
}
#about-vm .vm-card.vision { border-top: 5px solid #003b65; --vg: rgba(0, 59, 101, 0.06); }
#about-vm .vm-card.mission { border-top: 5px solid #006d3c; --vg: rgba(0, 109, 60, 0.07); }
#about-vm .vm-ic {
	width: 78px;
	height: 78px;
	border-radius: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
	position: relative;
	z-index: 2;
}
#about-vm .vm-ic .material-symbols-outlined { font-size: 40px; }
#about-vm .vm-card.vision .vm-ic { background: rgba(0, 59, 101, 0.1); color: #003b65; box-shadow: 0 10px 26px rgba(0, 59, 101, 0.18); }
#about-vm .vm-card.mission .vm-ic { background: rgba(0, 109, 60, 0.1); color: #006d3c; box-shadow: 0 10px 26px rgba(0, 109, 60, 0.18); }
#about-vm .vm-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border-radius: 999px;
	font-family: 'Cairo', 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 16px;
}
#about-vm .vm-card.vision .vm-tag { background: rgba(0, 59, 101, 0.08); color: #003b65; }
#about-vm .vm-card.mission .vm-tag { background: rgba(0, 109, 60, 0.1); color: #006d3c; }
#about-vm .vm-card p {
	font-family: 'Tajawal', 'Inter', sans-serif;
	font-size: 18px;
	line-height: 2.05;
	color: #42474f;
	margin: 0;
	position: relative;
	z-index: 2;
}

/* CTA strip. */
#about-vm .vm-cta {
	margin-top: 44px;
	border-radius: 22px;
	padding: 40px 44px;
	position: relative;
	overflow: hidden;
	background: linear-gradient(120deg, #003b65, #0a4d80);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	flex-wrap: wrap;
	box-shadow: 0 24px 60px rgba(0, 59, 101, 0.25);
}
#about-vm .vm-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.12) 1px, transparent 0);
	background-size: 26px 26px;
	opacity: 0.6;
}
#about-vm .vm-cta > * { position: relative; z-index: 2; }
#about-vm .vm-cta .vm-cta-text { display: flex; align-items: center; gap: 16px; }
#about-vm .vm-cta .vm-cta-text .material-symbols-outlined { font-size: 34px; color: #89f9af; }
#about-vm .vm-cta p {
	font-family: 'Tajawal', 'Inter', sans-serif;
	font-size: 18px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.94);
	margin: 0;
}
#about-vm .vm-cta a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 15px 32px;
	border-radius: 12px;
	background: #006d3c;
	color: #ffffff;
	text-decoration: none;
	font-family: 'Tajawal', 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 700;
	transition: all 0.25s ease;
	box-shadow: 0 12px 30px rgba(0, 109, 60, 0.4);
}
#about-vm .vm-cta a:hover {
	background: #007d45;
	transform: translateY(-3px);
}

/* ------------------------------------------------------------
   19) INSPECTOR APPLICATION PAGE (صفحة نموذج التقديم) —
       hero matches Saudi G.A.P style; Arabic fonts for the form.
   ------------------------------------------------------------ */
/* 1) Page hero: blue #003b65 + white text (same identity as sections). */
html[lang="ar"] #inspectors-page-hero {
	background-color: #003b65 !important;
	color: #ffffff !important;
}
html[lang="ar"] #inspectors-page-hero h1 {
	font-family: 'Cairo', 'Tajawal', sans-serif !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	text-align: center !important;
}
html[lang="ar"] #inspectors-page-hero p {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 18px !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, 0.85) !important;
	text-align: center !important;
}
html[lang="ar"] #inspectors-page-hero .inline-flex {
	background-color: rgba(255, 255, 255, 0.1) !important;
	border-color: rgba(255, 255, 255, 0.2) !important;
}
html[lang="ar"] #inspectors-page-hero .inline-flex span.text-label-sm {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: #89f9af !important;
}

/* 2) Form section background. */
html[lang="ar"] #inspectors-apply-section {
	background-color: #f7f9ff !important; /* bg-background / bg-surface */
	padding-top: 80px !important;
	padding-bottom: 80px !important;
}
html[lang="ar"] #inspectors-apply-section .max-w-container-max {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* 3) Headings inside the form block — Cairo. */
html[lang="ar"] #inspectors-apply-section h2 {
	font-family: 'Cairo', 'Tajawal', sans-serif !important;
	font-size: 32px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: #003b65 !important;
	text-align: center !important;
}
html[lang="ar"] #inspectors-apply-section .text-body-lg {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	color: #42474f !important;
}

/* 4) Arabic fonts for every form control + labels. */
html[lang="ar"] .inspector-form label {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0.05em !important;
	color: #181c20 !important;
	text-align: right !important;
}
html[lang="ar"] .inspector-form input[type="text"],
html[lang="ar"] .inspector-form input[type="email"],
html[lang="ar"] .inspector-form input[type="tel"],
html[lang="ar"] .inspector-form input[type="number"],
html[lang="ar"] .inspector-form select,
html[lang="ar"] .inspector-form textarea {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: #181c20 !important;
	background-color: #f7f9ff !important;
	border: 1px solid rgba(194, 199, 209, 0.6) !important;
	border-radius: 8px !important;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}
html[lang="ar"] .inspector-form input:focus,
html[lang="ar"] .inspector-form select:focus,
html[lang="ar"] .inspector-form textarea:focus {
	border-color: #003b65 !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(0, 59, 101, 0.15) !important;
}
html[lang="ar"] .inspector-form ::placeholder {
	color: rgba(66, 71, 79, 0.5) !important;
}

/* 5) Submit button. */
html[lang="ar"] .inspector-form button[type="submit"] {
	background-color: #006d3c !important;
	color: #ffffff !important;
	font-family: 'Tajawal', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0.05em !important;
}
html[lang="ar"] .inspector-form button[type="submit"]:hover {
	background-color: rgba(0, 109, 60, 0.9) !important;
}

/* 6) Success card. */
html[lang="ar"] #inspectors-apply-section .bg-white.rounded-xl {
	box-shadow: 0 8px 30px rgba(0, 109, 60, 0.12) !important;
}
html[lang="ar"] #inspectors-apply-section .bg-white.rounded-xl h2 {
	text-align: center !important;
}
html[lang="ar"] #inspectors-apply-section .bg-white.rounded-xl p {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 18px !important;
	line-height: 1.6 !important;
	color: #42474f !important;
	text-align: center !important;
}
html[lang="ar"] #inspectors-apply-section .bg-white.rounded-xl a.bg-secondary {
	background-color: #006d3c !important;
	color: #ffffff !important;
	font-family: 'Tajawal', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}
html[lang="ar"] #inspectors-apply-section .bg-white.rounded-xl a.bg-secondary:hover {
	background-color: rgba(0, 109, 60, 0.9) !important;
}

/* 7) Error alert. */
html[lang="ar"] #inspectors-apply-section .bg-error\/10 {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	text-align: right !important;
}

/* ------------------------------------------------------------
   18) JOIN OUR INSPECTOR NETWORK (انضم إلى شبكة مفتشينا) —
       below Saudi G.A.P. Full-width expressive photo + blue
       overlay CTA card, 1280px bounded.
   ------------------------------------------------------------ */
/* 1) Section: surface tint #f7f9ff + py-section-gap + side padding. */
html[lang="ar"] #inspectors-cta {
	background-color: #f7f9ff !important; /* bg-surface */
	padding-top: 80px !important;         /* py-section-gap */
	padding-bottom: 80px !important;
	padding-left: 1rem !important;        /* px-margin-mobile (16px) */
	padding-right: 1rem !important;
}
@media (min-width: 768px) {
	html[lang="ar"] #inspectors-cta {
		padding-left: 3rem !important;    /* md:px-margin-desktop (48px) */
		padding-right: 3rem !important;
	}
}

/* 2) Container: capped 1280px + centered. */
html[lang="ar"] #inspectors-cta > div {
	max-width: 1280px !important;         /* container-max */
	margin-left: auto !important;
	margin-right: auto !important;
}

/* 3) CTA card: rounded-2xl + overflow hidden + relative. */
html[lang="ar"] #inspectors-cta .rounded-2xl.relative {
	border-radius: 16px !important;       /* rounded-2xl */
	overflow: hidden !important;
	position: relative !important;
	box-shadow: 0 24px 64px rgba(0, 59, 101, 0.25) !important; /* shadow-2xl */
}

/* 4) Background photo: absolute, full-cover. */
html[lang="ar"] #inspectors-cta .rounded-2xl.relative img.absolute {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* 5) Blue overlay (bg-primary/90). */
html[lang="ar"] #inspectors-cta .absolute.inset-0.bg-primary\/90 {
	background-color: rgba(0, 59, 101, 0.9) !important; /* bg-primary/90 */
}

/* 6) Content row: two sides on md, centered column on mobile. */
html[lang="ar"] #inspectors-cta .relative.z-10 {
	position: relative !important;
	z-index: 10 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 2.5rem !important;               /* gap-10 */
	text-align: center !important;
}
@media (min-width: 768px) {
	html[lang="ar"] #inspectors-cta .relative.z-10 {
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: center !important;
		text-align: right !important;
	}
	html[lang="ar"] #inspectors-cta .relative.z-10 > div {
		text-align: right !important;
	}
}

/* 7) Badge (شبكة مفتشين عالمية) — green light #89f9af. */
html[lang="ar"] #inspectors-cta .inline-flex span.text-label-sm {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 12px !important;           /* label-sm */
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: #89f9af !important;            /* text-secondary-fixed */
}

/* 8) Heading — Cairo 32px white. */
html[lang="ar"] #inspectors-cta h2 {
	font-family: 'Cairo', 'Tajawal', sans-serif !important;
	font-size: 32px !important;           /* headline-md */
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: #ffffff !important;            /* text-on-primary */
}
@media (max-width: 767px) {
	html[lang="ar"] #inspectors-cta h2 {
		font-size: 26px !important;
	}
}

/* 9) Paragraph — Tajawal 18px white 85%. */
html[lang="ar"] #inspectors-cta p.text-body-lg {
	font-family: 'Tajawal', sans-serif !important;
	font-size: 18px !important;           /* body-lg */
	font-weight: 400 !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, 0.85) !important; /* text-on-primary/85 */
}

/* 10) CTA button — green #006d3c + white text. */
html[lang="ar"] #inspectors-cta a.bg-secondary {
	background-color: #006d3c !important; /* secondary */
	color: #ffffff !important;            /* on-secondary */
	border-color: transparent !important;
	font-family: 'Tajawal', sans-serif !important;
	font-size: 14px !important;           /* label-md */
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0.05em !important;
	flex-shrink: 0 !important;
}
html[lang="ar"] #inspectors-cta a.bg-secondary:hover {
	background-color: rgba(0, 109, 60, 0.9) !important;
	color: #ffffff !important;
}

/* ------------------------------------------------------------
   21) INSPECTION PAGE (التفتيش والتدقيق) — professional redesign.
       Shared template (both languages) → generic selectors.
   ------------------------------------------------------------ */

/* ============ HERO (reuses the About hero visual identity) ============ */
#insp-hero {
	position: relative !important;
	overflow: hidden !important;
	background-color: #003b65 !important;
	color: #ffffff !important;
	padding: 100px 16px 130px !important;
	text-align: center !important;
}
#insp-hero .ah-dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.14) 1px, transparent 0);
	background-size: 30px 30px;
}
#insp-hero .ah-grad {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(0, 109, 60, 0.3), transparent 48%);
}
#insp-hero .ah-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.55;
	pointer-events: none;
}
#insp-hero .ah-glow-a { width: 440px; height: 440px; background: #0a4d80; top: -150px; inset-inline-start: -90px; }
#insp-hero .ah-glow-b { width: 380px; height: 380px; background: #00723e; bottom: -130px; inset-inline-end: -80px; opacity: 0.35; }
#insp-hero .ah-ring {
	position: absolute;
	border: 1.5px solid rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	pointer-events: none;
}
#insp-hero .ah-ring-1 { width: 560px; height: 560px; top: -240px; left: 50%; transform: translateX(-50%); }
#insp-hero .ah-ring-2 { width: 760px; height: 760px; bottom: -480px; left: 50%; transform: translateX(-50%); }
#insp-hero .ah-content { position: relative; z-index: 3; max-width: 920px; margin: 0 auto; }
#insp-hero .ah-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 20px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.22);
	backdrop-filter: blur(6px);
	font-family: 'Tajawal', 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #89f9af;
	margin-bottom: 26px;
}
#insp-hero .ah-badge .material-symbols-outlined { font-size: 16px; }
#insp-hero h1 {
	font-family: 'Cairo', 'Montserrat', sans-serif;
	font-size: 56px;
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 20px;
	color: #ffffff;
	letter-spacing: -0.01em;
}
@media (max-width: 767px) {
	#insp-hero h1 { font-size: 38px; }
}
#insp-hero h1 .ah-accent { color: #89f9af; }
#insp-hero .ah-divider {
	width: 90px;
	height: 4px;
	border-radius: 99px;
	background: linear-gradient(90deg, #89f9af, #006d3c);
	margin: 0 auto 38px;
}
#insp-hero .ah-lead {
	font-family: 'Tajawal', 'Inter', sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.8;
	color: #ffffff;
	margin: 0 auto 34px;
	max-width: 780px;
}
#insp-hero .ah-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 42px;
}
#insp-hero .ah-actions a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 32px;
	border-radius: 12px;
	text-decoration: none;
	font-family: 'Tajawal', 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 700;
	transition: all 0.25s ease;
}
#insp-hero .ah-actions a .material-symbols-outlined { font-size: 18px; }
#insp-hero .ah-btn-primary {
	background: #006d3c;
	color: #ffffff;
	box-shadow: 0 12px 32px rgba(0, 109, 60, 0.35);
}
#insp-hero .ah-btn-primary:hover {
	background: #007d45;
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgba(0, 109, 60, 0.45);
}
#insp-hero .ah-btn-ghost {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.25);
}
#insp-hero .ah-btn-ghost:hover {
	background: rgba(255, 255, 255, 0.16);
	transform: translateY(-3px);
}
#insp-hero .ah-chips {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
#insp-hero .ah-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.92);
	font-family: 'Tajawal', 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 500;
}
#insp-hero .ah-chip .material-symbols-outlined { font-size: 17px; color: #89f9af; }

/* ============ SERVICES (خدماتنا) ============ */
#insp-services {
	background: #ffffff;
	padding: 96px 16px;
}
#insp-services .max-w-container-max {
	max-width: 1240px;
	margin: 0 auto;
}
.insp-head { text-align: center; margin-bottom: 56px; }
.insp-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border-radius: 999px;
	background: rgba(0, 59, 101, 0.08);
	border: 1px solid rgba(0, 59, 101, 0.16);
	font-family: 'Tajawal', 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #003b65;
	margin-bottom: 18px;
}
.insp-badge .material-symbols-outlined { font-size: 15px; }
.insp-head h2 {
	font-family: 'Cairo', 'Montserrat', sans-serif;
	font-size: 38px;
	font-weight: 800;
	color: #003b65;
	margin: 0 0 14px;
}
.insp-divider {
	width: 70px;
	height: 4px;
	border-radius: 99px;
	background: linear-gradient(90deg, #003b65, #006d3c);
	margin: 18px auto 0;
}

.insp-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 1023px) {
	.insp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
	.insp-grid { grid-template-columns: 1fr; }
}
.insp-card {
	position: relative;
	background: #f7f9ff;
	border: 1px solid rgba(194, 199, 209, 0.4);
	border-radius: 18px;
	padding: 30px 26px;
	overflow: hidden;
	transition: all 0.3s ease;
	text-align: start;
}
.insp-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 45px rgba(0, 59, 101, 0.12);
	border-color: #003b65;
}
.insp-num {
	position: absolute;
	top: 12px;
	inset-inline-end: 16px;
	font-family: 'Cairo', sans-serif;
	font-size: 40px;
	font-weight: 800;
	color: rgba(0, 59, 101, 0.07);
	line-height: 1;
}
.insp-ic {
	width: 62px;
	height: 62px;
	border-radius: 16px;
	background: rgba(0, 59, 101, 0.1);
	color: #003b65;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}
.insp-ic .material-symbols-outlined { font-size: 30px; }
.insp-card:nth-child(3n + 2) .insp-ic { background: rgba(0, 109, 60, 0.1); color: #006d3c; }
.insp-card:nth-child(3n) .insp-ic { background: rgba(240, 180, 41, 0.14); color: #a97c00; }
.insp-card h3 {
	font-family: 'Cairo', 'Montserrat', sans-serif;
	font-size: 19px;
	font-weight: 700;
	color: #003b65;
	margin: 0 0 14px;
	line-height: 1.45;
}
.insp-line {
	display: block;
	width: 40px;
	height: 3px;
	border-radius: 99px;
	background: linear-gradient(90deg, #003b65, #006d3c);
	transition: width 0.3s ease;
}
.insp-card:hover .insp-line { width: 100%; }

/* ============ WORKFLOW (كيف تتم الخدمة) ============ */
#insp-workflow {
	position: relative;
	overflow: hidden;
	background: #0a3a5c;
	padding: 96px 16px 110px;
}
#insp-workflow::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.08) 1px, transparent 0);
	background-size: 28px 28px;
	opacity: 0.5;
}
#insp-workflow .max-w-container-max {
	max-width: 1240px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
#insp-workflow .insp-badge-dark {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
	color: #89f9af;
}
#insp-workflow .insp-head h2 { color: #ffffff; }
.wf-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
@media (max-width: 1023px) {
	.wf-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
	.wf-grid { grid-template-columns: 1fr; }
}
.wf-step {
	position: relative;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 20px;
	padding: 30px 24px;
	text-align: center;
	backdrop-filter: blur(4px);
	transition: all 0.3s ease;
}
.wf-step:hover {
	background: rgba(255, 255, 255, 0.1);
	transform: translateY(-5px);
	border-color: rgba(137, 249, 175, 0.4);
}
.wf-num {
	position: absolute;
	top: 14px;
	inset-inline-start: 18px;
	font-family: 'Cairo', sans-serif;
	font-size: 15px;
	font-weight: 800;
	color: #89f9af;
	background: rgba(137, 249, 175, 0.12);
	border: 1px solid rgba(137, 249, 175, 0.3);
	border-radius: 999px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wf-ic {
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	border-radius: 18px;
	background: rgba(137, 249, 175, 0.12);
	color: #89f9af;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wf-ic .material-symbols-outlined { font-size: 32px; }
.wf-title {
	font-family: 'Cairo', 'Montserrat', sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.5;
}
.wf-arrow {
	position: absolute;
	top: 50%;
	inset-inline-end: -26px;
	transform: translateY(-50%);
	color: rgba(255, 255, 255, 0.35);
	font-size: 20px;
	z-index: 3;
}
@media (max-width: 1023px) {
	.wf-arrow { display: none; }
}

/* ------------------------------------------------------------
   22) SERVICES PAGE (خدماتنا) — Arabic only
       Template: template-services.php
   ------------------------------------------------------------ */
#svc-hero {
	position: relative;
	width: 100%;
	min-height: 42vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #003b65; /* primary */
	padding: 88px 16px 64px;
}
#svc-hero .ah-content { text-align: center; }
#svc-hero h1 { margin: 0; }
#svc-hero .ah-content { position: relative; z-index: 4; max-width: 1280px; margin: 0 auto; width: 100%; }
#svc-hero h1 {
	font-family: 'Cairo', 'Tajawal', sans-serif;
	font-weight: 800;
	font-size: clamp(32px, 5vw, 52px);
	line-height: 1.15;
	color: #ffffff;
	margin: 18px 0 0;
}
#svc-hero h1 .ah-accent { color: #89f9af; }
#svc-hero .ah-lead {
	color: rgba(255, 255, 255, 0.92);
	font-family: 'Tajawal', sans-serif;
	font-size: 18px;
	line-height: 1.8;
	max-width: 760px;
	margin: 22px 0 0;
}

/* Intro block below the hero (rest of the content) */
.svc-intro {
	width: 100%;
	background: #f7f9ff;
	padding: 64px 16px 24px;
	text-align: center;
}
.svc-intro .max-w-container-max { max-width: 1280px; margin: 0 auto; }
.svc-intro .svc-badge { margin-bottom: 20px; }
.svc-intro-lead {
	font-family: 'Tajawal', sans-serif;
	font-size: 18px;
	line-height: 1.9;
	color: #42474f;
	max-width: 840px;
	margin: 0 auto;
}
.svc-intro-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 28px;
}
.svc-intro-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: #006d3c;
	color: #ffffff;
	font-family: 'Tajawal', sans-serif;
	font-size: 15px;
	font-weight: 600;
	padding: 14px 32px;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 109, 60, 0.28);
	transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.svc-intro-btn:hover {
	background: #007d45;
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(0, 109, 60, 0.35);
}
.svc-intro-btn .material-symbols-outlined { font-size: 18px; }
.svc-intro-btn-ghost {
	background: transparent;
	color: #003b65;
	border: 1px solid rgba(0, 59, 101, 0.3);
	box-shadow: none;
}
.svc-intro-btn-ghost:hover {
	background: rgba(0, 59, 101, 0.06);
	box-shadow: none;
}
.svc-intro-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 40px;
}
.svc-intro-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 9999px;
	background: #ffffff;
	border: 1px solid rgba(194, 199, 209, 0.4);
	color: #42474f;
	font-family: 'Tajawal', sans-serif;
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 2px 10px rgba(0, 59, 101, 0.05);
}
.svc-intro-chip .material-symbols-outlined { font-size: 17px; color: #006d3c; }

/* Shared service block */
.svc-block { width: 100%; padding: 80px 16px; }
.svc-block .max-w-container-max { max-width: 1280px; margin: 0 auto; }

/* Headings */
.svc-head { text-align: center; margin-bottom: 52px; }
.svc-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border-radius: 9999px;
	background: rgba(0, 109, 60, 0.1);
	border: 1px solid rgba(0, 109, 60, 0.25);
	color: #006d3c;
	font-family: 'Tajawal', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin-bottom: 18px;
}
.svc-badge .material-symbols-outlined { font-size: 16px; }
.svc-head h2 {
	font-family: 'Cairo', 'Tajawal', sans-serif;
	font-weight: 700;
	font-size: clamp(26px, 3.5vw, 36px);
	line-height: 1.3;
	color: #003b65;
	margin: 0;
}
.svc-head h2 .svc-en {
	display: block;
	font-size: 18px;
	font-weight: 600;
	color: #006d3c;
	margin-top: 6px;
}
.svc-desc {
	font-family: 'Tajawal', sans-serif;
	font-size: 18px;
	line-height: 1.8;
	color: #42474f;
	max-width: 820px;
	margin: 18px auto 0;
}

/* Light block */
.svc-light { background: #f7f9ff; }

/* Service sub-items grid */
.svc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
@media (max-width: 1023px) {
	.svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
	.svc-grid { grid-template-columns: 1fr; }
}
.svc-item {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #ffffff;
	border: 1px solid rgba(194, 199, 209, 0.35);
	border-radius: 14px;
	padding: 16px 18px;
	box-shadow: 0 4px 18px rgba(0, 59, 101, 0.05);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.svc-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(0, 59, 101, 0.1);
}
.svc-item-ic {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #006d3c;
	color: #ffffff;
}
.svc-item-ic .material-symbols-outlined { font-size: 20px; }
.svc-item-num {
	flex-shrink: 0;
	font-family: 'Cairo', sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: #9aa3ae;
}
.svc-item-text {
	font-family: 'Tajawal', sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	color: #181c20;
}

/* Process path (كيف تتم الخدمة) */
.svc-path {
	margin-top: 52px;
	background: #ffffff;
	border: 1px solid rgba(194, 199, 209, 0.35);
	border-radius: 18px;
	padding: 32px 28px;
}
.svc-path-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 28px;
}
.svc-path-head .material-symbols-outlined { color: #006d3c; font-size: 22px; }
.svc-path-head h3 {
	font-family: 'Cairo', 'Tajawal', sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #003b65;
	margin: 0;
}
.svc-steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 18px;
}
.svc-step {
	position: relative;
	width: 158px;
	text-align: center;
	background: #f1f4f9;
	border-radius: 14px;
	padding: 20px 12px 18px;
}
.svc-step-num {
	width: 30px;
	height: 30px;
	margin: 0 auto 12px;
	border-radius: 9999px;
	background: #003b65;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Cairo', sans-serif;
	font-size: 15px;
	font-weight: 700;
}
.svc-step-title {
	font-family: 'Tajawal', sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
	color: #42474f;
}
.svc-step-arrow {
	position: absolute;
	top: 50%;
	inset-inline-end: -25px;
	transform: translateY(-50%);
	color: #006d3c;
	font-size: 20px;
	z-index: 3;
}
@media (max-width: 1023px) {
	.svc-step-arrow { display: none; }
}

/* CTA button */
.svc-cta { text-align: center; margin-top: 44px; }
.svc-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: #006d3c;
	color: #ffffff;
	font-family: 'Tajawal', sans-serif;
	font-size: 15px;
	font-weight: 600;
	padding: 15px 40px;
	border-radius: 12px;
	box-shadow: 0 6px 22px rgba(0, 109, 60, 0.3);
	transition: background 0.25s ease, transform 0.25s ease;
}
.svc-btn-primary:hover {
	background: #005c32;
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(0, 109, 60, 0.35);
}
.svc-btn-primary .material-symbols-outlined { font-size: 20px; }

/* Dark block (Conformity & CoC) — deep green, distinct from the footer blue */
.svc-dark { background: #00522b; }
.svc-dark .svc-head h2 { color: #ffffff; }
.svc-dark .svc-head h2 .svc-en { color: #89f9af; }
.svc-dark .svc-desc { color: rgba(255, 255, 255, 0.88); }
.svc-dark .svc-badge {
	background: rgba(137, 249, 175, 0.12);
	border-color: rgba(137, 249, 175, 0.35);
	color: #89f9af;
}
.svc-dark .svc-item {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.12);
}
.svc-dark .svc-item:hover {
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
}
.svc-dark .svc-item-ic {
	background: #89f9af;
	color: #00210e;
}
.svc-dark .svc-item-num { color: rgba(255, 255, 255, 0.4); }
.svc-dark .svc-item-text { color: #ffffff; }
.svc-dark .svc-path {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.12);
}
.svc-dark .svc-path-head .material-symbols-outlined { color: #89f9af; }
.svc-dark .svc-path-head h3 { color: #ffffff; }
.svc-dark .svc-step {
	background: rgba(255, 255, 255, 0.08);
}
.svc-dark .svc-step-num {
	background: #89f9af;
	color: #00210e;
}
.svc-dark .svc-step-title { color: rgba(255, 255, 255, 0.92); }
.svc-dark .svc-step-arrow { color: #89f9af; }
.svc-dark .svc-btn-primary {
	background: #89f9af;
	color: #00210e;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.25);
}
.svc-dark .svc-btn-primary:hover {
	background: #a0fbbd;
}

/* ------------------------------------------------------------
   23) MARKET ACCESS PAGE (الوصول إلى الأسواق)
       Template: template-market-access.php
   ------------------------------------------------------------ */
#mkt-hero {
	position: relative;
	width: 100%;
	min-height: 42vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #003b65; /* primary */
	padding: 88px 16px 64px;
}
#mkt-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.1;
	background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
	background-size: 32px 32px;
}
#mkt-hero .ah-content {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
	width: 100%;
	text-align: center;
}
#mkt-hero h1 {
	font-family: 'Cairo', 'Tajawal', sans-serif;
	font-weight: 800;
	font-size: clamp(32px, 5vw, 52px);
	line-height: 1.15;
	color: #ffffff;
	margin: 0;
}
#mkt-hero h1 .ah-accent { color: #89f9af; }

/* Contact page hero (template-contact.php) */
#ct-hero {
	position: relative;
	width: 100%;
	min-height: 42vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #003b65; /* primary */
	padding: 88px 16px 64px;
}
#ct-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.1;
	background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
	background-size: 32px 32px;
}
#ct-hero .ah-content {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
	width: 100%;
	text-align: center;
}
#ct-hero h1 {
	font-family: 'Cairo', 'Tajawal', sans-serif;
	font-weight: 800;
	font-size: clamp(32px, 5vw, 52px);
	line-height: 1.15;
	color: #ffffff;
	margin: 0;
}
#ct-hero h1 .ah-accent { color: #89f9af; }

/* ------------------------------------------------------------
   24) CONTACT / SERVICE REQUEST FORM (اتصل بنا — طلب خدمة)
       Section #contact in front-page.php
   ------------------------------------------------------------ */
.ct-section {
	width: 100%;
	background: #003b65; /* primary, matches footer */
	padding: 80px 16px;
}
.ct-section .max-w-container-max { max-width: 1280px; margin: 0 auto; }
.ct-head { text-align: center; margin-bottom: 44px; }
.ct-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border-radius: 9999px;
	background: rgba(137, 249, 175, 0.12);
	border: 1px solid rgba(137, 249, 175, 0.35);
	color: #89f9af;
	font-family: 'Tajawal', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin-bottom: 16px;
}
.ct-badge .material-symbols-outlined { font-size: 16px; }
.ct-head h2 {
	font-family: 'Cairo', 'Tajawal', sans-serif;
	font-weight: 700;
	font-size: clamp(26px, 3.5vw, 36px);
	line-height: 1.3;
	color: #ffffff;
	margin: 0 0 12px;
}
.ct-head p {
	font-family: 'Tajawal', sans-serif;
	font-size: 17px;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.85);
	max-width: 680px;
	margin: 0 auto;
}

/* Contact info cards (offices + digital contacts) */
.ct-info-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 44px;
}
@media (max-width: 900px) {
	.ct-info-grid { grid-template-columns: 1fr; }
}
.ct-card {
	background: #ffffff;
	border: 1px solid rgba(194, 199, 209, 0.4);
	border-radius: 16px;
	padding: 26px 24px;
	box-shadow: 0 6px 20px rgba(0, 59, 101, 0.06);
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ct-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(0, 59, 101, 0.14);
}
.ct-card-ic {
	width: 50px;
	height: 50px;
	border-radius: 14px;
	background: #eaf5ee;
	color: #006d3c;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 6px;
}
.ct-card-ic .material-symbols-outlined { font-size: 26px; }
.ct-card h3 {
	font-family: 'Cairo', 'Tajawal', sans-serif;
	font-weight: 700;
	font-size: 17px;
	color: #003b65;
	margin: 0;
}
.ct-card-line {
	font-family: 'Tajawal', sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: #42474f;
	margin: 0;
}
.ct-card-label {
	font-family: 'Tajawal', sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	color: #006d3c;
	margin: 10px 0 0;
}
.ct-card a {
	color: #006d3c;
	font-weight: 600;
	text-decoration: none;
}
.ct-card a:hover { text-decoration: underline; }

/* Arabic (RTL): right-align the LTR contact lines (phone / email / website). */
html[lang="ar"] .ct-card-line,
html[lang="ar"] .ct-card-label {
	text-align: right;
}
html[lang="ar"] .ct-card-line[dir="ltr"] {
	display: block;
}

/* Notices */
.ct-notice {
	padding: 14px 20px;
	border-radius: 12px;
	margin-bottom: 24px;
	text-align: center;
	font-family: 'Tajawal', sans-serif;
	font-size: 15px;
	font-weight: 500;
}
.ct-success {
	background: rgba(137, 249, 175, 0.14);
	border: 1px solid rgba(137, 249, 175, 0.4);
	color: #a0fbbd;
}
.ct-error {
	background: rgba(255, 218, 214, 0.14);
	border: 1px solid rgba(255, 186, 182, 0.4);
	color: #ffdad6;
}

/* Form card */
.ct-form {
	background: #ffffff;
	border-radius: 20px;
	padding: 36px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}
@media (max-width: 639px) {
	.ct-form { padding: 24px 18px; }
}
.ct-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
@media (max-width: 767px) {
	.ct-grid { grid-template-columns: 1fr; }
}
.ct-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ct-field-full { grid-column: 1 / -1; }
.ct-field label {
	font-family: 'Tajawal', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #003b65;
}
.ct-req { color: #ba1a1a; }
.ct-field input,
.ct-field select,
.ct-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #c2c7d1;
	border-radius: 10px;
	background: #f7f9ff;
	font-family: 'Tajawal', sans-serif;
	font-size: 15px;
	color: #181c20;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* ------------------------------------------------------------
   25) SECTORS PAGE HERO (صفحة القطاعات) — compact version of the
       About hero. Shares all the .ah-* visuals via the shared
       :is(#about-hero, #sect-hero) selectors above; these rules
       only shrink the scale (smaller padding + title).
   ------------------------------------------------------------ */
#sect-hero {
	padding: 64px 16px 78px !important;   /* compact: ~2/3 of the About hero */
}
#sect-hero h1 {
	font-size: clamp(30px, 4.2vw, 44px) !important;
	margin: 0 0 16px !important;
}
@media (max-width: 767px) {
	#sect-hero h1 { font-size: 30px !important; }
}
#sect-hero .ah-badge { margin-bottom: 20px !important; }
#sect-hero .ah-divider { margin-bottom: 24px !important; }
#sect-hero .ah-lead {
	font-size: 19px !important;
	font-weight: 500 !important;
	margin-bottom: 0 !important;
	max-width: 720px !important;
}
#sect-hero .ah-actions { margin: 26px 0 0 !important; }

/* ===== About: client images (ACF) ===== */
.ah-bgimg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.28;}
.ai-banner{margin-bottom:40px;border-radius:24px;overflow:hidden;box-shadow:0 18px 45px rgba(0,59,101,.12);}
.ai-banner img{display:block;width:100%;height:320px;object-fit:cover;}
.vm-img{border-radius:14px;overflow:hidden;margin-bottom:22px;}
.vm-img img{display:block;width:100%;height:180px;object-fit:cover;}
/* ============ Frontend Edit Mode ============ */
.qm-edit-toggle{position:fixed;right:20px;bottom:20px;z-index:99999;display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border:0;border-radius:999px;background:linear-gradient(135deg,#f7b32b,#e8890c);color:#1b2a1e;font-weight:700;font-size:15px;font-family:inherit;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .2s, box-shadow .2s}
.qm-edit-toggle:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.3)}
.qm-edit-toggle.qm-active{background:#1b2a1e;color:#fff}
.qm-edit-toggle .material-symbols-outlined{font-size:20px}
.qm-edit-panel{position:fixed;right:20px;bottom:84px;z-index:99998;width:min(560px,calc(100vw - 40px));max-height:72vh;overflow:auto;background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.32);padding:20px;font-family:inherit;color:#0f172a;text-align:start}
.qm-edit-panel[hidden]{display:none}
.qm-edit-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #eef2f7}
.qm-edit-panel-head h3{margin:0;font-size:18px;font-weight:700;color:#1b2a1e}
.qm-edit-close{background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:#64748b;padding:0 6px}
.qm-edit-close:hover{color:#b91c1c}
.qm-edit-panel .acf-field{padding:10px 0;border-top:1px solid #eef2f7}
.qm-edit-panel .acf-field:first-child{border-top:0}
.qm-edit-panel .acf-label{margin-bottom:6px}
.qm-edit-panel .acf-label label{font-weight:700;color:#1b2a1e}
.qm-edit-panel .acf-label .acf-required{color:#dc2626}
.qm-edit-panel .acf-input input[type=text],.qm-edit-panel .acf-input textarea,.qm-edit-panel .acf-input select{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:8px;font-size:14px;font-family:inherit;background:#fff;color:#0f172a}
.qm-edit-panel .acf-input textarea{min-height:90px}
.qm-edit-panel .acf-input input:focus,.qm-edit-panel .acf-input textarea:focus,.qm-edit-panel .acf-input select:focus{outline:none;border-color:#f7b32b;box-shadow:0 0 0 3px rgba(247,179,43,.25)}
.qm-edit-panel .acf-form-submit{text-align:start;margin-top:14px}
.qm-edit-panel .acf-form-submit .acf-button{display:inline-block;padding:12px 28px;border:0;border-radius:999px;background:linear-gradient(135deg,#f7b32b,#e8890c);color:#1b2a1e;font-weight:700;font-size:15px;font-family:inherit;cursor:pointer;box-shadow:0 6px 18px rgba(232,137,12,.35)}
.qm-edit-panel .acf-form-submit .acf-button:hover{filter:brightness(1.05)}
.qm-edit-panel .acf-fields>.acf-field>.acf-label{font-size:13px}
.qm-edit-toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:99999;background:#16a34a;color:#fff;padding:14px 26px;border-radius:12px;font-weight:700;font-size:15px;font-family:inherit;box-shadow:0 10px 30px rgba(0,0,0,.3);animation:qmToast .3s ease}
@keyframes qmToast{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
/* ------------------------------------------------------------
   Privacy Policy page (template-privacy.php) — clean plain-text
   legal document: no brand-colored cards / icons.
   ------------------------------------------------------------ */
.privacy-doc {
	background: #ffffff;
	padding: 48px 16px 80px;
}
.privacy-doc-container {
	max-width: 860px;
	margin: 0 auto;
}
.privacy-doc-head {
	margin-bottom: 36px;
	padding-bottom: 24px;
	border-bottom: 1px solid #e3e6eb;
}
.privacy-doc-h1 {
	font-family: 'Cairo', 'Montserrat', sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
	color: #181c20;
	margin: 0 0 12px;
}
.privacy-doc-accent { color: #42474f; }
.privacy-doc-lead {
	font-family: 'Tajawal', 'Inter', sans-serif;
	font-size: 17px;
	line-height: 1.9;
	color: #42474f;
	margin: 0 0 10px;
}
.privacy-doc-updated {
	font-family: 'Tajawal', 'Inter', sans-serif;
	font-size: 13px;
	color: #6a7079;
	margin: 0;
}
.privacy-doc-section {
	margin-bottom: 28px;
}
.privacy-doc-h2 {
	font-family: 'Cairo', 'Montserrat', sans-serif;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.4;
	color: #181c20;
	margin: 0 0 10px;
}
.privacy-doc-p {
	font-family: 'Tajawal', 'Inter', sans-serif;
	font-size: 16px;
	line-height: 1.9;
	color: #42474f;
	margin: 0 0 10px;
}
.privacy-doc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.privacy-doc-li {
	position: relative;
	font-family: 'Tajawal', 'Inter', sans-serif;
	font-size: 16px;
	line-height: 1.8;
	color: #42474f;
	padding-inline-start: 20px;
	margin-bottom: 4px;
}
.privacy-doc-li::before {
	content: "";
	position: absolute;
	top: 0.72em;
	inset-inline-start: 4px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #c2c7d1;
}
.privacy-doc-link {
	color: #003b65;
	text-decoration: underline;
}
.privacy-doc-link:hover { color: #006d3c; }

/* ------------------------------------------------------------
   Floating WhatsApp widget with Saudi / Brazil number choice.
   ------------------------------------------------------------ */
.qm-wa {
position: fixed;
bottom: 24px;
left: 24px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.qm-wa-btn {
width: 56px;
height: 56px;
border: 0;
border-radius: 999px;
background: #006d3c;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 30px rgba(0,109,60,0.3);
cursor: pointer;
transition: transform .2s ease, background-color .2s ease;
position: relative;
}
.qm-wa-btn:hover { transform: scale(1.1); background: #005a31; }
.qm-wa-btn .qm-wa-icon {
width: 28px;
height: 28px;
display: block;
}
.qm-wa-panel {
background: #ffffff;
border: 1px solid rgba(194,199,209,0.5);
border-radius: 16px;
box-shadow: 0 14px 40px rgba(0,59,101,0.16);
padding: 12px;
min-width: 240px;
display: flex;
flex-direction: column;
gap: 6px;
animation: qmWaPop .18s ease;
}
@keyframes qmWaPop {
from { opacity: 0; transform: translateY(8px); }
to   { opacity: 1; transform: translateY(0); }
}
.qm-wa-panel-title {
font-family: 'Tajawal', 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
color: #6a7079;
padding: 4px 8px 8px;
}
.qm-wa-opt {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 12px;
text-decoration: none;
transition: background-color .15s ease;
}
.qm-wa-opt:hover { background: #eaf5ee; }
.qm-wa-opt-flag { font-size: 24px; line-height: 1; }
.qm-wa-opt-body { display: flex; flex-direction: column; gap: 1px; }
.qm-wa-opt-name {
font-family: 'Tajawal', 'Inter', sans-serif;
font-size: 15px;
font-weight: 700;
color: #181c20;
}
.qm-wa-opt-num {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: #42474f;
}