html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
@font-face {
    font-family: 'Droid Arabic Kufi';
    src: url('../fonts/DroidKufi-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body.no-scroll {
    overflow: hidden; /* يمنع ظهور أشرطة التمرير (Scrollbars) */
    height: 100vh; /* يضمن أن الـ Body لا يتجاوز ارتفاع الشاشة المرئية */
}

body {
    font-family: 'Droid Arabic Kufi', sans-serif;
    direction: rtl;
    background-color: #fff;
    color: #3c3c3c;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    padding-top: 20px;
}

/*==============================
  رأس الصفحة (معدّل)
==============================*/
#header {
    /*height: 90px;*/
    height: auto !important;
    background: rgba(60, 60, 60, 0.95);
    transition: all 0.5s;
    z-index: 1000;
    position: fixed;
    width: 100%;
    top: 0;
    /*display: flex;*/
    display: block; /* ← رجعيه Default */
    align-items: center;
}


/* التعديلات على العناصر الجديدة والموجودة */

/* التأكد من أن جميع العناصر في الهيدر تستخدم Flex */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* هذا يحافظ على الفراغات بين العناصر الثلاثة */
    width: 100%;
    height: 100%;
    padding: 0 20px;
}

/* العنصر الذي يحتوي على العنوان - لضمان توسيطه بالنسبة للهيدر ككل */
.header-title-wrapper {
    /* يضمن أن العنوان يحتل مساحة مرنة في المنتصف */
    flex-grow: 1;
    text-align: center;
    /* هذا هو المفتاح: يضبط الهوامش الجانبية تلقائياً لتوسيط العنوان */
    margin: 0 auto;
}

/* الشعار اليميني وبداية الهيدر */
.logo-group-start {
    display: flex;
    align-items: center;
    /* إعطاء هذه المجموعة عرضاً ثابتاً (تقريبي) أو تركها لتأخذ العرض اللازم */
    width: auto;
}

/* الشعار اليساري ونهاية الهيدر */
.logo-group-end {
    display: flex;
    align-items: center;
    /* هذا يضمن أن عرض هذه المجموعة يتوازن مع المجموعة الأولى (logo-group-start) */
    width: auto;
}

/* تنسيق العنوان نفسه */
.logo-title {
    /* تم تعديل الوسم في HTML إلى h2 */
    color: white;
    font-size: 30px;
    font-weight: bold;
    margin: 0 !important; /* إلغاء أي هوامش تلقائية قد تعيق التوسيط */
    padding: 0 15px;
}
/* ... تأكدي أن تنسيق الـ .menu-toggle-btn لا يزال موجوداً ... */



.logo-group, .logo-group-right {
    display: flex;
    align-items: center;
}

.eagle-logo, .caoa-logo {
    min-width: 70px;
    height: 70px;
    object-fit: contain;
}

/* زر القائمة الجانبية (يظهر دائماً) */
.menu-toggle-btn {
    color: #cec7c7;
    font-size: 32px;
    cursor: pointer;
    display: block;
    transition: 0.3s;
    line-height: 0;
}

@media (max-width: 768px) {
    #header {
        /*height: 70px;*/
        height: 60px !important;
    }

    .logo-title {
        /*font-size: 20px;
        padding: 0 10px;*/
        font-size: 16px !important;
        padding: 0 5px !important;
        white-space: nowrap;
    }

    .eagle-logo, .caoa-logo {
        width: 55px;
        height: 55px;
    }

        .caoa-logo.me-4 {
            margin-right: 10px !important;
        }
    #navbar a {
        font-size: 13px !important; /* تصغير خط الروابط */
        padding: 10px 0 !important;
    }
    .sub-header-nav {
        padding-right: 0 !important;
        text-align: center;
        background: #f8f8f8; /* اختياري: لون فاتح لتمييز الشريط */
    }

        /* تصغير روابط الشريط الرمادي */
        .sub-header-nav ul {
            flex-wrap: wrap; /* للسماح للعناصر بالنزول لسطر جديد إذا كانت الشاشة صغيرة جداً */
            justify-content: center;
        }

            .sub-header-nav ul li {
                margin: 0 5px !important; /* تقليل المسافات بين الروابط */
            }

                .sub-header-nav ul li a {
                    font-size: 13px !important; /* تصغير الخط ليتناسب مع عرض الموبايل */
                    padding: 5px 8px !important;
                    font-weight: normal;
                }
}



