/* ======== 1. General Setup & Brand Colors ======== */
@font-face {
    font-family: 'Arabic';
    src: url('ara.ttf') format('truetype');
    /* يمكنك إضافة خصائص إضافية مثل font-weight و font-style إذا كان الخط يحتوي على أكثر من وزن أو نمط */
    font-weight: normal;
    font-style: normal;
}

:root {
  --brand-gold: #F4D35E;
  --brand-light-blue: #4A90E2;
  --brand-dark-blue: #003366;
  --brand-red: #D32F2F;
  --brand-white: #FFFFFF;
  --text-dark: #212529;
  --body-bg: #FFFFFF;
  --light-gray-bg: #f8f9fa;
  --border-color: #dee2e6;
}

body {
    font-family: 'Arabic', sans-serif;
    color: var(--text-dark);
    padding-top: 140px; 
    /* خلفية بيضاء كقاعدة أساسية */
    background-color: var(--brand-white); 
    position: relative;
    overflow-x: hidden;
    line-height: 1.8;
    font-weight: 400;
}
/* We create a container to hold content on top of the pattern */
main {
    position: relative;
    z-index: 2;
    background-color: transparent; /* Main is now a transparent container */
}

/* Sections will have their own background to sit on top of the pattern */
section {
    background-color: var(--brand-white); /* اللون الأبيض الافتراضي للأقسام */
}

/* نجعل الأقسام ذات الخلفية الفاتحة شفافة لتكشف عن النمط */
section.bg-light { 
    background-color: transparent; 
    
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--brand-dark-blue); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #002244; }


/* ======== 2. Typography & Helper Classes ======== */
h1, h2, h3, h4, h5, h6 { 
    font-weight: 700; 
    color: var(--brand-dark-blue);
    letter-spacing: -0.5px;
}
.section-title { font-weight: 800; }

.btn { 
    border-radius: 0.5rem; 
    transition: all 0.2s ease-in-out; 
    padding: 0.75rem 1.5rem; 
    font-weight: 500;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.btn-brand-gold { background-color: var(--brand-gold); border-color: var(--brand-gold); color: var(--text-dark); }
.btn-brand-gold:hover { background-color: #eac852; border-color: #eac852; color: #000; }
.btn-brand-red { background-color: var(--brand-red); border-color: var(--brand-red); color: var(--brand-white); }
.btn-brand-red:hover { background-color: #b92a2a; border-color: #b92a2a; color: var(--brand-white); }
.btn-outline-brand-dark-blue { color: var(--brand-dark-blue); border-color: var(--brand-dark-blue); }
.btn-outline-brand-dark-blue:hover { background-color: var(--brand-dark-blue); color: var(--brand-white); }
.btn-outline-light { border-color: rgba(255,255,255,0.7); color: #fff; }
.btn-outline-light:hover { background-color: #fff; color: var(--brand-dark-blue); }

.shadow-sm { box-shadow: 0 2px 15px rgba(0,33,68,.05)!important; } /* Softer shadow */


/* ======== 3. Background Floating Icons ======== */
/* ======== Background Floating Icons (Enhanced) ======== */
@keyframes float {
	0% { transform: translateY(0px) rotate(0deg); }
	50% { transform: translateY(-25px) rotate(5deg); }
	100% { transform: translateY(0px) rotate(0deg); }
}

.background-icons-container {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    z-index: 0;
    overflow: hidden; /* يمنع ظهور أشرطة تمرير بسبب الأيقونات الكبيرة */
    pointer-events: none; /* يسمح بالنقر على العناصر خلف الأيقونات */
}

.bg-icon {
    position: absolute;
    color: var(--brand-dark-blue);

    /* --- التعديلات الرئيسية هنا --- */
    opacity: 0.07;           /* زيادة الوضوح قليلاً من 0.04 */
    filter: blur(1.5px);       /* تقليل التمويه قليلاً من 2px */
    
    /* --- تحسينات الحركة --- */
    animation-name: float;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    z-index: -1;

    /* ملاحظة: مدة وتأخير الحركة يتم التحكم بهما من ملف HTML (inline style) */
}

/*
=====================================================
== REFINED HEADER v3 STYLING (التصميم الجديد للهيدر) ==
=====================================================
*/

/*
=====================================================
== MODERN HEADER FINAL STYLING (التصميم النهائي والمستقر) ==
=====================================================
*/

/* --- الهيكل العام --- */

/* تعديل الـ padding للجسم ليتناسب مع الهيدر الجديد */

/* 
===============================================
== 3. HEADER & MEGA MENU STYLING
===============================================
*/
/* --- Header General --- */
.floating-header .navbar {
    padding: 1rem 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    
}
.floating-header.scrolled .navbar {
    padding: 0.75rem 0;
    background: rgba(255, 255, 255, 0.9);
}
.floating-header .navbar > .container { position: relative; }

/* --- Logo --- */
.floating-header .navbar-brand {
    position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%); z-index: 10;
    background-color: var(--brand-white); padding: 0.5rem; border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0, 33, 68, 0.1);
    border: 3px solid rgba(255, 255, 255, 0.5);
    
}
.floating-header .navbar-brand img { height: 70px; width: 70px; border-radius: 50%; }
.floating-header .navbar-brand span { display: none; }

/* --- Navigation Links --- */
@media (min-width: 992px) {
    .floating-header .navbar-nav { padding-right: 150px; }
}
.floating-header .navbar-nav .nav-link {
    font-weight: 700; color: var(--text-dark);
    padding: 0.5rem 1.25rem; position: relative;
    transition: all 0.3s ease;
}
.floating-header .navbar-nav .nav-link::before {
    content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
    width: 0; height: 3px; background-color: var(--brand-red);
    border-radius: 3px; transition: width 0.3s ease;
}
.floating-header .nav-link.active::before,
.floating-header .nav-link:hover::before,
.floating-header .dropdown-mega:hover > .nav-link::before {
    width: 25px;
}
.header-actions .btn-brand-red {
    border-radius: 50px; font-weight: 700; padding: 0.5rem 1.25rem;
}
.header-actions .header-icon-link {
    font-size: 1.2rem; color: var(--text-dark);
}
/* --- Mega Menu --- */
.dropdown-mega { position: static !important; }
.mega-menu { display: none; /* Controlled by JS and hover */ }
@media (min-width: 992px) {
    .dropdown-mega:hover > .dropdown-menu {
        display: block; opacity: 1; visibility: visible;
    }
    .mega-menu {
        position: absolute !important; left: 0 !important; width: 100% !important; margin-top: 0 !important;
        background-color: var(--light-gray-bg) !important;
        border-top: 1px solid var(--border-color) !important;
        box-shadow: 0 15px 30px rgba(0, 33, 68, 0.1) !important;
        transform: translateY(0) !important; /* Simplified for hover */
        opacity: 0; visibility: hidden;
        transition: opacity 0.3s ease;
    }
}
@media (max-width: 991.98px) {
  .navbar-collapse.show {
    max-height: calc(100vh - 80px); 
    overflow-y: auto; 
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    margin-top: 1rem; padding: 1rem; border-radius: 1rem;
  }
   .mega-menu {
       display: block !important;
       position: static; width: 100% !important;
       border: none !important; box-shadow: none !important; padding: 0 !important;
       background: transparent !important; transform: none !important;
   }
}
.mega-menu-title {
    font-size: 1.1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--brand-gold);
}
.mega-menu-list a {
    display: block; padding: 0.6rem 0.5rem; text-decoration: none; color: var(--text-dark); font-weight: 500;
}
.mega-menu-list a:hover { color: var(--brand-red); }



/* ======== START: تصميم الأكورديون المبتكر ======== */
/* تخصيص عام للأكورديون داخل القائمة */
#collegesAccordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-width: 0;
}
#collegesAccordion .accordion-item {
    border-bottom: 1px solid var(--border-color); /* فاصل بين المجموعات */
}
#collegesAccordion .accordion-header {
    margin: 0;
}
/* تخصيص زر الأكورديون (اسم المجموعة) */
#collegesAccordion .accordion-button {
    font-weight: 700;
    color: var(--text-dark);
    padding: 0.8rem 0;
    transition: all 0.2s ease;
}
#collegesAccordion .accordion-button:not(.collapsed) {
    color: var(--brand-red);
    box-shadow: none;
}
#collegesAccordion .accordion-button:focus {
    box-shadow: none;
}

/* تصميم أيقونة + و - */
#collegesAccordion .accordion-button::after {
    content: '+';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transform: none;
    background-image: none;
    color: var(--brand-red);
    font-size: 1rem;
    margin-right: auto;
    margin-left: 0;
    transition: transform 0.2s ease-in-out;
}
#collegesAccordion .accordion-button:not(.collapsed)::after {
    content: '\2212'; /* Minus sign unicode */
    transform: rotate(180deg);
}
/* محتوى الأكورديون (قائمة الكليات الفرعية) */
#collegesAccordion .accordion-body {
    padding: 0 0 1rem 0;
}
#collegesAccordion .accordion-body .mega-menu-list {
    padding-right: 1.5rem; /* مسافة بادئة للروابط الفرعية */
}

/* تنسيق الروابط المستقلة التي لا تقع ضمن أكورديون */
.standalone-college-link {
    display: block;
    text-decoration: none;
    color: var(--text-dark);
    padding: 0.8rem 0;
    font-weight: 700;
    border-bottom: 1px solid var(--border-color);
}
.standalone-college-link:hover {
    color: var(--brand-red);
}

/* ======== END: تصميم الأكورديون المبتكر ======== */
.dropdown-toggle::after { display: none !important; }
.dropdown-mega { position: static !important; }

@media (min-width: 992px) {
    .dropdown-mega:hover > .dropdown-menu {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}
.mega-menu-v3 {
    left: 0 !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding: 0;
    background-color: var(--light-gray-bg);
    border: none;
    border-top: 1px solid var(--border-color);
    box-shadow: 0 15px 30px rgba(0, 33, 68, 0.1);
    border-radius: 0;
    min-height: 280px; 
    display: flex;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.25s ease-out;
    pointer-events: none;
    display: block;
    text-align: right !important;
}
.mega-menu-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-dark-blue);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--brand-red);
    text-align: right !important;
}
.mega-menu-list a {
    display: block;
    text-decoration: none;
    color: var(--text-dark);
    padding: 0.8rem 1rem;
    margin-bottom: 0.25rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.2s ease;
    text-align: right !important;
}
.mega-menu-list a:hover {
    color: var(--brand-white);
    background-color: var(--brand-dark-blue);
    transform: translateX(5px);
}
@media (max-width: 991px) {
    .mega-menu-v3 { display: none; } /* يفضل إخفاؤه تماماً وإعادة بنائه للموبايل إذا لزم الأمر */
    .refined-header .navbar-nav .nav-item::after { display: none; } /* إخفاء الفواصل على الموبايل */
}

/*
=====================================================
== CREATIVE COLLEGE CARDS (بطاقات الكليات الإبداعية) ==
=====================================================
*/

#collegesCarousel .carousel-item {
    transition-duration: 0.8s;
}

.college-card {
    background-color: var(--brand-white);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px rgba(0,0,0,0.03);
    text-align: center;
    overflow: hidden; /* مهم لإخفاء أجزاء الصورة الزائدة */
    transition: all 0.4s ease;
}

/* --- 1. حل مشكلة حجم الصور نهائيًا --- */
.college-card-image {
    position: relative;
    /* تحديد نسبة أبعاد ثابتة للصورة */
    aspect-ratio: 16 / 10; 
}
.college-card-image img {
    width: 100%;
    height: 100%;
    /* يجبر الصورة على ملء المساحة مع الحفاظ على أبعادها */
    object-fit: cover;
    transition: all 0.4s ease; /* لإضافة سلاسة للتأثيرات */
}

/* --- 2. التصميم الإبداعي (اللون الباهت والتأثيرات) --- */
.college-card .college-card-image img {
    filter: grayscale(100%) blur(2px); /* التأثير الافتراضي: باهت ومموه */
}

/* عنوان البطاقة الافتراضي */
.college-card .college-card-title {
    color: #6c757d; /* لون باهت للعنوان */
    transition: all 0.4s ease;
}


/* --- 3. تأثير المرور (Hover) --- */

/* يتم تطبيق هذا على الحاوية الأب لجميع الكروت عندما يتم المرور فوقها */
#collegesCarousel:hover .college-card {
    opacity: 0.5; /* جعل كل البطاقات شفافة قليلاً */
}
/* يتم تطبيق هذا فقط على البطاقة التي يتم المرور فوقها */
#collegesCarousel .college-card:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 15px 30px rgba(0,33,68,.15);
    opacity: 1; /* إزالة الشفافية من البطاقة المحددة */
    z-index: 10; /* جعلها فوق البطاقات الأخرى */
}

/* إزالة التأثيرات الباهتة من البطاقة المحددة */
.college-card:hover .college-card-image img {
    filter: grayscale(0%) blur(0px);
}
/* تكبير الصورة قليلاً عند المرور لإعطاء تأثير جذاب */
.college-card:hover .college-card-image img {
    transform: scale(1.1);
}

/* إعادة تلوين العنوان في البطاقة المحددة */
.college-card:hover .college-card-title {
    color: var(--brand-dark-blue);
}

/* جسم البطاقة */
.college-card-body {
    padding: 1.5rem;
}
/* ======== 5. Page Sections ======== */

/*
===============================================
== DYNAMIC HERO SLIDER STYLING (مع تأثير الكتابة) ==
===============================================
*/



.hero-slider-section .carousel-item {
    height: 100%;
}
.hero-slider-section .carousel-item img {
    height: 100%;
    object-fit: cover; /* يضمن ملء الصورة للمساحة دون تشويه */
}  
@media (max-width: 767px) {
    .hero-slider-section .hero-content h1 {
        font-size: 2.2rem; /* تصغير حجم العنوان الرئيسي */
    }

    .typed-cursor {
        font-size: 2rem; /* تصغير حجم مؤشر الكتابة */
    }

    .hero-slider-section .hero-content .lead {
        font-size: 1rem; /* تصغير حجم النص الثانوي */
        margin-top: 0.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .hero-slider-section .btn {
        font-size: 0.9rem; /* تصغير حجم الأزرار */
        padding: 0.6rem 1.2rem;
    }
}


/* طبقة البلور والتعتيم فوق الصورة */
.carousel-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 51, 102, 0.5); /* تعتيم أزرق */
    backdrop-filter: blur(4px); /* تأثير البلور */
    -webkit-backdrop-filter: blur(4px); /* لدعم متصفح Safari */
}

/* تنسيق المحتوى النصي فوق السلايدر */
.hero-slider-section .hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    color: white;
    text-align: center;
    width: 90%;
}
.hero-slider-section .hero-content h1 {
    color: var(--brand-white);
}

