/* Global Styles */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f8f9fa;
  color: #333;
}

/* Navbar */


/* Main Content main */
.main {
  width: 80%; /* Limit the size of the main main */
  max-width: 600px; /* Restrict the maximum width */
  margin: 30px auto; /* Center the main horizontally */
  text-align: center;
  background-color: white; /* Optional: background for the main */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.main h1 {
  font-size: 1.8em; /* Slightly smaller title font size */
  margin-bottom: 20px;
}

/* Categories Section */
.categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two columns */
  gap: 15px; /* Smaller spacing between items */
  justify-items: center;
  padding: 10px;
}

.category-box {
  background-color: #d6f5d6;
  border-radius: 10px;
  text-align: center;
  padding: 15px;
  width: 150px; /* Reduce the size of boxes */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.category-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.category-box img {
  width: 80px; /* Smaller image */
  height: 80px;
  object-fit: cover;
  margin-bottom: 10px;
  border-radius: 50%;
}

.category-box h2 {
  font-size: 1em; /* Reduce font size */
  color: #333;
  margin-top: 10px;
}