:root {
    --level-1__height: 56px;
    --level-2__height: 44px;
    --level-2__width: 200px;
    --level-2_sub__width: 144px;
}

.table-char {
    width: var(--box-width);
}

.es-financing-banner__riyal {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transform: translateY(6px);
    display: inline;
}

/* common */
.org-sec-title,
.org-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 52px;
}

.org-sec-title__box {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF;
    flex-shrink: 0;
}

.org-sec-list-title {
    background: #FFF;
    padding-bottom: 0 !important;
}

h2.org-sec-title_title {
    font-weight: 700;
    font-size: clamp(1.5rem, 5vw, 36px);
    line-height: 1.4;
    letter-spacing: -0.54px;
}

.org-sec-list-title h2.org-sec-title_title,
.banner-section h2.org-sec-title_title {
    color: #009892 !important;
}

/* list */
.org-sec .crr-aside__list {
    position: relative;

}

.org-sec .last-list::before {
    content: "";
    position: absolute;
    top: -11px;
    height: 1px;
    width: 80.88%;
    transform: translateX(-50%);
    left: 50%;
    background: #FFF;
}

.crr-aside__list {
    display: flex;
    gap: 12px;
}

.list-col {
    flex-direction: column;
}

.crr-aside__list-item {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: #FFF;
    border: 1px solid #FFF;
}



.last-list .crr-aside__list-item::before {
    content: "";
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    background: #FFF;
    height: 35px;
    width: 1px;
    top: -35px;
}

.last-list .crr-aside__list-item::after {
    content: "";
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    background: #FFF;
    height: 35px;
    width: 1px;
    top: -35px;
}

.last-list .crr-aside__list-item:nth-child(5)::after {
    height: 65px;
    top: -65px;
}


.last-list .crr-aside__list-item:nth-child(5)::before {
    height: 1px;
    top: -65px;
    background: #FFF;
    inset-inline-start: -29px;
    width: 78.5px;

}

[dir="ltr"] .last-list .crr-aside__list-item:nth-child(5)::before {
    inset-inline-start: 50px;
}

.row-list .crr-aside__list-item {
    flex-direction: column;
    padding: 16px 10px;
}

.crr-aside__list-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 121, 116, 0.1) 0%, rgba(230, 172, 61, 0.1) 100%);
}

.crr-aside__list-box.box-num {
    /* width: 32px; */
    /* height: 32px; */
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0px;
    color: #007974;
    background: transparent;
}

.crr-aside__list-box.box-icon {
    width: 40px;
    height: 40px;
    display: none;
}

h3.crr-aside__list-tile {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    color: #009892 !important;
}

[dir="ltr"] .org-aside .crr-aside__list-item {
    /* padding: 16px 8px; */
    gap: 8px;
}

[dir="ltr"] .org-aside .crr-aside__list-tile {
    font-size: 12px;
}

.row-list .crr-aside__list-tile {
    text-align: center;
    font-size: 12px;
    line-height: 16px;
}

[dir="ltr"] .row-list .crr-aside__list-tile {
    font-size: 11px;
}

/* Organizational Structure */
.org-sec {
    overflow: hidden;
}

/* Org chart — responsive inline SVG (bilingual, EN/AR).
   Desktop/tablet: the SVG scales to fit. Mobile: a purpose-built vertical
   tree (.org-tree) replaces it so the hierarchy stays clear and legible. */
.org-svg-wrap {
    width: 100%;
}

.org-svg-chart {
    display: block;
    width: 100%;
    height: auto;
    margin-inline: auto;
}

/* ---- Mobile vertical tree (hidden on desktop) ---- */
.org-tree {
    display: none;
}

@media (max-width: 768px) {
    .org-svg-wrap {
        display: none;
    }

    .org-tree {
        display: block;
    }
}

.org-tree,
.org-tree ul,
.org-tree ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ot-card {
    background: #fff;
    color: #009892;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    padding: 15px 18px;
}

/* leadership nodes (Board, CEO) emphasised */
.ot-card.ot-lead {
    background: #00514d;
    color: #fff;
    font-size: 16px;
}

/* apex node (Board) sits a little taller */
.ot-root>.ot-card.ot-lead {
    padding: 18px;
}

