/* =========================================
PRELOADER
========================================= */

.preloader-wrapper{

    position:fixed;

    inset:0;

    width:100%;

    height:100vh;

    background:
    linear-gradient(
        135deg,
        #081c15 0%,
        #13294B 45%,
        #0A7D5C 100%
    );

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:999999;

    overflow:hidden;

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

/* HIDE PRELOADER */

.preloader-wrapper.fade-out{

    opacity:0;

    visibility:hidden;
}

/* CONTENT */

.preloader-content{

    text-align:center;

    position:relative;

    z-index:2;
    animation:
    fadeInUp 1s ease;
}

@keyframes fadeInUp{

    from{

        opacity:0;

        transform:
        translateY(20px);
    }

    to{

        opacity:1;

        transform:
        translateY(0);
    }
}
/* =========================================
LOADER RING
========================================= */

.loader-ring{

    width:110px;

    height:110px;

    margin:0 auto 30px;

    border-radius:50%;

    border:4px solid
    rgba(255,255,255,0.12);

    border-top:4px solid #8FFFE0;

    animation:
    spin 1.2s linear infinite,
    glowPulse 2s ease-in-out infinite;
}

/* SPIN */

@keyframes spin{

    100%{
        transform:rotate(360deg);
    }
}

/* GLOW */

@keyframes glowPulse{

    0%,
    100%{

        box-shadow:
        0 0 15px rgba(143,255,224,0.25),
        0 0 30px rgba(143,255,224,0.15);
    }

    50%{

        box-shadow:
        0 0 25px rgba(143,255,224,0.55),
        0 0 45px rgba(143,255,224,0.25);
    }
}

/* =========================================
BRAND TITLE
========================================= */

.preloader-content h2{

    font-size:
    clamp(2.2rem,5vw,4rem);

    font-weight:800;

    color:#ffffff;

    letter-spacing:1px;

    margin-bottom:12px;
}

/* HIGHLIGHT */

.preloader-content h2 span{

    color:#8FFFE0;
}

/* TAGLINE */

.preloader-content p{

    color:
    rgba(255,255,255,0.82);

    font-size:1rem;

    letter-spacing:3px;

    text-transform:uppercase;
}

/* =========================================
BACKGROUND GLOW
========================================= */

.preloader-wrapper::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:
    rgba(143,255,224,0.08);

    border-radius:50%;

    filter:blur(80px);

    top:-120px;

    right:-120px;
}

.preloader-wrapper::after{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    background:
    rgba(255,255,255,0.04);

    border-radius:50%;

    filter:blur(80px);

    bottom:-100px;

    left:-100px;
}