/* <!------------------------------ بدايه الصفحه المقدمة ----------------------------------------> 
 */

     /* ===== Preloader Container ===== */
.mil-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0D1B5A;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    pointer-events: all;
}

/* ===== Animation Wrapper ===== */
.mil-preloader-animation {
    text-align: center;
    position: relative;
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ===== Animated Text ===== */
.mil-h3 {
    font-size: 2.2em;       /* تصغير الخط من 3em */
    line-height: 1.6;       /* زيادة المسافة بين السطور والكلمات */
    color: #c11f52;
    margin: 2px 0;         /* تباعد متناسق بين الكلمات */
    padding: 0;   
    white-space: nowrap;
}

.mil-thin { 
    font-weight: 300; 
}

.mil-muted { 
    color: #ffffff; 
}

/* ===== Absolute Position Wrapper ===== */
.mil-pos-abs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;            /* المسافة بين الكلمات أو العناصر */
}

/* ===== Reveal Animation Boxes ===== */
.mil-reveal-frame {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.mil-reveal-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #c11f52;
    opacity: 0;
    z-index: 10;
}

/* ===== Wrapper for Page Content ===== */
.mil-wrapper {
    padding: 50px;
    color: #c11f52;
    text-align: center;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.mil-wrapper.loaded {
    opacity: 1;
    overflow: auto;
}

/* ===== Optional: Fade Up Elements ===== */
.mil-up {
    opacity: 0;
}


  /* <!------------------------------ اشكال الخلفيه ------------------------------------------> 
 */
.geometric-shapes { 
    position: fixed; /* تثبيت الحاوية على الشاشة بالكامل */
    top: 0; left: 0;  /* تثبيت من أعلى يسار الشاشة */
    width: 100%;      /* تغطية كامل عرض الشاشة */
    height: 100%;     /* تغطية كامل ارتفاع الشاشة */
    z-index: -1;      /* وضع الخلفية خلف المحتوى */
    overflow: hidden; /* منع ظهور أي جزء من الأشكال خارج الشاشة */
}

.shape { 
    position: absolute; /* وضع كل شكل بشكل مستقل داخل الحاوية */
    border: 1px solid rgba(0, 255, 255, 0.3); /* إطار شفاف بلون سماوي */
    animation: floatShape 20s linear infinite; /* حركة عائمة مستمرة 20 ثانية بدون توقف */
}

/* الشكل الأول */
.shape:nth-child(1) { 
    width: 100px; height: 100px; /* حجم الشكل */
    left: 10%;                  /* المسافة من الجهة اليسرى */
    animation-delay: 0s;         /* يبدأ الحركة مباشرة */
    border-color: rgba(255, 105, 180, 0.4); /* لون الإطار وردي شفاف */
}

/* الشكل الثاني */
.shape:nth-child(2) { 
    width: 60px; height: 60px; 
    left: 70%; 
    animation-delay: -5s;       /* يبدأ الحركة قبل 5 ثواني من البداية */
    border-radius: 50%;         /* تحويل الشكل إلى دائرة */
    border-color: rgba(147, 112, 219, 0.4); /* لون الإطار بنفسجي شفاف */
}

/* الشكل الثالث */
.shape:nth-child(3) { 
    width: 80px; height: 80px; 
    left: 30%; 
    animation-delay: -10s;       /* يبدأ الحركة قبل 10 ثواني من البداية */
    transform: rotate(45deg);    /* تدوير الشكل 45 درجة */
    border-color: rgba(224, 163, 255, 0.4); /* لون أرجواني فاتح */
}

/* الشكل الرابع */
.shape:nth-child(4) { 
    width: 120px; height: 120px; 
    left: 50%; 
    animation-delay: -15s;       /* يبدأ الحركة قبل 15 ثانية */
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* قص الشكل على شكل مثلث */
    background: linear-gradient(45deg, rgba(255, 105, 180, 0.1), transparent); 
    /* تدرج لوني شفاف من الوردي إلى شفاف */
}

/* حركة الأشكال العائمة */
@keyframes floatShape {
    from { transform: translateY(100vh) rotate(0deg); opacity: 0; } 
    /* البداية: الشكل أسفل الشاشة وشفافية 0 */
    10%, 90% { opacity: 1; } 
    /* منتصف الحركة: الشكل مرئي بالكامل */
    to { transform: translateY(-100px) rotate(360deg); opacity: 0; } 
    /* النهاية: الشكل أعلى الشاشة، يدور دورة كاملة ويختفي تدريجيًا */
}

/* Enhanced background colors - Purple/Pink/Green palette */
.neural-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;

    /* خلفية مصنع حديث أبيض مشرق */
    background: 
        radial-gradient(circle at 25% 25%, rgba(255,255,255,0.9) 0%, transparent 50%), /* ضوء أبيض */
        radial-gradient(circle at 75% 75%, rgba(240,240,240,0.8) 0%, transparent 50%), /* ضوء ثانوي */
        linear-gradient(135deg, #ffffff 0%, #f0f0f0 50%, #eaeaea 100%);              /* التدرج الأبيض العام */

    animation: backgroundPulse 20s ease-in-out infinite;
}

/* حركة ديناميكية لإحساس الإضاءة المتغيرة */
@keyframes backgroundPulse {
    0%   { filter: brightness(1.0) saturate(1.1) hue-rotate(0deg); }
    50%  { filter: brightness(1.2) saturate(1.3) hue-rotate(0deg); }
    100% { filter: brightness(1.0) saturate(1.1) hue-rotate(0deg); }
}

  /* <!------------------------------ الهيدر ------------------------------------------> 
 */
/* <!------------------------------ الهيدر المتجاوب ------------------------------------------> */

/* Glassmorphism styles - تأثير الزجاج */
.glass {
    background: rgba(255, 255, 255, 0.05); /* خلفية شفافة جدًا */
    backdrop-filter: blur(20px); /* طمس الخلفية خلف العنصر */
    border: 1px solid rgba(255, 255, 255, 0.1); /* حدود خفيفة */
    border-radius: 20px; /* حواف دائرية ناعمة */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* ظل خفيف خلف العنصر */
}

.glass-strong {
    background: rgba(255, 255, 255, 0.1); /* خلفية أكثر وضوحًا */
    backdrop-filter: blur(25px); /* طمس أقوى */
    border: 1px solid rgba(255, 255, 255, 0.2); /* حدود أكثر وضوحًا */
    border-radius: 25px; /* حواف أكبر */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); /* ظل أعمق */
}

