/* Custom CSS for mobile menu and performance optimizations */
/* This file is separate from site.css to avoid conflicts with Tailwind CSS */

/* Mobile menu transitions */
.mobile-menu {
    transition: transform 0.3s ease, opacity 0.3s ease !important;
    contain: layout style paint;
    will-change: transform;
    transform: translateZ(0);
}

.mobile-menu.hidden {
    transform: translateX(-100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.mobile-menu:not(.hidden) {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Performance optimizations for other elements */
.stats-section,
.feature-cards {
    contain: layout style paint;
    will-change: transform;
    transform: translateZ(0);
}

/* Smooth transitions for interactive elements */
.mobile-menu-button {
    transition: color 0.2s ease;
}

.mobile-menu-button i {
    transition: transform 0.2s ease;
}

#logo {
    width: 208px;
    height: 56px;
}

@media (max-width: 500px) {
    #hero-image {
        max-width: 95%;
    }
}