.elementor-5219 .elementor-element.elementor-element-64618bc{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-5219 .elementor-element.elementor-element-0cf97a9 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-5219 .elementor-element.elementor-element-461e408 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}body.elementor-page-5219:not(.elementor-motion-effects-element-type-background), body.elementor-page-5219 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E6F0FA;}/* Start custom CSS *//* =========================================================
   1. المتغيرات المرنة (Fluid Variables)
   هذه القيم تكبر وتصغر بنعومة مع حجم الشاشة دون الحاجة لـ Media Queries
========================================================= */
:root {


  /* المسافات (Spacing) */
  --section-padding: clamp(40px, 8vw, 100px); /* حواف الأقسام من الأعلى والأسفل */
  --grid-gap: clamp(16px, 3vw, 32px);         /* الفراغات بين البطاقات */
}



/* =========================================================
   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 */