/* Enhanced Header - تحسين الهيدر */
header {
  /*  position: absolute !important;*/
    position: fixed;
    top: 20px; 
    left: 50%;
    transform: translateX(-50%); 
    z-index: 100; 

    width: 95%;
    max-width: 1400px; 

    padding: 18px 40px;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
    background: rgba(224, 163, 255, 0.08); 
    backdrop-filter: blur(25px); 
    border: 1px solid rgba(224, 163, 255, 0.15); 
    border-radius: 25px; 
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); 
}

/* الهيدر عند التمرير */
header.scrolled {
    background: rgba(224, 163, 255, 0.12); /* خلفية أغمق */
    backdrop-filter: blur(30px); /* طمس أقوى */
    border-color: rgba(224, 163, 255, 0.2); /* تعديل لون الحدود */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.15),
                0 0 0 1px rgba(224, 163, 255, 0.1); /* ظلال أقوى */
}

/* Navigation - القوائم */
nav {
    display: flex; /* ترتيب العناصر أفقياً */
    justify-content: space-between; /* توزيع المسافات بين العناصر */
    align-items: center; /* محاذاة عمودية */
    flex-wrap: wrap; /* السماح بالانكسار عند الشاشات الصغيرة */
}

/* Logo */
.logo {
    display: flex;
    align-items: center; /* محاذاة الأيقونة والنص عموديًا */
    gap: 12px; /* مسافة بين الأيقونة والنص */
    font-size: 28px; /* حجم الخط */
    font-weight: bold; /* خط عريض */
    background: linear-gradient(45deg, #e0a3ff, #ff69b4); /* تأثير تدرج ألوان */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; /* جعل النص شفاف ليظهر التدرج */
    text-decoration: none;
    transition: all 0.3s ease;
    flex: 1 1 200px; /* قابلية التمدد والانكماش */
}

/* تأثير hover على اللوجو */
.logo:hover {
    transform: scale(1.05); /* تكبير خفيف */
}

.logo-icon {
    width: 40px; /* حجم الأيقونة */
    height: 40px;
    filter: drop-shadow(0 0 10px #e0a3ff); /* ظل مضيء للأيقونة */
}

/* Nav Links - روابط الهيدر */
.nav-links {
    display: flex; /* ترتيب أفقياً */
    gap: 8px; /* مسافة بين الروابط */
    list-style: none; /* إزالة النقاط */
    align-items: center;
    height: 100%;
    flex-wrap: wrap; /* السماح بالانكسار */
}

/* تنسيق الروابط */
.nav-links a {
  /*  position: relative; /* لعمل تأثير الخط السفلي */
    display: block;
    padding: 12px 20px; /* مساحة داخلية */
    background: rgba(255, 255, 255, 0.08); /* خلفية شفافة */
    backdrop-filter: blur(6px); /* تأثير زجاجي خفيف */
    border-radius: 14px; /* حواف ناعمة */
    border: 1px solid rgba(255, 255, 255, 0.12); /* حدود خفيفة */
    outline: 1px solid rgba(193, 31, 82, 0.2); /* Stroke خفيف */
    color: #c11f52; /* لون النص */
    font-weight: 500;
    letter-spacing: 0.5px; /* تباعد بين الأحرف */
    text-decoration: none;
    transition: 0.3s ease;
}

/* خط أسفل الرابط عند hover */
.nav-links a::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: #010c6c;
    border-radius: 2px;
    opacity: 0; /* يظهر عند Hover */
    transition: opacity 0.3s ease;
}

/* تأثير hover على الروابط */
.nav-links a:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-3px); /* حركة صغيرة للأعلى */
    box-shadow: 0 6px 18px rgba(0,0,0,0.2); /* ظل خفيف */
}

