*{
    margin: 0;
    padding: 0; 
    box-sizing: border-box;
    font-family: "Spartan", san-serif;
  }
#header{
    position: fixed;
    width: 100%;
    z-index: 100;
    /* خاصية display: flex; بتخلي العناصر اللي جوا الصفحه تتوزع بشكل مرن وسهل التحكم فيه */
    display: flex;
    /* خاصية align-items: center; بتخلي العناصر تتوسط الصفحه عموديًا. */
    align-items: center;
    /* خاصية justify-content: space-between; بتخلي العناصر تتوزع في الصفحه مع وجود مسافة متساوية بينهم. */
    justify-content: space-between;
    /* padding: 20px 80px; بتضيف 20 بكسل فوق وتحت و80 بكسل على الجانبين.*/
    padding: 20px 80px;
    background-color: #E3E6F3;
    /* بتضيف ظل للعناصر بارتفاع 5 بكسل، وانتشار 15 بكسل، ولونه أسود شفاف بنسبة 6%.*/
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);

  }
  
  #navbar{
    display: flex;
    align-items: center;
  }

  #navbar li{
    /* ist-style: none; بتخلي العناصر في القائمة بدون نقاط أو أرقام.*/
    list-style: none; 
    /*     padding: 0 20px;
ChatGPT said:
ChatGPT
padding: 0 20px; بتخلي المسافة الداخلية 0 من فوق وتحت و20 بكسل على الجانبين. */
    padding: 0 20px;
    /* position: relative; بتخلي العنصر يتحرك نسبياً لموقعه الأصلي.*/
    position: relative;
  }
  #navbar li a{
    /* شيل الخط الي تحت الكلام */
    text-decoration: none;
    font-size: 16px;
    /* تغير سمك الخط 400 الي 900 */
    font-weight: 600;
    color: #1a1a1a;
}

#navbar li a:hover,
#navbar li a.active {
  color: #088178;
  position: relative;
}
/* :hover: حالة التمرير فوق الرابط */
/* بيحدد اضافه شريط صغير تحت الرابط */
#navbar li a:hover::after,
#navbar li a.active::after {
    /* ده لازم عشان نقدر نستخدم ::after. */
  content: " ";
  /* بيحدد عرض الشريط الصغير يكون 100% من عرض الرابط نفسه */
  width: 100%;
  /*  بيحدد ارتفاع الشريط الصغير يكون 2 بكسل.*/
  height: 2px;
  /* بيحدد لون الشريط الصغير عشان يكون نفس لون النص (لون أخضر). */
  background-color: #088178;
  /* بيخلي العنصر (الرابط) في وضع نسبي، يعني تقدر تتحكم في مكانه باستخدام خصائص زي top وleft، وده مهم عشان نقدر نضيف الشريط الصغير تحت الرابط. */
  position: absolute;
  /* بيحدد إن الشريط يكون نازل 4 بكسل تحت الرابط. */
  bottom: -4px;
  /* بيحدد إن الشريط يكون بعيد عن الحافة اليسرى للرابط بـ 20 بكسل. */
  left: 1px;
}

