/* =====================================================
   BLUEPRINT/STEEL BRAND SYSTEM  —  brand.css
   Framework-agnostic visual identity (Bootstrap 5 friendly)
   Palette: #1B6CA8 (Blueprint Blue) | #2B3440 (Steel)
   Requires: Bootstrap 5 grid/navbar, Cairo font (RTL), Font Awesome (optional)
   NOTE: contains NO logo assets. Supply your own logo image.
===================================================== */

:root {
    --primary-color: #1B6CA8;
    --primary-dark: #145585;
    --primary-light: #2E8CCB;
    --secondary-color: #2B3440;
    --secondary-light: #4B5563;
    --white: #ffffff;
    --light-gray: #f8f9fa;
    --medium-gray: #e9ecef;
    --text-dark: #2c2c2c;
    --text-muted: #6c757d;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 8px 30px rgba(27, 108, 168, 0.2);
    --transition: all 0.3s ease;
    --border-radius: 12px;
    
    /* Dark Mode Variables */
    --bg-body: #ffffff;
    --bg-card: #ffffff;
    --bg-nav: #ffffff;
    --border-color: #e9ecef;

    /* Ambient pattern (hero + "why" band). Point it at any small mono glyph:
       --pattern-tile: url('/images/pattern.svg');  Leave unset to disable. */
    --pattern-tile: none;
    --pattern-opacity: 0.09;
}

/* Dark Mode Theme */
[data-theme="dark"] {
    --secondary-color: #e8e8e8;
    --secondary-light: #b0b0b0;
    --white: #1A222C;
    --light-gray: #2a2a2c;
    --medium-gray: #2B3440;
    --text-dark: #e8e8e8;
    --text-muted: #a0a0a0;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --bg-body: #121214;
    --bg-card: #1A222C;
    --bg-nav: #1A222C;
    --border-color: #2B3440;
}

[data-theme="dark"] body {
    background-color: var(--bg-body);
}

