/* Add custom CSS styles below */ 
/* الإعدادات الافتراضية (للشاشات الكبيرة مثل اللابتوب) */



/* تنسيق المحتوى لضمان دفع الزر للأسفل */
.advanced-slider__caption__inner__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between; /* يدفع النص للأعلى والزر للأسفل */
}

/* تنسيق الزر وتكييفه مع الموبايل */
.advanced-slider__caption__inner__content__button {
    margin-top: auto; /* يضمن نزوله لآخر نقطة متاحة في الحاوية */
    align-self: center; /* توسيط الزر أفقياً */
    
    /* تحسين المظهر للموبايل */
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 8px;
    width: fit-content;
    text-align: center;
    transition: all 0.3s ease;
}

/* تعديلات خاصة بشاشات الموبايل فقط */
@media (max-width: 768px) {
    .advanced-slider__caption__inner__content__button {
        width: 90%; /* جعل الزر عريضاً ليسهل الضغط عليه في الموبايل */
        margin-bottom: 20px; /* ترك مسافة عن حافة السلايدر السفلية */
        font-size: 14px;
        padding: 15px; /* تكبير منطقة اللمس */
    }
}








/* إزاحة الناف بار للأسفل في الجوال فقط */
@media (max-width: 768px) {
    .inner.bg-inherit.w-full {
        margin-top: 20px !important; /* يمكنك زيادة أو تقليل الرقم حسب المسافة المطلوبة */
        position: relative; /* لضمان استجابة الإزاحة بشكل صحيح */
    }
}

.grid.items-start.grid-cols-1.md\:grid-cols-2.gap-4 {
    margin-top: 20px; /* يمكنك تغيير الرقم حسب المسافة المطلوبة */
}







/* استهداف الحاوية */
.flex.flex-col.sm\:flex-row {
    /* 1. العرض: جعلته يمتد حتى 1400 بكسل ليكون عريضاً جداً */
    width: 95%; 
    max-width: 1400px; 
    
    /* 2. الارتفاع: جعلته قصيراً (200px بدل 390px) */
    height: 200px; 
    
    /* 3. التوسيط */
    margin-left: auto;
    margin-right: auto;
    
    /* 4. توزيع المحتوى */
    display: flex;
    overflow: hidden; /* لمنع خروج المحتوى عند تقليل الارتفاع */
}

/* تعديل العناصر الداخلية لملء العرض الجديد */
.flex.flex-col.sm\:flex-row > * {
    flex: 1; /* تجعل العناصر تتوزع بالتساوي على العرض الكبير */
    height: 100%;
}

/* دعم الشاشات الصغيرة (الموبايل) */
@media (max-width: 768px) {
    .flex.flex-col.sm\:flex-row {
        /* جعلناه 350 بكسل ليكون أطول (يمكنك زيادتها حسب رغبتك) */
        height: 350px; 
        
        width: 100%;
        
        /* بما أن الكلاس فيه flex-col، العناصر ستترتب فوق بعضها */
        /* يفضل التأكد من توزيع المساحة بين العناصر الداخلية */
        display: flex;
        flex-direction: column; 
    }

    .flex.flex-col.sm\:flex-row > * {
        /* كل عنصر داخلي سيأخذ مساحة متساوية من الطول الجديد */
        flex: 1; 
    }
}

/* أهم جزء: الصور لتكون عريضة دون أن تمط */
.flex.flex-col.sm\:flex-row img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* تغطية المساحة العريضة مع قص الزوائد */
}



/* دعم الشاشات الصغيرة (الموبايل) */
@media (max-width: 768px) {
    .flex.flex-col.sm\:flex-row {
        /* جعلناه 350 بكسل ليكون أطول (يمكنك زيادتها حسب رغبتك) */
        height: 350px; 
        
        width: 100%;
        
        /* بما أن الكلاس فيه flex-col، العناصر ستترتب فوق بعضها */
        /* يفضل التأكد من توزيع المساحة بين العناصر الداخلية */
        display: flex;
        flex-direction: column; 
    }

    .flex.flex-col.sm\:flex-row > * {
        /* كل عنصر داخلي سيأخذ مساحة متساوية من الطول الجديد */
        flex: 1; 
    }
}




