/*====================================================
 HERO SECTION
====================================================*/

:root{
    --navbar-height:136px;
}


.hero-section{

    position:relative;

    height:calc(100svh - var(--navbar-height));

    min-height:calc(100svh - var(--navbar-height));

    overflow:hidden;
}

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

.hero-bg{

    position:absolute;

    inset:0;

    background:url('/public/images/home_page_bg.jpg') center center no-repeat;

    background-size:cover;
    background-position: top;

    z-index:1;

}

.hero-overlay1{

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at 80% 35%,rgba(11,218,7,.08),transparent 35%),
        linear-gradient(90deg,
        rgba(4,16,20,.15),
        rgba(4,16,20,.45));

    z-index:2;

}

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

.hero-overlay22{
    /* display: none; */
    position:absolute;

    inset:0;

    z-index:2;

    background:

        linear-gradient(

            90deg,

            rgba(5,10,12,.75) 0%,

            rgba(5,10,12,.45) 35%,

            rgba(5,10,12,.20) 70%,

            rgba(5,10,12,.35) 100%

        ),

        radial-gradient(

            circle at 75% 35%,

            rgba(0,192,131,.12),

            transparent 45%

        );

}


.hero-glow{

    position:absolute;

    right:-250px;

    top:-120px;

    width:900px;

    height:900px;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(0,192,131,.18),
        transparent 70%);

    filter:blur(60px);

    z-index:2;

}

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

.hero-video{

    position:absolute;

    inset:0;

    z-index:1;

    overflow:hidden;

}

.hero-video video{

    position:absolute;

    top:50%;

    left:50%;

    min-width:100%;
    min-height:100%;

    width:auto;
    height:auto;

    object-fit:cover;

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

}

.hero-video video{

    filter:

        brightness(.55)

        contrast(1.05)

        saturate(1.05);

}


/*====================================================
SLIDER
====================================================*/

#heroSlider,
.carousel-inner,
.carousel-item{

    height:100%;

}

.carousel-item .container{

    height:100%;

}

.hero-row{

    position:relative;

    z-index:20;

    height:100%;

    align-items:center;

    padding-bottom:130px;

}

/*====================================================
LEFT CONTENT
====================================================*/

.hero-content{

    position:relative;

    z-index:20;

}

.hero-mini-line{

    width:65px;

    height:5px;

    background:#00c083;

    border-radius:50px;

    margin-bottom:35px;

}

.hero-content h1{

    font-size:clamp(48px,4.8vw,72px);

    font-weight:normal;

    color:#fff;

    line-height:1.08;

    margin-bottom:35px;

}

.hero-content span{

    color:#64d741;

}

.hero-content p{

    width:85%;

    font-size:22px;

    color:#d4d4d4;

    line-height:1.8;

    margin-bottom:40px;

}

.btn-primary{

    width:180px;

    height:58px;

    border:none;

    border-radius:50px;

    background:#00c083;

    color:#111;

    font-size:18px;

    font-weight:600;

    transition:.35s;

}

.btn-primary:hover{

    background:#0bda07;

    transform:translateY(-3px);

}

/*====================================================
MESH
====================================================*/

.hero-mesh{

    position:absolute;

    width:115%;
    height:115%;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:1;

    opacity:.3;

}

.hero-mesh img{

    width:85%;

    animation:meshFloat 10s ease-in-out infinite;

    filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);

}

/*====================================================
RADAR
====================================================*/

.hero-radar-area{

    position:relative;

    width:min(42vw,700px);
    height:min(42vw,700px);

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

}

.radar{

    position:relative;

    width:560px;

    height:560px;

    z-index:3;

}

.radar-base,
.radar-sweep{

    position:absolute;

    inset:0;

    width:100%;

}

.radar-glow{

    position:absolute;

    width:620px;

    height:620px;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(0,192,131,.25),
        transparent 70%);

    filter:blur(50px);

    z-index:2;

}

/*====================================================
TARGETS
====================================================*/

