.main-nav .lang-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(90deg, #6FA8DC 0%, #A58C62 100%);
    color: #fff;
    font-weight: 700;
    border-radius: 24px;
    box-shadow: 0 4px 16px rgba(30,58,92,0.13);
    padding: 10px 32px;
    border: none;
    font-size: 1.18em;
    cursor: pointer;
    width: auto;
    margin: 0 16px;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
    position: relative;
    z-index: 2;
    white-space: nowrap;
}
.main-nav .lang-toggle-btn:hover, .main-nav .lang-toggle-btn:focus {
    background: linear-gradient(90deg, #A58C62 0%, #6FA8DC 100%);
    color: #fff;
    box-shadow: 0 8px 24px rgba(30,58,92,0.18);
    transform: scale(1.07);
}
@media (max-width: 900px) {
    .main-nav .lang-toggle-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        font-size: 1.08em;
        padding: 14px 0;
        border-radius: 22px;
        margin: 12px auto 0 auto;
        background: #6FA8DC;
        color: #fff;
        box-shadow: 0 2px 8px rgba(30,58,92,0.10);
        border: none;
    }
}
.main-nav .lang-toggle-li {
    display: inline-block;
    vertical-align: middle;
    margin: 0 18px;
    background: none !important;
    box-shadow: none !important;
    width: auto !important;
}
.main-nav .lang-toggle-btn {
    /* التصميم الموحد أعلاه يكفي */
}
.main-nav .lang-toggle-btn .lang-icon {
        width: auto;
        min-width: 90px;
        padding: 10px 24px;
    transform: scale(1.07) rotate(-2deg);
    box-shadow: 0 4px 16px rgba(255,215,0,0.18);
}
@media (max-width: 900px) {
    .main-nav .lang-toggle-li {
        width: 100%;
        margin: 12px 0 0 0;
        justify-content: center;
    }
    .main-nav .lang-toggle-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        font-size: 1.08em;
        padding: 14px 0;
        border-radius: 22px;
        margin: 12px auto 0 auto;
        background: #6FA8DC;
        color: #fff;
        box-shadow: 0 2px 8px rgba(30,58,92,0.10);
        border: none;
    }
}
#lang-toggle.lang-toggle-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.18);
    color: var(--main-blue);
    font-weight: bold;
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(30,58,92,0.13);
    padding: 10px 32px;
    border: none;
    font-size: 1.18em;
    cursor: pointer;
    margin-right: 24px;
    margin-left: 0;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    position: relative;
    z-index: 2;
}
#lang-toggle.lang-toggle-btn .lang-icon {
    font-size: 1.2em;
    margin-right: 4px;
    margin-left: 0;
    display: inline-block;
}
#lang-toggle.lang-toggle-btn:hover {
    background: var(--main-blue-light);
    color: var(--main-white);
    transform: scale(1.07) rotate(-2deg);
    box-shadow: 0 4px 16px rgba(255,215,0,0.18);
}
@media (max-width: 900px) {
    #lang-toggle.lang-toggle-btn {
        font-size: 1em;
        padding: 8px 18px;
        margin-right: 10px;
        margin-left: 0;
    }
}
/* معلومات الاتصال بشكل احترافي */
.contact-info-row .contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.08em;
    margin-bottom: 12px;
    color: #1E3557;
}
.contact-info-row .contact-item .icon {
    font-size: 1.25em;
    min-width: 24px;
    text-align: center;
    color: #A58C62;
    margin-left: 2px;
    margin-right: 2px;
}
@media (max-width: 600px) {
    .contact-info-row .contact-item {
        font-size: 1em;
        gap: 7px;
    }
    .contact-info-row .contact-item .icon {
        font-size: 1.1em;
        min-width: 20px;
    }
}
/* حل نهائي لمشكلة اختفاء عنوان البانر */
/* إظهار عناوين البانر فقط داخل البانر */
.banner-content h2.ar,
.banner-content h2.en {
    display: block !important;
    color: #fff !important;
    text-shadow: 0 2px 12px #000b;
    position: relative;
    z-index: 2;
    padding: 0;
    margin-bottom: 18px;
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
    font-size: 2.2em;
    font-weight: bold;
    text-align: center;
}
/* ضبط خطوط النصوص بشكل احترافي وموحد */
h1, .logo h1 {
    font-family: 'Cairo', 'Montserrat', Arial, sans-serif;
    font-weight: 900;
    font-size: 2.2em;
    color: var(--main-blue);
    letter-spacing: 0.01em;
    margin: 0 0 12px 0;
}
h2, .section-title {
    font-family: 'Cairo', 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.7em;
    color: var(--main-blue);
    margin: 0 0 18px 0;
    letter-spacing: 0.01em;
}
h3 {
    font-family: 'Cairo', 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.25em;
    color: var(--main-blue);
    margin: 0 0 12px 0;
}
p, .service-desc, .about-text, .main-btn {
    font-family: 'Cairo', 'Montserrat', Arial, sans-serif;
    font-weight: 400;
    font-size: 1.08em;
    color: #222;
    line-height: 1.8;
}
.service-title {
    font-family: 'Cairo', 'Montserrat', Arial, sans-serif;
    font-weight: 900;
    font-size: 1.18em;
    color: var(--main-blue);
    margin: 18px 0 10px 0;
    text-align: right;
    letter-spacing: 0.01em;
}
.main-btn {
    font-family: 'Cairo', 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.08em;
    letter-spacing: 0.01em;
}
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] .section-title, html[lang="ar"] .service-title, html[lang="ar"] p, html[lang="ar"] .service-desc, html[lang="ar"] .main-btn {
    font-family: 'Cairo', Arial, Tahoma, sans-serif;
}
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] .section-title, html[lang="en"] .service-title, html[lang="en"] p, html[lang="en"] .service-desc, html[lang="en"] .main-btn {
    font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
}
/* ضمان عدم وجود فراغ عند إخفاء العنوان العربي أو الإنجليزي */
p.ar,
p.en,
div.ar,
div.en,
span.ar,
span.en {
    display: none;
}
/* إخفاء العناصر النصية المكررة حسب اللغة، مع استثناء عناوين h2 */
.section-title.ar,
.section-title.en,
p.ar,
p.en,
div.ar,
div.en,
span.ar,
span.en {
    display: none;
    }
/* إظهار عناوين البانر دائماً */
.banner-content h2.ar,
.banner-content h2.en {
    display: block !important;
}
body[lang="ar"] .ar,
body[lang="en"] .en {
    display: inline-block;
}
/* ضمان تراكب العناوين فوق بعض بدون فراغ */
.section-title.ar,
.section-title.en {
    position: absolute;
    left: 0; right: 0;
    top: 0;
    width: 100%;
    margin: 0 auto;
}
.section-title-wrapper {
    position: relative;
    min-height: 56px; /* أو حسب ارتفاع العنوان */
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
body[lang="ar"] .en { display: none !important; }
body[lang="en"] .ar { display: none !important; }
/* خطوط Google Fonts احترافية وعصرية */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700;900&family=Tajawal:wght@400;700;900&display=swap');

body, h1, h2, h3, h4, h5, h6, p, ul, li, .ar {
  font-family: 'Cairo', 'Tajawal', 'GE SS Two', Arial, Tahoma, sans-serif !important;
  color: #1a237e !important;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  text-shadow: 0 2px 8px #0001;
}
p, ul, li {
  font-weight: 400;
  font-size: 1.13em;
}
.service-banner-content h2.ar, .service-banner-content h2.en {
  color: #ffd700 !important;
  text-shadow: 0 2px 12px #000b;
}

html[lang="ar"] body {
    font-family: 'Cairo', Arial, Tahoma, sans-serif;
}
html[lang="en"] body {
    font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
}

body {
    font-size: 1.08em;
    color: #111;
    background: #fff;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}

:root {
  --main-blue: #1E3557; /* كان أزرق قوي، الآن أزرق-رمادي داكن أنيق */
  --main-blue-light: #6FA8DC; /* درجة فاتحة منسجمة */
  --main-gold: #A58C62;
  --main-gold-light: #FCE7AE;
  --main-white: #fff;
  --main-gray: #f7f8fa;
  --text-neutral: #1f2937; /* محايد داكن */
}

/* هيدر احترافي */
header {
    background: linear-gradient(90deg, var(--main-blue) 0%, var(--main-blue-light) 40%, var(--main-gold) 80%, var(--main-gold-light) 100%);
  color: #fff;
  box-shadow: 0 4px 24px rgba(111,168,220,0.22);
  position: relative;
  z-index: 100;
  padding: 0;
  min-height: 90px;
  border-bottom: 4px solid var(--main-gold-light);
  display: flex;
  align-items: center;
}
.header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    min-height: 90px;
    padding: 0 3vw;
    width: 100%;
    position: relative;
}
.main-nav {
}

.main-nav > li {
    display: inline-block;
    vertical-align: middle;
    margin: 0 24px;
    font-size: 1.15rem;
    font-family: 'Cairo', 'Montserrat', sans-serif;
    font-weight: 500;
    color: #1a237e;
    white-space: nowrap;
}

.main-nav .lang-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border-radius: 0;
    padding: 8px 0;
    font-size: 1.15rem;
    font-family: inherit;
    font-weight: 500;
    color: #1a237e;
    border: none;
    cursor: pointer;
    margin-left: 18px;
    transition: color 0.2s;
    box-shadow: none;
    white-space: nowrap;
    min-width: 0;
    overflow: visible;
}
.main-nav > li {
        display: inline-block;
        vertical-align: middle;
        margin: 0 8px;
}
@media (max-width: 900px) {
    .main-nav > li {
        display: flex;
        align-items: center;
        margin: 0;
    }
}

