@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

html,
body {
  margin: 0;
  background-color: var(--white);
  font-family: 'Roboto', sans-serif;
  font-size: 19px;
  font-weight: 400;
}

* {
  box-sizing: border-box;
} 

:root {
  --gray-strong: #E5E2E2;
  --black: #000;
  --blue: #003366;
  --blue2: rgb(83, 192, 255);  
  --coral: #ff8247;
  --white: #ffffff;
}

p {
  font-size: 19px;
  font-weight: 400;
}

h1 {
  font-size: 50px;
}

h2 {
  font-size: 40px;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  line-height: 1.0;
  margin-bottom: 30px;
}
h3 {
  font-size: 20px;
  color: var(--blue);
}
h6 {
  font-weight: 700;
}










.container-fluid {
  width: 100%;
	margin: 0 auto;
}

.container {
  width: 94%;
	margin: 0 auto;
}

.text-center {
  text-align: center;
}


.btn-lg {
  background: var(--blue);
  border-style: none;
  margin-top: 16px;
  font-size: 12px;
}
.btn-lg a{
  text-decoration: none;
  color: var(--white);
  text-transform: uppercase;
}



















nav {
  list-style-type: none;
  text-transform: uppercase;
}

nav .nav ul li {
  display: inline;
  margin: 0 14px;
}
nav .nav ul li a{
  text-decoration: none;
  color: var(--black);
  font-size: 16px;
  font-weight: 700;
}
nav .nav a:hover {
  color: var(--coral);
}
.logo img {
  max-width: 240px;
  height: auto;
}






/* Full height image header */
#banner-index {
  background-image: url("/images/banner-top.jpg");
  background-size: cover;
  background-position: center center;
  position: relative;
  z-index: 100;
  height: 640px;/* 
  padding: 160px 0 160px; */
}

#banner-outros { /* ESTILO DO BANNER NAS PGS FORA A INDEX  */
  background-image: url("/images/banner-top.jpg");
  background-size: cover;
  background-position: center center;
  position: relative;
  z-index: 100;
  height: 340px;/* 
  padding: 160px 0 160px; */
}

header .title-banner {
  font-size: 40px;
  max-width: 800px;
  font-weight: 700;
  color: #ff7f50;
  color: var(--blue);
  line-height: 38px;
  text-transform: uppercase;
}
header .txt-banner {
  color: var(--blue);
  font-size: 30px;
  font-weight: 700;
}
header .vs-banner {
  font-size: 22px;
  color: var(--blue);
  font-weight: 700;
}
.bi-telephone-fill,
.bi-whatsapp,
.bi-envelope {
  padding-right: 10px;
  padding-left: 0px;
}
header .vs-banner a {
  color: var(--blue);
  text-decoration: none;
}
header .vs-banner a:hover {
  color: rgb(253, 156, 76);
  color: var(--coral)
}






.empresa-index {
  padding: 70px 0;
}
.text-empresa-index {
  padding: 0 4px;
}
.text-empresa-index ul li {
  list-style: none;
}
.imagem-empresa-index img {
  max-width: 100%;
  height: auto;
}






/* TAMANHO PADRÃO DAS DIVS LATERAIS */
.text-empresa-index,
.imagem-empresa-index,
.text-empresa,
.imagem-empresa,
.text-contato,
.imagem-contato {
  max-width: 50%;
}







.servicos-index {
  padding: 160px 0;
  background-color: var(--gray-strong);
}
.servicos-index img {
  width: auto;
  max-height: 74px;
}
.servicos-index .bi {
  font-size: 50px;
  color: var(--blue);
}
.servicos-index .card-group {
  margin-bottom: 40px;
}
.servicos-index .card-index {
  background-color: var(--white);
  width: 250px;
  padding: 30px 0;
  margin: 3px;
}
.servicos-index .btn {
  display: block;
  margin: 0 auto;
}
















.empresa {
  padding: 70px 0;
}
.text-empresa {
  padding: 0 4px;
}
.text-empresa ul li {
  list-style: none;
}
.imagem-empresa img {
  max-width: 100%;
  height: auto;
}




.contato {
  padding: 70px 0;
}
.text-contato {
  padding: 0 4px;
  width: 100%;
}
.imagem-contato img {
  max-width: 100%;
  height: auto;
}
.contato .text-contato a {
  color: var(--black);
  text-decoration: none;
}
.contato .text-contato a:hover {
  color: var(--coral);
}








 .servicos {
  padding: 100px 0;
 }
 .servicos .col {
  margin-bottom: 40px;
 }
 .servicos .card {
  height: 100%;
 }
 .card img {
  max-height: 400px;
  vertical-align: middle;
  border-style: none;
 }
.box-image img {
  display: block;
  width: 100%;
  height: 400px;
  margin-bottom: 20px;
  object-fit: cover;
}









footer {
  background-color: var(--blue);
  padding: 40px 0;
  color: var(--white);
}
footer h3 {
  color: var(--white);
}
footer p {
  font-size: medium;
  font-weight: 400;
}
footer .bi {
  color: var(--white);
}
footer a {
  color: var(--white);
  text-decoration: none;
}
footer a:hover {
  color: var(--blue2);
}