/* تحديث خلفية قسم البطاقات لتتناسب مع الهيدر والهيرو */

/* تحديث خلفية قسم البطاقات */
.py-20.bg-gradient-to-br.from-gray-900.via-blue-900.to-purple-900 {
    background: linear-gradient(135deg, 
        #0f1419 0%, 
        #1a2e1a 25%, 
        #26a17b 50%, 
        #1a8462 75%, 
        #0e4b36 100%) !important;
}

/* تحديث النمط المتكرر في الخلفية */
.py-20.bg-gradient-to-br.from-gray-900.via-blue-900.to-purple-900 .absolute.inset-0.opacity-20.md\\:opacity-10.overflow-hidden {
    background: linear-gradient(135deg, 
        rgba(38, 161, 123, 0.15) 0%, 
        rgba(26, 132, 98, 0.1) 25%, 
        rgba(14, 75, 54, 0.2) 50%, 
        rgba(26, 46, 26, 0.15) 75%, 
        rgba(15, 20, 25, 0.1) 100%) !important;
}

/* تحديث النصوص المتكررة في الخلفية */
.py-20.bg-gradient-to-br.from-gray-900.via-blue-900.to-purple-900 .absolute.inset-0.opacity-20.md\\:opacity-10.overflow-hidden .text-xl,
.py-20.bg-gradient-to-br.from-gray-900.via-blue-900.to-purple-900 .absolute.inset-0.opacity-20.md\\:opacity-10.overflow-hidden .text-lg,
.py-20.bg-gradient-to-br.from-gray-900.via-blue-900.to-purple-900 .absolute.inset-0.opacity-20.md\\:opacity-10.overflow-hidden .text-sm {
    color: rgba(38, 161, 123, 0.3) !important;
    text-shadow: 0 0 10px rgba(38, 161, 123, 0.2) !important;
}

/* تحسين التأثيرات البصرية للخلفية */
.py-20.bg-gradient-to-br.from-gray-900.via-blue-900.to-purple-900::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(38, 161, 123, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(26, 132, 98, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, rgba(14, 75, 54, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* ضمان أن المحتوى يظهر فوق الخلفية */
.py-20.bg-gradient-to-br.from-gray-900.via-blue-900.to-purple-900 .container {
    position: relative;
    z-index: 10;
}

/* تحديث التأثيرات العائمة في الأسفل */
.py-20.bg-gradient-to-br.from-gray-900.via-blue-900.to-purple-900 .absolute.top-0.left-0.w-96.h-96 {
    background: radial-gradient(circle, rgba(38, 161, 123, 0.15) 0%, transparent 70%) !important;
}

.py-20.bg-gradient-to-br.from-gray-900.via-blue-900.to-purple-900 .absolute.bottom-0.right-0.w-96.h-96 {
    background: radial-gradient(circle, rgba(26, 132, 98, 0.12) 0%, transparent 70%) !important;
}

/* تحسين التناسق مع باقي الأقسام */
.py-20.bg-gradient-to-br.from-gray-900.via-blue-900.to-purple-900 {
    border-top: 1px solid rgba(38, 161, 123, 0.2);
    border-bottom: 1px solid rgba(38, 161, 123, 0.2);
}

/* تأثير انتقال سلس */
.py-20.bg-gradient-to-br.from-gray-900.via-blue-900.to-purple-900 {
    transition: all 0.3s ease-in-out;
}

/* تحسين الاستجابة للهواتف المحمولة */
@media (max-width: 768px) {
    .py-20.bg-gradient-to-br.from-gray-900.via-blue-900.to-purple-900 .absolute.inset-0.opacity-20.md\\:opacity-10.overflow-hidden {
        opacity: 0.15 !important;
    }
}