/* ==========================
   RESET
========================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    background:#071A3D;
    color:#fff;
    overflow-x:hidden;

}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

.container{

    width:90%;
    max-width:1300px;
    margin:auto;

}


/* ==========================
   CORES
========================== */

:root{

    --azul:#071A3D;
    --azul2:#0B2554;
    --verde:#25D366;
    --laranja:#ff7a00;
    --branco:#fff;
    --cinza:#dcdcdc;

}


/* ==========================
   HEADER
========================== */

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    backdrop-filter:blur(18px);

    background:rgba(5,16,40,.93);

    border-bottom:1px solid rgba(255,255,255,.05);

}

header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:90px;

}

.logo img{

    width:75px;

}

nav{

    display:flex;
    gap:45px;

}

nav a{

    color:#fff;

    font-weight:500;

    transition:.3s;

    position:relative;

}

nav a:hover{

    color:var(--laranja);

}

nav a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;

    height:2px;

    background:var(--laranja);

    transition:.4s;

}

nav a:hover::after{

    width:100%;

}


/* BOTÃO */

.btn-header{

    background:linear-gradient(90deg,#25D366,#1FB857);

    color:#fff;

    padding:16px 30px;

    border-radius:12px;

    font-weight:700;

    transition:.35s;

    box-shadow:0 12px 30px rgba(37,211,102,.35);

}

.btn-header:hover{

    transform:translateY(-4px);

}



/* ==========================
      HERO
========================== */

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(rgba(6,20,48,.82),rgba(6,20,48,.82)),
    url("../img/principal.jpeg");

    background-size:cover;

    background-position:center;

}


/* EFEITO */

.hero::before{

content:"";

position:absolute;

width:700px;
height:700px;

border-radius:50%;

background:rgba(255,122,0,.10);

filter:blur(100px);

top:-180px;
right:-180px;

}


.hero::after{

content:"";

position:absolute;

width:500px;
height:500px;

border-radius:50%;

background:rgba(37,211,102,.08);

bottom:-150px;
left:-120px;

filter:blur(80px);

}


/* CONTEÚDO */

.hero-content{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

padding-top:120px;

position:relative;

z-index:2;

}

.hero-text span{

display:inline-block;

padding:10px 18px;

border-radius:30px;

border:1px solid rgba(255,255,255,.15);

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

font-size:14px;

letter-spacing:1px;

margin-bottom:25px;

}

.hero-text h1{

font-size:62px;

line-height:70px;

font-weight:800;

margin-bottom:25px;

}

.hero-text h1 p strong{

color:var(--laranja);

}

.hero-text p{

font-size:20px;

line-height:35px;

color:#E5E5E5;

max-width:620px;

margin-bottom:45px;

}


/* BOTÕES */

.hero-buttons{

display:flex;

gap:25px;

margin-bottom:55px;

}

.btn-green{

background:linear-gradient(90deg,#25D366,#18B85B);

padding:20px 40px;

border-radius:14px;

font-size:18px;

font-weight:700;

color:#fff;

transition:.35s;

box-shadow:0 12px 30px rgba(37,211,102,.35);

}

.btn-green:hover{

transform:translateY(-5px);

}

.btn-outline{

padding:20px 35px;

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

border-radius:14px;

color:#fff;

font-size:18px;

font-weight:600;

transition:.3s;

}

.btn-outline:hover{

background:#fff;

color:#071A3D;

}


/* NÚMEROS */

.infos{

display:flex;

gap:60px;

}

.infos h3{

font-size:42px;

color:var(--laranja);

margin-bottom:8px;

}

.infos p{

font-size:16px;

color:#ddd;

}


/* IMAGEM */

.hero-image{

display:flex;

justify-content:center;

}

.hero-image img{

width:100%;

max-width:620px;

animation:float 5s ease-in-out infinite;

}


/* ANIMAÇÃO */

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}



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

@media(max-width:1100px){

.hero-content{

grid-template-columns:1fr;

text-align:center;

}

.hero-text p{

margin:auto;
margin-bottom:40px;

}

.hero-buttons{

justify-content:center;

}

.infos{

justify-content:center;

}

.hero-image{

margin-top:40px;

}

nav{

display:none;

}

}

@media(max-width:768px){

header .container{

height:75px;

}

.logo img{

width:65px;

}

.btn-header{

display:none;

}

.hero{

padding:100px 0 60px;

}

.hero-text h1{

font-size:42px;

line-height:50px;

}

.hero-text p{

font-size:17px;

line-height:30px;

}

.hero-buttons{

flex-direction:column;

}

.btn-green,
.btn-outline{

width:100%;

text-align:center;

}

.infos{

flex-wrap:wrap;

gap:25px;

}

}

