/* Add custom CSS styles below */ 
.index{
  background: #001228;
}
.main-menu .sub-menu {
  background-color: rgb(1, 18, 39);
  color: rgb(255, 255, 255);
}
/* Target the container inside this specific section to make it full width */
.s-block--fixed-banner.wide-placeholder .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Optional: Ensure the section itself has no constraints */
section.s-block.s-block--fixed-banner.wide-placeholder {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}
/* 
   Salla Product Card Customization
   1. Transparent background
   2. Center-aligned content
   3. Custom colors for Title, Price, and Button
*/

/* Card Container: Transparent & Centered */
.index .s-product-card-entry {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
    padding-bottom: 15px !important;
}

/* Internal Content Wrappers: Force Centering */
.index .s-product-card-content,
.index .s-product-card-content-main,
.index .s-product-card-content-sub,
.index .s-product-card-content-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* Product Title: White */
.index .s-product-card-content-title, 
.index .s-product-card-content-title a {
    color: #FFFFFF !important;
    font-weight: bold !important;
}

/* Product Price: Gold (#B79162) */
.index .s-product-card-sale-price,
.index .s-product-card-sale-price h4,
.index .s-product-card-sale-price i {
    color: #B79162 !important;
}

/* Button: White Text and Border */
.index .s-product-card-content-footer .s-button-element {
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    background-color: transparent !important;
    border-width: 1px !important;
    border-style: solid !important;
    transition: all 0.3s ease;
}

/* Optional: Button Hover Effect */
.index .s-product-card-content-footer .s-button-element:hover {
    background-color: #FFFFFF !important;
    color: #000000 !important;
}

/* Image Container: Transparent & Centered */
.index .s-product-card-image {
    background-color: transparent !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 10px !important;
}
.index .s-slider-block__title-right{
  color: #EED88E;
  font-size: 24px;
}


.footer-is-light .store-footer .store-footer__inner {
  background: linear-gradient(to right, rgb(3, 27, 54), rgb(1, 18, 39), rgb(2, 21, 47));
    color: white;
}

.footer-is-light .store-footer {
  background: linear-gradient(to right, rgb(3, 27, 54), rgb(1, 18, 39), rgb(2, 21, 47));
}


@media (min-width: 1024px) {
 .index header.store-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    background-color: transparent !important;
  }
  
  #mainnav {
    background-color: rgba(1, 23, 50, 0.5) !important; /* Hex 011732 with transparency */
  }

  #mainnav, 
  #mainnav a, 
  #mainnav span, 
  #mainnav i,
  #mainnav .navbar-brand,
  #mainnav .s-cart-summary-total,
  #mainnav .s-cart-summary-count,
  #mainnav .s-user-menu-login-btn {
    color: #ffffff !important;
  }
  
  #mainnav svg path {
    fill: #ffffff !important;
  }
.fixed-pinned
  {
  background-color: rgba(1, 23, 50, 1) !important;
}
  .top-navbar .s-search-input {
    background-color: #0f1f33;}
}

.index .s-product-card-image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}
@media screen and (max-width: 768px) {
 /* Update background and icons (from previous step) */
#mainnav {
  background-color: #011227 !important;
}

#mainnav i, 
#mainnav svg, 
#mainnav .icon,
#mainnav [class*="icon"] {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Update price and cart text to white */
#mainnav .s-cart-summary-total,
#mainnav .s-cart-summary-count,
#mainnav .s-cart-summary-content {
  color: #ffffff !important;
}
}