/* a child group: indent under its parent with a continuous white spine */
.ot-branch {
    position: relative;
    margin-inline-start: 9px;
}

.ot-branch>li {
    position: relative;
    padding-inline-start: 22px;
    padding-top: 14px;
}

/* vertical spine: each item carries its own segment so the line is unbroken;
   the last child stops at its connector tick instead of overrunning */
.ot-branch>li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.55);
}

.ot-branch>li:last-child::before {
    bottom: auto;
    height: 39px;
}

/* horizontal connector from spine into each card */
.ot-branch>li::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 39px;
    width: 22px;
    height: 2px;
    background: rgba(255, 255, 255, 0.55);
}

/* committee panel — header + numbered list inside one card */
.ot-panel {
    padding: 0;
    overflow: hidden;
}

.ot-panel-head {
    padding: 14px 18px;
    font-weight: 800;
    background: rgba(0, 152, 146, 0.05);
    border-bottom: 1px solid rgba(0, 152, 146, 0.14);
}

.ot-coms {
    padding: 4px 18px 8px;
}

.ot-coms li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 13px;
    font-weight: 600;
    border-top: 1px solid rgba(0, 152, 146, 0.1);
}

.ot-coms li:first-child {
    border-top: 0;
}

.ot-coms li> :last-child {
    flex: 1;
}

.ot-num {
    flex: none;
    min-width: 20px;
    color: #009892;
    font-weight: 800;
    font-size: 12px;
}

/* department grid (CEO's divisions) */
.ot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ot-grid .ot-dept {
    padding: 14px 10px;
    font-size: 13px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

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

.org-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    align-items: stretch;
}

.org-aside,
.org-sec .row-list {
    /* box-shadow: 0px 4px 20px -8px rgba(0, 121, 116, 0.18); */
    /* background: #FFFFFF; */
    /* border: 1px solid #FFFFFF; */
    padding: 24px;
    position: relative;
}

.org-sec .row-list {
    z-index: 9999;
}

/* org-sidebar */
.org-aside {
    width: 340px;
    flex-shrink: 0;
    position: relative;
    z-index: 99;

}

.org-aside .org-sec-title {
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 0.8px solid transparent;
}

.org-aside .org-sec-title_title {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.27px;
}

.org-aside .org-sec-title__box {
    width: 40px;
    height: 40px;
}

/* org-chart */
.org-chart {
    width: 60%;
    padding: 24px 0;
    position: relative;
    z-index: 999
}

