/*
Theme Name: CodeArrest Hello Elementor Child
Theme URI: https://codearrest.com/
Description: Custom CodeArrest child theme.
Author: CodeArrest
Template: hello-elementor
Version: 3.0
*/


/* =========================================================
   GLOBAL
========================================================= */

html,
body {

    margin: 0 !important;
    padding: 0 !important;

}


.ca-404-body {

    background: #07111f !important;

    overflow-x: hidden;

}


/* =========================================================
   MAIN 404 PAGE
========================================================= */

.ca404-page {

    position: relative;

    width: 100%;

    min-height:
        calc(100vh - 150px);

    overflow: hidden;

    background:

        radial-gradient(
            circle at 70% 40%,
            rgba(47,128,255,.16),
            transparent 35%
        ),

        radial-gradient(
            circle at 20% 70%,
            rgba(78,166,255,.08),
            transparent 30%
        ),

        #07111f;

    color: #ffffff;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

}


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

.ca404-bg {

    position: absolute;

    inset: -5%;

    background-image:

        linear-gradient(
            rgba(7,17,31,.25),
            rgba(7,17,31,.25)
        ),

        url("PASTE-YOUR-GENERATED-IMAGE-URL-HERE");

    background-size: cover;

    background-position: center;

    opacity: .48;

    animation:
        ca404BackgroundMove
        14s ease-in-out
        infinite alternate;

    z-index: 0;

}


@keyframes ca404BackgroundMove {

    0% {

        transform: scale(1);

        background-position:
            50% 50%;

    }

    100% {

        transform: scale(1.06);

        background-position:
            48% 52%;

    }

}


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

.ca404-page::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(7,17,31,.72),
            rgba(7,17,31,.18),
            rgba(7,17,31,.65)
        );

    pointer-events: none;

    z-index: 1;

}


/* =========================================================
   AMBIENT GLOW
========================================================= */

.ca404-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;

    z-index: 2;

}


.ca404-glow-1 {

    width: 350px;

    height: 350px;

    background:
        rgba(47,128,255,.16);

    left: 8%;

    top: 25%;

    animation:
        caGlowOne
        7s ease-in-out
        infinite;

}


.ca404-glow-2 {

    width: 450px;

    height: 450px;

    background:
        rgba(78,166,255,.10);

    right: 4%;

    top: 10%;

    animation:
        caGlowTwo
        9s ease-in-out
        infinite;

}


.ca404-glow-3 {

    width: 300px;

    height: 300px;

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

    left: 45%;

    bottom: -100px;

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

}


@keyframes caGlowOne {

    0%,
    100% {

        transform:
            translate(0,0);

        opacity: .7;

    }

    50% {

        transform:
            translate(40px,-30px);

        opacity: 1;

    }

}


@keyframes caGlowTwo {

    0%,
    100% {

        transform:
            translate(0,0);

    }

    50% {

        transform:
            translate(-50px,40px);

    }

}


@keyframes caGlowThree {

    0%,
    100% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.25);

    }

}


/* =========================================================
   DIGITAL GRID
========================================================= */

.ca404-grid {

    position: absolute;

    left: 0;

    right: 0;

    bottom: -20%;

    height: 65%;

    background-image:

        linear-gradient(
            rgba(78,166,255,.07) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(78,166,255,.07) 1px,
            transparent 1px
        );

    background-size:
        65px 65px;

    transform:

        perspective(500px)
        rotateX(62deg)
        scale(1.5);

    transform-origin:
        bottom center;

    opacity: .35;

    z-index: 2;

    animation:
        caGridMove
        12s linear
        infinite;

}


@keyframes caGridMove {

    from {

        background-position:
            0 0;

    }

    to {

        background-position:
            0 65px;

    }

}


/* =========================================================
   PARTICLES
========================================================= */

.ca404-particles {

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 3;

}


