/*!*****************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/index.css ***!
  \*****************************************************************/
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
body{
  /* background-color: #ecf5da; */
  background-image: url(bf0a07ff052bafde9a30.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: rgb(68, 110, 31);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 100vw;

}
header{
  padding: 20px;
  display: flex;
  justify-content: space-between;
  border-bottom: 10px solid rgb(68, 110, 31);
  border-right: 10px solid rgb(68, 110, 31);
  background-color: #ecf5da;
  opacity: 0.6;     
}
#logo-div{
  display: flex;
  align-items: center; 
  gap: 20px;
}
#logo-image{
  width: 150px;
  height: auto;
}
#logo-div h1 {
  font-family: 'Times New Roman', Times, serif;
  color: rgb(68, 110, 31);
  font-style: italic;
  border-bottom: 5px solid rgb(68, 110, 31); 
}
nav{
  display: flex;
  padding: 10px;
  gap: 5px;
  align-items: center;
}
nav button {
  width: 100px;
  height: auto;
  padding: 5px;
  background-color: rgb(68, 110, 31);
  color: rgb(225, 237, 216);
  font-size: medium;
  font-weight: 600;
  cursor: pointer;
  border-radius: 15px;
  border: none;
  transition: background-color 0.8s, color 0.8s; 
}
nav button:hover{
  background-color: rgb(225, 237, 216);
  color: rgb(68, 110, 31);

}
main{
  flex: 1;
  padding: 20px;
  background-color: #ecf5da;
  opacity: 0.8;
}
main h1 {
  text-align: center;
  font-family: 'Times New Roman', Times, serif;
  color: rgb(68, 110, 31);
  font-style: italic;
  text-decoration: underline;
  margin-bottom: 20px;
}
footer{
  padding: 20px;
  text-align: center;
  background-color: #ecf5da;
  opacity: 0.6;
  border-top: 10px solid rgb(68, 110, 31);
  border-left: 10px solid rgb(68, 110, 31);
  font-size: large;
  font-weight: 600;
}
@media screen and (max-width: 700px) {
  header{
    display: flex;
    flex-direction: column;
  }
  #logo-div{
    display: flex;
    flex-direction: column;
  }
  }
/*!************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/Pages/home-page/homePage.css ***!
  \************************************************************************************/
.home-page-content{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 20px;
}
.home-page-para-div{
  font-size: large;
  font-weight: 600;
}
.images-div{
  width: 60%;
  height: auto;
  margin: auto;
  display: grid; 
  gap: 20px; 
  grid-template-columns: repeat(3, 170px);
}
.image-card1{
  overflow: hidden;
  grid-column: span 2; 
  grid-row-start: 1;
  grid-row-end: 3;
  border-radius: 10px;
}
.image-card2{
  overflow: hidden;
  grid-column: span 1;
  grid-row-start:1;
  grid-row-end: 2;
  border-radius: 10px;
}
.image-card3{
  background-color: black; 
  overflow: hidden;
  grid-column: span 1;
  grid-row-start: 2;
  grid-row-end: 3;
  border-radius: 10px;
}
.grid-img{
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 700px) {
  .home-page-content{
    display: flex;
    flex-direction: column;
  }
  .images-div{
    width: 100%;
    height: auto;
    margin: auto;
    display: grid; 
    gap: 20px; 
    grid-template-columns: 1fr;
  }
  .image-card1{
    grid-column: span 1; 
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .image-card2{
    grid-column: span 1;
    grid-row-start:2;
    grid-row-end: 3;
  }
  .image-card3{
    grid-column: span 1;
    grid-row-start: 3;
    grid-row-end: 4;
  }


  }
/*!********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/Pages/menu-page/menu.css ***!
  \********************************************************************************/
#menu-page-content{
  display: flex;
  flex-direction: column;
  text-align: center;
}
#menu-cards-div{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.menu-card{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 15px;
  background-color: rgb(63, 130, 133);
  border-right: 4px solid rgb(68, 110, 31);
  border-bottom: 4px solid rgb(68, 110, 31);
  border-radius: 15px;
  font-size: large;
  font-weight: 500;
}
.menu-card h2{
  text-decoration: underline;
  font-style: italic;
  text-align: center;
}
#menu-card1{
  color: aqua;
}
#menu-card1 .item-price{
  color: yellow;
  font-weight: 650;
}
#menu-card2{
  color: rgb(219, 226, 30);
}
#menu-card2 .item-price{
  color: rgb(37, 36, 36);
  font-weight: 650;
}
#menu-card3{
  color: #b3b293f9;
}
#menu-card3 .item-price{
  color: rgb(255, 249, 248);
  font-weight: 650;
}
#menu-card4{
  color: rgb(14, 34, 185);
}
#menu-card4 .item-price{
  color: #b3b293f9;
  font-weight: 650;
}
#menu-card5{
  color: rgb(181, 33, 67);
}
#menu-card5 .item-price{
  color: navy;
  font-weight: 650;
}
#menu-card6{
  color: rgb(52, 58, 58);
}
#menu-card6 .item-price{
  color: goldenrod;
  font-weight: 650;
}
.menu-list{
  list-style-type: square;
  padding-left: 20px;
}
.menu-list li{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  text-align: start;
}
.item-name{
  flex-grow: 1;
}
@media screen and (max-width: 700px) {
  #menu-cards-div{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: center;
    min-width: 100%;
  }
  .menu-card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px;
    min-width: 100%;
  }
  }
/*!**************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/Pages/contact-page/contact.css ***!
  \**************************************************************************************/
#contact-page-content{
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  padding: 10px;
}
#contact-form{
  display: flex;
  flex-direction: column;
  background-color: rgb(68, 110, 31);
  width: 40%;
  color: aliceblue;
  padding: 20px;
  border-radius: 20px;
  border: 3px solid rgb(240, 205, 160);
}
#contact-form label{
  display: block;
  margin: 5px 0px;
  align-self: flex-start;
  font-size: large;
  font-weight: 600;
}
#contact-form input, textarea{
  border: 3px solid rgb(240, 205, 160);
  border-radius: 15px;
  padding: 5px;
  color: rgb(68, 110, 31);
  font-size: large;
  font-weight: 600;
  font-style: italic;
}
#contact-form button {
  margin-top: 5px;
  width: 50%;
  height: auto;
  padding: 5px;
  text-align: center;
  align-self: center;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background-color: rgb(240, 205, 160);
  color: rgb(68, 110, 31);
  font-size: large;
  font-weight: 650;
}
#contact-form button:hover{
  background-color: rgb(118, 145, 94);
  color: aliceblue;
}
@media screen and (max-width: 700px) {
  #contact-form{
    min-width: 95%;
  }
  }

/*# sourceMappingURL=styles.css.map*/