.navbar {
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
    z-index: 10; /* Ensure the navbar stays on top of other elements */
}

/* About Hero */
.hero {
    position: relative;
    height: 60vh;
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;

    /* Hero overlay */

    &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*background: rgba(0, 0, 0, 0.5); !* Optional overlay color *!*/
    }
}

/* Content */
.content {
    position: relative;
    margin-top: -15rem;
    border-style: solid;
    z-index: 1;

    /* Extra small phones (up to 300px) */
    @media screen and (max-width: 300px) {
        margin-top: -24rem;
    }

    /* Portrait phones (301px to 575px) */
    @media screen and (min-width: 301px) and (max-width: 575px) {
        margin-top: -20rem;
    }

    /* Landscape phones (576px to 767px) */
    @media screen and (min-width: 576px) and (max-width: 767px) {
        margin-top: -18rem;
    }

    /* Tablets (768px to 991px) */
    @media screen and (min-width: 768px) and (max-width: 991px) {
        margin-top: -4rem;
    }

    /* Desktops and larger tablets (992px to 1199px) */
    @media screen and (min-width: 992px) and (max-width: 1199px) {
        margin-top: -4rem;
    }

    /* Large desktops (1200px and up) */
    @media screen and (min-width: 1200px) {
        margin-top: -4rem;
    }

    img {
        width: 100%;
        height: auto;
    }
}