/* ============================================================================
   COMPREHENSIVE ARABIC / RTL STYLESHEET

   Enqueued ONLY for ?lang=ar (body.pixora-ar, html[dir="rtl"]), and AFTER
   the theme's native rtl.css + bootstrap-rtl.css.

   Now that is_rtl() is active (see inc/cms/lang.php), the theme's own RTL
   stylesheets handle the bulk of the mirroring. This file provides:
     1. Arabic webfont (Cairo) for all text elements
     2. Arabic typography tuning (line-height, letter-spacing, diacritics)
     3. RTL fixes for custom components (nn-*, px-service-5-*, etc.)
     4. Blog & comment system RTL alignment
     5. Form inputs, search, and validation RTL
     6. Pagination and navigation arrow directions
     7. Breadcrumbs and icon positioning
     8. Mobile menu and responsive RTL
     9. Sliders/carousels RTL (Swiper)
    10. WooCommerce product/cart RTL (if active)

   Everything here is scoped to [dir="rtl"] / body.pixora-ar so LTR is untouched.
   ========================================================================== */

/* NOTE: the Cairo webfont is NOT @import-ed here (that chains font loading behind
   this file and causes a layout shift the first time you switch to Arabic). It is
   enqueued as a normal <link> in inc/cms/lang.php with a preconnect, so it loads
   in parallel with the other stylesheets. */

/* ---- 1) Arabic webfont ---------------------------------------------------- */
/* The Latin display fonts (Inter / Phudu / Thunder) carry no Arabic glyphs, so
   Arabic would fall back to a system font. Route Arabic through Cairo. */
body.pixora-ar,
body.pixora-ar h1, body.pixora-ar h2, body.pixora-ar h3,
body.pixora-ar h4, body.pixora-ar h5, body.pixora-ar h6,
body.pixora-ar p,  body.pixora-ar a,  body.pixora-ar span,
body.pixora-ar li, body.pixora-ar button, body.pixora-ar input,
body.pixora-ar textarea, body.pixora-ar select,
body.pixora-ar .elementor-widget-container,
body.pixora-ar .nn-svc-heading, body.pixora-ar .nn-pd-title {
	font-family: 'Cairo', 'Tajawal', sans-serif !important;
}

/* ---- 2) Arabic typography ------------------------------------------------- */
/* Arabic script sits taller — give it a touch more leading and drop the Latin
   tracking that looks broken on joined letterforms. */
body.pixora-ar { letter-spacing: 0 !important; }
body.pixora-ar p, body.pixora-ar li { line-height: 1.9; }
body.pixora-ar h1, body.pixora-ar h2, body.pixora-ar h3,
body.pixora-ar h4, body.pixora-ar h5, body.pixora-ar h6 {
	line-height: 1.35; letter-spacing: 0 !important; word-spacing: 0;
}

/* Keep photos, icons, videos and Latin brand wordmarks upright/LTR. */
body.pixora-ar img, body.pixora-ar svg, body.pixora-ar video { direction: ltr; }

/* Numbers, phone numbers and inline English keep LTR flow inside Arabic runs. */
body.pixora-ar .ltr, body.pixora-ar [data-ltr] {
	direction: ltr; unicode-bidi: isolate; display: inline-block;
}

/* ---- 2.5) Hero Section RTL fix ------------------------------------------- */
/* px-hero-info-wrap with justify-content-end needs flex-direction reverse in RTL */
[dir="rtl"] .px-hero-info-wrap,
[dir="rtl"] .px-hero-info-wrap.d-flex { flex-direction: row-reverse; }

/* Flip hero background image horizontally in RTL */
[dir="rtl"] .px-hero-bg-img,
[dir="rtl"] .ripple-image {
	transform: scaleX(-1) !important;
}

/* Values section RTL alignment - NO transform (keeps text readable) */
[dir="rtl"] .elementor-element-e31e7d4 {
	direction: rtl;
	text-align: right;
}

[dir="rtl"] .px-section-title,
[dir="rtl"] .tp-el-content {
	text-align: right;
	direction: rtl;
}

/* ---- 3a) Home "What We Do" grid (.nn-svc-*) ------------------------------- */
/* Grid + flex already reflow via direction:rtl; only fix absolutely-positioned
   corner elements and the diagonal arrows so they sit/point correctly. */
[dir="rtl"] .nn-svc-num   { left: auto; right: 18px; }
[dir="rtl"] .nn-svc-arrow { right: auto; left: 15px; }
[dir="rtl"] .nn-svc-all   { flex-direction: row-reverse; }
[dir="rtl"] .nn-svc-all svg,
[dir="rtl"] .nn-svc-arrow svg { transform: scaleX(-1); }

/* ---- 3b) Services-page cards (.px-service-5-* in #2ec1c45) ----------------- */
/* The premium cards are flex-column, so RTL only needs the index watermark and
   the "View our work" arrow mirrored, plus right alignment. */
[dir="rtl"] .elementor-element-2ec1c45 .px-service-5-item::after { right: auto; left: 22px; }
[dir="rtl"] .elementor-element-2ec1c45 .px-service-5-link svg { transform: scaleX(-1); }
[dir="rtl"] .elementor-element-2ec1c45 .px-service-5-item { text-align: right; }

/* ---- 3c) Project detail template (.nn-pd-*) ------------------------------- */
[dir="rtl"] .nn-pd { text-align: right; }
[dir="rtl"] .nn-pd-back { direction: rtl; }   /* arrow flipped in the template itself */

/* ---- 3d) Capsule pills / tags read right-to-left ------------------------- */
[dir="rtl"] .nn-svc-tags, [dir="rtl"] .px-capsule-item-wrapper { direction: rtl; }

/* ---- 3e) Award-list (Core Values) widget RTL ------------------------------ */
[dir="rtl"] .px-award-wrapper,
[dir="rtl"] .px-award-item { direction: rtl; text-align: right; }
[dir="rtl"] .px-award-num { direction: rtl; text-align: right; }
[dir="rtl"] .px-award-category { direction: rtl; text-align: right; }
[dir="rtl"] .px-award-category img { direction: ltr; }
[dir="rtl"] .px-award-nomination { direction: rtl; text-align: right; }

/* ---- 4) Floating EN | ع switcher ----------------------------------------- */
/* Positioned per-language in PHP (left rail on Arabic); nothing to override. */

/* ---- 5) RTL alignment + clipping fixes ---------------------------------- */
/* The theme left-aligns section headings/descriptions by default (physical
   left), so in RTL they stayed pinned to the left. Mirror them to the right,
   but never touch content that is deliberately centered. */
body.pixora-ar .px-section-title,
body.pixora-ar .px-section-subtitle,
body.pixora-ar .text-effect,
body.pixora-ar .reveal-text,
body.pixora-ar .tp-el-title,
body.pixora-ar .tp-el-desc,
body.pixora-ar .tp-el-content,
body.pixora-ar .tp-el-subtitle,
body.pixora-ar .tp-el-cat,
body.pixora-ar .elementor-widget-heading .elementor-heading-title,
body.pixora-ar .elementor-widget-text-editor > .elementor-widget-container {
	text-align: right;
}

