:root {
  /* ==========================================
     3. درجات اللون الأبيض والشفافيات وطبقات النصوص (White & Transparent Layers)
     ========================================== */

  /* الأبيض العادي (من 1 إلى 5) */
  --white: #ffffff;
  --white1: #ecf0f3;
  --white2: #F8FAFC;
  --white3: #f6f7f8;
  --white4: #f0f0f0;
  --white5: #ececec;
  --white6: #b4b4b4;

  /* درجات نصوص الطبقات الأبيض (من 1 إلى 5) متوافقة مع المودات */
  --text-white: #ffffff;
  --text-white1: #f8fafc;
  --text-white2: #e2e8f0;
  --text-white3: #cbd5e1;
  --text-white4: #94a3b8;

  /* درجات الشفافيات المتكاملة (من 1 إلى 10) */
  --white-transparent: #f8fafc9d;
  --white-transparent1: rgba(255, 255, 255, 0.85);
  --white-transparent2: rgba(255, 255, 255, 0.70);
  --white-transparent3: rgba(255, 255, 255, 0.55);
  --white-transparent4: rgba(255, 255, 255, 0.40);
  --white-transparent5: rgba(255, 255, 255, 0.28);
  --white-transparent6: rgba(255, 255, 255, 0.18);
  --white-transparent7: rgba(255, 255, 255, 0.12);
  --white-transparent8: rgba(255, 255, 255, 0.06);
  --white-transparent9: rgba(255, 255, 255, 0.02);

  /* ==========================================
     2. درجات اللون الأسود والرماديات (Black) - مهيأة ومتوافقة مع المود الداكن والفاتح
     ========================================== */
  --text-black: #000000;
  --text-black1: #a5a5a5e0;

  --black: #000000;
  --black1: #1a1a1a;
  --black2: #2d2d2d;
  --black3: #494949;
  --black4: #616361;

  /* النصوص الشفافة والرمادية المتوافقة مع المودات المختلفة */
  --text-transparent-black: #a5a5a5e0;
  --text-transparent-black1: #444444;
  --text-transparent-black2: #555555;
  --text-transparent-black3: #888888;
  --text-transparent-black4: rgba(255, 255, 255, 0.185);
  --text-transparent-black5: #5555552f;
  --text-transparent-black-7: #ffffff;
  --text-transparent-black-8: #ffffff;
  --text-transparent-black-9: #ffffff;

  --black-icon-emoji1: rgba(0, 0, 0, 0.8);
  --black-icon-emoji: rgba(216, 46, 46, 0.8);

  /* ==========================================
     1. درجات اللون الأزرق (Blue) - ثابتة ومضبوطة تماماً كما طلبت
     ========================================== */
  --text-blue: #0e7aff;
  --text-blue1: #1a75e4;
  --text-blue2: #3e78bf;
  --text-blue3: #01387c;
  --text-blue4: #a2cbfd;
  --text-blue5: #60a5fa;
  --blue: #0a0f1d;
  --blue1: #131c31;
  --blue2: #0c111f;
  --bluetransparent: rgba(8, 67, 228, 0.983);
  --bluetransparent1: rgba(8, 67, 228, 0.738);
  --bluetransparent2: rgba(8, 67, 228, 0.518);
  --bluetransparent3: rgba(8, 67, 228, 0.379);
  --bluetransparent4: rgba(8, 67, 228, 0.192);
  --bluetransparent5: rgba(10, 15, 29, 0.85);
  --bluetransparent6: #1e1b4b;

  /* ==========================================
     2. درجات اللون الأكوا / السماوي (Aqua / Cyan) - منظمة ومكتملة من 1 إلى 5
     ========================================== */

  /* درجات Aqua العادي (من 1 إلى 5) */
  --aqua: #67e8f9;
  --aqua1: #22d3ee;
  /* لونك الأصلي text-aqua */
  --aqua2: #06b6d4;
  /* لونك الأصلي aqua */
  --aqua3: #0891b2;
  --aqua4: #0e7490;

  /* درجات نصوص Aqua (من 1 إلى 5) */
  --text-aqua: #cffafe;
  --text-aqua1: #a5f3fc;
  --text-aqua2: #22d3ee;
  /* نصك الأصلي text-aqua */
  --text-aqua3: #06b6d4;
  --text-aqua4: #0891b2;

  /* درجات Aqua الشفاف (من 1 إلى 5) */
  --aqua-transparent: rgba(0, 242, 255, 0.85);
  --aqua-transparent1: rgba(0, 242, 255, 0.531);
  /* شفافك الأصلي aquatransparent */
  --aqua-transparent2: rgba(59, 130, 246, 0.15);
  /* شفافك الأصلي aquatransparent1 */
  --aqua-transparent3: rgba(0, 242, 255, 0.20);
  --aqua-transparent4: rgba(0, 242, 255, 0.08);

  /* درجات أيقونات Aqua الإيموجي والـ 3D (من 1 إلى 5) */
  --aqua-icon-emoji: rgb(0, 242, 255);
  /* إيموجي 1 الأصلي aquaiconEmoji */
  --aqua-icon-emoji1: #00ffaa;
  /* إيموجي 2 الأصلي aquaiconEmoji1 */
  --aqua-icon-emoji2: rgba(0, 242, 255, 0.50);
  --aqua-icon-emoji3: rgba(0, 242, 255, 0.25);
  --aqua-icon-emoji4: rgba(0, 242, 255, 0.10);

  /* ==========================================
     1. درجات اللون الماجوريلا / البنفسجي (Majorelle) - منظمة ومكتملة من 1 إلى 5
     ========================================== */

  /* درجات Majorelle العادي (من 1 إلى 5) */
  --majorelle: #c4b5fd;
  --majorelle1: #a78bfa;
  /* لونك الأصلي Majorelle1 */
  --majorelle2: #6366f1;
  /* لونك الأصلي Majorelle2 */
  --majorelle3: #4f46e5;
  /* لونك الأصلي Majorelle */
  --majorelle4: #312e81;

  /* درجات نصوص Majorelle (من 1 إلى 5) */
  --text-majorelle: #ede9fe;
  --text-majorelle1: #c4b5fd;
  --text-majorelle2: #a78bfa;
  /* نصك الأصلي text-Majorelle */
  --text-majorelle3: #8b5cf6;
  --text-majorelle4: #7c3aed;

  /* درجات Majorelle الشفاف (من 1 إلى 5) */
  --majorelle-transparent: rgb(137, 43, 226);
  /* شفافك الأصلي Majorelletransparent */
  --majorelle-transparent1: rgba(137, 43, 226, 0.80);
  --majorelle-transparent2: rgba(137, 43, 226, 0.681);
  /* شفافك الأصلي Majorelletransparent1 */
  --majorelle-transparent3: rgba(137, 43, 226, 0.40);
  --majorelle-transparent4: rgba(137, 43, 226, 0.15);

  /* درجات أيقونات Majorelle الإيموجي والـ 3D (من 1 إلى 5) */
  --majorelle-icon-emoji: rgba(138, 43, 226, 0.4);
  /* أيموجي 1 الأصلي MajorelleiconEmoji */
  --majorelle-icon-emoji1: rgba(138, 43, 226, 0.2);
  /* أيموجي 2 الأصلي MajorelleiconEmoji1 */
  --majorelle-icon-emoji2: rgba(137, 43, 226, 0.142);
  /* أيموجي 3 الأصلي MajorelleiconEmoji2 */
  --majorelle-icon-emoji3: rgba(137, 43, 226, 0.08);
  --majorelle-icon-emoji4: rgba(137, 43, 226, 0.03);


  /* ==========================================
     درجات اللون2 الأحمر ومجموعة الرد والسلة (Red / Rad & Trash) - منظمة ومكتملة من 1 إلى 5
     ========================================== */

  /* 1. درجات الرد/الأحمر العادي (من 1 إلى 5) */
  --red: #fca5a5;
  --red1: #f87171;
  --red2: #ef4444;
  /* لونك الأصلي text-rad2 */
  --red3: #d80000;
  /* لونك الأصلي text-rad */
  --red4: #991b1b;

  /* 2. درجات نصوص الرد والأحمر (من 1 إلى 5) */
  --text-red: #fee2e2;
  --text-red1: #fca5a5;
  --text-red2: #f87171;
  --text-red3: #ef4444;
  /* text-rad2 */
  --text-red4: #d80000;
  /*--text-rad */

  /* 3. درجات الرد/الأحمر الشفاف (من 1 إلى 5) */
  --red-transparent: rgba(216, 0, 0, 0.85);
  --red-transparent1: rgba(216, 0, 0, 0.65);
  --red-transparent2: rgba(216, 0, 0, 0.45);
  --red-transparent3: rgba(216, 0, 0, 0.25);
  --red-transparent4: #d8000093;
  /* شفافك الأصلي radtransparent */

  /* 4. درجات أيقونات الرد الشفافة والـ 3D (من 1 إلى 5) */
  --red-icon-emoji: rgba(239, 68, 68, 0.80);
  --red-icon-emoji1: rgba(239, 68, 68, 0.60);
  --red-icon-emoji2: rgba(239, 68, 68, 0.40);
  --red-icon-emoji3: rgba(239, 68, 68, 0.20);
  --red-icon-emoji4: rgba(239, 68, 68, 0.08);

  /* 5. درجات وتدرجات سلة المهملات والتحذيرات الخاصة بالرد (Trash Colors - من 1 إلى 5) */
  --rad-trash: #ff0055c7;
  --rad-trash1: #ff005591;
  /* لونك الأصلي radtrash */
  --rad-trash2: rgba(255, 0, 85, 0.50);
  --rad-trash3: rgba(255, 0, 85, 0.3);
  /* لونك الأصلي radtrash2 */
  --rad-trash4: rgba(255, 0, 85, 0.2);
  /* لونك الأصلي radtrash1 */

  /* 6. حدود وإطارات سلة المهملات (Trash Border) */
  --rad-trash-border: rgb(255, 0, 85);
  /* لونك الأصلي radtrashborder */
  --rad-trash-border1: rgba(255, 0, 85, 0.8);
  --rad-trash-border2: rgba(255, 0, 85, 0.6);
  --rad-trash-border3: rgba(255, 0, 85, 0.4);
  --rad-trash-border4: rgba(255, 0, 85, 0.2);



  /* ==========================================
     1. درجات اللون البينستي / الماجنتا (Magenta) - منظمة ومكتملة من 1 إلى 5
     ========================================== */

  /* درجات البينستي العادي (من 1 إلى 5) */
  --magenta: #f472b6;
  --magenta1: #e52e71;
  /* لونك الأصلي */
  --magenta2: #f71f75;
  /* لونك الأصلي */
  --magenta3: #C2185B;
  /* لونك الأصلي */
  --magenta4: #580b2a;
  /* لونك الأصلي */

  /* درجات نصوص البينستي (من 1 إلى 5) */
  --text-magenta: #fbcfe8;
  --text-magenta1: #f472b6;
  /* نصك الأصلي */
  --text-magenta2: #db2777;
  --text-magenta3: #be185d;
  --text-magenta4: #9d174d;

  /* درجات البينستي الشفاف (من 1 إلى 5) */
  --magenta-transparent: rgba(236, 72, 154, 0.884);
  --magenta-transparent1: rgba(236, 72, 154, 0.712);
  --magenta-transparent2: rgba(236, 72, 154, 0.50);
  --magenta-transparent3: rgba(236, 72, 154, 0.25);
  --magenta-transparent4: rgba(236, 72, 154, 0.10);

  /* درجات أيقونات البينستي الإيموجي والـ 3D (من 1 إلى 5) */
  --magenta-icon-emoji: rgba(236, 72, 154, 0.466);
  --magenta-icon-emoji1: rgba(236, 72, 154, 0.24);
  --magenta-icon-emoji2: rgba(236, 72, 154, 0.15);
  --magenta-icon-emoji3: rgba(236, 72, 154, 0.08);
  --magenta-icon-emoji4: rgba(236, 72, 154, 0.03);

  /* --MagentaiconEmoji2: rgba(236, 72, 154, 0.096); */

  /* ==========================================
     2. درجات اللون البرتقالي (Orange) - منظمة ومكتملة من 1 إلى 5
     ========================================== */

  /* درجات البرتقالي العادي (من 1 إلى 5) */
  --orange: #FF8A65;
  /* لونك الأصلي */
  --orange1: #ff8a00;
  /* لونك الأصلي */
  --orange2: #FF5722;
  /* لونك الأصلي */
  --orange3: #df4b1e;
  /* لونك الأصلي */
  --orange4: #8f3115;
  /* لونك الأصلي */

  /* درجات نصوص البرتقالي (من 1 إلى 5) */
  --text-orange: #ffedd5;
  --text-orange1: #fb923c;
  /* نصك الأصلي */
  --text-orange2: #f97316;
  --text-orange3: #c2410c;
  --text-orange4: #9a3412;

  /* درجات البرتقالي الشفاف (من 1 إلى 5) */
  --orange-transparent: rgba(249, 115, 22, 0.85);
  --orange-transparent1: rgba(249, 115, 22, 0.65);
  --orange-transparent2: rgba(249, 115, 22, 0.45);
  --orange-transparent3: rgba(249, 115, 22, 0.25);
  --orange-transparent4: rgba(249, 115, 22, 0.15);
  /* شفافك الأصلي */

  /* درجات أيقونات البرتقالي الإيموجي والـ 3D (من 1 إلى 5) */
  --orange-icon-emoji: rgba(255, 138, 0, 0.80);
  --orange-icon-emoji1: rgba(255, 138, 0, 0.60);
  --orange-icon-emoji2: rgba(255, 138, 0, 0.40);
  --orange-icon-emoji3: rgba(255, 138, 0, 0.20);
  --orange-icon-emoji4: rgba(255, 138, 0, 0.08);

  /* ==========================================
     درجات اللون الأخضر (Green) - منظمة ومكتملة من 1 إلى 5
     ========================================== */

  /* 1. درجات الأخضر العادي (من 1 إلى 5) */
  --green1: #86efac;
  --green2: #4ade80;
  --green3: #22c55e;
  --green4: #5ed362;
  /* لونك الأصلي */
  --green5: #15803d;

  /* 2. درجات نصوص الأخضر (من 1 إلى 5) - تم وضع الأصليين أولاً وتكملة الباقي */
  --text-green: #4CAF50;
  --text-green1: #34d399;
  --text-green2: #6ee7b7;
  --text-green3: #10b981;
  --text-green4: #059669;

  /* 3. درجات الأخضر الشفاف (من 1 إلى 5) - يبدأ بدرجتك الشفافة الأساسية أولاً */
  --green-transparent: rgba(28, 245, 108, 0.678);
  /* درجتك الشفافة الأساسية */
  --green-transparent1: rgba(34, 197, 94, 0.60);
  --green-transparent2: rgba(34, 197, 94, 0.40);
  --green-transparent3: rgba(34, 197, 94, 0.20);
  --green-transparent4: rgba(34, 197, 94, 0.08);

  /* 4. درجات أيقونات الأخضر الإيموجي والـ 3D (من 1 إلى 5) - وضع الأصليين وتكملة الباقي */
  --green-icon-emoji: rgba(28, 245, 108, 0.564);
  --green-icon-emoji1: rgba(28, 245, 93, 0.204);
  --green-icon-emoji2: rgba(74, 222, 128, 0.35);
  --green-icon-emoji3: rgba(74, 222, 128, 0.18);
  --green-icon-emoji4: rgba(74, 222, 128, 0.07);


  /* ==========================================
     درجات اللون الأصفر (Yellow) - منظمة ومكتملة من 1 إلى 5
     ========================================== */

  /* 1. درجات الأصفر العادي (من 1 إلى 5) للزرار والعناصر الأساسية */
  --yellow: #fef08a;
  --yellow1: #fde047;
  --yellow2: #facc15;
  --yellow3: #eab308;
  --yellow4: #ca8a04;

  /* 2. درجات نصوص الأصفر (من 1 إلى 5) لتناسب جميع المودات من الأبيض للأسود */
  --text-yellow1: #fef9c3;
  --text-yellow2: #fef08a;
  --text-yellow3: #fde047;
  --text-yellow4: #facc15;
  --text-yellow5: #eab308;

  /* 3. درجات الأصفر الشفاف (من 1 إلى 5) للزرار الشفافة والخلفيات المؤقتة */
  --yellow-transparent: rgba(234, 179, 8, 0.85);
  --yellow-transparent1: rgba(234, 179, 8, 0.65);
  --yellow-transparent2: rgba(234, 179, 8, 0.45);
  --yellow-transparent3: rgba(234, 179, 8, 0.25);
  --yellow-transparent4: rgba(234, 179, 8, 0.10);

  /* 4. درجات أيقونات الأصفر الشفافة (من 1 إلى 5) المخصصة لعناصر الـ 3D والشفافية العالية */
  --yellow-icon-emoji: rgba(250, 204, 21, 0.80);
  --yellow-icon-emoji1: rgba(250, 204, 21, 0.60);
  --yellow-icon-emoji2: rgba(250, 204, 21, 0.40);
  --yellow-icon-emoji3: rgba(250, 204, 21, 0.20);
  --yellow-icon-emoji4: rgba(250, 204, 21, 0.08);

}

