/* Add custom CSS styles below */ 
/* --- تخصيص قسم التصنيفات الرئيسي --- */
.category-session, .categories-grid {
    padding: 30px 0;
    background-color: #fbfbfb; /* خلفية ناعمة مريحة للعين */
}

/* --- تصميم كرت التصنيف (الصورة والاسم) --- */
.category-item, .category-card {
    background: #ffffff !important;
    border-radius: 16px !important; /* حواف دائرية احترافية */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important; /* ظل ناعم جداً */
    transition: all 0.3s ease-in-out !important; /* حركة سلسة عند التفاعل */
    border: 1px solid #f0f0f0 !important;
    overflow: hidden;
}

/* --- تأثيرات عند تحريك الماوس فوق التصنيف (Hover) --- */
.category-item:hover, .category-card:hover {
    transform: translateY(-8px) !important; /* يرتفع الكرت قليلاً لأعلى */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important; /* عمق أكبر للظل */
    border-color: var(--theme-primary) !important; /* يتغير اللون للون متجرك الأساسي */
}

/* --- تخصيص صور التصنيفات --- */
.category-item img, .category-card img {
    border-radius: 12px !important;
    transition: transform 0.5s ease !important;
    object-fit: cover !important;
}

/* تأثير زووم ناعم للصورة عند تمرير الماوس */
.category-item:hover img, .category-card:hover img {
    transform: scale(1.05) !important; 
}

/* --- تخصيص خطوط وعناوين التصنيفات --- */
.category-item .title, .category-card h3, .category-title {
    font-size: 15px !important;
    font-weight: 700 !important; /* خط عريض واحترافي */
    color: #2D3748 !important; /* لون غامق أنيق */
    margin-top: 12px !important;
    transition: color 0.3s ease !important;
}

.category-item:hover .title, .category-card:hover h3 {
    color: var(--theme-primary) !important; /* يتغير الخط للون متجرك عند التمرير */
}