#hero{
    /* تحدد صورة الخلفية للعنصر. */
    background-image: url("hero4.png");
    /* بتخلي ارتفاع العنصر 90% من ارتفاع الشاشة */
    height: 90vh;
    /* بتخلي عرض العنصر يملأ الصفحة. */
    width: 100%;
    /* بتخلي الصورة تغطي العنصر من غير ما تتشوه. */
    background-size: cover;
    /* بتدي مساحة 80 بكسل من الجانبين (يمين وشمال)، ومن فوق وتحت مافيش مساحة. للكلام الموجود جوه */
    padding: 0 80px;
    /* تغير طريقة ترتيب العناصر اللي جوه العنصر (اللي هو #hero هنا). بدلاً من الترتيب العادي (واحد تحت التاني)، بتديك مرونة في ترتيبهم بأي شكل تحبه (جنب بعض، فوق بعض، في النص، على الأطراف... إلخ). */
    display: flex;
    /*  بتخلي العناصر تتصطف فوق بعض (عمودي). */
    flex-direction: column;
    /*بتخلي العناصر تتجمع على الجنب اليسار. */
    align-items: flex-start;
    /* بتخلي العناصر تتوسّط في المنتصف اليسار عموديًا. */
    justify-content: center;
  }
  h1{
    font-size: 50px;
    line-height: 64px;
    color: #088178;
  }
  
  h2{
    font-size: 46px;
    line-height: 54px;
    color: #222;
  }
  
  h4{
    font-size: 20px;
    color: white;
  }
  p{
    font-size: 16px;
    color: gray;
    /* الكود ده بيحدد المسافات حوالين العنصر:
15px فوق.
0 يمين وشمال.
20px تحت */
    margin: 15px 0 20px 0
  }
  
  #hero button{
    background-image: url(button.png);
    /* بيخلي لون خلفية الزرار شفاف. */
    background-color: transparent;
    color: #088178;
    /*  بيشيل حدود الزرار */
    border: 0;
    /* بيضيف مساحة داخلية (فراغ جوه الزرار):
14px فوق وتحت.
80px يمين.
65px شمال. */
    padding: 14px 80px 14px 65px;
  }

  #feature{
    /* ت بدلاً من الترتيب العادي (واحد تحت التاني)، بتديك مرونة في ترتيبهم بأي شكل تحبه (جنب بعض، فوق بعض، في النص، على الأطراف... إلخ). */
    display: flex;
    /* بيضبط العناصر اللي جوا على نفس الخط أفقيًا (في النص بالعرض) */
    align-items: center;
    /*بيخلي المسافات بين العناصر متساوية أفقيًا */
    justify-content: space-between;
    /*بيضيف فراغات حوالين المحتوى:
40px فوق وتحت.
80px يمين وشمال.*/
    padding: 40px 80px;
  }
  #feature .fe-box{
    /* علشان الكلام يكون في النص */
    text-align: center;
    /* الحدود الداخليه */
    padding: 25px 15px;
    /* البوردهالخارجيه  */
    border: 1px solid #088178;
  }
  
#feature .fe-box img{
    /* الصورة تاخد عرض العنصر اللي هي جواه بالكامل */
    width: 100%;
    /* يضيف مسافة فاضية (10px) تحت الصورة لتباعدها عن اللي تحتها. */
    margin-bottom: 10px;
  }

  #feature .fe-box h6{
    font-size :12px;
    /*بيضيف مسافات داخلية حوالين النص:
9px فوق، 8px يمين، 6px تحت، 8px شمال. */
    padding: 9px 8px 6px 8px;
    /* يحدد لون النص بالأخضر الفاتح. */
    color: #088178;
    /* يحدد لون خلفية النص بلون وردي فاتح */
    background-color: pink;
  }
  #product1{
    /* جيب الكلام في النص */
    text-align: center;
    /* خلي في فرق بينو وبين حوافي الصفحه بلعرض */
    margin: 50PX;
  }
  
  #product1 .pro-container{
    /* خلينى اعرف اتحكم في العناصر براحتى بدل ما تظهر تحت بعض انا اقدر اغيرها  */
  display: flex;
    /*بيخلي المسافات بين العناصر متساوية أفقيًا */
  justify-content: space-between;
  /* مسافه من فوق 20 */
  padding-top: 20px ;
  /* 
بيخلي العناصر داخل الحاوية تتكسر وتنتقل للسطر التالي لما المساحة في السطر الحالي ما تكونش كافية. */
  flex-wrap: wrap
  }
  
  #product1 .pro{
    /*يحدد عرض العنصر ليكون 23% من عرض العنصر الاب  */
    width: 23%;
    /* يضيف مساحة داخلية (فراغ) حول المحتوى: 10px فوق وتحت، و12px يمين وشمال */
    padding: 10px 12px;
    /* يضيف حد بسمك 1px ولون أخضر فاتح (#cce7d0) حول العنصر. */
    border: 1px solid #cce7d0;
    /* يجعل زوايا العنصر مستديرة بنسبة 25px. */
    border-radius: 25px;
    /* يضيف مسافة فاضية 15px فوق وتحت العنصر، ومافيش مسافة على الجانبين. */
    margin: 15px 0;
  }


  
  #product1 .pro img{
    width: 100%;
    /* يجعل زوايا العنصر مستديرة بنسبه 20. */
    border-radius: 20px;
  }
  
  #product1 .pro .des{
    /* حدد محاذاة النص بحيث يكون في البداية (يمين في لغات الكتابة من اليمين لليسار، ويسار في لغات الكتابة من اليسار لليمين). */
    text-align: start;
    /* ضيف مساحة داخلية (فراغ) 10px فوق وتحت النص، ومافيش مسافة على الجانبين. */
    padding: 10px 0;
  }

  
  #product1 .pro .des span{
    color: gray;
    font-size: 12px;
  }
  
  #product1 .pro .des h5{
    padding-top: 7px;
    color: #1a1a1a;
    font-size: 14px;
  }

  #product1 .pro .des h4{
    font-size: 15px;
    padding-top: 7px;
    color: #088178;
  }
  
