/* Theme Name: Renvo child Template: renvo Theme URI: https://renvo.themesht.com/ Author: Themeht Author URI: https://www.themeht.com Description: Renvo - Child Theme Version: 1.5.154 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: renvo Tags: one-column, two-columns, right-sidebar, custom-logo, custom-menu, threaded-comments, translation-ready, left-sidebar, custom-background, custom-colors, custom-header, featured-images, sticky-post */ /* ====================================================== Build Safe custom styles (updated 2026-09-02 b) ====================================================== */ /* (Preloader is restyled near the end of this file — logo beside the spinner.) */ /* ====================================================== Arabic (RTL) only ====================================================== */ /* Adopt Cairo consistently across the whole Arabic version. Icons are safe: their glyphs render via ::before with their own icon font, which we never target here. */ .rtl body, .rtl h1, .rtl h2, .rtl h3, .rtl h4, .rtl h5, .rtl h6, .rtl p, .rtl a, .rtl li, .rtl blockquote, .rtl button, .rtl input, .rtl textarea, .rtl select, .rtl label, .rtl .title, .rtl .elementor-heading-title, .rtl .elementor-widget-text-editor, .rtl .banner-content, .rtl .banner-content h1, .rtl .banner-content h2, .rtl .banner-content h3, .rtl .banner-content p, .rtl .banner-content span, .rtl .btn-text { font-family: 'Cairo', sans-serif !important; } /* generic text spans, but never icon spans */ .rtl span:not([class*="flaticon"]):not([class*="bi"]):not([class*="icon"]):not([class*="fa-"]) { font-family: 'Cairo', sans-serif !important; } /* Main menu: Cairo Bold */ .rtl .main-nav .menu > li > a, .rtl .main-nav ul li a, .rtl .hfe-nav-menu a { font-family: 'Cairo', sans-serif !important; font-weight: 700 !important; } /* Dropdown caret ( \F282 ) next to top-level items: gap from the word */ .rtl .main-nav > ul > li.menu-item-has-children > a::after { margin-left: 0; margin-right: 0.55em; } /* Dropdowns open toward the LEFT in RTL */ .rtl .main-nav ul.sub-menu { left: auto; right: 0; } .rtl .main-nav ul.sub-menu li ul { left: auto !important; right: 100%; } /* Sub-menu (3rd level) toggle chevron: point LEFT + sit on the left side */ .rtl .main-nav .sub-menu .sub-menu-toggle .bi-chevron-right { display: inline-block; transform: scaleX(-1); } @media (min-width: 1200px) { .rtl .main-nav .sub-menu .sub-menu-toggle { right: auto; left: 10px; } } /* Phone widget: gap for the handset icon, heading bold, number forced LTR (+ on left) */ .rtl .elementor-widget-header-call svg { margin-left: 14px; } .rtl .elementor-widget-header-call .header-number span { font-weight: 700; } .rtl .elementor-widget-header-call a[href^="tel"] { direction: ltr; unicode-bidi: embed; display: inline-block; } /* Button: flip the whole icon box (keeps the single-arrow slide animation intact) */ .rtl .btn-icon { transform: scaleX(-1); } /* Button label in Cairo Bold */ .rtl .themeht-btn .btn-text { font-family: 'Cairo', sans-serif; font-weight: 700; } /* ========================================================== Header CTA button ("تواصل معنا" / "Call us") -> WhatsApp. Same Elementor widget id (b7dd6af) in both AR + EN headers, so one selector styles both languages. ========================================================== */ /* v1.5.125: WhatsApp icon REMOVED — the button is now "استلام تقارير الفحص" / "Get Inspection Report" (→ reports page). Hide the icon slot entirely so no glyph/arrow shows; keep just the text. */ .elementor-element-b7dd6af .themeht-btn .btn-icon { display: none !important; } /* No icon now -> symmetric padding, centred text, proper button size (the theme's default 4px/20px asymmetric padding was built around the 40px icon circle). */ .elementor-element-b7dd6af .themeht-btn, .rtl .elementor-element-b7dd6af .themeht-btn { gap: 0 !important; padding: 9px 18px !important; justify-content: center !important; text-align: center !important; } .elementor-element-b7dd6af .themeht-btn .btn-text { color: var(--themeht-white-color) !important; text-shadow: none !important; overflow: visible !important; width: auto !important; } /* ========================================================== Hero slider content (single slide) — AR + EN. ========================================================== */ /* Hero slideshow nav — the theme's curved white pill, replicated verbatim so it renders identically on BOTH languages (the theme's own render was inconsistent between LTR and RTL). EN sits on the RIGHT; AR is mirrored to the LEFT. */ .banner-slider .banner-swiper-buttons { position: absolute !important; top: auto !important; bottom: 50% !important; right: -29px !important; left: auto !important; width: 110px !important; height: 54px !important; transform: rotate(-90deg) !important; background-color: var(--themeht-white-color) !important; border-radius: 20px 20px 0 0 !important; display: block !important; padding: 0 !important; box-shadow: none !important; z-index: 1 !important; } .banner-slider .banner-swiper-buttons::after { content: "" !important; display: block !important; width: 60px !important; height: 60px !important; position: absolute !important; border-radius: 20px !important; bottom: -34px !important; left: -26px !important; right: auto !important; top: auto !important; box-shadow: inset -34px -34px 0 0 var(--themeht-white-color) !important; transform: rotate(2deg) !important; } .banner-slider .banner-swiper-buttons::before { content: "" !important; display: block !important; width: 60px !important; height: 60px !important; position: absolute !important; border-radius: 20px !important; bottom: -34px !important; right: -26px !important; left: auto !important; top: auto !important; box-shadow: inset -34px -34px 0 0 var(--themeht-white-color) !important; transform: rotate(-270deg) !important; } .banner-slider .banner-swiper-buttons .swiper-button-next, .banner-slider .banner-swiper-buttons .swiper-button-prev { position: absolute !important; width: 40px !important; height: 40px !important; border-radius: 14px !important; background: var(--themeht-white-color) !important; border: none !important; filter: drop-shadow(0 20px 17.5px rgba(8,29,82,.13)) !important; bottom: 6px !important; top: inherit !important; margin: 0 !important; display: block !important; line-height: 40px !important; transition: background .3s ease !important; } .banner-slider .banner-swiper-buttons .swiper-button-next { right: 10px !important; left: auto !important; } .banner-slider .banner-swiper-buttons .swiper-button-prev { right: 62px !important; left: auto !important; } .banner-slider .banner-swiper-buttons .swiper-button-next::after, .banner-slider .banner-swiper-buttons .swiper-button-prev::after { display: inline-block !important; line-height: 43px !important; font-size: 18px !important; color: var(--themeht-text-color) !important; content: "\f13f" !important; font-family: flaticon_mycollection !important; position: static !important; margin: 0 !important; transform: none !important; opacity: 1 !important; transition: color .3s ease !important; } .banner-slider .banner-swiper-buttons .swiper-button-prev::after { transform: rotate(180deg) !important; } /* hover (both langs): fill green, arrow turns white */ .banner-slider .banner-swiper-buttons .swiper-button-next:hover, .banner-slider .banner-swiper-buttons .swiper-button-prev:hover { background: var(--themeht-primary-color) !important; } .banner-slider .banner-swiper-buttons .swiper-button-next:hover::after, .banner-slider .banner-swiper-buttons .swiper-button-prev:hover::after { color: var(--themeht-white-color) !important; } /* ARABIC: mirror the pill to the LEFT edge by rotating the OTHER way (rotate 90 instead of -90). This flips the whole tab — concave notch, buttons and arrows — to the left cleanly, without the distortion scaleX caused. */ .rtl .banner-slider .banner-swiper-buttons { right: auto !important; left: -29px !important; transform: rotate(90deg) !important; } /* ARABIC: slides use pre-flipped image FILES (not a CSS scaleX), so the theme's zoom+fade slide transition still animates the image transform like EN. */ /* PHONE: move the nav pill to the BOTTOM-centre (horizontal bar) like the demo, un-rotated. Same for both languages. */ @media (max-width: 767px) { .banner-slider .banner-swiper-buttons, .rtl .banner-slider .banner-swiper-buttons { transform: none !important; top: auto !important; bottom: 0 !important; left: 50% !important; right: auto !important; margin-left: -55px !important; width: 110px !important; height: 54px !important; border-radius: 20px 20px 0 0 !important; } /* KEEP the theme's concave curve masks on the bottom bar (like the demo). */ .banner-slider .banner-swiper-buttons::before, .banner-slider .banner-swiper-buttons::after { display: block !important; } /* Phones use dedicated 9:16 portrait images (cover fills the screen, no crop). */ .banner-slider .slider-img { background-size: cover !important; background-position: center center !important; } .banner-slider .swiper-slide[data-swiper-slide-index="0"] .slider-img { background-image: url('https://buildsafex.com/wp-content/uploads/2026/09/bs-hero-m-01-en.jpg') !important; } .banner-slider .swiper-slide[data-swiper-slide-index="1"] .slider-img { background-image: url('https://buildsafex.com/wp-content/uploads/2026/09/bs-hero-m-02-en.jpg') !important; } .banner-slider .swiper-slide[data-swiper-slide-index="2"] .slider-img { background-image: url('https://buildsafex.com/wp-content/uploads/2026/09/bs-hero-m-03-en.jpg') !important; } .banner-slider .swiper-slide[data-swiper-slide-index="3"] .slider-img { background-image: url('https://buildsafex.com/wp-content/uploads/2026/09/bs-hero-m-04-en.jpg') !important; } .banner-slider .swiper-slide[data-swiper-slide-index="4"] .slider-img { background-image: url('https://buildsafex.com/wp-content/uploads/2026/09/bs-hero-m-05-en.jpg') !important; } .banner-slider .swiper-slide[data-swiper-slide-index="5"] .slider-img { background-image: url('https://buildsafex.com/wp-content/uploads/2026/09/bs-hero-m-06-en.jpg') !important; } .banner-slider .swiper-slide[data-swiper-slide-index="6"] .slider-img { background-image: url('https://buildsafex.com/wp-content/uploads/2026/09/bs-hero-m-07-en.jpg') !important; } .banner-slider .swiper-slide[data-swiper-slide-index="7"] .slider-img { background-image: url('https://buildsafex.com/wp-content/uploads/2026/09/bs-hero-m-08-en.jpg') !important; } .banner-slider .swiper-slide[data-swiper-slide-index="8"] .slider-img { background-image: url('https://buildsafex.com/wp-content/uploads/2026/09/bs-hero-m-09-en.jpg') !important; } .banner-slider .banner-content { padding-top: 90px !important; padding-bottom: 90px !important; } /* left corner-mask mirrored so BOTH sides curve symmetrically (kills the stray little "tooth" the un-rotated left mask left on the bottom bar). */ .banner-slider .banner-swiper-buttons::after { transform: scaleX(-1) rotate(90deg) !important; } /* CEO section on phones: single 9:16 director background, cropped a bit more from the top. */ .elementor-element-b461b17 { background-image: url('https://buildsafex.com/wp-content/uploads/2026/09/m_director-9x16-2.png') !important; background-size: cover !important; background-position: center top !important; } } /* CEO section (desktop/laptop): single director background, cover. Position is left to the theme's scroll (parallax) effect — no !important freeze. */ @media (min-width: 768px) { .elementor-element-b461b17 { background-size: cover !important; } } /* Our headline is longer than the demo's, whose display type is 90-100px and wraps to 4 lines / overflows the fold. Scale it responsibly per breakpoint. */ .banner-slider .banner-content .hero-heading, .banner-slider .banner-content .title-text { font-size: 60px !important; line-height: 1.32 !important; /* a little air between the 3 heading lines */ } @media (max-width: 1366px) { .banner-slider .banner-content .hero-heading, .banner-slider .banner-content .title-text { font-size: 48px !important; } } @media (max-width: 1024px) { .banner-slider .banner-content .hero-heading, .banner-slider .banner-content .title-text { font-size: 40px !important; } } @media (max-width: 767px) { .banner-slider .banner-content .hero-heading, .banner-slider .banner-content .title-text { font-size: 30px !important; } } /* Legibility over the photo (works regardless of the overlay gradient side). */ .banner-slider .banner-content .hero-heading, .banner-slider .banner-content .title-text, .banner-slider .banner-content p { text-shadow: 0 2px 12px rgba(0,0,0,.45); } /* ---- Hero slider: AR mirrors EN (overlay side, badge gap, desc lines, CTA) ---- */ /* Overlay: EN darkens the LEFT (its text side). RTL text sits on the right, so flip the horizontal gradient to darken the RIGHT for legibility (keep the vertical ones). */ .rtl .banner-slider .slider-overlay { background: linear-gradient(86deg, #001a1e00 38%, #001a1e8a 70%, #001a1e), linear-gradient(1deg, #001a1e00 55%, #001a1e33 83%, #001a1eb5), linear-gradient(#001a1e00 47%, #001a1e33) !important; } /* Badge: gap between the highlighted "بيلد سيف" and the rest (mirror of EN's span gap). */ .rtl .banner-slider .banner-content h6 span { margin-right: 0 !important; margin-left: 10px !important; } /* Desc: constrain the Arabic paragraph so the (kashida-stretched) wording wraps to ~3 lines. Widening of the letters comes from the tatweel in the text itself. */ @media (min-width: 1200px) { .rtl .banner-slider.style-one .banner-content p { max-width: 70%; } } /* Badge sizing is AR-ONLY. Smaller on desktop/laptop (user request). */ .rtl .banner-slider .banner-content h6 { font-size: 13px !important; } .rtl .banner-slider .banner-content h6 span { font-size: 12px !important; } /* Heading: make the whole title bold so it reads over the photo. */ .banner-slider .banner-content .hero-heading, .banner-slider .banner-content .title-text { font-weight: 700 !important; } /* title-text ("قبل الشراء، البناء، / او الاستلام"): own line + honour the newline we stored in the field (esc_html keeps \n; pre-line renders it as a break — the widget escapes
, so a real newline is the reliable way). */ .banner-slider .banner-content .title-text { display: block; white-space: pre-line; } /* AR only: extra air between the 3 heading lines. */ .rtl .banner-slider .banner-content .hero-heading, .rtl .banner-slider .banner-content .title-text { line-height: 1.5 !important; } /* Desc font: EN stays at 18px (keeps its 3 lines). AR only is larger + looser. */ .banner-slider .banner-content p { font-size: 18px !important; } .rtl .banner-slider .banner-content p { font-size: 20px !important; line-height: 1.75 !important; } /* Desc entrance reveal: theme's .animate-clip wipes LEFT->RIGHT. Mirror it for AR so "نقدّم حلول" reveals RIGHT->LEFT. Mirror the theme's OWN two rules exactly (same shape, just `.rtl`) so the active/full state matches wherever the theme's does — over-scoping the active selector once left the desc stuck clipped. */ .rtl .banner-content .animate-clip { /* rest: sliver on the RIGHT */ -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } .rtl .swiper-slide-active .animate-clip { /* active: full (reveals right->left) */ -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } /* Hero slider (RTL): do NOT mirror the slide image. The parent theme animates the reveal via transform on .slider-img (translateX(-25%) scale(1.5) -> translateX(0) scale(1) over 3s). A static `.rtl .slider-img { transform: scaleX(-1) }` overrode BOTH states with the same value, killing the motion in Arabic. Mirroring a photo is undesirable anyway, so we drop it and let the parent's motion run in RTL as in LTR. Only the content padding is swapped for RTL text placement. */ @media (min-width: 1200px) { .rtl .banner-content { padding-right: 125px !important; padding-left: 30px !important; } } /* Header nav: keep every label on ONE line and let the menu use the free space in the header row so items like "من نحن" / "تواصل معنا" don't break in two. */ @media (min-width: 1200px) { .main-nav > ul.menu { justify-content: flex-start !important; flex-wrap: nowrap !important; } .main-nav ul li a { white-space: nowrap !important; } .main-nav > ul > li > a { padding-left: 12px !important; padding-right: 12px !important; font-size: 15px; } /* the menu widget was capped ~611px with empty space beside it: let it grow */ .elementor-element-354a47a { flex-grow: 1 !important; width: auto !important; } .elementor-widget-ht-site-logo { margin-inline-end: 15px; } } /* Submenu item hover effect + language button (desktop only). In LTR the parent theme grows an underline from left:0 and indents with padding-left; both sit on the wrong (start) side in RTL, so the Arabic dropdown had no hover effect. */ @media (min-width: 1200px) { /* underline grows from the reading start (right) in RTL */ .rtl .main-nav .sub-menu li a::after { left: auto !important; right: 0 !important; } /* indent from the right on hover (mirror of the LTR padding-left:30px) */ .rtl .main-nav .sub-menu li a:hover, .rtl .main-nav ul li .sub-menu li.current-menu-item > a { padding-left: 22px !important; padding-right: 33px !important; } /* Language switcher button: center flag + label + caret, and give the caret room. */ .main-nav .pll-parent-menu-item > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px; padding-left: 18px !important; padding-right: 18px !important; } .main-nav .pll-parent-menu-item > a > span { margin: 0 !important; } /* kill inline margin-right */ .main-nav .pll-parent-menu-item > a::after { margin: 0 !important; } /* Open the dropdown when hovering ANYWHERE on the button (both languages) and keep it reachable. Pin it flush under the button + an invisible hover bridge spanning the button width, so travelling from the caret/padding to the dropdown never crosses a dead gap that would close it. */ /* keep the whole language button above any hero/slider element that may overlap the header edge and steal the hover on part of the button */ .main-nav .pll-parent-menu-item { position: relative; z-index: 6; } .main-nav .pll-parent-menu-item > a { position: relative; z-index: 1; } .main-nav .pll-parent-menu-item > .sub-menu { margin-top: 0 !important; /* sit flush under the button (keeps hover reachable) */ min-width: 170px !important; /* smaller than the theme's 16em default */ max-width: 220px !important; } /* NOTE: WordPress puts the `rtl` class on , not , so the LTR guard must be body:not(.rtl) — html:not(.rtl) would (wrongly) match in Arabic too. */ .rtl .main-nav .pll-parent-menu-item > .sub-menu { left: auto !important; right: 0 !important; } body:not(.rtl) .main-nav .pll-parent-menu-item > .sub-menu { right: auto !important; left: 0 !important; } .main-nav .pll-parent-menu-item::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } .main-nav .pll-parent-menu-item:hover > .sub-menu, .main-nav .pll-parent-menu-item:focus-within > .sub-menu, .main-nav .pll-parent-menu-item > a:hover ~ .sub-menu { top: 100% !important; opacity: 1 !important; visibility: visible !important; } } /* Footer logo: the widget collapses to 0 width in the flex column -> force it to render */ [data-elementor-type="footer"] .elementor-widget-ht-site-logo, .hfe-footer .elementor-widget-ht-site-logo { width: auto !important; display: block !important; } [data-elementor-type="footer"] .ht-site-logo, .hfe-footer .ht-site-logo { display: inline-block !important; } [data-elementor-type="footer"] .ht-site-logo img, .hfe-footer .ht-site-logo img { width: 190px !important; height: auto !important; max-width: 100%; } /* Arabic titles: tanween/diacritics get clipped by overflow:hidden + tight line-height */ .rtl .elementor-widget-title .title, .rtl .elementor-widget-title h1, .rtl .elementor-widget-title h2, .rtl .elementor-widget-title h3, .rtl .elementor-widget-title h4, .rtl .elementor-widget-title h5, .rtl .elementor-widget-title h6, .rtl .title-sub { overflow: visible !important; line-height: 1.5 !important; } .rtl .title-sub { display: inline-block; } /* About: the rotated "years of experience" label is unreadable in Arabic -> un-rotate */ .rtl .about-roted-text { transform: none !important; writing-mode: horizontal-tb !important; white-space: nowrap; } /* ========================================================== Arrow CTA buttons — static arrow + WhatsApp-style hover. Targets the hero "أعمالنا"/"Our Work" button and the About "خدماتنا"/"Services" button (id f917e56), AR + EN. The theme ships a sliding double-arrow; mirrored for RTL it slides out of view and leaves an empty icon box. Replace it with ONE static arrow glyph that stays centred and turns white as the icon box fills on hover — same feel as the header WhatsApp button (no sliding ghost). */ /* Keep the theme's natural layout (icon box flush at the button END, like the header "تواصل معنا" CTA): flex-direction:row-reverse. We only (a) render the label solid, (b) mirror the asymmetric padding for RTL, and (c) swap the sliding double-arrow for one static arrow. */ .banner-slider .banner-content .themeht-btn .btn-text, .elementor-element-f917e56 .themeht-btn .btn-text { color: var(--themeht-white-color) !important; text-shadow: none !important; overflow: visible !important; } /* RTL: the theme's padding-left:20px sits on the wrong side; mirror it so the label is balanced and the icon box lands flush at the (left) end — same fix as the header WhatsApp button. */ .rtl .banner-slider .banner-content .themeht-btn, .rtl .elementor-element-f917e56 .themeht-btn { padding-left: 4px !important; padding-right: 20px !important; } /* hide the two sliding arrows */ .banner-slider .banner-content .themeht-btn .btn-icon i, .elementor-element-f917e56 .themeht-btn .btn-icon i { display: none !important; } /* one static arrow. Colour inherits from .btn-icon, so the theme's own hover colour-swap (dark<->white as the fill grows) applies automatically. */ .banner-slider .banner-content .themeht-btn .btn-icon::after, .elementor-element-f917e56 .themeht-btn .btn-icon::after { content: "\f13f"; /* flaticon-right-arrow-1 */ font-family: "flaticon_mycollection" !important; font-size: 15px; line-height: 1; position: relative; /* lift ABOVE the hover fill (::before, z-index:0) */ z-index: 1; /* without this the fill covers the arrow on hover */ } /* NOTE: the generic `.rtl .btn-icon{transform:scaleX(-1)}` already mirrors the box (arrow points LEFT in AR). Do NOT flip ::after again — that double-flip is what left the AR arrow pointing right. */ /* Hover: turn the arrow WHITE so it stays visible once the box fills. */ .banner-slider .banner-content .themeht-btn .btn-icon::after, .elementor-element-f917e56 .themeht-btn .btn-icon::after { transition: color .3s ease; } .banner-slider .banner-content .themeht-btn:hover .btn-icon::after, .elementor-element-f917e56 .themeht-btn:hover .btn-icon::after { color: var(--themeht-white-color) !important; } /* Fill direction — global rule: AR fills RIGHT->LEFT, EN fills LEFT->RIGHT. These arrow buttons carry `.rtl .btn-icon{transform:scaleX(-1)}`, which mirrors the whole box. So anchoring the fill at left:0 (grows left->right) renders as left->right in EN and, once mirrored, RIGHT->LEFT in AR — exactly the rule. Hence a single left:0 anchor for both, no .rtl override. */ .banner-slider .banner-content .themeht-btn .btn-icon::before, .elementor-element-f917e56 .themeht-btn .btn-icon::before { left: 0; right: auto; } /* ========================================================== About Us section — AR mirrors EN spacing / alignment. ========================================================== */ /* About image container: reveal effect is now the theme's GSAP background parallax (class `bg-gsap-about`, wired in functions.php with its own ScrollTrigger — same config/timing as the theme's `.bg-gsap` sections). No CSS keyframe here anymore. */ /* Feature items (تصميمات هندسية / مهندسون معتمدون): the icon gap sits on margin-right (LTR). Mirror it for RTL, and align the block flush to the paragraph's start edge (no leading indent). */ .rtl .featured-item.style-3 .featured-img, .rtl .featured-item.style-3 .featured-icon { margin-right: 0 !important; margin-left: 20px !important; } .elementor-element-ef7fde0 .featured-item.style-3 { margin-inline-start: 0 !important; } /* two feature cells: even, comfortable gap */ .elementor-element-ef7fde0 { gap: 24px !important; } /* Check-list (فريق هندسي.. / خبرة..): drop the default list indent so the check icon starts at the paragraph's start edge. */ .elementor-element-5799ab1 ul.list-icon { padding-inline-start: 0 !important; margin-inline-start: 0 !important; } /* AR: the theme puts the icon->text gap on margin-right (LTR). In RTL that gap lands on the wrong side and the check mark touches the text — mirror it so the gap sits between the check and the words, matching EN's spacing (10px). */ .rtl .elementor-element-5799ab1 ul.list-icon li i { margin-right: 0 !important; margin-left: 10px !important; } /* Progress "معدل رضا العملاء 92%": the theme absolutely-positions the percentage at right:0. float has no effect on an absolutely-positioned box, so in AR it stayed on the right (over the title). Re-anchor it to the LEFT for AR. */ .rtl .elementor-element-1a31dd1 .elementor-progress-percentage { right: auto !important; left: 0 !important; float: none !important; } /* About CTA button (خدماتنا / Services): in AR the user wants it on the RIGHT (reading-start side) of the paragraph column. The button is inline-flex, so text-align moves it. */ .rtl .elementor-element-f917e56 .elementor-widget-container { text-align: right !important; } /* About heading "تتجاوز 20 عامًا": the italic Playfair "20 عامًا" span crowds the preceding word in AR so the space looked missing — add an explicit gap on the span's start (right) side. AR only (EN's Latin space renders fine). */ .rtl .elementor-element-f346c35 .title-sub { margin-right: 12px !important; } /* Brand name highlight inside the About paragraph ("بيلد سيف" / "Build Safe"): same green the removed drop-cap used (theme primary color). */ .bs-brand { color: var(--themeht-primary-color) !important; font-weight: 700; } /* Floating scroll-to-top button: in AR move it to the LEFT, mirroring EN's right:50px offset exactly (left:50px). */ .rtl .scroll-top { left: 50px !important; right: auto !important; } /* "لنتحدث عن مشروعك" intro paragraph (8547a4d): right-align in AR like the other paragraphs (the theme centred the drop-cap paragraph). */ .rtl .elementor-element-8547a4d, .rtl .elementor-element-8547a4d .elementor-widget-container, .rtl .elementor-element-8547a4d p { text-align: right !important; } /* The dark column keeps the LTR design's asymmetric padding (right:100 left:10), so in RTL the content sits 100px away from the right edge and reads as centred. Mirror the padding for RTL so all of it hugs the right edge (~10px) like the About paragraph above. */ .rtl .elementor-element-e2e13fa { padding-right: 10px !important; padding-left: 100px !important; } /* Progress percentages 74% / 85%: mirror of EN (where the % sits at the bar end, opposite the title). Title is on the right in AR, so the % goes to the LEFT. */ .rtl .elementor-element-26fe76d .elementor-progress-percentage, .rtl .elementor-element-8c5efae .elementor-progress-percentage { left: 0 !important; right: auto !important; } /* Contact form (a506591 / CF7): make it RTL so the fields read right-to-left (الاسم on the right, then البريد; رقم الهاتف on the right, then اختر الخدمة) and the field text is right-aligned. */ .rtl .elementor-element-a506591 .wpcf7-form { direction: rtl !important; } .rtl .elementor-element-a506591 .wpcf7-form .row { direction: rtl !important; } .rtl .elementor-element-a506591 .wpcf7-form input, .rtl .elementor-element-a506591 .wpcf7-form textarea, .rtl .elementor-element-a506591 .wpcf7-form select { direction: rtl !important; text-align: right !important; } /* Select "اختر الخدمة": move the dropdown chevron to the LEFT side in AR. */ .rtl .elementor-element-a506591 .wpcf7-form select { background-position: left 12px center !important; padding-left: 30px !important; padding-right: 20px !important; } /* Submit button "إرسال" to the LEFT of the form in AR. */ .rtl .elementor-element-a506591 .wpcf7-form .row > div:last-child { text-align: left !important; } /* Field validation tips: show clearly under each field, right-aligned. */ .rtl .elementor-element-a506591 .wpcf7-not-valid-tip { display: block !important; direction: rtl !important; text-align: right !important; font-size: 13px !important; margin-top: 5px !important; position: static !important; } .rtl .elementor-element-a506591 .wpcf7-form-control-wrap { display: block !important; } /* ========================================================== Our Work (fc5f41c) — uniform image dimensions. The four project photos have different aspect ratios, so lock them to a consistent 3:2 crop. (7a28515 = the same cards on the Our Work page.) */ .elementor-element-fc5f41c img, .elementor-element-7a28515 img { aspect-ratio: 3 / 2 !important; width: 100% !important; height: auto !important; object-fit: cover !important; } /* ========================================================== Blog cards (AR) — author on the right, category badge on the left. Spread the two meta items to opposite ends of the card. */ .rtl .post-card ul.post-bottom:not(.post-shape-area) { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100%; padding: 0 !important; margin: 28px 0 0 !important; } /* remove per-item margins so the author name hugs the card's right edge */ .rtl .post-card ul.post-bottom:not(.post-shape-area) li { margin: 0 !important; padding: 0 !important; } /* space between the post title line and the author / category row (both langs) */ .post-card ul.post-bottom:not(.post-shape-area) { margin-top: 28px !important; } /* slightly larger author name */ .post-card ul.post-bottom:not(.post-shape-area) .byline, .post-card ul.post-bottom:not(.post-shape-area) .byline .author a { font-size: 15px !important; font-weight: 600 !important; } /* ========================================================== Footer (AR template 6767). ========================================================== */ /* Link columns (روابط سريعة / خدماتنا) + contact column: drop the default list indent so the items start at the right (reading-start) edge. */ .elementor-element-6e14d92 ul, .elementor-element-70c6df9 ul, .elementor-element-5ca1df7 .contact-info { padding-inline-start: 0 !important; margin-inline-start: 0 !important; } /* Remove the two decorative "hooks" (absolute dividers) on the copyright bar. */ .elementor-element-49f3049, .elementor-element-100c78c { display: none !important; } /* Contact list (عنواننا / احصل على استشارتك): drop the default