/* إعدادات عامة */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background: #fff;
    color: #333;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* الشريط العلوي */
.top-bar {
    background: linear-gradient(135deg, #92c692, white);
    color: #fff;
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 100%;
}

.top-bar .container {
    justify-content: center;
    padding: 0 20px;
    max-width: 1540px;
}

/* الشريط العلوي - قائمة التنقل */
.top-nav {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* تم تقليل المسافة من 15px إلى 10px */
    font-size: 14px;
    padding: 5px 0;
    list-style: none;
    flex-wrap: wrap;
    width: 100%;
    max-width: 800px;
}

/* تقليل الحشو (padding) على الروابط لجعلها أقرب */
.top-nav a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px; /* تم تقليل padding من 15px إلى 10px */
    min-width: 70px; /* تقليل الحد الأدنى للعرض */
    text-align: center;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
    white-space: nowrap;
    font-weight: 500;
}

.top-nav a:hover {
    color: #ffcc00;
}

/* تعديل عرض الشريط الأحمر ليتناسب */
.top-nav .highlight {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px; /* تم تقليل العرض من 80px إلى 60px */
    height: 3px;
    background: linear-gradient(45deg, #4f1919, #ff3333);
    border-radius: 8px;
    transition: left 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), width 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

/* ################################################ */
/* الهدر الرئيسي (الشعار + القائمة) */
/* ################################################ */

.main-header {
    background-color: #fff;
    border-bottom: 2px solid #007a33;
    padding: 15px 0;
    width: 100%;
}

.main-header .container {
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.logo {
    height: 80px;
    width: auto;
    max-width: 150px;
}

.main-menu ul {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-menu ul li {
    position: relative;
    display: inline-block;
}

.main-menu ul li a {
    text-decoration: none;
    color: #333;
    font-size: 15px;
    padding: 10px 15px;
    display: inline-block;
    transition: color 0.3s ease, border-bottom 0.3s ease;
}

.main-menu ul li a:hover {
    color: #007a33;
    border-bottom: 2px solid #007a33;
}

/* القوائم الفرعية */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 10px 0;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10;
    border-radius: 4px;
}

.submenu li a {
    display: block;
    padding: 10px 20px;
    color: #333;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.submenu li a:hover {
    background-color: #f8f8f8;
    color: #007a33;
}

.main-menu ul li:hover .submenu {
    opacity: 1;
    visibility: visible;
}
/* ########################################################################################### */
/* banner */

.banner-line {
    width: 100%;
    max-width: 100%;
    height: 1.2px;
    display: flex;
    flex-wrap: wrap;
    margin-top: auto; 
    top: 160px;
    background-color: green;
    color: green;
    justify-content: center;
}
.banner-line p {
    font-size: 18px;
    display: flex;
    flex-wrap: wrap;
    margin-top: auto; 
    top: 160px;
}
.advertising {
    width: 100%;
    max-width: 100%;
    padding: 4px 20px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 4px; 
    background-color: #cee6d9;
}
.advertising marquee {
    font-size: 16px;
    color: #333;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px; 
    width: 100%;
    font: 1em sans-serif;
}
.advertising marquee span {
    display: inline-block;
    padding: 0 20px;
    animation: marquee 15s linear infinite;
}
@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
.banner-background {
    width: 100%;
    height: 300px;
    max-width: 100%;
    padding: 4px 20px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 4px;
    position: relative;
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: slider 10s infinite linear;
}

.slide-1 {
    background-image: url('image/IMG-20210930-WA0023.jpg');
    animation-delay: 0s;
    background-size: 100% 100%;
}

.slide-2 {
    background-image: url('image/camp.jpg');
    animation-delay: 2.5s;
    background-size: 100% 100%;
}

.slide-3 {
    background-image: url('image/bg-lib3.jpg');
    animation-delay: 5s;
    background-size: 100% 100%;
}

.slide-4 {
    background-image: url('image/slide-home7.jpg');
    animation-delay: 7.5s;
    background-size: 100% 100%;
}

@keyframes slider {
    0% { opacity: 0; }
    10% { opacity: 1; }
    30% { opacity: 1; }
    40% { opacity: 0; }
    100% { opacity: 0; }
}

/* ################################################################################# */

.splitview {
    background-color: rgb(44, 44, 44);
    padding: 30px 20px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 345px; /* تم تقليل الهامش العلوي على الجوال */
    min-height: 300px; /* تم تغيير height إلى min-height */
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}
/* العناوين */
.Historical-Background h1,
.Historical-Background h2 {
    width: 100%;
    max-width: 500px;
    font-size: 1.0rem;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
    font-family: Cambria, Cochin, Georgia, 'Times New Roman', serif;
    line-height: 0.1;
}

/* النصوص */
.Historical-Background p {
    width: 100%;
    max-width: 600px;
    font-size: 1.0rem;
    color: rgb(136, 188, 152);
    text-align: justify;
    margin: 15px auto;
    font-family: Cambria, Cochin, Georgia, 'Times New Roman', serif;
    line-height: 1.0;
    padding: 0 15px;
    box-sizing: border-box;
}

/* الخط الأحمر */
.Historical-Background h6{
    width: 100%;
    max-width: 300px;
    height: 2px;
    background-color: rgb(117, 234, 162);
    margin: 0px auto;
}

/* الشعار */
.Historical-Background img {
    box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.15);
    width: 60px;
    height: 70px;
    border-radius: 15px;
    display: block;
    margin: 10px auto; /* تم توسيط الصورة بدون استخدام position: absolute */
}

/* العناوين التفصيلية */

.Historical-Background h3,
.Historical-Background h4,
.Historical-Background h5 {
    width: 100%;
    max-width: 500px;
    font-size: 0.95rem;
    color: #fff;
    text-align: center;
    margin: 10px auto;
    font-family: Cambria, Cochin, Georgia, 'Times New Roman', serif;
    line-height: 0.1;
}
.clock-container {
    width: 100%;
    max-width: 180px; /* حجم مناسب للجوال والشاشة الكبيرة */
    height: auto;
    margin: 10px 0 0 2px;
    text-align: left;
}

#canvas {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; /* يحافظ على النسبة 1:1 */
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgb(44, 44, 44);
    display: block;
    
}

/* على الشاشات الكبيرة */
@media (min-width: 768px) {
    .clock-container {
        width: 200px;
        margin: 10px 0 0 60px;
    
    }
}
/* تحسين للشاشات الكبيرة */
@media (min-width: 768px) {
    .splitview {
        padding: 40px;
        gap: 30px;
        margin-top: 345px;
    }
    .Historical-Background h1,
    .Historical-Background h2 {
        text-align: center;
        margin: 0 auto;
    }
    .Historical-Background h3,
    .Historical-Background h4,
    .Historical-Background h5 {
        text-align: left;
        margin: 10px 0 10px 130px;
    }

    .Historical-Background p {
        margin: 15px 0;
        text-align: justify;
    }
    .Historical-Background h6 {
        margin: 0 0 10px 110px;
        max-width: 400px;
    }

    .Historical-Background img {
        margin: 10px 0 0 40px;
        float: left;
    }
}
/* العناوين */
.Coordinates h2 {
    width: 100%;
    max-width: 500px;
    font-size: 1.0rem;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
    font-family: Cambria, Cochin, Georgia, 'Times New Roman', serif;
    line-height: 0.1;
}

