/*=========================================================
SERVICES HERO
=========================================================*/

.services-hero {
    position: relative;
    height: 420px;
    background: url('/images/services/services-banner.jpg') center center/cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 40px;
}

.services-overlay {
    background: linear-gradient( 135deg, rgba(7,27,74,.82), rgba(18,59,139,.75), rgba(90,46,166,.72), rgba(233,30,99,.70));
}

.container {
    position: relative;
    z-index: 2;
}

/*=========================================
BREADCRUMB
=========================================*/

.breadcrumb-box {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 35px;
    background: rgba(255,255,255,.92);
    border-radius: 50px;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

    .breadcrumb-box a {
        color: #ffffff;
        background: #08285C;
        padding: 8px 18px;
        border-radius: 25px;
        text-decoration: none;
        font-weight: 600;
        transition: .3s;
    }

        .breadcrumb-box a:hover {
            background: #ff9800;
        }

    .breadcrumb-box span {
        color: #ff9800;
        font-size: 22px;
        font-weight: 700;
    }

    .breadcrumb-box strong {
        color: #08285C;
        font-size: 18px;
        font-weight: 700;
    }

/*=========================================
Responsive
=========================================*/

@media(max-width:991px) {

    .services-hero {
        height: 300px;
        padding-bottom: 25px;
    }

    .breadcrumb-box {
        padding: 12px 22px;
    }

        .breadcrumb-box a,
        .breadcrumb-box strong {
            font-size: 16px;
        }
}