/* Hero Section */
.hero-section {
    position: relative;
    height: 100vh; /* Full screen height */
    background: url("/front-assets/media/images/menu/meatmoot-menu-presentation.webp")
      no-repeat center center;
    background-size: cover;
    z-index: 1;
  }

  /* Darker overlay and larger gradient */
  .hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(23, 23, 24, 1), rgba(0, 0, 0, 0.5));
    z-index: 1;
  }

  /* Larger black gradient at the bottom to mimic the design */
  .hero-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%; /* Increased gradient size */
    background: linear-gradient(to top, rgba(23, 23, 24, 1), rgba(0, 0, 0, 0.5));
    z-index: 1;
    filter: blur(10px); /* Slight blur for smoother transition */
  }

  /* LET'S MEAT background text */
  .hero-section .lets-meat {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 150px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.012);
    z-index: 2;
    text-transform: uppercase;
    text-wrap: nowrap;
    line-height: 1;
    pointer-events: none; /* Text should not interfere with user interactions */
  }

  @media (max-width: 992px) {
    .hero-section .lets-meat {
      font-size: 100px;
    }
    .experience-text {
      font-size: 1rem !important;
      color: #e0e0e0;
      width: 100% !important;
    }
  }

  @media (max-width: 768px) {
    .hero-section .lets-meat {
      font-size: 80px;
      text-wrap: wrap;
    }

    .experience-text {
      font-size: 14px !important;
      color: #e0e0e0;
      width: 100% !important;
    }
  }

  /* Content inside the hero section */
  .hero-section .content {
    position: relative;
    z-index: 3;
    color: #ef8903;
    font-family: "Playfair Display", serif;
  }

  .hero-title {
    font-size: 80px;
    font-family: "Playfair Display", serif;
    z-index: 3;
  }

  .underline {
    width: 100px;
    height: 6px;
    background-color: #ef8903;
    margin: 20px auto 0;
    z-index: 3;
  }

  /* Blurred effect at the bottom */
  .hero-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%; /* Adjusted for larger gradient */
    background: linear-gradient(to top, rgb(23, 23, 24, 1), rgb(23, 23, 24, 0.3));
    z-index: 1;
    filter: blur(20px); /* Blur effect */
  }

  /* New Section after LET'S MEAT */
  .experience-section {
    background-color: #171718;
    color: #fff;
  }

  .experience-text {
    font-size: 24px;
    width: 70%;
    color: #e0e0e0;
  }

  .font-weight-bold {
    font-weight: bold;
  }

  .btn-location {
    background-color: #c29c68;
    padding: 18px 30px 18px 25px;
    font-size: 18px;
  }

  .btn-location:hover {
    background-color: #b48857;
  }

  .underline {
    width: 80px;
    height: 3px;
    background-color: #b48857;
  }

  /* Ensure the underline is centered */
  .underline.mt-2 {
    margin-top: 10px;
  }

  .items-section {
    background-color: #171718; /* Dark background */
  }

  .section-title {
    font-size: 50px;
    color: #c29c68; /* Title color */
  }

  .card-item {
    border: 1.5px solid var(--color-brand--1);
    background-color: #171718;
  }

  .card-content {
    background-color: #171718;
    text-align: left;
  }

  .item-title {
    font-size: 54px;
    color: #c29c68;
    margin-top: 15px;
  }

  .item-description {
    font-size: 18px;
    line-height: 1.8;
    color: #e0e0e0;
    max-width: 480px;
    margin-top: 30px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 60px;
    word-spacing: 10px;
  }

  .menu-knife-image {
    height: 120px; /* Set the height you prefer */
    width: auto; /* Maintain the aspect ratio */
    object-fit: contain; /* Ensures the image covers the container without distortion */
    padding-top: 10px;
  }

  .image-fill {
    width: 100%; /* Make the image fill the width of the container */
    height: 100%; /* Make the image fill the height of the container */
    object-fit: cover; /* Ensure the image covers the container without distortion */
  }

  .discover-menu {
    background-color: #171718;
  }

  .discover-menu-title {
    font-size: 34px;
    color: #c29c68;
    text-transform: uppercase;
    font-family: "Playfair Display", serif;
    font-weight: 600;
  }
  .discover-menu-description {
    font-size: 22px;
  }

  /* Lets Meat Heading  */
  .btn-transparent {
    background-color: transparent;
    border: 2px solid var(--color-brand--1);
    color: var(--color-brand--1);
    padding: 15px 30px;
    border-radius: 0;
  }

  .btn-transparent:hover {
    background-color: var(--color-brand--1);
    color: white;
  }
  .letsmeat img {
    width: 30%;
    height: auto;
  }

  /* Initial state for fade-in and move-from-bottom */
  .item-title {
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .item-description {
    opacity: 0;
    transform: translateY(20px); /* Move 20px from the bottom */
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  }

  /* When elements come into view */
  .fade-in {
    opacity: 1;
  }

  .move-up {
    opacity: 1;
    transform: translateY(0); /* Move to its original position */
  }

  /* footer */
  .last-section {
    padding-top: 2rem;
    background-color: #171718;
  }
  .stay {
    color: orange;
  }