.main-nav .lang-toggle-li {
    margin-left: 18px;
    margin-right: 0;
    display: inline-block;
    vertical-align: middle;
    background: none !important;
    box-shadow: none !important;
}
.main-nav .lang-toggle-btn {
    width: auto;
    min-width: 90px;
    padding: 10px 24px;
}
@media (max-width: 900px) {
    .main-nav {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }
    .main-nav .lang-toggle-li {
        width: 100%;
        margin: 12px 0 0 0;
        justify-content: center;
    }
    .main-nav .lang-toggle-btn {
        width: 100%;
        padding: 12px 0;
        border-radius: 14px;
        margin: 0 auto;
        background: rgba(255,255,255,0.25);
    }
}

.logo {
  display: flex;
  align-items: center;
  gap: 16px;
    background: transparent;
  border-radius: 2em;
  padding: 0.5em 1.5em;
  box-shadow: 0 2px 12px rgba(111,168,220,0.11);
}
.logo img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.13);
    background: #fff;
  object-fit: cover;
  border: 2.5px solid var(--main-gold);
}
.logo h1 {
  font-size: 1.5em;
  font-weight: bold;
  color: #fff;
  letter-spacing: 1px;
  margin: 0;
  text-shadow: 0 2px 8px rgba(111,168,220,0.33);
  transition: color 0.2s;
  white-space: nowrap;
}
.main-nav > li > a:hover, .main-nav > li > a:focus {
    background: transparent;
    color: var(--main-blue);
    box-shadow: 0 2px 8px rgba(255,215,0,0.10);
}
#lang-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    color: var(--main-blue);
    font-weight: bold;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(30,58,92,0.13);
    padding: 10px 26px;
    border: none;
    font-size: 1.1em;
    cursor: pointer;
    margin-left: 18px;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    position: relative;
    overflow: hidden;
}
#lang-toggle .lang-icon {
    font-size: 1.2em;
    margin-right: 4px;
    margin-left: 0;
    display: inline-block;
}
#lang-toggle:hover {
    background: transparent;
    color: var(--main-white);
    transform: scale(1.07) rotate(-2deg);
    box-shadow: 0 4px 16px rgba(255,215,0,0.18);
}
.burger-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 3000;
    margin-left: 10px;
    margin-right: 10px;
}
.burger-menu span {
    display: block;
    width: 28px;
    height: 4px;
    margin: 4px 0;
    background: transparent;
    border-radius: 2px;
    transition: 0.3s;
}
@media (max-width: 900px) {
    .burger-menu {
        display: flex !important;
        position: fixed;
        top: 12px;
        right: 12px;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        z-index: 4000;
        background: rgba(0,0,0,0.25);
        border: none;
        border-radius: 10px;
        cursor: pointer;
    }
    .burger-menu::before {
        content: '\2630'; /* ☰ */
        color: #fff;
        font-size: 24px;
        line-height: 1;
    }
    .burger-menu span { background: #fff !important; }
}

/* بانر رئيسي */
.banner {
    position: relative;
    width: 100vw;
    min-width: 100vw;
    height: 100vh;
    min-height: 100vh;
    background: none !important;
    color: #fff;
    overflow: hidden;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    max-width: 100vw;
    padding: 0;
    display: block;
}
.banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    min-width: 100vw;
    height: 100vh;
    min-height: 100vh;
    object-fit: cover;

/* تحسين البانر والأزرار للجوال */
@media (max-width: 600px) {
    .banner-content {
        padding: 0 8px;
        min-width: 0;
        width: 100vw;
        height: auto;
        justify-content: flex-start;
    }
    .banner-content h2 {
        font-size: 1.35em;
        margin-bottom: 12px;
        word-break: break-word;
    }
    .banner-content p {
        font-size: 1em;
        margin-bottom: 14px;
        word-break: break-word;
    }
    .hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        width: 100%;
        margin-top: 10px;
    }
    .btn-primary, .btn-secondary {
        width: 90vw;
        max-width: 340px;
        font-size: 1em;
        padding: 12px 0;
        border-radius: 12px;
        margin: 0 auto;
        box-sizing: border-box;
        text-align: center;
        display: block;
    }
}
    display: block;
    filter: none;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0;
    z-index: 1;
}
.banner-content {
    position: absolute;
    top: 0; left: 0; width: 100vw; height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    background: none !important;
    border-radius: 0 !important;
    z-index: 2;
    margin: 0 !important;
    padding: 0;
}
.banner-content h2 {
    font-size: 2.5em;
    margin-bottom: 18px;
    text-shadow: 0 2px 8px #0007;
}
.banner-content p {
    font-size: 1.3em;
    margin-bottom: 24px;
    text-shadow: 0 1px 4px #0007;
}


/* قسم الميزات */
.features-section {
    background: #fff;
    padding: 48px 0 32px 0;
}
.features-flex {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
}
.feature-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px #0001;
    padding: 32px 24px;
    min-width: 220px;
    max-width: 260px;
    text-align: center;
    margin-bottom: 18px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.feature-card:hover {
    box-shadow: 0 6px 24px #0002;
    transform: translateY(-6px) scale(1.04);
}
.feature-icon {
    font-size: 2.5em;
    margin-bottom: 14px;
    color: inherit;
}

/* من نحن */
.about-section {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px #0001;
    padding: 48px 0 32px 0;
    margin-bottom: 32px;
}
.about-flex {
    display: flex;
    gap: 40px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}
.about-text {
    flex: 1 1 320px;
    min-width: 260px;
}
.about-text h2 {
    color: var(--main-blue);
    margin-bottom: 18px;
}
.about-text ul {
    margin: 18px 0 0 0;
    padding: 0 0 0 18px;
    color: var(--main-blue);
    font-size: 1.08em;
}
.about-img img {
    width: 320px;
    max-width: 100%;
    border-radius: 16px;
    box-shadow: 0 2px 12px #0001;
}

/* خدمات المقاولات - تصميم موحد وألوان الشعار */
.services-section {
    background: #fff;
    padding: 48px 0 40px 0;
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}
@media (max-width: 1100px) { .service-image { height: 200px; } }
@media (max-width: 700px) { .service-image { height: 160px; } }
.service-card {
    background: #fff;
    border-radius: 16px;
    border: 2px solid var(--main-gold-light);
    box-shadow: 0 2px 12px #0001;
    padding: 18px 16px 20px 16px;
    text-align: center;
    margin: 0;
    transition: box-shadow 0.2s, transform 0.2s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* صورة البطاقة بعرض كامل وزوايا علوية دائرية فقط */
.service-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 14px 14px 0 0;
    margin: -18px -16px 18px -16px;
    box-shadow: none;
    display: block;
    background: #fff;
    border-bottom: 1.5px solid var(--main-gold-light);
}
.service-card:hover {
    box-shadow: 0 6px 32px #2196f322;
    transform: translateY(-6px) scale(1.05);
}
/* أيقونة دائرية صغيرة أعلى يمين الصورة */
.service-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    background: #fff;
    border: 2px solid var(--main-gold-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    color: var(--main-gold);
    box-shadow: 0 1px 4px #0001;
    z-index: 2;
    margin: 0;
    padding: 0;
}
/* عنوان الخدمة بخط عريض وملون */
.service-title {
    font-size: 1.18em;
    font-weight: bold;
    margin: 6px 0 6px 0;
    color: var(--main-blue);
    text-align: right;
    letter-spacing: 0.01em;
}
/* نص مختصر للخدمة */
.service-desc {
    color: #222;
    font-size: 1em;
    text-align: right;
    margin: 0;
    line-height: 1.9;
    max-height: none !important;
    overflow: visible !important;
}
/* زر استشارة أو إجراء في أسفل البطاقة */
.service-card .main-btn, .service-card button, .service-card .service-btn {
    display: inline-block;
    background: #fff;
    color: #fff !important;
    border-radius: 8px;
    padding: 10px 28px;
    font-size: 1.08em;
    font-weight: bold;
    border: none;
    margin-top: 10px;
    margin-bottom: 0;
    box-shadow: 0 2px 8px #0001;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    cursor: pointer;
}
.service-card .main-btn:hover, .service-card button:hover, .service-card .service-btn:hover {
    background: #fff;
    color: var(--main-blue) !important;
    transform: translateY(-2px) scale(1.04);
}

