body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    background-color: #f5f5f5;
    flex-direction: column;
    min-height: 100vh;

}

body::-webkit-scrollbar {
    display: none;
}

header {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 12vh;
    background-color: #ffffff;
    padding: 0 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
}

header img {
    max-height: 100%;
}

header h1 {
    text-align: center;
    color: #003366;
}

.events {
    display: flex;
}

.menu-icon {
    display: none;
    /* إخفاء أيقونة القائمة في الشاشات الكبيرة */
    cursor: pointer;
}

.user-icon33 {
    display: none;

}

.links {
    display: flex;

    flex-grow: 1;
    justify-content: space-around;
    background-color: #003366;
    /* خلفية الشريط كحلي */
    padding: 10px 0;
    /* إضافة padding للشريط */
    margin-top: 12vh;
    /* ترك مساحة للهيدر الثابت */
    direction: rtl;

}

.links a {
    text-decoration: none;
    color: #ffffff;
    /* لون النصوص أبيض */
    font-size: 16px;
    direction: ltr;
}

.links a:hover {
    text-decoration: none;
}

.section {



    background-color: #f4f4f4;

}
#home{
 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.main-footer {
    padding: 20px;
}
.apply-button {
    background-color: #FFC107; /* أصفر غامق */
    color: white; /* لون النص أبيض */
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
    text-decoration: none; /* إزالة الخط السفلي من الرابط */
}
.apply-button:hover {
    background-color: #FFCA28; /* لون أفتح عند التمرير */
}
.small-link {
    font-size: 12px; /* حجم خط صغير */
    color: blue; /* لون الرابط */
    text-decoration: underline; /* خط تحت الرابط */
    cursor: pointer;
}
#university-guide {
    height: 100%;
    direction: rtl;
}

footer {
    background-color: #003366;
    height: 12vh;
    padding: 20px 0;
    text-align: center;
}

footer a {
    color: #ffffff;
    margin: 0 10px;
    text-decoration: none;
    font-size: 20px;
}

footer p {
    color: #ffffff;
}


/*  عرض  الاعلانات */
#news {

    /* ارتفاع القسم */
    direction: rtl;

}

.news-container {
    width: 100%;
}

.news-section {
    display: block;
    /* عرض الأقسام بشكل أفقي */
    width: 98%;

    background-color: #f4f4f4;
    /* لون خلفية القسم */
    /* border: 1px solid #003366; */
    /* لون الحدود */
    border-radius: 5px;
    /* زوايا دائرية */
    padding: 10px;
    /* حشوة داخلية */
    margin: 5px;
    /* مسافة بين الأقسام */
    color: #003366;
    /* لون النص */

}

.innernewsse {
    max-width: 99%;
    /* عرض أقصى للعنصر */
    display: flex;
    /* استخدام flexbox لترتيب العناصر */
    overflow-x: auto;
    /* تمكين التمرير الأفقي */
    overflow-y: hidden;
    /* إخفاء التمرير العمودي إذا كان غير مطلوب */
    white-space: nowrap;

    /* منع التفاف النص داخل العناصر */
}

.innernewsse::-webkit-scrollbar {
    display: none;
}

.announcement-card {
    position: relative;
    max-width: 45%;
    max-height: 10vh;
    margin-left: 2%;
    /* يمنع التمرير */
    background-color: #faf3e0;
    /* background-color: #e0f7fa; */

    /* لون خلفية كرت الإعلان */
    border: 1px solid #003366;
    /* لون الحدود */
    border-radius: 5px;
    /* زوايا دائرية */
    padding: 13px;
    /* حشوة داخلية */
    color: #003366;
    /* لون النص */
    background-repeat: no-repeat;
    background-size: cover;
  
}




.view-announcement-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #003366;
    /* لون خلفية الزر */
    color: white;
    /* لون النص */
    border: none;
    /* إزالة الحدود */
    padding: 5px 10px;
    /* حشوة الزر */
    border-radius: 5px;
    /* زوايا دائرية */
    cursor: pointer;
    /* تغيير المؤشر عند التمرير فوق الزر */
}

.view-announcement-btn:hover {
    background-color: #005580;
    /* لون خلفية الزر عند التمرير */
}

/*نهاية عرض الاعلانات*/

