/* start global css */
:root {
    --brand-blue: #234096;
    --brand-green: #60bc46;

    --bg: #ffffff;
    --text: #0f172a;
    --muted: #64748b;

    --card: #ffffff;
    --border: #e5e7eb;

    --radius: 16px;
    --shadow: 0 14px 30px rgba(2, 6, 23, 0.1);

    --container: 85%;

    --green: #60bc46;
    --blue: #234096;
    --orange: #f59e0b;
    --violet: #8b5cf6;
    --red: #ef4444;
    --gray: #6b7280;
    --teal: #14b8a6;
    --indigo: #6366f1;
    --pink: #ec4899;
    --yellow: #eab308;
    --cyan: #06b6d4;
    --lime: #84cc16;
    --amber: #f59e0b;
    --rose: #f43f5e;
    --emerald: #10b981;
    --sky: #0ea5e9;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    line-height: 1.75;
    font-family: f_regular, "Cairo", sans-serif;
}

a {
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

@font-face {
    font-family: f_regular;
    src: url(../fonts/cairo/Cairo-Regular.ttf);
}

@font-face {
    font-family: f_light;
    src: url(../fonts/cairo/Cairo-Light.ttf);
}

@font-face {
    font-family: f_bold;
    src: url(../fonts/cairo/Cairo-Medium.ttf);
}

@media (min-width: 320px) and (max-width: 767px) {
    /* .container {
        width: 90%;
        margin: auto;
    } */
}

@media (min-width: 768px) and (max-width: 991px) {
    /* .container {
        width: 90%;
        margin: auto;
    } */
}
@media (min-width: 992px) and (max-width: 1199px) {
    /*
    .serv .all {
        flex-wrap: wrap !important;
    }*/
}

.container {
    width: 85%;
    margin: auto;
}

select {
    border: none;
}

/*  Global Donate Button Style  */
.btn--donate {
    background: var(--brand-green);
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 14px 30px rgba(96, 188, 70, 0.35);
    font-family: f_bold;
    letter-spacing: 0.2px;
    justify-content: center;
}
.btn.btn--donate {
    background: var(--brand-green) !important;
    color: #fff !important;
    box-shadow: 0 14px 30px rgba(96, 188, 70, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn--donate:hover {
    filter: brightness(0.95);
}
.btn--donate:active {
    transform: translateY(1px);
}

/*  Floating Donate CTA (fixed on page)  */
.fab-donate {
    position: fixed;
    inset: auto 18px 18px auto; /* bottom-right (RTL/LTR friendly) */
    z-index: 2000;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 999px;
    text-decoration: none;
    font-family: f_bold;
    background: var(--brand-green);
    color: #fff;
    box-shadow: 0 18px 40px rgba(96, 188, 70, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.35);
    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.fab-donate i {
    font-size: 16px;
}
.fab-donate:hover {
    filter: brightness(0.96);
    transform: translateY(-2px);
}
.fab-donate:active {
    transform: translateY(0px);
}

@media (max-width: 520px) {
    .fab-donate {
        inset: auto 12px 12px 12px; /* full-width on small mobile */
        justify-content: center;
    }
}

/* Backdrop (بمسك الشاشة كلها) */
.searchOverlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 90px 16px 16px;
    z-index: 999999;
}
.no-scroll {
    overflow: hidden;
}
/* طبقة التعتيم */
.searchOverlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.5);
    backdrop-filter: blur(6px);
}

/* فتح */
.searchOverlay.is-open {
    display: flex;
}

/* الصندوق فوق التعتيم */
.searchBox {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.3),
        rgba(96, 188, 70, 0.3)
    );
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 22px;
    box-shadow: 0 30px 90px rgba(2, 6, 23, 0.35);
    padding: 18px;

    transform: translateY(-12px);
    opacity: 0;
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.searchOverlay.is-open .searchBox {
    transform: translateY(0);
    opacity: 1;
}

.searchClose {
    position: absolute;
    top: 12px;
    left: 12px; /* RTL */
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(35, 64, 150, 0.14);
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-blue);
    transition: 0.2s;
}
.searchClose:hover {
    transform: translateY(-2px);
}

.searchHead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.searchTitle {
    font-family: f_bold;
    font-size: 1.1rem;
}
.searchHint {
    color: var(--muted);
    font-size: 0.92rem;
}

.searchField {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(35, 64, 150, 0.14);
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.06);
}
.searchField i {
    color: var(--brand-blue);
}
.searchField input {
    border: none;
    outline: none;
    width: 100%;
    font-family: f_regular;
    font-size: 1rem;
    background: transparent;
}

.searchTip {
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.9rem;
}

/* إغلاق سكرول الصفحة وقت المودال */
body.is-modal-open {
    overflow: hidden;
}

/* Mobile */
@media (max-width: 600px) {
    .searchOverlay {
        padding-top: 76px;
    }
    .searchClose {
        left: 10px;
        top: 10px;
    }
}

/* end  global css */
/*  Top Notice Bar  */
.noticeBar {
    background: linear-gradient(
        90deg,
        rgba(35, 64, 150, 0.1),
        rgba(96, 188, 70, 0.1)
    );
    border-bottom: 1px solid rgba(35, 64, 150, 0.14);
    position: relative;
    z-index: 1300;
}
.noticeBar__wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
}
.noticeBar__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.noticeDot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--brand-green);
    box-shadow: 0 0 0 6px rgba(96, 188, 70, 0.18);
    flex: 0 0 auto;
}
.noticeBar__text {
    color: var(--text);
    font-family: f_bold;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.noticeBar__link {
    color: var(--brand-blue);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.noticeBar__close {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(35, 64, 150, 0.14);
    background: #fff;
    cursor: pointer;
    flex: 0 0 auto;
}
.noticeBar.is-hidden {
    display: none;
}

@media (max-width: 640px) {
    .noticeBar__text {
        font-size: 0.9rem;
    }
}

/*  Scroll Progress  */
.scrollProgress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1400;
    background: transparent;
}
.scrollProgress__bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-green));
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.12);
}

/*  Floating Actions  */
.floatActions {
    position: fixed;
    bottom: 18px;
    left: 18px;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.floatBtn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    box-shadow: 0 20px 60px rgba(2, 6, 23, 0.12);
    cursor: pointer;
    font-family: f_bold;
    color: var(--text);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}
.floatBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 80px rgba(2, 6, 23, 0.16);
}
.floatBtn span {
    font-size: 0.95rem;
}

/* .floatBtn--donate {
    background: var(--brand-green);
    color: #fff;
    border-color: rgba(96, 188, 70, 0.35);
}
.floatBtn--donate i {
    color: #fff;
} */

/* .floatBtn--wa{
  background: rgba(37,211,102,.12);
  border-color: rgba(37,211,102,.25);
  color: #0f172a;
} */
.floatBtn--top {
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
}
.floatBtn--top.is-show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

@media (max-width: 640px) {
    .floatBtn span {
        display: none;
    } /* بالموبايل بس أيقونات */
    .floatBtn {
        width: 48px;
        height: 48px;
        justify-content: center;
        padding: 0;
    }
}
/* End */
/* start Header css  */
header {
    position: sticky;
    top: 0;
    z-index: 1200;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
}

.brand__logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.brand__name {
    font-family: f_bold;
    font-size: 1.05rem;
    line-height: 1.2;
}

.brand__sub {
    font-size: 0.9rem;
    color: var(--muted);
    /* direction: ltr; */
    text-align: start;
}

.nav__toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    padding: 10px;
    position: relative;
    z-index: 1100;
}
.nav__toggle span {
    display: block;
    height: 2px;
    background: var(--text);
    margin: 6px 0;
    border-radius: 99px;
    transition: 0.25s;
}

.nav__links {
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 1050;
}

.nav__link {
    font-family: f_bold;
    color: var(--text);
    opacity: 0.9;
    padding: 10px 10px;
    border-radius: 12px;
    transition: 0.2s;
}
.nav__link:hover {
    background: rgba(35, 64, 150, 0.06);
    color: var(--brand-blue);
}
.nav__link.is-active {
    color: var(--brand-blue);
    background: rgba(35, 64, 150, 0.08);
    border: 1px solid rgba(35, 64, 150, 0.14);
}

.nav__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: 10px;
}

.iconBtn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--brand-blue);
    transition: 0.2s;
}
.iconBtn:hover {
    border-color: rgba(35, 64, 150, 0.25);
    background: rgba(35, 64, 150, 0.06);
}

/* تحسين الازرار الحالية */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    font-family: f_bold;
    border: 1px solid transparent;
    background: transparent;
}

.btn--primary {
    background: var(--brand-blue);
    color: #fff;
    box-shadow: 0 12px 26px rgba(35, 64, 150, 0.22);
    justify-content: center;
}
.btn--primary:hover {
    filter: brightness(0.96);
}

.btn--soft {
    background: rgba(96, 188, 70, 0.14);
    color: var(--brand-blue);
    border-color: rgba(96, 188, 70, 0.35);
    justify-content: center;
}

@media (max-width: 992px) {
    .nav__toggle {
        display: block;
    }

    .nav__links {
        position: fixed;
        inset: 72px 16px auto 16px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 18px;
        box-shadow: var(--shadow);
        padding: 14px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
    }

    .nav__links.is-open {
        display: flex;
    }

    .nav__actions {
        margin-inline-start: 0;
        margin-top: 10px;
        flex-direction: column;
        align-items: stretch;
    }

    .btn,
    .iconBtn {
        width: 100%;
        justify-content: center;
    }
}

/*  Dropdown: المزيد  */
.nav__more {
    position: relative;
}

.nav__moreBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px;
    border-radius: 12px;
    font-size: 1.05rem;
    border: 1px solid transparent;
    background: transparent;
    font-family: f_bold;
    color: var(--text);
    cursor: pointer;
    transition: 0.2s;
}
.nav__moreBtn:hover {
    background: rgba(35, 64, 150, 0.06);
    color: var(--brand-blue);
}

.nav__moreBtn i {
    transition: 0.2s;
}
.nav__more.is-open .nav__moreBtn i {
    transform: rotate(180deg);
}

.nav__moreMenu {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 8px;
    display: none;
    z-index: 1400;
}

.nav__more.is-open .nav__moreMenu {
    display: block;
}

.nav__moreMenu .nav__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--text);
    font-family: f_bold;
}
.nav__moreMenu .nav__link i {
    width: 18px;
    text-align: center;
    color: var(--brand-blue);
}
.nav__moreMenu .nav__link:hover {
    background: rgba(35, 64, 150, 0.06);
    color: var(--brand-blue);
}

/* Mobile:  تطلع تحت بعض داخل القائمة */
@media (max-width: 992px) {
    .nav__more {
        width: 100%;
    }

    .nav__moreBtn {
        width: 100%;
        justify-content: space-between;
        border: 1px solid var(--border);
        background: #fff;
    }

    .nav__moreMenu {
        position: static;
        box-shadow: none;
        border: none;
        padding: 6px 0 0;
        background: transparent;
        min-width: auto;
    }

    .nav__moreMenu .nav__link {
        padding: 10px 10px;
    }
}

/* "المزيد" لما تكون الصفحة من عناصر الدروب ليست */
.nav__more.is-active .nav__moreBtn {
    color: var(--brand-blue);
    background: rgba(35, 64, 150, 0.08);
    border: 1px solid rgba(35, 64, 150, 0.14);
}

/* خلي القائمة مفتوحة إذا .is-sticky-open */
.nav__more.is-sticky-open .nav__moreMenu {
    display: block;
}
.nav__more.is-sticky-open .nav__moreBtn i {
    transform: rotate(180deg);
}

/* End Header css  */

/*  HERO  */
.hero {
    padding: 54px 0px;
    margin-bottom: 50px;
    overflow: hidden;
}

.hero__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 26px;
    align-items: center;
}

.hero__kicker .pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: rgba(35, 64, 150, 0.08);
    border: 1px solid rgba(35, 64, 150, 0.14);
    color: var(--brand-blue);
    font-family: f_bold;
}

.hero__title {
    font-size: clamp(28px, 3.4vw, 48px);
    line-height: 1.3;
    word-spacing: 1.5;
    margin-top: 12px;
    margin-bottom: 12px;
    font-family: f_bold;
}

.hero__text {
    font-size: 1.15rem;
    color: var(--muted);
    max-width: 60ch;
    margin-bottom: 10px;
}

.hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 14px 0px;
}

.hero__trust {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 20px 0px;
}

.trustItem {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.06);
    color: var(--text);
    font-family: f_bold;
}
.trustItem i {
    color: var(--brand-green);
}

/* Visual */
.hero__visual {
    position: relative;
    min-height: 360px;
}

