/* Mobile Menu Visibility Fix */
/* This CSS file fixes the mobile navigation visibility issue */

@media (max-width: 768px) {
  /* Force mobile navigation items to be visible */
  nav.active ul li a,
  nav.active ul li .nav-link {
    color: #1a202c !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(102, 126, 234, 0.2) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    padding: 12px 20px !important;
    margin: 2px 4px !important;
    border-radius: 4px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-decoration: none !important;
    position: relative !important;
    z-index: 100 !important;
  }
  
  /* Hover states for mobile menu */
  nav.active ul li a:hover,
  nav.active ul li .nav-link:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border-color: rgba(102, 126, 234, 0.5) !important;
  }
  
  /* Active states for mobile menu */
  nav.active ul li a.active,
  nav.active ul li .nav-link.active {
    background: rgba(0, 0, 0, 0.9) !important;
    color: white !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
  }
  
  /* Make sure the container is visible */
  nav.active ul {
    background: rgba(255, 255, 255, 0.98) !important;
    padding: 8px !important;
  }
  
  nav.active ul li {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}