html, body {
    font-size: 16px; /* تحديد حجم الخط الأساسي */
    font-family: 'Cairo', sans-serif; /* تحديد نوع الخط الأساسي */
    display: flex; /* استخدام نموذج العرض الفلكسي لتوزيع العناصر بشكل مرن */
    flex-direction: column; /* تنظيم العناصر عموديًا */
    width: 100%;
}

* {
    cursor: url('../img/logo.png'), auto;
}

                                                                                /*      قسم الشعار      */
.logo-section {
    display: flex; /* استخدام الفلكسي لترتيب العناصر في هذه المنطقة */
    justify-content: center; /* محاذاة العناصر أفقياً في المنتصف */
    align-items: center; /* محاذاة العناصر عموديًا في المنتصف */
    padding: 1%; /* إضافة مسافة داخلية حول العناصر */
    height: 100px;
}
.logo-section img {
    max-height: 80px; /* تحديد الحد الأقصى للارتفاع للصورة */
}

                                                                                /*      شريط التنقل       */
.navbar {
    padding: 10px; /* إضافة حشوة داخلية */
    display: flex; /* استخدام الفلكس لترتيب العناصر */
    justify-content: space-around; /* توزيع العناصر بالتساوي */
    align-items: center; /* محاذاة العناصر عموديًا */
    position: sticky; /* جعل الشريط ثابتًا عند التمرير */
    top: 0; /* تحديد موضعه عند أعلى الصفحة */
    background-color: #FFFF99 !important; /* لون خلفية الشريط */
    z-index: 1000; /* ضمان ظهور الشريط فوق العناصر الأخرى */
    transition: all 0.3s ease !important;
}
.navbar .navbar-nav .nav-link {
    color: #004aad !important; /* تحديد لون الرابط */
    transition: color 0.3s ease; /* إضافة تأثير انتقال سلس عند التمرير */
}
.navbar .navbar-nav .nav-link:hover {
    color: #004aad !important; /* تغيير لون الرابط عند التمرير */
    font-weight: bold; /* لجعل النص سميك */
}
.navbar .navbar-nav .dropdown-menu {
    background-color: #FFFF99; /*  لون خلفية القائمةالمنسدلة */
    border: none; /* إزالة الحدود */
    text-align: right; /* لجعل النصوص محاذاة لليمين */
}
.navbar .navbar-nav .dropdown-item {
    color: #004aad; /* لون النص داخل القائمة المنسدلة */
}
.navbar .navbar-nav .dropdown-item:hover {
    background-color: #ffffff; /* تغيير الخلفية عند التمرير */
    font-weight: bold; /* لجعل النص سميك */
}

                                                                                /*      شريط التنقل الثابت      */
.sticky-nav #navbar-logo-text {
    display: none; /* إخفاء النص */
}
.sticky-nav #navbar-logo-text-mobile {
    display: none; /* إخفاء النص للنسخة المحمولة */
}
.sticky-nav #navbar-logo-img {
    display: block !important; /* إظهار الصورة */
    margin-left: 20px !important; /* إزاحة الصورة نحو اليمين */
    transform: translateX(20px) !important; /* إزاحة الصورة نحو اليمين */
}
.sticky-nav #navbar-logo-img-mobile {
    display: block !important; /* إظهار الصورة للنسخة المحمولة */
    margin-left: 10px !important; /* إزاحة الصورة نحو اليمين للنسخة المحمولة */
    transition: transform 0.3s ease !important; /* إضافة تأثير حركة سلاسة */
}
                                                                                /*      قسم الخدمات      */