/* تصميم مؤشر الكتابة (Cursor) */
.typed-cursor {
    color: var(--brand-gold);
    font-size: 2.5rem;
    animation: blinking-cursor 0.7s infinite;
}
@keyframes blinking-cursor {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
/* ابحث عن هذه القاعدة في style.css */
.hero-slider-section { 
    position: relative; 
    /* الارتفاع سيُحدد مباشرة على السلايدر */
    height: calc(100vh - 130px); /* هذا السطر يعني ارتفاع الشاشة بالكامل تقريباً */
    min-height: 600px; /* هذا هو الحد الأدنى للارتفاع */
    
    /* ... */
}

.hero-slider-section .carousel,
.hero-slider-section .carousel-inner,
.hero-slider-section .carousel-item {
    /* الخطوة الأهم: إجبار كل هذه العناصر على ملء الحاوية الأم */
    height: 100%;
}

/* 
 * تم حذف aspect-ratio بالكامل من هنا لأنه السبب في المشكلة 
 * الكود الخاص بالصورة و overlay يبقى كما هو 
*/

.hero-slider-section .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.carousel-overlay {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 51, 102, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


/* --- حاوية المحتوى المقسم --- */
/* الكود هنا يبقى كما هو بدون تغيير */
.hero-split-content {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    z-index: 10;
    color: white;
}
/* تنسيق المحتوى الثانوي (الذي سيظهر لاحقاً) */
/*
=====================================================
== SPLIT HERO SECTION (الهيرو المقسم مع قائمة إعلانات) ==
=====================================================
*/
/* --- الخلفية (السلايدر) --- */
/* ابحث عن هذه القاعدة في style.css */


.hero-slider-section .carousel,
.hero-slider-section .carousel-inner,
.hero-slider-section .carousel-item {
    /* الخطوة الأهم: إجبار كل هذه العناصر على ملء الحاوية الأم */
    height: 100%;
}

/* 
 * تم حذف aspect-ratio بالكامل من هنا لأنه السبب في المشكلة 
 * الكود الخاص بالصورة و overlay يبقى كما هو 
*/

.hero-slider-section .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.carousel-overlay {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 51, 102, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


/* --- حاوية المحتوى المقسم --- */
/* الكود هنا يبقى كما هو بدون تغيير */
.hero-split-content {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    z-index: 10;
    color: white;
}
/* تنسيق النص الرئيسي وتأثير الكتابة (يبقى كما هو) */
.hero-main-content h1 { color: var(--brand-white); }
.typed-cursor { color: var(--brand-gold); /* ... إلخ */ }


/* --- بطاقة الإعلانات المتحركة (جديد) --- */
.announcements-card {
    /* التأثير الزجاجي (Glassmorphism) */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    overflow: hidden; /* لإخفاء أجزاء القائمة الزائدة */
}
.announcements-card .card-header {
    background-color: var(--brand-red);
    color: var(--brand-white);
    font-weight: 700;
    font-size: 1.1rem;
    padding: 0.75rem 1.25rem;
    text-align: right;
}
.announcements-card .card-body {
    padding: 0.5rem 0;
}
.announcements-list-wrapper {
    height: 200px; /* تحديد ارتفاع ثابت لمنطقة التمرير */
    overflow: hidden; /* إخفاء الأجزاء الزائدة من القائمة */
    position: relative;
}

/* قائمة الإعلانات وتأثير الحركة العمودية */
.announcements-list {
    list-style: none;
    padding: 0; margin: 0;
    position: absolute;
    width: 100%;
    /* استدعاء الأنيميشن */
    animation: vertical-scroll 20s linear infinite;
}
@keyframes vertical-scroll {
    from {
        transform: translateY(0);
    }
    to {
        /* تحريك القائمة للأعلى بمقدار نصف ارتفاعها */
        transform: translateY(-50%); 
    }
}
/* تأثير إيقاف الحركة عند المرور */
.announcements-list-wrapper:hover .announcements-list {
    animation-play-state: paused;
}
.announcements-list li {
    padding: 0.75rem 1.25rem;
}
.announcements-list li a {
    color: var(--brand-white);
    text-decoration: none;
    transition: color 0.3s ease;
}
.announcements-list li a:hover {
    color: var(--brand-gold);
    text-decoration: underline;
}
/* Key Sections Cards (Refined) */
.key-card {
    background: var(--brand-white); padding: 2rem;
    border: 1px solid var(--border-color); border-radius: 0.75rem;
    box-shadow: none;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}
.key-card:hover {
    transform: translateY(-5px);
    border-color: var(--brand-dark-blue);
    box-shadow: 0 10px 25px rgba(0,33,68,.08);
}
.key-card .icon-wrapper {
    width: 65px; height: 65px; margin: 0 auto 1.5rem;
    background-color: var(--light-gray-bg); color: var(--brand-dark-blue);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-color);
}
.key-card h5 { margin-bottom: 0.5rem; }

/* Stats Section */
.stats-section {
    background: url('../images/campus.jpg') no-repeat center center/cover;
    position: relative; z-index: 1;
}
.stats-section::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(45deg, rgba(0, 51, 102, 0.95), rgba(0, 22, 44, 0.9));
    z-index: -1;
}
.stat-item i { color: var(--brand-gold); }
.stat-number { font-size: 3rem; font-weight: 800; }
.stat-label { font-size: 1rem; color: rgba(255,255,255,0.8); }

/* News Card (Refined) */
.news-card {
    border-radius: 0.75rem; border: 1px solid var(--border-color);
    box-shadow: none; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}
.news-card:hover {
    transform: translateY(-5px); border-color: var(--brand-red);
    box-shadow: 0 10px 25px rgba(0,33,68,.08)!important;
}
.news-card .card-img-top { aspect-ratio: 16/10; object-fit: cover; }

/* Services Section (Refined) */
.services-section {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.service-card {
    padding: 2.5rem; background: var(--light-gray-bg);
    border-radius: 0.75rem; border: 1px solid var(--border-color);
    transition: background-color 0.3s ease;
}
.service-card:hover { background-color: #fff; }
.service-icon { font-size: 2.5rem; color: var(--brand-red); margin-bottom: 1.5rem; }
.service-card p { font-size: 0.9rem; color: #6c757d; }

/* Photo Gallery */
.gallery-item {
    position: relative; display: block; overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem; box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.gallery-item img { transition: transform 0.4s ease; }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 51, 102, 0.7); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; opacity: 0; transition: opacity 0.4s ease;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }

/* Prospective Students CTA */
.cta-section { background-color: var(--brand-dark-blue); }
.cta-title { color: var(--brand-white); font-size: 2.25rem; margin-bottom: 1rem; }
.cta-text { color: rgba(255, 255, 255, 0.8); font-size: 1.1rem; line-height: 1.8; }

/*
=====================================================
== RESEARCH & INNOVATION SECTION (قسم البحث العلمي) ==
=====================================================
*/

.research-section {
    background-color: var(--light-gray-bg);
}

.research-card {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    color: var(--brand-white);
    min-height: 340px;
    display: flex;
    align-items: flex-end; /* محاذاة المحتوى للأسفل لخلق مساحة في الأعلى */
    padding: 2rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* انتقال مرن */
    border: none;
    box-shadow: 0 4px 15px rgba(0,33,68,.08);
}
.research-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(180deg, rgba(0, 51, 102, 0.0) 0%, rgba(0, 51, 102, 0.85) 100%);
    transition: all 0.4s ease;
}

/* تخصيص الصور الخلفية */
.card-journal { background: url('../images/research-journal.jpg') no-repeat center center/cover; }
.card-databases { background: url('../images/research-databases.jpg') no-repeat center center/cover; }
.card-resources { background: url('../images/research-resources.jpg') no-repeat center center/cover; }
.card-ai { background: url('../images/research-ai.jpg') no-repeat center center/cover; }


.research-card-content {
    position: relative;
    z-index: 2;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.research-card-icon {
    font-size: 2.5rem;
    color: var(--brand-gold);
    margin-bottom: 1.2rem;
    background: rgba(0,0,0,0.2);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
}
.research-card-title {
    color: var(--brand-white);
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
}

.research-card-text {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.research-card-link {
    color: var(--brand-gold);
    text-decoration: none;
    font-weight: 700;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.4s ease;
}
.research-card-link i {
    transition: transform 0.3s ease;
    margin-right: 5px;
}
.research-card-link.disabled {
    color: #aaa;
    pointer-events: none;
}
.research-card-link.disabled i {
    display: none;
}


/* تأثيرات المرور (Hover) */
.research-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,33,68,.15);
}
.research-card:hover::before {
    background: linear-gradient(180deg, rgba(0, 51, 102, 0.2) 0%, rgba(0, 51, 102, 0.95) 100%);
}
.research-card:hover .research-card-content {
    transform: translateY(0);
}
.research-card:hover .research-card-link {
    opacity: 1;
    transform: translateY(0);
}
.research-card-link:hover i {
    transform: translateX(-5px);
}
/* ======== 6. Footer ======== */
/*
=====================================================
== MODERN MULTI-ZONE FOOTER (الفوتر الحضاري الجديد) ==
=====================================================
*/
/*
=====================================================
== GLASSMORPHISM FOOTER (الفوتر الزجاجي المتناسق) ==
=====================================================
*/

/* --- 1. حذف أنماط الفاصل القديم --- */
/* تأكد من حذف أي قاعدة .footer-wave-divider إذا كانت لا تزال موجودة */



/* ======== 7. Animations & JS Hooks ======== */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }

.fade-in-section { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.fade-in-section.is-visible { opacity: 1; transform: translateY(0); }
/*
=================================================================
== حل مشكلة تمرير القائمة المنسدلة على الجوال والشاشات الصغيرة ==
=================================================================
*/

@media (max-width: 991.98px) {
  
  /* 
   * الخطوة 1: جعل حاوية القائمة قابلة للتمرير 
   * هذا الكود يتم تطبيقه فقط عندما تكون القائمة الجانبية مفتوحة.
  */
  .navbar-collapse.show {
    /* 
     * تحديد أقصى ارتفاع للقائمة. 
     * calc(100vh - 80px) تعني: املأ 100% من ارتفاع الشاشة، ثم اطرح 80 بكسل
     * (لترك مساحة لشريط التنقل العلوي نفسه). 
    */
    max-height: calc(100vh - 80px); 
    
    /* 
     * أهم خاصية: تمكين التمرير العمودي (السكرول) عند الحاجة.
     * سيظهر شريط التمرير تلقائياً فقط إذا كان المحتوى أطول من المساحة المتاحة.
    */
    overflow-y: auto; 
  }
}
/*

=====================================================
== DYNAMIC SECTION BACKGROUNDS (خلفيات الأقسام الديناميكية) ==
=====================================================
*/

/*
===========================================================
== FINAL DYNAMIC BACKGROUNDS (الطريقة الأفضل والأكثر مرونة) ==
===========================================================
*/
/* --- 1. إعدادات الحركة العامة (3 أنواع) --- */
@keyframes section-icon-float-1 { /* حركة واسعة */
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-30px, 20px) rotate(8deg); }
}
@keyframes section-icon-float-2 { /* حركة سريعة */
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(20px, -15px) rotate(-5deg); }
}
@keyframes section-icon-float-3 { /* حركة ناعمة */
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(5px, 25px); }
}

/* --- 2. إعدادات الحاوية والأيقونات --- */
.has-icon-backdrop { position: relative; } /* أي قسم يحتوي على أيقونات */
.icons-backdrop {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden; z-index: 0; pointer-events: none;
}
.icons-backdrop > i {
    position: absolute;
    color: var(--brand-dark-blue);
    opacity: 0.06;
    animation: section-icon-float-1 15s ease-in-out infinite; /* الحركة الافتراضية */
}
/* تنويع الحركات والسرعات */
.icons-backdrop > i:nth-child(2n) { animation-name: section-icon-float-2; animation-duration: 12s; }
.icons-backdrop > i:nth-child(3n) { animation-name: section-icon-float-3; animation-duration: 18s; }
.icons-backdrop > i:nth-child(4n) { animation-delay: -5s; } /* لتبدأ من منتصف الأنيميشن */
/*
=====================================================
== ABOUT US PAGE STYLING (تصميم صفحة "عن الجامعة") ==
=====================================================
*/

/* --- 1. رأس الصفحة (Page Header) --- */
.page-header-section {
    position: relative;
    padding: 6rem 0;
    background-size: cover;
    background-position: center;
    color: var(--brand-white);
    
}
.page-header-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 51, 102, 0.7); /* تعتيم أزرق */
}
.page-header-content {
    position: relative;
    z-index: 2;
}
.page-header-content .page-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--brand-white);
}
.page-header-content .page-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.5rem;
}

/* --- 2. قسم المقدمة وتوزع الكليات --- */
.lead-text {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.8;
}
.section-title-underline {
    position: relative;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    display: inline-block;
}
.section-title-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 4px;
    background-color: var(--brand-red);
}

.colleges-map-card {
    background-color: var(--light-gray-bg);
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid var(--border-color);
}
.map-title {
    color: var(--brand-dark-blue);
    margin-bottom: 1.5rem;
}
.province-item {
    margin-bottom: 1rem;
}
.province-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}
.province-icon {
    color: var(--brand-red);
    margin-left: 0.75rem; /* For RTL margin-right */
}
.province-name {
    font-weight: 700;
    color: var(--text-dark);
}
.colleges-list {
    font-size: 0.9rem;
    color: #6c757d;
    padding-right: 2rem; /* مسافة بادئة */
    border-right: 2px solid var(--border-color);
}

/* --- 3. قسم الرؤية (Vision Section) --- */
.vision-section {
    overflow: hidden; /* لمنع الأيقونات من الخروج */
}

/* --- 4. قسم الرسالة (Mission Section) --- */
.mission-card {
    background-color: var(--light-gray-bg);
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}
.mission-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0,33,68,.1);
    border-color: var(--brand-dark-blue);
}

.mission-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem;
    background-color: var(--brand-dark-blue);
    color: var(--brand-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}
.mission-title {
    margin-bottom: 1rem;
}
/*
=====================================================
== COLLEGES BY PROVINCE SECTION (قسم الكليات المبتكر) ==
=====================================================
*/

/* --- شريط التنقل بين المحافظات --- */
.provinces-nav-wrapper {
    position: relative;
    border-bottom: 2px solid var(--border-color);
}
.provinces-nav-wrapper .nav-pills .nav-item {
    margin: 0 0.5rem;
}
.provinces-nav-wrapper .nav-link {
    font-size: 1.1rem;
    font-weight: 700;
    color: #6c757d;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
    background-color: transparent;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    bottom: -2px; /* لمحاذاة الخط مع الخط السفلي للحاوية */
}
.provinces-nav-wrapper .nav-link.active,
.provinces-nav-wrapper .nav-link:hover {
    color: var(--brand-dark-blue);
    background-color: var(--brand-white);
    border-color: var(--brand-red);
}

/* الخريطة المصغرة التي تظهر عند المرور */
.province-map-preview {
    position: absolute;
    bottom: 120%; /* فوق الزر */
    left: 50%;
    transform: translateX(-50%) translateY(20px); /* يبدأ منخفضاً قليلاً */
    width: 150px;
    height: auto;
    background-color: var(--brand-white);
    padding: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border: 1px solid var(--border-color);
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100;
}
.provinces-nav-wrapper .nav-link:hover .province-map-preview {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* --- بطاقات الكليات --- */
#collegesCarousel .carousel-item {
    transition-duration: 0.8s; /* جعل حركة السلايدر أبطأ وأكثر سلاسة */
}
.college-card {
    background-color: var(--brand-white);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px rgba(0,0,0,0.03);
    text-align: center;
    transition: all 0.3s ease;
}
.college-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0,33,68,.1);
}
.college-card .card-img-top {
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 0.75rem 0.75rem 0 0;
}
.college-card .card-body {
    padding: 1.5rem;
}
.college-card .card-title {
    color: var(--brand-dark-blue);
    font-weight: 700;
}
/*
=====================================================
== DIRECTORATES DYNAMIC GRID (شبكة المديريات الديناميكية) ==
=====================================================
*/
.directorates-grid-section {
    overflow: hidden; /* لمنع أي تجاوزات للتصميم */
}
.directorate-grid-card {
    position: relative;
    aspect-ratio: 1 / 1; /* يضمن أن تكون البطاقة مربعة الشكل دائماً */
    background-color: var(--brand-white);
    border-radius: 1rem; /* حواف دائرية */
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 15px rgba(0,33,68,.05);
    overflow: hidden; /* مهم جداً لإخفاء الطبقة الخلفية */
    cursor: pointer;
    transition: all 0.4s ease;
}
.directorate-grid-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,33,68,.1);
}

/* --- الواجهة الأمامية للبطاقة (الأيقونة والعنوان) --- */
.card-front {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    transition: opacity 0.4s ease;
}
.card-front i {
    font-size: 3rem;
    color: var(--brand-dark-blue);
    margin-bottom: 1rem;
    transition: transform 0.4s ease;
}
.card-front h5 {
    color: var(--text-dark);
    font-weight: 700;
}

/* --- الواجهة الخلفية للبطاقة (الطبقة اللونية والنص المخفي) --- */
.card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--brand-red), var(--brand-dark-blue));
    color: var(--brand-white);
    
    /* تبدأ مخفية */
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.4s ease;
}
.card-back-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
}
.card-back-content h4 {
    color: var(--brand-white);
    margin-bottom: 0.75rem;
}
.card-back-content p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
}

/* --- التأثير عند المرور --- */
.directorate-grid-card:hover .card-front {
    opacity: 0.2; /* إخفاء الواجهة الأمامية قليلاً */
}
.directorate-grid-card:hover .card-front i {
    transform: scale(0.8); /* تصغير الأيقونة */
}
.directorate-grid-card:hover .card-back {
    opacity: 1; /* إظهار الواجهة الخلفية */
    transform: scale(1); /* إرجاعها لحجمها الطبيعي */
}
/*
=====================================================
== EXPLORE SEARCH SECTION (قسم البحث التفاعلي) ==
=====================================================
*/

.explore-search-section {
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
    
    /* خلفية متدرجة مع نمط زخرفي */
    background: 
        linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.9)),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23003366' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.explore-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--brand-dark-blue);
}
.explore-subtitle {
    font-size: 1.5rem;
    color: var(--brand-red);
    font-weight: 500;
    margin-top: 0.5rem;
}
.explore-description {
    max-width: 700px;
    margin: 1.5rem auto 3rem;
    color: var(--text-dark);
}

/* --- حقل البحث التفاعلي --- */
.interactive-search-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: var(--brand-white);
    padding: 2rem;
    border-radius: 1.5rem; /* 24px */
    box-shadow: 0 20px 50px rgba(0,33,68,0.1);
}
.interactive-search-form .form-label {
    font-weight: 700;
    color: var(--brand-dark-blue);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}
.interactive-search-form .input-group {
    border-radius: 50px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}
.interactive-search-form .input-group:focus-within {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 4px rgba(211,47,47,0.15);
}

.interactive-search-form .form-control {
    font-size: 1.1rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 50px 0 0 50px;
    box-shadow: none !important;
    border-left: none; /* إزالة الحد الأيسر ليدمج مع الزر */
}
.interactive-search-form .btn {
    border-radius: 0 50px 50px 0 !important;
    font-weight: 700;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* تأثير الحركة لأيقونة البحث داخل الزر */
.interactive-search-form .btn i {
    transition: transform 0.3s ease;
}
.interactive-search-form .btn:hover i {
    transform: rotate(15deg);
}

/* --- اقتراحات البحث الشائعة --- */
.popular-searches span {
    color: #6c757d;
    font-weight: 500;
    margin-left: 0.5rem;
}
.popular-searches a {
    text-decoration: none;
    color: var(--text-dark);
    background-color: var(--light-gray-bg);
    padding: 0.4rem 1rem;
    border-radius: 50px;
    margin: 0.25rem;
    display: inline-block;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}
.popular-searches a:hover {
    background-color: var(--brand-dark-blue);
    color: var(--brand-white);
    border-color: var(--brand-dark-blue);
    transform: translateY(-2px);
}
/*
=====================================================
== DYNAMIC NEWS SECTION (قسم الأخبار الديناميكي) ==
=====================================================
*/

.dynamic-news-section {
    background-color: var(--brand-white); /* خلفية بيضاء نظيفة */
}

/* --- القسم الأيسر (السلايدر) --- */
#news-carousel {
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,33,68,.1);
}
#news-carousel .carousel-item {
    min-height: 450px;
}
.main-news-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.main-news-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem 2rem;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
    color: var(--brand-white);
}
.news-meta {
    margin-bottom: 0.75rem;
}
.news-category {
    font-size: 0.8rem;
    font-weight: 700;
}
.news-date {
    margin-right: 1rem;
    font-size: 0.9rem;
    opacity: 0.8;
}
.main-news-title {
    font-size: 1.8rem;
    color: var(--brand-white);
    margin-bottom: 0.5rem;
}
.main-news-excerpt {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
}


/* --- القسم الأيمن (قائمة الأخبار) --- */
.featured-stories-list {
    position: relative;
    padding-right: 2rem; /* مساحة للخط الفاصل */
    height: 100%;
}