.ca404-particles span {

    position: absolute;

    width: 3px;

    height: 3px;

    border-radius: 50%;

    background:
        #4ea6ff;

    box-shadow:
        0 0 10px
        #4ea6ff;

    animation:
        caParticleFloat
        6s ease-in-out
        infinite;

}


.ca404-particles span:nth-child(1) {
    left: 8%;
    top: 20%;
}

.ca404-particles span:nth-child(2) {
    left: 18%;
    top: 75%;
}

.ca404-particles span:nth-child(3) {
    left: 32%;
    top: 12%;
}

.ca404-particles span:nth-child(4) {
    left: 45%;
    top: 80%;
}

.ca404-particles span:nth-child(5) {
    left: 60%;
    top: 17%;
}

.ca404-particles span:nth-child(6) {
    left: 72%;
    top: 70%;
}

.ca404-particles span:nth-child(7) {
    left: 84%;
    top: 30%;
}

.ca404-particles span:nth-child(8) {
    left: 92%;
    top: 65%;
}

.ca404-particles span:nth-child(9) {
    left: 12%;
    top: 45%;
}

.ca404-particles span:nth-child(10) {
    left: 52%;
    top: 35%;
}

.ca404-particles span:nth-child(11) {
    left: 78%;
    top: 15%;
}

.ca404-particles span:nth-child(12) {
    left: 67%;
    top: 88%;
}


@keyframes caParticleFloat {

    0%,
    100% {

        transform:
            translate(0,0)
            scale(1);

        opacity: .25;

    }

    50% {

        transform:
            translate(20px,-30px)
            scale(1.8);

        opacity: 1;

    }

}


/* =========================================================
   MAIN SCENE
========================================================= */

.ca404-main {

    position: relative;

    width: 100%;

    min-height:
        calc(100vh - 150px);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 5;

}


.ca404-scene {

    --mouse-x: 0;

    --mouse-y: 0;

    position: relative;

    width:
        min(1200px,92vw);

    height: 650px;

    transform:

        translate(
            calc(var(--mouse-x) * 10px),
            calc(var(--mouse-y) * 10px)
        );

    transition:
        transform .3s ease-out;

}


/* =========================================================
   AI CORE
========================================================= */

.ca404-core {

    position: absolute;

    width: 250px;

    height: 250px;

    left: 30%;

    top: 48%;

    transform:
        translate(-50%,-50%);

    animation:
        caCoreFloat
        5s ease-in-out
        infinite;

    z-index: 7;

}


.ca404-core-inner {

    position: absolute;

    width: 115px;

    height: 115px;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%,-50%);

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            #4ea6ff,
            #2f80ff 35%,
            #07111f 72%
        );

    border:
        2px solid
        rgba(78,166,255,.8);

    box-shadow:

        0 0 35px
        rgba(47,128,255,.9),

        0 0 90px
        rgba(47,128,255,.45),

        inset 0 0 35px
        rgba(255,255,255,.15);

    z-index: 4;

}


.ca404-core-inner span {

    font-size: 26px;

    font-weight: 800;

    letter-spacing: 3px;

    color: #ffffff;

    text-shadow:
        0 0 15px
        #4ea6ff;

}


/* =========================================================
   CORE RINGS
========================================================= */

.ca404-core-ring {

    position: absolute;

    left: 50%;

    top: 50%;

    border-radius: 50%;

    border:
        1px solid
        rgba(78,166,255,.5);

    transform:
        translate(-50%,-50%);

}


.ring-one {

    width: 160px;

    height: 160px;

    animation:
        caRingRotate
        8s linear
        infinite;

}


.ring-two {

    width: 205px;

    height: 205px;

    border-style: dashed;

    animation:
        caRingRotateReverse
        13s linear
        infinite;

}


.ring-three {

    width: 250px;

    height: 250px;

    border-color:
        rgba(47,128,255,.25);

    animation:
        caRingRotate
        18s linear
        infinite;

}


/* =========================================================
   ORBITS
========================================================= */

