body {
  font-family: "Jost", sans-serif;

  background-color: #f4f4f4;
}

.navbar-nav .nav-link {
  transition: color 0.3s;
}

.navbar-nav .nav-link:hover {
  color: #007bff;
}

@media (max-width: 576px) {
  .navbar {
    flex-direction: column;
  }

  .navbar-collapse {
    width: 100%;
  }

  .nav-item {
    text-align: center;
  }
}

.menn {
  font-weight: bold;

  font-size: 55px;

  color: black;

}

.hero-section {
  height: 100vh;

  background-image: url("../images/menu_img/menyu.png");

  background-size: cover;

  background-position: center;

  position: relative;

  color: #fff;
}

.or {
  color: black;

}

.hero-section::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  /* background-color: rgba(188, 169, 169, 0.5); */

  z-index: 1;
}

.container {
  position: relative;

  z-index: 2;
}

h1 {
  font-weight: bold;

  font-size: 3rem;

  color: rgb(117, 9, 9);
}

p.lead {
  font-size: 1.25rem;

  color: black;
}

.btn-primary {
  background-color: #c52d03;

  border: none;

  padding: 0.20rem 0.5rem;

  font-size: 1.2rem;

  border-radius: 50px;

  transition: background-color 0.3s ease;

}

.btn-primary:hover {
  background-color: #e55d50;
}

/* Mobile responsiveness */

@media (max-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }

  p.lead {
    font-size: 1.1rem;
  }

  .btn-primary {
    font-size: 1rem;
  }
}

.stats-section {
  background-color: #f8f9fa;
}

.box {
  border-radius: 10px;

  transition: transform 0.3s ease;
}

.box:hover {
  transform: translateY(-10px);
}

h2 {
  color: #ff6f61;
}

p.lead {
  font-weight: bold;
}

@media (max-width: 768px) {
  h2 {
    font-size: 2.5rem;
  }

  p.lead {
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  .col-md-4 {
    text-align: center;
  }
}

@media (max-width: 576px) {
  .col-md-4 {
    width: 100%;

    text-align: center;

    margin-bottom: 20px;
  }

  iframe {
    width: 100%;
  }
}

.bg {
  background-color: rgb(47, 62, 67);
}

.feedback-section {
  background-color: #f8f9fa;
}

.section-title {
  font-size: 2.5rem;

  color: #ff6f61;

  font-weight: bold;
}

.section-subtitle {
  color: #6c757d;

  font-size: 1.1rem;

  margin-bottom: 2rem;
}

.feedback-box {
  background-color: #fff;

  border-radius: 10px;

  transition: transform 0.3s ease;
}

.feedback-box:hover {
  transform: translateY(-10px);
}

.feedback-box h5 {
  font-weight: bold;

  color: #333;
}

.feedback-box p {
  font-style: italic;
}

.rounded-circle {
  border: 2px solid #ff6f61;
}

@media (max-width: 768px) {
  .section-title {
    font-size: 2rem;
  }

  .section-subtitle {
    font-size: 1rem;
  }

  .feedback-box h5 {
    font-size: 1.25rem;
  }

  .feedback-box p {
    font-size: 0.95rem;
  }
}

.section_container_i {
  padding: 1rem 0;

  background-color: #f8f9fa;

  margin: auto;
}

.section_header {
  font-size: 2rem;

  margin-bottom: 1.5rem;

  color: #333;
}

.popular_slider {
  display: flex;

  overflow-x: auto;

  scroll-behavior: smooth;
}

.popular_slider::-webkit-scrollbar {
  display: none;
}

.popular_card {
  flex: 0 0 auto;

  margin: 1rem;

  border: 1px solid #ddd;

  border-radius: 10px;

  background-color: #fff;

  width: 250px;

  transition: transform 0.3s ease;
}

.card_image {
  height: 180px;

  border-top-left-radius: 10px;

  border-top-right-radius: 10px;


}

.popular_card img {
  border-top-left-radius: 10px;

  border-top-right-radius: 10px;

  width: 100%;

  height: 100%;

  object-fit: cover;
}

.popular_card:hover {
  transform: scale(1.05);
}

.popular_contant {
  padding: 0.2rem;
}

.popular_card_header h5 {
  margin: 0;

  text-transform: uppercase;
  font-size: 1.2rem;

  color: #333;
}

.popular_card_header h6 {
  font-size: 1rem;

  color: #888;


}

.popular_card_header {
  height: 5.2rem;
  margin-bottom: 20px;
}
.popular_card_name{
  height:2.5rem ;
  margin-top: 10px;
}
.popular_card_address{
  margin-top: 10px;
  height: 1.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.distance{
  height: 1.1rem;
  margin-top: 10px;
  margin-bottom: 10px;
}

.btn-menu {
  display: block;

  width: 100%;

  margin-top: 10px;
}

.heart-icon {
  position: absolute;

  top: 10px;

  right: 10px;

  color: red;
}

/* Responsive adjustments */

@media (max-width: 768px) {
  .popular_card {
    width: 230px;
  }

  .popular_contant {
    padding: 1rem;

  }
}

@media (max-width: 425px) {
  .popular_card {
    width: 230px;
  }

  .popular_contant {
    padding: 10px;

  }
}

.container_r {
  padding: 0.5rem;
  display: flex;
  justify-content: center;
}

.review-container {
  padding: 20px;

  background-color: rgb(246, 208, 208);

  border-radius: 8px;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  margin-top: 20px;
}

.img-fluid {
  width: 100%;

  height: auto;

  border-radius: 8px;

  margin-bottom: 20px;
}

.headding {
  color: #9f0f0f;

  font-family: "Times New Roman", serif;

  font-size: 48px;

  text-align: center;

  margin-bottom: 20px;
}

.review-images {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 20px;
}

.review-images img {
  width: calc(33.333% - 10px);

  border-radius: 8px;

  transition: transform 0.3s;
}

.review-images img:hover {
  transform: scale(1.05);
}

.review-card {
  background-color: white;

  border: none;

  border-radius: 8px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  padding: 20px;

  margin-bottom: 20px;
}

.ratting i {
  font-size: 24px;

  cursor: pointer;

  color: rgb(252, 220, 60);
}

.ratting i.active-star {
  color: gold;
}

.confirm-button {
  text-align: center;

  margin-top: 10px;
}

.rounded-circle {
  border: 2px solid #007bff;

  padding: 5px;
}

.card-text {
  color: #333;

  font-size: 18px;
}

@media (max-width: 768px) {
  .review-images img {
    width: calc(50% - 10px);
  }
}

@media (max-width: 576px) {
  .review-images img {
    width: 100%;
  }

  .headding {
    font-size: 32px;
  }
}

.footer-contact {
  text-decoration: none;
  color: #fff;
}

.footer-contact:hover {
  text-decoration: underline;
  color: #fff;
}

section {
  position: relative;
  z-index: 99;
}

.scroll-arrow {
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 71px;
  /* Adjust as needed to position it vertically */
  font-size: 32px;
  font-weight: 700;
  /* Adjust for arrow size */
  background: transparent;
  border: none;
  cursor: pointer;
  background-color: lightblue;
  color: black;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  z-index: 100;

}

.blink {
  animation: blink-animation 2s steps(5, start) infinite;
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}



#scrollToTopBtn {

  background-color: lightblue;
  color: black;
  position: fixed;
  bottom: 20px;
  right: 20px;
  border-radius: 50%;
  border: none;
  font-size: 32px;
  cursor: pointer;
  display: none;
  /* Hide by default */
  height: 50px;
  width: 50px;
}