@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Coiny&family=DynaPuff:wght@400..700&family=Frijole&family=Oi&family=Playpen+Sans+Arabic:wght@100..800&family=Titan+One&family=Trade+Winds&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wght@400..700&family=Frijole&family=Trade+Winds&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400..800&family=Coiny&family=DynaPuff:wght@400..700&family=Frijole&family=Oi&family=Playpen+Sans+Arabic:wght@100..800&family=Titan+One&family=Trade+Winds&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400..800&family=Coiny&family=DynaPuff:wght@400..700&family=Frijole&family=Momo+Trust+Display&family=Oi&family=Playpen+Sans+Arabic:wght@100..800&family=Tajawal:wght@200;300;400;500;700;800;900&family=Titan+One&family=Trade+Winds&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400..800&family=Coiny&family=DynaPuff:wght@400..700&family=Frijole&family=Momo+Trust+Display&family=Oi&family=Playpen+Sans+Arabic:wght@100..800&family=Tajawal:wght@200;300;400;500;700;800;900&family=Titan+One&family=Trade+Winds&display=swap');

/* ======================================== */
/*           Global Styles                   */
/* ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Cairo", sans-serif;
}

/* الخلفية العامة للصفحة */
body {
  background-color: #ffffff;


}

/* ===== تنسيقات عامة ===== */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

/* الرسالة المنبثقة */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content {
  background: #fff;
  border-radius: 5px;
  text-align: center;
  padding: 35px 25px 30px;
  width: 90%;
  max-width: 500px;
  animation: fadeIn 0.35s ease;
  position: relative;
}

/* ✅ دائرة علامة الصح */
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #a5e6b0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 30px;
  background-color: #eaffea;
}

.circle i {
  color: #2ecc71;
  font-size: 60px;
}

.modal-content h2 {
  font-size: 30px;
  color: #5e5e5e;
  margin: 15px 0;
}

.modal-content p {
  color: #666;
  font-size: 18px;
  margin-bottom: 25px;
}

.modal-content button {
  background: #56c1ff;
  border: none;
  color: #fff;
  font-size: 19px;
  padding: 10px 40px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}

.modal-content button:hover {
  background: #38a8e0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(1.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}


/*!--=====================================================
===================== (Navbar) ==========================
=========================================================--*/
/* الشريط العلوي */
.navbar {
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  padding-left: 130px;
  padding-right: 130px;
  z-index: 999;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);







}

/* الخط المتحرك تحت الرابط */
.nav-links li a::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 3px;
  left: 0;
  bottom: 0;
  background-color: #23a3d6;
  /* لون الخط */
  border-radius: 3px;
  transition: width 0.3s;
}

/* لما تعمل hover على اللينك */
.nav-links li a:hover::after {
  width: 100%;
}

/* الرابط النشط (مثلاً الصفحة الحالية) */
.nav-links li a.active::after {
  width: 100%;
}


/* ===== الشعار ===== */
.logo img {
  /* حجم الشعار */
  width: 120px;
  display: flex;
}

/* Divider */
body.dark .الخط--,
body.dark .الخط--- {
  background: #475569 !important;
}

.scroll-line {
  position: fixed;
  top: 120px;
  /* تحت الشريط العلوي */
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #0077ff52;
  z-index: 9999;
  opacity: 0;
  /* يبدأ مخفي */
  transition: opacity 0.4s ease;
  /* تأثير اختفاء وظهور سلس */

}

.scroll-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(9deg, #00d9ff, #0051ff);
  transition: width 0.1s linear;
}

/* ===== الأيقونات على اليسار ===== */
.nav-icons {
  display: flex;
  /* يضمن الأيقونات جنب بعض */
  align-items: center;
  gap: 30px;
  /* المسافة بين الأيقونات */
  position: relative;
  right: 100px;
}

.notification {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-image: url("الاشعارات.image/png");
  /* الصورة بتاعتك */
  background-size: 80%;
  /* حجم الصورة */
  background-position: center;
  /* في النص */
  background-repeat: no-repeat;
  /* ماتتكررش */
  cursor: pointer;
}

/* أيقونات الشخص  */
.profile {
  width: 40px;
  height: 40px;
  background-image: url("بروفايل.image/png");
  /* الصورة بتاعتك */
  background-size: 100%;
  /* حجم الصورة */
  cursor: pointer;
}

/* لون أيقونة الإشعارات في الوضع العادي */
.notification i {
  color: #474747;
  /* لون عادي */
  transition: 0.3s;
}

/* لون أيقونة الإشعارات في الدارك مود */
body.dark .notification i {
  color: #525252;
  /* لون فاتح */
}

