.overlap-container {
  overflow: hidden;
  height: 1000px;
}

.overlap-container .hero-section {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.overlap-container .hero-section .video-overlay {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 2;
  background-color: rgb(0, 0, 0, 0.5);
}

.overlap-container .hero-section .video-overlay img {
  width: 50px;
  height: fit-content;
  padding: 10px;

  &&:hover {
    cursor: pointer;
  }
}

.overlap-container .hero-section video {
  width: 100%;
}

.overlap-container .mid-section {
  display: flex;
  flex-direction: column;
  background-color: var(--primary-color);
  position: relative;
  top: -100px;
}

.overlap-container .mid-section .location {
  font-family: "Figtree", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 18.2px;
  line-height: 27.3px;
  color: var(--text-primary);
  text-align: center;
  margin-top: 20px;

  img {
    height: 20px;
    padding-right: 5px;
  }
}

.overlap-container .mid-section .containt-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 100%;
  margin: 10px 0 10px 0;
  gap: 10px;
}

.overlap-container .mid-section .containt-container .containt {
  display: flex;
  flex-direction: column;
  align-items: center;

  h1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: "Bebas Neue", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 50px;
    color: var(--text-primary);
    text-align: center;
    height: 200px;
    width: 200px;
    border-radius: 100%;
    background-color: #A31A1F;
    aspect-ratio: 1/1;
    margin: 0 10px 0 10px;
  }

  button {
    margin: 20px 0 30px 0;
  }
}

.body-section {
  background-image: url("./public/sack.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.body-section .body-section-overlay {
  background-color: rgb(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  border: 1px solid black;

  h1 {

    font-family: "Goblin One", serif;
    font-style: normal;
    font-weight: 500;
    font-size: 50.4px;
    line-height: 55.4px;
    color: var(--text-primary);
  }

  h2 {
    font-family: "Goblin One", serif;
    font-style: normal;
    font-weight: 500;
    font-size: 22.4px;
    line-height: 24.64px;
    color: var(--text-primary);
  }

  p {

    font-family: "Figtree", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18.2px;
    line-height: 26px;
    color: var(--text-primary);
    text-align: center;
  }
}

.body-section .body-section-overlay .text-img-section {
  display: flex;
  flex-direction: row;
}

.body-section .body-section-overlay .text-img-section .containt-img {
  width: 50%;

  img {
    width: 100%;
  }
}

.body-section .body-section-overlay .text-img-section .containt-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;

  button {
    width: 159.91px;
    height: 39.59px;
  }

  p {
    width: 537.22px;
  }

}

.body-section .body-section-overlay .text-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 0 10px 0;
  gap:20px;
  button {
    width: 612.13px;
    margin-bottom: 40px;
  }
}

.aobut-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-color);
  padding: 30px 0 30px 0;

  h1 {
    font-family: "Goblin One", serif;
    font-style: normal;
    font-weight: 500;
    font-size: 50.4px;
    line-height: 55.44px;
    color: var(--accent-color);
    text-align: center;
  }

  p {
    font-family: "Figtree", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18.2px;
    line-height: 26px;
    color: var(--accent-color);
    text-align: center;
    width: 1074.41px;
  }


}

.slider-item-container-1,
.slider-item-container-2,
.slider-item-container-3 {
  height: 650px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.slider-item-container-1 {
  background-image: url("./public/buffet.jpg");
}

.slider-item-container-2 {
  background-image: url("./public/food1.jpg");
}

.slider-item-container-3 {
  background-image: url("./public/restaurant-img-2.jpg");
}

.slider-item-container-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: rgb(0, 0, 0, 0.5);

  h1 {
    font-family: "Goblin One", serif;
    font-style: normal;
    font-weight: 500;
    font-size: 50.4px;
    line-height: 55.4px;
    color: var(--text-primary);
  }

  button {
    margin-top: 20px;
    width: 233.14px;
  }
}

