html {
    scroll-padding-top: 100px; /* يجعل الصفحة تقف قبل العنوان بمسافة كافية */
}
:root {
    --primary-color: #28a745;
    --navbar-light: rgba(253, 253, 253, 0.95);
    --navbar-dark: rgba(33, 37, 41, 0.95);
}

/* Default Font (Arabic) */
body { font-family: 'Cairo', sans-serif; overflow-x: hidden; transition: background-color 0.3s, color 0.3s; }

/* English Font Class */
body.lang-en { font-family: 'Poppins', sans-serif; }

/* --- Dark Mode Custom Overrides --- */
[data-bs-theme="dark"] body { background-color: #121212; color: #e0e0e0; }
[data-bs-theme="dark"] .bg-light { background-color: #1e1e1e !important; }
[data-bs-theme="dark"] .bg-white { background-color: #2c2c2c !important; color: #fff; }
[data-bs-theme="dark"] .text-muted { color: #a0a0a0 !important; }
[data-bs-theme="dark"] .navbar { background-color: var(--navbar-dark) !important; box-shadow: 0 2px 15px rgba(0,0,0,0.5); }
[data-bs-theme="dark"] .nav-link { color: #e0e0e0 !important; }
[data-bs-theme="dark"] .nav-link:hover, [data-bs-theme="dark"] .nav-link.active { color: var(--primary-color) !important; }
[data-bs-theme="dark"] .card { background-color: #252525; border-color: #444; }
[data-bs-theme="dark"] .card .card-title { color: #5dd579 !important; } /* Lighter Green */
[data-bs-theme="dark"] .search-input { background-color: #2c2c2c; border-color: #444; color: #fff; }
[data-bs-theme="dark"] .search-icon { color: #666; }
[data-bs-theme="dark"] .logo-slider { background-color: #1e1e1e; }
[data-bs-theme="dark"] .client-logo-slide { filter: grayscale(100%) brightness(0.8); }
[data-bs-theme="dark"] .client-logo-slide:hover { filter: grayscale(0) brightness(1); }
[data-bs-theme="dark"] .modal-content { background-color: #252525; color: #fff; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
[data-bs-theme="dark"] .img-contain { background-color: #fff; border-radius: 5px; } /* Keep white bg for transparent product pngs */

/* شاشة التحميل */
#preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #fff; z-index: 9999;
    display: flex; justify-content: center; align-items: center; flex-direction: column;
    transition: opacity 0.5s ease;
}
[data-bs-theme="dark"] #preloader { background-color: #121212; }

.spinner {
    width: 50px; height: 50px; border: 5px solid rgba(40, 167, 69, 0.3);
    border-radius: 50%; border-top-color: var(--primary-color);
    animation: spin 1s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* الناف بار */
.navbar {
    background-color: var(--navbar-light) !important;
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
    padding: 15px 0;
    box-shadow: 0 2px 15px rgba(0,0,0,0.03);
}
.navbar.scrolled { padding: 10px 0; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.nav-link { color: #555 !important; transition: color 0.3s; cursor: pointer; }
.nav-link:hover, .nav-link.active { color: var(--primary-color) !important; }

/* أزرار التحكم (اللغة والثيم) */
.ctrl-btn {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 50%;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold;
    transition: 0.3s;
    background: transparent;
    margin: 0 5px;
}
.ctrl-btn:hover { background: var(--primary-color); color: white; }
.lang-btn { border-radius: 20px; width: auto; padding: 0 15px; } /* زر اللغة مستطيل */

/* الهيرو */
.hero-section { position: relative; min-height: 90vh; display: flex; align-items: center; color: white; text-align: center; overflow: hidden; }
.hero-carousel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.hero-carousel .carousel-item { height: 100%; transition: transform 1.5s ease-in-out, opacity 1.5s ease-in-out; }
.hero-carousel img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1; }
.hero-content { position: relative; z-index: 2; width: 100%; padding: 20px 0; }

/* البطاقات */
.card { 
    border: none; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: all 0.3s; height: 100%; overflow: hidden; 
    cursor: pointer;
}
.card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.15); transform: translateY(-5px); }
.card-img-top { height: 220px; object-fit: cover; transition: transform 0.5s ease; }
.card:hover .card-img-top { transform: scale(1.05); }
.img-contain { object-fit: contain; padding: 15px; background-color: #fff; }

/* أدوات البحث */
.search-container { max-width: 500px; margin: 0 auto 30px auto; position: relative; }
.search-input { 
    border-radius: 50px; padding: 12px 25px; border: 2px solid #eee; 
    width: 100%; transition: all 0.3s; background-color: #fff;
}
/* RTL/LTR padding handled via JS or specific classes usually, keeping simplified here */
html[dir="rtl"] .search-input { padding-left: 45px; }
html[dir="rtl"] .search-icon { left: 20px; }
html[dir="ltr"] .search-input { padding-right: 45px; }
html[dir="ltr"] .search-icon { right: 20px; }

.search-input:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 10px rgba(40,167,69,0.1); }
.search-icon { position: absolute; top: 50%; transform: translateY(-50%); color: #ccc; }

.filter-btn { border-radius: 50px; padding: 8px 25px; border: 2px solid var(--primary-color); color: var(--primary-color); background: transparent; font-weight: 700; transition: all 0.3s; margin: 2px; }
.filter-btn:hover, .filter-btn.active { background-color: var(--primary-color); color: white; }

.brand-filter-btn { font-size: 0.9rem; border: 1px solid #ccc; color: #666; font-weight: 600; }
.brand-filter-btn:hover, .brand-filter-btn.active { background-color: #666; color: white; border-color: #666; }
[data-bs-theme="dark"] .brand-filter-btn { color: #ccc; border-color: #555; }

.empty-state { display: none; text-align: center; padding: 40px; color: #6c757d; }

/* شريط العملاء */
.logo-slider { overflow: hidden; padding: 30px 0; background: white; white-space: nowrap; transition: background 0.3s; }
.logo-slide-track { display: inline-block; animation: 40s slide-infinite linear infinite; }
.client-logo-slide { height: 80px; width: auto; margin: 0 40px; display: inline-block; vertical-align: middle; filter: grayscale(100%); transition: all 0.3s; opacity: 0.9; }
.client-logo-slide:hover { filter: grayscale(0); opacity: 1; transform: scale(1.1); }
@keyframes slide-infinite { 0% { transform: translateX(0); } 100% { transform: translateX(50%); } }

/* الأزرار العائمة */
.floating-btn {
    position: fixed; bottom: 25px; z-index: 1050; width: 60px; height: 60px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3); text-decoration: none; color: white; font-size: 28px;
    transition: transform 0.3s;
}
html[dir="rtl"] .whatsapp-btn { right: 20px; }
html[dir="rtl"] .scroll-top-btn { left: 20px; }
html[dir="ltr"] .whatsapp-btn { left: 20px; }
html[dir="ltr"] .scroll-top-btn { right: 20px; }

.whatsapp-btn { background-color: #25d366; animation: pulse-green 2s infinite; }
.scroll-top-btn { background-color: var(--dark-color); display: none; }

@keyframes pulse-green {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.section-title { position: relative; margin-bottom: 40px; font-weight: 800; color: var(--primary-color); }
.navbar-brand img { height: 50px; width: auto; }
.certificate-card { cursor: pointer; transition: transform 0.3s; }
.certificate-card:hover { transform: translateY(-5px); }
.map-container { width: 100%; height: 100%; min-height: 400px; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
/* ==========================================
   إصلاحات خاصة بالهاتف (Mobile Responsive Fixes)
   ========================================== */
@media (max-width: 768px) {
    
    /* 1. إصلاح الشريط الأبيض الجانبي ومنع التمرير الأفقي */
    html, body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    /* 2. ضبط حجم خط العنوان الرئيسي في الهيرو */
    .hero-content h1.display-3 {
        font-size: 2rem !important; /* تصغير الخط بشكل كبير */
        line-height: 1.3;
        margin-bottom: 15px !important;
    }

    /* 3. ضبط حجم العناوين الفرعية */
    .hero-content h4 {
        font-size: 1.1rem;
        margin-bottom: 15px !important;
    }

    .hero-content .lead {
        font-size: 0.95rem;
        margin-bottom: 20px !important;
    }

    /* 4. جعل الأزرار فوق بعضها بدلاً من الجانب لعدم ضيق المساحة */
    .hero-content div {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0 20px;
    }

    .hero-content .btn {
        width: 100%;
        margin: 0 !important; /* إزالة الهوامش الجانبية */
    }

    /* 5. ضبط الناف بار (القائمة العلوية) */
    .navbar-brand {
        font-size: 1.1rem; /* تصغير حجم اسم الشركة */
    }
    
    .navbar-brand img {
        height: 40px; /* تصغير اللوجو قليلاً */
    }

    .navbar .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* 6. تحسين عرض القسم لملء الشاشة بشكل صحيح */
    .hero-section {
        min-height: 100vh; /* جعلها تملأ الشاشة بالكامل */
        padding: 0;
    }
    
    .hero-content {
        padding: 10px; /* تقليل الحواف الداخلية */
    }
}