body {
background-image: url("Pic_Sav\ALMOQATEI L1OGO.png");     /* تأكد أن الصورة في نفس المجلد */
background-size: cover;                /* تغطية كاملة */
background-repeat: no-repeat;          /* لا تتكرر */
background-position: center;           /* توسيط الصورة */
font-family: Tahoma, sans-serif;       /* تنسيق الخط */
color: white;                          /* لون النص */
text-align: center;                    /* توسيط النص */
padding-top: 100px;                    /* إبعاد النص عن الأعلى */
}



/* _CSS___________________________________________________________________________________ */

#Font_101 {
color: red;     /* لون الخط */
font-size: 20px;      /* حجم الخط*/
font-family: Times New Roman (Headings CS), sans-serif;      /* نوع الخط */
text-align: center; /* يجعل النص في وسط العنصر أفقياً */
}
/* _CSS___________________________________________________________________________________ */




/* إعادة ضبط الحواف والمساحات الداخلية وإعداد صندوق العناصر */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* إعداد عام للجسم والصفحة */
body, html {
height: 100%;
font-family: Arial, sans-serif;
}
/* _CSS___________________________________________________________________________________ */
/* تنسيق رأس الصفحة (الهيدر) */
header {
height: 80px; /* ارتفاع الهيدر */
background-color: #White; /* خلفية داكنة */
color: Navy; /* لون النص */
display: flex; /* استخدام Flexbox لترتيب العناصر */
align-items: center; /* محاذاة عمودية في الوسط */
justify-content: space-between; /* توزيع العناصر بين اليمين واليسار */
padding: 0 15px; /* هامش داخلي جانبي */
position: fixed; /* يظل ثابتًا في الأعلى عند التمرير */
top: 0;
left: 0;
right: 0;
z-index: 1000; /* في الأمام فوق باقي العناصر */
flex-direction: row-reverse; /* يجعل زر الهامبرجر على اليمين */
}
/* _CSS___________________________________________________________________________________ */
/* زر القائمة الجانبية (الهامبرجر) */
.hamburger {
font-size: 24px;
cursor: pointer; /* يتحول إلى مؤشر اليد */
}
/* _CSS___________________________________________________________________________________ */
/* تذييل الصفحة (الفوتر) */
footer {
height: 100px; /* ارتفاع الفوتر */
background-color: #333;
color: white;
display: flex;
align-items: center;
justify-content: center;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
}
/* _CSS___________________________________________________________________________________ */
/* تنسيق القائمة الجانبية */
.sidebar {
position: fixed; /* ثابت في الموقع */
top: 60px; /* يبدأ بعد الهيدر */
bottom: 50px; /* ينتهي قبل الفوتر */
right: -250px; /* مخفية خارج الشاشة */
width: 250px; /* عرض القائمة */
background-color: #f5f5f5; /* خلفية فاتحة */
overflow-y: auto; /* يسمح بالتمرير إذا زاد المحتوى */
transition: right 0.3s ease; /* حركة سلسة عند الفتح */
padding: 15px;
z-index: 900;
}
/* _CSS___________________________________________________________________________________ */
/* عند الفتح تظهر القائمة */
.sidebar.open {
right: 0; /* تظهر في يمين الشاشة */
}
/* _CSS___________________________________________________________________________________ */
/* تنسيق المحتوى الرئيسي */
.main-content {
margin-top: 60px; /* مسافة تعادل الهيدر */
margin-bottom: 50px; /* مسافة تعادل الفوتر */
padding: 20px; /* هامش داخلي */
}
/* _CSS___________________________________________________________________________________ */
/* التراك الذي يغطي الصفحة عند فتح القائمة */
.overlay {
display: none; /* مخفي افتراضيًا */
position: fixed;
top: 60px; /* يبدأ بعد الهيدر */
bottom: 50px; /* ينتهي قبل الفوتر */
right: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4); /* خلفية شفافة */
z-index: 800; /* أقل من القائمة ولكن فوق المحتوى */
}
/* _CSS___________________________________________________________________________________ */
/* إظهار التراك عند الفتح */
.overlay.show {
display: block;
}
/* _CSS___________________________________________________________________________________ */
#whatsappButton {
position: fixed;            /* تثبيت */
bottom: 20px;               /* المسافة من الأسفل */
right: 20px;                /* المسافة من اليمين */
background-color: #25D366;  /* لون واتساب */
border: none;
border-radius: 50%;         /* زر دائري */
width: 60px;
height: 60px;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
z-index: 1000;
padding: 0;
}
#whatsappButton img {
width: 32px;
height: 32px;
}
/* _CSS___________________________________________________________________________________ */
#youtubeButton {
position: fixed;
bottom: 90px;
right: 20px;
background-color: #FF0000;
border: none;
border-radius: 50%;
width: 60px;
height: 60px;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
z-index: 1000;
padding: 0;
}
#youtubeButton img {
width: 32px;
height: 32px;
}
/* _CSS___________________________________________________________________________________ */
#instagramButton {
position: fixed;
bottom: 160px;
right: 20px;
background-color: #E1306C;
border: none;
border-radius: 50%;
width: 60px;
height: 60px;
cursor: pointer;
z-index: 1000;
padding: 0;
}
#instagramButton img {
width: 32px;
height: 32px;
}
/* _CSS___________________________________________________________________________________ */
#facebookButton {
position: fixed;
bottom: 230px;
right: 20px;
background-color: #1877F2;
border: none;
border-radius: 50%;
width: 60px;
height: 60px;
cursor: pointer;
padding: 0;
z-index: 1000;
}
#facebookButton img {
width: 32px;
height: 32px;
}

/* _CSS___________________________________________________________________________________ */
#timecontainer {
  font-weight: bold;
  font-size: 16px;
  color: #Red;
}
/* _CSS___________________________________________________________________________________ */