@media (max-width: 1100px) {
    #header_container {
        height: 100%;
    }

    #header_flex_container {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-content: center;
        align-items: center;
        text-align: center;
    }

    #header_left {
        padding-block: 1em;
        font-size: clamp(1rem, 10dvw, 3.5rem);
    }

    #header .mobile-nav-toggle {
        display: block;
        position: fixed;
        width: clamp(3.5rem, 8dvw, 5rem);
        aspect-ratio: 1;
        top: min(1dvw, 1rem);
        right: min(1dvw, 1rem);
        z-index: 100;

        border: none;
    }
    .mobile-nav-toggle .line {
        stroke-width: 4px;
    }

    .main_navigation_container {
        position: fixed;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5em;

        inset: 0 0 0 20%;
        background: hsl(181 10% 85% / .98);
        z-index: 99;
        padding: min(30vh, 10em) 2em;

        transform: translateX(100%);
        transition: transform 300ms ease-out;
    }

    .main_navigation_container[data-visible="true"] {
        transform: translateX(0%);
    }

    @supports ( backdrop-filter: blur(1em) ) {
        #main_navigation {
            background: hsl(150 10% 85% / 0.6);
            backdrop-filter: blur(1em);
        }
    }

    #main_navigation > span {
        width: 100%;

        padding-inline: 0;
        padding-block: 0;
        margin-inline: 0;
        text-align: center;
    }

    #main_navigation > span ~ span {
        margin-inline: 0;
    }

    #main_navigation > span > a {
        display: block;
        width: 100%;
        text-decoration: none;

        margin-inline: auto;
        padding-block: 2vh;
        text-align: center;
        font-size: clamp(1.25rem, 3vh, 1.75rem);
    }
    #main_navigation > span > a:hover {
        text-decoration: none;
        background-color: hsla(100, 1%, 30%, 0.8);
    }

    #body .request_demo_box {
        display: flex;
        flex-direction: column;

        text-align: center;
    }

    #body .request_demo_box > a{
		margin-top: 1rem;
	}

    #footer_container {
        height: auto;
    }

    #footer {
        display: grid;
		grid-template-areas:
			"l s s"
			"l c c";
		grid-template-rows: 1fr 1fr;
		grid-template-columns: 1fr 1fr;
    }

    #footer > div:first-child {
		grid-area: l;

        display: flex;
        flex-direction: column;
        gap: .5em;
        white-space: nowrap;
        align-items: center;
    }

    #footer > div:first-child > a {
        margin: 0;
    }

    #footer > div:nth-of-type(2) {
		grid-area: s;

        display: flex;
        gap: .5rem;
        flex-direction: row;
        justify-content: space-evenly;
    }

    #footer > div:last-child {
		grid-area: c;
		text-align: center;

		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
}