*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

html{
scroll-padding-top:80px;
scroll-behavior:smooth;
}

body{
background:#f5f7fb;
color:#333;
}

.container{
max-width:1200px;
margin:auto;
padding:40px 20px;
}

/* NAVBAR */

.navbar{
background:#fff;
box-shadow:0 2px 10px rgba(0,0,0,0.08);

width:100%;
z-index:1000;
}

.nav-container{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo img{
border-radius: 5px;
width: 60%;
height: 60%;
}

nav{
display:flex;
align-items:center;
}

nav a{
margin-left:30px;
text-decoration:none;
color:#333;
font-weight:500;
}

/* BOTÃO HAMBURGER */

.menu-mobile{
display:none;
font-size:28px;
cursor:pointer;
color:#333;
}

/* HERO */

.hero-buttons{
display:flex;
justify-content:center;
align-items:center;
gap:15px;
flex-wrap:wrap;
}

.hero{
height:80vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
background:linear-gradient(135deg,#0056b3,#007BFF);
color:white;
padding: 20px;
}

.hero h1{
font-size:clamp(28px, 6vw, 42px);
line-height:1.2;
margin-bottom:20px;
}

.hero p{
font-size:18px;
margin-bottom:20px;
}

.btn-primary{
background:#FF8C00;
padding:14px 30px;
border-radius:30px;
text-decoration:none;
color:white;
font-weight:600;
margin-right:15px;
transition:0.3s;
}

.btn-primary:hover{
transform:scale(1.05);
}

.btn-secondary{
border:2px solid white;
padding:14px 30px;
border-radius:30px;
text-decoration:none;
color:white;
}

/* SOBRE */

.grid-2{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
}

.sobre-card{
background:white;
padding:40px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
text-align:center;
}

/* MÓDULOS */

.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:40px;
}

.card{
background:white;
padding:30px;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,0.06);
text-align:center;
transition:0.4s;
opacity:0;
transform:translateY(40px);
}

.card:hover{
transform:translateY(-10px);
}

.card i{
font-size:35px;
color:#007BFF;
margin-bottom:15px;
}

/* DIFERENCIAIS */

.diferenciais{
background:#fff;
text-align:center;
}

.grid-3{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:40px;
}

.feature{
padding:30px;
}

/* MODULOS */

.modulos{
text-align:center;
padding:80px 20px;
}

.modulos h2{
margin-bottom:10px;
}

/* CLIENTES */

.clientes{
padding:80px 20px;
text-align:center;
background:#f8f9fc;
}

.clientes h2{
font-size:32px;
margin-bottom:50px;
}

.clientes-container{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:40px;
align-items:center;
}

.clientes-container img{
width:160px;
height:80px;
object-fit:contain;
margin:auto;
filter:grayscale(100%);
opacity:0.7;
transition:0.3s;
}

.clientes-container img:hover{
filter:grayscale(0%);
opacity:1;
transform:scale(1.05);
}

/* CTA */

.cta{
background:#0056b3;
color:white;
text-align:center;
padding:80px 20px;
}

/* FOOTER */

footer{
text-align:center;
padding:30px;
background:#111;
color:#aaa;
}

/* RESPONSIVO */

@media(max-width:900px){

.grid-2{
grid-template-columns:1fr;
}

/* MENU MOBILE */

#menu{
display:none;
flex-direction:column;
position:fixed;
top:70px;
left:0;
width:100%;
background:white;
padding:20px;
box-shadow:0 10px 20px rgba(0,0,0,0.08);
text-align:center;
z-index:999;
}

#menu.active{
display:flex;
animation:menuOpen 0.3s ease;
}

#menu a{
margin:15px 0;
font-size:18px;
}

/* HAMBURGER */

.menu-mobile{
display:block;
}

/* MÓDULOS */

.cards{
grid-template-columns:1fr;
}

}

/* ANIMAÇÃO MENU */

@keyframes menuOpen{

from{
opacity:0;
transform:translateY(-10px);
}

to{
opacity:1;
transform:translateY(0);
}

}
/* EQUIPE */

.equipe{
padding:80px 20px;
background:#f8f9fc;
}

.equipe-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:40px;

}

.profissional{

background:white;

padding:30px;

border-radius:12px;

box-shadow:0 8px 20px rgba(0,0,0,0.08);

text-align:center;

transition:0.3s;

}

.profissional:hover{

transform:translateY(-8px);

}

.profissional img{

width:150px;

height:150px;

border-radius:50%;

object-fit:cover;

margin-bottom:20px;

}

.profissional h3{

margin-bottom:10px;

}

.profissional p{

font-size:14px;

color:#555;

}