/* الخط الفني الفاصل */
.featured-stories-list::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--brand-red) 0%, var(--brand-dark-blue) 100%);
    border-radius: 3px;
}
.list-title {
    color: var(--brand-dark-blue);
    font-weight: 800;
    margin-bottom: 1.5rem;
}
.featured-story-item {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.featured-story-item:hover {
    background-color: var(--light-gray-bg);
}

/* تظليل الخبر النشط */
.featured-story-item.active {
    background-color: var(--light-gray-bg);
}
.featured-story-item.active .story-title {
    color: var(--brand-red);
}

.story-category {
    display: block;
    color: var(--brand-red);
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.story-title {
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    transition: color 0.3s ease;
}


/* --- روابط القائمة الرئيسية --- */
.floating-header .navbar-nav .nav-link {
    font-weight: 700;
    color: var(--text-dark);
    transition: all 0.3s ease;
    padding: 0.5rem 1.25rem;
    position: relative;
}
.floating-header .navbar-nav .nav-link::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background-color: var(--brand-red);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.floating-header .navbar-nav .nav-link.active::before,
.floating-header .navbar-nav .nav-link:hover::before,
.floating-header .dropdown-mega:hover > .nav-link::before {
    width: 25px;
}


/* --- الأزرار والأيقونات الجانبية --- */
.header-actions .btn-brand-red {
    border-radius: 50px;
    font-weight: 700;
    padding: 0.5rem 1.25rem; /* زر أصغر حجماً وأكثر أناقة */
}
.header-actions .header-icon-link {
    font-size: 1.2rem;
    color: var(--text-dark);
    transition: all 0.3s ease;
}
.header-actions .header-icon-link:hover {
    color: var(--brand-red);
    transform: scale(1.1);
}
.floating-header .navbar > .container {
    position: relative;
}

/* --- 2. التحكم في الشعار نفسه --- */
.floating-header .navbar-brand {
    position: absolute;
    top: 90%;
    right: 1rem; /* مسافة من الحافة اليمنى */
    
    /* 
     * السطر السحري:
     * يرفع العنصر للأعلى بمقدار نصف ارتفاعه (50%)، 
     * ثم يحاذيه لليمين بمقدار نصف عرضه (50%).
     * لكن بما أننا في RTL، سنحتاج لتعديل هذا ليعمل مع right.
    */
    transform: translateY(-50%);

    z-index: 10; /* لضمان ظهوره فوق باقي عناصر الهيدر */

    /* تعديل التصميم ليتناسب مع الوضع الجديد */
    background-color: var(--brand-white); 
    padding: 0.0rem; /* هامش داخلي حول الشعار */
    border-radius: 50%; /* حواف دائرية كاملة */
    box-shadow: 0 5px 15px rgba(0, 33, 68, 0.1);
    border: 3px solid rgba(255, 255, 255, 0.5); /* حد أبيض شبه شفاف */
}

/* --- 3. تعديل حجم الشعار والصورة الداخلية --- */
.floating-header .navbar-brand img {
    height: 90px; /* زيادة حجم الصورة */
    width: 95px;
    
}
/* إخفاء نص "جامعة الفرات" بجانب الشعار لتجنب التراكب */
.floating-header .navbar-brand span {
    display: none;
}


/* --- 4. تعديل بسيط على القائمة لإفساح المجال للشعار --- */
/* سنضيف هامشًا يمينيًا للقائمة لتبدأ بعد الشعار */
@media (min-width: 992px) {
    .floating-header .navbar-nav {
        margin-right: 100px; /* اضبط هذه القيمة حسب الحاجة */
    }
}
/*
=====================================================
== ELEGANT ANNOUNCEMENTS BOARD (لوحة الإعلانات الأنيقة) ==
=====================================================
*/
.announcements-board-wrapper {
    background-color: var(--brand-white);
    border-radius: 1.5rem; /* 24px */
    box-shadow: 0 20px 60px rgba(0, 33, 68, 0.1);
    border: 1px solid var(--border-color);
    overflow: hidden; /* مهم لدمج الحواف الدائرية بشكل صحيح */
    
}

/* --- القسم الأيمن (القائمة) --- */
.announcements-list-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.announcements-list-panel .panel-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.announcements-list-panel .panel-header h4 {
    margin: 0;
    font-weight: 800;
    color: var(--brand-dark-blue);
}
.announcements-list-panel .panel-body {
    padding: 0.5rem;
    flex-grow: 1; /* للسماح بالتمرير إذا زاد المحتوى */
    overflow-y: auto;
}

.announcement-item {
    padding: 1.25rem 1rem;
    border-radius: 0.75rem;
    cursor: pointer;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}
.announcement-item:hover {
    background-color: var(--light-gray-bg);
}
/* العنصر النشط */
.announcement-item.active {
    background-color: #e9ecef; /* لون أغمق قليلاً من hover */
}
.announcement-item.active .item-title {
    color: var(--brand-red);
}

.item-category {
    display: block;
    color: var(--brand-red);
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.item-title {
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
    transition: color 0.3s ease;
}
.item-date {
    font-size: 0.85rem;
    color: #6c757d;
}

/* --- القسم الأيسر (العرض الرئيسي) --- */
.announcement-display-panel {
    background: linear-gradient(135deg, 
        rgba(74, 144, 226, 0.05) 0%, 
        rgba(74, 144, 226, 0) 100%
    ); /* تدرج أزرق سماوي خفيف */
    padding: 3rem;
    border-right: 1px solid var(--border-color);
    min-height: 450px;
    position: relative;
    display: flex;
    align-items: center; /* محاذاة عمودية */
    
}
@keyframes fadeInSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px); /* يبدأ من الأسفل قليلاً */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeOutSlideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px); /* يخرج للأعلى قليلاً */
  }
}
.announcement-content {
    /* نجعله يختفي بالكامل بدلاً من display:none للسماح بالأنيميشن */
    position: absolute;
    top: 0;
    left: 0;
    padding: 3rem; /* نفس padding اللوحة الأم */
    width: 100%;
    height: 100%;
    display: flex; /* للسماح بالمحاذاة العمودية */
    flex-direction: column; /* لترتيب العناصر عمودياً */
    align-items: flex-start; /* لمحاذاة العناصر لليمين */
    justify-content: center; /* لمحاذاة العناصر في المنتصف عمودياً */
    
    opacity: 0;
    pointer-events: none; /* لمنع التفاعل معه وهو مخفي */
    transition: opacity 0.4s ease, transform 0.4s ease; /* احتياطي للمتصفحات القديمة */
}
.announcement-content.active {
    opacity: 1;
    pointer-events: auto;
    animation: fadeInSlideUp 0.5s ease-out forwards;
}.announcement-content.exiting {
    animation: fadeOutSlideUp 0.4s ease-in forwards;
}
.content-icon {
    font-size: 2.5rem;
    color: var(--brand-red);
    margin-bottom: 1.5rem;
}
.content-title {
    font-size: 1.8rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
     flex-grow: 0;
}
.content-excerpt {
    color: #555;
    line-height: 1.8;
    margin-bottom: 2rem;
      flex-grow: 1; 
}

/* التجاوبية للجوال */
@media (max-width: 991.98px) {
    
    /* 1. إلغاء التثبيت وإعادة التموضع */
    .faculty-tabs-nav-wrapper {
        position: static; /* إلغاء sticky */
        top: auto;
        z-index: auto;
        margin-bottom: 2rem;
        padding: 0;
        box-shadow: none;
        border: none;
        background-color: transparent;
    }
    
    /* 2. تحويل القائمة إلى عمودي */
    .faculty-tabs-nav-wrapper .nav-pills {
        flex-direction: column;
        justify-content: flex-start;
    }

    /* 3. تعديل تصميم التبويب الواحد */
    .faculty-tabs-nav-wrapper .nav-item {
        margin: 0 0 0.5rem 0;
    }
    .faculty-tabs-nav-wrapper .nav-link {
        justify-content: flex-start;
        width: 100%;
        background-color: var(--brand-white);
        border: 1px solid var(--border-color);
        box-shadow: 0 5px 15px rgba(0,33,68,.05);
    }
    
    /* 4. تعديل المؤشر */
    .faculty-tabs-nav-wrapper .nav-link::after {
        display: none;
    }
    .faculty-tabs-nav-wrapper .nav-link.active {
        background-color: var(--brand-dark-blue);
        color: var(--brand-white);
        border-color: var(--brand-dark-blue);
        border-right: 5px solid var(--brand-red);
    }
    
    /* 5. تعديل هامش المحتوى */
    .faculty-tab-content {
        margin-top: 0; /* لم نعد بحاجة لهامش علوي */
    }

}
/*
===============================================
== HERO SECTION (العودة إلى التصميم المبسط) ==
===============================================
*/

/* استبدل كود .hero-split-content بهذا الكود الأبسط */
.hero-main-content-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    color: rgb(255, 255, 255);
    
}
/* ... باقي كود الـ Hero من (h1, p, buttons) يبقى كما هو ... */


/*
=====================================================
== FLOATING ANNOUNCEMENTS SIDEBAR (شريط الإعلانات العائم) ==
=====================================================
*/
/* أضف هذا الكود بالكامل في نهاية ملف css */


/*
=====================================================
== ANNOUNCEMENTS BOARD - MOBILE RESPONSIVE FIX ==
== (الحل النهائي لتجاوبية لوحة الإعلانات مع الجوال) ==
=====================================================
*/

@media (max-width: 991.98px) {
    
    /* جعل الحاوية الرئيسية تتكيف مع المحتوى العمودي */


    /* تعديل لوحة عرض الإعلان (الجزء الأيسر سابقاً) */
    .announcement-display-panel {
        /* 1. تحويل الفاصل من عمودي إلى أفقي */
        border-right: none;
        border-top: 1px solid var(--border-color);

        /* 2. تعديل الحواف لتناسب الترتيب الجديد */
        /* الحاوية الأم لها radius، لذا لا داعي لتعديلها هنا إذا كان g-0 مستخدماً */
        
        /* 3. تقليل الهوامش الداخلية لتوفير مساحة */
        padding: 2rem;
        min-height: auto; /* إلغاء الارتفاع الأدنى */
    }

    /* تعديل حجم الخطوط في لوحة العرض لتناسب الجوال */
    .content-title {
        font-size: 1.5rem;
    }
    .content-excerpt {
        font-size: 0.95rem;
    }

    /* تعديل قائمة الإعلانات (الجزء الأيمن سابقاً) */
    .announcements-list-panel .panel-header {
        padding: 1.25rem; /* تقليل الهامش الداخلي للعنوان */
    }

    .announcements-list-panel .panel-body {
        max-height: 300px; /* تحديد ارتفاع أقصى للقائمة للسماح بالتمرير إذا كانت طويلة جداً */
    }
}
/*
=====================================================
== INTERACTIVE MAP SECTION (قسم الخريطة التفاعلية) ==
=====================================================
*/
.map-contact-section {
    background-color: var(--body-bg);
}

.map-wrapper {
    border-radius: 1.5rem; /* 24px */
    overflow: hidden; /* ضروري للحواف الدائرية */
    box-shadow: 0 20px 60px rgba(0, 33, 68, 0.1);
    border: 1px solid var(--border-color);
}

/* --- النصف الأيمن (بطاقة المعلومات) --- */
.contact-info-card {
    background-color: var(--brand-dark-blue);
    color: var(--brand-white);
    padding: 2.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.info-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.info-header i {
    font-size: 2.5rem;
    color: var(--brand-gold);
    margin-bottom: 1rem;
}
.info-header h4 {
    color: var(--brand-white);
}

.info-body {
    flex-grow: 1; /* يدفع الـ footer للأسفل */
}

.info-item {
    display: flex;
    gap: 1.5rem; /* مسافة بين الأيقونة والنص */
    margin-bottom: 1.5rem;
}
.info-item i {
    font-size: 1.5rem;
    color: var(--brand-gold);
    margin-top: 5px;
}
.info-item h6 {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}
.info-item p {
    color: var(--brand-white);
    font-weight: 500;
    margin: 0;
}

/* --- النصف الأيسر (الخريطة) --- */
.map-iframe-container {
    height: 100%;
    min-height: 450px;
}
.map-iframe-container iframe {
    width: 100%;
    height: 100%;
    
    /* التأثير الفني */
    filter: grayscale(90%);
    transition: filter 0.5s ease;
}
.map-iframe-container:hover iframe {
    filter: grayscale(0%);
}

/* التجاوبية للجوال */
@media (max-width: 991px) {
    /* عكس الترتيب على الجوال (البطاقة أولاً ثم الخريطة) */
    .map-wrapper .row {
        flex-direction: column-reverse;
    }
}
/*
=====================================================
== INTEGRATED FACULTY HUB PAGE (صفحة الكلية المتكاملة) ==
=====================================================
*/

/* --- 1. Hero Section --- */
.faculty-hero {
    padding: 6rem 0;
    position: relative;
    background-size: cover; background-position: center; color: var(--brand-white);
    
}
.faculty-hero::before {
    content:''; position: absolute; top:0; left:0; width:100%; height:100%;
    background: rgba(0, 51, 102, 0.75);
}
.faculty-hero-content { position: relative; z-index: 2; }
.faculty-hero .faculty-logo { height: 120px; border-radius: 50%; padding: 10px; background: rgba(255,255,255,0.8); box-shadow: 0 0 25px rgba(0,0,0,0.3); }
.faculty-hero .faculty-title { font-size: 3.5rem; font-weight: 800; color: var(--brand-white); margin-top: 1.5rem; }
.faculty-hero .faculty-subtitle { font-size: 1.2rem; color: rgba(255,255,255,0.8); }

/* --- 2. Hub Links --- */
.faculty-hub-section {
    padding: 3rem 0;
    background-color: var(--light-gray-bg);
    border-bottom: 1px solid var(--border-color);
}
.hub-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background-color: var(--brand-white); text-align: center;
    padding: 2.5rem 1.5rem; border-radius: 1rem; text-decoration: none;
    box-shadow: 0 5px 15px rgba(0,33,68,.05); transition: all 0.3s ease;
}
.hub-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,33,68,.1);
    background-color: var(--brand-dark-blue);
}
.hub-icon { font-size: 2.5rem; color: var(--brand-red); transition: all 0.3s ease; }
.hub-title { color: var(--brand-dark-blue); font-weight: 700; margin-top: 1rem; transition: all 0.3s ease; }
.hub-card:hover .hub-icon, .hub-card:hover .hub-title { color: var(--brand-white); }

/* --- 3. About Section (Tabs) --- */
.about-tabs .nav-link { font-weight: 700; color: #6c757d; }
.about-tabs .nav-link.active { color: var(--brand-red); background-color: transparent; border-bottom: 2px solid var(--brand-red); border-radius: 0;}
.about-text { font-size: 1.1rem; line-height: 2; }

/* --- 4. Departments & Admin --- */
.section-title-simple {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 2rem;
    border-right: 4px solid var(--brand-red);
    padding-right: 1rem;
}
.departments-list { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.department-item {
    background-color: var(--brand-white);
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 50px; font-weight: 500;
}
.admin-link-card {
    display: flex; gap: 1.5rem; align-items: center;
    background-color: var(--brand-white); text-decoration: none;
    padding: 1.5rem; margin-bottom: 1rem; border-radius: 1rem;
    border: 1px solid var(--border-color); transition: all 0.3s ease;
}
.admin-link-card:hover { border-color: var(--brand-red); background-color: #fff; box-shadow: 0 10px 20px rgba(0,33,68,.08); }
.admin-link-card i { font-size: 2rem; color: var(--brand-red); }
.admin-link-text h6 { font-weight: 700; color: var(--brand-dark-blue); }
.admin-link-text p { font-size: 0.9rem; color: #6c757d; margin: 0; }

/* --- 5. Latest Updates --- */
.update-card {
    background-color: var(--light-gray-bg);
    border: 1px solid var(--border-color); border-radius: 1rem;
    padding: 1.5rem; height: 100%;
}
.update-type {
    display: inline-block; padding: 0.25rem 0.75rem; border-radius: 50px;
    font-size: 0.8rem; font-weight: 700; margin-bottom: 1rem;
}
.update-type[data-type="red"] { background-color: rgba(211,47,47,0.1); color: var(--brand-red); }
.update-type[data-type="blue"] { background-color: rgba(0,51,102,0.1); color: var(--brand-dark-blue); }
.update-title a { color: var(--text-dark); text-decoration: none; font-weight: 700; }
.update-link { font-size: 0.9rem; font-weight: 700; text-decoration: none; color: var(--brand-dark-blue); }
/*
=====================================================
== STUDENT HUB FACULTY PAGE (صفحة الكلية المتكاملة) ==
=====================================================
*/
/* --- 1. Main Tabs Navigation --- */
/*
=====================================================
== FACULTY MINISITE PAGE - FINAL CSS (صفحة الكلية النهائية) ==
=====================================================
*/
/* --- 1. الهيكل العام والـ Tabs الجانبية --- */
.faculty-hub-section { background-color: var(--body-bg); }
/*
=====================================================
== HORIZONTAL FACULTY TABS (شريط التبويبات الأفقي للكلية) ==
=====================================================
*/

/* --- الحاوية الرئيسية للشريط --- */
.faculty-tabs-nav-wrapper {
    background-color: var(--brand-white);
    padding: 0.1rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(0,33,68,.08);
    border: 1px solid var(--border-color);
    top: 90px; /* المسافة من أعلى الصفحة ليعمل sticky-top بشكل صحيح (يجب أن تكون أكبر من ارتفاع الهيدر) */
    z-index: 998;
}

/* شريط التبويبات (Pills) */
.faculty-tabs-nav-wrapper .nav-pills {
    position: relative;
    justify-content: space-around; /* توزيع الروابط بالتساوي */
}

/* الرابط (التبويب) الواحد */
.faculty-tabs-nav-wrapper .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    padding: 1rem;
    border-radius: 0.5rem;
    background: none;
    border: none;
    transition: all 0.3s ease;
    position: relative; /* ضروري لعمل المؤشر السفلي */
    overflow: hidden; /* لإخفاء أجزاء المؤشر أثناء الحركة */
}

/* المؤشر السفلي للتبويب */
.faculty-tabs-nav-wrapper .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--brand-red);
    transform: translateY(100%); /* يبدأ مخفياً بالأسفل */
    transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1); /* انتقال مرن */
}

/* حالة المرور والنشط */
.faculty-tabs-nav-wrapper .nav-link:hover {
    color: var(--brand-red);
}
.faculty-tabs-nav-wrapper .nav-link.active {
    color: var(--brand-red);
    background-color: var(--light-gray-bg);
}

/* حركة المؤشر السفلي عند التحديد */
.faculty-tabs-nav-wrapper .nav-link.active::after {
    transform: translateY(0);
}


/* تعديلات على محتوى التبويبات ليناسب الشريط الجديد */
.faculty-tab-content {
    background-color: var(--brand-white);
    padding: 2.5rem;
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0,33,68,.08);
}


/* --- التجاوبية (Responsiveness) --- */
@media (max-width: 991px) {
    .faculty-tabs-nav-wrapper .nav-pills {
        flex-wrap: nowrap; /* منع الالتفاف */
        overflow-x: auto; /* السماح بالتمرير الأفقي */
        justify-content: flex-start;
        padding-bottom: 0.5rem; /* مساحة لشريط التمرير */
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    .faculty-tabs-nav-wrapper .nav-pills::-webkit-scrollbar {
        display: none; /* إخفاء شريط التمرير في Chrome, Safari */
    }

    .faculty-tabs-nav-wrapper .nav-item {
        flex-shrink: 0; /* منع انكماش العناصر */
    }
    
    .faculty-tab-content {
        padding: 1.5rem;
    }
}
.tab-content .fade-in-section { animation: fadeIn 0.8s ease-out; }

/* --- 2. التنسيقات العامة داخل الـ Tabs --- */
.tab-section-title {
    font-weight: 800; color: var(--brand-dark-blue);
    margin-top: 2rem; margin-bottom: 2rem; 
    padding-bottom: 1rem;
    border-bottom: 3px solid var(--brand-red);
    display: inline-block;
}
.tab-section-title:first-child { margin-top: 0; }
.about-text { font-size: 1.1rem; line-height: 2; }
/*
=====================================================
== HONOR ROLL PROFILE CARDS (بطاقات الشرف الشخصية) ==
=====================================================
*/
.honor-profile-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background-color: var(--brand-white);
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 20px rgba(0,33,68,.06);
    transition: all 0.3s ease-in-out;
    height: 100%;
}
.honor-profile-card:hover {
    transform: scale(1.03);
    box-shadow: 0 15px 35px rgba(0,33,68,.1);
}

.profile-image {
    position: relative;
    flex-shrink: 0;
}
.profile-image img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    
}
/* تخصيص إطار صورة هيئة التدريس */
.honor-profile-card.faculty .profile-image img {
    border-color: var(--brand-gold);
}
/* تخصيص إطار صورة الطلاب */
.honor-profile-card.student .profile-image img {
    border-color: var(--brand-red);
}

/* شارة التمييز */
.profile-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 32px;
    height: 32px;
    background-color: var(--brand-dark-blue);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}
.profile-badge > span { display: none; } /* لإخفاء النص في التصميم الحالي */


.profile-info {
    text-align: right;
}
.profile-name {
    font-weight: 800;
    margin-bottom: 0.5rem;
}
.profile-achievement {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

/* الفاصل الأفقي بين الفئتين */
.honor-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(to left, transparent, var(--border-color), transparent);
    margin: 3rem 0;
}

/* --- 3. تصميم الـ Tab الرئيسي (العميد، الشرف، الخريطة، الإحصائيات) --- */
/* (بطاقات العميد والشرف والإحصائيات من المرة السابقة تعمل هنا) */

/* --- 4. تصميم الـ Tab حول الكلية --- */
.tag-list { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem;}
.tag { background-color: var(--light-gray-bg); padding: 0.5rem 1.25rem; border: 1px solid var(--border-color); border-radius: 50px; font-weight: 500; }

/* --- 5. تصميم الـ Tab الهيئة التدريسية --- */
/* (بطاقات أعضاء هيئة التدريس من المرة السابقة تعمل هنا) */

