@media (max-width: 1170px) {
    body {
        flex-direction: column;
    }

    .nav-container {
        position: sticky;
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--color-stroke-1);
        padding: var(--spacing-xs);
        margin-bottom: var(--spacing-lg);
        top: 0;
        z-index: 100;
    }

    .nav-inner {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-xxs);
        gap: var(--spacing-xl);
    }

    #nav-contact, #nav-patient-safety, #nav-end-of-life-planning, #nav-WIP {
        display: none;
    }

    #nav-work {
        display: block;
    }

    .nav-inner > h4 {
        display: none; 
    }

    .nav-inner > .nav-item {
        padding: var(--spacing-none);
    }

    main {
        padding-top: var(--spacing-none);
    }
}

@media (max-width: 1000px) {
    .section-label {
        display: none;
    }
    section {
        margin-bottom: var(--spacing-lg); 
        padding-bottom: var(--spacing-xl);
    }
    h1 {
        margin-bottom: var(--spacing-xl);
}


@media (max-width: 800px) {
    main {
        margin: 0;
        padding: 0 var(--spacing-xs);
    }
    .WIP-case-studies-container {
        gap: var(--spacing-md);
        margin-top: var(--spacing-none);
    }
    .detail-list {
        padding: var(--spacing-sm) var(--spacing-xxs);
    }
    .WIP > h2 {
        margin-bottom: var(--spacing-md);
    }
}

@media (max-width: 700px) {
    .WIP-case-study {
        flex-direction: column-reverse;
    }
    .WIP-case-study-image {
        width: 100%;
    }
    .WIP-case-study-info-container {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .map-label {
        top: 31%;
        right: 37%;
    }
    .nav-container {
        display: none;
    }
    #greetings {
        padding-top: var(--spacing-sm);
    }
}

@media (max-width: 500px) {
    .map-label {
        top: 29%;
        right: 20%;
    }
}

@media (max-width: 400px) {
    .map-label {
       top: 27%;
       right: 15%;
    }
}