/* ===== صندوق الإشعارات ===== */
.notif-box {
  font-size: large;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: rgb(170, 170, 170);
  display: none;
  /* مخفي افتراضياً */
  position: absolute;
  top: 60px;
  right: 80px;
  /* يظهر تحت أيقونة الإشعارات */
  background: rgb(255, 255, 255);
  min-width: 200px;
  height: 50px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  padding: 11px;
  z-index: 99999 !important;
  /* أعلى رقم ممكن */
}


/* تفعيل صندوق الإشعارات */
.notif-box.active {
  display: block;

}


.profile-menu {
  display: none;
  /* مخفية افتراضياً */
  position: absolute;
  /* مهم علشان نقدر نتحكم في مكانها */
  top: 50px;
  /* المسافة من الأعلى بالنسبة لأيقونة البروفايل */
  right: 0;
  /* يمين بالنسبة لأيقونة البروفايل */
  background: #ffffff;
  padding: 5px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  min-width: 150px;
  text-align: right;
  margin: 7px;
  transition: opacity 0.3s ease 0.2s;

  z-index: 99999;
  /* أعلى من أي عنصر تاني في الصفحة */
}

/* تفعيل قائمة الشخص */
.profile-menu.active {
  display: block;
}

/* ===== تنسيقات عامة للقائمة الجانبية ===== */
.icons-janebia {
  list-style: none;
  /* إزالة النقاط الافتراضية */
  padding: 0;
  margin: 0;
  width: 220px;
  /* عرض القائمة الجانبية */
}

/* ===== عناصر القائمة ===== */
.icons-janebia li {
  display: flex;
  /* الأيقونة والنص في صف واحد */
  align-items: center;
  /* محاذاة عمودية وسطية */
  padding: 12px 15px;
  /* المسافة داخل كل عنصر */
  gap: 10px;
  /* المسافة بين الأيقونة والنص */
  transition: background 0.3s, color 0.4s;
  /* تأثير عند المرور */
  cursor: pointer;
  /* مؤشر اليد عند المرور */
}

/* ===== أيقونات Font Awesome ===== */
.icons-janebia li i {
  font-size: 17px;
  /* حجم الأيقونة */
  color: #4081c5;
  /* لون الأيقونة */
  min-width: 25px;
  /* عرض ثابت للأيقونة لضبط محاذاة النصوص */
  text-align: center;
  /* محاذاة الأيقونة في المنتصف */
}

/* العنصر العاشر في القائمة (تسجيل الخروج) */
.icons-janebia li:last-child i {
  color: rgb(214, 25, 25);
}


/* ===== نصوص الروابط ===== */
.icons-janebia li a {
  text-decoration: none;
  /* إزالة الخط السفلي */
  color: #222222;
  /* لون النص */
  font-size: 18px;
  /* حجم الخط */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  transition: color 0.3s;
  /* تأثير عند المرور */
  flex: 1;
  /* النص يشغل المساحة المتبقية */
}

/* ===== تأثير عند المرور على عنصر القائمة ===== */
.icons-janebia li:hover {
  background: #b0d0ff;
  border-radius: 5px;
}

/*بوكس المحفظه*/
.wallet-box {
  width: auto;
  /* ← هتخلي البوكس يتمدد على قد المحتوى */
  height: 50px;
  display: flex;
  align-items: center;
  background: #0F172A;
  border-radius: 500px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  gap: 4px;
  /* المسافة بين الرقم والكلمة */
  font-family: sans-serif;
  padding-left: 12px;
}

body.dark .wallet-box {
  background-color: #ffffff;
}

.wallet-icon {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background: #64748B;
  display: flex;
  align-items: center;
  margin-left: 5px;
  margin-bottom: 1px;
}

body.dark .wallet-icon {
  background-color: #3f5d80;

}


/* أيقونات المحفظة  */
.wallet {
  width: 29px;
  height: 29px;
  background-image: url("المحفظة - image/Copy.png");
  /* الصورة بتاعتك */
  background-size: 100%;
  /* حجم الصورة */
  background-position: center;
  /* في النص */
  background-repeat: no-repeat;
  /* ماتتكررش */
  margin-right: 9px;


}

.wallet-amount {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  font-family: "Tajawal", sans-serif;
}

body.dark .wallet-amount {
  color: #000;

}

.currency {
  font-size: 21px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 3px;
  font-family: "Tajawal", sans-serif;
}

body.dark .currency {
  color: #000;
  font-size: 21px;
}


body.dark .profile i {
  color: #00aeff;
}

