:root {
    /* FrameworkTech Brand Colors */
    --main-color: #6ac3ee; /* PRIMARY */
    --main-color-rgb: 106, 195, 238;
    --color-two: #111d42; /* SECONDARY / Dark Navy */
    --color-two-rgb: 17, 29, 66;
    /* Existing template colors (kept) */
    --color-three: rgb(221, 221, 221);
    --color-three-rgb: 221, 221, 221;
    --color-four: rgb(242, 242, 242);
    --color-four-rgb: 242, 242, 242;
    --white-color: rgb(255, 255, 255);
    --white-color-rgb: 255, 255, 255;
    --black-color: rgb(0, 0, 0);
    --black-color-rgb: 0, 0, 0;
    --ft-dark: #111d42;
    --ft-deep: #0e1735;
    --ft-sky: #6ac3ee;
}
/* =========================
   MANROPE – LOCAL VERSION
========================= */

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Droid Arabic Kufi";
    src: url("../fonts/DroidArabicKufi-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Droid Arabic Kufi";
    src: url("../fonts/DroidArabicKufi-Regular.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* Apply only on RTL pages */
html[lang="ar"] body {
    font-family: "Droid Arabic Kufi", sans-serif !important;
    -webkit-font-smoothing: auto !important;
    text-rendering: optimizeLegibility;
}

html[lang="ar"] {
    --bs-font-sans-serif: "Droid Arabic Kufi", sans-serif !important;
    --bs-body-font-family: "Droid Arabic Kufi", sans-serif !important;
}


    /* Keep Font Awesome icons intact */
    html[lang="ar"] body *:not(i):not([class^="fa"]):not([class*=" fa-"]) {
        font-family: inherit !important;
    }

    /* If you don’t have a real bold file, avoid faux-bold for now */
    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-weight: 400; /* change to 700 only after you add a real bold face */
    }
/* ===============================
   Arabic typography scaling (RTL)
=============================== */
html[dir="rtl"],
.rtl {
    font-family: 'DroidArabicKufi-Regular', sans-serif;
    font-size: 0.9em; /* ⬅ GLOBAL RATIO */
    line-height: 1.75; /* Arabic readability */
}

.news-block_one-meta:before {
    background: unset !important;
}

.btn-style-two:before {
    background-image: unset;
    background-color: var(--main-color);
}

.slider-one_image-layer {
    background-position: top center !important;
}

.slider-one_heading {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* عدد الأسطر */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.slider-one .slider-one_pagination {
    top: 30%;
}

.slider-one_subtext {
    color: #ddd;
    margin-top: 10px;
    max-width: 520px;
    line-height: 1.6;
}

.slider-one_trust {
    font-size: 14px;
    color: #ccc;
}

/* MOBILE ONLY: your pills overlap because Swiper sets each .swiper-slide width ~109px
   بينما الـ <span> داخلها عرضه 200px (inline) .. فبيطلع برا السلايد وبتتداخل العناصر.
   الحل: خلّي السلايد نفس عرض الـ pill، وخلي الـ pill ياخذ 100% من السلايد. */

@media (max-width: 767px) {

    .clients-one_slider {
        overflow: visible !important; /* يمنع قصّ الأطراف */
        padding: 0 14px !important;
    }

        /* Superseded by the work-areas redesign (assets/css/work-areas.css).
               These two rules existed only to tame the old inline-styled 200px pill:
               a CSS gap on the wrapper plus a hard 200px slide width. Both used
               !important, which beats Swiper's own inline slide widths, so leaving
               them in place would stop the redesigned marquee from sizing itself.
               The markup they targeted no longer exists.

            .clients-one_slider .swiper-wrapper {
                display: flex !important;
                gap: 14px !important;
            }

            .clients-one_slider .swiper-slide {
                width: 200px !important;
                flex: 0 0 200px !important;
                margin: 0 !important;
            }
            */

        /* Make the pill fill the slide (override inline width:200px safely) */
        .clients-one_slider .swiper-slide span[style*="width:200px"] {
            width: 100% !important;
        }
}
/*============First Slider Clients========================*/
@media (max-width: 767px) {
    .clients-one {
        margin-top: 22px; /* top/bottom space */
    }
}
/* Keep pills inside their column and stop pushing the title away */
.clients-one .row {
    align-items: center;
}

.clients-one_title {
    margin: 0 !important;
    white-space: nowrap;
}

/* IMPORTANT: prevent slider column from overflowing its grid cell */
.clients-one_slider {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important; /* contains pills */
    box-sizing: border-box;
    padding: 14px 18px !important; /* small safe padding to avoid edge clipping */
}

    /* Swiper sometimes uses fixed widths that overflow; force it to respect container */
    .clients-one_slider .swiper,
    .clients-one_slider .swiper-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Make wrapper not exceed parent */
    .clients-one_slider .swiper-wrapper {
        width: 100% !important;
    }

/* =========================================
   TABLET & SMALL LAPTOP  (≤ 991px)
   ========================================= */
@media (max-width: 991px) {

    /* Slightly tighter spacing, same layout */
    .slider-one_authors {
        gap: 10px;
    }

        .slider-one_authors ul {
            flex-wrap: wrap; /* allow icons to wrap if needed */
            align-items: center;
            gap: 10px;
        }

        .slider-one_authors i {
            font-size: 20px;
        }

    .slider-one_reviews {
        font-size: 14px;
    }
}

/* =========================================
   MOBILE PHONES  (≤ 575px)
   ========================================= */
.swiper-slide swiper-slide-active h1 {
    /*font-size: 90px;*/
}

/* =========================================
   Slider button vertical normalization
   (Arabic + English)
========================================= */
.slider-one .slider-one_button .theme-btn {
    padding-top: 0.85em;
    padding-bottom: 0.85em;
    height: auto;
}

.slider-one .slider-one_button .btn-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.slider-one .slider-one_button .text-one,
.slider-one .slider-one_button .text-two {
    line-height: 1.25;
    display: block;
}
/* =========================================
   Slider H1 sizing (global, direction-agnostic)
========================================= */

.slider-one .slider-one_heading {
    font-size: 40px;
    position: relative;
    display: block;
    width: 100%;
    line-height: 1.4;
    z-index: 1;
    padding-bottom: 20px;
}


/* keep the exact same placement you currently have (important) */
.rtl.slider-one_content {
    text-align: right; /* RTL */
}

.slider-one_heading span {
    background: rgba(0,0,0,.55);
    /*    padding: 10px 18px;
*/ border-radius: 29px;
}

.slider-one_heading span {
    color: unset;
}
/* Bigger highlight background behind the H1 text */
.slider-one_heading span {
    display: inline-block; /* مهم */
    padding: 18px 34px; /* كبّرها حسب اللي بدك */
    border-radius: 18px; /* اختياري */
    background: rgba(0,0,0,.55); /* نفس اللون اللي عندك */
    line-height: 1.15; /* يقلل تكسير الخلفية */
}

.slider-one .slider-one_button {
    transform: translateY(-45px); /* كان -60px */
    position: relative;
    z-index: 10;
}
/* =========================================
   FINAL RTL FIX – force correct rounded edges
========================================= */

/*.rtl .slider-one_options {
    left: 0;
    right: auto;*/
/* reset ALL corners first */
/*border-radius: 0;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;*/
/* apply correct RTL corners */
/*border-top-left-radius: 24px !important;
    border-bottom-left-radius: 24px !important;
    overflow: hidden;
}*/


@media (max-width: 575px) {
    /* hero */
    .slider-one, .slider-one .main-slider, .slider-one .swiper-slide {
        position: relative;
        height: 540px;
        min-height: 540px;
        overflow: hidden;
        padding-bottom: 120px; /* reserve space for the card */
    }

        /* banner text */
        .slider-one .slider-one_content {
            position: absolute;
            top: 12%;
            right: 16px;
            left: 16px;
            z-index: 3;
        }

        .slider-one .slider-one_title {
            font-size: 20px;
            line-height: 1.3;
        }

        /* options card — LOCKED to bottom INSIDE banner */
        .slider-one .slider-one_options {
            position: absolute;
            left: 50%;
            bottom: 0; /* ⬅️ key fix */
            transform: translateX(-50%);
            margin: 0 !important;
            padding: 6px 8px; /* compact */
            width: max-content;
            max-width: 100vw;
            z-index: 2;
        }

        /* icons in one row, no spacing artifacts */
        .slider-one .slider-one_brands {
            display: flex;
            flex-wrap: nowrap;
            gap: 6px;
            margin: 0 !important;
            padding: 0 !important;
            list-style: none;
        }

            .slider-one .slider-one_brands li {
                margin: 0;
                padding: 0;
                line-height: 1;
            }

            .slider-one .slider-one_brands img,
            .slider-one .slider-one_brands svg {
                width: 18px;
                height: 18px;
                display: block;
            }
}

@media (max-width: 575px) {

    /* remove visual inset caused by card shape */
    .slider-one .slider-one_options {
        bottom: 0;
        padding-bottom: 2px !important; /* counter radius lift */
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* remove swiper slide inner offset */
    .slider-one .swiper-slide > *:last-child {
        margin-bottom: 0 !important;
    }
}


.slider-one {
    position: relative; /* parent for the absolute card */
    overflow: hidden; /* keep rounded-corner clipping */
}

.price-block_one-btn {
    background-image: unset;
    background-color: var(--main-color);
}
    /*===================Pricing Cards==================*/
    .price-block_one-btn:hover {
        background-image: unset;
        background-color: var(--main-color);
    }


.slider-one_authors ul li {
    border: unset;
}

.slider-one_options .button a {
    gap: 15px;
}
/*=============Partners============*/
.clients-two .inner-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    border-bottom-width: 1px !important;
    border-bottom-color: rgb(170, 170, 170);
    border-bottom-style: solid;
    padding-bottom: 2px;
}

.clients-two .column {
    flex: 0 1 150px; /* ensures even width across all logos */
    display: flex;
    justify-content: center;
    align-items: center;
}

.clients-two .client-image {
    width: 100%;
    height: 100px; /* set a consistent height */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

    .clients-two .client-image img {
        max-width: 88%;
        max-height: 80px;
        object-fit: contain; /* keeps logos proportionate */
        filter: grayscale(100%);
        opacity: 0.85;
        transition: all 0.3s ease;
    }

.clients-two .column {
    border-right: unset;
}

.clients-two .client-image:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.05);
}

.clients-one_title {
    font-size: 21px;
}

.clients-one .client-image img {
    max-width: 50%;
    border-radius: 14px;
}
/* =========================================
   Edge shadow mask for slider cutoffs
========================================= */

.clients-one_slider {
    position: relative;
}

    /* Left shadow */
    .clients-one_slider::before,
    /* Right shadow */
    .clients-one_slider::after {
        content: "";
        position: absolute;
        top: 0;
        width: 60px;
        height: 100%;
        z-index: 5;
        pointer-events: none;
    }
    /**/ /* Left side fade */
    .clients-one_slider::before {
        left: 0;
        background: linear-gradient(to right, rgb(238 238 238), rgba(255, 255, 255, 0))
    }

    /* Right side fade */
    .clients-one_slider::after {
        right: 0;
        background: linear-gradient( to left,rgb(238 238 238), rgba(255, 255, 255, 0) );
    }

.clients-one_slider {
    overflow: visible;
    padding: 0 40px;
}

    .clients-one_slider .swiper-wrapper,
    .clients-one_slider .swiper-slide {
        overflow: visible;
    }

.news-block_one-arrow {
    background-image: unset;
    background-color: var(--main-color);
}

.news-block_one-date {
    background-image: unset;
    background-color: var(--main-color);
}

.offer-one_title.active .offer-one_number, .offer-one_title:hover .offer-one_number {
    background-image: unset;
    background-color: var(--main-color);
}

.offer-one_color {
    background-color: unset;
}
/* Default (LTR) – no change */
.offer-one_arrow img {
    transition: transform 0.3s ease;
}

/* RTL – flip arrow */
.rtl .offer-one_arrow img {
    transform: scaleX(-1);
}

.rtl .page-title .bread-crumb li {
    margin-right: unset;
    padding-right: unset;
}

.header-top_list {
    background-image: unset;
    background-color: var(--main-color);
}

.slider-one_title {
    background-image: unset;
    background-color: var(--main-color);
}

.btn-style-one {
    background-image: unset;
    background-color: var(--main-color);
}

sec-title_dots {
    background-image: unset;
    background-color: var(--main-color);
}

.slider-one .play-box .fa {
    background-image: unset;
    background-color: var(--main-color);
}
/* The hovered <a class="theme-btn btn-style-one"> inside .main-header_button */
.main-header_button > a.theme-btn.btn-style-one:hover::before {
    background-color: var(--main-color) !important;
}

/* (Optional fallback if the template also reads from the element itself) */
.main-header_button > a.theme-btn.btn-style-one:hover {
    background-color: var(--main-color);
    border-color: var(--main-color);
}
/* Arabic switch hover — kill gradient & paint with var(--main-color) */
.main-header_button > a.theme-btn.btn-style-one:hover {
    background: var(--main-color) !important; /* sets bg */
    background-image: none !important; /* remove gradient layer */
    border-color: var(--main-color) !important;
    color: #fff !important;
}

    /* Theme paints hover via ::before — override that too */
    .main-header_button > a.theme-btn.btn-style-one:hover::before {
        background: var(--main-color) !important;
        background-image: none !important;
        opacity: 1 !important; /* some themes animate opacity */
    }

.about-one_years {
    margin-left: -25px;
}

.sec-title_dots span {
    background-image: unset;
    background-color: var(--main-color);
}
/* Solid main color, still clipped to the glyphs */
.step-block_one-number span {
    background: var(--main-color) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* The "Step" label is a <span class="LangHtml"> so it can be translated. The template had it as a
   bare text node after the numeral - <span>01</span>Step - so it inherited the container's 16px.
   As a span it started matching the rule above and .step-block_one-number span in style.css, which
   rendered the word at 96px: measured 210px wide, 85px past its own card and 27px past the
   viewport, and that was the homepage's horizontal scroll. Only the numeral is meant to be the big
   gradient figure, so the label goes back to the container's own size. */
.step-block_one-number > span.LangHtml {
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: inherit;
}

.btn-style-three:before {
    background-image: unset;
    background-color: var(--main-color);
}

.offer-one_title.active .offer-one_arrow, .offer-one_title:hover .offer-one_arrow {
    background-image: unset;
    background-color: var(--main-color);
}

.step-award_box {
    background-image: unset;
    background-color: var(--main-color);
}

/* The award badge used to carry an unconditional `top: 90%` right here, and that
   single declaration is what broke this section on narrow screens.
   responsive.css:115 already re-anchors the badge:

       @media (max-width:1300px){ .step-award_box{ top:auto; bottom:0px; } }

   but style1.css loads AFTER responsive.css (_Layout.cshtml:53 then :54) at the
   same specificity, so `top:90%` won and the template's own mitigation never
   applied. Below 992px the two Bootstrap columns stack, the image column shrinks
   to just the picture, and 90% of that height puts the badge on the picture.

   Measured on the homepage before this change (LTR):
       991px   badge over the image by 87px x 231px
       768px   badge over the image by 88px x 345px - its full width
       575px   badge over the image by 67px x 345px, and its bottom edge exactly
               level with the bottom of .offer-one, which is overflow:hidden.
               The badge is 191px tall once the odometer has counted up (measured
               at 1440px), so on the live page it is cut off.
       <=479px responsive.css:1422 hides it outright - phones lost the figure.

   Above 1300px the columns sit side by side with room to spare and the original
   design is intact - measured 1440px, where the badge hangs 66px off the image's
   bottom corner and still ends 51px inside the section. `top:90%` is kept there
   and nowhere else.

   Between 992px and 1300px the columns are still side by side but the row is
   shorter, and 90% of it leaves the badge hanging past the bottom of
   .offer-one, which is overflow:hidden - measured 30px cut off at 1024px once
   the odometer has counted up and the badge is its full 191px tall. That band is
   left to responsive.css:115, whose `top:auto; bottom:0` anchors the badge to
   the bottom of the column so the section's 80px padding always clears it; the
   only reason it never worked is that the rule replaced here outranked it.

   Below 992px the columns stack and the badge goes into normal flow instead.

   Selectors are `.offer-one .step-award_box` (0,3,0) rather than the bare class
   so they also outrank `.rtl .step-award_subtitle` (0,2,0) in direction.css,
   which loads later and reserves 80px on the label to clear the absolutely
   pinned award icon - a reserve the in-flow block must not keep. */
@media (min-width: 1301px) {
    .offer-one .step-award_box {
        top: 86%;
        bottom: auto;
    }

    html[lang="ar"] .offer-one .step-award_box {
        top: 94%!important;
    }

}

/* 992-1300px: the columns are still side by side, so the badge stays a badge -
   but responsive.css:115 anchors it with `bottom:0`, level with the bottom of
   the column, and the picture overflows that wrapper (the four .offer-one_image
   layers are absolutely positioned, so the wrapper's height comes from the
   column, not from them - measured 894px of image inside an 803px wrapper). The
   badge therefore landed wholly on the picture: 130px of overlap in English,
   188px in Arabic, which is its entire height.

   .offer-one keeps 80px of bottom padding through this band (responsive.css:102),
   so the badge can be pushed down into it. 60px of that is used and 20px is left
   as clearance, which keeps it well inside the overflow:hidden edge while
   roughly halving how much of the picture it covers. */
@media (min-width: 992px) and (max-width: 1300px) {
    .offer-one .step-award_box {
        bottom: -60px;
    }
}

@media (max-width: 991.98px) {
    /* style.css:1342/1347 give both image wrappers `height:100%`. The Bootstrap
       row is a flex container whose columns stretch, so that 100% resolves
       against a definite height and the wrappers stop growing with their own
       content. While the badge was absolutely positioned that made no
       difference; in normal flow it made the block overflow the wrapper and get
       cut off by .offer-one{overflow:hidden} - measured 116px lost at 375px and
       575px, 36px at 768px. Releasing the height lets the column grow by exactly
       the height of the block. */
    .offer-one .offer-one_image-outer,
    .offer-one .offer-one_images_outer {
        height: auto;
    }

    /* A compact stat block in normal flow, directly under the image. It cannot
       cover the picture and cannot be clipped by .offer-one{overflow:hidden}.
       display:flex doubles as the override for the display:none that
       responsive.css applies at <=479px, so the statistic survives on phones. */
    .offer-one .step-award_box {
        position: static;
        display: flex;
        align-items: center;
        gap: 14px;
        width: auto;
        max-width: 420px;
        margin: 24px auto 0;
        padding: 16px 20px;
        border-width: 6px;
        border-radius: 16px;
    }

    /* The award vector is pinned at right:25px/top:25px for the floating badge.
       Here it becomes an ordinary flex item, so it cannot sit on top of the
       figure or the label - and that holds in Arabic as well as English,
       because flex order follows the writing direction on its own. */
    .offer-one .step-award_box:before {
        position: static;
        flex: 0 0 auto;
        width: 44px;
        height: 42px;
        background-size: contain;
    }

    .offer-one .step-award_box .step-award_count {
        font-size: 36px;
        line-height: 1;
    }

    .offer-one .step-award_box .step-award_subtitle {
        font-size: 15px;
        line-height: 1.3;
        text-transform: none;
        padding-inline-end: 0;
    }
}

/* responsive.css:1066 drops .offer-one's bottom padding to 0 below 600px. That
   was fine while the badge was hidden here, but the stat block is the last thing
   in the section now and would otherwise sit flush against its bottom edge
   (measured: block bottom and section bottom both at y=4412 at 360px). The space
   is given to the block rather than back to the section, so only the element
   that needs it is affected. */
@media (max-width: 599.98px) {
    .offer-one .step-award_box {
        margin-bottom: 40px;
    }
}

.testimonial-one_carousel-prev, .testimonial-one_carousel-next {
    background-image: unset;
    background-color: var(--main-color);
}

/* Testimonial quote: shown in full. This used to be `display:-webkit-box; -webkit-line-clamp:2;
   overflow:hidden; min-height:2 lines`, which cut every quote after two lines. Only the line height
   the clamp block also set is kept, plus wrapping so an unbroken token can never widen the card. */
.testimonial-block_two-text {
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* Testimonials section (Index.cshtml: .testimonial-two_rating-column + .testimonial-two_carousel-column
   share one Bootstrap .row). Bootstrap already stretches the two COLUMNS to the same height, but the
   cards inside them only took their own content height, so a longer testimonial left the rating card
   (or the carousel panel) ending short. Making each column a flex column and letting its card grow
   fills the row, so both cards share top and bottom edges at col-md and up. Below 768px the columns
   stack (col-sm-12), each is its own row line, and nothing is forced to match. */
.testimonial-two_rating-column,
.testimonial-two_carousel-column {
    display: flex;
    flex-direction: column;
}

.testimonial-two_rating-outer,
.testimonial-two_carousel-outer {
    flex: 1 1 auto;
}

/* Equal-height slides come from Swiper's default layout (no autoHeight - see HomeTestimonials.js): its
   wrapper is a flex row whose items stretch, so the wrapper is as tall as the tallest slide and every
   card matches it. */

/* ---- Testimonial card --------------------------------------------------------------------------
   Bootstrap owns the OUTER split (the .row in Index.cshtml: col-lg/md-4 rating + col-lg/md-8
   carousel, stacked full width below 768px); Swiper owns its own wrapper > slide structure and gets
   no .row/.col-*. min-width:0 on the carousel column and width/max-width:100% on the Swiper keep the
   slider inside its 8 units - a flex item otherwise refuses to shrink below its content, which is
   how a wide slider forces a Bootstrap row wider. */
.testimonial-two_carousel-column {
    min-width: 0;
}

.testimonial-two_carousel {
    width: 100%;
    max-width: 100%;
}

/* Arrows + decorative tab, anchored to the CARD. The arrows are absolute inside the Swiper container
   (bottom:0) while the pattern tab (::after) was absolute inside .testimonial-two_carousel-outer, so
   the two only shared a bottom edge when the container happened to end at the card's bottom. It did
   not: below 992px responsive.css gives the card 40px of bottom padding (arrows 40px above the tab),
   and on desktop the card is stretched to the rating column's height (arrows 11-38px above it). Now
   the outer card is a flex column and the Swiper container fills it (container bottom == card
   bottom, whatever the card height), with no bottom padding of its own; the container keeps its 70px
   bottom padding, which is the space reserved for the arrows so they never touch the quote, client
   footer or stars. */
.testimonial-two_carousel-outer {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    isolation: isolate;
}

.testimonial-two .testimonial-two_carousel {
    flex: 1 1 auto;
    min-width: 0;
    /* 70px button height + 16px clearance above it, so the stars/footer never touch the arrows */
    padding-bottom: 86px;
}

/* The pattern now covers the whole card (it was a fixed 234x80 box centred with left:50% +
   translateX): the tab is drawn at the bottom centre of a full-size layer that carries the card's own
   radius, so it can never spill outside the rounded corners or add overflow, and it sits behind the
   content (isolation above makes -1 stay inside this card) and never takes a click. */
.testimonial-two_carousel-outer::after {
    inset: 0;
    width: auto;
    height: auto;
    transform: none;
    border-radius: inherit;
    background-image: url(../images/background/pattern-24.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 234px 80px;
    pointer-events: none;
    z-index: -1;
}

/* Each slide is a full-height card (slide -> .testimonial-block_two -> -inner, all flex) with the
   quote on top and ONE footer below it. The quote grows to take the free height, which is what pins
   the footer to the card's bottom - no absolute positioning and no fixed heights, so two visible
   cards of different quote length still end on the same line. */
.testimonial-two_carousel .swiper-slide {
    display: flex;
}

.testimonial-block_two {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.testimonial-block_two-inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.testimonial-block_two-text {
    flex: 1 0 auto;
}

/* Footer = identity + stars, kept together. The identity row used to be sized around an absolutely
   positioned logo (min-height:120px, padding-top:25px, padding-left:120px, margin-top:25px) while the
   name and title only filled the top of it, and the stars added another margin-top:20px - that
   stack of reserved space was the blank band between the client name and the stars. The logo is now
   an ordinary flex item, so the row is exactly as tall as its content. Everything in the footer is
   logical (start/end), so Arabic is a true mirror of English: the logo and the stars sit at the START
   of a card and at the END of an .alternate card, i.e. on the outer edges of the pair in both
   languages, and the name takes the opposite side. */
.testimonial-block_two-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 25px;
}

.testimonial-block_two.alternate .testimonial-block_two-footer {
    align-items: flex-end;
}

.testimonial-block_two-author,
.testimonial-block_two.alternate .testimonial-block_two-author {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 4px;
    min-height: 0;
    margin-top: 0;
    padding: 0;
}

.testimonial-block_two.alternate .testimonial-block_two-author {
    flex-direction: row-reverse;
}

.testimonial-block_two-author_image,
.testimonial-block_two.alternate .testimonial-block_two-author_image {
    position: static;
    flex: 0 0 auto;
}

.testimonial-block_two-author_info {
    flex: 1 1 auto;
    min-width: 0;
    unicode-bidi: plaintext;
    overflow-wrap: anywhere;
}

/* Arabic identity group. Three things made the Arabic footers look wrong while English was fine:
   1. text-align. style.css sets it PHYSICALLY (a card: right, an .alternate card: left) - the side the
      client name sits toward. That happens to put the name beside the logo in Arabic (the logo is at
      the start = right on a card, left on an .alternate card), so it is left alone; the logical
      text-align added in the previous pass pushed the name to the far side of the card instead.
   2. Line height. The global Arabic typography (.rtl { line-height:1.75 }, style1.css) made the 24px
      name 42px per line, so a two-line Arabic name made one identity row taller than its neighbour and
      moved that card's logo up. The identity row uses a tighter line height in Arabic only.
   3. When a very long name still makes one row taller, the logo stays on the footer's bottom line
      (align-self:flex-end) instead of drifting up, so logos and stars line up across the two cards. */
.rtl .testimonial-block_two-author {
    line-height: 1.45;
}

.rtl .testimonial-block_two-author_image {
    align-self: flex-end;
}

.testimonial-block_two-rating,
.testimonial-block_two.alternate .testimonial-block_two-rating {
    margin: 12px 0 0;
    justify-content: flex-start;
}

.process-one {
    position: relative;
    padding: 110px 0px 120px;
}

.testimonial-two {
    position: relative;
    padding: 45px 0px 120px;
}

.rtl .testimonial-two {
/*    position: relative;*/
    padding: 70px 0px 120px !important;
}

/* Dark navy gradient card + faint decorative ring, matching the reference template's
   `.fw-client-impact-card` exactly (same two navy tones and accent highlight). */
.testimonial-two_rating-outer {
    background:
        radial-gradient(circle at 18% -5%, rgba(90, 188, 238, .18), transparent 36%),
        linear-gradient(155deg, #17295c 0%, #0d1b46 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 60px rgba(11, 30, 70, .16);
}

.testimonial-two_rating-outer::before {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: -92px;
    top: -98px;
    border-radius: 50%;
    border: 1px solid rgba(111, 201, 244, .13);
    pointer-events: none;
}

.fw-rating-text {
    color: rgba(255, 255, 255, .68);
}

.testimonial-two_authors-eyebrow {
    color: rgba(255, 255, 255, .72);
}

.testimonial-two_authors-line {
    background: linear-gradient(90deg, rgba(104, 196, 239, .50), rgba(255, 255, 255, .08));
}

.rtl .testimonial-two_authors-line {
    background: linear-gradient(270deg, rgba(104, 196, 239, .50), rgba(255, 255, 255, .08));
}

/* Logo chips: opaque white so brand marks/portraits read the same as the reference rail. */
.testimonial-two_authors ul li {
    background: rgba(255, 255, 255, .97);
    border: 1px solid rgba(255, 255, 255, .72);
    box-shadow: 0 8px 20px rgba(2, 15, 47, .15);
}

.testimonial-two_authors ul li:hover {
    background: #fff;
    box-shadow: 0 13px 28px rgba(2, 15, 47, .22);
}

/* Accent underline above the pull-quote title. */
.testimonial-two_title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 56px;
    height: 2px;
    transform: translateX(-50%);
    border-radius: 20px;
    background: linear-gradient(90deg, #61c3ee, rgba(97, 195, 238, .18));
}

.testimonial-two_title-button {
    margin-top: 26px;
}

.testimonial-block_one-rating span {
    position: relative;
    font-size: 22px;
    color: #FFD700;
    text-shadow: 0 1px 0 #b38700, 0 4px 10px rgba(216, 170, 0, 0.35);
}

.up-down_animation {
    color: #6ca3ee;
    text-shadow: 0 0 3px rgba(0,0,0,0.2);
}

.page-title h2 {
    color: #fff
}

.page-title .bread-crumb li a:hover,
.page-title .bread-crumb li a:focus {
    color: rgb(221, 221, 221) !important;
}

.page-title .bread-crumb li:first-child::before {
    content: none !important;
}

.page-title .bread-crumb li:not(:last-child)::after {
    content: ":";
    position: absolute;
    right: 0;
    top: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--white-color);
    font-family: inherit; /* ✅ correct */
}
/* Add depth around the banner */
/*.page-title_bg-image {
    box-shadow: 0 18px 55px rgba(7,12,26,.25);
}*/

    /* Dark overlay so the background image doesn't look too light */
    .page-title_bg-image::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient( 90deg, rgba(7,12,26,.65) 0%, rgba(7,12,26,.35) 55%, rgba(7,12,26,.60) 100% );
    }


.service-detail_list li:before {
    background: unset;
    position: absolute;
    content: '';
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50px;
    background-color: #666666;
    /*    padding-right: 0px;
    padding-left: 21px;*/
}

.rtl .service-detail_list li {
    padding-left: 0px;
    padding-right: 21px;
}

.service-detail_list li {
    padding-left: 21px;
}

.slider-one_authors ul li i {
    border: 3px solid #fff;
    border-radius: 360px;
    padding: 8px;
    background-color: #f0f0f0;
}

.step-block_one-inner:before {
    content: none;
}
/* Hide hamburger on mobile only */
@media (max-width: 767px) {
    .hamburger {
        display: none !important;
    }
}

.newsletter-box .form-group button {
    color: var(--main-color);
}

.footer-two_socials a:hover {
    background-image: unset;
    background-color: var(--main-color);
}

.footer-three_socials a:hover {
    background-image: unset;
    background-color: var(--main-color);
}
/* Fix RTL punctuation (quotes, fullstops) rendering direction */
.rtl .testimonial-two,
.rtl .testimonial-two * {
    unicode-bidi: plaintext;
}

.newsletter-box .form-group button {
    padding: 14px;
}

.marketing-one h1 {
    font-size: 48px !important; /* or whatever size you use globally */
}

.ft-counter {
    position: relative;
    overflow: hidden;
    border-radius: 0; /* removed cutting radiuses */
}
/* =========================================
   Process cards: equal height + same top line
   Desktop only (RTL & LTR) - CSS ONLY
========================================= */
@media (min-width: 1200px) {

    /* 1) Force the row to behave like a flex row.

          Wraps rather than nowrap: the steps come from MasterProcessStep, so the count is
          whatever the CMS holds, not the template's four. With nowrap every extra card was
          forced onto the same line and could not shrink past its content, pushing the row
          past its container - measured 650px of horizontal scroll at 1280px with six steps.
          Wrapping keeps four per row and sends any extras to a second row. */
    .process-one .row.clearfix {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 30px; /* adjust if you want */
    }

    /* 2) Each column is a fixed quarter, so four fill a row exactly and extras wrap
          underneath at the same width. 22.5px is this card's share of the three 30px gaps
          in a row of four (3 x 30 / 4), so 4 x (25% - 22.5px) + 3 x 30px = 100%.
          A fixed basis rather than `flex: 1 1 0` keeps every card the same width whatever
          the CMS returns; otherwise a short final row would stretch to fill. */
    .process-one .step-block_one {
        flex: 0 0 calc(25% - 22.5px) !important;
        max-width: calc(25% - 22.5px) !important;
        display: flex !important;
        /* 3) KILL any theme stagger (most templates do nth-child offsets) */
        margin-top: 0 !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    /* Also kill stagger if it was applied on the inner card */
    .process-one .step-block_one-inner {
        width: 100%;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        margin-top: 0 !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    /* 4) Make content layout consistent so height differences don't show */
    .process-one .step-block_one-text {
        margin-top: auto !important;
    }
}

/* =========================================
   Process cards: kill the staggered offsets below the 4-across breakpoint
========================================= */

/* style.css:958-983 lifts the 2nd, 3rd and 4th card with
       :nth-child(2) { top: 30px }  :nth-child(3) { top: -160px }  :nth-child(4) { top: -325px }
   That zig-zag only reads correctly when all four sit on ONE row, which Bootstrap only gives
   at col-xl-3, i.e. 1200px and up. Below that the cards are col-lg-6 / col-md-6 (two per row)
   or col-sm-12 (one), so cards 3 and 4 wrap to a new row and the negative offsets drag them
   back up into the row above. Because `top` is relative positioning it moves the card without
   freeing its space, so the result is a straight collision rather than a reflow.

   responsive.css:560 already zeroes these, but only inside @media (max-width: 1023px), and the
   block above only neutralises them from 1200px up - leaving 1024px-1199px with the stagger
   live and two cards per row. That is the reported overlap: measured at 1175px, card 3 sat
   160px inside card 1 and card 4 sat 355px inside card 2.

   Only children 2-4 are listed because those are the only ones style.css offsets; a fifth or
   later card from the CMS has no offset to undo. */
@media (max-width: 1199.98px) {
    .process-one .step-block_one:nth-child(2),
    .process-one .step-block_one:nth-child(3),
    .process-one .step-block_one:nth-child(4) {
        top: 0;
    }
}

.sec-title_heading {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /*-webkit-line-clamp: 2;  */
    /*    overflow: hidden;
*/ line-height: 1.25;
    /*max-height: calc(1.25em * 2);  */
}

.right-box {
    position: relative;
}

.rtl .sec-title .right-box {
    width: 100%;
    text-align: right !important;
}

    .rtl .sec-title .right-box .sec-title_text {
        margin: 0 !important; /* يلغي 0 auto */
        max-width: none !important; /* يلغي أي تحديد عرض */
        text-align: right !important;
        direction: rtl;
    }

.testimonial-two_arrows {
    position: absolute;
    top: -30px; /* adjust visually */
    right: 0; /* or left for RTL */
    left: auto; /* style.css's older .testimonial-two_arrows{left:120px} rule still matches this
                   element (this rule never overrode `left`, so per-property cascade let it
                   through); combined with the right:0/width:120px here that over-constrains the
                   box, silently making `right` a no-op at every size and forcing 240px from
                   .right-box's left edge - harmless while that container was wide, but it no
                   longer fits at narrower ones (e.g. 188px at 768px), overflowing the page. */
    width: 120px;
    height: 120px;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

.testimonial-one_talk {
    display: inline-flex;
    align-items: center; /* fixes vertical misalignment */
    gap: 10px;
}
/* CTA ROW — layout NEVER changes */
/* CTA behaves the same in EN & AR */
/* Works for BOTH RTL & LTR */
/* Make CTA row the horizontal container */
.cta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.cta-one .inner-container {
    border: 2px solid var(--main-color);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(223, 248, 255, 1) 100%)
}
/* Text behaves like inline content inside the row */
.right-box .sec-title_text {
    margin: 0;
    max-width: 65%;
}

.right-box {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "title title"
        "text  cta";
    align-items: center;
    /* column-gap: 24px;*/
}

.nav-tabs {
    --bs-nav-tabs-border-color: unset;
}
/* Title stays full width */
.right-box .sec-title_heading {
    grid-area: title;
}

/* Text on same row as button */
.right-box .sec-title_text {
    grid-area: text;
    margin: 0;
}

/* Button on same row as text */
.right-box .cta-row {
    grid-area: cta;
}

@media (max-width: 767px) {
    .right-box {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "text"
            "cta";
        row-gap: 16px;
    }

        .right-box .cta-row {
            justify-self: start;
        }
}


@media (max-width: 767px) {
    .accordion-box .block .acc-btn {
        margin-bottom: 16px;
    }
}

/* Button never shrinks */
.testimonial-two_button {
    flex-shrink: 0;
}

.testimonial-one_talk {
    display: flex;
    align-items: center;
    gap: 12px; /* ← THIS IS THE KEY */
}

/* English */
.talk-text {
    direction: ltr;
    text-align: left;
}

/* Arabic */
.rtl .talk-text {
    direction: rtl;
    text-align: right;
}
/* Center the whole block */
.rtl .contact-two .sec-title.centered {
    text-align: center;
}

    .rtl .contact-two .sec-title.centered .sec-title_heading {
        margin-bottom: 5px !important;
    }
    /* Override RTL heading rule ONLY for centered titles */
    .rtl .contact-two .sec-title.centered .sec-title_heading,
    .rtl .contact-two .sec-title.centered .sec-title_text {
        text-align: center;
    }

.rtl .clients-two .sec-title.centered .sec-title_heading {
    text-align: center;
}

.sec-title .d-flex.justify-content-between.align-items-center.flex-wrap {
    display: block !important;
}
/* make both boxes stack and take full width */
.sec-title .left-box,
.sec-title .right-box {
/*    width: 100% !important;*/
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    flex: none !important;
}

/* Mobile overflow fix: flex:none above pins these boxes at flex-shrink:0, so on narrow
   viewports their content (esp. a long .sec-title_text sentence) sizes to its unconstrained
   max-content width instead of wrapping - ballooning document.documentElement.scrollWidth past
   the true device width, which then makes mobile browsers widen the whole layout viewport to
   fit it (this is what shifted/clipped the entire homepage, not any sidebar/off-canvas bug).
   The equivalent .rtl .testimonial-two override further down (app/direction.css) already caps
   these boxes at a shrinkable flex-basis for that one section in Arabic; this generic, direction-
   agnostic max-width applies the same fix everywhere flex:none is used, English included. */
@media (max-width: 767px) {
    .sec-title .left-box,
    .sec-title .right-box {
        max-width: 100% !important;
    }
}

/* small gap so the short description sits immediately under the H2 */
.sec-title .sec-title_heading {
    /*    margin: 0 !important;
*/ /* line-height:1.2*/
}

.sec-title .sec-title_text {
    margin-top: .4rem !important;
}

.rtl .sec-title_heading {
    font-size: var(--fs-h2)
}
/* alignment only (keeps same vertical stack) */
.rtl .sec-title .sec-title_title,
.rtl .sec-title .sec-title_heading,
.rtl .sec-title .sec-title_text {
    text-align: right;
}

.ft-counter_bg {
    position: absolute;
    inset: 0;
    background: #5193cd;
    filter: none;
    z-index: 0;
}

.counter-block_two {
    position: relative;
    margin: 30px 0 30px 0;
}

.ft-counter_bg::before,
.ft-counter_bg::after {
    content: "";
    position: absolute;
    inset: -20%;
    /* soft white sheens only, so the color stays your main color */
    background: radial-gradient(35% 25% at 20% 60%, rgba(255,255,255,.10), transparent 60%), radial-gradient(30% 30% at 80% 40%, rgba(255,255,255,.06), transparent 60%);
    mix-blend-mode: screen;
    animation: ftFloat 18s ease-in-out infinite;
}

.ft-counter_bg::after {
    animation-duration: 26s;
    animation-direction: reverse;
    opacity: .65;
}

@keyframes ftFloat {
    0%,100% {
        transform: translate3d(0,0,0) rotate(0deg);
    }

    50% {
        transform: translate3d(2%, -3%, 0) rotate(6deg);
    }
}

/* Content sits above background */
.ft-counter .auto-container {
    position: relative;
    z-index: 1;
}

/* Optional: make numbers pop on dark bg */
.ft-counter .counter-block_two-count {
    color: #fff;
}

.counter-block_two-count sup {
    color: #ffffff;
}

.ft-counter .counter-block_two-text {
    color: #e7ecf3;
    opacity: .95;
}

/* If your theme relies on gradient text for numbers, ensure normal fill */
.ft-counter .counter-block_two-count .odometer {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.counter-block_two-inner:hover .counter-block_two-text {
    color: #fff;
}

.marketing-one h1:hover {
    background: var(--main-color) !important; /* solid brand color */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important; /* keep text transparent so bg shows */
}

.footer-two_bg {
    background-image: unset;
    background-color: #111d42;
}

.footer-style_three-bg {
    background-image: unset;
    background-color: #111d42;
}

.footer-two_text a {
    color: #fff;
}

.footer-two_title {
    font-size: 28px;
    color: var(--main-color);
}

.footer-logo_two {
    margin-left: -20px;
}

.rtl .footer-logo_two {
    margin-right: -20px;
    margin-left: unset;
}

.footer-two_socials {
    font-size: 20px;
}
/* Default (English / LTR) */
.inner-column::before {
    left: 0;
    right: auto;
}



.offer-one_bg-color {
    background-image: unset;
    background-color: var(--main-color);
}

.offer-one_icon:before {
    border: none;
}
/*=====================Services Page============================*/
/* Make the currently active service tab clearly visible
   (no change to default / hover styles) */
/* Ensure column stretches */
.sidebar-page-container {
    padding: unset;
    padding-top: 110px;
}

.services-tabs-section {
    padding-top: 110px;
}

.service-detail_image img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.service-detail_image {
    height: 100%;
    display: flex;
    align-items: flex-start; /* ✅ TOP */
    justify-content: center; /* horizontal centering only */
}

.services-tabs-section {
    margin-top: 30px;
}

.nav-item .nav-tabs li {
    padding: 10px;
}
/* Main color styling */
.components-prev,
.components-next {
    color: var(--main-color);
    border-color: var(--main-color);
}

    /* Hover / active */
    .components-prev:hover,
    .components-next:hover {
        background-color: var(--main-color);
        color: var(--main-color);
    }

/* RTL arrow flip */
.rtl .components-prev i,
.rtl .components-next i {
    transform: rotate(180deg);
}

#servicesTab .nav-item {
    margin-right: 10px; /* adjust as needed */
}

.rtl .nav-tabs .nav-link {
    margin-left: 10px;
    background: #f4f6fa;
}

.sidebar-widget.category-widget .category-list li.active > a.aml-tab-link,
.sidebar-widget.category-widget .category-list a.aml-tab-link.active {
    box-shadow: 0 0 0 3px #111d42; /* dark outline around the pill */
}

.empower-block_one-icon {
    background-image: unset;
    background-color: var(--main-color);
}

.business-one_play {
    background-image: unset;
    background-color: var(--main-color);
}

.category-list li a {
    background-image: unset;
    background-color: var(--main-color);
}

.category-list li span {
    background-image: unset;
    background-color: var(--main-color);
}
/* Make the FA icon inside the category list look like the other service icons */
.sidebar-widget.category-widget .category-list .icon i {
    color: #ffffff; /* white icon, like the SVG ones */
    font-size: 24px; /* adjust to visually match your SVGs */
    line-height: 1;
    display: inline-block;
}

/*====================Blog Page==============================*/
.styled-pagination li a {
    background-image: unset;
    background-color: #000;
}

    .styled-pagination li a.active {
        background-color: #000;
    }

    .styled-pagination li a:hover {
        background-color: var(--main-color);
    }

.btn-style-one:before {
    background-image: unset;
    background-color: var(--main-color);
}
/* RTL: fix meta row order */
.rtl .news-block_one-arrow img {
    transform: scaleX(-1);
    transition: transform 0.3s ease;
}


/* ========================================= */
/* BLOG DESKTOP — CENTER TITLE + RIGHT CTA   */
/* ========================================= */
/* ===== BLOG HEADER FIX (DESKTOP ONLY) ===== */


@media (min-width: 992px) {

    /* Replace flex with grid ONLY for this section */
    section.news-one .sec-title {
        display: grid !important;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 32px;
    }

        /* Title block: do NOT let it shrink or move */
        section.news-one .sec-title > div:first-child {
            min-width: 0;
        }

    /* Button wrapper reset */
    section.news-one .right-box {
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap;
    }

    /* RTL: flip grid direction */
    .rtl section.news-one .sec-title {
        direction: rtl;
    }
}
/*===========================Blog Details Page====================*/
.blog-detail blockquote .quote {
    background-image: unset;
    background-color: var(--main-color);
}

.blog-detail_date {
    background-image: unset;
    background-color: var(--main-color);
}

.category-list_two li a:hover {
    background-image: unset;
    background-color: var(--main-color);
}

.sidebar .search-box .form-group button {
    background-image: unset;
    background-color: var(--main-color);
}

.rtl .category-list_two li a::before {
    content: "\f104" !important; /* fa-chevron-left (was \f105) */
}
/* Only clamp the author image size (no layout changes) */
.blog-detail_author-image {
    width: 140px;
    height: 140px;
}

    .blog-detail_author-image img {
        width: 140px !important;
        height: 140px !important;
        max-width: 140px !important;
        max-height: 140px !important;
        object-fit: cover;
        display: block;
    }
/* Align icons WITHOUT touching any colors/backgrounds */
.category-list li a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 84px;
    padding-left: 110px; /* room for icon bubble */
    padding-right: 26px;
}

    /* Just positioning + sizing (no background/border color changes) */
    .category-list li a .icon {
        position: absolute;
        left: 26px;
        top: 50%;
        transform: translateY(-50%);
        width: 56px;
        height: 56px;
        margin: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        /* Center the FA icon inside the bubble (no color change) */
        .category-list li a .icon i {
            line-height: 1;
            display: block;
        }
/* Fix mixed Arabic + English in RTL (keep Arabic RTL, force English LTR and prevent weird shaping) */

/* Apply to your service list + any similar text blocks */
.rtl .service-detail_list-two,
.rtl .service-detail_list-two li,
.rtl .service-detail_text {
    unicode-bidi: plaintext; /* best for mixed-direction text */
}

/* Any explicit English snippets you wrap (recommended) */
.rtl .ltr {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    display: inline-block;
}

/* If you DON’T want to wrap: auto-fix common English tokens inside RTL */
.rtl abbr,
.rtl code,
.rtl kbd,
.rtl samp {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* Optional: numbers also look cleaner in RTL lists */
.rtl .service-detail_list-two li {
    font-variant-numeric: tabular-nums;
}

/*========================FAQ===============================*/
.arbold {
    -webkit-text-stroke: 0.3px
}

.accordion-box .block .icon-outer .icon {
    background-image: unset;
    background-color: var(--main-color);
}

.news-block_two-inner:hover .news-block_two-arrow a {
    background-image: unset;
    background-color: var(--main-color);
}

.news-block_one-inner:hover .news-block_one-title a {
    color: var(--main-color); /* or your hover color */
}

.accordion-box .block .icon-outer .icon img {
    transition: transform 0.3s ease;
}

/* active open */
.rtl .accordion-box .block .acc-btn.active .icon-outer .icon img {
    transform: rotate(-90deg);
}

.rtl .accordion-box .block .icon-outer .icon img {
    transform: scaleX(-1);
    transition: transform 0.3s ease;
}
/* === FAQ accordion layout safety (LTR + RTL) === */

/* Ensure accordion items behave as block elements */
.accordion-box {
    position: relative;
}

    .accordion-box .accordion.block {
        position: relative;
        overflow: hidden;
    }

        /* Space between accordion blocks */
        .accordion-box .accordion.block + .accordion.block {
            margin-top: 16px;
        }

/* Mobile stacking: extra safety spacing */
@media (max-width: 991px) {

    .faq-two .column {
        margin-bottom: 24px;
    }

    .accordion-box .acc-content {
        position: relative;
    }
}

/* RTL: no mirroring issues, just alignment */
.rtl .accordion-box .acc-btn {
    text-align: right;
}

/*==================== Anti-Money-Laundering – Layout ====================*/

/* ============================================================
/* =========================================================
   GLOBAL FIXES / COLOR OVERRIDES
   ========================================================= */
.rating-widget .widget-content {
    background-color: var(--main-color);
}

.accordion-box .block .icon-outer .icon {
    background-image: unset;
    background-color: var(--main-color);
}

.news-block_two-inner:hover .news-block_two-arrow a {
    background-image: unset;
    background-color: var(--main-color);
}

.accordion-button:not(.collapsed) {
    background-color: unset;
}

.service-detail_tag span {
    background-image: unset;
    background-color: var(--main-color);
}

.service-block_one-icon {
    background-image: unset;
    background-color: var(--main-color);
}

/* =========================================================
   AML – ALIGN "IMPLEMENTATION PROCESS" + "PROGRAM COMPONENTS"
   ========================================================= */
/* Enable horizontal scrolling */
#componentsTabs {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--main-color) rgba(0,0,0,0.08);
}

    /* Chrome / Edge / Safari */
    #componentsTabs::-webkit-scrollbar {
        height: 8px;
    }

    #componentsTabs::-webkit-scrollbar-track {
        background: rgba(var(--main-color-rgb), 0.12);
        border-radius: 10px;
    }

    #componentsTabs::-webkit-scrollbar-thumb {
        background: var(--main-color);
        border-radius: 10px;
    }

        #componentsTabs::-webkit-scrollbar-thumb:hover {
            background: rgba(var(--main-color-rgb), 0.85);
        }

.nav-link {
    font-size: 14px;
}

.program-tabs {
    border-bottom: none;
    gap: 10px;
}

    .program-tabs .nav-link {
        border: none;
        background: #f4f6fa;
        color: #111d42;
        font-weight: 600;
        padding: 10px 22px;
        border-radius: 999px;
        transition: all 0.25s ease;
        white-space: nowrap;
    }

        .program-tabs .nav-link.active {
            background: linear-gradient(135deg, #4fb9ff, #67d3ff);
            color: #fff;
            box-shadow: 0 8px 20px rgba(79, 185, 255, 0.35);
        }

.program-components-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 10px;
}

    .program-components-nav .nav-link {
        white-space: nowrap; /* 🔑 no line breaks */
        height: 44px; /* 🔑 equal height */
        display: flex;
        align-items: center;
        padding: 0 18px;
    }

    .program-components-nav .nav-link {
        border: none;
        background: #f4f6fa;
        color: #111d42;
        font-weight: 600;
        border-radius: 999px;
        transition: all 0.25s ease;
    }

        .program-components-nav .nav-link:hover {
            background: #e8f3ff;
            color: #0e5aa7;
        }

        .program-components-nav .nav-link.active {
            background: linear-gradient(135deg, #4fb9ff, #67d3ff);
            color: #fff;
            box-shadow: 0 8px 20px rgba(79, 185, 255, 0.35);
        }
/* === Horizontal drag container (Tabs & Pills) === */
.program-tabs,
.program-components-nav {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

    /* Hide scrollbar (Chrome / Edge / Safari) */
    .program-tabs::-webkit-scrollbar,
    .program-components-nav::-webkit-scrollbar {
        display: none;
    }

    /* While dragging */
    .program-tabs.dragging,
    .program-components-nav.dragging {
        cursor: grabbing;
    }

    /* Prevent text selection while dragging */
    .program-tabs *,
    .program-components-nav * {
        user-select: none;
    }
/* Kill native horizontal scrolling entirely */
.program-tabs,
.program-components-nav {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    white-space: nowrap;
    cursor: grab;
}

    /* Absolute kill for any browser scrollbar */
    .program-tabs::-webkit-scrollbar,
    .program-components-nav::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
    }

.program-tabs {
    scrollbar-width: none !important; /* Firefox */
}
/* Space between step title and its details */
.aml-components .tab-pane h4 {
    margin-bottom: 16px; /* space below title */
}

/* Space between list items (details) */
.aml-components .service-detail_list-two li {
    margin-bottom: 10px;
}

/* Optional: extra breathing room above each step block */
.aml-components .tab-pane {
    padding-top: 10px;
}
/* Fix excessive right-shift in Program Overview content */
#overview,
#overview-ar {
    padding-left: 0 !important;
}
/* Remove left padding from FAQ tab content */
#faq,
#faq-ar {
    padding-left: 0 !important;
}

    /* Remove padding from accordion container */
    #faq .accordion-box,
    #faq-ar .accordion-box {
        padding-left: 0;
        margin-left: 0;
    }

        /* Remove inner padding from each FAQ block */
        #faq .accordion-box .accordion,
        #faq-ar .accordion-box .accordion {
            padding-left: 0;
        }


