/* Add custom CSS styles below */ 



footer,
footer *,
.footer,
.site-footer {
  background-color: #161B37 !important;
  color: #FFFFFF !important;
}
footer {
  padding: 48px 40px !important;
}

footer .row {
  gap: 32px;
}

footer .col {
  padding: 0 8px;
}

/* خلي الموقع كله يستخدم box-sizing border-box */
* {
  box-sizing: border-box;
}

/* اجعل الصور والفيديوهات مرنة */
img, video {
  max-width: 100%;
  height: auto;
}

/* خلي الحاويات الرئيسية مرنة */
.container, .main, .section {
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

/* Flexbox للعناصر اللي جنب بعض */
.flex-row {
  display: flex;
  flex-wrap: wrap; /* يخليها تنتقل للسطر الجديد لو ضاقت الشاشة */
  gap: 15px;
}

/* لكل العناصر الفرعية داخل flex-row */
.flex-row > * {
  flex: 1 1 250px; /* عرض مرن حسب المساحة */
}

/* Media Queries للتعديل حسب حجم الشاشة */
@media screen and (max-width: 1024px) {
  .flex-row {
    flex-direction: column; /* تخليهم عمودي على الشاشات المتوسطة */
  }
}

@media screen and (max-width: 480px) {
  body {
    font-size: 14px; /* تصغير النصوص للموبايل */
  }

  nav, .header, .footer {
    padding: 10px;
  }
}

/* خلي كل السيكشنات والمساحات فوق وتحت تظهر بفصل */
section, .section, .banner, .hero {
  margin-top: 40px;   /* المسافة فوق كل سيكشن */
  margin-bottom: 40px; /* المسافة تحت كل سيكشن */
}

/* لو فيه عناصر معينة زي العناوين محتاجة مسافة إضافية */
h1, h2, h3 {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* اجعل البانر منفصل شويه عن السيكشنات */
.banner {
  margin-bottom: 60px; /* ممكن تزودي أو تقللي حسب التصميم */
}

/* للصور والفيديوهات داخل السيكشن */
section img, section video {
  display: block;
  margin: 0 auto; /* توسيط */
  max-width: 100%;
}