/*--------------------------------------------------------------
>>> استيراد الخطوط والمكتبات
--------------------------------------------------------------*/

@import url("../webfonts/fonts.css");
@import url("fontawesome-all.min.css");
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700,900");

@font-face {
  font-family: "Guaraldo Personal Use";
  src: url(../webfonts/GuaraldoPersonalUse-lggDe.ttf);
}

/*--------------------------------------------------------------
>>> إعداد الخط الافتراضي
--------------------------------------------------------------*/

* {
  font-family: "Source Sans Pro", sans-serif;
}

.feature-list h3 {
  /* font-family: 'Guaraldo Personal Use', sans-serif !important; */
  font-family: "wilkesonbold";
  font-weight: normal;
}

/*--------------------------------------------------------------
>>> معلومات القالب الأصلي
    Escape Velocity by HTML5 UP
    html5up.net | @ajlkn
    License: CCA 3.0 (html5up.net/license)
--------------------------------------------------------------*/

/*--------------------------------------------------------------
>>> Reset CSS (تهيئة جميع العناصر لتكون بدون تنسيق افتراضي)
--------------------------------------------------------------*/

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* NOTE: يوجد هنا خطأ صغير في السطر التالي (حرف "f" زائد) */
body {f
  -webkit-text-size-adjust: none;
}

mark {
  background-color: transparent;
  color: inherit;
}

input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input, select, textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
}

/*--------------------------------------------------------------
>>> الأساسيات العامة (Basic)
--------------------------------------------------------------*/