/* الخط الأحمر */
.Coordinates h6{
    width: 100%;
    max-width: 300px;
    height: 2px;
    background-color: rgb(117, 234, 162);
    margin: 0px auto;
}

/* الشعار */
.Coordinates img {
    box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.15);
    width: 350px;
    height: 120px;
    border-radius: 15px;
    display: block;
    margin: 10px auto; /* تم توسيط الصورة بدون استخدام position: absolute */
}

/* العناوين التفصيلية */

.Coordinates h3,
.Coordinates h4,
.Coordinates h5 {
    width: 100%;
    max-width: 500px;
    font-size: 0.95rem;
    color: #fff;
    text-align: center;
    margin: 10px auto;
    font-family: Cambria, Cochin, Georgia, 'Times New Roman', serif;
    line-height: 0.1;
}

/* تحسين للشاشات الكبيرة */
@media (min-width: 768px) {
    .Coordinates h2 {
        text-align: center;
        margin: 170px 0 0 15px;
    }
    .Coordinates h3,
    .Coordinates h4,
    .Coordinates h5 {
        text-align: left;
        margin: 10px 0 0 20px;
    }
    .Coordinates h6 {
        margin: 0 0 10px 25px;
        max-width: 350px;
    }
    .Coordinates img {
        margin: 30px 0 0 20px;
        float: left;
    }
}
/* ################################################ */
/* إعدادات الصفحة */
.card-group {
    width: 100%;
    font-family: Arial, sans-serif;
    color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    padding: 20px 15px; /* تم تقليل البادينج من 60px إلى 20px */
    box-sizing: border-box;
    animation: gradient 5s ease infinite;
    background: linear-gradient(rgb(146, 198, 146),white);
    margin: 3px auto;
    /* جعل الارتفاع يتناسب مع المحتوى */
    min-height: auto;
    /* إزالة المساحة الزائدة من الأعلى والأسفل */
    overflow: hidden;
}


/* تأثير دخول البطاقات من الأسفل */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    position: relative;
    width: 100%;
    max-width: 220px;
    height: 260px;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
    margin: 15px; /* تم تقليل الهامش قليلًا لتتناسب */
    background: white;
    /* تأثير التحرك عند التحويم */
    transform: translateZ(0);
    will-change: transform;
}

/* تأثير الحركة عند تمرير الماوس */
.card:hover {
    transform: translateY(-15px) scale(1.03);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
}
/* الطبقة الشفافة */
.card .layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* معلومات البطاقة */
.card .info {
    position: absolute;
    top: 20px;
    left: 15px;
    right: 15px;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* العناوين (في الأعلى ومركز) */
.card h1 {
    font-size: 20px;
    color: rgb(57, 193, 33);
    text-align: center;
    margin: 0 0 10px;
    font-weight: bold;
}

/* الفقرات */
.card p {
    font-size: 13px;
    color: #0b0211;
    text-align: justify;
    line-height: 1.5;
    margin: 0 0 15px;
}

/* الزر */
.card button {
    padding: 8px 50px;
    background-color: #a8edce;
    color: black;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: block;
    margin: 0 auto;
    font-size: 12px;
}

.card button:hover {
    background-color: #e03e00;
}

/* التأثير عند التحويم */
.card:hover .layer {
    opacity: 0.9;
}

.card:hover .info {
    opacity: 1;
}

/* تحسين للجوال */
@media (max-width: 768px) {
    .card {
        max-width: 90%;
        margin: 15px 10px; /* تباعد مناسب */
    }
    .card-group {
        padding: 15px; /* تقليل المساحة على الجوال */
    }
}
/* ################################################ */
@import url('https://fonts.googleapis.com/css?family=Montserrat');

* {
    box-sizing: border-box;
}

/* حاوية رسالة نائب المدير */
.testimonial-container {
    background-image: url('image/Vice4.png');
    color: #49494c;
    border-radius: 15px;
    padding: 30px 20px;
    max-width: 820px;
    margin: 3px auto;
    position: relative;
    font-family: 'Montserrat', sans-serif;
    overflow: hidden;
    padding-bottom: 5px; /* تم تقليل الهامش السفلي للحاوية */
}

/* العنوان */
.Vice-Message {
    color: #49494c;
    font-size: 16px;
    text-align: center;
    margin: 0 0 20px;
    font-weight: bold;
}

/* أيقونات الاقتباس */
.fa-quote {
    color: rgba(255, 255, 255, 0.3);
    font-size: 28px;
    position: absolute;
    top: 40px;
}

.fa-quote-right {
    left: 20px;
}

.fa-quote-left {
    right: 20px;
}

/* النص القصير */
.testimonial {
    line-height: 1.8;
    text-align: justify;
    font-size: 14px;
    margin: 15px 0;
}

/* زر "اقرأ المزيد" */
.read-more-btn {
    background-color: #55932c;
    color: white;
    border: none;
    padding: 5px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    margin: 10px 0;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    width: fit-content;
}

.read-more-btn:hover {
    background-color: #457a25;
}

/* معلومات الشخص */
.user {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0 5px; /* تم تقليل الهامش السفلي */
    font-size: 16px;
}

.user .user-image {
    border-radius: 50%;
    height: 80px;
    width: 80px;
    object-fit: cover;
    border: 3px solid #49494c;
        /* إزالة الهوامش الزائدة */
    margin-top: -15px; /* رفع الصورة قليلاً للأعلى */
}

.user .user-details {
    margin-left: 15px;
    text-align: center;
}

.user .username {
    margin: 0;
    font-weight: bold;
    font-size: 14px;
    color: #49494c;
    font-family: 'Montserrat', sans-serif;
}

.user .role {
    margin: 5px 0 0;
    font-size: 12px;
    color: #49494c;
    font-family: 'Montserrat', sans-serif;
}

/* تحسين للجوال */
@media (max-width: 768px) {
    .testimonial-container {
        padding: 20px;
    }

    .Vice-Message {
        font-size: 16px;
    }

    .testimonial {
        font-size: 12px;
    }
}
/* ############  college    ####################### */
/* قسم الكليات */
.colleges-section {
    width: 100%;
    padding: 40px 15px;
    background: linear-gradient(white, rgb(146, 198, 146));
    color: #fff;
    box-sizing: border-box;
    position: relative;
}
/* عنوان القسم */
.categories__title {
    color: #49494c;
    font-size: 16px;
    text-align: center;
    margin: 0 0 20px;
    font-weight: bold;
}
/* مربع الكاروسيل */
.carousel-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* زر التحكم */
.carousel-btn {
    background-color: #55932c;
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 10;
    transition: background-color 0.3s ease;
}

.carousel-btn:hover {
    background-color: #457a25;
}

.prev-btn {
    margin-left: 10px;
}

.next-btn {
    margin-right: 10px;
}

/* كاروسيل الكليات */
.carousel {
    overflow: hidden;
    width: 100%;
    max-width: 800px;
}

.carousel__container {
    display: flex;
    gap: 15px;
    padding: 10px 0;
    scroll-behavior: smooth;
    transition: transform 0.5s ease;
}

/* بطاقة كلية */
.carousel-item {
    min-width: 120px;
    text-align: center;
    text-decoration: none;
    display: block;
}

/* صورة الكلية */
.carousel-item__img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* اسم الكلية */
.college-name {
    color: #333;
    font-size: 14px;
    margin-top: 8px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 5px;
}

/* النقاط (Indicators) */
.indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
}

