/* services-index.css — أنماط خاصة بهذه الصفحة وحدها.
   المرحلة 3: كانت مكتوبة داخل <style> فى الـ View، تنزل مع كل
   طلب ولا يستطيع المتصفح تخزينها. الآن ملف مستقل قابل للتخزين. */

.services-pro-page { direction: rtl; }
.services-pro-hero {
    background: linear-gradient(135deg, #0a0a0a 0%, #0a0a0a 100%);
    color: #fff;
    text-align: center;
    padding: 86px 0 65px;
}
.services-pro-hero h1 { font-weight: 900; font-size: clamp(2.1rem, 4vw, 4rem); }
.services-pro-hero p { max-width: 760px; margin: 12px auto 0; color: rgba(255,255,255,.82); line-height: 1.9; }
.services-pro-section { padding: 70px 0; background: #faf6ec; }
.services-pro-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
.services-pro-card {
    height: 100%;
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid #e8dfc4;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 16px 35px rgba(10,10,10,.08);
    transition: .25s ease;
}
.services-pro-card:hover { transform: translateY(-8px); box-shadow: 0 22px 48px rgba(10,10,10,.13); }
.services-pro-card img { width: 100%; height: 160px; object-fit: contain; margin-bottom: 18px; }
.services-pro-card h2,
.services-pro-card h3 { color: #0a0a0a; font-weight: 900; margin-bottom: 10px; }
.services-pro-card p { color: #6b6b6b; line-height: 1.8; }
.services-pro-card span { color: #a07906; font-weight: 900; }
@media(max-width:1199px){ .services-pro-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media(max-width:991px){ .services-pro-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:575px){ .services-pro-grid{grid-template-columns:1fr;} .services-pro-section{padding:50px 0;} .services-pro-hero{padding:60px 0 48px;} }