/* --- 6. تصميم الـ Tab الأخبار والإعلانات --- */
.updates-list-wrapper { max-height: 400px; overflow-y: auto; padding-right: 1rem; }
.update-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--border-color); }
.update-item:first-child { border-top: 1px solid var(--border-color); }
.update-item h6 { margin: 0; }
.update-item h6 a { color: var(--text-dark); text-decoration: none; font-weight: 700; }
.update-item .date { font-size: 0.9rem; color: #6c757d; flex-shrink: 0; }

/* --- 7. تصميم الـ Tab دليل الطالب --- */
/* (بطاقات الموارد من المرة السابقة تعمل هنا) */

/* --- 8. تصميم الـ Tab الدراسات العليا --- */
.link-list { list-style-type: none; padding-right: 0; }
.link-list li { margin-bottom: 0.75rem; }
.link-list a { text-decoration: none; font-weight: 500; color: var(--text-dark); }
.link-list a:hover { color: var(--brand-red); }
.link-list a::before { content: '•'; color: var(--brand-red); font-weight: bold; display: inline-block; width: 1em; margin-left: 0.5em; }
.faculty-main-nav {
    background-color: var(--brand-white);
    box-shadow: 0 5px 15px rgba(0,33,68,.08);
    border-bottom: 1px solid var(--border-color);
    padding: 0.5rem 0;
    z-index: 999; /* لتبقى فوق المحتوى */
}
.faculty-main-nav .nav-pills .nav-item {
    margin: 0 0.25rem;
}
.faculty-main-nav .nav-link {
    font-weight: 700; color: var(--text-dark); padding: 0.75rem 1.5rem;
    border-radius: 0.5rem; transition: all 0.3s ease;
}
.faculty-main-nav .nav-link.active,
.faculty-main-nav .nav-link:hover {
    color: var(--brand-white); background-color: var(--brand-red);
}

.faculty-tab-content { background-color: var(--body-bg); }


/* --- 2. Tab: Overview --- */
.info-card {
    background-color: var(--light-gray-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem; padding: 2rem;
    height: 100%; text-align: center;
}
.info-card.highlight {
    background-color: var(--brand-dark-blue); color: var(--brand-white);
    border-color: var(--brand-dark-blue);
}
.info-card.highlight p { color: rgba(255,255,255,0.8); }
.info-card.highlight .info-icon { background-color: rgba(255,255,255,0.1); color: var(--brand-white);}
.info-icon {
    width: 60px; height: 60px; border-radius: 50%;
    background-color: var(--brand-white); color: var(--brand-red);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.8rem; margin-bottom: 1.5rem;
}
.info-card h3, .info-card h5 { font-weight: 700; }
.info-card p { margin-top: 1rem; }

/* --- 3. Tab: Updates --- */
.section-title-simple { /* Re-style this from previous attempts */
    font-size: 1.8rem; font-weight: 800; color: var(--brand-dark-blue);
    margin-bottom: 2rem; border-bottom: 3px solid var(--brand-red);
    padding-bottom: 1rem; display: inline-block;
}

/* --- 4. Tab: Student Affairs --- */
.checklist { list-style: none; padding: 0; margin-top: 1rem; }
.checklist li { margin-bottom: 0.75rem; font-weight: 500; }
.checklist i { margin-left: 0.5rem; }

.resource-card {
    display: flex; align-items: center; gap: 1rem;
    background-color: var(--brand-white); text-decoration: none;
    padding: 1.5rem; border-radius: 0.75rem; border: 1px solid var(--border-color);
    height: 100%; transition: all 0.3s ease;
}
.resource-card:hover {
    transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,33,68,.08);
    border-color: var(--brand-red);
}
.resource-card i { font-size: 1.5rem; color: var(--brand-red); }
.resource-card span { font-weight: 700; color: var(--brand-dark-blue); }

.resource-card.small-card {
    flex-direction: column; align-items: flex-start;
    background-color: var(--light-gray-bg);
}
.resource-card.small-card h6 { font-weight: 700; }
.resource-card.small-card p { font-size: 0.9rem; color: #6c757d; margin: 0; }

.resource-card.compact {
    padding: 0.75rem 1rem; flex-direction: column;
    text-align: center; gap: 0.5rem;
}
.resource-card.compact i { margin-bottom: 0.25rem; }
/* --- تعديلات على قسم النبذة في صفحة الكلية --- */
/*
===============================================
== UNIFYING BACKGROUNDS (توحيد الخلفيات) ==
===============================================
*/

/* أضف هذا في نهاية ملف style.css */

/*
 * هذه القاعدة تجبر جميع الأقسام الرئيسية في الصفحة على أن تكون شفافة،
 * وتكشف عن خلفية body التي تحتوي على النمط الزخرفي.
 * استخدمنا !important لضمان تجاوز أي قواعد قديمة.
*/
.key-sections,
.research-section,
.news-section,
.colleges-section,
.directorates-grid-section,
.explore-search-section,
.announcements-board-section,
.dynamic-news-section,
.faculty-hub-section,
.cascading-updates-section,
.results-reveal-section,
.about-section {
    background-color: transparent !important;
}

/*
===============================================
== PREMIUM DEAN CARD (بطاقة العميد الفاخرة) ==
===============================================
*/

.dean-premium-card {
    
    display: flex;
    flex-direction: row; /* الوضع الافتراضي للكمبيوتر */
   
    border-radius: 1.5rem; /* حواف دائرية كبيرة */
    box-shadow: 0 15px 40px rgba(0, 33, 68, 0.08);
    border: 0px;
    border-right-color: #e9ecef;
    border-bottom-color: #e9ecef;
    overflow: hidden;
    position: relative;
    transition: all 0.4s ease;
    margin-bottom: 3rem; /* مسافة عن لائحة الشرف */
    background: 
    linear-gradient(rgba(255, 255, 255, 0.95), rgba(224, 224, 224, 0.76));
    
    
}
/* تأثير التوهج عند المرور */
.dean-premium-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 1.5rem;
    box-shadow: 0 0 0 3px transparent;
    transition: box-shadow 0.4s ease;
    pointer-events: none; /* للسماح بالتفاعل مع البطاقة نفسها */
}
.dean-premium-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0, 33, 68, 0.12);
}
.dean-premium-card:hover::after {
    box-shadow: 0 0 0 3px var(--brand-red);
}


/* --- الجزء الخاص بالصورة --- */
.dean-image-wrapper {
    flex-basis: 300px; /* عرض ثابت للصورة */
    flex-shrink: 0;
    
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: 
        linear-gradient(rgba(255, 255, 255, 0.95), rgba(224, 224, 224, 0.76));

    /* خصائص تطبق على الطبقة السفلية (الصورة) */
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center;
}
.dean-image-wrapper img {
    width: 280px;
    height: 280px;
    object-fit: cover;
    border-radius: 50%;
    border: 8px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 10px 20px rgba(0,0,0,0.3);
    transition: transform 0.4s ease;
}
.dean-premium-card:hover .dean-image-wrapper img {
    transform: scale(1.05);
    
}

/* --- الجزء الخاص بالمعلومات --- */
.dean-info-wrapper {
    padding: 2.5rem;
    flex-grow: 1;
}

.dean-title { /* منصب "عميد الكلية" */
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand-red);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.dean-name { /* اسم العميد */
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    font-weight: 800;
}

/* الفاصل الزخرفي */
.divider {
    height: 4px;
    width: 80px;
    background: var(--brand-gold);
    border-radius: 2px;
    margin-bottom: 1.5rem;
}
.dean-message { /* كلمة العميد */
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--text-muted);
}

/* --- التجاوبية مع الجوال --- */
@media (max-width: 991px) {
    .dean-premium-card {
        flex-direction: column; /* تحويلها إلى عمودي */
    }
    .dean-image-wrapper {
        flex-basis: auto; /* إلغاء العرض الثابت */
        padding: 2rem 1rem;
    }
     .dean-info-wrapper {
        text-align: center; /* توسيط النصوص */
    }
    .divider {
        margin-left: auto;
        margin-right: auto;
    }
}
/* أنماط فيديو الهيرو */
.hero-video-container {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    
}

.hero-video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}

/* == GLASSMORPHISM EFFECT FOR HERO VIDEO == */
/* ========================================= */
.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 1. الخلفية أصبحت شبه شفافة (أقل كثافة من السابق) */
   
}

/* تحسينات للهيدر مع تأثير التصغير */
.floating-header {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: top center;
    will-change: transform, opacity; /* لتحسين الأداء */
}

.floating-header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 33, 68, 0.1);
}

/* تأكد من أن الشعار يتناسب مع التصغير */
.floating-header .navbar-brand {
    transition: all 0.3s ease;
}

.floating-header.scrolled .navbar-brand img {
    height: 60px; /* تصغير الشعار عند التمرير */
    width: 60px;
}

/* تحسينات للقائمة عند التصغير */
.floating-header.scrolled .navbar-nav .nav-link {
    padding: 0.4rem 1rem;
    font-size: 0.95rem;
}
/* تحسينات لقسم الهيرو مع تأثير التصغير */
.hero-slider-section {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: top center;
    will-change: transform, opacity; /* لتحسين الأداء */
    
}

/* تأثير parallax للفيديو */
.hero-video-container {
    transition: transform 0.3s ease-out;
}

/* ======== أنماط قسم الأخبار المحسن مع السلايدر ======== */


.main-news-slider {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,33,68,.15);
}

.main-news-slider .carousel {
    border-radius: 1.5rem;
}

.main-news-slider .carousel-inner {
    border-radius: 1.5rem;
}

.main-news-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 500px;
    background: var(--brand-white);
    
}

.main-news-card .news-image {
    position: relative;
    overflow: hidden;
}

.main-news-card .news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.main-news-card:hover .news-image img {
    transform: scale(1.05);
}

.main-news-card .news-content {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.main-news-card .news-category {
    display: inline-block;
    background: var(--brand-dark-blue);
    color: var(--brand-white);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.main-news-card .news-title {
    color: var(--brand-dark-blue);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 1.5rem;
}

.main-news-card .news-excerpt {
    color: #6c757d;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.main-news-card .news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.main-news-card .news-date {
    color: var(--brand-red);
    font-weight: 600;
}

.main-news-card .read-more {
    color: var(--brand-dark-blue);
    text-decoration: none;
    font-weight: 700;
    transition: color 0.3s ease;
}

.main-news-card .read-more:hover {
    color: var(--brand-red);
}

/* عناصر تحكم السلايدر المخصصة */
.carousel-controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 5;
    pointer-events: none;
}

.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    width: 60px;
    height: 60px;
    background: var(--brand-white);
    border: none;
    border-radius: 50%;
    color: var(--brand-dark-blue);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(0,33,68,.2);
    transition: all 0.3s ease;
    pointer-events: all;
    opacity: 0;
}

.main-news-slider:hover .carousel-control-prev,
.main-news-slider:hover .carousel-control-next {
    opacity: 1;
}

.carousel-control-prev {
    left: 2rem;
}

.carousel-control-next {
    right: 2rem;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: var(--brand-dark-blue);
    color: var(--brand-white);
    transform: scale(1.1);
}

/* مؤشرات السلايدر */
.carousel-indicators {
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
    margin: 0;
    gap: 0.5rem;
}

.carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--brand-white);
    background: transparent;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.carousel-indicators button.active {
    background: var(--brand-white);
    opacity: 1;
    transform: scale(1.2);
}

/* شبكة الأخبار الثانوية */
.secondary-news-grid .news-card {
    background: var(--brand-white);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,33,68,.08);
    transition: all 0.3s ease;
    height: 100%;
}

.secondary-news-grid .news-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,33,68,.15);
}

.secondary-news-grid .news-image {
    height: 200px;
    overflow: hidden;
}

.secondary-news-grid .news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.secondary-news-grid .news-card:hover .news-image img {
    transform: scale(1.1);
}

.secondary-news-grid .news-content {
    padding: 1.5rem;
}