@-ms-viewport {
  width: device-width;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* تعطيل التحريكات أثناء التحميل */
body.is-preload *,
body.is-preload *:before,
body.is-preload *:after {
  -moz-animation: none !important;
  -webkit-animation: none !important;
  -ms-animation: none !important;
  animation: none !important;
  -moz-transition: none !important;
  -webkit-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

/* إعدادات النصوص الأساسية */
body, input, textarea, select {
  font-family: "wilkesonregular";
  font-weight: normal;
  color: #919499;
  font-size: 14pt;
  line-height: 1.75em;
  letter-spacing: 0.025em;
}

/* العناوين */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: #484d55;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit;
  text-decoration: none;
}

/* الروابط */
a {
  -moz-transition: color .25s ease-in-out;
  -webkit-transition: color .25s ease-in-out;
  -ms-transition: color .25s ease-in-out;
  transition: color .25s ease-in-out;
  text-decoration: underline;
  color: #717479;
}

a:hover {
  text-decoration: none;
}

/* النص الغامق */
strong, b {
  font-weight: 700;
  color: #484d55;
}

/* الاقتباسات */
blockquote {
  border-left: solid 0.5em #ddd;
  padding: 1em 0 1em 2em;
  font-style: italic;
}

/* النص المائل */
em, i {
  font-style: italic;
}

/* الخط الأفقي */
hr {
  border: 0;
  border-top: solid 1px #ddd;
  margin: 2em 0;
}

/* الأسطر العلوية والسفلية للنص */
sub {
  position: relative;
  top: 0.5em;
  font-size: 0.8em;
}

sup {
  position: relative;
  top: -0.5em;
  font-size: 0.8em;
}

/* النصوص المتصلة بدون كسر */
.nobr {
  white-space: nowrap;
}

/* مسح الفلوتر */
br.clear {
  clear: both;
}

/* الهوامش الافتراضية للعناصر */
p, ul, ol, dl, table, blockquote, form {
  margin-bottom: 2em;
}
/*--------------------------------------------------------------
>>> الحاوية الرئيسية (Container)
--------------------------------------------------------------*/

.container {
  margin: 0 auto;
  max-width: 100%;
  width: 68em;
}

/* NOTE: يتم تقليل عرض الحاوية تدريجيًا لتكون متجاوبة مع الشاشات المختلفة */

@media screen and (max-width: 1680px) {
  .container {
    width: 70em;
  }
}

@media screen and (max-width: 1280px) {
  .container {
    width: calc(100% - 100px);
  }
}

@media screen and (max-width: 980px) {
  .container {
    width: calc(100% - 100px);
  }
}

@media screen and (max-width: 736px) {
  .container {
    width: calc(100% - 40px);
  }
}

/*--------------------------------------------------------------
>>> نظام الصفوف (Row System)
--------------------------------------------------------------*/

.row {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  align-items: stretch;
}

.row > * {
  box-sizing: border-box;
}

/* NOTE: إزالة المسافات السفلية من آخر عنصر داخل الأعمدة */
.row.gtr-uniform > * > :last-child {
  margin-bottom: 0;
}

/* محاذاة العناصر داخل الصف */
.row.aln-left {
  justify-content: flex-start;
}
.row.aln-center {
  justify-content: center;
}
.row.aln-right {
  justify-content: flex-end;
}
.row.aln-top {
  align-items: flex-start;
}
.row.aln-middle {
  align-items: center;
}
.row.aln-bottom {
  align-items: flex-end;
}

/* ترتيب العمود الإجباري */
.row > .imp {
  order: -1;
}

/*--------------------------------------------------------------
>>> الأعمدة الأساسية  (col / offset system)
--------------------------------------------------------------*/

/* NOTE: الأعمدة مبنية على نظام 12 عمود (12 Grid) */

.row > .col-1 { width: 8.33333%; }
.row > .off-1 { margin-left: 8.33333%; }

.row > .col-2 { width: 16.66667%; }
.row > .off-2 { margin-left: 16.66667%; }

.row > .col-3 { width: 25%; }
.row > .off-3 { margin-left: 25%; }

.row > .col-4 { width: 33.33333%; }
.row > .off-4 { margin-left: 33.33333%; }

.row > .col-5 { width: 41.66667%; }
.row > .off-5 { margin-left: 41.66667%; }

.row > .col-6 { width: 50%; }
.row > .off-6 { margin-left: 50%; }

.row > .col-7 { width: 58.33333%; }
.row > .off-7 { margin-left: 58.33333%; }

.row > .col-8 { width: 66.66667%; }
.row > .off-8 { margin-left: 66.66667%; }

.row > .col-9 { width: 75%; }
.row > .off-9 { margin-left: 75%; }

.row > .col-10 { width: 83.33333%; }
.row > .off-10 { margin-left: 83.33333%; }

.row > .col-11 { width: 91.66667%; }
.row > .off-11 { margin-left: 91.66667%; }

.row > .col-12 { width: 100%; }
.row > .off-12 { margin-left: 100%; }

/*--------------------------------------------------------------
>>> المسافات بين الأعمدة (gutters)
--------------------------------------------------------------*/

.row.gtr-0 {
  margin-top: 0;
  margin-left: 0;
}
.row.gtr-0 > * {
  padding: 0;
}
.row.gtr-0.gtr-uniform {
  margin-top: 0;
}
.row.gtr-0.gtr-uniform > * {
  padding-top: 0;
}

/* NOTE: كل إعداد gtr-nn يتحكم في حجم التباعد بين الأعمدة */
.row.gtr-25 {
  margin-top: -12.5px;
  margin-left: -12.5px;
}
.row.gtr-25 > * {
  padding: 12.5px 0 0 12.5px;
}
.row.gtr-25.gtr-uniform > * {
  padding-top: 12.5px;
}

.row.gtr-50 {
  margin-top: -25px;
  margin-left: -25px;
}
.row.gtr-50 > * {
  padding: 25px 0 0 25px;
}
.row.gtr-50.gtr-uniform > * {
  padding-top: 25px;
}

.row {
  margin-top: -50px;
  margin-left: -50px;
}
.row > * {
  padding: 50px 0 0 50px;
}
.row.gtr-uniform > * {
  padding-top: 50px;
}

.row.gtr-150 {
  margin-top: -75px;
  margin-left: -75px;
}
.row.gtr-150 > * {
  padding: 75px 0 0 75px;
}
.row.gtr-150.gtr-uniform > * {
  padding-top: 75px;
}

.row.gtr-200 {
  margin-top: -100px;
  margin-left: -100px;
}
.row.gtr-200 > * {
  padding: 100px 0 0 100px;
}
.row.gtr-200.gtr-uniform > * {
  padding-top: 100px;
}

/*--------------------------------------------------------------
>>> إعدادات متجاوبة خاصة بالشاشات الكبيرة (max-width: 1680px)
--------------------------------------------------------------*/

/* NOTE: يتم تكرار نفس نظام الأعمدة ولكن بأسماء مختلفة مثل col-6-xlarge */

@media screen and (max-width: 1680px) {

  .row {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;
  }

  .row > * {
    box-sizing: border-box;
  }

  .row.gtr-uniform > * > :last-child {
    margin-bottom: 0;
  }

  .row.aln-left { justify-content: flex-start; }
  .row.aln-center { justify-content: center; }
  .row.aln-right { justify-content: flex-end; }
  .row.aln-top { align-items: flex-start; }
  .row.aln-middle { align-items: center; }
  .row.aln-bottom { align-items: flex-end; }

  .row > .imp-xlarge { order: -1; }

  .row > .col-1-xlarge { width: 8.33333%; }
  .row > .off-1-xlarge { margin-left: 8.33333%; }

  .row > .col-2-xlarge { width: 16.66667%; }
  .row > .off-2-xlarge { margin-left: 16.66667%; }

  .row > .col-3-xlarge { width: 25%; }
  .row > .off-3-xlarge { margin-left: 25%; }

  .row > .col-4-xlarge { width: 33.33333%; }
  .row > .off-4-xlarge { margin-left: 33.33333%; }

  .row > .col-5-xlarge { width: 41.66667%; }
  .row > .off-5-xlarge { margin-left: 41.66667%; }

  .row > .col-6-xlarge { width: 50%; }
  .row > .off-6-xlarge { margin-left: 50%; }

  .row > .col-7-xlarge { width: 58.33333%; }
  .row > .off-7-xlarge { margin-left: 58.33333%; }

  .row > .col-8-xlarge { width: 66.66667%; }
  .row > .off-8-xlarge { margin-left: 66.66667%; }

  .row > .col-9-xlarge { width: 75%; }
  .row > .off-9-xlarge { margin-left: 75%; }

  .row > .col-10-xlarge { width: 83.33333%; }
  .row > .off-10-xlarge { margin-left: 83.33333%; }

  .row > .col-11-xlarge { width: 91.66667%; }
  .row > .off-11-xlarge { margin-left: 91.66667%; }

  .row > .col-12-xlarge { width: 100%; }
  .row > .off-12-xlarge { margin-left: 100%; }

  /* NOTE: نفس نظام المسافات يتم تكراره داخل الميديا كويري */

  .row.gtr-25 { margin-top: -12.5px; margin-left: -12.5px; }
  .row.gtr-25 > * { padding: 12.5px 0 0 12.5px; }
  .row.gtr-25.gtr-uniform > * { padding-top: 12.5px; }

  .row.gtr-50 { margin-top: -25px; margin-left: -25px; }
  .row.gtr-50 > * { padding: 25px 0 0 25px; }
  .row.gtr-50.gtr-uniform > * { padding-top: 25px; }

  .row.gtr-150 { margin-top: -75px; margin-left: -75px; }
  .row.gtr-150 > * { padding: 75px 0 0 75px; }
  .row.gtr-150.gtr-uniform > * { padding-top: 75px; }

  .row.gtr-200 { margin-top: -100px; margin-left: -100px; }
  .row.gtr-200 > * { padding: 100px 0 0 100px; }
  .row.gtr-200.gtr-uniform > * { padding-top: 100px; }
}
/*--------------------------------------------------------------
>>> إعدادات الشبكة (Row System) للشاشات حتى 1280px
--------------------------------------------------------------*/

@media screen and (max-width: 1280px) {

  /* إعداد الصفوف */
  .row {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;
  }

  .row > * {
    box-sizing: border-box;
  }

  .row.gtr-uniform > * > :last-child {
    margin-bottom: 0;
  }

  /* محاذاة الأعمدة داخل الصف */
  .row.aln-left { justify-content: flex-start; }
  .row.aln-center { justify-content: center; }
  .row.aln-right { justify-content: flex-end; }
  .row.aln-top { align-items: flex-start; }
  .row.aln-middle { align-items: center; }
  .row.aln-bottom { align-items: flex-end; }

  /* تحديد ترتيب الأعمدة */
  .row > .imp-large {
    order: -1;
  }

  /*--------------------------------------------------------------
    >>> نظام الأعمدة (12 Column Grid)
  --------------------------------------------------------------*/

  .row > .col-1-large { width: 8.33333%; }
  .row > .off-1-large { margin-left: 8.33333%; }

  .row > .col-2-large { width: 16.66667%; }
  .row > .off-2-large { margin-left: 16.66667%; }

  .row > .col-3-large { width: 25%; }
  .row > .off-3-large { margin-left: 25%; }

  .row > .col-4-large { width: 33.33333%; }
  .row > .off-4-large { margin-left: 33.33333%; }

  .row > .col-5-large { width: 41.66667%; }
  .row > .off-5-large { margin-left: 41.66667%; }

  .row > .col-6-large { width: 50%; }
  .row > .off-6-large { margin-left: 50%; }

  .row > .col-7-large { width: 58.33333%; }
  .row > .off-7-large { margin-left: 58.33333%; }

  .row > .col-8-large { width: 66.66667%; }
  .row > .off-8-large { margin-left: 66.66667%; }

  .row > .col-9-large { width: 75%; }
  .row > .off-9-large { margin-left: 75%; }

  .row > .col-10-large { width: 83.33333%; }
  .row > .off-10-large { margin-left: 83.33333%; }

  .row > .col-11-large { width: 91.66667%; }
  .row > .off-11-large { margin-left: 91.66667%; }

  .row > .col-12-large { width: 100%; }
  .row > .off-12-large { margin-left: 100%; }

  /*--------------------------------------------------------------
    >>> المسافات بين الأعمدة (Gutters)
  --------------------------------------------------------------*/

  /* NOTE: كل مجموعة gtr-NN تحدد مقدار المسافة بين الأعمدة */

  .row.gtr-0 {
    margin-top: 0;
    margin-left: 0;
  }

  .row.gtr-0 > * {
    padding: 0;
  }

  .row.gtr-0.gtr-uniform {
    margin-top: 0;
  }

  .row.gtr-0.gtr-uniform > * {
    padding-top: 0;
  }

  .row.gtr-25 {
    margin-top: -8.75px;
    margin-left: -8.75px;
  }

  .row.gtr-25 > * {
    padding: 8.75px 0 0 8.75px;
  }

  .row.gtr-25.gtr-uniform > * {
    padding-top: 8.75px;
  }

  .row.gtr-50 {
    margin-top: -17.5px;
    margin-left: -17.5px;
  }

  .row.gtr-50 > * {
    padding: 17.5px 0 0 17.5px;
  }

  .row.gtr-50.gtr-uniform > * {
    padding-top: 17.5px;
  }

  /* المسافة الافتراضية */
  .row {
    margin-top: -35px;
    margin-left: -35px;
  }

  .row > * {
    padding: 35px 0 0 35px;
  }

  .row.gtr-uniform > * {
    padding-top: 35px;
  }

  .row.gtr-150 {
    margin-top: -52.5px;
    margin-left: -52.5px;
  }

  .row.gtr-150 > * {
    padding: 52.5px 0 0 52.5px;
  }

  .row.gtr-150.gtr-uniform > * {
    padding-top: 52.5px;
  }

  .row.gtr-200 {
    margin-top: -70px;
    margin-left: -70px;
  }

  .row.gtr-200 > * {
    padding: 70px 0 0 70px;
  }

  .row.gtr-200.gtr-uniform > * {
    padding-top: 70px;
  }
}

/*--------------------------------------------------------------
🟡 ملاحظات تقنية:
--------------------------------------------------------------
1️⃣ هذا النظام مرن جدًا، لكنه مكرر بشكل كبير.
   يمكن استبداله لاحقًا بـ CSS Grid لتقليل حجم الكود بأكثر من 70%.
2️⃣ استخدام الأسماء (col-6-large / col-6-xlarge ...) يساعد
   على التخصيص الدقيق لكل فئة عرض شاشة.
3️⃣ طريقة استخدام المسافات السالبة (-margin)
   ذكية لخلق التوازن في الشبكة لكنها قد تؤثر على بعض الـanimations أو الـoverflow.
--------------------------------------------------------------*/
/*--------------------------------------------------------------
>>> نظام الصفوف (Row System) للشاشات المتوسطة - حتى 980px
--------------------------------------------------------------*/

@media screen and (max-width: 980px) {

  /* إعداد الصفوف */
  .row {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;
  }

  .row > * {
    box-sizing: border-box;
  }

  /* إزالة الهوامش من آخر عنصر في الأعمدة */
  .row.gtr-uniform > * > :last-child {
    margin-bottom: 0;
  }

  /* محاذاة العناصر داخل الصف */
  .row.aln-left { justify-content: flex-start; }
  .row.aln-center { justify-content: center; }
  .row.aln-right { justify-content: flex-end; }

  .row.aln-top { align-items: flex-start; }
  .row.aln-middle { align-items: center; }
  .row.aln-bottom { align-items: flex-end; }

  /* ترتيب الأعمدة حسب الحاجة */
  .row > .imp-medium {
    order: -1;
  }

  /*--------------------------------------------------------------
    >>> الأعمدة (Column Widths)
  --------------------------------------------------------------*/

  .row > .col-1-medium { width: 8.33333%; }
  .row > .off-1-medium { margin-left: 8.33333%; }

  .row > .col-2-medium { width: 16.66667%; }
  .row > .off-2-medium { margin-left: 16.66667%; }

  .row > .col-3-medium { width: 25%; }
  .row > .off-3-medium { margin-left: 25%; }

  .row > .col-4-medium { width: 33.33333%; }
  .row > .off-4-medium { margin-left: 33.33333%; }

  .row > .col-5-medium { width: 41.66667%; }
  .row > .off-5-medium { margin-left: 41.66667%; }

  .row > .col-6-medium { width: 50%; }
  .row > .off-6-medium { margin-left: 50%; }

  .row > .col-7-medium { width: 58.33333%; }
  .row > .off-7-medium { margin-left: 58.33333%; }

  .row > .col-8-medium { width: 66.66667%; }
  .row > .off-8-medium { margin-left: 66.66667%; }

  .row > .col-9-medium { width: 75%; }
  .row > .off-9-medium { margin-left: 75%; }

  .row > .col-10-medium { width: 83.33333%; }
  .row > .off-10-medium { margin-left: 83.33333%; }

  .row > .col-11-medium { width: 91.66667%; }
  .row > .off-11-medium { margin-left: 91.66667%; }

  .row > .col-12-medium { width: 100%; }
  .row > .off-12-medium { margin-left: 100%; }

  /*--------------------------------------------------------------
    >>> المسافات بين الأعمدة (Gutters)
  --------------------------------------------------------------*/

  .row.gtr-0 {
    margin-top: 0;
    margin-left: 0;
  }

  .row.gtr-0 > * {
    padding: 0;
  }

  .row.gtr-0.gtr-uniform {
    margin-top: 0;
  }

  .row.gtr-0.gtr-uniform > * {
    padding-top: 0;
  }

  /* NOTE: يتم استخدام قيم أصغر للمسافات لتناسب الشاشات الأصغر */

  .row.gtr-25 {
    margin-top: -12.5px;
    margin-left: -12.5px;
  }

  .row.gtr-25 > * {
    padding: 12.5px 0 0 12.5px;
  }

  .row.gtr-25.gtr-uniform > * {
    padding-top: 12.5px;
  }

  .row.gtr-50 {
    margin-top: -25px;
    margin-left: -25px;
  }

  .row.gtr-50 > * {
    padding: 25px 0 0 25px;
  }

  .row.gtr-50.gtr-uniform > * {
    padding-top: 25px;
  }

  /* المسافات الافتراضية */
  .row {
    margin-top: -50px;
    margin-left: -50px;
  }

  .row > * {
    padding: 50px 0 0 50px;
  }

  .row.gtr-uniform > * {
    padding-top: 50px;
  }

  .row.gtr-150 {
    margin-top: -75px;
    margin-left: -75px;
  }

  .row.gtr-150 > * {
    padding: 75px 0 0 75px;
  }

  .row.gtr-150.gtr-uniform > * {
    padding-top: 75px;
  }

  .row.gtr-200 {
    margin-top: -100px;
    margin-left: -100px;
  }

  .row.gtr-200 > * {
    padding: 100px 0 0 100px;
  }

  .row.gtr-200.gtr-uniform > * {
    padding-top: 100px;
  }
}

/*--------------------------------------------------------------
🟡 ملاحظات مهمة:
--------------------------------------------------------------
1️⃣ هذا الجزء يتحكم في تقسيم الصفحة عند العرض على التابلت أو اللابتوب الصغير.
2️⃣ الأعمدة ما زالت بنظام 12 عمود لكن ممكن يتم دمجها تلقائيًا (col-12 = صف كامل).
3️⃣ لو في مشاكل في التصميم على الموبايل، يُفضّل تعديل القيم هنا أولاً قبل باقي الأقسام.
--------------------------------------------------------------*/
/*--------------------------------------------------------------
>>> نظام الصفوف (Row System) للشاشات الصغيرة - حتى 736px
--------------------------------------------------------------*/

@media screen and (max-width: 736px) {

  /* إعداد الصفوف */
  .row {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;
  }

  .row > * {
    box-sizing: border-box;
  }

  /* إزالة الهوامش السفلية من آخر عنصر */
  .row.gtr-uniform > * > :last-child {
    margin-bottom: 0;
  }

  /* المحاذاة الأفقية والعمودية */
  .row.aln-left { justify-content: flex-start; }
  .row.aln-center { justify-content: center; }
  .row.aln-right { justify-content: flex-end; }

  .row.aln-top { align-items: flex-start; }
  .row.aln-middle { align-items: center; }
  .row.aln-bottom { align-items: flex-end; }

  /* ترتيب الأعمدة حسب الأولوية */
  .row > .imp-small {
    order: -1;
  }

  /*--------------------------------------------------------------
    >>> نظام الأعمدة (Columns)
  --------------------------------------------------------------*/

  .row > .col-1-small { width: 8.33333%; }
  .row > .off-1-small { margin-left: 8.33333%; }

  .row > .col-2-small { width: 16.66667%; }
  .row > .off-2-small { margin-left: 16.66667%; }

  .row > .col-3-small { width: 25%; }
  .row > .off-3-small { margin-left: 25%; }

  .row > .col-4-small { width: 33.33333%; }
  .row > .off-4-small { margin-left: 33.33333%; }

  .row > .col-5-small { width: 41.66667%; }
  .row > .off-5-small { margin-left: 41.66667%; }

  .row > .col-6-small { width: 50%; }
  .row > .off-6-small { margin-left: 50%; }

  .row > .col-7-small { width: 58.33333%; }
  .row > .off-7-small { margin-left: 58.33333%; }

  .row > .col-8-small { width: 66.66667%; }
  .row > .off-8-small { margin-left: 66.66667%; }

  .row > .col-9-small { width: 75%; }
  .row > .off-9-small { margin-left: 75%; }

  .row > .col-10-small { width: 83.33333%; }
  .row > .off-10-small { margin-left: 83.33333%; }

  .row > .col-11-small { width: 91.66667%; }
  .row > .off-11-small { margin-left: 91.66667%; }

  .row > .col-12-small { width: 100%; }
  .row > .off-12-small { margin-left: 100%; }

  /*--------------------------------------------------------------
    >>> المسافات بين الأعمدة (Gutters)
  --------------------------------------------------------------*/

  .row.gtr-0 {
    margin-top: 0;
    margin-left: 0;
  }

  .row.gtr-0 > * {
    padding: 0;
  }

  .row.gtr-0.gtr-uniform { margin-top: 0; }
  .row.gtr-0.gtr-uniform > * { padding-top: 0; }

  /* NOTE: الهوامش والمسافات هنا أصغر لأنها تناسب شاشة الموبايل */

  .row.gtr-25 {
    margin-top: -7.5px;
    margin-left: -7.5px;
  }

  .row.gtr-25 > * {
    padding: 7.5px 0 0 7.5px;
  }

  .row.gtr-25.gtr-uniform > * {
    padding-top: 7.5px;
  }

  .row.gtr-50 {
    margin-top: -15px;
    margin-left: -15px;
  }

  .row.gtr-50 > * {
    padding: 15px 0 0 15px;
  }

  .row.gtr-50.gtr-uniform > * {
    padding-top: 15px;
  }

  /* المسافات الافتراضية */
  .row {
    margin-top: -30px;
    margin-left: -30px;
  }

  .row > * {
    padding: 30px 0 0 30px;
  }

  .row.gtr-uniform > * {
    padding-top: 30px;
  }

  .row.gtr-150 {
    margin-top: -45px;
    margin-left: -45px;
  }

  .row.gtr-150 > * {
    padding: 45px 0 0 45px;
  }

  .row.gtr-150.gtr-uniform > * {
    padding-top: 45px;
  }

  .row.gtr-200 {
    margin-top: -60px;
    margin-left: -60px;
  }

  .row.gtr-200 > * {
    padding: 60px 0 0 60px;
  }

  .row.gtr-200.gtr-uniform > * {
    padding-top: 60px;
  }
}

/*--------------------------------------------------------------
🟢 ملاحظات هامة:
--------------------------------------------------------------
✅ هذا الجزء مسؤول عن جعل الصفحة تعمل بسلاسة على الموبايل.
✅ الأعمدة تُعرض عادة بشكل عمودي (col-12-small) أي تأخذ العرض الكامل.
✅ الهوامش والتباعد هنا مضبوطة لتناسب العرض الصغير وتمنع التداخل.
✅ لو التصميم في الموبايل غير مضبوط، فهذا هو الجزء الذي تُعدل عليه أولاً.
--------------------------------------------------------------*/
/*--------------------------------------------------------------
>>> الأقسام والمقالات (Sections / Articles)
--------------------------------------------------------------*/

section,
article {
  margin: 0 0 4em 0;
}

/* إزالة الهوامش من آخر عنصر في القسم أو المقال */
section > :last-child,
article > :last-child,
section:last-child,
article:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
>>> العناوين العامة داخل الأقسام (Header Style 1)
--------------------------------------------------------------*/

header.style1 {
  text-align: center;
  padding: 3em 0;
}

header.style1 h2 {
  font-weight: 700;
  font-size: 2em;
  letter-spacing: 0.075em;
  line-height: 1.5em;
}

header.style1 p {
  color: #b1b4b9;
  display: block;
  margin: 1.15em 0 0 0;
  font-size: 1.3em;
  letter-spacing: 0.075em;
  line-height: 1.5em;
}

/*--------------------------------------------------------------
>>> الجداول (Table)
--------------------------------------------------------------*/

table {
  width: 100%;
}

/* جدول بتصميم افتراضي */
table.default {
  width: 100%;
}

/* الصفوف الزوجية لها خلفية مختلفة */
table.default tbody tr:nth-child(2n+2) {
  background: #f4f4f4;
}

/* خلايا البيانات */
table.default td {
  padding: 0.5em 1em;
}

/* خلايا العناوين */
table.default th {
  text-align: left;
  font-weight: 400;
  padding: 0.5em 1em;
}

/* رأس الجدول */
table.default thead {
  background: #484d55;
  color: #fff;
}

/* تذييل الجدول */
table.default tfoot {
  background: #eee;
}

/*--------------------------------------------------------------
>>> النماذج (Forms)
--------------------------------------------------------------*/

form label {
  display: block;
  font-weight: 700;
  color: #484d55;
  margin: 0.25em 0 0.5em 0;
}

/* الحقول الأساسية */
form input[type="text"],
form input[type="email"],
form input[type="password"],
form select,
form textarea {
  -moz-transition: all .25s ease-in-out;
  -webkit-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
  -webkit-appearance: none;
  display: block;
  border: 0;
  background: #eee;
  box-shadow: inset 0px 0px 1px 0px #a0a1a7;
  border-radius: 0.35em;
  width: 100%;
  padding: 0.75em 1em;
}

/* تأثير عند التركيز */
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form select:focus,
form textarea:focus {
  background: #f8f8f8;
}

/* NOTE ⚠️: هنا يوجد خطأ بسيط في الكود الأصلي:
   form input[type="email"] input[type="password"]
   المفروض بينهم فاصلة "," وليس مباشرة */

form input[type="text"],
form input[type="email"],
form input[type="password"] {
  line-height: 1em;
}

/* القوائم المنسدلة */
form select {
  line-height: 1em;
}

/* منطقة النص */
form textarea {
  min-height: 8em;
}

/* الأزرار داخل النماذج */
form ul.actions {
  margin-top: 0;
}

/* نصوص الـ placeholder */
form ::-webkit-input-placeholder {
  color: #555 !important;
  font-style: italic;
  line-height: 1.35em;
}

form :-moz-placeholder,
form ::-moz-placeholder,
form :-ms-input-placeholder {
  color: #555 !important;
  font-style: italic;
}

/* إزالة حدود التركيز في فايرفوكس */
form ::-moz-focus-inner {
  border: 0;
}

/*--------------------------------------------------------------
>>> الصور (Images)
--------------------------------------------------------------*/

.image {
  display: inline-block;
}

.image img {
  display: block;
  width: 100%;
}

/* الصورة تمتد على عرض الحاوية */
.image.fit {
  display: block;
  width: 100%;
}

/* الصورة إلى اليسار */
.image.left {
  float: left;
  margin: 0 2em 2em 0;
}

/* الصورة في المنتصف */
.image.centered {
  display: block;
  margin: 0 0 2em 0;
}

.image.centered img {
  margin: 0 auto;
  width: auto;
}

/* الصورة الرئيسية */
.image.featured {
  display: block;
  width: 100%;
  margin: 0 0 2em 0;
}

/*--------------------------------------------------------------
>>> الأزرار (Buttons)
--------------------------------------------------------------*/

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
  -moz-transition: all .25s ease-in-out;
  -webkit-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
  display: inline-block;
  background: #444;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-decoration: none;
  border-radius: 0.35em;
  border: 0;
  outline: 0;
  cursor: pointer;
  padding: 0 2.25em;
  font-size: 0.9em;
  min-width: 12em;
  height: 4em;
  line-height: 4em;
}