.service-section {
    padding: 50px 0; /* إضافة مسافة 50 بكسل من الأعلى والأسفل، بدون مسافة من الجانبين */
}
.service-box {
    height: 175px; /* ارتفاع ثابت للصندوق */
    border-radius: 20px; /* زوايا مستديرة */
    background-color: #FFFF99; /* خلفية اصفر فاتحة */
    box-shadow: 0px 2px 2px #004aad;
    text-align: center; /* محاذاة النص إلى المنتصف */
    padding: 20px; /* حشوة داخلية */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* تأثيرات سلسة عند التمرير */
}
.service-box:hover {
    transform: translateY(-3px); /* رفع الصندوق عند التمرير */
    box-shadow: 0px 8px 12px #f4df4e; /* تغيير الظل */
}
.service-box i {
    font-size: 2rem; /* حجم الأيقونة */
    color: #004aad; /* لون الأيقونة */
}
.service-box h5 {
    font-size: 16px; /* حجم العنوان */
}
.service-box p {
    font-size: 14px; /* حجم النص */
    color: #004aad; /* لون النص */
}

                                                                                /*      قسم الارقام      */
.stats-section {
    padding: 40px 0;
    text-align: center;
}
.stats-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;

}
.stat-box {
    height: 100px; /* ارتفاع ثابت للصندوق */
    border-radius: 20px; /* زوايا مستديرة */
    background-color: #FFFF99; /* خلفية اصفر فاتحة */
    box-shadow: 0px 2px 2px #004aad;
    text-align: center; /* محاذاة النص إلى المنتصف */
    padding: 20px; /* حشوة داخلية */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* تأثيرات سلسة عند التمرير */
}

.stat-box:hover {
    transform: translateY(-3px); /* رفع الصندوق عند التمرير */
    box-shadow: 0px 8px 12px #f4df4e; /* تغيير الظل */
}
.stat-box.show {
    opacity: 1;
    transform: translateY(0);
}
.stat-number {
    font-size: 36px;
    font-weight: bold;
    color: #004aad;
    margin: 0;
}
.stat-description {
    font-size: 14px;
    color: #004aad;
}
h2 {
    font-size: 35px;
    color: #004aad;
}

                                                                                /*        أزرار التنقل في الكاروسيل     */
.carousel-control-prev, .carousel-control-next {
    position: absolute; /* موضع داخلي للكاروسيل */
    top: 50%; /* محاذاة رأسية في المنتصف */
    transform: translateY(-50%); /* توسيط الأسهم */
    font-size: 2rem; /* حجم الأسهم */
    padding: 10px; /* حشوة داخلية */
    color: #004aad !important; /* لون الأسهم */
}
.carousel-control-prev:hover, .carousel-control-next:hover {
    color: #ffcc00; /* تثبيت اللون عند التمرير */
    background-color: transparent; /* خلفية شفافة */
}
.carousel-control-prev {
    left: -65px; /* تحديد السهم ليكون على الجهة اليسرى */
}
/* تنسيق السهم التالي */
.carousel-control-next {
    right: -65px; /* تحديد السهم ليكون على الجهة اليمنى */
}
                                                                                /*        أزرار التنقل في القسم الاول     */

.carousel1-control-prev,
.carousel1-control-next {
    position: absolute; /* موضع داخلي للكاروسيل */
    top: 50%; /* محاذاة رأسية في المنتصف */
    transform: translateY(-50%); /* توسيط الأسهم */
    padding: 10px; /* حشوة داخلية */
    color: #004aad; /* لون الأسهم */
    font-size: 1.5rem; /* حجم الأسهم */
    z-index: 10; /* جعل الأسهم فوق الصور */
    display: flex; /* تنسيق المحتوى */
    align-items: center;
    justify-content: center;
    background-color: #FFFF99; /* خلفية بيضاء للأزرار */
    border: 2px solid #004aad; /* إطار بالأزرق */
    border-radius: 50%; /* شكل دائري */
    width: 40px; /* عرض الدائرة */
    height: 40px; /* ارتفاع الدائرة */
    transition: all 0.3s ease; /* تأثير انتقال ناعم */
    cursor: pointer; /* مؤشر الفأرة */
}

.carousel1-control-prev:hover,
.carousel1-control-next:hover {
    color: #FFFF99; /* لون الأيقونة عند التمرير */
    background-color: #004aad; /* تغيير لون الخلفية */
    border-color: #FFFF99; /* تغيير لون الإطار */
    transform: translateY(-50%) scale(1.1); /* تكبير طفيف */
    text-decoration: none; /* إزالة السطر تحت الزر */
}

