/*
 * ملف الأنماط الرئيسي لتصميم الموقع.
 * يعتمد على نظام الشبكات والمرونة لتقسيم الصفحة إلى أقسام كما في التصميم الأصلي.
 */

/* إعدادات أساسية */
html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    font-family: 'Arial', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    color: #222;
    background-color: #fff;
    direction: rtl;
    /* اجعل التذييل دائمًا في أسفل الصفحة باستخدام Flexbox */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Ensure html also takes full height for sticky footer */
html {
    height: 100%;
}

/* Push footer to bottom */
.footer {
    margin-top: auto;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* الشريط العلوي */
/* الشريط العلوي يستخدم متغيرات CSS لألوان النص والخلفية */
.top-bar {
    background-color: var(--top-bar-bg, #f7f7f7);
    color: var(--top-bar-color, #555);
    font-size: 14px;
    border-bottom: 1px solid #e5e5e5;
}
.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}
.top-bar .social-icons a {
    margin-left: 10px;
    color: #555;
    /* تكبير أيقونات السوشيال ميديا لتكون أوضح */
    font-size: 22px;
}
/* عند تمرير الماوس فوق أيقونات السوشيال ميديا تغير لونها إلى اللون الأحمر الافتراضي */
.top-bar .social-icons a:hover {
    color: #dc3545;
}

/* تأثير الإضاءة للنص في الشريط العلوي عند تفعيل glow-enabled */
.top-bar.glow-enabled span:hover {
    text-shadow: 0 0 5px var(--top-bar-color, #555), 0 0 10px var(--top-bar-color, #555), 0 0 15px var(--top-bar-color, #555);
}

/*--------------------------------------------------------------
 * التنسيق لعناصر الشريط العلوي المحدثة
 * -------------------------------------------------------------*/
/* الحاوية اليمنى للشريط العلوي تحتوي على أيقونات السوشيال ميديا وزر الوضع الداكن */
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* زر الوضع الداكن في الشريط العلوي */
.dark-mode-toggle {
    background: none;
    border: none;
    color: inherit;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s ease-in-out;
}
.dark-mode-toggle:hover {
    color: #dc3545;
}

/*--------------------------------------------------------------
 * الوضع الداكن للموقع
 * عند إضافة الفئة "dark-mode" على العنصر body، يتم عكس الألوان
 * -------------------------------------------------------------*/
body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}

body.dark-mode a {
    color: inherit;
}

body.dark-mode .top-bar {
    background-color: #1f1f1f;
    border-bottom-color: #333;
    color: inherit;
}

body.dark-mode .navigation {
    background-color: #1f1f1f;
    border-bottom-color: #333;
}

body.dark-mode .nav-list li a {
    color: #e0e0e0;
}

body.dark-mode .nav-list li a:hover,
body.dark-mode .nav-list li a.active {
    background-color: #343a40;
    color: #ffffff;
}

body.dark-mode .hero {
    box-shadow: none;
}

body.dark-mode .stat-item {
    background-color: #1f1f1f;
    color: #ffffff;
}

body.dark-mode .services-section .service-card {
    /* في الوضع الداكن، نستخدم نفس لون الخلفية المخصص لكل بطاقة مع الحفاظ على اللون الأبيض للنص */
    background-color: var(--card-bg);
    color: #ffffff;
}

body.dark-mode .gallery-section {
    background-color: #1f1f1f;
}

body.dark-mode .news-item {
    background-color: #1f1f1f;
    color: #ffffff;
}

body.dark-mode .cta-section {
    background-color: #1f1f1f;
}

body.dark-mode .partners-section {
    background-color: #1f1f1f;
}

body.dark-mode .footer {
    background-color: #1f1f1f;
    color: #cccccc;
}

body.dark-mode .footer-links a {
    color: #bbbbbb;
}

body.dark-mode .footer-links a:hover {
    color: #ffffff;
}

body.dark-mode .footer-bottom {
    background-color: #121212;
    color: #666666;
}

/* التنقل */
.navigation {
    background-color: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.navigation .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}
.navigation .logo-img {
    /* تكبير حجم الشعار في الرأس ليظهر أوضح */
    height: 100px;
    width: auto;
}
.nav-list {
    display: flex;
    align-items: center;
    gap: 20px;
}
.nav-list li a {
    font-weight: bold;
    color: #333;
    padding: 8px 12px;
    border-radius: 4px;
}
.nav-list li a:hover,
.nav-list li a.active {
    background-color: #dc3545;
    color: #ffffff;
}
.nav-list li a.support {
    color: #dc3545;
    font-weight: bold;
}

/* زر إظهار القائمة على الأجهزة الصغيرة */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}
.nav-toggle i {
    color: #333;
}

/* استجابة للشاشات الصغيرة */
@media (max-width: 768px) {
    /* إخفاء قائمة الروابط الافتراضية وإظهارها على شكل قائمة منسدلة عند الضغط */
    .nav-list {
        display: none;
        flex-direction: column;
        gap: 10px;
        background-color: #fff;
        position: absolute;
        top: 60px;
        right: 0;
        padding: 10px;
        border: 1px solid #e5e5e5;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        min-width: 200px;
    }
    .nav-list.show {
        display: flex;
    }
    /* عرض زر القائمة المنسدلة */
    .nav-toggle {
        display: block;
    }
    /* السماح بالتفاف العناصر داخل حاوية التنقل */
    .navigation .nav-container {
        flex-wrap: wrap;
    }
}

/* قسم البانر */
/* قسم البانر المتحرك */
/* قسم البانر المتحرك */
/* قسم السلايد شو بتصميم أكثر أناقة يشبه المثال */
/*
 * قسم البانر (السلايد شو)
 * قمنا بتعديل الأبعاد بحيث يكون العرض الأقصى 1000 بكسل والارتفاع 500 بكسل على أجهزة الكمبيوتر
 * بينما يظل مربع الشكل على الهواتف عبر media query أدناه
 */
.hero {
    position: relative;
    overflow: hidden;
    height: 500px;
    max-width: 1200px;
    width: 90%;
    margin: 20px auto;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* حاوية الشرائح */
/* الحاوية الداخلية للسلايد شو تضم الشرائح وأزرار التحكم */
.hero .slider-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero .slider {
    display: flex;
    /* سيتم تحديد العرض ديناميكيًا عبر JavaScript حسب عدد الشرائح */
    width: 100%;
    height: 100%;
    /* إزالة التحريك التلقائي لتحكم يدوي عبر JavaScript */
    transition: transform 0.6s ease-in-out;
}

/* أزرار التحكم في السلايدر */
/* أزرار التحكم في السلايد شو */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 26px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    z-index: 2;
}

.slider-btn:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.slider-btn.prev {
    right: auto;
    left: 10px;
}

.slider-btn.next {
    right: 10px;
    left: auto;
}

/* كل صورة داخل السلايدر */
.hero .slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

/* حركة السلايدر */
@keyframes slideShow {
    0% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-100%);
    }
    40% {
        transform: translateX(-100%);
    }
    45% {
        transform: translateX(-200%);
    }
    60% {
        transform: translateX(-200%);
    }
    65% {
        transform: translateX(-300%);
    }
    80% {
        transform: translateX(-300%);
    }
    85% {
        transform: translateX(-400%);
    }
    100% {
        transform: translateX(-400%);
    }
}

