#footer-html {
    padding: 0 !important;
    width: 100%;
    margin-bottom: 24px;

    & span {
        font-weight: 300;
        font-size: clamp(14px, 3vw, 16px);
        line-height: normal;
        color: white;
    }

    & p {
        color: white;
    }

    & #contact-info path {
        fill: white;
    }

    & svg.open-hours path {
        fill: white;
    }

    & .footer-logo {
        max-width: clamp(216px, 3vw, 256px);
        height: auto;

        & path, circle {
            fill: white;
        }
    }

    & #footer-main {
        padding: clamp(8px, 3vw, 64px);

        & a.button {
            display: flex;
            background: var(--secondary);

            &:hover {
                background: white !important;
                outline: 1px solid var(--secondary) !important;

                & path {
                    fill: var(--secondary);
                }

                & p, span {
                    color: var(--secondary);
                }
            }
        }
    }

    & #footer-socials {
        & a.button {
            background: white;

            &:hover {
                background: var(--secondary) !important;
                outline: 1px solid white !important;

                & path {
                    fill: white !important;
                }

                & p, span {
                    color: white;
                }
            }
        }
        & svg path {
            fill: var(--secondary) !important;
        }


    }

    & #footer-navigation {

        background: var(--secondary);
        border-radius: 16px 0 0 16px;

        padding: clamp(8px, 3vw, 64px);

        & a.button {
            display: flex;
            background: var(--primary) !important;

            &:hover {
                background: white !important;
                outline: 1px solid var(--secondary) !important;

                & p, span {
                    color: var(--primary);
                }
            }
        }

        & #stat-nav {
            padding: clamp(8px, 3vw, 64px);

            & a.button {
                display: flex;
                background: var(--secondary) !important;

                & path {
                    fill: white;
                }

                &:hover {
                    background: white !important;
                    outline: 1px solid white !important;

                    & p, span {
                        color: var(--secondary);
                    }

                    & path {
                        fill: var(--secondary);
                    }
                }
            }
        }
    }

    & #certification-footer {
        & svg {
            max-height: 104px !important;
            width: auto;
        }
    }

    & .payments {
        background: white;
        border-radius: 8px;
        height: fit-content;

        & svg {
            min-width: 72px;
            height: auto;
        }
    }
}

/* TODO: REMOVE WHEN OUT OF DEV*/

#coming-soon-footer-banner {
    display: none !important;
}