body {
  background: var(--lightboby);
  display: flex;
  flex-direction: column;
  /* يجعل المحتوى يترتب عمودياً */
  margin: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--btn) transparent;

}

.alert-warning {
  background: rgba(255, 193, 7, 0.15) !important;
  border-color: #ffc107 !important;
  color: #fff !important;
  width: 15%;
  margin: 15px auto;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center !important;
  padding: 20;
}

.alert-warning p {
  text-align: center !important;

}

@media (min-width: 100px) and (max-width: 452px) {
  .alert-warning {
    width: 70% !important;
  }

  .settings-card {
    width: 90% !important;
    max-width: 50%;
  }
}

.icon {
  width: 100%;
  height: 100;
  margin: 200 0 100 0;
  background: #02643e;
  display: flex;
  justify-content: center;
  justify-items: center;
}

.iconicon {
  width: 20%;
  height: 70;
  margin: 0;
  position: absolute;
  left: 13;
  /* background: #02643e; */
  display: flex;
  justify-content: center;
  justify-items: center;

}

.imgText {
  width: 100%;
}

/* .a, .b , .c ,.d {
  fill: var(--btn4);
}
.f,.h ,.i,.m{
  fill: var(--btn3);
}
.n{
  fill: var(--btn3);
} */

/* html {





  --lightboby: var(--Pure_white);
  --header: var(--light_snowy_gray);
  --text: var(--Very_dark_navy_blue);
  --text2: var(--dark_text);
  --btn: var(--orangebtn);
  --btn2: var(--btn_transparent);
  --btn3: var(--btn_green);

  --icon: var(--Magenta);
  --Cards: var(--White_with_a_light_tint);
  --Cards2: var(--bluish_grey);
  --Cards3: var(--cardDark_bluish_grey2);

  --Down_btn : var(--orangebtn);

  --menu: ;  
  --menu_btn: var(--orangebtn);
  --color-text-primary: #000000;
  --color-text-placeholder: #A6B7D2;
  --color-bg-secondary: #dde2ea;
  --colormenu-shadow: rgba(0, 0, 0, 0.3);
  --lighth1: #d9b9ff;
  --light_a: #c9c9c9;


  } */

