/* Sea Compass — Arabic (RTL) adjustments
   Loaded only on the /ar/ pages, on top of bootstrap.rtl.min.css. */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');

:root {
    --body-font: 'Tajawal', sans-serif;
    --heading-font: 'Tajawal', sans-serif;
}

body,
h1, h2, h3, h4, h5, h6,
.hs-1, .hs-2, .hs-3, .hs-4, .hs-5,
.btn-main, .btn-line, .subtitle,
input, select, textarea, button {
    font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif !important;
    letter-spacing: 0 !important;
}

/* Arabic headings do not need the template's uppercase treatment */
h1, h2, h3, h4, h5, h6,
.hs-1, .hs-2, .hs-3, .hs-4, .hs-5,
.subtitle, .btn-main, .btn-line, .crumb {
    text-transform: none !important;
}

/* Latin fragments (phone numbers, IMO, P&I) stay left-to-right */
.ltr,
a[href^="tel:"],
a[href^="mailto:"] {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

/* Mirror the directional arrow glyphs */
[dir="rtl"] .icofont-long-arrow-right,
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-angle-right {
    transform: scaleX(-1);
    display: inline-block;
}

/* The template positions several decorative elements with hard-coded
   left offsets that Bootstrap's RTL build does not touch, because they are
   the template's own utilities rather than Bootstrap ones. */
[dir="rtl"] .start-0  { left: auto; right: 0; }
[dir="rtl"] .start-40 { left: auto; right: 40%; }
[dir="rtl"] .end-0    { right: auto; left: 0; }

/* The gradient itself is a fixed left-to-right fade — mirror it in place so it
   still fades away from the text panel. */
[dir="rtl"] .gradient-edge-start,
[dir="rtl"] .gradient-edge-end {
    transform: scaleX(-1);
}

/* The main menu is laid out with float:left, which Bootstrap's RTL build does
   not touch — the items would otherwise read left-to-right on an RTL page. */
[dir="rtl"] #mainmenu li {
    float: right;
}

[dir="rtl"] #mainmenu li ul {
    left: auto;
    right: 0;
    text-align: right;
}

[dir="rtl"] #mainmenu li ul li {
    float: none;
}

/* The template spaces items with margin-right, which lands on the wrong side
   once the float is flipped — the last two items ended up touching. */
[dir="rtl"] #mainmenu > li {
    margin-right: 0;
    margin-left: 30px;
}

[dir="rtl"] #mainmenu > li:last-child {
    margin-left: 0;
}

/* the caret gap on the parent item follows the reading direction too */
[dir="rtl"] #mainmenu > li > a {
    padding-right: 0;
    padding-left: 6px;
}

[dir="rtl"] #mainmenu li.has-child:after,
[dir="rtl"] #mainmenu li a:after {
    margin-left: 0;
    margin-right: 6px;
}

/* Service sidebar on the detail pages — Arabic names are long, so step the
   heading size down and let them wrap comfortably. */
[dir="rtl"] .services-details-sidebar h5,
[dir="rtl"] .col-lg-3 a[href^="service-"] h5 {
    font-size: 15px;
    line-height: 1.6;
}

/* Arabic service names are long — give the dropdown room and set it flush to
   the right edge of its parent item. */
[dir="rtl"] #mainmenu li ul {
    min-width: 290px;
}

/* Service-detail sidebar arrow sits on the opposite edge */
[dir="rtl"] .end-20px {
    right: auto;
    left: 20px;
}

/* Contact cards: the icon is absolutely positioned at the inline start and
   the text is pushed clear of it with a left margin. Both sides have to flip
   in RTL or the icon lands on top of the text. */
[dir="rtl"] .ms-80px {
    margin-left: 0 !important;
    margin-right: 80px !important;
}

[dir="rtl"] .ms-100px {
    margin-left: 0 !important;
    margin-right: 100px !important;
}

/* NB: the template leaves left/right as `auto` on these icons, so they settle
   at the inline start on their own. Forcing an offset here pulls them out of
   their column — only the text margin needs flipping. */

/* Icon blocks that use absolute + padding-left spacing */
[dir="rtl"] .ps-90 { padding-left: 0; padding-right: 90px; }
[dir="rtl"] .ps-100 { padding-left: 0; padding-right: 100px; }
[dir="rtl"] .ms-100px { margin-left: 0; margin-right: 100px; }

[dir="rtl"] .abs.w-70px,
[dir="rtl"] i.absolute {
    left: auto;
    right: 0;
}

/* Checklists */
[dir="rtl"] .ul-check li {
    padding-left: 0;
    padding-right: 30px;
}

[dir="rtl"] .ul-check li:before {
    left: auto;
    right: 0;
}

/* Marquee keeps its own direction so it does not read backwards */
.de-marquee-list-1 {
    direction: ltr;
}

/* Numerals in the step/standard counters */
.de-step-number,
.abs.fs-84,
.fs-72 {
    direction: ltr;
    unicode-bidi: embed;
}

/* ── Footer watermark ──────────────────────────────────────────────────
   seacompass.css anchors the sea backdrop bottom-right and fades it out
   towards the left, where the LTR footer keeps its company paragraph. In
   RTL that paragraph sits on the right, so the untouched gradient would
   put the strongest part of the image directly behind the body copy and
   leave the actual gap — now on the left — bare. Mirror both. */
footer.section-dark::before {
    background-position: left bottom;
    -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, .6) 42%, transparent 72%);
    mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, .6) 42%, transparent 72%);
}

/* the footer list marker sits at the inline start, so it flips with the text */
[dir="rtl"] footer .widget ul:not(.list-inline) li {
    padding-left: 0;
    padding-right: 18px;
}

[dir="rtl"] footer .widget ul:not(.list-inline) li::before {
    left: auto;
    right: 0;
}