.negritoazul { 


color: #0959ec;

} 

/* ==========================
 BENEFÍCIOS
========================== */


.beneficios{

background:#fff;

padding:0 0 80px;

position:relative;

margin-top:-20px;

z-index:5;

}



.beneficios-grid{

background:#fff;

border-radius:25px;

display:grid;

grid-template-columns:repeat(4,1fr);

box-shadow:0 15px 40px rgba(0,0,0,.12);

overflow:hidden;

}



.beneficio-card{

padding:35px 25px;

text-align:center;

border-right:1px solid #eee;

transition:.3s;

}



.beneficio-card:last-child{

border:none;

}



.beneficio-card:hover{

transform:translateY(-8px);

}



.icone{

width:60px;

height:60px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

background:#071A3D;

color:#ff7a00;

font-size:28px;

border-radius:50%;

margin-bottom:20px;

}



.beneficio-card h3{

color:#071A3D;

font-size:18px;

margin-bottom:12px;

}



.beneficio-card p{

color:#555;

font-size:14px;

line-height:24px;

}



/* ==========================
 SERVIÇOS
========================== */


.servicos{

background:#071A3D;

padding:100px 0;

}



.titulo-section{

text-align:center;

max-width:750px;

margin:auto;

margin-bottom:60px;

}



.titulo-section span{

color:#ff7a00;

font-weight:700;

letter-spacing:2px;

font-size:14px;

}



.titulo-section h2{

font-size:45px;

line-height:55px;

margin:15px 0;

}



.titulo-section p{

color:#ccc;

font-size:18px;

}



.servicos-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}



.servico-card{

background:#102650;

padding:40px 30px;

border-radius:20px;

border:1px solid rgba(255,255,255,.08);

transition:.4s;

}



.servico-card:hover{

transform:translateY(-10px);

background:#15346d;

}



.servico-icon{

font-size:45px;

margin-bottom:25px;

}



.servico-card h3{

font-size:25px;

margin-bottom:15px;

}



.servico-card p{

color:#ddd;

line-height:28px;

}



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


@media(max-width:1000px){


.beneficios-grid{

grid-template-columns:repeat(2,1fr);

}


.servicos-grid{

grid-template-columns:repeat(2,1fr);

}


}



@media(max-width:600px){


.beneficios{

margin-top:0;

}



.beneficios-grid{

grid-template-columns:1fr;

}



.beneficio-card{

border-right:none;

border-bottom:1px solid #eee;

}



.servicos-grid{

grid-template-columns:1fr;

}



.titulo-section h2{

font-size:34px;

line-height:42px;

}


}

/*=====================================
SOBRE
======================================*/

.sobre{

padding:120px 0;

background:#fff;

}


.sobre-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}



.sobre-img{

position:relative;

}



.sobre-img img{

width:100%;

border-radius:25px;

box-shadow:0 25px 50px rgba(0,0,0,.15);

transition:.4s;

}



.sobre-img img:hover{

transform:scale(1.02);

}



.sobre-texto span{

display:inline-block;

color:#ff7a00;

font-weight:700;

letter-spacing:2px;

margin-bottom:15px;

}



.sobre-texto h2{

font-size:46px;

line-height:58px;

color:#071A3D;

margin-bottom:25px;

}



.sobre-texto p{

font-size:18px;

line-height:34px;

color:#555;

margin-bottom:40px;

}



.numeros{

display:flex;

gap:50px;

margin-bottom:45px;

}



.numero h3{

font-size:48px;

color:#ff7a00;

font-weight:700;

}



.numero p{

margin-top:10px;

color:#666;

font-size:15px;

}



.sobre .btn-green{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 40px;

}

/*=====================================
CTA FINAL
======================================*/

