// 
// Masthead
// 

header.masthead {
    position: relative;
    overflow: hidden;
    padding-top: calc(7rem + 72px);
    padding-bottom: 7rem;
    background: linear-gradient(0deg, $secondary 0%, $primary 100%);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: scroll;
    background-size: cover;

    .masthead-content {
        z-index: 1;
        position: relative;

        .masthead-heading {
            font-size: 4rem;
        }

        .masthead-subheading {
            font-size: 2rem;
        }
    }

    .bg-circle {
        z-index: 0;
        position: absolute;
        border-radius: 100%;
        background: linear-gradient(0deg, $primary 0%, $secondary 100%);
    }

    .bg-circle-1 {
        height: 90rem;
        width: 90rem;
        bottom: -55rem;
        left: -55rem;
    }

    .bg-circle-2 {
        height: 50rem;
        width: 50rem;
        top: -25rem;
        right: -25rem;
    }

    .bg-circle-3 {
        height: 20rem;
        width: 20rem;
        bottom: -10rem;
        right: 5%;
    }

    .bg-circle-4 {
        height: 30rem;
        width: 30rem;
        top: -5rem;
        right: 35%;
    }
}

@media (min-width: 992px) {
    header.masthead {
        padding-top: calc(10rem + 55px);
        padding-bottom: 10rem;

        .masthead-content {
            .masthead-heading {
                font-size: 6rem;
            }

            .masthead-subheading {
                font-size: 4rem;
            }
        }
    }
}