Mobile specific section at top of page is disappearing under the header

Hi everyone,

just wondering if anyone has some suggestions...I designed a mobile specific section for the top of this homepage. And then I used code to hide it on desktop and appear when below 991px.

It shows up fine on mobile but when in between mobile and desktop sizes, it seems to be partially hidden under the header. The header is set to solid with reduced opacity. I thought perhaps it was because it was adaptive, but it isn't. 

So there must be something happening with the code...Here is what I used to initiate the swap of the two sections:

//hide top mobile section on desktop//
@media only screen and(min-width:991px) {section[data-section-id="6631d964f5a5214452e1d3fa"]{display:none}}

//hide top desktop section on tablet-mobile//
@media only screen and(max-width:990px) {section[data-section-id="6631d7e8482a5f08b86c7570"]{display:none}}

Photo attached of what it looks like.

site is: clinicaleftconnect.squarespace.com

password for website is cec2024

I really appreciate all you legends out there that save us code newbs in this forum!! Many thanks.

Cheers, ioana

The first section has a top padding value to account for the header, you can simulate that with this additional CSS:

section[data-section-id="6631d964f5a5214452e1d3fa"] {
  padding-top:80px;
}