header .iconCart{
    position: relative;
    z-index: 2;
    justify-content: center;
  }
  header .iconCart img{
    width: 60px !important; 
  }
  header .totalQuantity{
    position: absolute;
    top: 0;
    right: 0;
    font-size: x-large;
    background-color: #e14197;
    width: 40px;
    height: 40px;
    color: #fff;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transform: translateX(20px);
  }
  
  .iconCart{
    position: relative;
    z-index: 2;
    justify-content: center;
  }
  .iconCart img{
    width: 60px !important; 
  }
  
  .spacer
  {
      width: 100%;
      height: 95px;
  }
  .spacer2
  {
      width: 100%;
      height: 10px;
  }

.decor-categorie h1 em{
  background-color: #e14197;
  border-radius: 3010px;
  width: auto;
  height: 15%;
  padding: 20px;
  left: 20%;
  right: 20%;
  box-shadow: 3px 3px 3px 3px #DCE0E1;
  color: #fff;
}
.decor-categorie h1 em:hover{
  background-color: #fff;
  color: #e14197;
} 
 .categorie-afisare{
  background-color: #efab60;
  color: #fff;
  left: 0;
  top: 0%;
  width: auto;
  height: 7%;
  border-radius: 10px;
  position: absolute;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 1px;
  text-align: center;
  }
  .categorie-afisare:hover{
    background-color: #fff !important;
    color: #efab60
  }
  
  .cart{
      position: fixed;
      top: 0;
      right: 0;
      height: 100%;
      width: 0;
      max-width: 500px;
      z-index: 1000;
      background-color: #F8F8F8;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0;
      overflow: hidden;
      overflow-y: scroll;
      scrollbar-width: thin;
      transition: all .5s ease-in-out;
  }
  
  .showCart{
    width: 80%;
    padding: 1em;
    box-shadow: 0 0 15px 15px rgba(0, 0, 0, .4);
  }
  .cart h2{
    color: #efab60;
    padding: 20px;
    height: 30px;
    margin: 0;
  }
  .cart .listCart .item{
    display: grid;
    grid-template-columns: 70px 200px 70px;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;  
  }
  .cart .listCart img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
  }
 
  .cart .listCart .item .name{
    font-weight: bold;
  }
  
  .cart .listCart .item .quantity{
    display: flex;
    justify-content: end;
    align-items: center;
  }
  .cart .listCart .item .quantity button{
    background-color: #fff;
    color: #e14197;
    border-radius: 10px;
    padding: 5px;
    padding-top: 0;
    padding-bottom: 0;
    border-color: #efab60;
  }
  
  .cart .listCart .item .quantity span{
    display: block;
    width: 50px;
    text-align: center;
  }
  
  .cart .listCart{
    padding: 20px;
    overflow: auto;
  }
  .cart .listCart::-webkit-scrollbar{
    width: 0;
  }
  .cart .finalizare{
    font-size: 15px;
    color: #e14197;
    background-color: transparent;
    border: 1px solid #efab60;
    padding: 10px 30px;
    display: inline-block;
    border-radius: 10px;
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    transition: all .3s;
    cursor: pointer;
    text-decoration: none;
  }
  .cart .finalizare:hover{
    background-color: #e14197;
    color: #fff;
  }

