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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:Arial, Helvetica, sans-serif;
    background:#f5f5f5;
    color:#333;
    overflow-x:hidden;

}

/* ==========================================
MENU
========================================== */

.menu{

    background:rgba(0,0,0,.90);

    transition:.4s;

    padding:12px 0;

    box-shadow:0 5px 20px rgba(0,0,0,.4);

}

.menu .nav-link{

    color:#fff!important;

    margin:0 12px;

    font-weight:bold;

    text-transform:uppercase;

    transition:.3s;

}

.menu .nav-link:hover{

    color:#ff2b2b!important;

}

.navbar-brand img{

    height:70px;

}

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

.btn-danger{

    background:#d60000;

    border:none;

    border-radius:8px;

    padding:14px 30px;

    font-weight:bold;

    transition:.3s;

}

.btn-danger:hover{

    background:#ff0000;

    transform:translateY(-3px);

    box-shadow:0 10px 20px rgba(255,0,0,.4);

}

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

.hero{
    background-size:contain;
    background-position:center;
    background-repeat: no-repeat;
    background-color: #000;

}



.hero .container{

    position:relative;

    z-index:10;

}

.hero h4{

    color:#fff;

    font-size:32px;

}

.hero h1{

    color:#fff;

    font-size:80px;

    font-weight:900;

}

.hero span{

    color:#ff0000;

}

.hero h3{

    color:#fff;

    margin:25px 0;

    font-size:35px;

    line-height:48px;

}

.caixa-texto{

    background:rgba(0,0,0,.55);

    border:1px solid #ff0000;

    border-radius:15px;

    color:#fff;

    padding:30px;

    margin-bottom:30px;

}

.caixa-texto strong{

    color:#ffd000;

}

/* ==========================================
FAIXA
========================================== */

.faixas{

    background:#111;

    padding:40px 0;

}

.box-info{

    background:#1d1d1d;

    border:1px solid #2d2d2d;

    border-radius:15px;

    color:#fff;

    text-align:center;

    padding:30px;

    transition:.4s;

    height:100%;

}

.box-info:hover{

    transform:translateY(-10px);

    border-color:red;

}

.box-info i{

    color:red;

    font-size:45px;

    margin-bottom:15px;

}

.box-info h5{

    font-size:22px;

    font-weight:bold;

}

.box-info p{

    color:#ddd;

}

/* ==========================================
TÍTULOS
========================================== */

.titulo{

    text-align:center;

    font-size:45px;

    font-weight:900;

    margin-bottom:60px;

    position:relative;

}

.titulo::after{

    content:"";

    width:120px;

    height:4px;

    background:red;

    display:block;

    margin:15px auto;

}

/* ==========================================
COMO FUNCIONA
========================================== */

.section{

    padding:90px 0;

}

.passo{

    background:#fff;

    border-radius:20px;

    padding:35px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.3s;

}

.passo:hover{

    transform:translateY(-10px);

}

.numero{

    width:50px;

    height:50px;

    background:red;

    color:#fff;

    border-radius:50%;

    margin:auto;

    line-height:50px;

    font-size:22px;

    font-weight:bold;

    margin-bottom:20px;

}

.passo i{

    color:red;

    font-size:55px;

    margin-bottom:20px;

}

.passo h4{

    font-weight:bold;

    margin-bottom:15px;

}

.passo p{

    color:#666;

}

/* ==========================================
   VANTAGENS
========================================== */

.vantagens{
    padding:100px 0;
    background:#f8f8f8;
}

.card-vantagem{

    background:#fff;

    border-radius:18px;

    padding:35px;

    text-align:center;

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

    transition:.35s;

    height:100%;

}

.card-vantagem:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 35px rgba(0,0,0,.15);

}

.card-vantagem i{

    color:#d80000;

    font-size:55px;

    margin-bottom:20px;

}

.card-vantagem h4{

    font-size:22px;

    margin-bottom:15px;

    font-weight:bold;

}

.card-vantagem p{

    color:#666;

    line-height:28px;

}

/* ==========================================
   EQUIPAMENTO
========================================== */

.equipamento{

    background:#111;

    color:#fff;

    border-radius:20px;

    padding:35px;

    box-shadow:0 20px 40px rgba(0,0,0,.3);

}

.equipamento img{

    margin-bottom:25px;

}

.equipamento h3{

    color:#ff2b2b;

    margin-bottom:20px;

    font-weight:bold;

}

.equipamento ul{

    list-style:none;

    padding:0;

}

.equipamento li{

    padding:12px 0;

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

}

/* ==========================================
   COMPARATIVO
========================================== */

.comparativo{

    background:#fff;

    padding:100px 0;

}

.tabela-comparativa{

    border-radius:15px;

    overflow:hidden;

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

}

.tabela-comparativa thead{

    background:#d50000;

    color:#fff;

}

.tabela-comparativa th{

    text-align:center;

    padding:18px;

}

.tabela-comparativa td{

    text-align:center;

    padding:18px;

    font-size:18px;

}

