/* =========================================
   sec2 (Why Phantom) — Mobile ≤ 600px
   يجعل الشكل مطابق للصورة الثانية:
   - عنوان صغير في الأعلى
   - نص يسار مع بادينج
   - صورة كاملة خلفية يمين
========================================= */
@media (max-width: 600px) {
    /* منع السكرول الأفقي */
    body {
      overflow-x: hidden !important;
      width: 100% !important;
      max-width: 100vw !important;
    }

    html {
      overflow-x: hidden !important;
      width: 100% !important;
    }

    /* اخفي نسخة الديسكتوب */
    #why-phantom .desktop-text {
      display: none !important;
    }
  
    /* العنوان في الأعلى مع مسافة أقل */
    #why-phantom .why-title-container {
      text-align: center !important;
      margin-bottom: 5px !important; /* قللت من 8px */
      padding: 0 !important;
      width: 100% !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
    }
    #why-phantom .main-title {
      font-size: 18px !important; /* توحيد حجم العنوان الرئيسي */
      font-weight: 700 !important;
      color: #FFFFFF !important;
      margin: 0 !important;
      padding: 0 !important;
      margin-bottom: 15px !important; /* إضافة بادينج بين العنوان والفقرة */
      text-align: center !important;
      width: auto !important;
      max-width: 100% !important;
    }

    /* صف العمودين */
    #why-phantom .content-row {
      display: flex !important;
      flex-direction: row !important;
      align-items: flex-start !important;
      justify-content: space-between !important;
      gap: 15px !important; /* زدت من 12px */
      overflow: hidden !important;
      margin-top: 0 !important; /* إزالة margin من فوق */
      padding-top: 0 !important; /* إزالة padding من فوق */
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
  
    /* عمود النص (يسار) مع بادينج */
    #why-phantom .mobile-text {
      display: flex !important;
      flex-direction: column !important;
      width: 52% !important;
      max-width: 240px !important;
      padding: 0 0 0 20px !important; /* بادينج من اليسار */
      gap: 10px !important; /* زدت من 8px */
      margin-top: 0 !important; /* إزالة margin من فوق */
      box-sizing: border-box !important;
      overflow: hidden !important;
    }

    #why-phantom .mobile-text .sub-title-container h3 {
      font-size: 14px !important; /* تصغير الخط ليكون أكثر تناسقاً */
      line-height: 130% !important;
      color: #fff !important;
      margin: 0 !important;
      padding: 0 !important;
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
    }
    #why-phantom .mobile-text .paragraph-container p,
    #why-phantom .features-list {
      font-size: 10px !important;
      line-height: 150% !important;
      color: #EAEAEACC !important;
      margin: 0 !important;
      padding: 0 !important;
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
    }
    #why-phantom .features-list {
      padding-left: 16px !important; /* نقط مرتبة */
      margin-top: 0 !important;
    }
    #why-phantom .button-container .contact-btn {
      width: 92px !important;
      height: 28px !important;
      font-size: 9px !important;
      border-radius: 6px !important;
      display: grid !important;
      place-content: center !important;
      background: #19A79B !important;
      color: #fff !important;
      text-decoration: none !important;
      box-shadow: 0 2px 8px rgba(25,167,155,.3) !important;
      margin-top: 8px !important; /* زدت من 5px */
    }
  
    /* عمود الصورة (يمين) - صورة كاملة خلفية */
    #why-phantom .right-image-group {
      width: 48% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-end !important;   /* يمين */
      margin: 0 !important;
      padding: 0 !important;
      padding-top: 25px !important; /* زيادة البادينج لإنزال الصورة أكثر */
      position: relative !important;
      box-sizing: border-box !important;
      overflow: hidden !important;
    }
  
    /* حجم الصورة الواحدة وشكل الكارت - صورة كاملة */
    #why-phantom .single-image-wrapper {
      width: 238px !important;   /* تكبير 25% من 190px */
      height: 175px !important;  /* تكبير 25% من 140px */
      border-radius: 16px !important;
      overflow: visible !important; /* لا قص للصورة */
      box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
      position: relative !important;
      box-sizing: border-box !important;
    }
    #why-phantom .single-image {
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important; /* صورة كاملة بدون قص */
      display: block !important;
    }

    /* ================================
       صورة mobile-blur-image تطلع لفوق
    ================================= */
    .mobile-blur-image {
      position: absolute !important;
      top: -10px !important; /* قللت أكثر من -20px */
      left: 50% !important;
      transform: translateX(-50%) !important;
      z-index: 1 !important;
      opacity: 0.6 !important;
    }

    /* ================================
       إزالة البادينج بين السكشن الثاني والثالث
    ================================= */
    #why-phantom {
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
      height: auto !important;
      min-height: auto !important;
    }

    #why-phantom .main-wrapper {
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
      height: auto !important;
      min-height: auto !important;
      max-height: none !important;
    }

    /* إزالة البادينج من أسفل السكشن */
    #why-phantom .content-row {
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
      height: auto !important;
      min-height: auto !important;
    }

    #why-phantom .mobile-text {
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
      height: auto !important;
      min-height: auto !important;
    }

    #why-phantom .right-image-group {
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
      height: auto !important;
      min-height: auto !important;
    }

    /* إزالة البادينج من السكشن الثالث أيضاً */
    .services-section {
      margin-top: 0 !important;
      padding-top: 15px !important;
    }

    /* إزالة البادينج من جميع العناصر */
    #why-phantom * {
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
    }
  }
  
  /* شاشات أصغر */
  @media (max-width: 480px) {
    #why-phantom .mobile-text { 
      width: 50% !important; 
      padding-left: 16px !important; /* بادينج أقل للشاشات الصغيرة */
    }
    #why-phantom .right-image-group { width: 50% !important; }
    #why-phantom .single-image-wrapper {
      width: 213px !important;   /* تكبير 25% من 170px */
      height: 163px !important;  /* تكبير 25% من 130px */
    }

    /* صورة mobile-blur-image تطلع أقل لفوق */
    .mobile-blur-image {
      top: -8px !important; /* قللت أكثر من -15px */
    }
  }
  @media (max-width: 360px) {
    #why-phantom .mobile-text {
      padding-left: 12px !important; /* بادينج أقل للشاشات الصغيرة جداً */
    }
    #why-phantom .single-image-wrapper {
      width: 188px !important;   /* تكبير 25% من 150px */
      height: 148px !important;  /* تكبير 25% من 118px */
    }

    /* صورة mobile-blur-image تطلع أقل لفوق */
    .mobile-blur-image {
      top: -5px !important; /* قللت أكثر من -10px */
    }
  }