.cart .checkoutCos{
    position: absolute;
    bottom: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 20px;
    
    
}
.cart .checkoutCos div{
    background-color: #fff;
    width: 80%;
    height: 50px;
    display: flex;
    top: -10px;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    cursor: pointer;
    padding: 10px 20px !important;
    color: #e14197;
    border: 1px solid #efab60;
    border-radius: 20px;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 2%;
}
.cart .checkoutCos div:hover{
    background-color: #e14197;
    color: #fff; 
}
.cart .checkoutCos div:nth-child(2){
    background-color: #efab60;
    color: #fff;
}
.cart .checkoutCos div:nth-child(2):hover{
    background-color: #e14197;
    color: #fff;
}
.cart .item .content .pretProdus{
    background-color: #fff;
    color: #e14197;
    font-weight: bold;
    width: 100px;
    border-radius: 10px;
    padding-left: 25px;
    padding-right: 20px;
    box-shadow: 3px 3px 3px grey;
}
@media only screen and (max-width: 700px) {
    .spacer
    {
        width: 100%;
        height: 10%;
    }
    .cart .listCart .item{
        padding: 10%,0,0,0;
        display: grid;
        grid-template-columns: 60px 1fr;
        align-items: center;
        gap: 20px;
        margin-bottom: 20px;
    }
      
    .cart .listCart .item .quantity span{
        display: block;
        width: 20px;
        text-align: center;
      }
}
.listProduct-1{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.listProduct-2{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
.listProduct-3{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
   .firstSpan{
    color:#fff;
    background-color: #e14197;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    margin-left: 35%;
    text-decoration: none;
   }
   .firstSpan .secondSpan{
    visibility: hidden;
    width: 250px;
    height: auto;
    background-color: #fff;
    color:#efab60;
    text-align: center;
    border-radius: 8px;
    padding: 5px;
    position: absolute;
    z-index: 2;
    box-shadow: 3px 3px 3px 3px grey;
   }
   .firstSpan:hover .secondSpan{
    visibility: visible;
   }
   .firstSpan:hover{
    color:#fff;
    background-color: #efab60;
   }
  
@media only screen and (max-width: 700px) {

    .listProduct-1{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
    .listProduct-2{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
      }
      .listProduct-3{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
      }
      .categorie-afisare{
        top: 0;
        width: auto;
        height: 7%;
        border-radius: 10px;
        position: absolute;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 1px;
        text-align: center;
      }
        
}
@media only screen and (max-width: 700px) {
    header .iconCart{
        position: absolute;
        left: auto;
        right: 33%;
        top: 20%;
    }
    header .iconCart img{
        width: 40px;
    }
    header .iconCart div{
        background: #e14197;
        border-radius: 60%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        position: absolute;
        top: -7px;
        left: 50%;
        padding: 2px 9px;
    }
    

    .list{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 20px;
        row-gap: 20px;
        margin-top: 50px;
    }
    .list .item{
        text-align: center;
        background-color: #DCE0E1;
        padding: 20px;
        box-shadow: 0 50px 50px #757676;
        letter-spacing: 1px;
    }
    .list .item img{
        width: 90%;
        height: 430px;
        object-fit: cover;
    }
    .list .item .title{
        font-weight: 600;
    }
    .list .item .price{
        margin: 10px;
    }
    .list .item button{
        background-color: #1C1F25;
        color: #fff;
        width: 100%;
        padding: 10px;
    }
    .card{
        position: fixed;
        top:0;
        left: 100%;
        width: 500px;
        background-color: #453E3B;
        height: 100vh;
        transition: 0.5s;
    }
    .active .card{
        left: calc(100% - 500px);
    }
    .active .container{
       transform: translateX(-200px);
    }
    .card h1{
        color: #E8BC0E;
        font-weight: 100;
        margin: 0;
        padding: 0 20px;
        height: 80px;
        display: flex;
        align-items: center;
    }
    .card .checkOut{
        position: absolute;
        bottom: 0;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    
    }
    .card .checkOut div{
        background-color: #E8BC0E;
        width: 100%;
        height: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        cursor: pointer;
        
    }

.cart .checkoutCos{
      gap: 10px;  
  }
    .card .checkOut div:nth-child(2){
        background-color: #1C1F25;
        color: #fff;
    }
    .listCard li{
        display: grid;
        grid-template-columns: 100px repeat(3, 1fr);
        color: #fff;
        row-gap: 10px;
    }
    .listCard li div{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .listCard li img{
        width: 90%;
    }
    .listCard li button{
        background-color: #fff5;
        border: none;
    }
    .listCard .count{
        margin: 0 10px;
    }
}