.hero__shape {
    position: absolute;
    border-radius: 999px;
    filter: blur(0px);
    opacity: 0.95;
}
.hero__shape--blue {
    width: 260px;
    height: 260px;
    inset: -30px auto auto -30px;
    background: rgba(35, 64, 150, 0.18);
}
.hero__shape--green {
    width: 260px;
    height: 260px;
    inset: auto -40px -40px auto;
    background: rgba(96, 188, 70, 0.18);
}

.hero__imgWrap {
    position: absolute;
    inset: 20px 20px 20px 20px;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: var(--shadow);
    background: #fff;
}
.hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
}

/* small stat card */
.hero__card {
    position: absolute;
    inset: auto 40% -30px auto;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 16px 34px rgba(2, 6, 23, 0.1);
    backdrop-filter: blur(8px);
    text-align: center;
}
.hero__cardNum {
    font-size: 28px;
    color: var(--brand-blue);
    font-family: f_bold;
}
.hero__cardLabel {
    color: var(--muted);
    font-family: f_bold;
    font-size: 0.95rem;
}

@media (max-width: 950px) {
    .hero__grid {
        grid-template-columns: 1fr;
    }
    .hero__visual {
        min-height: 320px;
    }
}
/*  Hero Entrance Animation  */
.hero-anim {
    opacity: 0;
    transform: translateY(18px);
}

.hero.is-ready .hero-anim {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.hero.is-ready [data-anim="kicker"] {
    transition-delay: 0.08s;
}
.hero.is-ready [data-anim="title"] {
    transition-delay: 0.18s;
}
.hero.is-ready [data-anim="text"] {
    transition-delay: 0.3s;
}
.hero.is-ready [data-anim="actions"] {
    transition-delay: 0.42s;
}
.hero.is-ready [data-anim="trust"] {
    transition-delay: 0.52s;
}
.hero.is-ready [data-anim="visual"] {
    transition-delay: 0.2s;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-anim {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/*  Section Header  */
.section__head {
    text-align: center !important;
    margin-bottom: 24px;
}

.section__title {
    font-family: f_bold;
    font-size: clamp(24px, 3vw, 34px);
    margin-bottom: 8px;
}

.section__desc {
    color: var(--muted);
    max-width: 100%;
    margin: 10px 0px;
    /* text-align: center; */
}

/*  Programs Style  */
#programsMenu {
    max-height: 320px;
    overflow: auto;
}
.progCard {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 12px;
    transition: all 0.3s ease;
    overflow: hidden;
    margin-bottom: 25px;
}
/*  Universal Grid  */
.grid3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

@media (max-width: 992px) {
    .grid3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .grid3 {
        grid-template-columns: 1fr;
    }
}

/* Hover */
.progCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 40px rgba(2, 6, 23, 0.12);
}

/* خلفية لونية خفيفة داخل كل كرت حسب نوع البرنامج */
.progCard::before {
    background: var(--accent, var(--brand-blue));
}

/* لون/خلفية الأيقونة حسب نوع البرنامج */
.progCard .progCard__icon {
    background: rgba(35, 64, 150, 0.12);
    color: var(--accent, var(--brand-blue));
}

/* العنوان */
.progCard__title {
    font-family: f_bold;
    font-size: 1.2rem;
    line-height: 1.35;
}

/* النص */
.progCard__text {
    color: var(--muted);
    flex: 1;
    font-size: 0.97rem;
    text-align: center;
}

/* خلفية لونية خفيفة داخل كل كرت */
.progCard::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.06;
    transition: 0.3s;
    background: var(--accent, var(--brand-blue));
    pointer-events: none; /* مهم عشان ما يغطي على الرابط */
}

/* Hover */
.progCard:hover::before {
    opacity: 0.1;
}

/* أيقونة البرنامج */
.progCard__icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: rgba(35, 64, 150, 0.12);
    color: var(--accent, var(--brand-blue));
}

/* رابط "اعرف المزيد" */
.progCard__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: f_bold;
    margin-top: 6px;
    transition: 0.2s;
    position: relative;
    z-index: 2;
    color: var(--accent, var(--brand-blue));
}
.progCard__link:hover {
    transform: translateX(-2px);
}

/*  Program Types  */

/* Education */
.progCard.prog-edu {
    --accent: var(--brand-blue);
}
.progCard.prog-edu .progCard__icon {
    background: rgba(35, 64, 150, 0.12);
}

/* Development */
.progCard.prog-dev {
    --accent: var(--brand-green);
}
.progCard.prog-dev .progCard__icon {
    background: rgba(96, 188, 70, 0.14);
}

/* Relief */
.progCard.prog-relief {
    --accent: #f59e0b;
}
.progCard.prog-relief .progCard__icon {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
}
.progCard.prog-relief .progCard__link {
    color: #d97706; /* نفس فكرة الأيقونة */
}

.progCard__link i {
    transition: 0.2s;
}

.progCard__link:hover i {
    transform: translateX(-4px);
}

/*  ABOUT  */
.about__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 26px;
    align-items: center;
    margin-bottom: 100px;
}

.about__text {
    color: var(--muted);
    font-size: 1.25rem;
    max-width: 70ch;
    margin-bottom: 20px;
}

.about__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.about__visual {
    position: relative;
    min-height: 360px;
}

.about__imgWrap {
    position: absolute;
    inset: 0;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: var(--shadow);
    background: #fff;
}

.about__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about__badge {
    position: absolute;
    inset: auto 35% -50px auto;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 16px 34px rgba(2, 6, 23, 0.1);
    backdrop-filter: blur(8px);
}

.about__badgeNum {
    font-size: 34px;
    font-family: f_bold;
    color: var(--brand-green);
    line-height: 1;
    text-align: center;
}

.about__badgeText {
    color: var(--muted);
    font-family: f_bold;
    margin-top: 6px;
}

@media (max-width: 950px) {
    .about__grid {
        grid-template-columns: 1fr;
    }
    .about__visual {
        min-height: 300px;
    }
}

/*  IMPACT  */
.impact {
    margin-bottom: 100px;
}
.impact__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.impactCard {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.06);
    transition: 0.25s;
    text-align: center;
}

.impactCard:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.1);
    border-color: rgba(35, 64, 150, 0.22);
}

.impactCard__icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    margin: 0 auto 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(35, 64, 150, 0.08);
    color: var(--brand-blue);
    font-size: 22px;
}

.impactCard__num {
    font-size: clamp(26px, 3.2vw, 44px);
    font-family: f_bold;
    color: var(--brand-green);
    line-height: 1.1;
}

.impactCard__label {
    margin-top: 6px;
    color: var(--muted);
    font-family: f_bold;
}

.impact__cta {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

@media (max-width: 1000px) {
    .impact__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 520px) {
    .impact__grid {
        grid-template-columns: 1fr;
    }
}

/*  CAMPAIGN  */
.campaign__card {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 18px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.campaign__media {
    position: relative;
    min-height: 360px;
    background: #000;
}

.campaign__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.03);
}

.campaign__tag {
    position: absolute;
    top: 16px;
    inset-inline-start: 16px;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--border);
    font-family: f_bold;
    color: var(--brand-blue);
}

.campaign__content {
    padding: 22px;
}

.campaign__title {
    font-family: f_bold;
    font-size: 1.55rem;
    margin-bottom: 8px;
}

.campaign__text {
    color: var(--muted);
    margin-bottom: 10px;

    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.campaign__text.is-open {
    -webkit-line-clamp: unset;
    overflow: visible;
}

.campaign__more {
    border: 0;
    background: transparent;
    color: var(--brand-blue);
    font-family: f_bold;
    cursor: pointer;
    padding: 6px 0 0;
}
/*
.campaign__stats {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.statBox {
    background: rgba(35, 64, 150, 0.06);
    border: 1px solid rgba(35, 64, 150, 0.1);
    border-radius: 18px;
    padding: 12px;
    text-align: center;
}

.statBox__label {
    color: var(--muted);
    font-family: f_bold;
    font-size: 0.95rem;
}

.statBox__value {
    margin-top: 6px;
    font-family: f_bold;
    font-size: 1.2rem;
    color: var(--brand-green);
} */
.campaign__stats {
    margin-top: 22px;
}

.statBox {
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 18px 22px;
    border-radius: 22px;

    background: linear-gradient(
        135deg,
        rgba(35, 64, 150, 0.08),
        rgba(96, 188, 70, 0.08)
    );

    border: 1px solid rgba(35, 64, 150, 0.12);

    backdrop-filter: blur(10px);
}

.statBox::before {
    content: "";
    position: absolute;
    inset-inline-start: -30px;
    top: -30px;

    width: 120px;
    height: 120px;

    background: rgba(35, 64, 150, 0.06);
    border-radius: 50%;
}

.statBox__label {
    position: relative;
    z-index: 2;

    font-family: f_bold;
    font-size: 1rem;
    color: var(--muted);

    display: flex;
    align-items: center;
    gap: 12px;
}

.statBox__icon {
    width: 42px;
    height: 42px;

    border-radius: 14px;

    display: grid;
    place-items: center;

    background: white;
    color: var(--brand-blue);

    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);

    flex-shrink: 0;
}

.statBox__icon i {
    font-size: 1.2rem;
}

.statBox__value {
    position: relative;
    z-index: 2;

    font-family: f_bold;
    font-size: 1.5rem;
    line-height: 1;

    color: var(--brand-green);
}

.progress {
    margin-top: 12px;
    height: 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.1);
    overflow: hidden;
}

.progress__bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-green), var(--brand-blue));
    transition: width 1s ease;
}

.campaign__actions {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.campaign__note {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(96, 188, 70, 0.1);
    border: 1px solid rgba(96, 188, 70, 0.22);
    color: var(--text);
}
.campaign__note i {
    color: var(--brand-green);
}

@media (max-width: 980px) {
    .campaign__card {
        grid-template-columns: 1fr;
    }
    .campaign__media {
        min-height: 260px;
    }
    .campaign__stats {
        grid-template-columns: 1fr;
    }
}

/*  Activities   */
.activities {
    padding: 68px 0;
}

.activities__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 30px;
}

.activities__head .section__desc {
    margin: 0;
    max-width: 110ch;
}

/* على الموبايل: الزر تحت العنوان */
@media (max-width: 900px) {
    .activities__head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* بطاقة النشاط */
.actCard {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 18px;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    gap: 10px;

    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.06);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

/* خط ملون جانبي  */
.actCard::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: rgba(35, 64, 150, 0.35);
}

/* Hover */
.actCard:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 46px rgba(2, 6, 23, 0.12);
    border-color: rgba(35, 64, 150, 0.22);
}

.actCard__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.actTag {
    font-family: f_bold;
    font-size: 0.9rem;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(35, 64, 150, 0.08);
    border: 1px solid rgba(35, 64, 150, 0.14);
    color: var(--brand-blue);
}

.actDate {
    color: var(--muted);
    font-family: f_bold;
    font-size: 0.9rem;
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.actCard__title {
    font-family: f_bold;
    line-height: 1.35;
    font-size: 1.12rem;
    margin-top: 2px;
}

.actCard__text {
    color: var(--muted);
    flex: 1;

    /* قصّ النص  */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* الرابط */
.actCard__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: f_bold;
    color: var(--brand-blue);
    margin-top: 4px;
}

.actCard__link i {
    transition: 0.2s;
}
.actCard__link:hover i {
    transform: translateX(-4px);
}

/*  Tag Colors (حسب التصنيف)  */
.actTag--relief {
    background: rgba(96, 188, 70, 0.12);
    border-color: rgba(96, 188, 70, 0.22);
    color: var(--brand-green);
}

.actTag--train {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.22);
    color: #d97706;
}

/* تغيير لون الخط الجانبي حسب التصنيف */
.actCard:has(.actTag--relief)::before {
    background: rgba(96, 188, 70, 0.45);
}
.actCard:has(.actTag--train)::before {
    background: rgba(245, 158, 11, 0.45);
}

/*  Initiatives Home (Different style)  */
.initiativesHome {
    margin-bottom: 100px;
}

.iniGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

@media (max-width: 992px) {
    .iniGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .iniGrid {
        grid-template-columns: 1fr;
    }
}

.iniCard {
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 14px 34px rgba(2, 6, 23, 0.08);
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.25s ease;
    display: flex;
    flex-direction: column;
}

.iniCard__media {
    position: relative;
    height: 190px;
    overflow: hidden;
    background: #0b1220;
}
.iniCard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: 0.45s ease;
}

