body{
    margin: 0;
    padding:0;
    background-color: white;
    font-family: 'Poppins', sans-serif;;
    overflow-x: hidden;
    min-height: 100vh !important;
    font-family: 'Cairo', sans-serif;
}
/*------------------------------------------------ Styling the header -----------------------------*/
/*------------------------------------------------ Styling the nav -----------------------------*/
nav{
    display:flex;
    width:100%;
    
    /* background-color: rgba(129, 169, 221, 0.253); */
    /* background:linear-gradient(to right,rgba(55, 105, 179, 0.562),white); */
    background-color: rgb(23, 99, 150);
    justify-content: space-around;
    align-items: center;
    font-family: 'Cairo', sans-serif;
    
}
nav img.logo{
    width:11%;
    position: relative;
    left:-3%;
    height: 8vh;
    align-self: center;
    /* padding: 5px; */
    margin:5px ;
    /* border: 1px double white ; */

    
}
nav img{
    width:1.5rem;
    height: 1.5rem;
    
}
.commands > img:nth-child(1){
  width:1.8rem;
  height: 1.8rem;
 
  transform: translateY(-0.2rem);
  
}
nav div.search{
    background-color: white;

    width:50%;
    height:3rem;
    align-self: center;
    display: flex;
    flex-direction: row-reverse;
    border-radius: 5px;
    border:1px solid rgb(194, 194, 194);
    justify-content: space-around;
    align-items: center;
}
nav div.search input{
    /* background-color: brown; */
    width:85%;
    height:2rem;
    border:none;
    outline:none;
    border-radius: 5px;
}
nav div.search img{
    /* background-color: rgb(55, 104, 179); */
    padding:0.7rem;
    padding-top: 0.8rem;
    transform: translateX(0.7rem);
    /* border-radius: 5px; */
    width:1.2rem;
    height:1.2rem;
    
   
}
nav .langage{
    width:1.5rem;
    height:1.5rem;
    font-size: 8px;
    color:#0a57fd;
    border: 1px solid #0a57fd;
    background-color: white;
    text-align: center;
    
}
nav .langage:hover{
    
    background-color: rgb(232, 245, 255);
}
nav .commands{
    background: transparent;
    display: flex;
    gap:1rem;
    width:10%;
    transform: translateX(-2rem);
    justify-content: space-between;
}
.commands img{
    margin-top: 0.2rem;
}
/* .cart{
    margin-top: -0.4rem;
    height:2.3rem;
} */
.commands button{
    margin-top: 0.3rem;
}


/*------------------------------------------------ Styling the categories -----------------------------*/
.categories{
    width:100%;
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(80px,1fr)) ;
    justify-content: center;
    align-items: center;
    font: 1.1rem arial ;
    color:gray;
    transition: background-color 0.3s ease-in-out;
    position: relative;
    /* border-bottom: 1px solid rgb(218, 218, 218); */
    box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
    /* transform: translateX(2%); */
    /* background: linear-gradient(to right,rgba(55, 105, 179, 0.322),white); */
}


.categories p {
    cursor: pointer;
    padding: 0.5rem;
    /* border-radius: 12px; */
    font-size: 0.9rem;
    transition: color 0.4s ease-in-out;
    position: relative;
    z-index: 1;
    margin:0.3rem 0;
    font-family: 'Cairo', sans-serif;
}

.categories p.focused {
    /* background-color: rgb(55, 104, 179); */
    color: white;
    transition: background-color 2s ease-in-out;
    text-align: center;
}

.categories .indicator {
    position: absolute;
    height: 100%;
    /* border-radius: 12px; */
    background-color: rgb(55, 104, 179);
    z-index: 0;
    transition: all 0.4s ease-in-out;
}
/*------------------------------------------------ Styling the categories -----------------------------*/
.sub-categories{
    width:70%;
    display:flex;
    align-items: center;
    justify-content: space-around;
    font: 1.1rem arial ;
    color:gray;
    transition: background-color 0.3s ease-in-out;
    position: relative;
    transform: translateX(20%);
}


.sub-categories p {
    cursor: pointer;
    padding: 1rem;
    /* border-radius: 12px; */
    font-size: 0.9rem;
    transition: color 0.4s ease-in-out;
    position: relative;
    z-index: 1;
}

.sub-categories p.focused {
    /* background-color: rgb(55, 104, 179);
    color: white; */
    transition: background-color 2s ease-in-out;
}

