/* Add custom CSS styles below */ 
/* =========================================================
   1) المتغيرات والإعدادات العامة
   ========================================================= */

:root {
  --color-primary: #21295a;
  --color-secondary: #fbd161;
  --color-accent: #ffffff;
  --color-white: #fff;
  --color-black: #fff;
    --color-text: #fff;

}
*, ::after, ::before {
    border: 0px solid rgb(33 41 90);
    box-sizing: border-box;
}
*,
*::before,
*::after {

  color: #697ee6;
}

.text-gray-800 {
    
    color: rgb(255 255 255);
}
body {
  font-family: Cairo, sans-serif;
}

html body {
  background-color: #21295a !important;
}

li,
ol,
ul {
  list-style: none;
  text-align: center;
}

.col-sm-4 {
  width: 50%;
  float: right;
  padding-right: 5px;
  padding-left: 5px;
}

.pt-5,
.py-5 {
  padding-top: 3rem !important;
  background: transparent;
}

.visible-xs-block {
  display: block !important;
  padding-top: 4px;
}

 .s-comments-product
 {
    background-color: rgb(33 41 90) !important;}
/* =========================================================
   2) شاشة التحميل والشعار
   ========================================================= */

body::before {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  background:
    var(--color-primary)
    url("https://i.ibb.co/HDzZQX0B/Whats-App-Image-2026-06-18-at-12-28-21-PM.jpg")
    center / 200px no-repeat;
  transform: scale(0);
  animation: logobg 3s;
  z-index: 2147483647;
  pointer-events: none;
}

.salla-theme_1 header.site-header .logo-wrapper .logo img,
.sub-nav-header img {
  content: url("https://i.ibb.co/HDzZQX0B/Whats-App-Image-2026-06-18-at-12-28-21-PM.jpg");
}

.logo img {
  width: auto;
  height: 69px;
  animation: pulsate-bck 1.3s ease-in-out 10s infinite;
}

.salla-theme_1 header.site-header .logo-wrapper .logo img {
  max-height: 60px;
  animation: wiggle 2.5s infinite;
}

.sub-nav-header img {
  display: block;
  width: 163px;
  height: 162px;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
}


/* =========================================================
   3) الهيدر والقوائم والتنقل
   ========================================================= */

.top-navbar {
  display: none;
}

.inner.bg-inherit {
  position: relative !important;
  padding-top: 1rem;
  color: var(--color-white);
  background-color: var(--color-primary);
}

.inner.bg-inherit .header-search {
  justify-content: center !important;
  margin-left: 2rem;
}

.store-header #mainnav .inner.bg-inherit .container div:first-child {
  align-items: center !important;
}

header.sticky {
  background: rgba(255, 255, 255, 0.13);
  border-radius: 0 0 60px 60px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

header #mainnav i.header-btn__icon.icon.sicon-shopping-bag,
header #mainnav i.header-btn__icon.sicon-user-circle {
  border: none;
  background: #f8f8f8;
}

.sub-nav-header {
  background: var(--color-accent) !important;
}

.sub-nav-header p {
  padding: 0 10px;
  color: var(--color-white);
  font-family: unset;
  font-size: 20px;
}

.sub-nav .sub-nav-content {
  border-radius: 30px 0 0 30px;
}

.sub-nav .sub-nav-content .sub-nav-header a {
  color: var(--color-black);
  background: var(--color-white);
}

.sub-nav .main-menu li.sub-menu-header.categories-holder > span {
  color: var(--color-black);
  font-weight: 700;
  text-align: center;
}

.sub-nav .main-menu li.sub-menu-header.categories-holder ul.store-categories li a {
  min-height: 40px;
  margin: 10px;
  padding: 5px 15px !important;
  color: var(--color-secondary);
  background: #ebc5c3;
  border-radius: 12px;
  font-size: 15px !important;
  text-align: center;
}

.sub-nav .main-menu li.sub-menu-header.categories-holder ul.store-categories li a:hover {
  background: linear-gradient(90deg, #f0c9cd 0%, #f0c9cd 100%);
}

.sub-nav .main-menu li#ls_switcher_mobile a::before {
  color: var(--color-secondary);
}

