/* =========================================================
   Mukoun Home Page — Arabic RTL Fix
   File: public/assets/css/home-rtl-fix.css
========================================================= */

.home-page {
    width: 100%;
    overflow-x: clip;
}

.home-page--rtl {
    direction: rtl;
    text-align: right;
}

.home-page--ltr {
    direction: ltr;
    text-align: left;
}

/* Hero */
.home-page--rtl .home-hero .title-area-left,
.home-page--rtl .home-hero .bg-title-home {
    direction: rtl !important;
    unicode-bidi: isolate !important;
    text-align: right !important;
}

.home-page--rtl .home-hero .title-area-left {
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* About section */
.home-page--rtl .about-inner-content-two,
.home-page--rtl .about-between-wrapper,
.home-page--rtl .title-style-two.left {
    direction: rtl !important;
    text-align: right !important;
}

.home-page--rtl .about-between-wrapper .disc {
    direction: rtl !important;
    unicode-bidi: plaintext !important;
    text-align: right !important;
    line-height: 2 !important;
}

/*
 * Arabic headings must not use the theme text-splitting animation.
 * The animation splits Arabic into spans and reverses/disconnects letters.
 */
.home-page--rtl .home-arabic-title {
    direction: rtl !important;
    unicode-bidi: isolate !important;
    text-align: inherit !important;
    display: block !important;
    font-family: "Tajawal", "Cairo", Tahoma, Arial, sans-serif !important;
    letter-spacing: 0 !important;
    word-spacing: normal !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.home-page--rtl .home-arabic-title span,
.home-page--rtl .home-arabic-title .split-line,
.home-page--rtl .home-arabic-title .char,
.home-page--rtl .home-arabic-title .word {
    direction: rtl !important;
    unicode-bidi: isolate !important;
    display: inline !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Projects slider: keep Swiper engine LTR, but card content RTL */
.home-page--rtl .mySwiperh1_team {
    direction: ltr !important;
}

.home-page--rtl .mySwiperh1_team .swiper-slide {
    direction: ltr !important;
}

.home-page--rtl .mySwiperh1_team .single-details {
    direction: rtl !important;
    text-align: right !important;
}

.home-page--rtl .mySwiperh1_team .single-details .title,
.home-page--rtl .mySwiperh1_team .single-details p,
.home-page--rtl .mukoun-project-summary {
    direction: rtl !important;
    unicode-bidi: plaintext !important;
    text-align: right !important;
}

.home-page--rtl .mySwiperh1_team .single-details .title {
    font-family: "Tajawal", "Cairo", Tahoma, Arial, sans-serif !important;
    letter-spacing: 0 !important;
    line-height: 1.5 !important;
}

.home-page--rtl .mukoun-project-summary {
    line-height: 1.9 !important;
}

/* Values and statistics */
.home-page--rtl .signle-fun-facts-one {
    direction: rtl !important;
    text-align: center !important;
}

.home-page--rtl .signle-fun-facts-one .title,
.home-page--rtl .signle-fun-facts-one .bototm {
    direction: rtl !important;
    unicode-bidi: plaintext !important;
}

/* Partners */
.home-page--rtl .partners-showcase,
.home-page--rtl .partners-showcase .banner-one-inner {
    direction: rtl !important;
    text-align: center !important;
}

.home-page--rtl .partners-showcase .banner-para {
    direction: rtl !important;
    unicode-bidi: plaintext !important;
    text-align: center !important;
}

/* Mobile */
@media (max-width: 767.98px) {
    .home-page--rtl .home-hero .title-area-left,
    .home-page--rtl .about-inner-content-two,
    .home-page--rtl .about-between-wrapper,
    .home-page--rtl .title-style-two.left {
        text-align: right !important;
    }

    .home-page--rtl .home-arabic-title {
        line-height: 1.45 !important;
    }
}


/* =========================================================
   Mukoun Home Page
   RTL/LTR project cards + localized counters
========================================================= */

/* Localized counter number and + order */
.mukoun-counter-value {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 2px !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
    white-space: nowrap !important;
}

.mukoun-localized-counter,
.mukoun-counter-plus {
    display: inline-block !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
}

.mukoun-counter-plus {
    font-size: 0.72em !important;
    font-weight: 800 !important;
}

/* Project card direction */
.mukoun-home-page[dir="rtl"] .single-details,
.mukoun-home-page[dir="rtl"] .single-details .title,
.mukoun-home-page[dir="rtl"] .single-details p {
    direction: rtl !important;
    text-align: right !important;
}

.mukoun-home-page[dir="ltr"] .single-details,
.mukoun-home-page[dir="ltr"] .single-details .title,
.mukoun-home-page[dir="ltr"] .single-details p {
    direction: ltr !important;
    text-align: left !important;
}

/* Facts labels */
.mukoun-home-page .signle-fun-facts-one .bototm {
    display: block;
    text-align: center;
}

/* Project summary */
.mukoun-home-page .mukoun-project-summary {
    position: relative !important;
    margin-top: 22px !important;
    line-height: 1.95 !important;
    unicode-bidi: isolate !important;
}

/* Remove any duplicate red line generated by older CSS */
.mukoun-home-page .mukoun-project-summary::before,
.mukoun-home-page .mukoun-project-summary::after {
    content: none !important;
    display: none !important;
}

/* Arabic: one red line on the right */
.mukoun-home-page[dir="rtl"] .mukoun-project-summary {
    border-right: 3px solid #d62927 !important;
    border-left: 0 !important;
    padding-right: 18px !important;
    padding-left: 0 !important;
    direction: rtl !important;
    text-align: right !important;
}

/* English: one red line on the left */
.mukoun-home-page[dir="ltr"] .mukoun-project-summary {
    border-left: 3px solid #d62927 !important;
    border-right: 0 !important;
    padding-left: 18px !important;
    padding-right: 0 !important;
    direction: ltr !important;
    text-align: left !important;
}

/* Keep project measurements readable */
.mukoun-project-summary__num {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    white-space: nowrap !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   MUKOUN TYPOGRAPHY STANDARD — TAJAWAL
   Source: Mukoun_Tajawal_Typography_Guide_AR.md
   Scope: Home page only

   IMPORTANT:
   - Typography only.
   - No changes to layout, colors, images, borders, shadows or spacing.
   - Arabic and English use Tajawal with language-specific sizing/line-height.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base font
   -------------------------------------------------------------------------- */

.mukoun-home-page,
.mukoun-home-page button,
.mukoun-home-page input,
.mukoun-home-page select,
.mukoun-home-page textarea {
    font-family: "Tajawal", Arial, sans-serif !important;
    font-synthesis: none !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mukoun-home-page h1,
.mukoun-home-page h2,
.mukoun-home-page h3,
.mukoun-home-page h4,
.mukoun-home-page h5,
.mukoun-home-page h6,
.mukoun-home-page p,
.mukoun-home-page span,
.mukoun-home-page a,
.mukoun-home-page li,
.mukoun-home-page strong {
    font-family: inherit !important;
}

/* Arabic must not inherit Latin letter spacing or text-transform. */
.mukoun-home-page[dir="rtl"] h1,
.mukoun-home-page[dir="rtl"] h2,
.mukoun-home-page[dir="rtl"] h3,
.mukoun-home-page[dir="rtl"] h4,
.mukoun-home-page[dir="rtl"] h5,
.mukoun-home-page[dir="rtl"] h6,
.mukoun-home-page[dir="rtl"] p,
.mukoun-home-page[dir="rtl"] span,
.mukoun-home-page[dir="rtl"] a {
    letter-spacing: 0 !important;
}

/* --------------------------------------------------------------------------
   Hero title
   -------------------------------------------------------------------------- */

/* English */
.mukoun-home-page[dir="ltr"] .home-hero .bg-title-home {
    font-size: clamp(5.2rem, 3.15rem + 4.8vw, 8.5rem) !important;
    line-height: 1.02 !important;
    font-weight: 900 !important;
}

/* Arabic */
.mukoun-home-page[dir="rtl"] .home-hero .bg-title-home {
    font-size: clamp(5.35rem, 3.25rem + 4.9vw, 8.8rem) !important;
    line-height: 1.22 !important;
    font-weight: 900 !important;
}

/* Hero button follows the brand small-heading/button weight. */
.mukoun-home-page .home-hero .transparent-btn {
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   Eyebrow / pre-title
   -------------------------------------------------------------------------- */

.mukoun-home-page .title-style-two .pre,
.mukoun-home-page .partners-showcase .pre-title {
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
}

/* --------------------------------------------------------------------------
   Main section titles
   About / Projects / Partners
   -------------------------------------------------------------------------- */

/* English */
/*MukounOur-Projects-Our Partners index.blade.php*/

.mukoun-home-page[dir="ltr"] .about-inner-content-two .title-style-two .title,
.mukoun-home-page[dir="ltr"] .rts-team-area .title-style-two .title,
.mukoun-home-page[dir="ltr"] .partners-showcase .banner-one-inner > .title {
     font-size: clamp( 3.2rem, calc(2rem + 1.6vw), 4.6rem ) !important;

    line-height: 1.08 !important;
    font-weight: 900 !important;
}

/* Arabic */
/*MukounOur-Projects-Our Partners index.blade.php*/

.mukoun-home-page[dir="rtl"] .about-inner-content-two .title-style-two .title,
.mukoun-home-page[dir="rtl"] .rts-team-area .title-style-two .title,
.mukoun-home-page[dir="rtl"] .partners-showcase .banner-one-inner > .title {
    font-size: clamp( 3.2rem, calc(2rem + 1.6vw), 4.6rem ) !important;
    line-height: 1.30 !important;
    font-weight: 900 !important;
}

/* --------------------------------------------------------------------------
   Main section lead text
   -------------------------------------------------------------------------- */

/* English */
.mukoun-home-page[dir="ltr"] .about-between-wrapper .disc,
.mukoun-home-page[dir="ltr"] .partners-showcase .banner-para {
    font-size: clamp(1.72rem, 1.30rem + 0.62vw, 2.05rem) !important;
    line-height: 1.95 !important;
    font-weight: 500 !important;
}

/* Arabic */
.mukoun-home-page[dir="rtl"] .about-between-wrapper .disc,
.mukoun-home-page[dir="rtl"] .partners-showcase .banner-para {
    font-size: clamp(1.82rem, 1.38rem + 0.65vw, 2.16rem) !important;
    line-height: 2.12 !important;
    font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   Project cards
   -------------------------------------------------------------------------- */

/* Card title — English */
.mukoun-home-page[dir="ltr"] .mySwiperh1_team .single-details .title {
    font-size: clamp(2.08rem, 1.62rem + 0.38vw, 2.48rem) !important;
    line-height: 1.42 !important;
    font-weight: 800 !important;
}

/* Card title — Arabic */
.mukoun-home-page[dir="rtl"] .mySwiperh1_team .single-details .title {
    font-size: clamp(2.18rem, 1.70rem + 0.42vw, 2.58rem) !important;
    line-height: 1.58 !important;
    font-weight: 800 !important;
}

/* City / card metadata */
.mukoun-home-page .mySwiperh1_team .single-details > p:not(.mukoun-project-summary) {
    font-size: 15px !important;
    line-height: 1.55 !important;
    font-weight: 700 !important;
}

/* Card description — English */
.mukoun-home-page[dir="ltr"] .mukoun-project-summary {
    font-size: 1.54rem !important;
    line-height: 2 !important;
    font-weight: 400 !important;
}

/* Card description — Arabic */
.mukoun-home-page[dir="rtl"] .mukoun-project-summary {
    font-size: 1.62rem !important;
    line-height: 2.12 !important;
    font-weight: 400 !important;
}

/* --------------------------------------------------------------------------
   Values cards
   -------------------------------------------------------------------------- */

/* Values title — English */
.mukoun-home-page[dir="ltr"]
.rts-fun-facts-area:not(.mukoun-localized-counters)
.signle-fun-facts-one .title {
    font-size: clamp(2.08rem, 1.62rem + 0.38vw, 2.48rem) !important;
    line-height: 1.42 !important;
    font-weight: 800 !important;
}

/* Values title — Arabic */
.mukoun-home-page[dir="rtl"]
.rts-fun-facts-area:not(.mukoun-localized-counters)
.signle-fun-facts-one .title {
    font-size: clamp(2.18rem, 1.70rem + 0.42vw, 2.58rem) !important;
    line-height: 1.58 !important;
    font-weight: 800 !important;
}

/* Values description — English */
.mukoun-home-page[dir="ltr"]
.rts-fun-facts-area:not(.mukoun-localized-counters)
.signle-fun-facts-one .bototm {
    font-size: 1.54rem !important;
    line-height: 2 !important;
    font-weight: 400 !important;
}

/* Values description — Arabic */
.mukoun-home-page[dir="rtl"]
.rts-fun-facts-area:not(.mukoun-localized-counters)
.signle-fun-facts-one .bototm {
    font-size: 1.62rem !important;
    line-height: 2.12 !important;
    font-weight: 400 !important;
}

/* --------------------------------------------------------------------------
   Counters
   Keep the current visual size while enforcing the brand font hierarchy.
   -------------------------------------------------------------------------- */

.mukoun-home-page .mukoun-localized-counters .mukoun-counter-value,
.mukoun-home-page .mukoun-localized-counters .mukoun-localized-counter {
    font-family: inherit !important;
    font-weight: 900 !important;
}

.mukoun-home-page .mukoun-localized-counters .bototm {
    font-size: 15px !important;
    line-height: 1.55 !important;
    font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .mukoun-home-page[dir="ltr"] .home-hero .bg-title-home,
    .mukoun-home-page[dir="rtl"] .home-hero .bg-title-home {
        font-size: clamp(4.1rem, 7vw, 6.2rem) !important;
    }

    .mukoun-home-page[dir="ltr"] .about-inner-content-two .title-style-two .title,
    .mukoun-home-page[dir="ltr"] .rts-team-area .title-style-two .title,
    .mukoun-home-page[dir="ltr"] .partners-showcase .banner-one-inner > .title,
    .mukoun-home-page[dir="rtl"] .about-inner-content-two .title-style-two .title,
    .mukoun-home-page[dir="rtl"] .rts-team-area .title-style-two .title,
    .mukoun-home-page[dir="rtl"] .partners-showcase .banner-one-inner > .title {
        font-size: clamp(3.65rem, 6vw, 5.25rem) !important;
    }

    .mukoun-home-page[dir="ltr"] .mukoun-project-summary,
    .mukoun-home-page[dir="rtl"] .mukoun-project-summary,
    .mukoun-home-page[dir="ltr"]
    .rts-fun-facts-area:not(.mukoun-localized-counters)
    .signle-fun-facts-one .bototm,
    .mukoun-home-page[dir="rtl"]
    .rts-fun-facts-area:not(.mukoun-localized-counters)
    .signle-fun-facts-one .bototm {
        font-size: 1.48rem !important;
    }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .mukoun-home-page[dir="ltr"] .home-hero .bg-title-home,
    .mukoun-home-page[dir="rtl"] .home-hero .bg-title-home {
        font-size: clamp(3.65rem, 10.4vw, 5.15rem) !important;
    }

    .mukoun-home-page[dir="ltr"] .about-inner-content-two .title-style-two .title,
    .mukoun-home-page[dir="ltr"] .rts-team-area .title-style-two .title,
    .mukoun-home-page[dir="ltr"] .partners-showcase .banner-one-inner > .title,
    .mukoun-home-page[dir="rtl"] .about-inner-content-two .title-style-two .title,
    .mukoun-home-page[dir="rtl"] .rts-team-area .title-style-two .title,
    .mukoun-home-page[dir="rtl"] .partners-showcase .banner-one-inner > .title {
        font-size: clamp(3.25rem, 9vw, 4.45rem) !important;
    }

    .mukoun-home-page[dir="ltr"] .about-between-wrapper .disc,
    .mukoun-home-page[dir="ltr"] .partners-showcase .banner-para {
        font-size: 1.38rem !important;
        line-height: 2 !important;
    }

    .mukoun-home-page[dir="rtl"] .about-between-wrapper .disc,
    .mukoun-home-page[dir="rtl"] .partners-showcase .banner-para {
        font-size: 1.46rem !important;
        line-height: 2.12 !important;
    }

    .mukoun-home-page[dir="ltr"] .mySwiperh1_team .single-details .title,
    .mukoun-home-page[dir="ltr"]
    .rts-fun-facts-area:not(.mukoun-localized-counters)
    .signle-fun-facts-one .title {
        font-size: 1.82rem !important;
    }

    .mukoun-home-page[dir="rtl"] .mySwiperh1_team .single-details .title,
    .mukoun-home-page[dir="rtl"]
    .rts-fun-facts-area:not(.mukoun-localized-counters)
    .signle-fun-facts-one .title {
        font-size: 1.92rem !important;
    }

    .mukoun-home-page[dir="ltr"] .mukoun-project-summary,
    .mukoun-home-page[dir="ltr"]
    .rts-fun-facts-area:not(.mukoun-localized-counters)
    .signle-fun-facts-one .bototm {
        font-size: 1.36rem !important;
        line-height: 2 !important;
    }

    .mukoun-home-page[dir="rtl"] .mukoun-project-summary,
    .mukoun-home-page[dir="rtl"]
    .rts-fun-facts-area:not(.mukoun-localized-counters)
    .signle-fun-facts-one .bototm {
        font-size: 1.43rem !important;
        line-height: 2.10 !important;
    }
}

/* --------------------------------------------------------------------------
   Small mobile
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    .mukoun-home-page .title-style-two .pre,
    .mukoun-home-page .partners-showcase .pre-title {
        font-size: 12px !important;
    }

    .mukoun-home-page[dir="ltr"] .home-hero .bg-title-home,
    .mukoun-home-page[dir="rtl"] .home-hero .bg-title-home {
        font-size: 3.3rem !important;
    }

    .mukoun-home-page[dir="ltr"] .about-inner-content-two .title-style-two .title,
    .mukoun-home-page[dir="ltr"] .rts-team-area .title-style-two .title,
    .mukoun-home-page[dir="ltr"] .partners-showcase .banner-one-inner > .title,
    .mukoun-home-page[dir="rtl"] .about-inner-content-two .title-style-two .title,
    .mukoun-home-page[dir="rtl"] .rts-team-area .title-style-two .title,
    .mukoun-home-page[dir="rtl"] .partners-showcase .banner-one-inner > .title {
        font-size: 3rem !important;
    }

    .mukoun-home-page[dir="ltr"] .mySwiperh1_team .single-details .title,
    .mukoun-home-page[dir="ltr"]
    .rts-fun-facts-area:not(.mukoun-localized-counters)
    .signle-fun-facts-one .title {
        font-size: 1.72rem !important;
    }

    .mukoun-home-page[dir="rtl"] .mySwiperh1_team .single-details .title,
    .mukoun-home-page[dir="rtl"]
    .rts-fun-facts-area:not(.mukoun-localized-counters)
    .signle-fun-facts-one .title {
        font-size: 1.82rem !important;
    }
}

/* ==========================================================================
   HOME HERO — FINAL RTL POSITIONING
   العربية: العنوان وزر "من نحن" في الجهة اليمنى على جميع الشاشات
   ملاحظة: هذا القسم يستبدل قواعد Hero المتكررة القديمة فقط.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base — جميع الشاشات
   -------------------------------------------------------------------------- */
.mukoun-home-page[dir="rtl"] .home-hero .title-area-left {
    left: auto !important;
    right: clamp(18px, 4vw, 72px) !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;

    width: max-content !important;
    max-width: calc(100vw - 36px) !important;

    margin: 0 !important;
    padding: 0 !important;

    direction: rtl !important;
    text-align: right !important;
    transform: none !important;
}

.mukoun-home-page[dir="rtl"] .home-hero .bg-title-home {
    width: auto !important;
    max-width: 100% !important;

    margin: 0 0 10px auto !important;
    padding: 0 !important;

    direction: rtl !important;
    text-align: right !important;
    letter-spacing: 0 !important;

    transform: none !important;
}

/* زر "من نحن" مباشرة تحت نهاية العنوان من جهة اليمين */
.mukoun-home-page[dir="rtl"] .home-hero .title-area-left > .transparent-btn {
    align-self: flex-start !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: max-content !important;

    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;

    /* إلغاء الإزاحات القديمة الموجودة في style.css */
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;
}

/* --------------------------------------------------------------------------
   Laptop — 992px إلى 1599px
   -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1599.98px) {
    .mukoun-home-page[dir="rtl"] .home-hero .title-area-left {
        left: auto !important;
        right: clamp(28px, 4vw, 64px) !important;

        width: max-content !important;
        max-width: calc(100vw - 56px) !important;
    }

    .mukoun-home-page[dir="rtl"] .home-hero .bg-title-home {
        font-size: clamp(2.8rem, 3.8vw, 3.8rem) !important;
        line-height: 1.28 !important;
        white-space: nowrap !important;
    }

    .mukoun-home-page[dir="rtl"] .home-hero .title-area-left > .transparent-btn {
        min-width: 105px !important;
        min-height: 48px !important;
        padding: 10px 23px !important;
        font-size: 15px !important;
    }
}

/* --------------------------------------------------------------------------
   Desktop / 27 inch — 1600px إلى 2499px
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) and (max-width: 2499.98px) {
    .mukoun-home-page[dir="rtl"] .home-hero .title-area-left {
        left: auto !important;
        right: clamp(50px, 6vw, 140px) !important;

        width: max-content !important;
        max-width: calc(100vw - 100px) !important;
    }

    .mukoun-home-page[dir="rtl"] .home-hero .bg-title-home {
        font-size: clamp(7.5rem, 7.7vw, 8.6rem) !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
    }
}

/* --------------------------------------------------------------------------
   32 inch / 2K / 4K — 2500px فأعلى
   -------------------------------------------------------------------------- */
@media (min-width: 2500px) {
    .mukoun-home-page[dir="rtl"] .home-hero .title-area-left {
        left: auto !important;
        right: clamp(80px, 5vw, 180px) !important;

        width: max-content !important;
        max-width: calc(100vw - 160px) !important;
    }

    .mukoun-home-page[dir="rtl"] .home-hero .bg-title-home {
        font-size: 5rem !important;
        line-height: 1.28 !important;
        white-space: nowrap !important;
    }

    .mukoun-home-page[dir="rtl"] .home-hero .title-area-left > .transparent-btn {
        min-width: 120px !important;
        min-height: 54px !important;
        font-size: 17px !important;
    }
}

/* --------------------------------------------------------------------------
   Tablet — أقل من 992px
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .mukoun-home-page[dir="rtl"] .home-hero .title-area-left {
        left: auto !important;
        right: 24px !important;

        width: max-content !important;
        max-width: calc(100vw - 48px) !important;
    }

    .mukoun-home-page[dir="rtl"] .home-hero .bg-title-home {
        font-size: clamp(2.5rem, 6vw, 3.4rem) !important;
        line-height: 1.35 !important;
        white-space: normal !important;
    }

    .mukoun-home-page[dir="rtl"] .home-hero .title-area-left > .transparent-btn {
        min-width: 100px !important;
        min-height: 46px !important;
        padding: 9px 21px !important;
        font-size: 15px !important;
    }
}

/* --------------------------------------------------------------------------
   Mobile — أقل من 768px
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .mukoun-home-page[dir="rtl"] .home-hero .title-area-left {
        left: auto !important;
        right: 18px !important;

        width: max-content !important;
        max-width: calc(100vw - 36px) !important;
    }

    .mukoun-home-page[dir="rtl"] .home-hero .bg-title-home {
        font-size: clamp(2.1rem, 8vw, 2.9rem) !important;
        line-height: 1.42 !important;
        white-space: normal !important;
    }

    .mukoun-home-page[dir="rtl"] .home-hero .title-area-left > .transparent-btn {
        min-width: 94px !important;
        min-height: 44px !important;
        padding: 8px 18px !important;
        font-size: 14px !important;
    }
}

/* --------------------------------------------------------------------------
   Small Mobile — 420px فأقل
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
    .mukoun-home-page[dir="rtl"] .home-hero .title-area-left {
        left: auto !important;
        right: 16px !important;

        width: max-content !important;
        max-width: calc(100vw - 32px) !important;
    }
}

/* =========================================================
   HOME HERO TITLE —  
    
   =========================================================  
   RESPONSIVE ALL SCREENS
   Mobile / Tablet / Laptop / Desktop / 27" / 32" / 2K / 4K
   ========================================================= */

.mukoun-home-page
.home-hero
h1.full_video.bg-title-home {

    /*
       أصغر حجم = 3.2rem = تقريباً 32px
       أكبر حجم = 5rem   = تقريباً 50px

       والحجم بينهما يتغير تلقائياً حسب عرض الشاشة
    */
    font-size: clamp(
        3.2rem,
        calc(2.2rem + 1.6vw),
        5rem
    ) !important;

    font-weight: 900 !important;

    /* مهم للاستجابة ومنع خروج النص */
    width: auto !important;
    max-width: min(900px, 92vw) !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}


/* ==============================
   English
   ============================== */

.mukoun-home-page[dir="ltr"]
.home-hero
h1.full_video.bg-title-home {

    line-height: 1.15 !important;
}


/* ==============================
   Arabic
   ============================== */

.mukoun-home-page[dir="rtl"]
.home-hero
h1.full_video.bg-title-home {

    line-height: 1.28 !important;
    letter-spacing: 0 !important;
}
 
   /* =========================================================
   end code HOME HERO TITLE —  
    
   ========================================================= */
 
 /* =========================================================
   HOME HERO — RAW VIDEO
   NO OVERLAY / NO BACKGROUND / NO FILTER
   ========================================================= */

/* إزالة أي خلفية من جميع طبقات Hero */
.mukoun-home-page .banner-swiper-two,
.mukoun-home-page .banner-swiper-two .mySwiper-banner-two,
.mukoun-home-page .banner-swiper-two .swiper-wrapper,
.mukoun-home-page .banner-swiper-two .swiper-slide,
.mukoun-home-page .banner-swiper-two .rts-banner-area-two,
.mukoun-home-page .banner-swiper-two .rts-banner-area-two.has-bg-video,
.mukoun-home-page .home-hero {

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;

    filter: none !important;
    -webkit-filter: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    opacity: 1 !important;

    mix-blend-mode: normal !important;
}


/* =========================================================
   حذف أي طبقة فوق الفيديو
   ::before + ::after
   ========================================================= */

.mukoun-home-page .home-hero::before,
.mukoun-home-page .home-hero::after,

.mukoun-home-page .rts-banner-area-two::before,
.mukoun-home-page .rts-banner-area-two::after,

.mukoun-home-page
.rts-banner-area-two.has-bg-video::before,

.mukoun-home-page
.rts-banner-area-two.has-bg-video::after,

.mukoun-home-page
.banner-swiper-two
.swiper-slide::before,

.mukoun-home-page
.banner-swiper-two
.swiper-slide::after {

    content: none !important;
    display: none !important;

    background: none !important;
    background-color: transparent !important;
    background-image: none !important;

    opacity: 0 !important;

    filter: none !important;
    -webkit-filter: none !important;

    box-shadow: none !important;

    pointer-events: none !important;
}


/* =========================================================
   VIDEO — ORIGINAL COLORS
   ========================================================= */

.mukoun-home-page
.home-hero
.banner-bg-video,

.mukoun-home-page
.banner-swiper-two
.rts-banner-area-two.has-bg-video
.banner-bg-video {

    opacity: 1 !important;

    filter: none !important;
    -webkit-filter: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    mix-blend-mode: normal !important;

    background: transparent !important;

    box-shadow: none !important;

    object-fit: cover !important;
    object-position: center center !important;
}


/* =========================================================
   إزالة الظل الأسود خلف عنوان Hero
   ========================================================= */

.mukoun-home-page
.home-hero
.bg-title-home {

    text-shadow: none !important;

    background: transparent !important;

    box-shadow: none !important;

    filter: none !important;
}


/* ==========================================================================
   HOME HERO — TITLE + BUTTON SAME EDGE / LTR + RTL
   Final override — keep at the VERY END of home.css

   English:
   H1 + button share the exact same LEFT edge.

   Arabic:
   H1 + button share the exact same RIGHT edge.

   The title uses text-shadow only; no overlay/background/filter is applied
   to the video.
   ========================================================================== */

.mukoun-home-page .home-hero {
    --hero-content-edge: clamp(18px, 4vw, 72px);
    --hero-title-button-gap: clamp(10px, 1.2vw, 16px);
}

/* One shared vertical stack for H1 + button */
.mukoun-home-page .home-hero .title-area-left {
    position: absolute !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-end !important;

    gap: var(--hero-title-button-gap) !important;

    width: max-content !important;
    max-width: calc(100vw - (var(--hero-content-edge) * 2)) !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
    z-index: 3 !important;
}

/* English: same LEFT vertical line */
.mukoun-home-page[dir="ltr"] .home-hero .title-area-left {
    left: var(--hero-content-edge) !important;
    right: auto !important;

    direction: ltr !important;
    text-align: left !important;
}

/* Arabic: mirrored to the exact same RIGHT vertical line */
.mukoun-home-page[dir="rtl"] .home-hero .title-area-left {
    right: var(--hero-content-edge) !important;
    left: auto !important;

    direction: rtl !important;
    text-align: right !important;
}

/* H1 — no movement away from the button */
.mukoun-home-page .home-hero h1.full_video.bg-title-home {
    display: block !important;

    width: max-content !important;
    max-width: calc(100vw - (var(--hero-content-edge) * 2)) !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;

    transform: none !important;

    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;

    /*
       Shadow is attached only to the letters.
       It does NOT darken, tint, filter or overlay the video.
    */
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.58),
        0 7px 20px rgba(0, 0, 0, 0.30) !important;
}

/* English H1 starts on the same LEFT edge as the button */
.mukoun-home-page[dir="ltr"] .home-hero h1.full_video.bg-title-home {
    margin-left: 0 !important;
    margin-right: auto !important;

    text-align: left !important;
}

/* Arabic H1 starts on the same RIGHT edge as the button */
.mukoun-home-page[dir="rtl"] .home-hero h1.full_video.bg-title-home {
    margin-right: 0 !important;
    margin-left: auto !important;

    text-align: right !important;
}

/* Button directly below H1 — reset old positional offsets */
.mukoun-home-page .home-hero .title-area-left > .transparent-btn {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: max-content !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* English button: exact same LEFT edge */
.mukoun-home-page[dir="ltr"]
.home-hero
.title-area-left > .transparent-btn {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Arabic button: exact same RIGHT edge */
.mukoun-home-page[dir="rtl"]
.home-hero
.title-area-left > .transparent-btn {
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* Tablet / Mobile: keep the same mirrored edge, only reduce the gap slightly */
@media (max-width: 991.98px) {
    .mukoun-home-page .home-hero {
        --hero-content-edge: clamp(18px, 3vw, 32px);
        --hero-title-button-gap: 10px;
    }
}

@media (max-width: 575.98px) {
    .mukoun-home-page .home-hero {
        --hero-content-edge: 16px;
        --hero-title-button-gap: 9px;
    }

    .mukoun-home-page .home-hero h1.full_video.bg-title-home {
        text-shadow:
            0 2px 3px rgba(0, 0, 0, 0.58),
            0 5px 14px rgba(0, 0, 0, 0.28) !important;
    }
}