/* تأثير hover للأزرار */
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover,
.button:hover {
  background-color: #f98780;
}

/* الأزرار الكبيرة */
input[type="button"].large,
input[type="submit"].large,
input[type="reset"].large,
button.large,
.button.large {
  font-size: 1em;
  min-width: 14em;
}

/*--------------------------------------------------------------
>>> الزر style1 (الأخضر)
--------------------------------------------------------------*/

input[type="button"].style1,
input[type="submit"].style1,
input[type="reset"].style1,
button.style1,
.button.style1 {
  background: #34b56a url("images/overlay.png");
  color: #fff;
}

input[type="button"].style1:hover,
input[type="submit"].style1:hover,
input[type="reset"].style1:hover,
button.style1:hover,
.button.style1:hover {
  opacity: .5;
}

input[type="button"].style1:active,
input[type="submit"].style1:active,
input[type="reset"].style1:active,
button.style1:active,
.button.style1:active {
  background-color: #d96760;
}

/*--------------------------------------------------------------
>>> الزر style2 (رمادي محايد)
--------------------------------------------------------------*/

input[type="button"].style2,
input[type="submit"].style2,
input[type="reset"].style2,
button.style2,
.button.style2 {
  background: none;
  color: #606167;
  box-shadow: inset 0px 0px 2px 0px #a0a1a7;
}

