/**
 * Arabic About Us Page Styles
 * أنماط صفحة من نحن العربية
 * 
 * Design: Gold (#D4AF37, #FFD700) and Deep Blue (#003366, #004080) theme
 * Layout: RTL (Right-to-Left)
 * Target: .lang-ar body class on About Us page
 */

/* ============================================================================
   Global RTL Layout - التخطيط العام من اليمين إلى اليسار
   ============================================================================ */

.lang-ar .page-about-modern {
    direction: rtl !important;
    text-align: right !important;
}

/* ============================================================================
   Hero Banner Section - قسم البانر الرئيسي
   ============================================================================ */

.lang-ar .page-about-modern .archive-hero {
    background-size: cover !important;
    background-position: center !important;
    padding: 100px 0 80px !important;
    position: relative !important;
    direction: rtl !important;
}

/* 只在没有背景图片时应用渐变 */
.lang-ar .page-about-modern .archive-hero:not([style*="background-image"]) {
    background: linear-gradient(135deg, #003366 0%, #004080 50%, #D4AF37 100%) !important;
}

/* 有背景图片时的遮罩层 */
.lang-ar .page-about-modern .archive-hero[style*="background-image"]::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.7) 0%, rgba(0, 64, 128, 0.6) 50%, rgba(212, 175, 55, 0.5) 100%) !important;
    z-index: 1 !important;
}

/* 没有背景图片时的遮罩层 */
.lang-ar .page-about-modern .archive-hero:not([style*="background-image"])::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.3) 0%, rgba(0, 64, 128, 0.2) 50%, rgba(212, 175, 55, 0.1) 100%) !important;
    z-index: 1 !important;
}

.lang-ar .page-about-modern .archive-hero .container {
    position: relative !important;
    z-index: 2 !important;
}

.lang-ar .page-about-modern .archive-title {
    color: #FFD700 !important;
    text-shadow: 0 2px 12px rgba(212, 175, 55, 0.3) !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

/* 更高优先级的选择器 */
body.lang-ar .page-about-modern .archive-hero .archive-title,
body.lang-ar.page .page-about-modern .archive-title {
    color: #FFD700 !important;
    text-shadow: 0 2px 12px rgba(212, 175, 55, 0.3) !important;
}

.lang-ar .page-about-modern .archive-description {
    color: rgba(255, 255, 255, 0.95) !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.6 !important;
    max-width: 800px !important;
}

/* 更高优先级的选择器 */
body.lang-ar .page-about-modern .archive-hero .archive-description,
body.lang-ar.page .page-about-modern .archive-description {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ============================================================================
   Company Intro Section - قسم نبذة عن الشركة
   ============================================================================ */

.lang-ar .page-about-modern .about-intro {
    padding: 80px 0 !important;
    background: #f8f9fa !important;
    direction: rtl !important;
}

.lang-ar .page-about-modern .about-intro .section-title {
    color: #003366 !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    margin-bottom: 30px !important;
    text-align: right !important;
    position: relative !important;
    padding-bottom: 15px !important;
}

.lang-ar .page-about-modern .about-intro .section-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 80px !important;
    height: 4px !important;
    background: linear-gradient(90deg, #D4AF37 0%, #FFD700 100%) !important;
}

.lang-ar .page-about-modern .about-intro__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px !important;
    align-items: center !important;
}

/* 只有文本时占满全宽 */
.lang-ar .page-about-modern .about-intro__grid--text-only {
    grid-template-columns: 1fr !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.lang-ar .page-about-modern .about-intro__text {
    direction: rtl !important;
}

.lang-ar .page-about-modern .intro-content p {
    color: #333333 !important;
    font-size: 17px !important;
    line-height: 1.8 !important;
    margin-bottom: 20px !important;
    text-align: right !important;
}

/* ============================================================================
   Statistics Section - قسم الإحصائيات
   ============================================================================ */

.lang-ar .page-about-modern .about-stats {
    padding: 80px 0 !important;
    background: #ffffff !important;
    direction: rtl !important;
}

.lang-ar .page-about-modern .about-stats .section-title {
    color: #003366 !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    margin-bottom: 50px !important;
    text-align: center !important;
}

.lang-ar .page-about-modern .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 40px !important;
}

.lang-ar .page-about-modern .stat-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    border-radius: 16px !important;
    padding: 40px 30px !important;
    text-align: center !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
    border: 2px solid transparent !important;
}

.lang-ar .page-about-modern .stat-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 40px rgba(212, 175, 55, 0.25) !important;
    border-color: #D4AF37 !important;
}

.lang-ar .page-about-modern .stat-card__icon {
    color: #D4AF37 !important;
    margin-bottom: 20px !important;
}

