/* هيرو سكشن */
/* إجبار السلايدر على عرض صورة واحدة بحجم 100% */
.salla-slider.photos-slider .swiper-slide,
salla-slider.photos-slider .swiper-slide {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* إخفاء الأجزاء الجانبية للصور الأخرى وضبط الحواف */
.salla-slider.photos-slider .swiper,
salla-slider.photos-slider .swiper {
    overflow: hidden !important;
}

/* اللوجو */ 
/* استهداف صورة الشعار في الهيدر لتكبيرها */
.navbar-brand img {
    max-height: 80px !important; /* تعديل أقصى ارتفاع (كان 3rem) */
    max-width: 250px !important; /* تعديل أقصى عرض للشعار */
    width: auto !important;
    height: auto !important;
}

/* التأكد من أن حاوية الشعار تسمح بالتكبير ولا تقصه */
.navbar-brand {
    display: flex !important;
    align-items: center !important;
    height: auto !important; 
}


/* لوووجو */



/* 1. تصميم الهيدر العائم (Floating Boxed Header) */
#mainnav.main-nav-container {
    max-width: 1200px !important;
    width: 92% !important;
    margin: 20px auto !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    padding: 0 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

/* 2. تكبير الشعار */
#mainnav .logo img,
.store-header .logo img {
    max-width: 140px !important;
    width: 100% !important;
    height: auto !important;
    transition: all 0.3s ease !important;
}

/* 3. ضبط البانر (الهيرو سكشن) ليكون تحت الهيدر بمسافة نظيفة */
#main-content {
    margin-top: 0 !important; 
    padding-top: 15px !important; /* مسافة بين الهيدر والبانر */
}

.s-block.s-block--full-banner {
    margin-top: 0 !important;
}

/////////////////////////////////////// 
/* المشاريع  */
/* تأثير البطاقة عند مرور الماوس */
.service-card.with-shadow:hover {
    transform: translateY(-12px); /* رفع البطاقة للأعلى */
    box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 35px; /* ظل أكبر وأكثر نعومة لإعطاء عمق */
    border-color: transparent; /* إخفاء الإطار الرمادي بلطف */
}

/* إضافة تأثير للأيقونة الدائرية داخل البطاقة (دوران وتكبير بسيط) */
.service-card.with-shadow:hover img,
.service-card.with-shadow:hover svg {
    transform: scale(1.1) rotate(5deg);
    transition: transform 0.3s ease-in-out;
}

/* التأكد من وجود انتقال ناعم للأيقونات في الحالة العادية */
.service-card.with-shadow img,
.service-card.with-shadow svg {
    transition: transform 0.3s ease-in-out;
}


/* منتجات  */

/* 1. تعريف زاوية الدوران للأنيميشن */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* 2. تصميم البطاقة في الحالة العادية (دوران بطيء جداً وهادئ) */
custom-salla-product-card.s-product-card-entry {
    position: relative;
    border: 2px solid transparent !important;
    border-radius: 12px !important;
    
    background-image: 
        linear-gradient(#ffffff, #ffffff),
        conic-gradient(from var(--angle), transparent 60%, #136575 100%) !important;
    
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    
    /* جعلنا الرفع أبطأ وأكثر نعومة (0.6s) */
    transition: transform 0.6s ease-out, box-shadow 0.6s ease-out !important;
    
    /* دوران البوردر بطيء جداً (8 ثوانٍ للفة الواحدة) */
    animation: rotate-salla-border 8s linear infinite !important;
}

/* 3. تأثير الماوس (Hover) - هدوء وركازة في الحركة */
custom-salla-product-card.s-product-card-entry:hover {
    /* رفع البطاقة بمسافة أقل قليلاً لتجنب الحركة المبالغ فيها */
    transform: translateY(-10px) scale(1.01) !important; 
    
    /* إبطاء حركة البوردر والنبض عند مرور الماوس */
    animation: 
        rotate-salla-border 4s linear infinite, /* لفة كل 4 ثوانٍ */
        sallaPulseGlow 2.5s infinite !important; /* نبضة كل ثانيتين ونصف */
}

/* 4. إعدادات حركة دوران البوردر */
@keyframes rotate-salla-border {
    0% { --angle: 0deg; }
    100% { --angle: 360deg; }
}

/* 5. إعدادات حركة النبض المتوهج (بشفافية أنعم) */
@keyframes sallaPulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(19, 101, 117, 0.3); } /* قللنا حدة اللون هنا لتكون أنعم */
    70% { box-shadow: 0 0 0 15px rgba(19, 101, 117, 0); }
    100% { box-shadow: 0 0 0 0 rgba(19, 101, 117, 0); }
}



/* العنوان الررئيسي */

/* تنسيق وتوسيط عنوان القسم (مثل: أبواب العطاء و الجود) */
.s-block__title {
    justify-content: center !important; /* لتوسيط المحتوى في صندوق الفليكس */
    text-align: center !important;
    margin-bottom: 2rem !important; /* إضافة مساحة تنفس مناسبة بين العنوان والبطاقات */
    width: 100%;
}

/* استهداف النص الداخلي للعنوان لتكبيره */
.s-block__title h1,
.s-block__title h2,
.s-block__title h3,
.s-block__title span {
    font-size: 28px !important; /* تكبير حجم الخط */
    font-family: 'Tajawal', sans-serif !important; /* تثبيت خط تجوال ليتناسق مع الهوية */
    font-weight: 700 !important; /* جعل الخط عريضاً ليكون بارزاً كعنوان رئيسي */
    color: #333 !important; /* لون داكن وأنيق للعنوان */
}