input[type="button"].style2:hover,
input[type="submit"].style2:hover,
input[type="reset"].style2:hover,
button.style2:hover,
.button.style2:hover {
  background-color: #ccc;
}

input[type="button"].style2:active,
input[type="submit"].style2:active,
input[type="reset"].style2:active,
button.style2:active,
.button.style2:active {
  box-shadow: inset 0px 0px 2px 0px #202127;
}

/*--------------------------------------------------------------
>>> الزر style3 (غامق / أسود مائل للأخضر)
--------------------------------------------------------------*/

input[type="button"].style3,
input[type="submit"].style3,
input[type="reset"].style3,
button.style3,
.button.style3 {
  background: #0a2f2d url("images/overlay.png");
  color: #fff;
}

input[type="button"].style3:hover,
input[type="submit"].style3:hover,
input[type="reset"].style3:hover,
button.style3:hover,
.button.style3:hover {
  background-color: #3f434b;
}

input[type="button"].style3:active,
input[type="submit"].style3:active,
input[type="reset"].style3:active,
button.style3:active,
.button.style3:active {
  background-color: #1f232b;
}
/*--------------------------------------------------------------
>>> القوائم (Lists)
--------------------------------------------------------------*/

ul {
  list-style: disc;
  padding-left: 1em;
}

ul li {
  padding-left: 0.5em;
}

/* قائمة بدون نقاط */
ul.style2 {
  list-style: none;
  padding-left: 0;
}

ul.style2 li {
  border-top: solid 1px #eee;
  padding: 1.5em 0 0 0;
  margin: 1.5em 0 0 0;
}

ul.style2 li:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

/* قائمة مصغّرة */
ul.style3 {
  list-style: none;
  padding-left: 0;
}

ul.style3 li {
  border-top: solid 1px #eee;
  padding: 0.5em 0 0 0;
  margin: 0.5em 0 0 0;
}

ul.style3 li:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

/* القوائم المرتبة */
ol {
  list-style: decimal;
  padding-left: 1.25em;
}

ol li {
  padding-left: 0.25em;
}

/*--------------------------------------------------------------
>>> أزرار العمليات (Actions)
--------------------------------------------------------------*/

ul.actions {
  list-style: none;
  padding-left: 0;
  margin: 3em 0 0 0;
}

ul.actions li {
  display: inline-block;
  margin: 0 0.75em;
  padding-left: 0;
}

ul.actions li:first-child {
  margin-left: 0;
}

ul.actions li:last-child {
  margin-right: 0;
}

/* أزرار في المنتصف */
ul.actions.special {
  text-align: center;
}

/*--------------------------------------------------------------
>>> قائمة الخصائص (Feature List)
--------------------------------------------------------------*/

.feature-list {
  max-width: 58em;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 0.75em;
}

/* عنصر داخل قائمة الخصائص */
.feature-list section {
  border-top: solid 1px #eee;
  padding-top: 3em;
  padding-left: 5em;
  position: relative;
}