/* ===== تمرير القائمة على الشاشات الصغيرة ===== */
@media (max-width: 768px) {
  .icons-janebia {
    width: 180px;
    /* عرض أصغر */
  }

  .icons-janebia li a {
    font-size: 14px;
    /* حجم خط أصغر */
  }

  .icons-janebia li i {
    font-size: 18px;
  }
}


/*Dark Mood*/
#theme-toggle-button {
  width: 6em;
  cursor: pointer;
  margin-right: 1000px;
}

/* Hide default HTML checkbox */
#toggle {
  opacity: 0;
}

#container,
#patches,
#stars,
#button,
#sun,
#moon,
#cloud {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.25s;
}

/* night sky background */
#toggle:checked+svg #container {
  fill: #2b4360;
}

/* move button to right when checked */
#toggle:checked+svg #button {
  transform: translate(28px, 2.333px);
}

/* show/hide sun and moon based on checkbox state */
#sun {
  opacity: 1;
}

#toggle:checked+svg #sun {
  opacity: 0;
}

#moon {
  opacity: 0;
}

#toggle:checked+svg #moon {
  opacity: 1;
}

/* show or hide background items on checkbox state */
#cloud {
  opacity: 1;
}

#toggle:checked+svg #cloud {
  opacity: 0;
}

#stars {
  opacity: 0;
}

#toggle:checked+svg #stars {
  opacity: 1;
}


/* ========================= */
/*       DARK MODE        */
/* ========================= */

body.dark {
  background: #0f172a !important;
  color: #e2e8f0 !important;
}

/* Navbar */
body.dark .navbar {
  background: #1e293b !important;
  border-bottom: 1px solid #334155 !important;
  box-shadow: none !important;
}

body.dark .nav-icons i {
  color: #93c5fd !important;
}

/* Profile menu + notif box */
body.dark .profile-menu,
body.dark .notif-box {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1) !important;
  z-index: 9999;
  /* أعلى من أي حاجة */
}

body.dark .icons-janebia li:last-child i {
  color: #da1616 !important;

}

body.dark .profile-menu li a,
body.dark .notif-box p {
  color: #e2e8f0 !important;
}

/* Courses section */
body.dark .courses-section {
  background: transparent !important;
}

/* Course image */
body.dark .course-image {
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}

/* Course card */
body.dark .course-card {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155;
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1) !important;
}

/* Title */
body.dark .span1 {
  color: #ffffff !important;
}

/* Paragraph */
body.dark .course-card p {
  color: #cbd5e1 !important;
}

/* Button */
body.dark .button1 {
  background: #3b82f6 !important;
  color: white !important;
}

body.dark .button1:hover {
  background: #2563eb !important;
}

/* Price box */
body.dark .جنيها {
  background: #0ea5e9 !important;
  color: #fff !important;
}

body.dark .prise {
  background: #f8fafc !important;
  color: #000 !important;
}

/* Footer */
body.dark .Developed-By {
  color: #94a3b8 !important;
}

/* Texts */
body.dark .تصفح {
  color: #ffffff !important;
}

/* Sidebar items */
body.dark .icons-janebia li:hover {
  background: #334155 !important;
}

body.dark .icons-janebia li a {
  color: #e2e8f0 !important;
}

body.dark .icons-janebia li i {
  color: #60a5fa !important;
}

/* Notification */
body.dark .notification i {
  color: #94a3b8 !important;
}

/* ======================================== */
/*         البطاقات الرئيسية (Cards)        */
/* ======================================== */

.تصفح {
  color: #000000;
  font-family: "Playpen Sans Arabic", cursive;
  font-size: 70px;
  font-weight: 900;
}

.الكورسات {
  color: #08aef0;
  font-size: 70px;
  font-weight: 900;
  font-family: "Playpen Sans Arabic", cursive;

}

.rainbow-line {
  width: 400px;
  /* طول الخط */
  height: 8px;
  /* ارتفاع القوس */
  margin: 2px auto;
  border: none;
  border-radius: 50px;
  background: rgb(11, 160, 230);
}

/* ====== قسم الكورسات ====== */
.courses-section {
  text-align: center;
  background-color: rgb(255, 255, 255);
  margin-top: 50px;
  margin-bottom: 50px;
  padding: 10px;
}

.الخط--- {
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #00bcd4, #2196f3, #00bcd4);
  border: none;
  border-radius: 5px;
  margin: 15px;
}

.courses {
  display: flex;
  justify-content: center;
  /* يحط الكروت في النص أفقي */
  align-items: center;
  flex-wrap: wrap;
  /* يخليهم ينزلوا تحت بعض في الشاشات الصغيرة */
  gap: 40px;
  padding: 100px;
}


