/* .member-name,
.member-name *,
.member-name .first-name,
.member-name .last-name {
    font-weight: 400 !important;
} */

/* ==========================================

   1. الإعدادات العامة والتنسيقات الأساسية

   ========================================== */

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

    font-family: 'Cairo', system-ui, -apple-system, sans-serif;

}



body {

    display: flex;

    flex-direction: column;

    min-height: 100vh;

    background-color: #f8f9fa;

    padding-top: 80px;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



ul {

    list-style-type: disc;

    padding-right: 30px;

}



li {

    font-size: 16px;

    margin-bottom: 12px;

}



.bold-text {

    font-weight: bold;

}



/* ==========================================

   2. الهيدر وشريط التنقل (Navbar)

   ========================================== */

.navbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background-color: #ffffff;

    padding: 0 20px;

    height: 80px;

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    width: 100% !important;

    z-index: 1000 !important;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);

    box-sizing: border-box;

    direction: ltr;

}



.logo-container {

    display: flex;

    align-items: center;

    gap: 15px;

    text-decoration: none;

    direction: ltr;

    margin-right: auto;

    height: 100%;

}



.logo-img {

    height: 70px;

    width: auto;

    object-fit: contain;

    display: block;

}



.logo-text {

    font-size: 16px;

    font-weight: 700;

    color: #1a2536;

    text-align: left;

    white-space: nowrap;

    display: block;

}



.nav-links, .nav-menu {

    display: flex;

    align-items: center;

    gap: 20px;

    direction: ltr;

}



.nav-links a, .nav-link {

    text-decoration: none;

    color: #334155;

    font-weight: 600;

    font-size: 15px;

    transition: color 0.3s ease;

}



.nav-links a:hover,

.nav-links a.active,

.nav-link:hover,

.nav-link.active {

    color: #00a8ff;

}



.menu-toggle {

    display: none;

    background: none;

    border: none;

    font-size: 24px;

    color: #1a2536;

    cursor: pointer;

}



/* ==========================================

   3. كارت كلمة الرئيس

   ========================================== */

.card-container {

    display: flex;

    flex-direction: row;

    align-items: flex-start;

    gap: 30px;

    direction: rtl;

    padding: 20px 0;

}



.card-image {

    flex: 0 0 280px;

}



.card-image img {

    width: 100%;

    height: auto;

    display: block;

    border-radius: 8px;

}



.card-content {

    flex: 1;

}



.signature {

    font-family: 'Dancing Script', cursive;

    font-size: 36px;

    color: #204060;

    text-align: left;

    direction: ltr;

    margin: 15px 0 20px 0;

    font-weight: 600;

}



/* ==========================================

   4. قسم فريق العمل وتنسيق الكروت والترجمة

   ========================================== */

.team-section {

    padding: 40px 0 60px 0;

    width: 100%;

}



.team-grid {

    display: flex !important;

    flex-wrap: wrap !important;

    justify-content: center !important;

    gap: 30px !important;

}



.team-card {

    background: #ffffff;

    border-radius: 16px;

    padding: 25px 20px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);

    border: 1px solid #eef2f5;

    flex: 0 0 310px;

    max-width: 100%;

    box-sizing: border-box;

    text-align: center !important;

}



.avatar-wrapper {

    position: relative;

    width: 100px;

    height: 115px;

    margin: 0 auto 15px;

}



.avatar-img {

    width: 100%;

    height: 100%;

    border-radius: 50%;

    object-fit: cover;

    border: 3px solid #0d6efd;

}



/* ==========================================

   تنسيقات الأسماء والمحاذاة الصحيحة (RTL)ش

   ========================================== */

.member-name {

    font-size: 1.2rem;

    color: #1a237e;

    margin-bottom: 8px;

    text-align: center !important;

    direction: rtl !important;

    line-height: 1.4;

    white-space: nowrap;

}



/* إزالة العُرض (Bold) من الاسم بالكامل ومن اللقب */
.member-name,
.member-name *,
.member-name .first-name,
.member-name .last-name,
.member-name strong,
.member-name b {
    font-weight: 200 !important; /* أو 400 */
    color: #1a237e !important;
}


