@import url("https://fonts.googleapis.com/css2?family=Bevan:ital@0;1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bevan:ital@0;1&family=Bonheur+Royale&display=swap");

/* common styles */
html {
  scroll-behavior: smooth;
}
:root {
  --color: whitesmoke;
  --bg-color: #c5212b;
  --yellow-color: #e6900f;
}
body {
  background-color: #fde9ca !important;
}
.custom-h2 {
  color: var(--bg-color);
  font-weight: bold;
  font-size: 2.62rem;
  font-family: bevan;
  margin: 1.8rem;
}
p {
  font-family: inter;
  font-size: 1.2rem;
  line-height: 1.5;
  color: black;
  font-weight: bold;
}
.naanspan {
  color: rgb(185, 0, 0);
  font-family: "Bevan";
  font-weight: lighter;
  font-size: 1.3rem;
}

/* navbar-css */

.custom-nav {
  background-image: url("images/navbg.jpg");
  padding: 0rem 0.8rem !important;
  min-height: 60px;
  box-shadow: 0px 5px 0.8em black;
}
.web-logo {
  max-height: 80px;
  height: auto;
  width: auto;
  margin-top: 0.8rem;
  margin-left: 1.8rem;
}
.navbar-nav {
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-item {
  font-family: bevan;
  font-size: 1.35em;
  line-height: 4rem;
  color: var(--color);
  transition: all 0.1s linear 0s;
}
.btn-call {
  background-color: var(--yellow-color);
  color: var(--color);
  border: solid red 0.25rem;
  padding: 0rem;
  width: 12rem;
  font-size: 1.3rem;
  transition: all 0.3s linear 0s;
}
.btn-call:hover {
  background-color: transparent;
  border: none;
}
.nav-item:hover {
  transform: scale(105%);
  color: var(--color);
  text-decoration: underline;
  outline: var(--yellow) solid 2.5px;
}

/* carousel-img */
#carouselExampleControls {
  margin-top: 11vh;
}
#carouselExampleControls .carousel-item img {
  object-fit: cover;
  object-position: center;
  height: 100vh;
}
/* our-story */