/* خطوات العمل */
.process-section {
    background: #fff;
    padding: 48px 0 32px 0;
}
.process-flex {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    justify-content: center;
}
.process-step {
    background: var(--main-gray);
    border-radius: 16px;
    box-shadow: 0 2px 12px #1e3a5c11;
    padding: 32px 24px;
    min-width: 180px;
    max-width: 220px;
    text-align: center;
    margin-bottom: 18px;
}
.step-number {
    width: 44px;
    height: 44px;
    background: none !important;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    margin: 0 auto 12px auto;
    font-weight: bold;
}

/* مشاريعنا */
.projects-section {
    background: var(--main-gray);
    padding: 48px 0 32px 0;
}
.projects-flex {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    justify-content: center;
}
.project-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px #0001;
    padding: 0 0 18px 0;
    min-width: 220px;
    max-width: 260px;
    text-align: center;
    margin-bottom: 18px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.project-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 16px 16px 0 0;
    margin-bottom: 10px;
}
.project-card:hover {
    box-shadow: 0 6px 24px #0002;
    transform: translateY(-6px) scale(1.04);
}

/* آراء العملاء */
.testimonials-section {
    background: #fff;
    padding: 48px 0 32px 0;
}
.testimonials-flex {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    justify-content: center;
}
.testimonial-card {
    background: var(--main-gray);
    border-radius: 16px;
    box-shadow: 0 2px 12px #1e3a5c11;
    padding: 32px 24px;
    min-width: 220px;
    max-width: 260px;
    text-align: center;
    margin-bottom: 18px;
    font-style: italic;
    color: var(--main-dark);
}
.testimonial-card span {
    display: block;
    margin-top: 12px;
    color: var(--main-blue);
    font-weight: bold;
}

/* فوتر احترافي */
footer {
    background: linear-gradient(90deg, var(--main-blue) 0%, var(--main-blue-light) 40%, var(--main-gold) 80%, var(--main-gold-light) 100%) !important;
    color: #fff !important;
    padding: 32px 0 18px 0;
    box-shadow: 0 -4px 18px var(--main-blue-light);
    margin-top: 40px;
}
.footer-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.footer-links {
    font-size: 1.1em;
    margin-bottom: 8px;
    color: #fff;
}
.footer-links a {
    color: #fff !important;
    text-decoration: none;
    margin: 0 8px;
    transition: color 0.2s;
}
.footer-links a:hover {
    color: #ffd700 !important;
    text-decoration: underline;
}
.footer-social {
    display: flex;
    gap: 18px;
    margin-bottom: 8px;
}
.footer-social img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px #0002;
    transition: box-shadow 0.2s;
}
.footer-social img:hover {
    box-shadow: 0 4px 16px #ffd70055;
}
footer p, footer p.ar, footer p.en {
    margin: 0;
    color: #fff !important;
    font-size: 1.1em;
    font-weight: 500;
}

/* زر واتساب عائم */
/* زر واتساب عائم دائري صغير في الزاوية */
.whatsapp-float {
    position: fixed;
    bottom: 22px;
    left: 22px;
    z-index: 9999;
    background: #25d366;
    border-radius: 50%;
    box-shadow: 0 2px 8px #25d36655;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.2s, transform 0.2s;
}
.whatsapp-float img {
    width: 36px;
    height: 36px;
    display: block;
}
.whatsapp-float:hover {
    box-shadow: 0 4px 16px #25d36699;
    transform: scale(1.08);
}

/* استجابة كاملة */
@media (max-width: 900px) {
    .header-flex { flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; min-height: 56px; padding: 0 8px; }
    .logo { flex-direction: row; align-items: center; gap: 8px; }
    .logo img { width: 40px; height: 40px; }
    .logo h1 { font-size: 1em !important; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .about-flex, .features-flex, .services-flex, .projects-flex, .testimonials-flex, .process-flex {
        flex-direction: column;
        gap: 24px;
        align-items: center;
    }
    .about-img img {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }
    .banner-img {
        height: 220px;
    }
}
@media (max-width: 600px) {
    .banner-content h2 {
        font-size: 1.3em;
    }
    .banner-content p {
        font-size: 1em;
    }
    .main-btn {
        font-size: 1em;
        padding: 10px 18px;
    }
    .about-text h2, .services-section h2, .projects-section h2, .testimonials-section h2, .process-section h2 {
        font-size: 1.1em;
    }
}

/* عناوين رئيسية */
h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 900;
    letter-spacing: 0.01em;
    margin-bottom: 0.7em;
    color: var(--main-blue);
    background: none;
}
h1.ar, h2.ar, h3.ar, h4.ar, h5.ar, h6.ar {
  font-family: 'Cairo', Arial, Tahoma, sans-serif;
}
h1.en, h2.en, h3.en, h4.en, h5.en, h6.en {
  font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
}

/* فقرات ونصوص عامة */
p, li, span, a, label, input, textarea, button {
  font-family: inherit;
  font-weight: 400;
  line-height: 1.9;
}

/* إبراز العناوين في البانرات */
.banner h2, .executive-banner h3 {
  font-size: 2.1em;
  font-weight: 900;
  letter-spacing: 0.01em;
}

/* تحسين نصوص البانر التنفيذي */
.executive-banner p.ar, .executive-banner p.en {
  font-size: 1.18em;
  font-weight: 500;
  color: #3a2e13;
}

/* تحسين نصوص الفوتر */
footer p, footer a {
  font-size: 1em;
  font-family: inherit;
}

/* تحسين أزرار الموقع */


/* خطوط القوائم المنسدلة */
.main-nav a, .dropdown-content a {
  font-family: inherit;
  font-weight: 700;
}

/* خطوط مميزة للأقسام الخاصة */
.whyus-card, .history-text, .footer-links, .footer-social {
  font-family: inherit;
}

/* --- Responsive Design Improvements --- */
@media (max-width: 900px) {
    .container {
        width: 98%;
        max-width: 98vw;
    }
    .header-flex,
    .footer-flex,
    .main-btns-horizontal,
    .footer-links,
    .footer-social {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .main-btns-horizontal {
        width: 100%;
        flex-wrap: wrap;
        gap: 14px;
    }
    .main-btn, .main-btns-horizontal a {
        width: 90%;
        margin: 8px 0;
        font-size: 1em;
        padding: 12px 0;
    }
    .about-flex, .features-flex, .services-flex, .projects-flex, .testimonials-flex, .process-flex {
        flex-direction: column;
        gap: 24px;
        align-items: center;
    }
    .about-img img {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }
    .banner-img {
        height: 220px;
    }
}
/* تم تنظيف الأكواد المتداخلة والمتكررة هنا */
/* --- تحسينات احترافية وجمالية للموقع --- */

body {
    background: none !important;
}

/* أنيميشن للعناوين والعناصر عند الظهور */
h1, h2, h3, .main-btn, .whyus-card, .main-btns-horizontal a, .footer-links a, .footer-social img {
    transition: all 0.4s cubic-bezier(.77,0,.18,1);
}

.fade-in, .whyus-card, .main-btns-horizontal a {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s, transform 0.7s;
}
.fade-in.visible, .whyus-card.visible, .main-btns-horizontal a.visible {
    opacity: 1;
    transform: translateY(0);
}

/* تأثير hover للأزرار والروابط */


/* ظل خفيف للعناصر المهمة */
.whyus-card, .main-btn, .main-btns-horizontal a, .footer-social img {
    box-shadow: 0 2px 10px rgba(30,58,92,0.07);
}

/* تحسين مظهر الشعار */
#main-logo {
    border-radius: 50%;
    border: 3px solid var(--main-gold);
    box-shadow: 0 4px 18px rgba(30,58,92,0.13);
    background: #fff;
    padding: 4px;
    width: 60px;
    height: 60px;
    object-fit: contain;
    transition: box-shadow 0.3s, transform 0.3s;
}
#main-logo:hover {
    box-shadow: 0 8px 32px rgba(30,58,92,0.18);
    transform: scale(1.08) rotate(-3deg);
}

