/* =========================================================================
   KWD custom overrides — loaded AFTER data.min.css / assets.min.css / cs.css
   1. Header menu breakpoint: desktop nav only >=1400px, mobile menu below
   2. Mobile submenu: click-to-open accordion, parent never navigates
   3. Language switcher UI
   4. Arabic / RTL (scoped to html[dir="rtl"]; inert in LTR)
   Keep look-and-feel identical to EE2 outside these concerns.
   ========================================================================= */

/* ---- 1. Menu breakpoint 992px -> 1400px --------------------------------- */
/* Force the 992-1399 band to use the mobile menu. Below 992 and at/above 1400
   the original data.min.css rules already do the right thing (incl. the
   desktop scroll-reveal burger), so we only override the middle band. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .main-nav { display: none !important; }
    .mobile-nav-icon {
        transform: translateY(0) !important;
        -webkit-transform: translateY(0) !important;
    }
}

/* ---- 2. Mobile menu: click accordion, parent link is null --------------- */
.mobile-nav ul li .submenu,
.mobile-nav ul li .submenu.levelTwo,
.mobile-nav ul li .submenu.levelThree {
    position: static !important;
    top: auto !important; right: auto !important; left: auto !important;
    width: auto !important; min-width: 0 !important;
    opacity: 1 !important; visibility: visible !important;
    background: transparent !important;
    padding: 0 !important; margin: 0 !important;
    box-shadow: none !important;
    max-height: 0; overflow: hidden;
    transition: max-height .35s ease;
    display: block !important;
}
.mobile-nav ul li.has-children.open > .submenu {
    max-height: 1500px;
    padding: 4px 0 8px !important;
}
.mobile-nav ul li.has-children > a { cursor: pointer; }
.mobile-nav ul li.has-children > a > i { transition: transform .3s ease; }
.mobile-nav ul li.has-children.open > a > i { transform: rotate(180deg); }
.mobile-nav .submenu .close-icon { display: none !important; } /* accordion needs no close-X */

/* Defensive: never open submenus on hover anywhere (click only) */
.main-nav ul.menu li.has-children:hover > .submenu {
    visibility: hidden; opacity: 0;
}
.main-nav ul.menu li.has-children.open > .submenu {
    visibility: visible; opacity: 1; top: 34px;
}

/* ---- 3. Language switcher ----------------------------------------------- */
/* Anchored beside the burger circle (.mobile-nav-icon: right 30px, 50px dia).
   Physical `right` on purpose — the burger stays on the physical right in RTL. */
.lang-switch { position: relative; display: inline-block; font-size: 14px; line-height: 1; }
.site-header .lang-switch {
    position: absolute; right: 92px; top: 30px; z-index: 999;
    height: 50px; display: inline-flex; align-items: center; margin: 0;
}
/* RTL mirrors the header (logo ends up on the physical right), so the burger
   and the switcher both move to the physical left, matching the left-opening
   mobile panel. */
html[dir="rtl"] .mobile-nav-icon { right: auto !important; left: 30px; }
html[dir="rtl"] .site-header .lang-switch { right: auto; left: 92px; }
html[dir="rtl"] .lang-switch ul { right: auto; left: 0; }
@media (max-width: 991.98px) {
    .site-header .lang-switch { right: 96px; }
    html[dir="rtl"] .site-header .lang-switch { right: auto; left: 96px; }
    html[dir="rtl"] .mobile-nav-icon { left: 34px; }
}
/* one shared vertical line for burger, pill and logo (center y = 55px):
   the theme puts the burger at top:25 below 992 — pin 30 everywhere */
