@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&display=swap");
/* rtl.css — Arabic pages (/ar/). Loaded after the site CSS on <html lang="ar" dir="rtl"> only. */
html[dir="rtl"] body,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] p, html[dir="rtl"] a, html[dir="rtl"] li, html[dir="rtl"] span, html[dir="rtl"] small,
html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea, html[dir="rtl"] label,
html[dir="rtl"] th, html[dir="rtl"] td, html[dir="rtl"] summary, html[dir="rtl"] dt, html[dir="rtl"] dd, html[dir="rtl"] strong, html[dir="rtl"] em {
    font-family: "IBM Plex Sans Arabic", "DM Sans", "Inter", system-ui, sans-serif;
}
/* Arabic letters must join: no tracking, no forced case, slightly taller lines */
html[dir="rtl"] * { letter-spacing: 0 !important; text-transform: none !important; }
html[dir="rtl"] body { line-height: 1.75; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { line-height: 1.35; }
html[dir="rtl"] .fa, html[dir="rtl"] .fas, html[dir="rtl"] .far, html[dir="rtl"] .fal, html[dir="rtl"] .fab { font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "Font Awesome 5 Brands" !important; }
html[dir="rtl"] .fab { font-family: "Font Awesome 5 Brands" !important; }

/* Text alignment follows the reading direction */
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .text-left, html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .text-right, html[dir="rtl"] .text-end { text-align: left !important; }

/* Directional arrows point the other way */
html[dir="rtl"] .fa-arrow-right, html[dir="rtl"] .fa-long-arrow-right, html[dir="rtl"] .fa-angle-right,
html[dir="rtl"] .fa-angle-double-right, html[dir="rtl"] .fa-chevron-right, html[dir="rtl"] .fa-arrow-left { transform: scaleX(-1); display: inline-block; }

/* Header: logo left, actions right, as in English. Only the menu itself runs right-to-left. */
html[dir="rtl"] .site-header .header-container { direction: ltr; }
html[dir="rtl"] .site-header .header-nav { direction: rtl; }
html[dir="rtl"] .nav-sub { left: auto; right: -20px; text-align: right; }
html[dir="rtl"] .nav-link.active::after, html[dir="rtl"] .nav-drop-btn.active::after { left: auto; right: 0; }
@media (max-width: 1024px) {
  html[dir="rtl"] .header-nav > .nav-link, html[dir="rtl"] .nav-drop-btn { text-align: right; }
  html[dir="rtl"] .nav-sub { padding: 4px 12px 12px 0; }
}

/* Numbers, emails, phones and Latin brand names stay left-to-right inside Arabic text */
html[dir="rtl"] a[href^="mailto:"], html[dir="rtl"] a[href^="tel:"], html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="tel"] { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] table td.num, html[dir="rtl"] table th.num { text-align: left; }


