/* الأنماط للاتجاه العربي */
body.rtl {
    direction: rtl;
    text-align: right;
}

body.rtl .navbar-nav {
    text-align: right;
}

body.rtl .search-bar input {
    text-align: right;
}

body.rtl .dropdown-menu {
    text-align: right;
}

/* الأنماط للاتجاه الإنجليزي */
body.ltr {
    direction: ltr;
    text-align: left;
}

body.ltr .navbar-nav {
    text-align: left;
}

body.ltr .search-bar input {
    text-align: left;
}

body.ltr .dropdown-menu {
    text-align: left;
}

/* تأكد من بقاء تنسيق الهيدر كما هو */
header {
    background: #FFD700; /* Solid yellow background */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Header shadow effect */
    padding: 10px 20px;
    font-family: Arial, sans-serif;
}

/* تنسيق القائمة الرئيسية */
header .navbar {
    padding: 0;
}

header .navbar-brand img {
    width: 70px;
    transition: transform 0.3s ease; /* تأثير التكبير */
}

header .navbar-brand img:hover {
    transform: scale(1.1); /* تكبير الشعار عند التمرير */
}

header .navbar-nav .nav-link {
    color: #000 !important; /* لون النص أسود */
    font-size: 16px;
    font-weight: bold;
    transition: color 0.3s ease, text-shadow 0.3s ease; /* تأثير تغيير اللون */
}

header .navbar-nav .nav-link:hover {
    color: #FFF !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* ظل للنص عند التمرير */
}

/* تنسيق القائمة المنسدلة */
header .dropdown-menu {
    background: #FFD700; /* الخلفية باللون الأصفر */
    border: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* ظل خفيف */
    transition: opacity 0.3s ease, transform 0.3s ease; /* تأثير الانتقال */
    border-radius: 8px;
    padding: 10px 0; /* Padding */
    text-align: center;
}

header .dropdown-item {
    color: #000; /* لون النص أسود */
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease; /* تأثير تغيير اللون */
    padding: 10px 20px; /* Padding */
    text-align: center;
}

header .dropdown-item:hover {
    background-color: #fff;
    color: #000;
}

/* تنسيق شريط البحث */
header .search-bar {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 15px; /* ضبط المسافة من العناصر الأخرى */
}
header .search-bar input {
    padding: 8px 35px 8px 12px; /* مساحة أكبر لضمان وضوح النص */
    border: 2px solid #000;
    border-radius: 25px;
    outline: none;
    width: 150px;
    transition: width 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease; /* تأثير الانتقال */
    background-color: rgba(255, 215, 0, 0.1); /* خلفية شفافة قليلاً */
    z-index: 1; /* التأكد من أن النص يظهر فوق الأيقونة */
    font-weight: bold; /* النص الغامق */
}

header .search-bar input:focus {
    width: 200px;
    border-color: #000; /* تغيير لون الإطار عند التركيز */
    background-color: #fff; /* تغيير الخلفية عند التركيز */
}

header .search-bar button {
    position: absolute;
    right: 10px; /* المسافة من حافة شريط البحث */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #000;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease; /* تأثير التمرير */
    z-index: 2; /* التأكد من أن الأيقونة تظهر فوق النص */
}

header .search-bar button:hover {
    color: #FFD700; /* تغيير لون الأيقونة عند التمرير */
    transform: scale(1.2); /* تكبير الأيقونة عند التمرير */
}

header .dropdown-toggle {
    color: #000;
    border: none;
    border-radius: 25px;
    padding: 8px 16px; /* الهوامش حول النص */
    transition: background-color 0.3s ease, color 0.3s ease; /* تأثير تغيير اللون */
}

header .dropdown-toggle:hover {
    background-color: #000;
    color: #FFD700;
}

/* استعلامات الوسائط لتعديل الهيدر على الشاشات الصغيرة */
@media (max-width: 1024px) {
    header .navbar-nav {
        text-align: center;
    }

    header .d-flex {
        flex-direction: column;
        align-items: center;
    }

    header .navbar-nav .nav-item:last-child {
        margin-bottom: 20px; /* Space under "Contact Us" */
    }

    header .navbar-nav .nav-item {
        margin: 5px 0;
    }

    header .search-bar input {
        width: 100px;
    }

    button#dropdownMenuButton {
        margin-left: 10px; /* Adjust space */
    }

    header .search-bar {
        margin-left: 5px;
    }
}
/* تحسين الخطوط والتصميم على الأجهزة الصغيرة */
@media (max-width: 768px) {
    header .navbar-nav .nav-link {
        font-size: 14px; /* حجم أصغر على الشاشات الصغيرة */
    }

    header .navbar-nav .nav-item {
        margin: 10px 0; /* مسافة إضافية بين العناصر */
    }

    header .dropdown-menu {
        text-align: center; /* تحسين عرض القائمة المنسدلة */
    }

    header .dropdown-item {
        padding: 10px; /* زيادة المسافة في العناصر */
    }

    button#dropdownMenuButton {
        margin-left: 5px; /* Adjust space */
    }

    header .search-bar {
        margin-left: 0px;
    }
}
@media (min-width: 900px) {
    header .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1.5rem;
        padding-left: .5rem;
    }
}

