.hero {
    /* background: url('/images/heroschool.png');*/
    background: url('/images/heroschool.webp');
    background-size: cover;
    background-position: center;
    padding: 150px 0;
    color: white;
    position: relative;
}

    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
    }

    .hero .container {
        position: relative;
        z-index: 1;
    }

    /* Remove unwanted focus rectangle from the heading */
    .hero h1:focus,
    .hero h1:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }

/*.hero {
    background: url('/images/heroschool.png');
    background-size: cover;
    background-position: center;
    padding: 150px 0;
    color: white;
    position: relative;
}


    .hero::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,.55);
    }


    .hero .container {
        position: relative;
       
         z-index: 0;
    }
*/