/* ═══════════════════════════════════════════════════════════
   التصميم الفاخر (Premium) مع كافة الإصلاحات السابقة
   ═══════════════════════════════════════════════════════════ */

/* 1) الخطوط والخلفية */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');
body { font-family: 'Tajawal', sans-serif !important; background-color: #f4f7f6 !important; }

/* 2) بانر اسم الكلية (الأزرق الملكي) */
.panel-dark-title {
    background: linear-gradient(135deg, #0a192f 0%, #173a6b 100%) !important;
    padding: 50px 0 !important;
    border-bottom: 5px solid #c9a227 !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
    margin-bottom: 30px;
}
.panel-dark-title span a { color: #ffffff !important; font-size: 2rem !important; font-weight: 900 !important; text-shadow: 0 4px 10px rgba(0,0,0,0.5); }
.panel-dark-title img { border-radius: 50%; background: #fff; padding: 8px; box-shadow: 0 8px 20px rgba(0,0,0,0.4); float: right; margin-left: 20px; width: 90px !important; height: 90px !important; }

/* 3) العناوين (إزالة الخطوط المزعجة نهائياً) */
.gn-title p.h1, .gn-title p.h2, .gn-title p.h3 {
    font-size: 2.2rem !important; font-weight: 900 !important; color: #0a192f !important;
    text-align: center; margin-bottom: 40px !important; position: relative;
}
.gn-title p::after, .gn-title p::before, .gn-title::after, .gn-title::before,
.statistic .gn-title p::after, .statistic .gn-title p::before, hr {
    display: none !important; content: none !important; border: none !important;
}
.gn-title p { text-align: center; color: #64748b !important; font-size: 1.1rem; }

/* 4) إزالة إطار الأخبار وتصميمها كبطاقات طائرة */
.owl-carousel.two .item, .panel-light .item, .panel-dark .item {
    background: transparent !important; border: none !important; box-shadow: none !important;
}
.owl-carousel.two .item img, .panel-light .item img {
    border-radius: 16px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
    border: none !important; width: 100% !important; height: 220px !important; object-fit: cover !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.owl-carousel.two .item:hover img { transform: translateY(-8px) !important; box-shadow: 0 15px 40px rgba(0,0,0,0.2) !important; }

/* 5) بطاقات هيئة التدريس (العمودية الفاخرة) */
.user-card-full .row { flex-direction: column !important; margin: 0 !important; }
.user-card-full .col-sm-4 { width: 100% !important; max-width: 100% !important; padding: 35px 15px !important; background: linear-gradient(135deg, #0b2a4a 0%, #1e4c7a 100%) !important; border-radius: 16px 16px 0 0 !important; }
.user-card-full .col-sm-8 { width: 100% !important; max-width: 100% !important; padding: 25px !important; background: #ffffff !important; border-radius: 0 0 16px 16px !important; }
.user-card-full .user-profile img { width: 120px !important; height: 120px !important; border: 4px solid rgba(255,255,255,0.3) !important; }
.user-card-full { border-radius: 16px !important; box-shadow: 0 5px 20px rgba(0,0,0,0.06) !important; border: none !important; margin: 15px !important; }

/* 6) صفحة العميد (كلمة العميد) */
.dean-word img { border: 6px solid #ffffff; border-radius: 50% !important; box-shadow: 0 15px 40px rgba(10, 25, 47, 0.15) !important; width: 220px !important; height: 220px !important; object-fit: cover; }
.dean-word p.text-justify { background: #ffffff; padding: 40px; border-radius: 20px; border-right: 8px solid #c9a227; font-size: 1.15rem; line-height: 2.2; color: #334155 !important; box-shadow: 0 10px 40px rgba(0,0,0,0.05); }

/* 7) الإحصائيات وصورها الدائرية */
.panel-light.statistic .top { border-radius: 16px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important; border: 1px solid #e2e8f0; overflow: hidden; }
.panel-light.statistic .top-heading { background: #ffffff !important; color: #0b2a4a !important; border-bottom: 2px solid #f1f5f9; }
.panel-light.statistic .top-content img { width: 60px !important; height: 60px !important; border-radius: 50% !important; object-fit: cover; border: 3px solid #f1f5f9; }

/* 8) صفحات الكلية (بطاقات تفاعلية) */
.two_3 .item { background: #ffffff !important; border-radius: 16px !important; padding: 30px 20px !important; box-shadow: 0 5px 20px rgba(0,0,0,0.05) !important; border: 2px solid transparent !important; transition: all 0.4s ease !important; text-align: center !important; }
.two_3 .item h5 { font-weight: 700 !important; color: #0b2a4a !important; }
.two_3 .item::before { content: '\f15c'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 2.5rem; color: #c9a227; display: block; margin-bottom: 15px; }
.two_3 .item:hover { background: linear-gradient(135deg, #0b2a4a, #1e4c7a) !important; border-color: #c9a227 !important; transform: translateY(-8px) !important; }
.two_3 .item:hover h5, .two_3 .item:hover::before { color: #ffffff !important; }

/* 9) خدمات الطالب */
.college-stu-service { background: #fff; border-radius: 16px; padding: 40px 25px; box-shadow: 0 5px 25px rgba(0,0,0,0.05); transition: 0.3s; height: 100%; border-bottom: 4px solid transparent; text-align: center; }
.college-stu-service:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0,0,0,0.1); border-bottom-color: #0b6b3a; }


/* ═══════════════════════════════════════════════════════════
   تصميم الفوتر الفاخر (Premium Footer) للكليات والإدارات
   ═══════════════════════════════════════════════════════════ */

/* 1) الحاوية الرئيسية للتذييل */
footer {
    background: #0a192f !important; /* الأزرق الملكي الداكن */
    color: #a8b2d1 !important; /* لون نص رمادي فاتح مريح */
    padding: 70px 0 20px 0 !important;
    margin-top: 60px !important;
    border-top: 5px solid #c9a227 !important; /* خط ذهبي علوي */
    font-size: 15px;
}

/* 2) العناوين داخل التذييل */
footer h4 {
    color: #c9a227 !important; /* ذهبي */
    font-weight: 800 !important;
    font-size: 1.2rem !important;
    margin-bottom: 25px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 3) النصوص والروابط */
footer p {
    color: #8892b0 !important;
    line-height: 1.8 !important;
}
footer ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
footer ul li {
    margin-bottom: 12px !important;
}
footer ul li a {
    color: #a8b2d1 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    position: relative;
    display: inline-block;
}
footer ul li a:hover {
    color: #c9a227 !important; /* تحول للذهبي */
    transform: translateX(-5px); /* حركة بسيطة لليسار (لأننا في RTL) */
}

/* 4) إخفاء الزخارف القديمة (الخطوط الفاصلة decor) */
.decor5, .decor4 {
    display: none !important;
}

/* 5) الشريط السفلي (حقوق النشر وعداد الزوار) */
.footer-panel {
    background: #020c1b !important; /* أغمق من لون التذييل */
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    padding: 25px 0 !important;
    margin-top: 40px !important;
}
.footer-panel p {
    color: #8892b0 !important;
    font-size: 14px;
    margin: 0;
}
.footer-panel a {
    color: #c9a227 !important; /* الروابط في الشريط السفلي ذهبية */
    text-decoration: none;
}
.footer-panel a:hover {
    color: #ffffff !important;
}

/* 6) تحسين الشارات (عداد الزوار) */
.footer-panel .badge-secondary {
    background-color: #c9a227 !important; /* خلفية الشارة ذهبية */
    color: #0a192f !important; /* نص داكن */
    font-weight: bold;
    border-radius: 6px;
    padding: 5px 10px;
    margin: 0 5px;
}

/* 7) الموبايل */
@media (max-width: 768px) {
    footer { text-align: center; padding: 40px 0 10px 0 !important; }
    footer ul li a:hover { transform: translateY(-3px); } /* تغيير الحركة في الموبايل */
    .footer-panel .float-right { float: none !important; display: block; margin-top: 15px; }
}

/* ═══════════════════════════════════════════════════════════
   إصلاحات خاصة بـ "أمانة الشؤون العلمية" وباقي الإدارات
   ═══════════════════════════════════════════════════════════ */

/* 1) تجاوز الألوان القديمة (الأخضر الفاتح) في بطاقات الهيئة */
.bg-c-lite-green {
    background: linear-gradient(135deg, #0b2a4a 0%, #1e4c7a 100%) !important; /* الأزرق الملكي */
}
.card {
    border-radius: 16px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.06) !important;
    border: none !important;
}

/* 2) ترتيب قسم "للتواصل" والأيقونات بشكل احترافي */
.text-center > .fa-2x, .text-center > .fab {
    display: inline-block;
    margin: 0 20px !important; /* إزالة المسافات   واستخدام هوامش متناسقة */
    color: #0b6b3a;
    transition: transform 0.3s;
}
.text-center > .fa-2x:hover, .text-center > .fab:hover {
    transform: scale(1.2) translateY(-3px);
    color: #c9a227;
}
/* تنسيق النصوص والروابط تحت الأيقونات */
.text-center > a {
    display: inline-block;
    margin: 10px 15px !important;
    color: #4b5563;
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.3s;
}
.text-center > a:hover {
    color: #0b6b3a;
}

/* 3) تنسيق قوائم الخطوات (إستخراج الشهادة) */
.list-group-item {
    border: none !important;
    border-bottom: 1px dashed #e2e8f0 !important;
    padding: 15px 0 !important;
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.8;
    background: transparent !important;
}
.list-group-item:last-child {
    border-bottom: none !important;
}

/* 4) تحسين شكل قسم "كلمة أمين الشؤون العلمية" */
.dean-word p.text-justify {
    background: #ffffff !important;
    padding: 40px !important;
    border-radius: 20px !important;
    border-right: 8px solid #c9a227 !important; /* الخط الذهبي */
    box-shadow: 0 10px 40px rgba(0,0,0,0.05) !important;
    font-size: 1.1rem !important;
    line-height: 2.2 !important;
    color: #334155 !important;
}

/* 5) استجابة الموبايل للأيقونات والمسافات */
@media (max-width: 768px) {
    .text-center > .fa-2x, .text-center > .fab {
        margin: 0 10px !important;
    }
    .text-center > a {
        display: block; /* جعل الروابط تحت بعضها */
        margin: 5px 0 !important;
    }
    .dean-word p.text-justify {
        padding: 20px !important;
        font-size: 1rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   تصميم سكشن "إستخراج الشهادة الجامعية" (فاخر)
   ═══════════════════════════════════════════════════════════ */

/* 1) الحاوية الرئيسية */
.panel_bes {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%) !important;
    padding: 80px 0 !important;
    position: relative;
}

/* 2) العناوين الرئيسية */
.panel_bes .gn-title p.h1 {
    color: #0b2a4a !important;
    font-weight: 900 !important;
    font-size: 2.5rem !important;
    text-align: center;
    margin-bottom: 15px !important;
}
.panel_bes .gn-title p:not(.h1) {
    text-align: center;
    color: #64748b !important;
    font-size: 1.15rem !important;
    margin-bottom: 50px !important;
}

/* 3) العمود الأيسر (المعلومات والأزرار) */
.panel_bes .col-lg-6:first-child h1 {
    color: #0b2a4a !important;
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    margin-bottom: 20px !important;
}
.panel_bes .col-lg-6:first-child h3 {
    color: #0b6b3a !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
}
.panel_bes .col-lg-6:first-child p {
    color: #4b5563 !important;
    line-height: 1.9 !important;
    font-size: 1.05rem !important;
    margin-bottom: 25px !important;
}

/* 4) الأزرار (تأخذ العرض الكامل وتصميم فاخر) */
.panel_bes .btn-outline-success {
    display: block !important;
    width: 100% !important;
    max-width: 450px !important;
    padding: 16px 25px !important;
    margin-bottom: 15px !important;
    border: 2px solid #0b6b3a !important;
    color: #0b6b3a !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    border-radius: 12px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    background: #ffffff !important;
    box-shadow: 0 4px 15px rgba(11, 107, 58, 0.1) !important;
}
.panel_bes .btn-outline-success:hover {
    background: #0b6b3a !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(11, 107, 58, 0.3) !important;
}

/* 5) بطاقة الخطوات (Card) */
.panel_bes .card {
    border: none !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden;
    position: relative;
}
.panel_bes .card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, #c9a227, #0b6b3a) !important;
}
.panel_bes .list-group-flush {
    padding: 30px !important;
    counter-reset: step-counter;
}

/* 6) الخطوات (List Items) */
.panel_bes .list-group-item {
    position: relative;
    counter-increment: step-counter;
    padding: 20px 65px 20px 15px !important;
    margin-bottom: 15px !important;
    border: none !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
    color: #334155 !important;
    font-size: 0.95rem !important;
    line-height: 1.8 !important;
    transition: all 0.3s ease !important;
}
.panel_bes .list-group-item:hover {
    background: #eef9f3 !important;
    transform: translateX(-5px) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
}

/* 7) الأرقام الدائرية للخطوات */
.panel_bes .list-group-item::before {
    content: counter(step-counter) !important;
    position: absolute;
    right: 15px;
    top: 20px;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #0b6b3a, #064d29) !important;
    color: #ffffff !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800 !important;
    font-size: 1rem !important;
    box-shadow: 0 4px 10px rgba(11, 107, 58, 0.3) !important;
}

/* 8) تنسيق الروابط داخل الخطوات */
.panel_bes .list-group-item a {
    color: #0b6b3a;
    font-weight: 600;
    text-decoration: underline;
}

/* 9) الموبايل */
@media (max-width: 768px) {
    .panel_bes { padding: 40px 0 !important; }
    .panel_bes .gn-title p.h1 { font-size: 1.8rem !important; }
    .panel_bes .list-group-flush { padding: 15px !important; }
    .panel_bes .list-group-item {
        padding: 15px 55px 15px 15px !important;
        font-size: 0.9rem !important;
    }
    .panel_bes .list-group-item::before {
        width: 32px;
        height: 32px;
        font-size: 0.85rem !important;
    }
    .panel_bes .btn-outline-success {
        font-size: 0.95rem !important;
        padding: 12px 20px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   تنسيق نص الخطوات الطويل (جعله أنيقاً ومقروءاً)
   ═══════════════════════════════════════════════════════════ */

/* تصغير حجم الخط داخل الخطوات */
.panel_bes .list-group-item {
    font-size: 13.5px !important; /* خط أصغر */
    line-height: 1.9 !important;
    color: #475569 !important;
    text-align: justify; /* محاذاة النص من الجانبين */
}

/* تنسيق الروابط داخل النص (لتكون واضحة) */
.panel_bes .list-group-item a {
    color: #0b6b3a !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    word-break: break-all; /* منع خروج الروابط عن الإطار */
}

/* إبراز بداية كل خطوة (مثل: الخطوة الأولى) */
.panel_bes .list-group-item::first-line {
    font-weight: 800 !important;
    color: #0b2a4a !important;
    font-size: 14.5px !important;
}

/* إضافة مسافة مريحة داخل البطاقة */
.panel_bes .list-group-flush {
    padding: 20px !important;
}

/* تحسين شكل العمود الأيسر (الشرح) */
.panel_bes .col-lg-6:first-child p {
    font-size: 15px !important;
    color: #64748b !important;
    line-height: 1.8 !important;
}

/* الموبايل */
@media (max-width: 768px) {
    .panel_bes .list-group-item {
        font-size: 13px !important;
        padding: 15px 50px 15px 10px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   التصميم الجديد لسكشن "إستخراج الشهادة الجامعية" (Timeline Style)
   ═══════════════════════════════════════════════════════════ */

/* 1) الحاوية الرئيسية */
.panel_bes {
    background: #f8fafc !important;
    padding: 80px 0 !important;
}

/* 2) العمود الأيسر (العناوين والأزرار) */
.panel_bes .col-lg-6:first-child {
    padding: 30px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    border-top: 5px solid #0b6b3a;
}
.panel_bes .col-lg-6:first-child h1 {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: #0b2a4a !important;
    margin-bottom: 15px !important;
}
.panel_bes .col-lg-6:first-child h3 {
    font-size: 1.3rem !important;
    color: #c9a227 !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}
.panel_bes .col-lg-6:first-child p {
    font-size: 1.1rem !important;
    color: #475569 !important;
    line-height: 1.8 !important;
    margin-bottom: 30px !important;
}

/* 3) الأزرار الكبيرة */
.panel_bes .btn-outline-success {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    padding: 18px 20px !important;
    margin-bottom: 15px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #0b6b3a, #064d29) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 20px rgba(11, 107, 58, 0.3) !important;
    transition: all 0.3s ease !important;
}
.panel_bes .btn-outline-success:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(11, 107, 58, 0.5) !important;
}

/* 4) العمود الأيمن (الخطوات - Timeline) */
.panel_bes .card {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
.panel_bes .list-group {
    position: relative;
    padding-right: 20px;
}
/* الخط الرأسي الذي يربط الخطوات */
.panel_bes .list-group::before {
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    right: 44px; /* موقع الخط */
    width: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    z-index: 0;
}

/* 5) بطاقات الخطوات */
.panel_bes .list-group-item {
    position: relative;
    counter-increment: step-counter;
    padding: 25px 80px 25px 25px !important; /* مساحة للأرقام */
    margin-bottom: 25px !important;
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04) !important;
    font-size: 16px !important; /* الخط الكبير والمريح */
    line-height: 1.9 !important;
    color: #334155 !important;
    z-index: 1;
    transition: all 0.3s ease !important;
}
.panel_bes .list-group-item:hover {
    transform: translateX(-10px) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
    border-color: #c9a227 !important;
}

/* 6) الأرقام الدائرية الكبيرة */
.panel_bes .list-group-item::before {
    content: counter(step-counter) !important;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #0b2a4a, #1e4c7a) !important;
    color: #c9a227 !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900 !important;
    font-size: 1.4rem !important;
    box-shadow: 0 5px 15px rgba(11, 42, 74, 0.3) !important;
    border: 3px solid #ffffff;
}

/* 7) تحسين شكل الروابط داخل النص */
.panel_bes .list-group-item a {
    color: #0b6b3a !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

/* 8) الموبايل */
@media (max-width: 768px) {
    .panel_bes .col-lg-6:first-child { margin-bottom: 30px; }
    .panel_bes .list-group-item {
        font-size: 15px !important; /* لا يزال كبيراً على الموبايل */
        padding: 20px 65px 20px 15px !important;
    }
    .panel_bes .list-group-item::before {
        width: 40px;
        height: 40px;
        font-size: 1.1rem !important;
        right: 10px;
    }
    .panel_bes .list-group::before { right: 30px; }
}

/* ═══════════════════════════════════════════════════════════
   تغيير جذري في الهيكل (Radical Layout Redesign)
   ═══════════════════════════════════════════════════════════ */

/* 1) الهيدر: بانر كامل بصورة خلفية */
.panel-dark-title {
    position: relative;
    padding: 100px 0 !important;
    background: url('https://oiu.edu.sd/frontend/web/image/back2.jpg') no-repeat center center !important;
    background-size: cover !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: none !important;
}
.panel-dark-title::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 25, 47, 0.85); /* تعتيم أزرق داكن */
    z-index: 1;
}
.panel-dark-title .container { position: relative; z-index: 2; }
.panel-dark-title p { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.panel-dark-title img {
    width: 120px !important; height: 120px !important; border-radius: 50%;
    border: 5px solid #c9a227; float: none !important; margin: 0 !important;
    box-shadow: 0 0 30px rgba(201, 162, 39, 0.5);
}
.panel-dark-title span a {
    font-size: 3rem !important; font-weight: 900 !important;
    letter-spacing: 2px; color: #fff !important;
}

/* 2) الأخبار: بطاقات المجلات (صورة كاملة ونص فوقها) */
.owl-carousel.two .item {
    position: relative; border-radius: 20px; overflow: hidden;
    height: 380px; /* ارتفاع ثابت */
    margin: 15px; box-shadow: 0 15px 35px rgba(0,0,0,0.2) !important;
}
.owl-carousel.two .item img {
    height: 100% !important; width: 100% !important;
    object-fit: cover; border-radius: 20px !important; margin: 0 !important;
    transition: transform 0.5s ease;
}
.owl-carousel.two .item:hover img { transform: scale(1.1); }
.owl-carousel.two .item a {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 20px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.95), transparent);
    text-decoration: none; z-index: 2; display: block;
}
.owl-carousel.two .item h5 {
    color: #fff !important; font-size: 1.3rem !important;
    font-weight: 800 !important; margin: 0 !important; text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.owl-carousel.two .item p { display: none; } /* إخفاء المقتطف */

/* 3) الإحصائيات: الوضع الداكن (Dark Mode) */
.panel-light.statistic { background: #0f172a !important; }
.panel-light.statistic .gn-title p { color: #c9a227 !important; }
.panel-light.statistic .top {
    background: #1e293b !important; border: 1px solid rgba(255,255,255,0.1) !important;
}
.panel-light.statistic .top-heading {
    color: #fff !important; background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
.panel-light.statistic .top-content a, .panel-light.statistic .top-content p { color: #94a3b8 !important; }

/* 4) صفحات الكلية: شبكة (Grid) بدلاً من سلايدر */
.owl-carousel.two_3 {
    display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 20px; padding: 0 15px;
}
.owl-carousel.two_3 .owl-stage-outer { overflow: visible !important; }
.owl-carousel.two_3 .owl-stage { display: contents !important; }
.owl-carousel.two_3 .item {
    width: auto !important; background: #fff; padding: 25px;
    border-radius: 12px; border-right: 5px solid #c9a227;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: 0.3s;
}
.owl-carousel.two_3 .item:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }

/* 5) كلمة العميد: ستايل عصري (صورة مربعة وعلامة اقتباس) */
.dean-word .row {
    background: #fff; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    padding: 40px; align-items: center;
}
.dean-word .col-lg-3 { display: flex; justify-content: center; }
.dean-word img {
    width: 250px !important; height: 250px !important;
    border-radius: 20px !important; /* مربع بزوايا دائرية */
    box-shadow: 0 15px 30px rgba(11, 42, 74, 0.2);
}
.dean-word p.text-justify {
    position: relative; border: none !important; background: transparent !important;
    box-shadow: none !important; padding: 0 !important; font-size: 1.15rem !important;
    line-height: 2 !important; color: #475569 !important;
}
.dean-word p.text-justify::before {
    content: '”'; position: absolute; top: -40px; right: -20px;
    font-size: 150px; color: rgba(201, 162, 39, 0.15); font-family: serif; line-height: 1;
}

/* 6) الخطوات: شبكة أفقية بدلاً من قائمة عمودية */
.panel_bes .list-group {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 20px; padding: 0 !important;
}
.panel_bes .list-group::before { display: none; }
.panel_bes .list-group-item {
    flex: 1 1 300px; text-align: center; padding: 30px 20px !important;
    display: flex; flex-direction: column; align-items: center;
    border: 1px solid #e2e8f0 !important; border-top: 5px solid #0b6b3a !important;
}
.panel_bes .list-group-item::before {
    position: relative !important; top: 0 !important; right: 0 !important;
    transform: none !important; margin-bottom: 20px;
    width: 60px !important; height: 60px !important; font-size: 2rem !important;
}

/* 7) الموبايل */
@media (max-width: 768px) {
    .panel-dark-title { padding: 60px 0 !important; }
    .panel-dark-title span a { font-size: 2rem !important; }
    .owl-carousel.two .item { height: 280px; }
    .dean-word img { width: 180px !important; height: 180px !important; margin-bottom: 20px; }
}

/* ═══════════════════════════════════════════════════════════
   إصلاح سكشن "صفحات الكلية / الإدارة" ليكون شبكة ثابتة وأنيقة
   ═══════════════════════════════════════════════════════════ */

/* 1) إيقاف تأثير السلايدر وجعله شبكة (Grid) */
.two_3.owl-carousel {
    display: block !important;
}
.two_3 .owl-stage-outer {
    overflow: visible !important; /* إظهار كل العناصر */
}
.two_3 .owl-stage {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 25px !important;
    transform: none !important; /* إلغاء حركة السلايدر */
    width: 100% !important;
    margin: 0 !important;
}
.two_3 .owl-item {
    width: 100% !important;
}
.two_3 .owl-nav, .two_3 .owl-dots {
    display: none !important; /* إخفاء أزرار التنقل والنقاط */
}

/* 2) تصميم البطاقة الواحدة (عصري وفخم) */
.two_3 .item {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 35px 25px !important;
    box-shadow: 0 10px 30px rgba(11, 42, 74, 0.06) !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 5px solid #c9a227 !important; /* شريط ذهبي علوي */
    transition: all 0.4s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    height: 100% !important;
    position: relative;
    overflow: hidden;
}

/* 3) تأثير التحويم (الارتفاع وتغيير لون الحدود) */
.two_3 .item:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 45px rgba(11, 42, 74, 0.15) !important;
    border-top-color: #0b6b3a !important;
}

/* 4) أيقونة الصفحة (ملف) */
.two_3 .item::before {
    content: '\f15c'; /* أيقونة ملف */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 3rem;
    color: #0b2a4a; /* أزرق داكن */
    margin-bottom: 20px;
    transition: all 0.4s ease;
    opacity: 0.8;
}
.two_3 .item:hover::before {
    color: #0b6b3a; /* أخضر عند التحويم */
    transform: scale(1.15) translateY(-5px);
    opacity: 1;
}

/* 5) النص والرابط */
.two_3 .item a {
    text-decoration: none !important;
    display: block;
    width: 100%;
}
.two_3 .item h5 {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #0b2a4a !important;
    margin: 0 !important;
    line-height: 1.6 !important;
    transition: color 0.3s ease;
}
.two_3 .item:hover h5 {
    color: #0b6b3a !important;
}

/* الموبايل */
@media (max-width: 768px) {
    .two_3 .owl-stage {
        grid-template-columns: 1fr !important; /* عمود واحد في الموبايل */
    }
    .two_3 .item { padding: 25px 15px !important; }
    .two_3 .item::before { font-size: 2.5rem; }
    .two_3 .item h5 { font-size: 1.1rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   ضغط سكشن الصفحات وجعله شبكة متعددة الأعمدة (Compact Grid)
   ═══════════════════════════════════════════════════════════ */

/* 1) إجبار السلايدر على أن يكون شبكة (4 أعمدة في الشاشات الكبيرة) */
.two_3 .owl-stage {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; /* 4 أعمدة */
    gap: 15px !important; /* مسافة صغيرة بين البطاقات */
    width: 100% !important;
}

/* 2) تصغير حجم البطاقة نفسها */
.two_3 .owl-item {
    width: 100% !important; /* إلغاء العرض الذي يفرضه السلايدر */
}
.two_3 .item {
    padding: 20px 15px !important; /* تقليل الحواشي الداخلية */
    border-radius: 10px !important;
    min-height: auto !important; /* إزالة الطول الإجباري */
}

/* 3) تصغير الأيقونة (الملف) */
.two_3 .item::before {
    font-size: 1.8rem !important;
    margin-bottom: 10px !important;
}

/* 4) تصغير النص */
.two_3 .item h5 {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

/* 5) تصغير المسافات بين السكشنات (لتقليل طول الصفحة الإجمالي) */
.panel-light, .panel-dark {
    padding: 40px 0 !important; /* كان 70px */
}

/* الموبايل: عمودين بدلاً من واحد لتقليل الطول */
@media (max-width: 768px) {
    .two_3 .owl-stage {
        grid-template-columns: repeat(2, 1fr) !important; /* عمودين */
        gap: 10px !important;
    }
    .two_3 .item {
        padding: 15px 10px !important;
    }
    .two_3 .item::before {
        font-size: 1.5rem !important;
    }
    .two_3 .item h5 {
        font-size: 0.85rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   ضبط قسم الصفحات ليكون 3 أعمدة متناسقة (بدون تطويل)
   ═══════════════════════════════════════════════════════════ */

/* 1) إجبار الشبكة على 3 أعمدة في الكمبيوتر */
.two_3 .owl-stage {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 أعمدة بالضبط */
    gap: 20px !important; 
    width: 100% !important;
}

/* 2) توحيد ارتفاع البطاقات */
.two_3 .item {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    min-height: 160px !important; /* ارتفاع أدنى لضمان التناسق */
    padding: 20px 15px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border-top: 4px solid #c9a227 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.04) !important;
    transition: all 0.3s ease !important;
}

/* 3) قص النصوص الطويلة (لتجنب تطويل البطاقة) */
.two_3 .item h5 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #0b2a4a !important;
    text-align: center !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* يسمح بسطرين فقط */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 4) الأيقونة */
.two_3 .item::before {
    font-size: 2rem !important;
    margin-bottom: 12px !important;
    color: #0b2a4a !important;
}

/* 5) تأثير التحويم */
.two_3 .item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    border-top-color: #0b6b3a !important;
}

/* 6) التابلت (عمودين) */
@media (max-width: 992px) {
    .two_3 .owl-stage {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 7) الموبايل (عمودين ليكون قصيراً) */
@media (max-width: 768px) {
    .two_3 .owl-stage {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .two_3 .item {
        min-height: 140px !important;
        padding: 15px 10px !important;
    }
    .two_3 .item h5 { font-size: 0.85rem !important; }
    .two_3 .item::before { font-size: 1.5rem !important; margin-bottom: 8px !important; }
}

/* ═══════════════════════════════════════════════════════════
   الحل الجذري: تحويل سلايدر الصفحات إلى شبكة (تجاوز JS)
   ═══════════════════════════════════════════════════════════ */

/* 1) إلغاء تأثير السلايدر (Owl Carousel) بالكامل */
.two_3.owl-carousel {
    overflow: visible !important; /* إظهار كل الصفحات بدلاً من الاختباء */
}
.two_3 .owl-stage-outer {
    overflow: visible !important;
}
.two_3 .owl-stage {
    transform: none !important; /* إلغاء حركة السلايدر */
    width: 100% !important; /* إجبار العرض */
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important; /* المسافة بين البطاقات */
}
.two_3 .owl-item {
    width: calc(33.333% - 14px) !important; /* 3 أعمدة في الكمبيوتر */
    float: right !important;
    margin: 0 !important;
}
/* إخفاء أزرار التنقل والنقاط */
.two_3 .owl-nav, .two_3 .owl-dots {
    display: none !important;
}

/* 2) تنسيق البطاقة نفسها لتكون مضغوطة وأنيقة */
.two_3 .item {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 140px !important;
    padding: 20px 15px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border-top: 4px solid #c9a227 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* 3) قص النص الطويل */
.two_3 .item h5 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #0b2a4a !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* 4) الأيقونة */
.two_3 .item::before {
    font-size: 2rem !important;
    margin-bottom: 10px !important;
    color: #0b2a4a !important;
}

/* 5) التابلت (عمودين) */
@media (max-width: 991px) {
    .two_3 .owl-item {
        width: calc(50% - 10px) !important;
    }
}

/* 6) الموبايل (عمودين ليكون قصيراً) */
@media (max-width: 768px) {
    .two_3 .owl-stage {
        gap: 10px !important;
    }
    .two_3 .owl-item {
        width: calc(50% - 5px) !important;
    }
    .two_3 .item {
        min-height: 120px !important;
        padding: 15px 10px !important;
    }
    .two_3 .item h5 { font-size: 0.85rem !important; }
    .two_3 .item::before { font-size: 1.5rem !important; }
}

/* 7) شاشات صغيرة جداً (عمود واحد) */
@media (max-width: 480px) {
    .two_3 .owl-item {
        width: 100% !important;
    }
}
✅ تم تجاوز السلايدر وتحويله لشبكةcat
✅ تم تعديل الشبكة لتصبح 4 أعمدةcat

/* ═══════════════════════════════════════════════════════════
   تعديل شبكة الصفحات لتصبح 4 أعمدة في الكمبيوتر
   ═══════════════════════════════════════════════════════════ */

/* 1) 4 أعمدة في الشاشات الكبيرة (أكبر من 1200px) */
@media (min-width: 1200px) {
    .two_3 .owl-item {
        width: calc(25% - 15px) !important; /* 4 أعمدة */
    }
}

/* 2) 3 أعمدة في الشاشات المتوسطة (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .two_3 .owl-item {
        width: calc(33.333% - 14px) !important; /* 3 أعمدة */
    }
}

/* 3) تصغير المسافات قليلاً لتناسب 4 أعمدة */
.two_3 .owl-stage {
    gap: 15px !important; /* مسافة أقل بين البطاقات */
}

/* 4) تصغير الخط والأيقونة قليلاً لتناسب 4 أعمدة */
@media (min-width: 1200px) {
    .two_3 .item h5 {
        font-size: 0.95rem !important;
    }
    .two_3 .item {
        padding: 18px 12px !important;
        min-height: 130px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   فرض شبكة 4 أعمدة بقوة (تجاوز السلايدر والـ Flexbox)
   ═══════════════════════════════════════════════════════════ */

/* 1) إجبار الحاوية على أن تكون Grid */
.two_3 .owl-stage {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 4 أعمدة متساوية */
    gap: 20px !important;
    width: 100% !important;
    transform: none !important; /* إلغاء حركة السلايدر */
    padding: 0 10px !important;
}

/* 2) إجبار البطاقات على أخذ مساحة الخلية (تجاوز JS) */
.two_3 .owl-item {
    width: 100% !important; /* إلغاء العرض الذي يفرضه السلايدر */
    margin: 0 !important; /* إلغاء الهوامش التي يفرضها السلايدر */
}

/* 3) تنسيق البطاقة الداخلية */
.two_3 .item {
    height: 100% !important;
    margin: 0 !important;
    padding: 20px 15px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border-top: 4px solid #c9a227 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}
.two_3 .item::before {
    font-size: 2rem !important;
    margin-bottom: 15px !important;
    color: #0b2a4a !important;
}
.two_3 .item h5 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #0b2a4a !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* 4) التابلت (3 أعمدة) */
@media (max-width: 1199px) {
    .two_3 .owl-stage {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* 5) التابلت الصغير (عمودين) */
@media (max-width: 991px) {
    .two_3 .owl-stage {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 6) الموبايل (عمودين) */
@media (max-width: 768px) {
    .two_3 .owl-stage {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .two_3 .item { padding: 15px 10px !important; min-height: auto !important; }
    .two_3 .item h5 { font-size: 0.85rem !important; }
    .two_3 .item::before { font-size: 1.5rem !important; margin-bottom: 8px !important; }
}

/* 7) الموبايل الصغير جداً (عمود واحد) */
@media (max-width: 480px) {
    .two_3 .owl-stage {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   الخيار النووي: إلغاء السلايدر تماماً وإجبار 4 أعمدة
   ═══════════════════════════════════════════════════════════ */

/* 1) إخفاء أزرار السلايدر نهائياً */
.two_3 .owl-nav, .two_3 .owl-dots { display: none !important; }

/* 2) جعل الحاوية الخارجية تعرض كل شيء بدون قص */
.two_3.owl-carousel, .two_3 .owl-stage-outer {
    overflow: visible !important;
    display: block !important;
}

/* 3) إجبار الحاوية الداخلية على الترتيب كـ Flexbox (يلتف للأسفل) */
.two_3 .owl-stage {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    transform: none !important; /* إلغاء حركة السلايدر */
    margin: 0 !important;
    padding: 0 !important;
}

/* 4) إجبار كل بطاقة على أخذ 25% من العرض (4 في الصف) */
.two_3 .owl-item {
    width: 25% !important;
    flex: 0 0 25% !important;
    max-width: 25% !important;
    padding: 5px !important; /* مسافة صغيرة بين البطاقات */
}

/* 5) تنسيق البطاقة الداخلية */
.two_3 .item {
    height: 100% !important;
    min-height: 140px !important;
    margin: 0 !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border-top: 4px solid #c9a227 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 15px !important;
}
.two_3 .item::before {
    font-size: 2rem !important;
    margin-bottom: 10px !important;
    color: #0b2a4a !important;
}
.two_3 .item h5 {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #0b2a4a !important;
    margin: 0 !important;
}

/* 6) التجاوب للموبايل والتابلت */
@media (max-width: 1199px) {
    .two_3 .owl-item { width: 33.333% !important; flex: 0 0 33.333% !important; max-width: 33.333% !important; }
}
@media (max-width: 991px) {
    .two_3 .owl-item { width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important; }
}
@media (max-width: 768px) {
    .two_3 .owl-item { width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important; }
    .two_3 .item { min-height: 120px !important; }
    .two_3 .item h5 { font-size: 0.85rem !important; }
}
@media (max-width: 480px) {
    .two_3 .owl-item { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
}

/* ═══════════════════════════════════════════════════════════
   تعديل الشبكة لتصبح 6 أعمدة (6 بطاقات في الصف)
   ═══════════════════════════════════════════════════════════ */

/* 1) 6 أعمدة في الشاشات الكبيرة (أكبر من 1200px) */
@media (min-width: 1200px) {
    .two_3 .owl-item {
        width: 16.66666667% !important; /* 100 / 6 */
        flex: 0 0 16.66666667% !important;
        max-width: 16.66666667% !important;
    }
    
    /* تصغير المسافات والحجم قليلاً لتناسب 6 أعمدة */
    .two_3 .item {
        padding: 15px 8px !important;
        min-height: 120px !important;
    }
    .two_3 .item::before {
        font-size: 1.6rem !important; /* تصغير الأيقونة */
        margin-bottom: 8px !important;
    }
    .two_3 .item h5 {
        font-size: 0.85rem !important; /* تصغير الخط */
        line-height: 1.4 !important;
    }
}

/* 2) في الشاشات المتوسطة والتابلت (4 أعمدة) */
@media (min-width: 992px) and (max-width: 1199px) {
    .two_3 .owl-item {
        width: 25% !important;
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
}

/* 3) التابلت الصغير (3 أعمدة) */
@media (min-width: 768px) and (max-width: 991px) {
    .two_3 .owl-item {
        width: 33.333% !important;
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
    }
}

/* 4) الموبايل (عمودين) */
@media (max-width: 767px) {
    .two_3 .owl-item {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* 5) الموبايل الصغير جداً (عمود واحد) */
@media (max-width: 480px) {
    .two_3 .owl-item {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   توسيط البطاقات في الصف الأخير وإصلاح الفراغات
   ═══════════════════════════════════════════════════════════ */

/* 1) توسيط العناصر داخل الحاوية */
.two_3 .owl-stage {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* توسيط الصفوف الناقصة */
    gap: 15px !important; /* مسافة ثابتة بين البطاقات */
    width: 100% !important;
    transform: none !important;
}

/* 2) ضبط عرض البطاقة ليكون 6 في الصف بدقة */
@media (min-width: 1200px) {
    .two_3 .owl-item {
        /* حساب العرض بدقة مع مراعاة المسافات */
        width: calc((100% - (15px * 5)) / 6) !important; 
        flex: 0 0 calc((100% - (15px * 5)) / 6) !important;
        max-width: calc((100% - (15px * 5)) / 6) !important;
        margin-bottom: 15px !important; /* مسافة للأسفل عند الالتفاف */
    }
}

/* 3) التأكد من أن البطاقات الداخلية تأخذ نفس الارتفاع */
.two_3 .item {
    height: 100% !important;
    margin: 0 !important;
}

/* استجابة الشاشات المتوسطة (4 أعمدة) */
@media (min-width: 992px) and (max-width: 1199px) {
    .two_3 .owl-item {
        width: calc((100% - (15px * 3)) / 4) !important;
        flex: 0 0 calc((100% - (15px * 3)) / 4) !important;
        max-width: calc((100% - (15px * 3)) / 4) !important;
    }
}

/* استجابة التابلت (3 أعمدة) */
@media (min-width: 768px) and (max-width: 991px) {
    .two_3 .owl-item {
        width: calc((100% - (15px * 2)) / 3) !important;
        flex: 0 0 calc((100% - (15px * 2)) / 3) !important;
        max-width: calc((100% - (15px * 2)) / 3) !important;
    }
}

/* استجابة الموبايل (عمودين) */
@media (max-width: 767px) {
    .two_3 .owl-item {
        width: calc((100% - 15px) / 2) !important;
        flex: 0 0 calc((100% - 15px) / 2) !important;
        max-width: calc((100% - 15px) / 2) !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   الحل النهائي: تدمير عرض السلايدر الوهمي وتوسيط الصف الأخير
   ═══════════════════════════════════════════════════════════ */

/* 1) إجبار السلايدر على أخذ عرض الشاشة فقط */
.two_3 .owl-stage {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* توسيط العناصر الناقصة */
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important; /* إلغاء حركة السلايدر */
    margin: 0 !important;
    padding: 0 !important;
    gap: 15px !important; /* المسافة بين البطاقات */
}

/* 2) الحساب الدقيق لعرض البطاقة (6 أعمدة) */
@media (min-width: 1200px) {
    .two_3 .owl-item {
        /* (عرض الشاشة - المسافات) / 6 */
        width: calc((100% - 75px) / 6) !important; 
        flex: 0 0 calc((100% - 75px) / 6) !important;
        max-width: calc((100% - 75px) / 6) !important;
        float: none !important;
        margin: 0 !important;
    }
}

/* 3) التابلت (4 أعمدة) */
@media (min-width: 992px) and (max-width: 1199px) {
    .two_3 .owl-item {
        width: calc((100% - 45px) / 4) !important;
        flex: 0 0 calc((100% - 45px) / 4) !important;
        max-width: calc((100% - 45px) / 4) !important;
    }
}

/* 4) الموبايل (عمودين) */
@media (max-width: 991px) {
    .two_3 .owl-item {
        width: calc((100% - 15px) / 2) !important;
        flex: 0 0 calc((100% - 15px) / 2) !important;
        max-width: calc((100% - 15px) / 2) !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   شبكة الصفحات الجديدة (بدون سلايدر) - 6 أعمدة
   ═══════════════════════════════════════════════════════════ */

/* 1) الحاوية */
.pages-grid-container {
    direction: rtl;
    padding: 10px 0;
}

/* 2) الشبكة (6 أعمدة) */
.pages-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 20px !important;
}

/* 3) البطاقة الواحدة */
.page-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    border-top: 4px solid #c9a227 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 25px 15px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    height: 100%;
    min-height: 140px;
}

/* 4) تأثير التحويم */
.page-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 30px rgba(11, 42, 74, 0.1) !important;
    border-top-color: #0b6b3a !important;
}

/* 5) الأيقونة */
.page-icon {
    font-size: 2rem !important;
    color: #0b2a4a !important;
    margin-bottom: 15px !important;
    transition: all 0.3s !important;
}
.page-card:hover .page-icon {
    color: #0b6b3a !important;
    transform: scale(1.1) !important;
}

/* 6) النص */
.page-card h5 {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #0b2a4a !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.page-card:hover h5 {
    color: #0b6b3a !important;
}

/* 7) التجاوب للموبايل والتابلت */
@media (max-width: 1199px) {
    .pages-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 991px) {
    .pages-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
    .pages-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .page-card { padding: 15px 10px !important; min-height: 120px !important; }
    .page-card h5 { font-size: 0.85rem !important; }
    .page-icon { font-size: 1.5rem !important; margin-bottom: 8px !important; }
}
@media (max-width: 480px) {
    .pages-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════
   تصغير بطاقات هيئة التدريس وجعلها 4 أعمدة (Compact Grid)
   ═══════════════════════════════════════════════════════════ */

/* 1) إجبار السلايدر (staff) على أن يكون شبكة مرنة */
.owl-carousel.staff {
    overflow: visible !important;
}
.owl-carousel.staff .owl-stage-outer {
    overflow: visible !important;
}
.owl-carousel.staff .owl-stage {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
    width: 100% !important;
    transform: none !important;
}

/* 2) عرض البطاقة ليكون 4 في الصف */
.owl-carousel.staff .owl-item {
    width: calc((100% - 45px) / 4) !important; /* 3 مسافات * 15px = 45px */
    flex: 0 0 calc((100% - 45px) / 4) !important;
    max-width: calc((100% - 45px) / 4) !important;
    float: none !important;
    margin: 0 !important;
}

/* 3) تصغير حجم البطاقة (Compact Card) */
.owl-carousel.staff .user-card-full {
    margin: 0 !important;
    border-radius: 12px !important;
}
.owl-carousel.staff .user-card-full .col-sm-4 {
    padding: 15px 10px !important; /* تقليل المساحة العلوية */
}
.owl-carousel.staff .user-card-full .col-sm-8 {
    padding: 15px !important; /* تقليل مساحة المعلومات */
}

/* 4) تصغير الصورة الشخصية */
.owl-carousel.staff .user-card-full .user-profile img {
    width: 80px !important; 
    height: 80px !important;
    border-width: 3px !important;
    margin-bottom: 10px !important;
}

/* 5) تصغير الخطوط والمسافات */
.owl-carousel.staff .user-card-full h6 {
    font-size: 0.9rem !important;
    margin-bottom: 5px !important;
}
.owl-carousel.staff .user-card-full p {
    font-size: 0.8rem !important;
    margin-bottom: 0 !important;
}
.owl-carousel.staff .user-card-full .card-block {
    padding: 10px !important;
}
.owl-carousel.staff .user-card-full .card-block .row {
    margin-bottom: 0 !important;
}
.owl-carousel.staff .user-card-full .b-b-default {
    border-bottom: none !important; /* إزالة الخطوط الداخلية */
    margin-bottom: 5px !important;
}
.owl-carousel.staff .user-card-full .m-t-40 {
    margin-top: 10px !important;
}
.owl-carousel.staff .user-card-full .social-link li a {
    font-size: 0.9rem !important;
    margin: 0 2px !important;
}

/* 6) التجاوب مع الشاشات */
@media (max-width: 1199px) {
    .owl-carousel.staff .owl-item {
        width: calc((100% - 30px) / 3) !important; /* 3 أعمدة */
        flex: 0 0 calc((100% - 30px) / 3) !important;
        max-width: calc((100% - 30px) / 3) !important;
    }
}
@media (max-width: 991px) {
    .owl-carousel.staff .owl-item {
        width: calc((100% - 15px) / 2) !important; /* عمودين */
        flex: 0 0 calc((100% - 15px) / 2) !important;
        max-width: calc((100% - 15px) / 2) !important;
    }
}
@media (max-width: 767px) {
    .owl-carousel.staff .owl-item {
        width: 100% !important; /* عمود واحد في الموبايل */
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   التصميم النهائي لشبكة هيئة التدريس (4 أعمدة)
   ═══════════════════════════════════════════════════════════ */

/* 1) شبكة الـ 4 أعمدة */
.faculty-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}

/* 2) تصميم البطاقة (عمودية لتوفير المساحة) */
.faculty-card .user-card-full {
    margin: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.06) !important;
    border: none !important;
    height: 100% !important;
    transition: transform 0.3s, box-shadow 0.3s;
}
.faculty-card .user-card-full:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.12) !important;
}

/* 3) إصلاح الهيكل الداخلي للبطاقة (منع التداخل) */
.faculty-card .user-card-full .row {
    flex-direction: column !important;
    margin: 0 !important;
    height: 100%;
}
.faculty-card .user-card-full .col-sm-4 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 10px !important;
    background: linear-gradient(135deg, #0b2a4a, #1e4c7a) !important;
    border-radius: 16px 16px 0 0 !important;
}
.faculty-card .user-card-full .col-sm-8 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px !important;
    background: #fff !important;
    border-radius: 0 0 16px 16px !important;
    flex-grow: 1;
}

/* 4) زر "عرض الكل" */
.btn-all-staff {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff !important;
    background: linear-gradient(135deg, #0b6b3a, #064d29);
    border: none;
    box-shadow: 0 10px 20px rgba(11, 107, 58, 0.3);
    text-decoration: none !important;
    transition: all 0.3s ease;
}
.btn-all-staff:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(11, 107, 58, 0.5);
    color: #c9a227 !important; /* تحول للذهبي */
}

/* 5) الاستجابة للشاشات */
@media (max-width: 1199px) {
    .faculty-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 991px) {
    .faculty-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 767px) {
    .faculty-grid { grid-template-columns: 1fr !important; }
    .btn-all-staff { padding: 12px 25px; font-size: 1rem; }
}