/* شارة صغيرة فوق الصورة */
.iniChip {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.45);
    font-family: f_bold;
    color: var(--brand-blue);
}
.iniChip--green {
    color: var(--brand-green);
}
.iniChip--blue {
    color: var(--brand-blue);
}

.iniCard__body {
    padding: 16px 16px 18px;
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.04),
        rgba(96, 188, 70, 0.06)
    );
    border-top: 1px solid rgba(35, 64, 150, 0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.iniCard__title {
    font-family: f_bold;
    font-size: 1.1rem;
    line-height: 1.35;
}

.iniCard__text {
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.iniCard__cta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: f_bold;
    color: var(--brand-blue);
}
.iniCard__cta i {
    transition: 0.2s;
}

.iniCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 60px rgba(2, 6, 23, 0.12);
    border-color: rgba(35, 64, 150, 0.18);
}
.iniCard:hover .iniCard__media img {
    transform: scale(1.08);
}
.iniCard:hover .iniCard__cta i {
    transform: translateX(-6px);
}

/*  PROJECTS SECTION FINAL  */

.projects.section {
    margin-bottom: 50px;
}

/* الهيدر */
.projects__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}
@media (max-width: 900px) {
    .projects__head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* الجريد */
.projects__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 992px) {
    .projects__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .projects__grid {
        grid-template-columns: 1fr;
    }
}

/* الكارد */
.projCard {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 22px;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.25s ease;
}

/* صورة */
.projCard__media {
    height: 180px;
    position: relative;
    overflow: hidden;
    background: #0b1220;
}

.projCard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s ease;
}

/* بادج */
.projCard__badge {
    position: absolute;
    bottom: 10px;
    right: 10px;

    padding: 6px 10px;
    border-radius: 999px;

    font-size: 0.88rem;
    font-family: f_bold;

    background: rgba(35, 64, 150, 0.9);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* جسم الكارد */
.projCard__body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;

    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.04),
        rgba(96, 188, 70, 0.05)
    );

    border-top: 1px solid rgba(35, 64, 150, 0.08);
}

.projCard:hover .projCard__body {
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.09),
        rgba(96, 188, 70, 0.1)
    );
}

.projCard__num {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 12px;

    font-family: f_bold;
    font-size: 0.95rem;

    background: rgba(35, 64, 150, 0.08);
    color: var(--brand-blue);
    border: 1px solid rgba(35, 64, 150, 0.12);
}

.projCard__title {
    font-family: f_bold;
    line-height: 1.35;
    font-size: 1.05rem;
}

.projCard__text {
    color: var(--muted);

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* الفوتر */
.projCard__cta {
    margin-top: auto;

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

    font-family: f_bold;
    color: var(--brand-blue);
}

.projCard__cta i {
    transition: 0.2s;
}

.projCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.12);
    border-color: rgba(35, 64, 150, 0.18);
}

.projCard:hover .projCard__media img {
    transform: scale(1.07);
}

.projCard:hover .projCard__cta i {
    transform: translateX(-6px);
}

/* حركة الدخول */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: 0.6s ease;
}
.reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}
/* PROJECTS PAGE (LOAD MORE) */

.projectsPage {
    margin: 50px 0 !important;
}

.projectsPage__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* رأس الصفحة */
.projectsPage .projects__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
}
@media (max-width: 900px) {
    .projectsPage .projects__head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Grid */
.projectsPage .projects__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 992px) {
    .projectsPage .projects__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .projectsPage .projects__grid {
        grid-template-columns: 1fr;
    }
}

/* Card */
.projectsPage .projCard {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
        transform 0.32s ease,
        box-shadow 0.32s ease,
        border-color 0.25s ease;
}

.projectsPage .projCard__media {
    height: 185px;
    position: relative;
    overflow: hidden;
    background: #0b1220;
}
.projectsPage .projCard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s ease;
}

.projectsPage .projCard__badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-family: f_bold;
    background: rgba(35, 64, 150, 0.9);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.projectsPage .projCard__body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.05),
        rgba(96, 188, 70, 0.06)
    );
    border-top: 1px solid rgba(35, 64, 150, 0.08);
}

.projectsPage .projCard__num {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 12px;
    font-family: f_bold;
    font-size: 0.95rem;
    background: rgba(35, 64, 150, 0.08);
    color: var(--brand-blue);
    border: 1px solid rgba(35, 64, 150, 0.12);
}

.projectsPage .projCard__title {
    font-family: f_bold;
    line-height: 1.35;
    font-size: 1.05rem;
}

.projectsPage .projCard__text {
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.projectsPage .projCard__cta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: f_bold;
    color: var(--brand-blue);
}
.projectsPage .projCard__cta i {
    transition: 0.22s;
}

.projectsPage .projCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.12);
    border-color: rgba(35, 64, 150, 0.18);
}
.projectsPage .projCard:hover .projCard__media img {
    transform: scale(1.07);
}
.projectsPage .projCard:hover .projCard__cta i {
    transform: translateX(-6px);
}
.projectsPage .projCard:hover .projCard__body {
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.09),
        rgba(96, 188, 70, 0.1)
    );
}

/* Load more */
.is-hidden {
    display: none !important;
}

.loadMoreWrap {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.loadMoreBtn {
    min-width: 240px;
    height: 54px;
    padding: 0 18px;
    border-radius: 16px;
    border: 1px solid rgba(35, 64, 150, 0.18);
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.06),
        rgba(96, 188, 70, 0.07)
    );
    box-shadow: 0 18px 45px rgba(2, 6, 23, 0.1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: f_bold;
    color: var(--brand-blue);
    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        opacity 0.2s ease;
}

.loadMoreBtn:hover {
    transform: translateY(-2px);
    filter: brightness(0.98);
}
.loadMoreBtn:active {
    transform: translateY(0);
}
.loadMoreBtn i {
    font-size: 22px;
    transition: transform 0.2s ease;
}
.loadMoreBtn:hover i {
    transform: translateY(2px);
}

.loadMoreBtn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.loadMoreHint {
    color: var(--muted);
    font-size: 0.95rem;
}

/* PROJECT DETAILS PAGE STYLE */

.projectHero {
    padding: 22px 0 10px;
}

.projectHero__wrap {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 30px 90px rgba(2, 6, 23, 0.18);
    margin-bottom: 30px;
}

.projectHero__img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

@media (max-width: 640px) {
    .projectHero__img {
        height: 280px;
    }
}

.projectHero__overlay {
    position: absolute;
    inset: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;

    background:
        radial-gradient(
            900px 420px at 85% 18%,
            rgba(96, 188, 70, 0.18),
            transparent 55%
        ),
        radial-gradient(
            900px 420px at 10% 12%,
            rgba(35, 64, 150, 0.18),
            transparent 55%
        ),
        linear-gradient(180deg, rgba(2, 6, 23, 0), rgba(2, 6, 23, 0.74));
}

.projectHero__top {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.pBadge,
.pMeta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #fff;
    font-family: f_bold;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(2, 6, 23, 0.22);
    backdrop-filter: blur(10px);
}

.projectHero__title {
    color: #fff;
    font-family: f_bold;
    font-size: 2rem;
    line-height: 1.2;
    margin-top: 2px;
}

.projectHero__desc {
    color: rgba(255, 255, 255, 0.9);
    /* max-width: 92ch; */
    max-width: 100%;
}

.projectHero__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}
/* stats */
.pStats {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 640px) {
    .pStats {
        grid-template-columns: 1fr;
    }
}

.pStat {
    border: 1px solid rgba(35, 64, 150, 0.12);
    background: linear-gradient(
        180deg,
        rgba(35, 64, 150, 0.06),
        rgba(96, 188, 70, 0.05)
    );
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 18px 55px rgba(2, 6, 23, 0.08);
}

.pStat__num {
    font-family: f_bold;
    font-size: 1.25rem;
    color: var(--brand-blue);
    line-height: 1.2;
}
.pStat__label {
    color: var(--muted);
    margin-top: 4px;
}

/* content grid */
.projectDetails {
    padding-top: 22px;
    padding-bottom: 100px;
}

.pGrid {
    display: grid;
    grid-template-columns: 1.6fr 0.95fr;
    gap: 18px;
}

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

/* cards */
.pCard {
    border: 1px solid var(--border);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(2, 6, 23, 0.1);
    overflow: hidden;
}

.pCard--soft {
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.05),
        rgba(96, 188, 70, 0.06)
    );
}

.pCard__head {
    padding: 14px;
    border-bottom: 1px solid rgba(100, 116, 139, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.pCard__title {
    font-family: f_bold;
    font-size: 1.05rem;
}

.pCard__hint {
    color: var(--muted);
    font-size: 0.9rem;
    direction: ltr;
}

.pCard__body {
    padding: 14px;
    color: var(--text);
}
.pCard__body p {
    margin-bottom: 10px;
    color: var(--muted);
}
.pCard__body p:last-child {
    margin-bottom: 0;
}

/* key-values */
.pKV {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px dashed rgba(100, 116, 139, 0.25);
    color: var(--muted);
}

.pKV strong {
    color: var(--text);
    font-family: f_bold;
    text-align: end;
}

/* توسيط أزرار التبرع والتطوع داخل صندوق معلومات المشروع */
.pMiniCta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.pMiniCta .btn {
    justify-content: center;
    text-align: center;
}

/* list */
.pList {
    margin-top: 8px;
    padding-inline-start: 18px;
    display: grid;
    gap: 10px;
    color: var(--muted);
}

/* chips */
.pChips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(35, 64, 150, 0.12);
    background: rgba(35, 64, 150, 0.05);
    color: var(--brand-blue);
    font-family: f_bold;
    font-size: 0.92rem;
}

/* note */
.pNote {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(96, 188, 70, 0.22);
    background: rgba(96, 188, 70, 0.08);
    color: var(--text);
}
.pNote i {
    color: var(--brand-green);
    margin-top: 2px;
}

/* big CTA */
.pCTA {
    grid-column: 1 / -1;
}
.pCTA__box {
    border-radius: 24px;
    border: 1px solid rgba(35, 64, 150, 0.12);
    background:
        radial-gradient(
            800px 300px at 85% 30%,
            rgba(96, 188, 70, 0.18),
            transparent 60%
        ),
        radial-gradient(
            800px 300px at 15% 20%,
            rgba(35, 64, 150, 0.18),
            transparent 60%
        ),
        linear-gradient(
            180deg,
            rgba(35, 64, 150, 0.05),
            rgba(96, 188, 70, 0.05)
        );
    padding: 18px;
    box-shadow: 0 18px 55px rgba(2, 6, 23, 0.1);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 30px;
}
.pCTA__box h3 {
    font-family: f_bold;
    font-size: 1.2rem;
}
.pCTA__box p {
    color: var(--muted);
    margin-top: 6px;
    max-width: 70ch;
}

/*  Shared section head  */
.sectionHead {
    margin-bottom: 30px 0px;
}

/*  Partners  */
.partners {
    background:
        radial-gradient(
            900px 320px at 85% 20%,
            rgba(96, 188, 70, 0.14),
            transparent 60%
        ),
        radial-gradient(
            900px 320px at 15% 30%,
            rgba(35, 64, 150, 0.14),
            transparent 60%
        );
    padding-top: 18px;
}

.partnersMarquee {
    /* border: 1px solid rgba(35,64,150,.10); */
    border-radius: 22px;
    overflow: hidden;
    background: transparent;
    box-shadow: 0 18px 55px rgba(2, 6, 23, 0.08);
}

.partnersMarquee__viewport {
    overflow: hidden;
    padding: 14px 8px;
}

.partnersMarquee__track {
    display: flex;
    align-items: center;
    gap: 12px;
    will-change: transform;
}

/* عنصر اللوغو */
.logoItem {
    flex: 0 0 auto;
    height: 96px;
    padding: 10px 14px;
    border-radius: 18px;
    /* border: 1px solid rgba(100,116,139,.14); */
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logoItem img {
    max-height: 78px;
    max-width: 220px;
    object-fit: contain;
    display: block;
}
.partners__note {
    margin: 20px 0px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(96, 188, 70, 0.22);
    background: rgba(96, 188, 70, 0.08);
    color: var(--text);
    width: fit-content;
}

.partners__note i {
    color: var(--brand-green);
}
.partners__link {
    font-family: f_bold;
    color: var(--brand-blue);
    text-decoration: underline;
}

/*  Contact  */
.contact__grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 18px;
}
@media (max-width: 992px) {
    .contact__grid {
        grid-template-columns: 1fr;
    }
}

.contactBox,
.contactForm {
    border: 1px solid var(--border);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(2, 6, 23, 0.1);
    overflow: hidden;
}

.contactBox {
    padding: 16px;
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.05),
        rgba(96, 188, 70, 0.06)
    );
}