/* تنسيق اللغة الإنجليزية تلقائياً في حال ترجمة المتصفح */

.member-name:lang(en),

.member-name[lang="en"] {

    direction: ltr !important;

}



.member-name:lang(en) .last-name,

.member-name[lang="en"] .last-name {

    text-transform: uppercase !important;

}



/* المسمى الوظيفي: تكبير الحرف الأول من كل كلمة */

.member-role, 

.member-role *, 

.member-role font {

    text-transform: capitalize !important; /* تحويل أول حرف إلى Capital */

    text-align: center !important;

    margin-left: auto !important;

    margin-right: auto !important;

    display: block !important;

}



.member-role {

    color: #0d6efd;

    font-size: 0.9rem;

    margin-bottom: 10px;

}

/* الوصف: تكبير الحرف الأول من الكلمات */

.member-bio, 

.member-bio *, 

.member-bio font {

    text-align: center !important;

    margin-left: auto !important;

    margin-right: auto !important;

    display: block !important;

}





.member-bio {

    color: #6c757d;

    font-size: 0.85rem;

    line-height: 1.5;

    text-transform: capitalize !important; /* تحويل الحرف الأول إلى Capital */

}



/* ==========================================

   5. زر الواتساب العائم

   ========================================== */

.whatsapp-float {

    position: fixed;

    bottom: 25px;

    right: 25px;

    width: 60px;

    height: 60px;

    background-color: #25d366;

    color: #ffffff;

    border-radius: 50px;

    text-align: center;

    font-size: 32px;

    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    transition: all 0.3s ease;

}



.whatsapp-float:hover {

    background-color: #128c7e;

    transform: scale(1.1);

    color: #ffffff;

}



/* ==========================================

   6. الفوتر (Footer)

   ========================================== */

.site-footer {

    background-color: #0b111e;

    color: #ffffff;

    padding: 60px 40px;

    width: 100%;

    direction: ltr;

    text-align: left;

    margin-top: auto;

}



.footer-container {

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    gap: 50px;

    flex-wrap: wrap;

}



.footer-col {

    flex: 1;

    min-width: 220px;

}



.about-col {

    flex: 1.5;

}



.about-col h2 {

    font-size: 1.5rem;

    font-weight: 700;

    line-height: 1.3;

    margin-bottom: 20px;

}



.about-col p {

    color: #8292a2;

    font-size: 0.9rem;

    line-height: 1.6;

    max-width: 380px;

}



.links-col h3, 

.contact-col h3 {

    font-size: 1.1rem;

    font-weight: 700;

    margin-bottom: 20px;

}



.links-col ul {

    list-style: none;

}



.links-col ul li {

    margin-bottom: 12px;

}



.links-col ul li a {

    color: #ffffff;

    text-decoration: none;

    font-weight: 600;

    font-size: 0.9rem;

}



.contact-info {

    list-style: none;

    margin-bottom: 25px;

}



.contact-info li {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 15px;

    color: #ffffff;

    font-size: 0.88rem;

    line-height: 1.4;

}



.contact-info .icon {

    color: #00a8ff;

    font-size: 1rem;

    margin-top: 2px;

}



.social-icons {

    display: flex;

    gap: 10px;

}



.social-icons a {

    width: 36px;

    height: 36px;

    background-color: #172131;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 6px;

    text-decoration: none;

    font-size: 0.95rem;

    transition: background-color 0.2s;

}



.social-icons a:hover {

    background-color: #00a8ff;

}



/* ==========================================

   7. تجاوب التصميم مع الهواتف الذكية (Mobile)

   ========================================== */

