/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Roboto',sans-serif;
    background:#050505;
    color:#fff;
    overflow-x:hidden;
}

h1,
h2,
h3,
.navbar-nav .nav-link{
    font-family:'Roboto Condensed',sans-serif;
}

/* =========================
   VARIÁVEIS
========================= */

:root{

    --azul:#0d6efd;
    --azul-claro:#35b6ff;
    --cinza:#bfbfbf;
    --cinza-claro:#e8e8e8;
    --escuro:#050505;

}

/* =========================
   NAVBAR
========================= */

.navbar{
    background:rgba(0,0,0,.85);
    backdrop-filter:blur(10px);
    transition:.3s;
	padding-top:30px;
}

.nav-link{

    color:#fff !important;
	font-size:25px;
    margin-left:20px;
    font-weight:500;
    transition:.3s;

}

.nav-link:hover{

    color:var(--azul-claro) !important;

}

.logo-flutuante{

    position:relative;

}

.logo-flutuante img{

    height:180px;
    width:auto;

    position:absolute;
    top:-20px;
    left:0;

    z-index:9999;

}

.manuntencao{list-style: none;padding: 0;margin: 0;}
.manuntencao li {position: relative;padding-left: 22px;margin-bottom: 8px;}
.manuntencao li:before {content: "◉";position: absolute;left: 0;top: 0;color: #0d6efd;}



/* =========================
   BOTÕES
========================= */

.btn-principal{

    background:linear-gradient(
    135deg,
    var(--azul),
    var(--azul-claro));

    color:#fff;
    padding:15px 35px;
    border-radius:10px;
    text-decoration:none;
    font-weight:700;
    border:none;

    transition:.3s;

}

.btn-principal:hover{

    transform:translateY(-3px);

    box-shadow:
    0 0 25px rgba(13,110,253,.5);

}

.btn-secundario{

    border:2px solid #fff;

    color:#fff;

    padding:15px 35px;

    border-radius:10px;

    text-decoration:none;

    transition:.3s;

}

.btn-secundario:hover{

    background:#fff;
    color:#000;

}

.btn-whatsapp{

    background:#25D366;
    color:#fff !important;
    border-radius:8px;
    padding:12px 25px;
    text-decoration:none;

}

.btn-whatsapp-lg{

    display:inline-block;

    background:#25D366;

    color:#fff;

    text-decoration:none;

    padding:18px 40px;

    border-radius:10px;

    font-size:20px;

    font-weight:700;

}

/* =========================
   HERO
========================= */

.hero{

    min-height:80vh;
    display:flex;
    align-items:center;

    background:
    linear-gradient(
    rgba(0,0,0,.45),
    rgba(0,0,0,.45)),
    url('../img/bg-hero.jpg');

    background-size:cofver;
   background-position: calc(100% - 240px) center;
    background-repeat:no-repeat;

}

.subtitulo{

    display:block;
    color:#9d9d9d;
    letter-spacing:5px;
    margin-bottom:5px;
    font-size:22px;
    font-weight:600;
	padding-left:120px;
	padding-top: 140px;

}

.hero h1{

    font-size:70px;
    l1ne-height:1;
    margin-bottom:30px;
    font-weight:900;

}

.cinza{	
	font-size:50px;
    background:linear-gradient(
        to bottom,
        #ffffff 0%,
        #d8d8d8 30%,
        #9c9c9c 60%,
        #ffffff 100%
		
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    font-style:italic;

}

.azul{

    color:var(--azul);
    font-style:italic;
    text-shadow:
    0 0 20px rgba(13,110,253,.5);

}

.azulfone{

    color:var(--azul);   
    text-shadow:
    0 0 20px rgba(13,110,253,.5);
	font-weight:900;
	font-size:32px;

}


.hero p{

    font-size:22px;
    color:#d4d4d4;
    margin-bottom:30px;

}

.hero-lista{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

    margin-bottom:40px;

}

.hero-lista div{

    font-size:18px;

}

.hero-lista i{

    color:#0d6efd;

    margin-right:10px;

}

.hero-botoes{

    display:flex;
    gap:15px;
    flex-wrap:wrap;

}

/* =========================
   HERO CARD
========================= */

.hero-card{

    background:
    rgba(255,255,255,.05);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.1);

    border-radius:20px;

    padding:40px;

    text-align:center;

}

.hero-card h3{

    font-size:32px;
    margin-bottom:20px;

}

.numero{

    color:#35b6ff;
    font-size:26px;
    font-weight:700;

}

/* =========================
   NÚMEROS
========================= */

.numeros{

    padding:80px 0;

    background:#0b0b0b;

}

.contador{

    padding:30px;

}

.contador h2{

    color:var(--azul-claro);

    font-size:55px;

    font-weight:800;

}

.contador span{

    color:#cfcfcf;

}

/* =========================
   TÍTULOS
========================= */

.titulo-secao{

    text-align:center;
	font-size:26px;

    margin-bottom:60px;

}

.titulo-secao span{

    color:var(--azul-claro);

    font-weight:700;

    letter-spacing:2px;

}

.titulo-secao h2{

    font-size:48px;

    margin-top:10px;

}

/* =========================
   SERVIÇOS
========================= */

.servicos{

    padding:120px 0;

}

.card-servico{

    background:#101010;

    border-radius:20px;

    overflow:hidden;

    border:1px solid rgba(13,110,253,.2);

    transition:.4s;

    height:100%;

}

.card-servico:hover{

    transform:translateY(-10px);

    border-color:var(--azul);

    box-shadow:
    0 0 30px rgba(13,110,253,.3);

}

.card-servico img{

    width:100%;
    height:260px;
    object-fit:cover;

}

.card-servico h3{

    padding:25px 25px 10px;

}

.card-servico p{

    padding:0 25px 25px;

    color:#c8c8c8;

}

/* =========================
   DIFERENCIAIS
========================= */

.diferenciais{

    background:#0b0b0b;

    padding:120px 0;

}

.card-diferencial{

    background:#111;

    padding:40px 25px;

    border-radius:20px;

    text-align:center;

    height:100%;

}

.card-diferencial i{

    font-size:45px;

    color:var(--azul-claro);

    margin-bottom:20px;

}

/* =========================
   SEGMENTOS
========================= */

.segmentos{

    padding:120px 0;
	border-top: 1px solid rgba(255,255,255,.05);
    box-shadow: inset 0 1px 0 rgba(53,182,255,.15);

}

.segmento-item{

    background:#101010;

    border-radius:15px;

    padding:30px;

    text-align:center;

}

.segmento-item i{

    font-size:40px;

    color:var(--azul);

    display:block;

    margin-bottom:15px;

}

/* =========================
   PREVENTIVA
========================= */

.preventiva{

    background:#050505;

    padding:120px 0;
	
	border-top: 1px solid rgba(255,255,255,.05);
    box-shadow: inset 0 1px 0 rgba(53,182,255,.15);

}

.preventiva h2{

    font-size:48px;

    font-weight:700;

    margin:20px 0;

}

.preventiva p{

    color:#d0d0d0;

    margin-bottom:30px;

}

.tag{

    color:#35b6ff;

    font-weight:700;

    letter-spacing:2px;

}

.manuntencao{

    list-style:none;

    padding:0;

}

.manuntencao li{

    position:relative;

    padding-left:35px;

    margin-bottom:18px;

    font-size:18px;

}

.manuntencao li:before{

    content:"✓";

    position:absolute;

    left:0;

    color:#0d6efd;

    font-weight:bold;

}

/* IMAGEM */

.preventiva-imagem img{

    width:100%;

    border-radius:20px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.4);

}