.nav-links a:hover::after {
    opacity: 1; /* يظهر الخط السفلي */
}

/* رابط نشط */
.nav-links a.active {
    color: #e0a3ff;
    background: linear-gradient(135deg, rgba(224, 163, 255, 0.15), rgba(255, 105, 180, 0.1));
    box-shadow: 0 0 20px rgba(224, 163, 255, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2),
                0 4px 15px rgba(224, 163, 255, 0.2);
    border: 1px solid rgba(224, 163, 255, 0.3);
    text-shadow: 0 0 10px rgba(224, 163, 255, 0.8);
    transform: translateY(-1px);
}

/* تأثير متحرك للحدود عند الرابط النشط */
.nav-links a.active::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #e0a3ff, #ff69b4, #9370db, #e0a3ff);
    background-size: 400% 400%;
    border-radius: 17px;
    z-index: -2;
    animation: borderGlow 3s ease infinite; /* تحريك التدرج */
}

/* Mobile Menu Toggle - أيقونة الهامبرغر */
.mobile-menu-toggle {
    display: none; /* تظهر فقط على الموبايل */
    flex-direction: column;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.mobile-menu-toggle:hover {
    background: rgba(224, 163, 255, 0.1);
    box-shadow: 0 0 15px rgba(224, 163, 255, 0.3);
}

.hamburger-line {
    width: 25px;
    height: 3px;
    background: linear-gradient(45deg, #e0a3ff, #ff69b4);
    margin: 3px 0;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* تغيير شكل الهامبرغر عند الفتح */
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(9px, 9px);
}
.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0; /* الخط الأوسط يختفي */
}
.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile Navigation - قائمة الموبايل */
.mobile-nav {
    position: fixed;
    top: 90px; /* تحت الهيدر */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 30px;
    display: none; /* تظهر عند الفتح */
    flex-direction: column;
    gap: 20px; /* مسافة بين الروابط */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.mobile-nav.active {
    display: flex; /* إظهار القائمة */
    animation: slideDown 0.3s ease-out; /* حركة نزول سلسة */
}

.mobile-nav a {
    color: #ffffff;
    text-decoration: none;
    padding: 15px 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.mobile-nav a:hover {
    background: rgba(224, 163, 255, 0.1);
    color: #e0a3ff;
    box-shadow: 0 0 20px rgba(224, 163, 255, 0.3);
    transform: translateY(-2px);
}

/* Keyframes للأنيميشن */
@keyframes borderGlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* -------------------- Media Queries لتجاوب الشاشات -------------------- */

/* أجهزة تابلت متوسطة */
@media (max-width: 1024px) {
    header { padding: 15px 30px; }
    .logo { font-size: 24px; }
    .nav-links a { padding: 10px 16px; font-size: 0.95rem; }
}

/* أجهزة الموبايل الصغيرة */
@media (max-width: 768px) {
    nav { justify-content: space-between; }
    .nav-links { display: none; } /* اخفاء روابط الديسكتوب */
    .mobile-menu-toggle { display: flex; } /* إظهار زر الهامبرغر */
}

/* أجهزة الموبايل الصغيرة جدًا */
@media (max-width: 480px) {
    header { padding: 12px 20px; }
    .logo { font-size: 20px; }
    .mobile-nav { padding: 20px; width: 95%; }
    .mobile-nav a { font-size: 1rem; padding: 12px 16px; }
}


/* --------------------ستايل الي عملته انا الاضافي  -------------------- */
* {
    margin: 0;
    padding: 0;
   /* box-sizing: border-box;*/
  }

  htmls, bodys {
    width: 100%;
    height: 100vh;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #0a0a1a, #121236);
    color: #fff;
  }

  navs {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: rgba(255, 255, 255, 255);
    position: fixed;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(138, 43, 226, 0.2);
  }

  .nav-logos {
    font-size: 1.8rem;
    font-weight: bold;
    color: #c11f52;
    text-shadow:#c11f52;
    letter-spacing: 1px;
  }
.nav-links {
    display: flex;
    gap: 18px; /* المسافة بين المربعات */
    list-style: none;
}

.nav-links a {
  /*  position: relative;*/
    display: block;
    padding: 12px 26px;

    background: rgba(255, 255, 255, 0.08); /* خلفية شفافة فخمة */
    backdrop-filter: blur(6px);            /* تأثير زجاجي خفيف */
    border-radius: 14px;                   /* حواف ناعمة */
    border: 1px solid rgba(193, 31, 82, 0.2); /* استروك خفيف */
    
    color: #c11f52;                        /* لون النص */
    font-weight: 500;
    letter-spacing: 0.5px;
    text-decoration: none;

    transition: 0.3s ease;
    overflow: hidden;
}

.nav-links a:hover {
    background: rgba(255, 255, 255, 0.18); /* يفتح عند hover */
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;                            /* لون النص عند hover */
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.2); /* ظل ناعم */
}

/* أي كود سابق للخط الأزرق تحت النصوص أو المربعات حذف */
.containers {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 2rem 2rem;
}

.slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* أهم شيء: ارتفاع مرن لكل الشاشات */
    /* للشاشات الكبيرة */
    max-height: 560px;
    min-height: 350px;  /* يمنع صغر الارتفاع في الشاشات الصغيرة */

    overflow: hidden;
    
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: -1;   
}
/* للجوالات والتابلت */
@media (max-width: 768px) {
    .slider {
        height: 55vh;
        min-height: 260px;
    }
}


.slide.active {
    opacity: 1;
}

/* النقاط */
.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 1;
}


