/* =========================
   CONFIGURAÇÕES GERAIS
========================= */

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

body{

    font-family:'Arial',sans-serif;

    background:#f5f7fb;

    color:#333;

    padding-top:70px;

}


a{

    text-decoration:none;

}



/* =========================
   NAVBAR
========================= */


.navbar{

    background:#0b3d6e;

    border:none;

    margin-bottom:0;

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

}


.navbar-brand{

    color:#fff!important;

    font-size:22px;

    padding-top:20px;

}


.navbar-brand i{

    margin-right:8px;

}


.navbar-nav>li>a{

    color:#fff!important;

    font-size:16px;

    padding:25px 15px;

}


.navbar-nav>li>a:hover{

    background:#14558f!important;

}


.navbar-btn{

    margin-top:14px;

    padding:10px 20px!important;

    border-radius:30px;

}



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


.hero{

    min-height:550px;

    display:flex;

    align-items:center;

    text-align:center;

    color:white;

    background:

    linear-gradient(
        rgba(11,61,110,.85),
        rgba(11,61,110,.85)
    ),

    url("../img/banner.png");


    background-size:cover;

    background-position:center;

}


.hero h1{

    font-size:55px;

    font-weight:bold;

    margin-bottom:25px;

}


.hero p{

    font-size:22px;

    max-width:700px;

    margin:auto;

    line-height:1.6;

}


.hero .btn{

    margin-top:30px;

    border-radius:40px;

    padding:15px 35px;

    font-size:18px;

}



/* =========================
   TITULOS
========================= */


h2{

    text-align:center;

    color:#0b3d6e;

    font-size:38px;

    font-weight:bold;

    margin:60px 0 40px;

}



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


.card-servico{

    background:#fff;

    padding:35px;

    text-align:center;

    border-radius:15px;

    min-height:250px;

    box-shadow:

    0 10px 30px rgba(0,0,0,.08);


    transition:.3s;

}


.card-servico:hover{

    transform:translateY(-10px);

    box-shadow:

    0 20px 40px rgba(0,0,0,.15);

}


.card-servico i{

    font-size:55px;

    color:#0b3d6e;

    margin-bottom:20px;

}


.card-servico h3{

    color:#0b3d6e;

}



/* =========================
   PAGINAS INTERNAS
========================= */


.pagina{

    padding:80px 0;

    background:white;

}


.pagina p{

    font-size:18px;

    line-height:1.8;

}



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


.lista-servicos{

    padding:60px 0;

}


.servico-box{

    background:white;

    padding:30px;

    margin-bottom:30px;

    border-radius:15px;

    box-shadow:

    0 5px 20px rgba(0,0,0,.08);

}



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


.formulario{

    background:white;

    padding:40px;

    border-radius:15px;

    box-shadow:

    0 10px 30px rgba(0,0,0,.08);

}


.form-control{

    height:45px;

    border-radius:8px;

}



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


.footer{

    background:#071f38;

    color:white;

    padding:50px 0 20px;

    margin-top:60px;

}


.footer h3{

    color:white;

    margin-bottom:25px;

}


.footer p{

    color:#ddd;

    line-height:1.8;

}


.footer a{

    color:#ddd;

}


.footer a:hover{

    color:#fff;

}


.footer hr{

    border-color:rgba(255,255,255,.2);

}



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


.whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    width:60px;

    height:60px;

    background:#25d366;

    color:white;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:35px;

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

    z-index:999;

}



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


.ng-enter{

    animation:

    fadeIn .5s;

}


@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(20px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* =========================
   MOBILE
========================= */


@media(max-width:768px){


.navbar-nav>li>a{

    padding:15px;

}


.hero h1{

    font-size:38px;

}


.hero p{

    font-size:18px;

}


h2{

    font-size:30px;

}


}