body {
  background-image: url(images/hero-bg.jpg);
}

#header {
  background-color: white;
  margin: 0 10px;
  margin-bottom: 100px;
}

.logo {
  display: flex;
  margin: 5px;
  margin-right: 250px;
}

.logo img {
  height: 70px;
  width: 70px;
}

.logo h1 {
  font-weight: 200;
  color: darkslategrey;
}

#header ul a {
  color: darkslategrey;
}

#header ul li :hover,
.cal .pl:hover {
  color: #ff3927;
}

.cal {
  display: flex;
}

.cal .pl {
  margin-top: 10px;
  color: #d23123;
}

.cal i {
  color: #ff3927;
}

.cal .btn,
#hero .div1 .btn {
  background-color: #ff3927;
  color: white;
  padding: 20px 30px;
  margin-left: 30px;
}
#hero .div1 .btn {
  margin-bottom: 50px;
}
.cal .btn:hover,
#hero .div1 .btn:hover,
#Blog .btn:hover {
  background-color: rgb(36, 38, 38);
}

#hero {
  display: flex;
}

#hero h1 {
  font-size: 100px;
  font-weight: 300;
  margin-bottom: 50px;
}

#hero .images {
  display: flex;
}

.img1 {
  position: relative;
  width: 500px;
}

.img2 {
  z-index: 2;
  position: absolute;
  width: 500px;
}

#Menu {
  margin-top: 200px;
  background-color: #ff3927;
  color: white;
  text-align: center;
  padding: 100px;
}

#Menu .div1 {
  justify-content: center;
  display: flex;
  gap: 10px;
}

#Menu .div2 {
  font-size: 40px;
  font-family: serif;
  margin-bottom: 50px;
}

#Menu .div3 .mneu1,
#Menu .div3 .mneu2 {
  display: flex;
  gap: 10px;
  justify-content: center;
}

#Menu .div3 .mneu2 {
  margin-top: 10px;
}

#Menu .div3 .mneu1 .pizza,
#Menu .div3 .mneu1 .burger,
#Menu .div3 .mneu1 .bread {
  display: flex;
  gap: 10px;
  background-color: white;
  color: rgb(80, 73, 73);
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  height: 100px;
  width: 300px;
}

#Menu .div3 .mneu1 .pizza img,
#Menu .div3 .mneu1 .burger img,
#Menu .div3 .mneu1 .bread img {
  width: 50px;
  height: 50px;
}

#Menu .div3 .mneu1 .pizza p,
#Menu .div3 .mneu1 .burger p,
#Menu .div3 .mneu1 .bread p {
  margin-top: 10px;
}

#Menu .div3 .mneu1 .pizza i,
#Menu .div3 .mneu1 .burger i,
#Menu .div3 .mneu1 .bread i {
  padding: 10px;
  border: 1px white solid;
  margin-left: 120px;
}

#Menu .div3 .mneu2 .seafoods,
#Menu .div3 .mneu2 .chicken,
#Menu .div3 .mneu2 .coffee {
  display: flex;
  gap: 5px;
  background-color: white;
  color: rgb(80, 73, 73);
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  height: 100px;
  width: 300px;
}

#Menu .div3 .mneu2 .seafoods img,
#Menu .div3 .mneu2 .coffee img,
#Menu .div3 .mneu2 .chicken img {
  width: 50px;
  height: 50px;
}

#Menu .div3 .mneu2 .seafoods p,
#Menu .div3 .mneu2 .coffee p,
#Menu .div3 .mneu2 .chicken p {
  margin-top: 10px;
}

#Menu .div3 .mneu2 .seafoods i,
#Menu .div3 .mneu2 .coffee i,
#Menu .div3 .mneu2 .chicken i {
  padding: 10px;
  border: 1px white solid;
  margin-left: 120px;
}

#About .div1 {
  margin-top: 200px;
  display: flex;
  justify-content: center;
  gap: 5px;
  color: #ff3927;
}

#About .div2 {
  text-align: center;
  font-family: serif;
  font-size: 40px;
  margin-bottom: 20px;
}

#About .div3 {
  display: flex;
  gap: 50px;
}

#About .div3 .img1 img {
  height: 80%;
}

.div3 .mneus .mneu1,
.div3 .mneus .mneu2,
.div3 .mneus .mneu3,
.div3 .mneus .mneu4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.div3 .mneus span {
  color: #ff3927;
}

.div3 .mneus .mneu1 .ps1 .p1:hover,
.div3 .mneus .mneu2 .ps2 .p1:hover,
.div3 .mneus .mneu3 .ps3 .p1:hover,
.div3 .mneus .mneu4 .ps4 .p1:hover {
  color: #ff3927;
}

#Shop {
  display: flex;
  gap: 50px;
}

#Shop .img1 img {
  height: 500px;
  width: 500px;
}

#Shop .div1 {
  display: flex;
  gap: 5px;
  color: #ff3927;
  align-items: center;
}

#Shop .div2 {
  font-size: 50px;
  color: rgb(94, 92, 92);
}

#Shop .div3 .schedule-item p {
  position: relative;
  bottom: 50px;
  font-size: 23px;
  left: 15px;
  color: white;
  opacity: 0.7;
}

#Blog {
  margin-top: 100px;
  display: flex;
  gap: 100px;
}

#Blog .img img {
  height: 500px;
}

#Blog .content .div1 {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-bottom: 50px;
}

#Blog .content .div1 .p1 {
  color: #ff3927;
}

#Blog .content h1 {
  color: rgb(103, 96, 96);
}
#Blog .content .container {
  display: flex;
}
#Blog input {
  /* width: 500px; */
  padding: 10px;
  align-items: center;
}

#Blog .content .container i {
  position: relative;
  left: 470px;
  bottom: 35px;
}

#Blog .btn {
  color: white;
  background-color: #ff3927;
  margin-bottom: 100px;
  padding: 10px;
}

#footer {
  margin-bottom: 100px;
  display: flex;
}

#footer .div1 .logof {
  margin: 5px 5px 5px -10px;
  display: flex;
  height: 50px;
  width: 50px;
  font-family: serif;
}

#footer .div1 .inp {
  width: 300px;
  padding: 10px;
}

#footer .div1 i {
  position: relative;
  left: 270px;
  bottom: 35px;
}

pre {
  font-family: serif;
  font-style: normal;
  line-height: 35px;
  font-weight: lighter;
}

pre:hover {
  color: #ff3927;
}