.org-main {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.org-sub-main {
    gap: 40px;
    position: relative;
}

.org-sub {
    margin-top: 120px;
}



/* org-boxes */
.main-level-box {
    position: relative;
    padding: 12px 24px;
    font-weight: 800;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: center;
    background: #fff;
    box-shadow: 0px 4px 20px -8px rgba(0, 121, 116, 0.18);
    color: #009892;
    min-width: 240px;
}

.sub-level-box {
    position: relative;
    background: #fff;
    padding: 12px 20px;
    border: 1px solid #FFF;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: center;
    color: #009892;
    width: 270px;
    z-index: 999;
}

.sub-level-box * {
    position: relative;
    z-index: 999;
}

.sub-level-box::after {
    content: "";
    position: absolute;
    background: #FFF;
    inset: 0;
    position: absolute;
    z-index: 9;
}

.side-box {
    width: 340px;
    margin-inline-start: auto;
    margin-top: 24px;
    margin-bottom: 60px;
    z-index: 9;
}

.in-rev {
    width: 292px;
    transform: translateX(24px);
}

[dir="ltr"] .in-rev {
    transform: translateX(-24px);

}

/* org-wires */


.wire {
    position: absolute;
}

.wire-box {
    position: absolute;
    height: 8px;
    width: 8px;
    background: #E2E9E9;
}

.main-wire {
    position: absolute;
    border: 1px solid #FFF;
    border-inline-end-width: 0;
    width: 200px;
    height: 80px;
    left: calc(50% - 60px);
    transform: translateX(-50%);
}

[dir="ltr"] .main-wire {
    scale: -1;
    border-inline-start-width: 0;
    border-inline-end-width: 1px;
}

.main-wire::after {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    height: 1px;
    background: #FFF;
    right: -204px;
    z-index: 9;
}

.org-sub-main .main-level-box:last-child::after,
.side-box::before {
    content: "";
    position: absolute;
    background: #FFF;
    transform: translateX(-50%);
    left: 50%;
    display: block;
    width: 1px;
}

.main-wire .wire-box {
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
}

.org-sub-main .main-level-box:last-child::after {
    height: 368px;
    bottom: -365px;
    z-index: -1;
}

[dir="ltr"] .main-wire {
    right: calc(50% - 60px);
}

[dir="ltr"].main-wire::after {
    left: -200px;
}

.side-box::before {
    height: 180px;
    top: -160px;
    z-index: 9;
}

@media(min-width:961px) {

    .org-wrap,
    .sub-level-box,
    .last-list {
        display: none;
    }
}

/* wire-box */
.org-sub .wire-box,
.org-sub-main .main-level-box:first-child .wire-box,
.sub-level-box.side-box .wire-box,
.crr-aside__list-item .wire-box {
    top: 50%;
    transform: translateY(-50%);

}

.list-col .crr-aside__list-item:nth-child(3):before {
    content: "";
    position: absolute;
    display: block;
    background: #FFF;
    width: 40px;
    height: 1px;
    inset-inline-start: -33px;
    top: 50%;
    transform: translateY(-50%);
}


.org-sub-main .main-level-box:last-child .wire-box,
.org-aside .wire-box {
    transform: translateX(-50%);
    left: 50%;
    bottom: -24px;
}

.org-sub-main .main-level-box:last-child .wire-box {
    bottom: -8px;
}

.org-aside .wire-box {
    bottom: -24px;
}

.org-sub .wire-box,
.org-sub-main .main-level-box:first-child .wire-box {
    inset-inline-end: -8px;
}

.sub-level-box.side-box .wire-box {
    inset-inline-start: -8px;
}

.crr-aside__list-item .wire-box {
    inset-inline-start: -12.5px;
    bottom: -50%;
    transform: translate(-50%, -50%);
}

[dir="ltr"] .crr-aside__list-item .wire-box {
    inset-inline-start: -30px;
}


/* wire-item */
.wire {
    position: absolute;
    background-color: #FFF;
}

.wire-hr {
    height: 1px;
}

.wire-1,
.wire-2 {
    width: 400px;
    inset-inline-end: 120px;
}

[dir="ltr"] .wire-1,
.wire-2 {
    inset-inline-end: 123px;
}

.wire-1 {
    bottom: -143.5px;
}

.wire-2 {
    bottom: -200.5px;
}

.wire-3 {
    width: 271px;
    bottom: -293.7px;
    inset-inline-start: 120px;
}

[dir="ltr"] .wire-3 {

    width: 274px;
    bottom: -293.7px;
    inset-inline-start: 122px;

}

.main-level-box {
    position: relative;
}

.main-level-box {
    z-index: 9;
}

.wire-list {
    position: absolute;
    height: 209px;
    border-inline-start: 1px solid #FFF;
    top: 46.5px;
    inset-inline-start: -9px;
}

[dir="ltr"] .wire-list {
    inset-inline-start: -6px;
}

.wire-list::after,
.wire-list::before {
    content: "";
    position: absolute;
    height: 1px;
    background-color: #FFF;
    width: 200px;
}

.wire-list::before {
    top: 0;
    inset-inline-start: -200px;
}

.wire-list::after {
    bottom: 0;
    width: 25px;
}

.wire-list .wire {
    width: 26px;
    height: 1px;
}

[dir="ltr"] .wire-list .wire {
    width: 40px;
}

.wire-list .wire:first-child {
    top: 60.5px;
}

.wire-list .wire:last-child {
    top: 109.5px;
}

.crr-aside__list-item .wire-list {
    inset-inline-start: 10px;
    top: -355px;
    height: 290px;
}

.crr-aside__list-item .wire-list::after {
    display: none;
}

.crr-aside__list-item .wire-list::before {
    inset-inline-start: unset;
    width: 35px;
}

[dir="ltr"] .crr-aside__list-item .wire-list::before {
    width: 85px;
}

/* users-sec */

.users-boxes {
    display: flex;
    gap: 24px;
}

.user-box {
    height: 265px;
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    border: 1px solid #D4E1DE;
    background: #FFF;
    padding: 24px;
    box-shadow: 0px 4px 20px -8px rgba(0, 121, 116, 0.18);
    border-top: 4px solid #008A85;
}

.user-box .org-sec-title__box {
    height: 48px;
    width: 48px;
}

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

.user-content .precent {
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: -1.2px;
    color: #008A85;
}

.user-content p {
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    color: #5E7278;
}

.table-container {
    display: flex;
    overflow: auto;
}

/* 1. تحديد عرض وطول الـ Scrollbar */
.table-container::-webkit-scrollbar {
    width: 8px;
    /* للـ scroll الرأسي */
    height: 8px;
    /* للـ scroll الأفقي (مهم جداً للجداول) */
}

/* 2. خلفية الـ Scrollbar (المسار) */
.table-container::-webkit-scrollbar-track {
    background: #F1F5F5;
    /* لون فاتح جداً قريب من لون خلفية الصفحة */
    border-radius: 10px;
}

/* 3. الجزء المتحرك (الـ Handle) */
.table-container::-webkit-scrollbar-thumb {
    background: var(--main-color, #008A85);
    /* استخدام لونك الأساسي */
    border-radius: 10px;
    border: 2px solid #F1F5F5;
    /* إضافة Border شفاف يعطي إيحاء بوجود مسافة */
}

/* 4. عند التمرير بالماوس فوقه */
.table-container::-webkit-scrollbar-thumb:hover {
    background: #006662;
    /* درجة أغمق قليلاً من اللون الأساسي */
}

.table-container {
    scrollbar-width: thin;
    /* جعل الـ scroll نحيفاً */
    scrollbar-color: var(--main-color, #008A85) #F1F5F5;
    /* (لون الـ thumb) (لون الـ track) */
}

.table {
    box-shadow: 0px 4px 20px -8px #0079742E;
    border: 1px solid #D4E1DE;
    margin-top: 48px;
}

.table-header {
    padding: 20px 24px;
    background: linear-gradient(270deg, rgba(194, 231, 225, 0.4) 0%, rgba(194, 231, 225, 0) 100%);
    border-bottom: 0.8px solid rgba(212, 225, 222, 1);
    gap: 4px;
}

.table-header h3 {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.24px;
    color: #008A85;
}

.table-header p {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0px;
    color: #566768;
}



.table-col {
    width: 92px;
    flex-shrink: 0;
}

.table-col:not(:last-child)>div::after {
    content: "";
    display: block;
    position: absolute;
    inset-inline-end: 0;
    height: 100%;
    width: 0.2px;
}

.table-col:not(:last-child) .head::after {
    background: #FFFFFF;
}

.table-col:not(:last-child) .t-body::after {

    background: #00948F;
}

.table-col>div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 3px;
    text-align: center;
    font-weight: 700;
    line-height: 15px;
    letter-spacing: 0px;
}

.table-col .head {
    height: 105px;
    background: #00948F;
    color: #fff;
    font-size: 10px;
}

.table-col .t-body {
    height: 83px;
    background: #FFF;
    color: #018A85;
    font-size: 20px;
}

.table-titles {
    min-width: 170px;
    flex-grow: 1;
}

.table-titles .head,
.table-titles .t-body {
    font-size: 20px;
    line-height: 20px;
}

.table-titles .t-body {
    background: #EFF9F7;
    color: #018A85;
}

/* banner-sec */
.banner-sec {
    padding: 52px;
    background: #00948F;
    box-shadow: 0px 24px 60px -20px rgba(0, 121, 116, 0.28);
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* margin-top: clamp(1.5rem, 5vw, 3.375rem); */
}

.banner-sec p {
    font-weight: 600;
    font-size: clamp(1rem, 4vw, 1.875rem);
    line-height: 1.4;
    letter-spacing: 0;
    color: #FFF;
}

.banner-sec p span {
    font-weight: 800;
}

.banner-sec [data-counter] {
    font-weight: 800;
    display: inline-block;
}

/* budget-sec */
.budget-content__wrap {
    display: flex;
    gap: 2rem;
}

.budget-info {
    flex: 1;
    gap: 24px;
}

.gain-sec .budget-info {
    width: auto;
    flex-shrink: 1;
}

.budget-top {
    /* background: #FFF;
    padding: 1.5rem;
    box-shadow: 0px 0.25rem 1.25rem -0.5rem rgba(0, 121, 116, 0.18);
    border-inline-start: 0.25rem solid #008A85;
    font-weight: 400;
    font-size: clamp(0.8125rem, 2vw, 0.9375rem);
    line-height: 2.13;
    color: #5E7278; */
}

.budget-top span {
    font-weight: 700;
    color: #008A85;
}

.budget-middle {
    display: flex;
    gap: 1rem;
}

.budget-middle>div {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
}

.budget-middle h3 {
    font-weight: 700;
    font-size: clamp(0.6875rem, 1.5vw, 0.75rem);
    line-height: 1.33;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.7);
}

.budget-middle p {
    font-weight: 700;
    font-size: clamp(1.25rem, 4vw, 1.875rem);
    line-height: 1.2;
    letter-spacing: 0;
    color: #FFF;
}

.budget-middle p span {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.6);
}

