body {
    font-family: 'Roboto', sans-serif;
}

/* تخصيص الناف بار */
.navbar-brand img {
    width: 130px; /* حجم أكبر للشعار */
    height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع */
  }
  
  .navbar-nav .nav-link {
    padding: 0.5rem 1rem; /* إضافة مسافات لعناصر الناف بار */
  }
  
  .form-control.bd {
    border: 2px solid #dc3545; /* لون أحمر للإطار */
    border-radius: 20px; /* زوايا دائرية */
  }
  
  .btn-outline-danger {
    border-radius: 20px; /* زوايا دائرية للزر */
  }

/*----------------------------------------------------------------------*/

/* مخصص لتنسيق محتوى صفحة حلول التعليم - أول عنصر Education */

/* التحكم بحجم الحاوية */
.container-first {
    max-width: 80%; /* تحديد العرض الأقصى للحاوية بالنسبة المئوية */
    margin: 0 auto; /* جعل العنصر في المنتصف أفقياً */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* إضافة ظل خفيف للحاوية */
    border-radius: 10px; /* جعل الحواف دائرية */
    overflow: hidden; /* التأكد من أن المحتوى لا يخرج عن حدود الحاوية */
}

/* تنسيق النص الأساسي للعنصر الأول */
.text-primary-first {
    color: #007bff !important; /* تحديد اللون الأساسي للنص */
    font-weight: bold; /* جعل النص أكثر بروزاً */
}

/* نهايه تنسيق أول عنصر في صفحة حلول التعليم */


/* بداية تنسيق ثاني عنصر في صفحة حلول التعليم */

/* الحاوية الخاصة بالعنصر الثاني */
.container-second {
    max-width: 80%; /* تحديد الحجم الأقصى للحاوية بالنسبة المئوية */
    margin: 20px auto; /* ضبط العنصر ليكون في المنتصف مع إضافة مسافة علوية وسفلية */
    padding: 15px; /* إضافة مساحة داخلية لتباعد المحتوى عن الحواف */
    border-radius: 15px; /* جعل الحواف أكثر دائرية */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* إضافة ظل خفيف للحاوية */
    overflow: hidden; /* التأكد من أن الصورة تبقى داخل حدود الحاوية */
}

/* تنسيق النصوص في العنصر الثاني */
.text-primary-second {
    color: #007bff !important; /* تحديد اللون الأساسي للنص */
    font-family: Arial, sans-serif; /* تحديد نوع الخط */
    font-size: 1.2rem; /* تكبير حجم النص قليلاً */
    margin-bottom: 10px; /* إضافة مسافة تحت النص */
}

/* تنسيق الصور داخل الحاوية الخاصة بالعنصر الثاني */
.container-second img {
    width: 100%; /* جعل الصورة تملأ الحاوية بالكامل */
    height: auto; /* الحفاظ على نسبة الأبعاد الأصلية للصورة */
    display: block; /* إزالة أي مسافة بيضاء أسفل الصورة */
}

/* نهايه تنسيق ثاني عنصر في صفحة حلول التعليم */

/*-----------------------------------------------------------------------*/

/* تخصيص الفوتر  footer */
.footer {
    background-color: #212529; /* لون داكن للخلفية */
    color: #ffffff; /* لون النص أبيض */
    padding: 60px 0;
    width: 100%; /* ضمان تغطية العرض الكامل */
  }
  
  .footer h2 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #f8f9fa; /* لون العناوين */
  }
  
  .footer p, .footer a {
    color: #adb5bd; /* لون النص */
    font-size: 14px;
  }
  
  .footer a:hover {
    color: #f8f9fa;
    text-decoration: none; /* إزالة الخط السفلي */
  }
  
  .footer ul {
    list-style: none;
    padding: 0;
  }
  
  .footer ul li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .footer-social span {
    margin-right: 10px;
  }
  
  .footer-social span a {
    color: #adb5bd;
    font-size: 18px;
  }
  
  .footer-bottom {
    background-color: #181a1d; /* لون أغمق للجزء السفلي */
    color: #adb5bd;
    text-align: center;
    padding: 20px 0;
  }
  
  .footer .icon {
    color: rgb(236, 61, 61); /* لون مميز للأيقونات */
  }
  
  .footer-widget-item img {
    width: 150px; /* حجم شعار الفوتر */
  }