/*الصوره تاخد العرض بالكامل*/
/* الصورة تاخد الشاشة بالكامل في الديسكتوب */
.fullscreen-banner .container,
.fullscreen-banner .image-banners-container {
  width: 100vw !important;
  max-width: 100vw !important;
  padding: 0 !important;
  margin: 0 auto !important;
}
.fullscreen-banner .image-banners-container {
  height: 100vh !important;
  position: relative !important;
}
.fullscreen-banner .image-banners-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: transform 0.3s ease;
}
.fullscreen-banner .banner-container {
  border-radius: 0 !important;
}
@media (max-width: 768px) {
  .fullscreen-banner .image-banners-container {
    height: 50vh !important; 
    overflow: hidden;
    position: relative;
  }
  .fullscreen-banner .image-banners-container img 
  {
    transform: scale(1.1); 
    object-position: center center;
    object-fit: cover;
  }
}

  /* تغيير لون الهيدر */ 
#mainnav {
    background-color: rgb(33, 33, 56);
}
.header-btn__icon {
    color: var(--color-primary);
}
.mobile-menu a {
    color: var(--color-primary);
}
.mobile-menu a span:hover {
    color: rgb(241, 231, 227);
}

.s-cart-summary-total {
    color: var(--color-primary);
}

/*جزء اضف الي السلله*/
.form.product-form,
.form.product-form section {
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity, 1));
}
.s-button-element.s-button-primary {
  background-color: rgb(75, 78, 105) !important;
  color: white !important;
  border: none !important;
}
.s-add-product-button-mini-checkout .s-add-product-button-mini-checkout-content {
  color: rgb(75, 78, 105) !important;
  border-radius: 6px;
  padding: 10px;
}
.s-add-product-button-mini-checkout{
    border: 1px solid rgb(75, 78, 105);
    border-radius:15px;
}

/* جزء تنسيق المنتجات في الصفحه الرئيسيه */
/* زر "إضافة للسلة" */
.s-button-element.s-button-outline.s-button-primary-outline {
  background-color: rgb(75, 78, 105) !important;
  color: white !important;
  border-color: rgb(75, 78, 105) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease-in-out;
}
.s-button-element.s-button-outline.s-button-primary-outline:hover {
  background-color: white !important;
  color: rgb(75, 78, 105) !important;
  border-color: rgb(75, 78, 105) !important;
}
.s-button-element.s-button-icon.s-button-light-outline {
  background-color: rgb(75, 78, 105) !important;
  border-color: rgb(75, 78, 105) !important;
  color: white !important;
  transition: all 0.3s ease-in-out;
}

.banner-container .absolute.bottom-0.left-0 {
    display: none !important;
}
.banner-container:hover img {
  transform: none !important;
}


/* التحكم في قسم مميزات المتجر */ 
section .container .container .flex .flex-col {
  background-color: white; 
  padding: 20px; 
  border-radius: 15px; 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
  margin-bottom: 20px; 
  text-align: center;
  width: 30%;
  transition: all 0.3s ease;

}
section .container .container .flex .flex-col h3 {
  font-size: 1.25rem; 
  color: #21213b; 
  font-weight: 600; 
}
section .container .container .flex .flex-col p {
  color: #21213b; 
  font-size: 1rem; 
  margin-top: 10px; 
}
section .container .container .flex .flex-col i {
  font-size: 3rem;
  margin-bottom: 15px; 
  padding: 20px; 
  background-color: #F1E7E3; 
  border-radius: 50%; 
}
section .container .container .flex {
  gap: 20px;
  display: flex; 
  justify-content: center;
  flex-wrap: wrap; 
}
.container .container .flex .flex-col:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
   } 
  @media (max-width: 800px) {
  section .container .container .flex .flex-col {
    width: 45%; 
  }
}
@media (max-width: 576px) {
  section .container .container .flex .flex-col {
    width: 100%; 
  }
}

/* التحكم في قسم الفوتر */ 
.store-footer .flex .sicon-instagram2,
.store-footer .flex .sicon-tiktok ,
.store-footer .flex .sicon-iphone,
.store-footer .flex .sicon-mail,
.store-footer .flex .sicon-whatsapp2  {
  width: 40px;
  height: 40px; 
  background-color: #fff; 
  border-radius: 30%; 
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #998B97; 
  transition: all 0.3s ease; 
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
  color: #998B97;
}
.store-footer .flex .sicon-instagram2:hover,
.store-footer .flex .sicon-tiktok:hover ,
.store-footer .flex .sicon-iphone:hover,
.store-footer .flex .sicon-mail:hover,
.store-footer .flex .sicon-whatsapp2:hover {
  background-color: #f1f1f1; 
  border-color: #F1E7E3; 
  transform: scale(1.1); 
}

.store-footer .flex span {
  display: none ;
}    
    
@media (max-width: 640px) {
  .image-with-text-wrapper {
    display: grid !important;
    grid-template-columns: 1fr !important; 
    gap: 1rem !important;
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .image-with-text-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 1rem !important;
  }
}

/* التحكم في صورة واجهة المتجر */ 
#myFixedBanner .banner img {
  width: 100%; 
  height: 150px; 
  object-fit: cover; 
}
@media (max-width: 640px) {
  #myFixedBanner .banner img {
    width: 100%; 
    height: 170px; 
  }
}
@media (min-width: 641px) and (max-width: 800px) {
  #myFixedBanner .banner img {
    width: 100%;
    height: 240px; 
  }
}
@media (min-width: 800px) {
  #myFixedBanner .banner img {
    width: 100%; 
    height: auto; 
  }