/*==============================
  المنيو الجانبية (Sidebar Menu)
==============================*/
#navbar {
    position: fixed;
    top: 0;
    right: -260px; /* تم تصغير العرض قليلاً */
    width: 250px;
    height: 100vh;
    /*background: #3c3c3c;*/
    /*background: rgba(60, 60, 60, 0.85);*/
    background: #6e6e6e; /*#a9a9a9;*/
    padding: 70px 25px 20px 25px;
    transition: right 0.3s ease-in-out;
    /*z-index: 1000;*/
    z-index: 9999;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
    display: block; /* للتأكد من أنها قائمة عمودية */
}

    /* حالة الفتح */
    .nav-open, #navbar.active {
        right: 0;
    }

    #navbar .close-btn {
        position: absolute;
        top: 15px;
        left: 20px;
        font-size: 32px;
        color: #cec7c7;
        cursor: pointer;
        line-height: 1;
        z-index: 999999;
    }

    #navbar ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #navbar li {
        margin-bottom: 0;
    }

    #navbar a {
        display: block;
        /*color: #cec7c7;*/
        color: white;
        text-decoration: none;
        font-weight: 600;
        font-size: 14px;
        padding: 12px 0;
        transition: 0.3s;
        border-bottom: 1px solid #5a5a5a;
    }

    #navbar li:last-child a {
        border-bottom: none;
    }

    #navbar a:hover, #navbar .active {
        color: #940a1a;
    }

    /* تنسيق زر تسجيل الدخول */
    #navbar .btn-login {
        display: block;
        padding: 8px 15px !important;
        margin-top: 20px;
        background-color: #940a1a;
        color: #fff !important;
        text-align: center;
        border-radius: 4px;
        border: 1px solid #940a1a;
        font-weight: bold;
    }

        #navbar .btn-login:hover {
            background-color: transparent;
            color: #940a1a !important;
        }

    /* ------------------------------------------- */
    /* تنسيق القائمة المنسدلة داخل القائمة الجانبية */

    #navbar .dropdown-menu {
        /* هنا نغير الخلفية الافتراضية البيضاء إلى لون داكن */
        background-color: #5a5a5a; /* لون أغمق قليلاً من خلفية القائمة الجانبية */
        border: none;
        padding: 0;
        margin-top: 0;
    }

    /* لتغيير لون نص الروابط داخل القائمة المنسدلة */
    #navbar .dropdown-item {
        /* اجعل النص أبيض ليظهر على الخلفية الداكنة للقائمة المنسدلة */
        color: white !important;
        padding: 10px 25px; /* مسافة داخلية مناسبة */
        font-weight: 500;
        border-bottom: 1px solid #4a4a4a;
        background-color: transparent !important; /* لتجنب الخلفية البيضاء */
    }

        /* لون التمرير على الروابط المنسدلة */
        #navbar .dropdown-item:hover {
            color: #940a1a !important; /* لون التمرير الأحمر الذي تستخدمينه */
            background-color: #3e3e3e !important;
        }
        /* يستهدف الرابط (a) داخل عنصر القائمة المنسدلة (.dropdown-item) */
        #navbar .dropdown-item a {
            /* نستخدم هذا المُحدد لتجاوز حجم الخط العام (14px) 
       المطبق على #navbar a 
    */
            font-size: 9px !important; /* أو أي حجم آخر أصغر */
            /* للتأكد من أن الاتجاه يبقى صحيحاً 
       (وإن كان text-align: right كافياً عادةً) 
    */
            direction: rtl;
            text-align: right;
            /* نقوم بإزالة الحدود السفلية لجميع الروابط الفرعية لتبدو كقائمة واحدة */
            border-bottom: none;
            padding: 12px 0; /* يمكنك تعديل المسافة حسب الرغبة */
        }