.slider-dots button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: background 0.3s ease;
}

.slider-dots button.active {
    background: #1e90ff; /* النقطة النشطة باللون الأزرق */
}

/* أزرار التحكم */
.slider-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    z-index: 1;
}

.slider-controls button {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    font-size: 2rem;
    padding: 0.3rem 0.7rem;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s ease;
}

.slider-controls button:hover {
    background: rgba(255,255,255,0.3);
}

  .contents {
    flex: 1 1 45%;
    max-width: 600px;
    z-index: 1;
  }

  .contents h1 {
    font-size: 2.5rem;
    color: #c11f52;
    margin-bottom: 0.1rem;
    line-height: 1.2;
   
    
   
    text-shadow: none;
    PADDING: 10px 70px;
  }

  .contents p {
    font-size: 2rem;
    color: #124058;
    margin-bottom: 2.5rem;
    line-height: 0.6;
    font-weight: bold;
     PADDING: 0px 70px;
  }

  .buttonss {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 3rem;
 
   margin: 50px 0 50px 50px; 
  }

  .buttonss button {
    background: #c11f52;
    border: 2px solid #c11f52;
    color: #fff;
    padding: 0.8rem 1.8rem;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    z-index: 1;
  }

  .buttonss button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(#000000, #000000, #000000);
    transition: width 0.3s ease;
    z-index: -1;
  }

  .buttonss button:hover::before {
    width: 100%;
  }

  .buttonss button:first-child {
    background: linear-gradient(#c11f52, #c11f52, #c11f52);
    /*box-shadow: 0 4px 15px #c11f52;*/
  }

  .buttonss button:first-child:hover {
    transform: translateY(-2px);
    /*box-shadow: 0 6px 20px #c11f52;*/
  }

  .social-iconss {
    display: flex;
    gap: 1.5rem;
  }

  .social-iconss a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: rgba(138, 43, 226, 0.1);
    border-radius: 50%;
    color: #c11f52;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    border: 1px solid #c11f52;
  }

  .social-iconss a:hover {
    background: rgba(138, 43, 226, 0.2);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(138, 43, 226, 0.3);
  }

  .bg-main-containers {
    flex: 0 0 40%; 
    display: flex;
    justify-content: flex-end;
   overflow: hidden; 
    max-width: 600px;
  




  }

  .bg-mains {
    width: 100%;
    height: 375px;
    display: flex;
    justify-content: center;
    align-items: center;
  }


  spline-viewer {
    width: 100%;
    user-select: none;
    pointer-events: none;
    height: 500px;
  }

  .background-elements::before,
  .background-elements::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.15) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
    filter: blur(20px);
  }

  .background-elements::before {
    top: 10%;
    left: 10%;
  }

  .background-elements::after {
    bottom: 10%;
    right: 10%;
  }

  /* Hamburger Menu */
  .hamburger {
    display: none;
    cursor: pointer;
    width: 30px;
    height: 20px;
    position: relative;
    z-index: 100;
  }

  .hamburger span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: #8a2be2;
    border-radius: 3px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: all 0.3s ease;
  }

  .hamburger span:nth-child(1) {
    top: 0;
  }

  .hamburger span:nth-child(2),
  .hamburger span:nth-child(3) {
    top: 10px;
  }

  .hamburger span:nth-child(4) {
    top: 20px;
  }

  .hamburger.open span:nth-child(1),
  .hamburger.open span:nth-child(4) {
    top: 10px;
    width: 0%;
    left: 50%;
  }

  .hamburger.open span:nth-child(2) {
    transform: rotate(45deg);
  }

  .hamburger.open span:nth-child(3) {
    transform: rotate(-45deg);
  }

  .mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    height: 100vh;
    background: rgba(10, 10, 30, 0.98);
    backdrop-filter: blur(15px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
    transition: all 0.5s ease;
    z-index: 99;
    padding: 5rem 2rem 2rem;
    border-left: 1px solid rgba(138, 43, 226, 0.3);
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.3);
  }

  .mobile-menu.open {
    right: 0;
  }

  .mobile-menu a {
    color: #e0e0e0;
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    position: relative;
    width: 100%;
    text-align: center;
    padding: 0.5rem 0;
  }

  .mobile-menu a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #8a2be2;
    transition: width 0.3s ease;
  }

  .mobile-menu a:hover {
    color: #fff;
  }

  .mobile-menu a:hover::after {
    width: 100%;
  }

  .mobile-menu .nav-contact {
    margin-top: 1rem;
    width: 80%;
  }

  .close-btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 1.5rem;
    color: #e0e0e0;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .close-btn:hover {
    color: #8a2be2;
    transform: rotate(90deg);
  }

  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 98;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  .overlay.active {
    opacity: 1;
    visibility: visible;
  }

  @media (max-width: 992px) {
    .content h1 {
      font-size: 2.8rem;
    }
  }

  @media (max-width: 768px) {
    .container {
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding-top: 6rem;
    }

    .bg-main-container,
    .content {
      flex: 1 1 100%;
      width: 100%;
      max-width: 100%;
      padding: 0 1rem;
    }

    .bg-main {
      width: 100%;
      height: 238px;
    }

    spline-viewer {
        margin-left: 70px;
      width: 100%;
      height: 350px;

    }
    .nav-links {
      display: none;
    }

    .nav-contact {
      display: none;
    }

    .hamburger {
      display: block;
    }

    .buttons {
      justify-content: center;
    }

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

    .content h1 {
      font-size: 2.5rem;
    }
  }

  @media (max-width: 480px) {
    .content h1 {
      font-size: 2rem;
    }

    .content p {
      font-size: 1rem;
    }

    .buttons {
      flex-direction: column;
      gap: 1rem;
    }

    .buttons button {
      width: 100%;
    }

    spline-viewer {
      height: 250px;
    }

    .mobile-menu {
      width: 85%;
    }

    .background-elements::before,
    .background-elements::after {
      width: 200px;
      height: 200px;
    }
  }


  /* =========================
   1️⃣ تعريف الخط العربي المخصص
========================= */
@font-face {
    font-family: 'Ya ModernPro-Bold'; /* اسم الخط لاستخدامه لاحقًا */
    src: url('fonts/Ya ModernPro-Bold.otf') format('opentype'); /* مسار الخط داخل المشروع */
    font-weight: normal; /* وزن الخط الافتراضي */
    font-style: normal;  /* ستايل الخط الافتراضي */
}