html {
  scrollbar-width: thin;
  scrollbar-color: var(--b11) transparent;
  --btn: var(--Deep_purple);


  /* body.dark-theme  { */
  /* scrollbar-width: thin; */
  /* scrollbar-color: var(--b) transparent; */
  /* --btn: var(--Deep_purple); */
  /* } */



}


body.light-mode {
  scrollbar-width: thin;
  scrollbar-color: var(--btn) transparent;


  --lightboby: var(--white);
  /* --lightboby: #000; */

  --header: var(--white3);
  --headeronatablet: var(--white-transparent1);

  --text: var(--text-blue3);
  --text1: var(--black2);
  --text2: var(--white);

  --text-error: var(--red3);
  --texttran: var(--text-transparent-black2);
  --texttran1: var(--text-magenta2);
  --texttran2: var(--text-majorelle3);
  --texttran3: var(--text-aqua3);
  --texttran4: var(--text-blue);
  --texttran5: var(--text-green1);
  --texttran6: var(--text-orange2);
  --texttran7: var(--text-transparent-black3);
  --texttran8: var(--text-transparent-black4);
  --texttran9: var(--text-transparent-black5);
  --texttran10: var(--text-transparent-black1);
  --texttran11: var(--text-transparent-black2);

  --texttran13: var(--yellow4);
  --texttran14: var(--red-4);
  --texttran15: var(--yellow3);
  --texttran16: var(--yellow1);
  --texttran17: var(--text-blue);
  --texttran18: var(--text-blue1);
  --textheader: var(--magenta2);

  /* 🎨 الـ 10 متغيرات المختلفة للنصوص بألوان منوعة وحصرية من تدريجاتنا */
  --textvar: var(--text-orange1);
  --textvar1: var(--text-magenta2);
  --textvar2: var(--text-aqua3);
  --textvar3: var(--text-green1);
  --textvar4: var(--text-majorelle3);
  --textvar5: var(--yellow4);
  --textvar6: var(--red3);
  --textvar7: var(--text-blue);
  --textvar8: var(--text-white3);
  --textvar9: var(--black2);

  --Cards: var(--white3);
  /* --Cards1: var(--white1); */
  --Cards2: var(--white4);

  --btn: var(--yellow4);
  --btn1: var(--yellow);

  --Sl_pgra_app: var(--black3);
  --cancelbtn: var(--black3);
  --cancelbtn1: var(--black4);
  --probtn: linear-gradient(90deg, var(--btn), var(--icon1));

  --icon: var(--magenta2);
  --icon1: var(--orange2);

  --icontransparent: var(--magenta-transparent2);
  --icontransparent1: var(--majorelle-transparent3);
  --icontransparent2: var(--aqua-transparent2);
  --icontransparent3: var(--aqua-transparent3);
  --icontransparent4: var(--orange-transparent2);

  --icontransparent5: var(--red-transparent4);
  --icontransparent6: var(--yellow-transparent4);
  --icontransparent7: var(--red2);
  --icontransparent10: var(--text-transparent-black1);
  --icontransparent11: var(--text-transparent-black2);
  --icontransparent12: var(--text-transparent-black3);
  --icontransparent13: var(--text-transparent-black4);
  --icontransparent14: var(--text-transparent-black5);
  --icontransparent15: var(--text-transparent-black6);
  --icontransparent16: var(--white1);
  --icontransparent17: var(--text-transparent-black4);

  --iconEmoji: var(--yellow-icon-emoji2);
  --iconEmoji1: var(--yellow-icon-emoji2);
  --iconEmoji2: var(--yellow-icon-emoji);
  --iconEmoji3: var(--yellow-icon-emoji3);
  --iconEmoji4: var(--yellow-icon-emoji2);
  --iconEmoji5: var(--yellow-icon-emoji);
  --iconEmoji6: var(--yellow);
  --iconEmoji7: var(--yellow4);
  --iconEmoji8: var(--yellow1);
  --iconEmoji9: var(--yellow4);
  --icontborder: var(--orange);
  --icontrashborder: var(--magenta-icon-emoji);

  --icontrash: var(--aqua-transparent);
  --icontrash1: var(--aqua-transparent2);
  --icontrash2: var(--majorelle-icon-emoji);
  --icontrash3: var(--red-transparent);
  --icontrash4: var(--orange-transparent);
  --icontrashborder: var(--aqua-transparent);

  --select-input: var(--white4);
  --select-input1: var(--white3);
  --select-input2: var(--white5);

}

