@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;700;900&display=swap');

body, html {
    font-family: 'Cairo', sans-serif;
    background-color: white;
    color: black;
    /*margin: 0;*/
    padding: 0;
    width: 100%;  /* Ensure full width */
    height: 100%; /* Ensure full height */
    
  margin: 0;

  box-sizing: border-box;

}

/* Header styles */
#custom-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #1B1919;
    padding: 10px 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-logo {
    max-width: 100px;
    height: auto;
}

.header-button {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 10px;
    transition: background-color 0.3s;
    margin: 0 5px;
}

.header-button:hover {
    color: #DDBCB0;
}

.header-button img {
    max-width: 20px;
    height: auto;
    margin-right: 5px;
    transition: transform 0.3s ease;
}

.header-button:hover img {
    transform: scale(1.1);
}

.header-spacer {
    flex-grow: 1;
}

/* Burger menu */
.burger-menu {
    display: none; /* Hidden by default on larger screens */
    cursor: pointer;
    font-size: 24px;
    color: white;
    padding: 10px;
}

/* Side menu */
.side-menu {
    position: fixed;
    top: 0;
    right: -250px;
    height: 100%;
    width: 250px;
    background-color: white;
    /*color: white;*/
    box-shadow: -0.1px 0 5px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    /*padding: 20px;*/
    z-index: 1800;
    margin-top: 5px 0;
}

.side-menu.show {
    right: 0; /* Slide in when visible */
}

.side-menu-button {
    color: black;
    text-decoration: none;
    padding: 15px 10px;
    margin: 0px 0;
    border-bottom: 0.3px solid #929191;
    transition: background-color 0.3s;
}

.side-menu-button:hover {
    background-color: #F5F5F5;

}

/* Close button */
.side-menu .close-btn {
    align-self: flex-end;
    color: white;
    font-size: 24px;
    cursor: pointer;
    margin-bottom: 20px;
}

.header-logo {


        order: 5;!important; /* Maintain order */
       
    }


@media (max-width: 768px) {
#custom-header .header-button.burger-menu-button {
 display: none !important;
        /* Ensure the rule is applied */
    }
    #custom-header {
        display: flex;
        align-items: center;
    
    padding: 10px;
        justify-content: space-between; !important; /* Push elements to the sides */
        flex-wrap: nowrap;
    }
  .header-logo {
    margin-left: calc(16vw);

        order: 1;!important; /* Maintain order */
        flex-shrink: 0; /* Prevent logo from shrinking */
    }

    .burger-menu {
    margin-left: calc(20vw);
        display: block; /* Show burger menu */
        order: 0; !important;/* Keep burger menu on the left */
       /* margin-left: auto; /* Push logo to the center */
    }

    .header-button {
        order: 3; !important;/* Keep account and cart icons order */
        margin-right: auto; /* Push buttons to the right */
        display: flex;
        gap: 10px; /* Add space between the account and cart icons */
    }

    .header-button:nth-child(2) {
        order: 2; !important;/* Ensure the cart icon comes after account */
    }
    }










/* Content styles */

// 🚀 🚀 🚀 🚀 🚀 display the landing logo 

/*
.center-logo {
    display: block;
    margin: 0 auto;
    width: 100px; 
    height: auto; 
    padding-top: 20px; 
}


#text-container {
  font-weight: 500; !important;
    font-size: 18px; !important;    
    text-align: center;
    padding: 20px;
    color: #3D2B21;
}



#discover-more-button {
    display: block;
    margin: 40px auto;
    background-color: #3D2B21;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}
*/





.center-container {

    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    padding-left: 2vw; /* Add some dynamic spacing on the left */
    padding-right: 2vw; 
}

.center-logo {
    display: block;  /* Make the image a block element */
    margin: 20px auto; /* Automatically add equal margin on the left and right */
    max-width: 100px;  /* Control the size of the logo */
    height: auto;      /* Maintain the aspect ratio */
}











#text-container {
    font-weight: 500;
    font-size: 18px;
    color: black;
    margin-bottom: 20px; /* Space between text and button */
}



@media (min-width: 868px) {
.discover-more-button {
    background-color: #3D2B21;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}
}

@media (max-width: 768px) {
.video-container {
  position: relative;
  height: 80vh; 
  overflow: hidden;
}

.background-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
background: linear-gradient(
  to top,
  white 5%,
  rgba(255, 255, 255, 0.95) 10%,
  rgba(255, 255, 255, 0.85) 15%,
  rgba(255, 255, 255, 0.75) 20%,
  rgba(255, 255, 255, 0.65) 25%,
  rgba(255, 255, 255, 0.55) 30%,
  rgba(255, 255, 255, 0.45) 35%,
  rgba(255, 255, 255, 0.35) 40%,
  rgba(255, 255, 255, 0.25) 45%,
  rgba(255, 255, 255, 0.1) 50%
);


  color: black; /* Adjust for readability */
  text-align: center;
  padding: 1rem;
}

.logo {
  width: 80px; /* Adjust size as needed */
 margin-top: 200px;!important;
}

#text-container {
  font-size: 1rem;
   margin-top: 1rem;
}