/*==============================
  الـ Marquee
==============================*/
.marquee-section {
    background-color: #fff;
    /*color: #3c3c3c;*/
    color: #940a1a;
    font-weight: bold;
    font-size: 15px;
    /*border-bottom: 2px solid #940a1a;*/
    text-align: center;
    line-height: 20px; /* يقلل الارتفاع */
    height: 20px;
    overflow: hidden;
    position: relative;
    z-index: 5;
}

    .marquee-section marquee {
        font-family: 'Droid Arabic Kufi', sans-serif;
        direction: rtl;
    }

/*==============================
  قسم الـ Hero
==============================*/
#hero {
    /*padding-top: 5px !important;
    padding-bottom: 0 !important; 
    margin-bottom: 0 !important;*/
    position: relative;
    width: 100%;
    /* حذفنا الـ min-height الثابتة */
    /*padding: 100px 0 40px 0 !important;*/
    overflow: hidden;
    background: #940a1a; /* لضمان ظهور اللون قبل تحميل الصورة */
    display: block; /* لضمان استقرار العناصر */
    padding-top: 10px !important; /* تقليل المسافة من أعلى لرفع الكلام والصورة */
    padding-bottom: 10px !important; /* مساحة بسيطة من أسفل للأمواج */
    /*min-height: auto !important;*/
    min-height: 450px !important;
}
    #hero .col-lg-7 {
        /*margin-top: 0 !important;
        padding-top: 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start !important;*/
        margin-top: 0 !important;
        /* جربي زيادة الـ 40px لـ 60px إذا أردتِ نزولاً أكثر */
        padding-top: 50px !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start !important;
    }

/*#hero .col-lg-7 {
    margin-top: -80px;
}*/

    #hero:before {
        content: "";
        /*background: rgba(2, 5, 161, 0.91);*/
        background: #940a1a;
        /*background: #A9A18D;*/
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
    }
    #hero h1 {
        margin: 0 0 20px 0;
        font-size: 48px;
        font-weight: 700;
        line-height: 56px;
        color: rgba(255, 255, 255, 0.8);
    }

        #hero h1 span {
            color: #fff;
            border-bottom: 4px solid #1acc8d;
        }


    #hero h2 {
        color: white;
        font-size: 18px;
        line-height: 1.8;
        font-family: 'Droid Arabic Kufi', sans-serif;
        font-weight: normal;
        animation: fadeInUp 1.2s ease;
        margin-bottom: 40px;
 }

.lblIntroWord {
    color: white;
    font-size: 18px;
    line-height: 1.8;
    font-family: 'Droid Arabic Kufi', sans-serif;
    font-weight: normal;
    animation: fadeInUp 1.2s ease;
    margin-bottom: 15px !important;
    margin-top: 10px !important;
    width: 100%;
    display: block;
    direction: rtl;
    text-align: justify;
    text-justify: inter-word;
    /*text-align-last: justify;*/
    text-align-last: start;
}




    #hero .btn-get-started {
        display: inline-block;
        padding: 10px 25px;
        background-color: #3c3c3c;
        color: #fff;

        font-weight: bold;
        display: inline-block;
        letter-spacing: 1px;
        font-size: 16px;
        border-radius: 50px;
        transition: 0.5s;
        font-family: 'Droid Arabic Kufi', sans-serif;
    }

        #hero .btn-get-started:hover {
            background-color: #cec7c7;
            color: #940a1a;
            /*
            transform: translateY(-3px);*/
        }


#hero .hero-img img {
    /*max-height: 500px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    object-fit: contain;
    display: block;
    height: auto !important;*/
    /*width: 130% !important; 
    max-width: 700px; 
    height: auto !important;
    margin-right: -15%;
    display: block;*/
    width: 115% !important; /* تكبير الصورة بنسبة 15% إضافية */
    max-width: none !important; /* إلغاء التحديد لتركها تكبر */
    max-height: 480px !important; /* موازنة الارتفاع */
    margin-right: -3% !important; /* زحزحة الصورة لليمين قليلاً لتدخل في الهامش وتكبر */
    margin-top: -5% !important;
    object-fit: contain;
    filter: drop-shadow(0px 10px 20px rgba(0,0,0,0.2));
}
    #hero .animated {
        animation: up-down 2s ease-in-out infinite alternate-reverse both;
    }


        #hero .animated {
            -webkit-animation: none;
            animation: none;
        }

    @media (max-width: 575px) {
        #hero .hero-img img {
            width: 80%;
        }
    }

    @-webkit-keyframes up-down {
        0% {
            transform: translateY(10px);
        }

        100% {
            transform: translateY(-10px);
        }
    }

    @keyframes up-down {
        0% {
            transform: translateY(10px);
        }

        100% {
            transform: translateY(-10px);
        }
    }