/* تعديلات خاصة بالجوال فقط لتقليل المسافات */
@media (max-width: 768px) {
    
    /* تقليل الفراغات بين الأقسام الرئيسية */
    .main-content section, 
    section {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* تقليل الفراغ تحت البانرات الإعلانية والسلايدر */
    .s-slider-container, 
    .banner-container {
        margin-bottom: 10px !important;
    }

    /* تقليل الفراغ حول عناوين الأقسام */
    .section-header {
        margin-bottom: 8px !important;

    }

    /* تقليل المسافة بين بطاقات المنتجات */
    .products-grid {
        gap: 10px !important;
    }
}


/* إخفاء نصوص معينة */
p.ql-align-center {
    display: none !important;
}



/* استهداف الكلاس وتقليل المسافات الداخلية (Padding) */
.s-block.s-block--about.s-block--full-bg {
    padding-top: 20px !important;    /* تقليل المسافة العلوية */
    padding-bottom: 20px !important; /* تقليل المسافة السفلية */
    min-height: auto !important;     /* إلغاء أي حد أدنى للطول */
}

/* التحكم في الارتفاع على الشاشات الكبيرة */
@media (min-width: 640px) {
    .s-block.s-block--about.s-block--full-bg {
        padding-top: 30px !important; 
        padding-bottom: 30px !important;
    }
}

/* إذا كان هناك صور داخل هذا القسم تريد تصغيرها أيضاً */
.s-block--about img {
    max-height: 300px !important; /* تحديد أقصى ارتفاع للصور داخل القسم */
    object-fit: contain !important;
}






/* استهداف الصورة مباشرة داخل الكلاس المطلوب */
.s-block--about img {
    width: 600px !important;
    height: 600px !important;
    object-fit: cover !important; /* لقص الـ 200px الزائدة من العرض دون تشويه */
    object-position: center !important;
    max-width: 100% !important;  /* لضمان التجاوب على الجوال */
    height: auto !important;     /* يسمح بتناسب الارتفاع مع العرض في الشاشات الصغيرة */
    display: block !important;
    margin: 0 auto !important;   /* توسيط الصورة */
}

/* تقصير القسم نفسه (إلغاء المسافات الكبيرة) */
.s-block--about {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* ضبط التجاوب للموبايل */
@media (max-width: 640px) {
    .s-block--about img {
        width: 100% !important; /* تأخذ كامل عرض الشاشة الصغيرة */
        aspect-ratio: 1 / 1 !important; /* يحافظ على الشكل المربع 600x600 تلقائياً */
    }
}



.slider-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 5rem;    /* مسافة متساوية */
  padding-bottom: 5rem; /* مسافة متساوية */
}




/* استهداف الكلاسات الخاصة بالسلايدر */
.s-block--special-products-slider--4.category-elements.s-block--special-products-slider {
    /* إضافة مسافة بسيطة من الأعلى */
    margin-top: 20px; 
    
    /* ضمان عدم وجود هوامش جانبية تكسر التصميم في الموبايل */
    margin-left: auto;
    margin-right: auto;
    
    /* جعل العرض مرناً ليتناسب مع كل الشاشات */
    width: 100%;
    max-width: 100vw;
    
    /* تحسين الأداء وتفادي مشاكل التداخل */
    overflow: hidden;
    position: relative;
    display: block;
}

/* تحسينات إضافية لواجهات الموبايل (أصغر من 768px) */
@media (max-width: 768px) {
    .s-block--special-products-slider--4.category-elements.s-block--special-products-slider {
        margin-top: 15px; /* تقليل المسافة قليلاً في الشاشات الصغيرة */
        padding-left: 10px;  /* إضافة حواف بسيطة إذا لزم الأمر */
        padding-right: 10px;
    }
}





/* رفع زر العودة للأعلى بمقدار 50 بكسل إضافية */
.scroll-to-top.animated.left.fadeInUp {
    bottom: calc(40px + 70px) !important; /* نجمع القيمة القديمة + الـ 50 بكسل الإضافية */
    /* إذا كانت القيمة القديمة لا تكفي، يمكنك زيادة الـ 60px لـ 80px أو أكثر */
}
/* القاعدة الأساسية للزر (على الشاشات الكبيرة) */
.scroll-to-top.animated.left.fadeInUp {
    bottom: 90px !important; /* مسافة كافية ليكون فوق زر الواتساب */
}

/* في حال الشاشات الصغيرة (الموبايل) */
@media (max-width: 768px) {
    .scroll-to-top.animated.left.fadeInUp {
        /* قمنا بتغيير القيمة من 100px إلى 150px لرفعه أكثر */
        bottom: 170px !important; 
        left: 20px !important;    
    }
    
    /* بقية تنسيقات الموبايل كما هي */
    .consultant-fixed-btn {
        padding: 12px 18px !important;
        font-size: 0.9rem !important;
    }
    .consultant-fixed-link {
        bottom: 20px !important;
        left: 20px !important;
    }
}












h2.custom-heading {
    /* المسافة العلوية (اختياري حسب طلبك السابق) */
    margin-top: 2rem; 

    /* حجم الخط للموبايل (يعادل text-5xl) */
    font-size: 3rem; 
    line-height: 1;
    font-weight: 800; /* تعادل font-extrabold */
    letter-spacing: -0.05em; /* تعادل tracking-tighter لجعل النص أكثر تماسكاً وفخامة */
    color: var(--store-text-primary); /* يفترض وجود متغير للون */
}

.s-block--special-products-slider--9.s-block--special-products-slider {
    margin-top: 40px; /* يمكنك زيادة أو تقليل الرقم حسب رغبتك */
}



/* الحالة الافتراضية للـ Navbar (قبل السكرول) */
.inner.w-full {
    background-color: transparent !important; /* أو أي لون تريده في البداية */
    transition: all 0.3s ease-in-out; /* حركة ناعمة عند التحول */
}

/* الحالة عند عمل سكرول (سيتم تفعيلها بواسطة JS) */
.inner.w-full.scrolled {
    background-color: rgba(124, 58, 237, 0.8) !important; /* البنفسجي مع الشفافية */
    backdrop-filter: blur(8px); /* تأثير التغبيش */
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* ظل خفيف لإعطاء عمق */
}

/* تغيير لون الأيقونات والنصوص للأبيض فقط عند السكرول */
.inner.w-full.scrolled i, 
.inner.w-full.scrolled svg,
.inner.w-full.scrolled a {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* الحجم الافتراضي للشاشات الكبيرة */
.navbar-brand img {
    height: 70px !important;
    width: auto !important;
}

/* الحجم عند العرض على الجوال (أقل من 576px) */
@media (max-width: 576px) {
    .navbar-brand img {
        height: 40px !important; /* يمكنك تعديل القيمة هنا */
        width: auto !important;
    }
}




/* زيادة سرعة الانتقال في السلايدر */
.الكلاس-الخاص-بك {
    /* تجعل حركة السلايدر "سنابي" (تنتقل من عنصر لعنصر بسرعة) */
    transition-duration: 200ms !important; /* تقليل زمن الحركة */
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important; /* جعل الحركة تبدأ بانفجار وتتوقف بسلاسة */
    will-change: transform; /* تحذير المتصفح أن هذا العنصر سيتحرك ليجهز وحدة المعالجة الرسومية */
}






.marquee__group {
  display: flex;
  flex-shrink: 0;
  gap: 30px; /* المسافة بين الصور */
  min-width: 100%;
  
  /* هنا السرعة: قلل الرقم لزيادة السرعة */
  /* جرب 5s، إذا كانت لا تزال بطيئة جرب 3s */
  animation: scroll 9s linear infinite !important;
  
  /* إضافة مهمة جداً للنعومة */
  will-change: transform;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* بدلاً من الاعتماد على عرض الحاوية فقط، نضمن التحرك الكامل */
    transform: translateX(calc(-100% - 30px)); 
  }
}





/* تنسيق الدوائر الأساسي */
.s-social-list {
    list-style: none;
    display: flex;
    gap: 15px;
    padding: 0;
}

.s-social-list li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px; /* أو الحجم الذي تفضله */
    height: 50px;
    border-radius: 50%;
    color: #fff; /* لون الأيقونة */
    transition: transform 0.3s; /* اختيارياً لإضافة حركة بسيطة عند التمرير */
}

