/* ==========================================================================
   Cairo Self-Hosted Webfont (@font-face)
   ========================================================================== */

/* Cairo 400 Arabic */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cairo-arabic-400-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}

/* Cairo 400 Latin */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cairo-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cairo 600 Arabic */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cairo-arabic-600-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}

/* Cairo 600 Latin */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cairo-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cairo 700 Arabic */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/cairo-arabic-700-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}

/* Cairo 700 Latin */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/cairo-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   RTL Typography & Overrides
   ========================================================================== */

html[lang="ar"],
html[dir="rtl"] {
  --body-font: 'Cairo', sans-serif;
  --heading-font: 'Cairo', sans-serif;
}

html[lang="ar"] body,
html[dir="rtl"] body {
  font-family: var(--body-font);
  line-height: 1.98;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6 {
  font-family: var(--heading-font);
}

/* RTL Directional Icon Mirrors */
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-arrow-right-long,
html[dir="rtl"] .fa-long-arrow-right,
html[dir="rtl"] .fa-angle-right,
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fas.fa-caret-right {
  transform: scaleX(-1);
  display: inline-block;
}

/* Numbers, phone and email isolation */
bdi,
[dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ==========================================================================
   Arabic headings: tighter scale, real line-height, no letter-spacing
   (letter-spacing breaks Arabic letter joining)
   ========================================================================== */
html[lang="ar"] * {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] .site-title,
html[lang="ar"] .hero-title,
html[lang="ar"] .portfolio-title {
  line-height: 1.5;
  font-weight: 700;
}

html[lang="ar"] .site-title { font-size: 40px; }
html[lang="ar"] .hero-single .hero-content .hero-title { font-size: 52px; line-height: 1.45; }
html[lang="ar"] .hero-single .hero-content .hero-title span { line-height: 1.45; }
html[lang="ar"] .site-title-tagline { font-size: 17px; }
html[lang="ar"] .portfolio-title { font-size: 20px; }

@media (max-width: 991px) {
  html[lang="ar"] .site-title { font-size: 32px; }
  html[lang="ar"] .hero-single .hero-content .hero-title { font-size: 38px; }
}
@media (max-width: 575px) {
  html[lang="ar"] .site-title { font-size: 26px; }
  html[lang="ar"] .hero-single .hero-content .hero-title { font-size: 30px; }
}

/* Phone numbers / emails must keep LTR digit order */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* "Why Choose Us": image must stay inside its section instead of overflowing upward */
@media (min-width: 1200px) {
  html[dir="rtl"] .choose-area { overflow: hidden; }
  html[dir="rtl"] .choose-img { top: 0; height: 100%; }
  html[dir="rtl"] .choose-img > img { width: 100%; height: 100%; object-fit: cover; }
}

/* Testimonial quote mark must not sit on the author name */
html[dir="rtl"] .testimonial-quote-icon {
  top: 22px;
  bottom: auto;
  left: 30px;
  right: auto;
  font-size: 48px;
  line-height: 1;
}

/* Blog article body: block-level images, readable headings and lists */
.article-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 28px auto;
  border-radius: 12px;
}
.article-body h1, .article-body h2, .article-body h3 {
  line-height: 1.4;
  margin: 36px 0 14px;
  font-weight: 700;
}
.article-body h2 { font-size: 1.6rem; }
.article-body h3 { font-size: 1.3rem; }
.article-body p { margin-bottom: 16px; }
.article-body ul, .article-body ol {
  margin: 0 0 20px;
  padding-inline-start: 1.6rem;
}
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: 8px; }
.article-body blockquote {
  margin: 24px 0;
  padding: 12px 18px;
  border-inline-start: 4px solid var(--theme-color);
  background: #f8f9fa;
}

/* Blog article tables (comparison tables) */
.article-body table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 0.95rem; }
.article-body th, .article-body td { border: 1px solid #dee2e6; padding: 10px 12px; text-align: start; vertical-align: top; }
.article-body thead th { background: #0f3a57; color: #fff; }
.article-body tbody th { background: #f4f6f8; font-weight: 600; white-space: nowrap; }
.article-body tbody tr:nth-child(even) td { background: #fafbfc; }
@media (max-width: 767px) { .article-body table { display: block; overflow-x: auto; } }

/* ===== Performance phase 1: hero without JS, no layout shift ===== */
:where(img[width][height]) { height: auto; }
.hero-single { background-color: #16212b; overflow: hidden; }
.hero-single .hero-bg, .hero-single .hero-bg img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; display: block;
}
.hero-single .hero-bg img { object-fit: cover; object-position: center; }
/* show the first slide before owl-carousel initialises so the page does not jump when the script runs */
.hero-slider.owl-carousel:not(.owl-loaded) { display: block; }
.hero-slider.owl-carousel:not(.owl-loaded) > .hero-single:not(:first-child) { display: none; }
html[dir="rtl"] .hero-single .hero-bg, html[dir="rtl"] .hero-single .hero-bg img { left: 0; right: 0; }

p.hero-sub-title { margin-bottom: .5rem; }

/* a11y: contrast and touch targets */
:root { --body-text-color: #5f6980; }
.owl-dots .owl-dot { min-width: 24px; min-height: 24px; }
.owl-dots .owl-dot span { margin: 5px 7px; }
.copyright .copyright-text a { color: #fff; text-decoration: underline; }

/* Article body links: clearly different from the text (colour + underline, WCAG 1.4.1) */
.article-body a:not(.btn):not(.theme-btn) {
  color: #0b6fb3;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.article-body a:not(.btn):not(.theme-btn):hover,
.article-body a:not(.btn):not(.theme-btn):focus-visible {
  color: #08507f;
  text-decoration-thickness: 2px;
}
.article-body a:has(> img) { text-decoration: none; }

/* Blog cards: the link around the cover was inline-block, so a portrait cover (e.g. 750x850) shrank to its own width instead of filling the card */
.blog-item-img > a { display: block; }