#storysection {
  background-color: var(--bg-color);
}
.ourstorybg {
  background-image: url("images/ourstory.jpg");
  background-size: cover;
  height: 80vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ourstorytitle {
  font-size: 5.4rem;
  font-family: bevan;
  color: white;
  margin-top: 11rem;
  text-shadow: 5px 5px red;
}

.ourstoryinfo {
  background-color: #fde9ca;
}
.origin-bg {
  background-image: url("images/naan.png");
  background-size: cover;
  position: relative;
  z-index: 10;
  aspect-ratio: 1/1;
  border-radius: 50%;
  filter: drop-shadow(11px 7px 0.8rem rgb(0, 0, 0));
}
.origin-title {
  font-size: 3.2rem;
  font-family: bevan;
  color: white;
  text-shadow: 5px 5px red;
}
.origin-para {
  font-family: inter;
  font-size: 1.4rem;
  line-height: 1.5;
  color: black;
  font-weight: bold;
}
.origin-para-bg {
  background-color: var(--yellow-color);
  border-radius: 1rem;
  box-shadow: 4px 4px 0.8rem rgb(0, 0, 0);
}

/* EXPLORE FOOD SECTION */

.explore-food {
  background-color: var(--bg-color);
  border: 1rem solid var(--yellow-color);
}
.explore-food h2 {
  color: #ffc107;
  font-weight: bold;
  font-size: 2.62rem;
  font-family: bevan;
  margin: 1.8rem;
  text-shadow: 4px 4px black;
}
.explore-food p {
  font-size: 1.8rem;
  color: rgb(255, 255, 255);
}
.explore-food .card {
  background-color: transparent;
  border-radius: 1rem;
  border: 0.2rem dashed var(--yellow-color);
}
.explore-food img {
  border-radius: 1rem;
  object-fit: cover;
  height: 40vh;
}
.card-title {
  font-family: inter;
  font-size: 1.6rem;
  color: rgb(255, 255, 255);
  font-weight: bold;
  letter-spacing: 0.2rem;
}
.card-text {
  font-family: inter;
  font-size: 1.1rem !important  ;
  color: rgb(255, 255, 255);
  font-style: italic;
  font-weight: normal;
  margin-bottom: 0.5rem;
}
.card span {
  display: block;
  font-family: inter;
  font-size: 1.85rem;
  color: rgb(255, 255, 255);
  font-weight: 700;
  border-bottom: 0.2rem solid var(--yellow-color);
  padding-bottom: 0.5rem;
}
.card del {
  font-size: 1.42rem;
  color: #1b1e219e;
}
.order-btn {
  background-color: var(--yellow-color);
  color: var(--color);
  font-weight: 700;
  border: none;
  outline: none;
  padding: 0.4rem;
  width: 12rem;
  font-size: 1.3rem;
  margin-top: 1rem;
  border-radius: 5px;
  transition: all 0.1s linear 0s;
  margin: 0.55rem;
}

.order-btn:hover {
  background-color: transparent;
  border: solid 0.2rem #e6900f;
}

/* LASSI SECTION */
.lassi-img {
  height: 54vh !important;
  filter: drop-shadow(15px -10px 0.8rem rgb(0, 0, 0));
}
.lassi-img:hover {
  transform: scale(110%);
  transition: ease 0.3s;
}

/* REVIEW SSECTION */
.review-section {
  background: url(images/review-bg.jpg) no-repeat center;
  background-size: cover;
}
.review-section .carousel-inner {
  width: 75%;
  margin: 0 auto;
}
.review-section .carousel-item {
  padding: 10rem 3rem;
  border-radius: 1rem;
  text-align: center;
}
.review-section .carousel-item img {
  max-width: 9rem;
  border-radius: 50%;
  border: 0.2rem solid var(--bg-color);
}
.review-section .carousel-item .carousel-caption h5 {
  color: var(--bg-color);
  font-family: bevan;
  margin: 0.9rem;
}

/* RESERVATION SECTION */

.reservation-section {
  width: 100%;
  background: url("images/dessert.webp") no-repeat center;
  background-size: cover;
  background-attachment: fixed;
  background-position: 0 10.4rem;
  padding: 4rem 0;
}

.reservation-section h2 {
  font-family: "Bonheur Royale", cursive;
  font-weight: bold;
  color: #7f0e10;
  font-size: 4.2rem;
  margin-bottom: 2rem;
}
.reservation-section p {
  font-family: inter;
  font-weight: bold;
  color: black;
  font-size: 1.5rem;
}
.book-btn {
  background-color: var(--bg-color);
  color: var(--color);
  border: none;
  padding: 1rem;
  width: 12rem;
  font-size: 1.3rem;
  transition: all 0.3s linear 0s;
}
.book-btn:hover {
  background-color: transparent;
  border: solid var(--bg-color) 0.25rem;
  color: var(--bg-color);
}
/*  FOOTER SECTION */

.footer-section {
  background-color: #7f0e10;
}
.footer-section a {
  color: white;
}
.footer-section h5 {
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}
.fa-brands {
  font-size: 1.3rem;
}
.footer-section a:hover {
  color: var(--yellow-color);
}

@media (max-width: 768px) {
  .navbar-nav {
    background-color: rgba(116, 44, 44, 0.8);
  }
  .web-logo {
    max-height: 70px;
  }
  .ourstorytitle {
    font-size: 4.4rem;
    margin-top: 0;
  }
  .lassi-text p {
    font-size: 1.4rem;
  }
  .lassi-text h2 {
    font-size: 2.35rem;
  }
  .lassi-img {
    height: 40vh !important;
  }
  .review-section .carousel-item {
    padding: 13.5rem 3rem;
  }
  .review-section .carousel-item .carousel-caption h5 {
    font-size: 1.1rem;
    margin: 0.4rem;
  }
  .review-section .carousel-item .carousel-caption p {
    font-size: 1.1rem;
    margin-bottom: 5rem;
  }
  .reservation-section {
    background-position: 0 6.4rem;
  }
}