.indicator {
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.indicator.active {
    background-color: #55932c;
}

/* تحسين للجوال */
@media (max-width: 768px) {
    .carousel-btn {
        width: 35px;
        height: 35px;
    }

    .carousel-item {
        min-width: 100px;
    }

    .carousel-item__img {
        height: 100px;
    }

    .college-name {
        font-size: 13px;
    }
}
/* ####################  Deanship        #################### */
/* تضمين الخطوط والأيقونات */
@import url('https://fonts.googleapis.com/css?family=Raleway:400,800');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');

* {
    box-sizing: border-box;
}

/* قسم العمادات */
.University-Deanships {
    width: 100%;
    max-width: 100%;
    background: linear-gradient(to bottom, rgb(146, 198, 146), white);
    color: #333;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    padding: 0 20px;
    gap: 30px;
    margin: 3px auto;
    padding-bottom: 2px; /* تم تقليل الهامش السفلي للحاوية */
}

/* عنوان القسم */
.Deanship_title {
    width: 100%;
    text-align: center;
    color: rgb(77, 55, 102);
    font-size: 18px;
    margin-bottom: 30px;
    font-weight: bold;
    font-family: 'Raleway', Arial, sans-serif;
    margin: 5px 0 -15px 0; /* تقليل الهامش العلوي */
}

/* روابط البطاقات */
.deanship-link {
    text-decoration: none;
    flex: 1 1 300px;
    max-width: 360px;
}

/* بطاقة العمادة */
figure.snip1157 {
    font-family: 'Raleway', Arial, sans-serif;
    position: relative;
    overflow: hidden;
    margin: 0;
    min-width: 220px;
    max-width: 100%;
    width: 100%;
    color: #333;
    text-align: left;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    padding-bottom: 15px;
}

figure.snip1157:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* كتلة النص */
figure.snip1157 blockquote {
    display: block;
    border-radius: 8px;
    background-color: #fafafa;
    padding: 25px 50px 30px 50px;
    font-size: 0.8em;
    font-weight: 500;
    margin: 0 0 20px;
    line-height: 1.6em;
    font-style: italic;
    position: relative;
    text-align: justify;
}

/* علامة التنصيص العلوية */
figure.snip1157 blockquote:before {
    font-family: 'FontAwesome';
    content: "\f10d";
    position: absolute;
    top: 25px;
    left: 20px;
    font-size: 15px;
    opacity: 0.3;
    font-style: normal;
}

/* علامة التنصيص السفلية (تم إصلاحها وجعلها ظاهرة) */
figure.snip1157 blockquote:after {
    font-family: 'FontAwesome';
    content: "\f10e";
    position: absolute;
    right: 20px;
    bottom: 10px;
    font-size: 15px;
    opacity: 0.3;
    font-style: normal;
}

/* السهم */
figure.snip1157 .arrow {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #fafafa;
    margin: 0;
    position: absolute;
}

/* حاوية الصورة والنص - تم توسيطها */
figure.snip1157 .author {
    text-align: center;
    margin: 20px 0 10px;
    padding: 0 15px;
}

/* اسم العمادة (تم رفعه فوق الصورة) */
figure.snip1157 .author h5 {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: bold;
    color: rgb(57, 57, 57);
    text-transform: none;
    opacity: 0.9;
}

/* شعار العمادة */
figure.snip1157 img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 10px;
    border: 4px solid #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* زر "اعرف أكثر" */
.more-btn {
    display: block;
    width: fit-content;
    margin: 10px auto 0;
    padding: 8px 20px;
    background-color: #55932c;
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.more-btn:hover {
    background-color: #457a25;
}

/* تحسين للجوال */
@media (max-width: 768px) {
    .University-Deanships {
        padding: 40px 15px;
    }

    .Deanship_title {
        font-size: 24px;
    }

    figure.snip1157 blockquote {
        font-size: 0.75em;
        padding: 20px 30px 25px;
    }

    figure.snip1157 .author h5 {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .Deanship_title {
        font-size: 22px;
    }

    figure.snip1157 blockquote {
        line-height: 1.5;
    }
}
/* ##################  center   ################## */
/* تصفية عامة */

/* الحاوية الرئيسية */
.center-container {
    width: 100%;
    max-width: 100%;
    background: linear-gradient(whitesmoke, rgb(146, 198, 146));
    color: #333;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    margin: 10px 0 0 0; /* تقليل الهامش العلوي */
    padding: 5px 0;
    padding-bottom: 60px; /* تم تقليل الهامش السفلي للحاوية */
    
}
.center-container h8 {
    width: 100%;
    text-align: center;
    color: rgb(77, 55, 102);
    font-size: 18px;
    margin-bottom: 30px;
    font-weight: bold;
    font-family: 'Raleway', Arial, sans-serif;
    padding: 0 20px;
    margin: 5px 0 -10px 0; /* تقليل الهامش العلوي */
}

/* الشبكة السداسية */
.center-hex {
    --s: 130px; /* حجم الصورة */
    --g: 10px;  /* المسافة */
    display: grid;
    margin: calc(var(--s) + var(--g));
    position: relative;
    justify-content: center;
    
}

/* الصور السداسية */
.center-hex > img {
    grid-area: 1/1;
    width: var(--s);
    aspect-ratio: 0.866;
    object-fit: cover;
    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0);
    transform: translate(var(--_x, 0), var(--_y, 0)) scale(var(--_t, 1));
    cursor: pointer;
    filter: grayscale(80%);
    transition: .3s ease;
    position: relative;
}

.center-hex > img:hover {
    filter: grayscale(0);
    z-index: 1;
    --_t: 1.2;
}

/* تحديد مواقع الصور */
.center-hex > img:nth-child(1) { --_x: calc(-100% - var(--g)); }
.center-hex > img:nth-child(7) { --_x: calc(100% + var(--g)); }
.center-hex > img:nth-child(3),
.center-hex > img:nth-child(5) { --_y: calc(-75% - .87 * var(--g)); }
.center-hex > img:nth-child(4),
.center-hex > img:nth-child(6) { --_y: calc(75% + .87 * var(--g)); }
.center-hex > img:nth-child(3),
.center-hex > img:nth-child(4) { --_x: calc(-50% - .5 * var(--g)); }
.center-hex > img:nth-child(5), 
.center-hex > img:nth-child(6) { --_x: calc(50% + .5 * var(--g)); }

/* النصوص (الأسماء) */
.center-text h1,
.center-text h2,
.center-text h3,
.center-text h4,
.center-text h5,
.center-text h6,
.center-text h7 {
    padding: 10px 15px;
    background-color: white;
    border-radius: 8px;
    display: inline-flex;
    flex-wrap: wrap;
    position: absolute;
    font-size: 12px;
    color: #333;
    white-space: nowrap;
    z-index: 1;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 30px 45px rgba(0,0,0,0.1);
}

.center-text h7 {
    background-color: white;
    font-size: 12px;
    color: #333;
    font-weight: bold;
}

/* تعديل المواقع لجعلها منسقة على الجوال */
.center-text h1 { margin: 80px 0 0 -70px; }
.center-text h2 { margin: 200px 0 0 5px; }
.center-text h3 { margin: 330px 0 0 -60px; }
.center-text h4 { margin: 80px 0 0 -620px; }
.center-text h5 { margin: 200px 0 0 -590px; }
.center-text h6 { margin: 330px 0 0 -570px; }
.center-text h7 { margin: 430px 0 0 -310px; }


/* تحسين للجوال */
@media (max-width: 768px) {
    .center-container {
        padding: 20px;
    }
    .center-hex {
        --s: 90px;
        --g: 6px;
    }
    .center-text h1,
    .center-text h2,
    .center-text h3,
    .center-text h4,
    .center-text h5,
    .center-text h6,
    .center-text h7 {
        font-size: 11px;
        padding: 8px 10px;
    }
    /* تعديل المواقع للجوال */
    .center-text h1 { margin: 60px 0 0 60px; }
    .center-text h2 { margin: 150px 0 0 80px; }
    .center-text h3 { margin: 250px 0 0 40px; }
    .center-text h4 { margin: 60px 0 0 -400px; }
    .center-text h5 { margin: 150px 0 0 -400px; }
    .center-text h6 { margin: 250px 0 0 -400px; }
    .center-text h7 { margin: 320px 0 0 -200px; }
}

@media (max-width: 480px) {
    .center-container {
        padding: 10px;
    }
    .center-hex {
        --s: 70px;
        --g: 4px;
    }
    .center-text h1,
    .center-text h2,
    .center-text h3,
    .center-text h4,
    .center-text h5,
    .center-text h6,
    .center-text h7 {
        font-size: 10px;
        padding: 6px 8px;
    }
    /* تعديل المواقع للجوال الصغير */
    .center-text h1 { margin: 40px 0 0 -40px; }
    .center-text h2 { margin: 100px 0 0 -10px; }
    .center-text h3 { margin: 165px 0 0 -40px; }
    .center-text h4 { margin: 40px 0 0 -400px; }
    .center-text h5 { margin: 100px 0 0 -345px; }
    .center-text h6 { margin: 165px 0 0 -350px; }
    .center-text h7 { margin: 220px 0 0 -200px; }
}
/* ################# Acadimic Program################### */
/* تصفية عامة */

/* الحاوية الرئيسية */
.Acadimic-program {
    width: 100%;
    max-width: 100%;
    background: rgb(226, 232, 228);
    color: #333;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    padding: 20px 20px 0px; /* تقليل الهامش السفلي للحاوية */
    margin: 3px auto;
    padding-bottom: 60px; /* تم تقليل الهامش السفلي للحاوية */
}

/* عنوان القسم - في المنتصف وفي الأعلى */
.Acadimic-title {
    width: 100%;
    text-align: center;
    margin: 0 0 5px; /* مسافة مناسبة تحت العنوان */
    padding: 0 10px;
}

.Acadimic-title h1 {
    color: rgb(77, 55, 102);
    font-size: 24px;
    font-weight: bold;
    font-family: 'Raleway', Arial, sans-serif;
    display: inline-block;
    background: linear-gradient(90deg, #EA2027, #F6FF62, #44bd32, #18dcff, #3742fa, #EA2027);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding: 0 20px;
    white-space: nowrap;
}

/* تنسيق البطاقات */
.mdr, .mdr1, .mdr2, .mdr3, .mdr4, .mdr5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 15px;
    width: 160px;
    height: 180px;
    background: white;
    border: 4px solid transparent;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.3s ease;
}

/* تأثير التدوير للإطار الملون */
.mdr, .mdr1, .mdr2, .mdr3, .mdr4, .mdr5 {
    background: linear-gradient(white, white) padding-box, 
                linear-gradient(var(--angle), #EA2027, #F6FF62, #44bd32, #18dcff, #3742fa, #EA2027) border-box;
    animation: 3s rotate linear infinite;
    border: 4px solid transparent;
}

@keyframes rotate {
    to { --angle: 360deg; }
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* عنوان البرنامج داخل البطاقة */
.mdr h1, .mdr1 h1, .mdr2 h1, .mdr3 h1, .mdr4 h1, .mdr5 h1 {
    font-size: 13px;
    color: black;
    margin: 5px 0 10px;
    text-align: center;
    width: 100%;
    font-weight: bold;
}

/* الصورة */
.mdr img, .mdr1 img, .mdr2 img, .mdr3 img, .mdr4 img, .mdr5 img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 12px;
    margin: 5px 0;
    filter: drop-shadow(1px 1px 10px white);
}

/* زر الاستكشاف */
.mdr button, .mdr1 button, .mdr2 button, .mdr3 button, .mdr4 button, .mdr5 button {
    padding: 8px 15px;
    background-color: white;
    color: black;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 12px;
    margin-top: 5px;
}

.mdr button:hover,
.mdr1 button:hover,
.mdr2 button:hover,
.mdr3 button:hover,
.mdr4 button:hover,
.mdr5 button:hover {
    background-color: #f0f0f0;
}

/* تحسين للجوال */
@media (max-width: 768px) {
    .Acadimic-program {
        padding: 15px 10px 30px;
        gap: 15px;
    }

    .Acadimic-title h1 {
        font-size: 20px;
    }

    .mdr, .mdr1, .mdr2, .mdr3, .mdr4, .mdr5 {
        width: 140px;
        height: 160px;
    }

    .mdr h1, .mdr1 h1, .mdr2 h1, .mdr3 h1, .mdr4 h1, .mdr5 h1 {
        font-size: 12px;
    }

    .mdr img, .mdr1 img, .mdr2 img, .mdr3 img, .mdr4 img, .mdr5 img {
        width: 90px;
        height: 90px;
    }

    .mdr button, .mdr1 button, .mdr2 button, .mdr3 button, .mdr4 button, .mdr5 button {
        padding: 7px 12px;
        font-size: 11px;
    }
}

/* للجوال الصغير جدًا */
@media (max-width: 480px) {
    .Acadimic-program {
        padding: 10px 5px 20px;
        gap: 10px;
    }

    .Acadimic-title h1 {
        font-size: 18px;
    }

    .mdr, .mdr1, .mdr2, .mdr3, .mdr4, .mdr5 {
        width: 120px;
        height: 140px;
    }

    .mdr h1, .mdr1 h1, .mdr2 h1, .mdr3 h1, .mdr4 h1, .mdr5 h1 {
        font-size: 11px;
    }

    .mdr img, .mdr1 img, .mdr2 img, .mdr3 img, .mdr4 img, .mdr5 img {
        width: 80px;
        height: 80px;
    }

    .mdr button, .mdr1 button, .mdr2 button, .mdr3 button, .mdr4 button, .mdr5 button {
        padding: 6px 10px;
        font-size: 10px;
    }
}
/* ###################### News   ################### */

/* تضمين الخط */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic');

/* الحاوية الرئيسية */
.News {
    width: 100%;
    max-width: 100%;
    min-height: 400px;
    background: linear-gradient(whitesmoke, rgb(146, 198, 146));
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 10px 10px;
    position: relative;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 60px; /* تم تقليل الهامش السفلي للحاوية */
}

/* عناوين الأقسام */
.News-Community,
.News-Community2,
.News-Community3 {
    position: relative;
    width: 380px;
    text-align: center;
}

/* الخط الأخضر تحت العنوان */
.News-Community::after,
.News-Community2::after,
.News-Community3::after {
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background-color: rgb(57, 193, 33);
    margin: -55px 0 10px;
}

.Community-Title h1,
.Community-Title2 h1,
.Community-Title3 h1 {
    font-size: 16px;
    color: white;
    font-family: 'Arial', sans-serif;
    background-color: rgb(57, 193, 33);
    padding: 8px 15px;
    border-radius: 0 0 8px 8px;
    display: inline-block;
    margin: 8px;
}

/* السلايدر */
.slider, .slider2, .slider3 {
    width: 360px;
    height: 300px;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 0px 20px -10px rgba(0, 0, 0, 0.5);
    border-radius: 12px;
}
.slider li, .slider2 li, .slider3 li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: clip .7s ease-in-out, z-index 0s .7s;
    clip: rect(0, 100vw, 100vh, 100vw);
    display: table;
}

li.current {
    z-index: 1;
    clip: rect(0, 100vw, 100vh, 0);
}

li.prev {
    clip: rect(0, 0, 100vh, 0);
}

/* التنقل */
.slider nav, .slider2 nav, .slider3 nav {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
}

.slider nav a, .slider2 nav a, .slider3 nav a {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    margin: 0 8px;
    transition: transform 0.3s;
}

.slider nav a.current_dot,
.slider2 nav a.current_dot,
.slider3 nav a.current_dot {
    transform: scale(1.4);
    background: #55932c;
}

/* تعليقات السلايدرات - أسفل كل المحتوى */
.slider-caption,
.slider2-caption,
.slider3-caption {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    padding: 10px 0;
    font-size: 14px;
    color: #504f4f;
    line-height: 1.9;
    font-weight: bold;
}

.slider-caption a,
.slider2-caption a,
.slider3-caption a {
    text-decoration: none;
    color: inherit;
}

.slider-caption .caption,
.slider2-caption .caption,
.slider3-caption .caption {
    opacity: 0;
    display: none;
    transition: opacity 0.4s ease;
    margin: 5px 0;
}

.slider-caption .caption.current,
.slider2-caption .caption.current,
.slider3-caption .caption.current {
    display: block;
    opacity: 1;
}
/* ################## E-Services ####################### */

/* الحاوية الرئيسية */
.E-services {
    width: 100%;
    max-width: 100%;
    min-height: 120px;
    background-image: url('image/bahri-gate_.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
	padding: 5px 10px; /* تقليل البادينغ: من 40px إلى 15px من الأعلى، و5px من الأسفل */
    position: relative;
    margin-top: 3px; /* تقليل الهامش العلوي */
    padding-bottom: 60px; /* تم تقليل الهامش السفلي للحاوية */
    z-index: 1;
}
/* طبقة شفافة فوق الصورة */
.E-services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7); /* أبيض شفاف (0.7 = درجة الشفافية) */
    /* أو استخدم: rgba(0, 0, 0, 0.5) للون داكن شفاف */
    z-index: -1; /* يجعل الطبقة تحت المحتوى */
    border-radius: 16px;
}

.E-services-title h1 {
    color: rgb(77, 55, 102);
    font-size: 24px;
    text-align: center;
    align-items: flex-start;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
    margin: 10px 0 -20px 0;

}

/* تجميع الصفوف */
.services-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    width: 100%;
    padding: 0 2px;
    box-sizing: border-box;
	
}