.sub-categories .indicator1 {
    position: absolute;
    height: 10px;
    width:10px;
    border-radius: 50%;
    /* border-radius: 12px; */
    background-color: #0a57fd;
    z-index: 0;
    transition: all 0.4s ease-in-out;
}
/*------------------------------------------------ Styling the main -----------------------------*/
main{
    width:100%;
    display:grid;
    grid-template-columns: 1fr 3fr;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    margin-top:5vh;
}
/*------------------------------------------------ Styling the aside filter  -----------------------------*/
/* Container for the filter */
/* Sidebar Container */
.filter {
    width: 100%;
    height:100%;
    max-width: 280px;
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 12px;
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
    font-family: 'Cairo', sans-serif;
  }
  
  /* Title */
  .filter h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.2rem;
    color: #1a1a1a;
  }
  
  /* Category group container */
  .category-group {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }
  
  /* Category title with radio */
  .category-option {
    display: flex;
    flex-direction: column;
  }
  
  /* Category radio and label */
  .category-option > input[type="radio"] {
    display: none;
  }
  
  .category-option > label {
    font-size: 1rem;
    font-weight: 600;
    color: #00458b;
    cursor: pointer;
    padding: 0.3rem 0.2rem;
    position: relative;
  }
  
  .category-option > input[type="radio"]:checked + label {
    color: #002f5b;
  }
  
  /* Subcategory list */
  .subcategory-list {
    display: none;
    flex-direction: column;
    padding-left: 1.5rem;
    border-left: 2px solid #ddd;
    margin-top: 0.5rem;
    gap: 0.4rem;
  }
  
  .subcategory-list.show {
    display: flex;
  }
  
  /* Subcategory option */
  .subcategory-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }
  
  .subcategory-option input[type="radio"] {
    accent-color: #00458b;
  }
  
  .subcategory-option label {
    font-size: 0.9rem;
    color: #444;
    cursor: pointer;
  }
  
  .subcategory-option input[type="radio"]:checked + label {
    font-weight: 600;
    color: #d9534f;
  }
  
  /* Optional: hover effects */
  .category-option label:hover,
  .subcategory-option label:hover {
    opacity: 0.85;
  }
  

/*------------------------------------------------ Styling the product cards  -----------------------------*/
.product-cards{
    width:90%;

    display:grid;
    grid-template-columns: 1fr 1fr 1fr   ;
    gap:1.1rem;
}
.card{
background:transparent;    
   position:relative;
   /* border-bottom:  1px solid rgb(179, 179, 179);  */
   box-shadow: rgba(10, 87, 253, 0.349) 1.95px 1.95px 2.6px;
   box-shadow: rgba(10, 87, 253, 0.349) 0px 1px 4px;
   box-shadow: rgba(0, 14, 145, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
   max-height: 90%;
   row-gap: 10px;
   
   
   
}
/* .wrapper{
    background:rgb(236, 236, 236);
    height:50%;
} */
/* .no-products{
    
} */
.empty-products{
    display:flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
    
}

.card img  {
    height:30%;
    width:70%;
    
}
.card p{
    margin-left:0.5rem;
    width:92%;
    font-size:0.9rem;
    color:gray;
    padding-left:0.5rem;
}
.card h2{
    margin-left:1rem;
    width:90%;
    height:1.8rem;
    font-size:1rem;
    margin-bottom: 2rem;
}

.reviews{
    display:flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap:0.5rem;
    margin-left:1rem;
    color:gray;
}
.reviews p {
    width:auto;
    color:black;
    
}
.reviews span{
    margin-bottom:0.6rem;
    padding:0;
    font-size:1.1rem;
    color:rgb(255, 174, 0);
  }
.color{
    display:flex;
    width:50%;
    background-color: transparent;
    gap:1rem;
    margin-left:0.5rem;
}
.color li{
    width:1rem;
    height:1rem;
    background-color: black;
    list-style-type: none;
    margin-left:0.5rem;
    
}
.color a{
    font-size:0.8rem;
    
}
.pricing{
    
    display: flex;
    gap:1rem;
    justify-content: flex-start;
    align-items: center;
}
/* .pricing span{
    color:black;
} */
.pricing p{
    /* margin:1rem; */
    width:auto;
    color:rgb(55, 104, 179);
    font-size:1.2rem;
    font-weight: 600;
}
button.add{
    padding:0.5rem;
    background:white;
    border:none;
    outline: none;
    /* color:rgb(55, 104, 179);
    border: 1px solid rgb(55, 104, 179); */
    transform: translate(1rem,1rem);
    margin:1.5rem 0.5rem;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
button>img.addImage{
    width:1.5rem;
    height:1.5rem;
    
    
}
button.add:hover{
    padding:0.5rem;
    
    background: rgb(180, 200, 230);
    color:white;
    border: 1px solid white;
}
#seeAllBtn{
    grid-column: 1 / span 2;
    justify-self: center;
    align-self: center;
    width:30%;
    height:2rem;
    margin-left: 20%;
    background:white;
    
    color:rgb(55, 104, 179);
    border: 1px solid rgb(55, 104, 179);
    
}
#seeAllBtn:hover{
    
    background:rgb(55, 104, 179);
    
    color:white;
    border: 1px solid white;
    
}
footer{
    margin-top: 50px;
    display:grid;
      grid-template-columns: repeat(auto-fit,minmax(250px,1fr)) ;
      justify-content: center;
      align-items: start;
      text-align: center;
      height:30%;
      border-top: 1px solid  rgb(129, 169, 221);
      background-color: rgb(23, 99, 150);
      font-family: 'Cairo', sans-serif;
      padding-bottom:50px;
  }
    footer div {
        margin-top:50px;
    }
    footer div:last-child{
      display:none;
    }
   
  div.logo{
    width:350px;
    /* border: 1px white double ; */
    margin-left:1rem;
    transform:translateY(-1rem);
  }
  div.logo img {
    width:80%;
  }
  
   
  
  