/* Both AML lower-box blocks share the same max width & centering */
.shop-detail.aml-program-detail .auto-container > .lower-box:nth-of-type(2),
.shop-detail.aml-program-detail .auto-container > .lower-box:nth-of-type(3) {
    max-width: 1040px;
    margin: 0 auto;
}

    /* Implementation Process: remove side padding so heading lines up
   horizontally with "Program Components" below it */
    .shop-detail.aml-program-detail
    .auto-container > .lower-box:nth-of-type(2)
    .product-info-tabs .tabs-content {
        padding: 35px 0 0 0; /* only top padding */
    }

        .shop-detail.aml-program-detail
        .auto-container > .lower-box:nth-of-type(2)
        .product-info-tabs .tabs-content .content {
            padding: 0; /* kill left/right padding */
        }


/* =========================================================
   AML – PROGRAM COMPONENTS TABS ROW (6 BOXES)
   ========================================================= */

.aml-program-detail .program-components-nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 8px; /* small spacing between boxes */
}

    .aml-program-detail .program-components-nav .tab-btn {
        flex: 1 1 0;
        padding: 10px 8px;
        font-size: 15px;
        line-height: 1.25;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: normal; /* allow titles to wrap to 2 lines */
    }

/* Tablet */
@media (max-width: 991px) {
    .aml-program-detail .program-components-nav {
        flex-wrap: wrap;
    }

        .aml-program-detail .program-components-nav .tab-btn {
            flex: 1 1 48%;
            height: auto;
            margin-bottom: 8px;
        }
}

