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

html{
    scroll-behavior:smooth;
}

body{
    overflow-x:hidden;
    background:
    radial-gradient(circle at top right, #003cff33, transparent 35%),
    radial-gradient(circle at bottom left, #00d9ff22, transparent 30%),
    #050505;

    color:#fff;
    font-family:'Poppins',sans-serif;
}

main{
    padding-top:20px;
}

header{
    background:#020305da;
    padding:40px 20px;
    transition:.4s;
    text-align:center;
}


/* Menu */

nav{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
    margin-bottom:25px;
}


nav a{
    color:white;
    text-decoration:none;
    font-weight:bold;
    font-size:18px;
    transition:.3s;
}


nav a:hover{
    color:#25D366;
}



/* Títulos */

h1,
h2,
h3{
    text-align:center;
}


/* Botão WhatsApp */

.whatsapp-btn{

display:flex;
justify-content:center;
align-items:center;

background:#25D366;
color:white;

padding:16px 32px;

border-radius:50px;

width:100%;
max-width:320px;

font-weight:600;
font-size:18px;

text-decoration:none;

margin:70px auto 0;

transition:.3s;

}


.whatsapp-btn:hover{

background:#1ebe5d;

transform:translateY(-5px);

box-shadow:0 0 25px #25D366;

}



/* Banner */

.banner{

display:flex;
flex-direction:column;
align-items:center;

gap:20px;

padding:40px 20px;

}


.hero-image{

width:100%;
max-width:1200px;

height:380px;

object-fit:cover;

border-radius:20px;

transition:.5s;

}


.hero-image:hover{

transform:scale(1.03);

}



/* Seções */

.sobre,
.produtos,
.servicos,
.contato{
    padding:50px 20px;
    background:linear-gradient(
        180deg,
        transparent,
        #001a3d22
    );
}



.sobre p{

max-width:700px;

margin:auto;

font-size:18px;

line-height:1.6;

}



/* Cards */

.cards{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:20px;

margin-top:30px;

}


.card{

background:#111;

color:white;

width:220px;

padding:30px;

border-radius:20px;

border:1px solid #222;

font-weight:bold;

text-align:center;

transition:.4s;

}



.card:hover{

transform:translateY(-12px);

border-color:#00d9ff;

box-shadow:0 15px 40px #000;

}



/* Animação UX */

.animar{

opacity:0;

transform:translateY(50px);

transition:.8s ease;

}


.mostrar{

opacity:1;

transform:translateY(0);

}



/* Header quando rolar */

.header-scroll{


background:#000;

box-shadow:0 5px 20px #00d9ff33;

padding: 20px;

}


.header-scroll .logo{

width:100px;

margin-bottom:10px;

}

header{
    transition:0.4s ease;
}

.banner{
    scroll-margin-top:120px;
}

/* Footer */

footer{

background:#000207;

padding:30px;

margin-top:30px;

}


p{

text-align:center;

}

.contato{
    text-align:center;
}

/* configuraçoes LOGO */
.logo{

width:180px;

height:auto;

display:block;

margin:0 auto 20px;

transition:.4s;

}


.logo:hover{

transform:scale(1.08);

}

/*configuraçoes do icone*/
.icon{
    width:120px;
    height:120px;
    border-radius:50%;
    object-fit:cover;
}