:root {
    --bg-dark: #02121a; 
    --glass-card-bg: rgba(255, 255, 255, 0.02);
    --input-recessed: rgba(0, 0, 0, 0.35);
    --accent-orange: #a3462b;
    --text-white: #ffffff;
    --text-gray: #cfd8dc;
    --border-light: rgba(255, 255, 255, 0.15);
	
}
.bg-img {
    display: none;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Tajawal', sans-serif;
}
.navbar {
    
    display: flex;
    justify-content: flex-start; /* تغيير التوزيع ليبدأ من اليمين */
    align-items: center;
    padding: 5px;
	  padding-bottom: 20px;
    background: #fff;
    position: relative;
    z-index: -500;
    gap:200px; /* المسافة بين اللوجو وأول عنصر في المنيو */
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 25px; /* المسافة بين روابط المنيو وبعضها */
}

/* باقي الكود كما هو لضمان التنسيق */
/* تعديل روابط المنيو */
.nav-links li a {
    text-decoration: none;
    color: #333;
    
    /* تكبير حجم الخط */
    font-size: 1.8rem; /* جربي 1.5 أو 1.6 حسب ذوقك */
    
    /* جعل الخط عريض (Bold) */
    font-weight: 300; /* الرقم 700 يعطي سماكة واضحة جداً */
    
    white-space: nowrap; 
    transition: all 0.3s ease;
}

/* تعديل الرابط النشط (Active) ليتناسب مع الحجم الجديد */
.nav-links li a.active {
    border: 2px solid #333; /* زيادة سمك الإطار قليلاً */
    padding: 8px 15px;      /* تعديل المسافات الداخلية لتناسب الخط الكبير */
    border-radius: 30px;
}
/* Navbar Styles - المنيو الجديدة */
.logo img {
    height: 80px; /* يمكنك التحكم في الارتفاع لتقليل سمك المنيو */
    width: auto;
    display: block;
    
}
/* المنيو - تقليل البادينج السفلي */
/* التعديل الجديد للمنيو بجانب اللوجو مباشرة */



/* باقي الكود كما هو لضمان التنسيق */