[data-theme="dark"] .navbar-custom {
    background: var(--bg-nav) !important;
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .navbar-custom.scrolled {
    background: var(--bg-nav) !important;
}

[data-theme="dark"] .navbar-custom .nav-link {
    color: var(--text-dark) !important;
}

[data-theme="dark"] .navbar-custom .navbar-collapse {
    background: transparent;
    border: none;
}

@media (max-width: 991px) {
    [data-theme="dark"] .navbar-custom .navbar-collapse {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
    }
}

[data-theme="dark"] .navbar-custom .navbar-toggler {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .navbar-custom .navbar-toggler-icon {
    filter: invert(1);
}

/* Optional: if your logo is a dark-on-transparent mark, uncomment to keep it
   legible on dark surfaces while preserving the brand hue.
[data-theme="dark"] .navbar-custom .navbar-brand img { filter: invert(1) hue-rotate(180deg); }
*/

/* الوضع الليلي: نفس خلفية الهيرو والموافقة لها كما في الوضع النهاري */
[data-theme="dark"] .hero-section,
[data-theme="dark"] .hero-section#home::after,
[data-theme="dark"] .why-section {
    background: linear-gradient(135deg, #2B3440 0%, #1A222C 100%);
}

[data-theme="dark"] .navbar-custom .dropdown-menu {
    background: #252527;
}

[data-theme="dark"] .navbar-custom .dropdown-item:hover {
    background: var(--bg-card);
}

[data-theme="dark"] .service-card,
[data-theme="dark"] .project-card,
[data-theme="dark"] .news-card,
[data-theme="dark"] .product-card,
[data-theme="dark"] .team-card,
[data-theme="dark"] .contact-form-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .contact-info-card {
    background: #12324B;
}

[data-theme="dark"] .contact-info-card h3 {
    color: #ffffff;
}

[data-theme="dark"] .contact-info-card p {
    color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .contact-item-text h5 {
    color: #ffffff;
}

[data-theme="dark"] .contact-item-text p {
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .contact-item-hint {
    color: #ffffff;
}

[data-theme="dark"] .form-control-custom {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-dark);
}

[data-theme="dark"] .form-control-custom:focus {
    background: var(--bg-card);
}

[data-theme="dark"] .file-upload-label {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .footer {
    background: #0E141B;
    color: #e0e0e0;
}

[data-theme="dark"] .footer h5 {
    color: #ffffff;
}

[data-theme="dark"] .footer p,
[data-theme="dark"] .footer-link {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .footer-link:hover {
    color: var(--primary-color);
}

[data-theme="dark"] .footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

/* تباين أوضح لأزرار التواصل في الفوتر - الوضع الليلي */
[data-theme="dark"] .footer .social-link {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
}
[data-theme="dark"] .footer .social-link svg {
    fill: #ffffff;
}
[data-theme="dark"] .footer .social-link i {
    color: #ffffff;
}
[data-theme="dark"] .footer .social-link:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}
[data-theme="dark"] .footer .social-link:hover svg {
    fill: #ffffff;
}
[data-theme="dark"] .footer .social-link:hover i {
    color: #ffffff;
}

/* نفس أسلوب أزرار الفوتر في قسم "تابعنا" (الوضع الليلي والعادي) */
[data-theme="dark"] .social-links .social-link {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.4);
}
[data-theme="dark"] .social-links .social-link:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

[data-theme="dark"] .section-padding {
    background-color: var(--bg-body);
}

[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6 {
    color: var(--text-dark);
}

[data-theme="dark"] .language-switch {
    background: var(--border-color);
}

[data-theme="dark"] .language-switch a,
[data-theme="dark"] .language-switch span {
    color: var(--text-dark);
}

[data-theme="dark"] .language-switch span.active {
    color: var(--white);
}

/* Dark mode: effect tiles darker */
/* التأثير الدوار: لا يتغير في الوضع الليلي (نفس المظهر في النهار والليل) */
/* لا نطبق أي override للوضع الليلي على .effect-tile */

/* Dark mode text fixes for sections with dark backgrounds */
[data-theme="dark"] .why-section .section-title h2,
[data-theme="dark"] .why-section h2 {
    color: #ffffff !important;
}

[data-theme="dark"] .why-section p {
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="dark"] .why-card h4 {
    color: #ffffff;
}

[data-theme="dark"] .why-card p {
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .stat-number {
    color: #ffffff !important;
}

[data-theme="dark"] .stat-label {
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .hero-content h1 {
    color: #ffffff !important;
}

[data-theme="dark"] .hero-content p {
    color: rgba(255, 255, 255, 0.85);
}

/* Theme Toggle Button */
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    margin-left: 10px;
}

[dir="rtl"] .theme-toggle {
    margin-left: 0;
    margin-right: 10px;
}

/* Mobile actions container */
.navbar-mobile-actions {
    display: none;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

[dir="rtl"] .navbar-mobile-actions {
    margin-left: 0;
    margin-right: auto;
}

.navbar-mobile-actions > * {
    flex-shrink: 0;
}

/* Language toggle button */
.lang-toggle-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    background: var(--light-gray);
    color: var(--secondary-color) !important;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: var(--transition);
    border: 1px solid var(--medium-gray);
    margin: 0 !important;
    padding: 0 !important;
}

.lang-toggle-btn:hover {
    background: var(--medium-gray);
    color: var(--secondary-color) !important;
    transform: scale(1.05);
}

[data-theme="dark"] .lang-toggle-btn {
    background: var(--bg-card);
    color: #e0e0e0 !important;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .lang-toggle-btn:hover {
    background: #2a2a2c;
    color: #ffffff !important;
}

/* Hide mobile theme toggle on desktop */
.theme-toggle-mobile {
    display: none;
}

@media (max-width: 991px) {
    .navbar-mobile-actions {
        display: flex;
    }
    
    .lang-toggle-btn {
        display: flex;
    }
    
    .theme-toggle-mobile {
        display: flex;
        width: 38px;
        height: 38px;
        min-width: 38px;
        background: var(--light-gray);
        border-radius: 8px;
        padding: 0 !important;
        margin: 0 !important;
        border: 1px solid var(--medium-gray);
    }
    
    .theme-toggle-mobile svg {
        width: 20px;
        height: 20px;
    }
    
    [data-theme="dark"] .theme-toggle-mobile {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
    }
    
    /* Hide original language switch on mobile */
    .language-switch {
        display: none !important;
    }
}

.theme-toggle:hover {
    background: var(--light-gray);
}

.theme-toggle svg {
    width: 22px;
    height: 22px;
    fill: var(--secondary-color);
    transition: var(--transition);
}

.theme-toggle .sun-icon {
    display: none;
}

.theme-toggle .moon-icon {
    display: block;
}

[data-theme="dark"] .theme-toggle .sun-icon {
    display: block;
}

[data-theme="dark"] .theme-toggle .moon-icon {
    display: none;
}

[data-theme="dark"] .theme-toggle svg {
    fill: var(--primary-color);
}

[data-theme="dark"] .theme-toggle:hover {
    background: var(--border-color);
}

/* ==================== BASE STYLES ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-dark);
    line-height: 1.7;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

img {
    max-width: 100%;
    height: auto;
}

/*
   Bootstrap يعطي .container عرضاً أقصى عند كل نقطة توقّف ثم يوسّطه بهامش
   تلقائي. فرضُ max-width:100% هنا كان يلغي ذلك العرض الأقصى، فيمتدّ المحتوى
   بعرض الشاشة كاملاً ويلتصق بالحافة اليمنى في RTL بدل أن يتوسّط.
   التوسيط الصريح وحده يكفي — والحاوي لا يتجاوز الشاشة أصلاً.
*/
.container,
.container-fluid {
    margin-inline: auto;
}

.row {
    max-width: 100%;
}

/* منع امتداد الأعمدة لتجاوز الصف (يُلغى تلقائياً لصفوف البطاقات على الجوال) */
.row > * {
    max-width: 100%;
}

section {
    max-width: 100%;
    overflow-x: hidden;
}

/* RTL Support for Arabic */
html[dir="rtl"] body {
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    color: var(--secondary-color);
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: var(--transition);
}

a:hover {
    color: var(--primary-dark);
}

/* ==================== UTILITY CLASSES ==================== */
.section-padding {
    padding: 100px 0;
}

.section-title {
    text-align: center;
  margin-bottom: 60px;
}

.section-title h2 {
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.section-title h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    border-radius: 2px;
}

.section-title p {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 20px auto 0;
}

.btn-primary-custom {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
    border: none;
    padding: 14px 35px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-primary-custom:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    color: var(--white);
}

/* أقسام CTA الموحدة (Ready to Save / Need Help / Ready to Improve): تنسيق واحد لجميع أحجام الشاشات */
.cta-block {
    text-align: center;
}
.cta-block > h2 {
    font-size: 2rem;
    color: var(--secondary-color);
    margin-bottom: 0;
}
.cta-block > p {
    color: var(--text-muted);
    max-width: 600px;
    margin: 20px auto 30px;
}
.cta-block > .btn-primary-custom {
    margin: 0 auto;
}

.btn-secondary-custom {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
    padding: 12px 33px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.btn-secondary-custom:hover {
    background: var(--white);
    color: var(--primary-color);
}

/* زر تواصل معنا: يبقى أبيض في الوضع الليلي */
[data-theme="dark"] .btn-secondary-custom {
    color: #ffffff;
    border-color: #ffffff;
}
[data-theme="dark"] .btn-secondary-custom:hover {
    background: #ffffff;
    color: var(--primary-color);
}

/* ==================== NAVBAR ==================== */
.navbar-custom {
    background: var(--white);
    padding: 5px 0;
    transition: var(--transition);
    box-shadow: none;
}

.navbar-custom.scrolled {
    background: var(--white);
    box-shadow: var(--shadow);
    padding: 3px 0;
}

.navbar-custom .navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

.navbar-custom .navbar-brand img {
    height: 65px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
    transition: var(--transition);
}

.navbar-custom.scrolled .navbar-brand img {
    height: 50px;
}

.navbar-custom .nav-link {
    color: var(--secondary-color) !important;
    font-weight: 500;
    padding: 10px 20px !important;
    position: relative;
    transition: var(--transition);
}

/* Underline effect for non-dropdown nav links */
.navbar-custom .nav-item:not(.dropdown) .nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--primary-color);
    transition: var(--transition);
    border-radius: 2px;
}

.navbar-custom .nav-item:not(.dropdown) .nav-link:hover::before,
.navbar-custom .nav-item:not(.dropdown) .nav-link.active::before {
    width: 60%;
}

/* Dropdown toggle styling - don't override Bootstrap's ::after for arrow */
.navbar-custom .dropdown-toggle {
    position: relative;
}

.navbar-custom .dropdown-toggle::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--primary-color);
    transition: var(--transition);
    border-radius: 2px;
}

.navbar-custom .dropdown-toggle:hover::before,
.navbar-custom .dropdown.show .dropdown-toggle::before {
    width: 60%;
}

.navbar-custom .nav-link:hover {
    color: var(--primary-color) !important;
}

/* Active state for nav links */
.navbar-custom .nav-link.active {
    color: var(--primary-color) !important;
}

.language-switch {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--light-gray);
    padding: 5px 10px;
    border-radius: 25px;
    margin-left: 15px;
}

html[dir="rtl"] .language-switch {
    margin-left: 0;
    margin-right: 15px;
}

.language-switch a,
.language-switch span {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: var(--transition);
}

.language-switch a.active,
.language-switch span.active {
    background: var(--primary-color);
    color: var(--white);
    cursor: default;
}

.language-switch a:hover:not(.active) {
    color: var(--primary-color);
}

/* ==================== HERO SECTION ==================== */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    background: linear-gradient(135deg, var(--secondary-color) 0%, #1A222C 100%);
    overflow: hidden;
}

.hero-section::before {
    content: none;
    display: none;
}

/*
   أُزيلت طبقة ‎::after‎ التي كانت تغطّي جانب الرسم بإسفين مائل
   (‎clip-path: polygon(0 0, 38% 0, 58% 100%, 0 100%)‎) بلون الخلفية
   نفسه وفوق الأثر (‎z-index: 1‎). كانت تحصر البيوت في جانب النصّ وحده
   وترسم فاصلاً مائلاً يقسم الهيرو نصفين. وبزوالها يعمّ الأثر الجانبين.
*/

/*
   غطاء مطلق يشمل القسم كاملاً. كان شبكةً بمسارات ثابتة 70px موسّطة،
   فتترك على الشاشات العريضة فراغاً حول نفسها ويبدو الأثر نصفَ الهيرو
   ومقسوماً. والمواضع الآن نسبية يحسبها brand.js، فتغطّي المساحة كلها
   مهما اتّسعت ولا تحتاج إعادة حساب عند تغيير الحجم.
*/
.effect-grid {
    /*
       مدّة دورة البيت والفاصل بين الدفعتين قيمة واحدة: يقرؤها brand.js
       من هنا فلا تفترقان. وافتراقهما يفسد العدد الظاهر — أطولُ من الفاصل
       يُراكم دفعتين، وأقصرُ يترك الهيرو خالياً بينهما.
    */
    --house-cycle: 2.5s;

    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.effect-tile {
    position: absolute;
    width: 84px;
    height: 84px;
    margin: -42px;                 /* يتوسّط النقطة التي حُدّدت له */
    background: var(--pattern-tile, none) center / contain no-repeat;
    opacity: 0;
    filter: contrast(1.05) brightness(1.02);
    animation: effectHouseCycle var(--house-cycle, 2.5s) ease-in-out forwards;
    will-change: transform, opacity;
}

/*
   دفعةٌ من البيوت تظهر معاً ثم تختفي معاً لتحلّ غيرها في أمكنة أخرى.
   الظهور والثبات والاختفاء نِسبٌ من ‎--house-cycle‎، فتبطؤ الحركة كلها
   أو تُسرَّع بتغيير قيمة واحدة.

   وشفافيته أعلى من شفافية الحقل القديم لأن الظاهر واحد لا عشرات،
   فبالقيمة القديمة لا يكاد يُرى.
*/
@keyframes effectHouseCycle {
    0%   { opacity: 0; transform: translateY(12px) scale(.86); }
    30%  { opacity: calc(var(--pattern-opacity, 0.09) * 2.2); transform: translateY(0) scale(1); }
    68%  { opacity: calc(var(--pattern-opacity, 0.09) * 2.2); transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-10px) scale(1.06); }
}


.hero-section .container {
    position: relative;
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 2;
}

/* Page Header Styles (for inner pages) */
.page-header {
    min-height: 45vh;
    display: flex;
    align-items: center;
    padding-top: 100px;
}

.page-header .hero-content {
    text-align: center;
    width: 100%;
}

.page-header .hero-content p {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-content h1 {
    font-size: 3.5rem;
    color: var(--white);
    margin-bottom: 20px;
    animation: fadeInUp 1s ease;
}

.hero-content h1 span {
    color: var(--primary-color);
}

.hero-content p {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 35px;
    max-width: 500px;
    animation: fadeInUp 1s ease 0.2s backwards;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease 0.4s backwards;
}

.hero-image {
    position: relative;
    z-index: 2;
    animation: fadeInRight 1s ease;
}

.hero-image img {
    max-width: 100%;
    /* Hero art glow. If the art is a dark mark on a dark hero, add
       invert(1) hue-rotate(180deg) before the drop-shadow. */
    filter: drop-shadow(0 20px 50px rgba(27, 108, 168, 0.3));
}

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==================== مركز صفوف البطاقات و col-lg-8 لجميع أحجام الشاشات ==================== */
.row.g-4,
.row.g-5 {
    justify-content: center;
}

.row:has(.col-lg-8) {
    justify-content: center;
}

/* ==================== SERVICES SECTION ==================== */
.services-section {
    background: var(--light-gray);
}

/* ==================== شروح الفيديو ====================
   واجهة بديلة (facade) لا إطار YouTube مباشرةً: الإطار المباشر يحمّل
   مشغّل يوتيوب وسكربتاته وكوكيزه على كل زائر للصفحة الرئيسية ولو لم
   يشاهد شيئاً — عبء على السرعة وعلى خصوصية الزائر معاً. هنا تُعرض
   الصورة المصغّرة وحدها، ولا يُنشأ الإطار إلا عند النقر فعلاً.
======================================================== */
.video-card {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0, 0, 0, .08);
    transition: var(--transition);
    height: 100%;
}

.video-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

/*
   الحاوية تحفظ نسبة 16:9 سلفاً فلا تقفز الصفحة حين تُحمّل الصورة أو
   يحلّ الإطار محلّ الزرّ. والزرّ طبقةٌ داخلها لا هي نفسها: استبدال
   الحاوية بالإطار يُفقده النسبة فينكمش إلى 300×150 الافتراضية.
*/
.video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--secondary-color);
    overflow: hidden;
}