.carousel1-control-prev:hover .fas, 
.carousel1-control-next:hover .fas {
    color: #FFFF99; /* تغيير لون الأيقونات عند التمرير */
}

.carousel1-control-prev {
    left: 15px; /* قرب السهم من الجانب الأيسر */
}

.carousel1-control-next {
    right: 15px; /* قرب السهم من الجانب الأيمن */
}


                                                                                /*       قسم من نحن والصورة المغبشة        */
.section-image {
    position: relative; /* تحديد الموضع النسبي للصورة */
    width: 100%; /* عرض الصورة ليملأ المساحة المتاحة */
    height: 500px; /* تحديد ارتفاع الصورة */
    background-image: url('../img/Ofis.jpg'); /* تحديد الصورة الخلفية */
    background-size: cover; /* جعل الصورة تغطي المساحة بالكامل */
    background-position: center; /* محاذاة الصورة في المنتصف */
}
.section-image::before {
    content: ""; /* إضافة محتوى فارغ قبل الصورة */
    position: absolute; /* تحديد موضع العنصر بشكل مطلق */
    top: 0; /* تحديد المسافة من الأعلى */
    left: 0; /* تحديد المسافة من اليسار */
    width: 100%; /* عرض العنصر ليغطي الصورة بالكامل */
    height: 100%; /* جعل العنصر يغطي الصورة بالكامل */
    background-color: rgba(4, 0, 112, 0.6); /* إضافة طبقة شفافة بلون أزرق على الصورة */
}
.section-image h2,
.section-image p,
.section-image .btn {
    position: relative; /* جعل العناصر فوق الصورة باستخدام الموضع النسبي */
    z-index: 1; /* إعطاء الأولوية لهذه العناصر لتظهر فوق الطبقة الشفافة */
    color: #FFFF99; /* تحديد لون النص */
}
h5 {
    color: #004aad !important; /* تحديد لون النص للعناوين الصغيرة */
    font-size: 16px; /* حجم العنوان */
}
h4 {
    color: #004aad; /* لون النص للعناوين h4 */
}
p {
    color: #004aad; /* لون النص للفقرة */   
}
                                                                                /*       قسمي القبولات والتقييمات        */
