/*====================================================== 1. إعادة الضبط الأساسية والخطوط والألوان المحدثة ======================================================*/ * { box-sizing: border-box; margin: 0; padding: 0; } :root { /* الألوان الجديدة: أزرق غامق (ثقة)، برتقالي (CTA) */ --primary-color: #004e92; /* أزرق غامق / للميزات والعناوين */ --secondary-color: #0d1e2d; /* أسود / لألوان النصوص القوية */ --accent-color: #ff6700; /* برتقالي جذاب / للـ CTA والأزرار */ --text-color: #333; --light-bg: #f8f8f8; /* خلفية الأقسام */ --header-bg: #0d1e2d; /* خلفية الناف بار باللون الغامق */ } /* استخدام خط عربي واضح (يجب استدعاء Cairo في الـ في HTML) */ body { font-family: 'Cairo', sans-serif; direction: rtl; text-align: right; line-height: 1.6; color: var(--text-color); background-color: white; } h1, h2, h3, h4 { color: var(--secondary-color); line-height: 1.3; } a { text-decoration: none; color: var(--primary-color); transition: color 0.3s; } section { padding: 60px 5%; /* مساحة داخلية موحدة لجميع الأقسام */ } /* تنسيق العناوين الرئيسية للأقسام */ .section-heading { text-align: center; font-size: 38px; margin-bottom: 50px; color: var(--secondary-color); position: relative; padding-bottom: 10px; } .section-heading::after { content: ''; width: 80px; height: 4px; background-color: var(--accent-color); position: absolute; bottom: 0; right: 50%; transform: translateX(50%); } /*====================================================== 2. شريط التنقل (Header & Navigation) ======================================================*/ header { display: flex; justify-content: space-between; align-items: center; padding: 10px 5%; /* margin-bottom: 10px; */ background-color: var(--header-bg); /* اللون الغامق الجديد */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); position: sticky; top: 0; z-index: 1000; } .logo a h3 { font-size: 24px; margin: 0; color: white; } nav ul { list-style: none; display: flex; } nav ul li a { color: white; /* النص أبيض على الخلفية الغامقة */ padding: 10px 15px; display: block; font-weight: 500; } nav ul li a:hover { color: var(--accent-color); /* البرتقالي عند المرور */ } /*====================================================== 3. الأزرار (Buttons - CTA) ======================================================*/ .btn-primary-form { background-color: var(--accent-color); color: white; /* لون النص أبيض على البرتقالي */ padding: 15px 35px; border-radius: 8px; font-size: 20px; font-weight: bold; display: inline-block; border: none; cursor: pointer; transition: background-color 0.3s ease; } .btn-primary-form:hover { background-color: #ff8c4d; /* درجة أفتح للـ hover */ } /*====================================================== 4. قسم البطل (Hero Section) - تم تعديل هذا الكود لتطبيق Blur ======================================================*/ .hero-section { position: relative; /* مهم جداً عشان الـ ::before يشتغل صح */ overflow: hidden; /* لمنع ظهور حواف الـ blur خارج القسم */ color: white; text-align: center; padding: 120px 5%; min-height: 500px; display: flex; align-items: center; justify-content: center; z-index: 1; /* عشان محتوى النص يكون فوق الـ blur */ } .hero-section::before { content: ''; position: absolute; top: -20px; /* زيادة بسيطة لإخفاء حواف الـ blur */ left: -20px; right: -20px; bottom: -20px; z-index: -1; /* عشان يكون خلف المحتوى الرئيسي */ background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/Images/1.jpg') no-repeat center center/cover; filter: blur(3px); background-size: cover; background-position: center; } .hero-content { /* ... باقي التنسيقات ... */ position: relative; /* مهم جداً لضمان أنه يظهر فوق الـ ::before */ z-index: 2; } .hero-content h1 { font-size: 52px; margin-bottom: 20px; color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); } .hero-content p { font-size: 22px; margin-bottom: 30px; } .quick-contact-info { font-size: 20px; line-height: 1.8; } .highlight-phone { font-weight: bold; color: var(--accent-color); /* إبراز رقم الهاتف باللون البرتقالي */ font-size: 24px; } /*====================================================== 5. قسم الخدمات (Services) ======================================================*/ .main-services { background-color: white; text-align: center; padding: 80px; } .services-grid { display: grid; /* 4 أعمدة على الشاشات الكبيرة */ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; } .service-box { padding: 30px 20px; background-color: var(--light-bg); border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); transition: transform 0.3s; border-top: 5px solid var(--primary-color); } .service-icon { width: 100%; /* حجم الأيقونة/الصورة */ height: auto; object-fit: contain; margin-bottom: 15px; } /*====================================================== 5. قسم إحصائيات النجاح (Numbers Section) ======================================================*/ .success-numbers { background-color: var(--light-bg); /* خلفية رمادية فاتحة لتمييز القسم */ text-align: center; padding-top: 80px; padding-bottom: 80px; } .numbers-grid { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 30px; max-width: 1200px; margin: 0 auto; margin-top: 50px; } .number-item { text-align: center; flex-basis: 200px; /* تحديد عرض مبدئي للعنصر */ padding: 20px; border-radius: 10px; /* تنسيق بسيط يميز العنصر دون أن يكون مُشتتًا */ } .number-item .icon-large { font-size: 50px; color: var(--primary-color); /* لون الأيقونة: الأزرق الغامق */ margin-bottom: 10px; } .number-item .number-count { font-size: 48px; font-weight: bold; color: var(--accent-color); /* لون الرقم: البرتقالي الجذاب */ line-height: 1; margin: 5px 0; } .number-item .number-label { font-size: 18px; font-weight: 500; color: var(--secondary-color); } /* تعديل الموبايل (لتنسيق الإحصائيات) */ @media (max-width: 768px) { .number-item { flex-basis: 45%; /* عمودين فقط على الموبايل */ margin-bottom: 20px; border-bottom: 1px solid #ddd; padding-bottom: 20px; } .number-item:nth-last-child(-n+2) { /* إزالة الفاصل عن آخر سطرين */ border-bottom: none; } } /*====================================================== 6. قسم لماذا نحن؟ (Why Us) ======================================================*/ .why-us { background-color: #f0f8ff; /* لون خفيف جداً */ text-align: center; } .features-list { max-width: 700px; margin: 0 auto; } .features-list ul { list-style: none; padding: 0; text-align: right; } .features-list ul li { background-color: white; padding: 15px 25px; margin-bottom: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); font-size: 18px; font-weight: 500; } /*====================================================== 7. قسم مناطق الخدمة (Areas) ======================================================*/ .service-areas { background-color: white; text-align: center; } .areas-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-bottom: 30px; } .area-tag { background-color: var(--primary-color); color: white; padding: 10px 20px; border-radius: 20px; font-weight: bold; white-space: nowrap; transition: background-color 0.3s; } .area-tag:hover { background-color: var(--accent-color); } /*====================================================== 8. نموذج الاتصال السريع (Contact Form) ======================================================*/ /* .contact-form-section { background-color: var(--secondary-color); color: white; text-align: center; } .contact-form-section .section-heading { color: white; } .contact-form-section p { font-size: 18px; margin-bottom: 30px; } .contact-form-section form { display: flex; flex-direction: column; gap: 15px; max-width: 450px; margin: 0 auto; } .contact-form-section input, .contact-form-section textarea { padding: 15px; border: none; border-radius: 5px; font-size: 16px; resize: vertical; } .contact-form-section .btn-primary-form { width: 100%; } */ /*====================================================== 8. نموذج الاتصال السريع (Contact Form) - تعديل بسيط في الـ CSS ======================================================*/ /* 🔥 تم تغيير 'form' إلى '#whatsapp-form-container' أو يمكنك استخدام 'div' إذا كان يغطي الغرض */ .contact-form-section #whatsapp-form-container { display: flex; flex-direction: column; gap: 15px; max-width: 450px; margin: 0 auto; } .contact-form-section input, .contact-form-section textarea { padding: 15px; /* border: none; */ border-radius: 5px; font-size: 16px; resize: vertical; } .contact-form-section .btn-primary-form { width: 100%; } /*====================================================== 9. التذييل (Footer) ======================================================*/ footer { background-color: #222; color: #ccc; text-align: center; padding: 20px 5%; font-size: 14px; } footer a { color: var(--accent-color); } .fixed-contact { position: fixed; right: 20px; top: 85%; /* التوسيط العمودي */ transform: translateY(-50%); z-index: 10000; display: flex; flex-direction: column; gap: 15px; /* المسافة بين الزرين */ } .fixed-contact a { width: 50px; /* 🔥 الحجم: 50px * 50px */ height: 50px; border-radius: 50%; /* 🔥 الشكل: دائري بالكامل 🔥 */ display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4); /* 🔥 الظل البارز 🔥 */ transition: all 0.3s ease; font-size: 28px; /* حجم الأيقونة (WhatsApp/Phone) */ } .fixed-contact a:hover { transform: scale(1.15); /* 🔥 الحركة: تكبير عند المرور 🔥 */ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* ظل أقوى عند التفاعل */ } /* تنسيق زر الواتساب */ .whatsapp-btn { background-color: #25D366; /* أخضر الواتساب */ color: white; } /* تنسيق زر الهاتف */ .phone-btn { background-color: var(--accent-color); /* البرتقالي الجذاب */ color: white; } .highlight-phone-link { color: white; text-decoration: none; } .hero-content .highlight-phone-link .highlight-phone { font-weight: bold; color: var(--accent-color); font-size: 24px; } @media (max-width: 768px) { header { flex-direction: column; padding: 15px 20px; position: static; } .logo, nav, .header-phone { width: 100%; text-align: center; } nav ul { justify-content: center; flex-wrap: wrap; margin-top: 10px; } .hero-content h1 { font-size: 36px; } .section-heading { font-size: 30px; } .services-grid { /* عمود واحد على الموبايل ليكون أوضح */ grid-template-columns: 1fr; } .quick-contact-info { font-size: 18px; } .highlight-phone { font-size: 22px; } .contact-form-section { padding: 40px 20px; } }