/* إزالة الحد العلوي لأول عنصرين على الشاشات الكبيرة */
@media screen and (min-width: 981px) {
  .feature-list > .row > :nth-child(-n + 2) > section {
    border-top: 0;
    padding-top: 0;
  }
}

/* عناوين الخصائص */
.feature-list h3 {
  color: #34b56a !important;
  margin: -0.35em 0 0.75em 0;
  font-size: 1.15em;
  letter-spacing: 0.05em;
}

/* الدائرة قبل العنوان */
.feature-list h3:before {
  display: block;
  color: #fff;
  background: #0a2f2d url("images/overlay.png");
  border-radius: 2.5em;
  text-align: center;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  margin-right: 0.75em;
  position: absolute;
  left: 0;
  margin-top: -0.5em;
}

/* نسخة أصغر من القائمة */
.feature-list.small section {
  padding-left: 3.5em;
}

.feature-list.small h3:before {
  font-size: 0.8em;
}

/*--------------------------------------------------------------
>>> الأيقونات (Icons)
--------------------------------------------------------------*/

.icon {
  text-decoration: none;
}

.icon:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  text-transform: none !important;
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
  font-size: 1.25em;
  line-height: inherit;
}

/* إخفاء النص التوصيفي */
.icon > .label {
  display: none;
}

/* أيقونات صلبة */
.icon.solid:before {
  font-weight: 900;
}

/* أيقونات العلامات التجارية */
.icon.brands:before {
  font-family: 'Font Awesome 5 Brands';
}

/*--------------------------------------------------------------
>>> الصناديق (Boxes)
--------------------------------------------------------------*/

.box header {
  margin: 0 0 1.5em 0;
}

/* نمط خاص للرؤوس داخل الصناديق */
.box header.style1 {
  position: relative;
  margin: -0.5em 0 0 0;
  padding-top: 0;
}

.box h2 {
  margin: 0 0 0.75em 0;
  font-size: 1.15em;
  letter-spacing: 0.05em;
}

.box h3 {
  margin: 0 0 0.5em 0;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* مقتطفات المقالات */
.box.post-excerpt .image.left {
  position: relative;
  top: 0.5em;
  width: 5em;
}

.box.post-excerpt h3,
.box.post-excerpt p {
  margin-left: 7em;
}

/*--------------------------------------------------------------
>>> الغلاف العام (Wrapper)
--------------------------------------------------------------*/

.wrapper {
  position: relative;
  padding: 6em 0 9em 0;
}

/* عنوان القسم داخل الغلاف */
.wrapper .title {
  position: absolute;
  top: 0;
  left: 50%;
  text-align: center;
  text-transform: uppercase;
  display: block;
  font-weight: 700;
  letter-spacing: 0.25em;
  font-size: 0.9em;
  width: 25em;
  height: 3.25em;
  top: -3.25em;
  line-height: 3.25em;
  margin-bottom: -3.25em;
  margin-left: -12.5em;
  padding-top: 0.5em;
}

/* الظل أسفل العنوان */
.wrapper .title:before {
  content: '';
  position: absolute;
  bottom: -38px;
  left: -35px;
  width: 35px;
  height: 38px;
  background: url("images/shadow.png");
}

.wrapper .title:after {
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
  content: '';
  position: absolute;
  bottom: -38px;
  right: -35px;
  width: 35px;
  height: 38px;
  background: url("images/shadow.png");
}

/*--------------------------------------------------------------
>>> أنماط الخلفيات للأقسام (Wrapper Styles)
--------------------------------------------------------------*/

/* النمط الأخضر */
.wrapper.style1 {
  background: #34b56a url("images/overlay.png");
  color: rgba(255, 255, 255, 0.75);
}

.wrapper.style1 .title {
  background: #34b56a url("images/overlay.png");
  color: #fff;
}

/* جعل النصوص والعناوين باللون الأبيض */
.wrapper.style1 h1,
.wrapper.style1 h2,
.wrapper.style1 h3,
.wrapper.style1 h4,
.wrapper.style1 h5,
.wrapper.style1 h6,
.wrapper.style1 strong,
.wrapper.style1 b,
.wrapper.style1 a {
  color: #fff;
}

/* النمط الأبيض */
.wrapper.style2 {
  background: #fff;
}

.wrapper.style2 .title {
  background: #fff;
  color: #484d55;
}

/* النمط الرمادي */
.wrapper.style3 {
  background: #f3f3f3 url("images/overlay.png");
}

.wrapper.style3 .title {
  background: #f3f3f3 url("images/overlay.png");
  color: #484d55;
}

.wrapper.style3 .image {
  border: solid 10px #fff;
}
/*--------------------------------------------------------------
>>> الغلاف العام للصفحة (Page Wrapper)
--------------------------------------------------------------*/

#page-wrapper > section {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
>>> الهيدر الرئيسي (Header)
--------------------------------------------------------------*/

#header {
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -moz-align-items: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  position: relative;
  height: 24em;
  background: url("../../images/banner.jpeg") center center;
  background-size: cover;
  padding: 0;
}

/* تأثير التعتيم فوق الصورة */
#header:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("images/overlay.png");
}

/* هيدر أكبر في الصفحة الرئيسية */
.homepage #header {
  height: 35em;
}

/*--------------------------------------------------------------
>>> الشعار (Logo)
--------------------------------------------------------------*/

#logo {
  width: 100%;
  text-align: center;
  position: relative;
  top: 1.5em;
}

/* عنوان الموقع */
#logo h1 {
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  font-size: 2em;
  letter-spacing: 0.25em;
}

/* الوصف أسفل الشعار */
#logo p {
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  margin: 1.25em 0 0 0;
  display: block;
  letter-spacing: 0.2em;
  font-size: 0.9em;
}

/*--------------------------------------------------------------
>>> القائمة العلوية (Navigation Bar)
--------------------------------------------------------------*/

#nav {
  position: absolute;
  display: block;
  top: 2.5em;
  left: 0;
  width: 100%;
  text-align: center;
}

/* الحاوية العامة لقائمة التنقل */
#nav > ul {
  display: inline-block;
  border-radius: 0.35em;
  box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 0.25);
  padding: 0 1.5em;
  background-color: rgba(0, 0, 0, 0.55); /* خلفية شفافة داكنة */
  backdrop-filter: blur(4px); /* تأثير الزجاج المموه */
  -webkit-backdrop-filter: blur(4px);
}

/* عناصر القائمة */
#nav > ul > li {
  display: inline-block;
  text-align: center;
  padding: 0 1.5em;
}

/* القوائم الفرعية مخفية افتراضيًا */
#nav > ul > li > ul {
  display: none;
}

/* الروابط داخل القائمة */
#nav > ul > li > a,
#nav > ul > li > span {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.7em;
  letter-spacing: 0.25em;
  height: 5em;
  line-height: 5em;
  transition: all .25s ease-in-out;
  outline: 0;
}

/* تغيير اللون عند تمرير الماوس */
#nav > ul > li:hover > a {
  color: #fff;
}

/* تمييز الصفحة النشطة */
#nav > ul > li.active > a,
#nav > ul > li.active > span {
  color: #fff;
}

/*--------------------------------------------------------------
>>> القوائم المنسدلة (Dropotron)
--------------------------------------------------------------*/

.dropotron {
  background: rgb(10, 47, 45) url("images/overlay.png");
  background-color: rgba(10, 47, 45, 0.925);
  padding: 1.25em 1em;
  border-radius: 0.35em;
  box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 0.25);
  min-width: 12em;
  text-align: left;
  margin-top: -1.25em;
  margin-left: -1px;
  list-style: none;
}

/* القائمة المنسدلة الرئيسية (المستوى الأول) */
.dropotron.level-0 {
  margin-top: -1px;
  margin-left: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* الروابط داخل القوائم المنسدلة */
.dropotron a,
.dropotron span {
  transition: all .25s ease-in-out;
  display: block;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.7em;
  letter-spacing: 0.25em;
  border-top: solid 1px rgba(255, 255, 255, 0.15);
  line-height: 3em;
}

/* إزالة الحشو الداخلي */
.dropotron li {
  padding-left: 0;
}

/* إزالة الحد العلوي لأول عنصر */
.dropotron li:first-child a,
.dropotron li:first-child span {
  border-top: 0;
}

/* تغيير اللون عند تمرير الماوس */
.dropotron li:hover > a,
.dropotron li:hover > span {
  color: #fff;
}

/*--------------------------------------------------------------
🟢 ملاحظات وتحسينات مقترحة:
--------------------------------------------------------------
1️⃣ **ممتاز جدًا** استخدام rgba() + overlay.png مع blur لتأثير خلفية شفافة زجاجية — عصري جدًا.  
2️⃣ يمكن تحسين الأداء بإضافة fallback لخلفية صلبة للمتصفحات القديمة التي لا تدعم `backdrop-filter`.  
3️⃣ لتجربة مستخدم أفضل على الموبايل، من الأفضل لاحقًا إضافة media query
   تُحوّل القائمة إلى “hamburger menu”.
4️⃣ صورة الخلفية banner.jpeg تُحمّل في البداية — يُفضل ضغطها باستخدام أداة مثل TinyPNG لتقليل حجمها.
--------------------------------------------------------------*/
/*--------------------------------------------------------------
>>> المقدمة (Intro Section)
--------------------------------------------------------------*/

#intro {
  padding-bottom: 8em;
  text-align: center;
}