.video-trigger {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: none;
    display: block;
    cursor: pointer;
}

.video-frame img,
.video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.video-frame img { transition: transform .4s ease, filter .3s ease; }
.video-card:hover .video-frame img { transform: scale(1.04); filter: brightness(.85); }

/* زرّ التشغيل بهيئة يوتيوب المألوفة — يُعرّفه الزائر بلا شرح. */
.video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .65);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s ease, transform .25s ease;
    pointer-events: none;
}

.video-card:hover .video-play { background: #e00000; transform: translate(-50%, -50%) scale(1.08); }
.video-trigger:focus-visible { outline: 3px solid var(--primary-color); outline-offset: -3px; }
.video-play svg { width: 26px; height: 26px; fill: #fff; }

.video-body { padding: 20px 22px; }

.video-body h4 {
    font-size: 1.05rem;
    margin-bottom: 6px;
    color: var(--secondary-color);
    line-height: 1.5;
}

.video-body p { color: var(--text-muted); font-size: .86rem; margin: 0; }

@media (max-width: 767px) {
    .video-body { padding: 16px 18px; }
    .video-body h4 { font-size: .98rem; }
}

/*
   قسم بخلفية بديلة. الصفحة الرئيسية تتناوب خلفياتها قسماً بعد قسم، وكان
   آخر قسمين — الخطط والدعوة للتسجيل — بلا خلفية معاً فيبدوان كتلة واحدة
   ممتدّة بلا حدّ يفصلهما. هذا الصنف يعيد التناوب لآخر الصفحة.
*/
.section-alt {
    background: var(--light-gray);
}

.service-card {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 40px 30px;
    text-align: center;
    transition: var(--transition);
    height: 100%;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    transform: scaleX(0);
    transition: var(--transition);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow);
    border-color: var(--primary-color);
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: var(--transition);
}

.service-icon svg {
    width: 40px;
    height: 40px;
    fill: var(--white);
}

/*
   قلب الأيقونة رأسياً يعكس الرمز فيظهر مقلوباً؛ الأنسب رفعة وتوهّج تيل
   يتبعان حركة البطاقة نفسها.
*/
.service-card:hover .service-icon {
    transform: translateY(-6px) scale(1.08);
    box-shadow: 0 10px 26px rgba(27, 108, 168, 0.35);
}

.service-card h4 {
    font-size: 1.25rem;
    margin-bottom: 15px;
    color: var(--secondary-color);
}

.service-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.service-link {
    color: var(--primary-color);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.service-link:hover {
    gap: 10px;
}

/* ==================== ABOUT SECTION ==================== */
.about-section {
    position: relative;
}

.about-image {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.about-image img {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.about-image::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: -20px;
    bottom: -20px;
    border: 3px solid var(--primary-color);
    border-radius: var(--border-radius);
    z-index: -1;
}

html[dir="rtl"] .about-image::after {
    left: -20px;
    right: 20px;
}

.about-logo-box {
    background: var(--light-gray);
    border-radius: var(--border-radius);
    padding: 40px;
    text-align: center;
}

.about-logo-box img {
    max-width: 100%;
    width: 350px;
    height: auto;
}

/* Optional dark-mode contrast fix for a dark-on-transparent mark:
[data-theme="dark"] .about-logo-box img { filter: invert(1) hue-rotate(180deg); }
*/

.about-content h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.about-content p {
    color: var(--text-muted);
    margin-bottom: 20px;
}

.about-features {
    margin: 30px 0;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}

.feature-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon svg {
    width: 24px;
    height: 24px;
    fill: var(--white);
}

.feature-text h5 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: var(--secondary-color);
}

.feature-text p {
    font-size: 0.9rem;
    margin: 0;
}

/* ==================== WHY CHOOSE US ==================== */
.why-section {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #1A222C 100%);
    position: relative;
    overflow: hidden;
}

.why-section::before {
    content: none;
    display: none;
}

.why-section .section-title h2 {
    color: var(--white);
}

.why-section .section-title p {
    color: rgba(255, 255, 255, 0.7);
}

.why-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: 40px 30px;
    text-align: center;
    transition: var(--transition);
    height: 100%;
}

.why-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

.why-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.why-icon svg {
    width: 35px;
    height: 35px;
    fill: var(--white);
}

.why-card h4 {
    color: var(--white);
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.why-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}

/* ==================== STATS SECTION ==================== */
.stats-section {
    background: var(--primary-color);
    padding: 60px 0;
}

.stat-item {
    text-align: center;
    padding: 20px;
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--white);
    display: block;
    line-height: 1;
}

