.mobile-menu { display: none; } @media (max-width: 991px) { .mobile-menu { display: block; } .sidebar__area { position: fixed; top: 0; right: -100%; width: 300px; height: 100vh; background: #000; z-index: 9999; transition: right 0.3s ease; } .sidebar__area.active { right: 0; } .sidebar__wrapper { padding: 20px; height: 100%; overflow-y: auto; } .sidebar__close { text-align: right; margin-bottom: 20px; } .sidebar__close-btn { background: none; border: none; color: white; font-size: 24px; cursor: pointer; } .mobile-menu ul { list-style: none; padding: 0; margin: 0; } .mobile-menu li { margin-bottom: 15px; } .mobile-menu a { color: white; text-decoration: none; font-size: 18px; display: block; padding: 10px 0; transition: color 0.3s ease; } .mobile-menu a:hover { color: #ffffff; } .body-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 9998; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .body-overlay.active { opacity: 1; visibility: visible; } }