/* تصميم البطاقات */
.services,
.services1,
.services2,
.services3,
.services4,
.services5,
.services6,
.services7 {
    width: 200px;
    height: 250px;
    background: #07182e;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* التأثير الدوار */
.services::before,
.services1::before,
.services2::before,
.services3::before,
.services4::before,
.services5::before,
.services6::before,
.services7::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 100px;
    background-image: linear-gradient(90deg, rgb(0, 183, 255), rgb(25, 214, 25));
    animation: animate 5s linear infinite;
    transition: all 0.2s linear;
}

@keyframes animate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* الهيكل الأبيض داخل البطاقة */
.services::after,
.services1::after,
.services2::after,
.services3::after,
.services4::after,
.services5::after,
.services6::after,
.services7::after {
    content: '';
    position: absolute;
    background: white;
    inset: 6px;
    border-radius: 8px;
    z-index: 1;
}

/* المحتوى */
.services .content,
.services1 .content2,
.services2 .content3,
.services3 .content4,
.services4 .content5,
.services5 .content6,
.services6 .content7,
.services7 .content8 {
    padding: 5px;
    z-index: 2;
    text-align: center;
    width: 180px;
}

.services .content h2,
.services1 .content2 h2,
.services2 .content3 h2,
.services3 .content4 h2,
.services4 .content5 h2,
.services5 .content6 h2,
.services6 .content7 h2,
.services7 .content8 h2 {
    color: rgb(57, 193, 33);
    margin: -100px 0 -10px 0;
    font-weight: bold;
}

