/*==================================
Breadcrumb
===================================*/

.page-banner{
    position:relative;
    padding: 160px 0 70px;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    overflow:hidden;
}

.banner-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(22deg, rgb(4 22 65 / 72%), rgb(24 45 96 / 78%), rgb(4 22 65 / 0%));
}

.page-banner-content{
    position:relative;
    z-index:2;
    color:#fff;
    text-align:center;
}

.banner-subtitle{
    display:inline-block;
    padding: 6px 22px;
    border-radius:50px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
    color: #ffce44;
    font-size:15px;
    font-weight:600;
    letter-spacing:.8px;
    margin-bottom: 9px;
}

.page-banner h1{
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 6px;
    color:#fff;
}

.breadcrumb{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    padding:0;
    margin:0;
    list-style:none;
}

.breadcrumb li{
    color:#fff;
    font-size:17px;
    font-weight:500;
    position:relative;
}

.breadcrumb li+li::before{
    content:"/";
    margin-right:15px;
    color:#F4B400;
}

.breadcrumb li a{
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.breadcrumb li a:hover{
    color:#F4B400;
}

.breadcrumb li.active{
    color:#F4B400;
}

.breadcrumb i{
    margin-right:8px;
}

@media(max-width:991px){

.page-banner{
padding:140px 0 90px;
}

.page-banner h1{
font-size:42px;
}

}

@media(max-width:767px){

.page-banner{
padding:120px 0 70px;
}

.page-banner h1{
font-size:34px;
}

.banner-subtitle{
font-size:13px;
padding:8px 18px;
}

.breadcrumb{
flex-wrap:wrap;
gap:10px;
}

.breadcrumb li{
font-size:15px;
}

}