:root {
  --cor_principal: #34393A;
  --branco: #ffffff;
  --cor_segundaria: #000000;
  --cor_principal_hover: #000000;
  --fonte_destaque: 'Montserrat', sans-serif;
  --branco: #ffffff;
}

.espaco_mobile {
	
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--fonte_destaque);
  color: rgb(var(--bs-tertiary-color-rgb));
}
.btn-primary:disabled {
	background-color:var(--cor_segundaria);
}
.negrito {
	font-weight:bold;
}
.imagem_responsiva {
	max-width: 100%;
}
.botao_destaque {
	font-weight: bold;
	padding: 20px;
}
.btn:hover {
	background-color:var(--cor_principal_hover) !important;
	color:#ffffff !important;
}
.opcoes_meio {
	padding: 20px;
}
.imagem300 {
	width: 400px;
}
.centraliza {
	text-align: center;
}
.espaco1 {
	height: 10px;
}
.texto {
	font-size: 17px;
	white-space: pre-wrap;
	color:var(--cor_segundaria);
}
.flutua_direita {
  float: right;
}

	
.texto1 {
	color:var(--cor_segundaria);
	font-family: var(--fonte_destaque);

}

.cor_segundaria {
	color:var(--cor_segundaria);
}
.logo {
	max-width: 70%;
}

h1 {
  font-family: var(--fonte_destaque);
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  text-transform:uppercase;

}
.cor_principal {
	color: var(--cor_principal);
}

.container-fluid {
  max-width: 1200px;
}

/*VANTAGENS---------------------------------------------*/

#vantagens i {
	color:var(--cor_principal);
}

/*BOTÕES---------------------------------------------*/

.btn-primary {
	background-color:var(--cor_segundaria);
	border:var(--cor_segundaria);
}
.btn-primary:hover {
	background-color:var(--cor_principal) !important;
}


/*MENU -----------------------------------------------*/

/* <weight>: Use a value from 200 to 800*/
/* <uniquifier>: Use a unique and descriptive class name*/

.titulo_menu {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 20px;
  font-style: normal;
  
  

  
}
.nav-item {
	margin:10px;
}
.navbar-light .navbar-nav .nav-link {
  color:var(--cor_principal); /* ou qualquer tom escuro que preferir */

}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--branco);
  background-color: var(--cor_principal);
  border-radius: 10px;
}

/*BANNER------------------------------------------------*/

.carousel-item img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  filter: brightness(50%); /* Escurece a imagem para 50% do brilho original */
}
.carousel-caption {
	text-align: left;
}
/*MEIO--------------------------------------------------*/

.meio h2 {
	font-family: var(--fonte_destaque);
	font-size: 60px;
	color: var(--cor_principal);
	font-weight:800;
	margin-top: -20px;
	line-height: 1.1 !important;
}
.meio .texto1 {
	font-size: 18px;
	white-space: pre-wrap;
}
.meio2 {
  /* Camada preta semi-transparente + imagem */
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
    url('../imagens/meio2.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  max-height: 1200px;
  display: flex;
  align-items: left;
  justify-content: center;
  text-align: center;
  padding: 20px;
}


.conteudo-meio2 {
  background-color: rgba(0, 0, 0, 0.7); /* leve sombra para contraste */
  color: #fff;
  padding: 60px;
  border-radius: 10px;
  max-width: 800px;
  width: 100%;
}

.conteudo-meio2 h1 {
  font-size: 28px;
  margin-bottom: 15px;
  line-height: 1.3;
}

.conteudo-meio2 p {
  font-size: 18px;
  line-height: 1.6;
}

/*RODAPÉ------------------------------------------------------*/

.rodape {
	background-color: var(--cor_segundaria);
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
}
.fw-bold {
	font-size: 30px;
}
.rodape a {
	color: var(--branco);
	text-decoration: none;
}
.rodape a:hover {
	text-decoration: underline;
}
.rodape2 {
	background-color:var(--cor_principal);
	max-width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
	color:var(--branco);
}
.rodape .container {
	padding-top: 30px;
}
ul.list-unstyled li {
  margin-bottom: 10px; /* Aumenta o espaçamento entre os itens */
}



/*MOBILE------------------------------------------------*/



/*INTERNOS--------------------------------------*/
.espaco_texto {
	padding-top:0px;
	padding-bottom: 30px;
}
.espaco_texto a {
	color:#000000;
	text-decoration: none;
}
.espaco_texto a:hover {
	color:#000000;
	text-decoration: underline !important;
}
.btn-outline-primary {
  border-color: #000000 !important;
}
.btn-primary   {
  border-color: #000000 !important;
  color:#ffffff !important;
}
.btn-outline-primary:hover {
  background-color: #000000;
  color: #ffffff!important;
  border-color: #000000 !important;
}
.btn-light:hover {
  background-color: #000000;
  color: #ffffff!important;
  border-color: #000000 !important;
}
.topo_interno {
  background-color: var(--cor_segundaria);
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), /* camada preta semi-transparente */
    url('../imagens/topo_interno2.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  color: white; /* para texto ficar legível em fundo escuro */
}



.topo_conteudo {
  height: 100%; /* ocupar toda altura do pai (.topo_interno) */
  display: flex;
  align-items: center;       /* centraliza verticalmente */
  justify-content: center;   /* centraliza horizontalmente */
  text-align: center;
}

.topo_conteudo h1 {
  color: white;
  max-width: 1200px; /* melhor usar max-width para responsividade */
  font-size: 2.5rem;
  margin: 0;
  padding: 20px;
}

#topo_menor {
	width: 100%;
	background-color:var(--cor_principal);
	padding: 10px;
	color: var(--branco);
}
#topo_menor a {
	color:#ffffff;
	text-decoration: none;
}
#topo_menor a:hover {
	color:#ffffff;
	text-decoration: underline;
}
#topo_menor2 {
	width: 1200px;
	margin:0 auto 0 auto;
	text-align: right;
	padding-right:30px;
	
}
	
	
/*PRODUTOS--------------------------------------------------*/


