/* RESET */

html{
scroll-behavior:smooth;
}

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

body{
background:#ffffff;
color:#333;
line-height:1.6;
overflow-x:hidden;
}

/* IMAGENS */

img{
max-width:100%;
height:auto;
}

/* HEADER */

header{
background:#000;
padding:15px 40px;
position:sticky;
top:0;
z-index:10;
}

nav{
display:flex;
justify-content:space-between;
align-items:center;
max-width:1200px;
margin:auto;
}

nav ul{
display:flex;
gap:25px;
list-style:none;
}

nav a{
color:white;
text-decoration:none;
font-weight:bold;
}

.logo img{
height:55px;
}

/* HERO */

.hero{
height:85vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:20px;

background:
linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.85)),
url('https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc');

background-size:cover;
background-position:center;
color:white;
}

.hero h1{

color:white;
font-size:52px;
margin-bottom:20px;
}

.hero p{
max-width:600px;
margin-bottom:25px;
}

/* BOTÕES */

.btn{
background:#ff6600;
color:white;
padding:14px 28px;
border-radius:4px;
text-decoration:none;
display:inline-block;
margin-top:10px;
}

/* SEÇÕES */

.section{
padding:80px 20px;
max-width:1200px;
margin:auto;
}

/* GRID SERVIÇOS */

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

/* CARDS */

.card{
background:#1a1a1a;
padding:30px;
border-radius:8px;
transition:transform .3s;
}

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

/* PROJETOS */

.projects img{
width:100%;
border-radius:6px;
}

/* CTA */

.cta{
background:#ffffff;
padding:100px 20px;
text-align:center;

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

gap:25px;
}

/* FOOTER */

footer{
background:#000;
padding:30px;
text-align:center;
margin-top:40px;
}

/* ANIMAÇÃO FADE */

.fade{
opacity:0;
transform:translateY(20px);
transition:.7s;
}

.fade.show{
opacity:1;
transform:none;
}

/* BOTÃO WHATSAPP */

.whatsapp-float{

position:fixed;

bottom:30px;
right:30px;

width:48px;
height:48px;

z-index:9999;

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

animation:whatsappPulse 2s infinite;

}

.whatsapp-float img{

width:100%;
height:100%;

object-fit:contain;

border-radius:50%;

box-shadow:0 4px 10px rgba(0,0,0,0.3);

transition:transform 0.2s ease;

}

.whatsapp-float:hover img{

transform:scale(1.1);

}

/* ANIMAÇÃO WHATSAPP */

@keyframes whatsappPulse{

0%{transform:scale(1)}
50%{transform:scale(1.08)}
100%{transform:scale(1)}

}

/* CLIENTES */


.clientes{

padding:80px 20px;
background:#f5f5f5;
text-align:center;

}

.clientes h2{

text-align:center;
margin-bottom:30px;

}

.clientes-grid{

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

gap:50px;

flex-wrap:wrap;

max-width:1200px;
margin:auto;


}

.clientes-grid img{

height:70px;
width:auto;

object-fit:contain;

}

.clientes-grid img{

height:70px;
width:auto;

filter:grayscale(100%);
opacity:0.8;

transition:0.3s;

}

.clientes-grid img:hover{

filter:none;
opacity:1;
transform:scale(1.05);

}

/* SOBRE */

.sobre{

padding:80px 20px;
background:#ffffff;

}

.sobre .container{

max-width:1000px;
margin:auto;
text-align:center;

}

.sobre h2{

font-size:34px;
margin-bottom:20px;

}

.sobre p{

font-size:18px;
color:#555;
margin-bottom:15px;
line-height:1.7;

}

/* RESPONSIVO */

@media(max-width:768px){

nav{
flex-direction:column;
align-items:center;
}

nav ul{
flex-direction:column;
gap:10px;
text-align:center;
margin-top:10px;
}

.hero{
height:60vh;
padding:20px;
}

.hero h1{
font-size:28px;
}

.hero p{
font-size:14px;
}

.grid{
grid-template-columns:1fr;
gap:20px;
}

.card{
padding:20px;
}

.cta{
padding:70px 20px;
}

.cta h2{
font-size:24px;
}

.cta p{
font-size:14px;
}

.whatsapp-float{
width:44px;
height:44px;
bottom:20px;
right:20px;
}

.servico-icon{

width:200px;
height:auto;
margin-bottom:15px;
}

}

/* PROJETOS */

.projetos{

padding:80px 20px;
background:#f7f7f7;
text-align:center;

}

.projetos h2{

font-size:34px;
margin-bottom:40px;

}

/* BANNER DAS PÁGINAS */

.page-banner{

height:320px;

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

text-align:center;

color:white;

background-size:cover;
background-position:center;

}

.page-banner h1{

font-size:42px;
margin-bottom:10px;

}

.page-banner p{

font-size:18px;

}

.geek-banner{
background:
linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.8)),
url('https://images.unsplash.com/photo-1581092160607-ee22621dd758');

}

/* SERVIÇOS COM ÍCONES */

.servicos-container{

display:flex;

justify-content:center;

align-items:flex-start;

gap:40px;

flex-wrap:wrap;

margin-top:40px;

text-align:center;

}

.servico-item{

padding:20px;
width:200px;



}

.servico-item h3{

font-size:20px;

margin-bottom:10px;

color:#333;

}

.servico-item p{

font-size:15px;

color:#666;

line-height:1.5;

max-width:260px;

margin:auto;

}

.servico-item a{

text-decoration:none;

color:inherit;

display:block;

}

.section h2{

text-align:center;

margin-bottom:40px;

font-size:34px;

}

.section p{
margin-bottom:25px;
line-height:1.7;
}

.servico-icon{
width:110px;
height:auto;

transition:transform 0.3s ease;

}

.servico-icon{
transition:transform 0.4s ease;

}

.servico-item{
transition:transform 0.3s ease;

}

.servico-icon{
transition:transform 0.3s ease;

}

.servico-item:hover{
transform:translateY(-6px);

}

.servico-icon{
width:110px;
transition:0.3s;

}

.servico-icon{
width:110px;
transition:0.3s;

}

.servico-icon{
width:110px;
transition:all 0.3s ease;

}

.servico-icon{
width:110px;
height:auto;
transition:transform 0.3s ease;

}

.servico-item:hover .servico-icon{
transform:scale(1.1);

}

.servico-nr12{
padding: 80px 10%;
}

.container-servico{
display: flex;
gap: 40px;
align-items: center;
}

.texto-servico{
width: 50%;
}

.texto-servico p{
margin-bottom: 20px;
line-height: 1.7;

}
.texto-servico h2{
margin-bottom: 20px;
}

.imagens-servico{
width: 50%;
display: flex;
align-items:center;
gap: 20px;
justify-content: center;
}

/* HEXAGONOS DOS SERVIÇOS*/
.hexagono{
    width:240px;
    height:260px;
    background:#ff6a00;
    display:flex;
    align-items:center;
    justify-content:center;

    clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );
}

.hexagono-interno{
    width:96%;
    height:96%;
    overflow:hidden;

    clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );
}

.hexagono-interno img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.hexagono{
box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.hexagono{
    width:240px;
    height:260px;
    background:#ff6a00;
    display:flex;
    align-items:center;
    justify-content:center;

    clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );

    transition:0.3s;
}

.hexagono:hover{
    transform:scale(1.07);
    box-shadow:0 10px 25px rgba(0,0,0,0.25);
}