.stat-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    margin-top: 10px;
    display: block;
}

/* ==================== PROJECTS/NEWS SECTION ==================== */
.projects-section {
    background: var(--light-gray);
}

.project-card {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
    height: 100%;
}

.project-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow);
}

.project-image {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-image svg {
    width: 60px;
    height: 60px;
    fill: rgba(255, 255, 255, 0.3);
}

.project-content {
    padding: 25px;
}

.project-category {
    display: inline-block;
    background: rgba(27, 108, 168, 0.1);
    color: var(--primary-color);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.project-content h4 {
    font-size: 1.15rem;
    margin-bottom: 10px;
    color: var(--secondary-color);
}

.project-content p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.project-link {
    color: var(--primary-color);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ==================== TEAM CARDS ==================== */
.team-card {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
    text-align: center;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

.team-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow);
}

.team-image {
    width: 100%;
    overflow: hidden;
}

.team-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: var(--transition);
}

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

.team-info {
    padding: 25px;
    background: var(--white);
}

.team-info h4 {
    font-size: 1.2rem;
    color: var(--secondary-color);
    margin-bottom: 8px;
}

.team-position {
    display: inline-block;
    background: var(--primary-color);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ==================== PRODUCT CARDS ==================== */
.product-card {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
    height: 100%;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow);
}

.product-image {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--light-gray), #e8e8e8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image svg {
    width: 80px;
    height: 80px;
    opacity: 0.8;
}