.ca404-orbit {

    position: absolute;

    border:
        1px solid
        rgba(78,166,255,.25);

    border-radius: 50%;

    left: 30%;

    top: 48%;

}


.ca404-orbit-1 {

    width: 400px;

    height: 130px;

    transform:
        translate(-50%,-50%)
        rotate(-20deg);

    animation:
        caOrbitOne
        8s linear
        infinite;

}


.ca404-orbit-2 {

    width: 460px;

    height: 160px;

    transform:
        translate(-50%,-50%)
        rotate(55deg);

    animation:
        caOrbitTwo
        11s linear
        infinite;

}


.ca404-orbit-3 {

    width: 330px;

    height: 330px;

    border-color:
        rgba(47,128,255,.12);

    animation:
        caRingRotateReverse
        20s linear
        infinite;

}


/* =========================================================
   EXISTING DATA CARDS
========================================================= */

.ca404-data-card {

    position: absolute;

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(78,166,255,.3);

    background:
        rgba(11,22,51,.55);

    backdrop-filter:
        blur(12px);

    border-radius: 10px;

    color:
        #4ea6ff;

    font-weight: 700;

    box-shadow:
        0 0 25px
        rgba(47,128,255,.15);

    z-index: 8;

}


.card-one {

    left: 9%;

    top: 24%;

    animation:
        caCardOne
        5s ease-in-out
        infinite;

}


.card-two {

    left: 43%;

    top: 16%;

    animation:
        caCardTwo
        6s ease-in-out
        infinite;

}


.card-three {

    left: 42%;

    bottom: 17%;

    animation:
        caCardThree
        5.5s ease-in-out
        infinite;

}


.card-four {

    left: 17%;

    bottom: 12%;

    animation:
        caCardFour
        7s ease-in-out
        infinite;

}


/* =========================================================
   NEW SERVICE ITEMS
========================================================= */

.ca404-service-item {

    position: absolute;

    z-index: 9;

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 70px;

    min-height: 32px;

    padding:
        7px 13px;

    box-sizing: border-box;

    border:
        1px solid
        rgba(78,166,255,.32);

    border-radius: 7px;

    background:
        rgba(7,17,31,.60);

    backdrop-filter:
        blur(12px);

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

    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: .7px;

    white-space: nowrap;

    box-shadow:

        0 0 20px
        rgba(47,128,255,.12),

        inset 0 0 15px
        rgba(78,166,255,.03);

    opacity: 0;

    pointer-events: none;

}


/* Blue glowing dot */

.ca404-service-item::before {

    content: "";

    width: 5px;

    height: 5px;

    margin-right: 7px;

    border-radius: 50%;

    background:
        #4ea6ff;

    box-shadow:
        0 0 9px
        #4ea6ff;

}


/* =========================================
   SERVICE 1 - SaaS
========================================= */

.service-one {

    left: 4%;

    top: 38%;

    animation:
        caServiceOne
        11s
        ease-in-out
        infinite;

}


/* =========================================
   SERVICE 2 - RaaS
========================================= */

.service-two {

    left: 24%;

    top: 8%;

    animation:
        caServiceTwo
        13s
        ease-in-out
        2s
        infinite;

}


/* =========================================
   SERVICE 3 - Healthcare
========================================= */

.service-three {

    left: 45%;

    top: 5%;

    animation:
        caServiceThree
        12s
        ease-in-out
        4s
        infinite;

}


/* =========================================
   SERVICE 4 - MVP Development
========================================= */

.service-four {

    left: 38%;

    bottom: 7%;

    animation:
        caServiceFour
        14s
        ease-in-out
        1s
        infinite;

}


/* =========================================
   SERVICE 5 - ML
========================================= */

.service-five {

    right: 34%;

    top: 19%;

    animation:
        caServiceFive
        10s
        ease-in-out
        3s
        infinite;

}


/* =========================================
   SERVICE 6 - Automation
========================================= */