.hero-waves {
    /*position: absolute;
        bottom: 0;
        width: 100%;
        height: 60px;*/
    position: absolute;
    bottom: -1px; /* لضمان عدم وجود خط أبيض */
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 2;
}

    .wave1 use {
        -webkit-animation: move-forever1 10s linear infinite;
        animation: move-forever1 10s linear infinite;
        -webkit-animation-delay: -2s;
        animation-delay: -2s;
    }

    .wave2 use {
        -webkit-animation: move-forever2 8s linear infinite;
        animation: move-forever2 8s linear infinite;
        -webkit-animation-delay: -2s;
        animation-delay: -2s;
    }

    .wave3 use {
        -webkit-animation: move-forever3 6s linear infinite;
        animation: move-forever3 6s linear infinite;
        -webkit-animation-delay: -2s;
        animation-delay: -2s;
    }

    @-webkit-keyframes move-forever1 {
        0% {
            transform: translate(85px, 0%);
        }

        100% {
            transform: translate(-90px, 0%);
        }
    }

    @keyframes move-forever1 {
        0% {
            transform: translate(85px, 0%);
        }

        100% {
            transform: translate(-90px, 0%);
        }
    }

    @-webkit-keyframes move-forever2 {
        0% {
            transform: translate(-90px, 0%);
        }

        100% {
            transform: translate(85px, 0%);
        }
    }

    @keyframes move-forever2 {
        0% {
            transform: translate(-90px, 0%);
        }

        100% {
            transform: translate(85px, 0%);
        }
    }

    @-webkit-keyframes move-forever3 {
        0% {
            transform: translate(-90px, 0%);
        }

        100% {
            transform: translate(85px, 0%);
        }
    }

    @keyframes move-forever3 {
        0% {
            transform: translate(-90px, 0%);
        }

        100% {
            transform: translate(85px, 0%);
        }
    }


    /*==============================
  الأقسام العامة
==============================*/
    section {
        padding: 60px 0;
    }

    .section-title h2 {
        color: #940a1a;
        font-size: 28px;
        margin-bottom: 20px;
    }

    .section-title p {
        color: #3c3c3c;
    }

    /*==============================
  الفوتر
==============================*/
#footer {
    background: #696969;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    position: relative;
    /* تثبيته في أسفل النافذة */
   /* bottom: 0;*/
    /* جعله يمتد على كامل عرض النافذة */
    left: 0;
    right: 0;

    /* أو يمكنك استخدام: width: 100%; */
    /* لضمان ظهوره فوق باقي العناصر (مثل الشريط الجانبي) */
    z-index: 1000;
}

        #footer .copyright {
            font-size: 15px;
        }

    /*==============================
  زر العودة للأعلى
==============================*/
    .back-to-top {
        position: fixed;
        visibility: hidden;
        opacity: 0;
        right: 15px;
        bottom: 15px;
        background: #940a1a;
        color: #fff;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        transition: all 0.4s;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }

        .back-to-top.active {
            visibility: visible;
            opacity: 1;
        }

        .back-to-top:hover {
            background: #3c3c3c;
        }

    /*==============================
  تأثيرات الحركة
==============================*/
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

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

    @keyframes zoomIn {
        from {
            transform: scale(0.8);
            opacity: 0;
        }

        to {
            transform: scale(1);
            opacity: 1;
        }
    }



    /*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
#about {
    position: relative;
    padding: 80px 0 !important;
    background: #fff;
    z-index: 3;
}

 /*.about {
    padding: 0 !important;
    margin-top: 0 !important; 
    margin-bottom: 0 !important;
}*/


        .about .icon-boxes h3 {
            font-size: 28px;
            font-weight: 700;
            color: #010483;
            margin-bottom: 15px;
        }

        .about .icon-box {
            margin-top: 40px;
        }

            .about .icon-box .icon {
                float: left;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 64px;
                height: 64px;
                border: 2px solid #7ceec6;
                border-radius: 50px;
                transition: 0.5s;
            }

                .about .icon-box .icon i {
                    color: #1acc8d;
                    font-size: 32px;
                }

            .about .icon-box:hover .icon {
                background: #1acc8d;
                border-color: #1acc8d;
            }

                .about .icon-box:hover .icon i {
                    color: #fff;
                }

            .about .icon-box .title {
                margin-left: 85px;
                font-weight: 700;
                margin-bottom: 10px;
                font-size: 18px;
            }

                .about .icon-box .title a {
                    color: #343a40;
                    transition: 0.3s;
                }

                    .about .icon-box .title a:hover {
                        color: #1acc8d;
                    }

            .about .icon-box .description {
                margin-left: 85px;
                line-height: 24px;
                font-size: 14px;
            }

        .about .video-box {
            /*background: url("../img/hessjobs-puzzle.png") center center no-repeat;*/
            background: url("../img/jobs1.jpg") center center no-repeat;
            background-size: contain;
            min-height: 300px;
        }

        .about .play-btn {
            width: 94px;
            height: 94px;
            background: radial-gradient(#3f43fd 50%, rgba(63, 67, 253, 0.4) 52%);
            border-radius: 50%;
            display: block;
            position: absolute;
            left: calc(50% - 47px);
            top: calc(50% - 47px);
            overflow: hidden;
        }

            .about .play-btn::after {
                content: "";
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateX(-40%) translateY(-50%);
                width: 0;
                height: 0;
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-left: 15px solid #fff;
                z-index: 100;
                transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
            }

            .about .play-btn::before {
                content: "";
                position: absolute;
                width: 120px;
                height: 120px;
                -webkit-animation-delay: 0s;
                animation-delay: 0s;
                -webkit-animation: pulsate-btn 2s;
                animation: pulsate-btn 2s;
                -webkit-animation-direction: forwards;
                animation-direction: forwards;
                -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
                -webkit-animation-timing-function: steps;
                animation-timing-function: steps;
                opacity: 1;
                border-radius: 50%;
                border: 5px solid rgba(63, 67, 253, 0.7);
                top: -15%;
                left: -15%;
                background: rgba(198, 16, 0, 0);
            }

            .about .play-btn:hover::after {
                border-left: 15px solid #3f43fd;
                transform: scale(20);
            }

            .about .play-btn:hover::before {
                content: "";
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateX(-40%) translateY(-50%);
                width: 0;
                height: 0;
                border: none;
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-left: 15px solid #fff;
                z-index: 200;
                -webkit-animation: none;
                animation: none;
                border-radius: 0;
            }
    /*--------------------------------------------------------------
# Counts
--------------------------------------------------------------*/
.counts {
    background: #f5f5ff;
    padding: 70px 0 60px;
    scroll-margin-top: 100px;
}

    .counts .count-box {
        padding: 30px 30px 25px 30px;
        width: 100%;
        position: relative;
        text-align: center;
        background: #fff;
     
    }

            .counts .count-box i {
                position: absolute;
                top: -25px;
                left: 50%;
                transform: translateX(-50%);
                font-size: 20px;
                background: #1acc8d;
                padding: 12px;
                color: #fff;
                border-radius: 50px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                line-height: 0;
                width: 48px;
                height: 48px;
            }

        .counts .count-box span {
            font-size: 36px;
                display: block;
                font-weight: 600;
            color: #010483;
            /*font-size: 40px !important;
            font-weight: 800 !important;
            margin-bottom: 10px;*/
        }

            .counts .count-box p {
                padding: 0;
                margin: 0;
                font-family: "Montserrat", sans-serif;
                font-size: 14px;
            }

    /*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/

    /*==============================
  تنسيقات قسم الخريطة (Contact Map)
==============================*/

    /* تنسيق إطار الخريطة للتأكد من أنها تملأ العمود بالكامل */
    .contact .info iframe {
        width: 100%;
        height: 350px; /* يمكنك زيادة هذا الارتفاع حسب الرغبة */
        border-radius: 4px;
        box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.1);
    }

    /* تنسيق معلومات الموقع أسفل الخريطة */
    .contact .address,
    .contact .email,
    .contact .phone {
        padding: 20px;
        background: #fff;
        box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        text-align: right;
    }

        .contact .address i,
        .contact .email i,
        .contact .phone i {
            font-size: 24px;
            color: #4CAF50; /* لون أيقونة الموقع */
            float: right;
            width: 44px;
            height: 44px;
            background: #eef7ee;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50px;
            transition: all 0.3s ease-in-out;
        }

        .contact .address h4,
        .contact .email h4,
        .contact .phone h4 {
            padding: 0 0 0 60px;
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 5px;
            color: #3c3c3c;
        }

        .contact .address p,
        .contact .email p,
        .contact .phone p {
            padding: 0 0 0 60px;
            margin-bottom: 0;
            font-size: 14px;
            color: #6c757d;
        }


    /*==============================
    ExternalAds
  تنسيقات الإعلانات الخارجية (Ad Cards)
==============================*/
    .ads-page {
        background-color: #f5f5ff; /* خلفية فاتحة مشابهة لقسم الـ Counts */
    }

        .ads-page .ad-card {
            padding: 30px;
            background: #ffffff;
            border-radius: 8px;
            text-align: right;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
            transition: all 0.3s;
            position: relative;
            border-right: 4px solid #940a1a; /* شريط جانبي بلون الموقع المميز */
        }

            .ads-page .ad-card:hover {
                transform: translateY(-5px); /* تأثير رفع خفيف عند التمرير */
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
            }

            .ads-page .ad-card i {
                font-size: 32px;
                color: #940a1a; /* أيقونة باللون العنابي */
                margin-bottom: 15px;
                display: block;
            }

            .ads-page .ad-card h4 {
                font-size: 20px;
                font-weight: 700;
                margin-bottom: 10px;
                color: #3c3c3c;
            }

            .ads-page .ad-card p {
                font-size: 14px;
                color: #6c757d;
                line-height: 1.6;
            }

        .ads-page .ad-link {
            display: inline-block;
            margin-top: 15px;
            color: #940a1a;
            font-weight: bold;
            transition: 0.3s;
            text-decoration: none;
        }

            .ads-page .ad-link:hover {
                color: #3c3c3c;
            }

            .ads-page .ad-link i {
                font-size: 14px;
                margin-right: 5px;
                transition: 0.3s;
                line-height: 1;
            }

            .ads-page .ad-link:hover i {
                margin-right: 10px;
            }

/*Added by MMA 19-11-2025*/
/* الشريط الأفقي تحت اللوجو والعنوان */
.sub-header-nav {
    width: 100%;
    /*background: #333;*/ /* تقدري تغيري اللون */
    background: #cec7c7;
    padding: 0;
    margin: 0;
    position: relative; /* مهم */
    display: block;
}

    .sub-header-nav ul {
        list-style: none;
        display: flex;
        justify-content: center; /* توسيط العناصر */
        padding: 0;
        margin: 0;
    }


 .sub-header-nav ul li {
      margin: 0 15px;
}

    .sub-header-nav ul li a {
        /*color: white;*/
        color: #940a1a;
        padding: 12px 10px;
        display: block;
        font-size: 18px;
        text-decoration: none;
        transition: 0.3s;
    }

 .sub-header-nav ul li a:hover {
       background: #555;
        border-radius: 6px;
}
        /*End*/
        /*Added by MMA 26-3-2026*/
        /* تنسيق الحاوية الرئيسية للمنيو الفرعية */
        .sub-header-nav ul li {
            position: relative;
        }

            /* تصميم القائمة المنسدلة لتكون مطابقة للمنيو الأفقية */
            .sub-header-nav ul li .sub-menu {
                display: block;
                position: absolute;
                top: calc(100% + 15px); /* مسافة بسيطة تحت العنصر الرئيسي */
                right: 0;
                visibility: hidden;
                opacity: 0;
                padding: 10px 0;
                margin: 0;
                z-index: 9999;
                background: #fff;
                box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); /* نفس الظل في المنيو الرئيسية */
                transition: 0.3s;
                border-radius: 4px;
                min-width: 200px;
            }

            /* تأثير الظهور عند تمرير الماوس */
            .sub-header-nav ul li:hover > .sub-menu {
                opacity: 1;
                top: 100%;
                visibility: visible;
            }

            /* تنسيق الروابط داخل القائمة المنسدلة */
            .sub-header-nav ul li .sub-menu li {
                min-width: 260px;
                padding: 0;
                margin: 0;
            }

                .sub-header-nav ul li .sub-menu li a {
                    padding: 10px 20px;
                    font-size: 14px;
                    text-transform: none;
                    font-weight: 500;
                    color: #3c3c3c !important; /* لون النص الأساسي */
                    transition: 0.3s;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    text-decoration: none;
                    border-bottom: none;
                }

                    /* تأثير الهوفر على الروابط الفرعية (اللون الأحمر) */
                    .sub-header-nav ul li .sub-menu li a:hover {
                        color: #d9232d !important; /* اللون الأحمر المعتمد في موقعك */
                        background: #f8f9fa;
                    }

            /* إضافة سهم صغير بجانب الكلمة الرئيسية لتمييز أنها منسدلة */
            .sub-header-nav ul li.has-dropdown > a::after {
                /*content: "\F282";*/ /* كود سهم أسفل من Bootstrap Icons */
                font-family: "bootstrap-icons";
                font-size: 12px;
                margin-right: 5px;
                display: inline-block;
                transition: 0.3s;
            }

            /* دوران السهم عند الوقوف بالماوس */
            .sub-header-nav ul li:hover.has-dropdown > a::after {
                transform: rotate(180deg);
            }
