/*==================================================
    BTC CHEMICALS
    TEMPLATE PREMIUM
    DL SOLUTION TI
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


:root{

    --primary:#00C2A8;

    --secondary:#7CFFB2;

    --dark:#071A1F;

    --dark2:#102E35;

    --dark3:#123B43;

    --glass:rgba(255,255,255,.07);

    --border:rgba(124,255,178,.18);

    --white:#ffffff;

    --text:#C7E8E2;

}



html{

    scroll-behavior:smooth;

}



body{

    font-family:'Poppins',sans-serif;

    background:

    linear-gradient(
        135deg,
        var(--dark),
        var(--dark2),
        var(--dark3)
    );


    color:var(--white);

    min-height:100vh;

    overflow-x:hidden;

    overflow-y:auto;

    position:relative;

}



/*==================================================
                GRID LABORATÓRIO
==================================================*/


.grid{

    position:absolute;

    inset:0;


    background-image:


    linear-gradient(
    rgba(124,255,178,.05) 1px,
    transparent 1px),


    linear-gradient(
    90deg,
    rgba(124,255,178,.05) 1px,
    transparent 1px);


    background-size:45px 45px;


    animation:gridMove 15s linear infinite;


}


@keyframes gridMove{


from{

transform:translateY(0);

}


to{

transform:translateY(45px);

}


}




/*==================================================
                GLOW QUÍMICO
==================================================*/


.glow{


position:fixed;

border-radius:50%;

filter:blur(120px);

opacity:.45;


}



.glow1{


width:430px;

height:430px;

top:-150px;

left:-150px;


background:#00C2A8;


}




.glow2{


width:400px;

height:400px;

right:-150px;

bottom:-150px;


background:#7CFFB2;


}




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


.container{


width:100%;


min-height:100vh;


display:flex;


justify-content:center;


align-items:center;


flex-direction:column;


position:relative;


z-index:10;


padding:60px 20px;


}





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


.card{


width:min(760px,95%);


padding:50px;


text-align:center;


background:var(--glass);


backdrop-filter:blur(18px);


border:1px solid var(--border);


border-radius:28px;


position:relative;


overflow:hidden;


box-shadow:


0 0 45px rgba(0,194,168,.18);


transition:.4s;



}



.card:hover{


transform:translateY(-5px);


box-shadow:


0 20px 70px rgba(0,194,168,.30);


}



/*==================================================
                EFEITO VIDRO
==================================================*/


.card::before{


content:"";


position:absolute;


left:-50%;


top:-30%;


width:180px;


height:220%;


background:


linear-gradient(

transparent,

rgba(124,255,178,.30),

transparent

);



transform:rotate(25deg);


animation:shine 8s linear infinite;



}



@keyframes shine{


from{

left:-50%;

}


to{

left:180%;

}



}



/*==================================================
                ÍCONE
==================================================*/


.logo-circle{


width:110px;


height:110px;


margin:auto;


border-radius:50%;



background:


linear-gradient(

135deg,

#00C2A8,

#7CFFB2

);



display:flex;


align-items:center;


justify-content:center;



box-shadow:


0 0 45px rgba(0,194,168,.55);



animation:pulse 3s infinite;


}




.logo-circle i{


font-size:45px;


color:#ffffff;


}



@keyframes pulse{


50%{


transform:scale(1.08);


}



}





/*==================================================
                TAG
==================================================*/


.tag{


display:inline-block;


margin-top:28px;


padding:10px 20px;


border-radius:30px;


font-size:13px;


font-weight:600;


letter-spacing:1px;


text-transform:uppercase;


background:rgba(0,194,168,.12);


border:1px solid rgba(124,255,178,.35);


color:#7CFFB2;



}

/*==================================================
                TÍTULOS BTC
==================================================*/