body.dark-theme {

  --lightboby: var(--blue);

  --header: var(--bluetransparent5);
  /* --headeronatablet: var(--Majorelletransparent); */

  --text: var(--white1);
  --text1: var(--black1);

  /* --text-error: var(--aqua); */
  /* --textheader: var(--green3); */

  --texttran: var(--text-black1);
  --texttran1: var(--majorelle-transparent);
  --texttran2: var(--magenta-transparent);
  --texttran3: var(--text-aqua);
  --texttran4: var(--aqua-transparent);
  --texttran5: var(--text-green1);
  /* --texttran6: var(--text-orange); */

  --texttran7: var(--text-transparent-black4);
  --texttran8: var(--text-transparent-black2);
  --texttran9: var(--text-transparent-black3);
  --texttran10: var(--text-transparent-black1);
  --texttran11: var(--text-transparent-black);

  --texttran13: var(--text-yellow5);
  --texttran14: var(--text-red4);
  --texttran15: var(--text-red3);
  --texttran16: var(--text-yellow3);
  --texttran17: var(--text-yellow4);
  /* --texttran18: var(--text-blue1); */
  --texttran19: var(--green-1);

  /* 🎨 الـ 10 متغيرات المختلفة للنصوص بألوان منوعة وحصرية من تدريجاتنا */
  --textvar: var(--text-blue1);
  --textvar1: var(--text-magenta2);
  --textvar2: var(--text-aqua3);
  /* --textvar3: var(--text-green1); */
  /* --textvar4: var(--text-majorelle3); */
  /* --textvar5: var(--yellow4); */
  --textvar6: var(--red);
  --textvar7: var(--text-green3);
  --textvar8: var(--text-white3);
  --textvar9: var(--black3);


  --Cards: var(--blue2);
  --Cards1: var(--blue1);
  --Cards2: var(--blue4);

  --probtn: linear-gradient(90deg, var(--majorelle2), var(--majorelle4));
  --btn: var(--majorelle4);
  --btn1: var(--majorelle);
  --btn2: var(--majorelle3);
  --btnhover: var(--majorelle-icon-emoji1);
  --btnhover1: var(--aqua-icon-emoji4);
  --btnhover2: var(--black1);

  /* --Sl_pgra_app: var(--black3); */
  --cancelbtn: var(--text-transparent-black4);
  --cancelbtn1: var(--text-transparent-black);

  /* background: linear-gradient(90deg, #ff8a00, #e52e71); */


  --icon: var(--majorelle1);
  --icon1: var(--majorelle3);

  /* --icontransparent: var(--Magentatransparent); */
  /* --icontransparent1: var(--Majorelletransparent); */
  /* --icontransparent2: var(--aquatransparent); */
  /* --icontransparent3: var(--aquatransparent1); */
  /* --icontransparent4: var(--orangetransparent); */
  /* --icontransparent5: var(--radtransparent); */
  --icontransparent6: var(--yellow2);
  --icontransparent7: var(--red-transparent4);
  /* --icontransparent10: var(--text-transparentblack); */
  --icontransparent11: var(--text-transparentblack1);
  /* --icontransparent12: var(--text-transparentblack2); */
  /* --icontransparent13: var(--text-transparentblack3); */
  /* --icontransparent14: var(--text-transparentblack4); */
  --icontransparent15: var(--text-transparent-black4);
  --icontransparent16: var(--text-transparentblack3);
  --icontransparent17: var(--text-transparent-black4);


  --iconEmoji: var(--aqua-icon-emoji3);
  --iconEmoji1: var(--aqua-icon-emoji2);
  --iconEmoji2: var(--magenta-icon-emoji);
  --iconEmoji3: var(--magenta-icon-emoji);
  --iconEmoji4: var(--magenta-icon-emoji1);
  --iconEmoji5: var(--magenta-icon-emoji2);
  --iconEmoji6: var(--aqua-icon-emoji1);
  --iconEmoji7: var(--aqua-icon-emoji1);
  --iconEmoji8: var(--text-blue4);
  --iconEmoji9: var(--text-blue5);
  --icontborder: var(--aqua2);
  --icontrashborder: var(--magenta-icon-emoji);

  --icontrash: var(--aqua-transparent1);
  --icontrash1: var(--aqua-transparent2);
  --icontrash2: var(--majorelle-icon-emoji);
  --icontrash3: var(--);
  --icontrash4: var(--);
  --icontrashborder: var(--magenta-icon-emoji);


  --select-input: var(--blue2);
  --select-input1: var(--blue1);
  --select-input2: var(--blue4);

}