/* تلوين الأيقونات بشكل ثابت */
.s-social-list li:nth-child(1) a { 
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
}.s-social-list li:nth-child(2) a { background-color: #000000; } /* X */
.s-social-list li:nth-child(3) a { background-color: #FFFC00; color: #000; } /* Snapchat */
.s-social-list li:nth-child(4) a { background-color: #000000; } /* TikTok */
.s-social-list li:nth-child(5) a { background-color: #FF0000; } /* YouTube */
.s-social-list li:nth-child(6) a { background-color: #1877F2; } /* Facebook */

/* حركة خفيفة عند التمرير (اختياري) */
.s-social-list li a:hover {
    transform: scale(1.1);
}


.teaching-class{
  margin-top: 50px !important;
}



/* ضبط الحاوية لتستوعب الصورة بمقاسها الطبيعي */
.swiper-slide {
  height: auto; /* يسمح للسلايد بأخذ ارتفاع الصورة */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ضبط الصورة داخل البنر */
.swiper-slide img {
  width: 100%;      /* عرض البنر يأخذ عرض الحاوية */
  height: auto;     /* الحفاظ على النسبة والتناسب (Aspect Ratio) */
  object-fit: contain; /* التأكد من ظهور كامل الصورة دون قص */
  display: block;
}

/* في حال كان هناك حاوية إضافية للبنر */
.s-slider-container {
  height: auto !important; /* لضمان أن السلايدر لا يفرض ارتفاعاً ثابتاً */
}






/* التنسيق الموحد لجميع الواجهات (الموبايل والكمبيوتر) */
.advanced-slider__caption__inner__content__button {
    margin-top: 170px !important;      /* المارجن المطلوب في كل الواجهات */
    display: inline-block !important; /* لضمان عمل المارجن والعرض بشكل صحيح */
    width: fit-content !important;    /* العرض يتناسب مع النص فقط */
}

/* تنسيق خاص بالموبايل (الواجهات الصغيرة) */
@media (max-width: 1023px) {
    .advanced-slider__caption__inner__content__button {
        padding: 6px 15px !important;  /* حشوة صغيرة للموبايل */
        font-size: 12px !important;    /* خط صغير */
        max-width: 180px !important;   /* تحديد سقف للعرض */
    }
}

/* تنسيق خاص بالشاشات الكبيرة (Desktop) */
@media (min-width: 1024px) {
    .advanced-slider__caption__inner__content__button {
        padding: 12px 30px !important; /* حشوة أكبر للكمبيوتر */
        font-size: 16px !important;    /* خط أكبر */
        max-width: 250px !important;   /* عرض أوسع يتناسب مع الشاشة */
    }
}







@media (min-width: 1024px) {
  .swiper-wrapper s-slider-swiper-wrapper{
    height: 1000px !important;
  }
}





/* تنسيق الصور التي تحمل هذه الكلاسات في الموبايل فقط */
@media (max-width: 767px) {
    img.lazy.object-cover.mx-auto.rounded-full.loaded {
        width: 100px !important;   /* المقاس الصغير للموبايل */
        height: 100px !important;  /* الحفاظ على التناسب الدائري */
        min-width: 100px !important;
        min-height: 100px !important;
    }
}

/* تنسيق الويب (أكبر من 768px) لضمان بقاء المقاس 182x182 */
@media (min-width: 768px) {
    img.lazy.object-cover.mx-auto.rounded-full.loaded {
        width: 182px !important;
        height: 182px !important;
    }
}

/* في حال الشاشات الصغيرة (الموبايل) */
@media (max-width: 768px) {
    /* تعديل كلاس wa-selia لرفعه للأعلى */
    .wa-selia {
        bottom: 100px !important; /* يمكنك زيادة هذا الرقم لرفعه أكثر */
        position: fixed !important; /* تأكد أن التموضع ثابت ليظهر فوق العناصر */
    }









@media (max-width: 767px) {
    /* 1. إضافة مساحة أمان في أسفل الموقع */
    /* هذا السطر سيجعل الصفحة تنتهي قبل البار بمسافة كافية */
    #main-content, 
    body, 
    .main-wrapper {
        padding-bottom: 120px !important; 
    }

    /* 2. التأكد من أن البار السفلي ليس "أعلى" من اللازم في الطبقات */
    /* خفضنا الرقم قليلاً ليسمح بظهور القوائم المنسدلة فوقه إذا لزم الأمر */
    .store-header.centered_logo,
    .store-header.centered_logo.scrolled {
        z-index: 1000 !important; 
    }

    /* 3. رفع طبقة أزرار التواصل وأي عنصر تفاعلي */
    .advanced-slider__caption__inner__content__button,
    .s-button-wrap,
    .fixed-action-btn {
        position: relative !important;
        z-index: 1001 !important; /* أعلى من البار بـ 1 */
    }

    /* 4. تعديل زر الواتساب ليظهر فوق البار السفلي */
    .consultant-fixed-link {
        bottom: 100px !important; /* رفعه ليكون فوق البار العائم */
        z-index: 1002 !important;
    }
}


  @media (max-width: 767px) {
    /* 1. إضافة مساحة أمان في أسفل الموقع */
    /* هذا السطر سيجعل الصفحة تنتهي قبل البار بمسافة كافية */
    #main-content, 
    body, 
    .main-wrapper {
        padding-bottom: 120px !important; 
    }

    /* 2. التأكد من أن البار السفلي ليس "أعلى" من اللازم في الطبقات */
    /* خفضنا الرقم قليلاً ليسمح بظهور القوائم المنسدلة فوقه إذا لزم الأمر */
    .store-header.centered_logo,
    .store-header.centered_logo.scrolled {
        z-index: 1000 !important; 
    }

    /* 3. رفع طبقة أزرار التواصل وأي عنصر تفاعلي */
    .advanced-slider__caption__inner__content__button,
    .s-button-wrap,
    .fixed-action-btn {
        position: relative !important;
        z-index: 1001 !important; /* أعلى من البار بـ 1 */
    }

    /* 4. تعديل زر الواتساب ليظهر فوق البار السفلي */
    .consultant-fixed-link {
        bottom: 100px !important; /* رفعه ليكون فوق البار العائم */
        z-index: 1002 !important;
    }
}

/* حذف الصورة نهائياً من الموبايل والويب */
img.object-cover.mx-2.rounded-full.w-14.h-14, 
img[class*="w-14"][class*="h-14"].rounded-full {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}