.reviews-section h2 {
    color: #004aad; /* تحديد لون النص للعنوان في قسم المراجعات */
    text-align: center; /* محاذاة النص في المنتصف */
    margin-bottom: 0; /* إزالة المسافة السفلية */
}
.reviews-carousel-container {
    display: flex; /* استخدام الفلكسي لترتيب العناصر في حاوية المراجعات */
    justify-content: center; /* محاذاة العناصر في المنتصف */
    align-items: center; /* محاذاة العناصر عموديًا في المنتصف */
    position: relative; /* تحديد الموضع النسبي للحاوية */
    border-radius: 10px; /* إضافة حواف مدورة للحاوية */
}
.review-nav-arrow, .review-nav-arrow2 {
    font-size: 30px; /* تحديد حجم الخط للسهم */
    color: #004aad; /* تحديد لون السهم */
    cursor: pointer; /* تغيير المؤشر إلى يد عند التمرير فوقه */
    transition: color 0.3s linear; /* إضافة تأثير انتقال لتغيير اللون */
    position: absolute; /* تحديد الموضع بشكل مطلق */
    top: 50%; /* محاذاة السهم عموديًا في المنتصف */
    transform: translateY(-50%); /* تحريك السهم ليكون في المنتصف تمامًا */
    z-index: 10; /* تحديد أولوية السهم ليظهر فوق العناصر الأخرى */
}
.review-nav-arrow:hover, .review-nav-arrow2:hover {
    color: #FFFF99; /* تغيير اللون عند التمرير فوق السهم */
}
#prevArrow, #prevArrow2 {
    left: 30px; /* تحديد موضع السهم الأيسر */
}
#nextArrow, #nextArrow2 {
    right: 30px; /* تحديد موضع السهم الأيمن */
}
.blurred-image-container {
    position: relative; /* تحديد الموضع النسبي للصورة */
    width: 100%; /* عرض العنصر ليملأ المساحة المتاحة */
    max-width: 500px; /* تحديد الحد الأقصى للعرض */
    border-radius: 10px; /* إضافة حواف مدورة للصورة */
    overflow: hidden; /* إخفاء أي جزء من الصورة يتجاوز الحاوية */
}
.review-image-blurred {
    width: 100%; /* عرض الصورة ليملأ المساحة */
    height: 100%; /* ارتفاع الصورة ليملأ الحاوية */
    object-fit: cover; /* جعل الصورة تغطي المساحة بشكل مناسب */
    filter: blur(5px); /* إضافة تأثير الضبابية على الصورة */
}
.overlay-text {
    position: absolute; /* تحديد الموضع بشكل مطلق للنص */
    top: 50%; /* محاذاة النص عموديًا في المنتصف */
    left: 50%; /* محاذاة النص أفقيًا في المنتصف */
    transform: translate(-50%, -50%); /* تحريك النص ليكون في المنتصف تمامًا */
    background-color: #FFFF99; /* إضافة خلفية شفافة للنص */
    border-radius: 10px; /* إضافة حواف مدورة للنص */
    padding: 10px 20px; /* إضافة مسافة داخلية حول النص */
}
.btn-custom {
    color: #004aad; /* تحديد لون النص */
    background-color: transparent; /* جعل خلفية الزر شفافة */
    border: 1px solid #004aad; /* تحديد الحدود باللون الأزرق */
    border-radius: 5px; /* إضافة حواف مدورة للزر */
    padding: 5px 5px; /* تحديد المسافة داخل الزر */
    transition: all 0.3s ease; /* إضافة تأثير عند التمرير على الزر */
}
.btn-custom:hover {
    background-color: #FFFF99; /* تغيير الخلفية عند التمرير على الزر */
    color: #004aad; /* تغيير لون النص عند التمرير */
    border-color: #004aad; /* تغيير لون الحدود عند التمرير */
}
.reviews-images,
.reviews-images2 {
    display: flex; /* استخدام الفلكسي لترتيب الصور داخل المراجعات */
    justify-content: center; /* محاذاة الصور في المنتصف */
    align-items: center; /* محاذاة الصور عموديًا في المنتصف */
}
.review-images,
.review-images2 {
    border-radius: 10px; /* إضافة حواف مدورة للصور */
    display: none; /* إخفاء الصور افتراضيًا */
}
.review-images:first-child,
.review-images2:first-child {
    display: block; /* عرض الصورة الأولى فقط */
}
.section-middle {
    margin: 0; /* إزالة المسافة الخارجية */
    padding: 30px; /* إضافة مسافة داخلية */
    background-color: #004aad; /* تحديد لون الخلفية */
    border-radius: 8px; /* إضافة حواف مدورة */
}

                                                                                /*       قسمي الجامعات        */
/* الكود الأساسي */
.uni-card {
    width: 100%; /* جعل الكرت يأخذ عرض العنصر بالكامل */
    max-width: 350px; /* تحديد الحد الأقصى للعرض */
    margin: 15px auto; /* إضافة مسافة حول الكرت */
    border-radius: 10px; /* إضافة حواف مدورة */
    box-shadow: 0 2px 2px #004aad; /* إضافة ظل للكرت */
    height: 340px; /* ارتفاع ثابت للمحتوى النصي */
}
.uni-image {
    width: 100%; /* عرض الصورة داخل الكرت */
    height: 150px; /* الحفاظ على نسبة العرض إلى الارتفاع */
    max-width: 150px; /* تحديد الحد الأقصى للعرض */
    margin: 0 auto; /* محاذاة الصورة في المنتصف */
}

.uni-name {
    font-size: 1rem; /* تحديد حجم خط اسم الجامعة */
    font-weight: bold; /* جعل الخط عريض */
}

.uni-foundation {
    font-size: 0.9rem; /* تحديد حجم الخط لمؤسسة الجامعة */
    color: #004aad; /* تحديد لون النص */
}

