Mobile Font Weight Issue in Cheeseburger Menu with Custom CSS

Problem/Motivation:

I'm experiencing issues with maintaining the specified font weight in the Cheeseburger Menu on mobile devices. The font weight, set to 800 in the CSS, reverts to 400 on mobile, despite explicit styling rules.

Steps to Reproduce:

Apply custom CSS to set font weight to 800 and font size to 18px for menu items and links in style.css.
Implement media queries for mobile devices (max-width: 1199px).
Disable the module's default CSS, which results in the menu trigger (hamburger icon) becoming invisible.
View the site on mobile devices to observe the font weight reverting to 400.

Proposed Resolution:

I am seeking a solution that maintains the specified font weight (800) and size (18px) across all devices, including mobile. Additionally, a method to keep the menu trigger visible when the module's default CSS is disabled.

Remaining Tasks:

Identifying why the specified font weight is not maintained on mobile devices.
Finding a solution to keep the hamburger menu visible when the default CSS of the module is disabled.

User Interface Changes:

The menu's font weight and size will be consistent across all devices.
The menu trigger (hamburger icon) will be visible on mobile devices when the module's default CSS is disabled.

API Changes:

None.

Data Model Changes:

None.

more descritpion:

I've been facing a challenging issue with the Cheeseburger Menu module on a Drupal 10 website. Despite several attempts and extensive discussions, I haven't found a solution yet. I am reaching out to the community for assistance.

Issue Summary:

Problem Description: The Cheeseburger Menu module doesn't maintain the specified font weight (800) on mobile devices. It reverts to a default font weight (400), despite the CSS rules I've applied.

Attempted Solutions:
Modified style.css to specify font weight and size for menu items and links.
Implemented media queries for mobile devices (max-width: 1199px) to ensure consistent styling across devices.
Tried overriding CSS specificity and using !important without success.
Deactivating the module's default CSS resulted in the menu trigger (hamburger icon) becoming invisible.

Specific Requirements:
Font weight of 800 and font size of 18px for all menu items and links, consistent across both desktop and mobile views.
The menu trigger should be visible and functional when the module's default CSS is disabled.

Current Challenge:
When standard CSS of the module is disabled, the hamburger menu icon disappears, making it impossible to access the menu on mobile devices.
The font weight change is not persisting on mobile devices, reverting to 400 instead of the specified 800.

Additional Context:
The issue persists even after trying to increase CSS specificity and implementing !important in custom CSS.
We've considered disabling the module's standard JavaScript but found that it completely disables the menu's functionality.

I have attached screenshots and code snippets to illustrate the issues further. Any insights or suggestions on how to resolve these issues would be greatly appreciated. If there are best practices or alternative approaches I should consider, please advise.

Thank you in advance for your time and help.

2 screenshots attached, one is on desktop where the font is ok, one is the mobile one, where its not ok