h1{

    margin-top:25px;

    font-size:52px;

    font-weight:800;

    letter-spacing:3px;

    line-height:1.1;


    background:

    linear-gradient(
        90deg,
        #FFFFFF,
        #7CFFB2,
        #00C2A8,
        #FFFFFF
    );


    background-size:300%;


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;


    animation:titleGradient 8s linear infinite;


}



@keyframes titleGradient{


0%{

background-position:0%;

}


100%{

background-position:300%;

}


}




/*==================================================
                LINHA LUMINOSA
==================================================*/


.line{


width:90px;


height:4px;


margin:28px auto;



border-radius:50px;



background:


linear-gradient(

90deg,

transparent,

#00C2A8,

transparent

);



animation:lineGlow 3s infinite;



}




@keyframes lineGlow{


50%{


width:170px;


}


}






/*==================================================
                SUBTITULO
==================================================*/


h2{


font-size:24px;


font-weight:500;


color:#7CFFB2;


margin-bottom:25px;


}




p{


max-width:620px;


margin:auto;


color:var(--text);


line-height:1.9;


font-size:17px;


}





/*==================================================
                BARRA DE PROCESSO
==================================================*/


.loading{


width:240px;


height:6px;


margin:40px auto;



background:

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



border-radius:50px;



overflow:hidden;


}




.bar{


width:35%;


height:100%;



border-radius:50px;



background:


linear-gradient(

90deg,

#00C2A8,

#7CFFB2

);



animation:loadingMove 2.5s infinite;



}



@keyframes loadingMove{


0%{


margin-left:-35%;


}



100%{


margin-left:100%;


}



}






/*==================================================
                STATUS QUÍMICO
==================================================*/


.status{


display:flex;


justify-content:center;


flex-wrap:wrap;


gap:15px;



margin-top:35px;



}




.status div{


padding:14px 20px;



border-radius:50px;



background:

rgba(255,255,255,.05);



border:

1px solid rgba(124,255,178,.15);



font-size:14px;



transition:.35s;



}





.status div:hover{


background:

rgba(0,194,168,.15);



transform:translateY(-4px);



}





.status i{


margin-right:8px;


color:#7CFFB2;



}






/*==================================================
                SOCIAL
==================================================*/


.social{


display:flex;


justify-content:center;


gap:16px;


margin-top:45px;



}



.social a{


width:50px;


height:50px;



display:flex;


align-items:center;


justify-content:center;



border-radius:50%;



text-decoration:none;



color:white;



background:

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



border:

1px solid rgba(124,255,178,.18);



transition:.35s;



}





.social a:hover{


background:#00C2A8;



box-shadow:

0 0 30px rgba(0,194,168,.6);



transform:translateY(-5px);



}







/*==================================================
                FOOTER
==================================================*/


footer{


margin-top:40px;


text-align:center;


font-size:14px;



color:#B7D8D0;



line-height:2;



}





.credits strong{


color:#7CFFB2;


}





.credits i{


color:#00C2A8;


margin:0 5px;



animation:heartBeat 2s infinite;



}



@keyframes heartBeat{


50%{


transform:scale(1.3);



}


}






/*==================================================
                RESPONSIVO
==================================================*/


@media(max-width:768px){



.card{


padding:40px 25px;



}



.logo-circle{


width:90px;


height:90px;



}




.logo-circle i{


font-size:35px;



}




h1{


font-size:36px;


}




h2{


font-size:20px;



}




p{


font-size:15px;



}



.status{


flex-direction:column;



}




.loading{


width:180px;



}



}
/*==================================================
        MOLÉCULAS BTC CHEMICALS
==================================================*/


.particle{


position:fixed;


bottom:-20px;


border-radius:50%;



background:#7CFFB2;



box-shadow:


0 0 15px #00C2A8;



animation:


floatMolecule linear infinite;



opacity:.8;



z-index:1;



pointer-events:none;


}




@keyframes floatMolecule{


0%{


transform:

translateY(0)

scale(.5);



opacity:0;



}


20%{


opacity:1;



}


100%{


transform:

translateY(-110vh)

scale(1.3);



opacity:0;



}



}