.budget-middle>div:last-child h3 {
    font-weight: 400;
    color: #566768;
}

.budget-middle>div:last-child p {
    color: #007974;
}

.budget-middle>div:last-child p span {
    color: #5E7278
}

.budget-middle>div:first-child {
    background-color: #008A85;
}

.budget-middle>div:last-child {
    border: 1px solid rgba(0, 121, 116, 0.2);
    background-color: #FFF;
}

.budger-bottom {
    padding: 1.5rem;
    background: #018A85;
}

.budger-bottom .icon {
    display: flex;
    justify-content: flex-end;
    color: #FFF;
}

.budger-bottom h3 {
    font-weight: 400;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0;
    color: #FFF;
    margin-bottom: 0.5rem;
}

.budger-bottom p {
    font-weight: 700;
    font-size: clamp(1.875rem, 6vw, 3.125rem);
    line-height: 0.8;
    letter-spacing: 0;
    color: #FFF;
}

.chart-container {
    padding: 2rem;
    background: #FFF;
    flex-grow: 1;
    border: 1px solid #D4E1DE;
    box-shadow: 0px 4px 20px -8px rgba(0, 121, 116, 0.18)
}

.chart-container .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.chart-title {
    font-weight: 800;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    margin-top: 16px;
    color: #008A85;
}