.mobile-nav-icon { top: 30px; }
.lang-switch > .lang-current {
    cursor: pointer; padding: 9px 14px; display: inline-flex; align-items: center; gap: 8px;
    text-transform: uppercase; letter-spacing: .04em; color: #fff; font-weight: 600;
    background: rgba(20, 22, 30, .35); border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: background .25s ease, border-color .25s ease;
}
.lang-switch > .lang-current:hover {
    background: rgba(20, 22, 30, .55); border-color: rgba(255, 255, 255, .5);
}
.lang-switch > .lang-current i {
    font-size: 11px; opacity: .85; transition: transform .25s ease;
}
.lang-switch.open > .lang-current i { transform: rotate(180deg); }
.lang-switch ul {
    position: absolute; top: calc(100% + 10px); right: 0; min-width: 190px;
    margin: 0; padding: 8px; list-style: none;
    background: rgba(18, 20, 28, .96); border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    z-index: 1100;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
}
.lang-switch.open ul { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-switch ul li { display: block; margin: 0; }
.lang-switch ul li a {
    display: flex; align-items: center;
    padding: 9px 12px; border-radius: 9px; color: #cfd2da; font-size: 14px; white-space: nowrap;
    font-weight: 500; transition: background .15s ease, color .15s ease;
}
.lang-switch ul li a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.lang-switch ul li a.active { color: #fff; background: rgba(255, 255, 255, .12); font-weight: 600; }
.lang-switch ul li a.active::after {
    content: '\2713'; margin-inline-start: auto; padding-inline-start: 14px;
    font-size: 12px; color: #d3b574;
}

/* Align the brand + nav row with the switcher pill / burger line (their
   centers sit at y≈55px; the flex row's natural center is ≈69px). */
.site-header > .d-flex { margin-top: -14px; }

/* ---- Services catalog hero: fluid height + responsive polish ------------- */
/* theme forces height:100vh with an absolutely-centered caption; replace with
   content-driven flex centering so the hero breathes at every resolution and
   stops eating the whole phone viewport */
.page-header.image.services-hero .item {
    height: auto; min-height: clamp(480px, 74vh, 840px);
    display: flex; align-items: center;
}
.page-header.image.services-hero .item .caption {
    position: static; transform: none; -webkit-transform: none;
    width: 100%; left: auto; right: auto;
    padding: 150px 8% 64px; /* top clears the absolute header */
}
.services-hero .section-heading {
    font-size: clamp(30px, 3.2vw, 44px) !important;
    line-height: 1.15; margin-bottom: 16px;
}
.services-hero .service_heading {
    max-width: 36em; line-height: 1.75;
    font-size: clamp(15px, 1.25vw, 18px);
    opacity: .94;
}
.services-hero .video-wrapper {
    max-width: min(560px, 90%); margin-inline: auto;
}
.services-hero .video-wrapper img { width: 100%; height: auto; }
@media (max-width: 991.98px) {
    .page-header.image.services-hero .item { min-height: 0; }
    .page-header.image.services-hero .item .caption { padding: 140px 8% 52px; }
    .services-hero .service_heading { max-width: none; }
}

/* ---- 3a. Search: trigger icon + overlay --------------------------------- */
/* trigger sits inside the switcher cluster — visible at every width */
.site-header .lang-switch { gap: 8px; }
.lang-switch > .search-trigger {
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); cursor: pointer;
    background: rgba(20, 22, 30, .35); color: #fff; font-size: 14px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: background .25s ease, border-color .25s ease, transform .2s ease;
}
.lang-switch > .search-trigger:hover {
    background: rgba(20, 22, 30, .55); border-color: rgba(255, 255, 255, .5); transform: scale(1.08);
}
.overlay1 {
    background: rgba(10, 11, 16, .78) !important;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    z-index: 1200;
}
.overlay1 .overlay-content1 { top: 40%; width: min(680px, 90%); }
.overlay1 form.search {
    display: flex; background: #fff; border-radius: 999px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.overlay1 input[type=search] {
    flex: 1; width: auto; float: none; border: 0; outline: none;
    padding: 18px 28px; font-size: 17px; background: #fff;
}
.overlay1 button {
    width: auto; padding: 0 28px; border: 0; cursor: pointer;
    background: #d3b574; color: #fff; font-size: 18px;
    transition: background .2s ease;
}
.overlay1 button:hover { background: #c2a057; }
/* close button: centered below the search bar, with breathing room */
.overlay1 .overlay-content1 { position: relative; }
.overlay1 .closebtn {
    position: absolute; top: calc(100% + 26px); left: 50%; right: auto;
    transform: translateX(-50%);
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    font-size: 26px; line-height: 1; color: #fff; cursor: pointer;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    transition: background .2s ease, transform .2s ease;
}
.overlay1 .closebtn:hover {
    background: rgba(255, 255, 255, .2); color: #fff;
    transform: translateX(-50%) scale(1.08);
}
.overlay1 .search-error { display: block; margin-top: 14px; color: #ffb4a9; font-style: normal; }

/* the header search circle yields whenever the burger is on screen:
   below the desktop-nav threshold, when the nav doesn't fit this language,
   or during the theme's scroll-reveal (.visible) */
@media (max-width: 1399.98px) {
    .lang-switch > .search-trigger { display: none; }
}
html.nav-nofit .lang-switch > .search-trigger,
html:has(.mobile-nav-icon.visible) .lang-switch > .search-trigger { display: none; }
/* CRITICAL anti-flicker: the fit measurement must see the search circle at its
   would-be-visible width — hiding it on nav-nofit otherwise narrows the pill
   cluster, the re-measure then says "fits", the circle returns, collides, and
   the verdict oscillates forever. Must follow the hide rules in the cascade. */
html.nav-measuring.nav-nofit .lang-switch > .search-trigger {
    display: inline-flex !important; visibility: hidden !important;
}

/* ---- 3b. Desktop nav only when it truly fits (set by kwd-menu.js) -------- */
html.nav-nofit .main-nav { display: none !important; }
html.nav-nofit .mobile-nav-icon {
    transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
}
/* MUST come after the nav-nofit rule: during a re-measure both classes are on
   <html>, and at equal specificity the later rule wins — measuring needs
   display:block to read real geometry (visibility:hidden keeps it unpainted). */
html.nav-measuring .main-nav {
    display: block !important; visibility: hidden !important; pointer-events: none;
}

/* flag icons (shared desktop + mobile) */
.lang-flag {
    width: 18px; height: 13.5px; object-fit: cover; border-radius: 2px;
    vertical-align: -2px; margin-inline-end: 7px; box-shadow: 0 0 0 1px rgba(255,255,255,.15);
}
.lang-switch > .lang-current .lang-flag { margin-inline-end: 5px; }

/* mobile menu: lift text contrast over the near-black panel */
.mobile-nav ul.menu > li > a { color: #e8e9ee; }
.mobile-nav ul.menu li .submenu li a { color: #bfc2cc; }
.mobile-nav ul.menu li a:hover,
.mobile-nav ul.menu li a.active,
.mobile-nav ul.menu li.open > a { color: #fff; }
.mobile-nav .lang-switch-mobile a { color: #c9ccd6; }
.mobile-nav .lang-switch-mobile a.active { color: #fff; }

/* faux search field inside the mobile menu */
.mobile-nav .mobile-search { padding: 16px 25px 4px; }
.mobile-nav .mobile-search .search-trigger {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 11px 16px; border-radius: 10px; cursor: pointer; text-align: start;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
    color: #c9ccd6; font-size: 14px;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.mobile-nav .mobile-search .search-trigger:hover,
.mobile-nav .mobile-search .search-trigger:focus-visible {
    background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .24);
}
.mobile-nav .mobile-search .search-trigger i { color: #d3b574; font-size: 13px; }

/* switcher rendered inside the mobile menu: 3 per row, 2 rows */
.mobile-nav .lang-switch-mobile {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 4px;
    padding: 14px 25px 10px; margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,.08);
}
.mobile-nav .lang-switch-mobile a {
    display: flex; align-items: center; justify-content: flex-start;
    padding: 5px 8px; color: #888; font-size: 13px; font-weight: 600; border-radius: 4px;
}
.mobile-nav .lang-switch-mobile a.active { color: #fff; background: rgba(255,255,255,.07); }

/* ---- 4. Arabic / RTL (inert unless <html dir="rtl">) -------------------- */
/* THE Arabic font — Noto Kufi Arabic, one local variable file (wght 100-900).
   Served from our webroot, preloaded in the layouts for RTL requests. */
@font-face {
    font-family: 'Noto Kufi Arabic';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/html/fonts/noto-kufi-arabic/noto-kufi-arabic-var.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
html[dir="rtl"] body {
    direction: rtl; text-align: right;
    font-family: 'Noto Kufi Arabic', 'Poppins', -apple-system, 'Segoe UI', Tahoma, sans-serif;
    font-weight: 400; line-height: 1.85;
}
/* heading hierarchy: weight + size steps (Kufi reads big — trim slightly) */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 {
    font-family: 'Noto Kufi Arabic', sans-serif; letter-spacing: 0;
}
/* Kufi's glyph box is tall — the theme's tight heading leading (some rules
   1.0, set with heavy specificity, e.g. .caption h1.h2) clips it and cramps
   two-line Arabic titles. RTL-only, so !important is inert for LTR. */
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"] .h1, html[dir="rtl"] .h2, html[dir="rtl"] .h3,
html[dir="rtl"] .h4, html[dir="rtl"] .h5, html[dir="rtl"] .h6 {
    line-height: 1.7 !important;
}
html[dir="rtl"] h1 { font-weight: 800; }
html[dir="rtl"] h2 { font-weight: 700; }
html[dir="rtl"] h3 { font-weight: 600; }
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 { font-weight: 500; }
html[dir="rtl"] .services-hero .item .caption h2, html[dir="rtl"] .services-hero .item .caption h1 { font-size: clamp(24px, 2.4vw, 34px) !important; }
/* cs.css pins these to "Open Sans" with !important — Open Sans has no Arabic
   glyphs, so the browser silently substituted a system font (the "font
   change"). Same trick back at it: */
html[dir="rtl"] .service_heading,
html[dir="rtl"] .service_heading > p,
html[dir="rtl"] .service_text,
html[dir="rtl"] .service_text p,
html[dir="rtl"] .section-heading {
    font-family: 'Noto Kufi Arabic', 'Poppins', sans-serif !important;
}
html[dir="rtl"] .main-nav { text-align: center; }
html[dir="rtl"] .main-nav ul.menu li { margin-left: 0; margin-right: 12px; }
html[dir="rtl"] .main-nav ul.menu li .submenu { left: auto; right: -25px; text-align: right; }
html[dir="rtl"] .submenu.levelThree { left: auto; right: 100%; }
html[dir="rtl"] .mobile-nav { right: auto; left: 20px; text-align: right; }
html[dir="rtl"] .mobile-nav.active { right: auto; left: 30px; }

/* logical flips for the Bootstrap-ish utility classes used across the theme */
html[dir="rtl"] .text-left  { text-align: right !important; }
html[dir="rtl"] .text-right { text-align: left  !important; }
html[dir="rtl"] .float-left  { float: right !important; }
html[dir="rtl"] .float-right { float: left  !important; }
html[dir="rtl"] .ml-auto, html[dir="rtl"] .me-auto { margin-left: 0 !important; margin-right: auto !important; }
html[dir="rtl"] .mr-auto, html[dir="rtl"] .ms-auto { margin-right: 0 !important; margin-left: auto !important; }
html[dir="rtl"] .pl-0 { padding-left: 0 !important; }
html[dir="rtl"] .pr-0 { padding-right: 0 !important; }
html[dir="rtl"] .section-title.left-align,
html[dir="rtl"] .left-align { text-align: right !important; }
html[dir="rtl"] .breadcrumb,
html[dir="rtl"] .pagination { padding-right: 0; }

/* mirror the directional FontAwesome chevrons/arrows the theme uses */
html[dir="rtl"] .fa-angle-right:before        { content: "\f104"; } /* -> becomes <- */
html[dir="rtl"] .fa-angle-double-right:before { content: "\f100"; }
html[dir="rtl"] .fa-long-arrow-alt-right:before { content: "\f177"; }
html[dir="rtl"] .fa-arrow-right:before        { content: "\f060"; }

/* keep numerals / latin-brand runs LTR inside RTL text */
html[dir="rtl"] .ltr,
html[dir="rtl"] time,
html[dir="rtl"] .phone { direction: ltr; unicode-bidi: embed; display: inline-block; }
/* phone/WhatsApp links: keep +965 xxx digit groups in LTR order on RTL pages */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="https://wa.me"],
html[dir="rtl"] a[href^="https://api.whatsapp.com"] {
    direction: ltr; unicode-bidi: isolate; display: inline-block;
}
/* Plain full-width hero captions overlay designed background images (quote
   artwork baked into the right side, e.g. portfolio) — keep those on the left
   in RTL or the text lands on the artwork. Captions with their own .row/column
   structure (services) are excluded: their Arabic text flows RTL normally. */
html[dir="rtl"] .page-header.image .item .caption:not(:has(.row)) { text-align: left; }
/* cs.css hard-codes .section-heading { text-align:left } — mirror it in RTL
   (services hero title "الخدمات" etc.) */
html[dir="rtl"] .section-heading { text-align: right !important; }


/* shared hero title sizing for details / sub-catalog / portfolio captions */
.services-hero .item .caption h2, .services-hero .item .caption h1 {
    font-size: clamp(26px, 2.6vw, 38px) !important; line-height: 1.2;
    margin-bottom: 14px;
}

/* ---- Read-aloud button (blog entries) ----------------------------------- */
.ra-button {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 18px; border-radius: 999px; cursor: pointer;
    border: 1px solid #d3b574; background: #fff; color: #242424;
    font-size: 14px; font-weight: 600; line-height: 1;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.ra-button i { color: #d3b574; font-size: 12px; transition: color .2s ease; }
.ra-button:hover, .ra-button.playing { background: #d3b574; color: #fff; box-shadow: 0 6px 18px rgba(211, 181, 116, .35); }
.ra-button:hover i, .ra-button.playing i { color: #fff; }
html[dir="rtl"] .ra-button { font-family: 'Noto Kufi Arabic', sans-serif; }
/* the date/button row uses float utilities — mirror them in RTL */
html[dir="rtl"] .content-body .float-left  { float: right !important; }
html[dir="rtl"] .content-body .float-right { float: left !important; }
.ra-rate {
    display: inline-flex; align-items: center; justify-content: center;
    margin-inline-start: 8px; padding: 0 10px; height: 34px; min-width: 44px;
    border-radius: 999px; border: 1px solid rgba(0, 0, 0, .15); background: #f5f5f5;
    color: #555; font-size: 12px; font-weight: 700; cursor: pointer;
    transition: background .2s ease, color .2s ease;
    vertical-align: middle;
}
.ra-rate:hover { background: #d3b574; border-color: #d3b574; color: #fff; }

/* ---- Pricing page (/pages/website-cost-kuwait) -------------------------- */
.kwd-tldr {
    border: 1px solid #d3b574; border-inline-start: 5px solid #d3b574;
    background: #fdf9f0; border-radius: 8px;
    padding: 22px 26px; margin-bottom: 30px;
    font-size: 16px; line-height: 1.7;
}
.kwd-tldr .kwd-updated {
    margin: 10px 0 0; font-size: 13px; font-weight: 700; color: #8a6d3b;
    text-transform: uppercase; letter-spacing: .4px;
}
.kwd-price-table { margin: 20px 0 10px; }
.kwd-price-table thead th {
    background: #242424; color: #fee241; border-color: #242424;
    white-space: nowrap;
}
.kwd-price-table td:nth-child(2) { font-weight: 700; white-space: nowrap; }
.kwd-price-table tbody tr:nth-child(even) { background: #faf7f0; }
/* ≤767px: stack EVERY content table's rows into cards — no horizontal
   scroll anywhere. Cell labels (data-label) are injected by kwd-menu.js
   from the rendered thead (or a detected first header row, which gets
   .kwd-thead-row and is hidden here), so they follow the page language.
   2-column tables (e.g. name/description) stack without labels. */
@media (max-width: 767px) {
    /* width !important: RTE-authored cells carry inline width:NN% styles */
    .content-body table, .content-body table tbody,
    .content-body table tr, .content-body table td,
    .content-body table th { display: block; width: 100% !important; }
    .content-body table thead,
    .content-body table .kwd-thead-row { display: none; }
    .content-body table { border: 0; }
    .content-body table tr {
        margin-bottom: 18px; background: #fff;
        border: 1px solid #e8dcc2; border-radius: 10px; overflow: hidden;
        box-shadow: 0 2px 10px rgba(36, 36, 36, .05);
    }
    .content-body table td {
        border: 0; border-top: 1px solid #f3ecdd;
        padding: 12px 16px; white-space: normal; text-align: start;
    }
    .content-body table tr > td:first-child {
        border-top: 0; background: #faf7f0; font-weight: 700; color: #242424;
    }
    .content-body table td[data-label]::before {
        content: attr(data-label);
        display: block; margin-bottom: 3px;
        font-size: 11px; font-weight: 700; letter-spacing: .6px;
        text-transform: uppercase; color: #8a6d3b;
    }
    /* pricing table keeps its dark/gold identity on top of the generic cards */
    .content-body .kwd-price-table tbody tr:nth-child(even) { background: #fff; }
    .content-body .kwd-price-table td:first-child {
        background: #242424; color: #fee241; font-size: 15px; line-height: 1.45;
    }
    .content-body .kwd-price-table td:nth-child(2) { font-size: 17px; color: #242424; }
}
.kwd-trust-bar {
    display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
    padding: 14px 20px; margin-bottom: 28px;
    background: #f5f5f5; border-radius: 8px; font-size: 14px; font-weight: 600;
}
.kwd-trust-bar i { color: #d3b574; margin-inline-end: 7px; }
.kwd-wa-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 26px; border-radius: 999px;
    background: #25d366; color: #fff !important; font-weight: 700; font-size: 15px;
    transition: box-shadow .2s ease, transform .2s ease;
}
.kwd-wa-btn:hover { box-shadow: 0 8px 22px rgba(37, 211, 102, .4); transform: translateY(-1px); }
.kwd-wa-btn i { font-size: 19px; }
html[dir="rtl"] .kwd-tldr, html[dir="rtl"] .kwd-trust-bar { font-family: 'Noto Kufi Arabic', sans-serif; }
html[dir="rtl"] .kwd-price-table td:first-child { line-height: 1.8; }

/* ---- H1 hygiene (SEO §3.5): logo demoted to .site-logo, hero caption h2→h1.
       Mirrors of the data.min.css element rules so the look is unchanged. --- */
.site-header .site-brand .site-logo{font-size:22px;font-weight:700;line-height:22px;margin:0;display:inline-block}
.site-header.dark-content .site-brand .site-logo{color:#fff}
.slider .item .caption h1{margin-bottom:20px;-ms-transform:translateY(10px);-webkit-transform:translateY(10px);transform:translateY(10px);font-size:26px;line-height:1;font-weight:400;opacity:0;-webkit-transition:all .8s ease .8s;transition:all .8s ease .8s}
.slider .active .item .caption h1{opacity:1;-ms-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0)}
.slider.dark-content .item .caption h1{color:#fff}
@media (min-width:992px){
.site-header.left-align .wrapper .site-brand .site-logo{font-size:28px}
.slider .item .caption h1{font-size:48px}
}
/* page-header caption h2→h1 mirrors (services details / blog & pages entries) */
.page-header.image .item .caption h1{margin-bottom:20px;font-size:26px;line-height:1;font-weight:400}
.page-header.image .item.small .caption h1{font-size:26px}
.page-header.image.dark-content .item .caption h1{color:#fff}
@media (min-width:992px){
.page-header.image .item .caption h1{font-size:48px}
.page-header.image .item.small .caption h1{font-size:38px}
}

/* ---- RTL owl-carousel fix (v29): owl positions its stage with LTR math
       (translate3d/left). Under html[dir=rtl] the stage renders off-screen,
       blanking the hero + every carousel section. Keep the carousel engine
       LTR; each slide's CONTENT restores rtl so Arabic text flows correctly. */
html[dir="rtl"] .owl-carousel { direction: ltr; }
html[dir="rtl"] .owl-carousel .item,
html[dir="rtl"] .owl-carousel .owl-item > * { direction: rtl; }

/* RTL: hero photos are composed for a left-side caption zone (calm background
   on the left, subject on the right). dir=rtl reverses the flex row and drops
   the caption onto the busy/dark side — keep the column order LTR; the text
   inside stays RTL/right-aligned. */
html[dir="rtl"] .page-header.image .item .caption .row { flex-direction: row-reverse; }

/* ---- Editor content styles (v36): classes offered in the Wygwam "Styles"
       dropdown. .kwd-updated gains a standalone rule (was scoped to .kwd-tldr)
       and .kwd-highlight is new — both must render identically on the
       frontend and inside the CKEditor iframe (contentsCss). */
.kwd-updated {
    color: #8a7333; font-size: 13px; font-weight: 600;
    letter-spacing: .3px; text-transform: uppercase; margin-bottom: 8px;
}
.kwd-highlight {
    background: #fdf3d9; color: #6b5310;
    padding: 1px 6px; border-radius: 4px;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* Wygwam/CKEditor editing area (v37): the site CSS resets body padding, so
   content hugged the iframe edges. .cke_editable exists only inside the
   editor iframe — no frontend effect. Logical padding keeps RTL symmetric. */
body.cke_editable {
    padding: 16px 20px !important;
}