.secondary-news-grid .news-category {
    display: inline-block;
    background: rgba(0,51,102,0.1);
    color: var(--brand-dark-blue);
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.secondary-news-grid .news-title {
    color: var(--brand-dark-blue);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

.secondary-news-grid .news-excerpt {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.secondary-news-grid .news-date {
    color: var(--brand-red);
    font-size: 0.85rem;
    font-weight: 600;
}

/* التجاوبية */
@media (max-width: 991px) {
    .main-news-card {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    
    .main-news-card .news-image {
        height: 300px;
    }
    
    .main-news-card .news-content {
        padding: 2rem;
    }
    
    .main-news-card .news-title {
        font-size: 1.5rem;
    }
    
    .main-news-card .news-meta {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        width: 50px;
        height: 50px;
        opacity: 0.7;
    }
    
    .carousel-control-prev {
        left: 1rem;
    }
    
    .carousel-control-next {
        right: 1rem;
    }
}

@media (max-width: 768px) {
    .carousel-indicators {
        bottom: 1rem;
    }
    
    .carousel-indicators button {
        width: 8px;
        height: 8px;
    }
}
/* ======== أنماط قسم الإعلانات المحسّن ======== */


.announcement-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.filter-btn {
    background: var(--brand-white);
    border: 2px solid var(--border-color);
    color: var(--text-dark);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.filter-btn.active,
.filter-btn:hover {
    background: var(--brand-dark-blue);
    border-color: var(--brand-dark-blue);
    color: var(--brand-white);
    transform: translateY(-2px);
}

.announcements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

.announcement-card {
    background: var(--brand-white);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 5px 20px rgba(0,33,68,.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.announcement-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,33,68,.15);
}

.announcement-card.urgent {
    border-left: 4px solid var(--brand-red);
    background: linear-gradient(135deg, #fff, #fff5f5);
}

.card-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--brand-red);
    color: var(--brand-white);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.category-tag {
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--brand-white);
}

.admission-tag { background: var(--brand-dark-blue); }
.results-tag { background: var(--brand-red); }
.instructions-tag { background: #17a2b8; }
.courses-tag { background: #28a745; }
.general-tag { background: #6c757d; }
.competitions-tag { background: #ffc107; color: #212529; }

.date-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6c757d;
    font-size: 0.85rem;
    font-weight: 500;
}

.card-body {
    margin-bottom: 1.5rem;
}

.card-title {
    color: var(--brand-dark-blue);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.card-excerpt {
    color: #6c757d;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.deadline-counter {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(220, 53, 69, 0.1);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    color: var(--brand-red);
    font-weight: 600;
    margin-bottom: 1rem;
}

.stats-info {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.features-list {
    list-style: none;
    padding: 0;
    margin-bottom: 1rem;
}

.features-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    color: #495057;
}

.features-list li i {
    color: var(--brand-red);
    font-size: 0.8rem;
}

.course-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.prizes-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.prize-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
}

.prize-item .gold { color: #ffc107; }
.prize-item .silver { color: #6c757d; }

.card-footer {
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
}

.card-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-primary {
    background: var(--brand-dark-blue);
    border-color: var(--brand-dark-blue);
    color: var(--brand-white);
    font-weight: 600;
}

.btn-primary:hover {
    background: #002244;
    border-color: #002244;
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--border-color);
    color: var(--text-dark);
    font-weight: 600;
}

.btn-outline:hover {
    border-color: var(--brand-dark-blue);
    background: var(--brand-dark-blue);
    color: var(--brand-white);
}

.card-meta {
    display: flex;
    gap: 1.5rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6c757d;
    font-size: 0.9rem;
}

/* تأثيرات دخول البطاقات */
.announcement-card {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease forwards;
}

.announcement-card:nth-child(1) { animation-delay: 0.1s; }
.announcement-card:nth-child(2) { animation-delay: 0.2s; }
.announcement-card:nth-child(3) { animation-delay: 0.3s; }
.announcement-card:nth-child(4) { animation-delay: 0.4s; }
.announcement-card:nth-child(5) { animation-delay: 0.5s; }
.announcement-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* التجاوبية */
@media (max-width: 991px) {
    .announcements-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    }
    
    .announcement-filters {
        justify-content: center;
        margin-top: 1rem;
    }
    
    .card-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .card-actions {
        flex-direction: column;
    }
    
    .card-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    .stats-info {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .card-meta {
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (max-width: 768px) {
    .announcements-grid {
        grid-template-columns: 1fr;
    }
    
    .announcement-card {
        padding: 1.25rem;
    }
}
/* ======== تأثيرات التمرير المتقدمة ======== */

/* تأثيرات الظهور التدريجي */
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* تأثيرات خاصة للإعلانات */
.announcement-card {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.announcement-card.scroll-reveal {
    transform: translateX(-50px);
    opacity: 0;
}

.announcement-card.scroll-reveal.revealed {
    transform: translateX(0);
    opacity: 1;
}

/* تأثيرات خاصة للأخبار */
.news-card.scroll-reveal {
    transform: scale(0.9) translateY(50px);
    opacity: 0;
}

.news-card.scroll-reveal.revealed {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* تأثير السلايدر الرئيسي */
.main-news-card.scroll-reveal {
    transform: translateY(100px) rotateX(10deg);
    opacity: 0;
}

.main-news-card.scroll-reveal.revealed {
    transform: translateY(0) rotateX(0);
    opacity: 1;
}

/* تأثير التمويج (Ripple Effect) */
.ripple-effect {
    position: relative;
    overflow: hidden;
}

.ripple-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(74, 144, 226, 0.1) 0%, 
        rgba(74, 144, 226, 0) 50%, 
        rgba(74, 144, 226, 0.1) 100%);
    transform: translateX(-100%);
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
}

.ripple-effect.revealed::before {
    transform: translateX(100%);
}

/* تأثير الظل المتحرك */
.floating-shadow {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 5px 15px rgba(0,33,68,.1);
}

.floating-shadow.revealed {
    box-shadow: 0 20px 40px rgba(0,33,68,.15),
                0 0 0 1px rgba(74, 144, 226, 0.1);
}

/* تأثير التدرج اللوني */
.gradient-reveal {
    position: relative;
}

.gradient-reveal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        var(--brand-light-blue) 0%, 
        transparent 30%, 
        transparent 70%, 
        var(--brand-red) 100%);
    opacity: 0;
    transition: opacity 1s ease;
    z-index: -1;
    border-radius: inherit;
}

.gradient-reveal.revealed::after {
    opacity: 0.03;
}

/* تأثير الكتابة النصي */
.text-reveal {
    position: relative;
    overflow: hidden;
}

.text-reveal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--brand-dark-blue);
    transform: translateX(-100%);
    transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 2;
}

.text-reveal.revealed::before {
    transform: translateX(100%);
}

/* تأثير البارالاكس للخلفيات */
.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* تأثيرات متداخلة للعناصر الداخلية */
.stagger-item {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stagger-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* تأثير الاهتزاز الخفيف */
.vibrate-on-reveal {
    animation: gentleVibrate 0.8s ease-out;
}

@keyframes gentleVibrate {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
}

/* تأثير الدوران الثلاثي الأبعاد */
.rotate-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.rotate-3d.scroll-reveal {
    transform: rotateY(15deg) translateZ(50px);
    opacity: 0;
}

.rotate-3d.scroll-reveal.revealed {
    transform: rotateY(0) translateZ(0);
    opacity: 1;
}

/* تأثير التلاشي المتسلسل */
.fade-sequence > * {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-sequence.revealed > * {
    opacity: 1;
    transform: translateY(0);
}

.fade-sequence.revealed > *:nth-child(1) { transition-delay: 0.1s; }
.fade-sequence.revealed > *:nth-child(2) { transition-delay: 0.2s; }
.fade-sequence.revealed > *:nth-child(3) { transition-delay: 0.3s; }
.fade-sequence.revealed > *:nth-child(4) { transition-delay: 0.4s; }
.fade-sequence.revealed > *:nth-child(5) { transition-delay: 0.5s; }
/* ======== مؤشرات التمرير الجانبية ======== */
.scroll-indicators {
    position: fixed;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 51, 102, 0.3);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.indicator.active {
    background: var(--brand-red);
    transform: scale(1.3);
    box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.3);
}

.indicator::before {
    content: attr(data-section);
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--brand-dark-blue);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.indicator:hover::before {
    opacity: 1;
}

/* التجاوبية للمؤشرات */
@media (max-width: 768px) {
    .scroll-indicators {
        right: 1rem;
    }
    
    .indicator::before {
        display: none;
    }
}
/*
=====================================================
== RESULTS REVEAL PANEL - FINAL & FIXED CSS ==
=====================================================
*/
.results-reveal-section {
    background-color: var(--light-gray-bg);
    
}

.explorer-panel {
    background-color: var(--brand-white);
    border-radius: 1rem;
    box-shadow: 0 15px 50px rgba(0, 33, 68, 0.1);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --- الهيدر (العنوان وزر الرجوع) --- */
.explorer-header {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background-color: #fcfdff;
}
.explorer-title {
    margin: 0;
    flex-grow: 1;
    text-align: center;
    color: var(--brand-dark-blue);
    font-weight: 800;
}
.explorer-back-btn {
    background: transparent; border: 1px solid var(--border-color);
    color: var(--text-dark); border-radius: 50%;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease;
}
.explorer-back-btn:disabled {
    opacity: 0.3; cursor: not-allowed;
}
.explorer-back-btn:not(:disabled):hover {
    background-color: var(--light-gray-bg);
}

/* --- شريط مسار التصفح --- */
.explorer-breadcrumb {
    padding: 0.5rem 1.5rem;
    background-color: var(--light-gray-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex; flex-wrap: wrap; gap: 0.25rem;
    min-height: 38px;
}
.explorer-breadcrumb a {
    color: #6c757d; text-decoration: none;
    font-weight: 500; font-size: 0.9rem;
}
.explorer-breadcrumb a:not(.active):hover { text-decoration: underline; }
.explorer-breadcrumb a.active { color: var(--brand-red); font-weight: 700; }
.explorer-breadcrumb a:not(:last-child)::after { content: '>'; margin: 0 0.5rem; color: #ced4da;}

/* --- حاوية عرض المحتوى --- */
.explorer-content-container {
    min-height: 450px;
    position: relative;
    padding: 0.5rem;
    transition: opacity 0.3s ease;
}
.explorer-content-container.is-loading {
    opacity: 0;
}

/* العنصر (الرابط) الواحد */
.explorer-item {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}
.explorer-item:hover {
    background-color: #f8f9fa;
    border-color: var(--border-color);
    transform: translateX(5px);
}
.explorer-item i {
    color: var(--brand-red);
    width: 40px;
    font-size: 1.25rem;
}
.explorer-item span { flex-grow: 1; }
.item-arrow {
    font-size: 0.9rem; color: #ced4da;
    transition: transform 0.3s ease;
}
.explorer-item:hover .item-arrow {
    transform: translateX(-5px);
    color: var(--brand-red);
}

.loader-container { padding: 5rem 0; display: flex; justify-content: center; }
.empty-message { text-align: center; padding: 5rem 0; color: #eef1f3; font-size: 1.1rem; }
 

/* ============================================================== */
/* == START: PROFESSIONAL UNIVERSITY HEADER V4.1 (النسخة المعدلة) == */
/* ============================================================== */

/* --- 1. تهيئة عامة للهيدر والجسم --- */
/* تعديل الـ padding للجسم ليتناسب مع الهيدر الجديد (سيتم تحديثه عبر JS) */
body {
    padding-top: 140px; /* قيمة أولية، سيتم تعديلها بواسطة JS */
    transition: padding-top 0.4s ease;
}

#siteHeader {
    transition: all 0.4s ease;
    box-shadow: 0 5px 20px rgba(0,33,68,.1);
}

/* --- 2. تصميم الشريط العلوي (Pre-header) --- */
.pre-header {
    background-color: var(--brand-dark-blue);
    color: rgba(255,255,255,0.7);
    padding: 0.4rem 3; /* --- تعديل: تم تصغير الـ padding --- */
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);

    /* --- تعديل: إضافة الخصائص اللازمة للحركة العمودية الناعمة --- */
    overflow: hidden; /* لإخفاء المحتوى أثناء تقلص الارتفاع */
    max-height: 50px; /* قيمة أكبر من الارتفاع الفعلي للسماح بالتقلص */
    transition: 
        max-height 0.4s ease, 
        padding 0.4s ease, 
        opacity 0.2s ease;
}

.pre-header a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}
.pre-header a:hover {
    color: var(--brand-white);
}

.ministry-logo { display: flex; align-items: center; }
.ministry-logo img { height: 35px; margin-left: 10px; filter: brightness(0) invert(1) opacity(0.8); }
.ministry-logo span { font-weight: 500; }
.info-item i { color: var(--brand-gold); margin-left: 5px; }
.pre-header .social-icons { margin-left: 1.5rem; display: flex; gap: 1rem; }
.pre-header .social-icons a { font-size: 1rem; }
.lang-switcher { border-right: 1px solid rgba(255,255,255,0.1); padding-right: 1.5rem; }
.lang-switcher a { font-weight: 700; }
.lang-switcher i { margin-left: 5px; }

/* --- 3. تصميم الشريط الرئيسي (Main Header) --- */
.main-header .navbar {
    padding: 0.05rem 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transition: all 0.4s ease;
    font-size: 1rem;
}

/* --- الشعار --- */
.navbar-brand { display: flex; align-items: center; gap: 15px; }
.navbar-brand img { height: 70px; width: 70px; border-radius: 50%; border: 3px solid var(--brand-white); box-shadow: 0 4px 10px rgba(0,33,68,.1); transition: all 0.4s ease; }
.brand-text { display: flex; flex-direction: column; }
.brand-text .main-title { font-weight: 800; color: var(--brand-dark-blue); font-size: 1.4rem; line-height: 1.2; }
.brand-text .sub-title { font-size: 0.8rem; color: #6c757d; text-transform: uppercase; }

/* --- روابط القائمة --- */
.main-header .navbar-nav .nav-link { font-weight: 700; color: var(--text-dark); padding: 0.5rem 1.25rem; position: relative; transition: color 0.3s ease; }
.main-header .navbar-nav .nav-link::before { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background-color: var(--brand-red); border-radius: 3px; transition: width 0.3s ease; }
.main-header .nav-link.active,
.main-header .nav-link:hover { color: var(--brand-red); }
.main-header .nav-link.active::before,
.main-header .nav-link:hover::before,
.main-header .dropdown-mega:hover > .nav-link::before { width: 25px; }
.header-actions .btn-brand-red { border-radius: 50px; font-weight: 700; padding: 0.6rem 1.5rem; }
.header-actions .header-icon-link { font-size: 1.3rem; color: var(--text-dark); transition: color 0.3s ease; }
.header-actions .header-icon-link:hover { color: var(--brand-red); }

/* --- 4. حالة التمرير للأسفل (Scrolled State) --- */

/* --- تعديل: إخفاء الشريط العلوي عبر تصغير ارتفاعه إلى صفر --- */
/* هذه الطريقة تجعل الشريط الرئيسي يصعد لأعلى بشكل تلقائي */
#siteHeader.scrolled .pre-header {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    border: none;
}
/* تصغير الشريط الرئيسي */
#siteHeader.scrolled .main-header .navbar {
    padding: 0.12rem 0;
    background: rgba(255, 255, 255, 0.9);
}
/* تصغير الشعار */
#siteHeader.scrolled .navbar-brand img {
    height: 30px;
    width: 31px;
}
/* تصغير خطوط الشعار النصية */
#siteHeader.scrolled .brand-text .main-title { font-size: 1rem; }
#siteHeader.scrolled .brand-text .sub-title { font-size: 0.0rem; }

/* --- 5. التجاوبية مع الجوال (Mobile Responsiveness) --- */
@media (max-width: 991.98px) {
    /* تعديل الـ padding للجسم على الجوال */
    body { padding-top: 85px; } 

    .navbar-brand img { height: 50px; width: 50px; }
    .brand-text .main-title { font-size: 1.1rem; }
    
    .navbar-collapse {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        margin-top: 1rem;
        padding: 1rem;
        border-radius: 1rem;
        border: 1px solid rgba(0,0,0,0.05);
        box-shadow: 0 10px 30px rgba(0,33,68,0.1);
    }
}
/* القائمة المنسدلة لا تتغير، فهي جيدة بالفعل */

/* ========================================================= */
/* == END: PROFESSIONAL UNIVERSITY HEADER V4.1             == */
/* ========================================================= */

/* ============================================================= */
/* == START: ELEGANT & DYNAMIC FOOTER V2 (التصميم الجديد)       == */
/* ============================================================= */

/* --- 1. الفاصل الموجي (Wave Divider) --- */
.footer-wave-divider {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg); /* لعكس اتجاه الموجة */
}
.footer-wave-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 120px;
}
.footer-wave-divider .shape-fill {
    fill: var(--brand-dark-blue); /* يجب أن يكون نفس لون خلفية الفوتر */
}

/* --- 2. الهيكل العام للفوتر --- */
.site-footer-v2 {
    background-color: var(--brand-dark-blue);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    padding-top: 4rem; /* مساحة بعد الموجة */
}

/* --- 3. منطقة الاشتراك (Subscribe Zone) --- */
.footer-subscribe-zone {
    padding: 2rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 1rem;
    margin-bottom: 4rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-subscribe-zone h4 {
    color: var(--brand-white);
    margin: 0 0 0.5rem 0;
}
.footer-subscribe-zone p {
    margin: 0;
    opacity: 0.8;
}
.subscribe-form {
    display: flex;
    border-radius: 50px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.subscribe-form .form-control {
    background: transparent;
    border: none;
    padding: 0.75rem 1.5rem;
    color: white;
    box-shadow: none;
    flex-grow: 1;
}
.subscribe-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.subscribe-form .btn {
    border-radius: 50px;
    padding: 0.75rem 2rem;
    font-weight: 700;
    border: none;
    flex-shrink: 0;
}

/* --- 4. المنطقة الرئيسية (الروابط) --- */
.footer-widget .widget-title {
    color: var(--brand-white);
    font-weight: 700;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.75rem;
}
/* الخط المتحرك تحت العنوان (تناغم مع الهيدر) */
.footer-widget .widget-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 3px;
    background: var(--brand-gold);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease;
}
.footer-widget:hover .widget-title::after {
    transform: scaleX(1);
}
.footer-tagline {
    font-size: 1rem;
    line-height: 1.8;
    opacity: 0.9;
}

/* تصميم الروابط */
.footer-links li { margin-bottom: 0.75rem; }
.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
}
.footer-links a:hover {
    color: var(--brand-gold);
    transform: translateX(5px); /* حركة لليمين عند المرور (RTL) */
}

/* معلومات التواصل */
.contact-info li { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.contact-info i { color: var(--brand-gold); font-size: 1.1rem; margin-top: 5px; }
.contact-info div a { color: rgba(255,255,255,0.9); text-decoration: none; }
.contact-info div a:hover { text-decoration: underline; }

/* أيقونات التواصل الاجتماعي */
.social-icons {
    display: flex;
    gap: 0.75rem;
}
.social-icons a {
    display: inline-flex;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    color: var(--brand-white);
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid transparent;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
}
.social-icons a:hover {
    background-color: var(--brand-red);
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}


/* --- 5. المنطقة السفلية (الحقوق والسياسات) --- */
.footer-bottom-zone {
    margin-top: 3rem;
    padding: 1.5rem 0;
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
}
.copyright-text {
    margin: 0;
    opacity: 0.7;
}
.policy-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    margin: 0 0.5rem;
}
.policy-links a:hover {
    color: var(--brand-white);
}

/* ========================================================= */
/* == END: ELEGANT & DYNAMIC FOOTER V2                     == */
/* ========================================================= */

/* =============================================== */
/* == UNIFYING BACKGROUNDS (توحيد خلفية الأقسام) == */
/* =============================================== */

/*
 * هذه القاعدة تجبر جميع الأقسام الرئيسية والمميزة في الموقع 
 * على أن تكون شفافة، وتكشف عن خلفية body التي تحتوي على النمط الزخرفي.
 * استخدمنا !important لضمان تجاوز أي قواعد قديمة وتحقيق نتيجة فورية.
*/
.key-sections,
.featured-area,
.explore-search-section,
.enhanced-announcements-section,
.enhanced-news-section,
.research-section,
.colleges-section,
.directorates-grid-section,
.gallery-section,
.services-section {
    background: none !important;
    background-color: transparent !important;
    border: none !important; /* نزيل أي حدود قد تسببها الخلفيات السابقة */
}

/*
 * ملاحظة: قمنا باستثناء قسم CTA (Call to Action) لأنه
 * مصمم ليكون بلون مختلف لجذب الانتباه.
*/
/* ===================================================== */
/* == INNOVATIVE FEATURED BACKGROUND (خلفية الأقسام المميزة) == */
/* ===================================================== */
/* ========================================================= */
/* == FINAL DYNAMIC BACKGROUNDS (الطريقة الأكثر مرونة وجمالاً) == */
/* ========================================================= */

/* --- 1. إعدادات الحركة العامة للأيقونات (3 أنواع مختلفة) --- */
@keyframes section-icon-float-1 { /* حركة واسعة وبطيئة */
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-30px, 20px) rotate(8deg); }
}
@keyframes section-icon-float-2 { /* حركة أسرع وأقصر */
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(20px, -15px) rotate(-5deg); }
}
@keyframes section-icon-float-3 { /* حركة عمودية ناعمة */
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(5px, 25px); }
}

/* --- 2. إعدادات الحاوية والأيقونات --- */

/* أي قسم سيحتوي على أيقونات عائمة يجب أن يأخذ هذا الكلاس */
.has-icon-backdrop { 
    position: relative;
    z-index: 1; /* للتأكد من أن المحتوى فوق الأيقونات */
}

/* هذه هي الحاوية الشفافة التي ستوضع فيها الأيقونات */
.icons-backdrop {
    position: absolute;
    top: 0; left: 0; 
    width: 100%; height: 100%;
    overflow: hidden; /* مهم لمنع الأيقونات من الخروج عن حدود القسم */
    z-index: -1; /* نجعلها خلف محتوى القسم */
    pointer-events: none; /* للسماح بالنقر على العناصر كأنها غير موجودة */
}

/* تنسيق الأيقونات نفسها */
.icons-backdrop > i {
    position: absolute;
    color: var(--brand-dark-blue);
    opacity: 0.06; /* شفافية عالية جداً لجعلها خافتة */
    
    /* تطبيق الحركة الافتراضية */
    animation-name: section-icon-float-1; 
    animation-duration: 15s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* --- 3. تنويع الحركات والسرعات لجعلها تبدو طبيعية --- */
/* كل أيقونة ثانية تأخذ حركة وسرعة مختلفتين */
.icons-backdrop > i:nth-child(2n) { 
    animation-name: section-icon-float-2; 
    animation-duration: 12s; 
}
/* كل أيقونة ثالثة تأخذ حركة وسرعة مختلفتين */
.icons-backdrop > i:nth-child(3n) { 
    animation-name: section-icon-float-3; 
    animation-duration: 18s; 
}
/* كل أيقونة رابعة تبدأ من نقطة مختلفة في الأنيميشن */
.icons-backdrop > i:nth-child(4n) { 
    animation-delay: -5s; 
}
/* =============================================================== */
/* == START: STYLES FOR CASCADING SECTION (V2 - Multiple Videos) == */
/* =============================================================== */

/* --- 1. حاوية القسم الرئيسية --- */



/* ==================================================================== */
/* == START: CASCADING SECTION STYLES (V5 - FINAL FIX)               == */
/* ==================================================================== */

/* --- 1. حاوية القسم الرئيسية --- */
.cascading-updates-section {
    position: relative; 
    background-color: #f8f9fafd;
   
    color: var(--text-dark);
    overflow: hidden;
    /* سيتم تحديد الارتفاع عبر JS */
}

/* --- 2. الحاوية المثبتة --- */
.cascading-pin-wrapper {
    height: 100vh; 
    width: 100%; 
    position: sticky; 
    top: 0; 
    background-color: transparent;
}
.cascading-pin-wrapper .row {
    height: 100%; /* اجعل الصف يملأ ارتفاع الحاوية المثبتة */
}


/* --- 3. حاوية الأنيميشن (القسم الأيسر) --- */
.cascading-lottie-container {
    height: 100%;
    display: flex;
    align-items: center; /* توسيط عمودي */
    justify-content: center; /* توسيط أفقي */
    position: relative;
}

/*
 * =========================================================
 * == الحل النهائي هنا: تحديد أبعاد ثابتة لمنطقة العرض    ==
 * =========================================================
 */
.cascading-lottie-item {
    position: absolute;

    /* تحديد حجم وأبعاد "الشاشة الصغيرة" لعرض الأنيميشن */
    width: 90%; /* خذ 90% من عرض العمود المتاح */
    max-width: 500px; /* لا تتجاوز هذا العرض */
    height: 60vh; /* اجعل ارتفاعها 60% من ارتفاع الشاشة */
    max-height: 450px; /* لا تتجاوز هذا الارتفاع */

    background-color: #ffffff; /* خلفية بيضاء اختيارية */
   
  
    overflow: hidden; /* إخفاء أي أجزاء زائدة من الأنيميشن */

    /* تأثيرات الدخول والخروج */
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.cascading-lottie-item.is-active {
    opacity: 1;
    transform: scale(1);
}

.cascading-lottie-item lottie-player {
    width: 100%;
    height: 100%;
}


/* --- 4. لوحة النصوص (القسم الأيمن) --- */
.cascading-text-panel {
    position: relative;
    height: 100%;
}
.cascading-text-item {
    position: absolute;
    width: 100%;
    top: 50%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s 0.5s;
}

.cascading-text-item.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s 0s;
}

.cascading-text-item .item-icon { font-size: 2rem; color: var(--brand-red); margin-bottom: 1.5rem; }
.cascading-text-item .item-title { font-size: 2.2rem; font-weight: 800; color: var(--brand-dark-blue); margin-bottom: 1.5rem; }
.cascading-text-item .item-description { font-size: 1.05rem; line-height: 1.8; color: #555; max-width: 95%; }

/* --- 5. التجاوبية مع الجوال --- */
@media (max-width: 991.98px) {
    .cascading-updates-section { height: auto; padding: 4rem 0; }
    .cascading-pin-wrapper { position: static; height: auto; }
    .cascading-pin-wrapper .row { flex-direction: column; }
    
    .cascading-lottie-container {
        margin-bottom: 3rem;
    }
    .cascading-lottie-item {
        position: relative;
        display: block;
        opacity: 1;
        transform: none;
        height: auto; /* الارتفاع يصبح تلقائياً على الموبايل */
        aspect-ratio: 16/9; /* يحافظ على أبعاد جميلة */
        max-height: none; /* إزالة الحد الأقصى للارتفاع */
    }
    
    .cascading-text-panel { min-height: auto; text-align: center; }
    .cascading-text-item {
        position: relative;
        top: auto; transform: none;
        opacity: 1; visibility: visible;
        margin-bottom: 3rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid var(--border-color);
    }
    .cascading-text-item:last-child { border-bottom: none; }

    /* لإظهار كل المقاطع على الموبايل بترتيب صحيح */
    #research .cascading-lottie-item, #research .cascading-text-item {
        display: none; /* يتم التحكم بها عبر JS */
    }
}
/* =============================================================== */
/* == END: CASCADING SECTION STYLES (V5 - FINAL FIX)             == */
/* =============================================================== */

/* ====================================================== */
/* == STYLES FOR ENHANCED ANNOUNCEMENTS SECTION        == */
/* ====================================================== */



.card-badge {
    position: absolute; top: 1rem; left: -30px;
    background: var(--brand-red); color: var(--brand-white);
    padding: 0.3rem 2rem; font-size: 0.8rem; font-weight: 700;
    transform: rotate(-45deg);
}
.card-badge i { display: none; }

.announcement-card .card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; padding: 1.5rem 1.5rem 0; }
.category-tag { padding: 0.4rem 1rem; border-radius: 50px; font-size: 0.8rem; font-weight: 700; color: var(--brand-white); }
.admission-tag { background: var(--brand-dark-blue); } .results-tag { background: var(--brand-red); } .courses-tag { background: #17a2b8; } .competitions-tag { background: #ffc107; color: #212529;}

.date-badge { display: flex; align-items: center; gap: 0.5rem; color: #6c757d; font-size: 0.85rem; font-weight: 500; }
.announcement-card .card-body { padding: 0 1.5rem 1.5rem; }
.card-title a { color: var(--brand-dark-blue); font-size: 1.25rem; font-weight: 700; line-height: 1.4; text-decoration: none; transition: color 0.3s; }
.card-title a:hover { color: var(--brand-red); }

.card-excerpt { color: #6c757d; line-height: 1.7; margin: 1rem 0; font-size: 0.95rem; }
.deadline-counter { display: flex; align-items: center; gap: 0.75rem; background: rgba(220, 53, 69, 0.1); padding: 0.75rem 1rem; border-radius: 0.5rem; color: var(--brand-red); font-weight: 600; margin-top: 1rem; }
.announcement-card .card-footer { border-top: 1px solid var(--border-color); padding: 1rem 1.5rem; margin-top: auto; }
.card-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }


/* ====================================================== */
/* == STYLES FOR ENHANCED NEWS SECTION                 == */
/* ====================================================== */
.enhanced-news-section { background: var(--brand-white); }
.main-news-slider { position: relative; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 20px 60px rgba(0,33,68,.1); }

.main-news-card { display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; }
.main-news-card .news-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.main-news-card:hover .news-image img { transform: scale(1.05); }

.main-news-card .news-content { padding: 3rem; display: flex; flex-direction: column; justify-content: center; background-color: var(--light-gray-bg); }
.main-news-card .news-category { display: inline-block; background: var(--brand-dark-blue); color: var(--brand-white); padding: 0.5rem 1rem; border-radius: 50px; font-size: 0.9rem; font-weight: 700; margin-bottom: 1.5rem; width: fit-content; }
.main-news-card .news-title a { color: var(--brand-dark-blue); font-size: 2rem; font-weight: 800; text-decoration: none; line-height: 1.3; transition: color 0.3s ease; }
.main-news-card .news-title a:hover { color: var(--brand-red); }
.main-news-card .news-excerpt { color: #6c757d; font-size: 1.1rem; line-height: 1.8; margin: 1.5rem 0; }
.main-news-card .news-meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.main-news-card .news-date { color: var(--brand-red); font-weight: 600; }
.main-news-card .read-more { color: var(--brand-dark-blue); text-decoration: none; font-weight: 700; }

#mainNewsCarousel .carousel-control-prev, #mainNewsCarousel .carousel-control-next {
    width: 50px; height: 50px; background: rgba(255,255,255,0.8); border-radius: 50%; top: 50%; transform: translateY(-50%); opacity: 0; color: var(--brand-dark-blue); transition: all 0.3s;
}
.main-news-slider:hover .carousel-control-prev, .main-news-slider:hover .carousel-control-next { opacity: 1; }
.carousel-control-prev { left: 1rem; } .carousel-control-next { right: 1rem; }
#mainNewsCarousel .carousel-indicators { bottom: 1rem; }
#mainNewsCarousel .carousel-indicators button { width: 10px; height: 10px; border-radius: 50%; background-color: var(--brand-white); border: 0;}

.secondary-news-grid .news-card { border-radius: 1rem; box-shadow: 0 10px 30px rgba(0,33,68,.08); transition: all 0.3s ease; }
.secondary-news-grid .news-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,33,68,.12); }
.secondary-news-grid .news-image img { width: 100%; height: 200px; object-fit: cover; }
.secondary-news-grid .news-content { padding: 1.5rem; }
.secondary-news-grid .news-category { display: inline-block; background: rgba(0,51,102,0.1); color: var(--brand-dark-blue); padding: 0.25rem 0.75rem; border-radius: 50px; font-size: 0.8rem; font-weight: 700; margin-bottom: 1rem; }
.secondary-news-grid .news-title a { color: var(--brand-dark-blue); font-size: 1.1rem; text-decoration: none; font-weight: 700; }