.card-title {
	text-transform:uppercase;
}
.produtos .card {
  position: relative;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centraliza o conteúdo horizontalmente */
}

.produtos .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.produtos .card-img-top {
  width: 100%; /* A imagem vai cobrir toda a largura do card */
  height: 300px; /* Altura fixa da imagem */
  object-fit: cover; /* A imagem vai cobrir a área sem distorcer */
}

.produtos .card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  position: relative;
  z-index: 1; /* Garante que o título e o botão apareçam sobre a imagem */
}

.produtos .card-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333; /* Cor do título */
  text-align: center; /* Centraliza o título */
  margin-bottom: 10px;
  z-index: 2; /* Garante que o título fique acima da imagem */
}

.produtos .btn {
  background-color: var(--cor_principal); /* Cor principal */
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 500;
  transition: background-color 0.3s ease, transform 0.2s ease;
  z-index: 2; /* Garante que o botão fique acima da imagem */
}

.produtos .btn:hover {
  background-color: var(--cor_segundaria) !important;
  transform: scale(1.05);
}

/* Responsividade para tablets e celulares */
@media (max-width: 991.98px) {
  .produtos .card-img-top {
    height: 250px; /* Ajusta o tamanho da imagem em telas menores */
  }
}

@media (max-width: 575.98px) {
  .produtos .card-img-top {
    height: 200px; /* Ajusta o tamanho da imagem para telas pequenas */
  }
  .nav-link {
	  padding: 10px;
  }
 #topo_menor2 {
	 font-size: 15px;
	 text-align: center;
	 width: 100%;
	 padding-left: 3%;
	

 }

  .produtos .card-title {
    font-size: 1rem;
  }
  .produtos .btn {
    padding: 6px 12px;
    font-size: 0.9rem;
  }
}


/*CONTATO---------------------------------------------------*/


  .contato {
    background-color: #f8f9fa;
    padding: 50px 20px;
    border-radius: 10px;
  }

  .contato h2 {
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--cor_principal);
  }

  .contato p.lead {
    font-size: 1.1rem;
    margin-bottom: 30px;
  }

  .contato .form-control {
    border-radius: 8px;
  }

  .contato .btn-enviar {
    background-color: var(--cor_principal);
    border: none;
    color: white;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: bold;
  }

  .contato .btn-enviar:hover {
    background-color: var(--cor_segundaria) !important;
  }

  .contato-info i {
    color: var(--cor_principal);
    margin-right: 10px;
  }

  .contato-info p {
    margin-bottom: 10px;
  }

  .contato label {
    font-weight: 500;
    margin-bottom: 5px;
  }

  .mapa {
    width: 100%;
    height: 250px;
    border: 0;
    border-radius: 10px;
  }

  @media (min-width: 992px) {
    .mapa {
      height: 320px;
    }
  }
  
  
/*ORÇAMENTO-------------------------------------------------------*/

.orcamento input,
.orcamento textarea {
  border-radius: 8px;
  border: 1px solid #ccc;
  padding: 10px;
  transition: all 0.3s ease;
}

.orcamento input:focus,
.orcamento textarea:focus {
  border-color: var(--cor_principal);
  box-shadow: 0 0 5px rgba(88, 174, 228, 0.4);
  outline: none;
}

.orcamento button {
  background-color: var(--cor_principal);
  border: none;
  padding: 10px 30px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.orcamento button:hover {
  background-color: #0067a9;
}




/* Quando a tela for de tamanho mobile (max-width: 768px), mudar a cor do botão e do ícone */
@media (max-width: 768px) {
  .navbar-toggler {
    background-color: var(--cor_principal); /* Botão de fundo preto no mobile */
    border: 0px solid #333; /* Ajuste da borda para combinar com o botão */
  }
   .navbar-brand img {
    max-height: 90px; /* Reduz o tamanho do logo no mobile */
  }
  
  .navbar-toggler-icon {
  background-color: var(--cor_principal);  /* Ícone de hambúrguer branco no mobile */
	color:#ffffff;
  }
  .flutua_direita {
	  width: 100%;
	  float:none;
}
.imagem300 {
	width: 100%;

}
.limpar {
	clear:both;
}
.carousel-caption {
	top: 25%;
}
.conteudo-meio2 h1 {
  font-size: 20px;
}
.espaco_texto {
	padding: 20px;
}
.topo_conteudo h1 {
	font-size: 25px;
}
.espaco_mobile {
	height: 20px;
}