.nav-custom {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  overflow: auto;
  background: #fff;
  position: relative;
  z-index: 5;
}

.nav-custom .container-fluid {
  max-width: 1140px;
}

.nav-custom .menu-container ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin-bottom: 0;
  padding: 25px 0;
}

.nav-custom .menu-container ul li a:first-child {
  border-left: 1px #003E39 solid;
}

.nav-custom .menu-container ul li a:last-child {
  border-right: none !important;
}

.nav-custom .menu-container ul li a {
  color: #000;
  text-transform: uppercase;
  font-size: 14px;
  padding: 30px 25px;
  background: #fff;
  border-right: 1px #003E39 solid;
  transition: color .2s ease-in-out, background .3s ease-in-out;
}

.nav-custom .menu-container ul li a:hover {
  color: #fff;
  background: #003E39;
}

/* Hamburger menu styles */
.hamburger-menu-container {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}

.hamburger-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  position: absolute;
  top: -40px;
}

.hamburger-menu-btn .open {
  top: -75px;
}

.hamburger-menu-icon {
  display: block;
  width: 30px;
  height: 2px;
  background-color: #000;
  position: relative;
}

.hamburger-menu-icon:before,
.hamburger-menu-icon:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #000;
  position: absolute;
  transition: transform 0.3s ease;
}

.hamburger-menu-icon:before {
  top: -10px;
}

.hamburger-menu-icon:after {
  top: 10px;
}

.hamburger-menu-btn.open .hamburger-menu-icon {
  background-color: transparent;
}

.hamburger-menu-btn.open .hamburger-menu-icon:before {
  transform: translateY(10px) rotate(45deg);
}

.hamburger-menu-btn.open .hamburger-menu-icon:after {
  transform: translateY(-10px) rotate(-45deg);
}

.mobile-menu ul {
  display: none;
}

.mobile-menu ul.open {
  display: block;
}


@media (max-width: 767px) {
  .menu-container {
    display: none !important;
  }

  .menu-container.open {
    display: block; /* Show the main menu when .open class is applied */
  }

  .mobile-menu {
    display: block;
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  .menu-container {
    display: none;
  }