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

.hero{

    position:relative;

    width:100%;

    min-height:100vh;
     background-image:url("/image/hero.png");
     background-size:cover;

    overflow:hidden;

    background:#04162E;

}

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

.hero-bg{

    position:absolute;

    top:0;

    left:0;

    width:100vw;

    height:100vh;

   background-image:url("/image/hero.png");

    background-repeat:no-repeat;

    background-position:center center;

    background-size:cover;

    z-index:1;

}

/*=========================================
DARK OVERLAY
=========================================*/

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(4,22,46,.92) 0%,
        rgba(4,22,46,.75) 35%,
        rgba(4,22,46,.45) 65%,
        rgba(4,22,46,.15) 100%
    );

    z-index:2;

}

/*=========================================
CONTAINER
=========================================*/

.hero .container{

    position:relative;

    z-index:10;

    width:100%;

    max-width:1320px;

    margin:0 auto;

    padding:0 20px;

}

/*=========================================
HERO WRAPPER
=========================================*/

.hero-wrapper{

    min-height:100vh;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:60px;

}

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

@media (max-width:991px){

    .hero-wrapper{

        grid-template-columns:1fr;

        text-align:center;

        padding:100px 0 60px;

    }

}

/*=========================================
        HERO LEFT
=========================================*/

.hero-left{

    max-width:620px;

    color:#ffffff;

    animation:fadeUp 1s ease;
    

}

/*=========================================
        BADGE
=========================================*/

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    margin-bottom:30px;

    border-radius:50px;

    background:rgba(26,141,255,.12);

    border:1px solid rgba(26,141,255,.25);

    backdrop-filter:blur(10px);

    color:#7BC7FF;

    font-size:15px;

    font-weight:600;

}

.hero-badge i{

    color:#FFD447;

    font-size:16px;

}

/*=========================================
        HEADING
=========================================*/

.hero-left h1{

    font-size:68px;

    font-weight:800;

    line-height:1.1;

    color:#ffffff;

    margin-bottom:25px;

}

.hero-left h1 span{

    display:block;

    color:#FFD447;

}

/*=========================================
        DESCRIPTION
=========================================*/

.hero-left p{

    font-size:20px;

    line-height:1.8;

    color:#C8D8E8;

    margin-bottom:40px;

}

.hero-left strong{

    color:#FFD447;

}

/*=========================================
        BUTTONS
=========================================*/

.hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:50px;

}

.btn-primary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:18px 34px;

    border-radius:14px;

    background:#FFD447;

    color:#111827;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 40px rgba(255,212,71,.35);

}

.btn-outline{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:18px 34px;

    border-radius:14px;

    border:2px solid rgba(255,255,255,.18);

    color:#ffffff;

    text-decoration:none;

    transition:.35s;

}

.btn-outline:hover{

    background:#ffffff;

    color:#111827;

}

/*=========================================
        FEATURES
=========================================*/

.hero-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

.feature{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px;

    border-radius:18px;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    transition:.35s;

}

.feature:hover{

    transform:translateY(-6px);

    border-color:#1A8DFF;

    background:rgba(255,255,255,.10);

}

.feature i{

    width:55px;

    height:55px;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#1A8DFF,#46B5FF);

    color:#ffffff;

    font-size:22px;

    flex-shrink:0;

}

.feature h4{

    color:#ffffff;

    font-size:18px;

    margin-bottom:6px;

    font-weight:700;

}

.feature span{

    color:#BFD2E7;

    font-size:14px;

}

/*=========================================
        ANIMATION
=========================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:991px){

    .hero-left{

        max-width:100%;

        text-align:center;

    }

    .hero-buttons{

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero-features{

        grid-template-columns:1fr 1fr;

    }

}

@media(max-width:768px){

    .hero-left h1{

        font-size:46px;

    }

    .hero-left p{

        font-size:18px;

    }

    .hero-features{

        grid-template-columns:1fr;

    }

    .btn-primary,

    .btn-outline{

        width:100%;

    }

}


/*=========================================
        HERO RIGHT
=========================================*/

.hero-right{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:500px;

}

@media(max-width:768px){

    .hero-right{
        display: none;
    }


    
}

/*=========================================
        BLUE GLOW
=========================================*/

.hero-right::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(26,141,255,.40),

        rgba(26,141,255,.15),

        transparent

    );

    filter:blur(80px);

    z-index:1;

}

