/**
 * Theme Name:     PopularFX Child
 * Author:         Pagelayer
 * Template:       popularfx
 * Text Domain:	   popularfx-child
 * Description:    Lightweight theme to make beautiful websites with Pagelayer. Includes 100s of pre-made templates to design your dream website !
 */

/*---------- bg1 ***/
 .hero-bg-1{
    background: linear-gradient(
        -45deg,
        #0B1F3A,
        #0D6EFD,
        #0B1F3A,
        #FF7A00
    );
    background-size: 400% 400%;
    animation: gradientFlow 15s ease infinite;
}

@keyframes gradientFlow{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

/************ bg2 ****/

.hero-bg-2{
    background:
    radial-gradient(circle at 20% 20%, rgba(13,110,253,.25), transparent 30%),
    radial-gradient(circle at 80% 30%, rgba(255,122,0,.2), transparent 30%),
    radial-gradient(circle at 60% 80%, rgba(13,110,253,.2), transparent 35%),
    #0B1F3A;
    animation: pulseGlow 8s ease-in-out infinite;
}

@keyframes pulseGlow{
    50%{
        filter: brightness(1.2);
    }
}


/***** bg3 ***********/

.hero-bg-3{
    background:
    repeating-linear-gradient(
        90deg,
        rgba(13,110,253,.08) 0px,
        rgba(13,110,253,.08) 2px,
        transparent 2px,
        transparent 80px
    ),
    #0B1F3A;

    animation: moveLines 10s linear infinite;
}

@keyframes moveLines{
    from{background-position:0 0;}
    to{background-position:300px 0;}
}


/***** --bg4 - ***/

.hero-bg-4{
    background:#0B1F3A;
    position:relative;
    overflow:hidden;
}

.hero-bg-4::before{
    content:"";
    position:absolute;
    background:
    radial-gradient(circle,#0D6EFD 2px,transparent 3px);
    background-size:120px 120px;

    animation: floatNodes 20s linear infinite;
    opacity:.4;
}

@keyframes floatNodes{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(-100px);
    }
}

/****** bg5 ****/


.hero-bg-5{
    position:relative;
    overflow:hidden;

    background:
    radial-gradient(circle at 20% 20%, rgba(13,110,253,.25), transparent 35%),
    radial-gradient(circle at 80% 30%, rgba(255,122,0,.15), transparent 35%),
    radial-gradient(circle at 70% 80%, rgba(13,110,253,.2), transparent 40%),
    #0B1F3A;
}

.hero-bg-5::before{
    content:"";
    position:absolute;
    background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

    background-size:80px 80px;

    animation:gridMove 25s linear infinite;
}

.hero-bg-5::after{
    content:"";
    position:absolute;
    background:
    repeating-linear-gradient(
        90deg,
        rgba(13,110,253,.08),
        rgba(13,110,253,.08) 2px,
        transparent 2px,
        transparent 120px
    );

    animation:dataFlow 12s linear infinite;
}

@keyframes gridMove{
    from{transform:translateY(0);}
    to{transform:translateY(80px);}
}

@keyframes dataFlow{
    from{background-position:0 0;}
    to{background-position:400px 0;}
}


/**** inner bg1 ****/
.inner-bg-1{
    background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    #0B1F3A;

    background-size:40px 40px;
}


/********** inner bg2 **/

.inner-bg-2{
    background-color:#0B1F3A;

    background-image:
    radial-gradient(
        rgba(13,110,253,.18) 1px,
        transparent 1px
    );

    background-size:25px 25px;
}

/******** inner bg3 **/ 

.inner-bg-3{
    position:relative;
    background:#0B1F3A;
    overflow:hidden;
}

.inner-bg-3::before{
    content:"";
    position:absolute;
    background:
    repeating-linear-gradient(
        90deg,
        transparent,
        transparent 100px,
        rgba(13,110,253,.08) 100px,
        rgba(13,110,253,.08) 102px
    );

    animation:dataMove 20s linear infinite;
}

@keyframes dataMove{
    from{
        background-position:0 0;
    }
    to{
        background-position:500px 0;
    }
}

/********* inner bg 4 ***/

.inner-bg-4{
    position:relative;
    overflow:hidden;

    background:
    radial-gradient(circle at 10% 20%,
    rgba(13,110,253,.12),
    transparent 35%),

    radial-gradient(circle at 90% 80%,
    rgba(255,122,0,.08),
    transparent 30%),

    linear-gradient(
        180deg,
        #0B1F3A,
        #112a4f
    );
}

.inner-bg-4::before{
    content:"";
    position:absolute;
    
    background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

    background-size:60px 60px;

    animation:manufacturingGrid 25s linear infinite;
}

@keyframes manufacturingGrid{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(60px);
    }
}

/**** hero gradient ****/ 

.gradient1 {

background:
radial-gradient(circle at top left,#0F62FE,#001F3F),
radial-gradient(circle at bottom right,#00AEEF,#001428);
}

/********** gradient 2 */

.gradient2{
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 20%, rgba(13,110,253,0.35) 0%, transparent 40%),
        radial-gradient(circle at 85% 25%, rgba(255,122,0,0.25) 0%, transparent 105%),
        radial-gradient(circle at 50% 80%, rgba(13,110,253,0.20) 0%, transparent 40%),
        linear-gradient(135deg, #0B1F3A 0%, #13294B 50%, #0B1F3A 100%);
}

.gradient2::before {
    content: "";
    position: absolute;
    background-image:
        linear-gradient(rgba(13,110,253,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13,110,253,0.08) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.5;
    pointer-events: none;
}



.gradient2::after {
    content: "";
    position: absolute;
    background-image:
        radial-gradient(circle, #0D6EFD 2px, transparent 3px),
        radial-gradient(circle, #FF7A00 2px, transparent 3px);
    background-size: 120px 120px;
    opacity: .35;
    pointer-events: none;
}