/* Home hero: the absolute-positioned composition keeps its English layout; let the Arabic subtitle wrap */
html[dir="rtl"] body.home-figma .hf-hero-sub { white-space: normal; max-width: 62%; }
html[dir="rtl"] body.home-figma .hf-hello, html[dir="rtl"] body.home-figma .hf-im, html[dir="rtl"] body.home-figma .hf-name { font-family: "IBM Plex Sans Arabic", "DM Sans", sans-serif; }
html[dir="rtl"] body.home-figma .hf-hello { transform: translateY(12px); }
/* --- generated by mirror_hero.py: Arabic hero mirrored at every breakpoint --- */
html[dir="rtl"] body.home-figma .hf-hero-sub { left: auto; right: 40px; }
html[dir="rtl"] body.home-figma .hf-hello { left: auto; right: 27px; }
html[dir="rtl"] body.home-figma .hf-im { left: auto; right: 858px; }
html[dir="rtl"] body.home-figma .hf-name { left: 42px; right: auto; }
html[dir="rtl"] body.home-figma .hf-designation { left: auto; right: 109px; }
@media (max-width: 1199.98px) { html[dir="rtl"] body.home-figma .hf-hero-sub { left: auto; right: 0; } }
@media (max-width: 1199.98px) { html[dir="rtl"] body.home-figma .hf-hello { left: auto; right: -13px; } }
@media (max-width: 1199.98px) { html[dir="rtl"] body.home-figma .hf-im { left: auto; right: 593px; } }
@media (max-width: 1199.98px) { html[dir="rtl"] body.home-figma .hf-name { left: 0; right: auto; } }
@media (max-width: 1199.98px) { html[dir="rtl"] body.home-figma .hf-designation { left: auto; right: 74px; } }
@media (max-width: 991.98px) { html[dir="rtl"] body.home-figma .hf-im { left: 220px; right: auto; } }
@media (max-width: 767.98px) { html[dir="rtl"] body.home-figma .hf-hero-sub { left: auto; right: 0; } }
@media (max-width: 767.98px) { html[dir="rtl"] body.home-figma .hf-hello { left: auto; right: 0; } }
@media (max-width: 767.98px) { html[dir="rtl"] body.home-figma .hf-im { left: auto; right: 239px; } }
@media (max-width: 767.98px) { html[dir="rtl"] body.home-figma .hf-name { left: 17px; right: auto; } }
@media (max-width: 767.98px) { html[dir="rtl"] body.home-figma .hf-designation { left: auto; right: 10px; } }
@media (max-width: 767.98px) { html[dir="rtl"] body.home-figma .hf-hero-sub { left: auto; right: 0; } }
@media (max-width: 767.98px) { html[dir="rtl"] body.home-figma .hf-hello { left: auto; right: 0; } }
@media (max-width: 767.98px) { html[dir="rtl"] body.home-figma .hf-im { left: auto; right: calc(239 * var(--u)); } }
@media (max-width: 767.98px) { html[dir="rtl"] body.home-figma .hf-name { left: calc(17 * var(--u)); right: auto; } }
@media (max-width: 767.98px) { html[dir="rtl"] body.home-figma .hf-designation { left: auto; right: calc(10 * var(--u)); } }

/* --- RTL layout fixes (2026-10-13) --- */
/* Hero: Arabic glyphs sit taller than Latin; clear the badge above "مرحباً" */
html[dir="rtl"] body.home-figma .hf-hello { transform: translateY(34px); line-height: 1.1; }
@media (max-width: 767.98px) { html[dir="rtl"] body.home-figma .hf-hello { transform: translateY(14px); } }
html[dir="rtl"] body.home-figma .hf-hero-sub { max-width: none; white-space: nowrap; }
html[dir="rtl"] body.home-figma .hf-designation { flex-direction: row; }

/* Icons beside text: spacing goes on the reading side */
html[dir="rtl"] .icon-sm { margin-right: 0; margin-left: 10px; }
html[dir="rtl"] .sub-title i, html[dir="rtl"] .home-two .sub-title i { margin-right: 0; margin-left: 10px; }
html[dir="rtl"] .social-flow h4 { margin-right: 0; margin-left: 15px; }

/* Tickers: run the strip left-to-right so it stays full; each item still reads RTL */
html[dir="rtl"] .marquee-wrap, html[dir="rtl"] .marquee-inner { direction: ltr; }
html[dir="rtl"] .marquee-item { direction: rtl; unicode-bidi: isolate; }


