@media screen and (max-width: 576px) {
    .site-topbar .welcometext h1 {
        font-size: 14px;
    }
    #hamburger {
        top: 0px;
    }
}
@media screen and (max-width: 768px) {
    .site-header {
        padding: 20px 20px 0px 20px;
    }
    .custom-logo {
        max-width: 300px;
        width: 100%;
        height: auto;
    }
    .site-footer {
        padding: 40px 20px;
    }
    .footer1 figure.wp-block-image img.wp-image-23 {
        max-width: 300px;
        width: 100%;
        height: auto;
    }
    .site-footer .socials .socialIcons,
    .site-footer .socials {
        margin: 20px auto 20px 0px !important;
    }
    .footer3 ul#menu-primary-menu-1, 
    .footer2 ul#menu-secondary-menu-1 {
        padding: 0px;
    }
    .footer3 ul#menu-primary-menu-1{
        margin: 0px;
    }
    .site-topbar .welcometext h1 {
        font-size: 20px;
    }
    .newsletter-signup-form p {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        align-content: space-around;
    }
}
@media screen and (max-width: 992px) {
    #primary-menu.menuClosed {
        transform: translateX(100%);
        opacity: 0;
        display: none;
    }

    #primary-menu.menuOpen {
        transform: translateX(0%);
        opacity: 1;
    }

    #primary-menu {
        padding: 10px;
        margin: 0px;
        width: 100vw;
        height: 100vh;
        position: absolute;
        z-index: 11;
        top: 0;
        left: 0px;
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        transition: all ease-in-out 1s;
    }

    #primary-menu li {
        text-decoration: none;
        color: #000000;
        display: block;
        padding: 10px;
        text-align: center;
    }

    #secondary-menu li:before {
        display: none;
    }
    #hamburger {
        display: block !important;
        position: relative;
        top: 10px;
        right: 0px;
        z-index: 1;
        width: 40px;
        height: 30px;
        float: right;
    }

    .hamburger span {
        display: block;
        height: 4px;
        background: var(--colour-2);
        border-radius: 2px;
        transition: all ease-out 0.4s;
        margin: 5px;
    }

    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translateY(13px);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
        width: 0px;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translateY(-13px);
    }

    #hamburger.active {
        z-index: 12;
        background-color: transparent;
    }
}
@media screen and (max-width: 1400px) {
    #secondary-menu li::before{
        display: none;
    }
}