Media Query (for iPhone) Section Not Being Applied; Other Queries Working

currently working on a temp page for a restaurant as seen at: mattt.co/ok-rm/iddu. I've set up a number of @media breakpoints for large-to-small desktop screens as well as for mobile.

The queries seem to work fine, however, one specific query is not functioning properly, and that is the '.footer1 a, footer2 a' styles in the iPhone landscape view — query as follows:

@media only screen and (min-width : 320px) and (max-width: 736px) and (orientation: landscape)

As it stands, when viewed in landscape mode the site displays as follows on the iPhone: Image.

This is an error, as the scale of the footer text (phone no., e-mail, etc.) should be displayed as follows (seen through Chrome's iPhone emulator): Image.

I'm not sure why all other elements seem to be scaling correctly at their respective breakpoints, but the ".footer1 a", and ".footer2 a" styles are not appearing as intended specifically on the landscape view for the iPhone.

I've attached the relevant code below.

<meta name="viewport" content="width=device-width, initial-scale=1" />

.footer1 a, .footer2 a {
    font-family: pitch;
    display: block;
    font-size: 30px;
    line-height: 40px;
    letter-spacing: 1px; 
    }

@media only screen and (min-width: 1400px) and (max-width: 1599px) and (orientation: landscape) {
    .footer1 a, .footer2 a {
        font-size: 25px;
        line-height: 35px;
    }
}


@media only screen and (min-width: 1201px) and (max-width: 1399px) and (orientation: landscape) {
    .footer1 a, .footer2 a {
        font-size: 20px;
        line-height: 30px;
    }
}

@media only screen and (min-width: 1025px) and (max-width: 1200px) and (orientation: landscape) {
    .footer1 a, .footer2 a {
        font-size: 20px;
        line-height: 30px;
    }
}

@media only screen and (max-width: 1024px) and (orientation: landscape) {
    .footer1 a, .footer2 a {
        font-size: 15px;
        line-height: 20px;
    }
}

@media only screen and (min-width : 569px) and (max-width: 1024px) and (orientation: portrait) {
    .footer1 a, .footer2 a {
        font-size: 28px;
        line-height: 36px;
    }
}

@media only screen and (min-device-width : 569px) and (max-device-width: 1024px) and (orientation: landscape) {
    .footer1 a, .footer2 a {
        font-size: 20px;
        line-height: 30px;
    }
}

@media only screen and (min-width : 320px) and (max-width: 736px) and (orientation: portrait) {
    .footer1 a, .footer2 a {
        font-size: 15px;
        line-height: 20px;
    }
}

@media only screen and (min-width : 320px) and (max-width: 736px) and (orientation: landscape) {
    .footer1 a, .footer2 a {
        font-size: 15px;
        line-height: 20px;
    }
}

If anyone could take a look that would be greatly appreciated! I can't figure out where I've gone wrong, even when using Safari's iPhone developer tool to inspect element, the listed style is turning up correctly.

Many Thanks!