.service-six {

    right: 4%;

    bottom: 25%;

    animation:
        caServiceSix
        13s
        ease-in-out
        5s
        infinite;

}


/* =========================================================
   RANDOM SERVICE ANIMATIONS
========================================================= */

@keyframes caServiceOne {

    0% {

        opacity: 0;

        transform:
            translate(
                -40px,
                25px
            )
            rotate(-7deg)
            scale(.75);

    }

    12% {

        opacity: .9;

    }

    35% {

        opacity: .85;

        transform:
            translate(
                20px,
                -20px
            )
            rotate(3deg)
            scale(1);

    }

    60% {

        opacity: .65;

        transform:
            translate(
                65px,
                -50px
            )
            rotate(7deg)
            scale(.9);

    }

    82% {

        opacity: .25;

    }

    100% {

        opacity: 0;

        transform:
            translate(
                120px,
                -90px
            )
            rotate(12deg)
            scale(.65);

    }

}


@keyframes caServiceTwo {

    0% {

        opacity: 0;

        transform:
            translate(
                -20px,
                40px
            )
            rotate(8deg)
            scale(.7);

    }

    15% {

        opacity: .9;

    }

    40% {

        opacity: .8;

        transform:
            translate(
                35px,
                -10px
            )
            rotate(-3deg)
            scale(1);

    }

    65% {

        opacity: .55;

        transform:
            translate(
                80px,
                -55px
            )
            rotate(-8deg)
            scale(.88);

    }

    85% {

        opacity: .2;

    }

    100% {

        opacity: 0;

        transform:
            translate(
                125px,
                -100px
            )
            rotate(-12deg)
            scale(.6);

    }

}


@keyframes caServiceThree {

    0% {

        opacity: 0;

        transform:
            translate(
                40px,
                20px
            )
            rotate(-5deg)
            scale(.7);

    }

    14% {

        opacity: .85;

    }

    38% {

        opacity: .8;

        transform:
            translate(
                -15px,
                -25px
            )
            rotate(4deg)
            scale(1);

    }

    63% {

        opacity: .55;

        transform:
            translate(
                -60px,
                -70px
            )
            rotate(9deg)
            scale(.9);

    }

    84% {

        opacity: .15;

    }

    100% {

        opacity: 0;

        transform:
            translate(
                -100px,
                -115px
            )
            rotate(14deg)
            scale(.6);

    }

}


@keyframes caServiceFour {

    0% {

        opacity: 0;

        transform:
            translate(
                -50px,
                15px
            )
            rotate(6deg)
            scale(.7);

    }

    13% {

        opacity: .9;

    }

    42% {

        opacity: .8;

        transform:
            translate(
                5px,
                -30px
            )
            rotate(-2deg)
            scale(1);

    }

    68% {

        opacity: .55;

        transform:
            translate(
                60px,
                -70px
            )
            rotate(-8deg)
            scale(.88);

    }

    86% {

        opacity: .15;

    }

    100% {

        opacity: 0;

        transform:
            translate(
                115px,
                -110px
            )
            rotate(-13deg)
            scale(.6);

    }

}


@keyframes caServiceFive {

    0% {

        opacity: 0;

        transform:
            translate(
                45px,
                35px
            )
            rotate(-7deg)
            scale(.7);

    }

    15% {

        opacity: .9;

    }

    40% {

        opacity: .8;

        transform:
            translate(
                -10px,
                -5px
            )
            rotate(2deg)
            scale(1);

    }

    67% {

        opacity: .55;

        transform:
            translate(
                -65px,
                -55px
            )
            rotate(8deg)
            scale(.88);

    }

    85% {

        opacity: .15;

    }

    100% {

        opacity: 0;

        transform:
            translate(
                -110px,
                -100px
            )
            rotate(13deg)
            scale(.6);

    }

}


