body {
      font-family: Arial, sans-serif;
      margin: 0;
      background: #f5f6fa;
      color: #333;
      overflow-x: hidden;
    }
    
    
    /* Header */
    header {
      background-color: #2b2f36;
      color: #fff;
      padding: 15px;
      font-size: 1.3rem;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    header span {
      pointer-events: none;
    }

    /* Hamburger icon on the left */
    .menu-icon {
      position: absolute;
      left: 15px;
      color: #fff;
      font-size: 1.8rem;
      cursor: pointer;
      text-decoration: none;
    }

    .menu-icon:hover {
      opacity: 0.8;
    }


    /* Side menu styling */
    /* ✅ Header Section at Top */
    .menu-header {
      text-align: center;
      padding: 10px 10px;
      background-color: #004aad;
      color: white;
      border-bottom: 1px solid #00347a;
    }
    
    .menu-header h2 {
      font-size: 20px;
      margin: 10px 0 0 0;
    }
    
    .menu-logo {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }    
        
    .side-menu {
      position: fixed;
      top: 0;
      left: -250px; /* hidden by default */
      height: 100%;
      width: 240px;
      background-color: #ffffff; /* ✅ White background */
      box-shadow: 2px 0 10px rgba(0,0,0,0.2);
      padding-top: 0px;
      transition: left 0.3s ease;
      display: flex;
      flex-direction: column;
      z-index: 999;
    }
    
    .side-menu a {
      display: flex;
      align-items: center;
      gap: 12px; /* space between icon and text */
      padding: 14px 20px;
      text-decoration: none;
      color: #004aad; /* ✅ Blue text for visibility */
      font-size: 16px;
      font-weight: 500;
      border-bottom: 1px solid #eee;
    }
    
    .side-menu a:hover {
      background-color: #f5f6fa; /* light hover effect */
    }
    
    .side-menu i {
      color: #004aad; /* ✅ Blue icons */
      width: 22px;
      text-align: center;
      font-size: 1.2rem;
    }

    /* Show menu */
    .side-menu.open {
      left: 0;
    }

    /* Dimmed background when open */
    body.menu-open::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      z-index: 998;
    }