body.d {
  scrollbar-width: thin;
  scrollbar-color: var(--btn) transparent;

  --lightboby: var(--black2);

  --header: var(--black2);
  --headeronatablet: var(--text-transparentblack5);


  --text: var(--white1);
  --text1: var(--black1);

  --text-error: var(--text-errorY);
  --textheader: var(--green3);
  --texttran: var(--text-transparentblack1);
  --texttran1: var(--text-Magenta);
  --texttran2: var(--text-Majorelle);
  --texttran3: var(--text-aqua);
  --texttran4: var(--text-blue);
  --texttran5: var(--text-green1);
  --texttran6: var(--text-orange);
  --texttran7: var(--text-transparentblack1);
  --texttran8: var(--text-transparentblack2);
  --texttran9: var(--text-transparentblack3);
  --texttran10: var(--text-transparentblack4);
  --texttran11: var(--text-transparentblack5);
  --texttran12: var(--text-transparentblack6);




  --Cards: var(--black3);
  --Cards1: var(--black2);
  --Cards2: var(--black4);

  --btn: var(--green2);
  --btn1: var(--green4);

  --Sl_pgra_app: var(--black3);
  --cancelbtn: var(--black3);
  --cancelbtn1: var(--black4);
  --probtn: linear-gradient(90deg, var(--green4), var(--green1));
  /* background: linear-gradient(90deg, #ff8a00, #e52e71); */


  --icon: var(--green1);
  --icon1: var(--green5);

  --icontransparent: var(--Magentatransparent);
  --icontransparent1: var(--Majorelletransparent);
  --icontransparent2: var(--aquatransparent);
  --icontransparent3: var(--aquatransparent1);
  --icontransparent4: var(--orangetransparent);
  --icontransparent5: var(--radtransparent);
  --icontransparent6: var(--text-Y4);
  --icontransparent10: var(--);
  --icontransparent11: var(--text-rad2);
  --icontransparent12: var(--text-rad2);
  --icontransparent13: var(--text-rad2);
  --icontransparent14: var(--text-rad2);

  --iconEmoji: var(--green-icon-emoji);
  --iconEmoji1: var(--green-icon-emoji);
  --iconEmoji2: var(--green-icon-emoji1);
  --iconEmoji3: var(--green-icon-emoji2);
  --iconEmoji4: var(--green-icon-emoji3);
  --iconEmoji5: var(--green-icon-emoji4);
  --iconEmoji6: var(--aqua-icon-emoji1);

  --icontrash: var(--green-icon-emoji1);
  --icontrash1: var(--green-icon-emoji);
  --icontrash2: var(--green-icon-emoji4);
  --icontrash3: var(--);
  --icontrash4: var(--);

  --icontrashborder: var(--greeniconEmoji);


  --select-input: var(--black3);
  --select-input1: var(--selectinput1DarkR);
  --select-input2: var(--text-transparentblack2);

}