.chart-note {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0px;
    color: #566768;
}

.legend {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: #5E7278;
    font-weight: 400;
    font-size: 11px;
    line-height: 16.5px;
    letter-spacing: 0px;
    margin-bottom: 16px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-item:first-child .legend-dot {
    background: #008A85;
}

.legend-item:last-child .legend-dot {
    background: #C3E0DF;
}

.gain-sec .budget-content__wrap {
    align-items: stretch;
}

.gain-box {
    display: flex;
    align-items: center;
    padding: 8px 24px;
    background-color: #008A85;
    justify-content: space-between;
}

.gain-box .left {
    gap: 4px;

}

.gain-box .left p {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    color: #FFF;
}

.gain-box .left span {
    font-weight: 700;
    font-size: 36px;
    line-height: 40px;
    color: #FFF;
}

.gain-box .right {
    align-items: flex-end;
}

.gain-box .right p {
    font-weight: 700;
    font-size: 30px;
    line-height: 36px;
    letter-spacing: 0px;
    color: #FFF;
}

.gain-sec .table {
    flex-grow: 1;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.flex-table {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.flex-table>div {
    flex: 1;
    display: flex;
    align-items: center;
}

.flex-table .row-1,
.flex-table .row-4 {
    background: #008A85;
}

.flex-table .row-2 {
    background: #fff;
}

.flex-table .row-3 {
    background: rgba(243, 242, 233, 0.3);
    border-top: 0.8px solid #D4E1DE
}

.t-col {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
}

.row-1 .t-col {
    color: #FFF;
}

.row-2 .t-col {
    font-weight: 700;
    letter-spacing: 0px;
    color: #777A7A;
}

.price-col {
    font-family: Cairo;
    font-weight: 700;
    letter-spacing: 0px;
    color: #777A7A;
}


.budget-sec .wrap {
    display: flex;
    gap: 16px;
}

.budget-sec .wrap>div {
    flex: 1;
}

.budget-sec .org-sec-title__box {
    background: #009892;
}

.budget-sec h2.org-sec-title_title {
    color: #009892 !important;
}

.budget-sec .org-sec-title {
    margin-bottom: 16px;
}

.budget-sec {
    overflow-x: hidden;
}

@media (min-width:1025px) {
    .org-sub .sub-level-box:last-child {
        display: none;
    }
}

/* --- إضافات للتجاوب الكامل (Full Responsive) --- */
@media (max-width: 1024px) {
    .budget-sec .wrap {
        flex-direction: column;
    }

    .org-aside,
    .org-sec .row-list {
        margin-top: 0;
    }

    .budget-content__wrap {
        flex-direction: column;
        /* تحويل سكشن الميزانية لرأسي */
    }

    .budget-info {
        width: 100%;
        /* الميزانية تأخذ العرض كامل */
    }

    .side-box,
    .wire-list,
    .org-sec .last-list::before,
    .last-list .crr-aside__list-item::before,
    .last-list .crr-aside__list-item::after,
    .list-col .crr-aside__list-item:nth-child(3):before {
        display: none;
    }

}

@media (max-width: 1024px) {

    /* تحسين الـ Banner */
    .banner-sec {
        padding: 24px;
        gap: 20px;
    }

    /* تحسين صناديق المستخدمين */
    .users-boxes {
        flex-direction: column;
    }

    .user-box {
        height: auto;
        gap: 16px;
    }

    /* تحسين سكشن الـ Gain (الإيرادات) */
    .gain-sec .budget-content__wrap {
        flex-direction: column;
    }

    .gain-box {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .gain-box .left,
    .gain-box .right {
        align-items: center;
    }

    /* الجداول في الموبايل */
    .table-col .head {
        height: 80px;
        /* تقليل الارتفاع */
        font-size: 9px;
    }

    .table-col .t-body {
        font-size: 16px;
    }

    /* تعديل أحجام الخطوط الكبيرة */
    .org-sec-title_title {
        font-size: 24px;
        line-height: 30px;
    }

    .user-content .precent {
        font-size: 32px;
        line-height: 32px;
    }
}



@media (max-width: 1024px) {


    .crr-aside__list {
        flex-wrap: wrap;
        gap: 12px;
    }

    .crr-aside__list-item {
        flex: 1 1 100%;
        min-width: 100%;
    }

    /* تحويل الهيكل من أفقي إلى رأسي تماماً */
    .org-wrap {
        flex-direction: column;
        gap: 24px;
    }

    .org-aside {
        width: 100%;
        padding: 20px;
    }

    .org-chart {
        width: 100%;
        padding: 0;
    }

    .org-main {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .org-sub-main {
        flex-direction: column;
        gap: 12px;
    }

    .org-sub {
        margin-top: 48px;
    }

    .row-list {
        margin-top: 24px;
    }

    .main-level-box,
    .sub-level-box,
    .sub-level-box.side-box {
        width: 100%;
        min-width: auto;
    }

    .main-wire,
    .wire,
    .wire-box,
    .org-sub-main .main-level-box:last-child::after,
    .side-box::before {
        display: none !important;
    }

    .org-aside .org-sec-title {
        padding-bottom: 0;
        margin-bottom: 1rem;
        border-bottom: none;
    }

    .org-aside .org-sec-title_title {
        font-size: 20px;
        line-height: 28px;
    }

    .org-aside .org-sec-title__box {
        width: 40px;
        height: 40px;
    }

    .side-box {
        width: 100%;
        margin-inline-start: 0;
    }

    .row-list .crr-aside__list-item {
        padding: 16px;
    }

}

@media(max-width:768px) {
    .banner-section .org-sec-title {
        margin-bottom: 16px;
    }
}