/* CRITICAL: Override Elementor's inline text-align:left for قيمنا section (7837988) */
.elementor-7030.elementor-page body.pixora-ar .elementor-element-7837988 .tp-el-alignment,
.elementor-7030.elementor-page html[dir="rtl"] .elementor-element-7837988 .tp-el-alignment {
	text-align: right !important;
}

.elementor-7030.elementor-page body.pixora-ar .elementor-element-7837988 .tp-el-title,
.elementor-7030.elementor-page html[dir="rtl"] .elementor-element-7837988 .tp-el-title {
	text-align: right !important;
}

.elementor-7030.elementor-page body.pixora-ar .elementor-element-7837988 .tp-el-content,
.elementor-7030.elementor-page html[dir="rtl"] .elementor-element-7837988 .tp-el-content {
	text-align: right !important;
}

/* Explicit fix for قيمنا paragraph alignment */
body.pixora-ar .px-project-title-box,
html[dir="rtl"] .px-project-title-box {
	text-align: right !important;
	direction: rtl;
	display: block;
}

body.pixora-ar .px-project-title-box .tp-el-content,
html[dir="rtl"] .px-project-title-box .tp-el-content {
	text-align: right !important;
	direction: rtl;
	display: block;
}

body.pixora-ar .px-project-title-box .tp-el-title,
html[dir="rtl"] .px-project-title-box .tp-el-title {
	text-align: right !important;
	direction: rtl;
}
body.pixora-ar .text-center,
body.pixora-ar .text-md-center,
body.pixora-ar .elementor-align-center,
body.pixora-ar [style*="text-align: center"],
body.pixora-ar [style*="text-align:center"] { text-align: center !important; }

/* Arabic diacritics (tashkeel) sit ABOVE the letters; the split-text reveal
   clips overflow and Latin display fonts use tight line-heights, so the marks
   got cut off. Give big display text vertical room and stop the clipping. */
body.pixora-ar .text-effect,
body.pixora-ar .reveal-text,
body.pixora-ar [class*="tp_text_invert"],
body.pixora-ar .px-hero-classic-title,
body.pixora-ar .tp-hero-title { overflow: visible !important; }
body.pixora-ar .text-effect,
body.pixora-ar .px-section-title,
body.pixora-ar .px-hero-classic-title,
body.pixora-ar .tp-hero-title,
body.pixora-ar .tp-el-title { line-height: 1.32 !important; padding-top: .06em; }

/* Footer giant brand word: keep it reading from the right in RTL. */
body.pixora-ar .elementor-element-e9ff71d,
body.pixora-ar .elementor-element-e9ff71d .tp-el-title { text-align: right !important; }

/* ---- 6) Home/About "Who We Are" intro row ---------------------------------
   Row #ea91167 = [ Who-We-Are label 25% ][ big heading + content 75% ].
   A plain RTL mirror puts the label on the right and the big copy on the left;
   we want the big copy to lead from the RIGHT (primary RTL position) with the
   small label on the left — so counter-flip the row back in RTL. */
[dir="rtl"] .elementor-element-ea91167 { flex-direction: row-reverse; }

/* The "من نحن / Who We Are" eyebrow lives in the small (25%) column that now
   sits on the LEFT. Our global right-align pushed it toward the big heading so
   it read as "stuck"; left-align it so it sits cleanly at the far-left edge
   like the English "Who We Are" eyebrow. */
[dir="rtl"] .elementor-element-0777a4f,
[dir="rtl"] .elementor-element-0777a4f .elementor-heading-title,
[dir="rtl"] .elementor-element-0777a4f .px-section-subtitle,
[dir="rtl"] .elementor-element-0777a4f .tp-el-title,
[dir="rtl"] .elementor-element-0777a4f .tp-el-subtitle { text-align: left !important; }

/* Push the "من نحن" eyebrow group to the far-left of its column (clear of the
   heading) so it reads as a clean corner label, not stuck to the big text. */
[dir="rtl"] .elementor-element-0777a4f { align-items: flex-start !important; }
[dir="rtl"] .elementor-element-0499f9d { direction: ltr; justify-content: flex-start !important; }
[dir="rtl"] .elementor-element-b8c20b0 .elementor-heading-title { text-align: left !important; }

/* ---- 7) Same "big heading right / label left" treatment for the ----------
   "مشاريع مختارة" (projects, row #cfbe272) and "قيمنا" (values, row #20ebb4f)
   sections — identical structure to the intro row above.
   NOTE: Elementor uses CSS variables (--flex-direction), must override those! */
html[dir="rtl"] .elementor-element-cfbe272,
html[dir="rtl"] .elementor-element-20ebb4f,
body.pixora-ar .elementor-element-cfbe272,
body.pixora-ar .elementor-element-20ebb4f {
	--flex-direction: row-reverse !important;
	flex-direction: row-reverse !important;
	display: flex !important;
}

html[dir="rtl"] .elementor-element-63e5107,
html[dir="rtl"] .elementor-element-4c78d0d,
body.pixora-ar .elementor-element-63e5107,
body.pixora-ar .elementor-element-4c78d0d { align-items: flex-start !important; }

html[dir="rtl"] .elementor-element-1963695,
html[dir="rtl"] .elementor-element-0416e8d,
body.pixora-ar .elementor-element-1963695,
body.pixora-ar .elementor-element-0416e8d { direction: ltr; justify-content: flex-start !important; }

html[dir="rtl"] .elementor-element-22b310e .elementor-heading-title,
html[dir="rtl"] .elementor-element-7c45448 .elementor-heading-title,
body.pixora-ar .elementor-element-22b310e .elementor-heading-title,
body.pixora-ar .elementor-element-7c45448 .elementor-heading-title { text-align: left !important; }





/* ==========================================================================
   8) SITE-WIDE RTL alignment fix
   The theme's alignment control emits, per element,
     .elementor-element-XXX .tp-el-alignment { text-align: left !important; }
   on almost every heading/paragraph. That physical `left` is wrong in RTL, so
   Arabic text was pinned left across ALL pages. Flip it to right — the doubled
   class (.tp-el-alignment.tp-el-alignment) raises specificity above the theme's
   rule so it wins even against its !important. Keep the two intentionally
   centered elements centered.
   ========================================================================== */
[dir="rtl"] .tp-el-alignment.tp-el-alignment { text-align: right !important; }
[dir="rtl"] .elementor-element-678f367 .tp-el-alignment.tp-el-alignment { text-align: center !important; }

/* ==========================================================================
   9) BLOG & POST SYSTEM RTL
   ========================================================================== */

/* Blog post meta information (author, date, category) */
[dir="rtl"] .tp-meta-box,
[dir="rtl"] .blog-meta,
[dir="rtl"] .post-meta,
[dir="rtl"] .elementor-post-info { text-align: right; direction: rtl; }

/* Author box and byline */
[dir="rtl"] .tp-author-box,
[dir="rtl"] .author-box,
[dir="rtl"] .post-author { text-align: right; }

[dir="rtl"] .tp-author-box__avatar,
[dir="rtl"] .author-avatar,
[dir="rtl"] .post-author-image { float: left; margin-left: 15px; margin-right: 0; }

