CSS Media Query seems to be destroying my form fields?

Site URL: https://weave.net.nz/contact

Please help! My form fields are not displaying correctly, I have forms on 3 pages and on each of those pages the same problem exists. I removed all the css code section by section to narrow down the issue.

I've narrowed it down to the media breakpoints code (below) but I can't figure out why it's happening?

@mobile:~"only screen and (max-width: 750px)";
@desktop:~"only screen and (min-width: 950px)";

When i remove those two lines of code it breaks ALL the css in my site? Any help would be greatly. 

These break points are also really helpful because I have used it alot throughout to display/not display content on mobile and desktop. 

Site password: W3Ave2022!

I managed to fix this myself, my accordions were conflicting with the form field styles.