/* Add custom CSS styles below */ 
body, 
#app, 
.main-content, 
.page-wrapper,
.store-finished-app {
    background-color: #7a8aa2 !important;
}
header, 
.site-header, 
.main-header, 
.top-header, 
.s-header-wrapper,
.s-header-container {
    background-color: #7a8aa2 !important;
    border-bottom: none !important;
}
footer, 
.site-footer, 
.footer-main,
.s-footer-wrapper {
    background-color: #7a8aa2 !important;
    border-top: none !important;
}
section, 
.s-block, 
.container-fluid, 
.container,
.s-container {
    background-color: transparent !important;
}
.s-header-wrapper::after, .s-header-wrapper::before {
    display: none !important;
}
:root, html, body {
    background-color: #7a8aa2 !important;
}#app, 
.store-finished-app, 
.main-content, 
.page-wrapper, 
.master-wrapper,
.s-layout {
    background-color: #7a8aa2 !important;
}
header,
.site-header,
.main-header,
.top-header,
.s-header,
.s-header-wrapper,
.s-header-container,
.s-top-header,
.header-banner,
.top-bar,
.site-top-bar,
.main-top-bar,
.announcement-bar {
    background-color: #7a8aa2 !important;
    border-bottom: none !important;
    border-top: none !important;
}

.s-header-wrapper::after, 
.s-header-wrapper::before,
.top-bar::after,
.top-bar::before {
    display: none !important;
    background: none !important;
    box-shadow: none !important;
}

.store-features-section,
.s-features,
.features-wrapper,
.s-block-features {
    background-color: #7a8aa2 !important;
}

.s-header-wrapper, 
.s-header-container,
#s-header-element,
header.s-header {
    background-color: #7a8aa2 !important;
    background: #7a8aa2 !important;
}
.s-footer-wrapper,
.s-footer-main,
.footer-top,
.s-footer-content-wrapper {
    background-color: #7a8aa2 !important;
    background: #7a8aa2 !important;
}
.s-header-wrapper {
    border: none !important;
    box-shadow: none !important;
}
[class*="header"] , [class*="footer"] {
    background-color: #7C8CA5 !important;
}
header,
.site-header,
.main-header,
.top-header,
.s-header,
.s-header-wrapper,
.s-header-container,
.s-top-header,
.header-banner,
.top-bar,
.site-top-bar,
.main-top-bar,
.announcement-bar {
    background-color: #7a8aa2 !important;
    border-bottom: none !important;
    border-top: none !important;
}
.s-header-wrapper::after, 
.s-header-wrapper::before,
.top-bar::after,
.top-bar::before {
    display: none !important;
    background: none !important;
    box-shadow: none !important;
}
.store-features-section .feature-icon,
.s-features .feature-icon-wrapper,
.features-wrapper .icon-container,
.s-features i,
.s-features svg {
    background-color: #7a8aa2 !important;
    color: #ffffff !important;
  }

.store-features-section .feature-item,
.s-features .feature-item,
.features-wrapper .feature-box,
.s-block-features .s-feature-card,
[class*="feature"] .card, 
[class*="feature"] .box {
    background-color: #7a8aa2 !important;
    border-color: #7a8aa2 !important; /* توحيد لون الحدود إن وجدت */
}
.store-features-section h3,
.store-features-section p,
.s-features h3,
.s-features p,
.features-wrapper h3,
.features-wrapper p,
.s-block-features h3,
.s-block-features p,
[class*="feature"] * {
    color: #ffffff !important;
}
.store-features-section .feature-icon,
.s-features .feature-icon-wrapper,
.features-wrapper .icon-container,
.s-features i,
.s-features svg {
    background-color: rgba(255, 255, 255, 0.2) !important; /* إعطاء الدائرة خلفية بيضاء شفافة خفيفة لتبرز */
    color: #ffffff !important;
}
/* استبدل .box-card بالاسم الفعلي للكلاس (Class) المستخدم في موقعك للمربعات */
.box-card {
    background-color: #7a8aa2 !important; /* تغيير لون المربع */
    border-radius: 12px;                  /* للحفاظ على انحناء الحواف كما في الصورة */
}

/* تعديل لون النصوص داخل المربعات لتصبح بيضاء وواضحة */
.box-card h3, 
.box-card p, 
.box-card span {
    color: #ffffff !important;
}