/* تطبيق الخط على النصوص العربية والسلايدر */
body.arabic, .slide-text {
    font-family: 'Ya ModernPro-Bold', sans-serif !important; /* !important لضمان التطبيق */
}

body.arabic,header{
    position: absolute !important;
    
}
/* التأكد أن الخط العربي مفعل على كامل الصفحة عند تفعيل اللغة العربية */
body.arabic {
    font-family: 'Ya ModernPro-Bold', sans-serif !important;
}


/* =========================
   2️⃣ تصميم بطاقات الفيديو
========================= */
.video-card{
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); /* تدرج شفاف للخلفية */
    border-radius: 18px;        /* حواف مدورة للبطاقة */
    padding: 22px;              /* مسافة داخلية */
    display:flex;               /* ترتيب العناصر بشكل أفقي */
    gap:18px;                   /* مسافة بين العناصر الداخلية */
    align-items:center;          /* محاذاة العناصر عموديًا */
    box-shadow: 0 10px 30px rgba(2,6,23,0.6); /* ظل خفيف للعمق */
    overflow: hidden;           /* لمنع خروج المحتوى عن البطاقة */
}

/* عنوان الفيديو */
.video-meta .title{
    color:#fff;                  /* لون النص أبيض */
    font-size:22px;              /* حجم الخط */
    margin:0 0 6px;              /* المسافة أسفل العنوان */
    font-weight:700;             /* خط غامق */
}