.contactBox__title {
    font-family: f_bold;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.contactItem {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px dashed rgba(100, 116, 139, 0.22);
}
.contactItem:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.contactIcon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(35, 64, 150, 0.08);
    border: 1px solid rgba(35, 64, 150, 0.12);
    color: var(--brand-blue);
    flex: 0 0 auto;
}

.contactLabel {
    color: var(--muted);
    font-size: 0.9rem;
}
.contactValue {
    font-family: f_bold;
}

.contactMini {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Form */
.contactForm {
    padding: 16px;
}

.formRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 700px) {
    .formRow {
        grid-template-columns: 1fr;
    }
}

.formField label {
    display: block;
    font-family: f_bold;
    margin-bottom: 6px;
}

.formField input,
.formField textarea {
    width: 100%;
    padding: 12px 12px;
    border-radius: 16px;
    border: 1px solid rgba(100, 116, 139, 0.22);
    background: #fff;
    outline: none;
    transition: 0.2s;
    font-family: inherit;
}

.formField input:focus,
.formField textarea:focus {
    border-color: rgba(35, 64, 150, 0.35);
    box-shadow: 0 12px 26px rgba(35, 64, 150, 0.1);
}

.formActions {
    margin-top: 12px;
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
    float: left !important;
}

.formStatus {
    color: var(--muted);
}

/*  Footer  */
.footer {
    margin-top: 80px;
    padding: 34px 0 0;
    border-top: 1px solid rgba(100, 116, 139, 0.18);
    background:
        radial-gradient(
            900px 400px at 80% 0%,
            rgba(35, 64, 150, 0.1),
            transparent 60%
        ),
        radial-gradient(
            900px 400px at 20% 20%,
            rgba(96, 188, 70, 0.1),
            transparent 60%
        ),
        #0b1220;
    color: rgba(255, 255, 255, 0.92);
}

.footer__top {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 0.9fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}
@media (max-width: 1100px) {
    .footer__top {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 700px) {
    .footer__top {
        grid-template-columns: 1fr;
    }
}

.footerBrand {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footerBrand__logo {
    width: 150px;
    height: 150px;
    object-fit: contain;
}

.footerBrand__name {
    font-family: f_bold;
    font-size: 1.15rem;
}
.footerBrand__sub {
    color: rgba(255, 255, 255, 0.7);
    /* direction:ltr; */
}

.footerTitle {
    font-family: f_bold;
    margin-bottom: 10px;
}

.footerText {
    color: rgba(255, 255, 255, 0.78);
    margin: 10px 0px;
}

.footerTextSmall {
    color: rgba(255, 255, 255, 0.74);
    margin-bottom: 10px;
}

.footerCol {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footerLinks {
    display: grid;
    gap: 10px;
}
.footerLinks a {
    color: rgba(255, 255, 255, 0.85);
    transition: 0.2s;
}
.footerLinks a:hover {
    color: #fff;
    text-decoration: underline;
}

.footerKV {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0px;
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
    margin-top: 10px;
}

.footerKV i {
    width: 20px;
    color: rgba(96, 188, 70, 0.95);
    transition: color 0.2s ease;
}

.footerKV:hover {
    transform: translateX(-3px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.95);
    padding: 5px 5px;
}

.footerKV.soc--fb:hover {
    border-color: rgba(24, 119, 242, 0.45);
    background: rgba(24, 119, 242, 0.1);
}
.footerKV.soc--fb:hover i {
    color: #1877f2;
}

.footerKV.soc--tw:hover {
    border-color: rgba(29, 161, 242, 0.35);
    background: rgba(29, 161, 242, 0.08);
}
.footerKV.soc--tw:hover i {
    color: #1da1f2;
}

.footerKV.soc--ig:hover {
    border-color: rgba(225, 48, 108, 0.45);
    background: rgba(225, 48, 108, 0.1);
}
.footerKV.soc--ig:hover i {
    color: #e1306c;
}

.footerKV.soc--yt:hover {
    border-color: rgba(255, 0, 0, 0.45);
    background: rgba(255, 0, 0, 0.1);
}
.footerKV.soc--yt:hover i {
    color: #ff0000;
}

/* فورم تواصل  الفوتر */
.footerMiniForm {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footerMiniForm input,
.footerMiniForm textarea {
    width: 100%;
    padding: 12px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    outline: none;
    font-family: inherit;
}

.footerMiniForm textarea {
    resize: vertical;
    min-height: 90px;
}

.footerMiniForm input::placeholder,
.footerMiniForm textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.footer__bottom {
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.74);
}

.footerMiniLinks {
    display: flex;
    gap: 10px;
    align-items: center;
}
.footerMiniLinks a {
    color: rgba(255, 255, 255, 0.8);
}
.footerMiniLinks a:hover {
    color: #fff;
}

/* Reveal  */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: 0.6s ease;
}
.reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}

/*
   ABOUT PAGE (Polish)
 */

.aboutHero {
    margin-top: 20px;
}

.aboutHero__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: stretch;
    margin-bottom: 50px;
}
@media (max-width: 992px) {
    .aboutHero__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* crumbs */
.crumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.crumbs a {
    color: var(--brand-blue);
    font-family: f_bold;
}
.crumbs span {
    opacity: 0.9;
}

/* content */
.aboutHero__title {
    font-family: f_bold;
    font-size: clamp(1.65rem, 2.6vw, 2.35rem);
    line-height: 1.2;
    margin-bottom: 10px;
}
.aboutHero__text {
    color: var(--muted);
    font-size: 1.12rem;
    margin: 14px 0 18px;
    max-width: 70ch;
}

/* actions */
.aboutHero__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
    margin-bottom: 12px;
}

.aboutHero__badges {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.aboutPill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(35, 64, 150, 0.14);
    background: rgba(35, 64, 150, 0.06);
    font-family: f_bold;
    font-size: 0.92rem;
}
.aboutPill i {
    color: var(--brand-green);
}

/* media */
.aboutHero__media {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(35, 64, 150, 0.12);
    box-shadow: var(--shadow);
    min-height: 360px;
    background: #0b1220;
}
.aboutHero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    filter: saturate(1.05);
    transition: transform 0.5s ease;
}
.aboutHero__media:hover img {
    transform: scale(1.06);
}

.aboutHero__stamp {
    position: absolute;
    bottom: 14px;
    left: 14px;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
}
.stampNum {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(96, 188, 70, 0.16);
    border: 1px solid rgba(96, 188, 70, 0.35);
    font-family: f_bold;
    font-size: 1.25rem;
    color: var(--brand-blue);
}
.stampTxt {
    font-family: f_bold;
    line-height: 1.1;
}

/* VMV */
.vmvGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 50px;
}
@media (max-width: 992px) {
    .vmvGrid {
        grid-template-columns: 1fr;
    }
}

.vmvCard {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 18px 55px rgba(2, 6, 23, 0.1);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}
.vmvCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 70px rgba(2, 6, 23, 0.12);
    border-color: rgba(35, 64, 150, 0.18);
}
.vmvIcon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(35, 64, 150, 0.08);
    border: 1px solid rgba(35, 64, 150, 0.14);
    color: var(--brand-blue);
    font-size: 22px;
    margin-bottom: 10px;
}
.vmvTitle {
    font-family: f_bold;
    margin-bottom: 6px;
}
.vmvText {
    color: var(--muted);
}

/*  InfoGrid (قيمنا)  */
.sectionHead {
    margin-bottom: 14px;
}

.infoGrid__wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 50px;
}
@media (max-width: 992px) {
    .infoGrid__wrap {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    .infoGrid__wrap {
        grid-template-columns: 1fr;
    }
}

.infoCard {
    position: relative;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 22px;
    padding: 16px;
    box-shadow: 0 18px 55px rgba(2, 6, 23, 0.08);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
    overflow: hidden;
}

.infoCard::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 8px;
    background: var(--accent, var(--brand-blue));
    opacity: 0.9;
}

.infoCard__icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent, var(--brand-blue)) 12%, white);
    border: 1px solid
        color-mix(in srgb, var(--accent, var(--brand-blue)) 22%, transparent);
    color: var(--accent, var(--brand-blue));
    font-size: 22px;
    margin-bottom: 10px;
}
.infoCard__title {
    font-family: f_bold;
    margin-bottom: 6px;
}
.infoCard__text {
    color: var(--muted);
}

.infoCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 70px rgba(2, 6, 23, 0.12);
    border-color: rgba(35, 64, 150, 0.18);
}

/* Impact */
.impactBox {
    border-radius: 26px;
    border: 1px solid rgba(35, 64, 150, 0.12);
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.06),
        rgba(96, 188, 70, 0.07)
    );
    padding: 18px;
    box-shadow: 0 18px 55px rgba(2, 6, 23, 0.1);
    margin-bottom: 50px;
}

.impactGrid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 992px) {
    .impactGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    .impactGrid {
        grid-template-columns: 1fr;
    }
}

.impactStat {
    background: #fff;
    border: 1px solid rgba(100, 116, 139, 0.18);
    border-radius: 20px;
    padding: 16px;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}
.impactStat:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 60px rgba(2, 6, 23, 0.1);
    border-color: rgba(35, 64, 150, 0.18);
}
.impactNum {
    font-family: f_bold;
    font-size: 1.7rem;
    color: var(--brand-blue);
}
.impactLabel {
    color: var(--muted);
    font-family: f_bold;
}

.timeline {
    margin-bottom: 100px !important;
}
/* Timeline (مع خط عمودي) */
.timelineList {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}
.timelineList::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 12px; /* RTL */
    width: 2px;
    background: rgba(35, 64, 150, 0.12);
}

.tItem {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 12px;
    align-items: start;
    position: relative;
}

.tDot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--brand-green);
    margin-top: 18px;
    box-shadow: 0 10px 25px rgba(96, 188, 70, 0.3);
    position: relative;
    right: 6px;
}

.tCard {
    border: 1px solid rgba(35, 64, 150, 0.12);
    background: #fff;
    border-radius: 22px;
    padding: 16px;
    box-shadow: 0 18px 55px rgba(2, 6, 23, 0.08);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}
.tCard:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 70px rgba(2, 6, 23, 0.12);
    border-color: rgba(35, 64, 150, 0.18);
}

.tYear {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 14px;
    background: rgba(35, 64, 150, 0.08);
    border: 1px solid rgba(35, 64, 150, 0.14);
    color: var(--brand-blue);
    font-family: f_bold;
    margin-bottom: 8px;
}
.tTitle {
    font-family: f_bold;
    margin-bottom: 6px;
}
.tText {
    color: var(--muted);
}

/* CTA */
.ctaBox {
    border-radius: 26px;
    border: 1px solid rgba(96, 188, 70, 0.22);
    background:
        radial-gradient(
            800px 250px at 85% 25%,
            rgba(96, 188, 70, 0.16),
            transparent 60%
        ),
        radial-gradient(
            800px 250px at 15% 35%,
            rgba(35, 64, 150, 0.14),
            transparent 60%
        ),
        #fff;
    box-shadow: 0 18px 55px rgba(2, 6, 23, 0.1);
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.ctaTitle {
    font-family: f_bold;
    font-size: 1.35rem;
}
.ctaText {
    color: var(--muted);
    max-width: 640px;
}
.ctaActions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* INITIATIVES PAGE + DETAILS */

/* Page hero */
.pageHero {
    padding: 28px 0 10px;
}
.pageHero__wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch;
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.06),
        rgba(96, 188, 70, 0.08)
    );
    border: 1px solid rgba(35, 64, 150, 0.1);
    border-radius: 26px;
    padding: 18px;
}
@media (max-width: 900px) {
    .pageHero__wrap {
        grid-template-columns: 1fr;
    }
}

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: f_bold;
    color: var(--brand-blue);
    background: rgba(35, 64, 150, 0.08);
    border: 1px solid rgba(35, 64, 150, 0.12);
    padding: 8px 12px;
    border-radius: 999px;
    width: fit-content;
    margin-bottom: 10px;
}

.pageHero__title {
    font-family: f_bold;
    font-size: 2rem;
    line-height: 1.2;
}
.pageHero__desc {
    color: var(--muted);
    margin-top: 10px;
    max-width: 58ch;
}

.pageHero__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.pageHero__card {
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 14px 34px rgba(2, 6, 23, 0.08);
    padding: 14px;
    display: grid;
    gap: 10px;
    align-content: center;
}
.miniStat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px 12px;
    border-radius: 16px;
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.04),
        rgba(96, 188, 70, 0.06)
    );
    border: 1px solid rgba(35, 64, 150, 0.08);
}
.miniStat__num {
    font-family: f_bold;
    font-size: 1.35rem;
    color: var(--brand-blue);
}
.miniStat__label {
    color: var(--muted);
}