@media (max-width: 768px) {

    body {

        padding-top: 80px;

    }



    .navbar {

        position: fixed !important;

        top: 0 !important;

        left: 0 !important;

        width: 100% !important;

        height: 80px !important;

        padding: 0 15px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        background-color: #ffffff !important;

        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;

        z-index: 1000 !important;

        direction: ltr !important;

    }



    .logo-container {

        display: flex !important;

        align-items: center !important;

        gap: 10px !important;

        height: 100% !important;

        text-decoration: none !important;

        direction: ltr !important;

        margin-right: auto !important;

        margin-left: 0 !important;

    }



    .logo-img {

        height: 60px !important;

        width: auto !important;

        max-height: 100% !important;

        object-fit: contain !important;

        display: block !important;

    }



    .logo-text {

        font-size: 13px !important;

        white-space: nowrap !important;

        display: block !important;

    }



    .menu-toggle {

        display: block;

    }



    .nav-menu, .nav-links {

        position: absolute;

        top: 80px;

        left: 0;

        right: 0;

        width: 100%;

        background-color: #ffffff;

        flex-direction: column;

        padding: 15px 0;

        gap: 12px;

        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);

        display: none;

    }



    .nav-menu.active, .nav-links.active {

        display: flex;

    }



    .card-container {

        display: flex !important;

        flex-direction: row !important;

        align-items: flex-start !important;

        gap: 10px !important;

        padding: 10px !important;

        box-sizing: border-box !important;

        direction: rtl !important;

        text-align: right !important;

    }



    .card-image {

        flex: 0 0 32% !important;

        max-width: 120px !important;

        position: sticky !important;

        top: 10px !important;

    }



    .card-image img {

        width: 100% !important;

        height: auto !important;

        object-fit: contain !important;

        border-radius: 6px !important;

        display: block !important;

    }



    .card-content {

        flex: 1 !important;

        min-width: 0 !important;

    }



    .card-content h2 {

        font-size: 0.95rem !important;

        margin-top: 0 !important;

        margin-bottom: 6px !important;

    }



    .card-content h3 {

        font-size: 0.85rem !important;

        margin-top: 10px !important;

        margin-bottom: 4px !important;

    }



    .card-content p, 

    .card-content li {

        font-size: 0.72rem !important;

        line-height: 1.35 !important;

        margin-bottom: 6px !important;

    }



    .card-content ul {

        padding-right: 14px !important;

        margin: 4px 0 !important;

    }



    .footer-container {

        flex-direction: column;

        gap: 30px;

    }

} 

/* ==========================================
   تثبيت تنسيق الأسماء والألقاب في كل المتصفحات
   ========================================== */

/* 1. تثبيت وزن الخط ومنع العُرض (Bold) نهائياً */
.team-card .member-name,
.team-card .member-name *,
.team-card .first-name,
.team-card .last-name {
    font-weight: 400 !important; /* إلغاء العُرض */
    font-style: normal !important;
    color: #1a237e !important;
    display: inline-block !important; /* يحافظ على الترتيب من اليسار لليمين أو العكس بدون عكس الأماكن */
}

/* 2. ضبط اتجاه الأسماء عند ترجمة المتصفح للغة الإنجليزية */
.team-card .member-name:lang(en),
.team-card .member-name[lang="en"] {
    direction: ltr !important;
    text-align: center !important;
}

/* 3. ضبط اتجاه الأسماء في اللغة العربية */
.team-card .member-name:lang(ar),
.team-card .member-name[lang="ar"] {
    direction: rtl !important;
    text-align: center !important;
}

/* ======================================================
   تنسيق وإظهار/إخفاء أسماء فريق العمل عند ترجمة الصفحة
   ====================================================== */

/* 1. توحيد حجم ووزن الخط وإلغاء الـ Bold بجميع الأوضاع والمتصفحات */
.member-name,
.member-name *,
.member-name .name-ar,
.member-name .name-en {
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 1.2rem !important;
    color: #204060 !important; /* نفس لون خط الهيدر لديك */
}

/* 2. الوضع الافتراضي (اللغة العربية) */
.member-name .name-en {
    display: none !important;
}

.member-name .name-ar {
    display: inline-block !important;
}

/* 3. عند ترجمة الصفحة إلى الإنجليزية عبر المتصفح أو زر اللغة */
html[lang="en"] .member-name .name-ar,
body[translated] .member-name .name-ar,
.translated-ltr .member-name .name-ar,
.translated-rtl .member-name .name-ar {
    display: none !important;
}

html[lang="en"] .member-name .name-en,
body[translated] .member-name .name-en,
.translated-ltr .member-name .name-en,
.translated-rtl .member-name .name-en {
    display: inline-block !important;
}