/* CARD */

.preventiva-card{

    background:
    linear-gradient(
    135deg,
    #0d6efd,
    #35b6ff);

    padding:50px 40px;

    border-radius:25px;

    color:#fff;

    box-shadow:
    0 20px 50px rgba(13,110,253,.35);

}

.icone-card{

    width:70px;
    height:70px;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 auto 25px;

}

.icone-card i{

    font-size:32px;
    color:#fff;

}

.preventiva-card h3{

    font-size:30px;

    margin-bottom:30px;

}

.preventiva-card ul{

    list-style:none;

    padding:0;

}

.preventiva-card li{

    margin-bottom:15px;

    position:relative;

    padding-left:30px;

}

.preventiva-card li:before{

    content:"✓";

    position:absolute;

    left:0;

    font-weight:bold;

}

.btn-whatsapp-card{

    display:block;

    text-align:center;

    background:#25D366;

    color:#fff;

    text-decoration:none;

    padding:18px;

    border-radius:12px;

    margin-top:30px;

    font-size:20px;

    font-weight:700;

}

.preventiva-card small{

    display:block;

    text-align:center;

    margin-top:20px;

    font-size:15px;

}

.preventiva-imagem{

    min-height: 500px;

    background:
    linear-gradient(
        rgba(0,0,0,.15),
        rgba(0,0,0,.15)
    ),
    url('../img/manutencao-preventiva.jpg');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 20px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.4);

}

