.elementor-231 .elementor-element.elementor-element-814ea5a{--display:flex;--margin-top:60px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-231 .elementor-element.elementor-element-57724e5{--display:flex;}.elementor-231 .elementor-element.elementor-element-17b56cb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-231 .elementor-element.elementor-element-57724e5{--content-width:1413px;}}/* Start custom CSS for container, class: .elementor-element-814ea5a *//* ============================================================
   تنسيقات CSS خارجية مخصصة لصفحة Five About Us الكاملة
   حط الكود ده في (Additional CSS) في تخصيص القالب
============================================================ */

/* 1. تظبيط الصورة الأساسية (Intro Image) لتكون عريضة (بانر) وليست طويلة */
/* نستخدم كلاس الصفحة الأب للSpecificity */
.ffap-page-wrap .ffap-img-box {
    /* تغيير التناسب ليكون عريض جداً (21:9) مثل بانر سينمائي */
    aspect-ratio: 50 / 9 !important; 
    
    /* زيادة العرض الأقصى قليلاً لتعطي إحساس البانر */
    max-width: 1200px !important; 
}

.ffap-page-wrap .ffap-img-box img {
    /* التأكد من أن الصورة تقص وتحافظ على جودتها داخل الإطار الجديد */
    object-fit: cover !important;
}

/* 2. تصغير ارتفاع البريدكامب (الهيدر) على شاشات الموبيل */
@media (max-width: 768px) {
    .ffap-page-wrap .ffap-header-sec {
        /* تصغير الارتفاع من 250px لـ 150px فقط */
        height: 150px !important; 
    }
    
    /* تصغير حجم الخط للعنوان على الموبيل ليتناسب مع الارتفاع الجديد */
    .ffap-page-wrap .ffap-header-sec h1 {
        font-size: 1.8rem !important; 
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-17b56cb *//* 1. تغيير حروف العنوان: أول حرف كابيتال والباقي سمول */
.cg-marquee-title {
    text-transform: capitalize !important;
}

/* 2. كل الأعلام في العادي رمادي، باهتة شوية، ومقاسها أصغر سنة */
.cg-flag-card img {
    filter: grayscale(100%) !important;
    opacity: 0.5 !important;
    transform: scale(0.9) !important;
    border-color: transparent !important;
    transition: all 0.5s ease !important;
}
.cg-flag-card span {
    color: #94a3b8 !important; /* لون رمادي للنص */
    transition: all 0.5s ease !important;
}

/* 3. العلم اللي ييجي عليه الدور (النشط) أو لما تقف عليه بالماوس: ينور ويكبر */
.swiper-slide-active .cg-flag-card img,
.cg-flag-card:hover img {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
    transform: scale(1.05) !important;
    border-color: #F6D321 !important;
}

/* تلوين اسم الدولة للعلم النشط */
.swiper-slide-active .cg-flag-card span,
.cg-flag-card:hover span {
    color: #004d40 !important;
    font-weight: 900 !important;
}

/* 4. تظبيط الموبايل: تصغير العنوان والأعلام حاجة بسيطة */
@media (max-width: 768px) {
    .cg-marquee-title {
        font-size: 1.8rem !important; /* نزلناه لـ 1.8 عشان مياخدش مساحة كبيرة */
        margin-bottom: 25px !important;
    }
    .cg-flag-card img {
        width: 80px !important; 
        height: 80px !important;
    }
}/* End custom CSS */