Webflow site adjustments — 2

Hi all

I need some help with a client website I’ve built in Webflow, there are a few glitches that need some custom coding. There are a few glitches that need ironing out with the final site. Heres a brief overview of the issues I’m having.

1. The site opens with a lottie animation of the logo of the brand. Unfortunately, when I open it on mobile, it shrinks down instead of filling the screen. See attatched images for how it should look vs how it does on the published site.

2. Just a bunch of issues with the services section, making it responsive. Its a full page card that covers the whole screen on desktop, and I used some custom code to basically lock scrolling until the card is exited out of. Its a one page site so that was sort of nessecary.
(more info on that code here) https://webflow.com/website/brota-disable-scroll#:~:text=It%20is%20as%20simple%20as,must%20disable%20scrolling%20when%20clicked.
What I need to achieve, is since the screen is smaller I need the card to still lock global scrolling but to also enable nested scrolling within the service card, if that makes sense. I will explain more fully to whoever gets the job, should be a fairly simple fix.
3. The other issue is also with the services section, namely the piece of code has created a margin at the bottom of the page when you click on it and I’m not sure why. So if you could help me to figure that out that would be awesome.
4. The last issue is a real easy one, basically, I just need links on the mobile menu (we are using a hamburger menu for mobile) to close the menu as well as following the link. Its all in page linking since the site exists on one page.

Hopefully this is enough context. Just a bunch of small but annoying problems for someone who knows a bit of coding, Javascript or CSS or something.