@media (max-width: 991px) {
    .main-news-card { grid-template-columns: 1fr; }
    .main-news-card .news-image { height: 300px; }
}
/* ========================================================= */
/* == STYLES FOR ELEGANT ANNOUNCEMENTS BOARD (V2)         == */
/* ========================================================= */
.announcements-board-section {
    background: var(--light-gray-bg);
    
}

.announcements-board-wrapper {
    background-color: var(--brand-white);
    border-radius: 1.5rem; /* 24px */
    box-shadow: 0 20px 60px rgba(0, 33, 68, 0.1);
    border: 1px solid var(--border-color);
    overflow: hidden; /* مهم لدمج الحواف الدائرية بشكل صحيح */
}

/* --- القسم الأيمن (العرض الثابت) --- */
.announcement-display-panel {
    background: linear-gradient(135deg, 
        rgba(74, 144, 226, 0.05) 0%, /* تدرج أزرق سماوي خفيف جداً */
        rgba(74, 144, 226, 0) 100%
    );
    padding: 3rem;
    border-left: 1px solid var(--border-color); /* For RTL */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
[dir="rtl"] .announcement-display-panel {
    border-left: none;
    border-right: 1px solid var(--border-color);
}

.content-icon { font-size: 2.5rem; color: var(--brand-red); margin-bottom: 1.5rem; }
.content-title { font-size: 2rem; line-height: 1.5; font-weight: 800; color: var(--brand-dark-blue); margin-bottom: 1rem; }
.content-excerpt { color: #555; line-height: 1.8; margin-bottom: 2rem; }
.announcement-display-panel .btn { font-weight: 700; }

/* --- القسم الأيسر (قائمة التمرير) --- */
.announcements-list-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.panel-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0; /* منع انكماش الهيدر */
}
.panel-header h4 {
    margin: 0;
    font-weight: 700;
    color: var(--brand-dark-blue);
    font-size: 1.1rem;
}
.panel-body.ticker-body-wrapper {
    flex-grow: 1; /* للسماح للقائمة بأخذ المساحة المتبقية */
    height: auto; /* إلغاء الارتفاع الثابت السابق */
    max-height: 450px; /* تحديد ارتفاع أقصى مرن */
    overflow: hidden;
    position: relative;
}
.announcements-list {
    list-style: none; padding: 0; margin: 0;
    position: absolute; width: 100%;
    animation: vertical-ticker 30s linear infinite; /* يمكنك تعديل السرعة هنا */
}
@keyframes vertical-ticker { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.ticker-body-wrapper:hover .announcements-list {
    animation-play-state: paused;
}


/* --- تصميم العنصر الواحد في القائمة (تم تصغيره) --- */
.announcement-ticker-item a {
    display: block;
    padding: 1.25rem 1.5rem;
    text-decoration: none;
    border-bottom: 1px solid #e9ecef;
    transition: background-color 0.3s ease;
}
.announcement-ticker-item:last-child a { border-bottom: none; }
.announcement-ticker-item a:hover { background-color: #f8f9fa; }
.item-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.item-category {
    font-size: 0.75rem; font-weight: 700;
    padding: 0.2rem 0.75rem; border-radius: 50px;
    background-color: var(--light-gray-bg);
    color: var(--brand-dark-blue);
}
.announcement-ticker-item.urgent .item-category { background-color: var(--brand-red); color: white; }
.item-date { font-size: 0.8rem; color: #6c757d; }
.item-title {
    font-size: 1rem; /* تم تصغير حجم الخط */
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.5;
    margin: 0;
}
.announcement-ticker-item a:hover .item-title { color: var(--brand-red); }


/* التجاوبية للجوال */
@media (max-width: 991.98px) {
    .announcement-display-panel {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 2.5rem;
        text-align: center;
    }
    .panel-body.ticker-body-wrapper {
        max-height: 300px;
    }
}

/* ======================================================== */
/* == STYLES FOR HORIZONTAL ANNOUNCEMENTS MARQUEE          == */
/* ======================================================== */

.announcements-marquee-section {
    background-color: var(--brand-dark-blue);
    color: var(--brand-white);
    padding: 0.75rem 0;
    position: relative;
    z-index: 10; /* لضمان ظهوره فوق أي تداخل مع الهيرو */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-bottom: 2px solid var(--brand-gold);
}

/* الجزء الثابت (العنوان) */
.marquee-title {
    font-weight: 700;
    font-size: 1rem;
    padding-left: 1.5rem; /* For RTL */
    border-left: 1px solid rgba(255, 255, 255, 0.3); /* For RTL */
    flex-shrink: 0; /* يمنع العنوان من الانكماش */
    display: flex;
    align-items: center;
}
.marquee-title i {
    color: var(--brand-gold);
    margin-left: 0.75rem; /* For RTL */
    animation: pulse-light 2s infinite ease-in-out;
}
@keyframes pulse-light {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}


/* الحاوية التي تخفي المحتوى الزائد */
.marquee-content-wrapper {
    flex-grow: 1; /* تجعل الشريط المتحرك يملأ باقي المساحة */
    overflow: hidden;
    position: relative;
}

/* الحاوية التي تتحرك */
.marquee-content {
    display: flex;
    /* السرعة هنا: 40 ثانية لإكمال الحركة */
    animation: marquee-rtl 40s linear infinite;
    width: max-content; /* مهم جداً لجعل العناصر بجانب بعضها */
}

/* الأنيميشن الخاص بالحركة من اليمين إلى اليسار (RTL) */
@keyframes marquee-rtl {
    from {
        transform: translateX(0%);
    }
    to {
        /* تحريكه بمقدار نصف عرضه (بفضل تكرار العناصر) */
        transform: translateX(-50%);
    }
}

/* إيقاف الحركة عند المرور بالماوس */
.marquee-content-wrapper:hover .marquee-content {
    animation-play-state: paused;
}

/* تصميم العنصر الواحد في الشريط */
.marquee-item {
    padding: 0 1.5rem;
    white-space: nowrap; /* يمنع نزول النص لسطر جديد */
}
.marquee-item a {
    color: var(--brand-white);
    text-decoration: none;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}
.marquee-item a:hover {
    color: var(--brand-gold);
}

/* إضافة فاصل بصري بين العناصر */
.marquee-item:not(:last-child)::after {
    content: '|';
    color: rgba(255, 255, 255, 0.3);
    margin-right: 1.5rem; /* For RTL */
}

/* التجاوبية مع الجوال */
@media (max-width: 768px) {
    .marquee-title {
        font-size: 0.9rem;
        padding-left: 1rem;
    }
    .marquee-title span {
        display: none; /* إخفاء النص "إعلانات هامة" وترك الأيقونة فقط لتوفير مساحة */
    }
    .marquee-item {
        padding: 0 1rem;
    }
    .marquee-item a {
        font-size: 0.85rem;
    }
}
/* =============================================================== */
/* == STYLES FOR HORIZONTAL MARQUEE - FINAL FIX (إصلاح الشريط)   == */
/* =============================================================== */

.announcements-marquee-section {
    background-color: var(--brand-dark-blue);
    color: var(--brand-white);
    padding: 0.75rem 0;
    position: relative;
    z-index: 10;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-bottom: 2px solid var(--brand-gold);
    overflow: hidden; /* إضافة مهمة لمنع أي تجاوزات */
    
}

.announcements-marquee-section .container {
    padding: 0 1rem; /* توفير هوامش داخلية لتجنب الالتصاق بالحواف */
    max-width: 100%; /* اجعل الحاوية تأخذ العرض الكامل */
    
}

/* الجزء الثابت (العنوان) */
.marquee-title {
    font-weight: 700;
    font-size: 1rem;
    padding-left: 1.5rem;
    margin-left: 1.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.marquee-title i {
    color: var(--brand-gold);
    margin-left: 0.75rem;
    animation: pulse-light 2s infinite ease-in-out;
}
@keyframes pulse-light {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* الحاوية التي تخفي المحتوى الزائد */
.marquee-content-wrapper {
    flex-grow: 1;
    overflow: hidden; /* هذه الخاصية تخفي الأجزاء الزائدة من الشريط المتحرك */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); /* تأثير تلاشي جميل عند الحواف */
}
[dir="rtl"] .marquee-content-wrapper {
     mask-image: linear-gradient(to left, transparent, black 10%, black 90%, transparent);
}


/* 
 * ============================================
 * == الحل لمشكلة السطرين هنا ==
 * ============================================
 */

/* الحاوية التي تتحرك */
.marquee-content {
    display: flex; /* يجب أن تكون flex */
    flex-wrap: nowrap; /* << أهم تعديل: يمنع التفاف العناصر لسطر جديد */
    width: fit-content; /* يجعل الحاوية تتمدد لتناسب محتواها */
    animation: marquee-rtl 40s linear infinite;
}

/* الأنيميشن (لا تغيير هنا) */
@keyframes marquee-rtl {
    from { transform: translateX(0%); }
    to { transform: translateX(-50%); }
}

/* إيقاف الحركة عند المرور بالماوس (لا تغيير هنا) */
.marquee-content-wrapper:hover .marquee-content {
    animation-play-state: paused;
}


/* تصميم العنصر الواحد في الشريط */
.marquee-item {
    padding: 0 1.5rem;
    white-space: nowrap; /* << سطر مهم: يضمن أن نص كل إعلان يبقى على سطر واحد */
    display: flex; /* توسيط محتوى الرابط عمودياً */
    align-items: center;
}
.marquee-item a {
    color: var(--brand-white);
    text-decoration: none;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}
.marquee-item a:hover {
    color: var(--brand-gold);
}

/* الفاصل بين العناصر */
.marquee-item:not(:last-child)::after {
    content: '•'; /* استخدام نقطة كفاصل أنعم */
    color: rgba(255, 255, 255, 0.5);
    margin-right: 1.5rem;
    font-size: 1.2rem;
}

/* التجاوبية (لا تغيير هنا) */
@media (max-width: 768px) {
    .marquee-title {
        font-size: 0.9rem; padding-left: 1rem; margin-left: 1rem;
    }
    .marquee-title span { display: none; }
    .marquee-item { padding: 0 1rem; }
    .marquee-item a { font-size: 0.85rem; }
    .marquee-content-wrapper { mask-image: none; } /* إزالة التلاشي على الموبايل لتوفير الأداء */
}
/* ========================================================= */
/* == HERO SECTION - FINAL SIZE FIX (إصلاح حجم الهيرو)     == */
/* ========================================================= */

.hero-slider-section {
  
}

/* نجبر كل العناصر الداخلية على اتباع ارتفاع الحاوية الأم */
.hero-slider-section .hero-video-container,
.hero-slider-section .hero-video-overlay,
.hero-slider-section .hero-split-content {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%; /* << أهم سطر: تتبع ارتفاع الحاوية الأم */
    
    
}

/* تنسيقات الفيديو والنص (تبقى كما هي في الغالب) */
.hero-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* يضمن ملء الفيديو للمساحة دون تشويه */
    
    
}



.hero-split-content {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.hero-main-content h1 {
    color: white;
    
}
/* إذا كان لديك تنسيقات أخرى مثل .typed-cursor، اتركها كما هي */
/* ===================================================== */
/* == HERO WRAPPER FIX (إصلاح حاوية الهيرو والشريط)    == */
/* ===================================================== */

/*
 * هذه القاعدة تخبر المتصفح بأن يعامل الهيرو والشريط كوحدة واحدة.
 * عندما يقوم .page-content-wrapper بسحب نفسه للأعلى، سيتوقف
 * عند أسفل هذه الوحدة المدمجة ولن يغطي الشريط.
*/


/* تعديل بسيط للتأكد من أن الشريط الإخباري ليس لديه position خاصة به */
.announcements-marquee-section {
    position: relative; /* Changed from potentially sticky/absolute to relative */
}

/* ====================================================================== */
/* == STYLES FOR NEWS SCROLLER (V2 - CORRECTED & COMPACT)              == */
/* ====================================================================== */

/* --- 1. حاوية القسم الرئيسية --- */
/* القسم الآن لا يأخذ ارتفاع الشاشة الكاملة، بل يتكيف مع المحتوى */
.interactive-news-section {
    position: relative;
    background-color: var(--brand-white); /* خلفية بيضاء واضحة */
    padding-top: 5rem;
    overflow: hidden; 
}

/* --- 2. حاوية التثبيت والحركة (تم تصغيرها) --- */
.news-pin-wrapper {
    /* الارتفاع الآن أصغر بكثير ليناسب الشاشة */
    height: 70vh; /* << تعديل: ارتفاع أقل */
    max-height: 550px; /* << تعديل: حد أقصى للارتفاع */
    width: 100vw; /* يأخذ عرض الشاشة بالكامل */
    position: relative; /* سيتغير إلى sticky عبر JS */
    display: flex;
    align-items: center;
}

.news-scroller-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* << تعديل: تقليل المسافة بين الشريطين */
}

/* --- 3. تصميم شريط الأخبار الواحد --- */
.news-scroller-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
    /* --- تصحيح: إضافة position relative ليعمل transform بشكل موثوق --- */
    position: relative; 
}
/* إزاحة الشريط الثاني ليبدأ من اليسار (مهم للحركة العكسية) */
[dir="rtl"] .news-scroller-track.reverse {
    right: 100%; /* << إضافة مهمة للحركة العكسية */
}


/* --- 4. تصميم بطاقة الخبر (تم تصغيرها) --- */
.interactive-news-card {
    width: 320px; /* << تعديل: عرض أصغر للبطاقة */
    flex-shrink: 0;
    margin: 0 0.5rem; /* << تعديل: تقليل الهامش */
    background-color: #fff;
    border-radius: 0.75rem; /* << تعديل: حواف دائرية أقل */
    box-shadow: 0 5px 15px rgba(0,33,68,.05);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: transform 0.3s ease;
}
.interactive-news-card:hover {
    transform: translateY(-5px);
}

.card-image { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.card-image img { width: 100%; height: 100%; object-fit: cover; }
.card-content { padding: 0.75rem 1rem; } /* << تعديل: padding أقل */
.card-category { font-size: 0.7rem; padding: 0.15rem 0.6rem; margin-bottom: 0.5rem; }
.card-title { font-size: 0.95rem; line-height: 1.4; } /* << تعديل: خط أصغر */
.card-title a { text-decoration: none; color: var(--text-dark); }

/* --- 5. زر الأرشيف --- */
.archive-link-wrapper { padding: 2.5rem 0 4rem; } /* << تعديل: padding أقل */

/* --- 6. التجاوبية مع الجوال (تبقى كما هي) --- */
@media (max-width: 991.98px) {
    .news-pin-wrapper { height: auto; }
    .news-scroller-container { gap: 0; }
    .news-scroller-track {
        overflow-x: auto; padding: 1.5rem 1rem;
        -ms-overflow-style: none; scrollbar-width: none; 
    }
     .news-scroller-track::-webkit-scrollbar { display: none; }
    .interactive-news-card { width: 280px; }
}
/* ================================================================ */
/* == FINAL CASCADING NEWS SECTION STYLES (REBUILT & GUARANTEED) == */
/* ================================================================ */
.final-news-section {
    position: relative;
    padding-top: 5rem;
    background-color: white;
    overflow: hidden; /* يمنع ظهور أي شريط تمرير أفقي */
}

/* الحاوية التي سيتم تثبيتها (Pin) */
.news-pin-wrap {
    height: 80vh; /* ستشغل كامل ارتفاع الشاشة */
    width: 80%;
    position: relative; /* سيتعامل GSAP مع هذا */
    display: flex;
    align-items: center; /* توسيط الحاوية الداخلية عمودياً */
}

/* الحاوية الداخلية التي تحتوي على الشريطين */
.news-scroller {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* المسافة بين الشريطين */
}

/* كل شريط على حدة */
.news-track {
    display: flex;
    flex-wrap: nowrap; /* يمنع البطاقات من النزول لسطر جديد */
    width: max-content; /* يجعل الشريط يتمدد ليحتوي كل البطاقات */
    will-change: transform; /* تحسين أداء الحركة */
}

/* تصميم بطاقة الخبر بشكل مضغوط وأنيق */
.news-card {
    width: 320px; /* عرض كل بطاقة */
    flex-shrink: 0;
    margin: 0 0.75rem;
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.news-card a {
    text-decoration: none;
    display: block;
}
.news-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.news-card a:hover img {
    transform: scale(1.05);
}
/* العنوان فوق الصورة */
.news-card span {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 2rem;
    padding-top: 3rem; /* لإنشاء مساحة للتدرج */
    background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 100%);
    color: white;
    font-size: 1.1rem;
    font-weight: 400;
    transition: background 0.3s ease;
}
.news-card a:hover span {
    background: linear-gradient(0deg, rgba(211, 47, 47, 0.507) 0%, transparent 100%); /* اللون الأحمر عند المرور */
}

/* التجاوبية مع الموبايل (عرض عادي قابل للتمرير) */
@media (max-width: 991.98px) {
    .news-pin-wrap { height: auto; }
    .news-scroller { gap: 1rem; }
    .news-track {
        overflow-x: auto; /* تمكين التمرير باللمس */
        padding: 1.5rem 0;
        width: 100% !important; /* مهم لإلغاء حسابات GSAP */
        transform: none !important; /* إلغاء أي حركة */
        -ms-overflow-style: none; scrollbar-width: none;
    }
    .news-track::-webkit-scrollbar { display: none; }
    .news-card { width: 300px; }
}
.hero-video-container {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden; /* << 1. أضف هذا السطر */
    border-radius: 20px; /* << 2. أضف هذا السطر (يمكنك تعديل القيمة) */
    
}

/* ============================================================ */
/* == STYLES FOR IMMERSIVE PRESIDENT'S MESSAGE SECTION       == */
/* ============================================================ */
.president-message-section {
    padding-top: 50px;
    position: relative;
    height: 100vh;
    min-height: 700px;
    width: 100%;
    color: var(--brand-white);
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* --- 1. الطبقات الخلفية --- */
.background-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    /* سيعمل تأثير Parallax عبر GSAP */
}
.glass-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 2;
    /* التأثير الزجاجي العميق */
    background: rgba(0, 34, 68, 0.6);
    backdrop-filter: blur(5px) saturate(100%);
    -webkit-backdrop-filter: blur(5px) saturate(100%);
}
.president-message-section .container {
    position: relative;
    z-index: 3;
}


/* --- 2. العمود الأيمن (الصورة الشخصية) --- */
.president-portrait {
    text-align: center;
}
.president-portrait img {
    max-width: 500px;
    width: 170%;
    height: auto;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.3)); /* ظل احترافي */
    margin-bottom: 1.5rem;
    margin-right: -5rem;
}
.president-name {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--brand-white);
    text-shadow: 0 2px 5px rgba(0,0,0,0.2);
    margin-right: -4rem;
}
.president-title {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--brand-gold);
    margin-right: -4rem;
}