.services .content h4,
.services1 .content2 h4,
.services2 .content3 h4,
.services3 .content4 h4,
.services4 .content5 h4,
.services5 .content6 h4,
.services6 .content7 h4,
.services7 .content8 h4 {
    color: #0b0211;
    border-bottom: 3px solid rgb(57, 193, 33);
    padding-bottom: 5px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    margin: 0;
}

/* الصور */
.services .content img,
.services1 .content2 img,
.services2 .content3 img,
.services3 .content4 img,
.services4 .content5 img,
.services5 .content6 img,
.services6 .content7 img,
.services7 .content8 img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 12px;
    margin: 20px 0 0 -50px;
    filter: drop-shadow(1px 1px 20px white);
    position: absolute;
    z-index: 2;
}

/* خط الفصل */
.Line-e-services {
    width: 80%;
    max-width: 800px;
    height: 4px;
    background: #000;
    border-radius: 10px;
	 margin: 1px auto 1px; /* تقليل المسافة قبل وبعد الخط */
}

/* تحسين للجوال */
@media (max-width: 768px) {
    .E-services {
        padding: 30px 10px;
    }

    .E-services-title h1 {
        font-size: 20px;
    }

    .services,
    .services1,
    .services2,
    .services3,
    .services4,
    .services5,
    .services6,
    .services7 {
        width: 160px;
        height: 230px;
    }

    .services .content img,
    .services1 .content2 img,
    .services2 .content3 img,
    .services3 .content4 img,
    .services4 .content5 img,
    .services5 .content6 img,
    .services6 .content7 img,
    .services7 .content8 img {
        width: 90px;
        height: 90px;
    }

    .services .content h4,
    .services1 .content2 h4,
    .services2 .content3 h4,
    .services3 .content4 h4,
    .services4 .content5 h4,
    .services5 .content6 h4,
    .services6 .content7 h4,
    .services7 .content8 h4 {
        font-size: 11px;
    }
}