.product-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--primary-color);
    color: var(--white);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

[dir="rtl"] .product-badge {
    right: auto;
    left: 15px;
}

.product-badge.new {
    background: #28a745;
}

.product-content {
    padding: 25px;
}

.product-content h4 {
    font-size: 1.1rem;
    margin-bottom: 12px;
    color: var(--secondary-color);
    line-height: 1.5;
}

.product-content > p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 15px;
    line-height: 1.6;
}

.product-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.product-features li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

[dir="rtl"] .product-features li {
    padding-left: 0;
    padding-right: 20px;
}

.product-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

[dir="rtl"] .product-features li::before {
    left: auto;
    right: 0;
}

.btn-sm {
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
}

/* ==================== NEWS CARDS ==================== */
.news-card {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
    height: 100%;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

.news-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow);
}

.news-image {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--secondary-color), #1A222C);
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-image svg {
    width: 70px;
    height: 70px;
    opacity: 0.3;
}

.news-date {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--primary-color);
    color: var(--white);
    padding: 10px 15px;
    border-radius: 8px;
    text-align: center;
    line-height: 1.2;
}

[dir="rtl"] .news-date {
    left: auto;
    right: 15px;
}

.news-date .day {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
}

.news-date .month {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.news-content {
    padding: 25px;
}

.news-category {
    display: inline-block;
    background: rgba(27, 108, 168, 0.1);
    color: var(--primary-color);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.news-content h4 {
    font-size: 1.1rem;
    margin-bottom: 12px;
    color: var(--secondary-color);
    line-height: 1.5;
}

.news-content p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 15px;
    line-height: 1.7;
}

.news-link {
    color: var(--primary-color);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    transition: var(--transition);
}

.news-link:hover {
    gap: 10px;
    color: var(--primary-dark);
}

.news-link svg {
    transition: var(--transition);
}

/* Newsletter Form */
.newsletter-form .form-control {
    background: var(--white);
    border: none;
    font-size: 1rem;
}

.newsletter-form .form-control:focus {
    box-shadow: none;
    outline: none;
}

/* ==================== CONTACT SECTION ==================== */
.contact-section {
    position: relative;
}

.contact-info-card {
    background: var(--secondary-color);
    border-radius: var(--border-radius);
    padding: 40px;
    height: 100%;
    color: var(--white);
}

.contact-info-card h3 {
    color: var(--white);
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.contact-info-card p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 30px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.contact-item-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-item-icon svg,
.contact-item-icon i {
    width: 20px;
    height: 20px;
    font-size: 20px;
    fill: var(--white);
}

.contact-item-text h5 {
    color: var(--white);
    font-size: 1rem;
    margin-bottom: 5px;
}

.contact-item-text p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
}

.social-links {
    margin-top: 30px;
    display: flex;
    gap: 15px;
}

.social-links-unified {
    justify-content: center;
}

.social-link {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.social-link:hover {
    background: var(--primary-color);
    transform: translateY(-3px);
}

.social-link svg {
    width: 20px;
    height: 20px;
    fill: var(--white);
}

.social-link i {
    color: var(--white);
}

/* أزرار وسائل التواصل في قسم "تابعنا" – نفس أسلوب أزرار الموقع */
.why-section .social-link {
    background: transparent;
    border: 2px solid var(--white);
    color: var(--white);
}

.why-section .social-link:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.why-section .social-link:hover i,
.why-section .social-link i {
    color: var(--white);
}

.contact-form-card {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 40px;
    box-shadow: var(--shadow);
    height: 100%;
}

.contact-form-card h3 {
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: var(--secondary-color);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--secondary-color);
}

.form-control-custom {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid var(--medium-gray);
    border-radius: 8px;
    font-size: 1rem;
    transition: var(--transition);
    background: var(--light-gray);
}

.form-control-custom:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(27, 108, 168, 0.1);
}

