@charset "utf-8";
/* CSS Document */
/* Definindo as cores principais */
/* Definindo as cores principais */
:root {
  --cor-primaria: #212830;
  --cor-secundaria: #929292;
}
a{text-decoration:none;}
/* Estilo geral do corpo da página */
body {
  font-family: Arial, sans-serif;
  color: #333;
}
.bg-Gestao{background-color:#2e2e2e;}
/* Estilizando a barra de navegação */
.navbar {
  background-color:#2e2e2e;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
}

.navbar-brand {
  color: #333;
  font-size: 24px;
  font-weight: bold;
}

.nav-link {
  color: #929292;
  font-weight: bold;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #FFCC33; /* Cor secundária em destaque no hover */
}

/* Estilizando o botão de menu responsivo */
.navbar-toggler {
  border: none;
  color: #929292;
  font-size: 24px;
}

/* Estilizando o menu responsivo */
.navbar-collapse {
  justify-content: flex-end; /* Alinha os links à direita */
}

/* Estilizando os links do menu responsivo */
.navbar-nav {
  margin-right: 1rem; /* Espaçamento entre os links */
}

.nav-item {
  padding: 0 0.5rem; /* Espaçamento horizontal entre os itens do menu */
}

/* Efeito underline moderno nos links do menu */
.nav-link::before {
  content: '';
  display: block;
  height: 3px;
  width: 0;
  background-color: #FFCC33; /* Cor secundária para o underline */
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.nav-link:hover::before {
  width: 100%;
}

/* Estilo do menu quando é expandido em telas menores */
@media (max-width: 768px) {
  .navbar-collapse {
    background-color: #fff; /* Fundo branco para o menu responsivo */
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .navbar-nav {
    display: flex;
    flex-direction: column;
    margin: 0;
  }

  .nav-item {
    padding: 0.5rem 0;
  }

  .nav-link::before {
    display: none; /* Removendo o underline no menu responsivo */
  }
}

/* Estilizando a seção de soluções */
.py-5 {
  background-color: #f5f5f5;
}

/*.container {
  max-width: 1200px;
}*/

h2 {
  color: #212830;
  font-weight: bold;
  font-size: 32px;
  margin-bottom: 30px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Estilizando os cartões de soluções */
.card {
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card-body {
  padding: 30px;
  text-align: center;
}

.card-title {
  color: #212830;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card-text {
  color: #555;
}

/* Estilo dos botões dentro dos cartões */
.btn {
  background-color: #212830;
  border-color: #212830;
  color: #fff;
  font-weight: bold;
  transition: background-color 0.3s ease;
  border:0px;
}

.btn:hover {
  background-color: #1361c6;
  border-color: #1361c6;
}

/* Efeito de sombra nos botões ao passar o mouse */
.btn-primary {
  box-shadow: 0 2px 4px rgba(25, 117, 255, 0.2);
}

/* Adicionando um espaçamento vertical entre os cartões */
.mb-4 {
  margin-bottom: 30px;
}
/* Estilizando o botão "Continue lendo" de forma clean e moderna */
.btn-primary {
  background-color: transparent;
  border: 2px solid #212830;
  color: #212830;
  font-weight: bold;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 30px;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: #212830;
  color: #fff;
}

/* Estilizando o footer */
footer {
  background-color: #333; /* Cor de fundo mais escura */
  color: #fff; /* Cor do texto */
  padding: 30px 0;
  font-size: 14px;
}

/* Estilizando os links do footer */
footer a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}


footer .list-inline-item a{color:#fff;}
footer a:hover {
  color: #212830; /* Cor de destaque ao passar o mouse */
}

/* Estilizando o título do footer */
footer h4 {
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 20px;
}

/* Estilizando a seção de links no footer */
.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.footer-links a {
  margin: 0 15px;
}
/* Estilizando a div .carousel-caption */
.carousel-caption {
  position: absolute;
  bottom:50%; /* Distância da parte inferior do banner */
  float:left;
/*  left: 50%;*/
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  padding: 10px 20px;
  margin-left:20%;
  background-color: rgba(0, 0, 0, 0.3); /* Fundo semi-transparente */
/*  border-radius: 10px;*/
  width: 80%; /* Largura da div .carousel-caption */
  max-width: 50%; /* Largura máxima da div .carousel-caption */
/*  border:1px solid #ccc;*/
}
/* Estilos para dispositivos móveis */
@media (max-width: 767px) {
  .carousel-caption {
    position: absolute;
    bottom: 10%; /* Distância da parte inferior do banner */
    left: 30%;
    transform: translateX(-50%);
    text-align: center;
    color: #fff;
    padding: 10px 20px;
    background-color: rgba(0, 0, 0, 0.3); /* Fundo semi-transparente */
   /* border-radius: 10px;*/
    width: 80%; /* Largura da div .carousel-caption */
    max-width: 90%; /* Largura máxima da div .carousel-caption */
  }
}

.carousel-caption h3 {
  font-size:1.4em;;
  font-weight: bold;
  margin-bottom: 10px;
  text-transform:uppercase;
}

.carousel-caption p {
  font-size: 1.1em;
}

/* Efeito de transição ao passar o mouse */
.carousel-caption:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

/* Estilizando a seção de informações de contato no footer */
.contact-info {
  text-align: center;
}

.contact-info p {
  margin: 5px 0;
}

/* Estilizando o texto de direitos autorais no footer */
.footer-copyright {
  text-align: center;
}
/* Estilizando o botão "Ligamos para você!" */
.btn-warning {
  background-color: #929292; /* Cor destacada para o botão */
  color: #fff;
  font-weight: bold;
  border-radius: 30px;
  padding: 10px 20px;
  transition: background-color 0.3s ease;
}

.btn-warning:hover {
  background-color: #E69500; /* Cor destacada em destaque no hover */
}
/* Estilizando o botão do WhatsApp flutuante */
.whatsapp-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
}

.whatsapp-btn a {
  display: block;
  width: 60px;
  height: 60px;
  background-color: #25d366; /* Cor do botão do WhatsApp */
  color: #fff;
  text-align: center;
  line-height: 60px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
}

.whatsapp-btn a i {
  font-size: 24px;
}

.whatsapp-btn a:hover {
  background-color: #128c7e; /* Cor do botão em destaque no hover */
}

/* Estilizando a imagem de fundo e a camada transparente */
.bg-image {
  background-image: url("URL_DA_IMAGEM_DE_FUNDO");
  background-size: cover;
  background-position: center;
  position: relative;
  height: 500px; /* Defina a altura desejada para a imagem de fundo */
}

.bg-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Cor da camada transparente (aqui usamos 50% de opacidade) */
}

.text-overlay {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .text-overlay h1,
  .text-overlay p {
    text-align: center;
    margin: auto;
    z-index: 1; /* Colocar o texto acima da camada transparente */
    color: white; /* Defina a cor do texto conforme necessário */
  }

  /* Estilo para a imagem de fundo */
  .bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .breadcrumb-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px; /* Ajuste a margem inferior conforme necessário */
  }

  .breadcrumb {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f9fa; /* Defina a cor de fundo conforme necessário */
    padding: 10px;
    border-radius: 5px; /* Ajuste o raio do border-radius conforme necessário */
  }

  .breadcrumb-item {
    list-style: none;
    margin: 0 5px;
  }

  .breadcrumb-item a {
    color: #212830; /* Defina a cor do link conforme necessário */
    text-decoration: none;
  }

  .breadcrumb-item.active {
    color: #000; /* Defina a cor do link ativo conforme necessário */
  }

 .chamada_home {
   /* background-color: #f9f9f9;*/ /* Cor de fundo */
    padding: 30px; /* Espaçamento interno */
    border-radius: 10px; /* Borda arredondada */
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/ /* Sombra */
    text-align: center;
  }

  .chamada_home h1 {
    font-size: 36px; /* Tamanho da fonte do título */
    color: #212830; /* Cor do título */
    margin-bottom: 20px; /* Espaçamento inferior do título */
	
	font-weight:bold;
  }

  .chamada_home p {
    font-size: 18px; /* Tamanho da fonte do parágrafo */
    line-height: 1.6; /* Espaçamento entre linhas do parágrafo */
    color: #333; /* Cor do parágrafo */
  }
  .sharesT {
    margin-bottom: 20px;
}

.tagPost {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 5px 10px;
    background-color: #929292;
    border-radius: 5px;
}
.tagPost a{color:#000; text-decoration:none; font-weight:bold;}
/* Estilos para o bloco "Você pode se interessar também" */
/*.col-md-12 h3 {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}*/

.row1 {
    margin-bottom: 20px;
}

.postRel {
    margin-bottom: 20px;
}

.imgRel img {
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tituloRel h3 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-top: 10px;
    margin-bottom: 5px;
}

.tituloRel a {
    text-decoration: none;
    color: #929292;
}

.tituloRel a:hover {
    text-decoration: none;
}

.tituloRel a::before {
    content: '|';
    margin-right: 6px;
    color: #333;
}

/* Estilos para o accordion */
.card-header {
    background-color: #f0f0f0;
    border-bottom: 1px solid #ddd;
    padding: 8px 15px;
}

.card-header h5 {
    margin: 0;
}

.card-body {
    padding: 15px;
}

.card {
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
}

.card-header button {
    font-size: 16px;
    font-weight: bold;
    color: #FFF;
    text-decoration: none;
}

.card-header button:hover {
    text-decoration: underline;
    cursor: pointer;
}
.breadcrumb-item.active {
  /*  color: #FFF;*/
}

.card-header button[aria-expanded="true"] {
    color: #FFF;
}

.card-header button:focus {
    outline: none;
    box-shadow: none;
}

/* Ajuste de espaçamentos e margens */
/*.row {
    margin: 0;
}*/

.row1 {
    margin-right: -15px;
    margin-left: -15px;
}

/*.container {
    margin-top: 30px;
}
*/
/*.col-lg-12.col-md-10 {
    margin-bottom: 20px;
}*/

.shares {
    background-color: #f0f0f0;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	margin-bottom:15px;
}

.listaCompartilha {
    list-style: none;
    padding: 0;
    margin: 0;
}

.listaCompartilha li {
    display: inline-block;
    margin-right: 10px;
}

.listaCompartilha li:last-child {
    margin-right: 0;
}

.listaCompartilha strong {
    display: block;
    margin-bottom: 5px;
}

.listaCompartilha a {
    color: #212830;
    text-decoration: none;
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.listaCompartilha a svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Estilo para o botão de compartilhamento ativo */
.listaCompartilha a.active {
    background-color: #212830;
    color: #fff;
}
.bg_b{background-image:url(../images/sistema-personalizado-sob-medida-para-sua-empresa.webp);  background-size:cover; width:100%; min-height:350px; overflow:hidden; border-bottom:3px solid #929292;}
.text_bg_b {
	
  /*background-color: rgba(0, 0, 0, 0.5); /* Preto com 50% de transparência */
  padding: 20px;
  padding-top:10%;
  padding-bottom:40px;
  border-radius: 10px;
  text-align: center;
}

.text_bg_b h1 {
  text-transform: uppercase; /* Transforma o texto do h1 em maiúsculas */
  color: white; /* Cor do texto branco */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra no texto */
}

.text_bg_b .text_p {
  color: white; /* Cor do texto branco */
  font-size:1.4em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra no texto */
}
.text_apre_top{padding:10px; font-size:1.0em;}
.text_apre_top strong{font-size:1.1em; color:#333;}
.text_apre_top h3{color:#929292; font-size:1.5em;}
.img_aple{text-align:center; margin:auto; color: #929292;}
.img_aple:hover{color:#929292;}
.img_aple img{text-align:center; color:#929292; margin:auto;}
.geral_apre{ padding-top:25px; padding-bottom:25px;}
h1, h2, h3, h4{color:#929292;}
.bg_azul{background-color:#212830; color:#fff; width:100%; font-size:1.0em; min-height:300px; overflow:hidden; margin:auto; padding:20px;}
.bg_azul strong{font-size:1.1em;}
.bg_azul h3{color:#fff; font-size:1.4em; font-weight:400; padding-bottom:5px;}
.bg_azul h2{text-align:center; color:#fff; font-size:1.5em; font-weight:500; text-transform:uppercase;}
.bg_azul .setor{padding:10px; text-align:center;}
.bg_azul .setor img{margin:auto; text-align:center;}
.alinhar-link{margin:auto; width:600px; min-height:30px; line-height:30px; text-align:center; margin-bottom:25px;}
.btn-assinar-verde {
	width:100%;
  display: inline-block;
  padding: 10px 20px;
  border-radius: 20px;
  background-color: #929292;
  color: #fff;
  font-size:1.5em;
  text-decoration: none;
  text-align: center;
  margin:auto;
}
.btn-assinar-verde:hover{font-size:1.7em; font-weight:bold;}
.geral_apre table{border-bottom:2px solid #929292; border-top:2px solid #929292;}
.geral_apre table thead{background-color:#900;}
tbody thead {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
	background-color:#900;
}
@media (max-width: 768px) {
	.alinhar-link{width:100%;}
  .btn-assinar-verde {
    width: 100%;
  }
}
/* Estilos para a div que contém a imagem da logo */
.img_logo {
  text-align: center; /* Centralizar a imagem horizontalmente */
  margin-bottom: 20px; /* Espaçamento inferior entre a div e outros elementos */
}

/* Estilos para a imagem da logo dentro da div */
.img_logo img {
  max-width: 100%; /* Garantir que a imagem não ultrapasse a largura do container */
  height: auto; /* Permitir que a altura seja ajustada automaticamente */
  display: inline-block; /* Manter a imagem como elemento em linha */
  vertical-align: middle; /* Alinhar verticalmente no centro da div */
  border-radius: 10px; /* Adicionar bordas arredondadas */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Adicionar uma sombra suave */
  padding:4px;
}
footer a:hover{color:#999;}

.topo_blog {
  background-color: #999; /* Cor de fundo padrão */
  border-bottom: 1px solid #929292; /* Linha na parte inferior */
  background-color:#929292;
  /* Sombreado na parte inferior */
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Ajuste conforme necessário */
}


/* Estilos para o container */
.topo_blog .container {
 /* max-width: 1200px; /* Largura máxima */
  margin: 0 auto; /* Centralizar */
  /*padding: 0 15px; /* Espaçamento interno nas laterais */
}

/* Estilos para o título */
.titulo_topo {
	text-transform:uppercase;
	padding-top:10px;
  font-size: 1.4em; /* Tamanho da fonte */
  color: #FFF; /* Cor do texto */
 /* margin-bottom: 20px; /* Espaçamento inferior */
}

/* Estilos para o subtítulo */
.subtitulo_topo {
  font-size: 18px; /* Tamanho da fonte */
  color: #FFF; /* Cor do texto */
}

/* Estilos para tornar responsivo */
@media (max-width: 768px) {
  .titulo_topo {
    font-size: 30px; /* Reduzir tamanho da fonte para dispositivos menores */
  }
  .subtitulo_topo {
    font-size: 16px; /* Reduzir tamanho da fonte para dispositivos menores */
  }
}