/** ===== Page Title ===== **/
.page-title-wrapper {
    background-color: $color-light;
    padding: 100px 0;

    .container {
        display: flex;
        justify-content: space-between;
        align-items: center;

        @include respond-below(md) {
            flex-direction: column;
            align-items: flex-start;
        }
    }

    .page-title {
        font: {
            size: 50px;
            weight: 700;
        }
        line-height: 1.3;
        margin: 0 0;
        max-width: 50%;
        flex: 0 0 50%;
        position: relative;
        z-index: 1;

        @include respond-below(lg) {
            font-size: 42px;
        }

        @include respond-below(md) {
            flex: 0 0 100%;
            max-width: 100%;
            font-size: 38px;
        }

        @include respond-below(c480) {
            font-size: 32px;
        }

        .title-bg {
            font-size: 20px;
            color: $color-secondary;
            position: absolute;
            left: 0;
            top: 8px;
            z-index: -1;
            line-height: 1;
            max-width: 90%;

            @include respond-below(c480) {
                top: 5px;
            }
        }
    }

    .breadcrumb-wrap {
        font-size: 16px;
        font-weight: 600;
        color: #6c757d;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;

        @include respond-below(md) {
            margin-top: 20px;
            justify-content: flex-start;
        }

        @include respond-below(c480) {
            font-size: 15px;
        }

        a {
            color: $color-heading;

            &:hover {
                color: $color-secondary;
            }
        }

        & > span {
            &:not(:first-child) {
                margin-left: 8px;
            }
        }
    }
}