/*====================================================
 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;

     min-height:100%;

    padding-top:clamp(20px,2vh,60px);

    padding-bottom:clamp(70px,8vh,130px);

    align-items:center;

}

/*====================================================
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;

    inset:0;

    width:100%;
    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;
}

.hero-mesh img{

    width:100%;
    max-width:100%;

    height:auto;

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

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

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

.hero-radar-area{

    position:relative;

    width:min(42vw,60vh,680px);

    height:min(42vw,60vh,680px);

    margin:auto;

    display:flex;

    align-items:center;

    justify-content: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:90%;

    height:90%;

    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:500px;
        height:500px;
    }

    .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-height:780px){

    .hero-content h1{

        font-size:48px;
    }

    .hero-radar-area{

        width:min(36vw,52vh,500px);

        height:min(36vw,52vh,500px);
    }

    .hero-counter{

        bottom:15px;
    }

    .counter-box h2{

        font-size:48px;
    }

    .counter-box p{

        font-size:15px;
    }
}


@media (max-height:700px){

    .hero-radar-area{

        width:min(34vw,46vh,420px);

        height:min(34vw,46vh,420px);
    }

    .hero-content h1{

        font-size:42px;

        line-height:1.1;
    }

    .hero-row{

        padding-bottom:90px;
    }
}



@media(max-width:991px){

    .hero-section{

        min-height:auto;
        height:auto;

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

    .hero-row{

        min-height:auto;
        padding:0;
    }
    /* Text column comes below */
    .hero-row .col-lg-6:first-child{

        order:2;
    }

    .hero-radar-area{

        width:90vw;
        height:90vw;

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

        margin-top:40px;
    }

    .hero-counter{

        position:relative;

        margin-top:50px;
    }

    .hero-counter .col-lg-3 {

        width:50%;
        float: left;
        text-align: center;
    }

    .hero-mesh{

       width:100%;
    }
    #radarCanvas {
        width: 100%; 
    }
    .hero-content h1 {
        text-align: center;
        font-size: 2rem;
     }
}

 .hero-heading{
    transition:opacity .5s ease, transform .5s ease;
}

.hero-heading.fade-out{
    opacity:0;
    transform:translateY(30px);
}

.hero-heading.fade-in{
    opacity:1;
    transform:translateY(0);
}