body {
    font-family: 'Cairo', 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: auto;
    margin: 0;
    background-color: #1a1d21; /* خلفية الصفحة */
    color: #d1d5db; /* لون النص الافتراضي */
}

input, button, textarea, input[type="submit"] {
    font-family: 'Cairo', 'Roboto', sans-serif;
}

header, footer {
    flex-shrink: 0;
    background: #3b4b51;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

.contact-section {
    flex: 1; /* اجعل القسم يتمدد لملء المساحة بين الهيدر والفوتر */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px auto; /* اجعل القسم يتمركز بشكل أفقي */
    padding: 30px; /* زيادة الحواف الداخلية */
    max-width: 1400px; /* زيادة الحد الأقصى للعرض */
    background: linear-gradient(145deg, #3b4b51, #1a1d21);
    border-radius: 15px;
    color: #d1d5db;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.contact-info {
    flex: 1 1 48%;
    margin: 10px;
    padding: 15px;
    background: #1a1d21;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    text-align: center; /* توسيط النص */
}

.contact-form {
    flex: 1 1 50%;
    margin: 10px;
    padding: 15px;
    background: #1a1d21;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center; /* توسيط المحتوى أفقياً */
    align-items: center; /* تأكد من أن العناصر تبدأ من الأعلى */
    flex-direction: column; /* ترتيب العناصر عموديًا */
}

.contact-form h2 {
    text-align: center; /* توسيط النص */
    margin-bottom: 20px; /* إضافة مسافة أسفل العنوان */
    width: 100%; /* اجعل العنوان يأخذ كامل العرض */
}

.contact-form form {
    display: flex;
    flex-direction: column; /* ترتيب العناصر عموديًا */
    gap: 15px; /* مسافة بين كل عنصر وآخر */
    width: 100%; /* عرض النموذج بالكامل */
    max-width: 500px; /* حد أقصى لعرض النموذج */
    text-align: center; /* توسيط النصوص داخل النموذج */
}

.contact-form form input[type="text"],
.contact-form form input[type="email"], 
.contact-form form textarea {
    width: auto;
    padding: 10px;
    margin: 10px 0;
    border: none;
    border-radius: 5px;
    background: #3b4b51;
    color: #fff;
    font-size: 1em;
}

.contact-form form button {
    background-color: #3a9ad9;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
    width: 50%; /* اجعل الزر يأخذ نصف العرض */
    margin: 0 auto; /* توسيط الزر */
}

.contact-form form button:hover {
    background-color: #2978b5;
}

/* استعلامات الوسائط لجعل الصفحة متوافقة مع الهواتف */
@media (max-width: 768px) {
    .contact-section {
        flex-direction: column; /* ترتيب الأقسام عموديًا */
        margin: 10px; /* تقليل الهوامش */
        padding: 20px; /* تعديل الحواف الداخلية للشاشات الصغيرة */
    }

    .contact-info, .contact-form {
        flex: 1 1 100%; /* اجعل كل قسم يأخذ العرض الكامل */
        margin: 5px 0; /* تقليل الهوامش بين الأقسام */
    }

    .contact-form form {
        max-width: 100%; /* اجعل النموذج يمتد ليأخذ العرض الكامل */
    }

    .contact-form form button {
        width: 70%; /* تقليل عرض الزر على الشاشات الصغيرة */
    }
}