/* Animation عند تحميل الصفحة */
body {
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.categories .card {
    /* رمادي غامق مع شفافية بسيطة */
    background-color: rgba(40, 40, 40, 0.9); /* غير الرقم الأخير للتحكم في الشفافية */
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .categories .card:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    }

    .categories .card-title,
    .categories .card i {
        color: #fff; /* نص وأيقونات أبيض على الخلفية الغامقة */
    }

    .categories .card i {
        transition: transform 0.3s ease;
    }

    .categories .card:hover i {
        transform: scale(1.2);
    }