/* Head */
.sectionHead {
    margin: 18px 0 14px;
}

/* Initiatives grid */
.initiativesPage {
    margin: 30px 0 100px;
}

.iniGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 992px) {
    .iniGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .iniGrid {
        grid-template-columns: 1fr;
    }
}

.iniCard {
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 14px 34px rgba(2, 6, 23, 0.08);
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.25s ease;
    display: flex;
    flex-direction: column;
}

.iniCard__media {
    position: relative;
    height: 190px;
    overflow: hidden;
    background: #0b1220;
}
.iniCard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: 0.45s ease;
}

.iniChip {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.45);
    font-family: f_bold;
    color: var(--brand-blue);
}
.iniChip--green {
    color: var(--brand-green);
}
.iniChip--blue {
    color: var(--brand-blue);
}

.iniCard__body {
    padding: 16px 16px 18px;
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.04),
        rgba(96, 188, 70, 0.06)
    );
    border-top: 1px solid rgba(35, 64, 150, 0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.iniCard__title {
    font-family: f_bold;
    font-size: 1.1rem;
    line-height: 1.35;
}
.iniCard__text {
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.iniCard__meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.95rem;
}
.iniCard__meta i {
    color: var(--brand-blue);
    margin-inline-start: 2px;
}

.iniCard__cta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: f_bold;
    color: var(--brand-blue);
}
.iniCard__cta i {
    transition: 0.2s;
}

.iniCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 60px rgba(2, 6, 23, 0.12);
    border-color: rgba(35, 64, 150, 0.18);
}
.iniCard:hover .iniCard__media img {
    transform: scale(1.08);
}
.iniCard:hover .iniCard__cta i {
    transform: translateX(-6px);
}

/*  Details page  */
.detailHero {
    padding: 24px 0 10px;
}
.detailHero__crumbs {
    color: var(--muted);
    margin-bottom: 10px;
}
.detailHero__crumbs a {
    color: var(--brand-blue);
    font-family: f_bold;
}

.detailHero__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 18px;
    align-items: center;
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.06),
        rgba(96, 188, 70, 0.08)
    );
    border: 1px solid rgba(35, 64, 150, 0.1);
    border-radius: 26px;
    padding: 18px;
}
@media (max-width: 900px) {
    .detailHero__grid {
        grid-template-columns: 1fr;
    }
}

.detailHero__title {
    font-family: f_bold;
    font-size: 2rem;
    line-height: 1.2;
}
.detailHero__desc {
    color: var(--muted);
    margin-top: 10px;
    max-width: 60ch;
}

.detailBadges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.45);
    font-family: f_bold;
    color: var(--brand-blue);
}
.pill i {
    color: var(--brand-blue);
}

.detailHero__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.detailHero__media {
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 18px 46px rgba(2, 6, 23, 0.1);
    background: #0b1220;
}
.detailHero__media img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}
@media (max-width: 640px) {
    .detailHero__media img {
        height: 240px;
    }
}

.detailBody {
    margin: 18px 0 90px;
}
.detailLayout {
    display: grid;
    /* grid-template-columns: 1fr 0.5fr; */
        grid-template-columns: 1.6fr 0.95fr;

    gap: 18px;
    align-items: start;
}
@media (max-width: 992px) {
    .detailLayout {
        grid-template-columns: 1fr;
    }
}

.detailMain {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 14px 34px rgba(2, 6, 23, 0.08);
    padding: 18px;
}

.iniDetail h2,
.iniDetail h3 {
    font-family: f_bold;
    margin: 10px 0;
}
.iniDetail p {
    color: var(--muted);
}

.listCheck {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}
.listCheck li {
    position: relative;
    padding-inline-start: 34px;
    color: var(--muted);
}
.listCheck li:before {
    content: "\f00c";
    font-family: FontAwesome;
    position: absolute;
    right: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(96, 188, 70, 0.14);
    color: var(--brand-green);
    border: 1px solid rgba(96, 188, 70, 0.24);
}

.detailCards {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 900px) {
    .detailCards {
        grid-template-columns: 1fr;
    }
}

.miniCard {
    display: flex;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.04),
        rgba(96, 188, 70, 0.06)
    );
    border: 1px solid rgba(35, 64, 150, 0.1);
}
.miniCard i {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(35, 64, 150, 0.08);
    color: var(--brand-blue);
    flex: 0 0 auto;
}
.miniCard strong {
    font-family: f_bold;
}
.miniCard p {
    color: var(--muted);
    margin-top: 6px;
}

.detailSide {
    display: grid;
    gap: 12px;
}
.sideCard {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 14px 34px rgba(2, 6, 23, 0.08);
    padding: 16px;
}
.sideCard--soft {
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.04),
        rgba(96, 188, 70, 0.06)
    );
    border: 1px solid rgba(35, 64, 150, 0.1);
}
.sideCard h3 {
    font-family: f_bold;
    margin-bottom: 10px;
}
.sideCard p {
    color: var(--muted);
}

.sideRow {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(2, 6, 23, 0.06);
}
.sideRow:last-child {
    border-bottom: none;
}
.sideRow span {
    color: var(--muted);
}

/* PROGRAMS PAGE */

.pageHero--programs .kicker {
    background: rgba(96, 188, 70, 0.14);
    border-color: rgba(96, 188, 70, 0.28);
    color: var(--brand-blue);
}

.programsPage {
    margin: 30px 0 100px;
}
.programFeatures {
    margin-bottom: 75px;
}

/*
 */
/*
   PROGRAM SUGGESTIONS
 */

.programSuggestions {
    background: #f7f9fc;
    margin-bottom: 75px;
    padding: 5px 0px 30px 0px;
}

.suggestGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 30px;
}

.suggestCard {
    background: #fff;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    transition: 0.25s;
    border-top: 4px solid #234096;
}

.suggestCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.08);
}

.suggestCard__top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.suggestBadge {
    background: #234096;
    color: #fff;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 20px;
}

.suggestType {
    font-size: 12px;
    color: #777;
}

.suggestTitle {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1e293b;
}

.suggestText {
    font-size: 14px;
    color: #555;
    margin-bottom: 12px;
    line-height: 1.6;
}

.suggestList {
    padding-left: 18px;
}

.suggestList li {
    font-size: 13px;
    margin-bottom: 6px;
    color: #444;
}

.noSuggestions {
    text-align: center;
    padding: 40px;
    grid-column: 1/-1;
    color: #666;
}
/*
 */
/* Grid */
.progGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

@media (max-width: 992px) {
    .progGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .progGrid {
        grid-template-columns: 1fr;
    }
}

/* Big card */
.progBigCard {
    --accent: var(--brand-blue);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 26px;
    overflow: hidden;
    padding: 16px;
    box-shadow: 0 14px 34px rgba(2, 6, 23, 0.08);
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    cursor: pointer;
    transition: 0.25s ease;
}

.progBigCard:hover {
    transform: translateY(-4px);
}

.progBigCard:before {
    content: "";
    position: absolute;
    inset: -2px;
    background: radial-gradient(
        800px 220px at 80% 0%,
        color-mix(in srgb, var(--accent) 18%, transparent),
        transparent 60%
    );
    pointer-events: none;
}

.progBigCard__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.progBigCard__icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 14%, white);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    font-size: 22px;
}

.progBigCard__tag {
    font-family: f_bold;
    font-size: 0.9rem;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(35, 64, 150, 0.08);
    border: 1px solid rgba(35, 64, 150, 0.12);
    color: var(--brand-blue);
    direction: ltr;
}

.progBigCard__title {
    font-family: f_bold;
    font-size: 1.15rem;
    line-height: 1.35;
    position: relative;
    z-index: 1;
}

.progBigCard__text {
    color: var(--muted);
    position: relative;
    z-index: 1;
}

.progPoints {
    display: grid;
    gap: 10px;
    margin-top: 2px;
    position: relative;
    z-index: 1;
}

.progPoint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 18px;
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.04),
        rgba(96, 188, 70, 0.06)
    );
    border: 1px solid rgba(35, 64, 150, 0.08);
    color: var(--muted);
}

.progPoint i {
    color: var(--accent);
    margin-top: 2px;
}

.progBigCard__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
    position: relative;
    z-index: 1;
}

.progBigCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 60px rgba(2, 6, 23, 0.12);
    border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}

/* CONTACT PAGE */

.pageHero--contact .kicker {
    background: rgba(35, 64, 150, 0.08);
    border-color: rgba(35, 64, 150, 0.14);
    color: var(--brand-blue);
}

.contactPage {
    margin: 30px 0 100px;
}

.contactGrid {
    display: grid;
    grid-template-columns: 1.35fr 0.85fr;
    gap: 18px;
    align-items: start;
}

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

.contactCard {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 26px;
    box-shadow: 0 18px 44px rgba(2, 6, 23, 0.08);
    padding: 16px;
    overflow: hidden;
    position: relative;
}

.contactCard:before {
    content: "";
    position: absolute;
    inset: -2px;
    background: radial-gradient(
        900px 260px at 85% 0%,
        rgba(96, 188, 70, 0.14),
        transparent 60%
    );
    pointer-events: none;
}

.contactCard__head {
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
}

.form {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.formGrid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 640px) {
    .formGrid2 {
        grid-template-columns: 1fr;
    }
}

.formRow {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.formLabel {
    font-family: f_bold;
    font-size: 0.95rem;
}

.formControl {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.05);
    transition: 0.2s;
}

.formControl:focus-within {
    border-color: rgba(35, 64, 150, 0.25);
    box-shadow: 0 16px 34px rgba(35, 64, 150, 0.1);
}

.formIcon {
    color: var(--brand-blue);
    opacity: 0.9;
    min-width: 18px;
    text-align: center;
}

.formControl input,
.formControl select,
.formControl textarea {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: f_regular;
    color: var(--text);
    font-size: 1rem;
}

.formControl--textarea {
    align-items: flex-start;
}
.formControl--textarea .formIcon {
    margin-top: 3px;
}
.formControl textarea {
    resize: vertical;
    min-height: 120px;
}

.formActions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* Status */
.formStatus {
    color: var(--muted);
    font-family: f_bold;
}

/* Toggle */
.toggleLine {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.toggleLine input {
    display: none;
}

.toggleUI {
    width: 46px;
    height: 28px;
    background: #e5e7eb;
    border-radius: 999px;
    position: relative;
    border: 1px solid var(--border);
    transition: 0.2s;
}

.toggleUI:after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px; /* RTL */
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 20px rgba(2, 6, 23, 0.12);
    transition: 0.2s;
}

.toggleLine input:checked + .toggleUI {
    background: rgba(96, 188, 70, 0.3);
    border-color: rgba(96, 188, 70, 0.45);
}

.toggleLine input:checked + .toggleUI:after {
    right: 21px;
    background: #fff;
}

.toggleText {
    color: var(--muted);
}

/* Side */
.contactSide {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.infoCard {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 26px;
    box-shadow: 0 18px 44px rgba(2, 6, 23, 0.08);
    padding: 16px;
    position: relative;
    overflow: hidden;
}

.infoCard:before {
    content: "";
    position: absolute;
    inset: -2px;
    background: radial-gradient(
        700px 220px at 10% 0%,
        rgba(35, 64, 150, 0.1),
        transparent 55%
    );
    pointer-events: none;
}

.infoCard__title {
    font-family: f_bold;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}
.infoCard__subTitle {
    font-family: f_bold;
    margin-top: 6px;
    position: relative;
    z-index: 1;
}

.infoLine {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
    position: relative;
    z-index: 1;
}

.infoIcon {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(35, 64, 150, 0.08);
    color: var(--brand-blue);
    border: 1px solid rgba(35, 64, 150, 0.12);
    flex: 0 0 auto;
}

.infoLabel {
    color: var(--muted);
    font-size: 0.9rem;
}
.infoValue {
    font-family: f_bold;
}

.infoDivider {
    height: 1px;
    background: var(--border);
    margin: 8px 0 10px;
    position: relative;
    z-index: 1;
}

.socialRow {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.socialBtn {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-blue);
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.06);
    transition: 0.2s;
}

.socialBtn:hover {
    transform: translateY(-2px);
    border-color: rgba(35, 64, 150, 0.22);
    background: rgba(35, 64, 150, 0.06);
}

/* Hint */
.hintCard {
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.06),
        rgba(96, 188, 70, 0.08)
    );
    border: 1px solid rgba(35, 64, 150, 0.1);
    border-radius: 26px;
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    box-shadow: 0 18px 44px rgba(2, 6, 23, 0.06);
}

