.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* خلفية شفافة */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    z-index: 9999;
}

.loading-image {
    width: 15%; /* عرض الصورة */
    height: 25%; /* ارتفاع الصورة */
    animation: spinY 2s linear infinite; /* تأثير الدوران الجانبي */
}

@keyframes spinY {
    0% {
        transform: rotateY(0deg); /* ابدأ من 0 درجة حول المحور Y */
    }

    100% {
        transform: rotateY(360deg); /* الدوران الكامل حول المحور Y */
    }
}

/* تأكد من أن html و body يأخذان كامل ارتفاع الشاشة */
/* تأكد من أن html و body يأخذان كامل ارتفاع الشاشة */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* استخدام flexbox في body لضمان توزيع العناصر عمودياً */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* يجعل الحد الأدنى للارتفاع هو ارتفاع نافذة العرض */
}

/* التأكد من أن محتوى الصفحة يتمدد لملء المساحة المتاحة */
.container.body-content {
    flex: 1; /* السماح للمحتوى بالتمدد ليأخذ المساحة المتاحة بين الترويسة والتذييل */
}

/* تنسيق التذييل ليكون في أسفل الصفحة */
footer {
    text-align: left;
    background-color: #f8f9fa;
    border-top: 1px solid #ddd;
    width: 100vh;
    font-size: small;
    height: 3vh;
}