/*End*/
/*Added by MMA 19-11-2025*/
 /*New Part Splash*/


#splash-screen {
    position: fixed; /* لتغطية الصفحة بالكامل */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #940a1a; /* لون الخلفية: استخدمت اللون الأحمر المميز (نفس لون الـ Hero) */
    z-index: 99999; /* يجب أن يكون أعلى من كل شيء بما في ذلك الهيدر */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    opacity: 1; /* لضمان ظهوره في البداية */
    visibility: visible;
    transition: opacity 1s ease-out, visibility 1s; /* للانتقال السلس عند الإخفاء */
}


.splash-image {
    width: 100%;
    height: 100%;
    /*object-fit: cover;*/
    object-fit: fill;
    /*object-fit: contain;*/
    object-position: center center;
    opacity: 0;
    transition: opacity 2s;
    position: absolute;
    top: 0;
    left: 0;
}

    .splash-image.active {
        opacity: 1; /* لإظهار الصورة النشطة */
    }



/* ستايل أيقونة أو نص التحميل (اختياري) */
#splash-screen .loading-text {
    position: absolute;
    z-index: 100;
    color: white; /* لون النص */
    font-size: 28px;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* إخفاء محتوى الصفحة الأصلي في البداية */
#page-content {
    /* الستايل الأصلي للمحتوى سيكون مرئياً، وسنقوم بالتحكم في إخفائه/إظهاره من ملف الـ ASPX عبر JavaScript */
    /* يمكنك إضافة opacity: 0; هنا إذا لم تستخدمه في الـ ASPX، ولكني أفضّل التحكم به عبر JS */
    opacity: 0;
    transition: opacity 0.5s;
    padding-top: 90px; /* لضمان أن المحتوى يبدأ أسفل الهيدر الثابت */
}

    /* عند إظهار المحتوى */
    #page-content.loaded {
        opacity: 1;
    }

   /*Flipping PDF*/