@keyframes caServiceSix {

    0% {

        opacity: 0;

        transform:
            translate(
                35px,
                25px
            )
            rotate(6deg)
            scale(.7);

    }

    14% {

        opacity: .9;

    }

    38% {

        opacity: .8;

        transform:
            translate(
                -10px,
                -20px
            )
            rotate(-2deg)
            scale(1);

    }

    65% {

        opacity: .55;

        transform:
            translate(
                -55px,
                -65px
            )
            rotate(-8deg)
            scale(.88);

    }

    84% {

        opacity: .15;

    }

    100% {

        opacity: 0;

        transform:
            translate(
                -105px,
                -110px
            )
            rotate(-13deg)
            scale(.6);

    }

}


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

.ca404-content {

    position: absolute;

    width: 520px;

    right: 2%;

    top: 50%;

    transform:
        translateY(-50%);

    z-index: 12;

}


.ca404-number {

    font-size:
        clamp(
            130px,
            15vw,
            210px
        );

    line-height: .78;

    font-weight: 800;

    letter-spacing: -12px;

    background:

        linear-gradient(
            135deg,
            #ffffff 5%,
            #4ea6ff 45%,
            #2f80ff 75%,
            #0b1633
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

    filter:
        drop-shadow(
            0 0 25px
            rgba(47,128,255,.45)
        );

    animation:
        ca404Pulse
        4s ease-in-out
        infinite;

}


.ca404-content h1 {

    margin:
        30px 0 35px;

    font-size: 22px;

    font-weight: 500;

    letter-spacing: 9px;

    color: #ffffff;

    text-transform:
        uppercase;

}


/* =========================================================
   HOMEPAGE BUTTON
========================================================= */

.ca404-home-button {

    display: inline-flex;

    align-items: center;

    gap: 13px;

    padding:
        15px 24px;

    border:
        1px solid
        rgba(78,166,255,.7);

    border-radius: 8px;

    background:
        rgba(47,128,255,.12);

    color:
        #ffffff !important;

    text-decoration:
        none !important;

    font-size: 14px;

    font-weight: 600;

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 0 25px
        rgba(47,128,255,.18);

    transition:
        all .3s ease;

}


.ca404-home-button:hover {

    transform:
        translateY(-4px);

    background:
        rgba(47,128,255,.28);

    color:
        #ffffff !important;

    box-shadow:
        0 0 35px
        rgba(47,128,255,.4);

}


.ca404-button-icon {

    color:
        #4ea6ff;

    font-size: 18px;

}


.ca404-arrow {

    color:
        #4ea6ff;

    font-size: 20px;

}


/* =========================================================
   HOLOGRAPHIC PANELS
========================================================= */

.ca404-panel {

    position: absolute;

    padding:
        18px;

    background:
        rgba(11,22,51,.52);

    border:
        1px solid
        rgba(78,166,255,.22);

    border-radius:
        12px;

    backdrop-filter:
        blur(15px);

    box-shadow:
        0 0 35px
        rgba(47,128,255,.12);

    z-index: 6;

}


.ca404-panel-one {

    width: 180px;

    left: 1%;

    top: 8%;

    transform:
        rotate(-7deg);

    animation:
        caPanelFloat
        6s ease-in-out
        infinite;

}


.ca404-panel-two {

    width: 170px;

    right: 3%;

    bottom: 12%;

    animation:
        caPanelFloat
        7s ease-in-out
        infinite reverse;

}


.ca404-panel-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        #4ea6ff;

    box-shadow:
        0 0 12px
        #4ea6ff;

    margin-bottom:
        14px;

}


.ca404-code-line {

    height: 4px;

    margin-bottom:
        8px;

    border-radius:
        5px;

    background:
        rgba(78,166,255,.35);

}


.ca404-code-line.long {
    width: 90%;
}


.ca404-code-line.medium {
    width: 65%;
}


.ca404-code-line.short {
    width: 40%;
}


.ca404-panel-title {

    font-size: 10px;

    letter-spacing: 2px;

    color:
        #4ea6ff;

    margin-bottom:
        14px;

}


