/* CSS for menu bar */
.menu {
  background-color: #fff;
  box-shadow: 0 2px 4px #4c4a4a;
  padding: 10px 0;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.container1 {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.logo img {
  height: 40px;
}

.menu-toggle {
  display: none;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-items {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex; /* Ensure menu items are displayed properly */
}

.menu-items li {
  display: inline-block;
  margin-right: 20px;
}

.menu-items li:last-child {
  margin-right: 0;
}

.menu-items li a {
  color: #2e475d;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.menu-items li a:hover {
  color: #0068b1;
  text-decoration: underline;
}

/* Responsive styles */
@media screen and (max-width: 768px) {
  .container1 {
      justify-content: center;
  }

  .menu-toggle {
      display: block;
  }

  .menu-items {
      display: none;
      text-align: center;
      width: 100%; /* Ensure menu items take full width on mobile */
      flex-direction: column; /* Stack menu items vertically */
      position: absolute;
      top: 60px; /* Adjust this based on your header height */
      background-color: #fff;
      box-shadow: 0 2px 4px #4c4a4a;
      z-index: 1001; /* Ensure menu items are above the menu toggle */
  }

  .menu-items.active {
      display: flex;
  }

  .menu-items li {
      display: block;
      margin: 10px 0;
  }

  .menu-items li:last-child {
      margin-bottom: 0;
  }

  .menu-items li a {
      font-weight: 300; /* Set font weight to thin */
      font-size: 14px; /* Optional: Adjust font size for better readability */
      display: block; /* Ensure links are block-level for full clickable area */
      padding: 10px; /* Add padding for better touch target */
  }
}