/* --- 3. العمود الأيسر (الكلمة) --- */
.president-quote-wrapper {
    position: relative;
    padding: 3rem;
    border-radius: 1.5rem;
    margin-right: 8rem;
    /* تأثير زجاجي ثانوي (أفتح قليلاً) */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.president-quote-wrapper .quote-icon {
    position: absolute;
    top: 20px;
    right: 3rem;
    font-size: 2rem;
    color: var(--brand-gold);
    opacity: 0.15;
}
.president-quote-wrapper blockquote {
    border: none;
    padding: 0;
    margin: 0;
}
.president-quote-wrapper p {
    font-size: 1rem;
    font-weight: 500;
    line-height: 2;
    color: rgba(255, 255, 255, 0.9);
}

/* --- التجاوبية مع الأجهزة المختلفة --- */
@media (max-width: 991.98px) {
    .president-message-section {
        height: auto;
        padding: 5rem 0;
    }
    .president-portrait {
        margin-bottom: 3rem;
    }
}
@media (max-width: 576px) {
    .president-name { font-size: 1.8rem; }
    .president-quote-wrapper p { font-size: 1.2rem; }
    .president-quote-wrapper { padding: 2rem; margin-right: 0rem; }
    .president-portrait { margin-right: 5rem;}
    .president-portrait img {
    max-width: 150;
    width: 100%;}
}

html {
    scroll-behavior: auto !important; /* مهم لإلغاء التمرير السلس الافتراضي للمتصفح */
}



.immersive-news-hub {
    position: relative; width: 100%; height: 100vh;
    min-height: 720px; color: var(--brand-white);
    display: flex; align-items: center; overflow: hidden;
}

/* --- 1. الخلفية العامة (أصبحت ثابتة الآن) --- */
.background-showcase {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; z-index: 1;
    background-size: cover; background-position: center;
    transform: scale(1.1);
    filter: blur(5px) brightness(0.6); /* تمويه شديد للخلفية */
    transition: background-image 0.8s ease-in-out;
}
.background-image-item {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}
.background-image-item.is-active {
    opacity: 1;
    transform: scale(1);
}
/* تأثير Ken Burns (الحركة البطيئة المستمرة للخلفية) */
@keyframes kenburns { 0% { transform: scale(1); } 100% { transform: scale(1.05); } }
.background-image-item.is-active {
    animation: kenburns 15s ease-out forwards;
}

/* طبقة التعتيم */
.background-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 2;
    /* --- تعديل: تدرج أكثر كثافة لتحسين التباين --- */
    background: linear-gradient(90deg, rgba(0, 34, 68, 0.98) 30%, rgba(0, 34, 68, 0.75) 60%, rgba(0, 34, 68, 0.5) 100%);
}
[dir="rtl"] .background-overlay {
    background: linear-gradient(-90deg, rgba(0, 34, 68, 0.98) 30%, rgba(0, 34, 68, 0.75) 60%, rgba(0, 34, 68, 0.5) 100%);
}
.immersive-news-hub .container { position: relative; z-index: 3; }

.immersive-news-hub .section-header .section-title { color: var(--brand-white); text-align: right; }
.immersive-news-hub .section-header .lead { color: rgba(255, 255, 255, 0.8); text-align: right; }
.story-image-showcase {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* الإطار الزجاجي المحيط بالصورة */
.glass-frame {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 1.5rem;
    padding: 1.5rem; /* سماكة الإطار */
    
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* حاوية الصور الداخلية */
.image-stage {
    position: relative;
    width: calc(100% - 3rem); /* العرض الداخلي (عرض الحاوية - padding الإطار) */
    height: calc(100% - 3rem);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.story-image-item {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}
.story-image-item.is-active {
    opacity: 1;
    transform: scale(1);
}
.story-image-item img {
    width: 100%; height: 100%; object-fit: cover;
}
.story-image-item-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 2rem 1.5rem;
    background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 100%);
}
.image-item-category {
    font-size: 0.8rem; font-weight: 700; color: var(--brand-gold); display: block;
}
.image-item-title a {
    font-size: 1.5rem; font-weight: 800; color: var(--brand-white); text-decoration: none;
    line-height: 1.4; display: block;
    text-shadow: 0 1px 5px rgba(0,0,0,0.5);
}

/* --- 3. Right Side: Story Selector (no change to the main logic) --- */
.immersive-news-hub .section-header .section-title { color: white; text-align: right; }
.story-selector-list {
    list-style: none; padding: 0; margin: 0; display: flex;
    flex-direction: column; gap: 0.75rem;
}
.selector-item {
    padding: 1rem 1.25rem; cursor: pointer; position: relative; border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.4s ease;
}
.selector-item-date { font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-bottom: 0.25rem; }
.selector-item-title { font-size: 1.1rem; font-weight: 700; color: rgba(255,255,255,0.8); }
.selector-item:hover { background: rgba(255, 255, 255, 0.1); }
.selector-item.is-active { background: var(--brand-white); backdrop-filter: none; -webkit-backdrop-filter: none; }
.selector-item.is-active .selector-item-date { color: #6c757d; }
.selector-item.is-active .selector-item-title { color: var(--brand-dark-blue); }
.selector-item::after { content:''; position: absolute; bottom: 0; right: 0; height: 3px; width: 0%; background: var(--brand-gold); transition: none; }
.selector-item.is-active::after { width: 100%; transition: width 5s linear; }


/* --- Responsive --- */
@media (max-width: 991.98px) {
    .immersive-news-hub { height: auto; padding: 4rem 0;}
    .story-image-showcase { margin-bottom: 3rem; }
}

/* 
 * ============================================
 * == 3. Right Side: Story Selector (NEW GLASS DESIGN)
 * ============================================
 */
.story-selector-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* مسافة بين البطاقات الزجاجية */
}



/* حالة المرور والحالة النشطة */
.selector-item:hover {
    background: rgba(255, 255, 255, 0.1); /* زيادة طفيفة في البياض */
    border-color: rgba(255, 255, 255, 0.2);
}
.selector-item.is-active {
    background: rgba(255, 255, 255, 0.9); /* << بياض شبه كامل */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: transparent;
    transform: scale(1.03); /* تكبير طفيف للبروز */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.selector-item.is-active .selector-item-date {
    color: #6c757d; /* لون رمادي داكن */
}
.selector-item.is-active .selector-item-title {
    color: var(--brand-dark-blue); /* << أزرق داكن للوضوح الفائق */
}

/* شريط التقدم للتبديل التلقائي (الآن على البطاقة نفسها) */
.selector-item::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    height: 3px;
    width: 0%;
    background: var(--brand-gold);
    border-radius: 0 0 0.75rem 0.75rem;
    transition: none; /* يتم التحكم بالأنيميشن عبر إزالة وإضافة الكلاس */
}
/* عندما يكون العنصر نشطًا، يبدأ شريط التقدم */
.selector-item.is-active::after {
    width: 100%;
    transition: width 5s linear; /* 5s = AUTOPLAY_INTERVAL_MS */
}


/* --- التجاوبية --- */
@media (max-width: 991.98px) {
    .immersive-news-hub { height: auto; padding: 4rem 0;}
    .story-details-showcase, .story-selector-list { text-align: center; }
    .immersive-news-hub .section-header { text-align: center; }
}

/* ======================================================== */
/* == STYLES FOR SINGLE NEWS ARTICLE PAGE                == */
/* ======================================================== */

/* --- 0. شريط تقدم القراءة --- */
.reading-progress-bar {
    position: fixed;
    top: 0;
    left: 1;
    height: 5px;
    background: var(--brand-red);
    width: 0%;
    z-index: 1050; /* فوق الهيدر */
    transition: width 0.1s linear;
}

/* --- 1. رأس المقال --- */
.article-header {
    background-color: var(--light-gray-bg);
    padding: 4rem 0;
    border-bottom: 1px solid var(--border-color);
}
.article-category-badge {
    display: inline-block;
    background-color: var(--brand-red);
    color: var(--brand-white);
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 1.5rem;
}
.article-main-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--brand-dark-blue);
    margin-bottom: 1rem;
}
.article-meta {
    color: #6c757d;
}
.article-meta span {
    margin: 0 1rem;
}

/* --- 2. حاوية المحتوى الرئيسي --- */
.article-body-container {
    margin-top: 3rem;
}

/* --- 3. أدوات المشاركة (العمود الأيمن) --- */
.share-tools-sidebar {
    position: sticky;
    top: 150px; /* المسافة من الأعلى لتجنب الهيدر */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.share-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #6c757d;
    margin-bottom: 0.5rem;
}
.share-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}
.share-icon:hover {
    background-color: var(--brand-dark-blue);
    color: var(--brand-white);
    transform: scale(1.1);
}

/* --- 4. محتوى المقال (العمود الأوسط) --- */
.article-main-image {
    margin-bottom: 2rem;
    border-radius: 1rem;
    overflow: hidden;
}
.article-main-image img {
    width: 100%;
}
.article-main-image figcaption {
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: #6c757d;
    text-align: center;
}
.article-text p {
    font-size: 1.15rem;
    line-height: 2;
    margin-bottom: 1.5rem;
}
.article-text blockquote {
    border-right: 4px solid var(--brand-red);
    padding: 1rem 2rem;
    margin: 2rem 0;
    font-size: 1.25rem;
    font-style: italic;
    background: #f8f9fa;
}
.article-text blockquote footer {
    font-size: 1rem;
    font-style: normal;
    color: var(--brand-dark-blue);
    font-weight: 700;
    margin-top: 1rem;
}
.gallery-title {
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--brand-gold);
    display: inline-block;
}
.gallery-items a { display: block; overflow: hidden; border-radius: 0.5rem; }
.gallery-items img { transition: transform 0.3s ease; }
.gallery-items a:hover img { transform: scale(1.05); }

/* --- 5. الشريط الجانبي (العمود الأيسر) --- */
.sidebar {
    position: sticky;
    top: 150px;
}
.widget-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.75rem;
}
.widget-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 3px;
    background: var(--brand-red);
}
.related-news-list, .popular-news-list {
    list-style: none;
    padding: 0;
}
.related-news-list li, .popular-news-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}
.related-news-list a, .popular-news-list a {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}
.related-news-list a:hover, .popular-news-list a:hover {
    color: var(--brand-red);
}
.popular-news-list .views {
    display: block;
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 0.25rem;
}


/* --- التجاوبية مع الموبايل --- */
@media (max-width: 991.98px) {
    .article-main-title { font-size: 2rem; }
    /* إخفاء القائمة الجانبية وإعادة ترتيبها لتظهر أسفل المقال */
    .article-body-container .row { flex-direction: column; }
    .sidebar { position: static; margin-top: 3rem; }
}
/* ======================================================== */
/* == STYLES FOR NEWS ARCHIVE PAGE                       == */
/* ======================================================== */

/* -- حاوية البطاقة الكاملة -- */
.news-card {
    background: var(--brand-white);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 33, 68, 0.05);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 33, 68, 0.1);
}

/* -- جزء الصورة -- */
.news-card .news-image {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10; /* يضمن نسبة أبعاد ثابتة للصورة */
}

.news-card .news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.news-card:hover .news-image img {
    transform: scale(1.05);
}

/* -- جزء المحتوى النصي -- */
.news-card .news-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* يسمح لهذا الجزء بالتمدد ليملأ المساحة المتبقية */
}

/* -- التصنيف (Category) -- */
.news-card .news-category {
    display: inline-block;
    width: fit-content; /* يجعل الخلفية تلتف حول النص فقط */
    background: rgba(0, 51, 102, 0.1);
    color: var(--brand-dark-blue);
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.75rem; /* مسافة بينه وبين العنوان */
}

/* -- عنوان الخبر -- */
.news-card .news-title {
    margin-bottom: 1rem;
    /* الجزء المهم: يدفع الـ meta للأسفل */
  
}

.news-card .news-title a {
    color: var(--brand-dark-blue);
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.5;
}
.news-card:hover .news-title a {
    color: var(--brand-red);
}


/* -- معلومات إضافية (Meta) مثل التاريخ -- */
.news-card .news-meta {
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
    margin-top: auto; /* يدفع نفسه لأسفل البطاقة دائمًا */
}

.news-card .news-date {
    color: #6c757d; /* لون رمادي للتاريخ */
    font-size: 0.85rem;
    font-weight: 500;
}

/* ======================================================== */
/* == STYLES FOR STICKY BOTTOM MARQUEE BAR               == */
/* ======================================================== */

.announcements-marquee-section {
    /* --- التعديلات الرئيسية هنا --- */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999; /* ليكون فوق كل المحتوى ما عدا أي نوافذ منبثقة */

    /* التصميم البصري (يبقى كما هو مع تعديلات بسيطة) */
    background-color: var(--brand-dark-blue);
    color: var(--brand-white);
    padding: 0.6rem 0; /* padding أقل قليلاً ليكون أنعم */
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.15);
    border-top: 2px solid var(--brand-gold);
    
    /* لضمان توسيط المحتوى عمودياً داخل الشريط */
    display: flex;
    align-items: center;
}

/* تعديل بسيط للجسم لإضافة مساحة للشريط في الأسفل */
body {
    padding-bottom: 55px; /* ارتفاع الشريط التقريبي، لمنع الشريط من تغطية محتوى الفوتر */
}
@media (max-width: 768px) {
    body {
        padding-bottom: 48px; /* ارتفاع الشريط على الموبايل */
    }
}


/* --- باقي التنسيقات الداخلية تبقى كما هي --- */

/* ============================================================= */
/* == STYLES FOR INFINITE HORIZONTAL MARQUEE (FINAL SOLUTION) == */
/* ============================================================= */

.announcements-marquee-section {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: var(--brand-dark-blue);
    color: var(--brand-white);
    padding: 0.75rem 0;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.15);
    border-top: 2px solid var(--brand-gold);
    display: flex;
    align-items: center;
}

body { padding-bottom: 55px; } /* Space for the bar */

.announcements-marquee-section .container {
    max-width: 100%;
    overflow: hidden; /* Prevent content from spilling on small screens */
}

.marquee-title {
    font-weight: 700;
    padding-left: 1rem; /* for RTL */
    margin-left: 1rem;  /* for RTL */
    border-left: 1px solid rgba(255, 255, 255, 0.3); /* for RTL */
    flex-shrink: 0;
}

/* 
 * ============================================
 * == الحل السحري للحركة اللانهائية         ==
 * ============================================
 */
.marquee-content-wrapper {
    flex-grow: 1;
    overflow: hidden; /* يخفي الأجزاء التي تخرج من الشاشة */
}

.marquee-content {
    display: flex;
    flex-wrap: nowrap;
    width: max-content; /* يجعل الحاوية تتمدد لتناسب كل الإعلانات */
    
    /* تطبيق الأنيميشن */
    animation: marquee-scroll-rtl 30s linear infinite;
    /* 40s هي مدة الحركة، يمكنك زيادتها لإبطاء الحركة أو تقليلها لتسريعها */
}

/* الأنيميشن: يحرك الشريط من أقصى اليمين إلى أقصى اليسار */
@keyframes marquee-scroll-rtl {
    from {
        /* يبدأ من خارج الشاشة من اليمين */
        transform: translateX(-100%);
    }
    to {
        /* ينتهي خارج الشاشة من اليسار (بعرضه الكامل) */
        transform: translateX(100%);
    }
}
/* إذا أردت الحركة بالعكس (يسار -> يمين) */
/*
@keyframes marquee-scroll-rtl {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}
*/

.marquee-content-wrapper:hover .marquee-content {
    animation-play-state: paused;
}

/* تصميم العناصر الداخلية (لا تغيير كبير) */
.marquee-item {
    padding: 0 1.5rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.marquee-item a {
    color: var(--brand-white);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}
.marquee-item a:hover {
    color: var(--brand-gold);
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .marquee-title span { display: none; }
    body { padding-bottom: 48px; }
}
/* ============================================================ */
/* == DYNAMIC BLUR BACKGROUND FOR NEWS/COLLEGES SECTION      == */
/* ============================================================ */

/* جعل القسم الرئيسي مرجعًا للطبقات الخلفية */
.final-news-section {
    position: relative;
    z-index: 1; /* يضمن أن المحتوى فوق الخلفية */
}

/* حاوية الخلفيات المموهة */
.blurry-backgrounds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -2; /* خلف كل شيء */
}
.blurry-bg-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(15px) brightness(0.8); /* تمويه + تعتيم طفيف */
    transform: scale(1.1); /* تكبير لتجنب الحواف الفارغة */
    opacity: 0;
    transition: opacity 1s ease-in-out; /* انتقال سلس بين الصور */
}
.blurry-bg-item.is-visible {
    opacity: 1;
}