/* وصف الفيديو */
.video-meta .subtitle{
    color:rgba(255,255,255,0.7); /* لون نص شبه شفاف */
    margin:0;                     /* إزالة الهوامش الافتراضية */
    font-size:14px;               /* حجم الخط */
}

/* صورة الفيديو */
.thumb-wrap{
    position:relative;           /* لتحديد موقع الأيقونات داخلها */
    width:460px;                 /* العرض الافتراضي */
    max-width:48%;               /* أقصى عرض بالنسبة للحاوية */
    min-width:220px;             /* أقل عرض */
    cursor:pointer;              /* مؤشر عند المرور */
    border-radius:12px;          /* حواف مدورة */
    overflow:hidden;             /* منع خروج الصورة عن الحاوية */
    flex-shrink:0;               /* منع تقلص العنصر في الفلكس */
}

.thumb {
    width:100%; 
    height:100%; 
    object-fit:cover;            /* تغطية كاملة للصورة */
    transition:transform .6s;   /* حركة سلسة عند التكبير */
}

.thumb-wrap:hover .thumb{
    transform:scale(1.06);       /* تكبير الصورة عند المرور */
}

/* أيقونة التشغيل */
.play-cta{
    position:absolute; 
    inset:0; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    pointer-events:none; /* لا تسمح بالنقر */
}

