@media screen and (max-width: 768px) {

    /* ---------- HEADER ---------- */
    #navigation-header-container {
        height: auto;
        min-height: 4em;
        padding: .5em 4%;
        flex-wrap: nowrap;
        align-items: center;
        position: fixed;
    }

    #nav-header-image-title-container {
        width: auto;
        min-width: 0;
        flex: 1;
        gap: .6em;
        justify-content: flex-start;
        padding: 0;
    }

    #header-image {
        width: 3em;
    }

    #header-title {
        font-size: 1.6em;
        line-height: 100%;
    }

    #nav-header-nav-container {
        padding: 0;
        height: auto;
    }

    #header-nav-container {
        gap: 0;
    }

    #dropdown-indicator {
        display: flex;
        cursor: pointer;
        color: var(--color-1);
    }

    .menu-dropdown {
        font-size: 2.5em !important;
    }

    #navigation-menu {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        background-color: var(--background-color-1);
        padding: 0 4% .75em;
        box-shadow: 0em .3em .3em rgba(0,0,0,.3);
        z-index: 98;
    }

    #navigation-menu.open {
        display: flex;
    }

    .nav-button {
        width: 100%;
        padding: .7em 0;
        font-size: 1.2em;
    }

    /* ---------- HOME ---------- */
    #home {
        padding-top: 4.5em;
        height: auto;
        min-height: 0;
    }

    #about-img-container {
        flex-direction: column-reverse;
        height: auto;
    }

    #home-background-image {
        width: 100%;
        height: 40vh;
    }

    #about-container {
        width: 100%;
    }

    #about-liner {
        font-size: 1em;
        padding: 1.2em 4%;
    }

    /* ---------- SERVICE BUTTONS + PROJECT STATS ---------- */
    #service-proj-container {
        flex-direction: column;
        padding: 1em 0;
    }

    #service-box {
        width: 100%;
        justify-content: center;
        padding: .5em 4%;
        box-sizing: border-box;
    }

    .service-buttons {
        font-size: 1em;
    }

    #project-box {
        width: 100%;
        justify-content: space-evenly;
        padding: 1em 4%;
        box-sizing: border-box;
    }

    .project-buttons {
        width: auto;
        font-size: 1.1em;
        justify-content: center;
    }

    /* ---------- FOOTER ---------- */
    #footer-info-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5em;
        padding: 1.5em 4%;
    }

    .footer-info-containers {
        display: flex;
        align-items: flex-start;
    }

    #footer-location-contact-container {
        width: 100%;
        flex-direction: column;
        gap: 1.5em;
    }

    #footer-license-container {
        width: 100%;
        align-items: flex-start;
    }

    .footer-info {
        max-width: none;
    }

    /* ---------- SERVICE / PROJECT DETAIL PAGES ---------- */
    #services,
    #projects {
        padding-top: 4.5em;
    }

    #service-container,
    #projects-container {
        padding: 1.5em 4% 3em;
        max-width: 100%;
    }

    #service-title,
    #project-title {
        font-size: 2em;
    }

    #service-card-container,
    #project-card-container {
        justify-content: center;
        gap: 1em;
    }

    .service-cards,
    .project-cards {
        width: 100%;
        max-width: 24em;
        height: 13em;
    }
}

/* Extra-small phones */
@media screen and (max-width: 420px) {
    #header-title {
        font-size: 1.3em;
    }

    #about-liner {
        font-size: .95em;
    }

    .service-buttons {
        font-size: .9em;
        padding: .3em .6em;
    }
}