/* للجوال الصغير جدًا */
@media (max-width: 480px) {
    .services-row {
        flex-direction: column;
        align-items: center;
    }

    .services,
    .services1,
    .services2,
    .services3,
    .services4,
    .services5,
    .services6,
    .services7 {
        width: 280px;
        margin: 10px 0;
    }

    .Line-e-services {
        width: 90%;
    }
}
/* #################### statistic ################### */
/* تصفية عامة */

/* الحاوية الرئيسية */
.statistic {
    width: 100%;
    max-width: 100%;
    min-height: 120px;
    background: linear-gradient(whitesmoke, rgb(146, 198, 146));
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px 20px;
    position: relative;
    margin-top: 3px; /* تقليل الهامش العلوي */
    padding-bottom: 10px; /* تم تقليل الهامش السفلي للحاوية */
    display: flex;
    flex-wrap: wrap;
}

/* الهيكل العام */
.statistic .frame {
    width: 1150px;
    max-width: 100%;
    background: rgb(13, 13, 13),whitesmoke;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 10px auto;
}

/* القسم العلوي: النص، الإحصائيات، والرسم البياني */
.top-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    width: 100%;
}

.top-section .stats-text {
    text-align: left;
    width: 100%;
    flex: 1;
}

.top-section .stats-text h1 {
    font-size: 20px;
    color: rgb(77, 55, 102);
    margin: 0;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
}

.top-section .stats-text p {
    font-size: 14px;
    color: black;
    margin: 5px 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: justify;
}

/* الإحصائيات (على اليسار) */
.top-section .info-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    width: 100%;
    margin-top: 60px;
    padding-top: 5px;
    border-top: 5px solid rgb(57, 193, 33);
    border-bottom: 5px solid rgb(57, 193, 33);
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    flex: 1;
}

.top-section .info-item {
    text-align: center;
    flex: 1;
    min-width: 120px;
    padding: 2px;
    border-right: 2px solid rgb(57, 193, 33);
    position: relative;
    
}

.top-section .info-item:last-child {
    border-right: none;
}

.top-section .info-item h1 {
    font-size: 16px;
    color: black;
    margin: 1px 0;
    font-weight: bold;
}

.top-section .info-item h2 {
    font-size: 12px;
    color: black;
    margin: 1px 0;
    font-weight: bold;
}

/* الرسم البياني (على اليمين) */
.top-section .info-item1 {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 10px 0;
    flex: 1;
}

.top-section .info-item1 img {
    width: 100%;
    max-width: 180px;
    height: auto;
    border-radius: 16px;
    display: block;
}

