/* استيراد خط الأوبن سورس Poppins من جوجل فونتس */
/* Importing the Poppins font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* تنسيقات الصفحة الجديدة */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 5px 25px rgba(1, 1, 1, 0.15);
    border-radius: 10px;
}

.company-name {
    color: #2a09ab;
    font-size: 2.4em;
    margin-bottom: 20px;
}

form {
    display: flex;
    flex-direction: column;
}

fieldset {
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
}

legend {
    padding: 0 10px;
    font-weight: 600;
    color: #003366;
}

label {
    margin: 10px 0 5px;
    font-weight: 500;
    color: #003366;
}

input, select, button {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
    width: 100%;
}

button[type="button"] {
    background-color: #4e9eff;
    color: white;
    border: none;
    cursor: pointer;
}

button[type="button"]:hover {
    background-color: #2a09ab;
}

button[type="submit"] {
    background-color: #ff6600;
    color: white;
    border: none;
    cursor: pointer;
    padding: 15px;
    font-size: 1.2em;
}

button[type="submit"]:hover {
    background-color: #e65c00;
}

.questions {
    display: none;
}

#job-position, #education-status, #nationality, #gender, #city, #marital-status, #experience-city, #years-of-experience, #english-level, #currently-employed, #transportation, #health-card, #health-card-status, #branch-transfer, #english-level-area, #microsoft-skills, #currently-employed-area, #transportation-area, #health-card-area, #health-card-status-area, #branch-transfer-area, #english-level-other, #microsoft-skills-other, #other-software-skills, #software-name, #currently-employed-other {
    max-width: 300px;
}

#health-card-expiry-container, #health-card-expiry-area-container {
    margin-top: 10px;
}


/* تنسيقات لصفحة الخدمات */
.services .company-name {
    font-size: 2.5em;
    color: #2a09ab;
    font-weight: 700;
    margin-bottom: 20px;
}

.services p {
    font-size: 1.2em;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #333;
}

/**********************************
/**********************************
/**********************************
/* Reset العناصر التالية ترجميات */
/* Reset for the following elements */
* {
    font-family: 'Poppins', sans-serif; /* استخدام خط Poppins كخط أساسي */
    margin: 0; /* إلغاء هوامش الصفحة */
    padding: 0; /* إلغاء التباعد الداخلي */
    box-sizing: border-box; /* جعل حجم العناصر يشمل padding و border */
    scroll-behavior: smooth; /* تمرير ناعم لجميع العناصر */
}

/* تنسيقات عامة للجسم */
body {
    font-family: 'Poppins', sans-serif; /* استخدام خط Poppins كخط أساسي للنصوص */
    background-color: #f4f4f4; /* لون خلفية الصفحة */
    margin: 0; /* إلغاء هوامش الصفحة */
    padding: 0; /* إلغاء التباعد الداخلي */
    text-align: center; /* محاذاة النصوص إلى الوسط */
}

/* تنسيقات الهيدر */
header {
    background-color: #003366; /* لون خلفية الهيدر */
    width: 100%; /* عرض الهيدر بالكامل */
    position: fixed; /* تثبيت الهيدر في الأعلى */
    z-index: 999; /* تحديد ترتيب الطبقات */
    display: flex; /* عرض العناصر كمجموعة مرنة */
    justify-content: space-between; /* توزيع العناصر بالتساوي على الهيدر */
    align-items: center; /* محاذاة العناصر بالوسط رأسيًا */
    padding: 10px 200px; /* هوامش داخلية للهيدر */
}

/* تنسيقات الشعار */
.logo {
    text-decoration: none; /* عدم تحديد نمط النصوص */
    color: #ffffff; /* لون النصوص */
    text-transform: uppercase; /* تحويل النصوص إلى حروف كبيرة */
    font-weight: 700; /* سمك الخط */
    font-size: 1.8em; /* حجم الخط */
}

/* تنسيقات الروابط داخل النافيجيشن */
.navigation a {
    color: #ffffff; /* لون الروابط */
    text-decoration: none; /* عدم تحديد نمط النصوص */
    font-size: 1.1em; /* حجم الخط */
    font-weight: 500; /* سمك الخط */
    padding-left: 30px; /* هامش داخلي للروابط */
}

/* تغيير لون الروابط عند التحويم */
.navigation a:hover {
    color: #ff6600; /* لون الروابط عند التحويم عليها */
}

/* تنسيقات الأقسام */
section {
    padding: 100px 200px; /* هوامش داخلية للأقسام */
}

/* تنسيقات القسم الرئيسي */
.main {
    width: 100%; /* عرض العنصر بالكامل */
    min-height: 100vh; /* حجم العنصر بالحد الأدنى لارتفاع الشاشة */
    display: flex; /* عرض العناصر كمجموعة مرنة */
    flex-direction: column; /* توجيه العناصر في أعمدة */
    align-items: center; /* محاذاة العناصر بالوسط رأسيًا */
    background-size: cover; /* تحجيم الخلفية لتغطية العنصر بالكامل */
    background-position: center; /* موضع الخلفية في الوسط */
    background-attachment: fixed; /* تثبيت الخلفية مع التمرير */
}

/* تنسيقات اسم الشركة */
.company-name {
    color: #2a09ab; /* لون العنوان الفرعي */
    font-size: 2.5em; /* حجم الخط */
    font-weight: 700; /* سمك الخط */
    margin-bottom: 20px; /* هامش سفلي */
}