/* تنسيق شريط اسم الشركة */
.company-bar {
    width: 100%;
    background-color: #fff; 
    padding: 10px 0;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    border-top: 2px solid #000; 
    border-bottom: 2px solid #000; 
} 

 .company-bar .company-name {
    font-size: 1.5rem;
    font-weight: bold;
    color: #000; 
    margin: 0;
    letter-spacing: 1px; 
} 

/* تنسيق الشريط المتحرك */
.ticker-bar {
    width: 100%;
    background-color: #FFD700; /* اللون الأساسي للشريط */
    overflow: hidden;
    white-space: nowrap;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* إضافة ظل */
    padding: 10px 0;
    position: relative;
}

.ticker-content {
    display: inline-block;
    padding-left: 100%; /* يبدأ من خارج الشاشة */
    font-size: 1.2rem;
    font-weight: bold;
    color: #000; /* لون النص */
    animation: ticker-animation 20s linear infinite; /* تطبيق الحركة */
}
/* إيقاف الحركة عند التمرير بالماوس */
.ticker-bar:hover .ticker-content {
    animation-play-state: paused; /* إيقاف الحركة */
}
/* إعدادات الحركة */
@keyframes ticker-animation {
    0% {
        transform: translateX(0); /* البداية */
    }
    100% {
        transform: translateX(-100%); /* التحرك إلى اليسار */
    }
}

header.custom-header {
    position: fixed; /* تثبيت الهيدر في أعلى الصفحة */
    top: 0;
    left: 0;
    width: 100%; /* جعله يغطي عرض الشاشة بالكامل */
    z-index: 1000; /* للتأكد من ظهوره فوق المحتوى */
}

body {
    padding-top: 99px; /* إضافة مساحة لتجنب تغطية المحتوى عند التمرير */
}
.ticker-link {
    color: #000; /* لون النص */
    font-weight: bold;
    text-decoration: none; /* إزالة الخط السفلي */
    margin: 0 20px; /* مسافة بين الروابط */
    transition: color 0.3s ease;
}

.ticker-link:hover {
    color: #fff; /* تغيير لون النص عند التمرير */
}

/* تفعيل القائمة المنسدلة عند تمرير الماوس */
.nav-item.dropdown:hover .dropdown-menu,.dropdown:hover .dropdown-menu {
    display: block; /* عرض القائمة عند التمرير */
    opacity: 1; /* التأكد من وضوحها */
    visibility: visible; /* تأكيد ظهور القائمة */
    pointer-events: auto; /* التأكد من أن الماوس يمكنه التفاعل مع القائمة */
}

/* تحسين ظهور القائمة */
.nav-item.dropdown .dropdown-menu,.dropdown .dropdown-menu {
    display: none; /* إخفاء القائمة بشكل افتراضي */
    opacity: 0; /* جعلها شفافة عند البداية */
    visibility: hidden; /* إخفاء من التفاعل */

}
/* تحسين السهم باستخدام CSS */
.dropdown-submenu > .dropdown-toggle::after {
    content: "";
    display: inline-block;
    border: solid transparent;
    border-width: 5px;
    border-left-color: #000; /* لون السهم */
    margin-left: 10px;
    vertical-align: middle;
    transition: transform 0.3s ease; /* تأثير التحرك */
}

/* تدوير السهم عند تمرير المؤشر */
.dropdown-submenu:hover > .dropdown-toggle::after {
    transform: rotate(90deg);
}

/* تحسين السهم عند التمرير */
.dropdown-menu .dropdown-item:hover::after {
    border-left-color: #FFD700; /* تغيير لون السهم عند التمرير */
}
.dropdown-menu {
    display: none; /* إخفاء القوائم المنسدلة بشكل افتراضي */
    opacity: 0;
    visibility: hidden;
}
/* إخفاء القوائم الفرعية افتراضيًا */
.dropdown-menu .dropdown-menu {
    display: none; /* إخفاء القوائم الفرعية */
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 100%; /* محاذاة القوائم الفرعية بجانب العنصر الرئيسي */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1050;
}

/* عرض القوائم الفرعية فقط عند تمرير المؤشر على العنصر الفرعي */
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* تحسين موضع القوائم الفرعية */
.dropdown-submenu {
    position: relative;
}

/* عرض القائمة الرئيسية عند تمرير المؤشر على "Products" */
.nav-item.dropdown:hover > .dropdown-menu {
    display: block; /* عرض القائمة الرئيسية */
    opacity: 1;
    visibility: visible;
}
.dropdown-menu.show {
    display: block; /* إظهار القوائم عند الحاجة */
    opacity: 1;
    visibility: visible;
}
.dropdown-submenu > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%; /* بجانب العنصر الرئيسي */
    margin-left: -1px;
}
.navbar-nav > .nav-item > .dropdown-menu {
    margin-top: 0; /* تأكد من أن القائمة تلتصق بالزر */
    border-radius: 4px; /* تحسين الحواف */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* تحسين الظهور */
}
/* جعل القائمة الفرعية قابلة للتمرير */
.dropdown-submenu > .dropdown-menu {
    max-height: 300px; /* ارتفاع القائمة الفرعية */
    overflow-y: auto; /* جعل القائمة قابلة للتمرير */
    display: block; /* تأكد من ظهور القائمة */
    opacity: 1; /* تأكد من وضوح القائمة */
    visibility: visible; /* تأكد من ظهور القائمة */
}