.page4 {
  width: 100%;
  min-height: 100vh;
  background-color: #f8f4e0;
  padding: 1vw 5vw;

}

.food-items-main {
  width: 100%;

}

.foof-title {
  font-size: 2em;
  text-align: center;
  padding: 2vw 20vw;
  margin: 18px;color: #3d2101;
}

.fooditems {
  width: 100%;font-family: inter;
  padding: 0 3vw;flex-wrap: nowrap;
height: auto;
  display: flex;

  gap: 1em;justify-content: center;
}

.foods{
width: 29%;
  
}
.foods img{
    height: 309px;
    width: 100%;
    border-radius: 15px;
    box-shadow: rgb(0, 0, 0) -7px 3px 3px 0px;
  border-bottom-width: 2px;
  border-color:  rgb(0, 0, 0);
  border-left-width: 2px;
  border-right-width: 2px;
  border-style: solid;
    border-top-width: 2px;
    border-radius: 16px;
    

}
.text-food{
  padding: 0.4vw 0.4vw;display: flex;
  flex-direction: column;gap: 1em;
}
.pr{
  width: 1px;
  background-color: black;
}
.headofp{
  text-align: center;


  font-size: 24px;
    font-style: normal;

  font-variation-settings: normal;
    font-weight: 800;
  
    letter-spacing: 1px;
    line-height: 1.2em;

}
@media (max-width:1200px){
  .foods{
    width: 49%;
  }
  .fooditems{
    flex-wrap: wrap;
  }
.foof-title {
    font-size: 1.2em;

    padding: 2vw 2vw;
    margin: 23px;
}
}
.price-food{
  display: flex;justify-content: space-around;
}
.fr{
  display: flex;
}
@media (max-width:768px){
  .foods{
    width: 100%;
  }
  .fooditems{
    flex-wrap: wrap;
  }
.foof-title {
    font-size: 1.1em;

    padding: 2vw 2vw;
    margin: 20px;
}
}
.price-food{
  display: flex;justify-content: space-around;
}
.fr{
  display: flex;
}