.cta-final{

padding:120px 20px;

text-align:center;

background:linear-gradient(135deg,#071A3D,#0F2C63);

color:#fff;

}

.cta-final span{

color:#ff7a00;

font-weight:700;

letter-spacing:2px;

}

.cta-final h2{

font-size:55px;

margin:20px 0;

}

.cta-final p{

max-width:700px;

margin:auto;

font-size:20px;

line-height:34px;

margin-bottom:45px;

color:#ddd;

}



/*=====================================
FAQ
======================================*/

.faq{

padding:120px 0;

background:#fff;

}

.faq-item{

margin-bottom:20px;

border-radius:15px;

overflow:hidden;

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

}

.faq-question{

width:100%;

padding:25px;

border:none;

background:#fff;

display:flex;

justify-content:space-between;

align-items:center;

font-size:18px;

font-weight:600;

cursor:pointer;

}

.faq-question span{

font-size:28px;

color:#ff7a00;

}

.faq-answer{

display:none;

padding:25px;

background:#fafafa;

line-height:30px;

color:#555;

}



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

footer{

background:#071A3D;

padding:80px 0 20px;

color:#fff;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:50px;

}

.footer-logo{

width:220px;

margin-bottom:20px;

}

footer h3{

margin-bottom:20px;

color:#ff7a00;

}

footer ul{

list-style:none;

}

footer li{

margin-bottom:12px;

color:#ddd;

}

.footer-social{

display:flex;

flex-direction:column;

gap:15px;

}

.footer-social a{

color:#fff;

transition:.3s;

}

.footer-social a:hover{

color:#ff7a00;

}

.copyright{

margin-top:70px;

text-align:center;

padding-top:30px;

border-top:1px solid rgba(255,255,255,.08);

color:#aaa;

}



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

@media(max-width:900px){

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-logo{

margin:auto auto 20px;

}

.footer-social{

align-items:center;

}

.cta-final h2{

font-size:38px;

}

}

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

.beneficio-card,
.servico-card,
.sobre-img,
.sobre-texto,
.cliente-card,
.avaliacao-card,
.cta-final,
.faq-item{

opacity:0;

transform:translateY(50px);

transition:.8s ease;

}

.show{

opacity:1;

transform:translateY(0);

}


/* HEADER */

header.scroll{

background:#071A3D;

box-shadow:0 10px 25px rgba(0,0,0,.25);

}


/* WHATSAPP */

.whatsapp-float.pulse{

animation:whats 1s;

}

@keyframes whats{

0%{

transform:scale(1);

}

50%{

transform:scale(1.12);

}

100%{

transform:scale(1);

}

}

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

.btn-green,
.btn-header{
    animation:pulse 2s infinite;
}

@keyframes pulse{

    0%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(37,211,102,.7);
    }

    70%{
        transform:scale(1.05);
        box-shadow:0 0 0 18px rgba(37,211,102,0);
    }

    100%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }

}

/* Mantém o efeito quando passa o mouse */

.btn-green:hover,
.btn-header:hover{

    animation-play-state:paused;
    transform:translateY(-5px) scale(1.03);

}

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

@media (max-width: 768px){

*{
    box-sizing:border-box;
}

html,
body{
    overflow-x:hidden;
    width:100%;
}

.container{
    width:92%;
    margin:auto;
}

/* HEADER */

header{
    padding:12px 0;
}

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

.logo img{
    width:85px;
}

nav{
    display:none;
}

.btn-header{
    display:none;
}


/* HERO */

.hero{
    padding:20px 0 70px;
    min-height:auto;
}

.hero-content{
    display:flex;
    flex-direction:column;
    gap:40px;
    text-align:center;
}

.hero-text h1{

    font-size:34px;
    line-height:42px;

}

.hero-text p{

    font-size:16px;
    line-height:28px;

}

.hero-buttons{

    display:flex;
    flex-direction:column;
    gap:15px;

}

.btn-green,
.btn-outline{

    width:100%;
    padding:18px;

}

.hero-image img{

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

}

.infos{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    margin-top:20px;

}

.infos h3{

    font-size:28px;

}


/* BENEFÍCIOS */

.beneficios-grid{

    grid-template-columns:1fr;

}


/* SERVIÇOS */

.servicos{

    padding:70px 0;

}

.servicos-grid{

    grid-template-columns:1fr;
    gap:20px;

}

.servico-card{

    padding:30px;

}


/* SOBRE */

.sobre{

    padding:70px 0;

}

.sobre-grid{

    display:flex;
    flex-direction:column;

}

.sobre-img img{

    width:100%;

}

.sobre-texto{

    text-align:center;

}

.sobre-texto h2{

    font-size:32px;
    line-height:40px;

}

.numeros{

    display:grid;
    grid-template-columns:1fr;
    gap:20px;

}


/* CLIENTES */

.clientes-slider{

    margin-top:40px;

}

.slide{

    width:150px;
    margin:0 8px;

}

.slide img{

    max-width:100px;

}


/* AVALIAÇÕES */

.avaliacoes-grid{

    grid-template-columns:1fr;

}


/* FAQ */

.faq-question{

    font-size:16px;
    padding:18px;

}


/* CTA */

.cta-final{

    padding:70px 20px;

}

.cta-final h2{

    font-size:34px;
    line-height:42px;

}

.cta-final p{

    font-size:16px;

}


/* FOOTER */

.footer-grid{

    grid-template-columns:1fr;
    text-align:center;
    gap:35px;

}

.footer-logo{

    margin:auto;

}

.footer-social{

    justify-content:center;
    flex-direction:row;
    gap:20px;

}

footer ul{

    padding:0;

}

}