@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playwrite+DK+Loopet:wght@100..400&display=swap');

body{
padding: 0;
margin: 0;
background: #e2e2e249;
}
*{
      font-family: "Mulish", sans-serif;

}
.font-d{
      font-family: "Playwrite DK Loopet", cursive;

}
.button-icon{
    padding: 0px 13px;
    box-sizing: border-box;
    color: #fff;
    background: #039a42;
    border-radius: 10px;
    border: none;
    font-size: 18px;
    margin: 0px 5px;
    cursor: pointer;
    transition: 0.2s;
}
.button-icon:hover{
        background: #026b2e;

}
.top-header{
    width: 100%;
    background: #000;
    color: rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
    padding: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.top-header i{
   color: orange;
}
.d-flex{
    display: flex;
}
.gap-10{
    gap: 10px;
}
.align-center{
    align-items: center;
}
.color-blueviolet{
    color: blueviolet;
}
.bold{
    font-weight: bold;
}
header{
    box-sizing: border-box;
    padding: 10px ;
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    background: #fff;

}
.card-shadow{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.input-1{
    padding: 14px;
    box-sizing: border-box;
    border: 1px solid rgba(0,0,0,0.3);
    background: rgba(216, 216, 216, 0.3);
    border-radius: 10px;
    min-width: 300px;
    outline: none;
}

.size-13{
    font-size: 13px;
}

.gap-10{
    gap: 10px;
}

.button-simple{
    border: 1px solid rgba(182, 182, 182, 0.496);
    background:#fff;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}
.button-simple:hover{
    background:#b9b8b8;
}

.welcomes{
    width: 85%;
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 10px;
    max-height: 50vh;
   
}

.welcomes .categories{
    width: 100%;
    font-size: 14px;
   


}
/* .welcomes .categories .ul{
  overflow-y: auto;
        max-height: 40vh;


} */
.welcomes .slider-welcome{
overflow: hidden;
   
}
.container{
    display: flex;
    margin: 10px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.categories{
    background: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  width: max-content;
  padding: 10px 20px;
  box-sizing: border-box;
  border-radius: 10px;
  position: relative;

}
.li-po{
    position: relative;
}
.li-po:hover .souscategory{
    display: flex;
}
 .souscategory{
    display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  width: 300px;
  box-sizing: border-box;
  border-radius: 10px;
  z-index: 999;
  max-height: 400px;
  overflow-y: auto;
}
 .souscategorymenu{
 
  max-height: 400px;
  overflow-y: auto;
}
.categories .souscategory li{
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
font-size: 12px;
}
.categories ul{
list-style: none;
margin: 0;
padding: 0;
width: 100%;

}
.categories ul li{
padding: 10px;
box-sizing: border-box;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
transition: 0.2s;
cursor: pointer;

}
.categories ul .li-po:hover{
    background: #e3e3e362;
    color: rgb(0, 55, 174);
}
.li-po{
    display: flex;
    align-items: center;
}
.li-s{
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}
.li-s i{
    font-size: 20px;
}
.categories #li-ch:hover{
  color: #000000;
  background: #e3e3e362;
}

.slider-welcome{
    width: 100%;
    max-height: 350px;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
            position: relative;

      

}

swiper-container {
      width: 100%;
      height: 100%;
     
    }

    swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

.explore{
    z-index: 999;
    position: absolute;
    top: 0;
}
.header-cart{
    display: flex;
    align-items: center;
    gap: 10px;
}
.header-cart #a{
    border: 1px solid #98989880;
    color:rgba(42, 42, 42, 0.825) ;
    border-radius: 5px;
    padding: 10px;
    transition: 0.2s;
    cursor: pointer;
}
.header-cart #a:hover{
    border: 1px solid #343434ae;
    color:rgb(0, 0, 0) ;
 
}
.image-s{
    position: relative;
}
.partners{
    width: 80%;
}
.partners .cards{
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 10px;
}
.partners .cards .card{
     box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
     background: #fff;
     box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
     height: 150px;
}

.menu{
    position: fixed;
    top: 0px;
    right: 0px;
         box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
background: #fff;
    z-index: 999;
    
    height: 100vh;
    width: 0;
    transition: 0.2s;
    overflow-y: auto;
}

.close-btn{
    cursor: pointer;
}

body.menuactive .menu{
width: 40%;
}

.custom-pagination {
    margin-top: 2rem;
    text-align: center;
    font-family: sans-serif;
}

.custom-pagination .pagination {
    display: inline-flex;
    gap: 4px;
}

.custom-pagination .page-item {
    margin: 0;
}

.custom-pagination .page-link {
    color: #333;
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.3s;
}

.custom-pagination .page-link:hover {
    background-color: #f5f5f5;
}

.custom-pagination .page-item.active .page-link {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}
.custom-pagination ul{
    list-style: none;
}

.custom-pagination .page-item.disabled .page-link {
    color: #aaa;
    pointer-events: none;
}
.menu .heade-menu{
  display: flex;
  align-items: center;
  justify-content: space-between; 
  padding: 10px;
  box-sizing: border-box;
}
.menu .heade-menu i{
padding: 5px;
color: white;
background: red;
border: none;
font-size: 18px;
border-radius: 5px;

}
.menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    
}
.menu ul li{
box-sizing: border-box;
font-size: 16px;
}
.menu ul .li-po-menu{
    width: 100%;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 10px 15px;


}
.menu ul .li-m-menu{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.menu ul .li-s-menu{
   display: flex;
   align-items: center;
   gap: 10px;
 

}
.menu ul .li-sumi{
   margin: 10px 0px 0px 0px;
}
.menu ul .li-sumi li{
    padding: 5px 15px;
  background: rgba(222, 222, 222, 0.49);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);

  width: 100%;

}
.menu h2 i{
font-size: 20px;
padding: 10px;
}
.partners .cards .card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.products{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 10px;
    width: 90%;

}
.products .product{
   display: flex;
   flex-direction: column;
   gap: 10px;
   text-align: center;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
        transition: 0.2s;
        padding: 10px;
        border-radius: 10px;
        background: #fff;
        cursor: pointer;

}