/* خطوط ومسافات أجمل */
body, h1, h2, h3, h4, h5, h6, p, a, li, .main-btn {
    font-family: 'Cairo', 'Tajawal', 'GE SS Two', Arial, Tahoma, sans-serif !important;
    color: #1a237e !important;
    letter-spacing: 0.01em;
}
h2, h1 {
    font-weight: 900;
    margin-bottom: 0.7em;
    color: var(--main-blue);
}
p, li {
    font-size: 1.13em;
    line-height: 2.1;
}

/* تحسين المسافات حول الأقسام */
section, .container {
    margin-bottom: 32px;
}
/* فوتر مركزي واحترافي */
.footer-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
    margin: 0 auto;
}
.footer-links {
    display: flex;
    flex-direction: row;
    gap: 10px;
    font-size: 1.2em;
    font-weight: 600;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0;
}
.footer-links a {
    color: var(--main-blue);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-links a:hover {
    color: inherit;
}
.footer-social {
    display: flex;
    flex-direction: row;
    gap: 24px;
    justify-content: center;
    align-items: center;
    margin: 0 0 0 0;
}
.footer-social img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(30,58,92,0.08);
    transition: transform 0.2s;
    object-fit: contain;
}
.footer-social img:hover {
    transform: scale(1.13) rotate(-6deg);
}
footer p.ar, footer p.en {
    font-size: 1.1em;
    color: var(--main-blue);
    margin: 0 0 10px 0;
    font-weight: 500;
}
footer {
    background: var(--main-gray);
    border-top: 2px solid #e0e0e0;
    padding: 32px 0 10px 0;
    margin-top: 40px;
}
/* روابط الصفحة الرئيسية بشكل أفقي */
.main-btns-horizontal {
    display: flex;
    flex-direction: row;
    gap: 32px;
    justify-content: center;
    align-items: center;
    margin: 30px 0;
}
/* أنيميشن الشعار عند التحميل */
#main-logo {
    opacity: 0;
    transform: scale(0.7) rotate(-10deg);
    transition: all 0.8s cubic-bezier(.77,0,.18,1);
}
#main-logo.animated {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* أنيميشن ظهور العناصر عند التمرير */
.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s, transform 0.7s;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}
/* بطاقات مزايا لماذا نحن */
.whyus-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    margin: 40px 0 20px 0;
}
.whyus-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(30,58,92,0.08);
    padding: 28px 22px;
    max-width: 340px;
    min-width: 260px;
    flex: 1 1 260px;
    text-align: right;
    border: 2px solid var(--main-blue-light);
    transition: box-shadow 0.2s;
}
.whyus-card:hover {
    box-shadow: 0 6px 24px rgba(30,58,92,0.18);
    border-color: var(--main-gold);
}
.whyus-card-title {
    font-size: 1.25em;
    font-weight: bold;
    color: var(--main-blue);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.whyus-card-title i {
    font-size: 1.3em;
    color: var(--main-gold);
}
.whyus-card-desc {
    font-size: 1em;
    color: #222;
    margin-bottom: 10px;
    line-height: 2;
}
.whyus-card-list {
    margin: 0;
    padding: 0 0 0 10px;
    list-style: disc inside;
    color: #444;
    font-size: 0.98em;
}

:root {
    --main-blue: #005B93;
    --main-blue-light: #5DC4FE;
    --main-gold: #A58C62;
    --main-gold-light: #FCE7AE;
    --main-white: #fff;
    --main-gray: #f7f8fa;
}
html, body {
    overflow-x: hidden !important;
}
body {
    font-family: 'Cairo', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: var(--main-gray);
    color: var(--main-blue);
    direction: rtl;
    padding-bottom: 90px;
}
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: visible !important;
}
/* هيدر احترافي وجذاب */
header {
    background: linear-gradient(90deg, var(--main-blue) 0%, var(--main-blue-light) 40%, var(--main-gold) 80%, var(--main-gold-light) 100%);
    color: #fff;
    box-shadow: 0 4px 18px var(--main-blue-light);
    position: relative;
    z-index: 100;
    padding: 0;
}
.header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 32px;
    min-height: 70px;
    padding: 0 3vw;
    position: relative;
}
.logo {
    display: flex;
    align-items: center;
    gap: 14px;
}
.logo img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.13);
    background: #fff;
    object-fit: cover;
    border: 2.5px solid #ffd700;
}
.logo h1 {
    font-size: 1.45em;
    font-weight: bold;
    color: #fff;
    letter-spacing: 1px;
    margin: 0;
    text-shadow: 0 2px 8px var(--main-blue-light);
    transition: color 0.2s;
    white-space: nowrap;
    opacity: 1 !important;
    display: block !important;
}
nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}
.main-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 32px;
    align-items: center;
}
.main-nav > li {
    position: relative;
}
.main-nav > li > a {
    font-family: 'Cairo', 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.25em;
    color: var(--main-blue);
    letter-spacing: 0.01em;
    text-decoration: none;
    background: transparent;
    padding: 10px 18px;
    border-radius: 12px;
    transition: color 0.2s, background 0.2s;
}
.main-nav > li > a:hover, .main-nav > li > a:focus {
    background: var(--main-blue-light);
    color: var(--main-white);
    box-shadow: 0 2px 8px rgba(255,215,0,0.10);
}
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    min-width: 180px;
    box-shadow: 0 2px 12px rgba(30,58,92,0.10);
    border-radius: 0 0 10px 10px;
    z-index: 10;
    padding: 8px 0;
}
.dropdown-content li {
    border-bottom: 1px solid #eee;
}
.dropdown-content li:last-child {
    border-bottom: none;
}
.dropdown-content a {
    color: #1e3a5c;
    padding: 10px 18px;
    display: block;
    text-decoration: none;
    transition: background 0.2s;
    font-size: 1em;
}
.dropdown-content a:hover {
    background: #f0f0f0;
}
.dropdown:hover .dropdown-content, .dropdown:focus-within .dropdown-content {
    display: block;
}
/* زر اللغة كبسولة مع أيقونة وحركة */
#lang-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    background: none !important;
    color: var(--main-blue);
    font-weight: bold;
    border-radius: 25px 0 25px 0;
    box-shadow: 0 2px 8px rgba(30,58,92,0.13);
    padding: 10px 26px;
    border: none;
    font-size: 1.1em;
    cursor: pointer;
    margin-left: 18px;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    position: relative;
    overflow: hidden;
}
#lang-toggle .lang-icon {
    font-size: 1.2em;
    margin-right: 4px;
    margin-left: 0;
    display: inline-block;
}
body[lang="ar"] #lang-toggle .lang-icon {
    margin-right: 0;
    margin-left: 4px;
}
#lang-toggle:hover {
    background: none !important;
    color: var(--main-white);
    transform: scale(1.07) rotate(-2deg);
    box-shadow: 0 4px 16px rgba(255,215,0,0.18);
}

/* ظل سفلي للهيدر */
header::after {
    content: "";
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 7px;
    background: none !important;
    z-index: 1;
}

