/* Loading */

.loading {
    position: fixed;
    inset: 0;
    background: #f4f4f4;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

p{
    direction: rtl;
}
.logo-loading {
    width: 170px;
    margin-bottom: 18px;
    animation: logoAnimation 2s infinite; /* إضافة الأنيميشن للوجو */
}

.p-text {
    direction: rtl;
    margin-top: 0.1rem;
    font-size: larger;
    font-weight: bold;
    color: #426287;
    animation: textColorChange 5s infinite ease-in-out; /* تغيير الألوان */
}

/* Animation for logo */
@keyframes logoAnimation {
    0% {
        transform: translateY(0) rotate(0deg); /* البداية بدون حركة */
    }
    50% {
        transform: translateY(-20px) rotate(180deg); /* التحرك لأعلى و 180 درجة */
    }
    100% {
        transform: translateY(0) rotate(360deg); /* العودة للمكان الأصلي و 360 درجة */
    }
}

/* Animation for text color */
@keyframes textColorChange {
    0% {
        color: #426287; /* اللون الأساسي */
    }
    25% {
        color: #8B4A99; /* اللون الأول */
    }
    50% {
        color: #F15F5F; /* اللون الثاني */
    }
    75% {
        color: #F9B149; /* اللون الثالث */
    }
    100% {
        color: #426287; /* العودة للون الأساسي */
    }
}