/* القسم الأوسط: الطلاب */
.middle-section,
.bottom-section {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    padding: 5px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.counter-item {
    text-align: center;
    flex: 1;
    min-width: 150px;
    padding: 1px;
    border-right: 2px solid rgb(57, 193, 33);
    position: relative;
}

.counter-item:last-child {
    border-right: none;
}

.counter-item h2 {
    font-size: 30px;
    color: rgb(57, 193, 33);
    margin: 10px 0;
}

.counter-item p {
    font-size: 12px;
    color: black;
    margin: 2px 0;
}

/* القسم السفلي: الهيئة التدريسية */
.bottom-section {
    margin-top: 2px;
}

/* تحسين للجوال */
@media (max-width: 768px) {
    .top-section {
        flex-direction: column;
        align-items: center;
    }

    .top-section .info-stats {
        flex-direction: column;
        align-items: center;
    }

    .top-section .info-item {
        min-width: 100%;
        padding: 15px;
        border-right: none;
        border-bottom: 2px solid rgb(57, 193, 33);
    }

    .top-section .info-item:last-child {
        border-bottom: none;
    }

    .middle-section,
    .bottom-section {
        flex-direction: column;
        align-items: center;
    }

    .counter-item {
        min-width: 100%;
        max-width: 300px;
        padding: 15px;
        border-right: none;
        border-bottom: 2px solid rgb(57, 193, 33);
    }

    .counter-item:last-child {
        border-bottom: none;
    }
}

@media (max-width: 480px) {
    .top-section .info-item h1,
    .counter-item h2 {
        font-size: 24px;
    }

    .top-section .info-item h2,
    .counter-item p {
        font-size: 12px;
    }
}
/* ################# Academic Calendar   #################### */
/* تصفية عامة */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* الحاوية الرئيسية */
.Calendar {
    width: 100%;
    max-width: 100%;
    min-height: 600px;
    background: rgb(226, 232, 228);
    color: black;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px 20px;
    position: relative;
    margin-top: 3px; /* تقليل الهامش العلوي */
}

/* العنوان الرئيسي */
.Calendar-title h1 {
    font-size: 18px;
    color: black;
    text-align: center;
    margin-bottom: 10px;
    font-weight: bold;
    margin: 0 0 5px 0;
}

/* الخط الأخضر تحت العنوان */
.Calendar-partition {
    width: 100%;
    height: 4px;
    background-color: rgb(57, 193, 33);
    margin: 10px auto 20px;
    display: block;
}

/* الحاوية الرئيسية للقائمة والشبكة */
.calendar-container {
    display: flex;
    gap: 30px;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* قائمة الأحداث الجانبية */
.Calendar-Events {
    width: 300px;
    max-width: 100%;
    height: 472px;
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 2px;
    position: relative;
}

/* عنوان القائمة - إعادة الترتيب */
.Calendar-titel {
    position: relative;
    margin-bottom: 2px;
}

/* العنوان الأول */
.Calendar-titel h1 {
    font-size: 14px;
    color: black;
    font-weight: bold;
    margin: 15px 0 0 50px;
    text-align: left;
}

/* العنوان الثاني (باللون الأخضر) */
.Calendar-titel h2 {
    font-size: 14px;
    color: rgb(57, 193, 33);
    font-weight: normal;
    margin: 0 0 0 60px;
    text-align: left;
}

/* خط أخضر تحت "Calendar Plan" */
.Calendar-titel::after {
    content: '';
    display: block;
    width: 40%;
    height: 4px;
    background-color: rgb(57, 193, 33);
    margin: 0 0 -10px 50px;
    text-align: left;
}

/* الصورة على يمين العناوين */
.Calendar-titel img {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    right: 20px;
    border-radius: 8px;
}

/* قائمة الأحداث */
.event-list {
    list-style: none;
    margin: 0;
    padding-left: 40px;
}

.event-list li {
    margin: 2px 0;
    padding: 0;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: green;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: middle;
    display: inline-block;
}

.event-date {
    font-size: 4px;
    color: #363b41;
    margin: 0;
    font-weight: bold;
    display: block;
}

.event-desc {
    font-size: 4px;
    color: #363b41;
    margin: 2px 0 0 27px;
}

/* حاوية قسم الشبكة والإعلان */
.events-section {
    display: flex;
    flex-direction: column;
    width: calc(100% - 300px);
    max-width: 800px;
}

/* شريط الإعلان المتحرك */
.marquee-container {
    background-color: rgb(57, 193, 33);
    color: white;
    padding: 8px 0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
}

.marquee-content {
    white-space: nowrap;
    animation: marquee 20s linear infinite;
    font-size: 14px;
    font-weight: bold;
    color: white;
    padding-left: 100%;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

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

/* توقف عند التحويم (اختياري) */
.marquee-content:hover {
    animation-play-state: paused;
}

/* شبكة الأحداث */
.events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    justify-content: center;
}

.event-card {
    width: 265px;
    height: 200px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 10px;
    position: relative;
    text-align: left;
}

.calendar-icon {
    font-size: 16px;
    margin-right: 8px;
    vertical-align: middle;
}

.event-date {
    font-size: 12px;
    color: black;
    margin: 0 0;
    font-weight: bold;
}

.event-desc {
    font-size: 12px;
    color: black;
    margin: 0 0;
}

/* تحسين للجوال */
@media (max-width: 768px) {
    .calendar-container {
        flex-direction: column;
        align-items: center;
    }

    .Calendar-Events {
        width: 100%;
        max-width: 400px;
    }

    .events-section {
        width: 100%;
        max-width: 400px;
    }

    .marquee-content {
        font-size: 13px;
        padding-left: 100%;
    }

    .events-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .Calendar {
        padding: 20px 10px;
    }

    .Calendar-title h1 {
        font-size: 20px;
    }

    .Calendar-titel h1,
    .Calendar-titel h2 {
        font-size: 16px;
    }

    .event-date,
    .event-desc {
        font-size: 13px;
    }

    .dot {
        width: 8px;
        height: 8px;
    }

    .Calendar-titel img {
        width: 60px;
        height: 60px;
    }
}
/* ################# Partnerships  ######################### */
/* تصفية عامة */

/* الحاوية الرئيسية - بدون خلفية ثابتة على كامل الشاشة */
.partnerships-section {
    width: 100%;
    max-width: 100%;
    padding: 5px 20px 60px;
    color: #333;
    font-family: 'Arial', sans-serif;
    background-image: url('image/ADMISSIONS.jpg');
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 3px;
    min-height: 120px;
    padding-bottom: 140px;
    position: relative;
    z-index: 1;
    padding-bottom: 40px; /* تم تقليل الهامش السفلي للحاوية */
}

/* ✅ خلفية شفافة ثابتة داخل قسم الشراكات فقط */
.partnerships-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7); /* شفافية عالية */
    z-index: -1;
    pointer-events: none;
    
}

/* عنوان القسم */
.partnerships-title h1 {
    width: 100%;
    text-align: center;
    color: rgb(77, 55, 102);
    font-size: 18px;
    margin: 10px 0 0 0;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
}

/* الحاوية المحيطة (الخط الأخضر) */
.partnerships-container-border {
    border: 4px solid rgb(125, 189, 114);
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px;
    background: rgb(219, 233, 221);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;
}

/* الحاوية الرئيسية للسلايدر والنصوص */
.partnerships-slider-and-captions {
    display: flex;
    width: 100%;
    gap: 20px;
    align-items: flex-start;
    padding: 15px;
}

/* السلايدر */
.partnerships-slider-wrapper {
    flex: 1;
    min-width: 300px;
    position: relative;
}

.partnerships-slider {
    list-style: none;
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.partnerships-slider li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.7s ease-out, opacity 0.7s ease-out;
    z-index: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.partnerships-slider li.current {
    transform: translateX(0);
    opacity: 1;
    z-index: 1;
}

/* أزرار التحكم داخل الصورة */
.partnerships-controls {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 60px;
    z-index: 10;
}

.partnerships-controls button {
    padding: 8px 15px;
    background: rgba(255, 255, 255, 0.8);
    color: #333;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    backdrop-filter: blur(5px);
    transition: background 0.3s;
}

.partnerships-controls button:hover {
    background: rgba(255, 255, 255, 1);
}

/* نصوص الأخبار */
.partnerships-captions {
    flex: 1;
    min-width: 300px;
    padding: 20px;
    background: rgb(255, 255, 255);
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: right;
    direction: rtl;
    overflow-y: auto;
    max-height: 500px;
}

.partnerships-captions .caption {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee;
}

.partnerships-captions .caption.current {
    display: block;
    opacity: 1;
}

.partnerships-captions h2 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

.partnerships-captions p {
    font-size: 14px;
    line-height: 1.7;
    color: #555;
}

/* الخط الأخضر أسفل نص الخبر */
.partnerships-divider {
    width: 100%;
    height: 4px;
    background-color: rgb(57, 193, 33);
    margin: 15px 0;
    border-radius: 2px;
}

/* الشعارات الثلاثة */
.partnerships-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin-top: 10px;
}

.partnerships-logos img {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    object-fit: cover;
}

.partnerships-logos .icon {
    width: 50px;
    height: 50px;
    border-radius: 0;
}

/* معلومات الاتصال أسفل نص الخبر */
.partnerships-captions .partnerships-contact-info {
    margin-top: 10px;
    padding: 2px;
    border-top: 1px dashed #ccc;
    font-size: 14px;
    color: #555;
    text-align: left;
    direction: rtl;
}

.partnerships-captions .partnerships-contact-info p {
    margin-bottom: 10px;
    font-style: italic;
}

.partnerships-captions .contact-item {
    margin: 8px 0;
    line-height: 1.6;
}

.partnerships-captions .contact-item a {
    color: rgb(57, 193, 33);
    text-decoration: none;
}

.partnerships-captions .contact-item a:hover {
    text-decoration: underline;
}
/* تحسين للجوال - أقل من 768px */
@media (max-width: 768px) {
    .partnerships-slider-and-captions {
        flex-direction: column;
    }

    .partnerships-slider-wrapper,
    .partnerships-captions {
        width: 100%;
    }

    .partnerships-slider {
        height: 300px;
    }
}

