:root
{
    --color_bg: rgba(5,21,44, 1);   /* dark blue almost black */
}
.building_the_workforce_america_needs,
.about_us_hero_section,
.our_work_hero_section
{
    display: block;
    position: relative;
    min-height: 300px;
    color: white;
    padding: 20px 60px 20px 60px;
    box-sizing: border-box;
    min-width: var(--sz_width_min);
}
    .building_the_workforce_america_needs:before,
    .about_us_hero_section:before,
    .our_work_hero_section:before
    {
        content: "";
        display: block;
        position: absolute;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right center;
        height: 100% ;
        width: 100%;
        background-color: var(--color_bg);
        top: 0;
        left: 0;
        z-index: -1;
    }
    .building_the_workforce_america_needs:before
    {
        background-image: url(../images/apprenticeshipalliance_building_the_workforce_american_needs.png);
    }

.building_the_workforce_america_needs h1,
.about_us_hero_section h1,
.our_work_hero_section h1
{
    display: block;
    width: 60%;
    margin: 0;
    font-size: 3em;
}
    .building_the_workforce_america_needs h1 > span,
    .about_us_hero_section h1 > span,
    .our_work_hero_section h1 > span
    {
        color: var(--color_primary);
    }
    .building_the_workforce_america_needs p,
    .about_us_hero_section p,
    .our_work_hero_section p
    {
        display: block;
        width: 40%;
    }

/********************* Start Media queries for different layouts */
@media screen and (max-width: 1024px)
{
    .building_the_workforce_america_needs h1,
    .building_the_workforce_america_needs p,
    .about_us_hero_section h1,
    .about_us_hero_section p,
    .our_work_hero_section h1,
    .our_work_hero_section p
    {
        width: 70%;
    }
    .building_the_workforce_america_needs h1,
    .about_us_hero_section h1,
    .our_work_hero_section h1
    {
        font-size: 2.5rem;
    }
}
@media screen and (max-width: 768px)
{
    .building_the_workforce_america_needs,
    .about_us_hero_section,
    .our_work_hero_section
    {
        height: unset;
        padding-top: 320px; /*So the background image floats to the top */
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
    }
    .building_the_workforce_america_needs:before,
    .about_us_hero_section:before,
    .our_work_hero_section:before
    {
        background-position: top center;
        transform: unset;
    }
    .building_the_workforce_america_needs h1,
    .building_the_workforce_america_needs p,
    .about_us_hero_section h1,
    .about_us_hero_section p,
    .our_work_hero_section h1,
    .our_work_hero_section p
    {
        width: 100%;
        text-align: center;
    }
    .building_the_workforce_america_needs h1,
    .about_us_hero_section h1,
    .our_work_hero_section h1
    {
        font-size: 2rem;
    }
}