@font-face {
    font-family: AvenirNextWorld-Demi;
    src: url(fonts/avenir-next-world-demi.otf);
}

@font-face {
    font-family: AvenirNextWorld-Regular;
    src: url(fonts/avenir-next-world-regular.otf);

}



* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  body {
    font-family: AvenirNextWorld-Regular;
    color: rgb(33, 37, 41);
    font-size: .875rem;
    padding: .652rem 3.125rem;
    display: flex;
    gap: 1.875rem;
    align-items: flex-start;
    justify-content: center;
  }

  h2,h3 {
    font-family: AvenirNextWorld-Demi;
  }

 

.Product_head {
  color: rgb(33, 37, 41);
  padding: .652rem 0;
  border-radius: 1rem; 
  position: sticky;  
  top: 0;            
  text-align: center;
  display: block;
  background-color: rgba(255, 255, 255, .5);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15); 
  z-index: 10;
}

.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.25rem;
}

  .card {
    width: 12.5rem;
    padding: .652rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #eceff5;
    border-radius: 10px;
  }

  .card:hover {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.3);

  }

  .card .card-image {
    width: 100%;
  }
  .card img {
    width: 100%;
    height: 10rem;
    object-fit: cover;
  }

  .description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 5px;
  }
  .card_btn {
    padding: .5rem 1.25rem;
    width: 100% !important;
    margin: .375rem 0;
    cursor: pointer;
  }

  table,
  th,
  td {
    border-collapse: collapse;
    border: none;
  }

.cartTable {
  width: 22rem; 
  margin-top: 1.25rem;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
}

table {
  width: 22rem; 
}


 .table_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  background-color: #eceff5;

}



.table_head .title {
  padding: .625rem 0;
  margin: 0;
  text-align: center;
  flex: 1;
  font-size: 1.3rem;
}

.clear_btn {
  padding: .375rem .75rem;
  margin-right: .625rem;
  border: none;
  background: crimson;
  color: #fff;
  border-radius: .375rem;
  cursor: pointer;
  transition: 0.3s;
}
.clear_btn:hover {
  background: rgb(255, 0, 0);
}

.qnty {
  border: 1px solid lightgray;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn-incr {
padding: .375rem 1rem;
}

.btn-incr:hover {
background-color: #eceff5;
cursor: pointer;
}

.delete_icon {
  width: 1.25rem;
  padding: 0 0 0 .375rem;
  cursor: pointer;
}
  table button{
      padding: .1875rem .375rem;
      border: none;
      background-color: #fff;
      
  }


  tfoot {
    border-top: 1px solid lightgray; background-color: #eceff5;
  }




@media (max-width: 576px) {
  body {
    padding: .625rem;
    flex-direction: column;
    gap: 1.25rem;
    justify-content: center;
  }

 .products-section {
  max-height: 75vh;       
  overflow-y: auto;      
 }

 .cartTable {
  width: 100%;         
  }

  table {
  width: 100%; 
  }


}