.maindiv{
  background-color: #eeeeee44;
  /* background-color: #fff; */
  width: 92%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  /* padding: auto; */
}
.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    /* box-shadow: 0 4px 8px 0 #025102; */
    background-color: #fff;
    max-width: 196px;
    min-width: 100px;
    width: 200px;
    margin: 1%;
    text-align: center;
    font-family: arial;
    border-radius: 0 0 25px 0;
    
    /* background-color: lightblue; */
    /* text-align: center; */
    /* padding: 20px; */
    /* flex: 1 1 calc(16.66% - 10px); */
    /* box-sizing: border-box; */
  }
  .card:hover{
    box-shadow: 0 4px 8px 0 gray;
  }
  .price {
    color: black;
    font-size: 18px;
  }
  .imgdiv{
    min-width: 80%;
    max-width: 80%;
    margin: auto;
    /* max-height: 80%;
    min-height: 66%; */
    /* height: 66%; */
    height: 250px;
  }
  .card button {
    border: none;
    outline: 0;
    padding: 8px;
    color: white;
    /* background-color: #ff6900; */
    /* background-color: #fcb900; */
    /* background-color: #025102; */
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 16px;
    /* border-radius: 25px; */
  }
  .cartbtn{
    border: none;
    outline: 0;
    padding: 8px;
    color: white;
    /* background-color: #ff6900; */
    /* background-color: #fcb900; */
    /* background-color: #a0cd4e; */
    background-color: orange;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 16px;
    border-radius: 25px 0 0 0;
  }
  .buybtn{
    margin-top: 0.5%;
    margin-bottom: 0.5%;
    /* background-color: #cf2e2e; */
    border: none;
    outline: 0;
    padding: 8px;
    color: white;
    /* background-color: #ff6900; */
    /* background-color: #fcb900; */
    background-color: #025102;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 16px;
    border-radius: 0 0 25px 0;
  }
  .card img{
    /* min-height: 60%; */
    max-height: 250px;
  }
  .card button:hover {
    opacity: 0.9;
  }
@media (max-width: 768px) {
  .maindiv {
    /* width: 88%; */
    width: 100%;
    flex: 1 1 calc(50% - 10px); /* 2 boxes in a row with gap */
  }
}  
@media (max-width: 647px) {
  .card {
    width: 160px;
  }
}  
@media (max-width: 454px) {
  .maindiv {
    width: 100%;
    flex: 1 1 calc(50% - 10px); /* 2 boxes in a row with gap */
  }
}