/* تخصيصات إضافية للأجهزة الصغيرة */
@media (max-width: 768px) {
    /* تقليل ارتفاع البانر (السلايد) على الهواتف مع الحفاظ على نسبة مناسبة */
    .hero {
        height: 300px;
        max-height: 50vh;
    }
    /* تصغير حجم الإحصائيات على الهواتف */
    .stat-icon {
        font-size: 20px;
    }
    .stat-number {
        font-size: 16px;
    }
}

/* قسم الإحصائيات */
.stats-section {
    padding: 40px 0;
    background-color: #f7f7f7;
}

/*
 * شريط الشركاء المتحرك
 * يتم تحريكه باتجاه اليسار أو اليمين اعتمادًا على فئة .left أو .right على عنصر partners-carousel
 */
.partners-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 20px auto;
    /* إضافة حدود بسيطة لتوضيح القسم */
    padding: 10px 0;
}
.partners-carousel .carousel-track {
    display: flex;
    width: max-content;
    animation: scroll-left 30s linear infinite;
}
.partners-carousel.right .carousel-track {
    animation-name: scroll-right;
}

/*
 * عند اختيار اتجاه "ثابت" (static) يتم إيقاف الحركة وتوسيط العناصر
 */
.partners-carousel.static .carousel-track {
    animation: none;
    justify-content: center;
}
@keyframes scroll-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes scroll-right {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); }
}
.partner-card {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 40px;
    transition: filter 0.3s ease;
}
.partner-card img {
    /* تكبير حجم صور الشركاء وتطبيق فلتر للتظليل بلون أسود */
    /* زيادة حجم صور الشركاء لتكون أكبر */
    max-width: 200px;
    display: block;
    margin-bottom: 5px;
    /* إزالة ألوان الصورة وإضافة تباين منخفض ليظهر بلون أسود/رمادي */
    filter: grayscale(100%) brightness(0.4);
    transition: filter 0.3s ease;
}
/* عند التأشير نعيد الألوان الأصلية للصورة داخل بطاقة الشريك */
.partner-card:hover img {
    filter: none;
}
.stats-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}
.stats-grid {
    flex: 2;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 20px;
}
.stat-item {
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 20px 10px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.stat-icon {
    font-size: 24px;
    color: #dc3545;
    margin-bottom: 8px;
}
.stat-number {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
}
.stat-title {
    font-size: 14px;
    color: #555;
}
.stats-description {
    flex: 1;
    background-color: #dc3545;
    color: #fff;
    border-radius: 8px;
    padding: 20px;
}
.stats-description h2 {
    margin-top: 0;
    font-size: 24px;
    margin-bottom: 10px;
}
.stats-description p {
    font-size: 15px;
    line-height: 1.6;
}

/* قسم الخدمات */
.services-section {
    padding: 40px 0;
    background-color: #ffffff;
}
.services-container {
    /* نستخدم تخطيطاً مرناً عمودياً بدلاً من الشبكة بحيث تظهر كل بطاقة خدمة بعرض كامل */
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* تمدد البطاقات لملء العرض المتاح */
    align-items: stretch;
}
.service-card {
    background-color: var(--card-bg);
    color: #fff;
    border-radius: 12px;
    padding: 20px;
    /* نستخدم flex لترتيب الأيقونة والنص أفقياً وفق اتجاه اللغة */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    /* يكون النص محاذياً لليمين في السياق العربي */
    text-align: right;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* تأثير عند تمرير الماوس على بطاقة الخدمة */
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    filter: brightness(1.05);
}
.service-icon {
    /* حجم أكبر للأيقونات حتى تكون بارزة كما في التصميم المقترح */
    font-size: 48px;
    /* لا نضيف مسافة رأسية لأننا نستخدم flex */
    margin-bottom: 0;
    /* نترك المجال لقيمة margin حسب اتجاه اللغة، لذلك لا نحدد margin-left أو right مباشرة */
}

/* جعل أيقونات الخدمات ذات شفافية خفيفة حتى تتناغم مع لون البطاقة */
.service-icon i {
    opacity: 0.25;
}
.service-title {
    margin: 0;
    font-size: 22px;
    font-weight: bold;
}
.service-desc {
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 1.4;
}

/* حاوية نص الخدمة التي تحتوي على العنوان والوصف */
.service-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: right;
}