body.c {
  scrollbar-width: thin;
  scrollbar-color: var(--btn) transparent;

  --lightboby: var(--black2);

  --header: var(--black2);

  --text: var(--white1);
  --text1: var(--black1);

  /* --text-error: var(--aqua); */
  /* --textheader: var(--green3); */

  --texttran: var(--text-black1);
  --texttran1: var(--majorelle-transparent);
  --texttran2: var(--magenta-transparent);
  --texttran3: var(--text-aqua);
  --texttran4: var(--aqua-transparent);
  --texttran5: var(--text-green1);
  /* --texttran6: var(--text-orange); */

  --texttran7: var(--text-transparent-black4);
  --texttran8: var(--text-transparent-black2);
  --texttran9: var(--text-transparent-black3);
  --texttran10: var(--text-transparent-black1);
  --texttran11: var(--text-transparent-black);

  --texttran13: var(--text-yellow5);
  --texttran14: var(--text-red4);
  --texttran15: var(--text-red3);
  --texttran16: var(--text-yellow3);
  --texttran17: var(--text-yellow4);
  /* --texttran18: var(--text-blue1); */
  --texttran19: var(--green-1);

  /* 🎨 الـ 10 متغيرات المختلفة للنصوص بألوان منوعة وحصرية من تدريجاتنا */
  --textvar: var(--text-blue1);
  /* --textvar1: var(--text-magenta2); */
  /* --textvar2: var(--text-aqua3); */
  /* --textvar3: var(--text-green1); */
  /* --textvar4: var(--text-majorelle3); */
  /* --textvar5: var(--yellow4); */
  --textvar6: var(--red);
  --textvar7: var(--text-green3);
  /* --textvar8: var(--text-transparent-black4); */
  /* --textvar9: var(--black2); */


  --Cards: var(--black1);
  --Cards1: var(--text-transparent-black4);
  --Cards2: var(--text-transparent-black4);

  --btn: var(--magenta);
  --btn1: var(--magenta2);
  --btn2: var(--majorelle3);
  --btnhover: var(--majorelle-icon-emoji1);
  --btnhover1: var(--aqua-icon-emoji4);
  --btnhover2: var(--black1);

  /* --Sl_pgra_app: var(--black3); */
  --cancelbtn: var(--text-transparent-black4);
  --cancelbtn1: var(--text-transparent-black);

  /* --probtn: linear-gradient(90deg, var(--Majorelle2), var(--Majorelle1)); */
  /* background: linear-gradient(90deg, #ff8a00, #e52e71); */


  --icon: var(--magenta3);
  --icon1: var(--magenta1);

  /* --icontransparent: var(--Magentatransparent); */
  /* --icontransparent1: var(--Majorelletransparent); */
  /* --icontransparent2: var(--aquatransparent); */
  /* --icontransparent3: var(--aquatransparent1); */
  /* --icontransparent4: var(--orangetransparent); */
  /* --icontransparent5: var(--radtransparent); */
  --icontransparent6: var(--yellow2);
  --icontransparent7: var(--red-transparent4);
  /* --icontransparent10: var(--text-transparentblack); */
  --icontransparent11: var(--text-transparentblack1);
  /* --icontransparent12: var(--text-transparentblack2); */
  /* --icontransparent13: var(--text-transparentblack3); */
  /* --icontransparent14: var(--text-transparentblack4); */
  --icontransparent15: var(--text-transparent-black4);
  /* --icontransparent16: var(--text-transparentblack6); */


  --iconEmoji: var(--magenta-icon-emoji);
  --iconEmoji1: var(--magenta-icon-emoji1);
  --iconEmoji2: var(--magenta-icon-emoji2);
  --iconEmoji3: var(--majorelle-icon-emoji);
  --iconEmoji4: var(--magenta-icon-emoji1);
  --iconEmoji5: var(--magenta-icon-emoji2);
  --iconEmoji6: var(--rad-trash1);
  --iconEmoji7: var(--rad-trash);
  --iconEmoji8: var(--text-red1);

  --icontrash: var(--rad-trash1);
  --icontrash1: var(--rad-trash4);
  --icontrash2: var(--rad-trash3);
  --icontrash3: var(--);
  --icontrash4: var(--);
  --icontrashborder: var(--magenta-icon-emoji);


  --select-input: var(--blue2);
  --select-input1: var(--blue1);
  --select-input2: var(--blue4);
}