.target{

    position:absolute;

    width:12px;

    height:12px;

    border-radius:50%;

    background:#00ff99;

    box-shadow:0 0 18px #00ff99;

}

.target::after{

    content:"";

    position:absolute;

    left:-6px;

    top:-6px;

    width:24px;

    height:24px;

    border:2px solid red;

}

.t1{

    left:360px;

    top:170px;

}

.t2{

    left:310px;

    top:230px;

}

.t3{

    left:430px;

    top:260px;

}

.t4{

    left:390px;

    top:340px;

}

/*====================================================
COUNTER
====================================================*/

.hero-counter{

    position:absolute;

    bottom:40px;

    width:100%;

    z-index:40;

}

.counter-box h2{

    color:#fff;

    font-size:clamp(42px,4vw,72px);

    font-weight:600;

}

.counter-box p{

    color:#00c083;

    font-size:18px;

    text-transform:uppercase;

    line-height:1.5;

}

/*====================================================
INDICATORS
====================================================*/

.hero-indicators{

    position:absolute;

    right:50px;

    top:50%;

    transform:translateY(-50%);

    display:flex;

    flex-direction:column;

    gap:30px;

    z-index:50;

}

.hero-indicators button{

    width:18px;

    height:18px;

    border:none;

    border-radius:50%;

    background:#000;

    position:relative;

}

.hero-indicators button.active{

    background:#00c083;

}

.hero-indicators button.active::after{

    content:"";

    position:absolute;

    width:34px;

    height:34px;

    left:50%;

    top:50%;

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

    border:3px solid #00c083;

    border-radius:50%;

}


/* radar animation */


.stage{
    position:relative;
    width:min(92vw,720px);
    aspect-ratio:1/1;
    margin:24px auto;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 0 0 1px rgba(0,255,100,0.15), 0 30px 80px -20px rgba(0,255,100,0.25);
    background:#FFFFFF;
  }
  .stage img.bg{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;z-index:0;}
  .stage canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;}
  .label-tag{
    position:absolute;
    z-index:4;
    transform:translate(-50%,-130%);
    font:600 11px/1.2 'SF Mono',Consolas,monospace;
    color:var(--sweep-green);
    background:rgba(5,10,8,0.72);
    border:1px solid rgba(0,255,100,0.35);
    padding:3px 7px;
    border-radius:4px;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    letter-spacing:.02em;
   }
  .label-tag.show{opacity:1;transform:translate(-50%,-160%); color: #00ff00;}
  .caption{
    max-width:720px;margin:0 auto 32px;padding:0 16px;
    color:#00ff00;font:13px/1.5 -apple-system,Segoe UI,Roboto,sans-serif;
    text-align:center;opacity:1;
  }
  
.hero-radar-canvas{

    position:relative;

    width:80%;
    height:80%;

    z-index:3;

}

.hero-radar-canvas .radar-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}

#radarCanvas{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}



/*====================================================
RESPONSIVE
====================================================*/

@media (max-width:1500px){

    .hero-row{

        padding-top:60px;
        padding-bottom:170px;
    }

    .hero-radar-area{

        width:580px;
        height:580px;
    }

    .hero-content h1{

        font-size:58px;
    }
}


@media (max-height:800px){

    .hero-content h1{
        font-size:58px;
    }

    .hero-radar-area{
        width:560px;
        height:560px;
    }

    .hero-counter{
        bottom:20px;
    }

    .counter-box h2{
        font-size:56px;
    }
}

@media(max-width:1200px){

.hero-content h1{

    font-size:58px;

}

.radar{

    width:470px;

    height:470px;

}

.hero-mesh{

    width:620px;

}

}

@media(max-width:991px){

    .hero-section{

        min-height:auto;
        height:auto;

        padding-top:150px;
        padding-bottom:60px;
    }

    .hero-row{

        min-height:auto;
        padding:0;
    }

    .hero-radar-area{

        width:95vw;
        height:95vw;

        max-width:500px;
        max-height:500px;

        margin-top:40px;
    }

    .hero-counter{

        position:relative;

        margin-top:50px;
    }

}