.banner {
    background: none !important;
    color: #fff;
    padding: 50px 0 30px 0;
    text-align: center;
}
.banner h2 {
    font-size: 2.5em;
    margin-bottom: 10px;
}
.banner p {
    font-size: 1.2em;
    margin-bottom: 20px;
}
.banner img {
    width: 100%;
    max-width: 500px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
main {
    padding: 40px 0;
}
section {
    background: var(--main-white);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(30,58,92,0.06);
    margin-bottom: 32px;
    padding: 32px 0;
}
section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
section img {
    width: 100%;
    max-width: 400px;
    display: block;
    margin: 20px auto;
    border-radius: 8px;
}
section ul {
    padding-right: 20px;
}
form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 400px;
    margin: 0 auto;
}
form input, form textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
}
form button {
    background: #1e3a5c;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.2s;
}
form button:hover {
    background: none !important;
    color: #1e3a5c;
}
.footer-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
}
.footer-links {
    margin-bottom: 10px;
}
.footer-links a {
    color: #1e3a5c;
    text-decoration: none;
    margin: 0 8px;
    font-weight: bold;
}
.footer-links a:hover {
    color: #ffd700;
}
.footer-social {
    margin-bottom: 10px;
}
.footer-social a img {
    width: 28px;
    height: 28px;
    margin: 0 5px;
    vertical-align: middle;
}
footer p {
    color: #1e3a5c;
    font-size: 1em;
    margin: 0;
}
.whatsapp-float {
    position: fixed;
    right: 48px;
    bottom: 48px;
    z-index: 5000 !important;
    background: #25d366;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 14px;
    border: 6px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.2s, transform 0.2s;
}
.whatsapp-float img {
    width: 48px;
    height: 48px;
    display: block;
}
.whatsapp-float:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    transform: scale(1.08);
}
@media (max-width: 1000px) {
    .header-flex {
        flex-direction: column;
        gap: 10px;
        min-height: 100px;
        padding: 0 1vw;
    }
    .logo img {
        width: 56px;
        height: 56px;
    }
    .logo h1 {
        font-size: 1.2em;
    }
    .main-nav {
        gap: 12px;
    }
}
@media (max-width: 800px) {
    .header-flex, .footer-flex {
        flex-direction: column;
        gap: 10px;
    }
    .main-nav {
        flex-direction: column;
        gap: 10px;
    }
    .banner h2 {
        font-size: 2em;
    }
    #lang-toggle {
        top: 10px;
        left: 5px;
        padding: 6px 12px;
        font-size: 1em;
    }
    body[lang="en"] #lang-toggle {
        right: 5px;
    }
    .header-flex {
        min-height: 80px;
    }
}
@media (max-width: 600px) {
    body {
        padding-bottom: 70px;
    }
    .whatsapp-float {
        right: 18px;
        bottom: 18px;
        padding: 10px;
        border-width: 6px;
    }
    .whatsapp-float img {
        width: 36px;
        height: 36px;
    }
}
/* دعم اللغة الإنجليزية */
body[lang="en"] {
    direction: ltr;
    text-align: left;
    font-family: 'Arial', sans-serif;
}
body[lang="en"] .header-flex {
    flex-direction: row;
}
body[lang="en"] nav {
    justify-content: flex-end;
}
body[lang="en"] .main-nav {
    flex-direction: row;
}
body[lang="en"] .main-nav > li {
    text-align: left;
}
body[lang="en"] .dropdown-content {
    right: auto;
    left: 0;
    text-align: left;
}
body[lang="en"] .logo {
    flex-direction: row;
}
body[lang="en"] .logo h1 {
    text-align: left;
}

/* ضبط القائمة الرئيسية بالإنجليزية ليكون النص في سطر واحد وبتنسيق احترافي */
body[lang="en"] .main-nav > li > a {
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    padding-left: 10px;
    padding-right: 10px;
}
body[lang="en"] .main-nav {
    gap: 40px;
}

/* ضمان نفس الضبط عند الاعتماد على html[lang] بدلاً من body[lang] */
html[lang="en"] .header-flex { flex-direction: row; }
html[lang="en"] nav { justify-content: flex-end; }
html[lang="en"] .main-nav { flex-direction: row; gap: 40px; }
html[lang="en"] .main-nav > li { text-align: left; }
html[lang="en"] .dropdown-content { right: auto; left: 0; text-align: left; }
html[lang="en"] .logo { flex-direction: row; }
html[lang="en"] .logo h1 { text-align: left; }
html[lang="en"] .main-nav > li > a {
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  padding-left: 10px;
  padding-right: 10px;
}

/* زر القائمة الجانبية (Burger Menu) */
.burger-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 3000;
    margin-left: 10px;
    margin-right: 10px;
}
.burger-menu span {
    display: block;
    width: 28px;
    height: 4px;
    margin: 4px 0;
    background: #ffd700;
    border-radius: 2px;
    transition: 0.3s;
}

/* إظهار زر القائمة على الشاشات الصغيرة */
@media (max-width: 900px) {
    .burger-menu {
        display: flex;
    }
    .main-nav {
        position: fixed;
        top: 0;
        /* RTL/LTR حسب اللغة */
        right: 0;
        left: auto;
        height: 100vh;
        width: 100vw; /* يغطي الشاشة بالكامل */
        background: #ffffff;
        flex-direction: column !important;
        align-items: center; /* وسط العناصر */
        gap: 12px;
        padding: 120px 16px 24px 16px; /* مساحة للشعار وأزرار اللغة */
        box-shadow: 0 0 0 rgba(0,0,0,0);
        transform: translateY(-100%); /* يخفي لأعلى */
        transition: transform 0.3s;
        z-index: 2500;
        opacity: 1;
        pointer-events: none;
        display: flex; /* يحافظ على التخطيط ويمنع إعادة الحساب عند الفتح */
    }
    .main-nav.open {
        right: 0; left: 0; width: 100vw;
        transform: translateY(0); /* إظهار كامل الشاشة */
        pointer-events: auto;
    }
    /* شعار أعلى القائمة لصفحات الجوال - يظهر داخل رأس الصفحة وليس ضمن UL */
    .mobile-menu-header { display: none; }
    .main-nav.open ~ .mobile-menu-header { display: flex; }
    /* دعم RTL */
    body[lang="ar"] .main-nav {
        right: auto;
        left: 0;
        box-shadow: 2px 0 12px rgba(30,58,92,0.10);
    }
    body[lang="ar"] .main-nav.open {
        transform: translateX(0);
    }
    body[lang="en"] .main-nav {
        right: 0;
        left: auto;
        box-shadow: -2px 0 12px rgba(30,58,92,0.10);
    }
    body[lang="en"] .main-nav.open {
        transform: translateX(0);
    }
    .main-nav > li { width: 100%; text-align: center; margin: 0; border: none; }
    .main-nav > li > a {
        width: 100%;
        padding: 12px 0;
        font-size: 1.25em;
        font-weight: 800;
        letter-spacing: .2px;
        color: #1E3557 !important;
        justify-content: center;
    }
    nav {
        flex: unset;
    }
}

/* تحسين العرض داخل القائمة على الجوال حسب اللغة */
@media (max-width: 900px) {
  html[lang="ar"] .main-nav { right: auto; left: 0; }
  html[lang="ar"] .main-nav > li > a { padding: 16px 20px 16px 16px; text-align: right; }
  html[lang="en"] .main-nav { right: 0; left: auto; }
  html[lang="en"] .main-nav > li > a { padding: 16px 16px 16px 20px; text-align: left; }
  /* إظهار شريط الجوال فقط عند فتح القائمة */
  .main-nav.open ~ .mobile-header-bar,
  .mobile-header-bar { display: flex; }
}

/* إبراز أول وآخر عنصر وتحسين التفاعل */
@media (max-width: 900px) {
  .main-nav > li:first-child > a { border-top: 1px solid #e9eef5; }
  .main-nav > li > a:hover { background: #f5f8fc; color: #0b2a4a !important; }
}

/* إظهار زر اللغة فوق القائمة الجانبية على الجوال */
@media (max-width: 900px) {
  #lang-toggle { position: fixed; top: 12px; left: 12px; right: auto; z-index: 4002; }
  /* شريط شعار صغير أعلى القائمة للشكل الاحترافي */
  .mobile-header-bar {
    position: fixed; top: 0; left: 0; right: 0; height: 70px;
    background: linear-gradient(90deg, var(--main-blue) 0%, var(--main-blue-light) 50%, var(--main-gold) 100%);
    display: none; align-items: center; justify-content: center; gap: 10px;
    z-index: 4001; box-shadow: 0 2px 12px rgba(0,0,0,.15);
    transition: display 0.2s, opacity 0.2s;
  }
  .main-nav.open ~ .mobile-header-bar { display: flex; }
  .mobile-header-bar img { width: 48px; height: 48px; border-radius: 50%; background:#fff; border: 2px solid #ffd700; }
  .mobile-header-bar .brand { color:#fff; font-weight:900; font-size:1.05em; white-space:nowrap; }
}

/* إخفاء القائمة الرئيسية على الجوال إلا إذا كانت مفتوحة */
@media (max-width: 900px) {
    .main-nav {
        display: none;
            display: inline-block;
    .main-nav.open {
        display: flex;
    }
    .logo h1 {
        display: block !important;
        opacity: 1 !important;
        color: #fff !important;
        text-shadow: 0 2px 8px var(--main-blue-light) !important;
    }
}

/* خلفية شفافة عند فتح القائمة الجانبية - مطابق لعنصر #menu-overlay في HTML */
#menu-overlay {
    display: none;
    }
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(30,58,92,0.45);
    z-index: 900;
    transition: opacity 0.3s;
    pointer-events: none;
}
#menu-overlay.active {
    display: block;
    pointer-events: none;
}
.main-nav.open {
    z-index: 1000 !important;
}

/* زر burger menu متحرك */
.burger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
    background: #fff;
}
.burger-menu.active span:nth-child(2) {
    opacity: 0;
}
.burger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
    background: #fff;
}

/* تحسين محاذاة الشعار وزر القائمة على الجوال */
@media (max-width: 900px) {
    .header-flex {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0;
        min-height: 60px;
        padding: 0 10px;
    }
    .logo {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }
    .logo img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    }
    .logo h1 {
        font-size: 1.1em;
        color: #ffd700;
        margin: 0;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }
}

/* زر تغيير اللغة داخل القائمة الجانبية على الجوال */
@media (max-width: 900px) {
    .main-nav.open + #lang-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 1.2em;
    background: none !important;
        color: #1e3a5c;
        font-weight: bold;
        border-radius: 25px;
        box-shadow: 0 2px 8px rgba(30,58,92,0.15);
        padding: 12px 24px;
        border: none;
        transition: background 0.2s, color 0.2s;
    }
    .main-nav.open + #lang-toggle:hover {
        background: #fff;
        color: #1e3a5c;
    }
    .lang-icon {
        font-size: 1.3em;
        margin-right: 6px;
        margin-left: 0;
        display: inline-block;
    }
    body[lang="ar"] .lang-icon {
        margin-right: 0;
        margin-left: 6px;
    }
}

/* زر اللغة يظهر دائمًا في الهيدر حتى على الجوال */
#lang-toggle {
    display: flex !important;
    align-items: center;
    gap: 7px;
    background: none !important;
    color: var(--main-blue);
    font-weight: bold;
    border-radius: 25px 0 25px 0;
    box-shadow: 0 2px 8px rgba(30,58,92,0.13);
    padding: 10px 26px;
    border: none;
    font-size: 1.1em;
    cursor: pointer;
    margin-left: 18px;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    position: relative;
    overflow: hidden;
    z-index: 3001;
}
@media (max-width: 900px) {
    #lang-toggle {
        font-size: 1em;
        padding: 8px 14px;
        margin-left: 8px;
        margin-right: 0;
        position: static;
        width: auto;
        max-width: unset;
        display: flex !important;
    }
    .main-nav.open + #lang-toggle {
        position: static;
        width: auto;
        max-width: unset;
        display: flex !important;
    }
}

@media (max-width: 900px) {
    .header-flex {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        min-height: 56px;
        padding: 0 8px;
        width: 100vw;
        overflow-x: visible;
    }
    .logo {
        flex-shrink: 0;
        gap: 8px;
    }
    .logo img {
        width: 40px;
        height: 40px;
    }
    .logo h1 {
        font-size: 1em !important;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #lang-toggle {
        min-width: 70px;
        max-width: 110px;
        white-space: nowrap;
        flex-shrink: 0;
        margin-left: 4px;
        margin-right: 0;
        font-size: 0.95em;
        padding: 7px 10px;
    }
    .burger-menu {
        margin-left: 4px;
        margin-right: 0;
        flex-shrink: 0;
        width: 34px;
        height: 34px;
    }
    .burger-menu span {
        width: 22px;
        height: 3px;
        margin: 3px 0;
    }
    .main-nav {
        top: 0;
        left: 0;
        right: auto;
        width: 80vw;
        min-width: 180px;
        max-width: 320px;
        padding: 70px 10px 20px 10px;
        font-size: 1em;
    }
    .main-nav > li > a {
        font-size: 1em;
        padding: 14px 0;
    }
}

@media (max-width: 430px) {
    .logo h1 {
        display: block !important;
        font-size: 0.85em !important;
        max-width: 80px;
        color: #fff !important;
        opacity: 1 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .logo img {
        width: 32px;
        height: 32px;
    }
    .header-flex {
        min-height: 44px;
        padding: 0 2px;
    }
    #lang-toggle {
        font-size: 0.85em;
        padding: 5px 6px;
        min-width: 50px;
        max-width: 80px;
    }
    .burger-menu {
        width: 26px;
        height: 26px;
    }
    .burger-menu span {
        width: 15px;
        height: 2px;
        margin: 2px 0;
    }
    .main-nav {
        padding: 50px 4px 10px 4px;
        font-size: 0.95em;
    }
}

section h2 {
    color: var(--main-blue);
    border-right: none;
    padding-right: 16px;
    background: none !important;
    border-radius: 0 12px 12px 0;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(255,152,0,0.08);
}
.service-gallery img {
    border: none;
    border-radius: 18px;
    margin: 8px 0;
    background: var(--main-white);
    box-shadow: 0 2px 12px rgba(30,58,92,0.10);
}

/* أزرار موحدة بألوان الشعار */
.main-btn, button, .main-btns-horizontal a {
    font-family: inherit;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: none !important;
    color: #fff !important;
    border-radius: 30px;
    padding: 12px 32px;
    font-size: 1.1em;
    box-shadow: 0 2px 10px var(--main-blue-light)08;
    border: none;
    margin: 0 6px;
    text-decoration: none;
    display: inline-block;
    transition: background 0.3s, color 0.3s, transform 0.2s;
}
.main-btn:hover, .main-btns-horizontal a:hover, button:hover {
    background: none !important;
    color: var(--main-blue) !important;
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 6px 24px var(--main-blue-light)13;
}

/* عرض النص حسب لغة html[lang] فقط */
.ar { display: none !important; }
.en { display: none !important; }
html[lang="ar"] .ar { display: inline !important; }
html[lang="en"] .en { display: inline !important; }


/* صور الخدمات - توحيد المقاسات والريسبونسف */
.services-section img,
#general-contracting img,
#project-management img,
#equipment-rental img,
#design-execution img {
  display: block;
  width: 100%;
  max-width: 370px;
  height: 220px;
  object-fit: cover;
  border-radius: 16px;
  margin: 0 auto 18px auto;
  box-shadow: 0 2px 12px rgba(30,58,92,0.10);
  transition: box-shadow 0.3s;
}

@media (max-width: 700px) {
  .services-section img,
  #general-contracting img,
  #project-management img,
  #equipment-rental img,
  #design-execution img {
    max-width: 98vw;
    height: 140px;
    border-radius: 10px;
  }
}

@media (max-width: 480px) {
  .services-section img,
  #general-contracting img,
  #project-management img,
  #equipment-rental img,
  #design-execution img {
    height: 90px;
    border-radius: 7px;
  }
}

/* تأثير hover احترافي للصور */
.services-section img:hover,
#general-contracting img:hover,
#project-management img:hover,
#equipment-rental img:hover,
#design-execution img:hover {
  box-shadow: 0 6px 24px rgba(30,58,92,0.18);
}

/* معرض صور الأعمال الميدانية والكهربائية */
/* بنر الأعمال الميدانية والكهربائية بعرض كامل */
section#civil-work, section#electrical-work {
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
    background: none !important;
  box-shadow: 0 2px 12px #0001;
  padding: 0;
  border: none;
  z-index: 1;
}
section#civil-work .container, section#electrical-work .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 0 28px 0;
  border: none;
}
@media (max-width: 900px) {
  section#civil-work, section#electrical-work {
    padding: 0;
    margin-left: -50vw;
    margin-right: -50vw;
  }
  section#civil-work .container, section#electrical-work .container {
    padding: 18px 0 18px 0;
  }
}

/* صور الأعمال الميدانية والكهربائية تغطي البنر بالكامل */
section#civil-work .service-gallery,
section#electrical-work .service-gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  justify-content: center;
  align-items: stretch;
  width: 100vw;
  margin: 0;
  padding: 0;
  background: none;
}
section#civil-work .service-gallery img,
section#electrical-work .service-gallery img {
  width: 50vw;
  max-width: 100%;
  min-width: 0;
  height: 340px;
  min-height: 180px;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
    background: none !important;
  display: block;
  border: none;
}
@media (max-width: 900px) {
  section#civil-work .service-gallery img,
  section#electrical-work .service-gallery img {
    height: 180px;
  }
}
@media (max-width: 700px) {
  section#civil-work .service-gallery,
  section#electrical-work .service-gallery {
    flex-direction: column;
    width: 100vw;
  }
  section#civil-work .service-gallery img,
  section#electrical-work .service-gallery img {
    width: 100vw;
    height: 120px;
  }
}
@media (max-width: 480px) {
  section#civil-work .service-gallery img,
  section#electrical-work .service-gallery img {
    height: 70px;
  }
}

/* سلايدر صور للأعمال الميدانية والكهربائية */
.slider-gallery {
  position: relative;
  width: 100vw;
  max-width: 700px;
  margin: 0 auto 18px auto;
  overflow: hidden;
  border-radius: 16px;
    background: none !important;
  box-shadow: 0 2px 12px rgba(30,58,92,0.10);
}
.slider-gallery img {
  width: 100vw;
  max-width: 700px;
  height: 340px;
  object-fit: cover;
  display: none;
  transition: opacity 0.5s;
  border-radius: 16px;
}
.slider-gallery img.active {
  display: block;
  opacity: 1;
}
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.7);
  border: none;
  font-size: 2em;
  color: #b48a00;
  cursor: pointer;
  z-index: 2;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.slider-btn:hover {
    background: none !important;
  color: #fff;
}
.slider-btn.prev {
  left: 12px;
}
.slider-btn.next {
  right: 12px;
}
@media (max-width: 900px) {
  .slider-gallery, .slider-gallery img {
    max-width: 98vw;
    height: 180px;
  }
}
@media (max-width: 700px) {
  .slider-gallery, .slider-gallery img {
    max-width: 100vw;
    height: 120px;
  }
}
@media (max-width: 480px) {
  .slider-gallery, .slider-gallery img {
    height: 70px;
  }
}

/* تأثيرات حركة هادئة وتنسيق احترافي لجميع الصفحات */

body {
    font-family: 'Cairo', Arial, sans-serif;
    background: none !important;
    margin: 0;
    color: var(--main-blue);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.section-title {
    color: #1a237e;
    font-size: 2em;
    margin-bottom: 24px;
    text-align: center;
    letter-spacing: 1px;
}

/* تأثيرات الحركة */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s cubic-bezier(.4,0,.2,1), transform 1.2s cubic-bezier(.4,0,.2,1);
}
.fade-in.visible {
    opacity: 1;
    transform: none;
}
.slide-in {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 1.2s cubic-bezier(.4,0,.2,1), transform 1.2s cubic-bezier(.4,0,.2,1);
}
.slide-in.visible {
    opacity: 1;
    transform: none;
}

/* البانر */
.banner img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.banner .main-btn {
    background: none !important;
    color: #fff;
    padding: 14px 38px;
    font-size: 1.2em;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}
.banner .main-btn:hover {
    background: #b48a00;
}

/* الخدمات */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 28px;
}
.service-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px #0001;
    padding: 28px 18px;
    text-align: center;
    transition: transform 0.5s cubic-bezier(.4,0,.2,1), box-shadow 0.5s cubic-bezier(.4,0,.2,1);
}
.service-card:hover {
    transform: scale(1.045);
    box-shadow: 0 6px 24px #0002;
}
.service-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 14px 14px 0 0;
    margin-bottom: 18px;
    box-shadow: none;
}

/* من نحن */
.about-section {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px #0001;
    padding: 36px 24px;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}
.about-section img {
    width: 320px;
    max-width: 100%;
    border-radius: 16px;
    box-shadow: 0 2px 12px #0001;
}

/* سابقة الأعمال */
.clients-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 36px;
    justify-content: center;
    align-items: center;
}
.clients-logos img {
    width: 120px;
    height: 80px;
    object-fit: contain;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 6px #0001;
    transition: filter 0.3s, opacity 0.3s;
    filter: grayscale(1);
    opacity: 0.7;
}
.clients-logos img:hover {
    filter: none;
    opacity: 1;
}

/* آراء العملاء */
.testimonials-list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}
.testimonial {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 22px 18px;
    width: 320px;
    box-shadow: 0 1px 4px #0001;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform 0.5s cubic-bezier(.4,0,.2,1), box-shadow 0.5s cubic-bezier(.4,0,.2,1);
}
.testimonial:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 16px #0002;
}
.testimonial img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 1px 4px #0002;
}

/* تواصل معنا */
.contact-section {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px #0001;
    padding: 36px 24px;
    max-width: 600px;
    margin: 0 auto 32px auto;
}
.contact-section form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.contact-section input, .contact-section textarea {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 1em;
}
.contact-section button {
    align-self: flex-end;
}

/* فوتر */
footer {
    background: linear-gradient(90deg, var(--main-blue) 0%, var(--main-blue-light) 40%, var(--main-gold) 80%, var(--main-gold-light) 100%);
    color: #fff;
    padding: 32px 0 16px 0;
}
.footer-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}
.footer-links a {
    color: #fff;
    margin: 0 8px;
    text-decoration: none;
}
.footer-links a:hover {
    text-decoration: underline;
}
.footer-social a img {
    height: 28px;
    margin: 0 6px;
}

@media (max-width: 900px) {
    .about-section {flex-direction: column; gap: 18px;}
    .footer-flex {flex-direction: column; gap: 12px;}
}
@media (max-width: 700px) {
    .services-grid {grid-template-columns: 1fr;}
    .testimonials-list {flex-direction: column;}
    .banner img {height: 220px;}
}
/* --- نهاية ملف CSS --- */

/* تنسيقات البانر الرئيسي الجديد */
.hero-banner {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 60px;
    padding: 24px;
    z-index: 0;
}

@media (max-width: 600px) {
    .hero-banner {
        height: auto !important;
        min-height: unset !important;
        padding-bottom: 24px;
        box-sizing: border-box;
    }
    .banner-content {
        height: auto !important;
        min-height: unset !important;
        padding-bottom: 0;
    }
}

/* منع امتداد الظلال أسفل الهيرو */
.hero-content { box-shadow: none; }
.hero-overlay { pointer-events: none; z-index: -1; }

/* رفع أقسام البنرات وفصل أكبر لأول قسم بعد الهيرو */
.service-banner { z-index: 1000; position: relative; isolation: isolate; }
.service-banner:first-of-type { margin-top: 140px; }

.hero-content { color: #fff; text-align: center; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.hero-panel { background: rgba(10,35,60,0.78); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 24px 60px rgba(0,0,0,0.35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border-radius: 18px; padding: 36px 48px; max-width: 980px; width: min(92vw, 980px); }
.hero-title, .hero-subtitle { color: #fff !important; }

.hero-title {
  font-size: 3.8em; /* كبير وواضح في الأعلى */
  font-weight: 900;
  margin-bottom: 20px;
  text-shadow: 0 5px 22px rgba(0,0,0,0.9), 0 2px 10px rgba(0,0,0,0.6);
  line-height: 1.25;
}

.hero-subtitle {
  font-size: 1.4em; /* أصغر من العنوان */
  margin-bottom: 10px;
  text-shadow: 0 4px 16px rgba(0,0,0,0.8), 0 2px 8px rgba(0,0,0,0.5);
  line-height: 1.9;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.hero-desc { font-size: 1.02em; line-height: 2; color: #e6eef9; margin: 0 auto 0 auto; max-width: 880px; }

.hero-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}

.btn-primary, .btn-secondary {
  padding: 16px 32px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1em;
  transition: all 0.3s ease;
  display: inline-block;
  min-width: 180px;
  text-align: center;
}

.btn-primary {
  background: var(--main-gold);
  color: var(--main-blue) !important;
  box-shadow: 0 4px 20px rgba(255, 152, 0, 0.3);
}

.btn-primary:hover {
  background: #ff9800;
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(255, 152, 0, 0.4);
}

.btn-secondary {
  background: transparent;
  color: white !important;
  border: 2px solid white;
}

.btn-secondary:hover {
  background: white;
  color: var(--main-blue) !important;
  transform: translateY(-3px);
}

/* تنسيقات قسم الخدمات الجديد */
.services-section {
  padding: 80px 0;
  background: #f8f9fa;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-title {
  font-size: 2.5em;
  font-weight: 900;
  color: var(--main-blue);
  margin-bottom: 20px;
}

.section-subtitle {
  font-size: 1.2em;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.service-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  border: 1px solid #e0e7ef;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
  border-color: var(--main-gold);
}

.service-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.service-card:hover .service-image img {
  transform: scale(1.05);
}

.service-content {
  padding: 30px 25px;
  text-align: center;
}

.service-icon {
  font-size: 2.5em;
  margin-bottom: 15px;
  color: var(--main-gold);
}

.service-title {
  font-size: 1.3em;
  font-weight: 700;
  color: var(--main-blue);
  margin-bottom: 15px;
  line-height: 1.3;
}

.service-desc {
  color: #666;
  font-size: 1em;
  line-height: 1.6;
  margin-bottom: 0;
}

/* تنسيقات المدير التنفيذي */
.ceo-signature {
  font-style: italic;
  font-weight: 600;
  margin-top: 20px;
  font-size: 1.1em;
  text-align: center;
}

/* التجاوب للجوال */
@media (max-width: 768px) {
  .hero-content { padding: 18px; margin: 0 10px; }
  .hero-panel { padding: 22px 18px; width: 94vw; }
  .hero-title { font-size: 2.4em; }
  .hero-subtitle { font-size: 1.1em; }
  .hero-desc { font-size: 0.98em; margin-bottom: 18px; }
  
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .btn-primary, .btn-secondary {
    width: 100%;
    max-width: 280px;
  }
  
  .services-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 15px;
  }
  
  .section-title {
    font-size: 2em;
  }
  
  .service-content {
    padding: 25px 20px;
  }
}

@media (max-width: 480px) {
  .hero-title { font-size: 1.9em; }
  .hero-subtitle { font-size: 1.05em; }
  .section-title { font-size: 1.8em; }
}

.service-banner {
  position: relative;
  width: 100vw;
  min-width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: 380px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start; /* يسار */
  padding: 24px;
  box-shadow: 0 4px 24px #0002;
  border-radius: 0;
  margin-top: 24px;  /* تقليل الهوامش */
  margin-bottom: 24px; /* تقليل الهوامش */
  z-index: 1;
}
@media (max-width: 900px) {
  .service-banner {
    height: 340px;
    align-items: center;
    justify-content: center;
    padding: 14px;
    margin-top: 18px; margin-bottom: 18px;
  }
}
.service-banner-content {
  position: relative; z-index: 2;
  background: rgba(0,0,0,0.82);
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
  border-radius: 18px;
  padding: 26px 28px;
  text-align: left;
  max-width: min(90vw, 720px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.30);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255,255,255,0.18);
  margin-left: 0;
  margin-right: auto;
}
@media (max-width: 900px) {
  .service-banner-content {
    text-align: center;
    margin: 0 auto; /* وسط على الجوال */
  }
}
.service-banner-content h2,
.service-banner-content h2.ar,
.service-banner-content h2.en {
  order: 0;
  color: #fff !important;
  font-size: 2.2em !important;
  text-shadow: 0 4px 16px rgba(0,0,0,0.8) !important;
  font-weight: 700;
  margin: 0 0 16px 0;
  letter-spacing: 0.5px;
}
.service-banner-content p,
.service-banner-content .section-subtitle {
  order: 1;
  color: #fff !important;
  text-shadow: 0 3px 12px rgba(0,0,0,0.7) !important;
  font-size: 1.15em;
  font-weight: 400;
  line-height: 1.95;
  margin: 0 0 10px 0;
}
.service-banner-content ul {
  order: 2;
  margin-top: 6px;
}
@media (max-width: 900px) {
  .service-banner-content h2 {
    font-size: 1.6em !important;
    margin-bottom: 16px;
  }
  .service-banner-content p {
    font-size: 1.05em !important;
    line-height: 1.6;
  }
  .service-banner-content ul li {
    font-size: 1em !important;
    margin-bottom: 6px;
  }
}
section.divider {
  width: 80%;
  height: 2px;
  background: #e0e0e0;
  margin: 56px auto;
  border-radius: 2px;
  border: none;
}

/* تنظيم عرض قائمة لماذا نحن */
#why-us, section .why-us, .whyus-section, .service-banner .whyus-list { /* دعم احتمالات */ }
.service-banner-content ul {
  list-style: disc inside;
  padding: 0 0 0 10px;
  margin: 10px 0 0 0;
}
.service-banner-content ul.ar { direction: rtl; text-align: right; }
.service-banner-content ul.en { direction: ltr; text-align: left; }
.service-banner-content ul li {
  margin: 6px 0;
  line-height: 1.9;
}
/* شبكة نقطية مرتبة على الشاشات الواسعة */
@media (min-width: 1000px) {
  .service-banner-content ul {
    columns: 2; /* عمودان */
    column-gap: 28px;
  }
}

/* فرض لون أبيض واضح داخل البانر الرئيسي وبنرات الأقسام */
.hero-content *,
.service-banner-content *,
.hero-content a,
.service-banner-content a {
  color: #fff !important;
}
/* روابط داخل البنرات عند التحويم */
.hero-content a:hover,
.service-banner-content a:hover {
  color: #ffd700 !important;
}
/* تحسين محاذاة العربية داخل البنرات */
.hero-content { direction: rtl; }
.service-banner-content { direction: rtl; }

/* ضمان عدم تغطية الهيرو لأقسام البنرات التالية */
.service-banner {
  position: relative;
  z-index: 1000; /* أعلى من الهيرو والطبقات */
  isolation: isolate; /* سياق تكديس مستقل */
}
.service-banner-content { position: relative; z-index: 1; }
/* طبقة الهيرو تبقى أدنى */
.hero-banner { z-index: 0; isolation: isolate; }
.hero-overlay { z-index: -1; pointer-events: none; }

/* إصلاح الفراغات في صفحة الخدمات بين الصور (إلغاء خلفية وحشوة الأقسام الحاوية) */
section#general-contracting,
section#project-management,
section#equipment-rental,
section#design-execution {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important; /* مسافة بسيطة أسفل كل قسم */
  box-shadow: none !important;
  border: none !important;
}
/* منع أي مسافة زائدة بعد البانر في أعلى الصفحة */
.banner + main section#general-contracting { margin-top: 0 !important; }

/* زيادة التباعد بين صور أقسام الخدمات */
section#general-contracting .service-banner,
section#project-management .service-banner,
section#equipment-rental .service-banner,
section#design-execution .service-banner {
  margin: 48px 0 !important;
}

/* إظهار النص كاملاً داخل البنرات */
.service-banner-content {
  max-width: min(95vw, 920px); /* مساحة أعرض لاحتواء النص */
  overflow: visible !important;
}
.service-banner-content h2,
.service-banner-content p,
.service-banner-content ul,
.service-banner-content li {
  white-space: normal !important; /* السماح بلف الأسطر */
  overflow: visible !important;
  text-overflow: clip !important;
}
/* للغة العربية داخل الخدمات */
section#general-contracting .service-banner-content,
section#project-management .service-banner-content,
section#equipment-rental .service-banner-content,
section#design-execution .service-banner-content {
  direction: rtl;
  text-align: right;
}

@media (max-width: 900px) {
  .main-nav {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .main-nav > li.mobile-header-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(90deg, var(--main-blue) 0%, var(--main-blue-light) 50%, var(--main-gold) 100%);
    height: 73px;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    border-bottom: 1px solid #fff2;
    box-shadow: 0 2px 10px #7772;
  }
  .main-nav > li.mobile-header-bar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #ffd700;
    object-fit: cover;
  }
  .main-nav > li.mobile-header-bar .brand {
    color: #fff;
    font-weight: 900;
    font-size: 1.1em;
    white-space: nowrap;
    letter-spacing: 2px;
    text-shadow: 0 2px 8px #1118;
  }
  .main-nav > li.mobile-lang {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    margin-bottom: 18px;
    margin-top: 0;
    border-bottom: 1px solid #eee4;
    padding: 10px 0;
  }
  .main-nav > li.mobile-lang #lang-toggle {
    display: flex !important;
    font-size: 1.15em;
    padding: 10px 30px;
    background: #fff;
    color: #1e3a5c;
    font-weight: bold;
    border-radius: 25px;
    box-shadow: 0 2px 8px rgba(30,58,92,0.08);
    border: none;
    gap: 10px;
    align-items: center;
    transition: background 0.2s, color 0.2s;
  }
  .main-nav > li.mobile-lang #lang-toggle .lang-icon {
    font-size: 1.35em;
    margin-left: 6px;
    margin-right: 0;
  }
  .main-nav > li:not(.mobile-header-bar):not(.mobile-lang) {
    width: 100%;
    text-align: center;
    padding: 0;
  }
}
@media (min-width:901px){
  .main-nav > li.mobile-header-bar,
  .main-nav > li.mobile-lang {display:none !important;}
}

@media (max-width:900px) {
  #lang-toggle {
    display: block;
    max-width: 220px;
    margin: 16px auto 22px auto;
    padding: 18px 24px;
    text-align: center;
    position: static !important;
    font-size: 1.26em !important;
    z-index: 1;
    box-shadow: 0 0 8px #005b9322;
    background: #fff !important;
    color: #1e3a5c !important;
    border-radius: 18px;
  }
  .main-nav + #lang-toggle {
    /* زيادة المسافة بعد القائمة في القائمة الجانبية */
    margin-top: 16px;
  }
}

@media (max-width:900px) {
  #lang-toggle-desktop {display:none !important;}
  .mobile-lang {display: block !important;}
  .mobile-lang #lang-toggle {
    display: block;
    max-width: 220px;
    margin: 16px auto 22px auto;
    padding: 18px 24px;
    text-align: center;
    font-size: 1.23em !important;
    box-shadow: 0 0 8px #005b9322;
    background: #fff !important;
    color: #1e3a5c !important;
    border-radius: 18px;
  }
}
@media (min-width:901px) {
  .mobile-lang {display:none !important;}
  #lang-toggle-desktop {display:flex !important; align-items:center; margin-left:16px; margin-right:8px;}
}