/* تصميم الجوال */
@media (max-width: 768px) {
    .links {
        display: none;
        /* إخفاء الروابط في الشاشات الصغيرة */
    }

    .links a:hover {
        text-decoration: none;
    }

    .menu-icon {
        display: block;
        /* عرض أيقونة القائمة */
    }

    .sidebar {
        position: fixed;
        right: -300px;
        /* إخفاء الشريط الجانبي خارج الشاشة */
        top: 0;
        width: 250px;
        height: 100%;
        background-color: #003366;
        transition: right 0.3s ease;
        padding: 20px;
        z-index: 1001;
        color: #ffffff;
    }

    .sidebar a {
        display: block;
        margin: 10px 0;
        color: #ffffff;
        text-decoration: none;
    }

    .sidebar a:hover {
        text-decoration: none;
    }

    .close-btn {
        cursor: pointer;
        font-size: 24px;
        color: #ffffff;
        float: right;
        border: none;
        background: none;
    }

    .user-icon22 {
        display: none;
    }

    .user-icon33 {
        display: block;
        text-align: center;
        color: #003366;
        font-size: 15px;
        margin-left: 12px;
        cursor: pointer;
    }
    .news-section{
        width: 93%;
    }

}

/* تصميم الكمبيوتر */
@media (min-width: 769px) {
    .links {
        display: flex;
        /* عرض الروابط في الكمبيوتر */
        justify-content: space-between;
        /* توزيع الروابط بالتساوي */
    }

    .sidebar {
        display: none;
        /* إخفاء الشريط الجانبي في الشاشات الكبيرة */
    }
}

.user-icon22 {
    text-align: center;
    color: #003366;
    font-size: 20px;

    cursor: pointer;
}

.user-icon-card22 {
    color: #003366;
    font-size: 20px;
}

.login-card22 {
    display: none;
    width: 70%;
    max-width: 400px;
    height: 55vh;
    background: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 8px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    overflow-y: auto;
    direction: rtl;
    z-index: 100;
}

.login-card22::-webkit-scrollbar {
    display: none;
}

.close-btn22 {
    background-color: red;
    border: none;
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
    position: absolute;
    top: 10px;
    right: 10px;
}

.option22 {
    margin: 10px 0;
}

select {
    width: 40%;
    height: 5vh;
    border-radius: 4px;
    padding: 5px;
    font-size: 16px;
    margin-top: 10px;
    background-color: #e0f7fa;
    border: none;
    text-align: center;
}

.input-field22 {
    /* display: none; */
    margin: 10px 0;
}

header h1 {
    font-size: 18px;
}

.lasttel {
    /* background: rgb(241, 249, 247); */
    /* background-color: rgb(235, 238, 249); */

    color: white;
    padding: 10px;
    border-radius: 8px;
}

.input-field22 input {
    width: 80%;
    height: 5vh;
    border-radius: 4px;
    padding: 5px;
    margin: 10px 0;
    font-size: 16px;
    background-color: #e0f7fa;

    border: none;
}

.submit-btn22 {
    background-color: #003366;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    width: 40%;
    height: 5vh;
}

.input-field22 input:focus {
    outline: none;
    border: 2px solid orange;
    background-color: #e0f7fa;
}

select:focus {
    outline: none;
    background-color: #e0f7fa;
}

.option22 select {
    width: 60%;
}

.animated-message {
    color: red;
    font-size: 18px;
    animation: slideIn 15s infinite;
}

@keyframes slideIn {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

@media (max-width: 600px) {
    .login-card22 {
        width: 80%;
        height: 40vh;
    }

    select,
    input {
        width: 80%;
        height: 3.5vh;
    }

    .submit-btn22 {
        width: 30%;
        height: 5vh;
    }

    .option22 select {
        width: 50%;
        background-color: #e0f7fa;
    }

    .announcement-card {
        max-width: 97%;

    }
}

.section-ofhome {
background-image: url("../Images_new/caverw.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 100vh; /* لضمان أن الصورة تغطي كامل ارتفاع القسم */
display: flex; /* لمحاذاة المحتوى داخل القسم */
justify-content: center; /* لمحاذاة المحتوى أفقياً */
align-items: center; /* لمحاذاة المحتوى عمودياً */
color: white; /* لون النص */
text-align: center; /* محاذاة النص في المنتصف */
position: relative; /* لتسهيل وضع العنصر المموه */
}

.section-ofhome::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
filter: blur(5px); /* تعديل درجة الضبابية كما ترغب */
z-index: 1; /* وضعه خلف المحتوى */
}

.section-ofhome > * {
position: relative;
z-index: 1; /* جعل المحتوى فوق الضبابية */
}

#university-guide {
    background-color: #f4f4f4;
    padding: 20px;
    margin: 20px 0;
}


