.elementor-673 .elementor-element.elementor-element-185416e{--display:flex;}.elementor-673 .elementor-element.elementor-element-ed4aff1{--display:flex;}.elementor-673 .elementor-element.elementor-element-ed4aff1.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-673 .elementor-element.elementor-element-607d42b > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-673 .elementor-element.elementor-element-43386cb{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:stretch;}.elementor-673 .elementor-element.elementor-element-88b4bca{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:102px;--padding-bottom:102px;--padding-left:102px;--padding-right:100px;}.elementor-673 .elementor-element.elementor-element-88b4bca.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-673 .elementor-element.elementor-element-724e944{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-673 .elementor-element.elementor-element-724e944.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-673 .elementor-element.elementor-element-511131b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-673 .elementor-element.elementor-element-511131b.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-673 .elementor-element.elementor-element-d3ba231{--display:flex;--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;}.elementor-673 .elementor-element.elementor-element-39a3396{--display:flex;}.elementor-673 .elementor-element.elementor-element-50ac26d{--display:flex;--min-height:0px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-673 .elementor-element.elementor-element-e45f7a4{--display:flex;}.elementor-673 .elementor-element.elementor-element-2ab5a5c{--display:flex;}.elementor-673 .elementor-element.elementor-element-c0caf72{--display:flex;--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;}.elementor-673 .elementor-element.elementor-element-c82e75b{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:flex-start;}.elementor-673 .elementor-element.elementor-element-50a8bb4{--display:flex;}.elementor-673 .elementor-element.elementor-element-50a8bb4.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-673 .elementor-element.elementor-element-fb7d9e8{width:var( --container-widget-width, 107.458% );max-width:107.458%;--container-widget-width:107.458%;--container-widget-flex-grow:0;}.elementor-673 .elementor-element.elementor-element-fb7d9e8.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-673 .elementor-element.elementor-element-fb979c2{--display:flex;}.elementor-673 .elementor-element.elementor-element-458f0bd{--display:flex;}.elementor-673 .elementor-element.elementor-element-d2afae9{color:#FFFFFF;}.elementor-673 .elementor-element.elementor-element-d2afae9 a:hover, .elementor-673 .elementor-element.elementor-element-d2afae9 a:focus{color:#FFFFFF;}.elementor-673 .elementor-element.elementor-element-ac77e7b{color:#FFFFFF;}.elementor-673 .elementor-element.elementor-element-ac77e7b a:hover, .elementor-673 .elementor-element.elementor-element-ac77e7b a:focus{color:#FFFFFF;}.elementor-673 .elementor-element.elementor-element-9589eac{--display:flex;}.elementor-673 .elementor-element.elementor-element-7c6a97d{--display:flex;}.elementor-673 .elementor-element.elementor-element-31c1f21{--display:flex;}.elementor-673 .elementor-element.elementor-element-9a31cdb{--display:flex;}.elementor-673 .elementor-element.elementor-element-572a4ab{--display:flex;}.elementor-673 .elementor-element.elementor-element-194479f{--display:flex;}.elementor-673 .elementor-element.elementor-element-de49d1f{--display:flex;}@media(min-width:768px){.elementor-673 .elementor-element.elementor-element-724e944{--width:61%;}.elementor-673 .elementor-element.elementor-element-511131b{--width:40%;}.elementor-673 .elementor-element.elementor-element-50ac26d{--width:100%;}.elementor-673 .elementor-element.elementor-element-50a8bb4{--width:63%;}}@media(max-width:1024px) and (min-width:768px){.elementor-673 .elementor-element.elementor-element-511131b{--width:300px;}}@media(max-width:1024px){.elementor-673 .elementor-element.elementor-element-724e944{--margin-top:0px;--margin-bottom:0px;--margin-left:-40px;--margin-right:0px;}}@media(max-width:767px){.elementor-673 .elementor-element.elementor-element-185416e{--margin-top:-60px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-673 .elementor-element.elementor-element-ed4aff1{--width:286.6px;}.elementor-673 .elementor-element.elementor-element-88b4bca{--width:371.6px;}.elementor-673 .elementor-element.elementor-element-724e944{--width:363.6px;--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;--margin-top:0px;--margin-bottom:0px;--margin-left:-100px;--margin-right:0px;}.elementor-673 .elementor-element.elementor-element-511131b{--width:300px;--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;--margin-top:0px;--margin-bottom:0px;--margin-left:-95px;--margin-right:0px;}.elementor-673 .elementor-element.elementor-element-c82e75b{--width:300px;--margin-top:0px;--margin-bottom:0px;--margin-left:-20px;--margin-right:0px;}.elementor-673 .elementor-element.elementor-element-fb979c2{--width:500px;}.elementor-673 .elementor-element.elementor-element-13208b1.elementor-element{--flex-grow:0;--flex-shrink:0;}}/* Start custom CSS for container, class: .elementor-element-ed4aff1 *//* =====================================================
   CYBER / HACKER HERO VISUAL
   ===================================================== */

.hero-visual {
    position: relative;
    min-height: 580px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: visible;

    isolation: isolate;

    background:
        radial-gradient(
            circle at center,
            rgba(0, 255, 170, 0.08),
            transparent 45%
        );
}


/* ==========================================
   CYBER GRID
   ========================================== */

.hero-visual::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    background-image:
        linear-gradient(
            rgba(0, 255, 170, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 255, 170, 0.08) 1px,
            transparent 1px
        );

    background-size: 35px 35px;

    mask-image:
        radial-gradient(
            circle,
            black 30%,
            transparent 70%
        );

    -webkit-mask-image:
        radial-gradient(
            circle,
            black 30%,
            transparent 70%
        );

    z-index: -3;

    animation: cyberGrid 12s linear infinite;
}


/* ==========================================
   OUTER CYBER RING
   ========================================== */

.hero-visual::after {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(0, 255, 170, 0.35);

    border-radius: 50%;

    box-shadow:
        0 0 25px rgba(0, 255, 170, 0.15),
        inset 0 0 35px rgba(0, 255, 170, 0.08);

    z-index: -2;

    animation:
        cyberRotate 15s linear infinite;
}


/* ==========================================
   IMAGE
   ========================================== */

.hero-visual img {
    position: relative;

    width: 370px;
    height: 480px;

    object-fit: cover;

    border-radius: 18px;

    border:
        1px solid rgba(0, 255, 170, 0.55);

    box-shadow:
        0 0 20px rgba(0, 255, 170, 0.15),
        0 0 80px rgba(0, 255, 170, 0.08),
        0 30px 80px rgba(0, 0, 0, 0.65);

    z-index: 5;

    filter:
        contrast(1.08)
        saturate(0.85);

    transition:
        transform 0.5s ease,
        filter 0.5s ease,
        box-shadow 0.5s ease;
}


/* ==========================================
   IMAGE HOVER
   ========================================== */

.hero-visual img:hover {
    transform:
        perspective(1000px)
        rotateY(-3deg)
        translateY(-8px);

    filter:
        contrast(1.15)
        saturate(1.1);

    box-shadow:
        0 0 30px rgba(0, 255, 170, 0.3),
        0 0 100px rgba(0, 255, 170, 0.12),
        0 40px 100px rgba(0, 0, 0, 0.7);
}


/* ==========================================
   SCAN LINE
   ========================================== */

.hero-visual .elementor-widget-image::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #00FFAA,
            transparent
        );

    box-shadow:
        0 0 15px #00FFAA;

    z-index: 10;

    animation:
        scanLine 4s linear infinite;
}