/*.pdf-modal {
    display: none;
    position: fixed; 
  
    z-index: 999999 !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
}

.pdf-modal-content {
    position: relative;
    margin: 2% auto;
    width: 80%;
    height: 90vh;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}*/
/* تنسيق نافذة الـ PDF */
.pdf-modal {
    display: none;
    position: fixed;
    z-index: 999999 !important; /* ليكون فوق كل شيء بما في ذلك الهيدر */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9); /* خلفية سوداء شفافة */
}

.pdf-modal-content {
    position: relative;
    margin: 2% auto;
    width: 90%; /* عرض أكبر في الموبايل */
    height: 85vh;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

/* زر الإغلاق في الموبايل */
.close-pdf-btn {
    background: #940a1a;
    color: white;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    display: block;
    text-decoration: none;
}




 /*MMA 26-1-2026*/
@media (max-width: 991px) {
    #hero {
        /*height: auto;
        min-height: 100vh;
        
        text-align: center;
        padding: 100px 0 60px 0 !important;*/
        min-height: auto !important; /* إلغاء ملء الشاشة في الموبايل */
        padding-top: 60px !important; /* ترك مسافة صغيرة للهيدر فقط */
        padding-bottom: 40px !important;
    }

        #hero .hero-img {
            margin-top: 30px;
        }

            #hero .hero-img img {
                /*width: 60% !important; */
                /*margin: 0 auto;
                
                max-height: 300px; 
                width: 80%;*/
                width: 100% !important; /* في الموبايل تأخذ العرض الكامل فقط */
                margin-right: 0 !important;
                max-height: 250px !important;
            }

    .lblIntroWord {
        /*text-align: center !important; 
        font-size: 16px !important;
        margin-bottom: 20px !important; 
   
        margin-top: 20px;*/
        font-size: 15px !important; /* تصغير الخط قليلاً ليناسب الموبايل */
        text-align: center !important;
    }

    /* إصلاح تداخل قسم About في الموبايل */
    .about .video-box {
        min-height: 250px;
        margin-bottom: 30px;
    }
}
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}
/* Added by MMA 14-4-2026*/
/* تنسيقات الشاشات الصغيرة جداً (الموبايل) */
@media (max-width: 576px) {
    .header-container {
        padding-left: 5px !important;
        padding-right: 5px !important;
        /* التأكد من عدم وجود margin سلبي يسبب خروج العناصر */
        margin: 0 !important;
        width: 100% !important;
    }

    /* تصغير حجم الشعارات لتناسب العرض الصغير */
    .caoa-logo, .eagle-logo {
        width: 45px !important;
        height: 45px !important;
    }

    /* ضبط المسافات حول الشعارات */
    .logo-group-start {
        margin-left: 0 !important;
    }

    .me-4 {
        margin-right: 0.5rem !important; /* تقليل المسافة بين النسر وزر المنيو */
    }

    /* ضبط العنوان ليأخذ المساحة المتبقية دون تداخل */
    .logo-title {
        font-size: 14px !important; /* تصغير الخط ليناسب العرض */
        white-space: nowrap; /* منع النص من النزول لسطر جديد */
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .header-title-wrapper {
        flex-grow: 1;
        display: flex;
        justify-content: center;
    }
}

/* إخفاء أو تعديل العناصر في الشاشات شديدة الضيق (مثل 344px) */
@media (max-width: 360px) {
    .logo-title {
        font-size: 12px !important;
    }

    .caoa-logo, .eagle-logo {
        width: 38px !important;
        height: 38px !important;
    }
}
/* Added by MMA 15-4-2026 */

/* 1. معالجة الفراغات الجانبية في الشاشات الكبيرة */
@media (min-width: 1400px) {
    #hero .container

{
    max-width: 90% !important; /* السماح للمحتوى بالتوسع أكثر في الجوانب */
    padding-left: 50px;
    padding-right: 50px;
}

}

/* 2. تكبير حجم العناوين والنصوص لتناسب الشاشة الضخمة */
@media (min-width: 1600px) {
    /* تكبير عنوان "من هنا تلتقي الكفاءات" */
    #Label2 {
        font-size: 3rem !important;
        line-height: 1.2;
        display: inline-block;
        margin-bottom: 20px;
    }

    /* تكبير نص الفقرة */
    .lblIntroWord {
        font-size: 1.5rem !important;
        line-height: 1.8 !important;
        text-align: justify;
    }

    /* تكبير حجم السلايدر والصور */
    .hero-img img {
        max-width: 100% !important;
        transform: scale(1.1); /* تكبير الصورة قليلاً لملء الفراغ */
        transition: transform 0.3s ease;
    }

    #heroSlider {
        margin-top: 20px;
    }
}

/* 3. تنسيق إضافي لضمان عدم وجود فراغ أبيض مزعج */
#hero {
    background-attachment: fixed;
    display: flex;
    align-items: center;
    min-height: 100vh; /* جعل القسم يأخذ كامل ارتفاع الشاشة الكبيرة */
}