* {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
}
:root {
  --ourmenu-primary-100: white;
  --ourmenu-primary-700: #3e3f40;
  /* --ourmenu-primary-800: #A376A2; */
  /* --ourmenu-primary-800: #eba7f7; */
  /* --ourmenu-primary-800: #9a5de0ca; */
  --ourmenu-primary-800: #37145c97;
  --ourmenu-primary-900: #00050a;
    --ourmain-font: "Outfit", sans-serif;
    --ourheading-font:  "Kavoon", serif;
    --oursubtitle-font: "Roboto Condensed", sans-serif;
    --ourletter-space: 1px;
    --ourheading-font-size:43px;
    --oursubtitle-font-size:28px;
    --ourmain-font-size:18px;

}
.mealimage-wrapper {
  text-align: center;
  padding: 0 1rem 20px 1rem;
  /* background: #fff; */
  max-width: 1200px;
  margin: 0 auto;
}

.mealimage-heading {
  /* font-size: 3rem; */
  /* font-weight: 700; */
  /* color: #2a2a2a; */
  line-height: 1.3;
  margin-bottom: 1rem;
  margin-top: 1rem;

    font-weight: 600;
    /* font-size: 30px; */
    color: #250744db;
  font-family: var(--ourheading-font);
  text-transform:capitalize; 
  font-size: var(--ourheading-font-size);
}

.mealimage-heading span {
 color: #F8B259;
      font-family: var(--ourmain-font);
          font-size: 35px;
}

.mealimage-description {
  font-size: 1.1rem;
  color: #555;
    font-family: var(--ourmain-font);
  max-width: 1000px;
  margin: 0 auto 3rem;
  line-height: 1.6;
}

/* Responsive grid: 5 → 3 → 2 columns */
.mealimage-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  padding: 0 1rem;
}

/* ≤1013px: 3 columns */
@media (max-width: 1013px) {
  .mealimage-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ≤529px: 2 columns */
@media (max-width: 529px) {
  .mealimage-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.meal-img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 16px;
  transition: transform 0.3s ease;
}

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

/* Heading & paragraph responsiveness */
@media (max-width: 768px) {
  .mealimage-heading {
    font-size: 2.2rem;
  }

  .mealimage-description {
    font-size: 1rem;
  }

  .meal-img {
    height: 150px;
  }
}

@media (max-width: 480px) {
  .mealimage-heading {
    font-size: 1.8rem;
  }

  .mealimage-description {
    font-size: 0.95rem;
  }

  .meal-img {
    height: 130px;
  }
}