/* طبقة التعتيم العلوية لتحسين قراءة النص */
.section-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1); /* تعتيم أسود خفيف جدًا */
    z-index: -1;
}

/* ====================================================== */
/* == STYLES FOR UNIVERSITY IN NUMBERS SECTION (V2)    == */
/* ====================================================== */
.stats-v2-section {
    background-color: var(--light-gray-bg);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

/* --- البطاقة الرئيسية للإحصائيات --- */
.stat-card {
    background-color: var(--brand-white);
    padding: 2rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 15px rgba(0,33,68,.03);
    height: 100%;
    transition: all 0.3s ease;
}
.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,33,68,.07);
}
.stat-icon {
    font-size: 2.5rem;
    color: var(--brand-red);
}
.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--brand-dark-blue);
    line-height: 1;
}
.stat-label {
    margin: 0.25rem 0 0;
    color: #6c757d;
    font-weight: 500;
}

/* --- بطاقة نسبة الجنسين --- */
.gender-ratio-card {
    background: var(--brand-white);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 15px rgba(0,33,68,.03);
    height: 100%;
}
.gender-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-weight: 700;
}
.gender-info .percentage {
    font-weight: 800;
    color: var(--brand-dark-blue);
}
.progress-bar { transition: width 1.5s ease-out; }
.female-bar { background-color: var(--brand-red); }
.male-bar { background-color: var(--brand-dark-blue); }


/* --- بطاقة الإحصائيات المدمجة (للأرقام الكبيرة) --- */
.stat-card-compact {
    background: var(--brand-white);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 15px rgba(0,33,68,.03);
    height: 100%;
    text-align: center;
}
.stat-card-compact .stat-number {
    font-size: 2.2rem;
}
.stat-card-compact .stat-label {
    font-size: 1.1rem;
}
.stat-card-compact .stat-label i {
    color: var(--brand-red);
}
 .hero-wrapper {
         /* التأثير الزجاجي العميق */
 
    z-index: 2;
    /* التأثير الزجاجي العميق */
 
    backdrop-filter: blur(5px) saturate(100%);
    -webkit-backdrop-filter: blur(5px) saturate(100%);
            }

            /* ======================================================== */
/* == STYLES FOR FOCUS & REVEAL RESEARCH GRID            == */
/* ======================================================== */

.research-grid-section-v2 {
    background-color: var(--light-gray-bg);
    position: relative;
}

.focus-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.focus-grid-item {
    position: relative;
    display: block;
    text-decoration: none;
    overflow: hidden;
    border-radius: 1.25rem;
    background-color: var(--brand-white);
    box-shadow: 0 10px 30px rgba(0, 33, 68, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid var(--border-color);
}

.item-content {
    padding: 2.5rem;
    height: 100%;
}

.item-icon-wrapper {
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-red), #b92b27);
    color: var(--brand-white);
    font-size: 2.5rem;
    margin-bottom: 2rem;
    transition: all 0.4s ease;
}

.item-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--brand-dark-blue);
    margin-bottom: 0.75rem;
    transition: color 0.4s ease;
}

/* 
 * ============================================
 * == التأثير السحري هنا: إخفاء وكشف الوصف    ==
 * ============================================
 */
.item-description {
    color: #6c757d;
    line-height: 1.7;
    font-size: 0.95rem;
    max-height: 0; /* يبدأ الوصف مخفيًا تمامًا */
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}


/*
 * ============================================
 * == تأثيرات المرور (Hover)                 ==
 * ============================================
 */

/* إضاءة البطاقة التي يتم المرور عليها */
.focus-grid-item:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 20px 50px rgba(0, 33, 68, 0.12);
    z-index: 10;
    border-color: transparent;
}

/* تغييرات على الأيقونة والعنوان عند المرور */
.focus-grid-item:hover .item-icon-wrapper {
    background: var(--brand-dark-blue);
    transform: scale(1.1);
}

/* الكشف عن الوصف عند المرور */
.focus-grid-item:hover .item-description {
    max-height: 200px; /* نعطيه مساحة كافية ليظهر */
    opacity: 1;
    margin-top: 1rem; /* إضافة مسافة عند الظهور */
}


/* --- التجاوبية مع الأجهزة --- */
@media (max-width: 991px) {
    .focus-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    /* على الموبايل، نلغي التأثير التفاعلي ونجعل كل شيء ظاهرًا دائمًا */
    .focus-grid { grid-template-columns: 1fr; }
    
    .focus-grid-item:hover {
        transform: none; /* إلغاء حركة الرفع */
        box-shadow: 0 10px 30px rgba(0, 33, 68, 0.05);
    }
    
    /* جعل الوصف ظاهرًا دائمًا على الموبايل */
    .item-description,
    .focus-grid-item:hover .item-description {
        max-height: 200px;
        opacity: 1;
        margin-top: 1rem;
    }
}
/* ======================================================== */
/* == STYLES FOR ELEGANT 2x2 RESEARCH GRID               == */
/* ======================================================== */
.research-grid-section-v3 {
    background-color: var(--light-gray-bg);
}

.elegant-grid {
    display: grid;
    /* تخطيط 2x2 */
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem; /* مسافة كبيرة وأنيقة بين البطاقات */
}

.elegant-grid-item {
    position: relative;
    display: block;
    text-decoration: none;
    padding: 2.5rem; /* مساحة داخلية للحدود المرسومة */
    border-radius: 1.5rem;
    overflow: hidden; /* مهم جدًا */
    transition: transform 0.4s ease;
    background-color: transparent; /* الحاوية الرئيسية شفافة */
}

/* طبقة الخلفية (الزجاجية) */
.item-background {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 33, 68, 0.05);
    transition: all 0.4s ease;
}

/* طبقة المحتوى (النصوص والأيقونات) */
.item-content {
    position: relative; /* ليكون فوق الخلفية */
    z-index: 2;
    text-align: center;
    transition: transform 0.4s ease;
}

.item-icon {
    font-size: 3.5rem;
    color: var(--brand-dark-blue);
    margin-bottom: 2rem;
    transition: all 0.4s ease;
}

.item-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--brand-dark-blue);
    margin-bottom: 1rem;
}

.item-description {
    color: #555;
    line-height: 1.8;
}

/*
 * ============================================
 * == تأثير رسم الحدود (SVG BORDER ANIMATION) ==
 * ============================================
 */
.item-border {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 3;
    pointer-events: none; /* للسماح بالنقر عبره */
}
.item-border rect {
    fill: none;
    stroke: var(--brand-gold);
    stroke-width: 4px; /* سماكة الخط */
    stroke-dasharray: 400 1000; /* طول الخط : طول الفراغ */
    stroke-dashoffset: -200; /* يبدأ الخط مخفيًا */
    transition: stroke-dashoffset 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

/*
 * ============================================
 * == تأثيرات المرور (HOVER EFFECTS)        ==
 * ============================================
 */
.elegant-grid-item:hover {
    transform: translateY(-10px); /* رفع البطاقة قليلاً */
}

/* عند المرور، اجعل خلفية البطاقة أكثر بياضًا */
.elegant-grid-item:hover .item-background {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 20px 40px rgba(0, 33, 68, 0.1);
}

/* عند المرور، قم بتحريك المحتوى قليلاً */
.elegant-grid-item:hover .item-content {
    transform: translateY(-5px);
}

/* عند المرور، قم بتغيير لون الأيقونة */
.elegant-grid-item:hover .item-icon {
    color: var(--brand-red);
}

/* عند المرور، قم بـ "رسم" الخط */
.elegant-grid-item:hover .item-border rect {
    stroke-dashoffset: -1200; /* تحريك الخط ليظهر ويدور */
}

/* --- التجاوبية --- */
@media (max-width: 991px) {
    .elegant-grid {
        grid-template-columns: 1fr; /* تحويلها إلى عمود واحد */
    }
}
.research-grid-section-v3 {
  background-color: #c2bcbc; /* Used if the image is unavailable */

}


/* دعم متعدد اللغات */
[dir="ltr"] {
    text-align: left;
}

[dir="rtl"] {
    text-align: right;
}

/* تعديلات للغة الإنجليزية */
[dir="ltr"] .navbar-brand .brand-text,
[dir="ltr"] .footer-tagline,
[dir="ltr"] .pre-header-start span {
    text-align: left;
}
[dir="ltr"] .president-quote-wrapper{

    top: 2px;
    right: -12rem;
    font-size: 2rem;
    color: var(--brand-gold);
   
}
   
/* أداة تبديل اللغة */
.lang-switcher {
    margin-left: 15px;
}

.lang-switcher .form-select {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    padding: 0.25rem 1.5rem 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.lang-switcher .form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.25);
}

/* ======================================================= */
/* إصلاح الشريط الإعلاني (آخر الإعلانات) */
/* ======================================================= */
.ann/* الحل البديل للشريط الإعلاني */
.announcements-marquee-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    z-index: 10000;
    border-top: 2px solid #e74c3c;
    box-shadow: 0 -2px 20px rgba(0,0,0,0.3);
    padding: 0;
    margin: 0;
    height: 45px;
    display: flex;
    align-items: center;
}

.announcements-marquee-section > .container {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0;
    margin: 0 auto;
}

/* ======================================================= */
/* == STYLES FOR COLLEGE PAGE (v2.0 - FULL STRUCTURE)   == */
/* ======================================================= */
/* --- 1. Header & Breadcrumb --- */
.college-header{position:relative;padding:18rem 0;background-size:cover;background-position:center;color:var(--brand-white);display:flex;align-items:center}
.college-header .glass-overlay{position:absolute;top:0;left:0;width:100%;height:100%}
.college-header .container{position:relative;z-index:2}
.college-title{font-size:3.5rem;font-weight:800}
.breadcrumb{background:none;padding:0;margin-top:1rem}
.breadcrumb-item a{color:rgba(255,255,255,0.8)}
.breadcrumb-item.active{color:var(--brand-white)}
.breadcrumb-item+.breadcrumb-item::before{color:rgba(255,255,255,0.5);content:'>'}

/* --- 2. Main Layout --- */
.page-content { background: #fdfdfd; }
.content-section {
    padding-bottom: 3rem;
    margin-bottom: 3rem;
    border-bottom: 1px solid #e9ecef;
    /* For GSAP animations */
  
}
.col-lg-9 > .content-section:last-child { border-bottom: none; }
.section-title{font-weight:700;font-size:1.5rem;margin-bottom:1.5rem;border-bottom:3px solid var(--brand-red);padding-bottom:.75rem;display:inline-block}

/* --- 3. Sidebar Navigation --- */
.college-sidebar{position:sticky;top:90px;border:2px solid var(--border-color);border-radius:1rem;background-color:var(--brand-white);padding:1rem}.sidebar-title{font-size:1.2rem;font-weight:700;color:var(--brand-dark-blue);margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--border-color)}.sidebar-nav a{display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;color:var(--text-dark);font-weight:600;text-decoration:none;border-radius:.5rem;margin-bottom:.25rem;transition:all .3s ease}.sidebar-nav a.active,.sidebar-nav a:hover{background:var(--brand-dark-blue);color:var(--brand-white);transform:translateX(5px)}.sidebar-nav i{width:23px}

/* --- 4. Content Block Styles --- */
/* Feature Cards */
.feature-card{background:#f8f9fa;border-radius:.75rem;padding:1.5rem;text-align:center;height:100%}.feature-card i{font-size:2rem;color:var(--brand-red);margin-bottom:1rem;display:block}
/* Dean Card */
.dean-card-v2{display:flex;align-items:top;gap:1rem;background:#f8f9fa;padding:2rem;border-radius:1rem}.dean-card-v2 img{width:200px;height:220px;object-fit:cover;border-radius:10%}.dean-card-v2 h3{font-weight:700}.dean-card-v2 .lead{color:#06253a}
/* Vision Quote */
.vision-quote{position:relative;background-color:#f8f9fa;padding:2.5rem;border-radius:1rem;border-right:5px solid var(--brand-gold)}.vision-quote i{position:absolute;top:1rem;right:1.5rem;font-size:2rem;color:var(--brand-gold);opacity:0.3}.vision-quote h4{font-size:1.4rem;line-height:1.8}
/* Accordion */
.accordion-button:not(.collapsed){background-color:var(--brand-dark-blue);color:var(--brand-white)}.accordion-button:not(.collapsed)::after{background-image:var(--bs-accordion-btn-active-icon)}
/* Simple lists */
.list-group-item a {text-decoration: none; color: var(--text-dark); font-weight: 500;}
.list-group-item a:hover {color: var(--brand-red);}
/* Gallery */
.gallery-thumb{display:block;overflow:hidden;border-radius:.5rem}.gallery-thumb img{transition:transform .3s ease;width:100%}.gallery-thumb:hover img{transform:scale(1.05)}
/* List Styled */
.list-styled { list-style: none; padding-right: 0; }
.list-styled li { position: relative; padding-right: 1.5rem; margin-bottom: 0.5rem; }
.list-styled li::before { content: "\f00c"; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: var(--brand-red); position: absolute; right: 0; }

/* --- Responsive --- */
@media (max-width:991.98px){.college-sidebar{position:static;margin-bottom:3rem}.dean-card-v2{flex-direction:column;text-align:center}}

/* ============================================================= */
/* == STYLES FOR HERO WITH CENTERED TICKER (FINAL SOLUTION)   == */
/* ============================================================= */

/* --- 1. حاوية الهيرو الرئيسية --- */
.hero-slider-section {
    position: relative;
    height: 90vh; /* يمكنك التحكم بالارتفاع من هنا */
    min-height: 650px;
    width: 100%;
    overflow: hidden;
}

/* الفيديو والخلفية الزجاجية (لا تغيير) */
.hero-video-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.hero-video-container video { width: 100%; height: 100%; object-fit: cover; }
.hero-video-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(8px);
}

/* حاوية المحتوى المركزي */
.hero-content-container {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center; /* توسيط المحتوى عمودياً */
}

/* --- 2. الشريط الإخباري العمودي (في الهيرو) --- */
.hero-vertical-ticker {
    width: 100%;
    max-width: 400px; /* تحديد عرض أقصى للشريط */
    margin: 0 auto; /* توسيطه داخل عموده */
    
    /* التأثير الزجاجي */
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.ticker-header {
    background: rgba(0, 0, 0, 0.2);
    padding: 1rem 1.25rem;
}
.ticker-header h5 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-white);
}
.ticker-header i { color: var(--brand-gold); }

.ticker-body {
    height: 250px; /* ارتفاع المنطقة المرئية */
    overflow: hidden;
    position: relative;
    
}

.ticker-list {
    list-style: none; padding: 0; margin: 0;
    position: absolute; width: 100%;
    animation: hero-vertical-ticker 12s linear infinite;
}

@keyframes hero-vertical-ticker {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-300px); } /* 3 items * 70px */
}
.ticker-body:hover .ticker-list {
    animation-play-state: paused;
}
.ticker-list li { height: 70px; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); }
.ticker-list li a {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0 1.25rem; color: var(--brand-white); text-decoration: none;
    width: 100%; height: 100%;
}
.ticker-list li small { font-weight: 700; color: var(--brand-gold); }
.ticker-list li span { font-size: 0.95rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- 3. العنوان الرئيسي للهيرو --- */
.hero-main-title h1 {
    text-shadow: 0 4px 15px rgba(0,0,0,0.4);
}


/* --- 4. التجاوبية مع الموبايل --- */
@media (max-width: 991.98px) {
    .hero-slider-section {
        height: auto; /* الارتفاع يصبح تلقائياً */
        min-height: 0;
        padding: 5rem 0;
    }
    .hero-main-title {
        margin-bottom: 2.5rem; /* مسافة بين العنوان والشريط */
    }
    .hero-vertical-ticker {
        max-width: none; /* الشريط يأخذ كامل العرض المتاح */
    }
}

/* ======================================================== */
/* == STYLES FOR DEAN'S MESSAGE (EDITORIAL LAYOUT)       == */
/* ======================================================== */

.dean-message-section {
    padding-bottom: 0 !important; /* يلغي المسافة السفلية ليتم الدمج مع القسم التالي */
}

/* --- العمود الأيسر (النص) --- */
.dean-text-panel {
    background-color: var(--brand-white);
    padding: 3rem;
    height: 100%;
    position: relative;
    z-index: 2; /* فوق الصورة */
    /* تأثير الظل ليبرز فوق الصورة */
    box-shadow: -20px 0 40px rgba(0,0,0,0.1); 
}
[dir="rtl"] .dean-text-panel {
    box-shadow: 20px 0 40px rgba(0,0,0,0.1); 
}

.dean-name-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand-dark-blue);
    margin-top: 1rem;
    margin-bottom: 2rem;
}
.dean-quote {
    position: relative;
    border-right: 3px solid var(--brand-gold);
    padding-right: 1.5rem;
    margin-right: 0.5rem;
}
[dir="rtl"] .dean-quote {
    margin-right: 0.5rem;
    margin-left: 0;
}

.dean-quote p {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.9;
    color: #444;
}




/* --- العمود الأيمن (الصورة) --- */
.dean-image-panel {
    height: 100%;
    min-height: 500px; /* لضمان ظهور الصورة بشكل جيد */
    position: relative;
}
.dean-image-panel img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* تملأ المساحة دون تشويه */
    object-position: top center; /* تركز على الجزء العلوي من الصورة */
}

/* 1. تأكد من أن الهيرو نفسه معزول في طبقة تكديس خاصة */
.hero-slider-section {
    position: relative;
    z-index: 1; /* طبقة تكديس منخفضة ولكنها إيجابية */
    height: 90vh; /* ارتفاع الهيرو كما تريده */
    min-height: 650px;
    width: 100%;
    overflow: hidden;
    /* هام جداً: يمنع هذا القسم من أن يكون "ثابتاً" في الخلفية ويسبب مشاكل */
    transform: translateZ(0); 
}

/* 2. حاوية المحتوى التالية يجب أن تكون في طبقة أعلى بشكل صريح */
.page-content-wrapper {
    position: relative;
    z-index: 10; /* طبقة أعلى بكثير من الهيرو لتظهر فوقه بوضوح */
    background-color: var(--light-gray-bg); /* أو أي لون خلفية تريده */
    
    /* --- خاصية السحب للأعلى (Overlap) --- */
    margin-top: -80px; /* القيمة التي تجعلها تتداخل مع الهيرو */
    
    border-top-left-radius: 40px; /* الحواف الدائرية العلوية */
    border-top-right-radius: 40px;
    padding: 4rem 0; /* مساحة داخلية للمحتوى */
    
    /* إضافة ظل لتوضيح الانفصال البصري */
    box-shadow: 0 -10px 30px rgba(0, 33, 68, 0.15);
}

/* في حالة الشاشات الصغيرة، قد تحتاج لتقليل التداخل */
@media (max-width: 768px) {
    .page-content-wrapper {
        margin-top: -40px;
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
        padding: 2rem 0;
    }
    .hero-slider-section {
        height: 350;
        min-height: 300;
        padding: 5rem 0 6rem; /* مساحة إضافية في الأسفل للتداخل */
    }
}