body:not(.salla-theme_6) .main-menu li:not(.sub-menu-header) ul li,
body:not(.salla-theme_6) .main-menu li:not(.sub-menu-header) ul li:hover {
  border: transparent;
  background-color: transparent;
}

.main-menu li > a:hover {
  color: var(--color-white);
}


/* =========================================================
   4) الأيقونات والبحث
   ========================================================= */

.main-content .sicon-heart::before,
.sicon-cart::before,
.sicon-chat-message-alt::before,
.sicon-star::before,
body:not(.salla-theme_6) .main-menu li:not(.sub-menu-header) .icon-credit-card2::before {
  color: var(--color-white) !important;
}

.site-header .sicon-bell::before {
  content: "";
  color: var(--color-white);
}

.sicon-user::before {
  content: "";
  color: var(--color-white);
}

.sicon-search::before {
  content: "";
  color: var(--color-white);
}

.sicon-cart::before {
  content: "";
  color: var(--color-white);
  font-family: fontawesome, sallaicons !important;
}

.sicon-shopping-bag::before {
  content: "\e901";
}

header #mainnav .sicon-user-circle::before {
  content: "\f078";
  color: #666;
}

.sicon-minus::before {
  content: "";
  color: var(--color-black);
}

.sicon-keyboard_arrow_right::before {
  content: "";
  color: var(--color-white);
}

.sicon-keyboard_arrow_left::before {
  content: "";
  color: var(--color-white);
}

.sicon-bag-dollar::before {
  content: "";
}

.sicon-gold-badge::before {
  content: "";
}

.toggle-search {
  padding-top: 0;
  background: linear-gradient(90deg, #f0c9cd 0%, #f0c9cd 100%);
}

input.s-search-input {
  height: 45px !important;
  border-radius: 6px !important;
}


/* =========================================================
   5) السلايدر والبنرات
   ========================================================= */

.main-slider img {
  margin-top: 17px;
  border-radius: 5px !important;
}


.banner img {
  border-radius: 5px !important;
}

.banner--fixed img {
  border-radius: 0 !important;
  background-color: unset !important;
}


/* =========================================================
   6) المنتجات وبطاقات المنتجات
   ========================================================= */

.product,
custom-salla-product-card {
  transition: transform 0.3s ease;
}

.product:hover,
custom-salla-product-card:hover {
  animation: tournemoi 2s;
}

.product {
  border: 2px solid #f1c8ce;
  border-radius: 15px;
}

.product .product-title,
footer .footer-main .store-certificate {
  text-align: center;
}

.product-form {
  padding: 1rem;
  color: var(--color-white) !important;
  background: var(--color-primary);
  border: 1px solid #eee;
  border-radius: 25px;
}

.product-add {
  border: none;
  background: transparent;
}

.form.product-form .total-price {
  color: var(--color-primary);
}

.form-group label {
  margin-bottom: 8px;
  color: var(--color-white) !important;
}

.list--product-fields li.form-group > label {
  margin: 0;
  padding: 0 0 0 10px;
  color: var(--color-white) !important;
  font-size: 15px;
}

.tax-label {
  display: table;
  margin: 3px 0 0;
  color: var(--color-white);
  font-size: 11px;
  line-height: 1;
}

.not-available {
  color: var(--color-black);
}

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
  color: var(--color-black) !important;
}

.owl-carousel .owl-item img {
  border-radius: 25px;
}

body.salla-theme_1 .product .product-footer {
  background:
    linear-gradient(
      to right,
      #f1c8ce 20%,
      var(--color-secondary) 30%,
      #f1c8ce 70%,
      var(--color-secondary) 80%
    )
    0 0 / 500%;
  animation: textShine 5s ease-in-out infinite alternate;
}

body.salla-theme_1 .product .product-footer .product-price,
.product-details__price,
.s-cart-summary-total,
.copyright-text p,
body.font-dinnextltarabic-regular.salla-theme_1
  .section-header
  .section-actions
  .circle-action.button-more,
