/* =================================
   PAGE BANNER
================================= */

.page-banner{
    position:relative;
    padding:10px 0;
    display:flex;
    align-items:center;
    overflow:hidden;
    min-height:110px;
}

/* ===============================
   BACKGROUND IMAGE
================================ */

.page-banner-bg{
    position:absolute;
    inset:0;
    z-index:1;
}

.page-banner-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

/* ===============================
   OVERLAY
================================ */

.page-banner-overlay{
    position:absolute;
    inset:0;
    z-index:2;

    background:
    linear-gradient(
        90deg,
        rgba(1,18,71,.92) 0%,
        rgba(1,18,71,.82) 40%,
        rgba(1,18,71,.40) 100%
    );
}

/* ===============================
   CONTENT
================================ */

.page-banner .container{
    position:relative;
    z-index:3;
}

.page-banner-content{
    display:flex;
    align-items:center;
    gap:25px;
}

.page-banner-line{
    width:5px;
    height:60px;
    background:#0B5FFF;
    border-radius:20px;
}

.page-banner h1{
    color:#fff;
    font-size:30px;
    font-weight:800;
    line-height:1.1;
    margin:0 0 10px;
}

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

.page-breadcrumb{
    display:none;
    /*display:flex;*/
    align-items:center;
    flex-wrap:wrap;
    gap:10px;

    color:rgba(255,255,255,.85);

    font-size:15px;
    font-weight:500;
}

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

.page-breadcrumb a:hover{
    color:#4DA3FF;
}

.page-breadcrumb span{
    color:#fff;
}

/* ==========================================
   4K SCREEN (3840px+)
========================================== */

@media (min-width:3000px){

    .page-banner{
        min-height:400px;
        /*padding:40px 0;*/
    }

    .page-banner-line{
        width:8px;
        height:150px;
    }

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

    .page-breadcrumb{
        font-size:24px;
        gap:16px;
    }
}

/* ==========================================
   2560px
========================================== */

@media (min-width:2200px) and (max-width:2999px){

    .page-banner{
        min-height:170px;
        /*padding:40px 0;*/
    }

    .page-banner-line{
        height:130px;
    }

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

    .page-breadcrumb{
        font-size:20px;
    }
}

/* ==========================================
   1920px
========================================== */

@media (min-width:1600px) and (max-width:2199px){

    .page-banner{
        min-height:140px;
        /*padding:40px 0;*/
    }

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

    .page-breadcrumb{
        font-size:18px;
    }
}

/* ==========================================
   1440px
========================================== */

@media (max-width:1440px){

    .page-banner{
        min-height:130px;
    }

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

/* ==========================================
   1366px
========================================== */

@media (max-width:1366px){

    .page-banner{
        min-height:120px;
    }

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

    .page-banner-line{
        height:80px;
    }
}

/* ==========================================
   1280px
========================================== */

@media (max-width:1280px){

    .page-banner{
        min-height:90px;
    }

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

    .page-banner-line{
        height:75px;
    }
}

/* ==========================================
   1024px
========================================== */

@media (max-width:1024px){

    .page-banner{
        min-height:80px;
        /*padding:40px 0;*/
    }

    .page-banner-content{
        gap:20px;
    }

    .page-banner-line{
        height:70px;
    }

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

    .page-breadcrumb{
        font-size:14px;
    }
}

/* ==========================================
   768px
========================================== */

@media (max-width:768px){

    .page-banner{
        min-height:80px;
        /*padding:30px 0;*/
    }

    .page-banner-content{
        gap:18px;
    }

    .page-banner-line{
        height:60px;
    }

    .page-banner h1{
        font-size:28px;
        margin-bottom:12px;
    }

    .page-breadcrumb{
        font-size:13px;
    }
}

/* ==========================================
   576px
========================================== */

@media (max-width:576px){

    .page-banner{
        /*min-height:180px;*/
        padding:40px 0;
    }

    .page-banner-content{
        gap:15px;
    }

    .page-banner-line{
        width:4px;
        height:55px;
    }

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

    .page-breadcrumb{
        font-size:12px;
    }
}

/* ==========================================
   480px
========================================== */

@media (max-width:480px){

    .page-banner{
        /*min-height:170px;*/
        padding:20px 0;
    }

    .page-banner-line{
        height:50px;
    }

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

    .page-breadcrumb{
        font-size:12px;
        gap:6px;
    }
}

/* ==========================================
   375px
========================================== */

@media (max-width:375px){

    .page-banner{
        /*min-height:150px;*/
    }

    .page-banner-content{
        gap:12px;
    }

    .page-banner-line{
        height:45px;
    }

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

    .page-breadcrumb{
        font-size:11px;
    }
}

/* ==========================================
   320px
========================================== */

@media (max-width:320px){

    .page-banner{
        /*min-height:140px;*/
    }

    .page-banner-content{
        gap:10px;
    }

    .page-banner-line{
        width:3px;
        height:40px;
    }

    .page-banner h1{
        font-size:20px;
        margin-bottom:8px;
    }

    .page-breadcrumb{
        font-size:10px;
        gap:4px;
    }
}