/*
 * على شاشات الهواتف، نقرب النص والأيقونة داخل البطاقة بحيث لا تتباعد
 * العناصر أكثر من اللازم. هذا يجعل الشكل أقرب للصورة المطلوبة.
 */
@media (max-width: 767px) {
    .service-card {
        justify-content: flex-start;
    }
}

/*
 * إزالة التحكم في نسبة العرض والارتفاع وإعادة تخطيط بطاقات الخدمات للهواتف.
 * بعض الأنماط السابقة كانت تجعل البطاقة مربعة وتضع المحتوى في عمود، وهو ما أدى
 * إلى ظهور فراغ كبير في البطاقة. هذه القواعد الجديدة تلغي ذلك وتعيد ترتيب
 * المحتوى في صف مع أيقونة ونص كما في التصميم المطلوب.
 */
@media (max-width: 767px) {
    .services-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
    }
    .service-card {
        /* تفعيل التنسيق الأفقي للعناصر داخل البطاقة */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 20px;
        /* إزالة نسبة العرض/الارتفاع لإلغاء كونها مربعة */
        aspect-ratio: auto;
        height: auto;
    }
}

/*
 * عند عرض الموقع على شاشات أكبر (أجهزة الكمبيوتر والأجهزة اللوحية العريضة)،
 * نعيد تخطيط قسم الخدمات إلى شبكة مكونة من أربعة أعمدة كما في التصميم على الحاسب.
 * يتم الحفاظ على التصميم العمودي على الهواتف بشاشة أصغر من 768 بكسل.
 */