.product-title {
    display: -webkit-box; /* Required for line clamping */
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical; /* Vertical text flow */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add "..." if text exceeds */
    max-height: 3em; /* Fallback (adjust based on line-height) */
    line-height: 1.5em; /* Recommended for consistent clamping */
}
.products .product:hover{
    transform: scale(1.05);
}
.products .product img{
    width: 80%;
    height: 200px;
    object-fit: contain;
}

.btn {
padding: 10px 15px;
box-sizing: border-box;
border: none;
border-radius: 9px;
cursor: pointer;
transition: 0.2s;
}
 a{
    text-decoration:none ;
    color: #000;
}
.btn-primary{
color: #fff;
background: rgb(0, 146, 225);
}
.btn-primary:hover{
color: #fff;
background: rgb(0, 114, 175);
}

.desc{
    width: 70%;
}
.desc span{
    color: #000000c7;
}

.insh{
    display: grid;
    justify-content: center;
    text-align: center;
    grid-template-columns: repeat(3,1fr);
    width: 80%;
    gap: 40px;
}
.insh .car i{
   font-size: 50px;
   color: orange;
}


footer{
    margin-top: 40px;
    padding: 13px;
    box-sizing: border-box;
    display: flex;
    background: #fff;
    border-top: 1px solid rgba(154, 154, 154, 0.1);
    gap: 50px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    border:rgba(0, 0, 0, 0.1) ;
    
}

.a-hover{
    text-decoration:dashed;
}
.a-hover:hover{
    color: orange;
}

.details-cart{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    border:rgba(0, 0, 0, 0.1) ;
    background: #fff;
    width: 80%;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 10px;
}
.cart-products{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cart-product{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    border:rgba(0, 0, 0, 0.1) ;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
}
.cart-product .img img{
   width: 100px;
   object-fit: contain;
}
.btns-qty {
    display: flex;
    align-items: center;
    gap: 10px;
}
.btns-qty button{
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: none;
    color: #fff;
    background: #039a42;
    font-size: 20px;
   
}

.flex 

{
        display: flex;

}

.flex-end{
    justify-content: end;
}

.btn-orange{
    background: orangered;
    color: #fff;
}
.btn-orange:hover{
    background: rgb(167, 45, 0);
    color: #fff;
}


.input-2{
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    outline: none;
}

.form-checkout{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 50%;
    margin: 20px;
    padding: 20px;
    background: #fff;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;

}

.btn-success{
    color: #fff;
    background: #039a42;
}
.btn-success:hover{
    color: #fff;
    background: #026029;
}


.detailsofproduct{
    display: grid;
    grid-template-columns: repeat(2,1fr);
      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    border:rgba(0, 0, 0, 0.1) ;
    gap: 10px;
    padding: 20px;
    margin: 20px;
    box-sizing: border-box;
}
 .imagesslide{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
 .imagesslide #showimage{
    width: 50%;
    object-fit: contain;
}
 .imagesslide .imgs{
    display: flex;
    gap: 10px;
    align-items: center;
 }
 .color-gray{
    color: gray;
 }
 .imagesslide .imgs img{
   width: 50px;
   height: 50px;
   object-fit: cover;
     box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    border:rgba(0, 0, 0, 0.1) ;
    transition: 0.2s;
    cursor: pointer;
}

 .imagesslide .imgs img:hover{
transform: translateY(-4px);
}

.bottom-header{
    width: 100%;
    background: #fff;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        padding: 10px;
        box-sizing: border-box;
        display: none;

}
.bottom-header .search-box {
    width: 100%;
 

}
.w-400{
    width: 400px;
}
.logop{
    width: 200px;
}
@media screen and (max-width:1000px){
.products{
    grid-template-columns: repeat(4,1fr);
  

}
.desc{
    width: 80%;
    text-align: center;
}
.welcomes{
    width: 95%;
}
.partners .cards{
    grid-template-columns: repeat(4,1fr);
}
}
@media screen and (max-width:800px){
.products{
    grid-template-columns: repeat(3,1fr);
  

}
.welcomes{
    width: 95%;
        grid-template-columns: 100%;


   
}
.detailsofproduct{
    grid-template-columns: repeat(1,1fr);
 
}
.desc{
    width: 90%;
}
.partners .cards{
    grid-template-columns: repeat(3,1fr);
}
.welcomes .categories{

    display: none;

   
}
}
@media screen and (max-width:600px){
    body{
        font-size: 12px;
    }
    .form-checkout{

    width: 80%;
    }
    header{

    justify-content: space-between;

}
    .bottom-header{
        display: flex;
    }
    .display-min-600{
        display: none;
    }
.products{
    grid-template-columns: repeat(2,1fr);
  

}
.partners .cards{
    grid-template-columns: repeat(2,1fr);
}

.partners{
    width: 100%;
}
footer{
  flex-direction: column;
  text-align: center;
  align-items: center;
}
.insh{
  
    grid-template-columns: repeat(1,1fr);
  
}
body.menuactive .menu{
width: 80%;
}
.logop{
    width: 100px;
}
 .imagesslide #showimage{
    width: 70%;
    object-fit: contain;
}
.top-header{

    font-size: 0.6rem;

}
}