/*====================================================
 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,12vh,130px);

    align-items:center;

}

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

.hero-content{

    position:relative;

    z-index:20;

    text-transform: capitalize;

}

.hero-mini-line{

    width:65px;

    height:5px;

    background:#00c083;

    border-radius:50px;

    margin-bottom:35px;

}

.hero-content h1{

    font-size:var(--fs-5xl);

    font-weight:normal;

    color:#fff;

    line-height:1.12;

    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);

}

.hero-row{
    margin-top: 50px;
    height:100%;
    align-items:flex-start;
}

.hero-content{
    padding-top:60px;   /* adjust as needed */
}

.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;

    margin-top: 80px; /* Adjust: 40px, 60px, 100px */
}
@media (max-width:991px){

    .hero-radar-area{

        width:min(90vw,500px);
        height:min(90vw,500px);

        transform:translateY(30px);

        margin:40px auto 0;

    }

}
@media (max-width:576px){

    .hero-radar-area{

        width:92vw;
        height:92vw;

        max-width:380px;
        max-height:380px;

        transform:translateY(20px);

    }

}

/* /radar animation */

.radar-rotate{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:contain;

    pointer-events:none;

    z-index:2;

    opacity:.85;

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

    animation:spinElasticOpp 12s ease-in-out infinite;

    transform-origin:center center;
    filter:brightness(0)saturate(100%)invert(69%)sepia(96%)saturate(3739%)hue-rotate(82deg)brightness(118%)contrast(130%);
}

@keyframes spinElasticOpp{

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

    25%{
        transform:translate(-50%,-50%) rotate(-120deg);
    }

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

    75%{
        transform:translate(-50%,-50%) rotate(120deg);
    }

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

}
 


/*==========================================
RIPPLE
==========================================*/

.mesh-ripple{

    position:absolute;

    left:50%;
    top:50%;

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

    width:80px;
    height:80px;

    border-radius:50%;

    border:2px solid rgba(0,255,10,.4);

    pointer-events:none;

    z-index:0;

    opacity:0;

}

.mesh-ripple::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:1px solid rgba(0,255,140,.15);

}

.r1{

    animation:meshRipple 4s linear infinite;

}

.r2{

    animation:meshRipple 4s linear infinite 1.3s;

}

.r3{

    animation:meshRipple 4s linear infinite 2.6s;

}


@keyframes meshRipple{

0%{

    width:80px;
    height:80px;

    opacity:.75;

}

100%{

    width:90%;
    height:90%;

    opacity:0;

}

}


@keyframes meshFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

.hero-mesh::after{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:180px;
    height:180px;

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

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(0,255,140,.18),

    transparent 70%);

    filter:blur(30px);

    animation:centerGlow 3s ease-in-out infinite;

    z-index:0;

}

@keyframes centerGlow{

50%{

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

opacity:.6;

}

}


/*====================================================
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 100s 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:normal;

}

.counter-box p{

    /* font-family:var(--font-secondary); */
    
    color:#04e09a;

    font-size:18px;

    text-transform:uppercase;

    line-height:1.2;

}

/*====================================================
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:var(--fs-4xl);

}

.radar{

    width:470px;

    height:470px;

}

.hero-mesh{

    width:620px;

}

}

@media (max-height:780px){

    .hero-content h1{

        font-size:var(--fs-3xl);
    }

    .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:var(--fs-3xl);

        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;
        margin-top:0px;
    }
    /* Text column comes below */
    .hero-row .col-lg-6:first-child{

        order:2;
    }

    .hero-radar-area{

        width:100vw;
        height:100vw;

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

        margin-top:0px;
        
    }

    .hero-counter{

        position:relative;

        margin-top:50px;
    }

    .hero-counter .col-lg-3 {

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

    .hero-counter .col-lg-4 {

        width:50%;
        float: left;
        text-align: center;
    }
    .hero-counter .col-lg-4:last-child {

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

    .hero-mesh{

       width:130%;
       text-align: center;
       inset: auto;
       align-items: center;
    }
    
    #radarCanvas {
        width: 100%; 
    }
    .hero-content h1 {
        text-align: center;
        font-size: var(--fs-xl);
        padding-top: 16px;
        line-height: 1.8rem;
        font-weight: normal;
     }
}

 .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);
}