body {
    margin: 0;
    padding: 0;
}

.container {
    width: 99%;           /* يغطي تقريبًا كامل عرض الشاشة */
    max-width: 1700px;    /* أقصى عرض للشاشات الكبيرة */
    margin: 0 auto;       /* تمركز المحتوى أفقياً */
}


section {
    padding-top: 60px;
    padding-bottom: 60px;
}

section h2, section h3 {
    margin-bottom: 20px;
}






/* كل أسماء السكشنات الرئيسية */
.main-section {
    font-size: 32px;              /* حجم الاسم */
    color: #ffffff;               /* لون الخط أبيض */
    background-color: #028997;    /* لون الإطار حسب المتجر */
    display: inline-block;        /* الإطار حول النص فقط */
    padding: 10px 20px;           /* مساحة حول النص داخل الإطار */
    border-radius: 6px;           /* حواف دائرية للإطار */
    margin: 0 0 20px auto;        /* الإطار على أقصى اليمين، مسافة أسفل الاسم */
    text-align: center;           /* تمركز النص داخل الإطار */
}





/* كل أسماء السكشنات الرئيسية */
.main-section {
    font-size: 32px;              /* حجم الاسم */
    color: #ffffff;               /* لون الخط أبيض */
    background-color: #028997;    /* لون الإطار حسب المتجر */
    display: inline-block;        /* الإطار حول النص فقط */
    padding: 10px 20px;           /* مساحة حول النص داخل الإطار */
    border-radius: 6px;           /* حواف دائرية للإطار */
    margin: 0 0 20px auto;        /* الإطار على أقصى اليمين، مسافة أسفل الاسم */
    text-align: center;           /* تمركز النص داخل الإطار */
}

section h1.main-section {
    font-size: 32px;  /* نفس حجم h2 */
    line-height: normal;
    margin: 0 0 20px auto;
    padding: 10px 20px;
    background-color: #028997;
    color: #ffffff;
    display: inline-block;
    border-radius: 6px;
    text-align: center;
}



/* ==========================
   Apply brand color #028997 to ALL footer areas
   Remove old gold accents and white-only footer
   ========================== */

/* 1) Force footer backgrounds to brand color */
footer,
.store-footer,
.footer,
.footer-top,
.footer-main,
.footer-wrapper,
.footer-container,
.sub-footer,
.store-subfooter,
.page-subfooter,
.footer-section,
.page-footer {
  background-color: #028997 !important;
  background: #028997 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  border: none !important;
}

/* 2) Make main text readable (white) */
footer *,
.store-footer *,
.footer * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
  background: transparent !important;
}

/* 3) Links should NOT be gold — use a lighter brand tint on hover */
footer a,
.store-footer a,
.footer a {
  color: #ffffff !important;       /* links default = white for contrast */
  text-decoration: none !important;
}
footer a:hover,
.store-footer a:hover,
.footer a:hover {
  color: #04B3B2 !important;       /* lighter tint of #028997 on hover */
}

/* 4) Icons and social SVGs in footer - white */
footer svg,
footer i,
.store-footer .social-icons svg,
.store-footer .social-icons i {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* 5) Ensure sub-footer (bottom bar) is same brand color but keep text white */
.sub-footer,
footer .copyright,
.footer-bottom,
.store-subfooter {
  background-color: #028997 !important;
  color: #ffffff !important;
}

/* 6) Kill any inline gold color definitions (common in some templates) */
[style*="#FFD700"],
[style*="gold"],
[style*="FFCC00"],
[style*="#ffcc00"] {
  color: inherit !important;
  background-color: transparent !important;
}

/* 7) If theme injects pseudo-elements, override them */
footer::before,
footer::after,
.store-footer::before,
.store-footer::after,
.sub-footer::before,
.sub-footer::after {
  background: none !important;
  content: none !important;
}