/* حركة البطاقات عند التحميل */
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* البطاقات مع الحركة */
.card-motion {
    opacity: 0;
    transform: translateY(20px);
    animation-name: fadeUp;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

    /* حركة عند Hover */
    .card-motion:hover {
        transform: translateY(-8px) scale(1.03);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }