/* style.css - النسخة النهائية المحدثة */
:root {
    --brand-green: #1e3325;
    --brand-gold: #cfa558;
    --brand-gold-hover: #b38f4a;
    --bg-light: #fdfbf7;
}
* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }
body {
    font-family: 'Cairo', sans-serif;
    background-color: var(--bg-light);
    color: var(--brand-green);
    overflow-x: hidden;
}
.bg-pattern {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(rgba(30, 51, 37, 0.05) 1px, transparent 1px), 
                      linear-gradient(90deg, rgba(30, 51, 37, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: -1;
    pointer-events: none;
}
.menu-toggle {
    display: none; /* مخفي في الكمبيوتر */
    font-size: 1.8rem;
    color: var(--brand-gold);
    cursor: pointer;
    z-index: 1001;
    padding: 10px;
}
@media (max-width: 768px) {
    .menu-toggle { 
        display: block; 
    }
    .nav-menu {
        display: flex; /* إجبارها على الظهور */
        flex-direction: column;
        position: fixed;
        top: 80px; /* تظهر أسفل الهيدر مباشرة */
        left: -100%; /* مخفية خارج الشاشة جهة اليسار */
        width: 100%;
        height: calc(100vh - 80px); /* تغطي باقي الشاشة */
        background: rgba(30, 51, 37, 0.98); /* خلفية خضراء داكنة */
        backdrop-filter: blur(15px);
        align-items: center;
        justify-content: flex-start;
        padding-top: 60px;
        transition: 0.4s ease-in-out; /* حركة ناعمة */
        z-index: 999;
    }
    .nav-menu.active {
        left: 0; /* تحريك القائمة لداخل الشاشة */
    }
    .nav-menu a {
        font-size: 1.5rem;
        margin: 20px 0;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid rgba(207, 165, 88, 0.1);
        padding-bottom: 15px;
    }
    .nav-menu a:hover {
        color: #fff;
    }
}
/* --- Header --- */
header {
    position: absolute;
    top: 27px; /* حسب تعديلك */
    left: 0;
    width: 100%;
    height: 65px;
    background-color: var(--brand-green, #1e3325) !important;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    overflow: visible; /* ضروري جداً للأذنين والذيل */
}
.logo-container {
    position: relative;
    top: 0;
    width: 180px; /* العرض الكلي للدرع */
    height: 230px; /* الارتفاع الكلي للدرع */
    z-index: 1001;
    display: flex;
    /* هذا الجزء يضمن توسط العناصر داخله */
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    overflow: visible;
}
.logo-container::before {
    content: '';
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    z-index: 2;
    height: 60%;
        background: linear-gradient(180deg, #dcb768 0%, #b38f4a 100%);
        clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
    z-index: -1; /* خلف النص */
}
.logo-container::after {
    content: '';
    position: absolute;
    top: 71px;
    left: -20px;
    right: -15px;
    height: 17px;
    background: #855900;
    clip-path: polygon(8% 0, 94% 0, 100% 100%, 2% 100%);
    z-index: -10;
    border-radius: 4px 4px 0 0;
}
.logo {display: flex;align-items: center;justify-content: flex-end;width: 100%;height: 65%;z-index: 5;margin-top: 0;flex-direction: column;}

/* تنسيق الصورة لتظهر بكامل حجمها في المنتصف */
.logo img {
    max-width: 60%; /* يسمح لها بأخذ العرض المتاح مع ترك مسافة بسيطة */
    /* max-height: 100px; */ /* يمكنك زيادة هذا الرقم إذا أردت الشعار أكبر */
    height: auto;
    width: auto;
    object-fit: contain; /* يضمن عدم تشوه أبعاد الشعار */
    /* filter: brightness(0) invert(1);  */
}

/* --- بقية ستايلات القائمة (كما هي) --- */
.nav-menu { 
    flex-grow: 1;
    display: flex; 
    list-style: none; 
    flex-direction: row; 
    align-items: center;
    justify-content: flex-end; 
    padding-left: 20px;
    gap: 30px; 
}
.nav-menu a { 
    text-decoration: none; 
    color: #fff; 
    font-size: 0.95rem; 
    font-weight: 400; 
    transition: 0.3s;
    white-space: nowrap;
}
.nav-menu a:hover { color: var(--brand-gold, #dcb768); }

.header-extras { display: flex; align-items: center; gap: 15px; }
.header-social {
    display: flex; gap: 20px; margin-right: 15px; padding-right: 15px;
    border-right: 1px solid rgba(255,255,255,0.15); align-items: center;
}
.header-social a { color: #fff; font-size: 1rem; transition: transform 0.2s; }
.header-social a:hover { color: var(--brand-gold, #dcb768); transform: translateY(-2px); }
.extra-header-img { height: 35px; width: auto; }
.menu-toggle { display: none; color: #fff; font-size: 1.5rem; cursor: pointer; }

@media (max-width: 992px) {
    header { height: 60px; padding: 0 15px; overflow: hidden; top: 0; }
    .logo-container { 
        width: auto; min-width: auto; height: 100%; 
        background: transparent; clip-path: none; margin-right: 0; padding-bottom: 0; filter: none;
    }
    .logo-container::before, .logo-container::after { display: none; }
    .logo img { max-height: 35px; margin-bottom: 0;
 }
    .menu-toggle { display: block; }
    .nav-menu {
        position: absolute; top: 60px; left: 0; width: 100%;
        background: var(--brand-green, #1e3325); flex-direction: column;
        align-items: flex-start; padding: 20px; display: none; 
    }
    .nav-menu.active { display: flex; }
    .header-social { width: 100%; justify-content: center; border: none; margin-top: 15px; }
}
/* --- Hero Section (الرئيسية) --- */
.hero-section {
    height: 100vh; 
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 80px;
    overflow: hidden; 
}

.network-wrapper {
    position: relative;
    width: 800px;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.75); 
    transition: transform 0.3s ease; 
}

@media (max-height: 800px) { .network-wrapper { transform: scale(0.6); } }
@media (max-height: 650px) { .network-wrapper { transform: scale(0.5); } }

.orbit-circle {
    position: absolute; width: 680px; height: 680px;
    border: 1px dashed rgb(0, 0, 0); border-radius: 50%;
    animation: spin 120s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.center-hub {
    position: absolute; z-index: 20; width: 180px; height: 200px;
    background: var(--brand-green); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    color: var(--brand-gold); box-shadow: 0 0 30px rgba(0,0,0,0.2);
    transition: transform 0.3s; text-align: center; border: 2px solid var(--brand-gold);
}
.center-hub:hover { transform: scale(1.05); }
.hub-title { font-family: 'Cairo', sans-serif; font-size: 2.8rem; font-weight: bold; line-height: 1; }
.hub-subtitle { font-family: 'Cairo', sans-serif; font-size: 0.9rem; letter-spacing: 3px; margin-top: 5px; color: #fff; text-transform: uppercase; }

.branch-item {
    position: absolute; width: 190px; height: 130px;
    background: #fff; border: 2px solid var(--brand-gold); border-radius: 12px;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; text-decoration: none; color: var(--brand-green);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); transition: all 0.3s ease; z-index: 50;
}

.gif-stage {
    position: absolute; bottom: 100%; left: 0; width: 100%; height: 100px;
    display: flex; justify-content: center; align-items: flex-end;
    z-index: 1; pointer-events: none;
}
.gif-stage img { max-width: 90%; max-height: 100%; object-fit: contain; }

.branch-name-en { font-family: 'Cairo', sans-serif; font-weight: bold; font-size: 0.95rem; line-height: 1.2; margin-top: 5px; }
.branch-name-ar { font-size: 1.2rem; font-weight: 600; color: #666; margin-top: 2px; }

.pos-1 { transform: rotate(270deg) translate(340px) rotate(-270deg); }
.pos-2 { transform: rotate(330deg) translate(340px) rotate(-330deg); }
.pos-3 { transform: rotate(30deg) translate(340px) rotate(-30deg); }
.pos-4 { transform: rotate(90deg) translate(340px) rotate(-90deg); }
.pos-5 { transform: rotate(150deg) translate(340px) rotate(-150deg); }
.pos-6 { transform: rotate(210deg) translate(340px) rotate(-210deg); }

/* --- العناوين --- */
.section-container { width: 100%; max-width: 1200px; margin: 0 auto 30px; padding: 60px 0px 20px; }
.section-header { text-align: center; margin-bottom: 0; }
.section-header h2 { font-family: 'Cairo', sans-serif; font-size: 2.5rem; color: #1e3325; margin-bottom: 10px; }
.section-header span { display: block; font-size: 1.2rem; color: var(--brand-gold); font-weight: 600; }
.separator { width: 80px; height: 3px; background: var(--brand-gold); margin: 15px auto 0; }

/* --- الأخبار --- */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.news-card { 
    background: var(--brand-green); 
    border: 1px solid var(--brand-gold); 
    border-radius: 12px; overflow: hidden; 
    transition: transform 0.3s, box-shadow 0.3s; 
    display: flex; flex-direction: column; 
}
.news-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(30, 51, 37, 0.4); }
.news-img { width: 100%; height: 200px; background-color: #eee; position: relative; background-size: cover; background-position: center; }
.news-date { 
    position: absolute; top: 15px; left: 15px; 
    background: var(--brand-gold); color: var(--brand-green);
    padding: 5px 10px; font-size: 0.8rem; border-radius: 4px; font-family: 'Cairo', sans-serif; font-weight: bold;
}
.news-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.news-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 10px; line-height: 1.5; color: #fff; }
.news-excerpt { font-size: 0.9rem; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; color: #e0e0e0; }
.read-more { color: var(--brand-gold); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.read-more:hover { color: #fff; }

/* --- التواصل --- */
.contact-wrapper { 
    display: flex; flex-wrap: wrap; gap: 50px; background: #fff; padding: 50px; 
    border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
    border: 1px solid rgba(207, 165, 88, 0.2); 
}
.contact-info-side { flex: 1; min-width: 300px; }
.contact-info-side h3 { font-size: 1.8rem; margin-bottom: 20px; color: var(--brand-green); }
.contact-info-side p { color: #666; line-height: 1.8; margin-bottom: 30px; }
.info-item { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; }
.info-item i { color: var(--brand-gold); font-size: 1.2rem; margin-top: 5px; width: 30px; height: 30px; background: var(--brand-green); display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.info-content h4 { font-size: 1rem; color: var(--brand-green); margin-bottom: 5px; }
.info-content span { color: #555; font-size: 0.9rem; }
.contact-form-side { flex: 1.2; min-width: 300px; }
.form-group { margin-bottom: 20px; }
.form-control { width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 8px; font-family: 'Cairo', sans-serif; background: #fdfbf7; transition: 0.3s; }
.form-control:focus { outline: none; border-color: var(--brand-gold); background: #fff; }
textarea.form-control { resize: none; height: 120px; }
.submit-btn { background: var(--brand-green); color: var(--brand-gold); border: 2px solid var(--brand-green); padding: 15px 40px; font-size: 1rem; font-weight: bold; cursor: pointer; border-radius: 8px; transition: 0.3s; width: 100%; font-family: 'Cairo', sans-serif; }
.submit-btn:hover { background: var(--brand-gold); color: var(--brand-green); border-color: var(--brand-gold); }

/* --- Footer --- */
footer { background: var(--brand-green); color: #fff; padding: 40px 0; border-top: 4px solid var(--brand-gold); }
.footer-social { margin-bottom: 20px; }
.footer-social a { color: var(--brand-gold); margin: 0 10px; font-size: 1.2rem; transition: 0.3s; text-decoration: none; }
.footer-social a:hover { color: #fff; }
.copyright { font-size: 0.85rem; color: rgba(255,255,255,0.6); }

/* =========================================
   تنسيقات الصفحات الداخلية (Inner Pages)
   ========================================= */

/* --- Hero Slider --- */
.page-hero {
    position: relative; width: 100%; height: 60vh; min-height: 400px;
    background-color: var(--brand-green); overflow: hidden; margin-top: 80px;
}
.slider-container { position: relative; width: 100%; height: 100%; }
.slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1s ease-in-out;
    display: flex; align-items: center; justify-content: center;
}
.slide.active { opacity: 1; }
.slide::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(30, 51, 37, 0.6); 
}
.hero-content {
    position: relative; z-index: 2; text-align: center; color: #fff;
    padding: 20px; max-width: 800px;
}
.hero-content h1 { font-family: 'Cairo', sans-serif; font-size: 3rem; color: var(--brand-gold); margin-bottom: 15px; }
.hero-content p { font-size: 1.2rem; line-height: 1.6; }

/* --- Services Section --- */
.services-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px; margin-top: 40px;
}
.service-card {
    background: #1e3325;
    padding: 40px 30px;
    text-align: center;
    border-radius: 15px;
    border: 4px solid rgb(211 172 100);
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.service-card:hover { transform: translateY(-10px); border-color: var(--brand-gold); }
.service-icon {
    width: 80px;
    height: 80px;
    background: var(--bg-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 2rem;
    color: var(--brand-gold);
    border: 3px dashed #d3ac64;
}
.service-card h3 {color: #d3ac64;margin-bottom: 15px;font-size: 1.3rem;}
.service-card p {color: #ffffff;font-size: 0.9rem;line-height: 1.6;}

/* --- Projects Section --- */
.projects-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.project-card {
    position: relative; border-radius: 15px; overflow: hidden; height: 350px; group;
}
.project-img {
    width: 100%; height: 100%; background-size: cover; background-position: center;
    transition: transform 0.5s ease;
}
.project-card:hover .project-img { transform: scale(1.1); }
.project-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: linear-gradient(to top, rgb(0 55 18), transparent);
    padding: 30px 20px; color: #fff; transform: translateY(20px); transition: 0.3s;
}
.project-card:hover .project-overlay { transform: translateY(0); }
.project-title { font-size: 1.4rem; color: var(--brand-gold); margin-bottom: 5px; }
.project-location { display: flex; align-items: center; gap: 5px; font-size: 0.9rem; color: #ddd; }

/* --- Timeline Section (رحلة العميل) --- */
.timeline-container {
    display: flex; justify-content: space-between; position: relative;
    max-width: 1000px; margin: 50px auto; padding:  0;
}
.timeline-container::before {
    content: ''; position: absolute; top: 60px; left: 0; right: 0;
    height: 2px; background: #ddd; z-index: 0;
}
.timeline-item { position: relative; z-index: 1; text-align: center; flex: 1; padding: 0 10px; }
.timeline-icon {
    width: 80px; height: 80px; background: #fff;
    border: 2px solid var(--brand-gold); border-radius: 50%;
    margin: 0 auto 20px; display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: var(--brand-green); transition: 0.3s;
}
.timeline-item:hover .timeline-icon { background: var(--brand-gold); color: #fff; transform: scale(1.1); }
.timeline-content h3 { font-size: 1.1rem; color: var(--brand-green); margin-bottom: 10px; }
.timeline-content p { font-size: 0.85rem; color: #777; line-height: 1.5; }

/* --- Mortgage Calculator (حاسبة التمويل) --- */
.calc-wrapper {
    background: rgba(255,255,255,0.1); padding: 40px; border-radius: 20px;
    border: 1px solid rgba(207, 165, 88, 0.3);
}
.calc-row { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.calc-field { flex: 1; min-width: 200px; text-align: right; }
.calc-field label { display: block; margin-bottom: 10px; color: #ddd; }
.calc-input {
    width: 100%; padding: 15px; border-radius: 8px; border: none;
    background: #fff; color: #333; font-family: inherit; font-size: 1rem;
}
.calc-range { width: 100%; accent-color: var(--brand-gold); cursor: pointer; }
.calc-btn {
    background: var(--brand-gold); color: var(--brand-green); padding: 15px 40px;
    border: none; border-radius: 8px; font-weight: bold; cursor: pointer;
    font-size: 1.1rem; transition: 0.3s; margin-top: 20px;
}
.calc-btn:hover { background: #fff; color: var(--brand-green); }
.bgProjHome{
    background-color: #fff;
    border: solid 3px #006b2a;
    border-radius: 20px;
    padding: 60px 21px;
    background-image: url('images/bgProHome.png');
    background-position: bottom left;
    background-repeat: no-repeat;
}


/* =========================================
   تحديثات وضع الجوال (Mobile) - شامل ومدمج
   ========================================= */
@media (max-width: 768px) {
    /* Header */
    header { padding: 0; } .nav-menu { display: none; } .logo { font-size: 1.4rem; }
    
    /* Hero & Network */
    .hero-section { height: auto !important; min-height: 100vh; padding: 100px 0 60px; display: block; overflow: visible; }
    .network-wrapper { 
        width: 100%; height: auto; display: flex; flex-direction: column; 
        align-items: center; gap: 20px; transform: none !important; 
        padding: 0 15px; margin-top: 20px;
    }
    .orbit-circle { display: none; }
    
    /* Center Hub */
    .center-hub { 
        position: relative !important; top: auto !important; left: auto !important;
        transform: scale(0.8) !important; margin: 0 auto 40px auto;
        z-index: 100 !important; order: -1; display: flex !important;
    }
    
    /* Branch Items */
    .branch-item { 
        position: relative !important; transform: none !important; width: 100%; 
        height: auto; min-height: 100px; display: flex; flex-direction: row; 
        align-items: center; justify-content: space-between; gap: 15px; 
        padding: 15px 20px; text-align: right; z-index: 10;
    }
    .gif-stage { 
        position: static !important; width: 60px; height: 60px; margin: 0; 
        display: flex; align-items: center; justify-content: center;
    }
    
    /* Contact Form & Sections */
    .section-container { padding: 50px 15px; }
    .contact-wrapper { padding: 25px 15px !important; flex-direction: column-reverse; gap: 30px; width: 100%; }
    .contact-form-side, .contact-info-side { width: 100% !important; min-width: 0 !important; flex: none !important; padding: 0 !important; }
    .form-control { width: 100%; height: 50px; }
    .submit-btn { width: 100%; margin-top: 10px; }
    .news-grid { grid-template-columns: 1fr; padding: 0 10px; }
    
    /* Inner Pages Mobile */
    .page-hero { height: 50vh; margin-top: 80px; }
    .hero-content h1 { font-size: 2rem; }
    .services-grid, .projects-grid { padding: 0 10px; }
    
    /* Timeline Mobile */
    .timeline-container { flex-direction: column; gap: 40px; }
    .timeline-container::before {
        top: 0; bottom: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%);
    }
    .bgProjHome{
    padding: 60px 0;

}
}

/* شركة المقاولات */
/* =========================================
   تنسيقات خاصة بصفحة المقاولات (Contracting)
   ========================================= */

/* --- 1. عداد الإنجازات (Stats Section) --- */
.stats-section {
    background: linear-gradient(rgba(30, 51, 37, 0.9), rgba(30, 51, 37, 0.9)), url('images/cons-bg.jpg'); /* استبدل الصورة */
    background-attachment: fixed;
    background-size: cover;
    padding: 80px 20px;
    color: #fff;
    text-align: center;
}

.stats-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
}

.stat-item h3 {
    font-size: 3rem;
    color: var(--brand-gold);
    font-family: 'Cairo', sans-serif;
    margin-bottom: 10px;
}

.stat-item p {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ddd;
}

/* --- 2. شريط السلامة (Safety Banner) --- */
.safety-banner {
    background: var(--brand-gold);
    color: var(--brand-green);
    padding: 40px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    text-align: center;
}

.safety-icon {
    font-size: 3rem;
    border: 3px solid var(--brand-green);
    border-radius: 50%;
    width: 80px; height: 80px;
    display: flex; align-items: center; justify-content: center;
}

.safety-text h4 { font-size: 1.5rem; margin-bottom: 5px; font-weight: 800; }
.safety-text p { font-size: 1rem; font-weight: 600; }

/* تحديث للموبايل لهذه الأقسام */
@media (max-width: 768px) {
    .stats-grid { flex-direction: column; gap: 40px; }
    .safety-banner { flex-direction: column; }
}
/* --- 3. شريط شركاء النجاح (Partners Marquee) --- */
.partners-section {
    background: #293d30;
    border-radius: 20px 20px 0 0;
    padding: 60px 0;
    text-align: center;
    overflow: hidden;
}
.partners-slider {
    display: flex;
    width: 200%; /* ضعف العرض للحركة المستمرة */
    animation: slideLogos 20s linear infinite;
}
.partner-logo {
    flex: 1;
    min-width: 150px;
    padding: 0 30px;
    opacity: 0.6;
    transition: 0.3s;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: #ccc; /* مؤقت مكان الصور */
}
.partner-logo:hover { opacity: 1; color: var(--brand-gold); }

@keyframes slideLogos {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- 4. سكشن تحميل البروفايل (CTA Blueprint) --- */
.cta-blueprint {
    background-color: var(--brand-green);
    /* صورة خلفية بنمط مخطط هندسي */
    background-image: 
        linear-gradient(rgba(30, 51, 37, 0.9), rgba(30, 51, 37, 0.8)),
        url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-attachment: fixed;
    padding: 100px 20px;
    text-align: center;
    color: #fff;
    position: relative;
    border-top: 5px solid var(--brand-gold);
}
.cta-content h2 {
    font-family: 'Cairo', sans-serif;
    font-size: 2.5rem;
    margin-bottom: 20px;
}
.cta-btn {
    display: inline-block;
    margin-top: 30px;
    padding: 15px 50px;
    background: transparent;
    border: 2px solid var(--brand-gold);
    color: var(--brand-gold);
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}
.cta-btn::before {
    content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%;
    background: var(--brand-gold); z-index: -1; transition: 0.3s;
}
.cta-btn:hover { color: var(--brand-green); }
.cta-btn:hover::before { width: 100%; }

/* ستايلات صفحات التفاصيل */
/* =========================================
   تنسيقات صفحات التفاصيل (Projects & Services)
   ========================================= */

/* --- هيدر الصفحة الفرعية --- */
.details-hero {
    height: 50vh;
    min-height: 350px;
    background-size: cover;
    background-position: center;
    position: relative;
    margin-top: 80px;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
}
.details-hero::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(30,51,37,0.7), rgba(30,51,37,0.9));
}
.details-title { position: relative; z-index: 2; color: #fff; }
.details-title h1 { font-family: 'Cairo', sans-serif; font-size: 3rem; color: var(--brand-gold); margin-bottom: 10px; }
.details-breadcrumb { font-size: 0.9rem; color: #ddd; }

/* --- تخطيط المحتوى (Grid) --- */
.details-container {
    display: grid;
    grid-template-columns: 2fr 1fr; /* المحتوى الكبير يسار، القائمة الجانبية يمين */
    gap: 40px;
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
}

/* المحتوى الرئيسي */
.main-content h2 { color: var(--brand-green); margin-bottom: 20px; font-size: 1.8rem; }
.main-content p { line-height: 1.8; color: #555; margin-bottom: 20px; font-size: 1rem; }

/* القائمة الجانبية (Sidebar) */
.sidebar-box {
    background: #fff;
    padding: 30px;
    border: 1px solid rgba(207, 165, 88, 0.3);
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.sidebar-box h3 { color: var(--brand-green); margin-bottom: 15px; font-size: 1.2rem; border-bottom: 2px solid var(--brand-gold); padding-bottom: 10px; display: inline-block; }
.project-info-list { list-style: none; }
.project-info-list li { margin-bottom: 15px; display: flex; justify-content: space-between; border-bottom: 1px dashed #eee; padding-bottom: 5px; }
.project-info-list strong { color: var(--brand-green); }
.project-info-list span { color: #666; }

/* --- معرض الصور (Gallery) --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 30px;
}
.gallery-item {
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}
.gallery-item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.3s;
}
.gallery-item:hover img { transform: scale(1.1); }

/* --- Lightbox (عارض الصور المكبرة) --- */
.lightbox {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 2000;
    display: none; /* مخفي افتراضياً */
    align-items: center; justify-content: center;
}
.lightbox.active { display: flex; }
.lightbox img { max-width: 90%; max-height: 80vh; border: 3px solid var(--brand-gold); }
.lightbox-close {
    position: absolute; top: 20px; right: 30px;
    color: #fff; font-size: 2rem; cursor: pointer;
}

/* --- Accordion (للأسئلة الشائعة في الخدمات) --- */
.accordion-item { margin-bottom: 15px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.accordion-header {
    background: #fdfbf7; padding: 15px; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    font-weight: bold; color: var(--brand-green);
}
.accordion-content {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
    padding: 0 15px; background: #fff;
}
.accordion-content p { padding: 15px 0; color: #666; }
.accordion-item.active .accordion-content { max-height: 200px; } /* ارتفاع تقديري */

/* الموبايل */
@media (max-width: 768px) {
    .details-container { grid-template-columns: 1fr; }
    .details-hero h1 { font-size: 2rem; }
}

/*  */
/* =========================================
   تنسيقات صفحة RTM TOWER
   ========================================= */

/* --- قسم الرفاهية (Amenities) --- */
.amenities-section {
    background-color: #fdfbf7;
    padding: 80px 20px;
    text-align: center;
}
.amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 40px auto 0;
}
.amenity-item {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
    border: 1px solid transparent;
}
.amenity-item:hover {
    transform: translateY(-10px);
    border-color: var(--brand-gold);
}
.amenity-icon {
    font-size: 2.5rem;
    color: var(--brand-green);
    margin-bottom: 20px;
}
.amenity-item h3 { font-size: 1.2rem; margin-bottom: 10px; color: #333; }
.amenity-item p { font-size: 0.9rem; color: #777; }

/* --- قسم الإطلالة البانورامية (Parallax View) --- */
.view-parallax {
    height: 60vh;
    min-height: 400px;
    background-image: url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80'); /* صورة أفقية لمدينة */
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.view-parallax::before {
    content: ''; position: absolute; top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.4); /* تغميق بسيط */
}
.view-content {
    position: relative; z-index: 2;
    text-align: center; color: #fff;
    padding: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(5px);
    max-width: 600px;
}
.view-content h2 { font-family: 'Cairo', sans-serif; font-size: 3rem; margin-bottom: 10px; color: var(--brand-gold); }
.view-content p { font-size: 1.2rem; }

/* RTM Care */
/* =========================================
   تنسيقات صفحة RTM CARE
   ========================================= */

/* --- جدول باقات الصيانة (Pricing) --- */
.pricing-section {
    background-color: #f8f9fa;
    padding: 80px 20px;
    text-align: center;
}
.pricing-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 40px auto 0;
}
.pricing-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 15px;
    width: 300px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: 0.3s;
    position: relative;
    border: 1px solid #eee;
}
.pricing-card.featured {
    transform: scale(1.05);
    border: 2px solid var(--brand-gold);
    box-shadow: 0 15px 40px rgba(207, 165, 88, 0.2);
    z-index: 2;
}
.pricing-card h3 { color: var(--brand-green); font-size: 1.5rem; margin-bottom: 10px; }
.price { font-size: 2.5rem; color: var(--brand-gold); font-weight: bold; margin-bottom: 20px; font-family: 'Cairo', sans-serif; }
.price span { font-size: 1rem; color: #999; font-weight: normal; }
.pricing-features { list-style: none; text-align: right; margin-bottom: 30px; }
.pricing-features li { margin-bottom: 10px; color: #555; font-size: 0.95rem; }
.pricing-features li i { color: var(--brand-gold); margin-left: 10px; }
.pricing-btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid var(--brand-green);
    color: var(--brand-green);
    transition: 0.3s;
}
.pricing-card.featured .pricing-btn { background: var(--brand-gold); border-color: var(--brand-gold); color: #fff; }
.pricing-card:hover { transform: translateY(-10px); }
.pricing-card.featured:hover { transform: scale(1.05) translateY(-10px); }

/* --- قسم التطبيق (App Section) --- */
.app-section {
    background: var(--brand-green);
    color: #fff;
    padding: 60px 20px;
    overflow: hidden;
}
.app-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}
.app-content { flex: 1; }
.app-content h2 { font-family: 'Cairo', sans-serif; font-size: 2.5rem; color: var(--brand-gold); margin-bottom: 20px; }
.app-content p { font-size: 1.1rem; margin-bottom: 30px; line-height: 1.6; color: #ddd; }
.app-buttons { display: flex; gap: 15px; }
.app-btn {
    background: #000; color: #fff; padding: 10px 20px; border-radius: 8px;
    text-decoration: none; display: flex; align-items: center; gap: 10px;
    border: 1px solid #444; transition: 0.3s;
}
.app-btn:hover { background: #333; border-color: var(--brand-gold); }
.app-btn i { font-size: 1.5rem; }
.app-image { flex: 1; text-align: center; }
.app-image img { max-width: 300px; filter: drop-shadow(0 0 20px rgba(0,0,0,0.5)); transform: rotate(-5deg); transition: 0.3s; }
.app-image:hover img { transform: rotate(0deg) scale(1.05); }

@media (max-width: 768px) {
    .pricing-card.featured { transform: scale(1); }
    .app-container { flex-direction: column; text-align: center; }
    .app-buttons { justify-content: center; }
}

/*  *//* =========================================
   تنسيقات صفحة RTM COMPOUND
   ========================================= */

/* --- قسم الحياة الاجتماعية (Events) --- */
.events-section {
    background: #fff;
    padding: 80px 20px;
    text-align: center;
}
.events-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 40px auto 0;
}
.event-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    width: 300px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: 0.3s;
    position: relative;
    text-align: right;
}
.event-card:hover { transform: translateY(-5px); }
.event-img {
    height: 180px;
    background-size: cover;
    background-position: center;
}
.event-date {
    position: absolute; top: 15px; left: 15px;
    background: var(--brand-gold); color: #fff;
    padding: 5px 10px; border-radius: 5px;
    font-weight: bold; text-align: center;
    line-height: 1.2;
}
.event-content { padding: 20px; }
.event-content h3 { font-size: 1.2rem; color: var(--brand-green); margin-bottom: 10px; }
.event-content p { color: #666; font-size: 0.9rem; margin-bottom: 15px; }
.event-tag { 
    display: inline-block; background: #f0f0f0; 
    color: #555; padding: 3px 10px; border-radius: 15px; font-size: 0.8rem; 
}

/* --- قسم المميزات الدائرية (Lifestyle Highlights) --- */
.lifestyle-section {
    background-color: #fdfbf7;
    padding: 60px 20px;
}
.lifestyle-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}
.lifestyle-item {
    text-align: center;
    width: 180px;
}
.lifestyle-img {
    width: 140px; height: 140px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 15px;
    border: 4px solid var(--brand-gold);
    transition: 0.3s;
}
.lifestyle-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
.lifestyle-item:hover .lifestyle-img img { transform: scale(1.1); }
.lifestyle-item h4 { color: var(--brand-green); font-size: 1.1rem; margin-bottom: 5px; }


/* =========================================
   تنسيقات صفحة RTM BUSINESS CENTER
   ========================================= */

/* --- قسم التقارير (Reports/Insights) --- */
.reports-section {
    background-color: #f4f6f8;
    padding: 80px 20px;
}
.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 40px auto 0;
}
.report-card {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    border-top: 4px solid var(--brand-green);
}
.report-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.report-icon {
    font-size: 2rem; color: #cc3333; /* لون الـ PDF */
    margin-bottom: 15px;
}
.report-card h3 { font-size: 1.1rem; margin-bottom: 10px; color: #333; height: 50px; overflow: hidden; }
.report-card p { font-size: 0.9rem; color: #777; flex-grow: 1; margin-bottom: 20px; }
.report-link {
    text-decoration: none; color: var(--brand-green); font-weight: bold; font-size: 0.9rem;
    display: flex; align-items: center; justify-content: space-between;
}
.report-link:hover { color: var(--brand-gold); }

/* --- قسم منهجية العمل (Methodology Steps) --- */
.methodology-section {
    padding: 80px 20px;
    /* background: #fff; */
    text-align: center;
}
.steps-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1000px;
    margin: 50px auto 0;
    position: relative;
    flex-wrap: wrap;
    gap: 20px;
}
/* خط يربط الخطوات (يظهر في الديسك توب فقط) */
.steps-container::before {
    content: ''; position: absolute; top: 40px; left: 50px; right: 50px; height: 2px;
    background: #293d30; z-index: 0;
}
.step-item {
    position: relative; z-index: 1;
    width: 200px;
}
.step-number {
    width: 80px; height: 80px;
    background: #fff; border: 2px solid var(--brand-gold);
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: bold; color: var(--brand-green);
    transition: 0.3s;
}
.step-item:hover .step-number { background: var(--brand-gold); color: #fff; }
.step-item h4 { font-size: 1.1rem; margin-bottom: 10px; }
.step-item p { font-size: 0.9rem; color: #666; line-height: 1.5; }

@media (max-width: 768px) {
    .steps-container { flex-direction: column; align-items: center; }
    .steps-container::before { display: none; } /* إخفاء الخط في الموبايل */
}
/* =========================================
   تنسيقات صفحة التواصل (Contact Us)
   ========================================= */

.contact-hero {
    height: 40vh;
    min-height: 300px;
    background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    margin-top: 65px; /* لتعويض الهيدر الثابت */
}
.contact-hero::before {
    content: ''; position: absolute; top:0; left:0; width:100%; height:100%;
    background: rgba(30, 51, 37, 0.85); /* لون أخضر غامق شفاف */
}
.contact-hero-content { position: relative; z-index: 2; color: #fff; }
.contact-hero-content h1 { font-family: 'Cairo', sans-serif; font-size: 3rem; color: var(--brand-gold); margin-bottom: 10px; }

/* حاوية التواصل (Split Layout) */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    max-width: 1200px;
    margin: 60px auto;
    padding:  20px;
}

/* صندوق المعلومات (يسار) */
.contact-info-box h2 { color: var(--brand-green); margin-bottom: 20px; font-size: 2rem; }
.contact-info-box p { color: #666; margin-bottom: 30px; line-height: 1.6; }

.info-item {
    display: flex; align-items: flex-start;
    margin-bottom: 25px;
}
.info-icon {
    width: 50px; height: 50px;
    background: #fdfbf7;
    border: 1px solid var(--brand-gold);
    color: var(--brand-green);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    margin-left: 20px; /* للمحاذاة العربية */
    flex-shrink: 0;
}
.info-text h4 { margin-bottom: 5px; color: #333; font-size: 1.1rem; }
.info-text p { margin-bottom: 0; font-size: 0.95rem; }

/* صندوق الفورم (يمين) */
.contact-form-box {
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-top: 5px solid var(--brand-gold);
}
.form-group { margin-bottom: 20px; }
.form-label { display: block; margin-bottom: 8px; color: #555; font-weight: bold; font-size: 0.9rem; }
.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    transition: 0.3s;
    background: #f9f9f9;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--brand-green);
    background: #fff;
    outline: none;
}
.form-textarea { height: 120px; resize: vertical; }

.submit-btn-full {
    width: 100%;
    padding: 15px;
    background: var(--brand-green);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}
.submit-btn-full:hover { background: var(--brand-gold); color: var(--brand-green); }

/* الخريطة */
.map-section {
    height: 450px;
    width: 100%;
    filter: grayscale(100%); /* لجعل الخريطة رمادية لتناسب التصميم */
    transition: 0.5s;
}
.map-section { filter: grayscale(0%); }

@media (max-width: 768px) {
    .contact-wrapper { grid-template-columns: 1fr; }
    .contact-hero h1 { font-size: 2rem; }
}

/* =========================================
   شريط القياس المتحرك (Moving Ruler)
   ========================================= */
.measuring-tape {
    width: 100%;
    height: 30px;
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(90deg, #bbbbbb 2px, transparent 2px), linear-gradient(90deg, rgba(30, 51, 37, 0.6) 1px, transparent 1px);
    background-size: 50px 100%, 10px 50%;
    background-repeat: repeat-x;
    background-position: 0 bottom;
    animation: moveTape 20s linear infinite;
    opacity: 0.8;
}

/* تعريف الحركة (تحريك الخلفية أفقياً) */
@keyframes moveTape {
    from {
        background-position: 0 bottom;
    }
    to {
        background-position: 1000px bottom; /* يتحرك بمقدار 1000 بكسل ثم يعيد نفسه */
    }
}

         /* =========================================
           1. تنسيقات السلايدر (تم ضبط الخطوط)
           ========================================= */
        .hero-slider-section {
            position: relative;
            width: 100%;
            height: 600px;
            overflow: hidden;
            margin-top: 0;
            direction: ltr; /* لضمان عمل السلايدر بشكل صحيح */
        }

        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .slide.active {
            opacity: 1;
            z-index: 1;
        }

        .slide::before {
            content: '';
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.4); 
            z-index: 1;
        }

        .slide-content {
            position: relative;
            z-index: 2;
            color: #fff;
            max-width: 800px;
            padding: 20px;
            transform: translateY(30px);
            transition: transform 1s ease, opacity 1s ease;
            opacity: 0;
            direction: rtl; /* إعادة الاتجاه للعربي داخل المحتوى */
        }

        .slide.active .slide-content {
            transform: translateY(0);
            opacity: 1;
        }

        .slide-title {
            /* تم تعديل الخط ليكون Cairo لضمان التوافق مع الموقع */
            font-family: 'Cairo', sans-serif; 
            font-weight: 800; /* خط عريض */
            font-size: 3.5rem;
            color: var(--brand-gold, #d4af37);
            margin-bottom: 15px;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5);
        }

        .slide-text {
            font-family: 'Cairo', sans-serif;
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 30px;
            line-height: 1.6;
        }

        .slider-btn {
            display: inline-block;
            padding: 12px 40px;
            background: var(--brand-gold, #d4af37);
            color: #000;
            text-decoration: none;
            font-family: 'Cairo', sans-serif;
            font-weight: 700;
            border-radius: 5px;
            transition: 0.3s;
        }
        .slider-btn:hover {
            background: #fff;
        }

        .slider-nav {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0 40px;
            z-index: 10;
            transform: translateY(-50%);
            direction: ltr;
        }
        .nav-btn {
            background: rgba(255,255,255,0.2);
            color: #fff;
            border: 1px solid rgba(255,255,255,0.4);
            width: 50px; height: 50px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.2rem;
            transition: 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .nav-btn:hover { background: var(--brand-gold, #d4af37); color: #000; border-color: var(--brand-gold, #d4af37); }

        .new-map-section {
            position: relative;
            width: 100%;
            height: 900px;
            margin-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            /* margin-bottom: 50px; */
            /* --- إضافة صورة الخلفية فقط --- */
            background: linear-gradient(rgba(30, 51, 37, 0.92), rgba(30, 51, 37, 0.85)), url(https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .connections-svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .connection-line {
            fill: none;
            stroke: var(--brand-gold, #d4af37);
            stroke-width: 2;
            stroke-dasharray: 10 5;
            animation: dashMove 30s linear infinite;
            opacity: 0.6;
        }

        @keyframes dashMove {
            to { stroke-dashoffset: -1000; }
        }

        .map-card {
            position: absolute;
            width: 160px;
            text-align: center;
            z-index: 10;
            transition: transform 0.3s ease;
            text-decoration: none;
        }

        

        /* .map-card:hover {
            transform: scale(1.1);
            z-index: 15;
        } */

        /* --- تعديل لدمج الصورة مع البوكس --- */
      .card-gif-box {
    width: 100px;
    height: 100px;
    /* background: #fff;  */
    border-radius: 50%;
    /* border: 3px solid var(--brand-gold, #d4af37); */
    margin: 0 auto -25px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); */
    position: relative;
    z-index: 5;
}

        .card-gif-box img {
            width: 90%;
            height: 90%;
            object-fit: contain;
        }

        .card-info {
            background: rgba(255, 255, 255, 0.95);
            /* زيادة البادينج من الأعلى لتعويض تداخل الدائرة */
            padding: 30px 10px 10px 10px; 
            border-radius: 15px; /* تدوير الزوايا أكثر لتناسب التصميم المدمج */
            box-shadow: 0 0 0px rgb(190 154 82 / 91%), 0 0 35px rgb(191 154 82 / 61%), 0 0 40px rgba(255, 204, 0, 0.4) !important;
            border: 1px solid #eee;
            position: relative;
            z-index: 4;
        }

        .branch-en {
            font-family: 'Cinzel', serif;
            font-weight: 700;
            color: #1e3325;
            font-size: 0.8rem;
            display: block;
            margin-bottom: 2px;
        }

        .branch-ar {
            font-family: 'Cairo', sans-serif;
            color: #d4af37;
            font-size: 0.75rem;
            display: block;
        }

        .center-hub-card {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 180px;
            height: 180px;
            background: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 5px solid #cfa558;
            box-shadow: 0 0 30px rgba(0,0,0,0.1);
            z-index: 20;
        }
        
        .center-hub-card img {
            width: 100%;
        }

        /* المواقع (كما هي) */
        .pos-top { top: 12%; left: 50%; transform: translateX(-50%); }
        .pos-top-right { top: 16%; right: 9%; }
        .pos-bottom-right { bottom: 25%; right: 9%; }
        .pos-bottom { bottom: 12%; left: 50%; transform: translateX(-50%); }
        .pos-bottom-left { bottom: 28%; left: 9%; }
        .pos-top-left { top: 16%; left: 9%; }

        @media (max-width: 768px) {
            .new-map-section { height: 600px; margin-bottom: 30px; }
            .map-card { width: 120px; }
            .card-gif-box { width: 70px; height: 70px; margin: 0 auto -20px; }
            .center-hub-card { width: 120px; height: 120px; }
            
            .pos-top { top: 5%; }
            .pos-bottom { bottom: 5%; }
            .pos-top-right { top: 15%; right: 5%; }
            .pos-bottom-right { bottom: 15%; right: 5%; }
            .pos-bottom-left { bottom: 15%; left: 5%; }
            .pos-top-left { top: 15%; left: 5%; }
        }

        /* =========================================
           New Projects Section Styles (تمت الإضافة)
           ========================================= */
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        .project-card {
            position: relative;
            height: 400px;
            border-radius: 15px;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .project-bg {
            width: 100%; height: 100%;
            background-size: cover; background-position: center;
            transition: transform 0.5s ease;
        }
        .project-card:hover .project-bg { transform: scale(1.1); }
        .project-overlay {
            position: absolute; bottom: 0; left: 0; width: 100%;
            background: linear-gradient(to top, rgba(30, 51, 37, 0.95), transparent);
            padding: 30px 20px;
            color: #fff;
            transform: translateY(20px);
            transition: all 0.3s ease;
        }
        .project-card:hover .project-overlay { transform: translateY(0); }
        .project-title {
            font-family: 'Cairo', sans-serif;
            font-size: 1.5rem;
            color: var(--brand-gold, #d4af37);
            margin-bottom: 5px;
            font-weight: 700;
        }
        .project-desc {
            font-size: 0.9rem;
            color: #ddd;
            margin-bottom: 10px;
        }
        /* تأكد أن السكشن الأب يحمل هذه الخاصية ليعمل التثبيت */
#projects {
    position: relative; /* ضروري جداً */
    /* ... باقي تنسيقات السكشن ... */
}

/* تنسيق الشريط العلوي */
.top-tape-strip {
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    top: 0;
    height: 30px;
    z-index: 10;
    background-image: linear-gradient(90deg, #ddd9d9 2px, transparent 2px), linear-gradient(90deg, rgb(187 187 187 / 60%) 1px, transparent 1px);
    background-size: 50px 100%, 10px 50%;
    background-repeat: repeat-x;
    background-position: 0 top;
    animation: moveTapeReverse 20s linear infinite;
}
/* حركة الشريط (لليسار) */
@keyframes moveTapeReverse {
    from { background-position: 0 top; }
    to { background-position: -1000px top; }
}

/* --- Virtual Tour Section Styles --- */

/* تنسيق التبويبات العلوية */
/* --- Virtual Tour Styling Updated --- */

/* 1. تنسيق التبويبات العلوية (Project Tabs) */
.projects-tabs-wrapper {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.project-tab-btn {
    background: #fff;
    border: 1px solid #e0e0e0;
    color: #555;
    padding:7px 18px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 50px; /* شكل كبسولة */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.project-tab-btn i {
    color: var(--brand-gold);
}

.project-tab-btn:hover {
    transform: translateY(-2px);
    border-color: var(--brand-gold);
    color: var(--brand-gold);
}

.project-tab-btn.active {
    background: var(--brand-gold);
    color: #fff;
    border-color: var(--brand-gold);
    box-shadow: 0 8px 15px rgba(207, 165, 88, 0.25);
}
.project-tab-btn.active i { color: #fff; }


/* 2. تنسيق بطاقة الواجهة الرئيسية (The Main Card) */
.tour-interface-card {
    background: #fff;
    padding: 15px; /* هذا هو الإطار الأبيض المحيط */
    border-radius: 25px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    display: flex; /* لترتيب القائمة بجانب الشاشة */
    gap: 20px;
    height: 500px; /* ارتفاع ثابت للجمالية */
    border: 1px solid rgba(0,0,0,0.03);
}

/* 3. القائمة الجانبية (Sidebar Buttons) */
.tour-sidebar {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100px; /* عرض ثابت للقائمة */
    flex-shrink: 0;
    padding: 10px 0;
    align-items: center;
}

.tour-btn {
    width: 100%;
    aspect-ratio: 1/1; /* يجعل الزر مربعاً */
    background: #fff;
    border: 2px solid #f5f5f5;
    border-radius: 18px; /* حواف دائرية ناعمة */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #777;
}

.tour-btn .icon-box {
    font-size: 1.6rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: transparent;
    transition: 0.3s;
}

.tour-btn span {
    font-size: 0.8rem;
    font-weight: 700;
}

/* تأثير عند المرور أو التفعيل */
.tour-btn:hover {
    border-color: var(--brand-gold);
    color: var(--brand-gold);
    transform: translateY(-3px);
}

.tour-btn.active {
    border-color: var(--brand-gold);
    color: #1e3325;
    box-shadow: 0 10px 20px rgba(207, 165, 88, 0.15);
}
.tour-btn.active .icon-box {
    background: rgba(207, 165, 88, 0.1);
}

/* 4. منطقة العرض السوداء (Display Area) */
.tour-display-area {
    flex-grow: 1;
    background: #111;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5); /* ظل داخلي للعمق */
}

.inner-view {
    display: none;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: fadeInView 0.5s ease;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.inner-view.active {
    display: flex;
}

.inner-view iframe {
    width: 100%;
    height: 100%;
    border: none;
}

@keyframes fadeInView {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* محتوى المشاريع */
.project-content {
    display: none;
}
.project-content.active {
    display: block;
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- تجاوب الموبايل (Responsive) --- */
@media (max-width: 992px) {
    .tour-interface-card {
        flex-direction: column-reverse; /* نقل الأزرار للأسفل في الموبايل */
        height: auto;
        padding: 10px;
    }
    
    .tour-sidebar {
        width: 100%;
        flex-direction: row; /* الأزرار بجانب بعض في الموبايل */
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .tour-btn {
        width: 80px; /* تصغير الأزرار قليلاً */
        height: 80px;
        aspect-ratio: auto;
    }
    
    .tour-display-area {
        height: 350px; /* ارتفاع مناسب للموبايل */
    }
}

/* =========================================
   تنسيقات الفوتر المطور (Multi-Column Footer)
   ========================================= */

.main-footer {
    background-color: var(--brand-green);
    color: #fff;
    padding-top: 70px;
    border-top: 5px solid var(--brand-gold);
    position: relative;
    font-family: 'Cairo', sans-serif;
    /* خلفية منقوشة خفيفة */
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.03) 1px, transparent 0);
    background-size: 20px 20px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* تقسيم تلقائي */
    gap: 50px;
    padding: 0 20px 50px 20px;
}

/* --- تنسيقات العناوين --- */
.footer-col h3 {
    color: var(--brand-gold);
    font-size: 1.3rem;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}
.footer-col h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 2px;
    background: var(--brand-gold);
}

/* --- العمود الأول: الشعار والنبذة --- */
.footer-logo img {
    max-height: 50px;
    filter: brightness(0) invert(1); /* تحويل الشعار للأبيض */
    margin-bottom: 20px;
}
.footer-about {
    color: #bbb;
    line-height: 1.8;
    font-size: 0.95rem;
    margin-bottom: 25px;
    text-align: justify;
}
.footer-social-icons {
    display: flex;
    gap: 15px;
}
.footer-social-icons a {
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: #fff;
    transition: 0.3s;
}
.footer-social-icons a:hover {
    background: var(--brand-gold);
    border-color: var(--brand-gold);
    transform: translateY(-3px);
}

/* --- العمود الثاني: الأخبار --- */
.footer-news-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.footer-news-item {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    transition: 0.3s;
}
.footer-news-item:hover .news-thumb {
    border-color: var(--brand-gold);
}
.footer-news-item:hover h4 {
    color: var(--brand-gold);
}
.news-thumb {
    width: 70px; height: 70px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
    transition: 0.3s;
}
.news-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.news-date {
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 5px;
}
.news-info h4 {
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.4;
    margin: 0;
    font-weight: 600;
    transition: 0.3s;
}

/* --- العمود الثالث: التواصل --- */
.footer-contact-list {
    list-style: none;
}
.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    color: #ccc;
    font-size: 0.95rem;
}
.footer-contact-list li i {
    color: var(--brand-gold);
    font-size: 1.1rem;
    margin-top: 3px;
}

/* --- الشريط السفلي --- */
.footer-bottom-bar {
    background: rgba(0,0,0,0.2);
    padding: 20px;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
.copyright-text span {
    color: var(--brand-gold);
    font-weight: bold;
}
.designer-link {
    font-size: 0.9rem;
    color: #aaa;
}
.designer-link a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px dotted var(--brand-gold);
}

/* تجاوب للموبايل */
@media (max-width: 768px) {
    .footer-bottom-bar {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    .footer-container {
        grid-template-columns: 1fr; /* عمود واحد */
        text-align: center;
    }
    .footer-col h3::after {
        right: 50%;
        transform: translateX(50%); /* توسيط الخط تحت العنوان */
    }
    .footer-social-icons {
        justify-content: center;
    }
    .footer-news-item {
        text-align: right; /* الأخبار تبقى محاذية لليمين أفضل للقراءة */
    }
    .footer-contact-list li {
        justify-content: center;
    }
}

/* إصلاح لون التاريخ ومحاذاة النص */
.footer-date {
    position: static !important;
    display: block;
    font-size: 0.85rem; /* تكبير الخط قليلاً */
    color: #cfa558 !important; /* لون ذهبي إجباري */
    font-weight: bold; /* خط عريض ليكون أوضح */
    margin-bottom: 5px;
    background: transparent;
    padding: 0;
    text-align: right; /* محاذاة لليمين */
}

/* أيقونة الساعة بجانب التاريخ */
.footer-date i {
    margin-left: 5px;
    color: #cfa558 !important;
}

/* حاوية الخبر بالكامل */
.footer-news-item {
    display: flex;
    align-items: center; /* محاذاة عمودية في المنتصف */
    gap: 15px; /* مسافة مناسبة بين الصورة والنص */
    text-decoration: none; /* إزالة الخط من الرابط */
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.05); /* خط فاصل خفيف اختياري */
    padding-bottom: 10px;
}

/* حاوية النصوص (التاريخ والعنوان) */
.news-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* محاذاة لليمين (بداية السطر في العربي) */
    flex: 1; /* يأخذ باقي المساحة */
}

/* عنوان الخبر */
.news-info h4 {
    color: #fff !important; /* لون أبيض إجباري */
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.4;
    text-align: right; /* تأكيد المحاذاة لليمين */
}

/* الصورة المصغرة */
.news-thumb {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(207, 165, 88, 0.3); /* إطار ذهبي خفيف */
    flex-shrink: 0; /* منع الصورة من الانكماش */
}


/* --- تنسيقات إضافات الهيدر الجديدة --- */
.header-extras {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: 20px;
        flex-direction: row-reverse;

}

.extra-header-img {
    height: 50px; /* ارتفاع الصورة */
    width: auto;
    object-fit: contain;
}

.header-separator {
    width: 1px;
    height: 25px;
    background-color: rgba(255,255,255,0.2);
    margin: 0 5px;
}

.header-social {
    /* تم إزالة البوردر القديم لأننا أضفنا فاصلاً جديداً */
    border: none !important; 
    margin: 0 !important;
    padding: 0 !important;
    gap: 15px; /* تقليل المسافة بين الأيقونات */
}

/* لون مميز لأيقونة الصم */
.fa-hands-asl-interpreting {
    color: #c59f55; 
    font-size: 1.2rem;
}
/* --- Map Section Updated (Fit Screen) --- */
.new-map-section {
    position: relative;
    width: 100%;
    /* الارتفاع: يأخذ ارتفاع الشاشة ناقص ارتفاع الهيدر */
    height: calc(100vh - 65px); 
    min-height: 600px; /* ضمان عدم انكماشها كثيراً */
    max-height: 900px;
    margin-top: 65px; /* لتعويض الهيدر الثابت */
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(rgba(30, 51, 37, 0.92), rgba(30, 51, 37, 0.85)), url(https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden; /* منع السكرول */
}

.connections-svg {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
    max-width: 1400px; /* لتقييد عرض الخطوط في الشاشات العريضة جداً */
}

/* تحديث أماكن الكروت لتكون أوسع أفقياً وأقرب عمودياً */

/* المركز */
.center-hub-card {
    /* كما هو */
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 160px; height: 160px;
    z-index: 20;
    /* ... باقي الستايل كما هو ... */
}

/* الأعلى والأسفل */
.pos-top { 
    top: 10%; /* رفعناها قليلاً */
    left: 50%; 
    transform: translateX(-50%); 
}
.pos-bottom { 
    bottom: 10%; /* رفعناها قليلاً */
    left: 50%; 
    transform: translateX(-50%); 
}

/* الجوانب (توسيع أفقي لتقليل الاحتياج للطول) */
/* الجهة اليمنى */
.pos-top-right { 
     top: 16%;
    right: 9%;
}
.pos-bottom-right { 
    bottom: 26%;
    right: 9%;
}

/* الجهة اليسرى */
.pos-top-left { 
    top: 16%; 
    left: 9%; /* وسعناها للجوانب */
}
.pos-bottom-left { 
    bottom: 25%; 
    left: 9%; 
}

/* تحسين شكل الكارد قليلاً ليناسب المساحة */
.map-card {
    width: 150px; /* تصغير طفيف */
}
.card-gif-box {
    width: 90px; height: 90px;
}
.card-info {
    padding: 25px 8px 8px 8px;
}

/* تجاوب للموبايل - نعيدها للشكل العمودي لأنه لا يوجد مساحة جانبية */
@media (max-width: 768px) {
    .new-map-section { 
        height: auto; 
        padding: 50px 0; 
        margin-top: 60px;
    }
    .pos-top, .pos-bottom, .pos-top-right, .pos-bottom-right, .pos-top-left, .pos-bottom-left {
        position: relative;
        top: auto; bottom: auto; left: auto; right: auto;
        transform: none;
        margin: 20px auto;
        display: block;
    }
    .connections-svg { display: none; } /* إخفاء الخطوط في الموبايل */
    .new-map-section {
        flex-direction: column;
        gap: 20px;
    }
    .center-hub-card { position: relative; top: auto; left: auto; transform: none; margin-bottom: 30px; }
}

/* --- Statistics Section Styles --- */
.stats-section {
    position: relative;
    padding: 80px 0;
    /* صورة خلفية معمارية غامقة - يمكنك تغيير الرابط */
    background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');
    background-attachment: fixed; /* تأثير البارالاكس */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    color: #fff;
    direction: rtl;
}

/* طبقة تغطية سوداء لزيادة وضوح النص */
.stats-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(0,0,0,0.9), rgba(20,20,20,0.8));
    z-index: 1;
}

.stats-section .container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    text-align: center;
}

.stat-item {
    background: rgba(255, 255, 255, 0.05); /* خلفية شفافة */
    backdrop-filter: blur(5px);
    padding: 30px 20px;
    border: 1px solid rgba(212, 175, 55, 0.2); /* حدود ذهبية خافتة */
    border-radius: 8px;
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.stat-item:hover {
    transform: translateY(-10px);
    border-color: var(--brand-gold, #d4af37);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.15);
}

.stat-icon {
    font-size: 2.5rem;
    color: var(--brand-gold, #d4af37);
    margin-bottom: 15px;
    opacity: 0.8;
}

.stat-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* تنسيق الأرقام */
.stat-number {
    font-family: 'Cinzel', serif; /* نفس خط العناوين الإنجليزية لديك */
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    /* تأثير نص ذهبي متدرج */
    background: linear-gradient(to bottom, #fff 20%, var(--brand-gold, #d4af37) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.stat-plus {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    color: var(--brand-gold, #d4af37);
    position: absolute;
    margin-right: -15px; /* ضبط الموضع حسب الحاجة */
    top: 35px;
}

.stat-item .stat-content {
    position: relative; /* من أجل تموضع علامة الزائد */
}

.stat-label {
    font-family: 'Cairo', sans-serif;
    font-size: 1.1rem;
    margin-top: 10px;
    color: #ccc;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ريسبونسيف للموبايل */
@media (max-width: 768px) {
    .stats-section {
        background-attachment: scroll; /* إلغاء البارالاكس في الموبايل للأداء */
    }
    .stats-grid {
        gap: 20px;
    }
    .stat-number {
        font-size: 2.5rem;
    }
}


/* --- New Integrated Tour Box Design (Unified Buttons) --- */

/* 1. البوكس الأبيض الكبير */
.tour-main-box {
    background: #fff;
    border-radius: 25px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.1);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 700px; /* ارتفاع مناسب */
}

/* 2. شريط التبويبات العلوي */
.projects-tabs-header {
    padding: 20px;
    /* border-bottom: 1px solid #eee; */
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

/* 3. توحيد شكل الأزرار (العلوية والجانبية معاً) */
/* نطبق نفس الستايل على الكلاسين */
.project-tab-btn, 
.tour-btn {
    width: 110px;               /* عرض ثابت وموحد */
    height: 105px;              /* ارتفاع ثابت وموحد */
    background: #fff;           /* خلفية بيضاء نقية */
    border: 2px solid #e6e6e6;  /* إطار رمادي فاتح وواضح */
    border-radius: 18px;        /* تدوير الزوايا */
    display: flex;
    flex-direction: column;     /* ترتيب العناصر فوق بعض */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;                /* لون النص والايكون الرمادي */
    font-family: 'Cairo', sans-serif;
    transition: all 0.3s ease;  /* نعومة الحركة */
    margin: 0;                  /* إلغاء أي هوامش خارجية */
    padding: 0;                 /* إلغاء الحشو الداخلي الزائد */
    box-shadow:0 4px 10px rgb(0 0 0 / 20%)s; /* ظل خفيف جداً */
}

/* 2. تنسيق الأيقونة (داخل الدائرة الوهمية) */
.project-tab-btn .icon-box,
.tour-btn .icon-box {
    font-size: 1.6rem;          /* حجم الأيقونة */
    margin-bottom: 12px;        /* مسافة بين الأيقونة والنص */
    width: 45px;                /* عرض منطقة الأيقونة */
    height: 45px;               /* ارتفاع منطقة الأيقونة */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;         /* شكل دائري */
    background: #f9f9f9;        /* خلفية رمادية فاتحة جداً للأيقونة */
    transition: 0.3s;
}

/* 3. تنسيق النص */
.project-tab-btn span,
.tour-btn span {
    font-size: 0.85rem;         /* حجم الخط */
    font-weight: 700;           /* سماكة الخط */
    line-height: 1.2;
}

/* 4. تأثير عند تمرير الماوس (Hover) */
.project-tab-btn:hover,
.tour-btn:hover {
    border-color: var(--brand-gold); /* الإطار يصبح ذهبي */
    transform: translateY(-3px);     /* يرتفع الزر قليلاً */
    color: var(--brand-gold);        /* النص يصبح ذهبي */
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.project-tab-btn:hover .icon-box,
.tour-btn:hover .icon-box {
    background: #fff;              /* خلفية الأيقونة تصبح بيضاء */
    color: var(--brand-gold);      /* الأيقونة تصبح ذهبية */
}

/* 5. الحالة النشطة (Active) - عند الضغط */
.project-tab-btn.active,
.tour-btn.active {
    border-color: var(--brand-gold); /* إطار ذهبي واضح */
    color: var(--brand-gold);        /* نص ذهبي */
    background: #fff;
    box-shadow: 0 5px 15px rgba(207, 165, 88, 0.2); /* ظل ذهبي خفيف */
}

/* الأيقونة في الحالة النشطة */
.project-tab-btn.active .icon-box,
.tour-btn.active .icon-box {
    background: var(--brand-gold);   /* الدائرة تصبح ذهبية بالكامل */
    color: #fff;                     /* الأيقونة بداخلها بيضاء */
}

/* ---------------------------------------------------- */
/* تنسيق الحاويات لضمان المحاذاة */

/* حاوية الأزرار العلوية */
.projects-tabs-header {
    /* background: #fdfdfd; */
    padding: 25px;
    /* border-bottom: 1px solid #eee; */
    display: flex;
    gap: 25px;            /* مسافة بين الأزرار */
    justify-content: center;
    align-items: center;
}

/* حاوية الأزرار الجانبية */
.tour-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;            /* نفس المسافة تقريباً */
    width: 140px;         /* عرض العمود الجانبي */
    flex-shrink: 0;
    align-items: center;
    padding-top: 20px;
}

/* =========================================
   إصلاح سكشن الجولة الافتراضية (الحاوية والأزرار)
   ========================================= */



/* 1. إصلاح الحاوية الكبيرة (البوكس الأبيض) */
.tour-main-box {
    background: #fff;
    border-radius: 25px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.1);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    /* التعديل المهم هنا: استخدام min-height بدل height ثابت لمنع الخراب */
    min-height: 700px; 
    height: auto; 
}

/* 2. شريط التبويبات العلوي */
.projects-tabs-header {
    background: #fdfdfd;
    padding: 25px;
    /* border-bottom: 1px solid #eee; */
    display: flex;
    gap: 25px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* للسماح بالنزول للأسفل في الشاشات الصغيرة */
}

/* 3. جسم المحتوى */
.tour-content-body {
    flex-grow: 1; /* يمتد ليملأ باقي البوكس */
    padding: 20px;
    position: relative;
    background: #fff;
    display: flex;
    flex-direction: column;
}

/* 4. تنسيق المحتوى الداخلي النشط */
.project-content.active {
    display: block;
    width: 100%;
    height: 100%;
    flex-grow: 1; /* مهم جداً لملء الفراغ */
}

/* 5. التخطيط الداخلي (أزرار جانبية + شاشة) */
.tour-interface-layout {
    display: flex;
    gap: 20px;
    height: 100%;
    min-height: 500px; /* ضمان ارتفاع أدنى للشاشة */
}

/* 6. القائمة الجانبية */
.tour-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 140px;
    flex-shrink: 0;
    align-items: center;
    padding-top: 20px;
}

/* 7. شاشة العرض السوداء */
.tour-display-area {
    flex-grow: 1;
    background: #111;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
    width: 100%; /* تملأ العرض المتبقي */
}

/* --- توحيد ستايل الأزرار (علوية وجانبية) --- */
.project-tab-btn, 
.tour-btn {
    width: 110px;
    height: 105px;
    background: #fff;
    border: 2px solid #e6e6e6;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    font-family: 'Cairo', sans-serif;
    transition: all 0.3s ease;
    margin: 0;
    padding: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.project-tab-btn .icon-box,
.tour-btn .icon-box {
    font-size: 1.6rem;
    margin-bottom: 12px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f9f9f9;
    transition: 0.3s;
}

.project-tab-btn span,
.tour-btn span {
    font-size: 0.85rem;
    font-weight: 700;
}

.project-tab-btn:hover,
.tour-btn:hover {
    border-color: var(--brand-gold);
    transform: translateY(-3px);
    color: var(--brand-gold);
}
.project-tab-btn:hover .icon-box,
.tour-btn:hover .icon-box {
    background: #fff;
    color: var(--brand-gold);
}

.project-tab-btn.active,
.tour-btn.active {
    border-color: var(--brand-gold);
    color: var(--brand-gold);
    background: #fff;
    box-shadow: 0 5px 15px rgba(207, 165, 88, 0.2);
}
.project-tab-btn.active .icon-box,
.tour-btn.active .icon-box {
    background: var(--brand-gold);
    color: #fff;
}

/* --- تعديلات الموبايل --- */
@media (max-width: 992px) {
    .tour-main-box { 
        height: auto; 
        min-height: auto; 
    }
    .tour-interface-layout { 
        flex-direction: column-reverse; 
        height: auto; 
    }
    .tour-sidebar { 
        width: 100%; 
        flex-direction: row; 
        justify-content: center; /* توسيط الأزرار */
        flex-wrap: wrap; /* السماح بالتفاف الأزرار */
        padding: 10px; 
    }
    .tour-display-area { 
        height: 350px; 
    }
    .project-tab-btn, .tour-btn {
        width: 80px; 
        height: 80px; 
    }
    .project-tab-btn span, .tour-btn span { font-size: 0.7rem; }
    .project-tab-btn .icon-box, .tour-btn .icon-box { width: 30px; height: 30px; font-size: 1.2rem; margin-bottom: 5px; }
}

/* --- Services Section Styling with Side Background --- */

/* تأكد أن السكشن الأساسي نسبي لتتموضع الخلفية بداخله */
.services-section {
    position: relative;
    /* overflow: hidden;  اختياري: لمنع الصورة من الخروج إذا كانت كبيرة */
    padding-bottom: 80px; /* مسافة إضافية للجمالية */
}

/* الخلفية الجانبية اليسرى */
.services-section::before {
    content: '';
    position: absolute;
 top: 0;
    left: -159px;
    width: 30%;
    height: 75%;
    background-image: url('images/hafedServ.png'); 
    background-size: cover;
    background-position: left center;
    z-index: -1;
}

/* تنسيق إضافي للكروت لضمان ظهورها بشكل جيد فوق الخلفية */
.services-section .service-card {
    position: relative;
    z-index: 2; /* لضمان أن الكروت فوق الخلفية الجانبية */
    background: rgba(30, 51, 37, 0.91); /* زيادة عتامة خلفية الكرت قليلاً */
}

/* =========================================
   تصميم النافبار الاحترافي (Sleek Tab Design)
   ========================================= */

.nav-design-container {
    max-width: 1100px;
    margin: 20px auto;
    direction: rtl;
    font-family: 'Cairo', sans-serif;
    position: relative;
    /* ظل عام خفيف للبوكس كله */
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1)); 
}

/* --- 1. حاوية التبويبات العلوية --- */
.nav-tabs-wrapper {
    display: flex;
    padding-right: 30px; /* إزاحة للبداية */
    margin-bottom: -1px; /* تداخل مهم جداً لدمج اللون الأبيض */
    position: relative;
    z-index: 5;
}



/* تعديل النص داخل الزر (إلغاء الميلان) */
.tab-text {
    display: block;
    transform: skewX(20deg); /* عكس الميلان ليظهر النص مستقيماً */
    pointer-events: none;
}


.nav-tab:hover:not(.active) {
    background: var(--brand-gold);
    color: #fff;
}



.strip-content {
    color: #999;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.strip-content i { color: var(--brand-gold); }






.nav-side-btn i { font-size: 1.4rem; margin-bottom: 3px; }
.nav-side-btn span { font-size: 0.75rem; font-weight: bold; }

.nav-side-btn:hover { color: var(--brand-gold); background: #fff; }
.nav-side-btn.active {
    color: var(--brand-green);
    background: #fff;
    border-right: 3px solid var(--brand-gold); /* خط نشط يمين */
}

/* --- منطقة العرض --- */
.nav-display-area {
    flex-grow: 1;
    background: #111;
    position: relative;
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
    .nav-white-strip { height: 40px; padding: 0 15px; }
    .strip-content { font-size: 0.8rem; }
    
    .nav-tabs-wrapper { 
        padding-right: 5px; 
        overflow-x: auto; /* سكرول أفقي إذا كثرت التبويبات */
        white-space: nowrap;
        padding-bottom: 5px; /* مساحة للسكرول */
    }
    
    .nav-tab { 
        min-width: 120px; 
        font-size: 0.8rem; 
        transform: none; /* إلغاء الميلان في الموبايل */
        border-radius: 5px 5px 0 0;
        margin-left: 2px;
    }
    .tab-text { transform: none; }
    
    .nav-body { flex-direction: column-reverse; }
    .nav-sidebar { 
        width: 100%; 
        flex-direction: row; 
        border-left: none; 
        justify-content: space-around;
        padding: 5px 0;
    }
    .nav-side-btn { border-bottom: none; border-right: none; padding: 10px; }
    .nav-side-btn.active { border-right: none; border-bottom: 3px solid var(--brand-gold); }
    .nav-display-area { height: 300px; }
}
/* =========================================
   تحديث ألوان وتخطيط الجولة الافتراضية
   ========================================= */

.nav-design-container {
    max-width: 1100px;
    margin: 20px auto;
    direction: rtl;
    font-family: 'Cairo', sans-serif;
    position: relative;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15)); 
}

/* --- 1. التبويبات العلوية --- */
.nav-tabs-wrapper {
    display: flex;
    padding-right: 30px;
    margin-bottom: -1px; /* لدمج التبويب مع الشريط السفلي */
    position: relative;
    z-index: 5;
}



.tab-text {
    display: block;
    transform: skewX(20deg);
    pointer-events: none;
}



.nav-tab:hover:not(.active) {
    background: #2a4532; /* أخضر أفتح قليلاً عند المرور */
    color: #fff;
}

/* --- 2. الشريط الفاصل (تغيير لونه للذهبي) --- */
.nav-white-strip {
    background: var(--brand-gold); 
    height: 6px; 
    width: 100%;
    position: relative;
    z-index: 4;
    border-bottom: 1px solid var(--brand-gold);
    display: flex;
    align-items: center;
    padding: 0 30px;
}

/* إخفاء محتوى الشريط (النص) حسب طلبك */
.strip-content {
    display: none; 
}


/* --- 3. جسم المحتوى والقائمة الجانبية --- */
.nav-body {
    background: #000; /* خلفية سوداء لتناسب الفيديو */
    display: flex;
    /* إجبار الحاوية على التمدد */
    width: 100%; 
    min-height: auto; /* زيادة الطول قليلاً */
    position: relative;
    border-radius: 0 0 15px 15px;
    overflow: hidden;
}

/* --- القائمة الجانبية (تغيير اللون للأخضر الغامق) --- */
.nav-sidebar {
    width: 100px;
    background: #1e3325; /* لون الخلفية أخضر براند */
    border-left: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    padding-top: 0;
    flex-shrink: 0; /* منع القائمة من الانكماش */
    z-index: 2;
    
}

.nav-side-btn {
    padding: 30px 5px;
    text-align: center;
    color: rgb(255, 255, 255); /* أيقونات بيضاء شفافة */
    transition: 0.3s;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.nav-side-btn i { font-size: 1.5rem; margin-bottom: 3px; }
.nav-side-btn span { font-size: 0.75rem; font-weight: bold; }

.nav-side-btn:hover { 
    color: #fff; 
    background: rgba(255,255,255,0.05); 
}

/* الزر الجانبي النشط */
.nav-side-btn.active {
    color: var(--brand-gold); /* الأيقونة ذهبية */
    background: #14241a; /* خلفية أغمق قليلاً */
    border-right: 4px solid var(--brand-gold);
}


/* --- منطقة العرض (تصحيح مشكلة الفراغ الأبيض) --- */
.nav-display-area {
    flex-grow: 1; /* يأخذ كل المساحة المتبقية */
    width: calc(100% - 100px); /* العرض الكامل ناقص عرض القائمة الجانبية */
    background: #000;
    position: relative;
    display: flex; /* لضمان تمدد العناصر الداخلية */
}

/* إجبار المحتوى الداخلي على الامتلاء */
.project-content, 
.view-layer, 
.view-layer iframe {
    width: 100% !important;
    height: 100% !important;
    border: none;
    display: block;
}

/* التحكم في ظهور الطبقات */
.project-content { display: none; }
.project-content.active { display: block; }

.view-layer { display: none; }
.view-layer.active { display: block; }

/* للموبايل */
@media (max-width: 768px) {
    .nav-body { flex-direction: column-reverse; }
    .nav-sidebar { 
        width: 100%; 
        flex-direction: row; 
        border-left: none; 
        border-top: 1px solid rgba(255,255,255,0.1);
    }
    .nav-display-area { width: 100%; height: 350px; }
    .nav-side-btn { border-bottom: none; flex: 1; padding: 15px 5px; }
    .nav-side-btn.active { border-right: none; border-bottom: 4px solid var(--brand-gold); }
}






/* =========================================
   تنسيق التبويبات الاحترافي (Smart Flex Layout)
   ========================================= */

.nav-tabs-wrapper {
    display: flex; /* ترتيب بجانب بعض */
    justify-content: space-between; /* توزيع المسافات */
    align-items: flex-end; /* محاذاة للقاع */
    gap: 0; /* الفراغ السحري: مسافة ثابتة ونظيفة بين كل تبويب */
    padding: 0 2px; /* هوامش دقيقة جداً من الأطراف */
    margin-bottom: -1px; /* دمج مع الشريط السفلي */
    position: relative;
    z-index: 5;
    direction: rtl; /* لضمان الترتيب العربي */
}

.nav-tab {
    position: relative;
    height: 48px; 
flex: 0 0 auto; /* التعديل هنا: العرض حسب المحتوى فقط */    background: #1e3325; 
    border: none;
    cursor: pointer;
    color: rgb(255, 255, 255);
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: skewX(-20deg); 
    border-radius: 8px 8px 0 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    user-select: none;
    min-width: 140px;
    overflow: hidden;
    flex-grow: 1; 
}

/* إصلاح ميلان النص */
.tab-text {
    display: block;
    transform: skewX(20deg); /* عكس الميلان ليظهر النص مستقيماً */
    pointer-events: none;
    white-space: nowrap; /* منع النص من النزول لسطرين */
    overflow: hidden;
    text-overflow: ellipsis; /* إضافة ... لو النص طويل */
}

/* --- التبويب النشط (Active) --- */
.nav-tab.active {
    background: #14241a;
    color: #ffffff;
    font-weight: 800;
    height: 70px;
    margin-top: -5px;
    z-index: 10;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.15);
    border-top: 2px solid #fff; /* لمسة فخامة */
    overflow: visible !important;
}

/* تأثير عند المرور بالماوس (Hover) */
.nav-tab:hover:not(.active) {
    /* background: #2a4532; */
    /* color: #fff; */
    /* height: 52px; */ /* يرتفع قليلاً عند المرور */
    /* margin-top: -4px; */
}

/* --- الستاند (المثلث الجانبي للتبويب النشط) --- */
/* هذا الجزء مهم جداً لإغلاق الفراغ المائل */
/* =========================================
   تعديل التبويب الأول (ليكون مستقيماً من اليمين)
   ========================================= */

/* 1. استهداف التبويب الأول فقط */
.nav-tabs-wrapper .nav-tab:first-child {
    transform: none !important; /* إلغاء الميلان الكامل */
    /*رسم الشكل: مستقيم من اليمين، مائل من اليسار */
    /* الرقم 18px يتحكم في درجة الميلان، يمكنك زيادته أو نقصانه */
    clip-path: polygon(18px 0, 100% 0, 100% 100%, 0% 100%);
    margin-left: -25px; /* سحب التبويب الأيسر ليدخل تحت الحالي */

}

/* 2. إصلاح النص داخل التبويب الأول (لأنه لم يعد مائلاً فلا نحتاج لعكسه) */
.nav-tabs-wrapper .nav-tab:first-child .tab-text {
    transform: none !important;
    padding-right: 5px; /* تعديل بسيط لمحاذاة النص */
}

/* 3. إخفاء مثلث الظل (الستاند) للتبويب الأول فقط */
/* لأنه أصبح مستقيماً وملاصقاً للحاوية فلا يوجد فراغ يحتاج لمثلث */
.nav-tabs-wrapper .nav-tab:first-child::before {
    display: none !important;
}


/* هذا الجزء سيجعل السكشن يملأ المكان خلف الهيدر حتى أعلى المتصفح */
.new-map-section, 
.hero-section, 
.hero-slider-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative;
    top: 0;
    width: 100%;
    /* لضمان أن الصورة أو الخلفية تبدأ من أعلى نقطة خلف الهيدر */
    z-index: 1; 
}


/* --- إصلاح الهيكل التنظيمي --- */
.new-map-section.vertical-hierarchy {
    height: auto !important; /* السماح للسكشن بالتمدد حسب المحتوى */
    min-height: 130vh;
    padding: 150px 20px 80px; /* مساحة للهيدر وللراحة البصرية */
    display: flex;
    justify-content: center;
    background-color: #1e3325; /* لضمان وضوح العناصر خلف الهيدر */
}

.hierarchy-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 65px; /* المسافة الرأسية بين المستويات */
    width: 100%;
    max-width: 1200px;
}

/* المستويات */
.level {
    display: flex;
    justify-content: center;
    gap: 100px; /* المسافة الأفقية بين الكروت في نفس المستوى */
    width: 100%;
    position: relative;
}

/* ضبط الكروت لتكون ثابتة الموقع وليست مطلقة absolute */
.map-card, .center-hub-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
}

/* تمييز كرت التطوير العقاري */
/* .development-card {
    border: 2px solid var(--brand-gold) !important;
    box-shadow: 0 0 25px rgba(207, 165, 88, 0.4);
}
.development-card .card-info {
    background: #fff;
} */

/* شبكة الفروع الأربعة في الأسفل */
.sub-branches-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 أعمدة متساوية */
    gap: 20px;
    width: 100%;
    max-width: 1000px;
}

.sub-card {
    width: 100% !important;
    min-width: 160px;
}

/* إلغاء الخطوط القديمة لأنها هي من تسبب الخراب البصري */
.connections-svg {
    display: none; 
}

/* تحسين الموبايل */
@media (max-width: 992px) {
    .level {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .sub-branches-grid {
        grid-template-columns: 1fr 1fr; /* صفين في كل صف كرتين */
    }
}
@media (max-width: 600px) {
    .sub-branches-grid {
        grid-template-columns: 1fr; /* عمود واحد للموبايل الصغير */
    }
}
.new-map-section.vertical-hierarchy {
    position: relative;
    overflow: visible !important; /* مهم لعدم قص الخطوط */
    z-index: 1;
}
.hierarchy-container {
    position: relative;
    z-index: 2; /* لضمان أن البوكسات فوق الخطوط ولا تعيق الضغط */
    pointer-events: none; /* لضمان وصول الماوس للروابط تحتها */
}
.map-card, .center-hub-card {
    pointer-events: auto;
}
@media (max-width: 992px) {
    .hierarchy-connector-lines {
        display: none;
    }
}
.hierarchy-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 100px; /* تباعد كافٍ للخطوط */
    position: relative;
    width: 100%;
    padding: 40px 0;
}
.v-line, .v-line-down, .h-line-top, .h-line-bottom {
    position: absolute;
    border: 1.5px dashed var(--brand-gold);
    z-index: 1;
    pointer-events: none;
    animation: dashMove 20s linear infinite;
}
@keyframes dashMove {
    to { stroke-dashoffset: -1000; } /* تحريك النقاط */
}
.level-1 .v-line {
    height: 100px;
    width: 0;
    bottom: -100px;
    left: 50%;
}
.h-line-top {
    width: 42%; /* عرض الخط بين البوكسين */
    height: 50px;
    top: -50px;
    border-bottom: none;
    border-left: 1.5px dashed var(--brand-gold);
    border-right: 1.5px dashed var(--brand-gold);
}
.v-line-down {
    height: 100px;
    width: 0;
    bottom: -100px;
    left: 50%;
}
.h-line-bottom {
    width: 76%; /* عرض يغطي الفروع الأربعة */
    height: 50px;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 1.5px dashed var(--brand-gold);
    border-bottom: none;
}
.level-3 {
    width: 100%;
    display: flex;
    justify-content: center;
    min-height: 200px; /* ضمان مساحة كافية للبوكسات */
}
.sub-branches-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 90%;
}
@media (max-width: 992px) {
    .v-line, .v-line-down, .h-line-top, .h-line-bottom {
        display: none;
    }
    .hierarchy-container { gap: 30px; }
    .sub-branches-grid { grid-template-columns: 1fr 1fr; }
}
.hierarchy-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 100px; /* تباعد كافٍ للخطوط */
    position: relative;
    width: 100%;
    padding: 40px 0;
}
.v-line, .v-line-down, .h-line-top, .h-line-bottom {
    position: absolute;
    border: 1.5px dashed var(--brand-gold);
    z-index: 1;
    pointer-events: none;
    animation: dashMove 20s linear infinite;
}
@keyframes dashMove {
    to { stroke-dashoffset: -1000; } /* تحريك النقاط */
}
.level-1 .v-line {
    height: 100px;
    width: 0;
    bottom: -100px;
    left: 50%;
}
.h-line-top {
    width: 42%; /* عرض الخط بين البوكسين */
    height: 50px;
    top: -50px;
    border-bottom: none;
    border-left: 1.5px dashed var(--brand-gold);
    border-right: 1.5px dashed var(--brand-gold);
}
.v-line-down {
    height: 100px;
    width: 0;
    bottom: -100px;
    left: 50%;
}
.h-line-bottom {
    width: 76%; /* عرض يغطي الفروع الأربعة */
    height: 50px;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 1.5px dashed var(--brand-gold);
    border-bottom: none;
}
.level-3 {
    width: 100%;
    display: flex;
    justify-content: center;
    min-height: 200px; /* ضمان مساحة كافية للبوكسات */
}
.sub-branches-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 90%;
}
@media (max-width: 992px) {
    .v-line, .v-line-down, .h-line-top, .h-line-bottom {
        display: none;
    }
    .hierarchy-container { gap: 30px; }
    .sub-branches-grid { grid-template-columns: 1fr 1fr; }
}
.new-map-section.vertical-hierarchy {
    position: relative;
    min-height: 900px; 
    display: flex;
    justify-content: center;
    overflow: visible !important; 
    padding: 100px 0;
}
.hierarchy-connector-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
    z-index: 1;
}
.hierarchy-container {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 90px; 
    width: 100%;
    max-width: 1200px;
}
.level-2 {
    display: flex;
    justify-content: center;
    gap: 200px;
    width: 100%;
}
.sub-branches-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    padding: 0 10px;
}
.line-path {
    animation: dashMove 30s linear infinite;
}
@media (max-width: 992px) {
    .hierarchy-connector-lines {
        display: none;
    }
    .level-2 {
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }
    .sub-branches-grid {
        grid-template-columns: 1fr 1fr;
    }
    .new-map-section.vertical-hierarchy {
        min-height: auto;
    }
}
.map-card {
    width: 160px;
    text-align: center;
    text-decoration: none;
    display: block;
    margin-top: 30px; 
}
.card-gif-box {
    width: 90px;
    height: 90px;
    background: #fff;
    border-radius: 50%;
    border: 3px solid var(--brand-gold);
    margin: 0 auto -45px; 
    position: relative;
    z-index: 15;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.card-gif-box img {
    width: 75%;
    height: 75%;
    object-fit: contain;
}
.card-info {
    background: #fff;
    padding: 55px 10px 15px; 
    border-radius: 15px;
    border: 1px solid #eee;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}
.map-card:hover .card-info {
    transform: translateY(-5px);
    border-color: var(--brand-gold);
}
.sub-branches-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}
.full-screen-map {
    height: 100vh !important; 
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}
.hierarchy-container-full {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 85%; 
    width: 95%;
    max-width: 1200px;
    z-index: 10;
}
.map-card {
    width: 140px;
}
.compact-gif {
    width: 70px !important;
    height: 70px !important;
    margin: 0 auto -35px !important;
}
.compact-info {
    padding: 40px 5px 10px !important;
}
.compact-info .branch-en { font-size: 0.75rem !important; }
.compact-info .branch-ar { font-size: 0.65rem !important; }
.level-2-compact {
    display: flex;
    justify-content: center;
    gap: 15%; 
}
.sub-branches-grid-compact {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    width: 100%;
}
.center-hub-card.compact {
    width: 130px;
    height: 130px;
}
/* body:has(.full-screen-map) {
    overflow: hidden;
} */
.full-screen-map {
    height: 100vh !important; 
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}
.hierarchy-container-full {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 85%;
    width: 95%;
    max-width: 1200px;
    z-index: 10;
}
.map-card {
    width: 140px;
}
.compact-gif {
    width: 70px !important;
    height: 70px !important;
    margin: 0 auto -35px !important;
}
.compact-info {
    padding: 40px 5px 10px !important;
}
.compact-info .branch-en { font-size: 0.75rem !important; }
.compact-info .branch-ar { font-size: 0.80rem !important; }
.level-2-compact {
    display: flex;
    justify-content: center;
    gap: 15%; 
}
.sub-branches-grid-compact {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    width: 100%;
}
.center-hub-card.compact {
    width: 130px;
    height: 130px;
}
/* body:has(.full-screen-map) {
    overflow: hidden;
} */
.hierarchy-container-full {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 85vh;
    width: 90%;
    max-width: 1200px;
    z-index: 10;
    padding: 20px 0;
}
.level-2-spaced {
    display: flex;
    justify-content: center;
    gap: 250px;
}

/* موبايل: هيدر */
@media (max-width: 768px) {
  /* الهيدر */
  header {
    top: 0;
    height: 60px;
    padding: 0 12px;
    background: var(--brand-green);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* الشعار */
  .logo-container {
    width: auto;
    height: 60px;
    margin: 0;
    padding: 0;
    background: transparent;
  }
  .logo-container::before,
  .logo-container::after {
    display: none !important; /* إلغاء الدرع الذهبي في الموبايل */
  }
  .logo {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .logo img {
    max-height: 35px;
    /* filter: brightness(0) invert(1);  */
  }

  /* زر القائمة */
  .menu-toggle {
    display: block !important;
    font-size: 1.6rem;
    color: var(--brand-gold);
    cursor: pointer;
    z-index: 1001;
    padding: 8px;
  }

  /* القائمة المنزلقة */
  .nav-menu {
    position: fixed;
    top: 60px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 60px);
    background: rgba(30, 51, 37, 0.98);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 15px 30px;
    gap: 12px;
    transition: left 0.35s ease;
    z-index: 999;
  }
  .nav-menu.active { left: 0; }

  .nav-menu a {
    color: #fff;
    font-size: 1.15rem;
    width: 100%;
    text-align: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .nav-menu a:hover {
    color: var(--brand-gold);
  }

  /* الإضافات في الهيدر (الصورة + الأيقونات) */
  .header-extras {
    width: 100%;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
  }
  .extra-header-img { height: 28px; }
  .header-separator { display: none; }
  .header-social {
    gap: 14px;
    border: none;
    padding: 0;
    margin: 0;
  }
  .header-social a {
    color: #fff;
    font-size: 1.1rem;
  }
}
/* موبايل: سكشن المخطط/الهيكل التنظيمي */
@media (max-width: 768px) {
  /* السكشن نفسه */
  .new-map-section {
    height: auto !important;
    min-height: auto;
    padding: 70px 12px 30px; /* مساحة تحت الهيدر */
    margin-top: 60px;        /* لأن الهيدر ثابت */
    background-attachment: scroll; /* تحسين الأداء في الموبايل */
    overflow: visible !important;  /* لا تمنع التمرير */
  }

  /* إخفاء خطوط الربط الديناميكية */
  #rtm-dynamic-svg,
  .connections-svg,
  .hierarchy-connector-lines {
    display: none !important;
  }

  /* الحاوية: ترتيب عمودي مريح */
  .hierarchy-container-full,
  .hierarchy-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 22px;
    width: 100%;
    height: auto;
    padding: 0;
  }

  /* مركز القابضة */
  .center-hub-card,
  .center-hub-card.compact {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 10px auto;
    border-width: 4px;
  }
  .center-hub-card img { width: 70%; }

  /* المستوى الثاني: الشركات الرئيسية */
  .level-2-compact,
  .level-2 {
    display: grid;
    grid-template-columns: 1fr 1fr; /* بطاقتان في الصف */
    gap: 12px;
    width: 100%;
    justify-content: center;
  }

  /* المستوى الثالث: الفروع */
  .sub-branches-grid-compact,
  .sub-branches-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* صفين */
    gap: 12px;
    width: 100%;
  }

  /* الكاردات: تكبير منطقة اللمس وتبسيط */
  .map-card {
    position: relative !important;
    width: 100%;
    max-width: 100%;
    text-align: center;
    margin: 0;
  }
  .card-gif-box,
  .compact-gif {
    width: 68px !important;
    height: 68px !important;
    margin: 0 auto -28px !important;
    border: 2px solid var(--brand-gold);
    background: #fff;
    border-radius: 50%;
  }
  .card-gif-box img { width: 80%; height: 80%; object-fit: contain; }

  .card-info,
  .compact-info {
    padding: 42px 8px 10px !important; /* مساحة أعلى لتعويض الدائرة */
    border-radius: 14px;
    border: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }
  .compact-info .branch-en,
  .card-info .branch-en {
    font-size: 0.8rem !important;
    font-weight: 700;
  }
  .compact-info .branch-ar,
  .card-info .branch-ar {
    font-size: 0.7rem !important;
    color: var(--brand-gold);
    font-weight: 700;
  }

  /* هوامش بين المستويات */
  .level { gap: 14px; }

  /* منع أي overflow يخنق التمرير داخل هذا السكشن */
  .new-map-section.vertical-hierarchy,
  .full-screen-map {
    overflow: visible !important;
    height: auto !important;
  }
}
/* ================================
   Mobile fixes (ADD AT END OF FILE)
   ================================ */
@media (max-width: 768px) {

  /* تصغير الكروت (البوكسات) */
  .map-card{
    width: min(150px, 46vw) !important;  /* أصغر + متجاوب */
    margin-top: 12px !important;
  }

  .card-gif-box,
  .compact-gif{
    width: 56px !important;
    height: 56px !important;
    margin: 0 auto -22px !important;
    border-width: 2px !important;
  }

  .card-info,
  .compact-info{
    padding: 30px 8px 10px !important;  /* أقل */
    border-radius: 12px !important;
  }

  .branch-en{
    font-size: 0.72rem !important;
  }
  .branch-ar{
    font-size: 0.62rem !important;
  }

  /* تقليل الفراغات بين الشبكات */
  .level-2, .level-2-compact{
    gap: 10px !important;
  }
  .sub-branches-grid, .sub-branches-grid-compact{
    gap: 10px !important;
  }

  /* لو تبغاها 2 عمود في الموبايل (كما عندك) خله ثابت */
  .level-2, .level-2-compact{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
}
/* ================================
   Mobile slide menu (ADD AT END)
   ================================ */
@media (max-width: 768px) {
  .menu-toggle{
    display: block !important;
    cursor: pointer;
    z-index: 1001;
  }

  /* القائمة: مخفية خارج الشاشة يمين */
  .nav-menu{
    position: fixed !important;
    top: 60px !important;
    right: -100% !important;
    left: auto !important;

    width: 100% !important;
    height: calc(100vh - 60px) !important;

    background: rgba(30, 51, 37, 0.98) !important;
    backdrop-filter: blur(12px);

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    padding: 20px 15px 30px !important;
    gap: 12px !important;

    transition: right .35s ease !important;
    z-index: 999 !important;
  }

  /* عند التفعيل تدخل الشاشة */
  .nav-menu.active{
    right: 0 !important;
  }
}/* =========================================
   إصلاح الموبايل مع الحفاظ على الخطوط
   ========================================= */

@media (max-width: 768px) {
  /* --- 1. السكشن: السماح بالتمدد --- */
  .new-map-section {
    height: auto !important;
    min-height: 100vh !important;
    padding: 100px 15px 40px !important;
    margin-top: 60px !important;
    overflow: visible !important;
  }

  /* --- 2. الـ SVG: إبقاؤه ظاهراً وتحديث موضعه --- */
  #rtm-dynamic-svg {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  /* --- 3. الحاوية: ترتيب عمودي مع z-index أعلى --- */
  .hierarchy-container-full,
  .hierarchy-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 60px !important; /* مسافة أكبر للخطوط */
    width: 100% !important;
    height: auto !important;
    padding: 20px 0 !important;
    position: relative !important;
    z-index: 10 !important; /* فوق الخطوط */
  }

  /* --- 4. بوكس القابضة --- */
  .center-hub-card,
  .center-hub-card.compact {
    position: relative !important;
    width: 110px !important;
    height: 110px !important;
    margin: 0 auto !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 15 !important;
  }

  /* --- 5. المستوى الثاني: عمودي بدلاً من أفقي --- */
  .level-2-compact,
  .level-2-spaced,
  .level-2 {
    display: flex !important;
    flex-direction: column !important; /* عمودي للخطوط */
    gap: 50px !important;
    width: 100% !important;
    align-items: center !important;
  }

  /* --- 6. المستوى الثالث: شبكة 2×2 --- */
  .sub-branches-grid-compact,
  .sub-branches-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px 15px !important; /* مسافة عمودية للخطوط */
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
  }

  /* --- 7. البوكسات --- */
  .map-card {
    position: relative !important;
    width: 100% !important;
    max-width: 160px !important;
    margin: 0 auto !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 12 !important;
  }

  /* --- 8. دائرة الـ GIF --- */
  .card-gif-box,
  .compact-gif {
    width: 68px !important;
    height: 68px !important;
    margin: 0 auto -30px !important;
    z-index: 13 !important;
  }

  /* --- 9. محتوى البوكس --- */
  .card-info,
  .compact-info {
    padding: 42px 10px 12px !important;
    border-radius: 12px !important;
    background: #fff !important;
    position: relative !important;
    z-index: 12 !important;
  }

  /* --- 10. النصوص --- */
  .card-info .branch-en,
  .compact-info .branch-en {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  .card-info .branch-ar,
  .compact-info .branch-ar {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
  }

  /* --- 11. تعديل خطوط الـ SVG للموبايل --- */
  .rtm-line {
    stroke-width: 1.5 !important; /* خطوط أنحف قليلاً */
    stroke-dasharray: 8 4 !important;
  }
}
/* =========================================
   إصلاح شعار الهيدر في الموبايل
   ========================================= */

@media (max-width: 768px) {
  /* --- الهيدر --- */
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    padding: 0 12px;
    background-color: var(--brand-green) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  }

  /* --- منطقة الشعار: إلغاء الدرع الذهبي --- */
  .logo-container {
    width: auto !important;
    height: 60px !important;
    min-width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    clip-path: none !important;
    border: none !important;
    box-shadow: none !important;
    position: relative !important;
    top: auto !important;
    overflow: visible !important;
  }

  /* إخفاء العناصر الزخرفية (الدرع) */
  .logo-container::before,
  .logo-container::after {
    display: none !important;
  }

  /* --- الشعار نفسه --- */
  .logo {
    width: auto !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .logo img {
    max-height: 38px !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
    /* filter: brightness(0) invert(1);  */
    margin: 0 !important;
  }

  /* --- زر القائمة (الثلاث خطوط) --- */
  .menu-toggle {
    display: block !important;
    font-size: 1.6rem !important;
    color: var(--brand-gold) !important;
    cursor: pointer;
    z-index: 1001;
    padding: 8px;
    background: transparent;
    border: none;
  }

  /* --- القائمة المنزلقة --- */
  .nav-menu {
    position: fixed;
    top: 60px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 60px);
    background: rgba(30, 51, 37, 0.98);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 30px 15px;
    gap: 15px;
    transition: left 0.35s ease;
    z-index: 999;
    overflow-y: auto;
  }

  .nav-menu.active {
    left: 0;
  }

  .nav-menu a {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    width: 100%;
    max-width: 300px;
    text-align: center;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transition: 0.3s;
    text-decoration: none;
  }

  .nav-menu a:hover {
    color: var(--brand-gold);
    background: rgba(255,255,255,0.05);
  }

  /* --- الإضافات (Social Icons + صورة رؤية 2030) --- */
  .header-extras {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  .extra-header-img {
    height: 30px;
    width: auto;
    opacity: 0.9;
  }

  .header-separator {
    display: none; /* إخفاء الفاصل في الموبايل */
  }

  .header-social {
    display: flex;
    gap: 18px;
    justify-content: center;
    border: none;
    padding: 0;
    margin: 0;
  }

  .header-social a {
    color: #fff;
    font-size: 1.3rem;
    transition: 0.3s;
  }

  .header-social a:hover {
    color: var(--brand-gold);
    transform: scale(1.1);
  }

  .header-social img {
    width: 28px;
    height: 28px;
    filter: brightness(0) invert(1);
  }
}

/* --- تأكيد عدم تداخل الهيدر مع المحتوى --- */
@media (max-width: 768px) {
  body {
    padding-top: 0 !important;
  }
  
  /* السكاشن الأولى تبدأ تحت الهيدر مباشرة */
  .new-map-section,
  .hero-section,
  .hero-slider-section {
    margin-top: 60px !important;
    padding-top: 40px !important;
  }
}

/* =========================================
   🔥 إصلاح نهائي للهيدر في الموبايل
   ========================================= */

@media (max-width: 768px) {
  /* --- 1. الهيدر الأساسي --- */
  header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 60px !important;
    padding: 0 15px !important;
    background: var(--brand-green) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 1000 !important;
    overflow: visible !important; /* مهم للشعار */
  }

  /* --- 2. حاوية الشعار: إلغاء كل التعقيدات --- */
  .logo-container {
    width: auto !important;
    height: 50px !important; /* ارتفاع معقول */
    min-width: auto !important;
    max-width: 150px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    clip-path: none !important;
    border: none !important;
    box-shadow: none !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
  }

  /* إزالة الأشكال الزخرفية (الدرع الذهبي) */
  .logo-container::before,
  .logo-container::after {
    content: none !important;
    display: none !important;
  }

  /* --- 3. الشعار نفسه --- */
  .logo {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .logo img {
    display: block !important; /* إجباره على الظهور */
    max-height: 50px !important;
    max-width: 120px !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
    /* filter: brightness(0) invert(1);  */
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important; /* ضمان عدم الشفافية */
  }

  /* --- 4. زر القائمة (الثلاث خطوط) --- */
  .menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 1.6rem !important;
    color: var(--brand-gold) !important;
    cursor: pointer !important;
    z-index: 1001 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }

  /* --- 5. القائمة المنزلقة --- */
  .nav-menu {
    position: fixed !important;
    top: 60px !important;
    left: -100% !important;
    right: auto !important;
    width: 100% !important;
    height: calc(100vh - 60px) !important;
    background: rgba(30, 51, 37, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 25px 15px !important;
    gap: 12px !important;
    transition: left 0.35s ease !important;
    z-index: 999 !important;
    overflow-y: auto !important;
  }

  .nav-menu.active {
    left: 0 !important;
  }

  .nav-menu a {
    color: #fff !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    width: 100% !important;
    max-width: 320px !important;
    text-align: center !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    transition: 0.3s !important;
    text-decoration: none !important;
  }

  .nav-menu a:hover {
    color: var(--brand-gold) !important;
    background: rgba(255,255,255,0.05) !important;
  }

  /* --- 6. الإضافات (الأيقونات والصور) --- */
  .header-extras {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
  }

  .extra-header-img {
    height: 28px !important;
    width: auto !important;
    opacity: 0.9 !important;
    display: block !important;
  }

  .header-separator {
    display: none !important;
  }

  .header-social {
    display: flex !important;
    gap: 18px !important;
    justify-content: center !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .header-social a {
    color: #fff !important;
    font-size: 1.2rem !important;
    transition: 0.3s !important;
  }

  .header-social a:hover {
    color: var(--brand-gold) !important;
    transform: scale(1.1) !important;
  }

  .header-social img {
    width: 26px !important;
    height: 26px !important;
    filter: brightness(0) invert(1) !important;
  }

  body {
    padding-top: 0 !important;
  }
  .new-map-section,
  .hero-section,
  .hero-slider-section {
    margin-top: 60px !important;
    padding-top: 30px !important;
  }
}
.truck-animation-section {
    position: relative;
    width: 100%;
    height: 150px;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.truck-animation-section::before {
    content: '';
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    height: 3px;
    background: repeating-linear-gradient(
        90deg,
        var(--brand-green) 0px,
        var(--brand-green) 10px,
        transparent 10px,
        transparent 20px
    );
    opacity: 0.3;
}
.moving-truck {
    position: absolute;
    width: 140px;
    height: auto;
    bottom: 25px;
    left: -180px;
    animation: truckMoveLoop 70s ease-in-out infinite; 
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.2));
}
@keyframes truckMoveLoop {
    0% {
        left: -180px;
    }
    85% {
        left: 100%; 
        opacity: 1;
    }
    86% {
        opacity: 0;
    }
    87% {
        left: -180px;
        opacity: 0;
    }
    100% {
        left: -180px;
        opacity: 1;
    }
}
@media (max-width: 768px) {
    .truck-animation-section {
        height: 120px;
    }
    .moving-truck {
        width: 100px;
        bottom: 20px;
        left: -120px;
        animation: truckMoveLoop 30s ease-in-out infinite;
    }
    @keyframes truckMoveLoop {
        0% { left: -120px; opacity: 1; }
        40% { left: calc(100% + 30px); opacity: 1; }
        41% { opacity: 0; }
        85% { left: -120px; opacity: 0; }
        100% { left: -120px; opacity: 1; }
    }
}
.hero-slider-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px; 
    overflow: hidden;
    margin-top: 0; 
    direction: ltr;
}
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.slide.active {
    opacity: 1;
    z-index: 1;
}
.slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}
.slide-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 900px;
    padding: 30px;
    transform: translateY(40px);
    transition: transform 1.2s ease, opacity 1.2s ease;
    opacity: 0;
    direction: rtl;
}
.slide.active .slide-content {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0.3s; 
}
.slide-title {
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 4rem;
    color: var(--brand-gold, #d4af37);
    margin-bottom: 20px;
    text-shadow: 0 3px 15px rgba(0,0,0,0.6);
    line-height: 1.2;
}
.slide-text {
    font-family: 'Cairo', sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: 35px;
    line-height: 1.7;
    color: #f0f0f0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.slider-btn {
    display: inline-block;
    padding: 15px 45px;
    background: var(--brand-gold, #d4af37);
    color: #1e3325;
    text-decoration: none;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: 8px;
    transition: all 0.4s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    border: 2px solid transparent;
}
.slider-btn:hover {
    background: #fff;
    color: var(--brand-green, #1e3325);
    border-color: var(--brand-gold, #d4af37);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}
.slider-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
    z-index: 10;
    transform: translateY(-50%);
    direction: ltr;
    pointer-events: none;
}
.nav-btn {
    pointer-events: all;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    color: #fff;
    border: 2px solid rgba(255,255,255,0.3);
    width: 55px;
    height: 55px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.3rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.nav-btn:hover {
    background: var(--brand-gold, #d4af37);
    color: #1e3325;
    border-color: var(--brand-gold, #d4af37);
    transform: scale(1.1);
}
.slider-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}
.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: 0.3s;
}
.dot.active {
    background: var(--brand-gold, #d4af37);
    width: 30px;
    border-radius: 6px;
}
@media (max-width: 992px) {
    .hero-slider-section {
        height: 100vh;
        min-height: 500px;
    }
    .slide-title {
        font-size: 2.8rem;
    }
    .slide-text {
        font-size: 1.2rem;
        margin-bottom: 25px;
    }
    .slider-btn {
        padding: 12px 35px;
        font-size: 1rem;
    }
    .slider-nav {
        padding: 0 20px;
    }
    .nav-btn {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
}
@media (max-width: 768px) {
    .slide-title {
        font-size: 2.2rem;
    }
    .slide-text {
        font-size: 1rem;
        line-height: 1.5;
    }
    .slider-btn {
        padding: 10px 28px;
        font-size: 0.95rem;
    }
    .nav-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}
@media (max-width: 576px) {
    .hero-slider-section {
        min-height: 400px;
    }
    .slide-content {
        padding: 20px 15px;
    }
    .slide-title {
        font-size: 1.8rem;
    }
    .slide-text {
        font-size: 0.9rem;
    }
}
.faq-section {
    background: linear-gradient(to bottom, #f8f9fa, #fff);
    position: relative;
    overflow: hidden;
        padding: 70px 0;

}
.faq-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
    pointer-events: none;
}
.faq-wrapper {
    display: grid;
    grid-template-columns: 355px 1fr;
    gap: 60px;
    margin-top: 50px;
    align-items: start;
}
.faq-nader-side {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.nader-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.nader-info-card {
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    border-top: 4px solid var(--brand-gold);
    text-align: center;
}
.nader-info-card h3 {
    font-family: 'Cairo', sans-serif;
    font-size: 1.8rem;
    color: var(--brand-green);
    margin-bottom: 10px;
    font-weight: 700;
}
.nader-info-card > p {
    color: #666;
    font-size: 1rem;
    margin-bottom: 20px;
}
.nader-badge-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nader-badge-list .badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--brand-green);
    border-right: 3px solid var(--brand-gold);
}
.nader-badge-list .badge i {
    color: var(--brand-gold);
    font-size: 1rem;
}
.faq-questions-side {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.faq-item {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}
.faq-item:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    border-color: var(--brand-gold);
}
.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 22px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    text-align: right;
    transition: all 0.3s ease;
    font-family: 'Cairo', sans-serif;
}
.faq-question:hover {
    background: #f8f9fa;
}
.faq-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}
.faq-text {
    flex: 1;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--brand-green);
    line-height: 1.4;
}
.faq-arrow {
    font-size: 1.2rem;
    color: var(--brand-gold);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.faq-item.active .faq-question {
    background: linear-gradient(135deg, var(--brand-green) 0%, #1a2e23 100%);
}
.faq-item.active .faq-text {
    color: #fff;
}
.faq-item.active .faq-arrow {
    transform: rotate(180deg);
    color: var(--brand-gold);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}
.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 25px 25px 25px;
}
.answer-content {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    border-right: 4px solid var(--brand-gold);
}
.nader-says {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e0e0e0;
}
.nader-says img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--brand-gold);
    object-fit: cover;
}
.nader-says span {
    font-weight: 700;
    color: var(--brand-gold);
    font-size: 0.95rem;
}
.answer-content p {
    color: #333;
    font-size: 1.05rem;
    line-height: 1.8;
    margin: 0;
}
.answer-content strong {
    color: var(--brand-gold);
    font-weight: 700;
}
.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 15px;
    background: linear-gradient(135deg, var(--brand-gold) 0%, #e6c36a 100%);
    color: var(--brand-green);
    text-decoration: none;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 1.0rem;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
}
.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(212, 175, 55, 0.4);
    background: linear-gradient(135deg, #e6c36a 0%, var(--brand-gold) 100%);
}
@media (max-width: 992px) {
    .faq-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .faq-nader-side {
        position: static;
        max-width: 400px;
        margin: 0 auto;
    }
    .nader-image {
        height: 380px;
    }
}
@media (max-width: 768px) {
    .faq-section {
        padding: 60px 15px;
    }
    .nader-image {
        height: 320px;
    }
    .nader-info-card h3 {
        font-size: 1.5rem;
    }
    .faq-question {
        padding: 18px 20px;
    }
    .faq-text {
        font-size: 1.05rem;
    }
    .answer-content p {
        font-size: 1rem;
    }
}
@media (max-width: 576px) {
    .faq-question {
        padding: 15px;
        gap: 12px;
    }
    .faq-icon {
        font-size: 1.5rem;
    }
    .faq-text {
        font-size: 0.95rem;
    }
    .faq-arrow {
        font-size: 1rem;
    }
    .answer-content {
        padding: 15px;
    }
    .nader-says img {
        width: 35px;
        height: 35px;
    }
}
.sitting-character {
        position: absolute;
        top: 0;
        right: 5%; 
        width: 14%; 
        min-width: 150px;
        transform: translateY(-60%);
        z-index: 10;
    }
    @media (max-width: 768px) {
        .sitting-character {
            right: 50%; 
            transform: translate(50%, -60%);
            width: 10%;
        }
    }
    @media (max-width: 768px) {
    .services-section::before {
        left: 0;         
        width: 100%;
        height: 30%;
        opacity: 0.1;      
        background-position: center; 
    }
}
.sign-video-overlay {
    position: fixed;
    bottom: 30px;    
    left: 30px;      
    width: 180px;    
    height: 180px;
    z-index: 9999;    
    display: none;     
    align-items: center;
    justify-content: center;
}
.sign-video-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid var(--brand-gold);
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0,0,0,0.3);
    background: #000;
    position: relative;
    animation: slideUpFade 0.4s ease-out;
}
.sign-video-circle video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.close-video-corner-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    background: var(--brand-green);
    color: #fff;
    border: 2px solid var(--brand-gold);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 26px;
    text-align: center;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.close-video-corner-btn:hover {
    background: var(--brand-gold);
    color: var(--brand-green);
}
@keyframes slideUpFade {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@media (max-width: 768px) {
    .sign-video-overlay {
        width: 140px;
        height: 140px;
        bottom: 20px;
        left: 20px;
    }
}
.moving-truck {
    position: absolute;
    width: 140px;
    height: auto;
    bottom: 25px;
    animation: truckContinuous 30s linear infinite; 
    z-index: 5;
}
@keyframes truckContinuous {
    0% {
        left: -150px; 
    }
    100% {
        left: 100%; 
    }
}
@media (max-width: 768px) {
    .truck-animation-section {
        height: 120px;
    }
    .moving-truck {
        width: 100px;
        bottom: 20px;
        animation: truckContinuous 8s linear infinite; 
    }
}
.hand-icon {
    height: 24px;  
    width: auto;
    transform: translateY(3px);
    filter: brightness(0) invert(1); 
    display: block;
}
@media (max-width: 768px) {
    .hand-icon {
        height: 24px;
        transform: translateY(0);
    }
}

/* تنسيق صورة الـ GIF في الزاوية */
.corner-gif-badge {
position: absolute;
    right: 0;
    width: 15%;
    height: auto;
    z-index: 100;
    pointer-events: none;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
}

/* في الموبايل، نصغرها ونعدل مكانها */
@media (max-width: 768px) {
    .corner-gif-badge {
        width: 60px;
        top: -20px;
        right: -10px;
    }
}

/* حاوية المعرض */
.gallery-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* الصور (مخفية إلا النشطة) */
.gallery-img {
    display: none;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; 
    animation: fadeEffect 0.5s; 
}

.gallery-img.active {
    display: block;
}

/* أزرار التنقل (يمين ويسار) */
.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    font-size: 2rem;
    padding: 10px 15px;
    cursor: pointer;
    transition: 0.3s;
    z-index: 10;
    border-radius: 5px;
}

.gallery-nav:hover {
    background-color: var(--brand-gold);
    color: #000;
}

.prev { left: 10px; }
.next { right: 10px; }

/* عداد الصور */
.gallery-counter {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
}

/* تأثير الظهور */
@keyframes fadeEffect {
    from {opacity: 0.4} 
    to {opacity: 1}
}

/* تنسيق سكشن الخريطة */
.map-section {
    position: relative;
    padding-bottom: 0 !important; /* إزالة البادينج السفلي لملء الشاشة */
}

.map-wrapper {
    position: relative;
    width: 100%;
    height: 500px; /* ارتفاع الخريطة */
    overflow: hidden;
    /* border-radius: 20px; */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-top: 30px;
}

.map-wrapper iframe {
    width: 100%;
    height: 100%;
    /* فلتر لجعل الخريطة تتماشى مع الثيم الداكن (اختياري) */
    filter: grayscale(100%) invert(92%) contrast(83%); 
    transition: filter 0.3s;
}

.map-wrapper:hover iframe {
    filter: grayscale(0%) invert(0%); /* عند الهوفر تظهر الألوان الطبيعية */
}

/* البطاقة العائمة */
.map-overlay-card {
    position: absolute;
    top: 50px;
    right: 50px; /* في العربية ستكون لليسار تلقائياً إذا كان الاتجاه RTL */
    background: linear-gradient(145deg, #1e3325 0%, #0f1f15 100%);
    color: #fff;
    padding: 30px;
    border-radius: 15px;
    width: 300px;
    border-right: 4px solid #cfa558; /* الخط الذهبي */
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    backdrop-filter: blur(5px);
}

.map-overlay-card h3 {
    color: #cfa558;
    margin-bottom: 15px;
    font-size: 1.4rem;
}

.map-overlay-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #ddd;
}

.map-features {
    list-style: none;
    padding: 0;
}

.map-features li {
    margin-bottom: 10px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.map-features li i {
    color: #cfa558;
}

/* تجاوب الموبايل */
@media (max-width: 768px) {
    .map-wrapper {
        height: 400px;
    }
    .map-overlay-card {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        margin: 0;
        border-radius: 0;
        border-right: none;
        border-bottom: 4px solid #cfa558;
    }
}

/* تنسيق شريط الدعوة لاتخاذ إجراء (CTA) */
.cta-strip-section {
    position: relative;
    background: linear-gradient(145deg, #1e3325 0%, #0f1f15 100%);
    padding: 60px 0;
    margin: 50px 0;
    overflow: hidden;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cta-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    max-width: 1200px;
    position: relative;
    z-index: 2;
}

.cta-text h3 {
    font-size: 2rem;
    color: #cfa558; /* الذهبي */
    margin-bottom: 10px;
}

.cta-text p {
    font-size: 1.1rem;
    color: #ccc;
    margin: 0;
}

.btn-download {
    background-color: #cfa558;
    color: #163235;
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 5px 15px rgba(207, 165, 88, 0.3);
}

.btn-download:hover {
    background-color: #fff;
    color: #163235;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
}

/* زخرفة خلفية */
.cta-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;opacity=0.05,<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="1" fill="white"/></svg>'); /* نقاط خفيفة */
    z-index: 1;
    opacity: 0.1;
}

/* تجاوب الموبايل */
@media (max-width: 768px) {
    .cta-content {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    
    .cta-text h3 {
        font-size: 1.6rem;
    }
    
    .btn-download {
        width: 100%;
        justify-content: center;
    }
}

/* إصلاح ارتفاع سكشن الخريطة */
.map-section {
    height: auto !important; /* لضمان أن يأخذ السكشن ارتفاع المحتوى كاملاً */
    overflow: visible !important; /* للسماح بظهور الظلال والحواف */
    margin-bottom: 80px; /* 👈 إضافة مسافة كبيرة تحت الخريطة */
    padding-bottom: 50px !important; /* إعادة البادينج السفلي */
}

/* تعديل سكشن البروشور ليكون منفصلاً تماماً */
.cta-strip-section {
    position: relative;
    z-index: 10; /* لضمان ظهوره في الطبقة الصحيحة */
    margin-top: 0; /* المسافة تم ضبطها من الخريطة */
    clear: both; /* لمنع أي تداخل مع عناصر عائمة سابقة */
}

/* تنسيق خلفية الخريطة لضمان ثبات الدبابيس */
.interactive-map {
    position: relative;
    width: 100%;
    height: 550px;
    background-color: #1e1e1e; /* لون احتياطي */
    overflow: hidden;
    /* border-radius: 20px; */
}

.map-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) invert(90%) contrast(85%); /* الفلتر الداكن */
    transition: transform 0.5s;
}

/* تنسيق الدبوس (Pin) */
.map-pin {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #fff;
    color: #163235;
    border: 2px solid #cfa558;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.map-pin:hover, .map-pin.active {
    background-color: #cfa558;
    color: #fff;
    transform: scale(1.2);
}

/* تأثير النبض (Pulse Animation) */
.pin-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #cfa558;
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* زر البطاقة */
.card-btn {
    display: inline-block;
    margin-top: 15px;
    color: #cfa558;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    transition: 0.3s;
}
.card-btn:hover { color: #fff; padding-right: 5px; }

/* تأثير انتقال البطاقة */
.map-overlay-card {
    transition: opacity 0.3s, transform 0.3s;
}
.map-overlay-card.updating {
    opacity: 0;
    transform: translateY(10px);
}

/* تنسيق الماركر داخل Leaflet */
.map-pin-marker {
    background-color: #163235;
    color: #cfa558;
    width: 40px;
    height: 40px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg); /* شكل قطرة الماء */
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #cfa558;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}

.map-pin-marker i {
    transform: rotate(45deg); /* تعديل ميلان الأيقونة */
    font-size: 1.2rem;
}

.map-pin-marker:hover {
    background-color: #cfa558;
    color: #163235;
    transform: rotate(-45deg) scale(1.2);
}

/* تحديث حاوية البطاقة */
.map-overlay-card {
    width: 320px; /* عرض ثابت مناسب */
    padding: 0; /* إزالة البادينج الداخلي لأننا سنستخدمه في العناصر */
    overflow: hidden; /* لقص زوايا الصورة */
    background: linear-gradient(145deg, #1e3325 0%, #0f1f15 100%); /* الخلفية الداكنة */
    border: 1px solid rgba(207, 165, 88, 0.3);
}

/* صورة المشروع */
.card-image-wrapper {
    position: relative;
    width: 100%;
    height: 160px; /* ارتفاع الصورة */
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

/* شارة الحالة (اختياري) */
.card-badge {
    position: absolute;
    top: 10px;
    right: 10px; /* اليسار في النسخة العربية RTL */
    background: #cfa558;
    color: #163235;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* جسم البطاقة */
.card-body {
    padding: 20px;
}

.card-body h3 {
    margin-top: 0;
    color: #cfa558;
}

.card-body p {
    font-size: 0.9rem;
    color: #ccc;
    margin-bottom: 15px;
    line-height: 1.4;
}

/* الأزرار */
.card-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.btn-tour, .btn-details {
    flex: 1; /* تقسيم المساحة بالتساوي */
    padding: 10px;
    text-align: center;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* زر الجولة الافتراضية (مميز) */
.btn-tour {
    background: #cfa558;
    color: #163235;
}
.btn-tour:hover {
    background: #fff;
}

/* زر التفاصيل (شفاف) */
.btn-details {
    border: 1px solid #cfa558;
    color: #cfa558;
}
.btn-details:hover {
    background: rgba(207, 165, 88, 0.1);
}

/* 1. جعل الخريطة ملونة دائماً (بدون هوفر) */
.map-wrapper iframe,
.map-wrapper,
.leaflet-layer,
.map-bg {
    filter: none !important; /* إلغاء الفلتر الرمادي */
    -webkit-filter: none !important;
}

/* 2. إصلاح اقتصاص الكارد (السماح للطول بالتمدد) */
.map-overlay-card {
    height: auto !important; /* السماح للكارد بالتمدد حسب المحتوى */
    min-height: 400px;
    padding-bottom: 20px; /* مسافة إضافية في الأسفل */
    overflow: hidden; /* لضمان عدم خروج الصور عن الحواف المستديرة */
    display: flex;
    flex-direction: column;
}

/* 3. تنسيق السلايدر داخل الكارد */
.card-slider-wrapper {
    position: relative;
    width: 100%;
    height: 180px; /* ارتفاع ثابت لمنطقة الصور */
    background: #000;
}

.card-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none; /* إخفاء الكل افتراضياً */
    animation: fadeIn 0.5s;
}

.card-slide-img.active {
    display: block; /* إظهار الصورة النشطة */
}

/* أزرار التنقل في السلايدر */
.card-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    z-index: 10;
    transition: 0.3s;
}

.card-slider-btn:hover {
    background: #cfa558;
    color: #000;
}

.prev-btn { left: 0; border-radius: 0 5px 5px 0; }
.next-btn { right: 0; border-radius: 5px 0 0 5px; }

@keyframes fadeIn {
    from { opacity: 0.5; }
    to { opacity: 1; }
}
/* حاوية الخريطة */
.map-wrapper {
    position: relative;
    width: 100%;
    height: 550px; /* ارتفاع ثابت للخريطة */
    overflow: hidden;
    /* border-radius: 20px; */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-top: 30px;
    background-color: #f0f0f0;
}

/* عنصر الخريطة (Leaflet) - الطبقة الخلفية */
#leaflet-map {
    width: 100%;
    height: 100%;
    z-index: 1; 
}

/* إلغاء الفلتر الرمادي لتظهر الخريطة ملونة */
.map-wrapper iframe, .map-wrapper, .leaflet-layer, .map-bg {
    filter: none !important;
    -webkit-filter: none !important;
}

/* الكارد العائم - الطبقة الأمامية */
.map-overlay-card {
    position: absolute;
    top: 20px;
    right: 45px;
    z-index: 999; /* رقم عالي ليكون فوق الخريطة */
    width: 320px;
    background: linear-gradient(145deg, #1e3325 0%, #0f1f15 100%);
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    border: 1px solid rgba(207, 165, 88, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: auto !important;
    min-height: 400px;
}

/* السلايدر داخل الكارد */
.card-slider-wrapper {
    position: relative;
    width: 100%;
    height: 180px;
    background: #000;
}

.card-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    animation: fadeIn 0.5s;
}
.card-slide-img.active { display: block; }

/* أزرار السلايدر */
.card-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    z-index: 10;
    font-size: 18px;
}
.card-slider-btn:hover { background: #cfa558; color: #000; }
.prev-btn { left: 0; }
.next-btn { right: 0; }

/* تفاصيل الكارد */
.card-body { padding: 20px; color: #fff; }
.card-body h3 { color: #cfa558; margin-top: 0; margin-bottom: 10px; }
.card-body p { font-size: 0.9rem; color: #ccc; margin-bottom: 15px; line-height: 1.4; }

.map-features { list-style: none; padding: 0; margin-bottom: 20px; }
.map-features li { margin-bottom: 8px; display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
.map-features li i { color: #cfa558; }

.card-actions { display: flex; gap: 10px; }
.btn-tour, .btn-details {
    flex: 1; padding: 10px; text-align: center; border-radius: 8px;
    font-size: 0.85rem; font-weight: bold; text-decoration: none; display: flex;
    align-items: center; justify-content: center; gap: 5px;
}
.btn-tour { background: #cfa558; color: #163235; }
.btn-details { border: 1px solid #cfa558; color: #cfa558; }

@keyframes fadeIn { from { opacity: 0.5; } to { opacity: 1; } }



/* المخطط الجديد */
/* =========================
   ORG TREE V3 (ADD AT END)
   ========================= */
.org-tree-v3{
  position: relative;
  overflow: visible !important; /* مهم لعدم قص الدائرة والـ GIF */
}

/* SVG يغطي السكشن كامل */
.org-tree-v3 .rtm-tree-svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2; /* فوق الخلفية */
}

/* الحاوية فوق الخطوط */
.org-tree-v3 .org-tree-wrap{
  position: relative;
  z-index: 5;
  width: min(1200px, 92vw);
  margin: 0 auto;
  height: 100%;
  padding: 50px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 66px;
}

/* صفوف المخطط */
.org-tree-v3 .org-row{
width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content:space-evenly;
}

/* الصف العلوي: 3 أعمدة (يسار - وسط - يمين) */
.org-tree-v3 .org-row--top{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(30px, 6vw, 120px);
  direction: ltr; /* تثبيت اليسار/يمين */
}

/* تثبيت مكان كل عنصر */
.org-tree-v3 #hub-coast{ justify-self: end; }
.org-tree-v3 #hub-eye{ justify-self: start; }
.org-tree-v3 #hub-main{ justify-self: center; }

/* الصف الأوسط */
.org-tree-v3 .org-row--mid{
  justify-content: center;
}

/* الشبكة السفلية 3 عناصر */
.org-tree-v3 .sub-branches-grid-3{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 150px;
  justify-items: center;
}

/* أهم نقطة: إلغاء absolute القديم للكروت داخل هذا السكشن */
.org-tree-v3 .map-card,
.org-tree-v3 .center-hub-card{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
}

/* أحجام متناسقة */
.org-tree-v3 .map-card{ width: 20%; }
.org-tree-v3 .center-hub-card.compact{ width: 135px; height: 135px; }

/* تحسين الكروت (اختياري بسيط) */
.org-tree-v3 .card-info{ transition: 0.25s ease; }
.org-tree-v3 .map-card:hover .card-info{
  transform: translateY(-4px);
  border-color: var(--brand-gold);
  
}

/* ستايل الخط */
.org-tree-v3 .rtm-line{
  fill: none;
  stroke: #cfa558;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 10;
  animation: rtmDash 30s linear infinite;
  opacity: 0.85;
}

/* موبايل: نخليه عمودي مرتب */
@media (max-width: 768px){
  .org-tree-v3 .org-tree-wrap{
    padding: 25px 0;
    gap: 35px;
  }

  .org-tree-v3 .org-row--top{
    grid-template-columns: 1fr;
    row-gap: 18px;
    direction: rtl;
    justify-items: center;
  }

  .org-tree-v3 .sub-branches-grid-3{
    grid-template-columns: 1fr 1fr;
    max-width: 420px;
    row-gap: 22px;
  }

  .org-tree-v3 .map-card{ width: min(160px, 44vw); }
}

/* FORCE SVG VISIBLE + ON TOP (ADD AT VERY END) */
#rtm-dynamic-svg{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 4 !important;
}


/* Move center hub slightly down */
#companies #hub-main.center-hub-card.compact{
  margin-top: 18px; /* جرّب 18 إلى 35 حسب ذوقك */
}


@media (max-width:768px){
.map-wrapper {
    height: 100vh;}
/* الخريطة */
#leaflet-map{
    height:60vh;
}

/* الكارد */
.map-overlay-card{
    position:fixed;
    bottom:0;
    right:0;
    left:0;
    top:auto;
    width:100%;
    border-radius:20px 20px 0 0;
    z-index:999;
    max-height:45vh;
    overflow-y:auto;
}

/* الصور */
#card-images-container img{
    height:160px;
}

/* الأزرار */
.card-slider-btn{
    padding:10px 14px;
    font-size:18px;
}

/* المحتوى */
.card-body{
    padding:15px;
}

.card-body h3{
    font-size:18px;
}

.card-body p{
    font-size:14px;
}

/* الأزرار السفلية */
.card-actions{
    display:flex;
    gap:10px;
}

.card-actions a{
    flex:1;
    text-align:center;
}

/* الهيدر */
.section-header h2{
    font-size:20px;
}

}




/* =========================================
   FLIP CARD EFFECT - Project Cards
   ========================================= */

/* الحاوية الأساسية */
.flip-card {
    background-color: transparent;
    height: 400px;
    perspective: 1000px; /* عمق التأثير ثلاثي الأبعاد */
    cursor: pointer;
}

/* الحاوية الداخلية التي تقلب */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

/* الحدث: عند الهوفر نقلب */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* الوجه الأمامي والخلفي - مشترك */
.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 15px;
    overflow: hidden;
}

/* ========== الوجه الأمامي (كما كان) ========== */
.flip-card-front {
    background-color: #fff;
}

.flip-card-front .project-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.flip-card-front .project-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgb(0 55 18), transparent);
    padding: 30px 20px;
    color: #fff;
    text-align: right;
}

.flip-card-front .project-title {
    font-size: 1.4rem;
    color: var(--brand-gold);
    margin-bottom: 5px;
}

.flip-card-front .project-location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    color: #ddd;
}

/* ========== الوجه الخلفي (الجديد - الأخضر الغامق) ========== */
.flip-card-back {
    background: var(--brand-green); /* #1e3325 */
    background: linear-gradient(145deg, #1e3325 0%, #0f1f15 100%);
    color: white;
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--brand-gold);
}

.back-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.back-title {
    font-family: 'Cairo', sans-serif;
    font-size: 1.6rem;
    color: var(--brand-gold);
    margin: 0;
}

.back-desc {
    font-size: 0.95rem;
    color: #ccc;
    line-height: 1.6;
    margin: 0;
}

/* ========== الزرين ========== */
.back-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.btn-flip {
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* زر تصفح البروفايل - ذهبي */
.btn-browse {
    background: var(--brand-gold);
    color: var(--brand-green);
}

.btn-browse:hover {
    background: #fff;
    color: var(--brand-green);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(207, 165, 88, 0.4);
}

/* زر التنزيل - شفاف مع إطار */
.btn-download {
    background: transparent;
    color: var(--brand-gold);
    border: 2px solid var(--brand-gold);
}

.btn-download:hover {
    background: var(--brand-gold);
    color: var(--brand-green);
    transform: translateY(-2px);
}

/* ========== Responsive للموبايل ========== */
@media (max-width: 768px) {
    .flip-card {
        height: 350px;
    }
    
    .back-title {
        font-size: 1.3rem;
    }
    
    .back-desc {
        font-size: 0.85rem;
    }
    
    .btn-flip {
        padding: 12px 16px;
        font-size: 0.9rem;
    }
}



/* =========================================
   STATUS BADGE - شارة حالة المشروع
   ========================================= */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: 'Cairo', sans-serif;
    margin-bottom: 10px;
    width: fit-content;
    backdrop-filter: blur(4px);
}

/* حالة: تم البيع - أحمر داكن */
.status-badge.sold {
    background: rgba(183, 28, 28, 0.9);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(183, 28, 28, 0.3);
}

.status-badge.sold i {
    color: #ffcdd2;
    font-size: 0.75rem;
}

/* حالة: جاري البيع - ذهبي/أخضر */
.status-badge.available {
    background: rgba(207, 165, 88, 0.95);
    color: #1e3325;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(207, 165, 88, 0.4);
    animation: pulse-badge 2s infinite;
}

.status-badge.available i {
    color: #1e3325;
    font-size: 0.75rem;
}

/* تأثير نبض للشارة النشطة */
@keyframes pulse-badge {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(207, 165, 88, 0.4);
    }
    50% {
        box-shadow: 0 4px 20px rgba(207, 165, 88, 0.7);
    }
}

/* تعديل الـ overlay لاستيعاب الشارة */
.flip-card-front .project-overlay {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* محاذاة لليمين في RTL */
    text-align: right;
}

/* تعديل العنوان */
.flip-card-front .project-title {
    margin-bottom: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .status-badge {
        font-size: 0.75rem;
        padding: 5px 12px;
    }
}



/* الحاوية الأب */
.org-tree-wrap {
    position: relative !important; /* ضروري جداً */
    width: 100%;
    /* تأكد من عدم وجود transform هنا لأنه قد يخرب الحسابات أحياناً */
}

/* الـ SVG */
.rtm-tree-svg {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* خلف البوكسات */
    pointer-events: none;
    overflow: visible; /* للسماح برسم المنحنيات خارج الحدود قليلاً */
}



.new-map-section.org-tree-v3 {
    position: relative;
    width: 100%;
    
    /* 1. اجبار السكشن على ملء الشاشة بالكامل */
    height: 120vh; 
    min-height: 700px; /* لضمان عدم تداخل العناصر في الشاشات القصيرة */
    
    /* 2. إلغاء أي هوامش خارجية قد تسبب الإزاحة */
    margin: 0 !important;
    padding: 0 !important;
    
    /* 3. التوسيط المثالي باستخدام Flexbox */
    display: flex;
    align-items: center; /* توسيط عمودي */
    justify-content: center; /* توسيط أفقي */
    
    /* الخلفية */
    background: linear-gradient(rgb(30 51 37 / 36%), rgb(30 51 37 / 38%)), url(images/bg.jpeg), 
                url(images/bg.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* السماح للمحتوى بالظهور فوق الخلفية */
    overflow: hidden; 
}

.org-tree-wrap {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1200px; /* عرض مناسب للمحتوى */
    
    /* جعل الحاوية تأخذ ارتفاعاً مرناً للتوزيع */
    height: 100%;
    max-height: 85vh; /* نترك مساحة للهيدر والفوتر */
    
    display: flex;
    flex-direction: column;
    justify-content: space-evenly; /* توزيع المسافات بالتساوي بين الصفوف */
    align-items: center;
    
    /* تعويض مساحة الهيدر العلوية */
    padding-top: 60px; 
}

@media (max-width: 768px) {
    .new-map-section.org-tree-v3 {
        height: auto !important; /* السماح بالتمرير */
        min-height: 100vh;
        padding-top: 80px !important; /* مساحة للهيدر */
        padding-bottom: 40px !important;
        align-items: flex-start; /* نبدأ من الأعلى */
    }
    
    .org-tree-wrap {
        height: auto;
        justify-content: flex-start;
        gap: 30px; /* مسافة ثابتة بين العناصر */
        max-height: none;
    }
}

@media (max-width: 768px) {
    
    /* ... أكوادك السابقة للموبايل ... */

    /* هذا التعديل خاص بالشبكة السفلية */
    .sub-branches-grid-3 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* عمودين متساويين */
        gap: 50px 10px !important; /* مسافات بين البوكسات */
        justify-items: center;
        width: 100%;
        max-width: 380px; /* لضمان عدم تباعدها كثيراً */
        margin: 0 auto;
    }

    /* 🔥 الحل السحري لتوسيط آخر بوكس 🔥 */
    .sub-branches-grid-3 .map-card:last-child {
        grid-column: span 2; /* يجعله يأخذ عرض العمودين (الصف بالكامل) */
        justify-self: center; /* يضعه في المنتصف تماماً */
        margin-top: 5px; /* مسافة بسيطة للترتيب */
    }
    
}

#hub-main {
    position: relative;
    z-index: 10;
}
#hub-main::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(207, 165, 88, 0.6);
    animation: pulse-ring 2s infinite;
    z-index: -1;
}
@keyframes pulse-ring {
    0% { width: 100%; height: 100%; opacity: 1; }
    100% { width: 140%; height: 140%; opacity: 0; }
}



/* تنسيق البوكسات لتكون مضيئة جداً */
.map-card, .center-hub-card {
/* background-color: #fffbf2 !important; */
    /* border: 1px solid #bf9a53 !important; */
    /* box-shadow: 0 0 0px rgb(190 154 82 / 91%), 0 0 35px rgb(191 154 82 / 61%), 0 0 40px rgba(255, 204, 0, 0.4) !important; */
    transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

/* عند مرور الماوس يزداد التوهج */
.map-card:hover, .center-hub-card:hover {
    /* box-shadow: 
        0 0 20px rgba(255, 204, 0, 1), 
        0 0 50px rgba(255, 204, 0, 0.8), 
        0 0 80px rgba(255, 204, 0, 0.6) !important; */
    transform: scale(1.05);
}




/* =========================================
   تعديل الكروت: زجاجية + حواف متقابلة
   ========================================= */

/* 1. تنسيق الكروت الجانبية والفرعية */
.map-card {
    background: rgb(11 61 27 / 50%) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid #cfa558 !important;
    border-radius: 26px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(207, 165, 88, 0.3), inset 0 0 20px rgba(207, 165, 88, 0.1) !important;
    transition: all 0.3s ease;
    overflow: hidden;



    /* 1. الخلفية الزجاجية النظيفة (بدون حدود هنا) */
    background: rgb(11 61 27 / 50%) !important;
    /* backdrop-filter: blur(5px) !important; */
    
    /* الشكل والظل */
    border-radius: 26px !important;
    border: none !important; /* مهم جداً: إلغاء أي حدود هنا */
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3), 
        inset 0 0 20px rgba(207, 165, 88, 0.1) !important;
        
    transition: transform 0.3s ease !important;
    z-index: 1;
}

/* العنصر الوهمي: هو الذي سيصنع الحدود المتلاشية */
.map-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important; /* يغطي الكارت بالكامل */
    border-radius: 26px !important; /* نفس انحناء الكارت */
    padding: 2px !important; /* سمك الإطار الذهبي */
    
    /* 2. التدرج الذهبي في الركنين المتقابلين */
    background: 
    radial-gradient(circle at top left, #ffdfa4 0%, transparent 50%), radial-gradient(circle at bottom right, #ffdb99 0%, transparent 50%) !important;
    /* 3. القناع السحري: يقص المنطقة الوسطى ويترك الأطراف فقط (الإطار) */
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    
    pointer-events: none !important; /* للسماح بالنقر على الكارت */
    z-index: 2 !important; /* يظهر فوق الزجاج */
}

/* عند المرور: تكبير بسيط */
.map-card:hover {
    transform: translateY(-5px) !important;
}



/* 2. تنسيق "رتم القابضة" (الوسط) - دائري زجاجي */
.center-hub-card {
   background: rgb(11 61 27 / 50%) !important;
    backdrop-filter: blur(5px) !important;
    border: 3px solid #ffdea3 !important;
    border-radius: 50% !important; /* الحفاظ على الدائرة */
    box-shadow: 0 0 40px rgba(207, 165, 88, 0.4) !important;
}

/* 3. إصلاح النصوص داخل الزجاج */
.branch-en {
    color: #fff !important;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8); /* ظل قوي للنص ليبرز */
    font-weight: 700 !important;
    font-family: 'Cairo', sans-serif !important;
    letter-spacing: 1px;
}

.branch-ar {
    color: #cfa558 !important; /* ذهبي */
    font-weight: 700 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}

/* 4. تعديل دائرة الـ GIF لتندمج مع الزجاج */
.card-gif-box {
    background: transparent !important; /* شفافة */
    border: none !important; /* إزالة حدود الدائرة الداخلية */
    box-shadow: none !important;
    margin-bottom: -15px !important;
}

/* تكبير المحتوى الداخلي قليلاً */
.card-info {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-top: 10px !important;
}



/* =========================================
   تنسيق الدائرة لتكون مثل "الكرة الزجاجية" (كما في الصورة)
   ========================================= */

.org-tree-v3 .card-gif-box,
.org-tree-v3 .compact-gif {
    /* --- 1. التموضع (لم يتغير) --- */
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 25 !important;
    margin: 0 !important;

    /* --- 2. الحجم والشكل --- */
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important; /* شكل دائري كامل */

    /* --- 3. تصميم الكرة الزجاجية (التعديل الجديد) --- */
    
    /* الخلفية: تدرج خطي من الأبيض القوي في الأعلى إلى الشفاف في الأسفل */
    background: linear-gradient(
        180deg, 
        rgba(255, 255, 255, 0.95) 0%,   /* أبيض ناصع في القمة (اللمعة) */
        rgba(230, 230, 230, 0.7) 40%,   /* رمادي فاتح في المنتصف */
        rgba(100, 100, 100, 0.1) 100%   /* شفاف/داكن في الأسفل */
    ) !important;

    /* الحدود: إطار أبيض ناعم */
    border: 2px solid rgb(207 165 88 / 84%) !important;

    /* الظلال: السر في جعلها تبدو كـ "كرة" مجسمة */
    box-shadow: inset 0 5px 15px rgb(240 208 149 / 82%), inset 0 -10px 20px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.15) !important; /* ظل خارجي لرفعها عن البوكس */

    /* --- 4. تنسيق المحتوى --- */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(2px); /* تغبيش بسيط جداً */
}

/* تنسيق الصورة داخل الدائرة */
.org-tree-v3 .card-gif-box img,
.org-tree-v3 .compact-gif img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    position: static !important;
    transform: none !important;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.2)); /* ظل خفيف للصورة نفسها */
}

/* تنظيف محتوى البوكس الكبير (ضروري لعدم التداخل) */
.org-tree-v3 .map-card {
    overflow: visible !important;
    padding-top: 30px !important;
}
.card-gif-box {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: -15px !important;
}
.compact-gif {
    width: 70px !important;
    height: 70px !important;
    margin: 0 auto -35px !important;
}
/* اجعل الخطوط في الخلفية تماماً */
.org-tree-v3 .rtm-tree-svg {
    z-index: 1 !important; /* طبقة منخفضة */
}

/* اجعل البوكسات في الأمام لتغطي أطراف الخطوط */
.org-tree-v3 .map-card, 
.org-tree-v3 .center-hub-card {
    z-index: 10 !important; /* طبقة أعلى */
    /* تأكد من وجود خلفية (حتى لو زجاجية) لتغطي الخط */
    backdrop-filter: blur(10px); 
}




/* ======================================================
   FIX: إعادة ترتيب الهرم العلوى للموبايل (Holding Down)
   ====================================================== */
@media (max-width: 768px) {

    /* 1. تحويل الحاوية العلوية لشبكة (Grid) */
    .org-tree-v3 .org-row--top-unified {
        display: grid !important;
        /* تقسيم السطر الأول لعمودين متساويين (لأجل Care و Construction) */
        grid-template-columns: 1fr 1fr !important; 
        gap: 20px 10px !important; /* مسافات بين العناصر */
        justify-items: center !important;
        align-items: start !important;
        padding-bottom: 30px !important; /* مسافة تفصلهم عن الصف اللي بعده */
    }

    /* 2. التحكم في ترتيب العناصر (Reordering) */
    
    /* رتم كير (RTM Care) - يبقى في الأعلى */
    .org-tree-v3 #hub-coast {
        order: 1 !important; 
        width: 100% !important;
        max-width: 160px !important;
    }

    /* رتم كونستركشن (RTM Construction) - يصعد للأعلى بجانب كير */
    .org-tree-v3 #hub-eye {
        order: 2 !important;
        width: 100% !important;
        max-width: 160px !important;
    }

    /* 3. رتم القابضة (Holding) - تنزل للأسفل وتتوسط */
    .org-tree-v3 #hub-main {
        order: 3 !important; /* يجبره ينزل بعد العنصرين الأولين */
        grid-column: span 2 !important; /* يأخذ عرض العمودين بالكامل ليضمن سطر لوحده */
        justify-self: center !important; /* يتوسط السطر */
        margin-top: 10px !important; /* مسافة إضافية تفصله عن اللي فوقه */
        transform: scale(1.1) !important; /* (اختياري) تكبير بسيط لتمييزها كشركة أم */
    }
}

/* =========================================
   تنسيقات سكشن مراحل البناء
   ========================================= */
.process-section {
    padding: 80px 20px;
    background: linear-gradient(to bottom, #f9f9f9, #fff);
    overflow: hidden;
}

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

.process-section .main-title {
    font-size: 2.5rem;
    color: #1e3325; /* اللون الكحلي الغامق */
    font-weight: 800;
    margin-bottom: 10px;
}

.process-section .highlight {
    color: #cfa558; /* اللون الذهبي */
}

.process-section .sub-title {
    color: #777;
    font-size: 1.1rem;
}

/* حاوية التايم لاين */
.process-timeline-wrapper {
    position: relative;
    padding: 20px 0;
    overflow-x: auto; /* يسمح بالسكرول الجانبي في الموبايل */
    -webkit-overflow-scrolling: touch;
}

/* الخط الذهبي الرابط */
.timeline-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #e0e0e0;
    z-index: 0;
    transform: translateY(-50%);
    display: none; /* مخفي في الموبايل */
}

@media (min-width: 992px) {
    .timeline-line { display: block; }
}

.process-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    min-width: 1000px; /* لضمان عرض العناصر بشكل جيد */
    position: relative;
    z-index: 1;
    padding-bottom: 20px;
}

/* العنصر الواحد */
.process-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transition: transform 0.3s ease;
}

.process-item:hover {
    transform: translateY(-10px);
}

/* البوكس التوضيحي */
.process-item .info-box {
    background: #fff;
    border: 1px solid #eee;
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 20px; /* مسافة بين البوكس والصورة */
    position: relative;
    min-width: 140px;
    border-top: 3px solid #cfa558;
}

/* سهم صغير أسفل البوكس */
.process-item .info-box::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: #fff;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
}

.step-num {
    display: block;
    font-size: 0.9rem;
    color: #ccc;
    font-weight: bold;
    margin-bottom: 5px;
}

.process-item h4 {
    font-size: 1rem;
    color: #333;
    margin: 0;
    font-weight: 700;
}

/* النقطة المركزية على الخط */
.step-dot {
    width: 12px;
    height: 12px;
    background: #cfa558;
    border-radius: 50%;
    margin-bottom: 20px;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #cfa558;
    position: relative;
    z-index: 2;
}

/* حاوية الصورة */
.img-wrapper {
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* خلفية دائرية خفيفة خلف الصورة */
    background: radial-gradient(circle, rgba(207,165,88,0.1) 0%, rgba(255,255,255,0) 70%);
}

.img-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
    filter: drop-shadow(0 10px 10px rgba(0,0,0,0.1));
}

.process-item:hover .img-wrapper img {
    transform: scale(1.15);
}

/* تمييز المرحلة الأخيرة */
.highlight-img img {
    filter: drop-shadow(0 0 15px rgba(207, 165, 88, 0.4));
}

/* تحسينات الموبايل */
@media (max-width: 768px) {
    .process-timeline-wrapper {
        padding-bottom: 40px; /* مساحة لسحب الاصبع */
    }
    
    .process-grid {
        min-width: 180%; /* توسيع العرض للسماح بالسكرول */
        padding: 0 20px;
    }

    .main-title {
        font-size: 1.8rem !important;
    }
}




/* =========================================
   تنسيقات سكشن الحاسبة (نسخة مطابقة للـ FAQ)
   ========================================= */

/* نفس حاوية السكشن لضمان نفس الهوامش */
.calculator-section {
    padding: 80px 0;
    background-color: #1e3325; /* نفس خلفية الـ FAQ المحتملة أو أبيض */
    position: relative;
    overflow: hidden;
}

/* الحاوية المرنة لتقسيم الصفحة */
.calc-wrapper {
    display: flex;
    align-items: flex-start; /* محاذاة من الأعلى */
    justify-content: space-between;
    gap: 50px;
    margin-top: 40px;
}

/* --- الجزء الأيمن: نموذج الحاسبة (يأخذ مساحة الأسئلة) --- */
.calc-form-side {
    flex: 1; /* يأخذ المساحة المتبقية */
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* نفس ظل كروت الأسئلة */
    border: 1px solid #eee;
}

/* شبكة الحقول (لتعطي مساحة واسعة) */
.calc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* عمودين */
    gap: 25px;
}

.calc-input-group {
    display: flex;
    flex-direction: column;
}

.calc-input-group label {
    font-weight: 700;
    margin-bottom: 10px;
    color: #1a4d2e; /* نفس لون نصوص سند */
    display: flex;
    align-items: center;
    gap: 8px;
}

.calc-input-group label i {
    color: #cfa558; /* الذهبي */
}

/* ستايل الحقول ليشبه ستايل أزرار الأسئلة */
.calc-field {
    width: 100%;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    font-size: 1rem;
    transition: 0.3s;
    color: #333;
}

.calc-field:focus {
    outline: none;
    border-color: #cfa558;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(207, 165, 88, 0.1);
}

/* السلايدر */
.range-container {
    grid-column: span 2; /* يأخذ العرض كامل */
    background: #fcfcfc;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #eee;
    text-align: center;
}

.range-slider {
    width: 100%;
    margin: 15px 0;
    accent-color: #1a4d2e;
    cursor: pointer;
}

/* زر الحساب */
.btn-calculate {
    grid-column: span 2;
    background: #1a4d2e;
    color: #fff;
    font-weight: 700;
    padding: 18px;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.btn-calculate:hover {
    background: #143d24;
    transform: translateY(-2px);
}

/* نتيجة الحساب */
.calc-result-box {
    grid-column: span 2;
    margin-top: 20px;
    padding: 20px;
    background: #fff8e6; /* خلفية ذهبية فاتحة جداً */
    border: 1px dashed #cfa558;
    border-radius: 12px;
    text-align: center;
    display: none; /* مخفي افتراضياً */
}

.calc-result-box h3 {
    color: #1a4d2e;
    margin: 0;
    font-size: 2rem;
}

/* --- الجزء الأيسر: شخصية نور (نفس ستايل سند) --- */
.nour-side {
    width: 350px; /* نفس عرض سايدبار سند */
    flex-shrink: 0;
    position: sticky;
    top: 20px;
    text-align: center;
}

.nour-image img {
    width: 100%;
    max-width: 280px;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
    margin-bottom: -40px; /* تداخل الصورة مع الكرت */
    position: relative;
    z-index: 2;
}

.nour-info-card {
    background: #fff;
    padding: 50px 20px 25px; /* بادينج علوي كبير عشان الصورة */
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    position: relative;
    z-index: 1;
    border-bottom: 4px solid #cfa558; /* الخط الذهبي */
}

.nour-info-card h3 {
    color: #1a4d2e;
    font-size: 1.4rem;
    margin-bottom: 5px;
}

.nour-info-card p {
    color: #777;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

/* ريسبونسيف للجوال */
@media (max-width: 991px) {
    .calc-wrapper {
        flex-direction: column-reverse; /* نور فوق، الحاسبة تحت */
        align-items: center;
    }
    
    .nour-side {
        width: 100%;
        max-width: 350px;
        position: static;
        margin-bottom: 40px;
    }
    
    .calc-grid {
        grid-template-columns: 1fr;
    }
    
    .range-container, .btn-calculate, .calc-result-box {
        grid-column: span 1;
    }
}


/* --- إعدادات القسم الرئيسي --- */
.calculator-section {
    background-color: #1e3325; /* الأخضر الغامق */
    padding: 80px 0;
    color: #fff;
    font-family: 'Cairo', sans-serif; /* تأكد من وجود الخط */
}

.section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}
.section-header h2 { margin: 10px 0; font-size: 2.5rem; }
.section-header span { color: #cfa558; font-weight: bold; letter-spacing: 1px; }
.separator { height: 3px; width: 60px; background: #cfa558; margin: 10px auto; }

/* --- الحاوية المرنة (Layout Wrapper) --- */
.calc-wrapper {
    display: flex; /* أساسي لجعل العناصر متجاورة */
    align-items: stretch; /* السر لجعل البطاقتين بنفس الطول */
    gap: 30px; /* المسافة بين البطاقتين */
    justify-content: center;
}

/* --- تنسيق البطاقات (مشترك) --- */
.calc-card, .nour-card {
    background: #fff;
    border-radius: 25px;
    padding: 35px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
}

/* --- 1. بطاقة الحاسبة (يمين) --- */
.calc-card {
    flex: 1.5; /* تأخذ مساحة أكبر قليلاً 60% */
}

.card-header h3 {
    color: #1b4d3e;
    margin-bottom: 25px;
    font-size: 1.5rem;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
}

.calc-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%; /* لملء الارتفاع */
    justify-content: space-between;
}

.calc-input-group label {
    display: block;
    color: #333;
    font-weight: bold;
    margin-bottom: 8px;
}

/* حقول الإدخال مع أيقونات */
.input-with-icon {
    position: relative;
}
.input-with-icon i {
    position: absolute;
    left: 15px; /* للأيقونة في اليسار */
    top: 50%;
    transform: translateY(-50%);
    color: #cfa558;
}
.calc-field {
    width: 100%;
    padding: 15px 15px 15px 40px; /* بادينغ يسار للأيقونة */
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #f9f9f9;
    font-size: 1rem;
    transition: 0.3s;
}
.calc-field:focus {
    border-color: #cfa558;
    background: #fff;
    outline: none;
}

/* السلايدر */
.range-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.range-value {
    color: #1b4d3e;
    font-weight: bold;
    font-size: 1.2rem;
}
.range-slider {
    width: 100%;
    accent-color: #1b4d3e; /* لون السلايدر أخضر */
    height: 6px;
    background: #e0e0e0;
    border-radius: 5px;
    appearance: none;
}
.range-labels {
    display: flex;
    justify-content: space-between;
    color: #999;
    font-size: 0.85rem;
    margin-top: 5px;
}

/* زر الحساب */
.btn-calculate {
    background: #1b4d3e;
    color: #fff;
    padding: 18px;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.btn-calculate:hover {
    background: #143d2f;
    transform: translateY(-2px);
}

/* نتيجة الحساب */
.calc-result-box {
    text-align: center;
    margin-top: 15px;
    padding: 15px;
    background: #fffbea;
    border: 1px dashed #cfa558;
    border-radius: 12px;
}
.calc-result-box h3 {
    color: #1b4d3e;
    margin: 5px 0 0;
    font-size: 1.8rem;
}
.calc-result-box p { color: #777; margin: 0; font-size: 0.9rem; }


/* --- 2. بطاقة نور (يسار) --- */
.nour-card {
    flex: 1; /* تأخذ مساحة أصغر 40% */
    background: linear-gradient(to bottom, #fff 80%, #f4fdf8 100%); /* تدرج خفيف جداً في الأسفل */
    align-items: center;
    justify-content: space-between; /* توزيع العناصر بالتساوي */
    position: relative;
    border: 2px solid #cfa558; /* إطار ذهبي لتمييز نور */
}

/* فقاعة الدردشة */
.nour-chat-header {
    width: 100%;
    margin-bottom: 20px;
}
.chat-bubble {
    background: #1b4d3e; /* فقاعة خضراء */
    color: #fff;
    padding: 15px 20px;
    border-radius: 15px;
    position: relative;
    text-align: center;
}
.chat-bubble h3 { margin: 0 0 5px; font-size: 1.2rem; }
.chat-bubble p { margin: 0; font-size: 0.85rem; opacity: 0.9; }

/* ذيل الفقاعة */
.bubble-tail {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #1b4d3e; /* نفس لون الفقاعة */
}

/* الصورة */
.nour-image-area {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nour-img {
    max-width: 180px;
    height: auto;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.15));
    transition: transform 0.3s ease;
}
.nour-card:hover .nour-img {
    transform: scale(1.05); /* تكبير بسيط عند التحويم */
}

/* المميزات السفلية */
.nour-features {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}
.feature-item {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}
.check-icon {
    width: 25px; height: 25px;
    background: #e6f4ea;
    color: #1b4d3e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    margin-left: 10px;
}
.feature-item span {
    font-weight: bold;
    color: #555;
    font-size: 0.9rem;
}

/* --- التجاوب (Responsive) --- */
@media (max-width: 992px) {
    .calc-wrapper {
        flex-direction: column-reverse; /* عكس الترتيب في الموبايل */
        align-items: center;
    }
    .calc-card, .nour-card {
        width: 100%;
        flex: auto;
    }
    .nour-img {
        max-width: 150px; /* تصغير الصورة في الموبايل */
    }
}



/* =========================================
   تنسيق التبويبات الاحترافي (Smart Flex Layout)
   ========================================= */

.nav-tabs-wrapper {
    display: flex;
    justify-content: flex-start; /* التعديل هنا: محاذاة للبداية (يمين في العربي) */
    align-items: flex-end;
    gap: 0;
    padding: 0;
    margin-bottom: -1px;
    position: relative;
    z-index: 5;
    /* direction: rtl;  <-- يفضل حذف هذا السطر ليعتمد الاتجاه على لغة الصفحة (body dir) */
}

.nav-tab {
    position: relative;
    height: 70px;
    /* flex: 1;  <-- تم الحذف لمنع التمدد */
    flex: 0 0 auto; /* التعديل هنا: العرض حسب المحتوى فقط */
    background: #1e3325;
    border: none;
    cursor: pointer;
    color: rgb(255, 255, 255);
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: skewX(-20deg);
    border-radius: 8px 8px 0 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    user-select: none;
    min-width: 140px; /* تقليل العرض الأدنى قليلاً */
    overflow: hidden;
    padding: 0 20px; /* إضافة حشوة داخلية للنص */
}





/* --- حاوية السكشن الرئيسية --- */
.tour-container {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-top: 20px;
    border: 1px solid #e1e1e1;
}

/* --- التبويبات العلوية (ستايلك القديم) --- */
.nav-tabs-wrapper {
    display: flex;
    background: #ffffff;
    padding-top: 0px;
    padding-right: 0;
    border-bottom: 1px solid #ddd;
}

.nav-tab {
    background: #1e3325; /* لونك الأخضر */
    color: #fff;
    border: none;
    padding: 12px 35px;
    margin-left: 2px;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    font-family: inherit;
    transition: all 0.3s ease;
    opacity: 0.8;
}

.nav-tab.active {
    background: #fff; /* تبويب نشط */
    color: #1e3325;
    font-weight: bold;
    opacity: 1;
    border-top: 3px solid #cfa558; /* الخط الذهبي */
}

/* --- جسم السكشن (Layout) --- */
.tour-body {
    display: flex;
    height: 550px; /* ارتفاع السكشن */
    background: #fff;
}

/* --- القائمة الجانبية (ستايل Floorfy) --- */
.sidebar-menu {
    width: 160px; /* عرض القائمة */
    background: #fff;
    border-left: 1px solid #eee; /* فاصل خفيف */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 10px;
    gap: 15px;
    overflow-y: auto;
}

.sidebar-btn {
    width: 130px;
    height: 130px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 5px;
}

.sidebar-btn .icon-circle {
    font-size: 30px;
    color: #555;
    margin-bottom: 5px;
    transition: color 0.2s;
}

.sidebar-btn span {
    font-size: 14px;
    color: #666;
    font-weight: 600;
}

/* تأثير الـ Hover */
.sidebar-btn:hover {
    border-color: #ff6b35; /* البرتقالي */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.sidebar-btn:hover .icon-circle {
    color: #ff6b35;
}

/* الزر النشط */
.sidebar-btn.active {
    background: #ff6b35; /* الخلفية البرتقالية */
    border-color: #ff6b35;
}

.sidebar-btn.active .icon-circle,
.sidebar-btn.active span {
    color: #fff !important;
}

/* --- منطقة العرض (الشاشة السوداء) --- */
.display-area {
    flex: 1;
    position: relative;
    background: #000;
    overflow: hidden;
}

.view-layer {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
}

.view-layer.active {
    display: block;
}

.view-layer iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* --- أزرار طافية (مشاركة وتكبير) --- */
.floater-btn {
    position: absolute;
    z-index: 10;
    background: rgba(255,255,255,0.9);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.share-btn { top: 20px; left: 20px; }
.fullscreen-btn { bottom: 20px; left: 20px; }

.floater-btn:hover {
    background: #fff;
    transform: scale(1.1);
}

/* --- تنسيقات إضافية (الصور، رسائل الانتظار) --- */
.placeholder-msg {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #fff;
}

.gallery-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
}

.gallery-img {
    max-width: 100%;
    max-height: 100%;
    display: none;
}
.gallery-img.active { display: block; }

.gal-nav {
    position: absolute;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    padding: 15px;
    cursor: pointer;
    font-size: 18px;
}
.gal-nav.prev { right: 10px; }
.gal-nav.next { left: 10px; }

.desc-content {
    padding: 40px;
    background: #fff;
    height: 100%;
    overflow-y: auto;
    color: #333;
    text-align: right;
}

/* --- التجاوب مع الجوال --- */
@media (max-width: 768px) {
    .tour-body {
        flex-direction: column-reverse; /* القائمة تحت العرض */
        height: auto;
    }
    
    .sidebar-menu {
        width: 100%;
        flex-direction: row;
        border-left: none;
        border-top: 1px solid #eee;
        overflow-x: auto;
        justify-content: flex-start;
    }
    
    .sidebar-btn {
        min-width: 70px;
        height: 65px;
    }
    
    .display-area {
        height: 350px;
    }
}


/* ================= تعديلات الهوية البصرية والشكل ================= */

/* 1. تعريف لون الهوية (غير هذا الكود للون الخاص بك بالضبط) */
:root {
    --brand-color: #D4AF37; /* اللون الذهبي/البرتقالي الخاص بهويتك */
    --card-bg: #1e1e1e;     /* لون خلفية الكارت (داكن) */
    --text-color: #ffffff;  /* لون النص */
}

/* 2. جعل الكروت مربعة الشكل */
.project-card {
    width: 100%;             /* تأخذ عرض العمود */
    aspect-ratio: 1 / 1;     /* هذا السطر السحري يجعلها مربعة دائماً مهما كان حجم الشاشة */
    display: flex;
    flex-direction: column;
    justify-content: center; /* توسيط المحتوى عمودياً */
    align-items: center;     /* توسيط المحتوى أفقياً */
    
    /* 3. تطبيق ألوان الهوية */
    background-color: var(--card-bg);
    border: 1px solid #333;  /* حدود خفيفة */
    color: var(--text-color);
    border-radius: 12px;     /* حواف ناعمة قليلاً */
    transition: all 0.3s ease;
    overflow: hidden;        /* لضمان عدم خروج الصورة عن المربع */
}

/* 4. تأثير عند تمرير الماوس (Hover) */
.project-card:hover {
    border-color: var(--brand-color);       /* تلون الإطار بلون الهوية */
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3); /* توهج بلون الهوية */
    transform: translateY(-5px);            /* رفعة بسيطة للأعلى */
}

/* 5. تنسيق الصورة داخل المربع لملء الفراغ */
.project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* الصورة تغطي المربع بالكامل دون أن تتمطط */
}

/* 6. تنسيق الأزرار الجانبية لتأخذ نفس الهوية */
.sidebar-btn.active {
    background-color: #cfa558 !important;
    color: #000 !important; /* النص يصبح أسود ليناسب الخلفية المضيئة */
    border-color: var(--brand-color) !important;
}