/* Industry-Level Professional Mobile Menu */
@media (max-width: 768px) {
    
    /* Mobile Menu Overlay - Professional backdrop */
    .mobile-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.98) 0%, rgba(17, 24, 39, 0.98) 100%) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        z-index: 9999 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 2rem !important;
    }

    .mobile-menu.show {
        transform: translateX(0) !important;
    }

    /* Menu Container */
    .mobile-menu > div {
        padding: 0 !important;
        padding-bottom: 2rem !important;
        max-width: 100% !important;
        min-height: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    /* Header Section - Close button area */
    .mobile-menu .flex.justify-end {
        padding: 1rem 1.25rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    /* Close Button - Professional styling */
    #mobile-menu-close {
        width: 2.5rem !important;
        height: 2.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 0.5rem !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: rgba(255, 255, 255, 0.9) !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        cursor: pointer !important;
    }

    #mobile-menu-close:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        transform: scale(1.05) !important;
    }

    #mobile-menu-close:active {
        transform: scale(0.95) !important;
    }

    #mobile-menu-close i {
        font-size: 1.125rem !important;
    }

    /* Menu Items Container */
    .mobile-menu .space-y-1 {
        padding: 0.75rem 0 !important;
        padding-bottom: 4rem !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.25rem !important;
    }

    /* Individual Menu Items - Industry Standard */
    .mobile-menu a {
        display: flex !important;
        align-items: center !important;
        padding: 0.875rem 1.25rem !important;
        margin: 0 0.75rem !important;
        border-radius: 0.75rem !important;
        color: rgba(255, 255, 255, 0.9) !important;
        text-decoration: none !important;
        font-size: 0.9375rem !important;
        font-weight: 500 !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        min-height: 3rem !important;
    }

    /* Menu Item Hover State */
    .mobile-menu a:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        transform: translateX(4px) !important;
        color: rgba(255, 255, 255, 1) !important;
    }

    /* Active Menu Item */
    .mobile-menu a.bg-primary-dark,
    .mobile-menu a[class*="bg-primary"] {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%) !important;
        border-color: rgba(16, 185, 129, 0.3) !important;
        color: #10b981 !important;
        font-weight: 600 !important;
    }

    /* Icons in Menu Items - Perfect Alignment */
    .mobile-menu a i {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 1.75rem !important;
        min-width: 1.75rem !important;
        height: 1.75rem !important;
        margin-right: 0.875rem !important;
        font-size: 1.125rem !important;
        color: rgba(16, 185, 129, 0.9) !important;
        background: rgba(16, 185, 129, 0.1) !important;
        border-radius: 0.5rem !important;
        transition: all 0.2s ease !important;
    }

    /* Active item icon */
    .mobile-menu a.bg-primary-dark i,
    .mobile-menu a[class*="bg-primary"] i {
        background: rgba(16, 185, 129, 0.2) !important;
        color: #10b981 !important;
    }

    /* Menu Item Text */
    .mobile-menu a span {
        flex: 1 !important;
        line-height: 1.5 !important;
        letter-spacing: 0.01em !important;
    }

    /* Divider Lines */
    .mobile-menu .border-t {
        margin: 0.75rem 1rem !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        border-width: 1px !important;
    }

    /* Contact Section - Professional Card */
    .mobile-menu .bg-gray-800 {
        margin: 0.75rem !important;
        margin-bottom: 2rem !important;
        padding: 1.25rem !important;
        padding-bottom: 1.5rem !important;
        background: linear-gradient(135deg, rgba(31, 41, 55, 0.6) 0%, rgba(17, 24, 39, 0.6) 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 1rem !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
    }

    /* Contact Section Title */
    .mobile-menu .bg-gray-800 h3 {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: rgba(16, 185, 129, 0.9) !important;
        margin-bottom: 1rem !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
    }

    /* Contact Links */
    .mobile-menu .bg-gray-800 a {
        margin: 0 !important;
        padding: 0.75rem 0 !important;
        border-radius: 0.5rem !important;
        font-size: 0.875rem !important;
        color: rgba(255, 255, 255, 0.8) !important;
        min-height: auto !important;
    }

    .mobile-menu .bg-gray-800 a:hover {
        background: rgba(255, 255, 255, 0.05) !important;
        transform: none !important;
        padding-left: 0.5rem !important;
    }

    /* Contact Icons */
    .mobile-menu .bg-gray-800 a i {
        width: 1.5rem !important;
        min-width: 1.5rem !important;
        height: 1.5rem !important;
        margin-right: 0.75rem !important;
        font-size: 0.875rem !important;
        background: rgba(16, 185, 129, 0.15) !important;
    }

    /* Social Media Icons - Horizontal Row */
    .mobile-menu .bg-gray-800 .flex.items-center {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.75rem !important;
        margin-top: 0.75rem !important;
    }

    .mobile-menu .bg-gray-800 .flex.items-center a {
        width: 2.5rem !important;
        height: 2.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 0.625rem !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 1.125rem !important;
        transition: all 0.2s ease !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: auto !important;
    }

    .mobile-menu .bg-gray-800 .flex.items-center a:hover {
        background: rgba(16, 185, 129, 0.2) !important;
        border-color: rgba(16, 185, 129, 0.4) !important;
        color: #10b981 !important;
        transform: translateY(-2px) scale(1.05) !important;
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
    }

    /* Scrollbar Styling */
    .mobile-menu::-webkit-scrollbar {
        width: 4px !important;
    }

    .mobile-menu::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.2) !important;
    }

    .mobile-menu::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2) !important;
        border-radius: 2px !important;
    }

    .mobile-menu::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.3) !important;
    }

    /* Animation for menu items */
    .mobile-menu.show a {
        animation: slideInLeft 0.3s ease-out backwards !important;
    }

    .mobile-menu.show a:nth-child(1) { animation-delay: 0.05s !important; }
    .mobile-menu.show a:nth-child(2) { animation-delay: 0.1s !important; }
    .mobile-menu.show a:nth-child(3) { animation-delay: 0.15s !important; }
    .mobile-menu.show a:nth-child(4) { animation-delay: 0.2s !important; }
    .mobile-menu.show a:nth-child(5) { animation-delay: 0.25s !important; }
    .mobile-menu.show a:nth-child(6) { animation-delay: 0.3s !important; }

    @keyframes slideInLeft {
        from {
            opacity: 0;
            transform: translateX(-20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Backdrop overlay when menu is open */
    body.menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        animation: fadeIn 0.3s ease;
    }

    /* Prevent body scroll when menu is open - Simple and safe */
    body.menu-open {
        overflow: hidden !important;
        position: relative !important;
    }
    
    /* Ensure all page content remains fully visible */
    body.menu-open main,
    body.menu-open .main-content,
    body.menu-open footer,
    body.menu-open section,
    body.menu-open article {
        position: relative !important;
        visibility: visible !important;
        display: block !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Ensure footer is fully visible and not cut off */
    body.menu-open footer {
        position: relative !important;
        visibility: visible !important;
        display: block !important;
        margin-bottom: 0 !important;
        padding-bottom: 1.5rem !important;
        min-height: auto !important;
    }
    
    /* Ensure page wrapper doesn't get cut */
    body.menu-open .flex.flex-col {
        min-height: 100vh !important;
        position: relative !important;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* Smooth transitions for all interactive elements */
    .mobile-menu * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Touch-friendly tap targets */
    .mobile-menu a,
    .mobile-menu button {
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
        touch-action: manipulation;
    }

    /* Ensure last menu item is fully visible with extra bottom space */
    .mobile-menu .space-y-1 > *:last-child {
        margin-bottom: 2rem !important;
    }

    /* Ensure contact section is fully visible */
    .mobile-menu .bg-gray-800:last-child {
        margin-bottom: 3rem !important;
    }

    /* Fix for menu content wrapper to ensure proper scrolling */
    .mobile-menu > div.space-y-1 {
        box-sizing: border-box !important;
    }
}