.ca404-status {

    font-size: 9px;

    letter-spacing: 1px;

    color:
        #ffffff;

    display: flex;

    align-items: center;

    gap: 8px;

}


.ca404-status span {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background:
        #4ea6ff;

    box-shadow:
        0 0 10px
        #4ea6ff;

    animation:
        caStatusBlink
        1.5s
        infinite;

}


.ca404-progress {

    margin-top:
        15px;

    width: 100%;

    height: 3px;

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

    overflow: hidden;

    border-radius:
        5px;

}


.ca404-progress i {

    display: block;

    width: 40%;

    height: 100%;

    background:
        #2f80ff;

    box-shadow:
        0 0 10px
        #2f80ff;

    animation:
        caProgress
        2s
        ease-in-out
        infinite;

}


/* =========================================================
   EXISTING CARD ANIMATIONS
========================================================= */

@keyframes caCardOne {

    0%,
    100% {

        transform:
            translate(0,0)
            rotate(-8deg);

    }

    50% {

        transform:
            translate(15px,-20px)
            rotate(5deg);

    }

}


@keyframes caCardTwo {

    0%,
    100% {

        transform:
            translate(0,0)
            rotate(5deg);

    }

    50% {

        transform:
            translate(-18px,15px)
            rotate(-5deg);

    }

}


@keyframes caCardThree {

    0%,
    100% {

        transform:
            translate(0,0);

    }

    50% {

        transform:
            translate(20px,-12px);

    }

}


@keyframes caCardFour {

    0%,
    100% {

        transform:
            translate(0,0)
            rotate(8deg);

    }

    50% {

        transform:
            translate(-15px,-20px)
            rotate(-5deg);

    }

}


/* =========================================================
   OTHER ANIMATIONS
========================================================= */

@keyframes caCoreFloat {

    0%,
    100% {

        transform:
            translate(-50%,-50%)
            translateY(0);

    }

    50% {

        transform:
            translate(-50%,-50%)
            translateY(-18px);

    }

}


@keyframes caRingRotate {

    from {

        transform:
            translate(-50%,-50%)
            rotate(0deg);

    }

    to {

        transform:
            translate(-50%,-50%)
            rotate(360deg);

    }

}


@keyframes caRingRotateReverse {

    from {

        transform:
            translate(-50%,-50%)
            rotate(360deg);

    }

    to {

        transform:
            translate(-50%,-50%)
            rotate(0deg);

    }

}


@keyframes caOrbitOne {

    from {

        transform:
            translate(-50%,-50%)
            rotate(-20deg);

    }

    to {

        transform:
            translate(-50%,-50%)
            rotate(340deg);

    }

}


@keyframes caOrbitTwo {

    from {

        transform:
            translate(-50%,-50%)
            rotate(55deg);

    }

    to {

        transform:
            translate(-50%,-50%)
            rotate(-305deg);

    }

}


@keyframes ca404Pulse {

    0%,
    100% {

        filter:
            drop-shadow(
                0 0 20px
                rgba(47,128,255,.35)
            );

    }

    50% {

        filter:
            drop-shadow(
                0 0 45px
                rgba(47,128,255,.7)
            );

    }

}


@keyframes caPanelFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(-7deg);

    }

    50% {

        transform:
            translateY(-15px)
            rotate(-3deg);

    }

}


@keyframes caStatusBlink {

    0%,
    100% {
        opacity: .4;
    }

    50% {
        opacity: 1;
    }

}


@keyframes caProgress {

    0% {

        transform:
            translateX(-100%);

    }

    100% {

        transform:
            translateX(250%);

    }

}


/* =========================================================
   SYSTEM STATUS
========================================================= */

.ca404-system-status {

    position: absolute;

    bottom: 25px;

    left: 35px;

    display: flex;

    align-items: center;

    gap: 9px;

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

    font-size: 9px;

    letter-spacing: 2px;

    z-index: 15;

}


