.product1 {
  background: url(../images/resource/bginfo.jpg);
  background-size: cover;
  background-position: center;
  height: 100vh; /* Set initial height for mobile view */
}

/* Media query for smaller screens (e.g., mobile devices) */
@media (max-width: 768px) {
  .product1 {
    background-size: contain; /* Adjust background size for smaller screens */
    height: auto; /* Allow content to determine height */
  }
}
.wrapper {
  width: 100%;
  display: flex;
  justify-content: center; /* Horizontally center */
  align-items: center; /* Vertically center */
  margin: 0 auto; /* Center horizontally */
 }




.card{

  height: 400px;
  width: 320px;
  background-color:#345c28;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-align: center!important;

}


.card::before{
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  top:-50%;
  background-color:#bbe9b7;
  transform: skewY(345deg);
  transition:1s ease-in;

}


.card:hover::before{
  top:-70%;
  transform: skewY(390deg);
}

.card .image{

  position: absolute;
  
  width: 100%;    
  display: flex;
  justify-content: center;
  align-items: center;
}


.card .image img{
  width: 93%;
  max-width: 100%;
  transition: 1.3s ease-in;
}



.about-product{

  position: absolute;
  color: #fff;
  bottom: 20px !important;
    text-align: center;
  left: 20%;
  transition: 1.5s ease-in;
}





.buy-now{
  
  color: #fff;
  background-color: #07550b !important;
  border-color: #084902 !important;
  width: 160px;
  margin-top: 10px;
  margin-left: 15px;
}


.buy-now:focus{
  
  box-shadow: none;
}

.buy-now:hover{
  color: #fff;
  background-color: #073b05 !important;
  border-color: #377008 !important;

}
/* Adjustments for smaller screens */