/* ========================================
   MEANMENU OVERRIDES FOR REACT NAVBAR
   ======================================== */

/* Hide meanmenu styles since we're using React component */
.mean-container .mean-bar,
.mean-container .mean-nav,
.mean-container a.meanmenu-reveal,
.mean-container .mean-push {
  display: none !important;
}

/* Override main-nav styles for React compatibility */
.main-nav {
  position: static !important;
  background: transparent !important;
  padding: 0 !important;
  width: 100% !important;
  z-index: auto !important;
}

.main-nav nav .navbar-nav .nav-item a {
  color: #000 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  padding: 8px 12px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

.main-nav nav .navbar-nav .nav-item a:hover {
  color: #ff6600 !important;
}

.main-nav nav .navbar-nav .nav-item a::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 2px !important;
  background-color: #ff6600 !important;
  transition: width 0.3s ease !important;
}

.main-nav nav .navbar-nav .nav-item a:hover::after {
  width: 100% !important;
}