/*
Theme Name: Nasslb Bilingual
Theme URI: https://nasleba3dha.org/
Author: Nasslb
Description: Arabic and English People for Each Other theme with responsive language switching.
Version: 1.6.3
Text Domain: nasslb
*/

:root {
  --orange: #f8b063;
  --orange-dark: #f8b063;
  --orange-soft: #ffd0a6;
  --blue: #0f79a8;
  --blue-dark: #173a56;
  --text: #263849;
  --muted: #6f7d89;
  --light: #f7f9fc;
  --white: #ffffff;
  --border: #e7edf2;
  --shadow: 0 18px 45px rgba(26, 59, 86, 0.12);
  --radius-lg: 28px;
  --radius-md: 18px;
}

/* English parity layer: same components and spacing, LTR reading flow. */
html[dir="ltr"] body {
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] body :where(
  h1, h2, h3, h4, h5, h6,
  p, li, dt, dd, blockquote,
  label, input, textarea, select
) {
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] .brand,
html[dir="ltr"] .footer-brand,
html[dir="ltr"] .social-links,
html[dir="ltr"] .contact-links {
  direction: ltr;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Cairo", sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.8;
}

/* Preserve the Arabic design while switching English typography and flow. */
html[dir="ltr"] body,
body.site-en {
  direction: ltr;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

html[dir="ltr"] :where(h1, h2, h3, h4, h5, h6, p, li, label, input, textarea, select),
body.site-en :where(h1, h2, h3, h4, h5, h6, p, li, label, input, textarea, select) {
  text-align: left;
}

html[dir="ltr"] :where(input, textarea, select),
body.site-en :where(input, textarea, select) {
  direction: ltr;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
.container { width: min(1140px, calc(100% - 32px)); margin-inline: auto; }

.top-header { background: var(--orange); padding: 20px 0; }
.top-header__content { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 14px; justify-self: start; }
.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    padding: 6px;          /* المسافة حول اللوجو */
    border-radius: 50%;    /* تخلي الخلفية مدورة */
    box-shadow: 0 4px 10px rgba(0,0,0,.1);
}

.brand__logo img {
    display: block;
    width: 55px;          /* حجم اللوجو */
    height: auto;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.35; }
.brand__text strong { font-size: 25px; color: var(--blue-dark); }
.brand__text span { font-size: 12px; color: #3d4c59; font-weight: 600; }
.language-switcher { display: flex; gap: 10px; align-items: center; }
.bilingual-document-page { direction: ltr; text-align: left; }
.bilingual-page-hero {
  padding: clamp(54px, 7vw, 92px) 0;
  color: #fff;
  background: linear-gradient(125deg, rgba(8, 52, 86, .96), rgba(16, 117, 141, .9));
}
.bilingual-page-hero h1 { max-width: 860px; margin: 10px 0 0; font-size: clamp(2.15rem, 5vw, 4.4rem); line-height: 1.08; }
.bilingual-page-hero .section-label { color: #ffd19b; letter-spacing: .13em; text-transform: uppercase; }
.bilingual-content-section { padding: clamp(34px, 5vw, 68px) 0; }
.bilingual-content-section:nth-child(odd) { background: #f5f9fb; }
.bilingual-copy { max-width: 920px; }
.bilingual-copy .section-label { margin: 0 0 12px; color: #d46c1b; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.bilingual-copy h2 { margin: 18px 0 10px; color: #123f5d; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.3; }
.bilingual-copy p { max-width: 78ch; margin: 0 0 14px; color: #3d5260; font-size: 1.04rem; line-height: 1.85; }
.site-en .brand__text, .site-en .footer, .site-en .nav-menu { direction: ltr; text-align: left; }
.site-en .nav-menu { font-family: Arial, sans-serif; }
.site-en { direction: ltr; }
.site-en .trustees-showcase { direction: ltr; }
.site-en .value-card > p,
.site-en .faq-question { text-align: left; }
.site-en .support-card ul {
  padding-right: 0;
  padding-left: 20px;
}
@media (max-width: 900px) {
  .site-en .stories-cta-box,
  .site-en .support-hero__content,
  .site-en .neighbourhood-feature-strip article,
  .site-en .trust-new-questions div,
  .site-en .club-new-process div,
  .site-en .club-new-member-flow article { text-align: left; }
}
@media (max-width: 900px) {
  .bilingual-document-page .language-switcher { display: flex; }
  .bilingual-document-page .top-header__content { gap: 12px; }
  .bilingual-document-page .brand__text span { display: none; }
}
.lang-btn { background: none; border: 0; padding: 8px 4px; color: var(--blue-dark); cursor: pointer; }
.lang-btn.active { border-bottom: 2px solid var(--orange-dark); font-weight: 700; }
.download-btn {
  justify-self: end; background: rgba(255,255,255,.22); color: var(--blue-dark);
  padding: 12px 24px; border-radius: 999px; font-weight: 800; transition: .25s;
}
.download-btn:hover { background: var(--white); transform: translateY(-2px); }

.main-nav { background: var(--white); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.nav-wrapper { min-height: 66px; display: flex; align-items: center; justify-content: center; }
.nav-menu { list-style: none; display: flex; align-items: center; gap: 40px; margin: 0; padding: 0; }
.nav-menu a { font-weight: 700; color: #33495d; position: relative; }
.nav-menu a::after { content: ""; position: absolute; right: 0; bottom: -10px; width: 0; height: 3px; background: var(--orange); transition: .25s; }
.nav-menu a:hover::after, .nav-menu a.active::after { width: 100%; }
.menu-toggle { display: none; background: none; border: 0; cursor: pointer; }
.menu-toggle span { display: block; width: 28px; height: 3px; margin: 5px 0; background: var(--blue-dark); border-radius: 3px; }
/* =========================
   About Dropdown Menu
========================= */

/* العنصر الذي يحتوي زر من نحن والقائمة */
.nav-item.has-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

/* زر من نحن */
.dropdown-toggle {
    min-height: 48px;
    padding: 11px 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 0;
    outline: 0;
    border-radius: 12px;

    background-color: transparent;
    color: #33495d;

    font-family: inherit;
    font-size: 17px;
    font-weight: 700;

    white-space: nowrap;
    cursor: pointer;

    transition:
        color 0.25s ease,
        background-color 0.25s ease;
}

/* شكل الزر في الهوفر أو عند فتح القائمة بالكليك */
.has-dropdown:hover > .dropdown-toggle,
.has-dropdown.dropdown-open > .dropdown-toggle {
    color: #ffffff;
    background-color: #263f59;
}

/* إزالة شكل الضغط الافتراضي */
.dropdown-toggle:focus,
.dropdown-toggle:active,
.dropdown-toggle:focus-visible {
    outline: none;
    box-shadow: none;
}

/* السهم */
.dropdown-arrow {
    display: inline-block;
    font-size: 13px;
    line-height: 1;

    transition: transform 0.25s ease;
}

/* تدوير السهم */
.has-dropdown:hover .dropdown-arrow,
.has-dropdown.dropdown-open .dropdown-arrow {
    transform: rotate(180deg);
}

/* القائمة المنسدلة */
.dropdown-menu {
    position: absolute;

    top: calc(100% + 10px);
    left: 50%;
    right: auto;

    width: 230px;

    margin: 0;
    padding: 8px 0;

    display: block;
    list-style: none;

    background-color: #ffffff;
    border: 1px solid #edf0f3;
    border-radius: 18px;

    box-shadow: 0 16px 40px rgba(23, 58, 86, 0.16);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(-50%) translateY(-8px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;

    z-index: 9999;
    overflow: hidden;
}

/* مساحة غير مرئية بين الزر والقائمة
   تمنع القائمة من القفل أثناء نقل الماوس */
.dropdown-menu::before {
    content: "";

    position: absolute;
    top: -12px;
    right: 0;

    width: 100%;
    height: 12px;
}

/* الفتح بالهوفر أو بالكليك */
.has-dropdown:hover > .dropdown-menu,
.has-dropdown.dropdown-open > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(-50%) translateY(0);
}

/* عناصر القائمة */
.dropdown-menu li {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* روابط القائمة */
.dropdown-menu li a {
    position: relative;

    width: 100%;
    min-height: 48px;
    padding: 12px 20px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    color: #757575;
    background-color: transparent;

    border: 0;
    border-bottom: 1px solid #eeeeee;
    border-radius: 0;

    font-size: 16px;
    font-weight: 600;
    text-align: right;
    text-decoration: none;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        padding-right 0.25s ease;
}

/* إلغاء الخط البرتقالي الخاص بروابط الـNavbar */
.dropdown-menu li a::after {
    display: none;
}

/* إزالة الخط من آخر عنصر */
.dropdown-menu li:last-child a {
    border-bottom: 0;
}

/* Hover على عناصر القائمة */
.dropdown-menu li a:hover {
    color: #263f59;
    background-color: #f7f9fa;
    padding-right: 27px;
}

/* شكل الرابط عند الضغط أو التركيز */
.dropdown-menu li a:focus,
.dropdown-menu li a:active,
.dropdown-menu li a:focus-visible {
    color: #263f59;
    background-color: #f7f9fa;

    outline: none;
    box-shadow: none;
}

/* الصفحة الحالية */
.dropdown-menu li a.active {
    width: calc(100% - 20px);
    margin: 5px 10px;
    padding: 11px 16px;

    color: #ffffff;
    background-color: #f29a3f;

    border: 0;
    border-radius: 12px;
}

/* منع تغيير شكل الصفحة الحالية */
.dropdown-menu li a.active:hover,
.dropdown-menu li a.active:focus,
.dropdown-menu li a.active:active {
    color: #ffffff;
    background-color: #e98b2e;
    padding-right: 16px;
}

/* منع قص القائمة خلف الهيدر */
.main-nav,
.nav-wrapper,
.nav-menu,
.nav-item {
    overflow: visible;
}

.main-nav {
    position: sticky;
    top: 0;
    z-index: 10000;
}

/* =========================
   Tablet and Mobile
========================= */

@media (max-width: 900px) {

    .nav-item.has-dropdown {
        width: 100%;
        display: block;
    }

    .dropdown-toggle {
        width: 100%;
        min-height: 48px;
        padding: 12px;

        justify-content: space-between;

        border-radius: 10px;
    }

    /* القائمة داخل قائمة الموبايل وليس absolute */
    .dropdown-menu {
        position: static;

        width: 100%;
        max-height: 0;

        margin: 0;
        padding: 0;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        border: 0;
        border-radius: 0 0 14px 14px;

        box-shadow: none;

        transform: none;

        overflow: hidden;

        transition:
            max-height 0.35s ease,
            padding 0.35s ease;
    }

    /* على الشاشات اللمسية الفتح بالكليك */
    .has-dropdown:hover > .dropdown-menu {
        max-height: 0;
        padding: 0;
    }

    .has-dropdown.dropdown-open > .dropdown-menu {
        max-height: 280px;
        padding: 7px 0;
    }

    .dropdown-menu li a {
        min-height: 44px;
        padding: 11px 22px;

        background-color: #ffffff;
    }

    .dropdown-menu li a:hover,
    .dropdown-menu li a:focus,
    .dropdown-menu li a:active {
        padding-right: 28px;
    }

    .dropdown-menu li a.active {
        width: calc(100% - 20px);
        margin: 5px 10px;
    }
}

/* مهم حتى لا تختفي خلف أقسام الصفحة */
.site-header,
.main-nav,
.nav-list {
    overflow: visible;
}

.site-header {
    position: relative;
    z-index: 10000;
}

/* =========================
   Mobile
========================= */

@media (max-width: 768px) {
    .nav-item.has-dropdown {
        width: 100%;
    }

    .dropdown-toggle {
        width: 100%;
        min-height: 48px;
        padding: 13px 16px;

        justify-content: space-between;

        border-radius: 10px;
    }

    .dropdown-menu {
        position: static;

        width: 100%;
        max-height: 0;

        margin: 0;
        padding: 0;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        border: 0;
        border-radius: 0 0 16px 16px;

        box-shadow: none;

        transform: none;
        overflow: hidden;

        transition:
            max-height 0.35s ease,
            padding 0.35s ease;
    }

    .has-dropdown:hover > .dropdown-menu,
    .has-dropdown:focus-within > .dropdown-menu {
        max-height: 0;
        padding: 0;
    }

    .has-dropdown.dropdown-open > .dropdown-menu {
        max-height: 320px;
        padding: 8px 0;
    }

    .dropdown-menu li a {
        min-height: 44px;
        padding: 12px 24px;

        background-color: #ffffff;
    }

    .dropdown-menu li a:hover,
    .dropdown-menu li a:focus,
    .dropdown-menu li a:active {
        padding-right: 30px;
    }

    .dropdown-menu li a.active {
        margin: 5px 12px;
        width: calc(100% - 24px);
    }
}
.hero { padding: 14px 0 55px; background: linear-gradient(180deg, #fbfcfe, #fff); }
.hero__image{
    position:relative;
    min-height:520px;
    border-radius:28px;
    overflow:hidden;

    background:url("assets/media/hero1.png") center center/cover no-repeat;
}
.hero__overlay{
    position:absolute;
    inset:0;

    background:linear-gradient(
        270deg,
        rgba(18,43,64,.78) 0%,
        rgba(18,43,64,.55) 35%,
        rgba(18,43,64,.15) 70%,
        rgba(18,43,64,0) 100%
    );

    display:flex;
    align-items:center;
    justify-content:flex-start;

    padding:70px;
}
.eyebrow { margin: 0 0 4px; color: var(--orange-dark); font-weight: 800; }
.hero__content{
    max-width:520px;
    color:#fff;
    text-align:right;
}

.hero-tag{
    display:inline-block;
    background:#f6942b;
    color:#fff;
    padding:8px 18px;
    border-radius:30px;
    font-weight:700;
    margin-bottom:18px;
}

.hero__content h1{
    font-size:58px;
    line-height:1.2;
    margin-bottom:20px;
    color:#fff;
}

.hero__content p{
    color:rgba(255,255,255,.92);
    font-size:20px;
    line-height:1.9;
}
.btn-outline{
    color:#fff;
    border:2px solid rgba(255,255,255,.7);
    background:transparent;
}

.btn-outline:hover{
    background:#fff;
    color:#173a56;
}

.hero__actions { display: flex; gap: 16px; align-items: center; margin-top: 26px; }
/* =========================================
   ENGLISH / LTR FIXES
========================================= */

html[dir="ltr"] body {
    direction: ltr;
    text-align: left;
}

html[dir="ltr"] .site-en .nav-menu,
html[dir="ltr"] .facebook-news-feed .efbl-content-wrapper p,
html[dir="ltr"] .facebook-news-feed .efbl-story-text,
html[dir="ltr"] .facebook-news-feed .efbl_story_text,
html[dir="ltr"] .facebook-news-feed .efbl-profile-title,
html[dir="ltr"] .facebook-news-feed .efbl-profile-title a {
    font-family: "Inter", "Segoe UI", Arial, sans-serif !important;
}

html[dir="ltr"] .facebook-news-feed .efbl-content-wrapper p,
html[dir="ltr"] .facebook-news-feed .efbl-story-text,
html[dir="ltr"] .facebook-news-feed .efbl_story_text {
    direction: ltr !important;
    text-align: left !important;
}

/* Hero English alignment */
html[dir="ltr"] #home .hero-content,
html[dir="ltr"] .hero-content,
html[dir="ltr"] .hero__content {
    direction: ltr;
    text-align: left;
    align-items: flex-start;
}

/* English hero title */
html[dir="ltr"] #home h1,
html[dir="ltr"] .hero h1,
html[dir="ltr"] .hero-title,
html[dir="ltr"] .hero__title {
    text-align: left;
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1.08;
    max-width: 650px;
    width: 100%;
    margin-left: 0;
    margin-right: auto;
}

/* Hero paragraph */
html[dir="ltr"] #home .hero-content p,
html[dir="ltr"] .hero-content p,
html[dir="ltr"] .hero__content p {
    text-align: left;
    max-width: 650px;
    margin-left: 0;
    margin-right: auto;
    line-height: 1.8;
}

/* Buttons */
html[dir="ltr"] .hero-actions,
html[dir="ltr"] .hero-buttons,
html[dir="ltr"] .hero__actions {
    justify-content: flex-start;
    direction: ltr;
}

/* Prevent English content from being cut */
html[dir="ltr"] #home,
html[dir="ltr"] .hero,
html[dir="ltr"] .hero-section {
    height: auto;
    min-height: 650px;
    overflow: visible;
}

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

    html[dir="ltr"] #home h1,
    html[dir="ltr"] .hero h1,
    html[dir="ltr"] .hero-title,
    html[dir="ltr"] .hero__title {
        font-size: clamp(34px, 10vw, 48px);
        line-height: 1.12;
        max-width: 100%;
    }

    html[dir="ltr"] #home .hero-content,
    html[dir="ltr"] .hero-content,
    html[dir="ltr"] .hero__content {
        width: 100%;
        text-align: left;
    }

}
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 12px; font-weight: 800; transition: .25s; }
.btn-primary { background: var(--blue); color: var(--white); box-shadow: 0 10px 25px rgba(15,121,168,.25); }
.btn-primary:hover { background: var(--blue-dark); transform: translateY(-2px); }
.btn-link { color: var(--blue); }
.btn-link:hover { color: var(--orange-dark); }

.section { padding: 90px 0; }
.section-soft { background: var(--light); }
.section-grid { display: grid; grid-template-columns: .9fr 1.6fr; gap: 65px; align-items: center; }
.section-label { color: var(--orange-dark); font-weight: 800; display: inline-block; margin-bottom: 8px; }
.section h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1.4; color: var(--blue-dark); margin: 0 0 16px; }
.section p { color: var(--muted); margin: 0; }
.feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card { background: var(--white); border: 1px solid var(--border); padding: 28px 22px; border-radius: var(--radius-md); box-shadow: 0 12px 30px rgba(20,53,78,.06); }
.feature-card h3 { margin: 0 0 8px; color: var(--blue-dark); }
.section-heading { text-align: center; max-width: 650px; margin: 0 auto 38px; }
.story-grid, .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.story-card { background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 14px 35px rgba(22,52,75,.08); }
.story-card__image { height: 210px; background-size: cover; background-position: center; }
.story-one { background-image: url("assets/media/learn-084e5e72fc.png"); }
.story-two { background-image: url("assets/media/food-9aac506ac5.png"); }
.story-three { background-image: url("assets/media/learn2-e351c24439.png"); }
.story-card__body { padding: 24px; }
.story-card h3 { margin: 0 0 8px; color: var(--blue-dark); }

.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.about-visual { min-height: 420px; position: relative; }
.about-shape { position: absolute; border-radius: 36px; }
.about-shape--one { inset: 25px 70px 55px 0; background: linear-gradient(135deg, var(--orange), #ffc17a); transform: rotate(-5deg); }
.about-shape--two { inset: 0 20px 90px 110px; background: linear-gradient(135deg, var(--blue), #62b9d7); transform: rotate(6deg); }
.about-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 230px; height: 230px; border-radius: 50%; background: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.about-card strong { font-size: 46px; color: var(--orange-dark); line-height: 1.2; }
.about-card span { color: var(--blue-dark); font-weight: 800; }
.check-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.check-list li::before { content: "✓"; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e7f6fb; color: var(--blue); margin-left: 10px; font-weight: 900; }

.section-accent { background: linear-gradient(135deg, var(--orange), #f6aa58); }
.join-box { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.section-accent h2, .section-accent p { color: var(--blue-dark); }
.section-label--light { color: var(--white); }
.btn-light { background: var(--white); color: var(--blue-dark); min-width: 150px; }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,.12); }


/* =========================================================
   DOWNLOAD APP SECTION
========================================================= */

.download-section {
    padding: 45px 0 100px;

    background: #ffffff;
}


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

.download-card {
    position: relative;

    min-height: 590px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;

    gap: 60px;

    padding: 60px 70px;

    overflow: hidden;

    border-radius: 36px;

    /* الخلفية أغمق سنة */
    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(15, 121, 168, .15),
            transparent 32%
        ),
        radial-gradient(
            circle at 88% 20%,
            rgba(248, 176, 99, .22),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #eef5f8 0%,
            #f8f5f0 50%,
            #fff0e2 100%
        );

    /* Border خفيف */
    border: 1px solid rgba(23, 58, 86, .08);

    /* Shadow أوضح */
    box-shadow:
        0 30px 70px rgba(23, 58, 86, .14),
        0 8px 25px rgba(23, 58, 86, .07);
}

/* =========================================================
   CONTENT
========================================================= */

.download-content {
    position: relative;

    z-index: 5;
}


.download-content .section-label {
    margin-bottom: 10px;

    color: #f29a3f;

    font-weight: 800;
}


.download-content h2 {
    margin:
        0
        0
        16px;

    color: #173a56;

    font-size:
        clamp(
            34px,
            4vw,
            48px
        );

    line-height: 1.35;

    font-weight: 800;
}


.download-description {
    max-width: 550px;

    margin: 0;

    color: #6f7d89;

    font-size: 16px;

    line-height: 1.95;
}


/* =========================================================
   FEATURES
========================================================= */

.download-features {
    display: flex;

    flex-wrap: wrap;

    gap:
        10px
        18px;

    margin-top: 25px;
}


.download-features span {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #173a56;

    font-size: 14px;

    font-weight: 700;
}


.download-features i {
    width: 25px;
    height: 25px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(15, 121, 168, .10);

    color: #0f79a8;

    font-style: normal;

    font-size: 13px;

    font-weight: 900;
}


/* =========================================================
   GOOGLE PLAY BUTTON
========================================================= */

.store-buttons {
    display: flex;

    margin-top: 30px;
}


.google-play-btn {
    min-width: 210px;
    min-height: 64px;

    padding:
        10px
        20px;

    display: inline-flex;

    align-items: center;

    gap: 14px;

    border-radius: 16px;

    background: #173a56;

    color: #ffffff;

    box-shadow:
        0 12px 25px
        rgba(23, 58, 86, .18);

    transition:
        transform .3s ease,
        background-color .3s ease,
        box-shadow .3s ease;
}


.google-play-btn:hover {
    transform:
        translateY(-4px);

    background: #0f79a8;

    box-shadow:
        0 18px 35px
        rgba(23, 58, 86, .22);
}


.google-play-icon {
    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background: #ffffff;

    color: #173a56;

    font-size: 16px;
}


.google-play-text {
    display: flex;

    flex-direction: column;

    line-height: 1.25;

    text-align: right;
}


.google-play-text small {
    color:
        rgba(255,255,255,.72);

    font-size: 11px;
}


.google-play-text strong {
    color: #ffffff;

    font-size: 19px;

    font-weight: 800;
}


/* =========================================================
   VISUAL SIDE
========================================================= */

.download-visual {
    position: relative;

    min-height: 470px;

    display: flex;

    align-items: center;
    justify-content: center;
}


/* الدائرة الخلفية */

.download-circle {
    position: absolute;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(15,121,168,.15),
            rgba(248,176,99,.18)
        );
}


/* =========================================================
   PHONE IMAGE
========================================================= */

.download-image {
    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;
    justify-content: center;
}


.download-image img {
    width: 320px;

    max-width: 100%;

    height: auto;

    display: block;

    filter:
        drop-shadow(
            0 22px 35px
            rgba(0,0,0,.22)
        );

    animation:
        phoneFloat
        4s
        ease-in-out
        infinite;
}


@keyframes phoneFloat {

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

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

}


/* =========================================================
   FLOATING CARDS
========================================================= */

.download-floating-card {
    position: absolute;

    z-index: 5;

    min-width: 185px;

    padding:
        13px
        16px;

    display: flex;

    align-items: center;

    gap: 11px;

    border:
        1px solid
        rgba(255,255,255,.8);

    border-radius: 17px;

    background:
        rgba(255,255,255,.88);

    backdrop-filter:
        blur(8px);

    box-shadow:
        0 14px 35px
        rgba(23,58,86,.12);

    animation:
        floatingCard
        4.5s
        ease-in-out
        infinite;
}


.floating-card-one {
    top: 70px;
    right: 10px;
}


.floating-card-two {
    bottom: 75px;
    left: 0;

    animation-delay:
        .8s;
}


@keyframes floatingCard {

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

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

}


.floating-icon {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 12px;

    background:
        rgba(248,176,99,.18);

    color: #f29a3f;

    font-size: 19px;

    font-weight: 900;
}


.download-floating-card strong {
    display: block;

    color: #173a56;

    font-size: 13px;
}


.download-floating-card small {
    display: block;

    color: #6f7d89;

    font-size: 10px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .download-card {
        grid-template-columns: 1fr;

        gap: 30px;

        padding:
            50px
            45px;
    }


    .download-content {
        text-align: center;
    }


    .download-description {
        margin:
            0
            auto;
    }


    .download-features {
        justify-content: center;
    }


    .store-buttons {
        justify-content: center;
    }


    .download-visual {
        min-height: 440px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .download-section {
        padding:
            25px
            0
            70px;
    }


    .download-card {
        min-height: auto;

        padding:
            38px
            22px
            45px;

        border-radius: 26px;
    }


    .download-content h2 {
        font-size: 31px;
    }


    .download-description {
        font-size: 14px;
    }


    .download-features {
        flex-direction: column;

        align-items: flex-start;

        width: fit-content;

        margin:
            22px
            auto
            0;
    }


    .google-play-btn {
        width: 100%;

        justify-content: center;
    }


    .download-visual {
        min-height: 390px;
    }


    .download-circle {
        width: 280px;
        height: 280px;
    }


    .download-image img {
        width: 250px;
    }


    .download-floating-card {
        min-width: 155px;

        padding:
            10px
            12px;
    }


    .floating-card-one {
        top: 45px;
        right: 0;
    }


    .floating-card-two {
        bottom: 45px;
        left: 0;
    }

}

.footer { background: var(--blue-dark); color: #dbe8f0; }
.footer-grid { padding: 55px 0; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 50px; }
.footer h3, .footer h4 { color: var(--white); margin-top: 0; }
.footer a, .footer span { display: block; margin: 8px 0; color: #dbe8f0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); text-align: center; padding: 18px; font-size: 13px; }
.scroll-top { position: fixed; left: 18px; bottom: 18px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--orange); color: var(--white); box-shadow: 0 8px 22px rgba(0,0,0,.18); cursor: pointer; font-size: 22px; opacity: 0; visibility: hidden; transition: .25s; }
.scroll-top.show { opacity: 1; visibility: visible; }

@media (max-width: 900px) {
  .top-header__content { grid-template-columns: 1fr auto; }
  .language-switcher { display: none; }
  .download-btn { grid-column: 2; grid-row: 1; }
  .nav-wrapper { justify-content: flex-start; }
  .menu-toggle { display: block; }
  .nav-menu { position: absolute; top: 66px; right: 16px; left: 16px; display: none; flex-direction: column; align-items: stretch; gap: 0; background: var(--white); padding: 12px; border-radius: 16px; box-shadow: var(--shadow); }
  .nav-menu.open { display: flex; }
  .nav-menu a { display: block; padding: 12px; }
  .nav-menu a::after { display: none; }
  .section-grid, .about-grid, .download-card { grid-template-columns: 1fr; }
  .feature-cards, .story-grid, .news-grid { grid-template-columns: 1fr 1fr; }
  .hero__overlay-card { inset-inline: 5%; width: 90%; padding: 32px; }
  .join-box { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .top-header { padding: 14px 0; }
  .top-header__content { gap: 10px; }
  .brand__logo { width: 50px; height: 50px; font-size: 27px; }
  .brand__text strong { font-size: 18px; }
  .brand__text span { font-size: 10px; }
  .download-btn { padding: 10px 14px; font-size: 13px; }
  .hero { padding-top: 10px; }
  .hero__image { min-height: 560px; background-position: 35% center; }
  .hero__overlay-card { top: auto; bottom: 20px; transform: none; padding: 24px; }
  .hero h1 { font-size: 31px; }
  .hero p { font-size: 15px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
  .section { padding: 64px 0; }
  .feature-cards, .story-grid, .news-grid { grid-template-columns: 1fr; }
  .about-visual { min-height: 320px; }
  .about-shape--one { inset: 35px 45px 40px 0; }
  .about-shape--two { inset: 15px 0 70px 75px; }
  .about-card { width: 190px; height: 190px; }
  .about-card strong { font-size: 38px; }
  .download-card { padding: 34px 22px; }
  .store-buttons { flex-direction: column; }
  .store-btn { text-align: center; }
  .footer-grid { grid-template-columns: 1fr; }
}
/* =========================================================
   HOME INTRO VIDEO
========================================================= */

.home-video-wrap {
    width: min(1180px, 92%);

    margin:
        15px
        auto
        85px;
}


/* =====================================
   Video Card
===================================== */

.home-video-card {
    position: relative;

    width: 100%;
    height: 440px;

    overflow: hidden;

    border-radius: 30px;

    background: #173a56;

    box-shadow:
        0 22px 55px
        rgba(23, 58, 86, .16);

    cursor: pointer;

    isolation: isolate;
}


/* =====================================
   Cover Image
===================================== */

.home-video-cover {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .9s
        cubic-bezier(.22, .8, .25, 1);
}


.home-video-card:hover
.home-video-cover {
    transform: scale(1.055);
}


/* =====================================
   Gradient
===================================== */

.home-video-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(23, 58, 86, .92) 0%,
            rgba(23, 58, 86, .72) 35%,
            rgba(23, 58, 86, .25) 70%,
            rgba(23, 58, 86, .08) 100%
        );

    pointer-events: none;
}


/* =====================================
   Text
===================================== */

.home-video-text {
    position: absolute;

    z-index: 3;

    right: 55px;
    bottom: 50px;

    max-width: 520px;

    color: #ffffff;
}


.home-video-text > span {
    display: inline-block;

    margin-bottom: 7px;

    color: #f8b063;

    font-size: 15px;
    font-weight: 800;
}


.home-video-text h3 {
    margin:
        0
        0
        10px;

    color: #ffffff;

    font-size:
        clamp(
            30px,
            4vw,
            46px
        );

    line-height: 1.4;

    font-weight: 800;
}


.home-video-text p {
    max-width: 480px;

    margin: 0;

    color:
        rgba(255, 255, 255, .84);

    font-size: 15px;

    line-height: 1.9;
}


/* =====================================
   Play Button
===================================== */

.home-video-play {
    position: absolute;

    z-index: 5;

    top: 50%;
    left: 50%;

    width: 86px;
    height: 86px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    transform:
        translate(-50%, -50%);

    border: 0;

    border-radius: 50%;

    background: #f8b063;

    color: #ffffff;

    font-size: 27px;

    cursor: pointer;

    box-shadow:
        0 0 0 13px
        rgba(248, 176, 99, .18),
        0 12px 30px
        rgba(0, 0, 0, .15);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background-color .3s ease;
}


/*
   علشان رمز Play
   يبقى في النص بصريًا
*/

.home-video-play span {
    display: block;

    transform: translateX(2px);
}


.home-video-card:hover
.home-video-play {
    transform:
        translate(-50%, -50%)
        scale(1.09);

    background: #f29a3f;

    box-shadow:
        0 0 0 20px
        rgba(248, 176, 99, .14),
        0 15px 35px
        rgba(0, 0, 0, .18);
}


/* نبضة بسيطة */

.home-video-play::before {
    content: "";

    position: absolute;

    inset: -12px;

    border:
        2px solid
        rgba(248, 176, 99, .5);

    border-radius: 50%;

    animation:
        homeVideoPulse
        2.2s
        infinite;
}


@keyframes homeVideoPulse {

    0% {
        transform: scale(.9);
        opacity: .8;
    }

    70% {
        transform: scale(1.25);
        opacity: 0;
    }

    100% {
        transform: scale(1.25);
        opacity: 0;
    }

}


/* =========================================================
   VIDEO MODAL
========================================================= */

.home-video-modal {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 30px;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}


/* فتح الفيديو */

.home-video-modal.open {
    opacity: 1;
    visibility: visible;
}


/* =====================================
   Dark Background
===================================== */

.home-video-modal-overlay {
    position: absolute;

    inset: 0;

    background:
        rgba(8, 22, 34, .85);

    backdrop-filter: blur(8px);

    cursor: pointer;
}


/* =====================================
   Video Box
===================================== */

.home-video-modal-box {
    position: relative;

    z-index: 2;

    width: min(1050px, 100%);

    overflow: hidden;

    border-radius: 25px;

    background: #000000;

    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, .40);

    transform:
        translateY(35px)
        scale(.96);

    transition:
        transform .35s
        cubic-bezier(.22, .8, .25, 1);
}


.home-video-modal.open
.home-video-modal-box {
    transform:
        translateY(0)
        scale(1);
}


/* =====================================
   Video
===================================== */

.home-main-video {
    width: 100%;

    max-height: 82vh;

    display: block;

    background: #000000;
}


/* =====================================
   Close Button
===================================== */

.home-video-close {
    position: absolute;

    z-index: 10;

    top: 15px;
    left: 15px;

    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .94);

    color: #173a56;

    font-family: Arial, sans-serif;

    font-size: 30px;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 7px 20px
        rgba(0, 0, 0, .15);

    transition:
        transform .25s ease,
        background-color .25s ease;
}


.home-video-close:hover {
    transform: rotate(90deg);

    background: #f8b063;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .home-video-card {
        height: 400px;
    }


    .home-video-text {
        right: 40px;
        bottom: 40px;

        max-width: 430px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .home-video-wrap {
        width: 92%;

        margin:
            10px
            auto
            60px;
    }


    .home-video-card {
        height: 390px;

        border-radius: 23px;
    }


    .home-video-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(23, 58, 86, .10) 0%,
                rgba(23, 58, 86, .40) 40%,
                rgba(23, 58, 86, .94) 100%
            );
    }


    .home-video-text {
        right: 23px;
        left: 23px;
        bottom: 25px;

        max-width: none;
    }


    .home-video-text h3 {
        font-size: 28px;
    }


    .home-video-text p {
        font-size: 14px;

        line-height: 1.8;
    }


    .home-video-play {
        top: 43%;

        width: 68px;
        height: 68px;

        font-size: 21px;
    }


    /* Popup */

    .home-video-modal {
        padding: 15px;
    }


    .home-video-modal-box {
        border-radius: 18px;
    }


    .home-video-close {
        top: 10px;
        left: 10px;

        width: 40px;
        height: 40px;

        font-size: 25px;
    }

}
.home-video-info {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 18px;
    padding: 22px 28px;

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 10px 30px
        rgba(23, 58, 86, .08);
}


.home-video-info > div {
    max-width: 700px;
}


.home-video-info > div > span {
    display: block;

    margin-bottom: 5px;

    color: #f29a3f;

    font-size: 14px;
    font-weight: 800;
}


.home-video-info h3 {
    margin: 0 0 7px;

    color: #173a56;

    font-size: 28px;
    font-weight: 800;
}


.home-video-info p {
    margin: 0;

    color: #6f7d89;

    font-size: 15px;

    line-height: 1.8;
}


.home-video-info-play {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    min-height: 48px;

    padding: 0 22px;

    border: 0;
    border-radius: 13px;

    background: #f8b063;

    color: #173a56;

    font-family: inherit;

    font-size: 15px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform .25s ease,
        background-color .25s ease;
}


.home-video-info-play:hover {
    transform: translateY(-2px);

    background: #f29a3f;
}


@media (max-width: 700px) {

    .home-video-info {
        flex-direction: column;
        align-items: stretch;

        padding: 20px;
    }


    .home-video-info h3 {
        font-size: 23px;
    }


    .home-video-info-play {
        justify-content: center;

        width: 100%;
    }

}
/* =========================================================
   HOME ABOUT - ORGANIZATION INFO
========================================================= */

.home-about {
    position: relative;

    padding:
        95px
        0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        );
}


.home-about-content {
    max-width: 1100px;

    margin: 0 auto;

    text-align: center;
}


.home-about .section-label {
    margin-bottom: 8px;
}


.home-about h2 {
    max-width: 760px;

    margin:
        0
        auto
        16px;

    color: #173a56;

    font-size:
        clamp(
            32px,
            4vw,
            48px
        );

    line-height: 1.45;
}


.home-about-intro {
    max-width: 750px;

    margin:
        0
        auto
        45px !important;

    color: #6f7d89;

    font-size: 17px;

    line-height: 2;
}


/* =========================================================
   OFFICIAL INFORMATION
========================================================= */

.org-info-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;

    margin-bottom: 22px;
}


.org-info-card {
    position: relative;

    min-height: 130px;

    padding:
        25px
        20px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 7px;

    overflow: hidden;

    border:
        1px solid
        #e7edf2;

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 12px 30px
        rgba(23, 58, 86, .06);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.org-info-card::before {
    content: "";

    position: absolute;

    right: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background: #f8b063;
}


.org-info-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(248, 176, 99, .55);

    box-shadow:
        0 18px 40px
        rgba(23, 58, 86, .11);
}


.org-info-label {
    color: #6f7d89;

    font-size: 13px;

    font-weight: 700;
}


.org-info-card strong {
    color: #173a56;

    font-size: 20px;

    line-height: 1.5;
}


/* =========================================================
   DOCUMENTS
========================================================= */

.org-documents {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 18px;

    margin-bottom: 45px;
}


.org-document-link {
    min-height: 70px;

    padding:
        14px
        18px;

    display: flex;

    align-items: center;

    gap: 13px;

    border:
        1px solid
        #e7edf2;

    border-radius: 17px;

    background: #ffffff;

    color: #173a56;

    box-shadow:
        0 10px 25px
        rgba(23, 58, 86, .05);

    transition:
        transform .25s ease,
        border-color .25s ease;
}


.org-document-link:hover {
    transform:
        translateY(-3px);

    border-color: #f8b063;
}


.org-document-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 12px;

    background:
        rgba(248, 176, 99, .17);

    font-size: 19px;
}


.org-document-link > span:nth-child(2) {
    flex: 1;

    text-align: right;

    font-weight: 700;
}


.org-document-link strong {
    color: #f29a3f;

    font-size: 14px;
}


/* =========================================================
   STATS
========================================================= */

.about-stats {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;
}


.about-stat-card {
    position: relative;

    min-height: 160px;

    padding:
        28px
        20px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #173a56,
            #1f5275
        );

    color: #ffffff;

    box-shadow:
        0 16px 38px
        rgba(23, 58, 86, .14);

    transition:
        transform .3s ease;
}


.about-stat-card::after {
    content: "";

    position: absolute;

    width: 95px;
    height: 95px;

    left: -35px;
    bottom: -35px;

    border-radius: 50%;

    background:
        rgba(248, 176, 99, .15);
}


.about-stat-card:hover {
    transform:
        translateY(-7px);
}


.about-stat-number {
    position: relative;

    z-index: 2;

    display: block;

    color: #f8b063;

    font-size:
        clamp(
            35px,
            4vw,
            48px
        );

    font-weight: 800;

    line-height: 1.2;
}


.about-stat-number::before {
    content: "+";
}


.about-stat-card span {
    position: relative;

    z-index: 2;

    margin-top: 7px;

    color:
        rgba(255,255,255,.9);

    font-size: 14px;

    font-weight: 700;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

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

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .home-about {
        padding:
            65px
            0;
    }


    .home-about h2 {
        font-size: 30px;
    }


    .home-about-intro {
        margin-bottom:
            35px !important;

        font-size: 15px;
    }


    .org-info-grid,
    .org-documents,
    .about-stats {
        grid-template-columns: 1fr;
    }


    .org-info-card {
        min-height: 105px;
    }


    .about-stat-card {
        min-height: 135px;
    }

}
/* ===============================
   Footer Contact
================================ */

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.footer-contact h4 {
    margin: 0 0 12px;
}

.footer-contact a,
.footer-contact span {
    display: block;
    color: inherit;
    text-decoration: none;
    line-height: 1.8;
    transition: 0.3s ease;
}

.footer-contact a:hover {
    color: #ffad55;
    transform: translateX(-3px);
}

.footer-whatsapp {
    direction: rtl;
}

.footer-address {
    opacity: 0.9;
}

/* =========================================================
   WEBSITE LOADING SCREEN
========================================================= */

.site-loader {
    position: fixed;
    inset: 0;

    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    opacity: 1;
    visibility: visible;

    transition:
        opacity .55s ease,
        visibility .55s ease;
}


.site-loader.site-loader--hidden {
    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}


.site-loader__content {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 25px;
}


/* اللوجو */

.site-loader__logo {
    width: 170px;
    height: auto;

    display: block;

    object-fit: contain;

    animation:
        loaderLogo 1.5s ease-in-out infinite;
}


@keyframes loaderLogo {

    0%,
    100% {
        transform: scale(1);
        opacity: .82;
    }

    50% {
        transform: scale(1.06);
        opacity: 1;
    }

}


/* خط التحميل */

.site-loader__line {
    position: relative;

    width: 150px;
    height: 4px;

    overflow: hidden;

    border-radius: 50px;

    background:
        rgba(23, 58, 86, .10);
}


.site-loader__line span {
    position: absolute;

    top: 0;
    bottom: 0;

    width: 45%;

    border-radius: inherit;

    background: #f8b063;

    animation:
        loaderLine 1.25s ease-in-out infinite;
}


@keyframes loaderLine {

    0% {
        right: -50%;
    }

    50% {
        right: 55%;
    }

    100% {
        right: -50%;
    }

}


/* موبايل */

@media (max-width: 600px) {

    .site-loader__logo {
        width: 135px;
    }

    .site-loader__line {
        width: 125px;
    }

}
/* =========================================================
   2026 MOBILE VISUAL REFRESH
   Inspired by the supplied mobile reference while preserving site content.
========================================================= */
@media (max-width: 700px) {
  body {
    background: #ffffff;
    font-size: 14px;
  }

  .container {
    width: min(100% - 28px, 560px);
  }

  /* Compact white app-like header */
  .top-header {
    position: relative;
    z-index: 120;
    padding: 9px 0;
    background: #ffffff;
    border-bottom: 1px solid #eef2f5;
  }

  .top-header__content {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .brand {
    justify-self: auto;
    gap: 9px;
  }

  .brand__logo {
    width: 48px;
    height: 48px;
    padding: 4px;
    flex: 0 0 48px;
  }

  .brand__logo img {
    width: 40px;
    max-height: 40px;
    object-fit: contain;
  }

  .brand__text {
    text-align: right;
  }

  .brand__text strong {
    font-size: 15px;
    line-height: 1.35;
  }

  .brand__text span {
    font-size: 8px;
  }

  .language-switcher,
  .download-btn {
    display: none !important;
  }

  /* Put hamburger inside the visual header area */
  .main-nav {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 150;
    background: transparent;
    border: 0;
    pointer-events: none;
  }

  .nav-wrapper {
    min-height: 82px;
    justify-content: flex-start;
  }

  .menu-toggle {
    position: relative;
    z-index: 170;
    display: block;
    width: 44px;
    height: 44px;
    padding: 8px;
    border-radius: 13px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 24px rgba(23,58,86,.08);
    pointer-events: auto;
  }

  .menu-toggle span {
    width: 25px;
    height: 3px;
    margin: 4px auto;
    background: #173a56;
  }

  /* Dark app-style drawer */
  .nav-menu {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: min(82vw, 330px);
    height: 100dvh;
    max-height: 100dvh;
    padding: 90px 22px 28px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    overflow-y: auto;
    border-radius: 0;
    background: #173a56;
    box-shadow: -22px 0 60px rgba(12,30,45,.28);
    transform: translateX(110%);
    opacity: 0;
    visibility: hidden;
    transition: transform .32s cubic-bezier(.22,.8,.25,1), opacity .25s ease, visibility .25s ease;
    pointer-events: auto;
  }

  .nav-menu.open {
    display: flex;
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-menu > li > a,
  .nav-menu .dropdown-toggle {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    justify-content: flex-start;
    border-radius: 12px;
    color: #ffffff;
    background: transparent;
    font-size: 15px;
    font-weight: 700;
    text-align: right;
  }

  .nav-menu > li > a:hover,
  .nav-menu > li > a.active,
  .nav-menu .dropdown-toggle:hover,
  .has-dropdown.dropdown-open > .dropdown-toggle {
    background: rgba(248,176,99,.14);
    color: #f8b063;
  }

  .nav-item.has-dropdown {
    display: block;
  }

  .dropdown-menu,
  .has-dropdown:hover > .dropdown-menu,
  .has-dropdown.dropdown-open > .dropdown-menu {
    position: static;
    width: 100%;
    margin: 4px 0 8px;
    padding: 4px 8px;
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    border: 0;
    border-radius: 12px;
    background: rgba(255,255,255,.07);
    box-shadow: none;
  }

  .has-dropdown.dropdown-open > .dropdown-menu {
    display: block;
  }

  .dropdown-menu li a {
    min-height: 42px;
    padding: 9px 12px;
    border: 0;
    color: rgba(255,255,255,.86);
    background: transparent;
    font-size: 13px;
  }

  .dropdown-menu li a:hover,
  .dropdown-menu li a.active {
    padding-right: 12px;
    color: #f8b063;
    background: transparent;
  }

  /* Softer mobile card language matching the reference */
  .value-card,
  .field-card,
  .trustee-card,
  .partner-card,
  .news-card,
  .development-field-card,
  .story-big-card {
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(23,58,86,.08);
  }

  .scroll-top {
    width: 44px;
    height: 44px;
    left: 14px;
    bottom: 18px;
    font-size: 18px;
  }
}


/* =========================================================
   IMAGE LOADING INDICATOR
========================================================= */
.image-loading-host {
    position: relative !important;
}

.image-loading-host.image-is-loading::after {
    content: "";
    position: absolute;
    z-index: 50;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid rgba(23, 58, 86, .16);
    border-top-color: #f29a3f;
    border-radius: 50%;
    animation: nasslbImageSpin .75s linear infinite;
    pointer-events: none;
}

.image-loading-host.image-is-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 49;
    background: rgba(247, 249, 252, .68);
    pointer-events: none;
}

.image-loading-host.image-load-error::after {
    content: "تعذر تحميل الصورة";
    position: absolute;
    z-index: 50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 85%;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,.92);
    color: #6f7d89;
    font-size: 12px;
    text-align: center;
    pointer-events: none;
}

@keyframes nasslbImageSpin {
    to { transform: rotate(360deg); }
}

/* =========================================
   JOIN CTA
========================================= */

.join-cta {
    position: relative;
    padding: 65px 0;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 45%,
            rgba(15, 121, 168, 0.16) 0%,
            rgba(15, 121, 168, 0.08) 25%,
            transparent 48%
        ),
        radial-gradient(
            circle at 88% 30%,
            rgba(248, 176, 99, 0.25) 0%,
            rgba(248, 176, 99, 0.12) 28%,
            transparent 52%
        ),
        linear-gradient(
            120deg,
            #eef5f8 0%,
            #f8f5f0 50%,
            #fff0e2 100%
        );
}


.join-cta__content {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 35px;
}


/* الكلام */

.join-cta__text {
    width: 100%;
    text-align: right;
}


.join-cta__text > span {
    display: block;

    margin-bottom: 8px;

    color: #f29a3f;

    font-size: 17px;
    font-weight: 700;
}


.join-cta__text h2 {
    margin: 0 0 12px;

    color: #173a56;

    font-size: 45px;
    line-height: 1.4;
    font-weight: 800;
}


.join-cta__text p {
    margin: 0;

    color: #173a56;

    font-size: 17px;
    line-height: 1.9;
}


/* =========================================
   VIDEO
========================================= */

.join-cta__video {
    width: 100%;
    max-width: 1100px;
    margin: 20px auto 0;

    border-radius: 24px;
    overflow: hidden;

    box-shadow: 0 15px 40px rgba(23, 58, 86, 0.18);
}

.join-cta__video video {
    display: block;

    width: 100%;
    height: 520px;

    object-fit: contain;

    background: #000;
}


/* الموبايل */
@media (max-width: 768px) {

    .join-cta__video {
        width: 100%;
        margin-top: 20px;
        border-radius: 18px;
    }

    .join-cta__video video {
        width: 100%;
        height: 350px;

        object-fit: contain;
    }
}
.language-switcher .lang-btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.language-switcher .lang-btn.active {
    pointer-events: none;
}
.site-en {
    direction: ltr;
    text-align: left;
}

.site-ar {
    direction: rtl;
    text-align: right;
}
/* =========================================
   MOBILE LANGUAGE SWITCHER
========================================= */

.mobile-language-switcher {
    display: none;
}

@media (max-width: 900px) {

    .mobile-language-switcher {
        display: block !important;
        width: 100%;
        padding: 8px 10px 14px;
        border-bottom: 1px solid #e7edf2;
        margin-bottom: 6px;
    }

    .mobile-lang-box {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
    }

    .mobile-lang-btn {
        flex: 1;
        max-width: 145px;

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

        min-height: 44px;
        padding: 8px 15px !important;

        border: 1px solid #e7edf2;
        border-radius: 12px;

        background: #ffffff;
        color: #173a56;

        font-weight: 700;
        text-decoration: none;
    }

    .mobile-lang-btn.active {
        background: #f8b063;
        color: #173a56;
        border-color: #f8b063;
    }

    .mobile-lang-btn::after {
        display: none !important;
    }
}

/* =========================================================
   NEWS HEADER + FACEBOOK LINK
========================================================= */

.news-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 32px;
}

.news-header-title {
    min-width: 0;
}

.news-header-title .section-label {
    margin-bottom: 6px;
}

.news-header-title h2 {
    margin: 0;
    color: #173a56;
    font-size: clamp(32px, 4vw, 44px);
    line-height: 1.35;
}


/* Facebook button */

.news-facebook-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    flex-shrink: 0;

    padding: 12px 18px;

    border-radius: 13px;

    background: #173a56;
    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    box-shadow:
        0 10px 25px
        rgba(23, 58, 86, 0.12);

    transition:
        transform .25s ease,
        background-color .25s ease,
        box-shadow .25s ease;
}

.news-facebook-link span {
    font-size: 19px;
    line-height: 1;
}

.news-facebook-link:hover {
    transform: translateY(-3px);

    background: #0f79a8;

    box-shadow:
        0 15px 32px
        rgba(23, 58, 86, 0.18);
}


/* =========================================================
   FACEBOOK FEED WRAPPER
========================================================= */

.facebook-news-feed {
    width: 100%;
}


/* نحاول توحيد شكل العناصر الخارجة من البلاجن */

.facebook-news-feed > div {
    width: 100%;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .news-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .news-facebook-link {
        width: 100%;
    }

}

/* =========================================================
   EASY SOCIAL FEED - FINAL NEWS CARDS
========================================================= */

.facebook-news-feed {
    width: 100%;
    margin-top: 10px;
}


/* الحاوية الرئيسية للبوستات */

.facebook-news-feed .efbl_feeds_holder {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 24px !important;

    align-items: stretch !important;
}


/* كل بوست */

.facebook-news-feed .efbl-halfwidth-skin,
.facebook-news-feed .efbl-story-wrapper {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
}


.facebook-news-feed .efbl-halfwidth-skin {
    padding: 0 !important;

    overflow: hidden !important;

    background: #ffffff !important;

    border: 1px solid #e7edf2 !important;
    border-radius: 20px !important;

    box-shadow:
        0 14px 34px
        rgba(23, 58, 86, 0.08) !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease !important;
}


.facebook-news-feed .efbl-halfwidth-skin:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 42px
        rgba(23, 58, 86, 0.13) !important;
}


/* =========================================================
   إزالة ستايل البلاجن الزائد
========================================================= */

.facebook-news-feed .efbl-story-wrapper {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}


.facebook-news-feed .efbl_feed_wraper {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}


/* =========================================================
   الصورة
========================================================= */

.facebook-news-feed .efbl-thumbnail-wrapper {
    width: 100% !important;

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

    overflow: hidden;

    background: #f5f7f9;
}


.facebook-news-feed .efbl-thumbnail-wrapper img,
.facebook-news-feed .efbl-thumbnail-col img {
    width: 100% !important;
    height: 230px !important;

    display: block !important;

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

    margin: 0 !important;

    transition: transform .6s ease;
}


.facebook-news-feed
.efbl-halfwidth-skin:hover
.efbl-thumbnail-wrapper img {
    transform: scale(1.035);
}


/* =========================================================
   محتوى البوست
========================================================= */

.facebook-news-feed .efbl-content-wrapper {
    display: block !important;

    width: 100% !important;

    padding: 20px 21px 22px !important;

    background: #ffffff !important;
}


/* النص */

.facebook-news-feed .efbl-content-wrapper p,
.facebook-news-feed .efbl-story-text,
.facebook-news-feed .efbl_story_text {
    margin: 0 !important;

    color: #526473 !important;

    font-family: "Cairo", sans-serif !important;

    font-size: 14px !important;
    line-height: 1.95 !important;

    text-align: right !important;
}


/* تقليل طول النص */

.facebook-news-feed .efbl-story-text,
.facebook-news-feed .efbl_story_text {
    display: -webkit-box !important;

    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 7 !important;

    overflow: hidden !important;
}


/* =========================================================
   بيانات البوست
========================================================= */

.facebook-news-feed .efbl-post-header {
    padding: 17px 20px 0 !important;

    background: #ffffff !important;
}


.facebook-news-feed .efbl-post-header img {
    width: 40px !important;
    height: 40px !important;

    border-radius: 50% !important;

    object-fit: cover !important;
}


/* اسم الصفحة */

.facebook-news-feed .efbl-profile-title,
.facebook-news-feed .efbl-profile-title a {
    color: #173a56 !important;

    font-family: "Cairo", sans-serif !important;

    font-size: 14px !important;
    font-weight: 800 !important;
}


/* التاريخ */

.facebook-news-feed .efbl-profile-meta {
    color: #84929d !important;

    font-size: 11px !important;
}


/* =========================================================
   FOOTER البلاجن
========================================================= */

.facebook-news-feed .efbl-post-footer {
    padding: 0 20px 18px !important;

    background: #ffffff !important;
}


/* نخفي عناصر Facebook الزائدة */

.facebook-news-feed .efbl_likebox,
.facebook-news-feed .efbl-share,
.facebook-news-feed .efbl-comments,
.facebook-news-feed .efbl-reactions {
    display: none !important;
}





/* =========================================================
   منع أعمدة البلاجن الداخلية
========================================================= */

.facebook-news-feed .efbl-row {
    width: 100% !important;

    margin: 0 !important;

    display: block !important;
}


.facebook-news-feed [class*="efbl-col-"] {
    width: 100% !important;
    max-width: 100% !important;

    float: none !important;

    padding: 0 !important;
}


/* =========================================================
   الأخبار بدون صورة
========================================================= */

.facebook-news-feed
.efbl-halfwidth-skin:not(.added_photos):not(.added_video)
.efbl-content-wrapper {
    min-height: 280px;

    display: flex !important;
    flex-direction: column;
    justify-content: center;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .facebook-news-feed .efbl_feeds_holder {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .facebook-news-feed .efbl_feeds_holder {
        grid-template-columns: 1fr !important;

        gap: 18px !important;
    }


    .facebook-news-feed .efbl-halfwidth-skin {
        border-radius: 18px !important;
    }


    .facebook-news-feed .efbl-thumbnail-wrapper img,
    .facebook-news-feed .efbl-thumbnail-col img {
        height: 210px !important;
    }


    .facebook-news-feed .efbl-content-wrapper {
        padding: 18px !important;
    }


    .facebook-news-feed .efbl-story-text,
    .facebook-news-feed .efbl_story_text {
        -webkit-line-clamp: 8 !important;

        font-size: 13px !important;
    }


    .news-header {
        align-items: stretch;
    }


    .news-facebook-link {
        width: 100%;

        justify-content: center;
    }

}
/* =========================================================
   EASY SOCIAL FEED - FINAL FIX
========================================================= */

/* اخفاء الـ overlay والايقونات الضخمة */
.facebook-news-feed .efbl-overlay,
.facebook-news-feed .efbl-overlay *,
.facebook-news-feed .efbl-plus,
.facebook-news-feed .icon-esf-plus,
.facebook-news-feed .icon-esf-video-camera,
.facebook-news-feed .esf_insta_load_more_btns_wrap {
    display: none !important;
}
/* =========================================================
   FACEBOOK NEWS - STACKED CARDS + EMOJI FIX
========================================================= */

/* كل الأخبار تحت بعض */
.facebook-news-feed .efbl_feeds_holder {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    width: 100% !important;
}

/* كل خبر بعرض السكشن */
.facebook-news-feed .efbl-halfwidth-skin {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* منع الإيموجي من التحول لصورة ضخمة */
.facebook-news-feed img.emoji,
.facebook-news-feed img.wp-smiley,
.facebook-news-feed .emoji {
    width: 1em !important;
    height: 1em !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 1em !important;
    max-height: 1em !important;

    display: inline-block !important;

    object-fit: contain !important;

    margin: 0 2px !important;
    padding: 0 !important;

    vertical-align: -0.1em !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* نخفي عناصر الـ overlay نهائيًا */
.facebook-news-feed .efbl-overlay,
.facebook-news-feed .efbl-overlay *,
.facebook-news-feed .efbl-plus,
.facebook-news-feed .icon-esf-plus,
.facebook-news-feed .icon-esf-clone,
.facebook-news-feed .icon-esf-video-camera,
.facebook-news-feed .efbl-video-camera {
    display: none !important;
}


/* موبايل */
@media (max-width: 650px) {

    .facebook-news-feed .efbl_feeds_holder {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

}
/* =========================================================
   FACEBOOK NEWS - FINAL HORIZONTAL DESIGN
========================================================= */

/* الأخبار كلها تحت بعض */
.facebook-news-feed .efbl_feeds_holder {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
}


/* الكارت */
.facebook-news-feed .efbl-halfwidth-skin {
    width: 100% !important;
    max-width: 100% !important;

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

    overflow: hidden !important;

    background: #ffffff !important;

    border: 1px solid #e7edf2 !important;
    border-radius: 22px !important;

    box-shadow: 0 12px 35px rgba(23,58,86,.08) !important;
}


/* الصورة والمحتوى جنب بعض */
.facebook-news-feed .efbl-story-wrapper {
    display: grid !important;

    grid-template-columns:
        minmax(280px, 34%)
        minmax(0, 1fr) !important;

    align-items: stretch !important;

    width: 100% !important;

    min-height: 270px !important;

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

    background: #ffffff !important;
}


/* =========================================================
   IMAGE
========================================================= */

.facebook-news-feed .efbl-thumbnail-wrapper,
.facebook-news-feed .efbl-thumbnail-col {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    height: 100% !important;
    min-height: 270px !important;

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

    overflow: hidden !important;

    background: #f4f6f8 !important;
}


.facebook-news-feed .efbl-thumbnail-wrapper img,
.facebook-news-feed .efbl-thumbnail-col img {

    width: 100% !important;
    height: 100% !important;

    min-height: 270px !important;
    max-height: 300px !important;

    display: block !important;

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

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


/* =========================================================
   CONTENT
========================================================= */

.facebook-news-feed .efbl-content-wrapper {

    width: 100% !important;
    min-width: 0 !important;

    padding: 27px 30px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    background: #ffffff !important;

    text-align: right !important;
}


/* اسم الصفحة */
.facebook-news-feed .efbl-profile-title,
.facebook-news-feed .efbl-profile-title a {

    color: #173a56 !important;

    font-size: 17px !important;
    font-weight: 800 !important;

    line-height: 1.6 !important;
}


/* التاريخ */
.facebook-news-feed .efbl-profile-meta {

    margin-top: 4px !important;
    margin-bottom: 16px !important;

    color: #94a0aa !important;

    font-size: 12px !important;
}


/* نص الخبر */
.facebook-news-feed .efbl-story-text,
.facebook-news-feed .efbl_story_text,
.facebook-news-feed .efbl-content-wrapper p {

    color: #5f707e !important;

    font-size: 14px !important;
    line-height: 2 !important;

    text-align: right !important;
}


/* نظهر جزء مناسب فقط من الخبر */
.facebook-news-feed .efbl-story-text,
.facebook-news-feed .efbl_story_text {

    display: -webkit-box !important;

    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 5 !important;

    overflow: hidden !important;
}


/* =========================================================
   EMOJI FIX
========================================================= */

.facebook-news-feed img.emoji,
.facebook-news-feed img.wp-smiley {

    display: inline-block !important;

    width: 1em !important;
    height: 1em !important;

    min-width: 1em !important;
    min-height: 1em !important;

    max-width: 1em !important;
    max-height: 1em !important;

    margin: 0 2px !important;

    object-fit: contain !important;

    vertical-align: -0.12em !important;
}


/* =========================================================
   HIDE PLUGIN OVERLAY / EXTRA ICONS
========================================================= */

.facebook-news-feed .efbl-overlay,
.facebook-news-feed .efbl-overlay *,
.facebook-news-feed .efbl-plus,
.facebook-news-feed .icon-esf-plus,
.facebook-news-feed .icon-esf-clone,
.facebook-news-feed .icon-esf-video-camera,
.facebook-news-feed .efbl-video-camera {

    display: none !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .facebook-news-feed .efbl-story-wrapper {

        grid-template-columns:
            minmax(220px, 38%)
            minmax(0, 1fr) !important;

        min-height: 230px !important;
    }

    .facebook-news-feed .efbl-thumbnail-wrapper,
    .facebook-news-feed .efbl-thumbnail-col,
    .facebook-news-feed .efbl-thumbnail-wrapper img,
    .facebook-news-feed .efbl-thumbnail-col img {

        min-height: 230px !important;
    }

    .facebook-news-feed .efbl-content-wrapper {
        padding: 22px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .facebook-news-feed .efbl_feeds_holder {
        gap: 16px !important;
    }

    /* على الموبايل الصورة تفضل جنب النص لكن أصغر */
    .facebook-news-feed .efbl-story-wrapper {

        grid-template-columns:
            125px
            minmax(0, 1fr) !important;

        min-height: 170px !important;
    }

    .facebook-news-feed .efbl-thumbnail-wrapper,
    .facebook-news-feed .efbl-thumbnail-col,
    .facebook-news-feed .efbl-thumbnail-wrapper img,
    .facebook-news-feed .efbl-thumbnail-col img {

        min-height: 170px !important;
        height: 100% !important;
        max-height: none !important;
    }

    .facebook-news-feed .efbl-content-wrapper {

        padding: 14px 15px !important;
    }

    .facebook-news-feed .efbl-profile-title,
    .facebook-news-feed .efbl-profile-title a {

        font-size: 14px !important;
    }

    .facebook-news-feed .efbl-profile-meta {

        margin-bottom: 8px !important;

        font-size: 10px !important;
    }

    .facebook-news-feed .efbl-story-text,
    .facebook-news-feed .efbl_story_text,
    .facebook-news-feed .efbl-content-wrapper p {

        font-size: 12px !important;
        line-height: 1.75 !important;
    }

    .facebook-news-feed .efbl-story-text,
    .facebook-news-feed .efbl_story_text {

        -webkit-line-clamp: 4 !important;
    }

}
/* ================================
   JOIN SECTION - ENGLISH
================================ */

html[dir="ltr"] #join,
html[dir="ltr"] .join-section {
    direction: ltr;
    text-align: left;
}

html[dir="ltr"] #join .section-label,
html[dir="ltr"] #join h2,
html[dir="ltr"] #join p,
html[dir="ltr"] .join-section .section-label,
html[dir="ltr"] .join-section h2,
html[dir="ltr"] .join-section p {
    text-align: left;
    margin-left: 0;
    margin-right: auto;
}

html[dir="ltr"] #join .join-content,
html[dir="ltr"] .join-section .join-content {
    align-items: flex-start;
    text-align: left;
}

html[dir="ltr"] #join .join-actions,
html[dir="ltr"] .join-section .join-actions {
    justify-content: flex-start;
}
/* =========================================
   ENGLISH HERO - DESKTOP FIX
========================================= */

html[dir="ltr"] .hero-content,
html[dir="ltr"] .hero__content {
    max-width: 620px;
}

html[dir="ltr"] .hero-content h1,
html[dir="ltr"] .hero__content h1 {
    font-size: clamp(42px, 4.2vw, 64px) !important;
    line-height: 1.05 !important;
    margin-bottom: 20px !important;
}

html[dir="ltr"] .hero-content p,
html[dir="ltr"] .hero__content p {
    font-size: 18px !important;
    line-height: 1.7 !important;
    max-width: 580px;
    margin-bottom: 24px !important;
}

html[dir="ltr"] .hero-actions,
html[dir="ltr"] .hero__actions {
    margin-top: 18px !important;
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap;
}

/* =========================================================
   FINAL HOME LTR OVERRIDES
   Keep the English home page inside the original Arabic layout.
========================================================= */
html[dir="ltr"] #home.hero {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html[dir="ltr"] #home .hero__image {
    min-height: 520px !important;
}

html[dir="ltr"] #home .hero__overlay {
    padding: 55px 70px !important;
    direction: ltr;
    justify-content: flex-start;
}

html[dir="ltr"] #home .hero__content {
    width: min(48%, 520px) !important;
    max-width: 520px !important;
    margin: 0 auto 0 0 !important;
    direction: ltr;
    text-align: left;
}

html[dir="ltr"] #home .hero__content h1 {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 0 20px !important;
    font-size: clamp(40px, 4vw, 54px) !important;
    line-height: 1.14 !important;
    text-align: left;
}

html[dir="ltr"] #home .hero__content p {
    max-width: 520px !important;
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.75 !important;
    text-align: left;
}

html[dir="ltr"] #home .hero__actions {
    margin-top: 22px !important;
    justify-content: flex-start;
}

html[dir="ltr"] .about-stat-number::before {
    content: none;
}

html[dir="ltr"] .about-stat-number::after {
    content: "+";
}

html[dir="ltr"] #join.join-cta,
html[dir="ltr"] #join .join-cta__content,
html[dir="ltr"] #join .join-cta__text {
    direction: ltr;
    text-align: left;
}