.guide-content {
    display: flex;
    justify-content: space-between;
    /* Space between sections */
    flex-wrap: wrap;
    /* Allows wrapping for responsive design */
}

.support-section,
.contact-section,
.leadership-section {
    flex: 1;
    /* Take equal space */
    margin: 10px;
    /* Margin around sections */
    padding: 20px;
    border: 1px solid #003366;
    /* Border color */
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
    min-width: 280px;
    /* Minimum width for smaller screens */
}

.contact-icons a {
    color: #003366;
    /* Icon color */
    margin-right: 10px;
    font-size: 20px;
}

.section1 {
    direction: rtl;
}

/* Responsive Design */
@media (max-width: 768px) {
    .guide-content {
        flex-direction: column;
        /* Change to vertical layout on small screens */
    }

}

/*بداية تنسيقات  كرت مشاريع التخرج*/
.categroy {
    /* background-color: #ffffff; */
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    direction: rtl;
}

.categroy a {
    margin: 0 10px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

.display_projects {
    display: flex;
    overflow-x: auto;
    /* padding: 5px 0; */
    scroll-behavior: smooth;

}

.head_of_display_projects {
    direction: rtl;
    font-size: 16.5px;
    padding-right: 10px;
}

.card_projects {
    position: relative;
    background-color: white;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 10px;
    padding: 1px;
    width: 18%;
    height: 24vh;
    text-align: center;
    flex-shrink: 0;
    border-radius: 10px;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 
}
.card_projects:hover{
    transform: scale(1.05); 
}
.card_projects img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* خلفية مظللة */
    color: white;
    display: flex;
    flex-direction: column; /* تنظيم المحتوى عمودياً */
    justify-content: flex-start; /* محاذاة المحتوى إلى الأعلى */
    align-items: flex-end; /* محاذاة الأيقونات إلى اليمين */
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 10px;
    padding: 10px; /* إضافة مسافة داخلية */
}
.card_projects:hover .overlay {
    opacity: 1; /* جعل الطبقة مرئية عند التحويم */
}
.overlay p{
    width: 100%;
    margin-top: 10px;
     text-align: center;
}


.icons {
    display: flex;
    flex-direction: column; /* تنظيم الأيقونات عمودياً */
    gap:5px; /* مسافة بين الأيقونات */
}

.icon {
    font-size: 10px; /* حجم الأيقونات */
    background-color: white; /* خلفية بيضاء */
    color: black; /* لون الأيقونة أسود */
    border-radius: 9%; /* جعل الخلفية دائرية */
    padding: 10px; /* إضافة مسافة داخلية */
    cursor: pointer; 
    transition: background-color 0.3s, color 0.3s; /* تأثير عند التحويم */
}
.fa-star1 {
    color:#FFC107; /* اللون عند النقر */
}


*::-webkit-scrollbar {
    display: none;
}
.all_projects1{
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding: 20px;
}

.all_projects1 .button-display-projectes{
    background-color: #FFC107; /* أصفر غامق */
    color: white; /* لون النص أبيض */
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
    text-decoration: none; 
}
@media (max-width: 768px){
    .all_projects1 .button-display-projectes{
        font-size: 14px;
        
    }
}

.card_projects:hover .info-icon {
    display: block;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    padding-top: 60px;
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 30%;
    direction: rtl;
}

.close {
    color: red;
    float: right;
    font-size: 28px;
    font-weight: bold;
    direction: ltr;
}

.close:hover,
.close:focus {
    color: darkred;
    text-decoration: none;
    cursor: pointer;
}