.lang-ar .page-about-modern .stat-card__number {
    color: #003366 !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}

.lang-ar .page-about-modern .stat-card__label {
    color: #666666 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* ============================================================================
   Timeline Section - قسم الجدول الزمني
   ============================================================================ */

.lang-ar .page-about-modern .about-timeline {
    padding: 80px 0 !important;
    background: #f8f9fa !important;
    direction: rtl !important;
}

.lang-ar .page-about-modern .about-timeline .section-title {
    color: #003366 !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    margin-bottom: 60px !important;
    text-align: center !important;
}

.lang-ar .page-about-modern .timeline {
    position: relative !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
}

.lang-ar .page-about-modern .timeline__line {
    position: absolute !important;
    right: 50% !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background: linear-gradient(180deg, #D4AF37 0%, #004080 100%) !important;
    transform: translateX(50%) !important;
}

.lang-ar .page-about-modern .timeline__item {
    position: relative !important;
    margin-bottom: 60px !important;
    display: flex !important;
    align-items: center !important;
}

.lang-ar .page-about-modern .timeline__item--right {
    flex-direction: row !important;
}

.lang-ar .page-about-modern .timeline__item--left {
    flex-direction: row-reverse !important;
}

.lang-ar .page-about-modern .timeline__content {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 30px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    width: calc(50% - 40px) !important;
    border: 2px solid #D4AF37 !important;
    transition: all 0.3s ease !important;
}

.lang-ar .page-about-modern .timeline__content:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(212, 175, 55, 0.3) !important;
}

.lang-ar .page-about-modern .timeline__year {
    color: #D4AF37 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}

.lang-ar .page-about-modern .timeline__title {
    color: #003366 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
}

.lang-ar .page-about-modern .timeline__description {
    color: #666666 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

.lang-ar .page-about-modern .timeline__marker {
    width: 20px !important;
    height: 20px !important;
    background: #D4AF37 !important;
    border: 4px solid #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 4px #D4AF37 !important;
    margin: 0 30px !important;
}

/* ============================================================================
   Core Values Section - قسم القيم الأساسية
   ============================================================================ */

.lang-ar .page-about-modern .about-values {
    padding: 80px 0 !important;
    background: #ffffff !important;
    direction: rtl !important;
}

.lang-ar .page-about-modern .about-values .section-title {
    color: #003366 !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    margin-bottom: 50px !important;
    text-align: center !important;
}

.lang-ar .page-about-modern .values-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px !important;
}

.lang-ar .page-about-modern .value-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    border-radius: 16px !important;
    padding: 40px 30px !important;
    text-align: center !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
    border: 2px solid transparent !important;
}

.lang-ar .page-about-modern .value-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 40px rgba(212, 175, 55, 0.25) !important;
    border-color: #D4AF37 !important;
}

.lang-ar .page-about-modern .value-card__icon {
    color: #D4AF37 !important;
    margin-bottom: 25px !important;
}

.lang-ar .page-about-modern .value-card__title {
    color: #003366 !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
}

.lang-ar .page-about-modern .value-card__description {
    color: #666666 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* ============================================================================
   Global Locations Section - قسم المواقع العالمية
   ============================================================================ */

.lang-ar .page-about-modern .about-locations {
    padding: 80px 0 !important;
    background: #f8f9fa !important;
    direction: rtl !important;
}

.lang-ar .page-about-modern .about-locations .section-title {
    color: #003366 !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    margin-bottom: 50px !important;
    text-align: center !important;
}

.lang-ar .page-about-modern .locations-map {
    position: relative !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 40px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.lang-ar .page-about-modern .locations-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
}

.lang-ar .page-about-modern .location-item {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    border-radius: 12px !important;
    padding: 25px !important;
    border-right: 4px solid #D4AF37 !important;
    transition: all 0.3s ease !important;
}

.lang-ar .page-about-modern .location-item:hover {
    transform: translateX(-5px) !important;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.2) !important;
}

.lang-ar .page-about-modern .location-marker {
    width: 12px !important;
    height: 12px !important;
    background: #D4AF37 !important;
    border-radius: 50% !important;
    margin-bottom: 15px !important;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2) !important;
}