/* Bootstrap is the LTR build: mirror the spacing utilities used on these pages */
html[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
html[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }
html[dir="rtl"] .float-left { float: right !important; }
html[dir="rtl"] .float-right { float: left !important; }

/* Mid-width desktops: Arabic labels are wider, keep the menu clear of the logo */
@media (min-width: 1025px) and (max-width: 1299.98px) {
  html[dir="rtl"] .header-nav { gap: 22px; margin-inline: 24px; }
  html[dir="rtl"] .header-nav .nav-link, html[dir="rtl"] .nav-drop-btn { font-size: 15px; }
}

/* Mirror directional art and diagonal arrows so they point along the reading direction */
html[dir="rtl"] body.home-figma .hf-skill-art .hf-skill-man,
html[dir="rtl"] body.home-figma .hf-skill-arrow-art img { transform: scaleX(-1); }
html[dir="rtl"] body.home-figma .hf-skill-arrow-art { margin-right: 0; margin-left: 38px; }
@media (max-width: 991.98px) { html[dir="rtl"] body.home-figma .hf-skill-arrow-art { margin-left: 0; } }
html[dir="rtl"] .more-btn i { transform: rotate(-45deg); }
html[dir="rtl"] .details-btn { transform: rotate(45deg); }

/* Footer: logo row keeps the English layout (logo left, menu right); menu items still read RTL.
   Description text aligns right (Bootstrap is the LTR build, so text-lg-start meant left). */
@media (min-width: 768px) {
  html[dir="rtl"] .main-footer .row > * { order: 3; }
  html[dir="rtl"] .main-footer .row > :nth-child(1) { order: 2; }
  html[dir="rtl"] .main-footer .row > :nth-child(2) { order: 1; }
}
@media (min-width: 992px) {
  html[dir="rtl"] .main-footer .widget_text .text { text-align: right; }
  html[dir="rtl"] .main-footer .widget_social { display: flex; justify-content: flex-end; } /* flex-end = left in RTL; text-lg-end can't be overridden (layered !important) */ /* set on the child: Bootstrap's layered !important on the parent outranks unlayered !important */
}

/* Services: mirror the gaps the LTR template sets with margin-right */
html[dir="rtl"] .list-style-two li::before { flex: none; margin-right: 0; margin-left: 20px; }
html[dir="rtl"] .service-item .number { margin-right: 0; margin-left: 50px; }
html[dir="rtl"] .proof-scale .metric-items .service-item .number, html[dir="rtl"] .template-inner .t-main .proof-scale .metric-items .service-item .number { margin: 0 0 0 30px; direction: ltr; text-align: right; }
@media (max-width: 479.98px) { html[dir="rtl"] .proof-scale .metric-items .service-item .number, html[dir="rtl"] .template-inner .t-main .proof-scale .metric-items .service-item .number { margin: 0 0 16px; } }

/* ===== Arabic home page RTL fixes (2026-10-18) ===== */
/* Hero: "معاذ" ends under the right edge of "أنا" */
html[dir="rtl"] body.home-figma .hf-name { left: auto; right: 858px; }
html[dir="rtl"] body.home-figma .hf-name { text-decoration-thickness: 0.04em; }
@media (max-width: 1199.98px) { html[dir="rtl"] body.home-figma .hf-name { left: auto; right: 593px; } }
@media (max-width: 767.98px) { html[dir="rtl"] body.home-figma .hf-name { left: auto; right: calc(239 * var(--u, 1px)); } }

/* Experience: "الدراسة" / "والخبرة" pills — Sora (Arabic falls back to IBM Plex), fully opaque */
html[dir="rtl"] body.home-figma .timeline-heading .title { font-family: "Sora", "IBM Plex Sans Arabic", sans-serif; color: #fff; opacity: 1; letter-spacing: 0; }

/* Recent highlights: labels sit on the right edge */
html[dir="rtl"] body.home-figma .hf-projects .project-item.style-four .content { left: auto; right: 20px; align-items: flex-start; } /* start = right edge in RTL */

/* Skills ticker: space between the star and its text */
html[dir="rtl"] .marquee-item i { margin-left: 0; margin-right: 30px; }

/* Innovation lab: mirror the text rule, column gaps and list stars */
html[dir="rtl"] .service-item-two .text { margin-right: 0; margin-left: 5%; padding-left: 0; padding-right: 20px; border-left: 0; border-right: 1px solid var(--primary-color); }
html[dir="rtl"] .service-item-two .list { margin-right: 0; margin-left: 7%; }
html[dir="rtl"] .service-item-two .list li:before { margin-right: 0; margin-left: 10px; }

/* Blog "اقرأ المزيد": arrow points left with a gap from the text */
html[dir="rtl"] .read-more img { margin-left: 0; margin-right: 12px; transform: scaleX(-1); }

/* Contact: inputs pad evenly so placeholders line up on the right */
html[dir="rtl"] body.home-figma .hf-contact .contact-form-two .form-control,
html[dir="rtl"] body.home-figma .hf-contact .contact-form-two input,
html[dir="rtl"] body.home-figma .hf-contact .contact-form-two textarea { padding-right: 30px; padding-left: 30px; text-align: right; }
/* Phone number reads +966 50 175 7969 */
html[dir="rtl"] body.home-figma .hf-contact-content h5 { unicode-bidi: plaintext; }
html[dir="rtl"] body.home-figma .hf-contact-content h5:has(img[src*="phone"]) { direction: ltr; justify-content: flex-end; }
html[dir="rtl"] body.home-figma .hf-contact-content h5:has(img[src*="phone"]) img { order: 2; margin-left: 15px; margin-right: 0; }
/* "المزيد" arrow points up-left */
html[dir="rtl"] body.home-figma .hf-contact-more .arrow { transform: rotate(45deg); }

/* Big tickers (Arabic) — lab ticker runs the other way */
html[dir="rtl"] body.home-figma .hf-big-ticker--lab .marquee-inner.left { animation-direction: reverse; }
/* Outlined Arabic words: joined letters overlap, so a plain stroke draws seams through them.
   Fill with the band colour and paint the stroke underneath; only the outer 1px of a 2px stroke shows. */
html[dir="rtl"] body.home-figma .hf-big-ticker .marquee-item span { color: rgb(15, 14, 14); -webkit-text-stroke-width: 2px; paint-order: stroke fill; }
html[dir="rtl"] body.home-figma .hf-big-ticker--footer .marquee-inner.left { animation-direction: reverse; }

/* Innovation lab: LTR margins mirrored — icon→title 24px, title→text 60px */
html[dir="rtl"] body.home-figma .hf-lab .service-item-two .icon { width: auto; min-width: 0; margin-right: 0; margin-left: 30px; }
html[dir="rtl"] body.home-figma .hf-lab .service-item-two .title { margin-right: 0; margin-left: 60px; }

/* Awards: outlined Arabic titles without seams through joined letters (same technique as the big tickers) */
html[dir="rtl"] body.home-figma .hf-awards .award-box .tag { color: rgb(16, 19, 22); -webkit-text-stroke-width: 2px; paint-order: stroke fill; }
html[dir="rtl"] body.home-figma .hf-awards .award-box:hover .tag { color: var(--color-white); }

/* Footer type (Arabic): Sora first — it has no Arabic glyphs, so Arabic letters fall back to IBM Plex Sans Arabic */
html[dir="rtl"] .main-footer .widget_nav_menu ul li,
html[dir="rtl"] .main-footer .widget_nav_menu ul li a { font-family: "Sora", "IBM Plex Sans Arabic", sans-serif; font-weight: 400; font-size: 16px; }
html[dir="rtl"] .main-footer .widget_text .text { font-family: "Sora", "IBM Plex Sans Arabic", sans-serif; font-weight: 600; font-size: 16px; }
html[dir="rtl"] .main-footer .footer-sitemap li,
html[dir="rtl"] .main-footer .footer-sitemap a { font-family: "Sora", "IBM Plex Sans Arabic", sans-serif; font-weight: 400; font-size: 14px; }

/* ===== Arabic pages: Sora on all text (2026-10-18) =====
   Sora has no Arabic glyphs, so Arabic letters render in IBM Plex Sans Arabic; digits and Latin words use Sora.
   Icon fonts (Font Awesome <i>, flaticon) are excluded so icons keep rendering. */
html[dir="rtl"] body,
html[dir="rtl"] body :not(i):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="flaticon"]):not(code):not(pre):not(kbd) {
  font-family: "Sora", "IBM Plex Sans Arabic", sans-serif !important;
}
/* About awards: same seam-free outline as the home awards (section colour #161B22) */
html[dir="rtl"] .awards-list-area .award-box .tag { color: rgb(22, 27, 34); -webkit-text-stroke-width: 2px; paint-order: stroke fill; }
html[dir="rtl"] .awards-list-area .award-box:hover .tag { color: var(--color-white); }