.img-fluid {
    width: 100%; /* جعل الصورة تملأ المساحة */
    height: 400px; /* تحديد ارتفاع الصورة */
    object-fit: cover; /* جعل الصورة تغطي المساحة بشكل مناسب */
}


                                                                                /*       قسم كرت التخصصات        */
.bolum-card {
    width: 100%; /* جعل الكرت يأخذ عرض العنصر بالكامل */
    max-width: 350px; /* تحديد الحد الأقصى للعرض */
    margin: 15px auto; /* إضافة مسافة حول الكرت */
    border-radius: 10px; /* إضافة حواف مدورة */
    box-shadow: 0 2px 2px #004aad; /* إضافة ظل للكرت */
    height: 250px; /* ارتفاع ثابت للمحتوى النصي */
}
.bolum-name {
    font-size: 1rem; /* تحديد حجم خط اسم الجامعة */
    font-weight: bold; /* جعل الخط عريض */
}
.bolum-foundation {
    font-size: 0.9rem; /* تحديد حجم الخط لمؤسسة الجامعة */
    color: #004aad; /* تحديد لون النص */
}


/* الحاوية العامة للزر */
.contact-button {
    position: fixed; /* تثبيت الزر في زاوية الشاشة */
    bottom: 20px; /* مسافة من الأسفل */
    right: 20px; /* مسافة من اليمين */
    z-index: 1000; /* التأكد من ظهور الزر فوق العناصر الأخرى */
    padding: 10px;
    border-radius: 5px; /* زوايا مستديرة للحاوية */
    background-color: transparent; /* خلفية شفافة للحاوية */
}

/* الزر الرئيسي: سجل الآن */
.contact-button-main {
    color: #004aad; /* تحديد لون النص */
    background-color: transparent !important; /* جعل خلفية الزر شفافة */
    border: 1px solid #004aad; /* تحديد الحدود باللون الأزرق */
    border-radius: 5px; /* إضافة حواف مدورة للزر */
    padding: 5px 5px; /* تحديد المسافة داخل الزر */
    transition: all 0.3s ease; /* إضافة تأثير عند التمرير على الزر */
    font-size: 14px; /* حجم النص */
    font-weight: bold; /* جعل النص عريضًا */
    cursor: pointer; /* إظهار اليد عند التمرير */
    box-shadow: 0 2px 8px #004aad ; /* ظل الزر */
    float: right; /* محاذاة الزر لليمين */
    margin-top: 0; /* إزالة أي هوامش من الأعلى */
}

/* التأثير عند تمرير الماوس على الزر */
.contact-button-main:hover {
    background-color: #FFFF99; /* تغيير الخلفية عند التمرير على الزر */
    color: #004aad; /* تغيير لون النص عند التمرير */
    border-color: #004aad; /* تغيير لون الحدود عند التمرير */
    transform: scale(1.05); /* تكبير الزر قليلاً */
}

/* الخيارات المنبثقة */
.contact-options {
    visibility: hidden; /* إخفاء الخيارات بشكل افتراضي */
    font-size: 12px; /* حجم النص */
    opacity: 0; /* جعل الخيارات شفافة */
    flex-direction: column; /* ترتيب العناصر عموديًا */
    align-items: center; /* محاذاة العناصر في المنتصف */
    position: absolute; /* الموضع بالنسبة للزر الرئيسي */
    bottom: 50px; /* المسافة بين الزر والخيارات */
    right: 0; /* محاذاة الخيارات مع الزر */
    background-color: transparent; /* جعل خلفية الزر شفافة */
    border-radius: 5px; /* زوايا مستديرة */
    box-shadow: 0 2px 2px #004aad; /* إضافة ظل للكرت */
    transition: visibility 0.3s ease, opacity 0.3s ease; /* تأثير الانتقال */
}

/* عرض الخيارات عند التفاعل */
.contact-button:hover .contact-options,
.contact-options:hover {
    visibility: visible; /* إظهار الخيارات */
    opacity: 1; /* جعل الخيارات مرئية */
    background-color: #FFFF99; /* تغيير الخلفية عند التمرير على الزر */
}