@media (max-width: 600px) {
    .card_projects {

        width: 40%;
        height: 20vh;
        /* عرض الكرت 40% */
        /* aspect-ratio: 1; */
        /* يجعل الطول مساويًا للعرض */

        /* flex-shrink: 0; */
        /* Prevent cards from shrinking */
    }

 

    .card_projects h3 {
        font-size: 14px;
        margin: 10px 0;
    }

    .star {
        color: gold;
        font-size: 14px;
    }

    h1 {
        font-size: 15px;
    }

    .modal-content {
        width: 40%;
    }

    .categroy a {
        margin: 0 5px;
        font-size: 11px;
    }
}
/* Advertisement_Card_Styles.css */
/* تنسيقات كرت اخر الاخبار الكرت المعرض */
.ovcard {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* خلفية خفيفة */
    display: none; /* إخفاء الخلفية في البداية */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.advert-card55 {
    width: 300px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.header-section55 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 12px;
    background-color: #f5f5f5;
}

.header-section55 .close-button55 {
    cursor: pointer;
    font-size: 16px;
    color: #ff3b3b;
}

.image-container55 {
    width: 95%;
    height: 25%;
    margin: 10px auto;
    overflow: hidden;
}

.image-container55 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.description-box55 {
    max-height: 160px;
    overflow-y: auto;
    padding: 10px;
    font-size: 14px;
}
.description-box55::-webkit-scrollbar{
    display: none;
}

.date-info55 {
    text-align: center;
    font-size: 12px;
    color: #777;
    margin: 10px 0;
}

.show-advert-card55 {
    display: block; /* لعرض الكرت عند النقر على الزر */
}

/* Advertisement_Card_Styles1.css */
/* تنسيقات كرت اخر الاخبار الكرت المعرض */
.ovcard {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* خلفية خفيفة */
    display: none; /* إخفاء الخلفية في البداية */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.advert-card55 {
    width: 300px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.header-section55 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 12px;
    background-color: #f5f5f5;
}

.header-section55 .close-button55 {
    cursor: pointer;
    font-size: 16px;
    color: #ff3b3b;
}

.image-container55 {
    width: 95%;
    height: 25%;
    margin: 10px auto;
    overflow: hidden;
}

.image-container55 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.description-box55 {
    text-align: right;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
    font-size: 14px;
}
.description-box55::-webkit-scrollbar{
    display: none;
}

.date-info55 {
    text-align: center;
    font-size: 12px;
    color: #777;
    margin: 10px 0;
}

.show-advert-card55 {
    display: block; /* لعرض الكرت عند النقر على الزر */
}
/*College_Guide_Card_Styles.css*/
/* كرت تنسيقات دليل الكلية  */
.icon-style {
    color: #003366;
    margin-right: 5px; /* للمسافة على اليمين */
}

.icon-style-left {
    margin-left: 10px; /* للمسافة على اليسار */
}

/*Formats_of_Specialty_Cards.css*/
.card19-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
}
.specialty-card66,.card19 {
    width: 300px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin: 15px;
    overflow: hidden;
    text-align: center;
}

.specialty-card66 img ,.card19 img {
    width: 100%;
    height: 150px; /* ارتفاع الصورة */
    object-fit: cover;
   
}

.specialty-card66 h3 ,.card19 h2 {
    margin: 10px 0;
    font-size: 18px;
}

.specialty-card66 p ,.card19 p {
    padding: 0 10px 10px;
    font-size: 14px;
    color: #555;
}

/* استعلام الوسائط لعرض عمودي على الأجهزة المحمولة */
@media (max-width: 768px) {
    .card19-box {
        display: flex;
        flex-wrap: nowrap; /* منع التفاف العناصر */
        overflow-x: auto; /* إضافة التمرير الأفقي */
        justify-content:flex-start;
        background-color: #f0f0f0;
        margin: 0;
        padding: 20px;
        direction: rtl;
    }

    .specialty-card66 ,.card19 {
        flex: 0 0 auto; /* منع العناصر من الانكماش */


        margin-right: 10px;
    }
}
/* خاص بكرت الصور تابع لخصصات  */
.image-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* ليكون فوق العناصر الأخرى */
}

.image-modal img {
    width: 100%;
    height: auto;
    border-radius: 10px 10px 0 0; /* لتنسيق الزوايا */
}

.close-button {
    background: #ff0000;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}
/* نهاية كرت الصور التابع لتخصصات  */


/* تابع الزر المزيد */
.more19 {
    color: blue; /* لون كلمة المزيد */
    font-size: 12px; /* حجم خط صغير */
    text-decoration:none; /* خط تحت كلمة المزيد */
    cursor: pointer; /* تغيير المؤشر إلى يد عند التمرير */
}
/* تابع الزر المزيد */