/* ==========================================
   NORTHBRIDGE PAGE LOADER (FORCED)
========================================== */

.page-loader{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    background: radial-gradient(circle at center,#12346f 0%,#0b2555 40%,#07204A 75%,#04142d 100%) !important;

    opacity: 1 !important;
    visibility: visible !important;

    overflow: hidden !important;

    z-index: 2147483647 !important;

    transition: opacity .7s ease, visibility .7s ease;
}

.page-loader.hide{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

/* ========================= */

.loader-center{
    width:380px;
    max-width:90%;
    text-align:center;
}

/* ========================= */

.loader-logo{
    position:relative;
    width:140px;
    height:140px;
    margin:0 auto 35px;
}

/* ========================= */

.loader-logo-inner{

    position:absolute;
    top:18px;
    left:18px;
    right:18px;
    bottom:18px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;

    background:#0d2d64;

    color:#D4AF37;

    border:2px solid rgba(212,175,55,.4);

    font-size:42px;
    font-weight:800;

    letter-spacing:5px;

    animation:logoPulse 2s infinite;
}

/* ========================= */

.loader-ring{

    position:absolute;

    inset:0;

    border-radius:50%;

    border:2px solid rgba(212,175,55,.2);

    border-top:2px solid #D4AF37;

    animation:spin 3s linear infinite;

}

.loader-ring.ring-2{

    inset:12px;

    border:2px solid transparent;

    border-bottom:2px solid #D4AF37;

    animation:spinReverse 2s linear infinite;

}

/* ========================= */

.loader-center h2{

    color:#fff;

    font-size:32px;

    margin-bottom:10px;

    letter-spacing:2px;

}

.loader-center p{

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

    margin-bottom:35px;

    font-size:16px;

}

/* ========================= */

.loader-bar{

    width:100%;

    height:5px;

    background:rgba(255,255,255,.08);

    border-radius:999px;

    overflow:hidden;

}

.loader-bar span{

    display:block;

    width:35%;

    height:100%;

    background:linear-gradient(90deg,#f7d775,#D4AF37,#ffe7a0);

    border-radius:999px;

    animation:barMove 1.5s linear infinite;

}

/* ========================= */

.loader-logo::before{

    content:"";

    position:absolute;

    inset:-20px;

    border-radius:50%;

    background:radial-gradient(rgba(212,175,55,.2),transparent 70%);

    animation:glow 2s infinite;

}

/* ========================= */

@keyframes spin{

    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}

}

@keyframes spinReverse{

    from{transform:rotate(360deg);}
    to{transform:rotate(0deg);}

}

@keyframes logoPulse{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.06);

    }

}

@keyframes glow{

    0%,100%{

        transform:scale(.9);

        opacity:.4;

    }

    50%{

        transform:scale(1.15);

        opacity:1;

    }

}

@keyframes barMove{

    from{

        transform:translateX(-150%);

    }

    to{

        transform:translateX(350%);

    }

}

/* ========================= */

@media(max-width:768px){

    .loader-logo{

        width:120px;
        height:120px;

    }

    .loader-logo-inner{

        font-size:34px;

    }

    .loader-center h2{

        font-size:28px;

    }

}