/* Tablet Screens */
@media (max-width: 992px) {
  .side-nav {
    width: 200px;
    transform: translateX(-200px);
  }

  .side-nav.open ~ .main-content {
    margin-left: 200px;
  }

  .nav-links a {
    font-size: 16px;
  }

  .meal-card {
    height: 250px;
  }

  .meal-overlay h3 {
    font-size: 20px;
  }

  .category-card h3,
  .area-card h3,
  .ingredient-card h3 {
    font-size: 18px;
  }

  .meal-details-image {
    max-width: 100%;
    margin-bottom: 20px;
  }

  .meal-details-container h2 {
    font-size: 28px;
  }

  .meal-details-container h3 {
    font-size: 20px;
  }
}

/* Mobile Screens */
@media (max-width: 768px) {
  .side-nav {
    width: 180px;
    transform: translateX(-180px);
  }

  .side-nav.open ~ .main-content {
    margin-left: 0;
  }

  .nav-tab {
    right: -45px;
    width: 45px;
    height: 45px;
  }

  .nav-tab i {
    font-size: 1.5rem;
  }

  .nav-links a {
    font-size: 15px;
  }

  .main-content {
    padding: 15px;
  }

  .meal-card {
    height: 200px;
  }

  .meal-overlay h3 {
    font-size: 18px;
  }

  .category-card,
  .area-card,
  .ingredient-card {
    padding: 20px;
  }

  .category-card img {
    height: 150px;
  }

  .ingredient-card img {
    height: 120px;
  }

  .category-card h3,
  .area-card h3,
  .ingredient-card h3 {
    font-size: 16px;
  }

  .meal-details-image {
    max-width: 100%;
  }

  .meal-details-container h2 {
    font-size: 24px;
    text-align: center;
  }

  .meal-details-container h3 {
    font-size: 18px;
  }

  .meal-links {
    flex-direction: column;
  }

  .meal-links a {
    text-align: center;
  }

  .search-input,
  .contact-input {
    font-size: 14px;
    padding: 12px;
  }
}

/* Small Mobile Screens */
@media (max-width: 576px) {
  .side-nav {
    width: 160px;
    transform: translateX(-160px);
  }

  .nav-content {
    padding: 40px 15px 15px;
  }

  .nav-links a {
    font-size: 14px;
  }

  .social-links {
    gap: 10px;
  }

  .meal-card {
    height: 180px;
  }

  .meal-overlay h3 {
    font-size: 16px;
  }

  .category-card,
  .area-card,
  .ingredient-card {
    padding: 15px;
  }

  .category-card i,
  .area-card i {
    font-size: 35px;
  }

  .meal-details-image {
    max-width: 100%;
  }

  .meal-details-container h2 {
    font-size: 20px;
    text-align: center;
  }

  .meal-details-container h3 {
    font-size: 16px;
  }

  .meal-details-container p {
    font-size: 14px;
  }

  .recipe-item {
    font-size: 12px;
    padding: 6px 15px;
  }

  .tag-item {
    font-size: 12px;
    padding: 6px 15px;
  }
}