/* Add custom CSS styles below */ 
.store-footer__inner a img{ width: 100px; filter: brightness(0); filter: invert(1); }
/* إزالة أي حدود وجعل الخلفية شفافة */
li.group {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 20px;
    background: transparent;
}

/* الصورة داخل قناع دائري الزوايا */
li.group .overflow-hidden {
    border-radius: 20px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* ظل خفيف للصورة وهي ثابتة */
}

/* التأثير عند الهوفر */
li.group:hover {
    transform: translateY(-5px);
}

li.group:hover .overflow-hidden {
    box-shadow: 0 20px 40px rgba(0,0,0,0.15); /* ظل قوي عند الحركة */
}

/* تأثير الصورة */
li.group img {
    transition: transform 0.5s ease;
}

li.group:hover img {
    transform: scale(1.1) rotate(1deg) !important; /* زووم مع ميلان بسيط جداً وحيوي */
}

/* النص */
li.group h3 {
    font-size: 15px;
    letter-spacing: 0.5px; /* تباعد بسيط بين الحروف */
    color: #222;
}




/* 1. إعداد خلفية القسم وتجهيز المساحة للعناوين */
.s-block--enhanced-features {
    position: relative; /* ضروري لضبط مكان النصوص */
    
    /* إضافة مساحة علوية كبيرة لظهور العناوين دون تداخل مع الأيقونات */
    padding-top: 160px !important; 

    /* الخلفية مع التبهيت */
    background: linear-gradient(rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.90)), 
                url('https://cdn.salla.sa/form-builder/7bepRPFHyS1kyx6AuXIs3EEQXzPWthD32Yb7ARmA.jpg');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* 2. إضافة العنوان الرئيسي (أناقة.. تحكي تفاصيلك) */
.s-block--enhanced-features::before {
    content: "أناقة.. تحكي تفاصيلك"; /* النص هنا */
    position: absolute;
    top: 50px; /* المسافة من أعلى الصفحة */
    left: 0;
    right: 0;
    text-align: center;
    font-size: 30px; /* حجم الخط */
    font-weight: bold;
    color: #333; /* لون النص غامق */
    z-index: 10;
    font-family: inherit;
}

/* 3. إضافة العنوان الفرعي (حيث تجتمع الأصالة...) */
.s-block--enhanced-features::after {
    content: "حيث تجتمع الأصالة مع التصاميم العصرية، لتمنحك إطلالة ساحرة ومريحة في آن واحد."; /* النص هنا */
    position: absolute;
    top: 100px; /* المسافة من أعلى (تحت العنوان الرئيسي) */
    left: 50%;
    transform: translateX(-50%);
    width: 90%; /* عرض النص حتى لا يلمس الحواف في الجوال */
    text-align: center;
    font-size: 16px; /* حجم خط أصغر */
    color: #666; /* لون رمادي أفتح قليلاً */
    line-height: 1.6;
    z-index: 10;
}

/* 4. جعل خلفية مربعات المميزات شفافة (زجاجية) */
.s-block--enhanced-features__item {
    background-color: rgba(255, 255, 255, 0.4) !important; 
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: none !important;
}

/* تحسين لون نصوص المميزات لتكون واضحة */
.s-block--enhanced-features__item h2,
.s-block--enhanced-features__item p {
    color: #222;
}
  .s-block--enhanced-features {
      padding-bottom: 30px;/* زيادة المساحة في الجوال لأن النص قد يأخذ سطرين */
    }
/* تحسين العرض للجوال (تصغير الخط قليلاً) */
@media (max-width: 768px) {
    .s-block--enhanced-features {
        padding-top: 180px !important; 
      padding-bottom: 50px;/* زيادة المساحة في الجوال لأن النص قد يأخذ سطرين */
    }
    .s-block--enhanced-features::before {
        font-size: 24px;
    }
    .s-block--enhanced-features::after {
        font-size: 14px;
        width: 95%;
        top: 95px;
    }
}