*{
    box-sizing:border-box;
}

html,
body{

    margin:0;
    padding:0;

    min-height:100%;

    font-family:Arial,Tahoma,sans-serif;
}

body{

    min-height:100vh;
    min-height:100dvh;

    position:relative;

    overflow-x:hidden;

    color:#fff;

    background-color:#0b1220;
}

/*
========================================
IOS BACKGROUND FIX
========================================
*/

body::before{

    content:"";

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    z-index:-10;

    background-image:
        linear-gradient(
            135deg,
            rgba(12,20,45,0.88),
            rgba(20,80,120,0.72)
        ),
        url("../../images/bg.png");

    background-position:center center;

    background-repeat:no-repeat;

    background-size:cover;

    -webkit-background-size:cover;

    transform:translate3d(0,0,0);

    will-change:transform;
}

/*
========================================
FLOAT ORB
========================================
*/

.bg-orb{

    position:fixed;

    width:360px;
    height:360px;

    border-radius:50%;

    filter:blur(20px);

    opacity:0.45;

    animation:floatOrb 8s ease-in-out infinite;

    z-index:-1;
}

.orb1{
    top:-120px;
    left:-90px;
    background:#38bdf8;
}

.orb2{
    bottom:-130px;
    right:-90px;
    background:#a855f7;
    animation-delay:1.5s;
}

.orb3{
    bottom:20%;
    left:10%;
    width:180px;
    height:180px;
    background:#22c55e;
    animation-delay:3s;
}

@keyframes floatOrb{

    0%,100%{
        transform:translateY(0) scale(1);
    }

    50%{
        transform:translateY(-35px) scale(1.08);
    }
}