.elementor-8644 .elementor-element.elementor-element-54550e3{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-54550e3 *//* =========================================
   IS MY MIDDLE NAME
   DARK MOVING AURORA BACKGROUND
   ========================================= */

.aurora-bg {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
    background: #09090b;
}


/* Keep Elementor content above the animation */

.aurora-bg > * {
    position: relative;
    z-index: 2;
}


/* =========================================
   PURPLE GLOW
   ========================================= */

.aurora-bg::before {
    content: "";
    position: absolute;

    width: 42vw;
    height: 42vw;

    border-radius: 50%;

    /* Brand purple */
    background: #4B3FC4;

    filter: blur(105px);
    opacity: 0.48;

    top: -18vw;
    left: -12vw;

    z-index: 0;
    pointer-events: none;

    will-change: transform;

    animation: purpleGlow 9s ease-in-out infinite alternate;
}


/* =========================================
   ORANGE GLOW
   ========================================= */

.aurora-bg::after {
    content: "";
    position: absolute;

    width: 38vw;
    height: 38vw;

    border-radius: 50%;

    /* Brand orange */
    background: #FA512F;

    filter: blur(100px);
    opacity: 0.46;

    right: -12vw;
    bottom: -16vw;

    z-index: 0;
    pointer-events: none;

    will-change: transform;

    animation: orangeGlow 11s ease-in-out infinite alternate;
}


/* =========================================
   PURPLE MOVEMENT
   ========================================= */

@keyframes purpleGlow {

    0% {
        transform:
            translate(-5vw, -5vh)
            scale(0.90);
    }

    35% {
        transform:
            translate(18vw, 12vh)
            scale(1.15);
    }

    70% {
        transform:
            translate(28vw, 28vh)
            scale(0.95);
    }

    100% {
        transform:
            translate(10vw, 38vh)
            scale(1.20);
    }
}


/* =========================================
   ORANGE MOVEMENT
   ========================================= */

@keyframes orangeGlow {

    0% {
        transform:
            translate(5vw, 5vh)
            scale(1);
    }

    35% {
        transform:
            translate(-18vw, -12vh)
            scale(1.20);
    }

    70% {
        transform:
            translate(-28vw, -25vh)
            scale(0.95);
    }

    100% {
        transform:
            translate(-12vw, -38vh)
            scale(1.15);
    }
}


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

@media (max-width: 767px) {

    .aurora-bg::before {
        width: 80vw;
        height: 80vw;

        top: -35vw;
        left: -35vw;

        filter: blur(75px);
        opacity: 0.46;

        animation-duration: 8s;
    }

    .aurora-bg::after {
        width: 75vw;
        height: 75vw;

        right: -35vw;
        bottom: -30vw;

        filter: blur(75px);
        opacity: 0.44;

        animation-duration: 10s;
    }
}


/* =========================================
   ACCESSIBILITY
   ========================================= */

@media (prefers-reduced-motion: reduce) {

    .aurora-bg::before,
    .aurora-bg::after {
        animation: none;
    }
}/* End custom CSS */