Here are some of my suggestions, you can disregard them if you want:
I’d place the h2 element above the img element
Noticed the close button has a white box around the “x” when it is hovered.
Place some space between the hero description text and the edge of the viewport.
The mobile first approach is a good idea. Start with the smallest viewport, then work your way up to tablet, then desktop. Refactoring from the other way round is a lot tougher.
For mobile, see if you can get everything to fit on the viewport. This may mean removing images.
Since you have a hamburger menu, you don’t need to include the “About” section on the landing page.Also, putting a menu at the top of the viewport is not good UX. Most people use a phone one handed, so it makes sense to put navigation aids at the bottom of the viewport, within easy thumb reach.
For larger view ports, remove navigation aids from the bottom of the viewport and place them back in the hamburger menu.
Place “Careers” and “Contact” into navigation or buttons.
To answer your question about the Mobile-First Approach: Yes, you are doing it exactly right! Writing your base CSS rules for small screens without media queries, and then stacking min-width rules (@media (min-width: 768px)) to expand your layout for desktops, is the industry-standard way to do it. It makes your CSS much cleaner because you are only ever adding properties rather than fighting to override or unset desktop layouts.
Regarding your specific points:
The Text & Readability: On mobile viewports, text layout reads nicely, but make sure to add a tiny bit of horizontal padding (e.g., padding: 0 15px;) to your main content containers. This keeps your paragraphs from resting flush against the physical left and right edges of the phone screen [].
Nav Menu Usability: The mobile toggle interaction works smoothly. However, echo’ing @Teller’s point about modern mobile UX, on taller phone viewports, hitting a tiny hamburger button at the absolute top-right edge with a thumb can be awkward []. If you keep it up there, make sure the invisible hit-box padding around the trigger icon is large enough (at least 48x48px) so it registers reliably!