/* كل كورس */
.course {
  display: flex;
  flex-direction: column;
  align-items: center;
}





/* الكارت بتاع الكورسات */
.course-card {
  background: #e6e8eb;
  border-radius: 12px;
  padding: 20px;
  position: relative;
  overflow: visible !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.384);
  transition: transform 0.4s ease;
  text-align: center;


}

.course:hover .course-card {
  transform: scale(1.02);
}



/* عنوان الكارت */
.span1 {
  display: block;
  font-size: 28px;
  font-weight: 700;
  margin: 10px 0 5px 0;
  color: #3d3d3d;
  font-family: "Baloo Bhaijaan 2", sans-serif;
}

/* الخط الي تحت العنوان */
.الخط--- {
  width: 79%;
  margin: 10px auto;
  border: none;
  height: 5px;
  border-radius: 5px;
  background: #0ea5e9;
}

/* الفقرة مثلا اول محاضرات الشهر الاول */
.course-card p {
  font-size: 17px;
  margin: 8px 0 15px;
  line-height: 1.6;
  color: #555555;
  font-family: "Tajawal", sans-serif;
}

/* زرار الدخول للكورس   */
.button1 {
  width: 80%;
  height: 48px;
  background: linear-gradient(135deg, #1ec9ff, #0077ff);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  font-family: "Tajawal", sans-serif;
  cursor: pointer;
  display: block;
  margin: 20px auto 0;
  transition: .25s ease;
  box-shadow: 0px 4px 12px rgba(30, 150, 255, 0.35);
}

/* الحركة عند الـ Hover */
.button1:hover {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0px 3px 15px rgba(0, 140, 255, 0.45);
  background: linear-gradient(135deg, #3dd9ff, #1188ff);
}

/* تأثير عند الضغط */
.button1:active {
  transform: scale(0.97);
  box-shadow: 0px 2px 8px rgba(0, 140, 255, 0.3);
}

/* بوكس السعر */
.جنيها {
  font-family: "Tajawal", sans-serif;
  position: absolute;
  bottom: 40px;
  /* تحكم في نزوله */
  right: 10px;
  /* تحكم في بعده عن الشمال */
  background-color: #1db9be;
  padding: 6px 12px;
  border-radius: 10px;
  display: flex;
  gap: 6px;
  color: #000;
  cursor: default;
}

/* السعر نفسه */
.prise {
  background-color: #fff;
  width: 55px;
  height: 24px;
  border-radius: 6px;
  font-size: 15px;

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

/* الخط */
.الخط-- {
  margin-top: 40px;
  border: none;
  height: 1px;
  border-radius: 5px;
  background: #919191;
}

/*تاريخ نزول الكورس*/
.الحد {
  font-size: 15px !important;
  font-family: "Tajawal", sans-serif;
  color: #797979;
  text-align: right;
  /* يخليه في أقصى يمين */
  margin: 3px 5px;
  /* فوق وتحت بسيط + يمين بسيط */
  opacity: 0.8;
  /* يخليه أنعم */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  /* مسافة بسيطة بين النص والأيقونة */
}

.الحد i {
  font-size: 12px;
  color: #00aeff;
  /* لون الأيقونة */
}








/* ======================================== */
/*     الرساله (تم تسجيل الدخول بنجاح)    */
/* ======================================== */

/* ✅ خلفية شفافة تغطي الصفحة كلها */
.login-success-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  /* هتبان بالجافاسكريبت */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* ✅ الصندوق الأبيض */
.login-success-box {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  animation: popUp 0.4s ease;
}

/* ✅ أنيميشن الظهور */
@keyframes popUp {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 5;
  }
}

/* ✅ العلامة الخضراء */
.checkmark-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 5px solid #d1f0d1;
  margin: 0 auto 20px;
  position: relative;
}

.checkmark {
  width: 30px;
  height: 60px;
  border-right: 4px solid #4CAF50;
  border-bottom: 4px solid #4CAF50;
  transform: rotate(45deg);
  position: absolute;
  top: 10px;
  left: 30px;
}

/* ✅ النص */
.login-success-box h2 {
  color: #333;
  margin-bottom: 8px;
  font-size: 24px;
}

.login-success-box p {
  color: #777;
  margin-bottom: 20px;
  font-size: 16px;
}

/* ✅ الزر */
#successBtn {
  background-color: #4aaeff;
  border: none;
  color: white;
  padding: 10px 25px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

#successBtn:hover {
  background-color: #319ae8;
}