/* ==========================================
   CORNER BRACKETS
   ========================================== */

.hero-visual .elementor-widget-image::before {
    content: "";

    position: absolute;

    width: 35px;
    height: 35px;

    top: -12px;
    left: -12px;

    border-top:
        2px solid #00FFAA;

    border-left:
        2px solid #00FFAA;

    z-index: 10;

    filter:
        drop-shadow(0 0 8px #00FFAA);
}


/* ==========================================
   FLOATING DATA DOTS
   ========================================== */

.hero-visual {
    --cyber-green: #00FFAA;
}


/* ==========================================
   ANIMATIONS
   ========================================== */

@keyframes cyberGrid {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}


@keyframes cyberRotate {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}


@keyframes scanLine {

    0% {
        top: 0%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}


/* ==========================================
   CYBER GLITCH HOVER
   ========================================== */

.hero-visual img:hover {
    animation:
        cyberGlitch 0.35s steps(2, end);
}


@keyframes cyberGlitch {

    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 1px);
    }

    40% {
        transform: translate(2px, -1px);
    }

    60% {
        transform: translate(-1px, 2px);
    }

    80% {
        transform: translate(1px, -2px);
    }

    100% {
        transform: translate(0);
    }
}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 767px) {

    .hero-visual {
        min-height: 470px;
        margin-top: 40px;
    }

    .hero-visual::before {
        width: 350px;
        height: 350px;
    }

    .hero-visual::after {
        width: 300px;
        height: 300px;
    }

    .hero-visual img {
        width: 270px;
        height: 360px;
    }
}/* End custom CSS */