/* الفقرة الأولى – حجم خط أكبر */
#intro p.style1 {
  font-size: 1.5em;
  letter-spacing: 0.075em;
}

/* الفقرة الثانية – خلفية ولون مميز */
#intro p.style2 {
  font-weight: 700;
  color: #fff;
  border-radius: 0.35em;
  box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 0.25);
  font-size: 2.75em;
  letter-spacing: 0.075em;
  line-height: 1.35em;
  padding: 1em 0;
  margin-bottom: 1em;
}

/* الروابط داخل الفقرة الثانية */
#intro p.style2 a {
  color: inherit;
  text-decoration: none;
}

/* الفقرة الثالثة – نص طويل بعرض محدد */
#intro p.style3 {
  font-size: 1.1em;
  width: 48em;
  margin: 0 auto;
}

/*--------------------------------------------------------------
>>> قسم الخصائص (Features)
--------------------------------------------------------------*/

#features header.style1 {
  padding-bottom: 5em;
}

/* الأزرار داخل قسم الخصائص */
#features ul.actions {
  margin-top: 5em;
}

/*--------------------------------------------------------------
>>> الأقسام المميزة (Highlights)
--------------------------------------------------------------*/

#highlights .highlight {
  text-align: center;
}

/* عناوين الأقسام المميزة */
#highlights .highlight h3 {
  color: #34b56a;
  margin: 0 0 0.75em 0;
  font-size: 1.15em;
  letter-spacing: 0.05em;
}

/*--------------------------------------------------------------
>>> القسم الرئيسي (Main)
--------------------------------------------------------------*/
/* لا يوجد تنسيق مضاف بعد */

/*--------------------------------------------------------------
>>> التذييل (Footer)
--------------------------------------------------------------*/

#footer {
  background: #0a2f2d url("images/overlay.png");
  color: rgba(255, 255, 255, 0.5);
  padding-bottom: 6em;
}

/* جميع العناوين والعناصر داخل الفوتر باللون الأبيض */
#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6,
#footer strong,
#footer b,
#footer a {
  color: #fff;
}

/* الفواصل داخل الفوتر */
#footer hr {
  border-top-color: rgba(255, 255, 255, 0.05);
}

/* تنسيق الحقول داخل الفوتر */
#footer form input[type="text"],
#footer form input[type="email"],
#footer form input[type="password"],
#footer form select,
#footer form textarea {
  background: #ccc;
  box-shadow: none;
}

/* الحقول عند التركيز */
#footer form input[type="text"]:focus,
#footer form input[type="email"]:focus,
#footer form input[type="password"]:focus,
#footer form select:focus,
#footer form textarea:focus {
  background: #fff;
}

/*--------------------------------------------------------------
>>> الأزرار داخل الفوتر
--------------------------------------------------------------*/

#footer input[type="button"],
#footer input[type="submit"],
#footer input[type="reset"],
#footer button,
#footer .button {
  color: #fff;
  box-shadow: inset 0px 0px 2px 0px rgba(255, 255, 255, 0.5);
}

/* تأثير Hover للأزرار */
#footer input[type="button"]:hover,
#footer input[type="submit"]:hover,
#footer input[type="reset"]:hover,
#footer button:hover,
#footer .button:hover {
  color: #fff;
  box-shadow: inset 0px 0px 2px 0px rgba(255, 255, 255, 0.65);
}

/* تأثير الضغط (Active) */
#footer input[type="button"]:active,
#footer input[type="submit"]:active,
#footer input[type="reset"]:active,
#footer button:active,
#footer .button:active {
  box-shadow: inset 0px 0px 2px 0px rgba(255, 255, 255, 0.75);
}

/* الأزرار Style2 داخل الفوتر */
#footer input[type="button"].style2:active,
#footer input[type="submit"].style2:active,
#footer input[type="reset"].style2:active,
#footer button.style2:active,
#footer .button.style2:active {
  box-shadow: inset 0px 0px 2px 0px rgba(255, 255, 255, 0.75);
}

/*--------------------------------------------------------------
>>> العناوين والعناصر الخاصة بالفوتر
--------------------------------------------------------------*/

/* عنوان القسم داخل الفوتر */
#footer .title {
  background: #0a2f2d url("images/overlay.png");
  color: #eee;
}

/* رأس القسم */
#footer header.style1 {
  padding-bottom: 6em;
  margin-bottom: 6em;
  /* يمكن تفعيل الحد السفلي إذا رغبت */
  /* border-bottom: solid 1px rgba(255, 255, 255, 0.05); */
}

/* عناوين الأقسام داخل الفوتر */
#footer header.style1 h2 {
  color: #fff;
}

#footer header.style1 .p {
  color: inherit;
}

/*--------------------------------------------------------------
>>> قائمة الخصائص داخل الفوتر
--------------------------------------------------------------*/

#footer .feature-list {
  max-width: 100%;
}

/* حدود الأقسام داخل القائمة */
#footer .feature-list section {
  border-top-color: rgba(255, 255, 255, 0.05);
}

/* أيقونات الفوتر */
#footer .feature-list h3:before {
  background: #3d4249 url("images/overlay.png");
}

/*--------------------------------------------------------------
🟢 ملاحظات وتحسينات مقترحة:
--------------------------------------------------------------
1️⃣ اللون الأساسي في الفوتر (#0a2f2d) متناسق تمامًا مع عناصر الموقع (theme consistency ممتاز).  
2️⃣ يُفضل جعل نصوص الفوتر أكبر قليلًا على الموبايل لسهولة القراءة (باستخدام media query).  
3️⃣ من الجميل إضافة مساحة علوية للفوتر (padding-top) إذا كان يلتصق بالمحتوى السابق.  
4️⃣ يمكن استخدام `backdrop-filter` هنا أيضًا لإعطاء لمسة شفافية جذابة كما في الـHeader.
--------------------------------------------------------------*/
/*--------------------------------------------------------------
>>> حقوق النشر (Copyright Section)
--------------------------------------------------------------*/

#copyright {
  text-align: center;
  padding-top: 6em;
  margin-top: 6em;
  /* border-top: solid 1px rgba(255, 255, 255, 0.05); */
}

/* قائمة الروابط داخل حقوق النشر */
#copyright ul {
  display: inline-block;
  border-radius: 0.35em;
  box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.25);
  padding: 0.75em 2em;
  font-size: 0.9em;
}

/* العناصر داخل القائمة */
#copyright ul li {
  display: inline-block;
  margin-left: 1em;
  padding-left: 1em;
  border-left: solid 1px rgba(255, 255, 255, 0.05);
}

/* العنصر الأول بدون خط فاصل */
#copyright ul li:first-child {
  border-left: 0;
  margin-left: 0;
  padding-left: 0;
}

/* الروابط */
#copyright a {
  color: inherit;
}

/* تأثير تمرير الماوس */
#copyright a:hover {
  color: #fff;
}

/*--------------------------------------------------------------
>>> الشاشات الكبيرة جدًا (XLarge)
--------------------------------------------------------------*/

@media screen and (max-width: 1680px) {

  /* الأساسيات */
  body,
  input,
  textarea,
  select {
    font-size: 12pt;
  }
}

/*--------------------------------------------------------------
>>> الشاشات الكبيرة (Large)
--------------------------------------------------------------*/

@media screen and (max-width: 1280px) {

  /* الأساسيات */
  body,
  input,
  select,
  textarea {
    font-size: 11pt;
    line-height: 1.5em;
    letter-spacing: 0.015em;
  }

  /* الغلاف العام */
  .wrapper {
    padding: 4em 0 7em 0;
  }

  /* الشعار */
  #logo {
    margin-top: -0.5em !important;
  }

  #logo h1 {
    font-size: 1.75em;
  }

  /* المقدمة */
  #intro {
    padding-bottom: 7em;
  }

  #intro p.style1 {
    font-size: 1.25em;
  }

  #intro p.style2 {
    font-size: 2.25em;
  }

  /* الفوتر */
  #footer {
    padding-bottom: 4em;
  }

  #footer header.style1 {
    padding-bottom: 4em;
    margin-bottom: 4em;
    border-bottom: solid 1px rgba(255, 255, 255, 0.05);
  }

  /* حقوق النشر */
  #copyright {
    padding-top: 4em;
    margin-top: 4em;
  }
}