/* تصميم الروابط داخل الخيارات */
.contact-option {
    margin: 0px 0; /* تقليل المسافة بين الأيقونات لإبقاء التصميم متماسكًا */
    font-size: 12px; /* حجم النص */
    display: flex; /* عرض الأيقونة والنص في خط واحد */
    align-items: center; /* محاذاة الأيقونة والنص عموديًا */
    color: #004aad; /* لون الأيقونات والنصوص */
    text-decoration: none; /* إزالة الخط السفلي من النصوص */
    border: 2px solid transparent; /* حدود شفافة لتحسين التصميم عند التمرير */
    padding: 5px 5px; /* إضافة حواف داخلية لتحسين تجربة المستخدم */
    border-radius: 5px; /* زوايا مستديرة لإضفاء مظهر عصري */
    transition: all 0.3s ease; /* تأثير عند التمرير يشمل كل الخصائص */
}

/* التأثير عند تمرير الماوس على الروابط */
.contact-option:hover {
    color: #FFFF99; /* تغيير اللون عند التمرير */
    background-color: #004aad; /* إضافة خلفية مميزة عند التمرير */
    border-color: #FFFF99; /* تلوين الحدود عند التمرير */
    transform: scale(0.8); /* تكبير العنصر قليلاً */
    text-decoration: none; /* تأكيد إزالة الخط السفلي */
}

/* الأيقونات داخل الروابط */
.contact-option i {
    font-size: 20px; /* تكبير الأيقونة لجعلها أكثر وضوحًا */
    margin-right: 8px; /* مسافة بين الأيقونة والنص */
}

/* النصوص داخل الروابط */
.contact-option span {
    font-size: 14px; /* حجم النص */
    font-weight: bold; /* جعل النصوص بارزة */
}

                                                                                /*       قسم التزييل        */
.footer{
    background-color: #FFFF99 !important; /* لون خلفية الشريط */
}
.footer-link {
    color: #004aad; /* اللون الأزرق للنص */
    text-decoration: none; /* إزالة التسطير */
    transition: color 0.3s ease, transform 0.3s ease; /* إضافة تأثير الانتقال */
}
.footer-link:hover {
    color: #ffcc00; /* اللون الأصفر عند التمرير */
    text-decoration: none; /* إزالة التسطير */
    transform: scale(1.1); /* تكبير الرابط قليلاً */
}
footer .fab {
    color: #004aad; /* اللون الأزرق للأيقونات الاجتماعية */
    transition: all 0.3s ease-in-out; /* إضافة تأثير عند التمرير فوق الأيقونات */
}
footer .fab:hover {
    transform: scale(1.2); /* تكبير الأيقونات عند التمرير */
    color: #ffcc00; /* تغيير لون الأيقونات */
}
.footer .text-right {
    text-align: right; /* محاذاة النص إلى اليمين */
    direction: rtl; /* ضبط اتجاه النص ليكون من اليمين إلى اليسار */
}
.footer ul {
    padding-left: 0; /* إزالة المسافة الافتراضية من جهة اليسار */
}

                                                                                /*       قسم تصميم الموبايل        */
