/* ============================= */
/* سكشن عن كومايزر */
/* ============================= */

.about-section {
    padding: 80px 0 !important;
    position: relative;
}

/* الصورة */
.about-section img {
    width: 100% !important;
    max-width: 420px !important;
    border-radius: 10px !important;
    position: relative;
    z-index: 2;
}

/* خلفية رمادي خلف الصورة */
.about-section .s-block__image,
.about-section .image-wrapper {
    position: relative;
}

.about-section .s-block__image::before,
.about-section .image-wrapper::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #e9e9e9;
    top: 20px;
    left: 20px;
    z-index: 1;
    border-radius: 10px;
}

/* مربع 15 سنة */
.about-section .experience-badge {
    position: absolute;
    bottom: 30px;
    left: -40px;
    background: #FFD400;
    color: #fff;
    padding: 18px 30px;
    font-weight: bold;
    font-size: 20px;
    border-radius: 4px;
    z-index: 3;
}

/* العنوان */
.about-section h2 {
    font-size: 42px !important;
    font-weight: 800 !important;
    color: #111 !important;
    margin-bottom: 20px !important;
}

/* النص */
.about-section p {
    font-size: 18px !important;
    line-height: 1.9 !important;
    color: #555 !important;
}

/* الزر */
.about-section a,
.about-section button {
    background: #FFD400 !important;
    color: #000 !important;
    padding: 14px 35px !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    border: none !important;
    transition: 0.3s;
}

.about-section a:hover,
.about-section button:hover {
    background: #e6bf00 !important;
}

/* ========================================= */
/* سكشن مميزات المتجر المحسنة (سيليا) */
/* ========================================= */

/* 1. تصميم حاوية الأيقونة (الدائرة الصفراء) */
.custom-class .s-block-features__icon,
.custom-class .feature-icon {
    background-color: #FDE02F !important; /* اللون الأصفر */
    width: 90px !important;
    height: 90px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 25px auto !important;
}

/* 2. تحويل لون الأيقونة من أسود إلى أبيض */
.custom-class .s-block-features__icon img,
.custom-class .s-block-features__icon svg,
.custom-class .feature-icon img {
    filter: brightness(0) invert(1) !important; /* تحويل اللون للأبيض */
    width: 45px !important;
    height: 45px !important;
    object-fit: contain !important;
}

/* 3. تنسيق الكروت (مربع أبيض مع ظل مثل الصورة المستهدفة) */
.custom-class .s-block-features__item,
.custom-class .feature-item {
    background-color: #ffffff !important;
    padding: 35px 20px !important;
    border-radius: 8px !important;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #f5f5f5 !important;
    transition: all 0.3s ease !important;
}

/* تأثير بسيط عند تمرير الماوس */
.custom-class .s-block-features__item:hover,
.custom-class .feature-item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.08) !important;
}

/* 4. ضبط العناوين والنصوص داخل الكارت */
.custom-class .s-block-features__title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #000 !important;
    margin-bottom: 15px !important;
}

.custom-class .s-block-features__description {
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: #666 !important;
}

/* ========================================= */
/* تنسيق أيقونات مميزات المتجر (سيليا) */
/* ========================================= */

/* 1. تصميم الدائرة الصفراء خلف الأيقونة */
.custom-class .s-block-features__icon,
.custom-class .feature-icon {
    background-color: #FDE02F !important; /* اللون الأصفر */
    width: 90px !important; /* عرض الدائرة */
    height: 90px !important; /* ارتفاع الدائرة */
    border-radius: 50% !important; /* يجعلها دائرية تماماً */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 25px auto !important; /* توسيط الدائرة */
}

/* 2. تحويل لون الأيقونة نفسها إلى الأبيض */
.custom-class .s-block-features__icon img,
.custom-class .s-block-features__icon svg,
.custom-class .feature-icon img {
    filter: brightness(0) invert(1) !important; /* الفلتر السحري لتحويل الأسود لأبيض */
    width: 45px !important; /* حجم الأيقونة داخل الدائرة */
    height: 45px !important;
    object-fit: contain !important;
}

/* 3. تنسيق الكروت (لتظهر كبطاقات بيضاء بارزة) */
.custom-class .s-block-features__item,
.custom-class .feature-item {
    background-color: #ffffff !important;
    padding: 35px 20px !important;
    border-radius: 8px !important;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05) !important; /* ظل خفيف */
    border: 1px solid #f5f5f5 !important;
    text-align: center !important;
    transition: transform 0.3s ease !important;
}

/* تأثير بسيط عند تمرير الماوس على الكارت */
.custom-class .s-block-features__item:hover,
.custom-class .feature-item:hover {
    transform: translateY(-5px) !important;
}

/* 4. تنسيق العناوين والنصوص */
.custom-class .s-block-features__title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #000 !important;
    margin-bottom: 15px !important;
}

.custom-class .s-block-features__description {
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: #666 !important;
}