footer .footerLinks{
    display:flex;
    flex-direction: column;
    height:150px;
    color:white;
    
}


footer .footerLinks h4{
    margin-bottom: 5px;
}
footer .footerLinks a{
    text-decoration: none;
    color:white;
    cursor: pointer;
}
 .end{
    width:100% !important;
    text-align: center;
    background:rgb(7, 31, 68);
    color:white;
    /* border-top:solid white 1px; */
}

/*--------------------------------------------- Media query ------------------------------------------*/

@media (max-width: 360px) {
   
   
  }
  
  /* Small Devices (Phones) */
  @media (min-width: 361px) and (max-width: 480px) {
    .product-cards{
        grid-template-columns: 1fr  ;
        align-items: center;
        justify-content: center;
       }
       .categories{
        margin-top:8rem;
       }
       .sub-categories{
        width:90%;
        transform: translateX(5%);
       }
       .card{
        width:80%;
        transform: translateX(10%);
       }
       nav{
        flex-wrap: wrap-reverse;
        position: fixed;
        top:0;
        z-index: 2;
        background-color: white;
        border-bottom:  2px solid rgb(21, 86, 182);
       }
       nav div.search{
        width:60%;
       }
       nav img.logo{
     
        width:300px;
        
    }
    nav .commands{
        
        transform: translateX(-1.1rem);
    }
    }
  
  
  /* Medium Devices (Tablets) */
  @media (min-width: 481px) and (max-width: 579px) {
    .product-cards{
        grid-template-columns: 1fr  ;
        align-items: center;
        justify-content: center;
       }
       .sub-categories{
        width:90%;
        transform: translateX(5%);
       }
       .card{
        width:80%;
        transform: translateX(10%);
       }
    
    
} 
  @media (min-width: 581px) and (max-width: 649px) {
    .product-cards{
        grid-template-columns: 1fr  ;
        align-items: center;
        justify-content: center;
       }
       .sub-categories{
        width:90%;
        transform: translateX(5%);
       }
       .card{
        width:80%;
        transform: translateX(10%);
       }
    
} 
  @media (min-width: 650px) and (max-width: 768px) {
    .product-cards{
        grid-template-columns: 1fr 1fr  ;
       }
       .sub-categories{
        width:90%;
        transform: translateX(5%);
       }
    
} 
  /* Large Devices (Desktops) */
  @media (min-width: 769px) and (max-width: 900px) {
    
       .product-cards{
        grid-template-columns: 1fr 1fr  ;
       }
       .card{
        width:100%;
       }
       
    
  }
  
  /* Extra Large Devices (Desktops) */
  @media (min-width: 900px) and (max-width: 1200px){
    .product-cards{
        grid-template-columns: 1fr 1fr 1fr ;
       }
       .card{
        width:100%;
       }
  }
  
  /* For 412px width and 915px height */
@media (min-width: 412px) and (min-height: 915px) {
    /* Styles for this screen size */
    
  }
  
  /* For 820px width and 1180px height */
  @media (min-width: 820px) and (min-height: 1180px) {
    
  }

  

  @media (min-width: 760px) and (min-height: 1024px) {
 
   
  }

  
  /* For 912px width and 1680px height */
  @media (min-width: 912px) and (min-height: 1300px) {
   
  }