Sudden Change to Header and Footer (Debut Theme)

Hi guys - at my store (https://takethegardenjourney.com/) I’m seeing some sudden changes to my header and footer as shown in the screenshots below.

Can anyone suggest why this is happening? I haven’t changed anything else to the site, either in Shopify or Pagefly (the app I use).

I do have this code in my theme.css but not sure this is the reason why. If anyone can offer help, I’d so appreciate it!

/============================================================================
Make the Header Transparent, Set Color, Remove Icons, Make Mobile Header More Spacious
==============================================================================
/
.template-index .site-header {
position: absolute;
width: 100%;
background: transparent;

}
.template-index .site-header .site-header__mobile-nav {
background: transparent;
}

.site-header .site-header__mobile-nav a.site-nav__link.site-nav__link–main {
color: #D7BFEC;
font-size: 9px;
letter-spacing: 0.2em;
}

@media screen and (max-width: 1449px) {
#shopify-section-header .header-logo {
margin: 200px auto;
}
}
@media screen and (max-width: 1449px){
.site-header__logo img {
max-height: 600px !important;
}
}
@media only screen and (max-width: 1449px) {
#shopify-section-hero .hero__inner {padding: 100px 0px;}
}

.site-header__search-toggle{display:none;}
.site-header__account {display: none;}

.hero__inner .mega-subtitle{
margin: 0;
}