/* 🔹 إعدادات عامة للصفحة */
body {
  margin: 0;
  font-family: 'Cairo', sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* علشان الفوتر يفضل في الأسفل */
}

/* 🔹 الفوتر */
footer {
  margin-top: auto;
  background-color: #334155;
  /* نفس نظام ألوان المواقع الاحترافية */
  padding: 30px 0;
  text-align: center;
}

.social-img {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 25px;
}

.social-img a {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  /* خلفية شفافة افتراضية */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.35s ease;
  background-size: 70%;
  /* حجم الأيقونة داخل الدائرة */
  background-repeat: no-repeat;
  background-position: center;
  /* يمنع سحب أي صورة */
  -webkit-user-drag: none;
  /* لمتصفح كروم وسفاري */
  -khtml-user-drag: none;
  -moz-user-drag: none;
  /* لمتصفح فايرفوكس */
  -o-user-drag: none;
  user-select: none;
  /* يمنع تحديد العنصر */
  pointer-events: auto;
  /* يسمح بالنقر لكن يمنع السحب */

}

/* الخلفيات حسب كل أيقونة */
.social-img a.facebook {
  background-image: url('image/facebook.png');

}

.social-img a.youtube {
  background-image: url('image/youtube.png');
}

.social-img a.tiktok {
  background-image: url('image/tik tok.png');
}

.social-img a.instagram {
  background-image: url('image/instagrm.png');
}

.social-img a.telegram {
  background-image: url('image/watsapp.png');
}

.social-img a.whatsapp {
  background-image: url('image/telegram.png');
}

/* تأثير hover */
.social-img a:hover {
  transform: translateY(-7px) scale(1.15);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}




/* 🔹 الخط الفاصل */
.end-- {
  width: 550px;
  /* العرض اللي انت عايزه */
  max-width: 90%;
  /* لو الشاشة صغيرة يقلل نفسه */
  height: 4px;
  background-color: #1E293B;
  border: none;
  border-radius: 5px;
  margin: 50px auto 60px;
  /* يحطه في النص مهما كان حجم الشاشة */
  display: block;
  /* علشان margin auto يشتغل */
}


.صنع {
  font-family: 'Tajawal', sans-serif !important;
  font-size: 21px;
  color: #dbdbdb;
}


/* صندوق  */
.support-footer {
  width: 350px;
  background: rgba(255, 255, 255, 0.11);
  /* شفاف */
  backdrop-filter: blur(10px);
  /* ضبابي جميل */
  padding: 25px;
  margin: 60px auto;
  text-align: center;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* عنوان الدعم */
.support-title {
  font-size: 25px;
  color: #ffffff;
  margin-bottom: 20px;
  font-weight: 700;
  font-family: 'Tajawal', sans-serif !important;
}

/* أيقونات السوشيال */
.support-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 15px;

}

.support-icons .icon {
  width: 45px;
  height: 45px;
  background: rgba(255, 255, 255, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 22px;
  color: #fff;
  transition: .3s;
  text-decoration: none;
  /* يمنع سحب أي صورة */
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-select: none;
  pointer-events: auto;

}

.support-icons .icon:hover {
  transform: translateY(-2px);

}

/* نص التواصل */
.support-text {
  font-size: 17px;
  margin-top: 10px;
  color: #ffffff;
  font-family: "Tajawal", sans-serif;
}

/* ألوان خاصة لكل أيقونة */
.support-icons .facebook {
  background: #1877f2;
}

.support-icons .whatsapp {
  background: #25d366;
}

.support-icons .telegram {
  background: #0088cc;
}



/* 🔹 نص المطور */
.Developed-By {
  font-family: 'Tajawal', sans-serif !important;
  /* تأكيد استخدام الخط */
  font-size: 19px;
}

/* الرابط الأساسي */
.Developed-By a {
  color: #e7e7e7;
  text-decoration: none;
  font-size: 20px;
  font-family: "DynaPuff", system-ui;

}

.Developed {
  color: #B4DC7F;
  font-family: "DynaPuff", system-ui;
  margin-top: 20px;
  /* المسافة بينه وبين أي عناصر فوقه */
}

/* ✨ تأثير اسم البشمبرمج */
.البشمبرمج {
  font-size: 18px;
  display: inline;
  margin-left: 5px;
  margin-right: 5px;
  transition: 0.5s ease;
}

/* ✨ عند مرور الماوس على الاسم */
.البشمبرمج:hover {
  background-color: #0ea4e913;
  /* مربع شفاف أسود */
  border-radius: 6px;
  /* حواف مدوّرة */
  padding: 3px px;
  /* مساحة داخلية */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.192);
}