/* styles_index.css */

/* إعدادات عامة */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* الخط الجديد */
    font-family: Arial, Helvetica, sans-serif;  /* Arial أولاً ثم احتياطيان اختياريان */
}





body {
    background-color: #F5F5F5;
    color: #333;
    direction: ltr; /* دعم اللغة العربية */
    padding: 0px;
}










/* حاوية المحتوى */
.container {
    max-width: 900px;
    margin: 0 auto; /* توسيط الحاوية */
    padding: 20px;
    display: flex; /* استخدام Flexbox */
    flex-direction: column; /* ترتيب العناصر عموديًا */
    align-items: center; /* محاذاة العناصر في الوسط */
}

/* حاوية البانر */
.banner-container {
    width: 100%;
    margin-bottom: 30px; /* إضافة هامش أسفل البانر */
    text-align: center; /* توسيط الصورة داخل الحاوية */
}

.banner-image {
    width: 100%;
    max-width: 900px; /* تحديد أقصى عرض للبانر */
    height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع */
    border-radius: 10px; /* زوايا مستديرة للبانر */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ظل خفيف للبانر */
}

/* جدول المواعيد */
.appointments-table {
    width: 95%; /* تحديد عرض الجدول ليكون 80% من الحاوية */
    border-collapse: collapse;
    margin: 0 auto 20px auto; /* توسيط الجدول وإضافة هامش سفلي */
}

.appointments-table tbody tr {
    /* تم إزالة الحدود هنا لأن الحاويات تحتوي على حواف عريضة */
}




.appointments-table tbody tr:nth-child(3n+1) {
    background-color: #008080; /* لون التعليم */
}

.appointments-table tbody tr:nth-child(3n+2) {
    background-color: #D6D6D6; /* رمادي فاتح*/
}

.appointments-table tbody tr:nth-child(3n) {
    background-color: #CCCC00; /* أصفر غامق */
}







/* محاذاة المحتويات في الوسط */
.appointments-table td {
    padding: 20px;
    vertical-align: top;
    text-align: center; /* محاذاة النص في وسط الخلايا */
}

/* حاوية الموعد مع حواف عريضة */
.appointment-card {
    border: 3px solid #34495e; /* حافة عريضة بلون مميز */
    padding: 15px;
    border-radius: 10px; /* زوايا مستديرة */
    background-color: rgba(255, 255, 255, 0.9); /* خلفية بيضاء شفافة لتحسين وضوح المحتوى */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ظل خفيف لإضفاء عمق */
}

/* عنوان الموعد محاط بجدول ملون ومركز */
.appointment-title-container {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}




.appointment-title {
    background-color: #000000; /* لون الخلفية للعنوان */
    color: #fff; /* لون النص */
    padding: 10px 10px;
    border: 2px solid #2980b9; /* حدود ملونة */
    border-radius: 8px; /* زوايا مستديرة */
    text-align: center;
	/*background-image: url('pic/gw.jpg'); /* رابط الصورة للخلفية */
    /* background-size: cover; /* لجعل الصورة تغطي كامل الحاوية */
    /*  background-position: center; /* لتوسيط الصورة في الخلفية */
    font-size: 1.5em;
    font-weight: bold;
    max-width: 100%; /* تحديد عرض أقصى للعنوان */
    word-wrap: break-word; /* لف الكلمات الطويلة */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* ظل خفيف للعنوان */
	
}










/* تكبير حجم خطوط التاريخ */
.appointment-date {
    font-size: 1.5em; /* زيادة الحجم */
    color: #3D7900;
    margin-bottom: 10px;
    font-weight: bold;
	
	
	
}



/* تكبير حجم خطوط الملاحظات */
.appointment-description {
    font-size: 1.2em;          /* زيادة الحجم */
    color: #000000;
    margin-bottom: 15px;
    text-align: right;         /* محاذاة لليمين */
    /* direction: rtl; */      /* أزل التعليق إن احتجت جعل اتجاه الفقرة من اليمين لليسار */
}

/* العد التنازلي */
.countdown {
    margin-bottom: 15px;
}




/* الصورة التي تظهر إذا إختقى العد التنازلي */

.countdown-ended-image {
    width: 100%;
    height: auto;
}

/* تنسيق الجدول العد التنازلي */
.countdown-table-container {
    overflow-x: auto;
}

.countdown-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.countdown-table th, .countdown-table td {
    padding: 10px;
    border: 1px solid #bdc3c7;
    font-size: 1.8em; /* زيادة حجم الخط   العد التنازلي*/
}

.countdown-table th {
    background-color: #2980b9;
    color: #fff;
    font-weight: bold;
}

.countdown-table tr:nth-child(even) {
    background-color: #ecf0f1;
}

.countdown-table tr:hover {
    background-color: #d0d7de;
}

/* فاصل الموعد */
.appointment-separator {
    text-align: center;
    margin-top: 15px;
}

.separator-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    opacity: 0.7;
}

/* تحسينات إضافية */
@media (max-width: 768px) {
    .appointment-title {
        font-size: 1.3em;
        padding: 8px 16px;
    }

    .appointment-date {
        font-size: 1.3em; /* زيادة الحجم على الشاشات الصغيرة */
    }

    .appointment-time {
        font-size: 1.3em; /* زيادة الحجم على الشاشات الصغيرة */
    }

    .appointment-description {
        font-size: 1.1em; /* زيادة الحجم على الشاشات الصغيرة */
    }

    .appointments-table td {
        padding: 15px;
    }

    .countdown-table th, .countdown-table td {
        padding: 8px;
        font-size: 1em; /* تعديل حجم الخط على الشاشات الصغيرة */
    }

    .appointments-table {
        width: 100%; /* جعل الجدول بعرض 100% على الشاشات الصغيرة */
    }

    .banner-image {
        max-width: 100%; /* التأكد من أن البانر يتناسب مع الشاشات الصغيرة */
    }
}



 .countdown-header {
        color: red;
        font-size: 25px;
        text-align: right;
        margin-bottom: 5px;
    }