body {
    background-color: #F7F7F9;
}

.region_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}

.regions {
    display: flex;
    flex-wrap: wrap;
    width: calc((100% - 50px) / 2);
    justify-content: space-between;
}

.region_about {
    width: calc((100% - 50px) / 2);
}

.region_about h1 {
    text-align: left;
    margin-top: -10px;
    margin-bottom: 30px;
    padding: 0;
}

.region_about p {
    margin: 0;
}

.region_about .button1 {
    margin: 35px 0 0 0;
}

.region {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc((100% - 50px) / 2);
    aspect-ratio: 1;
    background: var(--pale-blue);
    box-shadow: 0px 3px 6px #00000029;
    border: 10px solid #FFFFFF;
    border-radius: 20px;
    box-sizing: border-box;
    transition: 0.1s all ease-in-out;
}

#london_careers, 
#norfolk_careers,
#cambridge_careers {
    position: absolute;
    margin-top: -130px;
}

.regional_ops h1 {
    margin-top: 50px;
}

.region:nth-child(1),
.region:nth-child(2) {
    margin-bottom: 50px;
}

.region_shift {
    margin-top: 70px;
}

.line_regions .region {
    width: calc((100% - 150px) / 4);
    margin-top: 0;
}

.region h2 {
    color: var(--blue);
}

.region:hover {
    background: var(--blue);
    transition: 0.1s all ease-in-out;
}

.region:hover h2 {
    color: var(--white);
}

.careers {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}

.career_opportunity {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc((100% - 50px) / 2);
    padding: 30px;
    background: var(--pale-blue);
    box-shadow: 0px 3px 6px #00000029;
    border: 10px solid #FFFFFF;
    border-radius: 20px;
    box-sizing: border-box;
    transition: 0.1s all ease-in-out;
    margin-bottom: 50px;
}

.career_opportunity h2 {
    margin: -8px 0 0 0;
    color: var(--blue);
}

.career_opportunity h3 {
    margin: 10px 0;
    color: var(--white);
}

.career_opportunity p {
    color: var(--black);
}

.career_opportunity p i {
    margin-right: 10px;
}

.career_opportunity .button1 {
    margin: 10px 0 0;
}

.career_opportunity:hover {
    background: var(--blue);
    transition: 0.1s all ease-in-out;
}

.career_opportunity:hover h2 {
    color: var(--white);
}

.career_opportunity:hover h3,
.career_opportunity:hover p {
    color: var(--pale-blue);
}

.even:last-child,
.even:nth-last-child(2),
.odd:last-child {
    margin-bottom: 0;
}

.no_careers {
    text-align: center;
    margin: 0 auto;
}

@media (min-width: 1000px) {
    .line_regions .region {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 1150px) {
    .region {
        width: calc((100% - 30px) / 2);
    }

    .line_regions .region {
        width: calc((100% - 90px) / 4);
    }

    .region:nth-child(1),
    .region:nth-child(2) {
        margin-bottom: 30px;
    }

    #london_careers, 
    #norfolk_careers,
    #cambridge_careers {
        margin-top: -110px;
    }
}

@media (max-width: 1000px) {
    .region_wrapper,
    .careers {
        flex-direction: column;
    }

    .line_regions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .line_regions .region {
        width: calc((100% - 30px) / 2);
    }

    .regions,
    .region_about {
        width: 100%;
    }

    .region_about {
        margin-top: 50px;
    }

    .career_opportunity,
    .career_opportunity:nth-last-child(2) {
        width: 100%;
        margin-bottom: 30px;
    }
}

@media (max-width: 600px) {
    .region,
    .line_regions .region {
        width: 100%;
        aspect-ratio: 2;
        margin-bottom: 30px !important;
    }

    .region:last-child,
    .career_opportunity:last-child  {
        margin-bottom: 0 !important
    }

    .region_about h1 {
        text-align: center;
    }

    .region_about .button1 {
        width: 100%;
    }
}

@media (max-width: 500px) {
    .career_opportunity .button1 {
        width: 100%;
    }
}