#discover-more-button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  background-color: black;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
   margin-top: 1rem;
}

#discover-more-button:hover {
  background-color: #3D2B21;
}

}






.horizontal-line {
    height: 0.5px; /* Line thickness */
    background-color: black; /* Line color */
    width: 100%; /* Full width of the screen */
    margin: 40px 0; /* Space above and below */
}

#products-label{
font-weight: 600; !important;
    font-size: 30px; !important;    
    text-align: center;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    color: black;
}

@media (min-width: 768px) {
#product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 20px; 
  padding: 20px; 
  width: 100%; 
  justify-items: center; 
  margin: 0 auto; 
}


#product-card {
  background-color: #f8f8f8;
  border: 1px solid #ddd; 
  border-radius: 8px; 
  padding: 20px; 
  text-align: center; 
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
  width: 100%; 
  max-width: 350px; 
}
}
/*

@media (max-width: 330px) {
  #product-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 15px; 
  }
}

.product-card  {
    width: 100px;
    height: auto;
    display: block;
    margin-top: 0px
}

    #product-grid > * {  transform: scale(1);
       
    }
*/
}

/*
@media (max-width: 768px) {
    #product-grid {
        grid-template-columns: repeat(1, 1fr); 

        gap: 20px; 

        padding: 10px; 

    }

    .product-card {
        width: 100%;

        max-width: 400px; 

        margin: 0 auto; 
        padding: 20px; 
        height: auto; 
        display: block;
        margin: 0 auto; 

       
    }
}*/






@media (max-width: 768px) { /* For screens smaller than 768px */
    #product-grid {
        grid-template-columns: repeat(1, 1fr); /* 1 column for smaller screens */
        gap: 6px !important; /* Smaller gap */
        padding: 5px; /* Adjust padding if needed */
    }
    .product-card {
        transform: scale(0.9); 
      
}

.product-card img{
       width: 100%;
       height: auto;
}

}



/*🌞🌞🌞🌞 the grid was good b4 the above code 🌞🌞🌞🌞🌞🌞*/

#logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
 /*   margin-top: 20px;  Space above the logo */
  /*  padding: 20px; /* Padding around the logo */
    width: 100%; /* Ensure the container spans the full width */
    box-sizing: border-box; /* Include padding within total width and height */
}



/* Resize the logo image to a smaller size */
#logo-container img {
    max-width: 10px; /* Limit logo width to 150px (you can adjust this value) */
    width: auto; /* Ensure the image does not stretch */
    height: auto; /* Maintain aspect ratio */
 transform: scale(0.5);
}

/* Center the text container */
#text-container {
    text-align: center;
    /*padding: 20px; /* Add padding around the text */
  /*  margin-top: 20px; /* Space between logo and text */
}

#discover-more-button {
    background-color: #3D2B21;
    color: white;
    font-size: 16px;
    padding: 8px 84px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    display: block;
    margin: 16px auto;  
    text-align: center;
  }
  
@media (max-width: 768px) {
#discover-more-button {
    background-color: #000000;
    color: white;
    font-size: 16px;
    padding: 8px 84px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    display: block;
    margin: 16px auto;  
    text-align: center;
  }
}
#discover-more-button:hover {
    background-color: #5A3C2D;
}





#products-label{
font-weight: 400; !important;
    font-size: 30px; !important;    
    text-align: center;
    margin-top: 30px !important;
    color: black;
}















/*the gap in the products grid is hereeeeee v*/
/*
#product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 80px;
    padding: 80px;
}



*/

.bg-inherit{
    background-color: #1B1919; 
}

.header-btn__icon sicon-user-circle {
 color: #DDBCB0 !important; 
 
}



.landing-text-element{
  background-color: #DDBCB0;
    padding: 20px;
}

.store-header .!hidden.lg\:!block.root-level.lg\:!inline-block:hover {
    color: #DDBCB0 !important; /* Set color to #DDBCB0 when hovering */
}

.top-navbar{
display: none;
}

header {
    background-color: #1B1919;
    color: #fff;
}

/* Add the Arabic text 
.store-header::after {
    content: "يتيح لك الفرصة لتجربة منتجات صُنعت بحب، موقعك المتكامل لكل احتياجاتك اليومية في مكان واحد";
    font-size: 18px;
    color: #333;
 margin: 60px 0 80px;
    direction: rtl;
    font-family: 'Arial', sans-serif;
    white-space: pre-wrap;

}
*/

/*the gap in the products grid is hereeeeee ^*/








/* Add hover effect for the button */
.store-header + .custom-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}