#banner{
    /* خلينى اعرف اتحكم في العناصر براحتى بدل ما تظهر تحت بعض انا اقدر اغيرها  */
    display: flex;
    /*  يحدد أن العناصر داخل الحاوية تكون مرتبة عموديًا. */
    flex-direction: column;
    /*  يوسّط العناصر أفقيًا في الحاوية.*/
    justify-content: center;
    /* يوسّط العناصر عموديًا في الحاوية. */
    align-items: center;
    /* يوسّط النص داخل العنصر. */
    text-align: center;
    /*يضيف صورة خلفية للعنصر */
    background-image: url(b2.jpg);
    /* يحدد عرض العنصر ليكون كامل عرض الحاوية الأب. */
    width: 100%;
    /* يحدد ارتفاع العنصر ليكون 40% من ارتفاع نافذة العرض. */
    height: 40vh;
    /*يحدد موضع الصورة الخلفية ليكون في الوسط. */
    background-position: center;    
  }
#banner h4{
    color: #fff;
    font-size: 16px;
  }
  
  #banner h2{
    color: #fff;
    font-size: 30px;
    padding: 10px 0;
  }
  
  #banner h2 span{
    color: #ef3636;
    
  }
  
button.normal{
    padding: 15px 30px;
    font-size: 14px;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer
      
  }

  .section-p1{
    /* يضيف مساحة داخلية (فراغ) مقدارها 40px فوق وتحت، و80px يمين ويسار العنصر. */
    padding: 40px 80px;
    
  }
  #sm-banner{
    /* خلينى اعرف اتحكم في العناصر براحتى بدل ما تظهر تحت بعض انا اقدر اغيرها  */
    display: flex;
    /* يوزّع العناصر في الحاوية بحيث يكون بين كل عنصرين مسافة متساوية، مع وضع العناصر على الأطراف. */
    justify-content: space-between;
    /* يجعل العناصر تنكسر وتنتقل للسطر التالي إذا لم تكفي المساحة في السطر الحالي */
    flex-wrap: wrap;
  }
  #sm-banner .banner-box{
    /* خلينى اعرف اتحكم في العناصر براحتى بدل ما تظهر تحت بعض انا اقدر اغيرها  */
    display: flex;
    /*حدد أن العناصر داخل الحاوية تكون مرتبة عموديًا.  */
    flex-direction: column;
    /* يوسّط العناصر أفقيًا في الحاوية */
    justify-content: center;
    /* يحدد أن العناصر تكون محاذاة لبدء الحاوية (على اليسار في هذه الحالة). */
    align-items: flex-start;
    /* يوسّط النص داخل العنصر. */
    text-align: center;
    /*  يضيف صورة خلفية للعنصر. */
    background-image: url(banner/b17.jpg);
    /*  يحدد الحد الأدنى لعرض العنصر ليكون 580px. */
    min-width: 580px;
    /* حدد ارتفاع العنصر ليكون 40% من ارتفاع نافذة العرض. */
    height: 40vh;
    /* يحدد موضع الصورة الخلفية ليكون في الوسط. */
    background-position: center;
    /* يجعل الصورة الخلفية تغطي كامل مساحة العنصر. */
    background-size: cover;
    /* يضيف مساحة داخلية (فراغ) 30px من جميع الجهات. */
    padding: 30px
  }
  

  #sm-banner .banner-box2{
    /* يضيف صورة خلفية للعنصر باستخدام الصورة الموجودة في المسار */
    background-image: url(banner/b10.jpg)
  }
  
  #sm-banner h4{
    /*يحدد لون النص ليكون أبيض (#fff)  */
    color: #fff;
    /* يحدد حجم النص ليكون 20px */
    font-size: 20px;
    /* يجعل سمك النص خفيفًا جدًا (وزن الخط 300). */
    font-weight: 300;
  }
  /*h4 نفس النظام زى في  */
  #sm-banner h2{
    color: #fff;
    font-size: 32px;
    font-weight: 800;
  }
  
  #sm-banner span{
    /* يحدد لون النص باللون الرمادي الداكن (#0e0e0e). */
    color: #0e0e0e;
    /*يحدد حجم النص ليكون 16px.  */
    font-size: 16px;
    /* يجعل النص متوسط السمك (وزن الخط 500). */
    font-weight: 500;
    /* يضيف مساحة فارغة (فراغ) بمقدار 16px أسفل النص داخل العنصر.
 */
    padding-bottom: 16px;
  }
  
  button.white{
    /* يجعل لون النص داخل الزر أسود. */
    color: #000;
    /* يضيف مساحة داخلية: 15px أعلى وأسفل، و30px على الجوانب. */
    padding: 15px 30px;
    /* يجعل النص بسمك عادي (وزن الخط 400 */
    font-weight: 400;
    /* يحدد حجم النص ليكون 14px. */
    font-size: 14px;
    /* يجعل حواف الزر مستديرة قليلاً (4px). */
    border-radius: 4px;
    /*  يجعل خلفية الزر شفافة.
border: 1px solid #fff;*/
background-color: transparent;
/*يضيف إطارًا أبيض (1px) حول الزر.
  */
    border: 1px solid #fff;
    cursor: pointer
  }

  /* القواعد تنطبق فقط عند مرور الفأرة على عنصر .banner-box داخل #sm-banner وتحديدًا على الزر داخله. */
  #sm-banner .banner-box:hover button{
    /* يغيّر لون خلفية الزر إلى اللون الأخضر الداكن (#088178) عند التمرير. */
    background-color: #088178;
    /* يغيّر لون النص داخل الزر إلى الأبيض عند التمرير. */
    color: #fff;
    /*يغيّر لون إطار الزر إلى نفس لون الخلفية (#088178) عند التمرير.
  */
    border: 1px solid #088178;
      
  }
  
  #banner3{
        /* خلينى اعرف اتحكم في العناصر براحتى بدل ما تظهر تحت بعض انا اقدر اغيرها  */
    display: flex;
    /* يوزّع العناصر بداخله بحيث يكون بينها مسافات متساوية، مع وضع العناصر الأولى والأخيرة عند الأطراف */
    justify-content: space-between;
    /*يسمح للعناصر بالانتقال إلى صف جديد إذا لم تتوفر مساحة كافية في الصف الحالي. */
    flex-wrap: wrap;
    /*يضيف مسافة فارغة أفقية فقط (80px من اليمين واليسار)، دون أي مسافة فارغة عموديًا.  */
    padding: 0 80px;
  }
  
  #banner3 .banner-box{
        /* خلينى اعرف اتحكم في العناصر براحتى بدل ما تظهر تحت بعض انا اقدر اغيرها  */
    display: flex;
    /*  */
    flex-direction: column;
