/* =========================================================
   HERO IMAGES CONTROL PANEL (Zoom & Pan System)
   ========================================================= 
   قمت بتحديث نظام التحكم ليكون أكثر احترافية ولتجنب ظهور الحواف البيضاء عند التصغير!
   بدلاً من استخدام transform (الذي يقص حواف الصورة)، يرجى استخدام المتغيرات التالية:
   
   --zoom: للتحكم بحجم الصورة (1.0 يعني حجم طبيعي 100%، 1.4 يعني تكبير 140%)
   --pos-x: للتحريك الأفقي (0% لليسار، 100% لليمين، 50% للوسط)
   --pos-y: للتحريك العمودي (0% للأعلى، 100% للأسفل، 50% للوسط)
*/

/* 1. الإعدادات الافتراضية (للشاشات العادية وما فوق) */
/* استخدام pos-x لإزاحة الصورة بسلاسة بدلاً من transform لتجنب مشاكل القص */
.academy-side .v10-hero-img { 
  /* الأكاديمية (اليسار) */
  --zoom: 1.4;
  --pos-x: 50%;
  --pos-y: 50%;
}
.dana-side .v10-hero-img { 
  /* المتجر (اليمين) */
  --zoom: 1.4;
  --pos-x: 50%;
  --pos-y: 50%;
}

/*  الإعدادات الافتراضية (للشاشات العادية وما فوق) */
.academy-side .v10-hero-img { 
  /* الأكاديمية (اليسار) */
  --zoom: 0;
  --pos-x: 50%;
  --pos-y: 50%;
  transform:translateX(-10rem)
}
.dana-side .v10-hero-img { 
  /* المتجر (اليمين) */
  --zoom: 0;
  --pos-x: 50%;
  --pos-y: 50%;
}

/* 2. شاشات الكمبيوتر العملاقة (XXL - 1400px+) */
@media (min-width: 1400px) {
  .academy-side .v10-hero-img {
    --zoom: 0; 
    --pos-y:35%;
    transform:translateX(-190px);
  }
  .dana-side .v10-hero-img    {
    --zoom: 0; 
    --pos-x: 100%;
  }
}

/* 3. شاشات الكمبيوتر المحمول الكبيرة (XL - 1200px to 1399px) */
@media (max-width: 1399.9px) and (min-width: 1200px) {
  .academy-side .v10-hero-img {
    --zoom: 0; 
    --pos-y:40%;
    transform:translateX(-300px)
  }
  .dana-side .v10-hero-img    {
    --zoom: 0; 
    --pos-x:100%;
  }
}

/* 4. شاشات الكمبيوتر العادية (LG - 1025px to 1199px) */
@media (max-width: 1199.9px) and (min-width: 1025px) {

  .academy-side .v10-hero-img {
    --zoom: 0; 
    --pos-y:40%;
    transform:translateX(-200px)
  }
  .dana-side .v10-hero-img    {
    --zoom: 0; 
    --pos-x:100%;
    transform:translateX(-1px)
  }
}


@media (max-width: 1024.9px) {

  .academy-side .v10-hero-img {
    transform:unset;
  }
  .dana-side .v10-hero-img    {
  }
}

/* 5. التابلت (MD - 641px to 1024px) */
@media (max-width: 1024.9px) and (min-width: 641px) {
  .academy-side .v10-hero-img {
    --zoom: 0; 
    --pos-y:80%;
    --pos-x:100%;
  }
  .dana-side .v10-hero-img    {
    --pos-y:0%;
  }
}


@media (max-width: 880.9px) and (min-width: 641px) {
  .academy-side .v10-hero-img {
    --zoom: 0; 
    --pos-y:95%;
    --pos-x:100%;
  }
  .dana-side .v10-hero-img    {
    --pos-y:-20%;
  }
}

@media (max-width: 765.9px) and (min-width: 641px) {
  .academy-side .v10-hero-img {
    --zoom: 0; 
    --pos-y:140%;
    --pos-x:100%;
  }
  .dana-side .v10-hero-img    {
    --pos-y:-56%;
  }
}


@media (max-width: 700.9px) and (min-width: 641px) {
  .academy-side .v10-hero-img {
    --zoom: 0; 
    --pos-y:160%;
    --pos-x:100%;
  }
  .dana-side .v10-hero-img    {
    --pos-y:-130%;
  }
}


@media (max-width: 675.9px) and (min-width: 641px) {
  .academy-side .v10-hero-img {
    --zoom: 0; 
    --pos-y:240%;
    --pos-x:100%;
  }
  .dana-side .v10-hero-img    {
    --pos-y:-180%;
  }
}