/*
.logo {
    margin-left: auto; 
}

.product-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 20px !important;
    background-color: white !important;
    border-radius: 10px !important;
}



.product-card {
  /*  border: 1px solid #ddd; /* Optional: Border for debugging */
   /* overflow: hidden;
    text-align: center;
}

.product-card:hover {
   /* transform: translateY(-2px); 
  /*  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); 
}

.product-card img {
    width: 100%; 
    border-bottom: 1px solid #ddd; 
}


@media (max-width: 468px) {
    .product-grid {
        grid-template-columns: 1fr; 
    }
}

*/














.landing-page .s-cart-summary-total{
display: none;
}

 .store-header{
display: none;
}

.footer{
margin: 0 auto !important;
}







#new-text-container {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin: 20px 0; /* Add space around the text */
    margin-buttom: 100px;
}





 .landing-page .s-product-card-entry s-product-card-vertical s-product-card-out-of-stock, 
 
 .landing-page .s-product-card-image, 
 
 .landing-page .s-product-card-wishlist-btn animated not-added un-favorited s-button-wrap hydrated,
 
.landing-page .s-product-card-wishlist-btn animated not-added un-favorited s-button-element s-button-icon s-button-outline s-button-light-outline s-button-loader-center,

 .landing-page .s-button-text,
 
 .landing-page .sicon-heart,
 
 .landing-page .s-product-card-content, 
 
 .landing-page .s-products-list-wrapper s-products-list-vertical-cards,
 
 .landing-page .s-block__title
 
 , .landing-page .s-products-list hydrated{

display: none;
}

 .landing-page.s-products-list-wrapper,
.sponge-page .breadcrumbs w-full py-5, .sponge-page .s-breadcrumb-wrapper, .s-breadcrumb-arrow, .s-breadcrumb-item{
display: none;
}









/*side slide sus area end*/


/* Style for the new product grid container */
#new-product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    gap: 20px; /* Gap between the cards */
    justify-content: center; /* Center the cards horizontally */
    margin-top: 50px;
}
@media (max-width: 868px) { /* For screens smaller than 768px */
.new-product-name, .new-product-price, .new-text-container , .product-grid{
display: none;
}
    #new-product-grid {
        grid-template-columns: repeat(5, 1fr); /* 1 column for smaller screens */
        gap: 2px !important; /* Smaller gap */
       
    }
    .new-product-card {
        transform: scale(0.9); 
    }
.new-product-name, .new-product-price, .#new-text-container , .product-grid{
display: none;
}





}



/* Style for individual product cards */
.new-product-card {
    text-align: center;
    width: 100%; /* Set a fixed width for the cards */
}



.new-product-card img {
    width: 100%; /* Make the image fit the card */
    height: auto;
}


.new-product-name, .new-product-price {
    font-family: 'Cairo', sans-serif; /* Use Cairo font */
    color: black; /* Black font color */
    margin-top: 5px;
    text-align: left; /* Align text to the left */
   /* padding-left: 10px; 
    
/* Style for product name and price */
.new-product-name {
    font-weight: 900; !important;
    font-size: 18px; !important;
}

.new-product-price {
    font-weight: 400; !important;
    font-size: 14px; !important;
}




/*side slide sus area end*/









.etLabel{
font-family: 'Cairo', sans-serif; /* Use Cairo font */
    color: black; /* Black font color */
    background-color: blue; /* Black font color */

}
/*
.lg:col-span-2, .hydrated, .container grid grid-col-1 lg:grid-cols-6 gap-8 lg:gap-6, .s-contacts-icon, .container*/
.s-contacts-list s-contacts-list-vertical{

display: none;
}
 .max-w-sm{
display: none;

}
.s-products-list-wrapper s-products-list-vertical-cards {
    visibility: hidden; /* Hides the footer, but retains its space in the layout */
    position: absolute; /* Moves the footer out of the normal flow */
    top: -9999px; /* Moves it out of view completely */
}


#180380602 {
    border-radius: 8px; /* Adjust the value as needed */
}

#s-button-wrap{
border-radius: 8px;
} 
 
.mt-5.w-full.sticky-product-bar__btn.s-add-product-button-with-sticky-bar.hydrated {
    border-radius: 10px !important;
     background-color: #f4f4f4; /* Example background color */
    padding: 10px 20px;  
}


.product__description, .h2, .article{
color: black;
}







/*products page buttons*/
 .hydrated, .s-button-element.s-button-primary-outline, .s-product-card-entry s-product-card-vertical, .s-product-card-image, .s-product , .w-full, .s-product-card-image-cover{
 background-color: blue;
  border-radius: 2px; !important;
}


.swiper-wrapper s-slider-swiper-wrapper, .s-reviews-testimonials-slider s-slider-wrapper testimonials-slider s-slider-controls-outer s-slider-has-notitle s-slider-v-centered s-slider-horizontal hydrated{
display: none;
}