@media (min-width: 768px) {
    .services-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        justify-items: stretch;
        align-items: stretch;
    }
}

/* قسم صور الأسبوع */
.gallery-section {
    padding: 40px 0;
    background-color: #f7f7f7;
}
.section-title {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    /* إزالة التوسيط الذي كان يسبب مشاكل في عرض صور الأسبوع على الهواتف */
    /*justify-content: center;*/
}
.gallery-item {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/*======================
 * لايت بوكس لمعرض الصور
 *======================*/
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    padding: 20px;
    box-sizing: border-box;
}
.lightbox-overlay.hidden {
    display: none;
}
.lightbox-overlay img {
    max-width: 90%;
    max-height: 70vh;
    border-radius: 8px;
    margin-bottom: 15px;
}
.lightbox-desc {
    color: #ffffff;
    text-align: center;
    max-width: 80%;
    line-height: 1.5;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #ffffff;
    font-size: 40px;
    cursor: pointer;
    padding: 10px;
    line-height: 1;
}
.lightbox-close {
    top: 20px;
    right: 30px;
    transform: none;
    font-size: 42px;
}
.lightbox-prev {
    left: 30px;
}
.lightbox-next {
    right: 30px;
}
/* تغيير حجم أزرار النافيجيت في الأجهزة الصغيرة */
@media (max-width: 600px) {
    .lightbox-close,
    .lightbox-prev,
    .lightbox-next {
        font-size: 32px;
    }
}

/* قسم الأخبار */
.news-section {
    padding: 40px 0;
    background-color: #ffffff;
}
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    /* إزالة التوسيط من شبكة الأخبار لتجنب الفراغات على الهواتف */
    /*justify-content: center;*/
}
.news-item {
    display: flex;
    flex-direction: column;
    background-color: #f7f7f7;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.news-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* استجابات للتصميم (Responsive) لضمان توافق الموقع مع الهواتف والأجهزة اللوحية */
@media (max-width: 768px) {
    /* في الشاشات الصغيرة، اجعل شبكة صور الأسبوع تتكيف مع عرض الشاشة بالكامل */
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
    /* تقليل حجم عناصر الأخبار لتتناسب مع الأجهزة الصغيرة */
    .news-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    /* تم إزالة قواعد الخدمات للجوال هنا للسماح للقواعد الأحدث في الأسفل بالعمل */
    /* في الشاشات الصغيرة، نحتفظ بسلوك شريط الشركاء الأصلي بدون التفاف للحفاظ على التمرير الأفقي */
    /* تم إزالة التفاف عناصر الشركاء لأنه كان يسبب مشاكل في التوافق */
}
.news-content {
    padding: 15px;
}
.news-title {
    font-size: 18px;
    margin: 0;
    line-height: 1.4;
}
.news-title a {
    color: #dc3545;
    font-weight: bold;
}
.news-title a:hover {
    text-decoration: underline;
}

/* قسم الدعوة للعمل */
.cta-section {
    padding: 50px 0;
    background-color: #dc3545;
    color: #fff;
    text-align: center;
}
.cta-title {
    font-size: 26px;
    margin-bottom: 25px;
    font-weight: bold;
}
.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}
.cta-btn {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-weight: bold;
    transition: background-color 0.2s ease-in-out;
}
.cta-btn.primary {
    background-color: #ffffff;
    color: #dc3545;
}
.cta-btn:hover {
    background-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}