/* تنسيقات المدير التنفيذي */
.executive-director {
    color: #2a09ab; /* لون العنوان الفرعي */
    font-size: 1.8em; /* حجم الخط */
    font-weight: 600; /* سمك الخط */
    margin-bottom: 30px; /* هامش سفلي */
}

/* تنسيقات الأزرار */
.main-btn {
    color: #ffffff; /* لون النص */
    background-color: #ff6600; /* لون خلفية الزر */
    text-decoration: none; /* عدم تحديد نمط النصوص */
    font-size: 1.1em; /* حجم الخط */
    font-weight: 600; /* سمك الخط */
    display: inline-block; /* عرض العنصر بلوك مع استمرار التدفق النصي */
    padding: 0.9375em 2.1875em; /* هامش داخلي للزر */
    letter-spacing: 1px; /* تباعد الحروف */
    border-radius: 15px; /* شكل الزوايا */
    margin-bottom: 40px; /* هامش سفلي */
    transition: 0.7s ease; /* انتقال ناعم للحواف عند التحويم */
}

/* تغيير لون الأزرار عند التحويم */
.main-btn:hover {
    background-color: #e65c00; /* لون خلفية الزر عند التحويم */
    transform: scale(1.1); /* تكبير الزر عند التحويم */
}

/* تنسيقات الفوتر */
.footer {
    background-color: #000016; /* لون خلفية التذييل */
    color: #fff; /* لون النص */
    padding: 2em; /* هوامش داخلية للتذييل */
    display: flex; /* عرض العناصر كمجموعة مرنة */
    justify-content: space-between; /* توزيع العناصر بالتساوي */
    align-items: center; /* محاذاة العناصر بالوسط رأسيًا */
}

/* تنسيقات عناوين الفوتر */
.footer-title {
    font-size: 1.3em; /* حجم الخط */
    font-weight: 600; /* سمك الخط */
}

/* تنسيقات إضافية لعناوين الفوتر */
.footer-title span {
    color: #ff6600; /* لون النص */
}

/* تنسيقات الرموز الاجتماعية داخل الفوتر */
.footer .social-icons a {
    font-size: 1.3em; /* حجم الخط */
    padding: 0 12px 0 0; /* هامش داخلي للرموز */
}

/* تنسيقات أيقونات الاتصال */
.contact-icon {
    margin-top: 20px; /* هامش علوي */
}

/* تنسيقات الصور داخل أيقونات الاتصال */
.contact-icon img {
    width: 50px; /* عرض الصورة */
    height: 50px; /* ارتفاع الصورة */
    transition: 0.3s ease; /* انتقال ناعم للحواف */
}

/* تكبير الصور عند التحويم */
.contact-icon img:hover {
    transform: scale(1.2); /* تكبير الصورة عند التحويم */
}

/* تنسيقات الصور داخل قسم "عن" */
.about-image {
    width: 100%; /* عرض الصورة بالكامل */
    height: auto; /* ارتفاع الصورة تلقائيًا */
    margin: 20px 0; /* هامش حول الصورة */
}

/* تنسيقات الشاشات بحجم أقل من 1023 بكسل */
@media (max-width: 1023px) {
    header {
        padding: 12px 20px; /* هوامش داخلية للهيدر عند حجم الشاشة الأقل من 1023px */
    }

    .navigation a {
        padding-left: 10px; /* هامش داخلي للروابط عند حجم الشاشة الأقل من 1023px */
    }

    .title {
        font-size: 1.8em; /* حجم الخط للعنوان عند حجم الشاشة الأقل من 1023px */
    }

    section {
        padding: 80px 20px; /* هوامش داخلية للأقسام عند حجم الشاشة الأقل من 1023px */
    }

    .company-name {
        font-size: 2em; /* حجم الخط عند حجم الشاشة الأقل من 1023px */
    }

    .executive-director {
        font-size: 1.5em; /* حجم الخط عند حجم الشاشة الأقل من 1023px */
    }

    .main {
        flex-direction: column; /* توجيه العناصر في أعمدة عند حجم الشاشة الأقل من 1023px */
        align-items: center; /* محاذاة العناصر بالوسط رأسيًا */
    }

    .project-image {
        margin-top: 20px; /* هامش علوي للصورة */
    }
}

/* تنسيقات الشاشات بحجم أقل من 641 بكسل */
@media (max-width: 641px) {
    body {
        font-size: 12px; /* حجم الخط للنصوص عند حجم الشاشة الأقل من 641px */
    }

    .company-name {
        font-size: 1.5em; /* حجم الخط للعنوان الفرعي عند حجم الشاشة الأقل من 641px */
    }

    .executive-director {
        font-size: 1.2em; /* حجم الخط للعنوان الفرعي عند حجم الشاشة الأقل من 641px */
    }

    .main {
        padding: 40px 20px; /* هوامش داخلية للقسم الرئيسي عند حجم الشاشة الأقل من 641px */
    }

    .project-image {
        width: 100%; /* عرض الصورة بالكامل عند حجم الشاشة الأقل من 641px */
    }
}

/* تنسيقات الشاشات بحجم أقل من 300 بكسل */
@media (max-width: 300px) {
    body {
        font-size: 10px; /* حجم الخط للنصوص عند حجم الشاشة الأقل من 300px */
    }
}