html[dir="ltr"] #join .join-cta__content {
    align-items: center;
}

html[dir="ltr"] #join .join-cta__text,
html[dir="ltr"] #join .join-cta__text > span,
html[dir="ltr"] #join .join-cta__text h2,
html[dir="ltr"] #join .join-cta__text p {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}

@media (max-width: 768px) {
    html[dir="ltr"] #home .hero__image {
        min-height: 560px !important;
    }

    html[dir="ltr"] #home .hero__overlay {
        padding: 34px 24px !important;
        align-items: flex-end;
    }

    html[dir="ltr"] #home .hero__content {
        width: 100% !important;
        max-width: 100% !important;
    }

    html[dir="ltr"] #home .hero__content h1 {
        font-size: clamp(32px, 9vw, 42px) !important;
        line-height: 1.14 !important;
    }

    html[dir="ltr"] #home .hero__content p {
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    html[dir="ltr"] #join .join-cta__text h2 {
        font-size: clamp(30px, 9vw, 38px);
        line-height: 1.3;
    }
}

/* Final English alignment guard, kept last so legacy RTL rules cannot win. */
html[dir="ltr"] body {
    direction: ltr;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    text-align: left;
}

html[dir="ltr"] body :where(
    h1, h2, h3, h4, h5, h6,
    p, li, dt, dd, blockquote,
    label, input, textarea, select
) {
    direction: ltr;
    text-align: left;
}

html[dir="ltr"] .site-en .nav-menu,
html[dir="ltr"] .facebook-news-feed .efbl-content-wrapper p,
html[dir="ltr"] .facebook-news-feed .efbl-story-text,
html[dir="ltr"] .facebook-news-feed .efbl_story_text,
html[dir="ltr"] .facebook-news-feed .efbl-profile-title,
html[dir="ltr"] .facebook-news-feed .efbl-profile-title a {
    font-family: "Inter", "Segoe UI", Arial, sans-serif !important;
}

html[dir="ltr"] .facebook-news-feed .efbl-content-wrapper p,
html[dir="ltr"] .facebook-news-feed .efbl-story-text,
html[dir="ltr"] .facebook-news-feed .efbl_story_text {
    direction: ltr !important;
    text-align: left !important;
}