.elementor-5248 .elementor-element.elementor-element-f0a488b{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-5248 .elementor-element.elementor-element-fbc5da2 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-5248 .elementor-element.elementor-element-de656dd > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}body.elementor-page-5248:not(.elementor-motion-effects-element-type-background), body.elementor-page-5248 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-4b3b2f7 );}/* Start custom CSS *//* =========================================================
   1. المتغيرات المرنة (Fluid Variables)
   هذه القيم تكبر وتصغر بنعومة مع حجم الشاشة دون الحاجة لـ Media Queries
========================================================= */
:root {

/* =========================================================
   2. الشبكة التلقائية السحرية (Auto-Responsive Grid)
   تستخدم لترتيب البطاقات والمقالات لتتجاوب تلقائياً مع أي شاشة
========================================================= */
.tjd-auto-grid {
  display: grid !important;
  gap: var(--grid-gap) !important;
  /* السطر التالي هو السحر: يضع أكبر عدد من البطاقات بحجم لا يقل عن 280px، وينزلها لسطر جديد إذا ضاقت الشاشة */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
  width: 100%;
}

/* =========================================================
   3. معالجة الوضع العرضي (Landscape) للموبايل 
========================================================= */
@media (max-width: 932px) and (orientation: landscape) {
  /* في الموبايل العرضي، الشاشة تكون قصيرة جداً، لذا نقلل الهوامش العلوية والسفلية */
  .elementor-section, .elementor-container, .tjd-hero {
    min-height: auto !important; 
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}

/* =========================================================
   4. معالجة الآيباد والتابلت (Portrait & Landscape)
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
  /* الوضع الطولي (Portrait) للآيباد */
  @media (orientation: portrait) {
    .tjd-auto-grid {
      grid-template-columns: repeat(2, 1fr) !important; /* يجبر عرض بطاقتين فقط */
    }
  }
  
  /* الوضع العرضي (Landscape) للآيباد */
  @media (orientation: landscape) {
    .tjd-auto-grid {
      grid-template-columns: repeat(3, 1fr) !important; /* يجبر عرض 3 بطاقات */
    }
  }
}

/* =========================================================
   5. حاويات الأقسام (Section Wrappers)
========================================================= */
.tjd-section {
  padding: var(--section-padding) 5%; /* 5% تعطي هوامش جانبية ممتازة في كل الشاشات */
  max-width: 1400px; /* يمنع تمدد الموقع بشكل بشع في الشاشات العملاقة */
  margin: 0 auto;
}/* End custom CSS */