.subscribe-email-input::placeholder {
    color: white;
}

@media (min-width: 992px) {

    .custom-men-dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }

    .custom-men-dropdown {
        position: relative;
    }

    .custom-men-dropdown .dropdown-menu {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        min-width: 180px;
    }
}

.custom-men-dropdown .dropdown-item {
    text-align: justify;
    padding: 10px 20px;
    color: rgba(255, 255, 255, 0.5) !important;
    transition: all 0.2s ease;
}

.custom-men-dropdown .dropdown-item:hover {
    background-color: #111;
    color: #fff !important;
}
.search-result-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

#searchResultsDropdown::-webkit-scrollbar {
    width: 4px;
}

#searchResultsDropdown::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
}
.announcement-bar {
    width: 100%;
    padding: 8px 0;
    white-space: nowrap;
}

.marquee-track {
    display: inline-flex;
    animation: marquee-scroll 18s linear infinite;
    will-change: transform;
}

/* لو الصفحة RTL، الحركة بتتعكس تلقائي عشان الـ direction بتاع الـ body،
   فهنفرض اتجاه ثابت للأنميشن نفسه */
[dir="rtl"] .marquee-track {
    animation-direction: reverse;
}

.marquee-item {
    padding: 0 40px;
    letter-spacing: 1px;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* وقف الحركة لو المستخدم عامل hover (اختياري) */
.announcement-bar:hover .marquee-track {
    animation-play-state: paused;
}