nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li {
  position: relative;
  display: inline-block;
  margin-right: 20px;
}

nav ul li a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}

nav ul li:hover > ul {
  display: block;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  z-index: 1;
}

nav ul ul li {
  display: block;
  width: 200px;
}

nav ul ul li a {
  padding: 10px;
  color: #333;
  text-decoration: none;
}

nav ul ul li a:hover {
  background-color: #f5f5f5;
}

 .nav-bar {
    display: none; /* Hide the nav bar by default */
    position: absolute; /* Position the nav bar relative to the hamburger menu */
    top: 15%;  /*    Adjust the top position as needed */
    left: 6%;
    width: 32%;
    z-index: 99; /* Set a high z-index value to make sure the nav bar displays on top of following divs */
    /* background-color: #fff;  Add a background color to the nav bar */
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a box shadow to the nav bar */
  }

  .hamburger-icon {
/*    background-color: #eeeeff    display: block;
    position: absolute;
    left: 1%;
    margin-top: -10vh;

/*    width: 5%; 
    padding-bottom: 1%; */
    min-height: 32px;
    width: 64px; 
/*    padding-bottom: 1%; */
    background: url('/img/icon/menu-icon-04-tr.png') center center no-repeat;
    background-repeat: no-repeat;
    background-size: contain;
    
/*    background-image: url('/img/icon/hamburger-01-tr.png');*/
    border: none;
    /* z-index: 100; Set a higher z-index value than the nav bar to make sure the icon displays on top of it */
    position: relative; /* Position the icon relative to its parent container */
  }

  /* Show the nav bar when the hamburger icon is clicked */
  .hamburger-menu.active .nav-bar {
    display: block;
    width:20%;
    background-color: #022BA1;
    opacity: 0.8;
    border-radius: 12px;
  }

.nav-item {
    font-size: 18px;
    color: #009FDB;
    font-family: sans-serif;
    text-transform: uppercase;
    text-align: left;
    letter-spacing: 5px;
    font-weight: bold;
    width: 100%;
    display: inline-block;
    margin: auto;
    padding: 5px;
    margin: 5px;
  }

.nav-item:hover {
/*    background-color: #111111;*/
    color: #dddddd;
}

.nav-row {
  width: 92%;
  background-color: #ddeeff;
  opacity: 0.8;
  text-align: center;
  margin: auto;
  margin-top: 0.5%;
  border-radius: 15px;
  padding-top: 10px;
}

.nav-item-line {
  width: 16%;
  display: inline-block;
  font-size: 1.2vw;
  color: #335577;
  font-family: sans-serif;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  margin: auto;
  }

.nav-item-line:hover {
/*    background-color: #111111;*/
    color: #4422cc;
    text-shadow: 1px 1px #224422;
}

.nav-bar-2 {
  background-color: #222222;
  border-radius: 15px;
  opacity: 0.6;
  text-align: center;
  width: 96%;
  color: #eeeeee;
  margin: auto;
  margin-top: 1%;
}

.nav-item-2 {
    font-size: 0.9vw;
    color: #dddddd;
    font-family: sans-serif;
    text-transform: uppercase;
    text-align: center;
    vertical-align: middle;
    letter-spacing: 3px;
    font-weight: bold;
/*    width: 18%;*/
    display: inline-block;
    margin: auto;
    padding: 1%;
    padding-left: 3%;
    padding-right: 3%;
  }

.nav-item-2:hover {
/*    background-color: #111111;*/
    color: #66cc66;
}