/* تحسين للجوال الصغير - أقل من 480px */
@media (max-width: 480px) {
    .partnerships-slider {
        height: 250px;
    }

    .partnerships-controls button {
        padding: 6px 10px;
        font-size: 12px;
    }

    .partnerships-logos {
        gap: 30px;
    }

    .partnerships-logos img {
        width: 60px;
        height: 60px;
    }

    .partnerships-title h1 {
        font-size: 16px;
    }
}
/* ################# membership   #################### */
/* تصفية عامة */

/* الحاوية الرئيسية للقسم */
.university-memberships {
    width: 100%;
    max-width: 100%;
    padding: 5px 20px;
    background: #f8f9fa;
    color: #333;
    font-family: 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* العنوان الرئيسي */
.university-memberships .section-title h1 {
    width: 100%;
    text-align: center;
    color: rgb(77, 55, 102);
    font-size: 18px;
    margin: 10px 0 0 0;
    font-weight: bold;
    font-family: 'Raleway', Arial, sans-serif;
    margin-bottom: 20px;
}

/* حاوية المعرض الدوار */
.carousel-container {
    width: 75%;
    overflow: hidden;
    padding: 10px 0;
    position: relative;
}

/* شريط الشعارات المتحرك */
.carousel-track {
    display: flex;
    gap: 50px;
    animation: slide 20s linear infinite;
    min-width: max-content;
}

/* عنصر الشعار */
.logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 160px;
}

.logo-item img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid #e0e0e0;
    transition: transform 0.3s, box-shadow 0.3s;
}

.logo-item img:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.logo-item a {
    font-size: 14px;
    color: #333;
    text-decoration: none;
    line-height: 1.5;
    font-weight: bold;
    transition: color 0.3s;
}

.logo-item a:hover {
    color: rgb(57, 193, 33);
}

/* ✅ الحركة التلقائية - تم تعديلها لتصبح سلسة بدون قفزات */
@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* تحسين للجوال */
@media (max-width: 768px) {
    .university-memberships {
        padding: 60px 15px;
    }

    .university-memberships .section-title h1 {
        font-size: 24px;
        margin-bottom: 50px;
    }

    .carousel-track {
        gap: 40px;
    }

    .logo-item {
        width: 140px;
    }

    .logo-item img {
        width: 90px;
        height: 90px;
    }

    .logo-item a {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .university-memberships .section-title h1 {
        font-size: 22px;
        margin-bottom: 40px;
    }

    .logo-item {
        width: 120px;
    }

    .logo-item img {
        width: 80px;
        height: 80px;
    }

    .logo-item a {
        font-size: 12px;
    }

    .carousel-track {
        gap: 30px;
    }
}
/* ################################################ */
/* التذييل (Footer) */
/* ################################################ */

.footer-main {
    background: linear-gradient(135deg, #92c692, white);
    color: #fff;
    padding: 30px 20px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 2px; 
    gap: 30px;
    justify-content: center;
    align-items: flex-start;
}

.footer-logo .logo-img {
    width: 110px;
    height: 130px;
    object-fit: contain;
    margin-bottom: 10px;
}

.Contact-Us,
.footer-info,
.Follow-Us {
    min-width: 240px;
    text-align: center;
    max-width: 300px;
}

.Contact-Us h1,
.footer-info h1,
.Follow-Us h1 {
    font-size: 1.6rem;
    margin-bottom: 12px;
    color: #fff;
    font-weight: bold;
}

.Contact-Us p,
.footer-info p {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin: 0;
}

.Social-Media .icons {
    display: flex;
    gap: 18px;
    justify-content: center;
    margin-top: 15px;
    flex-wrap: wrap;
}

.icons a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #fff;
    transition: transform 0.3s ease;
}

.icons a .layer {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15), inset 0 -4px 0 rgba(255, 255, 255, 0.2);
    background: #1c1c1e;
    transition: transform 0.3s ease;
}

.icons a .layer span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #fff;
    border-radius: 8px;
    opacity: 0;
    transition: all 0.3s ease;
}

.icons a:hover .layer {
    transform: rotate(-33deg) skew(20deg);
}

.icons a:hover .layer span:nth-child(1) { opacity: 0.2; }
.icons a:hover .layer span:nth-child(2) { opacity: 0.4; transform: translate(5px, -5px); }
.icons a:hover .layer span:nth-child(3) { opacity: 0.6; transform: translate(10px, -10px); }
.icons a:hover .layer span:nth-child(4) { opacity: 0.8; transform: translate(15px, -15px); }

.icons a .icon {
    position: absolute;
    font-size: 32px;
    line-height: 44px;
    z-index: 1;
}

.icons .text {
    margin-top: 10px;
    font-size: 14px;
    color: #fff;
    font-weight: 500;
}

/* ألوان الشبكات */
.icons a.facebook .layer { background: #3b5998; }
.icons a.twitter .layer { background: #1DA1F2; }
.icons a.instagram .layer { background: #E1306C; }
.icons a.linkedin .layer { background: #0077B5; }

/* حقوق الملكية */
.footer-Rights {
    background-color: #333;
    color: #fff;
    padding: 15px 0;
    text-align: center;
    margin-top: auto;
    font-size: 14px;
}

.footer-Rights p {
    margin: 0;
    padding: 0 15px;
    font-size: 12px;
    letter-spacing: 0.3px;
}

/* ############################################ */
/* Media Queries - دعم كامل للأجهزة */
/* ############################################ */

/* أجهزة الجوال الصغيرة (320px - 480px) */
@media (max-width: 480px) {
    .container {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .top-nav {
        gap: 8px;
        font-size: 12px;
    }

    .top-nav a {
        padding: 5px 8px;
        min-width: 60px;
    }

    .logo {
        height: 70px;
    }

    .main-menu ul {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .main-menu ul li {
        width: 100%;
        text-align: center;
    }

    .submenu {
        left: 50%;
        transform: translateX(-50%);
        min-width: 220px;
    }

    .footer-main {
        padding: 30px 15px;
        gap: 25px;
    }

    .Contact-Us h1,
    .footer-info h1,
    .Follow-Us h1 {
        font-size: 1.4rem;
    }

    .icons a .layer {
        width: 40px;
        height: 40px;
    }

    .icons a .icon {
        font-size: 28px;
        line-height: 40px;
    }

    .footer-Rights p {
        font-size: 11px;
    }
}

/* أجهزة الجوال المتوسطة واللوحية (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .top-nav {
        gap: 12px;
        font-size: 13px;
    }

    .top-nav a {
        padding: 5px 10px;
    }

    .logo {
        height: 75px;
    }

    .main-menu ul {
        gap: 15px;
    }

    .submenu {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* شاشات كبيرة (1025px فما فوق) */
@media (min-width: 1025px) {
    .top-nav a {
        min-width: 100px;
    }

    .main-menu ul {
        gap: 25px;
    }

    .main-menu ul li a {
        font-size: 16px;
        padding: 12px 18px;
    }

    .footer-main {
        gap: 40px;
    }
}