/* يضع العناصر داخل الحاوية في عمود (واحد فوق الآخر). */
    justify-content: center;
    /*  يضع العناصر على اليسار أفقيًا.*/
    align-items: flex-start;
    /* يجعل النصوص داخل العنصر محاذاة في المنتصف (يؤثر على النصوص فقط). */
    text-align: center;
    /*يضيف صورة كخلفية للعنصر من المسار المحدد.  */
    background-image: url(banner/b7.jpg);
    /* يحدد عرض العنصر الأدنى بنسبة 30% من عرض الحاوية الاب. */
    min-width: 30%;
    /* يحدد ارتفاع العنصر ليكون 30% من ارتفاع الشاشة المرئية. */
    height: 30vh;
    /* يضبط موضع صورة الخلفية في وسط العنصر.
 */
    background-position: center;
    /* يجعل صورة الخلفية تغطي العنصر بالكامل مع الحفاظ على نسبة الأبعاد. */
    background-size: cover;
    /* يضيف مساحة فارغة داخلية بمقدار 30px من جميع الجهات. */
    padding: 30px;
    /* يضيف مسافة فارغة أسفل العنصر بمقدار 20px. */
    margin-bottom: 20px
  }
  
  #banner3 h2{
    color: #fff;
    font-weight: 900;
    font-size: 22px;
  }
  
  #banner3 h3{
    color: #ec544e;
    font-weight: 800;
    font-size: 15px;
  }
  
  #banner3 .banner-img2{
    background-image: url(banner/b4.jpg)
  }
  
  #banner3 .banner-img3{
     background-image: url(banner/b18.jpg)
  }


  