/* BENEFÍCIOS */

.beneficio-box{

    background:#111;

    border-radius:15px;

    padding:25px;

    text-align:center;

    height:100%;

}

.beneficio-box i{

    font-size:42px;

    color:#0d6efd;

    display:block;

    margin-bottom:15px;

}

/* =========================
   DEPOIMENTOS
========================= */

.depoimentos{

    padding:120px 0;
	border-top: 1px solid rgba(255,255,255,.05);
    box-shadow: inset 0 1px 0 rgba(53,182,255,.15);

}

.card-depoimento{

    background:#101010;

    padding:35px;

    border-radius:20px;

    height:100%;

}

.estrelas{
    color:#FFD700;
    font-size:24px;
    margin-bottom:15px;
}

/* =========================
   CTA FINAL
========================= */

.cta-final{
    padding:120px 0;

    background:
    linear-gradient(
        135deg,
        rgba(13,110,253,0.2),
        rgba(53,182,255,0.2)
    ),
    url('../img/bg-cta.jpg');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.cta-final h2{

    font-size:60px;
    margin:20px 0;
	text-shadow:
        0 2px 1px rgba(0,0,0,.6),
        0 2px 3px rgba(0,0,0,.5);

}

.cta-final span{

    font-size:25px;
	font-weight:500;
    margin:20px 0;
	text-shadow:
        0 2px 1px rgba(0,0,0,.6),
        0 2px 3px rgba(0,0,0,.5);

}

/* =========================
   FOOTER
========================= */

footer{

    background:#000;

    padding:50px 0;

}

.footer-logo{

    height:120px;

}

/* =========================
   WHATSAPP
========================= */

.whatsapp-float{

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;

    height:65px;

    background:#25D366;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:32px;

    text-decoration:none;

    z-index:9999;

    box-shadow:
    0 0 25px rgba(37,211,102,.5);

}

/* =========================
   RESPONSIVO
========================= */

@media(max-width:991px){

    .logo-flutuante img{
        height:120px;
        top:-25px;
    }

    .hero h1{
        font-size:42px;
    }

    .titulo-secao h2{
        font-size:34px;
    }

    .preventiva h2{
        font-size:36px;
    }

    .cta-final h2{
        font-size:40px;
    }

    .hero-lista{
        grid-template-columns:1fr;
    }

}

@media (max-width: 767px){
	
.hero {background-position: left -20px center;}	
.hero h1{font-size:30px;}	
.cinza{font-size:26px;}	
.subtitulo {padding-left: 2px;padding-top: 100px;}
.numeros, .servicos, .diferenciais, .segmentos, .preventiva, .depoimentos {padding: 8px 0;}
}


/* BOTÃO VOLTAR AO TOPO */

.btn-top{
    position:fixed;
    right:25px;
    bottom:105px;
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:#0d6efd;
    color:#fff;
    font-size:22px;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:9998;

}

.btn-top.show{opacity:1;visibility:visible;}