[dir="rtl"] .tp-author-box__content,
[dir="rtl"] .author-content { margin-left: 0; }

/* Category badges and tags */
[dir="rtl"] .tp-cat-badge,
[dir="rtl"] .post-category,
[dir="rtl"] .category-badge { direction: rtl; text-align: right; }

[dir="rtl"] .tp-cat-badge::before,
[dir="rtl"] .post-category::before { margin-left: 8px; margin-right: 0; }

/* Post navigation (prev/next) */
[dir="rtl"] .tp-posts-nav,
[dir="rtl"] .post-navigation,
[dir="rtl"] .nav-links { text-align: right; }

[dir="rtl"] .nav-previous,
[dir="rtl"] .prev-post { float: right; text-align: right; }

[dir="rtl"] .nav-next,
[dir="rtl"] .next-post { float: left; text-align: left; }

[dir="rtl"] .nav-previous a::before,
[dir="rtl"] .prev-post a::before { content: " ←"; }

[dir="rtl"] .nav-next a::after,
[dir="rtl"] .next-post a::after { content: "→ "; }

/* Related posts section */
[dir="rtl"] .related-posts,
[dir="rtl"] .tp-related-posts { text-align: right; }

[dir="rtl"] .related-posts .post-item,
[dir="rtl"] .tp-related-posts .post-item { direction: rtl; }

/* ==========================================================================
   10) COMMENTS SYSTEM RTL
   ========================================================================== */

/* Comments section container */
[dir="rtl"] #comments,
[dir="rtl"] .comments-area,
[dir="rtl"] .comment-list { direction: rtl; text-align: right; }

/* Individual comment styling */
[dir="rtl"] .comment-item,
[dir="rtl"] .comment-body,
[dir="rtl"] li.comment { text-align: right; margin-left: 0; margin-right: 3em; }

/* Comment author avatar */
[dir="rtl"] .comment-author-avatar,
[dir="rtl"] .avatar { float: left; margin-left: 15px; margin-right: 0; }

/* Comment meta (author, date) */
[dir="rtl"] .comment-meta,
[dir="rtl"] .comment-author { text-align: right; }

/* Comment reply button */
[dir="rtl"] .comment-reply,
[dir="rtl"] .reply { float: left; }

[dir="rtl"] a.comment-reply-link::after { content: " ←"; }

/* Comment form */
[dir="rtl"] .comment-form,
[dir="rtl"] #respond { text-align: right; }

[dir="rtl"] .comment-form-default { direction: rtl; }

/* Nested/threaded comments indentation */
[dir="rtl"] .children,
[dir="rtl"] .comment-list .comment-list { margin-left: 0; margin-right: 2em; }

/* ==========================================================================
   11) FORMS & INPUT FIELDS RTL
   ========================================================================== */

/* Form containers */
body.pixora-ar form,
[dir="rtl"] form,
[dir="rtl"] .wpcf7-form,
[dir="rtl"] .wpcf7 form { text-align: right; direction: rtl; }

/* Input fields, textareas, selects */
body.pixora-ar input[type="text"],
body.pixora-ar input[type="email"],
body.pixora-ar input[type="password"],
body.pixora-ar input[type="number"],
body.pixora-ar input[type="phone"],
body.pixora-ar input[type="tel"],
body.pixora-ar input[type="url"],
body.pixora-ar textarea,
body.pixora-ar select,
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="phone"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] textarea,
[dir="rtl"] select {
	direction: rtl;
	text-align: right;
	padding-left: 12px;
	padding-right: 12px;
}

/* Input placeholder text alignment */
body.pixora-ar input::placeholder,
body.pixora-ar textarea::placeholder,
[dir="rtl"] input::placeholder,
[dir="rtl"] textarea::placeholder {
	text-align: right;
}

/* Form labels */
body.pixora-ar label,
body.pixora-ar .form-label,
[dir="rtl"] label,
[dir="rtl"] .form-label {
	text-align: right;
	display: block;
	margin-bottom: 0.5rem;
}

/* Required field indicator */
body.pixora-ar .required::before,
body.pixora-ar label.required::before,
[dir="rtl"] .required::before,
[dir="rtl"] label.required::before {
	content: "*";
	color: #d63638;
	margin-left: 4px;
	margin-right: 0;
}

/* Form group/field wrapper */
[dir="rtl"] .form-group,
[dir="rtl"] .form-field,
[dir="rtl"] .wpcf7-form-group { text-align: right; margin-bottom: 1.5rem; }

/* Submit buttons */
body.pixora-ar input[type="submit"],
body.pixora-ar button[type="submit"],
[dir="rtl"] input[type="submit"],
[dir="rtl"] button[type="submit"] {
	direction: ltr;
	text-align: center;
}

/* Checkbox and radio buttons */
body.pixora-ar input[type="checkbox"],
body.pixora-ar input[type="radio"],
[dir="rtl"] input[type="checkbox"],
[dir="rtl"] input[type="radio"] {
	margin-left: 8px;
	margin-right: 0;
}

/* Checkbox/radio labels */
body.pixora-ar input[type="checkbox"] + label,
body.pixora-ar input[type="radio"] + label,
[dir="rtl"] input[type="checkbox"] + label,
[dir="rtl"] input[type="radio"] + label {
	text-align: right;
	margin-right: 0;
	padding-right: 8px;
}

/* Form validation messages */
[dir="rtl"] .wpcf7-form-control-wrap,
[dir="rtl"] .form-control-wrap,
[dir="rtl"] .form-error,
[dir="rtl"] .error-message,
[dir="rtl"] .validation-error { text-align: right; }