.play-circle{
    width:84px; 
    height:84px; 
    border-radius:50%; 
    background:rgba(255,255,255,0.1); 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

.play-icon polygon{
    fill:#fff; /* لون مثلث التشغيل */
}

/* تأثير النبض */
.pulse{
    position:absolute; 
    width:150px; 
    height:150px; 
    border-radius:50%; 
    animation:pulse 1.8s infinite; 
    opacity:0.14;
}
@keyframes pulse{
    0%{ transform:scale(.8); opacity:.18 } 
    70%{ transform:scale(1.5); opacity:0 } 
    100%{ transform:scale(1.8); opacity:0 }
}

/* مودال الفيديو */
.video-modal{
    position:fixed; 
    inset:0; 
    display:none; 
    align-items:center; 
    justify-content:center; 
    z-index:2000;
}
.video-modal[aria-hidden="false"]{
    display:flex; /* عرض المودال عند فتحه */
}

.modal-backdrop{
    position:absolute; 
    inset:0; 
    background:rgba(0,0,0,0.7); /* خلفية شبه شفافة */
}

.modal-content{
    width:90%; 
    max-width:1100px; 
    aspect-ratio:16/9; /* الحفاظ على نسبة العرض إلى الارتفاع */
    background:#000; 
    border-radius:12px; 
    overflow:hidden; 
    z-index:2;
}

.modal-close{
    position:absolute; 
    top:12px; 
    left:12px; 
    color:#fff; 
    background:transparent; 
    border:0; 
    font-size:34px; 
    cursor:pointer;
}

.video-frame video{
    width:100%; 
    height:100%; 
    display:block;
}

/* تصميم متجاوب للشاشات الصغيرة */
@media (max-width:720px){
    .video-card{ flex-direction:column; gap:14px; padding:16px; }
    .thumb-wrap{ max-width:100%; width:100%; }
    .video-meta{text-align:center;}
}

/* =========================
   3️⃣ نص السلايدر
========================= */
.slide-text {
    position: absolute;
    top: 60px; 
    left: 60px; 
    color: #c11f52; 
    font-size: 50px; 
    font-weight: 800; 
    font-family: 'Poppins', sans-serif; 
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}

/* عند تفعيل اللغة العربية */
body.arabic .slide-text {
    font-family: 'Cairo', sans-serif; /* خط عربي */
    right: 90px;  /* محاذاة للنص من اليمين */
    text-align: right;
    transform: scaleX(-1); /* قلب النص */
}
body.arabic .slide{
    transform: scaleX(-1); /* قلب الصورة لتتناسب مع النص العربي */
}

/* =========================
   4️⃣ بطاقات الفروع (Branches Wrapper)
========================= */
.branches-wrapper {
  width: 100%;
  background-color: #0d1b5a; 
  padding: 30px 0 0 0;
  direction: rtl; /* مهم للغة العربية */
}

.branches-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.branch-card {
  color: #c11f52;
  padding: 20px 25px;
  border-radius: 15px;
  min-width: 300px;
  flex: 1 1 280px; 
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  font-weight: 700;
}

.branch-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.country-title {
  font-size: clamp(0.5rem, 3vw, 2rem); /* حجم ديناميكي */
  font-weight: 700;
  margin-bottom: 15px;
  text-align: center;
  color: #c11f52;
}

.branch-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.4;
}