/* Mobile */
@media (max-width: 575px) {
    .aml-program-detail .program-components-nav .tab-btn {
        flex: 1 1 100%;
    }
}


/* =========================================================
   TEMPLATE TABS (Program Overview / FAQ) – SMALL LABEL TWEAK
   ========================================================= */

.shop-detail .prod-tabs .tab-btns .tab-btn {
    font-size: 13px;
    padding: 26px 9px;
}


/* =========================================================
   AML SIDEBAR TAB STYLE (USED ON SERVICES PAGE)
   ========================================================= */

.aml-tab-list .aml-tab-link {
    display: block;
    padding: 18px 24px;
    border: 2px solid var(--main-color);
    border-radius: 38px;
    background: #fff;
    color: #111;
    font-weight: 800;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

    /* Hover state – only when not active */
    .aml-tab-list .aml-tab-link:hover:not(.is-active) {
        background: rgba(106, 195, 238, 0.15);
        color: var(--main-color);
    }

    /* Active state – solid main color */
    .aml-tab-list .aml-tab-link.is-active,
    .aml-tab-list .aml-tab-link.is-active:hover,
    .aml-tab-list .aml-tab-link.is-active:focus,
    .aml-tab-list li.active .aml-tab-link {
        background-color: var(--main-color) !important;
        color: #fff !important;
        border-color: transparent !important;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
        transform: translateY(-1px);
    }

        /* Keep text white even on hover when active */
        .aml-tab-list li.active .aml-tab-link:hover {
            color: #fff !important;
        }
/*===========================New AML components=======================*/
/* SECTION */
.kyc-section {
    background: #f2f2f2;
    border-radius: 40px;
    padding: 60px 50px 70px;
    margin: 60px auto;
    /* Fills its Bootstrap column (ProjectDetail.js wraps it in the same .auto-container > .row >
       .column the FAQ uses) - it used to carry `max-width: 76%`, which is what left its edges inside
       the FAQ cards'. Width comes from the grid, not from this rule. */
    width: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
}

/* الهيدر */
.kyc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    gap: 20px;
}

    .kyc-header h2 {
        font-size: clamp(24px, 3.5vw, 36px);
        font-weight: 600;
        color: #1a1a1a;
        line-height: 1.3;
        margin: 0;
    }