#newsletter  {
        /* خلينى اعرف اتحكم في العناصر براحتى بدل ما تظهر تحت بعض انا اقدر اغيرها  */
    display: flex;
    /* يوزّع العناصر بحيث تكون متباعدة بالتساوي مع وجود العناصر الأولى والأخيرة عند الأطراف. */
    justify-content: space-between;
    /* يضع العناصر في منتصف الحاوية عموديًا */
    align-items: center;
    /* يسمح للعناصر بالانتقال إلى صف جديد عند عدم توفر مساحة كافية. */
    flex-wrap: wrap;
    /* يضع صورة كخلفية من الملف "b14.png". */
    background-image: url(b14.png);
    /*يمنع تكرار صورة الخلفية.  */
      background-repeat: no-repeat;
      /* يحدد موضع صورة الخلفية لتكون بنسبة 20% أفقيًا و30% عموديًا. */
      background-position: 20% 30%;
      /* يضيف لون خلفية داكن أزرق (#041e42) يُعرض في الأماكن التي لا تغطيها صورة الخلفية. */
    background-color: #041e42;
  }
  
  #newsletter h4{
    color: #fff;
    font-weight: 700;
    font-size: 22px;
  }
  
  #newsletter p{
    color: #818ea0;
    font-weight: 600;
    font-size: 14px;
  }
  
  #newsletter p span{
    color: #ffbd27;
    }
  
  #newsletter input{
    /* بيحدد ارتفاع الحقل بمقدار 3.125 وحدة قياس "rem" (rem هي وحدة قياس بتعتمد على حجم الخط الأساسي في الصفحة). */
    height: 3.125rem;
    /* يخلي عرض الحقل يملأ المساحة الكاملة للعنصر الأب بتاعه، يعني بياخد العرض كله. */
    width: 100%;
    /* حجم الخد */
    font-size: 14px;
    /* بيحدد المسافة الفاضية جوه الحقل من الجانبين (يمين وشمال) بواحد ونص وحدة قياس "em" (em بتعتمد على حجم الخط الحالي). المسافة الرأسية (فوق وتحت) بتبقى 0.
 */
    padding: 0 1.25em;
    /* بيضيف إطار حوالين الحقل بسمك 1 بكسل، والإطار شفاف علشان مايظهرش. ده ممكن يكون مفيد لو عاوز تسيب مساحة للإطار من غير ما يظهر.
 */
    border: 1px solid transparent;
    /* بيخلي زوايا الحقل مدوّرة بمقدار 4 بكسل. */
    border-radius: 4px;
  }
  
  #newsletter button{
    background-color: #088178;
    color: #fff;
    /* بيخلي النص في سطر واحد من غير ما ينكسر لسطور تانية. */
    white-space: nowrap; 
  }
  #newsletter .form{
    display: flex;
    width: 40%;
  }

  
footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* يحدد موقع العنصر بالنسبة لمكانه الطبيعي في الصفحة. يعني لو استخدمت top, right, bottom, أو left، هيتحرك العنصر من مكانه الطبيعي بناءً على القيم دي.
 */
    position: relative;
  }
  
  
  footer .col{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* بيدي مساحة فارغة تحت العنصر بمقدار 20 بكسل. */
    margin-bottom: 20px;
    /* 
بيدي مساحة فارغة على الجنب الأيسر من العنصر بمقدار 50 بكسل.
 */
    margin-left: 50px
  
  }
  
  footer .sec{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  
    
  }
  
  footer .logo{
    margin-bottom: 20px;
  }
  
  footer h4{
    font-size: 14px;
    padding-bottom: 20px
  }
  
  footer p{
    font-size: 13px;
    /* 
يعني المسافة تحت العنصر بس هي اللي 8 بكسل، والباقي 0.
 */
    margin: 0 0 8px 0;
  }
  
  
  footer a{
    font-size: 13px;
    /*
بيشيل أي تنسيقات زي الخطوط تحت النص أو فوقه أو في وسطه. بيخلي النص بدون أي زخرفة زي الروابط المظللة أو النصوص المزينة.
 */
    text-decoration: none;
    color: #222;
    margin-bottom: 10px;
  }
  
  footer .follow{
    margin-top: 20px
  }
  
  footer .follow i{
    color: #465b52;
    padding-right: 5px;
    cursor: pointer;
    
  }

  /* لما تحط المؤشر (الماوس) فوق أي أيقونة داخل عنصر footer بالصفحة (اللي داخل follow) أو فوق رابط داخل footer، لونه هيتغير للون #088178.
 */
  footer .follow i:hover, footer a:hover {
    color: #088178;
   
  }
  
  footer .install .row img{
    border: 1px solid #088178; 
    border-radius: 6px;
      
  }
  
  footer .install img{
    margin: 10px 0 15px 0
  }
  
  
  footer .copyright{
    width: 100%;
    text-align: center
     
  }