textarea.form-control-custom {
    min-height: 150px;
    resize: vertical;
}

/* File Upload Styles */
.file-upload-wrapper {
    position: relative;
}

.file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.file-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    border: 2px dashed var(--medium-gray);
    border-radius: 8px;
    background: var(--light-gray);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.file-upload-label:hover {
    border-color: var(--primary-color);
    background: rgba(27, 108, 168, 0.05);
}

.file-upload-label svg {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.file-upload-label span {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.file-hint {
    display: block;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.file-input:focus + .file-upload-label {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(27, 108, 168, 0.1);
}

/* ==================== FOOTER ==================== */
.footer {
    background: var(--secondary-color);
    color: var(--white);
    padding: 60px 0 0;
}

.footer-content {
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo {
    margin-bottom: 15px;
    display: inline-block;
}

.footer-logo img {
    height: 70px;
    width: auto;
    max-width: 300px;
    object-fit: contain;
    /* The footer is always dark. If your logo is dark-on-transparent, add:
       filter: invert(1) hue-rotate(180deg);  */
}

.footer-about p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.8;
}

.footer h5 {
    color: var(--white);
    font-size: 1.2rem;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.footer h5::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--primary-color);
    border-radius: 2px;
}

html[dir="rtl"] .footer h5::after {
    left: auto;
    right: 0;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.footer-links a:hover {
    color: var(--primary-color);
    padding-left: 5px;
}

html[dir="rtl"] .footer-links a:hover {
    padding-left: 0;
    padding-right: 5px;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.7);
}

.footer-contact-item svg,
.footer-contact-item i {
    width: 18px;
    min-width: 18px;
    height: 18px;
    font-size: 18px;
    fill: var(--primary-color);
    color: var(--primary-color);
    margin-top: 3px;
    flex-shrink: 0;
}

.footer-contact-item a {
    color: inherit;
    text-decoration: none;
}

.footer-bottom {
    padding: 25px 0;
    text-align: center;
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-size: 0.9rem;
}

.footer-bottom a {
    color: var(--primary-color);
}

/* ==================== SCROLL TO TOP ==================== */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 999;
    box-shadow: 0 4px 15px rgba(27, 108, 168, 0.4);
}

html[dir="rtl"] .scroll-to-top {
    right: auto;
    left: 30px;
}

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

.scroll-to-top:hover {
    transform: translateY(-5px);
    background: var(--primary-dark);
}

.scroll-to-top svg {
    width: 24px;
    height: 24px;
    fill: var(--white);
}

/* ==================== ANIMATIONS ==================== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 991px) {
    .hero-content h1 {
        font-size: 2.5rem;
    }

    .section-padding {
        padding: 70px 0;
    }

    .section-title h2 {
        font-size: 2rem;
    }

    .cta-block > h2 {
        font-size: 1.75rem;
    }

    /* Mobile Navbar Brand */
    .navbar-custom .navbar-brand img {
        height: 45px;
        max-width: 180px;
    }

    .navbar-custom.scrolled .navbar-brand img {
        height: 40px;
    }
    
    /* Mobile Navbar Toggler */
    .navbar-custom .navbar-toggler {
        width: 38px;
        height: 38px;
        min-width: 38px;
        border: 1px solid var(--medium-gray);
        padding: 0 !important;
        margin: 0 !important;
        background: var(--light-gray);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .navbar-custom .navbar-toggler:focus {
        box-shadow: none;
        outline: none;
    }
    
    .navbar-custom .navbar-toggler-icon {
        width: 20px;
        height: 20px;
    }
    
    [data-theme="dark"] .navbar-custom .navbar-toggler {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
    }

    /* Mobile Navbar Collapse */
    .navbar-custom .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 15px;
        right: 15px;
        background: var(--white);
        padding: 15px;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
        margin-top: 10px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
    
    .navbar-custom .navbar-nav {
        gap: 5px;
    }

    .navbar-custom .nav-link {
        padding: 14px 18px !important;
        border-radius: 10px;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .navbar-custom .nav-item {
        margin-bottom: 2px;
    }

    /* Hide underline effect on mobile */
    .navbar-custom .nav-item:not(.dropdown) .nav-link::before,
    .navbar-custom .dropdown-toggle::before {
        display: none;
    }

    .navbar-custom .nav-link {
        background: transparent !important;
        border: none !important;
    }
    
    .navbar-custom .nav-link.active {
        background: linear-gradient(135deg, rgba(27, 108, 168, 0.15), rgba(27, 108, 168, 0.08)) !important;
        color: var(--primary-color) !important;
        font-weight: 600;
    }
    
    [dir="ltr"] .navbar-custom .nav-link.active {
        border-left: 4px solid var(--primary-color) !important;
    }

    [dir="rtl"] .navbar-custom .nav-link.active {
        border-right: 4px solid var(--primary-color) !important;
    }

    .navbar-custom .nav-link:hover:not(.active) {
        background: var(--light-gray) !important;
    }
    
    .navbar-custom .nav-link:focus,
    .navbar-custom .nav-link:visited {
        background: transparent !important;
    }
    
    .navbar-custom .nav-link.active:focus,
    .navbar-custom .nav-link.active:visited {
        background: linear-gradient(135deg, rgba(27, 108, 168, 0.15), rgba(27, 108, 168, 0.08)) !important;
    }
    
    /* Mobile Dropdown */
    .navbar-custom .dropdown-menu {
        position: static !important;
        transform: none !important;
        box-shadow: none;
        background: var(--light-gray);
        border-radius: 10px;
        margin: 5px 0 10px;
        padding: 10px;
    }
    
    .navbar-custom .dropdown-item {
        padding: 12px 15px;
        border-radius: 8px;
        font-size: 0.95rem;
    }
    
    .navbar-custom .dropdown-item:hover {
        background: var(--white);
    }
    
    .navbar-custom .dropdown-item.active {
        background: var(--primary-color);
        color: white;
    }

    /* Language Switch */
    .language-switch {
        margin: 15px 0 5px 0;
        justify-content: center;
        padding: 8px 15px;
    }
    
    /* Theme Toggle - Hide inside collapse on mobile */
    .navbar-collapse .theme-toggle {
        display: none;
    }
}

@media (max-width: 767px) {
    /* توسيط متماثل لجميع الأحجام واتجاهات النص (LTR/RTL) */
    .container {
        padding-inline: 15px;
        max-width: 100%;
        margin-inline: auto;
    }
    .hero-section {
        padding-top: 100px;
        min-height: auto;
        padding-bottom: 60px;
    }
    /* صف وعمود الهيرو: مساحة يمين الزرين = يسارهما على الجوال */
    .hero-section .container {
        padding-inline: 15px;
    }
    .hero-section .row {
        margin-inline: 0;
        --bs-gutter-x: 1rem;
    }
    .hero-section .row > [class*="col-"] {
        padding-inline: 0;
        max-width: 100%;
    }
    .hero-content {
        margin-inline: auto;
    }
    .hero-content h1 {
        font-size: 1.8rem;
    }

    .hero-content p {
        font-size: 0.95rem;
    }

    /* الرسمة تقع تحت النصّ على الجوال لا بجانبه، فهامش 35px بينهما
       يصير فجوة ظاهرة. يُقلَّص هنا وحده ويبقى على سطح المكتب حيث
       العمودان متجاوران ولا يفصل الهامش بينهما شيئاً. */
    .hero-content > p:last-of-type {
        margin-bottom: 14px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
        padding-inline: 0;
    }
    
    .hero-buttons .btn-primary-custom,
    .hero-buttons .btn-secondary-custom {
        width: 100%;
        max-width: 320px;
        text-align: center;
        justify-content: center;
    }

    .section-title h2 {
        font-size: 1.6rem;
    }
    
    .section-padding {
        padding: 50px 0;
    }

    .cta-block > h2 {
        font-size: 1.5rem;
    }
    .cta-block > p {
        padding-inline: 0;
    }
    
    .about-image::after {
        display: none;
    }
    
    .about-logo-box {
        padding: 25px;
    }
    
    .about-logo-box img {
        width: 100%;
        max-width: 280px;
    }

    .stat-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .stat-item:last-child {
        border-bottom: none;
    }

    .contact-info-card,
    .contact-form-card {
        padding: 25px 15px;
    }
    
    .service-card,
    .news-card,
    .team-card {
        margin-bottom: 15px;
    }
    
    /* البطاقات تتوسط الصفحة على الجوال: إلغاء تأثير .row > * { max-width: 100% } */
    .row.g-4 > *,
    .row.g-5 > * {
        max-width: 360px;
        margin-inline: auto;
    }
    
    /* توسيط col-lg-8 على الجوال (محتوى الصفحات الداخلية) */
    .row .col-lg-8 {
        max-width: 640px;
        margin-inline: auto;
    }
    
    .footer {
        padding: 40px 0 20px;
    }
    
    /* لوغو الفوتر: يتوسط على الجوال */
    .footer-logo {
        text-align: center;
        width: 100%;
    }
    .footer-logo img {
        max-width: 180px;
        display: block;
        margin-inline: auto;
    }
    
    /* إلغاء الـ margin السالب للصف حتى لا يمتد خارج الـ container ويؤثر على التوسيط */
    .row.g-4, .row.g-5,
    .row:has(.col-lg-8) {
        margin-inline: 0;
    }
    .row.g-4, .row.g-5 {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }
    
    /* Fix potential overflow on small screens */
    .why-section::before,
    .hero-section::before {
        display: none !important;
    }
    
    /* الجوال: إخفاء طبقة اللوغو في القسم الأول لظهور التأثير */
    .hero-section#home::after {
        display: none !important;
    }
}

/* ==================== LOADING ANIMATION ==================== */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.page-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-image {
    width: 80px;
    height: 80px;
    object-fit: contain;
    animation: loader-spin 1.2s linear infinite;
}

@keyframes loader-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==================== DROPDOWN MENU ==================== */
.navbar-custom .dropdown-menu {
    border: none;
    box-shadow: var(--shadow);
    border-radius: var(--border-radius);
    padding: 15px 0;
}

.navbar-custom .dropdown-item {
    padding: 10px 25px;
    font-weight: 500;
    color: var(--secondary-color);
    transition: var(--transition);
}

.navbar-custom .dropdown-item:hover {
    background: var(--light-gray);
    color: var(--primary-color);
}

/* ==================== CONTENT CARD LINKS ==================== */
.content-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.content-card-link:hover .news-card {
    transform: translateY(-8px);
}

.content-card-link .news-link {
    pointer-events: none;
}

/* News card image support */
.news-card .news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.news-card .news-image {
    position: relative;
}

.news-card .news-image svg {
    position: relative;
    z-index: 1;
}

.news-card .news-image img + .news-date,
.news-card .news-image img ~ svg {
    display: none;
}

.news-card .news-image:has(img) svg {
    display: none;
}

.news-card .news-image:has(img) .news-date {
    z-index: 2;
}

/* ==================== ALERTS ==================== */
.alert-success {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #e6fff0, #d4fce3);
    border: 1px solid #28a745;
    border-radius: var(--border-radius);
    color: #155724;
    margin-bottom: 25px;
}

.alert-success svg {
    flex-shrink: 0;
    color: #28a745;
}

[data-theme="dark"] .alert-success {
    background: linear-gradient(135deg, #1a3a2a, #1a4030);
    border-color: #28a745;
    color: #7dcea0;
}

.alert-error {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #fff0f0, #ffe6e6);
    border: 1px solid #dc3545;
    border-radius: var(--border-radius);
    color: #721c24;
    margin-bottom: 25px;
}

.alert-error svg {
    flex-shrink: 0;
    color: #dc3545;
}

[data-theme="dark"] .alert-error {
    background: linear-gradient(135deg, #3a1a1a, #402020);
    border-color: #dc3545;
    color: #f5a0a0;
}

/* ==================== CONTENT SEARCH & PAGINATION ==================== */
.section-padding:has(.content-toolbar) {
    padding-top: 1.5rem;
}

.content-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem 0;
}

.content-search-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 200px;
    max-width: 420px;
}

.content-search-input {
    flex: 1;
    padding: 0.6rem 1rem;
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius);
    font-size: 1rem;
    color: var(--text-dark);
    background: var(--bg-card);
    transition: var(--transition);
}

