/*
 * Services & Portfolio Titles Mobile Responsive
 * تحسين أقسام العناوين في صفحة الخدمات ومعرض الأعمال - وضع الهاتف فقط
 * 
 * الملف يحسّن:
 * - حجم الخطوط المتجاوب
 * - ارتفاع الأسطر المناسب
 * - التباعد الصحيح
 * - المحاذاة والتوسيط
 */

/* ===== MOBILE RESPONSIVE (768px and below) ===== */
@media (max-width: 768px) {
    
    /* === Section Header Container === */
    .text-center.space-y-6 {
        padding: 1.5rem 1rem !important;
        gap: 1.5rem !important;
    }
    
    /* === Main Title Container === */
    .text-center.space-y-6 > .space-y-2 {
        gap: 0.75rem !important;
    }
    
    /* === Primary Title (h2) - "حوّل أفكارك إلى" === */
    .text-center.space-y-6 h2 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em !important;
        font-weight: 900 !important;
        color: #111827 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* === Secondary Title (h3) - "واقع رقمي مبهر" === */
    .text-center.space-y-6 h3 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em !important;
        font-weight: 900 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* === Gradient Container === */
    .text-center.space-y-6 .inline-block.overflow-visible {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* === Description Text (p) === */
    .text-center.space-y-6 p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        letter-spacing: 0.3px !important;
        color: #374151 !important;
        margin: 1rem auto !important;
        padding: 0 0.5rem !important;
        max-width: 100% !important;
    }
}

/* ===== EXTRA SMALL SCREENS (640px and below) ===== */
@media (max-width: 640px) {
    
    .text-center.space-y-6 {
        padding: 1.25rem 0.75rem !important;
        gap: 1.25rem !important;
    }
    
    .text-center.space-y-6 h2,
    .text-center.space-y-6 h3 {
        font-size: 1.5rem !important;
        line-height: 1.15 !important;
    }
    
    .text-center.space-y-6 p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin: 0.75rem auto !important;
    }
}

/* ===== VERY SMALL SCREENS (480px and below) ===== */
@media (max-width: 480px) {
    
    .text-center.space-y-6 {
        padding: 1rem 0.5rem !important;
        gap: 1rem !important;
    }
    
    .text-center.space-y-6 h2,
    .text-center.space-y-6 h3 {
        font-size: 1.3rem !important;
        line-height: 1.1 !important;
    }
    
    .text-center.space-y-6 p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        margin: 0.75rem auto !important;
        padding: 0 0.25rem !important;
    }
}

/* ===== ULTRA SMALL SCREENS (360px and below) ===== */
@media (max-width: 360px) {
    
    .text-center.space-y-6 {
        padding: 0.75rem 0.4rem !important;
        gap: 0.75rem !important;
    }
    
    .text-center.space-y-6 h2,
    .text-center.space-y-6 h3 {
        font-size: 1.2rem !important;
        line-height: 1.05 !important;
    }
    
    .text-center.space-y-6 p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        margin: 0.5rem auto !important;
    }
}

/* ===== LANDSCAPE MODE (max-height: 500px) ===== */
@media (max-height: 500px) and (max-width: 768px) {
    
    .text-center.space-y-6 {
        padding: 1rem 0.75rem !important;
        gap: 0.75rem !important;
    }
    
    .text-center.space-y-6 h2,
    .text-center.space-y-6 h3 {
        font-size: 1.4rem !important;
        line-height: 1.1 !important;
    }
    
    .text-center.space-y-6 p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        margin: 0.5rem auto !important;
    }
}