[dir="rtl"] .wpcf7-not-valid { border-color: #d63638; }
[dir="rtl"] .wpcf7-not-valid-tip { color: #d63638; text-align: right; }

/* Success/info messages */
[dir="rtl"] .wpcf7-mail-sent-ok,
[dir="rtl"] .success-message,
[dir="rtl"] .alert-success { text-align: right; }

/* ==========================================================================
   12) SEARCH FORM & RESULTS RTL
   ========================================================================== */

/* Search form */
[dir="rtl"] .search-form,
[dir="rtl"] .search-box,
[dir="rtl"] .wp-block-search__button-wrapper { text-align: right; }

/* Search input field */
[dir="rtl"] .search-form input[type="search"],
[dir="rtl"] .search-box input[type="text"] {
	direction: rtl;
	text-align: right;
	padding-left: 40px;
	padding-right: 12px;
}

/* Search button */
[dir="rtl"] .search-form button,
[dir="rtl"] .search-box button,
[dir="rtl"] .search-submit { float: left; }

/* Search results page */
[dir="rtl"] .search-results,
[dir="rtl"] .search-results-page { text-align: right; }

[dir="rtl"] .search-result-item,
[dir="rtl"] .search-result { text-align: right; margin-bottom: 1.5rem; }

[dir="rtl"] .search-result-highlight { direction: rtl; }

/* ==========================================================================
   13) PAGINATION & NAVIGATION RTL
   ========================================================================== */

/* Pagination container */
[dir="rtl"] .pagination,
[dir="rtl"] .nav-pagination,
[dir="rtl"] .pager { text-align: center; direction: rtl; }

/* Pagination links */
[dir="rtl"] .pagination a,
[dir="rtl"] .pagination span,
[dir="rtl"] .nav-pagination a,
[dir="rtl"] .nav-pagination span {
	padding: 0.5rem 0.75rem;
	margin: 0 2px;
}

/* Previous/Next pagination arrows */
[dir="rtl"] .pagination .prev::before,
[dir="rtl"] .nav-pagination .prev::before { content: "→"; margin-left: 4px; }

[dir="rtl"] .pagination .next::after,
[dir="rtl"] .nav-pagination .next::after { content: "←"; margin-right: 4px; }

/* Breadcrumbs */
[dir="rtl"] .breadcrumb,
[dir="rtl"] .breadcrumbs,
[dir="rtl"] .tp-breadcrumb { text-align: right; direction: rtl; }

[dir="rtl"] .breadcrumb-item,
[dir="rtl"] .breadcrumb-sep { direction: rtl; }

[dir="rtl"] .breadcrumb-sep::before { content: " ← "; margin: 0 8px; }

/* ==========================================================================
   14) ICONS & BADGES RTL
   ========================================================================== */

/* Icon positioning in buttons and labels */
[dir="rtl"] .icon-left { margin-right: 8px; margin-left: 0; }
[dir="rtl"] .icon-right { margin-left: 8px; margin-right: 0; }

/* Badge positioning */
[dir="rtl"] .badge,
[dir="rtl"] .badge-icon { direction: ltr; }

/* Icon-only elements */
[dir="rtl"] button.icon-only,
[dir="rtl"] a.icon-only { direction: ltr; }

/* Directional arrows in buttons/links */
[dir="rtl"] .btn-arrow-right::after { content: "←"; }
[dir="rtl"] .btn-arrow-left::before { content: "→"; }

/* List item icons */
[dir="rtl"] ul, [dir="rtl"] ol { padding-right: 1.5em; padding-left: 0; }
[dir="rtl"] li { text-align: right; }

/* ==========================================================================
   15) MOBILE MENU & RESPONSIVE RTL
   ========================================================================== */

/* Offcanvas/mobile menu positioning */
[dir="rtl"] .elementor-nav-menu,
[dir="rtl"] .offcanvas-menu,
[dir="rtl"] .mobile-menu { direction: rtl; text-align: right; }

/* Mobile hamburger menu icon positioning */
[dir="rtl"] .hamburger,
[dir="rtl"] .menu-toggle,
[dir="rtl"] .mobile-toggle { float: right; }

/* RTL fix for px-header-bar (offcanvas toggle button) */
[dir="rtl"] .px-header-bar,
[dir="rtl"] .tp-offcanvas-open-btn {
	margin-left: 0;
	margin-right: 40px;
	position: relative;
	z-index: 100;
}

/* Offcanvas container */
[dir="rtl"] .offcanvas-start { left: auto; right: 0; }
[dir="rtl"] .offcanvas-end { right: auto; left: 0; }

/* Mobile submenu indentation */
[dir="rtl"] .menu-item-has-children > .submenu,
[dir="rtl"] .submenu { margin-left: 0; margin-right: 1.5em; }

/* Mobile responsive utilities */
@media (max-width: 768px) {
	[dir="rtl"] .container { direction: rtl; }
	[dir="rtl"] .row { flex-direction: row-reverse; }
	[dir="rtl"] .col-lg-6,
	[dir="rtl"] .col-md-6 { float: right; }
	[dir="rtl"] button.navbar-toggle,
	[dir="rtl"] .tp-header-bar button { float: right; margin-left: 0; margin-right: auto; z-index: 100; }
}

/* ==========================================================================
   16) SLIDERS/CAROUSELS & SWIPER RTL
   ========================================================================== */

/* Swiper slider container */
[dir="rtl"] .swiper,
[dir="rtl"] .swiper-container { direction: rtl; }

[dir="rtl"] .swiper-slide { direction: rtl; }

/* Swiper navigation arrows */
[dir="rtl"] .swiper-button-prev { right: auto; left: 20px; }
[dir="rtl"] .swiper-button-next { left: auto; right: 20px; }

/* Swiper pagination */
[dir="rtl"] .swiper-pagination { text-align: left; }

/* Swiper scrollbar */
[dir="rtl"] .swiper-scrollbar { left: auto; right: 0; }

/* ==========================================================================
   17) TABLES RTL
   ========================================================================== */

[dir="rtl"] table { text-align: right; direction: rtl; }
[dir="rtl"] th, [dir="rtl"] td { text-align: right; padding-right: 12px; padding-left: 0; }
[dir="rtl"] thead { text-align: right; }
[dir="rtl"] tbody tr { direction: rtl; }

/* ==========================================================================
   18) WOOCOMMERCE RTL (if shop is active)
   ========================================================================== */

/* Product grid */
[dir="rtl"] .woocommerce-page,
[dir="rtl"] .woocommerce { direction: rtl; }

[dir="rtl"] .products,
[dir="rtl"] .product-list { text-align: right; }

[dir="rtl"] .product-item,
[dir="rtl"] .woocommerce .product { text-align: right; }

/* Product price and cart button */
[dir="rtl"] .product-price,
[dir="rtl"] .price { direction: ltr; }

[dir="rtl"] .add-to-cart-button,
[dir="rtl"] .single_add_to_cart_button { display: block; text-align: center; }

/* WooCommerce cart/checkout */
[dir="rtl"] .woocommerce-cart,
[dir="rtl"] .woocommerce-checkout { text-align: right; }

[dir="rtl"] .woocommerce-cart-contents,
[dir="rtl"] .shop_table { direction: rtl; text-align: right; }

[dir="rtl"] .woocommerce-form-row { text-align: right; }

/* Product images/gallery */
[dir="rtl"] .product-gallery,
[dir="rtl"] .woocommerce-product-gallery { direction: rtl; }

[dir="rtl"] .flex-viewport { direction: rtl; }

/* ==========================================================================
   19) DROPDOWNS & MENUS RTL
   ========================================================================== */

/* Dropdown menus */
[dir="rtl"] .dropdown,
[dir="rtl"] .dropdown-menu { direction: rtl; }

[dir="rtl"] .dropdown-menu { left: auto; right: 0; }

/* Select dropdowns */
[dir="rtl"] select { direction: rtl; text-align: right; }

/* ==========================================================================
   20) SPACING & ALIGNMENT UTILITIES - FINAL ADJUSTMENTS
   ========================================================================== */

/* Ensure all text inputs and text-based elements respect RTL */
[dir="rtl"] .elementor-widget-container { direction: rtl; }
[dir="rtl"] .vc_row { flex-direction: row-reverse; }

/* Fix any remaining left-aligned text to be right-aligned */
[dir="rtl"] .text-left { text-align: right !important; }
[dir="rtl"] .text-right { text-align: left !important; }

/* Margin and padding directions */
[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }
[dir="rtl"] .pl-2 { padding-left: 0; padding-right: 0.5rem; }
[dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; }
[dir="rtl"] .ms-auto { margin-left: 0; margin-right: auto; }
[dir="rtl"] .me-auto { margin-right: 0; margin-left: auto; }

/* ==========================================================================
   21) HERO / GIANT DISPLAY HEADINGS — Arabic sizing
   The theme's display headings use condensed Latin fonts (Thunder / Clash) at
   huge sizes (140px–350px) with tight/negative line-height and letter-spacing.
   Arabic falls back to Cairo, which has completely different metrics, so those
   sizes overflow their containers and clip the taller Arabic glyphs. Re-scale
   fluidly with clamp() and give the script vertical breathing room.
   RTL-ONLY — the English (LTR) display headings are never touched.
   ========================================================================== */

/* --- About page hero: "الحرفية خلف العمل" (.px-about-2-title.fs-300 = 300px) --- */
[dir="rtl"] .px-about-2-title,
[dir="rtl"] .px-about-2-title.fs-300 {
	font-size: clamp(2.4rem, 8vw, 7rem) !important;
	line-height: 1.18 !important;
	letter-spacing: 0 !important;
	white-space: normal !important;
	overflow-wrap: break-word;
	word-break: break-word;
}
/* Its red accent word (<i>/<em>) and the decorative underline/image were offset
   for the Latin layout with big paddings & absolute positioning — neutralise. */
[dir="rtl"] .px-about-2-title i {
	font-size: clamp(1.4rem, 4vw, 3.2rem) !important;
	transform: none !important;
	line-height: 1.2 !important;
}
[dir="rtl"] .px-about-2-title em,
[dir="rtl"] .px-about-2-title.fs-300 em { padding-left: 0 !important; padding-right: 0 !important; }
[dir="rtl"] .px-about-2-title > span { display: none !important; }   /* absolute Latin underline */
[dir="rtl"] .px-about-2-title em img { display: none !important; }   /* decorative offset image */

/* --- About secondary display word (.px-about-2-subtitle = 160px/130px) --- */
[dir="rtl"] .px-about-2-subtitle,
[dir="rtl"] .px-about-2-subtitle.fs-130 {
	font-size: clamp(2rem, 6vw, 5rem) !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
}

/* --- "About Us" red statement heading (.tp-about-us-2-title = 200px) --- */
[dir="rtl"] .tp-about-us-2-title {
	font-size: clamp(2.2rem, 7vw, 6rem) !important;
	line-height: 1.18 !important;
	letter-spacing: 0 !important;
	white-space: normal !important;
	overflow-wrap: break-word;
}

/* --- Home hero title: "أفكار جريئة، تُنفَّذ بلا مساومة." (.px-hero-title = 140px) --- */
[dir="rtl"] .px-hero-title {
	font-size: clamp(2rem, 6vw, 5.5rem) !important;
	line-height: 1.22 !important;
	letter-spacing: 0 !important;
	white-space: normal !important;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Belt-and-braces: no giant display heading in Arabic may push past its box. */
[dir="rtl"] .px-hero-title,
[dir="rtl"] .px-about-2-title,
[dir="rtl"] .px-about-2-subtitle,
[dir="rtl"] .tp-about-us-2-title { max-width: 100%; }

/* Home hero mobile: keep the info wrap from forcing horizontal scroll. */
[dir="rtl"] .px-hero-info-wrap,
[dir="rtl"] .px-hero-title-box,
[dir="rtl"] .px-hero-title-wrap { max-width: 100%; overflow-x: clip; }

/* ==========================================================================
   22) PER-ELEMENT ELEMENTOR HERO/SECTION HEADINGS — Arabic sizing
   These are generic Elementor heading widgets whose enormous size (120–360px)
   is set per-element via Elementor's own typography controls (printed as INLINE
   <style> like `.elementor-NNN .elementor-element-XXXX .tp-el-title{font-size:…}`),
   tuned for the condensed Latin display font with heavy negative letter-spacing.
   In Arabic (Cairo) those sizes blow past their container and the negative
   tracking mangles the joined script — this is the giant "من نحن" overflow.
   The inline rule sets font-size WITHOUT !important, so our !important wins
   regardless of its higher class-count specificity. RTL-ONLY.
   ========================================================================== */
[dir="rtl"] .elementor-element-db3eab9 .tp-el-title,   /* about hero: من نحن (360px)   */
[dir="rtl"] .elementor-element-5ab4688 .tp-el-title,   /* service hero: الهوية بلا مساومة (300px) */
[dir="rtl"] .elementor-element-f7f8a75 .tp-el-title,   /* portfolio hero (290px)       */
[dir="rtl"] .elementor-element-29d7547 .tp-el-title,   /* portfolio: تواصل معنا (280px) */
[dir="rtl"] .elementor-element-e22d6e1 .tp-el-title,   /* about: أفكار جريئة (222px)    */
[dir="rtl"] .elementor-element-3b1c960 .tp-el-title,   /* team hero (200px)            */
[dir="rtl"] .elementor-element-3ce54332 .tp-el-title { /* contact hero (120px)         */
	font-size: clamp(2.2rem, 7vw, 6.5rem) !important;
	line-height: 1.18 !important;
	letter-spacing: 0 !important;
	white-space: normal !important;
	overflow-wrap: break-word;
	word-break: break-word;
	max-width: 100%;
}

/* The giant footer brand wordmark "No Name Advertising" (e9ff71d, 190px) is a
   LATIN brand name — keep it in the Latin display font at its designed size so
   it matches the English site exactly (don't route it through Cairo, don't cap). */
[dir="rtl"] .elementor-element-e9ff71d .tp-el-title {
	font-family: var(--tp-ff-thunder), 'Cairo', sans-serif !important;
}

/* ==========================================================================
   23) INTRO / SECTION ROWS — big heading + paragraph must lead from the RIGHT
   These rows are authored as [ small eyebrow label | big heading + copy ]. In
   RTL the first child (the label) lands on the RIGHT and pushes the big copy to
   the left. The site convention (see §6/§7 for the home rows) is that the BIG
   copy leads from the RIGHT with the small label tucked to the far LEFT — this
   makes the layout read correctly right-to-left everywhere. Reverse each row and
   pin its eyebrow to the left. Elementor reads flex-direction from the
   --flex-direction custom property, so both are overridden. RTL-ONLY.
   Home rows (cfbe272, 20ebb4f) are already handled in §7.
   ========================================================================== */
[dir="rtl"] .elementor-element-b6efc55,   /* about  : عن نو نيم | تأسست في 2018…            */
[dir="rtl"] .elementor-element-04b74c8,   /* about  : شركاء النجاح | موضع ثقة كبرى العلامات */
[dir="rtl"] .elementor-element-8566709 {  /* service: الهوية | إجابات على أسئلتك.           */
	--flex-direction: row-reverse !important;
	flex-direction: row-reverse !important;
}
/* Pin each row's small eyebrow label to the far-LEFT edge, matching the English
   layout (so the gap between the label and the paragraph is the same as EN).
   The label is an inline <span>, so text-align must sit on the block that holds
   it (the widget container / column), not on the span itself. These columns are
   full-width flex children, so text-align:left alone lands the label at the left
   edge — no align-items needed (flex-start would be the RIGHT edge in RTL). */
[dir="rtl"] .elementor-element-ee296f1,
[dir="rtl"] .elementor-element-ee296f1 .elementor-widget-container,
[dir="rtl"] .elementor-element-ee296f1 .elementor-heading-title,
[dir="rtl"] .elementor-element-ee296f1 .tp-el-title,
[dir="rtl"] .elementor-element-71907e7,
[dir="rtl"] .elementor-element-71907e7 .elementor-widget-container,
[dir="rtl"] .elementor-element-71907e7 .elementor-heading-title,
[dir="rtl"] .elementor-element-71907e7 .tp-el-title,
[dir="rtl"] .elementor-element-1318fe9,
[dir="rtl"] .elementor-element-1318fe9 .elementor-widget-container,
[dir="rtl"] .elementor-element-1318fe9 .elementor-heading-title,
[dir="rtl"] .elementor-element-1318fe9 .tp-el-title { text-align: left !important; }

/* ==========================================================================
   24) HERO DISPLAY HEADINGS + INTRO COPY — start from the RIGHT (standard RTL)
   Some hero headings/paragraphs carry a PER-ELEMENT alignment set by Elementor
   typography (`.elementor-{page} .elementor-element.elementor-element-XXX
   .tp-el-alignment{text-align:center|left !important}` — 4-class specificity),
   which the general §8 rule can't beat, so they stayed centered/left and the
   Arabic copy floated in the middle instead of starting from the right.
   `.elementor-element.elementor-element-XXX` (both classes) + doubled alignment
   class raises us to 5 classes so we win regardless of source order — WITHOUT
   coupling to a page id. RTL-ONLY.
   ========================================================================== */
[dir="rtl"] .elementor-element.elementor-element-db3eab9 .tp-el-alignment.tp-el-alignment,
[dir="rtl"] .elementor-element.elementor-element-db3eab9 .tp-el-title,      /* about: من نحن (was center) */
[dir="rtl"] .elementor-element.elementor-element-36f8a35 .tp-el-alignment.tp-el-alignment,
[dir="rtl"] .elementor-element.elementor-element-36f8a35 .tp-el-title,      /* about: intro paragraph (was left) */
[dir="rtl"] .elementor-element.elementor-element-5ab4688 .tp-el-alignment.tp-el-alignment,
[dir="rtl"] .elementor-element.elementor-element-5ab4688 .tp-el-title,      /* service: الهوية بلا مساومة (was left) */
[dir="rtl"] .elementor-element.elementor-element-3b1c960 .tp-el-alignment.tp-el-alignment,
[dir="rtl"] .elementor-element.elementor-element-3b1c960 .tp-el-title {     /* team hero (was left) */
	text-align: right !important;
}
/* The "من نحن" block sits in a container set to align-items:center — push the
   whole block to the right too (RTL cross-axis start = right). */
[dir="rtl"] .elementor-element-df61aeb {
	--align-items: flex-start !important;
	align-items: flex-start !important;
	text-align: right !important;
}

/* ==========================================================================
   25) SITE-WIDE — every section heading & paragraph starts from the RIGHT
   These headings/paragraphs carry a PER-ELEMENT `text-align:left` from Elementor
   typography (4-class inline rule with !important) that the general §8 rule can't
   beat, so the Arabic copy hugged the left. This is the systematic "make the
   Arabic read like a proper RTL site" pass: flip each one to RIGHT with a 5-class
   selector (both element classes + doubled alignment class) so it wins regardless
   of source order — WITHOUT coupling to a page id. Intentionally-centered blocks
   (e.g. contact #678f367) are left untouched. RTL-ONLY; English never sees these.
   ========================================================================== */
[dir="rtl"] .elementor-element.elementor-element-e83747e .tp-el-alignment.tp-el-alignment,
[dir="rtl"] .elementor-element.elementor-element-e83747e .tp-el-title,
[dir="rtl"] .elementor-element.elementor-element-7837988 .tp-el-alignment.tp-el-alignment,
[dir="rtl"] .elementor-element.elementor-element-7837988 .tp-el-title,
[dir="rtl"] .elementor-element.elementor-element-36f8a35 .tp-el-alignment.tp-el-alignment,
[dir="rtl"] .elementor-element.elementor-element-36f8a35 .tp-el-title,
[dir="rtl"] .elementor-element.elementor-element-13e1dca .tp-el-alignment.tp-el-alignment,
[dir="rtl"] .elementor-element.elementor-element-13e1dca .tp-el-title,
[dir="rtl"] .elementor-element.elementor-element-d553b28 .tp-el-alignment.tp-el-alignment,
[dir="rtl"] .elementor-element.elementor-element-d553b28 .tp-el-title,
[dir="rtl"] .elementor-element.elementor-element-3a49f92 .tp-el-alignment.tp-el-alignment,
[dir="rtl"] .elementor-element.elementor-element-3a49f92 .tp-el-title,
[dir="rtl"] .elementor-element.elementor-element-2f1fc3a .tp-el-alignment.tp-el-alignment,
[dir="rtl"] .elementor-element.elementor-element-2f1fc3a .tp-el-title,
[dir="rtl"] .elementor-element.elementor-element-159e8a9 .tp-el-alignment.tp-el-alignment,
[dir="rtl"] .elementor-element.elementor-element-159e8a9 .tp-el-title,
[dir="rtl"] .elementor-element.elementor-element-5ab4688 .tp-el-alignment.tp-el-alignment,
[dir="rtl"] .elementor-element.elementor-element-5ab4688 .tp-el-title,
[dir="rtl"] .elementor-element.elementor-element-770aa49 .tp-el-alignment.tp-el-alignment,
[dir="rtl"] .elementor-element.elementor-element-770aa49 .tp-el-title,
[dir="rtl"] .elementor-element.elementor-element-524cd52 .tp-el-alignment.tp-el-alignment,
[dir="rtl"] .elementor-element.elementor-element-524cd52 .tp-el-title,
[dir="rtl"] .elementor-element.elementor-element-5c8a597 .tp-el-alignment.tp-el-alignment,
[dir="rtl"] .elementor-element.elementor-element-5c8a597 .tp-el-title,
[dir="rtl"] .elementor-element.elementor-element-70b5aff .tp-el-alignment.tp-el-alignment,
[dir="rtl"] .elementor-element.elementor-element-70b5aff .tp-el-title,
[dir="rtl"] .elementor-element.elementor-element-3b1c960 .tp-el-alignment.tp-el-alignment,
[dir="rtl"] .elementor-element.elementor-element-3b1c960 .tp-el-title,
[dir="rtl"] .elementor-element.elementor-element-422b06e .tp-el-alignment.tp-el-alignment,
[dir="rtl"] .elementor-element.elementor-element-422b06e .tp-el-title {
	text-align: right !important;
}

/* ==========================================================================
   26) HOME intro-row eyebrows — same corrected left-pin as §23 (About/Service)
   §7 pinned the home eyebrows with `align-items: flex-start`, which is the RIGHT
   edge in an RTL flex column (the bug we hit on About). Restore full-width
   stretch and left-align the label on its container so it sits at the far left,
   consistent with every other intro row. RTL-ONLY.
   ========================================================================== */
[dir="rtl"] .elementor-element-63e5107,
[dir="rtl"] .elementor-element-4c78d0d { align-items: stretch !important; }
[dir="rtl"] .elementor-element-63e5107,
[dir="rtl"] .elementor-element-63e5107 .elementor-widget-container,
[dir="rtl"] .elementor-element-63e5107 .elementor-heading-title,
[dir="rtl"] .elementor-element-63e5107 .tp-el-title,
[dir="rtl"] .elementor-element-4c78d0d,
[dir="rtl"] .elementor-element-4c78d0d .elementor-widget-container,
[dir="rtl"] .elementor-element-4c78d0d .elementor-heading-title,
[dir="rtl"] .elementor-element-4c78d0d .tp-el-title { text-align: left !important; }

/* ==========================================================================
   27) FOOTER — mirror the English footer cleanly (no broken bits)
   ========================================================================== */
/* Phone numbers render reversed in RTL ("+20 100 000 0000" -> "0000 000 100 20+")
   because the RTL paragraph reorders the space-separated digit groups. `plaintext`
   lets EACH contact/menu item pick its own direction from its content: a phone or
   email resolves LTR (correct), Arabic text resolves RTL (correct). */
[dir="rtl"] .tp-el-list,
[dir="rtl"] .tp-footer-widget-info li,
[dir="rtl"] .tp-footer-widget-info a { unicode-bidi: plaintext; }

/* Bulletproof: phone links are always LTR numbers — force LTR ordering directly
   (content-agnostic, only hits tel: links) so "+20 100 000 0000" never reverses. */
[dir="rtl"] a[href^="tel:"] {
	direction: ltr !important;
	unicode-bidi: embed !important;
	display: inline-block;
}

/* Footer section-title bullet: the ::before dot uses margin-right (tuned for LTR).
   In RTL the dot sits to the RIGHT of the title, so the gap belongs on its LEFT. */
[dir="rtl"] .tp-footer-widget-title-sm.pre::before {
	margin-right: 0 !important;
	margin-left: 9px !important;
}
/* ==========================================================================
   28) FOOTER brand wordmark "No Name Advertising" — render identical to English
   It is a Latin brand word. In EN it is a huge LEFT-aligned, LTR, Thunder-font
   statement that wraps to two lines. In RTL it was inheriting Cairo + centering,
   so it came out smaller, centered and on one line. Force it back to the exact
   English rendering (LTR, left, Thunder) so there is zero difference. RTL-ONLY.
   ========================================================================== */
[dir="rtl"] .elementor-element.elementor-element-e9ff71d {
	width: 100% !important;
	max-width: 100% !important;
	align-self: stretch !important;
}
[dir="rtl"] .elementor-element.elementor-element-e9ff71d,
[dir="rtl"] .elementor-element.elementor-element-e9ff71d > .elementor-widget-container,
[dir="rtl"] .elementor-element.elementor-element-e9ff71d .tp-el-title,
[dir="rtl"] .elementor-element.elementor-element-e9ff71d .tp-copyright-big-text {
	direction: ltr !important;
	text-align: left !important;
	font-family: var(--tp-ff-thunder), sans-serif !important;
	unicode-bidi: isolate;
	white-space: normal !important;
}
/* Match the English size exactly (some RTL interaction shrank it to ~150px). */
[dir="rtl"] .elementor-element.elementor-element-e9ff71d .tp-el-title,
[dir="rtl"] .elementor-element.elementor-element-e9ff71d .tp-copyright-big-text {
	font-size: 190px !important;
	line-height: 1 !important;
	letter-spacing: -0.06em !important;
}
/* Its parent container centres the wordmark (justify/align center). Flip it to
   LTR + start so the wordmark hugs the LEFT and wraps exactly like English. */
[dir="rtl"] .elementor-element-3cd3866 {
	direction: ltr !important;
	--justify-content: flex-start !important;
	justify-content: flex-start !important;
	--align-items: flex-start !important;
	align-items: flex-start !important;
	text-align: left !important;
}



/* ==========================================================================
   29) FOOTER social block — match English, remove the stray "•"
   The social column holds: "بلا مساومة." title, a hidden "تابعنا / Follow Us"
   label (colour #141414 — invisible by design in BOTH languages), then the
   icons. In RTL something from that hidden label surfaced as a stray dot; hide
   it with visibility (space preserved, so icon position still matches EN).
   Also keep the icons in the SAME order as English (Instagram, Facebook,
   TikTok) rather than RTL-reversed, positioned on the right. RTL-ONLY.
   ========================================================================== */
[dir="rtl"] .elementor-element-61757a6 { visibility: hidden !important; }
[dir="rtl"] .tp-footer-widget-social,
[dir="rtl"] .tp-el-footer-social { direction: ltr; text-align: right; }
[dir="rtl"] .tp-footer-widget-social ul,
[dir="rtl"] .tp-footer-widget-social li { list-style: none !important; }

/* Social icon glyphs sat off-centre inside their round buttons in RTL: the theme
   centres them with line-height + text-align, but the Cairo font's line metrics
   shift the inline SVG. Centre with flexbox so it is exact regardless of font. */
[dir="rtl"] .tp-footer-widget-social a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
}
[dir="rtl"] .tp-footer-widget-social a > span {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1 !important;
}
[dir="rtl"] .tp-footer-widget-social a svg { display: block; }


/* ==========================================================================
   30) TOP NAV BAR — item spacing must sit on the LEFT in RTL
   The theme spaces menu items with `.px-header-menu > nav > ul > li:not(:last-child)
   { margin-right: 35px }`. In RTL that margin is on the wrong side, so the last
   item (تواصل معنا) gets no gap to أعمالنا and the two glue together. Flip the
   spacing to margin-left at every breakpoint the theme defines. RTL-ONLY.
   ========================================================================== */
[dir="rtl"] .px-header-menu > nav > ul > li:not(:last-child) {
	margin-right: 0 !important;
	margin-left: 35px !important;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	[dir="rtl"] .px-header-menu > nav > ul > li:not(:last-child) { margin-left: 10px !important; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	[dir="rtl"] .px-header-menu > nav > ul > li:not(:last-child) { margin-left: 20px !important; }
}


/* ==========================================================================
   31) About-page tagline marquee (.px-text-6-active) — space the slides
   The rotating tagline slider has 220px text and NO gap between slides. In EN the
   taglines are long enough to fill the view; the shorter Arabic taglines end up
   glued ("...بلا مساومةعلامات..."). Add horizontal padding to each slide's text so
   there is clear separation between taglines. RTL-ONLY.
   ========================================================================== */
[dir="rtl"] .px-hero-6-text { padding-left: 60px; padding-right: 60px; }
[dir="rtl"] .px-hero-6-text span { letter-spacing: 0 !important; }

/* ==========================================================================
   32) About "قيمنا / Our Values" section — right-paragraph method
   Row 65cebaf = [ eyebrow "قيمنا" | award-list "ما لا يتغيّر أبداً" + rows ]. Both
   are plain headings so the earlier scan missed it. In EN the "Our Values"
   eyebrow sits on the LEFT and the list on the RIGHT; mirror that: reverse the
   row (big content leads from the right) and pin the eyebrow to the far left.
   ========================================================================== */
[dir="rtl"] .elementor-element-65cebaf {
	--flex-direction: row-reverse !important;
	flex-direction: row-reverse !important;
}
[dir="rtl"] .elementor-element-cf0224f,
[dir="rtl"] .elementor-element-cf0224f .elementor-widget-container,
[dir="rtl"] .elementor-element-cf0224f .elementor-heading-title,
[dir="rtl"] .elementor-element-cf0224f .tp-el-title { text-align: left !important; }

/* ==========================================================================
   33) Intro-row eyebrows — let the label fill its column so it lands far-LEFT
   Some eyebrow columns set --align-items:center, which shrink-wraps and centres
   the label so text-align:left can't move it to the edge (e.g. "شركاء النجاح" in
   the "موضع ثقة" row). Force stretch so the label spans the column and its
   text-align:left (set per row above) pins it to the far left. RTL-ONLY.
   ========================================================================== */
[dir="rtl"] .elementor-element-ee296f1,
[dir="rtl"] .elementor-element-71907e7,
[dir="rtl"] .elementor-element-1318fe9,
[dir="rtl"] .elementor-element-cf0224f,
[dir="rtl"] .elementor-element-63e5107,
[dir="rtl"] .elementor-element-4c78d0d {
	--align-items: stretch !important;
	align-items: stretch !important;
}


/* ==========================================================================
   34) "شركاء النجاح" eyebrow (موضع ثقة row) — force it to the far LEFT
   Its column sits left correctly, but the label stayed right-aligned inside it.
   Higher-specificity override (both element classes) to pin the text left.
   ========================================================================== */
/* The real cause: the heading widget d4ee7da is pinned to the cross-START of its
   flex column via `--align-self: flex-start`, which is the RIGHT edge in RTL.
   Flip it to flex-end (= LEFT in RTL) so the label sits at the far left. */
[dir="rtl"] .elementor-element-d4ee7da {
	--align-self: flex-end !important;
	align-self: flex-end !important;
}
[dir="rtl"] .elementor-element.elementor-element-71907e7 .elementor-widget-container,
[dir="rtl"] .elementor-element.elementor-element-71907e7 .elementor-heading-title,
[dir="rtl"] .elementor-element.elementor-element-71907e7 h2 {
	text-align: left !important;
}

/* ==========================================================================
   35) Service hero labels are CSS pseudo-element content (Elementor custom CSS,
   title-case shown uppercase). They are NOT DOM text, so translate them by
   overriding the ::before/::after `content` for Arabic. Service-1-3 (Branding).
   ========================================================================== */
[dir="rtl"] .elementor-element.elementor-element-5ab4688 .tp-el-title::before {
	content: "خدمتنا / 01" !important;
	font-family: 'Cairo', sans-serif !important;
}
[dir="rtl"] .elementor-element.elementor-element-5ab4688 .tp-el-title::after {
	content: "الهوية · التسمية · الحملات" !important;
	font-family: 'Cairo', sans-serif !important;
}
[dir="rtl"] .elementor-element.elementor-element-5feff64::after {
	content: "● هوية مميّزة" !important;
	font-family: 'Cairo', sans-serif !important;
}

/* ==========================================================================
   36) Service "نبني علاماتٍ" section — paragraph should read from the RIGHT
   The heading spans wide (right-aligned). Its supporting paragraph + link sit in
   a flex row (4e0d632) with justify-content:flex-end, which is the LEFT edge in
   RTL, so they drifted to the centre-left. Flip to flex-start (= RIGHT in RTL) so
   the paragraph groups under the heading and reads right-to-left. RTL-ONLY.
   ========================================================================== */
[dir="rtl"] .elementor-element-4e0d632 {
	justify-content: flex-start !important;
	--justify-content: flex-start !important;
}

/* ==========================================================================
   37) Service "نقدر نساعدك بـ..." bubble capabilities — fit Arabic in the circles
   Each bubble is a fixed 160px circle with 32px condensed-Latin text. Arabic
   (Cairo) at 32px overflows badly and the physics rotation makes long labels
   unreadable. Shrink the text, let it wrap and centre, and keep bubbles upright.
   RTL-ONLY.
   ========================================================================== */
[dir="rtl"] .px-capsule-item {
	font-size: 15px !important;
	line-height: 1.25 !important;
	text-align: center !important;
	padding: 12px !important;
	word-break: break-word;
	overflow-wrap: break-word;
	white-space: normal !important;
}
[dir="rtl"] .px-capsule-item-wrapper [data-px-throwable-el] {
	rotate: 0deg !important;
}

/* ==========================================================================
   38) Service process "خطوة / STEP" big label — mirror to the RIGHT in RTL
   `.px-step-num` is absolutely positioned at left:40px (top-left) for LTR. In RTL
   it must sit on the RIGHT, so flip left→right. Also mirror its inner badge. RTL-ONLY.
   ========================================================================== */
[dir="rtl"] .px-step-num { left: auto !important; right: 40px !important; }
[dir="rtl"] .px-step-num span i { left: auto !important; right: 1%; }

/* ==========================================================================
   39) Service FAQ "إجابات على أسئلتك" — eyebrow stacks ABOVE heading on the RIGHT
   §23 mis-treated 8566709 as a horizontal intro row and reversed it, splitting the
   "الهوية والعلامة التجارية" eyebrow off to the left. But 8566709 is a COLUMN: the
   eyebrow belongs ABOVE the heading, both right-aligned (mirror of the EN left
   stack). Restore the column direction and right-align the eyebrow. RTL-ONLY.
   ========================================================================== */
[dir="rtl"] .elementor-element-8566709 {
	--flex-direction: column !important;
	flex-direction: column !important;
	--align-items: flex-start !important;   /* flex-start = RIGHT edge in an RTL column */
	align-items: flex-start !important;
}
/* Eyebrow: same right edge as the heading (its widget may carry align-self:flex-start
   which is already the right side — but pin it explicitly and right-align its text). */
[dir="rtl"] .elementor-element-1318fe9 { align-self: flex-start !important; --align-self: flex-start !important; }
[dir="rtl"] .elementor-element-1318fe9,
[dir="rtl"] .elementor-element-1318fe9 .elementor-widget-container,
[dir="rtl"] .elementor-element-1318fe9 .elementor-heading-title,
[dir="rtl"] .elementor-element-1318fe9 .tp-el-title { text-align: right !important; }

/* ==========================================================================
   40) Portfolio hero "أعمالنا" — big and CENTRED (was over-capped + right-aligned)
   f7f8a75 is the .px-hero-4-bigtitle.text-center hero word (290px). §22 capped it
   to ~104px and §5 right-aligned .tp-el-title, so it came out small and off-centre.
   It is a short word, so restore a large fluid size and centre it. RTL-ONLY.
   ========================================================================== */
[dir="rtl"] .elementor-element.elementor-element-f7f8a75 .tp-el-title,
[dir="rtl"] .px-hero-4-bigtitle.text-center .tp-el-title {
	font-size: clamp(4rem, 19vw, 17rem) !important;
	line-height: 1.05 !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	max-width: 100%;
}
[dir="rtl"] .px-hero-4-bigtitle { text-align: center !important; }