.popular-section {
  padding: 4rem 2rem;
  background-color: #fefefe;
  text-align: center;
  margin-top: 3rem; /* Space above the section */
}

.popular-row {
  margin-bottom: 3rem; /* Added more space between rows */
}

.popular-row h3 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem; /* Increased space below the category title */
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem; /* More space between icon and title */
}

.popular-items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4.5rem; /* More space between columns */
}

.item {
  background-color: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  width: 220px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease;
  margin-bottom: 2rem; /* Space between rows */
}

.item img {
  width: 100%;
  height: 200px; /* Slightly taller images */
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1rem; /* More space between image and text */
}

.item p {
  font-weight: 600;
  color: #444;
  margin: 0;
}

.item:hover {
  transform: translateY(-8px); /* Slightly stronger hover effect */
}

/* Media Queries for smaller screens */

/* For screens 768px and below (tablets and mobile landscape) */
@media (max-width: 768px) {
  .popular-items {
    gap: 2rem; /* Less space between columns */
  }

  .item {
    width: 280px; /* Adjust item width for smaller screens */
  }

  .popular-row h3 {
    font-size: 1.3rem; /* Smaller font size for titles */
  }
}

/* For screens 480px and below (small mobile screens) */
@media (max-width: 480px) {
  .popular-items {
    gap: 1.5rem; /* Reduced gap between items */
  }

  .item {
    width: 90%; /* Items take up more space on small screens */
    padding: 1rem; /* Reduced padding for better fitting */
  }

  .popular-row h3 {
    font-size: 1.1rem; /* Smaller font size for mobile screens */
  }

  .item img {
    height: 180px; /* Slightly smaller images for small screens */
  }
}