/* body.dark-theme {
    --Cards: var(--cardDarkR);
    --Cards2: var(--card1DarkR);
    --Cards2: var(--card2DarkR);








     --lightboby:  var(--dark_blue);
     --header: var(--dark_gray);
     --text: var(--dark_text);
     --text2: var(--Very_dark_navy_blue);
     --btn: var(--dark_bright_orange);
     --icon: var(--dark_light_purple);

     --Down_btn : var(--dark_bright_orange);


     --menu: ;  
     --menu_btn:var(--dark_bright_orange);

     --color-text-primary: #F1F5F9;
     --color-text-placeholder: #A6B7D2;
     --color-bg-primary: #111827;
     --color-bg-secondary: #3D4859;
     --color-bg-sidebar: #292929;
     --color-border-hr: #3B475C;
     --color-hover-secondary: #48566a;
     --colormenu-shadow: rgba(0, 0, 0, 0.3);
     --lighth1: #d9b9ff;
     --light_a: #c9c9c9;
  } */


@font-face {
  font-family: 'rainydays';
  src: local('Cairo'), url('/fonts/rainydays.ttf') format('truetype');
}

@font-face {
  font-family: 'PoppinsRegular';
  src: local('Cairo'), url('/fonts/Poppins-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'PoppinsBold';
  src: local('Cairo'), url('/fonts/Poppins-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'CairoRegular';
  src: local('Cairo'), url('/fonts/Cairo-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'CairoSemiBold';
  src: local('Cairo'), url('/fonts/Cairo-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'CairoBold';
  src: local('Cairo'), url('/fonts/Cairo-Bold.ttf') format('truetype');
}


@font-face {
  font-family: 'GraphikBold';
  src: url('/fonts/Graphik\ Arabic\ Bold.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'GraphikMedium';
  src: url('/fonts/Graphik\ Arabic\ Medium.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Graphik';
  src: url('/fonts/Graphik\ Arabic.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TheYearofHandicrafts';
  src: url('/fonts/TheYearofHandicrafts-Regular.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TheYearofHandicraftsBlack';
  src: url('/fonts/TheYearofHandicrafts-Black.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TheYearofHandicraftsBold';
  src: url('/fonts/TheYearofHandicrafts-Bold.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TheYearofHandicraftsSemiBold';
  src: url('/fonts/TheYearofHandicrafts-SemiBold.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TheYearofHandicraftsMedium';
  src: url('/fonts/TheYearofHandicrafts-Medium.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3,
[lang="ar"] p,
[lang="ar"] label,
[lang="ar"] span,
[lang="ar"] .header-container {
  text-align: right;
  direction: rtl;
  /* float: right; */
}

[lang="en"] h1,
[lang="en"] h2,
[lang="en"] h3,
[lang="en"] p,
[lang="en"] .header-container {
  text-align: left;
  direction: ltr;
}


[lang="ar"] .main-header {
  /* font-family: 'CairoBold'; */
  /* font-family: 'CairoSemiBold'; */
  font-family: 'CairoRegular';
  /* font-family: 'PoppinsBold'; */
  /* font-family: 'GraphikBold'; */
  /* font-family: 'Graphik'; */
  /* font-family: 'GraphikMedium'; */
}

[lang="ar"] .main-header .logo-text,
[lang="en"] .main-header .logo-text {
  /* font-family: 'CairoBold'; */
  /* font-family: 'CairoSemiBold'; */
  /* font-family: 'CairoRegular'; */
  font-family: 'Poppins', sans-serif;
  /* font-family: 'PoppinsBold'; */
  /* font-family: 'GraphikBold'; */
  /* font-family: 'Graphik'; */
  /* font-family: 'GraphikMedium'; */
}

[lang="en"] .main-header {
  /* font-family: 'CairoBold'; */
  /* font-family: 'CairoSemiBold'; */
  /* font-family: 'CairoRegular'; */
  /* font-family: 'PoppinsBold'; */
  /* font-family: 'GraphikBold'; */
  /* font-family: 'Graphik'; */
  /* font-family: 'GraphikMedium'; */
  font-family: 'Poppins', sans-serif;
}

[lang="ar"] .btn-primary {
  font-size: 1.2rem;

}

[lang="en"] .btn-primary {
  font-size: 1rem;
}

[lang="ar"] .content-workspace,
[lang="ar"] .workflow-promo-block {
  flex-direction: row;
}

[lang="ar"] .q {
  flex-direction: row-reverse;
}

[lang="ar"] .hero-carousel-section,
[lang="ar"] .help-carousel-section,
[lang="ar"] .hero-heading {
  font-family: 'GraphikBold' !important;
}

[lang="en"] .hero-carousel-section,
[lang="en"] .help-carousel-section,
[lang="en"] .hero-heading {
  font-family: 'GraphikBold' !important;
}


[lang="ar"] .hero-h {
  font-family: 'Graphik' !important;
}

[lang="en"] .hero-h {
  font-family: 'Graphik' !important;
}

[lang="ar"] .hero-carousel-section,
[lang="ar"] .help-carousel-section,
[lang="ar"] .hero-text-col,
[lang="ar"] .why-us-section,
[lang="ar"] footer {
  direction: rtl;
  position: relative;
}


[lang="ar"] .section-container {
  font-family: 'CairoBold';
  /* font-family: 'CairoSemiBold'; */
  /* font-family: 'CairoRegular'; */
  /* font-family: 'Cairo', 'Poppins', sans-serif; */
  /* font-family: 'PoppinsBold'; */
  /* font-family: 'GraphikBold'; */
  /* font-family: 'Graphik'; */
  /* font-family: 'GraphikMedium'; */
}

[lang="en"] .section-container {
  /* font-family: 'CairoBold'; */
  /* font-family: 'CairoSemiBold'; */
  /* font-family: 'CairoRegular'; */
  font-family: 'Cairo', 'Poppins', sans-serif;
  /* font-family: 'PoppinsRegular'; */
  /* font-family: 'GraphikBold'; */
  /* font-family: 'Graphik'; */
  /* font-family: 'GraphikMedium'; */
}


[lang="en"] .display-mode-selector,
[lang="ar"] .display-mode-selector {
  font-family: 'CairoRegular, sans-serif';
}

[lang="ar"] .interactive-options h3 {
  font-family: 'CairoRegular, sans-serif';
}

[lang="en"] .interactive-options h3 {
  font-family: 'Graphik, sans-serif';
}

[lang="ar"] .interactive-options .toggle-item {
  font-family: 'CairoBold, sans-serif';
  direction: rtl;
}

[lang="en"] .interactive-options .toggle-item {
  font-family: 'GraphikMedium, sans-serif';
}

[lang="en"] .problem-code-container,
.problem-code-container code.hljs,
.problem-code-container .code-line,
[lang="ar"] .problem-code-container,
.problem-code-container code.hljs,
.problem-code-container .code-line {
  font-family: 'Consolas', 'Fira Code', monospace !important;
  font-size: 10;
  direction: ltr !important;
  /* float: left; */
  line-height: 1.6;
}

[lang="ar"] .problem-text-container {
  font-family: 'Consolas', 'Fira Code', monospace !important;
  font-size: 28px;
  font-weight: 500;
  direction: ltr !important;
  line-height: 2;
}

[lang="en"] .problem-text-container {
  font-family: 'Consolas', 'Fira Code', monospace !important;
  font-size: 28px;
  font-weight: 500;
  direction: ltr !important;
  line-height: 2;
}

[lang="ar"] .help-section,
[lang="ar"] .why-us-section {
  font-family: 'CairoBold';
}

[lang="en"] .help-section,
[lang="en"] .why-us-section {
  font-family: 'GraphikMedium';
}

[lang="ar"] .help-section p,
[lang="ar"] .why-us-section p {
  font-family: 'CairoRegular, sans-serif';
}

[lang="en"] .help-section p,
[lang="en"] .why-us-section p {
  font-family: 'Graphik, sans-serif';
}

[lang="en"] .why-us-section .feature-card,
[lang="ar"] .why-us-section .feature-card {
  font-family: 'Graphik';
}

[lang="en"] .why-us-section .feature-card p,
[lang="ar"] .why-us-section .feature-card p,
[lang="ar"] .help-section .feature-help p,
[lang="en"] .help-section .feature-help p {
  font-family: 'Graphik, sans-seerif';
}

[lang="ar"] footer {
  font-family: 'CairoBold';
}

[lang="en"] footer {
  font-family: 'Graphik sans-serif' !important;
}

[lang="en"] footer .logo,
[lang="ar"] footer .logo {
  font-family: 'Poppins', sans-serif;
}

[lang="ar"] footer .brand-subtext {
  font-family: 'CairoRegular, sans-serif';
}

[lang="en"] footer .brand-subtext {
  font-family: 'Graphik sans-serif' !important;
  font-size: 21;
}

[lang="en"] footer .footer-links-col,
[lang="ar"] footer .footer-links-col {
  font-family: 'Graphik';
  font-size: 21;
}

[lang="en"] footer .footer-links-col a,
[lang="ar"] footer .footer-links-col a {
  font-family: 'Graphik, sans-seerif';
  font-size: 16;
}

[lang="ar"] footer .buttom_footer,
[lang="en"] footer .buttom_footer {
  font-family: 'Graphik, sans-seerif';
}

[lang="ar"] #messageTermsofService h1,
[lang="ar"] #messageTermsofService h2,
[lang="ar"] #messageTermsofService h3 {
  font-family: 'Cairo', 'Graphik', sans-serif;
  line-height: 1.1;

}

[lang="en"] #messageTermsofService h1,
[lang="en"] #messageTermsofService h2,
[lang="en"] #messageTermsofService h3 {
  font-family: 'GraphikMedium';
  line-height: 1.1;
}

[lang="en"] #messageTermsofService p,
[lang="ar"] #messageTermsofService p {
  font-family: 'CairoRegular' !important;
  line-height: 1.3 !important;
}

[lang="ar"] .Contact-section {
  direction: rtl;
}

[lang="en"] .Contact-section {
  direction: ltr;
}


[lang="ar"] .Contact-section .ti-help.contact-card {
  text-align: right !important;
  align-items: start;
  display: flex;
}

[lang="en"] .Contact-section .ti-help.contact-card {
  text-align: left !important;
  align-items: end;
  display: flex;
}

[lang="ar"] .contact-card .info-group {
  text-align: right !important;
  align-items: end;
  display: flex;
}

[lang="an"] .contact-card .info-group {
  text-align: left !important;
  align-items: start;
  display: flex;
}

[lang="ar"] .Contact-section label {
  text-align: right !important;
}

[lang="en"] .Contact-section label {
  text-align: left !important;
}

[lang="ar"] .Contact-section .Ticket-Subject,
[lang="ar"] .Contact-section .Ticket-Details {
  font-family: 'GraphikMedium';
  direction: rtl !important;
  text-align: right !important;
}

[lang="en"] .Contact-section .Ticket-Subject,
[lang="en"] .Contact-section .Ticket-Details {
  font-family: 'GraphikMedium';
  direction: ltr;
}

[lang="en"] .Contact-section .Ticket-Subject-p,
[lang="en"] .Contact-section .Ticket-Details-p {
  font-family: 'Graphik';
}

[lang="ar"] .filter-box {
  direction: rtl !important;
  text-align: right !important;
}

[lang="ar"] .selected-vluae-text {
  font-family: 'GraphikMedium';
  direction: rtl;
  font-style: italic;
  float: right;
  text-align: right !important;

}

[lang="ar"] .dropdown-toggle:checked~.options-list {
  font-family: 'Graphik';
  direction: rtl !important;
  font-style: normal;
}

[lang="en"] .filter-box {
  direction: ltr;
}

[lang="en"] .selected-vluae-text {
  font-family: 'GraphikMedium';
  direction: ltr;
  font-style: italic;
}

[lang="en"] .dropdown-toggle:checked~.options-list {
  font-family: 'Graphik';
  direction: ltr;
  font-style: normal;
}

[lang="ar"] .faq-accordion {
  direction: rtl;
}

[lang="en"] .faq-accordion {
  direction: ltr;
}