/* أزرار التنقل */
.kyc-nav {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

    .kyc-nav button {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 2px solid #6ac3ee;
        background: transparent;
        color: #6ac3ee;
        font-size: 24px;
        font-weight: 300;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        line-height: 1;
    }

        .kyc-nav button:hover:not(.swiper-button-disabled) {
            background: #6ac3ee;
            color: #fff;
            box-shadow: 0 4px 15px rgba(106, 195, 238, 0.4);
            transform: translateY(-2px);
        }

        .kyc-nav button.swiper-button-disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

/* السويبر */
.kyc-swiper-wrapper {
    position: relative;
}

.kyc-swiper {
    overflow: hidden !important;
    padding-bottom: 10px;
}

    /* الـ Slide - CRITICAL للـ Responsive */
    .kyc-swiper .swiper-slide {
        height: auto;
        display: flex;
    }

/* الكاردات - نفس الشكل من الصورة */
.kyc-card {
    /* تدرج لوني من فوق لتحت */
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
}

    .kyc-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    }



html[lang="ar"] .UlText{
    font-size: initial;
}
/* الصورة
   This box used to be built from `height:0; padding-bottom:100%`. The comment said
   16:9 but 100% of the width is a square, and the <img> inside was only `height:75%`
   of that square, pinned to the top - so roughly a quarter of the box was empty by
   construction before any picture was drawn. `object-fit:scale-down` then shrank the
   picture inside what was left rather than filling it.

   Measured at 1440px on a 318px-wide card, gap between the bottom of the visible
   picture and the first line of text:

       328x456  portrait   80px
       1920x1080 16:9     109px
       411x121  panoramic 152px
       1460x820           109px

   ...on a 488px card, so about a third of it was blank. A real 16/9 aspect-ratio
   with the media filling it removes the gap and makes every card the same shape
   whatever the editor uploads. `cover` rather than `contain`: contain would put the
   blank space back for anything that is not already 16/9, and these are cards, not
   a gallery - the frame is meant to be filled.

   The rule covers <video> as well as <img>: buildGalleryMediaTagHtml emits a
   <video class="w-100"> for gallery type 2, which the old img-only selector left
   unpositioned inside a zero-height box. */
.kyc-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    /* .kyc-card is already border-radius:16px + overflow:hidden, so this only
       matters if that ever changes - the media can never sit on the corners. */
    border-start-start-radius: 16px;
    border-start-end-radius: 16px;
    background-color: #eef1f7;
}

    .kyc-card-img img,
    .kyc-card-img video {
        position: absolute;
        inset: 0;
        width: 100%;
/*        height: 100%;*/
        object-fit: cover;
        object-position: center;
        display: block;
    }