/*--------------------------------------------------------------
>>> الشاشات المتوسطة (Medium)
--------------------------------------------------------------*/

/* إخفاء القائمة الجانبية مؤقتًا */
#navPanel,
#titleBar {
  display: none;
}

@media screen and (max-width: 980px) {

  /*----------------------------------------------------------
  🧩 الأساسيات
  ----------------------------------------------------------*/

  header br {
    display: none;
  }

  /* محاذاة الأزرار في النماذج */
  form ul.actions {
    text-align: center;
  }

  /*----------------------------------------------------------
  🧩 القوائم المميزة (Feature List)
  ----------------------------------------------------------*/
  .feature-list {
    max-width: 40em;
  }

  .feature-list section {
    padding-top: 4em;
  }

  .feature-list > .row > :first-child > section {
    border-top: 0;
    padding-top: 0;
  }

  /*----------------------------------------------------------
  🧭 القائمة العلوية (Nav)
  ----------------------------------------------------------*/
  #nav {
    display: none;
  }

  /* الشعار */
  #logo {
    top: 0;
  }

  /* المقدمة */
  #intro p.style3 {
    width: auto;
  }

  /* الأقسام المميزة */
  #highlights .highlight {
    max-width: 40em;
    margin-left: auto;
    margin-right: auto;
  }

  /* الفوتر */
  #footer .feature-list {
    border-top: solid 1px rgba(255, 255, 255, 0.05);
    padding-top: 4em;
  }
}

/* إزالة الحد العلوي من القسم الثاني في الفوتر عند بعض المقاسات */
@media screen and (max-width: 980px) and (min-width: 737px) {
  #footer .feature-list > .row > :nth-child(2) > section {
    border-top: 0;
    padding-top: 0;
  }
}

/*--------------------------------------------------------------
>>> قائمة الموبايل (NavPanel & TitleBar)
--------------------------------------------------------------*/

@media screen and (max-width: 980px) {

  /* تحريك الصفحة عند فتح القائمة */
  #page-wrapper {
    backface-visibility: hidden;
    transition: transform 0.5s ease;
    padding-bottom: 1px;
  }

  /* الشريط العلوي */
  #titleBar {
    backface-visibility: hidden;
    transition: transform 0.5s ease;
    display: block;
    height: 44px;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10001;
    background: none;
  }

  /* إخفاء العنوان داخل الشريط */
  #titleBar .title {
    display: none;
  }

  /* زر القائمة الجانبية */
  #titleBar .toggle {
    text-decoration: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 44px;
  }

  /* أيقونة القائمة (Font Awesome) */
  #titleBar .toggle:before {
    transition: all .15s ease-in-out;
    content: '\f0c9'; /* رمز ≡ */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 14px;
    position: absolute;
    top: 6px;
    left: 6px;
    display: block;
    width: 54px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
    background-color: rgba(92, 95, 103, 0.5);
    border-radius: 0.25em;
  }

  /* عند الضغط على الزر */
  #titleBar .toggle:active:before {
    background-color: rgba(92, 95, 103, 0.75);
  }

  /* القائمة الجانبية المنسدلة */
  #navPanel {
    backface-visibility: hidden;
    transform: translateX(-275px);
    transition: transform 0.5s ease;
    display: block;
    height: 100%;
    left: 0;
    overflow-y: auto;
    position: fixed;
    top: 0;
    width: 275px;
    z-index: 10002;
    background: #242730 url("images/overlay.png");
    box-shadow: inset -3px 0px 4px 0px rgba(0, 0, 0, 0.1);
  }

  /* روابط القائمة */
  #navPanel .link {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    text-decoration: none;
    font-size: 0.85em;
    letter-spacing: 0.15em;
    height: 44px;
    line-height: 44px;
    border-top: solid 1px rgba(255, 255, 255, 0.05);
    margin: 0 15px;
  }

  #navPanel .link:first-child {
    border-top: 0;
  }

  /* المسافات البادئة (الدرجات) */
  #navPanel .indent-1 { width: 1em; display: inline-block; }
  #navPanel .indent-2 { width: 2em; display: inline-block; }
  #navPanel .indent-3 { width: 3em; display: inline-block; }
  #navPanel .indent-4 { width: 4em; display: inline-block; }
  #navPanel .indent-5 { width: 5em; display: inline-block; }

  /* روابط المستوى الأول */
  #navPanel .depth-0 {
    color: #fff;
  }

  /*----------------------------------------------------------
  🟢 حركة التحويل عند فتح القائمة الجانبية
  ----------------------------------------------------------*/
  body.navPanel-visible #page-wrapper {
    transform: translateX(275px);
  }

  body.navPanel-visible #titleBar {
    transform: translateX(275px);
  }

  body.navPanel-visible #navPanel {
    transform: translateX(0);
  }
}

/*--------------------------------------------------------------
🟢 ملاحظات تقنية:
--------------------------------------------------------------
1️⃣ التصميم متجاوب بشكل ممتاز حتى عرض 737px — القائمة الجانبية تعمل بسلاسة.  
2️⃣ من الأفضل إضافة `overflow-x: hidden` في body لمنع تمرير العرض عند فتح القائمة.  
3️⃣ استخدام Font Awesome في toggle مثالي ومناسب لتصميم عصري.  
4️⃣ الـtransitionات نظيفة وسلسة (0.5s ease) — توازن ممتاز بين الأداء والانسيابية.  
--------------------------------------------------------------*/
/*--------------------------------------------------------------
>>> الشاشات الصغيرة جدًا (Small: max-width 736px)
--------------------------------------------------------------*/

@media screen and (max-width: 736px) {

  /*----------------------------------------------------------
  🧩 الأساسيات (Typography & Spacing)
  ----------------------------------------------------------*/
  body, input, select, textarea {
    line-height: 1.5em;
    font-size: 10.5pt;
    letter-spacing: 0;
  }

  h2, h3, h4, h5, h6 {
    font-size: 1.2em;
    letter-spacing: 0.05em;
    margin: 0 0 1em 0;
  }

  hr {
    margin: 1em 0;
  }

  /*----------------------------------------------------------
  🧩 المقالات والأقسام (Section/Article)
  ----------------------------------------------------------*/
  section, article {
    clear: both;
  }

  header br {
    display: none;
  }

  header.style1 {
    padding: 0 0 1em 0;
  }

  header.style1 h2 {
    font-size: 1.5em;
    letter-spacing: 0.075em;
    line-height: 1.25em;
  }

  header.style1 p {
    font-size: 1em;
    letter-spacing: 0;
    display: block;
    margin: 0;
  }

  /*----------------------------------------------------------
  🧩 الأزرار (Buttons)
  ----------------------------------------------------------*/
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  button,
  .button {
    display: block;
    width: 100%;
    font-size: 1em;
    max-width: 30em;
    margin: 0 auto;
  }

  /*----------------------------------------------------------
  🧩 الأزرار المجمعة (Actions)
  ----------------------------------------------------------*/
  ul.actions {
    margin: 2em 0 0 0;
  }

  ul.actions li {
    margin: 15px 0 0 0;
    display: block;
  }

  ul.actions li:first-child {
    margin-top: 0;
  }

  /*----------------------------------------------------------
  🧩 قائمة المزايا (Feature List)
  ----------------------------------------------------------*/
  .feature-list section {
    padding-top: 2em;
    padding-left: 4em;
  }

  .feature-list h3:before {
    font-size: 0.9em;
  }

  /*----------------------------------------------------------
  🧩 صناديق المقالات (Box)
  ----------------------------------------------------------*/
  .box.post-excerpt .image.left {
    position: relative;
    top: 0.25em;
    width: 25%;
    margin: 0;
  }

  .box.post-excerpt h3,
  .box.post-excerpt p {
    margin-left: 32.5%;
  }

  /*----------------------------------------------------------
  🧩 الغلاف العام (Wrapper)
  ----------------------------------------------------------*/
  .wrapper {
    padding: 3em 0 6em 0;
  }

  .wrapper .title {
    font-size: 0.9em;
    width: 18em;
    height: 2.5em;
    top: -2.5em;
    line-height: 2.5em;
    margin-bottom: -2.5em;
    margin-left: -9em;
    padding-top: 0.5em;
  }

  .wrapper .title:before,
  .wrapper .title:after {
    height: 15px;
    bottom: -15px;
    background-size: 100% 100%;
  }

  /*----------------------------------------------------------
  🧩 الهيدر (Header)
  ----------------------------------------------------------*/
  #header {
    height: 17em;
  }

  .homepage #header {
    height: 20em;
  }

  /*----------------------------------------------------------
  🧩 الشعار (Logo)
  ----------------------------------------------------------*/
  #logo {
    text-align: center;
    padding-left: 2em;
    padding-right: 2em;
  }

  #logo h1 {
    font-size: 1.5em;
    letter-spacing: 0.2em;
  }

  #logo p {
    margin: 1.25em 0 0 0;
    display: block;
    letter-spacing: 0.2em;
    font-size: 0.9em;
  }

  /*----------------------------------------------------------
  🧩 المقدمة (Intro)
  ----------------------------------------------------------*/
  #intro {
    text-align: center;
    padding: 0 2em 5em 2em;
    margin: 0 auto;
  }

  #intro p.style1 {
    margin-bottom: 1.5em;
  }

  #intro p.style2 {
    font-size: 1.5em;
    letter-spacing: 0.05em;
    line-height: 1.25em;
    padding: 1.25em;
  }

  /*----------------------------------------------------------
  🧩 الخصائص (Features)
  ----------------------------------------------------------*/
  #features header.style1 {
    padding-bottom: 4em;
  }

  #features ul.actions {
    margin-top: 4em;
  }

  /*----------------------------------------------------------
  🧩 المحتوى (Content)
  ----------------------------------------------------------*/
  #content {
    padding: 0 0 2em 0;
  }

  #content header.style1 {
    padding-bottom: 2.5em;
  }

  /*----------------------------------------------------------
  🧩 الفوتر (Footer)
  ----------------------------------------------------------*/
  #footer {
    padding-bottom: 0;
  }

  #footer header.style1 {
    padding-bottom: 0;
    margin-bottom: 2em;
    border-bottom: 0;
  }

  #footer .feature-list {
    border-top: 0;
    padding-top: 0;
  }

  /*----------------------------------------------------------
  🧩 حقوق النشر (Copyright)
  ----------------------------------------------------------*/
  #copyright {
    padding-top: 0;
    margin-top: 4em;
    border-top: 0;
  }

  #copyright ul {
    padding: 1em 2em;
    width: 100%;
  }

  #copyright ul li {
    display: block;
    margin: 0.5em 0 0 0;
    border-left: 0;
    padding: 0;
  }

  #copyright ul li:first-child {
    margin-top: 0;
  }
}

