/* ==========================================================
   ACTIVA VOIP - HERO SECTION
========================================================== */


.hero{

    position:relative;

    min-height:650px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:

    linear-gradient(

        120deg,

        #063970,

        #0b5ca8,

        #1fa2ff

    );

    color:#fff;

}


/* ==========================
   FUNDO ANIMADO
========================== */


.hero-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

}



.blur{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.35;

    animation:floatBlur 12s infinite alternate;

}



.b1{

    width:300px;

    height:300px;

    background:#4fc3ff;

    top:-100px;

    left:-80px;

}



.b2{

    width:350px;

    height:350px;

    background:#ffffff;

    bottom:-150px;

    right:20%;

}



.b3{

    width:250px;

    height:250px;

    background:#00e5ff;

    top:30%;

    right:-80px;

}



@keyframes floatBlur{


    from{

        transform:translateY(0);

    }


    to{

        transform:translateY(40px);

    }


}



/* ==========================
   LINHAS DE REDE
========================== */


.grid-lines{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(

        rgba(255,255,255,.06) 1px,

        transparent 1px

    ),

    linear-gradient(

        90deg,

        rgba(255,255,255,.06) 1px,

        transparent 1px

    );


    background-size:60px 60px;

    opacity:.35;

}





/* ==========================
   CONTEÚDO
========================== */


.hero-content{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:50px;

}



/* ==========================
   TEXTO
========================== */


.hero-text{

    animation:heroLeft 1s ease;

}



.hero-tag{


    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

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

    color:#fff;

    font-size:14px;

    margin-bottom:25px;

}



.hero h1{


    font-size:58px;

    line-height:1.1;

    margin-bottom:25px;

    color:#ffffff;

}



.hero p{


    font-size:18px;

    line-height:1.7;

    color:#e6f2ff;

    max-width:600px;

    margin-bottom:35px;

}



/* ==========================
   BOTÕES
========================== */


.hero-buttons{

    display:flex;

    gap:20px;

}



.hero .btn-primary{


    background:#fff;

    color:#063970;

}



.hero .btn-primary:hover{


    background:#e6f2ff;

}



.hero .btn-secondary{


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

    color:#fff;

    background:transparent;

}



/* ==========================
   ILUSTRAÇÃO
========================== */


.hero-art{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:400px;

    animation:heroRight 1s ease;

}



/* ==========================
   ANIMAÇÕES
========================== */


@keyframes heroLeft{


    from{

        opacity:0;

        transform:translateX(-50px);

    }


    to{

        opacity:1;

        transform:translateX(0);

    }


}



@keyframes heroRight{


    from{

        opacity:0;

        transform:translateX(50px);

    }


    to{

        opacity:1;

        transform:translateX(0);

    }


}