.branch-info span:first-child {
  font-weight: 500;
}
branch-info span:last-child {
  font-weight: 300;
  color: #e1e9ce;
}

/* نسخة ثانية من تصميم البطاقات مع نفس الوظائف */
.b_W {
  width: 100%;
  background-color: #0d1b5a;
  padding: 40px 0;
  direction: rtl;
}

.b_c {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.branch-cards {
  color: #c11f52;
  padding: 20px 25px;
  border-radius: 15px;
  min-width: 300px;
  flex: 1 1 280px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  font-weight: 700;
}

.branch-cards:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.country-titles {
  font-size: clamp(0.5rem, 3vw, 2rem);
  font-weight: 700;
  margin-bottom: 15px;
  text-align: center;
  color: #c11f52;
}

.branch-infos {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 0px;
  font-size: 17px;
  line-height: 3;
  flex-wrap: nowrap;
}

.branch-infos span:first-child {
  font-weight: 500;
}
.branch-infos span:last-child {
  font-weight: 600;
  color: #e1e9ce;
}
.branch-info span:last-child {
  font-weight: 600;
  color: #e1e9ce;
}
/* التجاوب مع جميع الشاشات */

/* =========================
   Reset عام وتحسين تجاوب العناصر
========================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* تأكد أن كل الحواشي والبادينغ محسوبة داخل العنصر */
}

html, body {
    width: 100%;
    min-height: 100%;
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden; /* منع التمرير الأفقي */
}

/* -------------------- Media Queries عامة لتجاوب أفضل -------------------- */

/* أجهزة كبيرة */
@media (max-width: 1440px) {
    .contents h1 { font-size: 2.2rem; }
    .contents p { font-size: 1.8rem; }
}

/* أجهزة لابتوب / تابليت كبيرة */
@media (max-width: 1024px) {
    header { padding: 15px 30px; }
    .logo { font-size: 24px; }
    .nav-links a { padding: 10px 16px; font-size: 0.95rem; }
}

/* أجهزة تابلت صغيرة */
@media (max-width: 768px) {
    nav { justify-content: space-between; }
    .nav-links { display: none; }
    .mobile-menu-toggle { display: flex; }
    .contents h1 { font-size: 2rem; }
    .contents p { font-size: 1.2rem; }
    .bg-main { height: 350px; }
    spline-viewer { width: 100%; height: 350px; margin-left: 0; }
}

/* أجهزة موبايل صغيرة جدًا */
@media (max-width: 480px) {
    header { padding: 12px 20px; }
    .logo { font-size: 20px; }
    .mobile-nav { padding: 20px; width: 95%; }
    .mobile-nav a { font-size: 1rem; padding: 12px 16px; }
    .contents h1 { font-size: 1.6rem; }
    .contents p { font-size: 1rem; line-height: 1.2; }
    spline-viewer { height: 250px; }
    .background-elements::before,
    .background-elements::after { width: 200px; height: 200px; }
    .buttons button { width: 100%; }
}

/* أجهزة صغيرة جدًا جدًا */
@media (max-width: 360px) {
    .contents h1 { font-size: 1.4rem; }
    .contents p { font-size: 0.9rem; }
    .buttonss { flex-direction: column; gap: 1rem; }
}


 .section-title {
     text-align: center;
     font-size: clamp(2.5rem, 6vw, 4rem);
     margin-bottom: 50px;
     color: #c11f52;
     position: relative;
}
 .section-title::after {
     content: '';
     position: absolute;
     bottom: -10px;
     left: 50%;
     transform: translateX(-50%);
     width: 100px;
     height: 3px;
     background: linear-gradient(90deg, #00ffff, #ff0080);
     border-radius: 2px;
}