/* Blog essay pages (Arabic): the template's LTR margins mirrored — 2026-10-18 */
html[dir="rtl"] .blog-details-wrap .author-date-share .author { margin: 0 0 0 20px; }
html[dir="rtl"] body.template-inner .t-main .blog-details-wrap .author-date-share .text { margin-right: 0; margin-left: 40px; }
html[dir="rtl"] body.template-inner .t-main .blog-details-wrap .author-date-share .details-btn { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .blog-details-wrap .author-date-share .details-btn { margin-left: 0; margin-right: auto; flex: none; }
html[dir="rtl"] .blog-details-wrap .big-letter::first-letter { float: right; margin-right: 0; margin-left: 20px; }
html[dir="rtl"] .blog-details-wrap .list-style-one li::before { margin-right: 0; margin-left: 12px; }
html[dir="rtl"] .blog-details-wrap .tag-share .item b { margin-right: 0; margin-left: 20px; }
html[dir="rtl"] .blog-details-wrap .admin-comment .author-thumb { margin-right: 0; margin-left: 40px; }
html[dir="rtl"] .blog-details-wrap .next-prev-post .post-item .image { margin-right: 0; margin-left: 20px; flex: none; }
/* Essay blockquote (Arabic): bar, quote mark and padding on the right */
html[dir="rtl"] .blog-details-wrap blockquote { border-left: 0; border-right: 3px solid var(--color-brand); padding: 30px 125px 30px 40px; }
html[dir="rtl"] .blog-details-wrap blockquote::before { left: auto; right: 48px; transform: scaleX(-1); }
html[dir="rtl"] .blog-details-wrap blockquote .blockquote-footer::before { margin-right: 0; margin-left: 10px; }
@media (max-width: 767.98px) { html[dir="rtl"] .blog-details-wrap blockquote { padding-left: 40px; padding-right: 100px; } }
@media (max-width: 479.98px) { html[dir="rtl"] .blog-details-wrap blockquote { padding-left: 25px; padding-right: 60px; } }
@media (max-width: 375px) { html[dir="rtl"] .blog-details-wrap blockquote { padding-right: 25px; } }
/* Essay share icon points the reading direction in Arabic */
html[dir="rtl"] body.template-inner .t-main .blog-details-wrap .author-date-share .details-btn i { display: inline-block; transform: scaleX(-1); }

/* Arabic home hero: shared right edge for the small-tablet text (2026-10-18). */
@media (min-width: 768px) and (max-width: 991.98px) {
    html[dir="rtl"] body.home-figma .hf-im,
    html[dir="rtl"] body.home-figma .hf-name {
        left: auto;
        right: calc(100% - 320px);
    }
}

/* Keep the same shared edge within the hero at desktop container breakpoints. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    html[dir="rtl"] body.home-figma .hf-im,
    html[dir="rtl"] body.home-figma .hf-name {
        left: auto;
        right: min(593px, calc(100% - 368px));
    }
}
@media (min-width: 1200px) {
    html[dir="rtl"] body.home-figma .hf-im,
    html[dir="rtl"] body.home-figma .hf-name {
        left: auto;
        right: min(858px, calc(100% - 400px));
    }
}