/*--------------------------------------------------------------
>>> تأثيرات خاصة لعناصر محددة
--------------------------------------------------------------*/

/* تأثير ظل متوهج على العنصر #ezzat عند التمرير */
#ezzat:hover {
  box-shadow: 5px 8px 25px rgba(244, 168, 80, 0.6),
              -5px -8px 25px rgba(244, 168, 80, 0.6);
}

/* تغيير لون الخلفية وشفافية العنصر #khaled عند التمرير */
#khaled:hover {
  opacity: .5;
  background-color: rgba(244, 168, 80);
}

/*--------------------------------------------------------------
>>> نظام الشبكة (Grid System)
--------------------------------------------------------------*/

.grid-container {
  display: grid;
  grid-template-columns: 50% calc(50%/3) calc(50%/3) calc(50%/3);
  grid-gap: 10px;
  padding: 10px;
  margin: auto;
}

.grid-container > div {
  text-align: center;
  padding: 20px 0;
  width: 100%;
  height: 100%;
}

/* العنصر الأول (كبير الحجم) */
.item1 {
  grid-row: 1 / 4;
  text-align: center;
  display: grid;
  align-content: center;
  justify-content: center;
  font-size: 50px;
  letter-spacing: 8px;
  width: 100%;
  height: 100%;
}

/* الفقرات داخل الشبكة */
.grid-container p {
  margin: 10px;
}

/* العناصر الصغيرة */
.items2,
.items3,
.items4,
.items5,
.items6,
.items7 {
  font-size: 40px;
}

/* مسافة إضافية للكلمة الثانية */
#sec-word {
  margin-top: 35px;
}

/* تصحيح عام لجميع العناصر */
* {
  box-sizing: border-box;
}

/*--------------------------------------------------------------
🟢 ملاحظات تقنية نهائية:
--------------------------------------------------------------
1️⃣ التصميم ممتاز على الهواتف الذكية حتى عرض 320px — كل شيء قابل للقراءة.  
2️⃣ الشبكة (grid) منظمة جيدًا؛ يُفضل إضافة media query لتتحول الأعمدة إلى صفوف تحت بعضها عند الشاشات الصغيرة جدًا.  
3️⃣ استخدام rgba(244,168,80) في التأثيرات يعطي هوية بصرية قوية — لون ذهبي أنيق.  
4️⃣ الكود جاهز للإنتاج (production-ready) من حيث النظافة والهيكل.  
--------------------------------------------------------------*/
/*--------------------------------------------------------------
>>> الشاشات الصغيرة جدًا (Extra Small - max-width: 400px)
--------------------------------------------------------------*/

@media screen and (max-width: 400px) {

  /* شبكة العناصر */
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2px;
    padding: 2px;
    margin: auto;
  }

  /* العنصر الرئيسي */
  .item1 {
    text-align: center;
    display: grid;
    align-content: center;
    justify-content: center;
    font-size: 8.5px;
    letter-spacing: 1.5px;
    width: 100%;
    height: 100%;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 5;
  }

  /* عناصر الشبكة الأخرى */
  .grid-container,
  .items4 {
    grid-row-start: 4;
    grid-row-end: 5;
    grid-column-start: 1;
    grid-column-end: 2;
  }

  .items5 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
  }

  /* نصوص داخل الشبكة */
  .grid-container p {
    margin: 7px;
  }

  /* حجم الخط داخل العناصر */
  .items2, .items3, .items4, .items5, .items6, .items7 {
    font-size: 9px;
  }

  /* المسافة بين الكلمات */
  #sec-word {
    margin-top: 7px;
  }
}

/*--------------------------------------------------------------
>>> الشاشات الصغيرة (Small - max-width: 550px)
--------------------------------------------------------------*/

@media screen and (max-width: 550px) {

  /* الشبكة العامة */
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2px;
    padding: 2px;
    margin: auto;
  }

  .grid-container > div {
    text-align: center;
    padding: 5px 0;
    width: 100%;
    height: 100%;
  }

  /* العنصر الرئيسي */
  .item1 {
    grid-row: 1 / 4;
    display: grid;
    align-content: center;
    justify-content: center;
    justify-self: center;
    align-self: center;
    font-size: 10px;
    letter-spacing: 1.5px;
    width: 100%;
    height: 100%;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 5;
  }

  /* عناصر الشبكة الأخرى */
  .item2 { grid-row: 2 / 3; grid-column: 1 / 3; }
  .item3 { grid-row: 2 / 3; grid-column: 3 / 5; }
  .item4 { grid-row: 3 / 4; grid-column: 1 / 3; }
  .item5 { grid-row: 3 / 4; grid-column: 3 / 5; }
  .item6 { grid-row: 4 / 5; grid-column: 1 / 3; }
  .item7 { grid-row: 4 / 5; grid-column: 3 / 5; }

  /* النصوص */
  .grid-container p {
    margin: 10px;
  }

  /* تكبير الخط */
  .items2, .items3, .items4, .items5, .items6, .items7 {
    font-size: 25px;
  }

  /* المسافة بين الكلمات */
  #sec-word {
    margin-top: 10px;
  }

  /* الأزرار */
  .actions .button {
    width: 100%;
    font-size: 12px;
  }

  /* الأعمدة */
  .col-6 {
    padding: 15px;
    margin: 15px;
  }

  /* الإطارات (خرائط أو فيديوهات مضمّنة) */
  iframe {
    width: 300px;
    height: 300px;
    padding: auto;
    margin: auto;
  }
}

/*--------------------------------------------------------------
>>> استجابة عامة للشاشات ≤ 736px
--------------------------------------------------------------*/
@media screen and (max-width: 736px) {

  .item1 {
    font-size: 25px;
  }

  #sec-word {
    margin-top: 15px;
  }
}

/*--------------------------------------------------------------
>>> استجابة عامة للشاشات ≤ 980px
--------------------------------------------------------------*/
@media screen and (max-width: 980px) {

  .item1 {
    font-size: 25px;
  }

  #sec-word {
    margin-top: 15px;
  }
}

/*--------------------------------------------------------------
>>> تخصيص اختياري (مغلق حالياً)
--------------------------------------------------------------
#overlay-img {
  background: #34b56a url('/images/overlay.png');
}
*/

/*--------------------------------------------------------------
>>> ملاحظات نهائية / last row testimonials css
--------------------------------------------------------------*/
/*
  يمكن وضع هنا تنسيق قسم "آراء العملاء" (Testimonials)
  باستخدام flex أو grid كما في الأقسام السابقة.
  يفضل ضبط الخط والحواف ليتناسب مع الشاشات الصغيرة.
*/