/* إعدادات الخط الافتراضي */
body {
    font-family: 'Inter', sans-serif;
    /* اللون الأسود الخاص بالموقع */
    background-color: #0F0F0F;
}

/* تخصيص الشريط العلوي ليكون شبه شفاف */
header {
    background-color: rgba(15, 15, 15, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* *** التعديل الجديد: إزالة خلفية الهوفر للروابط في الشريط العلوي *** */
.navbar-link:hover {
    background-color: transparent !important;
}

/* إخفاء السلايدات غير النشطة */
.slider-slide {
    transition: opacity 1.2s ease-in-out;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* إظهار السلايد النشط */
.slider-slide.active {
    opacity: 1;
    position: relative;
}

/* --- طلبك الخاص بنقاط البانر ---
*/

/* تصميم النقاط العادية (دائرة ممتلئة) */
.slider-dot {
    width: 12px;
    height: 12px;
    background-color: #9CA3AF; /* gray-400 */
    border-radius: 9999px;
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
    transition: all 0.4s ease;
}

/* تصميم النقطة النشطة (شكل بيضاوي) */
.slider-dot.active {
    width: 32px; /* عرض أطول لجعلها بيضاوية */
    background-color: #FFFFFF; /* لون أبيض */
}

/* --- CSS جديد لأيقونات التواصل الاجتماعي --- */
.social-icon {
    transition: color 0.3s ease;
    /* اللون الافتراضي (نفس لون text-gray-300) */
    color: #D1D5DB; 
}

.social-icon.facebook-icon:hover {
    color: #1877F2; /* لون فيسبوك */
}

/* أيقونة X لونها أبيض أو أسود، سنجعلها بيضاء ساطعة عند الهوفر
   لأنها حالياً رمادية
*/
.social-icon.x-icon:hover {
    color: #FFFFFF; /* لون أبيض ساطع */
}

.social-icon.instagram-icon:hover {
    color: #E4405F; /* لون انستجرام */
}

.social-icon.telegram-icon:hover {
    color: #26A5E4; /* لون تيليجرام */
}

.social-icon.whatsapp-icon:hover {
    color: #25D366; /* لون واتساب */
}
/* ----------------------------------------- */

/* --- CSS جديد لشريط المنتجات المتحرك --- */

/* *** تم تطبيق الحل الجديد (طريقة المجموعتين) ***
  تغيير الحركة من -50% إلى -100%
  لتعمل مع هيكل المجموعتين المتجاورتين.
  هذا يحل مشكلة "القفزة" (Jump) بشكل نهائي.
*/
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

.animate-marquee {
    animation: marquee 40s linear infinite;
    will-change: transform;
}

/* *** تم التعديل هنا ***
  تطبيق إيقاف الحركة عند تمرير الماوس فوق "الحاوية الرئيسية"
  ليتم إيقاف المجموعتين معاً.
  (بناءً على طلبك)
*/
.marquee-container:hover .animate-marquee {
    animation-play-state: paused;
}

/* ----------------------------------------- */