body {
  font-family: Lato;
  margin: 2rem;
  font-size: 1.4em;
  background-color: #f4ede5;
}
#responsive{
  width: 100%;
  aspect-ratio: 100 / 29;
}
.responsive {
  width: 100%;
  height: auto;
}
#bor{
  border-right: solid 0.5px #dee2e6;
   height: 110px;
}
#special{
  color: #f34949;
  font-weight: lighter;
}
#specialrecipe{
  font-family: 'Pacifico', cursive;
}
#ourmenu{
  font-family: 'Redressed',cursive;
  font-weight: bold;
  padding-top:-50px;
  color:black;
  margin-top: -30px;
}
#footer{
  text-align: left;
}
#titlefor{
  font-family: 'Redressed',cursive;
  font-weight: bold;
  color:black;
}
#lunch{
  font-family: 'Josefin-Sans',sans-serif;
  font-size: 2rem;
  font-weight: 520;
  color:black;
  margin: -30px 0px -30px 0px;
}
#milagu{
  color:#f34949;

}
#naming{
  font-family: 'Josefin-Sans',sans-serif;
  font-weight: 520;
  color:black;
}
#menu,#rowwy{
  background-color:#e7e8e9;/*#DEDFE0;#f7f8f9*/
  color: #4F091D;
}
#rowwy{
  padding:0px;
}
#directions {
  margin-top: 3rem;
  background-color: #e7e8e9;/*#f7f#e7e8e98f9;*/
}

#namename {
  font-family: 'Pacifico', cursive;
  font-size: 1.3rem;
  margin-bottom: -40px;
}

p {
  font-size: 1rem;
}

.carousel-control-prev, .carousel-control-next {
  height: 50px;
  width: 50px;
  outline: black;
  background-color: #54BAB9;
  background-size: 100%;
  border-radius: 50%;
  text-align: center;
  border: 1px solid #E9DAC1;
  margin-top: 15rem;
}

.carousel-indicators {
  background-color: #BF8B67;
  width: 8%;
  margin:auto;
  z-index: 4;
  padding: none;
  border-radius: 10%;
}
#Explore:hover,#buttonli:hover{
  transform:translateY(10px);
}
#veggy{
  transition: .5s ease;
  -webkit-filter: brightness(60%);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
  }
#veggy:hover {
  -webkit-filter: brightness(100%);
  box-shadow: 0 0 0 10px #E9DAC1;
  transition: .5s ease;
  border-radius: 10%;
  } /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
.logo:hover,#read:hover,#write:hover{
    transform: translateY(10px);
  }
  #cardimage {
      object-fit: cover;
      transition: transform 750ms;
      will-change: transform;
  }
  #cardimage:hover,#cardimage-top:focus {
      transform: translateY(10px);
  }

.carousel-indicators:hover {
  background-color: #54BAB9;
}

.carousel-control-prev {
  margin-left: 8rem;
}
#carouselExampleIndicators{
  margin-top: -18px;
  padding-top:0px;
}
.carousel-control-next {
  margin-right: 8rem;
}

#testimonials {
  text-align: center;
}

#image {
  background-image: url('testimonal');
}

div {
  background: #fff;
  padding: 30px;
}

.main {
  box-sizing: content-box;
  padding: 0px;
}

h1 {
  line-height: 1.5;
  font-size: 3.5rem;
  font-weight: lighter !important;
  font-family: "Quintessential", cursive;
}

.btn3 {
  background: #f5c09b;
  background-image: -webkit-linear-gradient(top, #f5c09b, #BF9270);
  background-image: -moz-linear-gradient(top, #f5c09b, #BF9270);
  background-image: -ms-linear-gradient(top, #f5c09b, #BF9270);
  background-image: -o-linear-gradient(top, #f5c09b, #BF9270);
  background-image: linear-gradient(to bottom, #f5c09b, #BF9270);
  -webkit-border-radius: 50;
  -moz-border-radius: 50;
  border-radius: 50px;
  margin-top: 3rem;
  font-family: Georgia;
  color: #FFEDDB;
  border-color: #f5c09b;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn3:hover {
  background: #54BAB9;
  background-image: -webkit-linear-gradient(top, #54BAB9, #68c4c2);
  background-image: -moz-linear-gradient(top, #54BAB9, #68c4c2);
  background-image: -ms-linear-gradient(top, #54BAB9, #68c4c2);
  background-image: -o-linear-gradient(top, #54BAB9, #68c4c2);
  background-image: linear-gradient(to bottom, #54BAB9, #68c4c2);
  text-decoration: none;
  border-color: #5abab9;
}

#container {
  text-align: center;
}

#logo {
  padding: 5px;
}

td {
  height: 30px;
}

.logo {
  transform: rotate(5deg);
}

#youtube:hover {
  color: #E3B7A0 !important;
}

#buttonlight, #buttonli {
  border-radius: 20px;
}

#Explore {
  border-radius: 20px;
  margin-right: 30px;
}

#needed {
  padding: 0px;
}
#iconesss{
  text-align: center;
}
#head{
  text-align:left;
}
.leftbuttons, .rightbuttons {
  color: #8E806A;
}
.leftbuttons:hover, .rightbuttons:hover {
  border-bottom: solid 5px #f7bb97;
  /* #dd5e89 →  */
}

#buttonlight:hover {
  color: #E3B7A0 !important;
}
#but:hover {
  color: #e3b7a0;
}

#testimage {
  width: 50%;
  height: 100%;
  margin-left: -5rem;
  margin-right: -5rem;
}
#content{
  background-color: yellow;
}

#heading {
  text-align: left;
}
#imagefood {
  margin: 0px 0px 0px -20px;
}
#iconesss{
  text-align:center;
}
#bor{
  margin-left: -20px;
  margin-right: 21px;
}
/*slide show*/
#slishow {
  overflow: hidden;
  height: 350px;
  /* width: 550px */
  margin: auto;
}

/* Style each of the sides
    with a fixed width and height */
.sli-number {
  padding:0.5rem;
  margin:0.5rem;
  padding-right:2rem;
}
#fir{
  width:450px;
  height:250px;
}
#sec {
  width:450px;
  height:250px;
}
#second{
  margin-right: -3.125rem;
  margin-left: -4.375rem;
}
#thi {
  margin-left: -4.375rem;
}
#thr{
  width:450px;
  height:250px;
}
#four{
  width:450px;
  height:250px;
}
#fou {
  margin-left: -4.375rem;
}

.sli {
  float: left;
  height: 350px;
  width: 550px;
}

/* Add animation to the slides */
.sli-wrapper {
  /* Calculate the total width on the
      basis of number of slides */
  width: calc(550px* 4);
  /* Specify the animation with the
      duration and speed */
  animation: slide 10s ease infinite;
}

/* Set the background color
    of each of the slides */
.sli:nth-child(1) {
}

.sli:nth-child(2) {

}

.sli:nth-child(3) {

}

.sli:nth-child(4) {
}

/* Define the animation
    for the slideshow */
@keyframes slide {

  /* Calculate the margin-left for
      each of the slides */
  20% {
    margin-left: 0px;
  }

  40% {
    margin-left: calc(-550px * 1);
  }

  60% {
    margin-left: calc(-550px * 2);
  }

  80% {
    margin-left: calc(-550px * 3);
  }
}