.cta-btn.primary:hover {
    background-color: #f8f9fa;
    color: #dc3545;
}

/* قسم الشركاء */
.partners-section {
    padding: 40px 0;
    background-color: #f7f7f7;
    text-align: center;
}
.partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
}
.partner-item {
    font-size: 20px;
    font-weight: bold;
    color: #666;
    border-bottom: 2px solid #dc3545;
    padding-bottom: 5px;
}

/* تذييل الصفحة */
.footer {
    background-color: #333;
    color: #ccc;
    padding-top: 40px;
}
.footer-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}
.footer-left {
    flex: 2;
}
.footer-left h3 {
    color: #fff;
    margin-top: 0;
}
.footer-left p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
.footer-links {
    flex: 1;
}
.footer-links ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.footer-links a {
    color: #ccc;
    font-size: 14px;
}
.footer-links a:hover {
    color: #fff;
}
.footer-bottom {
    background-color: #222;
    padding: 10px 0;
    text-align: center;
    font-size: 13px;
    color: #999;
    margin-top: 20px;
}
.footer-bottom p {
    margin: 5px 0;
}

/* استجابة للشاشات الصغيرة */
@media (max-width: 768px) {
    .stats-container {
        flex-direction: column;
    }
    .stats-description {
        margin-top: 20px;
    }
    .footer-container {
        flex-direction: column;
    }
    .nav-list {
        gap: 10px;
    }
    .services-container {
        /* ترتيب الخدمات في شبكة من أربعة أعمدة ثابتة مع محاذاة المحتوى للمنتصف */
        grid-template-columns: repeat(4, 1fr);
        justify-items: center;
    }
}

/* تأثير التوهج لبطاقات الإحصائيات: يتم تغيير الظل عند تمرير الماوس ويستخدم لون الإحصائية */
.stat-item {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.stat-item:hover {
    /* استخدام المتغير --stat-color لتعويض اللون لكل بطاقة */
    box-shadow: 0 0 15px var(--stat-color);
    transform: translateY(-5px);
}

/*
 * أيقونات السوشيال ميديا
 * لجعل الأيقونات متسقة في جميع الصفحات (الشريط العلوي وصفحة الاتصال)،
 * يتم تعريفها هنا بحيث تُظهر لوناً أساسياً (أسود) وتتحول إلى اللون المحدد عند التمرير.
 * نستخدم متغير CSS --icon-color لتعيين اللون عند الحاجة، ويمكن تهيئته عبر inline style.
 */
.social-icons .social-btn i {
    color: #000 !important;
    font-size: 22px;
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.social-icons .social-btn:hover i {
    color: var(--icon-color) !important;
    transform: scale(1.1);
}

/*
 * جعل التذييل ملتصقاً بأسفل الصفحة دائماً
 * نستخدم flexbox على body لضمان أن يحتل المحتوى المتبقي المساحة المتاحة ويُدفع التذييل لأسفل.
 */
html, body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}
footer, .footer {
    margin-top: auto;
}

/* ضبط حجم الأيقونات في نموذج الاتصال بحيث يتطابق مع أيقونات الشريط العلوي */
.contact-page .social-icons .social-btn i {
    font-size: 22px;
}

/*
 * إعادة ضبط تخطيط بطاقات قسم الخدمات للأجهزة المحمولة.
 *
 * هذا القسم يضيف قواعد CSS في نهاية الملف لضمان أن تكون بطاقات الخدمات
 * على الهواتف ذات عرض كامل وبتنسيق أفقي كما في التصميم المرفق، بدلاً من أن
 * تكون مربعة. لأن هذه القواعد تأتي بعد القواعد السابقة، فإنها ستتجاوز
 * أي تعريفات سابقة قد تجعل البطاقة مربعة.
 */
@media (max-width: 768px) {
    .services-container {
        /* استخدم flex مع عمود واحد بحيث تأخذ البطاقات العرض الكامل */
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
    }
    .service-card {
        /* الترتيب أفقي بدلاً من عمودي */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 20px;
        /* إلغاء النسبة الثابتة للعرض إلى الارتفاع لتجنب المربعات */
        aspect-ratio: auto;
        height: auto;
    }
}