.hintCard__icon {
    width: 46px;
    height: 46px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(96, 188, 70, 0.18);
    border: 1px solid rgba(96, 188, 70, 0.3);
    color: var(--brand-green);
    flex: 0 0 auto;
}

.hintCard__title {
    font-family: f_bold;
    margin-bottom: 4px;
}
.hintCard__text {
    color: var(--muted);
}

/* ACTIVITIES PAGE */

.pageHero--activities .kicker {
    background: rgba(96, 188, 70, 0.14);
    border-color: rgba(96, 188, 70, 0.22);
    color: var(--brand-blue);
}

.activitiesPage {
    margin: 30px 0 100px;
}

.activitiesHead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

@media (max-width: 900px) {
    .activitiesHead {
        flex-direction: column;
        align-items: flex-start;
    }
}

.activitiesFilters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filterPill {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    font-family: f_bold;
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.06);
    display: flex;
    align-items: center;
    gap: 8px;
}

.chip {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    font-family: f_bold;
    cursor: pointer;
    transition: 0.2s;
}

.chip:hover {
    transform: translateY(-1px);
}

.chip.is-active {
    background: rgba(35, 64, 150, 0.1);
    border-color: rgba(35, 64, 150, 0.22);
    color: var(--brand-blue);
}
/*  */
.moreCatsWrap {
    position: relative;
    display: inline-block;
}

.moreCatsMenu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    padding: 10px;
    gap: 8px;
    min-width: 200px;

    display: none;
}

.moreCatsMenu.is-open {
    display: grid;
}

.moreCatsMenu .chip {
    width: 100%;
    justify-content: flex-start;
}
/*  */
/* Grid */
.activitiesGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

@media (max-width: 992px) {
    .activitiesGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .activitiesGrid {
        grid-template-columns: 1fr;
    }
}

/* Card */
.actCard {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 18px 44px rgba(2, 6, 23, 0.08);
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.2s ease;
    color: inherit;
}

.actCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 70px rgba(2, 6, 23, 0.12);
    border-color: rgba(35, 64, 150, 0.18);
}

.actCard__media {
    height: 190px;
    background: #0b1220;
    position: relative;
    overflow: hidden;
}

.actCard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition:
        transform 0.45s ease,
        filter 0.45s ease;
    filter: saturate(1.02);
}

.actCard:hover .actCard__media img {
    transform: scale(1.07);
    filter: saturate(1.1);
}

/* Badge */
.actBadge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 7px 12px;
    border-radius: 999px;
    font-family: f_bold;
    font-size: 0.9rem;
    color: #fff;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(6px);
}

.actBadge--green {
    background: rgba(96, 188, 70, 0.85);
}
.actBadge--blue {
    background: rgba(35, 64, 150, 0.88);
}
.actBadge--violet {
    background: rgba(124, 58, 237, 0.85);
}

/* Body */
.actCard__body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.05),
        rgba(96, 188, 70, 0.06)
    );
    border-top: 1px solid rgba(35, 64, 150, 0.08);
}

.actMeta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 0.92rem;
}

.dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(100, 116, 139, 0.55);
}

.actCard__title {
    font-family: f_bold;
    line-height: 1.35;
    font-size: 1.05rem;
}

.actCard__text {
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.actCard__cta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: f_bold;
    color: var(--brand-blue);
}

.actCard__cta i {
    transition: 0.22s;
}
.actCard:hover .actCard__cta i {
    transform: translateX(-6px);
}

/* Load More */
.loadMoreWrap {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.btn--loadMore {
    min-width: 220px;
    justify-content: center;
}

.btn--loadMore[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.loadHint {
    color: var(--muted);
    font-family: f_bold;
}

/* ACTIVITY DETAILS */

.activityDetails {
    margin: 30px 0 100px;
}

.detailsTop {
    margin-bottom: 12px;
}

.detailsCard {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 22px 60px rgba(2, 6, 23, 0.1);
}

.detailsMedia {
    height: 340px;
    background: #0b1220;
    position: relative;
    overflow: hidden;
}

.detailsMedia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.detailsBadge {
    position: absolute;
    bottom: 14px;
    right: 14px;
    padding: 8px 14px;
    border-radius: 999px;
    font-family: f_bold;
    color: #fff;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
}

.detailsBody {
    padding: 16px;
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.05),
        rgba(96, 188, 70, 0.06)
    );
    border-top: 1px solid rgba(35, 64, 150, 0.08);
}

.detailsMeta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.detailsTitle {
    font-family: f_bold;
    line-height: 1.25;
    font-size: 1.6rem;
    margin-bottom: 8px;
}

.detailsDesc {
    color: var(--muted);
    margin-bottom: 14px;
}

.detailsBox {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 14px;
    box-shadow: 0 14px 34px rgba(2, 6, 23, 0.06);
    margin-bottom: 14px;
}

.detailsBox h3 {
    font-family: f_bold;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.detailsBox ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.detailsBox li {
    padding: 8px 0;
    color: var(--muted);
    border-bottom: 1px dashed rgba(100, 116, 139, 0.25);
}

.detailsBox li:last-child {
    border-bottom: 0;
}

.detailsActions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .detailsMedia {
        height: 240px;
    }
    .detailsTitle {
        font-size: 1.35rem;
    }
}

/* CAMPAIGNS PAGE */

.pageHero--campaigns .kicker {
    background: rgba(35, 64, 150, 0.1);
    border-color: rgba(35, 64, 150, 0.18);
    color: var(--brand-blue);
}

.campaignsPage {
    margin: 30px 0 100px;
}

.campaignsGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

@media (max-width: 992px) {
    .campaignsGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .campaignsGrid {
        grid-template-columns: 1fr;
    }
}

.campCard {
    display: flex;
    flex-direction: column;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: 0 20px 60px rgba(2, 6, 23, 0.08);
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.2s ease;
    color: inherit;
}

.campCard:hover {
    transform: translateY(-7px);
    box-shadow: 0 30px 84px rgba(2, 6, 23, 0.12);
    border-color: rgba(35, 64, 150, 0.18);
}

.campCard__media {
    height: 190px;
    background: #0b1220;
    position: relative;
    overflow: hidden;
}

.campCard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.campCard:hover .campCard__media img {
    transform: scale(1.08);
}

.campBadge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 8px 14px;
    border-radius: 999px;
    font-family: f_bold;
    color: #fff;
    background: rgba(96, 188, 70, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
}

.campBadge--blue {
    background: rgba(35, 64, 150, 0.88);
}
.campBadge--amber {
    background: rgba(245, 158, 11, 0.88);
}

.campCard__body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.05),
        rgba(96, 188, 70, 0.06)
    );
    border-top: 1px solid rgba(35, 64, 150, 0.08);
}

.campMeta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.campGoal,
.campStatus {
    font-family: f_bold;
    font-size: 0.92rem;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(35, 64, 150, 0.12);
    background: rgba(255, 255, 255, 0.75);
    color: var(--brand-blue);
    display: flex;
    align-items: center;
    gap: 8px;
}

.campTitle {
    font-family: f_bold;
    line-height: 1.35;
    font-size: 1.05rem;
}

.campText {
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.campCta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: f_bold;
    color: var(--brand-blue);
}

.campCta i {
    transition: 0.22s;
}
.campCard:hover .campCta i {
    transform: translateX(-6px);
}

/* تفاصيل الحملة */
.campDetails {
    margin: 30px 0 60px;
}

.miniProgram {
    color: var(--muted);
    font-family: f_bold;
}

/* related wrap spacing */
.relatedWrap {
    margin-top: 18px;
}
.relatedHead {
    margin-bottom: 12px;
}

/* ADS PAGE */
.pageHero--ads .kicker {
    background: rgba(96, 188, 70, 0.12);
    border-color: rgba(96, 188, 70, 0.22);
    color: var(--brand-blue);
}

.adsPage {
    margin: 30px 0 100px;
}

.adsHead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.adsFilter {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.chip {
    height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    font-family: f_bold;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.06);
}
.chip:hover {
    transform: translateY(-2px);
}
.chip.is-active {
    background: rgba(35, 64, 150, 0.1);
    border-color: rgba(35, 64, 150, 0.22);
    color: var(--brand-blue);
}

.adsGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 992px) {
    .adsGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .adsGrid {
        grid-template-columns: 1fr;
    }
}

.adCard {
    border: 1px solid var(--border);
    border-radius: 22px;
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.05),
        rgba(96, 188, 70, 0.06)
    );
    box-shadow: 0 20px 60px rgba(2, 6, 23, 0.08);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.2s ease;
    color: inherit;
}
.adCard:hover {
    transform: translateY(-7px);
    box-shadow: 0 30px 84px rgba(2, 6, 23, 0.12);
    border-color: rgba(35, 64, 150, 0.18);
}

.adCard__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.adTag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    font-family: f_bold;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
}
.adTag--blue {
    background: rgba(35, 64, 150, 0.88);
}
.adTag--green {
    background: rgba(96, 188, 70, 0.88);
}
.adTag--amber {
    background: rgba(245, 158, 11, 0.88);
}
.adTag--purple {
    background: rgba(99, 102, 241, 0.88);
}

.adDate {
    color: var(--muted);
    font-family: f_bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.adTitle {
    font-family: f_bold;
    line-height: 1.35;
    font-size: 1.05rem;
}

.adText {
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.adCta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: f_bold;
    color: var(--brand-blue);
}
.adCta i {
    transition: 0.22s;
}
.adCard:hover .adCta i {
    transform: translateX(-6px);
}

/* Empty state */
.adsEmpty {
    margin-top: 16px;
    padding: 14px;
    border-radius: 18px;
    border: 1px dashed rgba(35, 64, 150, 0.18);
    background: rgba(35, 64, 150, 0.04);
    color: var(--muted);
    font-family: f_bold;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}
.adsEmpty i {
    color: var(--brand-blue);
}

/* تفاصيل إعلان */
.adDetails {
    margin: 30px 0 80px;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    font-family: f_bold;
    border: 1px solid rgba(35, 64, 150, 0.14);
    background: #fff;
    color: var(--brand-blue);
}
.pill--blue {
    background: rgba(35, 64, 150, 0.1);
    border-color: rgba(35, 64, 150, 0.22);
}
.pill--green {
    background: rgba(96, 188, 70, 0.12);
    border-color: rgba(96, 188, 70, 0.22);
}
.pill--amber {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.22);
}
.pill--purple {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.22);
}

/* PARTNERS PAGE */
.pageHero--partners .kicker {
    background: rgba(35, 64, 150, 0.1);
    border-color: rgba(35, 64, 150, 0.18);
    color: var(--brand-blue);
}

.partnersPage {
    margin: 30px 0 100px;
}

.partnersGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 992px) {
    .partnersGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .partnersGrid {
        grid-template-columns: 1fr;
    }
}

.partnerCard {
    border: 1px solid var(--border);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(2, 6, 23, 0.08);
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.2s ease;
    color: inherit;
}

.partnerCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 84px rgba(2, 6, 23, 0.12);
    border-color: rgba(35, 64, 150, 0.18);
}

.partnerLogo {
    width: 86px;
    height: 86px;
    border-radius: 20px;
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.06),
        rgba(96, 188, 70, 0.08)
    );
    border: 1px solid rgba(35, 64, 150, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.partnerLogo img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    display: block;
    filter: saturate(1.05);
}

.partnerInfo h3 {
    font-family: f_bold;
    line-height: 1.25;
    margin-bottom: 6px;
    font-size: 1.05rem;
}

.partnerInfo p {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/*
   404 PAGE
 */
.card404 {
    max-width: 820px;
    margin: 40px auto;
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.06),
        rgba(96, 188, 70, 0.07)
    );
    border: 1px solid rgba(35, 64, 150, 0.12);
    border-radius: 26px;
    padding: 28px;
    text-align: center;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.card404::before {
    content: "";
    position: absolute;
    inset: -60px -80px auto auto;
    width: 240px;
    height: 240px;
    border-radius: 999px;
    background: rgba(35, 64, 150, 0.1);
    filter: blur(0px);
}

.card404::after {
    content: "";
    position: absolute;
    inset: auto auto -70px -70px;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: rgba(96, 188, 70, 0.1);
}

.card404__top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.card404__icon {
    width: 74px;
    height: 74px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    font-size: 28px;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.card404__code {
    font-family: f_bold;
    font-size: 48px;
    letter-spacing: 2px;
    color: rgba(35, 64, 150, 0.35);
}

.card404__title {
    font-family: f_bold;
    font-size: 1.55rem;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.card404__text {
    color: var(--muted);
    margin: 0 auto 18px;
    max-width: 62ch;
    position: relative;
    z-index: 1;
}

.card404__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.card404__links {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.chipLink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: f_bold;
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.06);
    transition: 0.2s ease;
}
.chipLink:hover {
    transform: translateY(-2px);
    border-color: rgba(35, 64, 150, 0.2);
    color: var(--brand-blue);
}

@media (max-width: 560px) {
    .card404 {
        padding: 22px;
    }
    .card404__code {
        font-size: 40px;
    }
}

/*  PAGES: Volunteer / Donate / Program */

.volunteerPage .page {
    padding: 0;
}

/*  Page Hero  */
.volunteerPage .pageHero {
    padding: 34px 0 26px;
    margin-bottom: 12px;
    overflow: hidden;
}

.volunteerPage .pageHero--compact {
    padding: 28px 0 16px;
}

.volunteerPage .pageHero__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 18px;
    align-items: stretch;
    margin-bottom: 50px;
}

@media (max-width: 950px) {
    .volunteerPage .pageHero__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

.volunteerPage .pageHero__title {
    font-family: f_bold;
    font-size: clamp(26px, 3.2vw, 46px);
    line-height: 1.25;
    margin: 12px 0 10px;
}

.volunteerPage .pageHero__desc {
    color: var(--muted);
    font-size: 1.08rem;
    max-width: 60ch;
    margin: 0 0 12px;
}

.volunteerPage .pageHero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.volunteerPage .metaItem {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.06);
    font-family: f_bold;
}
.volunteerPage .metaItem i {
    color: var(--brand-green);
}

/*  Hero Card  */
.volunteerPage .pageHero__card {
    border: 1px solid var(--border);
    border-radius: 22px;
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.06),
        rgba(96, 188, 70, 0.06)
    );
    box-shadow: 0 0 60px rgba(2, 6, 23, 0.1);
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 520px) {
    .volunteerPage .pageHero__card {
        grid-template-columns: 1fr;
    }
}

.volunteerPage .miniStat {
    background: #fff;
    border: 1px solid rgba(35, 64, 150, 0.1);
    border-radius: 18px;
    padding: 12px;
    text-align: center;
}
.volunteerPage .miniStat__num {
    font-family: f_bold;
    color: var(--brand-blue);
    font-size: 1.3rem;
}
.volunteerPage .miniStat__label {
    color: var(--muted);
    font-family: f_bold;
    font-size: 0.92rem;
    margin-top: 4px;
}

/*  Sections spacing   */
.volunteerPage .section {
    padding: 0 0 40px 0;
}
.volunteerPage .section + .section {
    padding-top: 16px;
}
.volunteerPage .sectionHead {
    margin-bottom: 14px;
}
.volunteerPage .sectionHead .section__desc {
    margin-top: 6px;
}

/*  Volunteer Types */

.volunteerPage .vTypes__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 14px;
    align-items: stretch;
}

@media (max-width: 1100px) {
    .volunteerPage .vTypes__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .volunteerPage .vTypes__grid {
        grid-template-columns: 1fr;
    }
}

.volunteerPage .vTypeCard {
    text-align: right;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(2, 6, 23, 0.08);
    padding: 18px 16px;
    cursor: pointer;
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.2s ease;
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 220px;
}

@media (max-width: 640px) {
    .volunteerPage .vTypeCard {
        min-height: 200px;
    }
}

.volunteerPage .vTypeCard::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 8px;
    background: color-mix(in srgb, var(--accent) 55%, white);
    opacity: 0.85;
}

.volunteerPage .vTypeCard::after {
    content: "";
    position: absolute;
    inset: -40px -60px auto auto;
    width: 150px;
    height: 150px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    filter: blur(0px);
    opacity: 0.8;
    pointer-events: none;
}

.volunteerPage .vTypeCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 70px rgba(2, 6, 23, 0.12);
    border-color: rgba(35, 64, 150, 0.16);
}

.volunteerPage .vTypeCard.is-active {
    border-color: color-mix(in srgb, var(--accent) 45%, white);
    box-shadow: 0 28px 80px rgba(2, 6, 23, 0.14);
}

.volunteerPage .vTypeCard__icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 14%, white);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, white);
    font-size: 20px;
}

.volunteerPage .vTypeCard__title {
    font-family: f_bold;
    margin: 2px 0 0;
    font-size: 1.08rem;
}

.volunteerPage .vTypeCard__text {
    color: var(--muted);
    margin: 0;
    line-height: 1.6;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.volunteerPage .vTypeCard__tag {
    margin-top: auto;
    display: inline-flex;
    align-self: flex-start;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(35, 64, 150, 0.12);
    background: rgba(35, 64, 150, 0.06);
    color: var(--brand-blue);
    font-family: f_bold;
    font-size: 0.9rem;
}

/*  Chips  */
.volunteerPage .chipRow {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.volunteerPage .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    background: #fff;
    padding: 10px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-family: f_bold;
    transition: 0.2s;
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.06);
}
.volunteerPage .chip i {
    color: var(--brand-blue);
}
.volunteerPage .chip:hover {
    transform: translateY(-2px);
}
.volunteerPage .chip.is-active {
    background: rgba(96, 188, 70, 0.14);
    border-color: rgba(96, 188, 70, 0.35);
}

/*  Examples  */
.volunteerPage .vExamples__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
@media (max-width: 900px) {
    .volunteerPage .vExamples__head {
        flex-direction: column;
        align-items: flex-start;
    }
}

.volunteerPage .vExamples__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 10px;
}
@media (max-width: 992px) {
    .volunteerPage .vExamples__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .volunteerPage .vExamples__grid {
        grid-template-columns: 1fr;
    }
}

.volunteerPage .exCard {
    border: 1px solid var(--border);
    border-radius: 22px;
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.05),
        rgba(96, 188, 70, 0.05)
    );
    box-shadow: 0 16px 40px rgba(2, 6, 23, 0.08);
    padding: 16px;
}
.volunteerPage .exCard__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.volunteerPage .exBadge {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(35, 64, 150, 0.1);
    border: 1px solid rgba(35, 64, 150, 0.16);
    font-family: f_bold;
    color: var(--brand-blue);
}
.volunteerPage .exBadge--relief {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.28);
    color: #7c5204;
}
.volunteerPage .exBadge--dev {
    background: rgba(96, 188, 70, 0.14);
    border-color: rgba(96, 188, 70, 0.3);
    color: var(--brand-blue);
}
.volunteerPage .exPill {
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: f_bold;
    font-size: 0.9rem;
}
.volunteerPage .exCard__title {
    font-family: f_bold;
    margin-top: 10px;
    line-height: 1.35;
}
.volunteerPage .exCard__text {
    color: var(--muted);
    margin-top: 8px;
}

.volunteerPage .exList {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}
.volunteerPage .exList li {
    color: var(--text);
    opacity: 0.92;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(100, 116, 139, 0.22);
}
.volunteerPage .exList li:last-child {
    border-bottom: 0;
}

/* Wrapper */
.chipMore {
    position: relative;
    display: inline-block;
}

/* زر المزيد */
#volMoreBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.2s ease;
}

#volMoreBtn.is-active {
    background: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
}

/* المنيو */
.chipMenu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.12);
    padding: 8px;
    z-index: 50;

    display: flex;
    flex-direction: column;
    gap: 6px;

    animation: fadeSlide 0.18s ease;
}

/* عناصر المنيو */
.chipMenu__item {
    display: flex;
    align-items: center;
    gap: 8px;

    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;

    font-size: 14px;
    text-align: right;
    transition: 0.2s ease;
}

.chipMenu__item i {
    font-size: 14px;
    opacity: 0.7;
}

/* Hover */
.chipMenu__item:hover {
    background: rgba(35, 64, 150, 0.06);
    border-color: rgba(35, 64, 150, 0.1);
}

/* Active */
.chipMenu__item.is-active {
    background: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
}

.chipMenu__item.is-active i {
    opacity: 1;
}

/* Animation */
@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chipMore {
    position: relative;
    display: inline-block;
}

.chipMenu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.1);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 1000;
}

.chip--dropdown {
    width: 100%;
    justify-content: flex-start;
}

.chip--dropdown.is-active {
    background: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
}

.chipMenu[hidden] {
    display: none !important;
}

/* end */
/*  Form + Preview  */
.vForm__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 14px;
    align-items: start;
}
@media (max-width: 950px) {
    .vForm__grid {
        grid-template-columns: 1fr;
    }
}

.formCard,
.previewCard,
.payCard,
.donateSummary {
    border: 1px solid var(--border);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 60px rgba(2, 6, 23, 0.1);
    padding: 16px;
}
.formCard__title {
    font-family: f_bold;
    font-size: 1.25rem;
}
.formCard__desc {
    color: var(--muted);
    margin-top: 6px;
}

.formGrid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (max-width: 640px) {
    .formGrid {
        grid-template-columns: 1fr;
    }
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
.field span {
    font-family: f_bold;
}
.field input,
.field select,
.field textarea {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 12px 12px;
    outline: none;
    font-family: f_regular;
    background: #fff;
    transition: 0.2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: rgba(96, 188, 70, 0.55);
    box-shadow: 0 0 0 4px rgba(96, 188, 70, 0.16);
}
.fieldHint {
    display: flex;
    justify-content: flex-end;
    color: var(--muted);
    font-size: 0.9rem;
}

.formActions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.formStatus {
    margin-top: 10px;
    color: var(--brand-blue);
    font-family: f_bold;
}

.previewCard {
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.06),
        rgba(96, 188, 70, 0.06)
    );
}
.previewCard__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.previewBadge {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(35, 64, 150, 0.1);
    border: 1px solid rgba(35, 64, 150, 0.16);
    color: var(--brand-blue);
    font-family: f_bold;
}
.previewType {
    color: var(--muted);
    font-family: f_bold;
}
.previewTitle {
    font-family: f_bold;
    margin-top: 10px;
}
.previewText {
    color: var(--text);
    opacity: 0.9;
    margin-top: 10px;
}
.previewMeta {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}
.pItem {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pItem i {
    color: var(--brand-green);
}
.previewNote {
    margin-top: 12px;
    color: var(--muted);
    font-size: 0.92rem;
}

/*  Donate  */
.donateToggles {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.toggleBtn {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 999px;
    padding: 10px 14px;
    font-family: f_bold;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.06);
}
.toggleBtn.is-active {
    background: rgba(96, 188, 70, 0.14);
    border-color: rgba(96, 188, 70, 0.35);
}
.donateSummary {
    height: 100%;
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.06),
        rgba(96, 188, 70, 0.06)
    );
}
.sumRow {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(35, 64, 150, 0.12);
}
.sumRow:last-child {
    border-bottom: none;
}
.sumHint {
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.9rem;
}

.donateGrid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 14px;
    align-items: start;
}
@media (max-width: 950px) {
    .donateGrid {
        grid-template-columns: 1fr;
    }
}

.payCard__title {
    font-family: f_bold;
    font-size: 1.2rem;
}
.amountGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 12px;
}
@media (max-width: 640px) {
    .amountGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.amountBtn {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 16px;
    padding: 12px 10px;
    font-family: f_bold;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.06);
}
.amountBtn:hover {
    transform: translateY(-2px);
}
.amountBtn.is-active {
    background: rgba(35, 64, 150, 0.1);
    border-color: rgba(35, 64, 150, 0.2);
    color: var(--brand-blue);
}

.payNote {
    margin-top: 12px;
    color: var(--muted);
    display: flex;
    gap: 10px;
    align-items: center;
}
.payNote i {
    color: var(--brand-green);
}

.payTabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.payTab {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 999px;
    padding: 10px 12px;
    font-family: f_bold;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.06);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.payTab i {
    color: var(--brand-blue);
}
.payTab.is-active {
    background: rgba(96, 188, 70, 0.14);
    border-color: rgba(96, 188, 70, 0.35);
}
.payPanels {
    margin-top: 12px;
}
.payPanel {
    border: 1px solid rgba(35, 64, 150, 0.1);
    border-radius: 18px;
    padding: 14px;
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.04),
        rgba(96, 188, 70, 0.04)
    );
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.06);
}
.panelText {
    color: var(--muted);
    margin-bottom: 10px;
}
.payCTA {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.walletGrid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.walletBtn {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 999px;
    padding: 10px 12px;
    font-family: f_bold;
    cursor: pointer;
    transition: 0.2s;
}
.walletBtn:hover {
    transform: translateY(-2px);
}

.bankBox {
    border: 1px dashed rgba(35, 64, 150, 0.2);
    border-radius: 16px;
    padding: 12px;
    background: #fff;
    display: grid;
    gap: 6px;
}
.paypalBox {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(35, 64, 150, 0.12);
}
.paypalBox i {
    font-size: 28px;
    color: #003087;
}
.muted {
    color: var(--muted);
    font-size: 0.92rem;
}

/*  Program blocks  */
.page {
    padding: 0;
}
.pageHero {
    padding: 46px 0 24px;
    margin-bottom: 22px;
    overflow: hidden;
}
.pageHero--compact {
    padding: 38px 0 16px;
}

.pageHero__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 18px;
    align-items: stretch;
    margin-bottom: 50px;
}
@media (max-width: 950px) {
    .pageHero__grid {
        grid-template-columns: 1fr;
    }
}