.lang-ar .page-about-modern .location-city {
    color: #003366 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

.lang-ar .page-about-modern .location-country {
    color: #666666 !important;
    font-size: 15px !important;
    margin-bottom: 5px !important;
}

.lang-ar .page-about-modern .location-address {
    color: #999999 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* ============================================================================
   Standards Section - قسم المعايير
   ============================================================================ */

.lang-ar .page-about-modern .about-standards {
    padding: 80px 0 !important;
    background: #ffffff !important;
    direction: rtl !important;
}

.lang-ar .page-about-modern .about-standards .section-title {
    color: #003366 !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    margin-bottom: 50px !important;
    text-align: center !important;
}

.lang-ar .page-about-modern .standards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px !important;
}

.lang-ar .page-about-modern .standard-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    border-radius: 16px !important;
    padding: 40px 30px !important;
    text-align: center !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
    border: 2px solid transparent !important;
}

.lang-ar .page-about-modern .standard-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 40px rgba(212, 175, 55, 0.25) !important;
    border-color: #D4AF37 !important;
}

.lang-ar .page-about-modern .standard-card__icon {
    color: #D4AF37 !important;
    margin-bottom: 25px !important;
}

.lang-ar .page-about-modern .standard-card__title {
    color: #003366 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
}

.lang-ar .page-about-modern .standard-card__description {
    color: #666666 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
}

.lang-ar .page-about-modern .standard-card__button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 30px !important;
    background: linear-gradient(135deg, #D4AF37 0%, #FFD700 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 25px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.lang-ar .page-about-modern .standard-card__button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4) !important;
}

/* ============================================================================
   CTA Section - قسم الدعوة لاتخاذ إجراء
   ============================================================================ */

.lang-ar .page-about-modern .about-cta {
    padding: 100px 0 !important;
    background: linear-gradient(135deg, #003366 0%, #004080 50%, #D4AF37 100%) !important;
    direction: rtl !important;
}

.lang-ar .page-about-modern .cta-content {
    text-align: center !important;
}

.lang-ar .page-about-modern .cta-title {
    color: #ffffff !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.lang-ar .page-about-modern .cta-description {
    color: #FFD700 !important;
    font-size: 20px !important;
    line-height: 1.6 !important;
    margin-bottom: 40px !important;
    max-width: 700px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.lang-ar .page-about-modern .cta-button {
    display: inline-block !important;
    padding: 18px 50px !important;
    background: #FFD700 !important;
    color: #003366 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.3) !important;
}

.lang-ar .page-about-modern .cta-button:hover {
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 12px 40px rgba(255, 215, 0, 0.5) !important;
    background: #ffffff !important;
}

/* ============================================================================
   Modal Styles - أنماط النافذة المنبثقة
   ============================================================================ */

.lang-ar .page-about-modern .modal {
    direction: rtl !important;
}

.lang-ar .page-about-modern .modal-content {
    text-align: right !important;
}

.lang-ar .page-about-modern .modal-content h3 {
    color: #003366 !important;
}

.lang-ar .page-about-modern .download-form .form-group label {
    text-align: right !important;
    display: block !important;
}

.lang-ar .page-about-modern .download-form .form-group input {
    text-align: right !important;
}

.lang-ar .page-about-modern .btn-submit {
    background: linear-gradient(135deg, #D4AF37 0%, #FFD700 100%) !important;
}

.lang-ar .page-about-modern .btn-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4) !important;
}

/* ============================================================================
   Responsive Design - التصميم المتجاوب
   ============================================================================ */

/* Tablet */
@media (max-width: 1024px) {
    .lang-ar .page-about-modern .archive-title {
        font-size: 40px !important;
    }
    
    .lang-ar .page-about-modern .about-intro__grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    
    .lang-ar .page-about-modern .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .lang-ar .page-about-modern .values-grid,
    .lang-ar .page-about-modern .standards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .lang-ar .page-about-modern .locations-list {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .lang-ar .page-about-modern .archive-hero {
        padding: 60px 0 40px !important;
    }
    
    .lang-ar .page-about-modern .archive-title {
        font-size: 32px !important;
    }
    
    .lang-ar .page-about-modern .archive-description {
        font-size: 16px !important;
    }
    
    .lang-ar .page-about-modern .section-title {
        font-size: 28px !important;
    }
    
    .lang-ar .page-about-modern .stats-grid,
    .lang-ar .page-about-modern .values-grid,
    .lang-ar .page-about-modern .standards-grid,
    .lang-ar .page-about-modern .locations-list {
        grid-template-columns: 1fr !important;
    }
    
    .lang-ar .page-about-modern .timeline__content {
        width: calc(100% - 40px) !important;
    }
    
    .lang-ar .page-about-modern .timeline__line {
        right: 20px !important;
        transform: none !important;
    }
    
    .lang-ar .page-about-modern .timeline__item {
        flex-direction: row !important;
    }
    
    .lang-ar .page-about-modern .cta-title {
        font-size: 32px !important;
    }
    
    .lang-ar .page-about-modern .cta-description {
        font-size: 16px !important;
    }
}