@media (max-width: 1000px) {
    html, body {
        margin: 0;
        padding: 0;
        width: 100%; /* ضمان أن العرض يغطي الشاشة بالكامل */
        }
        /* الشريط العلوي */
        .navbar {
            position: sticky;
            top: 0px;
            z-index: 1000;
            background-color: #FFFF99  !important; /* لون خلفية الشريط */
        }

    .navbar .d-flex {
        flex-direction: row-reverse; /* عكس ترتيب العناصر */
        justify-content: space-between; /* توزيع العناصر بالتساوي */
    }
    .navbar-nav{
        direction: ltr;
    }

    .navbar .d-flex .nav-link {
        margin-left: 10px; /* إضافة مسافة بين الأيقونات */
    }
    .bolum-card {
        max-width: 100%; /* تقليل العرض لأقل من 1000px */
        height: 220px; /* تحديد طول الكرت */
    }
    /* بطاقة الجامعات */
    .uni-card {
        max-width: 100%; /* تقليل العرض لأقل من 1000px */
        height: 200px; /* تحديد طول الكرت */
    }
       /* الأعمدة (التخصصات) */
    .col-12.col-md-4 {
        width: 33.33%; /* تخصيص 3 تخصصات في صف واحد */
        padding: 0 10px; /* إضافة مسافة بين الأعمدة */
    }
    .card-body, .bolum-card .card-body {
        padding: 0; /* إزالة الحشوة داخل جسم البطاقة */
    }
    /* صورة الكرت */
    .uni-image {
        max-width: 75px; /* تقليل حجم الصورة */
        height: 75px; /* تحديد طول */
    }
    /* النصوص داخل الكرت */
    .card-body h4, .bolum-card .card-body h4 {
        font-size: 1rem !important;
        margin-bottom: 5px; /* تقليل المسافة بين h4 والمحتوى أسفله */
    }
    .card-body h5, .bolum-card .card-body h5 {
        font-size: 16px !important; /* حجم العنوان */
        margin-bottom: 5px; /* تقليل المسافة بين h5 والمحتوى أسفله */
    }
    .card-body p, .bolum-card .card-body p {
        font-size: 0.8rem !important;
        margin-bottom: 5px; /* تقليل المسافة بين p والمحتوى أسفله */
    }
    .card-body a, .bolum-card .card-body a {
        font-size: 0.85rem !important; /* تصغير حجم النص في الرابط */
        padding: 2px 2px; /* تقليل المسافة داخل الرابط */
    }
    
    .stat-box {
        flex: 0 0 48%;  /* يعين العمود ليشغل 48% من عرض الشاشة، لترك مسافة بين الأعمدة */
    }

    /* النصوص الخاصة بالتأسيس */
    .uni-foundation, .bolum-foundation {
        font-size: 1rem !important; /* تقليل حجم النص */
    }
    
    /* الزر */
    .btn-warning {
        font-size: 0.85rem !important; /* تقليل حجم الخط للزر */
        padding: 8px 16px; /* تقليل المسافة داخل الزر */
    }
    
    /* الأسهم */
    .review-nav-arrow, .review-nav-arrow2 {
        font-size: 1.5rem !important; /* تقليل حجم الأسهم */
        top: 50%; /* تعديل المحاذاة الرأسية */
    }
    
    #prevArrow, #prevArrow2 {
        left: 0; /* تحديد السهم ليكون على الجهة اليسرى */
    }
    
    #nextArrow, #nextArrow2 {
        right: 0; /* تحديد السهم ليكون على الجهة اليمنى */
    }
    
    /* صندوق الخدمة */
    .service-box {
        height: auto; /* تعديل الارتفاع ديناميكيًا */
        padding: 15px; /* تقليل الحشوة الداخلية */
        max-width: 100%; /* تقليل العرض للشاشات الصغيرة */
        margin: 10px auto; /* توسيط الصناديق */
    }
    
    .service-box i {
        font-size: 1.5rem !important; /* تقليل حجم الأيقونة */
    }
    
    .service-box h5 {
        font-size: 16px !important; /* تقليل حجم العنوان */
    }
    
    .service-box p {
        font-size: 12px !important; /* تقليل حجم النص */
    }
    
    /* الأسهم في الـ Carousel */
    .carousel-control-prev, .carousel-control-next {
        font-size: 1.5rem !important; /* تقليل حجم الأسهم */
        top: 50%; /* تعديل المحاذاة الرأسية */
    }
    
    .carousel-control-prev {
        left: -15px; /* تحديد السهم ليكون على الجهة اليسرى */
    }
    
    .carousel-control-next {
        right: -15px; /* تحديد السهم ليكون على الجهة اليمنى */
    }
    
    /* الحاويات الإحصائية */
    .stats-container {
        gap: 15px; /* تقليل الفجوات بين الصناديق */
    }
    
    .stat-box {
        padding: 5px; /* تقليل الحشوة الداخلية */
        height: 60px; /* ارتفاع ثابت للصندوق */
        border-radius: 20px; /* زوايا مستديرة */
        background-color: #FFFF99; /* خلفية اصفر فاتحة */
        box-shadow: 0px 2px 2px #004aad;
        text-align: center; /* محاذاة النص إلى المنتصف */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* تأثيرات سلسة عند التمرير */
    }
    
    .stat-number {
        font-size: 24px !important; /* تقليل حجم الأرقام */
    }
    
    .stat-description {
        font-size: 10px !important; /* حجم أصغر للوصف */
    }
    
    h2 {
        font-size: 22px !important; /* حجم أصغر للعنوان */
    }
    .about-section h2 {
        font-size: 24px;
    }

    .about-section .info-box h5 {
        font-size: 16px;
    }

    .about-section .info-box p {
        font-size: 14px;
        padding-bottom: 5px; /* إضافة حشوة داخلية في الأسفل */

    }

    .about-section .info-box p:last-child {
        margin-bottom: 5px; /* زيادة المسافة السفلية لتفادي المشكلة */
    }
    

    #searchContainer {
        width: 90%; /* عرض البحث يتناسب مع الموبايل */
        left: 5%; /* مسافة من الجوانب */
        top: 425px; /* تعديل الموضع إذا لزم الأمر */
    }

    #searchContainer form {
        flex-direction: column; /* ترتيب العناصر عموديًا */
    }

    #searchContainer input {
        width: 100%; /* عرض الحقل يأخذ كامل المساحة */
        margin-bottom: 5px; /* إضافة مسافة أسفل الحقل */
    }

    #searchContainer button {
        width: 100%; /* عرض الزر كامل */
        padding: 12px; /* زيادة الحشوة للزر */
    }
    
    
}