.pageHero__title {
    font-family: f_bold;
    font-size: clamp(26px, 3.2vw, 46px);
    line-height: 1.25;
    margin: 10px 0 10px;
}
.pageHero__desc {
    color: var(--muted);
    font-size: 1.08rem;
    max-width: 60ch;
}
.pageHero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.metaItem {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.06);
    font-family: f_bold;
}
.metaItem i {
    color: var(--brand-green);
}

.pageHero__card {
    border: 1px solid var(--border);
    border-radius: 22px;
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.06),
        rgba(96, 188, 70, 0.06)
    );
    box-shadow: 0 22px 60px rgba(2, 6, 23, 0.1);
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 520px) {
    .pageHero__card {
        grid-template-columns: 1fr;
    }
}
.miniStat {
    background: #fff;
    border: 1px solid rgba(35, 64, 150, 0.1);
    border-radius: 18px;
    padding: 12px;
    text-align: center;
}
.miniStat__num {
    font-family: f_bold;
    color: var(--brand-blue);
    font-size: 1.3rem;
}
.miniStat__label {
    color: var(--muted);
    font-family: f_bold;
    font-size: 0.92rem;
    margin-top: 4px;
}

.sectionHead {
    margin-bottom: 14px;
}

.blockGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 992px) {
    .blockGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .blockGrid {
        grid-template-columns: 1fr;
    }
}

.infoCard {
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 16px;
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.06),
        rgba(96, 188, 70, 0.06)
    );
    box-shadow: 0 16px 40px rgba(2, 6, 23, 0.08);
    position: relative;
    overflow: hidden;
}
.infoCard::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 10px;
    background: color-mix(in srgb, var(--accent) 60%, white);
}
.infoCard h3 {
    font-family: f_bold;
    margin-bottom: 10px;
}
.niceList {
    display: grid;
    gap: 8px;
    color: var(--text);
    opacity: 0.92;
}

/*
   PROGRAMS: Steps + Features
 */

/* Steps (01..04) */
.stepsGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 50px;
}
@media (max-width: 1100px) {
    .stepsGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .stepsGrid {
        grid-template-columns: 1fr;
    }
}

.stepCard {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 44px rgba(2, 6, 23, 0.08);
    padding: 16px;
    overflow: hidden;
    transition: 0.25s;
}
.stepCard::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 10px;
    background: color-mix(in srgb, var(--accent) 60%, white);
}
.stepCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 70px rgba(2, 6, 23, 0.12);
    border-color: rgba(35, 64, 150, 0.16);
}

.stepNum {
    font-family: f_bold;
    font-size: 2.2rem;
    letter-spacing: 2px;
    color: color-mix(in srgb, var(--accent) 75%, black);
    opacity: 0.9;
}
.stepTitle {
    font-family: f_bold;
    margin-top: 6px;
}
.stepText {
    color: var(--muted);
    margin-top: 8px;
}
.stepIcon {
    margin-top: 12px;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 14%, white);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, white);
    color: var(--accent);
}

/* Features (محاور البرنامج 01..04) */
.featureGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
@media (max-width: 1100px) {
    .featureGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .featureGrid {
        grid-template-columns: 1fr;
    }
}

.featureCard {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.05),
        rgba(96, 188, 70, 0.05)
    );
    box-shadow: 0 16px 44px rgba(2, 6, 23, 0.08);
    padding: 16px;
    overflow: hidden;
    transition: 0.25s;
}
.featureCard::after {
    content: "";
    position: absolute;
    inset: auto -60px -60px auto;
    width: 160px;
    height: 160px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    filter: blur(0px);
}
.featureCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 70px rgba(2, 6, 23, 0.12);
}

.featureNo {
    font-family: f_bold;
    font-size: 2.3rem;
    color: color-mix(in srgb, var(--accent) 70%, black);
}
.featureTitle {
    font-family: f_bold;
    margin-top: 6px;
}
.featureText {
    color: var(--muted);
    margin-top: 8px;
}
.featureIcon {
    margin-top: 12px;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid rgba(35, 64, 150, 0.1);
    color: var(--accent);
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.06);
}

/*
   LEGAL PAGES (Privacy / Terms)
 */
.legalHero {
    padding: 40px 0 18px;
}

.legalHero__wrap {
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.06),
        rgba(96, 188, 70, 0.06)
    );
    border: 1px solid rgba(35, 64, 150, 0.1);
    border-radius: 26px;
    padding: 22px;
    box-shadow: 0 18px 50px rgba(2, 6, 23, 0.08);
}

.legalMeta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.legalContent {
    padding-top: 18px;
}

.legalGrid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 18px;
    align-items: start;
}

.legalToc {
    position: sticky;
    top: 92px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 14px;
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.06);
}

.legalToc__title {
    font-family: f_bold;
    margin-bottom: 10px;
    color: var(--brand-blue);
}

.legalToc__link {
    display: block;
    padding: 10px 12px;
    border-radius: 14px;
    color: var(--text);
    opacity: 0.92;
    transition: 0.2s;
    border: 1px solid transparent;
}

.legalToc__link:hover {
    background: rgba(35, 64, 150, 0.06);
    border-color: rgba(35, 64, 150, 0.12);
    color: var(--brand-blue);
}

.legalBody {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.legalCard {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.06);
}

.legalCard h2 {
    font-family: f_bold;
    font-size: 1.15rem;
    margin-bottom: 8px;
    color: var(--brand-blue);
}

.legalCard p {
    color: var(--text);
    opacity: 0.92;
    line-height: 1.9;
}

.inlineLink {
    color: var(--brand-blue);
    font-family: f_bold;
}
.inlineLink:hover {
    text-decoration: underline;
}

.legalNote {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(96, 188, 70, 0.1);
    border: 1px solid rgba(96, 188, 70, 0.25);
    color: var(--text);
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.06);
}
.legalNote i {
    color: var(--brand-green);
    margin-top: 2px;
}

@media (max-width: 992px) {
    .legalGrid {
        grid-template-columns: 1fr;
    }
    .legalToc {
        position: static;
        top: auto;
    }
}

.sectionHead {
    margin: 50px 0px !important;
}
.sectionHead .section__title {
    margin-bottom: 6px;
}

/*
    Process Steps
 */
.processSteps {
    margin-bottom: 60px;
}
.stepsWrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stepRow {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 14px;
    align-items: stretch;

    background: #fff;
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.06);
    padding: 14px;
    position: relative;
    overflow: hidden;
}
.stepRow::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0; /* RTL: شريط يسار */
    width: 6px;
    background: linear-gradient(180deg, var(--brand-blue), var(--brand-green));
    opacity: 0.9;
}

.stepNo {
    font-family: f_bold;
    font-size: 40px;
    line-height: 1;
    color: rgba(35, 64, 150, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(
        160deg,
        rgba(35, 64, 150, 0.06),
        rgba(96, 188, 70, 0.06)
    );
    border: 1px solid rgba(35, 64, 150, 0.1);
}

.stepTitle {
    font-family: f_bold;
    margin-bottom: 6px;
}
.stepText {
    color: var(--muted);
}

.stepRow:hover {
    transform: translateY(-3px);
    transition: 0.25s ease;
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.1);
    border-color: rgba(35, 64, 150, 0.18);
}

@media (max-width: 640px) {
    .stepRow {
        grid-template-columns: 70px 1fr;
    }
    .stepNo {
        font-size: 32px;
    }
}

/*  Infographic Cards (9)
 */
.infoGrid {
    margin-bottom: 60px;
}
.infoGrid__wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 992px) {
    .infoGrid__wrap {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .infoGrid__wrap {
        grid-template-columns: 1fr;
    }
}

.infoCard {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 16px;
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.06);
    overflow: hidden;
    transition: 0.25s ease;
}
.infoCard__bar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0; /* RTL شريط يمين */
    width: 8px;
    background: var(--accent, var(--brand-blue));
    opacity: 0.9;
}
.infoCard__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent, var(--brand-blue)) 12%, #fff);
    border: 1px solid
        color-mix(in srgb, var(--accent, var(--brand-blue)) 22%, #fff);
    color: var(--accent, var(--brand-blue));
    font-size: 20px;
    margin-bottom: 10px;
}
.infoCard__title {
    font-family: f_bold;
    margin-bottom: 6px;
}
.infoCard__text {
    color: var(--muted);
}

.infoCard:hover {
    transform: translateY(-4px);
    border-color: color-mix(
        in srgb,
        var(--accent, var(--brand-blue)) 30%,
        var(--border)
    );
    box-shadow: 0 18px 46px rgba(2, 6, 23, 0.12);
}

/*  Flow / Timeline with arrows
 */
.flowLine {
    margin-bottom: 70px;
}

.flowWrap {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: nowrap;
    overflow: auto;
    padding: 8px 2px 14px;
    scrollbar-width: none;
}
.flowWrap::-webkit-scrollbar {
    display: none;
}

.flowItem {
    flex: 0 0 auto;
    width: 250px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.06);
    padding: 14px;
    position: relative;
    overflow: hidden;
}
.flowItem::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-green));
    opacity: 0.9;
}

.flowNo {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: f_bold;
    color: var(--brand-blue);
    background: rgba(35, 64, 150, 0.08);
    border: 1px solid rgba(35, 64, 150, 0.12);
    margin-bottom: 10px;
}

.flowBox h3 {
    font-family: f_bold;
    margin-bottom: 6px;
}
.flowBox p {
    color: var(--muted);
}

.flowArrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    color: rgba(35, 64, 150, 0.55);
    font-size: 22px;
}

@media (max-width: 700px) {
    .flowItem {
        width: 220px;
    }
}

/* Side Quick Actions
 */
.quickActions {
    position: fixed;
    right: 14px;
    bottom: 18px;
    z-index: 1600;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.qaBtn {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: #fff;
    /* border: 1px solid var(--border); */
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-blue);
    transition: 0.2s;
}
.qaBtn:hover {
    transform: translateY(-3px);
    background: rgba(35, 64, 150, 0.06);
    border-color: rgba(35, 64, 150, 0.2);
}
.qaBtn:first-child {
    background: rgba(96, 188, 70, 0.14);
    border-color: rgba(96, 188, 70, 0.3);
    color: var(--brand-blue);
}
.qaBtn:first-child:hover {
    background: rgba(96, 188, 70, 0.2);
}

.qaBtn:last-child {
    background: var(--brand-blue);
    color: #fff;
    box-shadow: 0 12px 26px rgba(35, 64, 150, 0.22);
}

@media (max-width: 480px) {
    .quickActions {
        right: 10px;
        bottom: 12px;
    }
}

.coming-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;

    background-image: url("/site/assets/coming-soon.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 50%;

    background-color: #f7f8fb;
}

/* الصندوق اليسار */

.coming-content {
    width: 50%;
    padding-left: 120px;

    display: flex;
    flex-direction: column;
    align-items: center; /* يجعل العناصر بالنص */
    text-align: center; /* يجعل النص بالنص */
}

/* اللوجو */

.coming-logo {
    width: 70px;
    margin-bottom: 20px;
}

/* العنوان */

.coming-title {
    font-size: 38px;
    color: #3d4ae0;
    margin-bottom: 15px;
}

/* النص */

.coming-text {
    font-size: 18px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 40px;
}

/* العداد */

.countdown {
    display: flex;
    gap: 30px;
}

.time-box span {
    font-size: 38px;
    font-weight: 700;
}

.time-box small {
    display: block;
    color: #777;
}

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

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

@media (max-width: 768px) {
    .coming-wrapper {
        display: flex;
        flex-direction: column; /* يجعل العناصر تحت بعض */

        background-image: none; /* نخفي الخلفية */
        text-align: center;

        padding: 20px;
    }

    .coming-content {
        width: 100%;
        padding: 0;
    }

    /* نضيف الصورة تحت الكلام */

    .coming-wrapper::after {
        content: "";
        width: 100%;
        height: 300px;
        margin-top: 20px;

        background-image: url("/site/assets/coming-soon.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
}