/* المحتوى */
.kyc-card-content {
    padding: 24px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.kyc-card h3 {
    color: #000;
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 600;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.kyc-card p {
    color: #000;
    font-size: clamp(13px, 1.5vw, 15px);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

/* تأثير التلاشي في النهاية */
.kyc-swiper-wrapper::after {
    content: '';
    position: absolute;
    /* Logical, and the gradient runs to the same edge, so the fade covers the
       partial card in Arabic as well as English - it used to be pinned right in
       both directions. */
    inset-inline-end: 0;
    inset-block: 0 10px;
    width: 60px;
    background: linear-gradient(to var(--kyc-fade-dir, left), #f2f2f2 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

[dir="rtl"] .kyc-swiper-wrapper,
.rtl .kyc-swiper-wrapper {
    --kyc-fade-dir: right;
}

/* Responsive - Tablet */
@media (max-width: 991px) {
    .kyc-section {
        padding: 50px 35px 60px;
    }

    .kyc-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .kyc-card-content {
        padding: 20px 16px;
    }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    .kyc-section {
        padding: 40px 20px 50px;
        border-radius: 25px;
        margin: 40px auto;
    }

    .kyc-header {
        margin-bottom: 30px;
    }

    .kyc-nav button {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .kyc-card-content {
        padding: 18px 14px;
    }

    .kyc-swiper-wrapper::after {
        width: 40px;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 480px) {
    .kyc-section {
        padding: 30px 15px 40px;
        margin: 30px auto;
    }

    .kyc-card-content {
        padding: 16px 12px;
    }
}
/* Swiper fixes */
.swiper {
    padding-bottom: 10px;
}

.faq-section {
    padding-bottom: 90px;
}

.program-overview-section {
    padding-bottom: 40px;
}

.project-detail {
    position: relative;
    padding: 130px 0px 0px;
}

.project-detail_image {
/*    border-radius: unset;*/
}

.project-detail_gallery {
    margin-bottom: unset;
}

project-detail_image {
    margin-bottom: unset;
}
/* Force correct RTL punctuation & mixed-language flow */
.rtl .project-detail,
.rtl .program-overview-section {
    direction: rtl;
    unicode-bidi: isolate;
}

    /* Apply to text blocks specifically */
    .rtl .project-detail .sec-title_text,
    .rtl .project-detail .service-detail_subtitle,
    .rtl .program-overview-section .sec-title_text,
    .rtl .program-overview-section li {
        direction: rtl;
        unicode-bidi: isolate;
        text-align: right;
    }

/* ================= Misc Overrides ================= */
/* Bootstrap accordion active state – keep background clean */
.accordion-button:not(.collapsed) {
    background-color: unset;
}

/* Tag on service image */
.service-detail_tag span {
    background-image: unset;
    background-color: var(--main-color);
}

/* Service block icons */
.service-block_one-icon {
    background-image: unset;
    background-color: var(--main-color);
}

/* Service card background */
.service-block_one-inner {
    background-color: var(--main-color);
}

    .service-block_one-inner:before {
        background: unset;
    }
/*==========================Titles==========================*/
.about-two_title i {
    color: var(--color-two);
}
/*==========================Gallery========================*/
.gallery-block-one_inner:hover .gallery-block_one-arrow {
    background-image: unset;
    background-color: var(--main-color);
}
/*=====================About Page========================*/
.about-two_video {
    background-image: unset;
    background-color: var(--main-color);
}

.default-bar {
    background-image: unset;
    background-color: var(--main-color);
}

.about-three_experiance span {
    transform: rotate(90deg);
    display: initial;
    width: 135px;
    text-align: right;
    font-weight: inherit;
    top: 8px;
}
/* =========================================================
   WHY FRAMEWORK – Enterprise Clean Version
========================================================= */

.about-why {
    position: relative;
    padding: 60px 0;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 70%);
}

    .about-why .auto-container {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 24px;
    }

/* ================= Header ================= */

.about-why_head {
    text-align: center;
    margin-bottom: 50px;
}

.about-why_title {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 14px;
    color: var(--color-two);
}

    .about-why_title span {
        color: var(--main-color);
    }

.about-why_subtitle {
    max-width: 820px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.8;
    color: #5b6473;
}

/* ================= Stats ================= */

.about-why_stats {
    margin-top: 36px;
    display: flex;
    justify-content: center;
    gap: 40px;
}

.why-stat {
    text-align: center;
}

.why-stat_value {
    font-size: 36px;
    font-weight: 800;
    color: var(--main-color);
}

.why-stat_label {
    font-size: 14px;
    color: #6b7280;
    margin-top: 6px;
}

/* ================= Vision & Mission ================= */

.about-why_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin: 70px 0 60px;
}

.about-why_card {
    background: #ffffff;
    border-radius: 20px;
    padding: 32px;
    border: 1px solid rgba(17,29,66,.08);
    box-shadow: 0 20px 45px rgba(0,0,0,.04);
    transition: all .3s ease;
}

    .about-why_card:hover {
        transform: translateY(-6px);
        box-shadow: 0 25px 60px rgba(0,0,0,.08);
    }

.about-why_badge {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(106,195,238,.18);
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    color: var(--color-two);
    margin-bottom: 16px;
}

.about-why_text {
    font-size: 15px;
    line-height: 1.8;
    color: #4b5563;
    margin-bottom: 18px;
}

.about-why_points {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .about-why_points li {
        position: relative;
        padding-left: 22px;
        margin-bottom: 10px;
        font-size: 14px;
        color: #374151;
    }

        .about-why_points li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 8px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--main-color);
        }

/* ================= Features ================= */

.about-why_features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.feature-block .feature-inner {
    background: #ffffff;
    border-radius: 18px;
    padding: 26px 22px;
    border: 1px solid rgba(17,29,66,.08);
    transition: all .3s ease;
    height: 100%;
}

    .feature-block .feature-inner:hover {
        transform: translateY(-4px);
        border-color: var(--main-color);
        box-shadow: 0 18px 40px rgba(0,0,0,.05);
    }

.feature-number {
    font-size: 12px;
    font-weight: 800;
    color: var(--main-color);
    margin-bottom: 10px;
    display: inline-block;
}

.feature-inner h5 {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--color-two);
}

.feature-inner p {
    font-size: 14px;
    line-height: 1.6;
    color: #5b6473;
}

/* ================= Responsive ================= */

@media (max-width: 992px) {

    .about-why_grid {
        grid-template-columns: 1fr;
    }

    .about-why_features {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-why_stats {
        flex-direction: column;
        gap: 20px;
    }
}

.about-why_title span {
    background-color: aliceblue;
    border: 1px solid;
    border-color: rgb(242, 242, 242);
    padding: 0px 10px;
}

@media (max-width: 576px) {
    .about-why_features {
        grid-template-columns: 1fr;
    }

    .about-why_title {
        font-size: 32px;
    }
}
/* =========================
   ABOUT WHY - subtle bg + reveal
========================= */
.about-why {
    background: linear-gradient(180deg, #f6f7f9 0%, #ffffff 70%);
    padding: 90px 0;
}

/* Reveal animation (header + stats + cards) */
.js-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s ease;
    will-change: opacity, transform;
}

    .js-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

/* Small stagger feel (optional, subtle) */
.about-why_stats .why-stat {
    transition-delay: .12s;
}

    .about-why_stats .why-stat:nth-child(2) {
        transition-delay: .22s;
    }

    .about-why_stats .why-stat:nth-child(3) {
        transition-delay: .32s;
    }
/* =========================
   WHAT WE DELIVER - White, no background layer
========================= */
.deliver-one {
    background: #fff; /* ✅ must stay white */
    padding: 20px 0;
}

.deliver-one_head {
/*    text-align: left;*/
    margin-bottom: 34px;
}

.deliver-one_title {
    font-size: 34px;
    font-weight: 700;
    margin: 0 0 10px;
    letter-spacing: .2px;
}

    .deliver-one_title span {
        color: var(--main-color);
    }

.deliver-one_subtitle {
    margin: 0;
    max-width: 820px;
    color: rgba(0,0,0,.65);
    line-height: 1.7;
}

/* Grid */
.deliver-one_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

@media (max-width: 992px) {
    .deliver-one_grid {
        grid-template-columns: 1fr;
    }
}

/* Card */
.deliver-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 22px;
    padding: 22px 22px 20px;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    cursor: default; /* ✅ not clickable */
    position: relative;
    overflow: hidden;
}

    /* Hover expand (ONLY on hover, not click) */
    .deliver-card:hover {
        transform: translateY(-6px) scale(1.02);
        border-color: rgba(0,0,0,.12);
        box-shadow: 0 18px 50px rgba(0,0,0,.10);
    }

/* Head */
.deliver-card_head {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.deliver-card_icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(106,195,238,.18);
    color: var(--main-color);
    flex: 0 0 auto;
}

.deliver-card_title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

/* Text + points */
.deliver-card_text {
    margin: 0 0 14px;
    color: rgba(0,0,0,.70);
    line-height: 1.7;
}

.deliver-card_points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 9px;
}

    .deliver-card_points li {
        position: relative;
        padding-left: 18px;
        color: rgba(0,0,0,.70);
    }

        .deliver-card_points li::before {
            content: "•";
            position: absolute;
            left: 0;
            top: 0;
            color: var(--main-color);
        }

/* ===============================
   IMAGE: behave like background but NOT absolute
   =============================== */
.deliver-panel {
    position: relative;
}

    /* image stays inside normal flow */
    .deliver-panel > img.deliver-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
        /* مهم: لا absolute */
        position: absolute;
        inset: 0;
        z-index: 0;
    }

    /* ensure existing content stays above image */
    .deliver-panel .panel-title,
    .deliver-panel .panel-content {
        z-index: 2;
    }

    /* ===============================
   TEXT SHADOW AREA ONLY
   =============================== */
    .deliver-panel .panel-content {
        background: rgba(0,0,0,.45);
        backdrop-filter: blur(6px);
        border-radius: 14px;
        box-shadow: 0 18px 35px rgba(0,0,0,.35);
        padding: 22px 26px;
        max-width: 420px;
    }

    /* title stays clean (no big box) */
    .deliver-panel .panel-title {
        color: #fff;
        text-shadow: 0 2px 8px rgba(0,0,0,.5);
    }

    /* text readability */
    .deliver-panel .panel-content p,
    .deliver-panel .panel-content li,
    .deliver-panel .panel-icon i {
        color: #fff;
        text-shadow: 0 2px 6px rgba(0,0,0,.45);
    }

    /* ===============================
   ACTIVE PANEL stronger text
   =============================== */
    .deliver-panel.active .panel-content {
        background: rgba(0,0,0,.55);
    }

/* Counter value pop */
.why-stat_value {
    display: inline-block;
    transform: translateY(0);
    transition: transform .35s ease;
}

.why-stat:hover .why-stat_value {
    transform: translateY(-2px);
}

.feature-block .feature-inner {
    background: #ffffff;
    border: 1px solid rgba(16,24,40,.10);
    border-radius: 16px;
    padding: 16px 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,.04);
    transition: transform .18s ease, box-shadow .18s ease;
}

    .feature-block .feature-inner:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 28px rgba(0,0,0,.07);
    }

.feature-number {
    display: inline-block;
    font-weight: 800;
    font-size: 12px;
    color: #6ac3ee;
    letter-spacing: .08em;
    margin-bottom: 6px;
}

.feature-inner h5 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 800;
    color: #0b1220;
}

.feature-inner p {
    margin: 0;
    color: #5b6473;
    font-size: 13.5px;
    line-height: 1.6;
}
/* ===== Container ===== */
.deliver-accordion {
    display: flex;
    gap: 12px;
    height: 610px;
    overflow: hidden;
}

