/* Add custom CSS styles below */ 
/* إعدادات القسم العامة */
.store-features-section {
    background-color: #fcf8f2; /* لون الخلفية البيج الفاتح المناسب للقهوة */
    padding: 40px 20px;
    direction: rtl;
    font-family: inherit;
}

.features-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* تنسيق العنوان */
.features-header {
    text-align: center;
    margin-bottom: 40px;
}

.features-header h2 {
    font-size: 28px;
    color: #2b262d;
    font-weight: bold;
    margin-bottom: 15px;
}

.features-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.features-divider .line {
    width: 80px;
    height: 1px;
    background-color: #b0a494;
}

.features-divider .diamond {
    width: 10px;
    height: 10px;
    background-color: #c4a47c;
    transform: rotate(45deg);
}

/* شبكة البطاقات */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* تنسيق البطاقة الواحدة */
.feature-card {
    background: #ffffff;
    border: 1px solid #e2d7c5;
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* الأيقونة */
.feature-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* النصوص داخل البطاقة */
.feature-card h3 {
    font-size: 16px;
    color: #2b262d;
    font-weight: bold;
    margin-bottom: 12px;
}

.feature-card p {
    font-size: 13px;
    color: #666666;
    line-height: 1.6;
    margin: 0;
}

/* التجاوب مع الجوال والشاشات المتوسطة */
@media (max-width: 992px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}











/* تعيين الصورة كخلفية للموقع بالكامل مع جعلها تتكرر وتغطي المساحة بسلاسة */
body, 
html, 
#app, 
.app-inner, 
main {
    background-image: url('[https://cdn.files.salla.network/other/1653846843/6a4ddd1f-1a27-4571-a4cc-03906dba3f94-original.webp') !important;
    background-repeat:no-repeat !important;
    background-size: cover !important; /* أو يمكنك استبدالها بـ cover لو حابيتها تملأ الشاشة بدون تكرار */
   /* لون تقريبي احتياطي يتماشى مع لون الصورة */
}

/* إزالة الخلفيات البيضاء الافتراضية لأقسام المتجر لتظهر خلفية القهوة من تحتها */
.s-block, 
section, 
.store-header, 
.store-footer {
    background-color: transparent !important;
}



/* تحديد لون روابط المنيو بشكل عام وحين المرور عليها (Hover) */
header.store-header .main-nav-container a,
header.store-header .nav-item,
.header__menu li a {
    color: #2b262d !important; /* لون النص الأساسي */
    transition: all 0.3s ease;
}

/* لون الـ Hover بوضوح تام (يمكنك تغيير اللون حسب رغبتك) */
header.store-header .main-nav-container a:hover,
header.store-header .nav-item:hover,
.header__menu li a:hover,
.header__menu li.router-link-active a {
    color: #4a3b32 !important; /* لون الخط عند الوقف عليه */
    background-color: rgba(255, 255, 255, 0.2) !important; /* خلفية خفيفة وواضحة عند الـ Hover */
    border-radius: 4px;
}
/* إلغاء الخلفية الشفافة أو الملونة التي تظهر عند الـ Hover على عناصر المنيو */
header.store-header .main-nav-container a:hover,
header.store-header .nav-item:hover,
.header__menu li a:hover,
.nav__link:hover,
.dropdown-menu {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;

  /* إخفاء الخط العادي القديم لو موجود */
.home-block-line, 
.circle-links-1 .home-block-line {
    display: none !important;
}

/* تصميم الخط الاحترافي المطابق للـ UI مع المربع الصغير في المنتصف */
.circle-links-1 .home-block-title::after,
.s-block--circle-links .home-block-title::after {
    content: "";
    display: block;
    width: 140px; /* عرض الخط بالكامل */
    height: 2px;
    background-color: #C8B286; /* لون الخط */
    margin: 12px auto 0 auto;
    position: relative;
}

/* المربع الصغير الموجود في منتصف الخط تماماً زي الـ Figma */
.circle-links-1 .home-block-title::before,
.s-block--circle-links .home-block-title::before {
    content: "";
    position: absolute;
    bottom: -19px; /* تحديد موضع المربع بالنسبة للخط */
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background-color: #C8B286; /* لون المربع */
    z-index: 2;
}
  header.store-header,
.header-container,
.main-nav-container {
    background-color: #C8B286 !important;
    background: #C8B286 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    box-shadow: none !important;
    border: none !important;
}
 /* تعيين اللون #C8B286 كخلفية أساسية للفوتر */
footer.store-footer,
.store-footer_inner,
.store-footer__container {
    background-color: #C8B286 !important;
    background-image: none !important;
}

/* ضبط لون النصوص والأيقونات داخل الفوتر لتكون واضحة ومقروءة على الخلفية */
footer.store-footer,
footer.store-footer p,
footer.store-footer a,
footer.store-footer span,
footer.store-footer li {
    color: #1E2039 !important; /* استخدام اللون الداكن للنصوص لضمان التباين والقراءة الواضحة */
}

/* إضاءة أيقونات السوشيال ميديا وتوافقها مع اللون الجديد */
footer.store-footer .social-icons a,
footer.store-footer .footer-social a {
    color: #1E2039 !important;
    border-color: #1E2039 !important;
}