/*===================================== 
YOU CAN WRIGHT CUSTOME CSS 
======================================*/
.box-display {
  width: 300px;
  background-color: rgba(10, 150, 10, 0.76);
  color: white;
  border-radius: 5px;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
  border: 1px solid rgb(93, 93, 93);
  box-shadow: 6px 6px 44px 0px rgb(237, 226, 226);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.two-boxes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 60%;
  margin: auto;
  margin-top: 50px;
}
.product-box {
  width: 200px;
  height: 200px;
  border: 2px solid rgba(10, 150, 10, 0.76);
}
@media screen and (max-width: 1200px) {
  .two-boxes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 70%;
    margin: auto;
    margin-top: 50px;
  }
}
@media screen and (max-width: 930px) {
  .two-boxes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: auto;
    margin-top: 50px;
  }
}
@media screen and (max-width: 630px) {
  .two-boxes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    width: 100%;
    margin: auto;
    margin-top: 50px;
  }
  .box-display {
    width: 300px;
    background-color: rgba(10, 150, 10, 0.76);
    color: white;
    border-radius: 5px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-top: 20px;
    border: 1px solid rgb(93, 93, 93);
    box-shadow: 6px 6px 44px 0px rgb(237, 226, 226);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
}