.tabela-comparativa tbody tr:nth-child(even){

    background:#f5f5f5;

}

/* ==========================================
   INVESTIMENTO
========================================== */

.investimento{

    background:#161616;

    color:#fff;

    padding:100px 0;

}

.investimento .titulo{

    color:#fff;

}

.preco-box{

    background:#242424;

    border-radius:20px;

    text-align:center;

    padding:40px 20px;

    transition:.4s;

    border:1px solid #333;

}

.preco-box:hover{

    border-color:#ff0000;

    transform:translateY(-8px);

}

.preco-box i{

    font-size:50px;

    color:#ff0000;

    margin-bottom:20px;

}

.preco-box h3{

    margin-bottom:20px;

}

.preco-box h1{

    color:#ffd000;

    font-size:48px;

    font-weight:900;

}

.preco-box p{

    color:#ccc;

}

.selo{

    width:220px;

    height:220px;

    background:linear-gradient(#FFD700,#D8A300);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    color:#000;

    font-weight:bold;

    text-align:center;

    box-shadow:0 0 35px rgba(255,215,0,.4);

}

.beneficios{

    background:#242424;

    padding:30px;

    border-radius:20px;

}

.beneficios ul{

    list-style:none;

    padding:0;

}

.beneficios li{

    padding:12px 0;

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

}

/*====================================
      DEPOIMENTOS
====================================*/

.depoimentos{

    padding:100px 0;

    background:#f3f3f3;

}

.card-depoimento{

    background:#fff;

    padding:35px;

    border-radius:20px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.4s;

    height:100%;

}

.card-depoimento:hover{

    transform:translateY(-10px);

}

.estrelas{

    color:#FFD700;

    font-size:28px;

    margin-bottom:20px;

}

.card-depoimento p{

    color:#555;

    line-height:28px;

    font-size:17px;

}

.card-depoimento h5{

    margin-top:25px;

    font-weight:bold;

    color:#d60000;

}

.card-depoimento span{

    color:#777;

}


/*====================================
      CONTATO
====================================*/

.contato{

    background:#111;

    color:#fff;

    padding:100px 0;

}

.contato h2{

    font-size:45px;

    margin-bottom:20px;

    font-weight:900;

}

.contato p{

    color:#ddd;

}

.contato .form-control{

    height:58px;

    border-radius:10px;

    border:none;

    margin-bottom:18px;

}

.contato textarea.form-control{

    height:180px;

    resize:none;

}

.vantagens-contato{

    background:#1d1d1d;

    border-radius:20px;

    padding:40px;

    height:100%;

}

.vantagens-contato h3{

    color:#ff2b2b;

    margin-bottom:30px;

}

.vantagens-contato ul{

    list-style:none;

    padding:0;

}

.vantagens-contato li{

    padding:15px 0;

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

}


/*====================================
      RODAPÉ
====================================*/

footer{

    background:#000;

    color:#fff;

    padding:70px 0 30px;

}

footer h4{

    margin-bottom:25px;

    color:#ff2b2b;

    font-weight:bold;

}

footer p{

    color:#bbb;

}

footer hr{

    margin:40px 0;

    border-color:#333;

}

.redes{

    display:flex;

    justify-content:center;

    gap:15px;

}

.redes a{

    width:50px;

    height:50px;

    border-radius:50%;

    background:#222;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:22px;

    transition:.3s;

}

.redes a:hover{

    background:#d60000;

    transform:scale(1.1);

}


/*====================================
      WHATSAPP
====================================*/

.whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    width:70px;

    height:70px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:36px;

    text-decoration:none;

    z-index:9999;

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

    transition:.3s;

}

.whatsapp:hover{

    transform:scale(1.1);

    color:#fff;

}


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

.card-vantagem,
.card-depoimento,
.passo,
.preco-box,
.box-info{

    transition:all .35s ease;

}

.card-vantagem:hover,
.card-depoimento:hover,
.passo:hover,
.preco-box:hover,
.box-info:hover{

    transform:translateY(-10px);

}


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

@media(max-width:991px){

.hero{

padding-top:140px;

text-align:center;

}

.hero h1{

font-size:55px;

}

.hero h3{

font-size:28px;

line-height:40px;

}

.navbar-brand img{

height:55px;

}

.selo{

margin:40px auto;

}

}

@media(max-width:768px){

.titulo{

font-size:32px;

}

.hero h1{

font-size:42px;

}

.hero h3{

font-size:22px;

}

.contato h2{

font-size:34px;

}

.preco-box{

margin-bottom:25px;

}

.card-vantagem{

margin-bottom:25px;

}

footer{

text-align:center;

}

.redes{

justify-content:center;

margin-top:20px;

}

}

@media(max-width:576px){

.hero{

padding:120px 0 70px;

}

.hero h1{

font-size:34px;

}

.hero h3{

font-size:18px;

line-height:30px;

}

.btn{

width:100%;

}

.whatsapp{

width:60px;

height:60px;

font-size:30px;

}

}