.food-galliry {
  display: grid;
  grid-template-columns: repeat(5, 5fr);
  grid-template-rows: repeat(2, 1fr);

  div {
    height: 300px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

.div1,
.div8 {
  height: 600px !important;
}

.div1 {
  grid-column: span 2 / span 2;
  grid-row: span 2 / span 2;
   background-image: url("./public/food2.jpg");
}

.div2 {
  grid-column-start: 3;
   background-image: url("./public/foods/186b8c0a5afb1d1680c5dc94dc900a32.jpg");
}

.div3 {
  grid-column-start: 4;
   background-image: url("./public/foods/21a807fa26078356a82a72893d211d40.jpg");
}

.div4 {
  grid-column-start: 5;
   background-image: url("./public/foods/3af179a31428f8ef2344d0f3c659a599.jpg");
}

.div5 {
  grid-column-start: 3;
  grid-row-start: 2;
   background-image: url("./public/foods/3d51bd3ba5e62f842558c025198a8d5d.jpg");
}

.div6 {
  grid-column-start: 4;
  grid-row-start: 2;
   background-image: url("./public/foods/6d0d04166b85c9dbe8051f007719ef1e.jpg");
}

.div7 {
  grid-column-start: 5;
  grid-row-start: 2;
   background-image: url("./public/foods/6dad7cc4db1027af1820f10e23a3d819.jpg");
}

.div8 {
  grid-column: span 2 / span 2;
  grid-row: span 2 / span 2;
  grid-row-start: 3;

   background-image: url("./public/foods/829c75c08fab9ec254d360fea5cb5626.jpg");
}

.div9 {
  grid-column-start: 3;
  grid-row-start: 3;
   background-image: url("./public/foods/8ae34ea2b29cb154250e058901105b57.jpg");
}

.div10 {
  grid-column-start: 4;
  grid-row-start: 3;

   background-image: url("./public/foods/ba3086a8b3d467b179870c4a0028fa76.jpg");
}

.div11 {
  grid-column-start: 5;
  grid-row-start: 3;
   background-image: url("./public/foods/cb9f5c9bf9361d814d01ad5733de3fc1.jpg");
}

.div12 {
  grid-column-start: 3;
  grid-row-start: 4;
   background-image: url("./public/foods/d329ef147c001b9552c6525316a667c6.jpg");
}

.div13 {
  grid-column-start: 4;
  grid-row-start: 4;
   background-image: url("./public/foods/cb9f5c9bf9361d814d01ad5733de3fc1.jpg");
}

.div14 {
  grid-column-start: 5;
  grid-row-start: 4;
   background-image: url("./public/foods/e602a01ed01bd8d51946146dfb4aa5d3.jpg");
}

.map-container {
  iframe {
    width: 100%;
  }
}

.footer-container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  background-color: var(--accent-color);
  padding: 40px 0 40px 0 40px;

  h1 {
    font-family: "Goblin One", serif;
    font-style: normal;
    font-weight: 500;
    font-size: 23.52px;
    line-height: 25.872px;
    color: var(--text-secondary);
    margin-top: 20px;
    margin-bottom: 10px;
  }

  p {
    font-family: "Figtree", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16.8px;
    line-height: 24px;
    color: var(--text-secondary);
  }
}

.footer-container .location-container {
  margin-top: 20px;
  margin-bottom: 20px;
}

.footer-container .hours-container {
  margin-top: 20px;
  margin-bottom: 20px;
}

.footer-container .contact-us-container {
  margin-top: 20px;
  margin-bottom: 20px;
}

.footer-container .contact-us-container .sociales-links-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-top: 20px;
  margin-bottom: 40px;

  img {
    width: 20px;
  }
}

.creadte {
  background-color: var(--primary-color);
  padding: 10px 0 10px 0;

  p {
    text-align: center;
    font-family: "Figtree", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16.8px;
    color: var(--text-primary);
    padding: 0px;
    margin: 0px;
  }
}


/* Small mobile devices (max 576px) */
@media (max-width: 576px) {}

/* Medium mobile devices and small tablets (max 768px) */
@media (max-width: 768px) {
  .overlap-container {
    height: fit-content;
  }

  .overlap-container .hero-section .video-overlay {
    align-self: flex-end;
  }

  .overlap-container .mid-section {
    top: 0px;
  }

  .overlap-container .mid-section .containt-container .containt {
    h1 {
      height: 150px;
      width: 150px;
      font-size: 30px;
    }


    button {
      font-size: 10px;
      padding: 8px 0px 8px 0px;
    }
  }

  .body-section .body-section-overlay {
    h1 {
      font-size: 32.2px;
      line-height: 35.42px;
      color: var(--text-primary);

    }

    h2 {
      font-size: 19.6px;
      line-height: 21.56px;
      text-align: center;
    }

    p {

      font-size: 15.4px;
      line-height: 22px;
      width: 320.27px;
    }
  }

  .body-section .body-section-overlay .text-img-section {
    flex-direction: column;
  }

  .body-section .body-section-overlay .text-img-section .containt-img {
    width: 100%;
    margin-top: 20px;
  }

  .body-section .body-section-overlay .text-img-section .containt-text {
    width: 100%;

    p {

      width: 320.27px;
    }
  }

  .body-section .body-section-overlay .text-section {
    button {
      width: 280px;
      height: fit-content;
    }
  }

  .aobut-section {
    img {
      height: 130px;
    }

    h1 {
      font-size: 32.2px;
      line-height: 35.42px;
    }

    p {
      font-size: 15.4px;
      line-height: 22px;
      width: 315px;
    }
  }

  .food-galliry {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .food-galliry div {
    height: 200px;
  }

  .div1,
  .div8 {
    grid-column: span 2;
    grid-row: auto;
    height: 400px !important;
  }

  .div2,
  .div3,
  .div4,
  .div5,
  .div6,
  .div7,
  .div9,
  .div10,
  .div11,
  .div12,
  .div13,
  .div14 {
    grid-column: span 1;
    grid-row: auto;
  }

  .footer-container {
    flex-direction: column;

    p {
      text-align: center;
    }
  }

  .footer-container .location-container,
  .hours-container,
  .contact-us-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}


/* Larger tablets (max 992px) */
@media (max-width: 992px) {
  .overlap-container .hero-section .video-overlay {
    align-self: flex-end;
  }

  .overlap-container .mid-section {
    top: 0px;
  }
}