/*=========================================
        ROUTER
=========================================*/

.router-wrapper{

    position:relative;

    z-index:10;

    animation:routerFloat 5s ease-in-out infinite;

}

.router-image{

    width:100%;

    max-width:520px;

    display:block;

    user-select:none;

    pointer-events:none;

    filter:

    drop-shadow(0 30px 60px rgba(0,0,0,.45))

    drop-shadow(0 0 40px rgba(0,162,255,.35));

}


@media(max-width:768px){

    .router-image{
        display: none;
    }


    
}

/*=========================================
        SPEED CARD
=========================================*/

.speed-meter-card{

    position:absolute;

    top:20px;

    left:-30px;

    width:270px;

    padding:20px;

    border-radius:24px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.12);

    box-shadow:0 20px 40px rgba(0,0,0,.30);

    z-index:20;

}

.speed-header{

    text-align:center;

    margin-bottom:15px;

}

.speed-header span{

    color:#FFD447;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

}

/*=========================================
        SPEED CIRCLE
=========================================*/

.speed-circle{

    position:relative;

    width:220px;

    height:220px;

    margin:auto;

}

.speed-svg{

    width:100%;

    height:100%;

    transform:rotate(-135deg);

}

.meter-bg{

    fill:none;

    stroke:#27496D;

    stroke-width:12;

}

.meter-progress{

    fill:none;

    stroke:#25A8FF;

    stroke-width:12;

    stroke-linecap:round;

    stroke-dasharray:754;

    stroke-dashoffset:754;

    filter:drop-shadow(0 0 12px #25A8FF);

}

#needle{

    transform-origin:160px 160px;

    transform:rotate(-135deg);

}

.needle{

    stroke:#FFD447;

    stroke-width:5;

    stroke-linecap:round;

}

.needle-center{

    fill:#FFD447;

}

.speed-number{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.speed-number h2{

    color:#fff;

    font-size:52px;

    font-weight:800;

}

.speed-number span{

    color:#AFC5DD;

    font-size:15px;

}

/*=========================================
        ROUTER FLOAT
=========================================*/

@keyframes routerFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}


/*=========================================
        FLOATING CARDS
=========================================*/

.floating-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:16px;

    min-width:230px;

    padding:18px 22px;

    border-radius:20px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.12);

    box-shadow:

        0 15px 35px rgba(0,0,0,.25),

        inset 0 1px 0 rgba(255,255,255,.08);

    color:#fff;

    transition:.35s ease;

    z-index:20;

}

.floating-card:hover{

    transform:translateY(-8px) scale(1.03);

    border-color:#1A8DFF;

    box-shadow:

        0 25px 45px rgba(0,0,0,.35),

        0 0 25px rgba(26,141,255,.25);

}

.floating-card i{

    width:58px;

    height:58px;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#1A8DFF,#46B5FF);

    color:#fff;

    font-size:24px;

    flex-shrink:0;

}

.floating-card h3{

    font-size:22px;

    font-weight:700;

    margin-bottom:5px;

}

.floating-card p{

    font-size:14px;

    color:#BFD2E7;

    line-height:1.5;

}

/*=========================================
        CARD POSITIONS
=========================================*/

.users-card{

    top:90px;

    right:-40px;

    animation:floatOne 5s ease-in-out infinite;

}

.uptime-card{

    bottom:210px;

    left:-50px;

    animation:floatTwo 6s ease-in-out infinite;

}

.support-card{

    bottom:60px;

    right:20px;

    animation:floatThree 5.5s ease-in-out infinite;

}

.install-card{

    top:330px;

    right:-70px;

    animation:floatFour 6.5s ease-in-out infinite;

}

/*=========================================
        FLOAT ANIMATION
=========================================*/

@keyframes floatOne{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

@keyframes floatTwo{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(14px);

    }

}

@keyframes floatThree{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

@keyframes floatFour{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(12px);

    }

}

/*=========================================
        TABLET
=========================================*/

@media(max-width:992px){

    .floating-card{

        transform:scale(.9);

    }

    .users-card{

        right:0;

    }

    .uptime-card{

        left:0;

    }

    .install-card{

        right:0;

    }
    .hero-right{
        display: none;
    }

}

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

@media(max-width:768px){

    .floating-card{

        display:none;

    }

}