body.font-dinnextltarabic-regular.salla-theme_2
  .section-header
  .section-actions
  .circle-action.button-more,
i.sicon-menu.text-primary.text-2xl {
  color: var(--color-white);
}


/* بطاقات المنتجات في الثيمات الحديثة */

custom-salla-product-card {
  z-index: 555;
  border: 2px solid var(--color-primary);
  border-radius: 8px;
}

.s-product-card-content {
  padding: 0;
}

.s-product-card-content-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
}

.s-product-card-content-sub {
  display: flex;
  justify-content: center;
  padding: 0 0.5rem;
}

.s-product-card-content-footer,
.s-product-card-content-footer:hover {
  padding: 0.3rem;
  background:
    linear-gradient(
      to right,
      var(--color-primary) 20%,
      var(--color-secondary) 30%,
      var(--color-primary) 70%,
      var(--color-secondary) 80%
    )
    0 0 / 500%;
  border-radius: 0 0 9px 9px;
  animation: textShine 5s ease-in-out infinite alternate;
  animation-timeline: auto;
  animation-range-start: normal;
  animation-range-end: normal;
}

salla-add-product-button .s-button-btn {
  color: var(--color-white);
  border: none;
}

.s-button-primary-outline:hover {
  background: transparent !important;
}

button.s-product-card-wishlist-btn.animated.s-button-element.s-button-icon.s-button-outline.s-button-light-outline.s-button-loader-center {
  background: var(--color-primary) !important;
  opacity: 1 !important;
}

.s-quantity-input-input {
  color: var(--color-primary);
}

.main-content .s-button-light-outline {
  color: var(--color-white) !important;
  background: var(--color-primary) !important;
}


/* =========================================================
   7) التصنيفات والمميزات
   ========================================================= */

/* =========================================================
   9) الأزرار والعروض والويدجت
   ========================================================= */

#wa-widget-send-button,
.promotion-title {
  background-color: var(--color-secondary) !important;
}

.promotion-title {
  border-radius: 10px 0 0 20px !important;
}

.offers-link {
  color: var(--color-white) !important;
  background: #e70909 !important;
  border-radius: 40px !important;
}

.offers-link:hover {
  background: #00ba17 !important;
}

.jWcIXO {
  width: 60px !important;
  height: 60px !important;
  box-shadow: #ffeb3b 0 0 5px 5px !important;
}

.fXBuHm {
  font-family: unset !important;
  font-size: 20px !important;
}

.nyhxm {
  margin: auto;
  padding: 7px 10px;
  font-family: DINNextLTW23-Medium;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
}

body.font-apple .button-more {
  color: var(--color-white);
  font-size: 15px;
  line-height: 34px !important;
}


/* =========================================================
   10) الفوتر
   ========================================================= */

.footer-is-light .store-footer .store-footer__inner
 {
    
  background-color: #21295a !important;
    color: white !important;
}

/* =========================================================
   11) التجاوب مع الشاشات
   ========================================================= */

@media (min-width: 786px) {
  .top-navbar .header-search {
    display: none;
  }

  .inner.bg-inherit .header-search {
    margin: 0 2rem;
  }
}

@media (max-width: 768px) {
  .inner.bg-inherit .header-search,
  .sayHello {
    display: none;
  }

  .store-footer .container {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}


/* =========================================================
   12) الحركات
   ========================================================= */

@keyframes logobg {
  0%,
  20%,
  78% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes tournemoi {
  0% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(5deg);
  }

  100% {
    transform: rotate(0);
  }
}

@keyframes wiggle {
  0%,
  80%,
  100% {
    transform: rotate(0);
  }

  85% {
    transform: rotate(5deg);
  }

  95% {
    transform: rotate(-5deg);
  }
}

@keyframes textShine {
  0% {
    background-position: 0 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}
section.s-block.s-block--fixed-banner .container{
  max-width:100% !important;
  padding:0  !important;
  margin:0 !important;
}
.banner--fixed img {
  border-radius: 0 !important;
  background-color: transparent !important;