.content-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(27, 108, 168, 0.15);
}

.content-search-input::placeholder {
    color: var(--text-muted);
}

.content-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition);
}

.content-search-btn:hover {
    background: var(--primary-dark);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}

.content-clear-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
}

.content-clear-search-btn:hover {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
    background: rgba(58, 58, 60, 0.06);
}

[data-theme="dark"] .content-clear-search-btn {
    border-color: var(--border-color);
    color: var(--text-muted);
}

[data-theme="dark"] .content-clear-search-btn:hover {
    border-color: var(--text-dark);
    color: var(--text-dark);
    background: rgba(255, 255, 255, 0.06);
}

.content-results-info {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.content-pagination {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.pagination-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination-list li {
    margin: 0;
}

.pagination-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    justify-content: center;
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius);
    background: var(--bg-card);
    color: var(--text-dark);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: var(--transition);
}

.pagination-link:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(27, 108, 168, 0.08);
}

.pagination-link.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.pagination-link.pagination-prev,
.pagination-link.pagination-next {
    padding: 0 1rem;
}

[data-theme="dark"] .content-search-input {
    border-color: var(--border-color);
    background: var(--bg-card);
    color: var(--text-dark);
}

[data-theme="dark"] .content-search-btn {
    background: var(--primary-color);
    color: var(--white);
}

[data-theme="dark"] .pagination-link {
    border-color: var(--border-color);
    background: var(--bg-card);
    color: var(--text-dark);
}

[data-theme="dark"] .pagination-link:hover {
    border-color: var(--primary-color);
    color: var(--primary-light);
    background: rgba(27, 108, 168, 0.15);
}

[data-theme="dark"] .pagination-link.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

/* ==================== MOTION PREFERENCES ==================== */
/* The identity leans on hover lifts, counters and the rotating pattern.
   Honour users who asked their OS for less movement. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .effect-grid {
        display: none;
    }

    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
}