body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.all-container {
    flex: 1;
}

.page-header-container {
    height: 45vh;
}

@media (max-width:1100px) {
    .page-header-container {
        height: 35vh;
    }

}

@media (max-width:900px) {
    .page-header-container {
        height: 25vh;
    }

}

@media (max-width:700px) {
    .page-header-container {
        height: 18vh;
    }

}

.page-header-breadcrumb {
    background-color: #b31917;
    /* light gray background */
    padding: 3vh 2.5vw;
    border-radius: 0 3vw 0 3vw;
    width: 70vw;
    height: 20vh;
    margin-left: 9vw;
    position: relative;
    z-index: 1;
    top: 9vh;

}

@media (max-width:1100px) {
    .page-header-breadcrumb {
        /* light gray background */
        height: 18vh;
        padding: 2.5vh 2.5vw;
        margin-left: 9.5vw;
        top: 7vh;
        border-radius: 0 3.25vw 0 3.25vw;
    }
}

@media (max-width:900px) {
    .page-header-breadcrumb {
        /* light gray background */
        height: 12vh;
        padding: 2vh 3vw;
        margin-left: 10vw;
        top: 5vh;
        border-radius: 0 3.5vw 0 3.5vw;
    }
}

@media (max-width:700px) {
    .page-header-breadcrumb {
        /* light gray background */
        height: 10.5vh;
        padding: 1vh 3.5vw;
        margin-left: 11vw;
        top: 3vh;
        border-radius: 0 4vw 0 4vw;
    }
}

@media (max-width: 900px) and (hover: hover) and (pointer: fine) {
    .page-header-breadcrumb {
        /* light gray background */
        height: 13vh;

    }
}

.breadcrumb-background {
    position: absolute;
    top: 15vh;
    left: 0;
    background-color: black;
    z-index: -1;
    width: 95vw;
    height: 40vh;
    border-radius: 0 6vw 0 0;
    background-color: black;
    /* Base color stays */
    background-position: -5vw 35% !important;
    background-size: cover;
    background-image: url("../img/breadcrumb.jpg");

}

@media (max-width:1100px) {
    .breadcrumb-background {
        top: 14vh;
        height: 28vh;
        /* Base color stays */
        border-radius: 0 6.25vw 0 0;
        background-position: -7vw 35% !important;
    }
}

@media (max-width:900px) {
    .breadcrumb-background {
        top: 12vh;
        height: 23vh;
        background-position: -7.5vw 35% !important;
        /* Base color stays */
        border-radius: 0 6.5vw 0 0;
    }
}

@media (max-width:700px) {
    .breadcrumb-background {
        top: 11.5vh;
        height: 16vh;
        background-position: -9vw 35% !important;
        border-radius: 0 7vw 0 0;
        /* Base color stays */
    }
}

@media (max-width: 900px) and (hover: hover) and (pointer: fine) {
    .breadcrumb-background {
        height: 22vh;
        /* Base color stays */
        top: 12vh;
    }
}

@media (max-width: 700px) and (hover: hover) and (pointer: fine) {
    .breadcrumb-background {
        height: 20vh;
        /* Base color stays */
        top: 10vh;
    }
}

.background-tint {
    background-color: rgba(28, 23, 23, 0.8);
    background-blend-mode: multiply;
}

.page-header-container h1 {
    font-size: 3vw;
    margin: 0;
    color: #ffffff;
    letter-spacing: 0.1vw;
    font-weight: 500 !important;
    font-weight: 500 !important;

}

@media (max-width:1100px) {
    .page-header-container h1 {
        font-size: 3.5vw;
        letter-spacing: 0.15vw;
    }
}

@media (max-width:900px) {
    .page-header-container h1 {
        font-size: 4vw;
        letter-spacing: 0.2vw;
    }
}

@media (max-width:700px) {
    .page-header-container h1 {
        font-size: 4.5vw;
        letter-spacing: 0.25vw;
    }
}

.breadcrumb span {
    font-size: 1vw;
    color: #ffffff;
    font-weight: 500 !important;
    /* Match or differ from <a> as needed */

}

@media (max-width:1100px) {
    .breadcrumb span {
        font-size: 1.25vw;

        /* Match or differ from <a> as needed */
    }
}

@media (max-width:900px) {
    .breadcrumb span {
        font-size: 1.5vw;

        /* Match or differ from <a> as needed */
    }
}

@media (max-width:700px) {
    .breadcrumb span {
        font-size: 2.25vw;

        /* Match or differ from <a> as needed */
    }
}

.breadcrumb {
    margin-top: 0.5vh;

}

@media (max-width:1100px) {

    .breadcrumb {
        margin-top: 0.3vh;
    }
}

@media (max-width:900px) {

    .breadcrumb {
        margin-top: 0.1vh;
    }
}

@media (max-width:700px) {

    .breadcrumb {
        margin-top: 0vh;
    }
}

.breadcrumb a {
    font-size: 1vw;
    color: #ffffff;
    font-weight: 500 !important;
}

@media (max-width:1100px) {

    .breadcrumb a {
        font-size: 1.25vw;
    }
}

@media (max-width:900px) {

    .breadcrumb a {
        font-size: 1.5vw;
    }
}

@media (max-width:700px) {

    .breadcrumb a {
        font-size: 2.25vw;
    }
}

.breadcrumb-separator {
    text-decoration: none;
    color: inherit;
    font-size: 1.25vw !important;
    font-weight: 500 !important;
    /* 👈 moves it slightly down */

}

@media (max-width:1100px) {

    .breadcrumb-separator {

        font-size: 1.5vw !important;
    }
}

@media (max-width:900px) {

    .breadcrumb-separator {

        font-size: 1.75vw !important;

    }
}

@media (max-width:700px) {

    .breadcrumb-separator {

        font-size: 2.5vw !important;


    }
}

.breadcrumb a:hover {
    text-decoration: underline;
}