/* Add custom CSS styles below */ 
.advanced-slider__caption {
    width: 1920px !important;
    height: 800px !important;
    /* إضافة خصائص إضافية لضمان ظهور المحتوى بشكل صحيح داخل الأبعاد الجديدة */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* لمنع خروج المحتوى عن الأبعاد */
}

/* استهداف الـ UL من خلال الكلاس الموجود في الـ HTML */
.max-w-2xl.lg\:max-w-none.mx-auto.mt-8.grid.gap-x-6.gap-y-6.lg\:mx-0.grid-cols-3.lg\:grid-cols-6 {
    /* تغيير عدد الأعمدة في الشاشات الكبيرة ليصبح 4 بدلاً من 6 */
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* اختيارياً: إذا أردت التأكد من أن الشاشات الصغيرة تظهر بعمودين كما اتفقنا */
@media (max-width: 1023px) {
    .max-w-2xl.lg\:max-w-none.mx-auto.mt-8.grid.gap-x-6.gap-y-6.lg\:mx-0.grid-cols-3.lg\:grid-cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* استهداف الصور داخل الـ li الخاصة بالكلاس المذكور */
.max-w-2xl.lg\:max-w-none.mx-auto.mt-8.grid.gap-x-6.gap-y-6.lg\:mx-0.grid-cols-3.lg\:grid-cols-6 li img {
    width: 150px !important;  /* يمكنك تقليل هذا الرقم حسب الرغبة */
    height: 150px !important; /* اجعل الطول والعرض متساويين للحفاظ على شكل مربع */
    object-fit: cover;        /* يضمن أن الصورة تملأ المربع دون أن تتمدد بشكل مشوه */
    border-radius: 12px;      /* اختياري: لإعطاء زوايا مستديرة جمالية */
    margin: 0 auto;           /* لتوسيط الصورة داخل الـ li */
}

.h-10 {
    width: 60px;
    height: 25px;
}


/* تنسيق الحاوية الأساسي */
.s-social-list {
    display: flex;
    gap: 15px;
}

/* تنسيق الرابط أو الحاوية المحيطة بالأيقونة */
.s-social-list a {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e0e0; /* لون الإطار الموجود في صورتك */
    transition: all 0.3s ease; /* لنعومة الانتقال */
}

/* لون الأيقونة الافتراضي (اللون الداكن الموجود في صورتك) */
.s-social-list a svg {
    width: 18px;
    height: 18px;
    fill: #2d3436; 
    transition: fill 0.3s ease;
}

/* تأثير الـ Hover */
.s-social-list a:hover {
    background-color: #f8f9fa; /* لون خلفية خفيف عند الهوفر */
    border-color: #007bff; /* تغيير لون الإطار */
}

/* تغيير لون الأيقونة لكل منصة عند الهوفر */
.s-social-list a:hover svg {
    fill: #007bff; /* يمكنك تغيير هذا اللون حسب رغبتك */
}

/* تخصيص ألوان خاصة لكل منصة (اختياري) */
.s-social-list a:hover[href*="facebook"] svg { fill: #1877f2; }
.s-social-list a:hover[href*="tiktok"] svg { fill: #000000; }
.s-social-list a:hover[href*="snapchat"] svg { fill: #fffc00; }
.s-social-list a:hover[href*="instagram"] svg { fill: #e1306c; }



@media (max-width: 639px) {
  .logo-normal {
    width: 100px !important;
    height: auto; /* للحفاظ على أبعاد الصورة ومنع التمدد */
  }
}


/* --- 1. تنسيق الهيدر (Header) --- */
.store-header.centered_logo {
    padding-bottom: 5px !important;
    margin-bottom: 0px !important;
    min-height: auto !important;
}

@media (max-width: 767px) {
    .store-header.centered_logo {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .store-header.centered_logo .navbar-brand img {
        max-height: 35px !important;
        width: auto !important;
    }
}

/* --- 2. تنسيق أيقونات التواصل الاجتماعي (تصغير وتقريب) --- */
.s-social-list {
    display: flex;
    gap: 8px !important; /* تقريب المسافة */
    padding: 0;
}

.s-social-list li a {
    width: 35px !important;  /* تصغير الدائرة */
    height: 35px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: transform 0.3s;
}

.s-social-list li a i, .s-social-list li a svg {
    font-size: 16px !important; /* تصغير الأيقونة */
}

/* --- 3. تنسيق البنرات في الموبايل (ارتفاع ثابت) --- */
@media (max-width: 767px) {
    /* بنرات Grid */
    .banners-grid a, .banners-grid > * {
        height: 100px !important;
        display: block !important;
    }

    /* بنرات Triple Banners */
    .s-block--bundle-triple-banners a {
        height: 150px !important;
        display: block !important;
        margin-bottom: 10px !important;
    }

    /* البنر الرابط الفردي */
    .banner-link {
        height: 150px !important;
    }

    /* توحيد جودة الصور في جميع البنرات */
    .banners-grid img, 
    .s-block--bundle-triple-banners img, 
    .banner-link img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }
}

/* --- 4. تعديل زر العودة للأعلى (Scroll to Top) --- */
@media (max-width: 768px) {
    .scroll-to-top.animated.left.fadeInUp {
        bottom: 100px !important; /* إنزاله للأسفل قليلاً في الموبايل */
        left: 20px !important;
    }
}

/* --- 5. إلغاء المسافات بين الأقسام (S-Block) --- */
.s-block.s-block--bundle-html-content.s-block--live-editor {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* --- 6. تنسيق الـ Overlay باللون المطلوب --- */
.overlay {
    background-color: #1C6144 !important;
}

/* --- 7. توسيط المحتوى داخل الـ Div المطلوب --- */
.has-overlay.flex-1.discount.countersingl.flex.items-center.text-sm {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 30px !important; /* المسافة السفلية المطلوبة */
}






/* تنسيق الأيقونات قبل الهوفر */
.flex.items-center.justify-center.mt-4.hydrated a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #f1f1f1 !important; /* خلفية رمادية فاتحة جداً */
    color: #1C6144 !important;    /* لون الأيقونة الأساسي */
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* التعديل المطلوب: عند الهوفر تتحول الأيقونة للأبيض */
.flex.items-center.justify-center.mt-4.hydrated a:hover {
    transform: translateY(-3px);
    color: #ffffff !important; /* لون الأيقونة أبيض صريح */
}

/* تلوين الخلفيات عند الهوفر لكل منصة */
.flex.items-center.justify-center.mt-4.hydrated a[href*="instagram"]:hover { 
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%) !important; 
}
.flex.items-center.justify-center.mt-4.hydrated a[href*="facebook"]:hover { 
    background-color: #1877F2 !important; 
}
.flex.items-center.justify-center.mt-4.hydrated a[href*="x.com"]:hover, 
.flex.items-center.justify-center.mt-4.hydrated a[href*="twitter"]:hover { 
    background-color: #000000 !important; 
}
.flex.items-center.justify-center.mt-4.hydrated a[href*="snapchat"]:hover { 
    background-color: #FFFC00 !important; 
    color: #000000 !important; /* استثناء للسناب شات لأن الخلفية صفراء فاتحة */
}
.flex.items-center.justify-center.mt-4.hydrated a[href*="tiktok"]:hover { 
    background-color: #000000 !important; 
}

/* لضمان أن الأيقونة داخل الرابط تتبع اللون الأبيض */
.flex.items-center.justify-center.mt-4.hydrated a:hover i,
.flex.items-center.justify-center.mt-4.hydrated a:hover svg {
    fill: #ffffff !important; /* للأيقونات من نوع SVG */
    color: #ffffff !important; /* للأيقونات من نوع Font */
}
/* تنسيق خلفية قسم التواصل في الفوتر مع حركة ناعمة */
.store-footer__contacts-row {
    background: linear-gradient(-45deg, #f8f9fa, #e9ecef, #f1f3f5, #ffffff) !important;
    background-size: 400% 400% !important;
    animation: gradientBG 15s ease infinite !important;
    padding: 20px 0 !important; /* إضافة مساحة داخلية ليعطي مدى للحركة */
    border-top: 1px solid rgba(0,0,0,0.05); /* خط علوي بسيط جداً للأناقة */
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* تعريف حركة التدرج اللوني */
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* إذا أردت أن تكون الخلفية بألوان متجركم (أخضر خفيف جداً) استخدم هذا التعديل: */
/* .store-footer__contacts-row {
    background: linear-gradient(-45deg, #ffffff, #f0fdf4, #dcfce7, #ffffff) !important;
} 
*/


/* لضمان تغيير لون الروابط إذا كانت موجودة داخل الحقوق */
.text-sm.footer-rights a {
    color: #ffffff !important;
    text-decoration: underline; /* اختيارياً: وضع خط تحت الرابط لتمييزه */
}



/* تغيير لون خلفية الحاوية الداخلية للفوتر */
.store-footer__inner {
    background-color: #005878 !important; /* اللون الأزرق */
   /* مسافة بسيطة عن الحافة السفلية للمتصفح */
}

/* لضمان تناسق ألوان النصوص والروابط داخل هذه الحاوية */
.store-footer__inner, 
.store-footer__inner p, 
.store-footer__inner a, 
.store-footer__inner h3, 
.store-footer__inner h4,
.store-footer__inner span {
    color: #ffffff !important; /* تحويل النصوص للأبيض لتبدو واضحة فوق الأزرق */
}

/* تغيير لون منحنى الفوتر للأزرق */
.store-footer__curve {
    color: #005878 !important;  /* احتياطاً لبعض المتصفحات */
}

/* إجبار اللون الأزرق على قسم التواصل */
.store-footer__contacts-row {
    background-color: #005878 !important;
    background-image: none !important; /* حذف أي تدرج لوني أو صورة */
    background-clip: border-box !important;
}
.store-footer__contacts-row i, 
.store-footer__contacts-row span, 
.store-footer__contacts-row a {
    color: #ffffff !important;
}