@media (max-width: 650.9px) and (min-width: 641px) {
  .academy-side .v10-hero-img {
    --zoom: 0; 
    --pos-y:350%;
    --pos-x:100%;
  }
  .dana-side .v10-hero-img    {
    --pos-y:-300%;
  }
}


/* 6. الموبايل (XS - 640px and below) */
@media (max-width: 640.9px) {
  .academy-side .v10-hero-img {
    --zoom: 0; 
    --pos-y:350%;
    --pos-x:100%;
  }
  .dana-side .v10-hero-img    {
    --pos-y:-400%;
  }
}

@media (max-width: 620.9px) {
  .academy-side .v10-hero-img {
    --zoom: 0; 
    --pos-y:450%;
    --pos-x:100%;
  }
  .dana-side .v10-hero-img    {
    --pos-y:-800%;
  }
}

@media (max-width: 620.9px) {
  .academy-side .v10-hero-img {
    --zoom: 0; 
    --pos-y:750%;
    --pos-x:100%;
  }
  .dana-side .v10-hero-img    {
    --pos-y:-1500%;
  }
}


@media (max-width: 620.9px) {
  .academy-side .v10-hero-img {
    --zoom: 0; 
    --pos-y:750%;
    --pos-x:100%;
  }
  .dana-side .v10-hero-img    {
    --pos-y:-1500%;
  }
}

@media (max-width: 607.9px) {
  .academy-side .v10-hero-img {
    --zoom: 0; 
    --pos-y:1200%;
    --pos-x:100%;
  }
  .dana-side .v10-hero-img    {
    --pos-y:-2400%;
  }
}

@media (max-width: 604.9px) {
  .academy-side .v10-hero-img {
    --zoom: 0; 
    --pos-y:1800%;
    --pos-x:100%;
  }
  .dana-side .v10-hero-img    {
    --pos-y:-4900%;
  }
}






@media (max-width: 602.9px) {
 .academy-side .v10-hero-img {
    --zoom: 0;
    --pos-x: 50%;
    --pos-y: 50%; /* نتركها في المنتصف */
    
    /* الاختصار السحري: سحب الصورة للأعلى بمقدار ربع الشاشة لتتوسط القسم العلوي */
    --offset-y: -25vh; 
  }
  
  .dana-side .v10-hero-img {
    --zoom: 0;
    --pos-x: 50%;
    --pos-y: 50%; /* نتركها في المنتصف */
    
    /* الاختصار السحري: سحب الصورة للأسفل بمقدار ربع الشاشة لتتوسط القسم السفلي */
    --offset-y: 25vh; 
  }
}


@media (max-width: 524.9px) {
 .academy-side .v10-hero-img {
    --zoom: 0;
    --pos-x: 50%;
    --pos-y: 50%; /* نتركها في المنتصف */
    
    /* الاختصار السحري: سحب الصورة للأعلى بمقدار ربع الشاشة لتتوسط القسم العلوي */
    --offset-y: 25vh; 
  }
  
  .dana-side .v10-hero-img {
    --zoom: 0;
    --pos-x: 50%;
    --pos-y: 50%; /* نتركها في المنتصف */
    
    /* الاختصار السحري: سحب الصورة للأسفل بمقدار ربع الشاشة لتتوسط القسم السفلي */
    --offset-y: 25vh; 
  }
}

@media (max-width: 400.9px) {
 .academy-side .v10-hero-img {
    --zoom: 0;
    --pos-x: 50%;
    --pos-y: 50%; /* نتركها في المنتصف */
    
    /* الاختصار السحري: سحب الصورة للأعلى بمقدار ربع الشاشة لتتوسط القسم العلوي */
    --offset-y: 35vh; 

     transform:translateY(-6em)
  }
  
  .dana-side .v10-hero-img {
    --zoom: 0;
    --pos-x: 50%;
    --pos-y: 50%; /* نتركها في المنتصف */
    
    /* الاختصار السحري: سحب الصورة للأسفل بمقدار ربع الشاشة لتتوسط القسم السفلي */
    --offset-y: 35vh; 
  }
}

/* ========================================================= */
/* --- FIX FOR MOBILE SMART FLOW LAYOUT --- */
/* يحل هذا الكود تعارضات التموضع القديمة ويجعل الصورة تملأ القسم الجديد بالكامل */
@media (max-width: 1024px) {
  .academy-side .v10-hero-img,
  .dana-side .v10-hero-img {
    --zoom: 1 !important;
    --pos-x: 50% !important;
    --pos-y: 50% !important;
    --offset-x: 0px !important;
    --offset-y: 0px !important;
    transform: scale(1) translate(0px, 0px) !important;
    object-position: 50% 50% !important;
  }
}