.carousel-control-next, .carousel-control-prev{
    width: 10px !important;
}




                                                                                /*       قسم معلومات عنا        */
/* القسم العام */
.about-section {
    padding: 50px 0; /* إضافة مسافة علوية وسفلية */
}

.about-section .container {
    padding: 0 15px;
}

/* تنسيق العنوان */
.about-section h2 {
    color: #004aad; /* اللون الأصفر */
    font-weight: bold;
    margin-bottom: 30px;
    text-align: right; /* النص من اليمين */
}

/* تنسيق الأقسام الفرعية */
.about-section .info-box {
    background-color: transparent; /* خلفية شفافة */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 2px #004aad; /* إضافة ظل للكرت */
    transition: all 0.3s ease-in-out;
    color: #004aad; /* النص باللون الازرق */
    text-align: right; /* النص من اليمين */
    width: 100%;  /* تحديد عرض ثابت */
    height: 100%; /* تأكد من أن الحشوة الداخلية تغطي المساحة بالكامل */
    position: relative; /* مهم لإمكانية التحكم بالمحتوى */
    margin: 0 auto; /* لضمان تمركز العناصر */
}

.about-section .info-box:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 12px #f4df4e; /* تغيير الظل */
}

/* تنسيق العناوين داخل كل صندوق */
.about-section .info-box h5 {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
    color: #004aad; /* العناوين باللون الأصفر العريض */
}

/* تنسيق النص داخل كل صندوق */
.about-section .info-box p {
    font-size: 14px;
    color: #004aad;
    line-height: 1.6;
    padding-bottom: 5px; /* إضافة مسافة إضافية في الأسفل */
}
/* التأكد من أن التعديل ينطبق فقط على الفقرة الأخيرة في الكود */
.about-section .info-box p:last-child {
    margin-bottom: 5px; /* زيادة المسافة السفلية لتفادي المشكلة */
}

/* تنسيق الأعمدة */
.about-section .row {
    margin-left: -15px;
    margin-right: -15px;
}

.about-section .col-md-6 {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 20px;
    width: 100%; /* لضمان أن تكون الأعمدة ثابتة بنسبة 100% */
}



#navbar-logo-text, #navbar-logo-img, #logo-img {
    transition: all 0.3s ease-in-out;
}







/*       النهاية        */