/* ===== Panels ===== */
.deliver-panel {
    position: relative;
    flex: 0 0 90px;
    border-radius: 16px;
    background: linear-gradient(180deg, #f7fafc, #eef3f8);
    cursor: pointer;
    transition: flex 0.9s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}

    /* Expanded */
    .deliver-panel.active {
        flex: 1;
        background: linear-gradient(180deg, #ffffff, #f3f7fb);
    }

/* ===== Vertical title ===== */
.panel-title {
    position: absolute;
    bottom: 24px;
    left: 40px;
    transform: rotate(-90deg);
    transform-origin: left bottom;
    white-space: nowrap;
    font-weight: 600;
    font-size: 22px;
    color: #111827;
    transition: opacity .4s ease;
}

.deliver-panel.active .panel-title {
    opacity: 0;
}

/* ===== Content ===== */
.panel-content {
    position: absolute;
    inset: 24px;
    opacity: 0;
    transform: translateY(10px);
    transition: all .5s ease;
}

.deliver-panel.active .panel-content {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Content styling ===== */
.panel-icon {
    font-size: 28px;
    color: #2563eb;
    display: inline-block;
    margin-bottom: 14px;
}

.panel-content p {
    font-size: 15px;
    color: #374151;
    line-height: 1.6;
    margin-bottom: 14px;
}

.panel-content ul {
    padding-left: 18px;
    margin: 0;
}

.panel-content li {
    font-size: 14px;
    color: #1f2937;
    margin-bottom: 6px;
}

/* ===== Mobile fallback ===== */
@media (max-width: 992px) {
    .deliver-accordion {
        flex-direction: column;
        height: auto;
    }

    .deliver-panel,
    .deliver-panel.active {
        flex: unset;
        min-height: 200px;
    }

    .panel-title {
        position: static;
        transform: none;
        opacity: 1 !important;
        padding: 16px;
        font-size: 18px;
    }

    .panel-content {
        position: static;
        opacity: 1;
        transform: none;
        padding: 0 16px 16px;
    }
}

.panel-content h3 {
    color: #fff;
}
/* =====================================================
   RTL FIX — Deliver Accordion (Arabic)
   Fix collapsed panels orientation & alignment
===================================================== */
[dir="rtl"] .deliver-accordion {
    direction: rtl;
}

/* ---------- COLLAPSED PANELS (RTL) ---------- */
[dir="rtl"] .deliver-panel:not(.active) .panel-title {
    left: auto;
    right: 40px; /* anchor to the right */
    bottom: 16px;
    transform-origin: right bottom;
    transform: rotate(90deg); /* flip rotation for RTL */

    text-align: right;
    letter-spacing: 0;
}

/* ---------- ACTIVE PANEL CONTENT (RTL) ---------- */
[dir="rtl"] .deliver-panel.active .panel-content {
    left: auto;
    right: 16px; /* content opens from right */
    text-align: right;
}

/* ---------- ICON ALIGNMENT ---------- */
[dir="rtl"] .panel-icon {
    margin-left: 8px;
    margin-right: 0;
}

/* ---------- LIST FIX ---------- */
[dir="rtl"] .panel-content ul {
    padding-left: 0;
    padding-right: 18px;
}

[dir="rtl"] .panel-content li {
    text-align: right;
}

/* ---------- MOBILE (STACKED) ---------- */
@media (max-width: 768px) {

    [dir="rtl"] .deliver-panel:not(.active) .panel-title {
        right: 50%;
        left: auto;
        transform: translateX(50%) rotate(0deg);
        text-align: center;
    }

    [dir="rtl"] .deliver-panel.active .panel-content {
        right: auto;
        left: auto;
        text-align: right;
    }
}
/* 1) section stays full width but WITHOUT background */
.about-why {
    position: relative;
    background: transparent !important;
    isolation: isolate; /* ensures ::before stays behind content */
}

    /* 2) draw SAME background but limited to container width */
    .about-why::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        /* match your container width */
        width: min(1270px, calc(100% - 30px)); /* 30px = 15px + 15px side gutters */
        /* SAME background you already had (copy/paste yours هنا) */
        background: linear-gradient(180deg, #f6f7f9 0%, #ffffff 70%);
        border-radius: 60px;
        z-index: -1;
    }

/* RTL support via class only (no dir attr) */
/* ---------------------------------------------------------
   2) DO NOT APPLY RTL to counters (+10 / +50 / +9)
--------------------------------------------------------- */
[dir="rtl"] .why-stat_value {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

/* Label stays Arabic */


/* Keep stats row order SAME as English */
[dir="rtl"] .about-why_stats {
    direction: ltr;
    flex-direction: row;
}

/* ---------------------------------------------------------
   3) EVERYTHING ELSE remains RTL (cards, lists, features)
--------------------------------------------------------- */
[dir="rtl"] .about-why_grid,
[dir="rtl"] .about-why_card,
[dir="rtl"] .about-why_text,
[dir="rtl"] .about-why_points,
[dir="rtl"] .about-why_features {
    direction: rtl;
    text-align: right;
}

    /* Bullet dots on RIGHT */
    [dir="rtl"] .about-why_points li {
        padding-right: 18px;
        padding-left: 0;
        position: relative;
    }

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

/* Responsive */
@media (max-width: 992px) {
    .about-why_title {
        font-size: 32px;
    }

    .about-why_grid {
        grid-template-columns: 1fr;
    }

    .about-why_features {
        grid-template-columns: 1fr;
    }

    .about-why_stats {
        grid-template-columns: 1fr;
    }
}
/* =====================================================
   WHAT WE DELIVER – RTL (FINAL)
   Applies ONLY to:
   <section class="deliver-one" dir="rtl">
===================================================== */

.deliver-one[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

    /* ================= HEADER ================= */

    /* Title + subtitle */
    .deliver-one[dir="rtl"] .deliver-one_head {
        text-align: right;
    }

    .deliver-one[dir="rtl"] .deliver-one_title,
    .deliver-one[dir="rtl"] .deliver-one_subtitle {
        text-align: right;
    }

    /* ================= GRID ================= */

    /* Ensure RTL flow for cards */
    .deliver-one[dir="rtl"] .deliver-one_grid {
        direction: rtl;
    }

    /* ================= CARD ================= */

    .deliver-one[dir="rtl"] .deliver-card {
        text-align: right;
    }

    /* Card head: icon on RIGHT, title next to it */


    /* Card title */
    .deliver-one[dir="rtl"] .deliver-card_title {
        text-align: right;
    }

    /* Card paragraph */
    .deliver-one[dir="rtl"] .deliver-card_text {
        text-align: right;
    }

    /* ================= BULLET LIST ================= */

    /* Reset default padding */
    .deliver-one[dir="rtl"] .deliver-card_points {
        padding: 0;
        margin: 0;
        list-style: none;
    }

        /* Bullet items */
        .deliver-one[dir="rtl"] .deliver-card_points li {
            position: relative;
            padding-right: 18px;
            padding-left: 0;
            text-align: right;
        }

            /* Bullet dot on RIGHT */
            .deliver-one[dir="rtl"] .deliver-card_points li::before {
                content: "•";
                position: absolute;
                right: 0;
                top: 0;
                color: var(--main-color);
            }


/*===============================RTL Index=============================*/
/* =========================
   RTL – About One section only
   ==========================*/
/* RTL: force sidebar to be on the RIGHT (without changing LTR) */
.rtl .about-sidebar {
    left: auto;
    right: 0;
    /* hidden state: pushed OUT to the right */
    transform: translateX(100%) !important;
    transition: transform .45s ease;
}

    /* RTL: open */
    .rtl .about-sidebar.active {
        transform: translateX(0) !important;
    }

    /* RTL: overlay behind the sidebar content (so close button works) */
    .rtl .about-sidebar .gradient-layer {
        z-index: 1;
        background-color: var(--black-color);
    }

    /* RTL: sidebar content above overlay */
    .rtl .about-sidebar .sidebar-inner {
        position: relative;
        z-index: 2;
    }
    /* RTL: mirror gradient expansion direction */
    .rtl .about-sidebar .gradient-layer {
        left: auto;
        right: 0%;
    }

    /* RTL: active state – expand gradient to the LEFT */
    .rtl .about-sidebar.active .gradient-layer {
        width: 500%;
        right: 100%;
        left: auto;
    }


/* Put text on the right, image on the left */
.rtl .about-one > .auto-container > .inner-container > .row {
    flex-direction: row-reverse;
}

/* Text alignment for titles & paragraph */
.rtl .about-one .sec-title_title,
.rtl .about-one .sec-title_heading,
.rtl .about-one .about-one_text {
    text-align: right;
}

/* Big “15+ سنة” number to the right */
.rtl .about-one_years {
    text-align: right;
}

/* Main image container – allow second image to overlap */
.rtl .about-one_image-outer {
    position: relative;
    overflow: visible;
}

    /* Make the flex wrapper the positioning context for the small image */
    .rtl .about-one_image-outer + .d-flex {
        position: relative;
    }

/* First (big) image */
.rtl .about-one_image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 32px;
}

/* Second (small) image – visible and overlapping the big one */
.rtl .about-one_image-two {
    position: absolute;
    bottom: -60px; /* adjust as needed */
    left: 40px; /* since the image column is on the left in RTL */
    width: 55%;
    max-width: 380px;
    border-radius: 32px;
    overflow: hidden;
    z-index: 2;
}

    .rtl .about-one_image-two img {
        display: block;
        width: 100%;
        height: auto;
    }

/* Mobile: stack everything and remove overlap */
@media (max-width: 991.98px) {
    .rtl .about-one > .auto-container > .inner-container > .row {
        flex-direction: column-reverse;
    }

    .rtl .about-one_image-outer {
        overflow: visible;
    }

        .rtl .about-one_image-outer + .d-flex {
            position: static;
        }

    .rtl .about-one_image-two {
        position: relative;
        bottom: auto;
        left: auto;
        width: 100%;
        max-width: 100%;
        margin-top: 20px;
    }

    .rtl .about-one_years {
        text-align: center;
    }

    .rtl .about-one .sec-title_title,
    .rtl .about-one .sec-title_heading,
    .rtl .about-one .about-one_text {
        text-align: center;
    }
}

.rtl p,
.rtl li,
.rtl .service-detail_text,
.rtl .service-detail_list li,
.rtl .service-detail_list-two li {
    direction: rtl;
    unicode-bidi: bidi-override;
}

html[lang="ar"] .step-block_one-number {
    direction: rtl;
    unicode-bidi: isolate;
    text-align: left;
    display: inline-flex;
    gap: 4px;
}

html[lang="ar"] .step-block_one-heading {
    direction: rtl;
    unicode-bidi: isolate;
    text-align: right;
}

html[lang="ar"] .step-block_one-text {
    direction: rtl;
    unicode-bidi: isolate;
    text-align: right;
}



/* RTL – تبويبات أعلى الصفحة فقط */
.rtl .top-tabs {
    display: flex; /* نتحكم بالترتيب */
    flex-direction: row-reverse; /* نخلي أول عنصر في DOM يظهر يمين */
}

    /* نلغي الفلوت القديم ونرجّع المسافة بين التابات من الجهة الصحيحة */
    .rtl .top-tabs .tab-btn {
        float: none !important; /* إلغاء float:left للقالب */
        margin-right: 0 !important; /* نشيل المارجن القديم */
        margin-left: 30px; /* نفس القيمة اللي كانت margin-right بالأصل */
    }

        /* آخر تاب (اللي يصير على اليسار) بلا فراغ زائد */
        .rtl .top-tabs .tab-btn:last-child {
            margin-left: 0;
        }
/* RTL FIX FOR FAQ ACCORDION */
.rtl .accordion-button {
    direction: rtl !important;
    text-align: right !important;
    justify-content: flex-start !important;
}

    .rtl .accordion-button::after {
        margin-left: 0 !important;
        margin-right: auto !important;
        transform: rotate(180deg);
    }

.rtl .accordion-item {
    direction: rtl !important;
}

.rtl .about-two .row {
    flex-direction: row-reverse;
}

.rtl .about-two_title-column {
    text-align: right;
}

.rtl .about-two_title-outer {
    direction: rtl;
}

.rtl .about-two_image-column_outer {
    direction: rtl;
}

.rtl .about-two_text {
    text-align: right;
}

.rtl .about-two .row,
html[lang="ar"] .about-two .row {
    flex-direction: row; /* أو احذف السطر بالكامل */
}
/* خلي ترتيب العناصر كما هو في الـ DOM، بس حركها لليمين */
.rtl .page-title .bread-crumb {
    display: flex; /* مثل القالب الأصلي */
    flex-direction: row; /* تأكد إنها ليست row-reverse */
    justify-content: flex-end;
    direction: rtl; /* النص عربي من اليمين لليسار */
    gap: 8px; /* مسافة بسيطة بين العناصر (اختياري) */
}

    /* نمط العناصر داخل الـ breadcrumb */
    .rtl .page-title .bread-crumb li {
        display: inline-flex;
        align-items: center;
    }

        /* إضافة الفاصل (:) بين العناصر بطريقة نظيفة */


        /* أول عنصر بدون فاصل */
        .rtl .page-title .bread-crumb li:first-child::before {
            content: none;
        }

.rtl.page-title .bread-crumb {
    direction: rtl !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px; /* spacing between items */
}

html[lang="ar"] .page-title .bread-crumb {
    display: flex;
    justify-content: center; /* اجعلها في المنتصف */
    direction: rtl; /* ترتيب عربي صحيح */
}

    html[lang="ar"] .page-title .bread-crumb li {
        display: flex;
        align-items: center;
        font-size: 22px;
        font-weight: 500;
    }

html[dir="rtl"] .page-title .bread-crumb li {
    margin-right: 0;
    padding-right: 0;
    /*        margin-left: 15px;
        padding-left: 15px;*/
    text-transform: none; /* IMPORTANT: uppercase breaks Arabic */
}


html[lang="ar"] .page-title .bread-crumb li a {
    display: inline-block;
}


html[lang="ar"] .page-title .bread-crumb li:last-child::after {
    content: "";
}

html[lang="ar"] .page-title .bread-crumb li:not(:last-child)::after {
    content: " : ";
    position: static;
    margin-inline-start: 8px;
    margin-inline-end: 8px;
    line-height: 1.6;
}

.rtl.testimonial-one_talk {
    gap: 10px;
}

    /* نص عربي متصل مع حركة بسيطة للأعلى والأسفل */
    .rtl .testimonial-one_talk .talk-ar {
        display: inline-block;
        font-weight: 600;
        font-family: "Droid Arabic Kufi", "Cairo", sans-serif;
        animation: talkFloatAr 2s ease-in-out infinite;
    }
/* RTL: flip testimonial rating order */
.rtl .testimonial-block_one-rating {
    direction: rtl;
    text-align: right;
    justify-content: flex-end !important;
    display: flex !important;
    gap: 6px; /* optional: spacing */
}
/* Only for testimonial cards – safe for both EN & AR */
.testimonial-block_one-inner {
    display: flex;
    flex-direction: column;
}
    /* For RTL cards: move rating to bottom-left */
    .testimonial-block_one-inner[dir="rtl"] .testimonial-block_one-rating {
        align-self: flex-start; /* bottom-left in RTL card */
        text-align: left;
    }

.testimonial-two_rating {
    color: #fff;
}

.testimonial-two_button {
    margin-inline-start: auto;
}

.testimonial-two_title-button .theme-btn {
    border: 2px solid #fff; /* change color if needed */
    background: transparent; /* keeps it clean */
    border-radius: 50px; /* optional – keep if your buttons are rounded */
}

html[dir="rtl"] .testimonial-one_talk span .split-text,
html[dir="rtl"] .testimonial-one_talk span div {
    all: unset !important;
    display: inline !important;
}

@keyframes talkFloatAr {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0);
    }
}

.rtl .page-title .bread-crumb li {
    float: none !important;
}


/* RTL helper for section titles */
rtl .sec-title-rtl {
    direction: rtl;
    text-align: right;
}



/* أي زر داخل كونتينر RTL */
.rtl .btn-style-one .btn-wrap {
    float: right;
}

.rtl .close-search {
    left: 40px;
    right: auto;
}

html[lang="ar"] .title-anim *,
html[lang="ar"] .title-anim {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    direction: rtl !important;
    text-align: right !important;
}

.rtl .sec-title-rtl {
    direction: rtl;
    text-align: right;
}

/* === RTL: align about-two small title + dots to the right === */
/* نخلي الكونتينر كله يمين */
.page-wrapper.rtl .about-two_title-outer {
    text-align: right !important;
}

    /* عنوان "نظرة عامة على الشركة" يمين وفيه مساحة للنقاط */
    .page-wrapper.rtl .about-two_title-outer .sec-title_title.sec-title-rtl {
        display: inline-block !important;
        text-align: right !important;
        position: relative !important;
        padding-right: 10px !important; /* مساحة للنقاط على اليمين */
        padding-left: 0 !important;
        margin-right: 0 !important;
        float: none !important; /* مش ضروري نعمل float */
    }
/* Disable theme dot positioning in RTL */
.page-wrapper.rtl .sec-title_title .sec-title_dots {
    flex-direction: row-reverse;
}
/* العنوان الكبير تحتها يمين */
.page-wrapper.rtl .about-two_title-outer .about-two_title {
    text-align: right !important;
}
/* ONLY this RTL testimonial title */
.testimonial-two.rtl .sec-title .left-box .sec-title_title {
    position: relative;
    direction: rtl;
    padding-left: 60px; /* space for dots on the LEFT */
}
/* ONLY this section when it is RTL via dir="rtl" */
.about-three[dir="rtl"] .sec-title .sec-title_title {
    position: relative !important;
    direction: rtl !important;
    padding-left: 60px !important; /* reserve space for dots on LEFT */
}

    /* Put dots on the LEFT */
    .about-three[dir="rtl"] .sec-title .sec-title_title .sec-title_dots {
        position: absolute !important;
        left: 0 !important;
        right: auto !important;
        display: flex !important;
        gap: 6px !important;
        margin: 0 !important;
    }


/* force dots to the LEFT (RTL-safe) */
.testimonial-two.rtl .sec-title .left-box .sec-title_title .sec-title_dots {
    position: absolute;
    left: 0;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 6px;
    margin: 0;
}

    /* dot appearance (optional, no global impact) */
    .testimonial-two.rtl .sec-title .left-box .sec-title_title .sec-title_dots span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #6ac3ee;
    }

/* أي عنوان فيه sec-title-rtl في صفحة RTL نخليه يمين والنقاط على يمينه */
/* RTL title + dots (dots on the LEFT of title) */

/* dots styling */
.page-wrapper.rtl .sec-title_dots {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}

@media (max-width: 991px) {

    .about-three_content {
        position: relative;
    }

    .page-wrapper.rtl .about-three_content {
        padding-left: 0;
    }
}



.about-three_title-outer {
    position: relative;
}

@media (max-width: 991px) {

    /* Base mobile behavior */
    .about-three_experiance {
        position: relative; /* remove absolute only on mobile */
        float: left; /* default LTR */
        width: 100px;
        height: 260px;
        margin-right: 16px;
        margin-bottom: 12px;
        /* text wrapping */
        shape-outside: inset(0);
        -webkit-shape-outside: inset(0);
    }
}


@media (max-width: 991px) {

    .about-three_experiance {
        display: unset;
    }
}


.rtl .offer-one_color {
    right: -40px !important;
    width: 830px !important;
    height: 900px !important;
    left: unset !important;
}
/*.rtl .news-block_one-meta:before
{
       display: unset !important;
}*/
/* Make this component behave in RTL */
.rtl .news-block_one-meta {
    direction: rtl;
}

    .rtl .news-block_one-meta li {
        position: relative;
        /* move the spacing to the right side, remove LTR padding */
        padding-right: 2.6rem;
        padding-left: 0;
        text-align: right;
    }

        /* flip the absolutely positioned icon */
        .rtl .news-block_one-meta li .icon {
            right: 17px;
            left: auto;
        }

.cursor {
    display: none;
}

.cursor-follower {
    display: none;
}

.testimonial-block_two-rating span {
    position: relative;
    font-size: 22px;
    color: #FFD700;
    text-shadow: 0 1px 0 #b38700, 0 4px 10px rgba(216, 170, 0, 0.35);
}
/* Uniform logo container */
.testimonial-block_two-author_image {
    width: 110px !important;
    height: 110px !important;
    border-radius: 50%; /* same circle wrapper */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff; /* clean neutral background */
    padding: 10px; /* buffer for weird shapes */
    margin: 3px;
}


.shop-detail .inner-column img {
    border-radius: 50px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    border: 3px var(--main-color) solid;
}
/* Make every logo scale perfectly inside */
.testimonial-block_two-author_image img {
    width: 100%;
    /* height: 100%; */
    /* object-fit: contain; */ /* keeps full logo visible */
    /* object-position: center; */
    max-width: 75%;
    /* border-radius: 300px; */
    /* background-size: cover; */
}

.shop-detail_text {
    font-size: 19px;
}

.about-three {
    background-color: unset;
}

/* Views/Home/Index.cshtml ships this section empty and JsPages/HomeAbout.js fills it from a CMS
   page. Until that request lands - and permanently, if the page is unset or the call fails - the
   section still carries style.css's padding:25px 0 40px plus its own mt-3, so it held an invisible
   81px band between the work-areas and counter sections. That is the "excessive padding around
   about-three" being reported.

   :empty cannot be used: the Razor leaves a newline inside the tag, so the section has a whitespace
   text node and :empty never matches (verified in the browser). :not(:has(*)) keys off element
   children instead, so it collapses only a section that has genuinely nothing in it - never one the
   CMS has filled, and never a populated about-three on an inner page. */
.about-three:not(:has(*)) {
    display: none;
}

.slider-one_title {
    font-weight: unset;
}

.rtl .sec-title-rtl {
    direction: rtl;
    text-align: right;
}

.testimonial-block_two-text {
    margin-inline-end: 13px;
}

.page-title_bg-image:before {
    background-color: unset;
}

.page-title {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 252px 0px 25px;
}

    .page-title .bread-crumb {
        margin-top: 5px;
    }
/*=====================Footer Animation===================*/
/* ----------------------------------------------------------------------
   1) GIANT BACKGROUND TITLE (Footer Watermark)
---------------------------------------------------------------------- */
.footer-two_big-title {
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translateX(-50%);
    font-size: 320px;
    font-weight: 800;
    letter-spacing: 18px;
    color: rgba(255,255,255,0.03);
    white-space: nowrap;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

/* Keep footer content above giant title */
.rebuilt-footer .auto-container,
.footer-two_widgets,
.footer-two_bottom {
    position: relative;
    z-index: 10;
}

.footer-two,
.footer-two_bg,
.footer-two_shape-one,
.footer-two_shape-two,
.footer-two_shape-three {
    max-width: 100%;
    overflow-x: hidden;
}


/* ----------------------------------------------------------------------
   2) PRISMIC-STYLE ANIMATION (Single Fade Reveal)
---------------------------------------------------------------------- */
/* Container */
/*.prismic-style {
        display: inline-block;
        white-space: normal;*/ /* allow wrapping if needed */
/*}*/

/* Each word */
/*.prismic-style .word {
            display: inline-block;
            opacity: 0;
            transform: translateY(10px);
            animation: wordFadeUp 3s ease-in-out infinite;
            animation-delay: calc(var(--i) * 0.18s);*/ /* stagger by word index */
/*}*/

/* Smooth per-word animation */
/*@keyframes wordFadeUp {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }

        25% {
            opacity: 1;
            transform: translateY(0);
        }

        60% {
            opacity: 1;
            transform: translateY(0);
        }

        85% {
            opacity: 0;
            transform: translateY(-4px);
        }

        100% {
            opacity: 0;
            transform: translateY(10px);
        }
    }*/
/* ----------------------------------------------------------------------
   PRISMIC-STYLE WORD REVEAL ANIMATION
---------------------------------------------------------------------- */

/* -------------------------------------------------------
   PRISMIC-STYLE WORD REVEAL ANIMATION
------------------------------------------------------- */

.prismic-style {
    display: inline-block;
    white-space: normal;
}

    .prismic-style .word {
        display: inline-block;
        opacity: 0;
        transform: translateY(10px);
        animation: wordFadeUp 3s ease-in-out infinite;
        animation-delay: calc(var(--i) * 0.18s);
        color: var(--main-color) !important;
    }

@keyframes wordFadeUp {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    25% {
        opacity: 1;
        transform: translateY(0);
    }

    60% {
        opacity: 1;
        transform: translateY(0);
    }

    85% {
        opacity: 0;
        transform: translateY(-4px);
    }

    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* Text size + color */
.footer-style_three .footer-three_appointment.prismic-style {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--main-color) !important;
    margin: 14px 0 10px;
}

/* Mobile tuning */
@media (max-width: 991px) {
    .footer-style_three .footer-three_appointment.prismic-style {
        font-size: 24px;
    }
}

@media (max-width: 575px) {
    .footer-style_three .footer-three_appointment.prismic-style {
        font-size: 21px;
    }
}

/* Restore original map look */
.footer-style_three iframe {
    border: 0 !important;
    border-radius: 1px !important;
    box-shadow: none !important;
}

.footer-three_logo {
    position: relative;
    margin-bottom: 3px;
}
/* ===== Footer spacing consistency (NO height changes) ===== */

.footer-style_three .footer-three_widget {
    display: flex;
    flex-direction: column;
    gap: 12px; /* consistent internal spacing */
}

/* Titles */
.footer-style_three .footer-three_title,
.footer-style_three .footer-three_appointment-title {
    margin-bottom: 8px;
}

/* Text blocks */
.footer-style_three .footer-three_text,
.footer-style_three .footer-three_location-text,
.footer-style_three .footer-three_appointment-text {
    margin: 0;
    line-height: 1.7;
}

/* Logo + slogan */
.footer-style_three .footer-three_logo {
    margin-bottom: 6px;
}

.footer-style_three .footer-three_appointment.prismic-style {
    margin: 4px 0;
}

/* Social icons */
.footer-style_three .footer-three_socials {
    margin-top: 8px;
    display: flex;
    gap: 14px;
}

/* Company links */
.footer-style_three .footer-three_list {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .footer-style_three .footer-three_list li {
        margin-bottom: 8px;
    }

/* Map spacing */
.footer-style_three iframe {
    margin-top: 8px;
    border-radius: 12px;
}

/* Newsletter */
.footer-style_three .newsletter-box {
    margin-top: 8px;
}

    .footer-style_three .newsletter-box .form-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }

/* Bottom copyright */
.footer-style_three .footer-three_bottom {
    margin-top: 30px;
}

.rtl .footer-three_socials {
    display: flex;
    justify-content: flex-end;
    text-align: right;
    width: 100%;
}

/*.footer-style_three-bg {
    background-image: unset;
    background-color: var(--main-color);
   
}*/
/* Optional: freeze final state when you add .active */
/*.prismic-style.active .word {
        animation: none;
        opacity: 1;
        transform: translateY(0);
    }*/
/* ----------------------------------------------------------------------
   3) FUTURE FADE-UP REPEATING ANIMATION (Looping)
---------------------------------------------------------------------- */
/*.animate-future span {
        display: inline-block;
        opacity: 0;
        transform: translateY(10px);
        animation: futureFadeUp 2s ease-in-out infinite;
    }

    @keyframes futureFadeUp {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }

        25% {
            opacity: 1;
            transform: translateY(0);
        }

        50% {
            opacity: 1;
            transform: translateY(0);
        }

        60% {
            opacity: 0;
            transform: translateY(-8px);
        }

        100% {
            opacity: 0;
            transform: translateY(10px);
        }
    }*/
/* Automatic stagger using CSS variable from JS */
/*.animate-future span:nth-child(n) {
        animation-delay: calc(var(--i) * 0.08s);
    }*/
/* ----------------------------------------------------------------------
   4) OPTIONAL Floating Up-Down Animation (Not applied by default)
---------------------------------------------------------------------- */
/*@keyframes upDown {
        0% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-12px);
        }

        100% {
            transform: translateY(0);
        }
    }*/
/*=====================Tabs Styles===================*/
:root {
    --brand: #6ac3ee;
}
/* RTL pills – start from the RIGHT with item 1 visible */

/* Top Tabs */
.nav-tabs .nav-link {
    color: #444;
    font-weight: 600;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 20px;
    font-size: 18px
}

    .nav-tabs .nav-link.active {
        color: rgb(255, 255, 255) !important;
        border-bottom: 3px solid var(--brand);
        background: var(--brand) !important;
    }

    .nav-tabs .nav-link:hover {
        color: var(--brand);
        border-bottom: 3px solid rgba(106, 195, 238, 0.4);
    }

/* Pills */
.nav-pills .nav-link {
    border-radius: 6px;
    padding: 10px 18px;
    background: #f0f4f8;
    color: #333;
    font-weight: 600;
}

    .nav-pills .nav-link.active {
        background: var(--brand) !important;
        color: #fff !important;
    }

    .nav-pills .nav-link:hover {
        background: rgba(106, 195, 238, 0.25);
    }

.nav-tabs .nav-link {
    font-weight: 600;
    color: #333;
    border: none;
    border-bottom: 3px solid transparent;
}

    .nav-tabs .nav-link:hover {
        color: #6ac3ee;
        border-bottom: 3px solid rgba(106,195,238,0.4);
    }

.accordion-box.style-two .block {
    background: rgb(242, 242, 242);
}
/* Swap image + text only in RTL sections that have aml-row-swap */
.rtl .aml-row-swap {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse; /* flip the two columns */
}

/*================Request Demo===============*/
.contact-info_block-inner p {
    color: var(--main-color);
}

.accordion .acc-content .text {
    font-weight: 700; /* Bold */
}

.demo-request-fixed {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 99999;
    border-radius: 40px;
    padding: 12px 26px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.demo-request-fixed {
    left: 0; /* ⬅ move to left */
    right: auto;
}

    .demo-request-fixed:hover {
/*        transform: translateY(-3px);*/
        box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    }

.demo-request-fixed-ar {
    position: fixed;
    bottom: 25px;
    left: 25px; /* Arabic UI moves button to LEFT side */
    z-index: 99999;
    border-radius: 40px;
    padding: 12px 28px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    direction: rtl;
    font-family: "Tajawal", "Cairo", sans-serif; /* If Arabic fonts are included */
}

    .demo-request-fixed-ar:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    }

html[lang="ar"] .contact-info_block:last-child p,
html[lang="ar"] .contact-info_block:last-child p a {
    /* direction: ltr !important;*/
    unicode-bidi: bidi-override !important;
    /* text-align: left !important;*/
    display: inline-block;
}

.rtl .counter-block_two-inner {
    text-align: center !important
}

.rtl .about-three_experiance {
    display: unset !important;
}

    .rtl .about-three_experiance span {
        transform: rotate(90deg);
        display: initial;
        width: 135px;
        text-align: left;
        font-weight: inherit;
        top: 8px;
    }

.rtl .news-block_one-arrow {
    opacity: 0;
}

html[lang="ar"] h1 {
}

.rtl .about-three_title-column .sec-title_title {
    justify-content: unset;
}

.rtl .team-one_one .content-box .title {
    font-weight: unset;
}

.sec-title_heading {
    font-size: 50px;
}

.shop-detail.aml-program-detail .shop-detail_title {
    font-size: 33px;
    line-height: 1.3;
}

.rtl .sec-title_title {
    font-weight: unset;
}

.rtl .about-three_title {
    font-weight: unset;
}

/* HomeTestimonials.js adds .is-dynamic when it replaces the authored partner logos with the
   people actually quoted in the carousel. The default `.testimonial-two_authors ul li img` rule
   above (style.css) uses `object-fit:contain` because those are brand wordmarks that must not be
   cropped; a portrait should instead fill its chip, which is what `cover` is for here. Still
   direction-agnostic - Arabic needs no counterpart. */
.testimonial-two_authors ul.is-dynamic li img {
    object-fit: contain;
    object-position: center;
}

.testimonial-two_title {
    color: #fff;
}

.rtl .slider-one_options .button a {
    font-weight: unset;
}

.rtl .slider-one_reviews span {
    font-weight: 400;
}

/* "10+" and the label under it drift apart in Arabic. Droid Arabic Kufi has a very
   tall ascent/descent, so at 26px the number's inline box measures 49px against
   English's 33px, and the label's 30px against 20px - the glyphs sit small and low
   inside oversized boxes, which reads as a gap even though the line advance is the
   same 37px in both languages. line-height alone cannot fix it: the font's content
   area already exceeds the specified leading, so setting it on the inline span
   changed nothing (verified - the box stayed 49px).

   Making the label its own block removes the inline baseline slop and lets an
   explicit line-height actually take effect, pulling the advance to 32px and the
   block from 52px to 44px, so the pair reads as one unit.
   The direction half of this panel's RTL fix lives in app/direction.css block 9. */
.rtl .slider-one_reviews span {
    display: block;
    line-height: 1.25;
}

/* Arabic runs the whole page 10% smaller - html goes 16px -> 14.4px and body
   17px -> 15.3px - because Droid Arabic Kufi has a large body. That is right for
   text and wrong for the Font Awesome brand glyphs in the slider panel: they
   inherit the same scale, so the logo circles shrank from 39px tall in English to
   37px in Arabic and read as visibly smaller.

   Only above 991px. At or below that width `.slider-one_authors i` (line 324) already
   pins the glyphs to an absolute 20px for BOTH languages, so Arabic matches English
   there on its own - and an unconditional rule here would out-specify that 20px and
   leave Arabic stuck at 17px while English grew, i.e. the same bug mirrored.

   Above 991px nothing sets a font-size on this element - the value is purely
   inherited - so restating English's computed 17px is enough and needs no !important.
   The direction half of this panel's RTL fix lives in app/direction.css block 9. */
@media (min-width: 992px) {
    .rtl .slider-one_authors ul li i {
        font-size: 17px;
    }
}

.rtl .btn-style-one {
    font-weight: unset;
}

.rtl .sec-title_title {
    direction: rtl;
    justify-content: flex-end; /* push whole block to the right */
}

.rtl .sec-title_title {
    flex-direction: row-reverse; /* dots first, then text */
}

.rtl .footer-two_appointment {
    font-weight: unset;
}
/*.rtl .accordion-box .block .acc-btn{
    font-weight:unset;
}*/
.rtl .price-block_one-btn {
    font-weight: unset;
}

.rtl .pricing-tabs .tab-buttons .tab-btn {
    font-weight: unset;
}

.rtl .nav-tabs .nav-link {
    font-weight: 400 !important;
}

.rtl .news-block_two-meta li {
    font-weight: unset;
}

.rtl .page-title p {
    color: #fff;
}

.rtl .main-header .main-menu .navigation > li > ul > li > a {
    font-weight: unset;
}

.rtl .step-award_subtitle {
    font-weight: unset;
}

.rtl .counter-block_two-text {
    font-weight: unset;
}

.rtl .testimonial-one_talk {
    font-weight: unset;
}

.btn-wrap .text-one:lang(ar), .btn-wrap .text-two:lang(ar) {
    font-weight: 400 !important;
    font-family: "Droid Arabic Kufi"
}
/* Arabic title: text right, dots on the RIGHT of the title */
[dir="rtl"] .sec-title_title {
    display: inline-flex;
    align-items: center;
    direction: rtl;
    text-align: right;
}

    /* dots on the RIGHT side of the title */
    [dir="rtl"] .sec-title_title .sec-title_dots {
        order: 1; /* force dots after text (right side in RTL) */
        margin-right: 12px; /* space between text and dots */
        margin-left: 0;
    }

pb-100 {
    padding-bottom: 100px;
}

.sec-title_heading {
    color: var(--ft-dark)
}

/*==============Arabic Anti Money Laundering=======================*/
/* RTL row: اجعل اتجاه المحتوى يمين + امنع تأثير floats القديمة */
.aml-rtl-row {
    direction: rtl;
    text-align: right;
}

    /* مهم: بعض التمبلتات تستخدم float + clearfix -> نعالجها */
    .aml-rtl-row > [class*="col-"] {
        float: none !important; /* لو التمبلت عامل float */
    }

/* خلّي البووتستراب يمسك التخطيط كـ flex بشكل مضمون */
@media (min-width: 992px) {
    .aml-rtl-row {
        display: flex;
        justify-content: flex-end; /* ادفع كل الأعمدة لليمين */
        align-items: flex-start;
        gap: 24px; /* مسافة لطيفة بين الصورة والنص */
    }
}

/* النص داخل inner-column */
.aml-rtl-text,
.aml-rtl-text * {
    text-align: right !important;
}

/* إصلاح padding/margins اللي بتخلي المحتوى يبين مش يمين */
[dir="rtl"] .inner-column {
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* لو في عناوين/فقرات عليها max-width أو محاذاة */
[dir="rtl"] .shop-detail_title,
[dir="rtl"] .shop-detail_text,
[dir="rtl"] .service-detail_subtitle {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/*===========RTL Menu fix================*/
/* ================= RTL MENU FIX ================= */
.rtl .main-header .main-menu .navigation > li.dropdown > a {
    padding-left: 20px; /* مساحة للسهم */
    padding-right: 0;
}

    .rtl .main-header .main-menu .navigation > li.dropdown > a::after {
        right: auto;
        left: 0; /* السهم بعد النص */
    }
/* ================= FINAL: Mobile Toggler + Slider + Services (CSS-only, no HTML) ================= */
@media (max-width: 575.98px) {

    /* ---------- HEADER / TOGGLER ---------- */
    .main-header .header-lower,
    .main-header .inner-container {
        height: 64px !important;
        display: flex !important;
        align-items: center !important;
    }

    .main-header .logo-box,
    .main-header .outer-box {
        display: flex !important;
        align-items: center !important;
    }

    .main-header .mobile-nav-toggler {
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: translateY(-6px) !important; /* stable “up” without fighting top/margins */
    }

        .main-header .mobile-nav-toggler span {
            line-height: 1 !important;
        }

    /* ---------- SLIDER SECTION BOUNDARY (prevents “dropping” into white page) ---------- */
    .slider-one {
        position: relative !important; /* anchor for absolute panel */
        overflow: hidden !important; /* stops out-of-bounds */
        min-height: 100vh !important; /* guarantees enough canvas on small phones */
    }

        /* Make the swiper itself fill the section height so the background is not cut */
        .slider-one .main-slider,
        .slider-one .swiper-wrapper,
        .slider-one .swiper-slide {
            height: 100vh !important;
            min-height: 100vh !important;
        }

    /* ---------- HERO: desktop-aligned, scaled ---------- */
    .slider-one_content {
        text-align: left !important;
    }

    /* Reserve space at the bottom for the services panel so it NEVER blocks content */
    .slider-one_content-inner {
        padding: 120px 20px 190px !important; /* <-- reserved space */
    }

    .slider-one_title {
        font-size: 12px !important;
    }

    .slider-one_heading {
        font-size: 26px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
    }

    .slider-one_button {
        justify-content: flex-start !important;
    }

    /* ---------- SERVICES PANEL: edge-to-edge INSIDE the slider section ---------- */
    .slider-one_options {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 12px !important; /* tighter to fit */
        border-radius: 20px 20px 0 0 !important; /* touches edges cleanly */

        background: #fff !important;
        box-shadow: 0 -10px 28px rgba(0,0,0,0.16) !important;
        transform: none !important;
        z-index: 50 !important;
    }

        /* Remove the extra gray “cap” layer (pseudo overlays) */
        .slider-one_options::before,
        .slider-one_options::after,
        .slider-one_authors::before,
        .slider-one_authors::after {
            content: none !important;
            display: none !important;
        }

    /* ---------- SERVICES ROW: icons + 10+ aligned (tighter gaps allowed) ---------- */
    .slider-one_authors {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    .slider-one_brands {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important; /* tighter spacing */
        flex-wrap: nowrap !important;
        min-width: 0 !important;
    }

        .slider-one_brands li {
            width: 34px !important;
            height: 34px !important;
            flex: 0 0 34px !important;
        }

    .slider-one_reviews {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #4bb6ff !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/*============RTL About experience fix responsive==========*/

@media (max-width: 991px) {

    .rtl.about-three_experiance {
        position: relative; /* ليس absolute */
        float: right; /* RTL */
        margin-left: 16px;
        margin-bottom: 10px;
        width: 100px;
        height: 260px;
        shape-outside: inset(0);
        -webkit-shape-outside: inset(0);
    }
}
/*=====================Mobile Menu fix===================*/
.mobile-menu .navigation li.lang-switch-item a {
    display: block;
    padding: 14px 25px;
    font-size: 14px;
    font-weight: 400;
    color: #111;
    border-top: 1px solid #eee;
}

body.rtl .mobile-menu .navigation li.lang-switch-item a {
    text-align: right;
}

body:not(.rtl) .mobile-menu .navigation li.lang-switch-item a {
    text-align: left;
}
/*=====================Contact Fix========================*/
.contact-two {
    padding: 120px 0px 40px;
}

.contact-info_box h3 {
    line-height: 47px;
}
/*===========Team Page=======================*/
.team-three {
    margin-top: 120px;
    margin-bottom: 120px;
}

.team-block_three-image {
    background-image: unset;
    background-color: var(--main-color);
}

.team-block_three-socials a:hover {
    background-image: unset;
    background-color: #4fb9ff;
    color: #777;
}

.team-block_three-socials,
.team-block_three-socials a,
.team-block_three-socials i,
.team-block_three-socials span,
.team-block_three-socials svg,
.team-block_three-socials svg path {
    color: #777 !important;
    fill: #777 !important; /* for SVG */
    stroke: #777 !important; /* for SVG */
}

/* Center ONLY this one block */
#team-sec-title {
    width: 100%;
    text-align: center !important;
}

    /* Center the dots + text row */
    #team-sec-title .sec-title_title {
        width: 100%;
        display: flex !important;
        align-items: center;
        justify-content: center !important;
        gap: 12px;
        text-align: center !important;
    }

    /* Dots */
    #team-sec-title .sec-title_dots {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin: 0 !important;
    }

    /* Text */
    #team-sec-title .sec-title_text {
        display: inline-block;
        white-space: nowrap;
    }

    /* Center the H2 under it */
    #team-sec-title .sec-title_heading {
        width: 100%;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
/* Team image: remove any tint/filter/overlay */
.team-block_three-image {
    position: relative !important;
    border-radius: 50% !important;
    overflow: visible !important; /* IMPORTANT: ring sits outside image crop */
    background: transparent !important;
}

    /* Gradient outer ring */
    .team-block_three-image::before {
        content: "" !important;
        position: absolute !important;
        inset: -3px !important; /* ring outside the image */
        border-radius: 50% !important;
        background: var(--main-color) !important;
        z-index: 1 !important;
    }

    /* White spacer ring */
    .team-block_three-image::after {
        content: "" !important;
        position: absolute !important;
        inset: -2px !important; /* slightly inside the gradient ring */
        border-radius: 50% !important;
        background: #fff !important;
        z-index: 2 !important;
    }

    /* The image itself (cropped circle) */
    .team-block_three-image img {
        position: relative !important;
        z-index: 3 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 50% !important;
        filter: none !important;
        mix-blend-mode: normal !important;
        opacity: 1 !important;
        background: transparent !important;
    }

/* Disable template overlay layer completely */
.team-block_three-layer {
    display: none !important;
}



/*=============Team Details=====================*/
.default-bar.progress-line {
    width: 0;
    transition: width 1.2s ease-in-out;
}

.team-detail_image {
    border: 4px solid var(--main-color);
}

html[lang="ar"] .value-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    /* 🔑 هذا هو المفتاح */
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.rtl .team-detail_info li span {
    font-weight: unset;
}

.service-btn {
direction: ltr;
}

/* ============================================================================
   News cards: publisher meta spacing + uniform image sizing
   ----------------------------------------------------------------------------
   Both problems are absences rather than bad values: nothing in style.css ever
   targeted the user icon inside .news-block_one-author, and nothing constrained
   the card image box, so it simply took whatever ratio the upload had.
   ========================================================================== */

/* The icon and the publisher name were rendered flush against each other because
   no rule put anything between them. margin-inline-end is used rather than
   margin-right so the gap lands on the correct side in Arabic without an .rtl
   counterpart rule. */
.news-block_one-author .icon,
.blog-detail_meta .icon {
    margin-inline-end: 8px;
}

/* Uploads arrive at whatever dimensions the author had, so cards in the same row
   were different heights and the images were cropped inconsistently. Fixing the
   ratio on the box and letting the image cover it makes every card identical
   regardless of the source, and object-position keeps the subject centred.
   cover (not fill) is what prevents distortion.

   .news-block_one-image holds TWO stacked images - the template's hover
   cross-fade - so both are sized here, otherwise only the top one would match. */
.news-block_one-image {
    aspect-ratio: 16 / 9;
/*    background-color: var(--ft-light-gray, #f4f7fb);*/
}

/* `cover`, so the picture fills the 16/9 frame edge to edge.

   This was `contain` for a while, to show a whole upload rather than crop it. The
   neutral backdrop that made the leftover strip read as part of the card was later
   commented out (above), which left the picture floating in a transparent box: the
   frame stayed 16/9 while the photo shrank inside it, so the card no longer looked
   like an image card and the date badge - anchored to the frame - sat on empty
   space under the photo instead of on it. That is the "badge outside the image"
   report.

   Cover removes the variable entirely: the frame is always full, so the badge is
   always on the picture whatever ratio an editor uploads. It crops rather than
   letterboxes - the trade-off that was deliberately avoided before - so it is
   called out in the task report rather than buried here. Neither value distorts;
   only `fill` would.

   Both images are sized here. .news-block_one-image holds two: an <img> inside
   the <a> (style.css:2058 pins it inset:0 at opacity:0 as the hover layer) and a
   bare <img> that is the visible one (style.css:2080, :nth-child(2)). Sizing
   only one would make them disagree mid cross-fade. */
.news-block_one-image img,
.news-block_one-image img:first-child {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Same treatment on the detail page hero, so a story's image is framed the same
   way in the card and on the page it opens. */
.blog-detail_image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
/*    background-color: var(--ft-light-gray, #f4f7fb);*/
}

.blog-detail_image img,
.blog-detail_image img:first-child {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}


.marg-space {
    margin-top: 4.5rem !important;
}
/* ============================================================================
   NEWS CARD DATE BADGE
   ----------------------------------------------------------------------------
   A small navy pill in the bottom-start corner of the card image.

   The element keeps the template's own names - .news-block_one-date_outer wrapping
   .news-block_one-date - but it now lives INSIDE .news-block_one-image rather than
   as a sibling of it. style.css draws those classes as a 32px gradient lozenge with
   a 5px white outline and two decorative PNG wings (shape-3/shape-4), pinned at a
   physical `left:60px` that never mirrored for Arabic. Everything below overrides
   that, and the two ::before/::after wings are switched off outright.

   Scoped under .news-block_one-image, so it is the descendant rules that win over
   style.css without needing !important, and the old presentation still applies
   anywhere else those classes might be used.

   .news-block_one-image already carries position:relative, the 16/9 frame and
   overflow:hidden, so the pill is clipped to the card's rounded corner and cannot
   escape the image. Being absolutely positioned it adds no height, so the title and
   publisher below are untouched.
   ============================================================================ */
.news-block_one-image .news-block_one-date_outer {
    position: absolute;
    /* Welded to the corner, not floated near it: any inset here is what made the
       badge read as a separate pill sitting on the picture. */
    inset-block-end: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    top: auto;
    z-index: 3; /* over both stacked images - the hover layer sits at z-index 1 */
    max-width: 100%;
    display: block;
}

    /* The template's decorative wings belong to the big lozenge, not to a pill. */
    .news-block_one-image .news-block_one-date_outer::before,
    .news-block_one-image .news-block_one-date_outer::after {
        content: none;
    }

.news-block_one-image .news-block_one-date {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    max-width: 100%;
    /* Extra padding on the attaching side: .news-block_one-image is border-radius:30px
       with overflow:hidden, so its corner curve clips the badge's bottom-start corner.
       That clip is wanted - it is what makes the tab follow the card's corner instead
       of poking out of it - but the icon has to sit clear of the curve or it gets
       sliced. Measured, not guessed: see the task report. */
    padding: 11px 50px 14px 57px;
    /* A corner tab: square where it meets the two image edges, rounded only on the
       corner facing into the picture. The logical longhands mirror on their own, so
       Arabic attaches bottom-right with the top-left rounded and needs no
       [dir="rtl"] override. */
    border-start-start-radius: 0;
    border-start-end-radius: 10px;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    background-color: var(--main-color);
    background-image: none;
    outline: none;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
}

    .news-block_one-image .news-block_one-date:hover,
    .news-block_one-image .news-block_one-date:focus-visible {
        background-color: var(--ft-deep-navy, #0e1735);
        color: #fff;
    }

    .news-block_one-image .news-block_one-date_icon {
        flex: 0 0 auto;
        font-size: 21px;
        line-height: 1;
        opacity: 0.9;
    }

    /* A date is its own run: without this the year can jump to the wrong end of an
       Arabic month name, since the digits are neutral to the bidi algorithm. */
    .news-block_one-image .news-block_one-date_text {
        font-size: inherit;
        unicode-bidi: isolate;
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 575.98px) {
    .news-block_one-image .news-block_one-date {
        gap: 5px;
        padding: 5px 10px 5px 16px;
        font-size: 11px;
    }
}

/* ============================================================================
   BLOG DETAIL SIDEBAR — recent-post date badge
   ----------------------------------------------------------------------------
   BlogDetail.js's recent-post list (.sidebar-widget.post-widget .post .thumb)
   now emits the exact same badge markup as the Blog list cards
   (buildNewsDateBadgeHtml in ClsCmsRenderHelpers.js - one date renderer, not
   two that can drift apart again). The positioning/shape rules above are
   scoped to .news-block_one-image, sized for a full-width card image, so they
   are repeated here scoped to .post-widget .thumb instead, at the sidebar's
   own compact scale. Same corner-tab shape and color language; only the
   numbers shrink for the smaller thumbnail. Logical properties, so Arabic
   mirrors with no extra rule. */
.post-widget .thumb .news-block_one-date_outer {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    top: auto;
    z-index: 2;
    max-width: 100%;
    display: block;
}

    .post-widget .thumb .news-block_one-date_outer::before,
    .post-widget .thumb .news-block_one-date_outer::after {
        content: none;
    }

.post-widget .thumb .news-block_one-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 11px 50px 14px 57px;
    border-start-start-radius: 0;
    border-start-end-radius: 8px;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    background-color: var(--main-color);
    background-image: none;
    outline: none;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
}

    .post-widget .thumb .news-block_one-date_icon {
        flex: 0 0 auto;
        font-size: 11px;
        line-height: 1;
        opacity: 0.9;
    }

    .post-widget .thumb .news-block_one-date_text {
        font-size: inherit;
        unicode-bidi: isolate;
        overflow: hidden;
        text-overflow: ellipsis;
    }


/* ============================================================
   TEAM DEPARTMENT HIERARCHY

   The Team page groups its cards by department instead of printing one flat grid.
   Team.js emits a .team-department per department (col-lg-12 inside the existing
   .team-three .row.clearfix), a heading, its own members' row, then its children
   nested inside it - so the DOM nesting IS the org chart, and the indent below only
   has to express one level at a time.

   Everything directional is logical, so Arabic mirrors without a second rule set.
   The cards themselves are untouched: .team-block_three keeps the design it had.
   ============================================================ */
.team-department {
    margin-block-end: 40px;
}

.team-department:last-child {
    margin-block-end: 0;
}

/* A nested department sits inside its parent's box, so this indent is relative to the
   level above rather than absolute - three levels deep is 3 x 18px, not a computed sum. */
.team-department .team-department {
    margin-block-start: 30px;
    margin-block-end: 0;
    padding-inline-start: 18px;
    border-inline-start: 2px solid var(--ft-border, #dbe3ef);
}

.team-department_title {
    position: relative;
    margin: 0 0 24px;
    padding-inline-start: 16px;
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    line-height: 1.3;
    font-weight: 700;
    color: var(--ft-navy, #111d42);
}

/* The accent bar is a pseudo-element rather than a border so the heading text keeps its
   own baseline spacing. inset-inline-start puts it on the correct side in both directions. */
.team-department_title::before {
    content: "";
    position: absolute;
    inset-block: 4px;
    inset-inline-start: 0;
    width: 4px;
    border-radius: 2px;
    background-color: var(--main-color);
}

/* Sub-departments read as subordinate: smaller, lighter, thinner accent. Depth caps at 2
   in Team.js, so this is the full set. */
.team-department--depth-1 > .team-department_title,
.team-department--depth-2 > .team-department_title {
    font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    font-weight: 600;
    color: var(--ft-ink, #1f2a44);
}

.team-department--depth-1 > .team-department_title::before,
.team-department--depth-2 > .team-department_title::before {
    width: 3px;
    opacity: 0.65;
}

/* Members with no department yet. Muted, because it is a state to resolve in the CMS
   rather than a real part of the structure. */
.team-department--unassigned > .team-department_title {
    color: var(--ft-muted, #51607a);
}

.team-department--unassigned > .team-department_title::before {
    background-color: var(--ft-muted, #51607a);
    opacity: 0.5;
}

/* The cards row keeps Bootstrap's negative gutters; only the vertical rhythm is set here. */
.team-department_members {
    margin-block-end: 0;
}

.team-department_members:not(:last-child) {
    margin-block-end: 10px;
}

@media (max-width: 767.98px) {
    .team-department {
        margin-block-end: 30px;
    }

    /* A phone has no room to spend on indentation. The rule stays as the level marker. */
    .team-department .team-department {
        margin-block-start: 24px;
        padding-inline-start: 12px;
    }

    .team-department_title {
        margin-bottom: 18px;
        padding-inline-start: 12px;
    }
}