.nav-links li a.active {
    border: 2px solid #333; /* زيادة سمك الإطار قليلاً */
    padding: 8px 15px;      /* تعديل المسافات الداخلية لتناسب الخط الكبير */
    border-radius: 30px;
}
/* تعديلات الصفحة لضمان عدم وجود فراغ أبيض */
body {
	padding-top:20px;
    margin: 0;
    min-height: 100vh;
    /* اللون الأزرق هو اللون الأساسي للخلفية عشان يغطي أي مساحة تحت */
    background-color: #041f2d; 
    
    /* بنرسم الجزء الأبيض فوق اللون الأزرق */
    background-image: linear-gradient(#ffffff 500px, transparent 500px);
    
    /* بنمنع التكرار عشان الأبيض ميتكررش تاني تحت */
    background-repeat: no-repeat;
}

.page-title {
    margin-top: -250px; /* تقليل المسافة بعد المنيو البيضاء */
	  border-radius: 40px 40px 0 0; 
}

/* استجابة الشاشات الصغيرة للمنيو */


/* Background Stars */


/* السكشن الرئيسي الحاوي لكل شيء */
/* تنسيق النجوم الموزعة */


/* نجمة خلف العنوان جهة اليمين (مثل الصورة) */


/* نجمة خلف العنوان جهة اليسار */


/* نجمة خلف الكارد من الأسفل */
/* نجمة مختلفة في بداية الصفحة جهة اليسار بلونها الأصلي */


/* تأكد من إضافة z-index للمحتوى ليظهر فوق النجوم */
/* تنسيق العنوان ليظهر فوق السكشن */
.page-title {
    text-align: center;
    font-size:9rem;
    color: #ffffff; /* لون النص أبيض ليناسب خلفية الصفحة الداكنة */

    margin-bottom: 110px;
    font-weight: 900;
    position: relative;
    z-index: 10;
}
.hero-section{

    border-radius: 40px 40px 0 0; 
}
/* سكشن الصورة - نظيف تماماً وبدون ألوان إضافية */
/* سكشن الصورة - إظهار الصورة كاملة */
/* تعديل الهيدر ليظهر فوق كل شيء */


/* إصلاح تداخل السكشن مع المنيو */
.contact-section {
    position: relative;
    width: 100%; /* العرض ثابت بعرض الصفحة */
    
    background-image: url('contact.png');
    background-color: #041f2d; 
    
    /* الإعدادات لعدم تشويه الصورة */
    background-repeat: no-repeat;
    background-position: top center; /* تبدأ من فوق لتحافظ على الطول */
    background-size: 100% auto; /* أهم سطر: العرض 100% والطول يتحدد تلقائياً */
/* زيادة الرقم الأول (300px) سيزيد من طول القسم دون التأثير على عرض الصورة */
    padding: 300px 20px 150px 20px;

    border-radius: 60px 60px 0 0; 
    
    /* زيادة الرقم الأول (300px) سيزيد من طول القسم دون التأثير على عرض الصورة */

    
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

/* التأكد من أن الروابط تظهر بشكل جيد */

/* تأكد من أن الـ body لا يغير لون الخلفية تحت العنوان */

/* تحديث الـ form-card ليكون أكثر شفافية وجمالاً كما في صورتك */

/* تنسيق النصوص داخل الكارد */
.form-card label {
    display: block;
    margin-bottom: 8px;
    font-size: 1.6rem;
    font-weight: 900;
	color: #ffffff;
	padding-right:25px;
}

/* تنسيق الصفوف والحقول */
.input-row {
    display: flex;
   
}

.field-group {
    flex: 1;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
}
.input-field::placeholder {
    color: #ffffff;
    font-size: 1.7rem;
		font-weight: 500;
}
.input-field1::placeholder {
    color: #ffffff;
    font-size: 1.7rem;
		font-weight: 500;
}
.input-field1 {
    width: 630px;
    
    /* خلفية شفافة تماماً أو مائلة للشفافية */
    background: rgba(255, 255, 255, 0.05); 
    
    /* تأثير تغبيش الخلفية (اختياري لزيادة واقعية الزجاج) */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* الحواف والديكور */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 35px 35px;
    color: white;
    font-size: 1rem;
    font-family: 'Tajawal', sans-serif;
    outline: none;
    transition: all 0.3s ease;
  
    /* تأثير البروز والشادو المطلوب */
    box-shadow: 
        0px 10px 20px rgba(0, 0, 0, 0.3), 
        inset 0px 2px 4px rgba(255, 255, 255, 0.2),
        inset 0px -2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* إضافة تأثير عند الضغط أو الكتابة لزيادة التفاعل */
.input-field1:focus {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0px 5px 15px rgba(0, 0, 0, 0.4), 
        inset 0px 2px 4px rgba(255, 255, 255, 0.3);
}
.input-field {
    width: 1300px;
    
    /* خلفية شفافة تماماً أو مائلة للشفافية */
    background: rgba(255, 255, 255, 0.05); 
    
    /* تأثير تغبيش الخلفية (اختياري لزيادة واقعية الزجاج) */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* الحواف والديكور */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 18px 35px;
    color: white;
    font-size: 3rem;
    font-family: 'Tajawal', sans-serif;
    outline: none;
    transition: all 0.3s ease;

    /* تأثير البروز والشادو المطلوب */
    box-shadow: 
        0px 10px 20px rgba(0, 0, 0, 0.3), 
        inset 0px 2px 4px rgba(255, 255, 255, 0.2),
        inset 0px -2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* إضافة تأثير عند الضغط أو الكتابة لزيادة التفاعل */
.input-field:focus {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0px 5px 15px rgba(0, 0, 0, 0.4), 
        inset 0px 2px 4px rgba(255, 255, 255, 0.3);
}
/* تنسيق صندوق الهاتف */
.phone-box {
    display: flex;
    /* row-reverse في بيئة RTL (العربية) سينقل العناصر لليسار */
    flex-direction: row-reverse; 
    justify-content: flex-end; /* يضمن التصاقهم بجهة اليسار */
    gap: 10px;
    align-items: center;
    width: 100%;
}

.flag-capsule {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #02121a; 
    padding: 18px 20px; 
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    /* نلغي أي هوامش قديمة قد تسبب تداخل */
    margin: 0; 
}

.input-field.phone-input {
    flex: 1; 
    text-align: left; 
    direction: ltr; /* لكتابة الأرقام من اليسار لليمين بشكل صحيح */
}
/* تعديل حقل الإدخال ليسمح بوجود الكبسولة على اليسار */
.value-orange { background: rgba(135, 63, 41, 0.9); }
/* زر الإرسال */
.btn-submit {
    background: var(--accent-orange);
    color: white;
	
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 15px 80px;
    border-radius: 50px;
    font-size: 1.3rem;
    font-weight: bold;
    cursor: pointer;
    display: block;
    margin: 40px auto 0;
    transition: all 0.3s ease;

    /* تأثير البروز للزر */
  box-shadow: 
        0px 10px 20px rgba(0, 0, 0, 0.3), 
        inset 0px 2px 4px rgba(255, 255, 255, 0.2),
        inset 0px -2px 6px rgba(0, 0, 0, 0.4) !important;
}

.btn-submit:hover {
    transform: scale(1.05) translateY(-3px);
    background: #b54d2f; /* درجة أفتح قليلاً عند الهوفر */
    box-shadow: 
        0px 15px 30px rgba(0, 0, 0, 0.6), 
        inset 0px 4px 10px rgba(255, 255, 255, 0.4);
}

/* متجاوب مع الموبايل */


/* Recessed Inputs */
.input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: -8px;
}



/* Phone Input Customization */
.phone-box {
    position: relative;
    display: flex;
    align-items: center;
}

.flag-capsule {
    position: absolute;
    right: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-light);
    padding: 6px 15px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
}

/* Textarea */
textarea.input-field {
    border-radius: 40px;
    resize: none;
}

/* Submit Button */
.btn-submit {
    background: var(--accent-orange);
    color: white;
    border: none;
    padding: 15px 80px;
    border-radius: 50px;
    font-size: 1.3rem;
    font-weight: bold;
    cursor: pointer;
    display: block;
    margin: 40px auto 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
    transition: transform 0.2s;
	
}

.btn-submit:hover {
    transform: scale(1.05);
}

/* Info Section (Bottom Card) */
/* الحاوية الرئيسية */
.info-section {
	
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 80px auto;
	padding-top:50px;
    padding: 40 20px;
	
}

.info-glass {
	  background: rgba(255, 255, 255, 0.01); 
    
    /* تأثير الضباب القوي */
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    
    /* انحناء كبير دائري كما في فيجما */
    border-radius: 100px; 
    
    /* اللمعة البيضاء العلوية (مأخوذة من كود فيجما الخاص بك) */
    box-shadow: 
        inset 0px 4px 10px rgba(255, 255, 255, 0.5), /* اللمعة الداخلية */
        0px 20px 40px rgba(0, 0, 0, 0.3);           /* الظل الخارجي */
    
  
    border: 1px solid rgba(255, 255, 255, 0.1);

    position: relative;
    z-index: 2;
  padding-top:80px;
 padding-bottom:80px;

    display: flex;
    /* row-reverse يجعل الخريطة يسار والنصوص يمين */
    flex-direction: row-reverse; 
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    overflow: hidden;
}

/* قسم الخريطة (الشمال) */
.map-container {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.map-bg-frame {
    background-size: cover;
    background-position: center;
    padding:10px; /* مسافة لظهور البرواز الخلفي */
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-border {
    border: 10px solid #2d3d33; /* الإطار الأخضر */
    border-radius: 40px;
    overflow: hidden;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1.4 / 1;
}

.map-frame {
    width: 100%;
    height: 120%;
    object-fit: cover;
}

/* قسم النصوص (اليمين) */
.details-text {
    flex: 1;
	padding-left:120px;
    display: flex;
    flex-direction: column;
    align-items: flex-end; 
    text-align: right;
    color: white;
	font-size: 1.3rem;
	
}

.footer-logo {
    width:220px;
    margin-bottom: 25px;
	 margin-left: 50px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}

.info-item p {
    margin: 0;
    font-size: 1.7rem;
    color: #e0e0e0;
}

.icon {
    font-size: 1.3rem;
    color: #fff;
}

/* كبسولة السوشيال ميديا */
.social-capsule {
	   background: rgba(255, 255, 255, 0.01); 
    	 margin-left: 20px;
    /* تأثير الضباب القوي */
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    
    /* انحناء كبير دائري كما في فيجما */
    border-radius: 100px; 
    
    /* اللمعة البيضاء العلوية (مأخوذة من كود فيجما الخاص بك) */
    box-shadow: 
        inset 0px 4px 10px rgba(255, 255, 255, 0.5), /* اللمعة الداخلية */
        0px 20px 40px rgba(0, 0, 0, 0.3);           /* الظل الخارجي */
    
  
    border: 1px solid rgba(255, 255, 255, 0.1);

    padding: 15px 35px;
    margin-top: 10px;
    text-align: center;
}

.social-icons {
    display: flex;
    gap: 20px; /* زيادة المسافة بين الأيقونات لتناسب الحجم الجديد */
    margin-top: 15px;
    align-items: center; /* لضمان محاذاة الأيقونات في المنتصف */
}

.social-icons .social-img {
    width: 20px;  /* يمكنك تغيير الرقم (مثلاً 50px) حسب الحجم المطلوب */
    height: 20px; /* الحفاظ على الطول مساوي للعرض */
    transition: transform 0.3s ease; /* إضافة تأثير تفاعلي عند المرور بالماوس */
    object-fit: contain; /* لضمان عدم تشوه الصورة */
}

/* تأثير اختياري: تكبير بسيط عند وضع الماوس على الأيقونة */
.social-icons .social-img:hover {
    transform: scale(1.1);
}

.social-icons a {
    color: white;
    font-size: 1rem;
    opacity: 0.8;
    transition: 0.3s;
}

.social-icons a:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* النجمة البرتقالية */
.bg-star-orange {
    position: absolute;
    bottom: -380px;
    right:-50px;
    width: 350px;
    height: 550px;
    z-index: 1;
    pointer-events: none;
    opacity: 0.6;
}
@media (max-width: 768px) {
  .bg-star-orange {
    opacity: 0;
  }
}
@media (max-width: 768px) {
  .bg-star-orange,
  .bg-star-orange::before,
  .bg-star-orange::after {
    display: none !important;
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 0 !important;
  }
}

/* الطبقة الأساسية: الصورة كاملة بدون بلور */
.bg-star-orange::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('red.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* مسح الجزء العلوي تدريجياً لترك مساحة للبلور */
    -webkit-mask-image: linear-gradient(to top, black 50%, transparent 100%);
    mask-image: linear-gradient(to top, black 50%, transparent 100%);
}
/* موبايل فقط */
@media (max-width: 768px) {
  .bg-star-orange::before {
    display: none;
  }
}

/* الطبقة العلوية: الصورة مع البلور */
.bg-star-orange::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('red.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* تطبيق البلور */
    filter: blur(15px); 
    /* إظهار الجزء العلوي فقط وتلاشيه عند المنتصف */
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

/* الموبايل */
@media (max-width: 850px) {
    .info-glass {
        flex-direction: column; /* العودة للوضع الرأسي في الموبايل */
        border-radius: 40px;
    }
    .details-text {
        align-items: center;
        text-align: center;
    }
    .info-item {
        flex-direction: row-reverse;
    }
}
.rights-footer {
    width: 100%;
    max-width: 1100px; /* ليتحاذى مع بداية سكشن الخريطة */
    margin: 0 auto;    /* لتوسيط الحاوية */
    padding: 100px 40px; 
    text-align: left;  /* نقل النص لجهة اليسار */
    direction: ltr;    /* جعل الاتجاه من اليسار لليمين ليناسب اللغة الإنجليزية */
}

.rights-footer p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.5); /* لون هادئ */
    margin: 0;
}

/* للموبايل: يفضل التوسيط لسهولة القراءة */
@media (max-width: 768px) {
    .rights-footer {
        text-align: center;
        padding: 20px;
    }
}
.text-content{
font-size: 1.9rem;
}
/* =========================
   MOBILE RESPONSIVE FIX
   ========================= */
@media (max-width: 768px) {

    /* منع السكرول الأفقي */
    html, body {
      
    }

    /* ================= NAVBAR ================= */
    .navbar {
        flex-direction: column;
        gap: 20px;
        padding: 15px 10px;
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .nav-links li a {
        font-size: 1rem;
    }

 
    /* ================= TITLE ================= */
    .page-title {
        font-size: 3rem;
        margin-top: 20px;
        margin-bottom: 40px;
    }

    /* ================= CONTACT SECTION ================= */
    .contact-section {
        padding: 180px 15px 80px;
        background-size: cover;
    }

  
    /* ================= PHONE INPUT ================= */
    .phone-box {
        flex-direction: column;
        align-items: stretch;
    }

    .flag-capsule {
        position: static;
        justify-content: center;
        margin-bottom: 10px;
    }

    /* ================= BUTTON ================= */
    .btn-submit {
        width: 100%;
        padding: 15px 0;
        font-size: 1.1rem;
    }

    /* ================= INFO SECTION ================= */
    .info-section {
        margin: 50px auto;
        padding: 0 15px;
    }

    .info-glass {
        flex-direction: column;
        border-radius: 40px;
        padding: 40px 20px;
    }

    .map-container {
        justify-content: center;
    }

    .map-border {
        max-width: 100%;
    }

    .details-text {
        padding-left: 0;
        align-items: center;
        text-align: center;
        font-size: 1.1rem;
    }

    .footer-logo {
        margin-left: 0;
        width: 180px;
    }

    .info-item p {
        font-size: 1.2rem;
    }

    /* ================= SOCIAL ================= */
    .social-capsule {
        margin-left: 0;
        padding: 15px 25px;
    }

    .social-icons {
        justify-content: center;
    }

    /* ================= BACKGROUND STAR ================= */
    .bg-star-orange {
        width: 300px;
        height: 300px;
        bottom: -100px;
        right: -100px;
    }

    /* ================= FOOTER ================= */
    .rights-footer {
        text-align: center;
        padding: 20px 15px;
    }

    .rights-footer p {
        font-size: 1rem;
    }
}
@media (max-width: 768px) {




    /* ===== FORM GLASS LOOK ===== */
    .form-card {
        
            /* تقليل البلور */

        padding: 25px 15px;
    }

    /* ===== INPUTS WIDTH ===== */
    .input-field,
    .input-field1 {
		
        width: 370px;              /* أعرض حاجة */
        padding: 16px 22px;
        font-size: 1rem;          /* تصغير النص */
      
        border-radius: 40px;
    }

    /* Textarea */
    textarea.input-field {
        font-size: 1rem;
        min-height: 140px;
    }

    /* Placeholder */
    .input-field::placeholder,
    .input-field1::placeholder {
        font-size: 0.95rem;
        opacity: 0.7;
    }

    /* Labels */
    .form-card label {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 6px;
    }

    /* ===== INPUT ROW ===== */
    .input-row {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* ===== PHONE INPUT ===== */
    .phone-box {
        flex-direction: column;
        align-items: stretch;
    }

    .flag-capsule {
        position: static;
        align-self: flex-start;
        margin-bottom: 8px;
        padding: 10px 16px;
        font-size: 0.9rem;
        background: rgba(0, 0, 0, 0.5);
    }

    /* ===== SUBMIT BUTTON ===== */
    .btn-submit {
        width: 100%;
        font-size: 1.05rem;
        padding: 14px 0;
        margin-top: 30px;
    }
}
/* موبايل فيو فقط */
@media screen and (max-width: 768px) {
    .contact-section {
        background-image: none; /* نخفي صورة الخلفية */
        background-color: #041f2d; /* يمكن يبقى لون الخلفية لو تحبي */
        padding: 50px 20px; /* قلل البادينج لو تحبي على الموبايل */
    }
	
}

@media (max-width: 768px) {
    /* استهداف الصورة مباشرة بأقصى قوة */
    .navbar .logo img, 
    .logo img {
        height: 60px !important; /* تقليل الارتفاع للموبايل */
        width: auto !important;
        
        /* التحريك الفعلي لليمين */
        /* translateX(40px) تعني زق اللوجو لليمين 40 بكسل */
        transform: translateX(40px) !important; 
        
        /* التأكد من عدم وجود عوائق */
        position: relative !important;
        z-index: 999 !important;
    }

    /* فك قيد الحاوية الأم */
    .logo {
        padding-right: 0 !important;
        margin-right: 0 !important;
        border: none !important;
    }
}
.navbar {
    position: relative; /* أو fixed لو كنتِ بتستخدميها */
    z-index: 9999 !important; /* لضمان إنه فوق كل الفيديوهات والصور */

}

.nav-links li a {
    position: relative;
    z-index: 10000;
    pointer-events: auto; /* للتأكد إن
/* هذا الكود سيطبق التأثير الزجاجي على الحاوية الكبيرة مباشرة */
}
html {
    scroll-behavior: smooth !important;
}
@media (max-width: 768px) {

    /* منع السكرول الأفقي */
    html, body {
       
    }

    /* ================= NAVBAR ================= */
    .navbar {
        flex-direction: column;
        gap: 20px;

    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 7px;
    }

    .nav-links li a {
        font-size: .8rem;
    }

}
@media (max-width: 768px) {
    /* استهداف الصورة مباشرة بأقصى قوة */
    .navbar .logo img, 
    .logo img {
margin-top:0px !important;
		padding-top:0px!important;
        height: 60px !important; /* تقليل الارتفاع للموبايل */
        width: auto !important;
        
        /* التحريك الفعلي لليمين */
        /* translateX(40px) تعني زق اللوجو لليمين 40 بكسل */
        transform: translateX(50px) !important; 
        
        /* التأكد من عدم وجود عوائق */
        position: relative !important;
        z-index: 999 !important;
    }

    /* فك قيد الحاوية الأم */
    .logo {
        padding-right: 0 !important;
        margin-right: 0 !important;
        border: none !important;
    }
}
/* 1. حل مشكلة العرض الزائد في Index (منع السكرول الجانبي) */
html, body {
    width: 100% !important;
    overflow-x: hidden !important;
    margin: 0;
    padding: 0;
}

/* 2. توحيد الـ Navbar (بدون تدمير باقي الصفحة) */
@media (max-width: 768px) {
    /* استهداف الحاوية فقط */
    header.navbar, nav.navbar, .navbar { 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        background: #fff !important;
        padding: 15px 0 !important;
        width: 100% !important;
        position: relative !important;
        top: 0 !important;
        margin: 0 !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    }

    /* ضبط اللوجو - إلغاء أي مارجن علوي */
       .navbar .logo {
        margin: 0 0 15px 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .navbar .logo img {
        height: 55px !important; /* حجم موحد */
        width: auto !important;
    }

    /* الروابط في صف واحد كما في الصورة */
    .nav-links {
        display: flex !important;
        flex-direction: row !important; /* إجبار الصف الواحد */
        flex-wrap: nowrap !important; /* منع النزول لسطر جديد */
        justify-content: center !important;
        gap: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .nav-links li a {
        font-size: 0.85rem !important;
        color: #333 !important;
        text-decoration: none !important;
        padding: 0px 0px !important;
    }

    /* الكبسولة النشطة (زي الصورة بالظبط) */
    .nav-links li a.active {
        border: 1.5px solid #000 !important;
        border-radius: 50px !important;
        font-weight: bold !important;
        padding: 6px 15px !important;
    }

    /* 3. حل مشكلة المسافة البيضاء فوق اللوجو في Contact وغيرها */
    .projects-header-section, 
    .contact-header-section, 
    .first-section { 
        margin-top: 0 !important; /* إلغاء أي فجوة */
        border-top-left-radius: 40px !important;
        border-top-right-radius: 40px !important;
        background-color: #041f2d !important;
    }
}

.info-section
{
	margin-top:-50px;
   background-color: #041f2d !important; /* اللون الكحلي الموحد */
	
}
.rights-footer
{

   background-color: #041f2d !important; /* اللون الكحلي الموحد */

}

/* تحريك حاوية الخريطة (info-glass) أو (map-container) لليسار */
.info-glass {
    display: flex;
    justify-content: flex-start; /* دفع المحتويات لتبدأ من اليسار */
    margin-right: auto;          /* دفع كل الكتلة لجهة اليسار */
    margin-left: 50px;           /* مسافة بسيطة عن حافة الشاشة اليسرى */
    position: relative;
    left: 0;                     /* تأكدي أنها ليست مشفتة لليمين */
}


/* لضمان أن السكشن بالكامل يوجه العناصر لليسار */

/* إذا كانت الماب داخل container محدد */
.map-container {
    margin-left: 0;
    margin-right: 0;
}

.character-animation {

    position: absolute;

    /* تحريك الفيديو لليسار ليتداخل مع الخريطة */

    left: -50px; 

    /* ضبط الارتفاع ليكون فوق منطقة الخريطة */

    bottom: -130px; 

    /* قيمة كبيرة جداً لضمان ظهوره فوق كل شيء */

    z-index: 9999; 

    pointer-events: none; /* عشان تقدري تدوسي على اللي تحته */

    background: transparent !important;

}
.character-animation video {
    /* تكبير الحجم بشكل ملحوظ */
    width: 650px; 
    height: auto;
    background: transparent !important;
    /* إزالة أي حدود قد تظهر من المتصفح */
    outline: none;
    border: none;
}

/* تأكدي أن السكشن الرئيسي يسمح بظهور العناصر الخارجة عن حدوده */
.info-section {
    position: relative;
    overflow: visible !important;
}
فهمت عليكِ، سأترك كود الويب كما هو تماماً (بما في ذلك حجم الكاركتر 650px وكل القيم التي اخترتِها)، وسأضيف "ميديا كويري" للموبايل فقط لتقوم بعملية عكس الترتيب وتصغير الكاركتر في الشاشات الصغيرة.

إليكِ الكود الكامل لملف CSS، يرجى استبدال الأجزاء المتعلقة بهذه السكشن بهذا الكود:

CSS
/* --- إعدادات الويب (كما هي بدون أي تغيير نهائي) --- */

.map-container {
    margin-left: 0;
    margin-right: 0;
}

.character-animation {
    position: absolute;
    /* تحريك الفيديو لليسار ليتداخل مع الخريطة */
    left: -50px; 
    /* ضبط الارتفاع ليكون فوق منطقة الخريطة */
    bottom: -130px; 
    /* قيمة كبيرة جداً لضمان ظهوره فوق كل شيء */
    z-index: 9999; 
    pointer-events: none; 
    background: transparent !important;
}

.character-animation video {
    /* حجم الويب المطلوب بدون تغيير */
    width: 650px; 
    height: auto;
    background: transparent !important;
    outline: none;
    border: none;
}

.info-section {
    position: relative;
    overflow: visible !important;
}

/* --- تعديلات الموبايل فقط (بدون التأثير على الويب) --- */
/* --- تعديلات الموبايل فقط --- */
@media screen and (max-width: 768px) {
    
    .info-section {
        display: flex;
        flex-direction: column;
        align-items: center;    /* توسيط كل المحتوى في منتصف الشاشة */
        justify-content: center;
        width: 100% !important;
        padding: 40px 10px;     /* إعطاء مساحة فوق وتحت السكشن */
        text-align: center;
    }

    .info-glass {
        display: flex;
        flex-direction: column; 
        align-items: center;    /* توسيط العناصر الداخلية */
        width: 95%;             /* جعل الحاوية أعرض بدلاً من أن تكون رفيعة */
        max-width: 500px;       /* أقصى عرض لها في الموبايل */
        margin: 0 auto;         /* ضمان التوسيط الأفقي */
        padding: 20px;
    }

    /* عكس الترتيب */
    .social-capsule {
        order: -1; 
        margin-bottom: 30px;    /* مسافة بين السوشيال والماب */
        width: 100%;
    }

    .map-container {
        order: 2; 
        width: 100%;            /* جعل الخريطة تملأ العرض المتاح */
        display: flex;
        justify-content: center;
    }

    .map-frame, .map-bg-frame {
        width: 100% !important; /* لضمان أن الخريطة ليست رفيعة */
        height: auto;
    }

    /* تصغير حجم الكاركتر في الموبايل ليتناسب مع العرض الجديد */
    .character-animation video {
        width: 180px; 
    }

    .character-animation {
        position: absolute;
        left: 15%;
        transform: translateX(-50%); /* لتوسيط الكاركتر فوق أو أسفل العناصر */
        bottom: -20px; 
    }
}
/* ===== FORCE MOBILE GIF SIZE ===== */

/* الحاوية لتقص الصورة */
/* الحاوية */
.img-wrapper {
    width: 250px;          /* عرض الكمبيوتر */
    height: 500px;         /* ارتفاع الحاوية */
    overflow: hidden;      /* يقطع أي جزء خارج الحاوية */
    position: relative;
}

/* الصورة نفسها */
.img-wrapper img {
    width: 250px;
    height: auto;
    display: block;

    /* التحكم في حركة الصورة لأعلى/لأسفل */
    transform: translateY(-30px);  /* تغيير الرقم يحرك الصورة بدون قص */
}

/* ===============================
   موبايل
   =============================== */
@media screen and (max-width: 768px) {
    .img-wrapper {
        width: 150px;      /* أصغر حجم */
        height: 280px;     /* ارتفاع أصغر */
    }
    .img-wrapper img {
        width: 150px;
        transform: translateY(-20px);  /* حركة مستقلة للموبايل */
        height: auto;
    }
}

@media screen and (max-width: 768px) {
    .details-text {
        display: flex;
        flex-direction: column;
    }

    /* ترتيب جديد للأطفال المباشرين فقط */
    .details-text > .social-capsule {
        order: 3;  /* السوشيال فوق */
    }
    .details-text > .footer-logo {
        order: 1;
    }
    .details-text > .address-block {
        order: 2;
    }
}
/* موبايل فقط */
@media (max-width: 768px) {
  .animated-gif {
    width: 250px;   /* غيري الرقم للحجم اللي يناسبك */
    height: auto;
  }
}