/* Container for navbar */
    .container {
    background-color: #2c3e50;
    color: #ffffff;   
    text-align: center;
    position: relative;
    padding: 20px 15px;
  
    max-width: 1200px; /* Maximum width of the container */
    margin: 20px auto; /* Centers the container horizontally with some top and bottom margin */
    margin-bottom: 0;
    
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}

h1 {
    color:white; /* Example heading color */
    text-align: center; /* Centers the heading text */
    margin-bottom: 20px; /* Adds some space below the heading */
}
    .navbar-container {
      background-color: #004080;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0;
    }

    /* Mobile menu toggle button */
    .navbar-toggle {
      display: none;
      background-color: #003366;
      color: white;
      border: none;
      width: 100%;
      padding: 12px;
      font-size: 18px;
      text-align: left;
      cursor: pointer;
    }

    /* Menu styles */
    .nav-menu {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      background-color: #004080;
    }

    .nav-menu li {
      list-style: none;
    }

    .nav-menu li a {
      display: block;
      padding: 14px 20px;
      text-decoration: none;
      color: white;
      font-weight: 500;
      font-size: 20px;
    }

    .nav-menu li a:hover {
      background-color: #0066cc;
    }

.user-area {
  margin-top: 12px;
  font-size: 1rem;
  background-color: rgba(255, 255, 255, 0.1); /* Light transparent bg */
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-block;
}

.user-greeting {
  font-weight: 600;
  margin-right: 12px;
  color: #ffeb3b; /* yellowish for highlight */
}

.user-area a {
  color: #ffffff;
  text-decoration: none;
  margin: 0 6px;
  font-weight: 500;
}

.user-area a:hover {
  text-decoration: underline;
  color: #90caf9; /* light blue on hover */
}



    /* Mobile view */
    @media (max-width: 768px) {
      .nav-menu {
        display: none;
        flex-direction: column;
      }

      .nav-menu.show {
        display: flex;
      }

      .navbar-toggle {
        display: block;
      }

      .nav-menu li a {
        border-top: 1px solid #0059b3;
         font-size: 16px; 
      }
      .container {
        padding: 10px; /* Reduce padding on smaller screens */
        margin: 15px auto; /* Adjust margin for smaller screens */
         margin-bottom: 0;
    }

    h1 {
        font-size: 1.8em; /* Adjust heading font size for smaller screens */
        margin-bottom: 15px;
    }
    }
     .user-area {
    font-size: 0.95rem;
    display: block;
    padding: 10px;
    margin-top: 10px;
  }

  .user-greeting,
  .user-area a {
    display: block;
    margin: 4px 0;
  }