.status-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background:
        #4ea6ff;

    box-shadow:
        0 0 10px
        #4ea6ff;

    animation:
        caStatusBlink
        2s
        infinite;

}


/* =========================================================
   CURSOR GLOW
========================================================= */

.ca404-cursor-glow {

    position: fixed;

    width: 180px;

    height: 180px;

    transform:
        translate(-50%,-50%);

    border-radius: 50%;

    pointer-events: none;

    background:

        radial-gradient(
            circle,
            rgba(47,128,255,.12),
            transparent 70%
        );

    z-index: 4;

    mix-blend-mode:
        screen;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {


    .ca404-page {

        min-height:
            calc(100svh - 100px);

    }


    .ca404-main {

        min-height:
            calc(100svh - 100px);

    }


    .ca404-scene {

        width: 100%;

        height: 680px;

    }


    .ca404-core {

        left: 50%;

        top: 30%;

        transform:
            translate(-50%,-50%)
            scale(.65);

    }


    .ca404-orbit {

        left: 50%;

        top: 30%;

        transform:
            translate(-50%,-50%)
            scale(.65);

    }


    .ca404-content {

        width: 100%;

        right: auto;

        left: 0;

        top: 54%;

        transform: none;

        text-align:
            center;

    }


    .ca404-number {

        font-size:
            95px;

        letter-spacing:
            -7px;

    }


    .ca404-content h1 {

        margin:
            22px 0 28px;

        font-size:
            14px;

        letter-spacing:
            4px;

    }


    .ca404-home-button {

        padding:
            14px 20px;

    }


    /* Service items on mobile */

    .ca404-service-item {

        font-size:
            8px;

        min-height:
            28px;

        padding:
            5px 8px;

        letter-spacing:
            .4px;

    }


    .ca404-service-item::before {

        width: 4px;

        height: 4px;

        margin-right:
            5px;

    }


    .service-one {

        left: 2%;

        top: 38%;

    }


    .service-two {

        left: 8%;

        top: 13%;

    }


    .service-three {

        left: auto;

        right: 4%;

        top: 8%;

    }


    .service-four {

        left: 5%;

        bottom: 17%;

    }


    .service-five {

        right: 8%;

        top: 34%;

    }


    .service-six {

        right: 2%;

        bottom: 22%;

    }


    .ca404-panel-one {

        left: -20px;

        top: 6%;

        transform:
            scale(.6)
            rotate(-7deg);

        opacity: .7;

    }


    .ca404-panel-two {

        right: -20px;

        bottom: 34%;

        transform:
            scale(.6);

        opacity: .7;

    }


    .ca404-data-card {

        transform:
            scale(.65);

    }


    .card-one {

        left: 4%;

        top: 25%;

    }


    .card-two {

        left: auto;

        right: 5%;

        top: 17%;

    }


    .card-three {

        left: auto;

        right: 8%;

        bottom: 30%;

    }


    .card-four {

        left: 4%;

        bottom: 30%;

    }


    .ca404-system-status {

        left: 50%;

        transform:
            translateX(-50%);

        bottom: 12px;

        white-space:
            nowrap;

        font-size:
            8px;

    }


    .ca404-cursor-glow {

        display:
            none;

    }


    .ca404-grid {

        opacity:
            .18;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {


    .ca404-scene {

        height:
            620px;

    }


    .ca404-core {

        top: 29%;

        transform:
            translate(-50%,-50%)
            scale(.55);

    }


    .ca404-orbit {

        top: 29%;

        transform:
            translate(-50%,-50%)
            scale(.55);

    }


    .ca404-content {

        top: 54%;

    }


    .ca404-number {

        font-size:
            90px;

    }


    .ca404-content h1 {

        font-size:
            13px;

        letter-spacing:
            3px;

    }


    .ca404-home-button {

        padding:
            13px 18px;

    }


    .ca404-service-item {

        font-size:
            7px;

        padding:
            4px 7px;

    }

}