body {
  font-family: sans-serif; /* Define a fonte do corpo da página como "Poppins" */
  color: #000000; /* Define a cor do texto como preta */
  background-color: #ffffff; /* Define a cor de fundo da página como branca */
}

.layout_padding {
  padding: 75px 0; /* Define o espaçamento interno (padding) superior e inferior de 75px */
}

.layout_padding2 {
  padding: 45px 0; /* Define o espaçamento interno (padding) superior e inferior de 45px */
}

.layout_padding2-top {
  padding-top: 45px; /* Define o espaçamento interno superior de 45px */
}

.layout_padding2-bottom {
  padding-bottom: 45px; /* Define o espaçamento interno inferior de 45px */
}

.layout_padding-top {
  padding-top: 75px; /* Define o espaçamento interno superior de 75px */
}

.layout_padding-bottom {
  padding-bottom: 75px; /* Define o espaçamento interno inferior de 75px */
}

.heading_container {
  display: -webkit-box; /* Compatibilidade para navegadores antigos */
  display: -ms-flexbox; /* Compatibilidade para navegadores antigos */
  display: flex; /* Usa flexbox para organizar os itens dentro do container */
  -webkit-box-orient: vertical; /* Define a orientação dos itens para a coluna (para navegadores antigos) */
  -webkit-box-direction: normal; /* Define a direção dos itens (normal) */
  -ms-flex-direction: column; /* Define a direção dos itens para coluna (para navegadores antigos) */
  flex-direction: column; /* Define a direção dos itens para coluna */
  -webkit-box-align: start; /* Alinha os itens ao começo (para navegadores antigos) */
  -ms-flex-align: start; /* Alinha os itens ao começo (para navegadores antigos) */
  align-items: flex-start; /* Alinha os itens ao início do container */
}

.heading_container h2 {
  font-weight: bold; /* Define o peso da fonte como negrito */
  text-transform: uppercase; /* Transforma o texto para letras maiúsculas */
  position: relative; /* Define o posicionamento relativo para o título */
}

.heading_container h2::before, .heading_container h2::after {
  content: ""; /* Cria um conteúdo vazio para as pseudo-classes */
  position: absolute; /* Posiciona as linhas absolutas em relação ao título */
  top: 50%; /* Posiciona as linhas no meio vertical do título */
  width: 40px; /* Define a largura das linhas */
  height: 1px; /* Define a altura das linhas (espessura) */
  background-color: #fec016; /* Define a cor das linhas como laranja */
}

.heading_container h2::before {
  left: -5px; /* Posiciona a linha à esquerda do título */
  -webkit-transform: translate(-100%, -50%); /* Translada a linha para a esquerda, para fora do título */
          transform: translate(-100%, -50%); /* Translada a linha para a esquerda, para fora do título */
}

.heading_container h2::after {
  right: -5px; /* Posiciona a linha à direita do título */
  -webkit-transform: translate(100%, -50%); /* Translada a linha para a direita, para fora do título */
          transform: translate(100%, -50%); /* Translada a linha para a direita, para fora do título */
}

/* header section */
.hero_area {
  height: 550px; /* Define a altura da área hero como 550px */
  background-size: cover; /* Faz o fundo cobrir toda a área, mantendo a proporção */
}

/* Ajustes para dispositivos com largura menor (tablet e dispositivos móveis em paisagem) */
@media (max-width: 1336px) {
  .hero_area {
    height: 80vh; /* Ajuste a altura para 80% da altura da janela de visualização em telas menores */
    background-size: cover; /* Faz o fundo cobrir toda a área */
  }
}

/* Ajustes para dispositivos com largura menor (tablet e dispositivos móveis em paisagem) */
@media (max-width: 768px) {
  .hero_area {
    height: 80vh; /* Ajuste a altura para 80% da altura da janela de visualização em telas menores */
    background-size: cover; /* Faz o fundo cobrir toda a área */
  }
}

/* Ajustes para dispositivos móveis em modo retrato */
@media (max-width: 480px) {
  .hero_area {
    height: 70vh; /* Ajuste a altura para 70% da altura da janela de visualização em telas ainda menores */
    background-size: cover; /* Faz o fundo cobrir toda a área */
  }
}

.sub_page .hero_area {
  height: auto; /* Ajusta a altura automaticamente na subpágina */
}

.sub_page .who_section.layout_padding {
  padding-top: 0; /* Remove o padding superior da seção "who" na subpágina */
}

.hero_area.sub_pages {
  height: auto; /* Ajusta a altura automaticamente para as subpáginas */
}

.header_section .container-fluid {
  padding-right: 25px; /* Define o padding à direita do container fluido */
  padding-left: 25px; /* Define o padding à esquerda do container fluido */
}

.header_section .nav_container {
  margin: 0 auto; /* Centraliza o container de navegação */
}

.custom_nav-container.navbar-expand-lg .navbar-nav .nav-link {
  margin: 8px 2px; /* Define a margem dos links de navegação */
  color: #ffffff; /* Define a cor do texto dos links como branco */
  text-align: center; /* Centraliza o texto dos links */
  position: relative; /* Define o posicionamento relativo dos links */
}

.custom_nav-container.navbar-expand-lg .navbar-nav .nav-link::before {
  content: ""; /* Cria um conteúdo vazio antes do link */
  position: absolute; /* Posiciona o círculo de destaque de forma absoluta */
  top: 50%; /* Posiciona o círculo verticalmente no meio do link */
  left: -2px; /* Posiciona o círculo à esquerda do link */
  -webkit-transform: translate(-50%, -50%); /* Ajuste do círculo (para navegadores antigos) */
          transform: translate(-50%, -50%); /* Ajuste do círculo */
  width: 7px; /* Define o tamanho do círculo */
  height: 7px; /* Define a altura do círculo */
  border-radius: 100%; /* Torna o círculo redondo */
  background-color: #ffffff; /* Define a cor do círculo como branco */
}

a,
a:hover,
a:focus {
  text-decoration: none; /* Remove o sublinhado do link */
}

a:hover,
a:focus {
  color: initial; /* Restaura a cor original do link ao passar o mouse */
}

.btn,
.btn:focus {
  outline: none !important; /* Remove o contorno da borda do botão ao focar */
  -webkit-box-shadow: none; /* Remove a sombra do botão ao focar (para navegadores antigos) */
          box-shadow: none; /* Remove a sombra do botão ao focar */
}

.user_option {
  display: -webkit-box; /* Compatibilidade para navegadores antigos */
  display: -ms-flexbox; /* Compatibilidade para navegadores antigos */
  display: flex; /* Usa flexbox para organizar os itens dentro do container */
  -webkit-box-align: center; /* Alinha os itens ao centro (para navegadores antigos) */
  -ms-flex-align: center; /* Alinha os itens ao centro (para navegadores antigos) */
  align-items: center; /* Alinha os itens ao centro */
}

.custom_nav-container .nav_search-btn {
  background-image: url(../images/search-icon.png); /* Define a imagem do botão de pesquisa */
  background-size: 16px; /* Define o tamanho da imagem do botão de pesquisa */
  background-repeat: no-repeat; /* Impede que a imagem se repita */
  background-position-y: 10px; /* Posiciona verticalmente a imagem dentro do botão */
  width: 25px; /* Define a largura do botão de pesquisa */
  height: 25px; /* Define a altura do botão de pesquisa */
  padding: 0; /* Remove o padding do botão */
  border: none; /* Remove a borda do botão */
}




/* NavBar */
.navbar {
  position: fixed; /* Faz a barra de navegação ficar fixa no topo da página */
  top: 0; /* Posiciona a barra de navegação no topo da página */
  left: 0; /* Posiciona a barra de navegação à esquerda */
  width: 100%; /* Define a largura da barra de navegação para ocupar toda a largura da tela */
  background: linear-gradient(135deg, #002244, #0056b3); /* Adiciona um fundo com gradiente */
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Suaviza a transição de cor de fundo e sombra */
  z-index: 100%; /* Garante que a barra de navegação fique sobre os outros elementos da página */
}

.navbar-brand {
  padding: 0; /* Remove o padding do título */
  margin: 0; /* Remove a margem do título */
  color: #ffffff; /* Define a cor do texto como branco */
  font-weight: bold; /* Define o peso da fonte como negrito */
  font-size: 16px; /* Define o tamanho da fonte do título */
}

.navbar-brand {
  display: -webkit-box; /* Compatibilidade para navegadores antigos */
  display: -ms-flexbox; /* Compatibilidade para navegadores antigos */
  display: flex; /* Usa flexbox para organizar os itens */
  -webkit-box-align: center; /* Alinha o conteúdo verticalmente ao centro (para navegadores antigos) */
  -ms-flex-align: center; /* Alinha o conteúdo verticalmente ao centro (para navegadores antigos) */
  align-items: center; /* Alinha o conteúdo verticalmente ao centro */
  font-family: sans-serif; /* Define a fonte para o título */
}

.navbar-brand span {
  font-size: 16px; /* Define o tamanho da fonte para o texto dentro do span */
  color: #0355cc; /* Define a cor do texto para o span */
  text-transform: uppercase; /* Transforma o texto para letras maiúsculas */
}

.custom_nav-container {
  z-index: 99999; /* Define a ordem de empilhamento do container (acima de outros elementos) */
  padding: 10px 0; /* Define o padding (espaçamento interno) acima e abaixo do container */
}

.custom_nav-container .navbar-toggler {
  outline: none; /* Remove o contorno padrão do botão de alternância */
}

.custom_nav-container .navbar-toggler .navbar-toggler-icon {
  background-image: url(../images/menu.png); /* Define a imagem do ícone do menu */
  background-size: 50px; /* Define o tamanho da imagem do ícone do menu */
}

.custom_nav-container .navbar-nav .nav-item .nav-link {
  padding: 15px 8px; /* Define o espaçamento interno (padding) dos links de navegação */
  color: #ffffff; /* Define a cor do texto dos links como branco */
  text-align: center; /* Centraliza o texto dos links */
}

.custom_nav-container .navbar-nav .nav-item:hover .nav-link, .custom_nav-container .navbar-nav .nav-item.active .nav-link {
  color: #0355cc; /* Muda a cor do link para azul ao passar o mouse ou quando ativo */
}

.custom_nav-container .form-inline .nav_search-btn {
  width: 30px; /* Define a largura do botão de pesquisa */
  height: 30px; /* Define a altura do botão de pesquisa */
  padding: 0; /* Remove o padding do botão */
  border: none; /* Remove a borda do botão */
  color: #ffffff; /* Define a cor do texto do botão como branco */
}

.custom_nav-container .form-inline .nav_search-btn:hover {
  color: #0355cc; /* Muda a cor do texto para azul ao passar o mouse sobre o botão */
}

.custom_nav-container .navbar-toggler {
  outline: none; /* Remove o contorno do botão de alternância */
}

.custom_nav-container .navbar-toggler {
  padding: 0; /* Remove o padding do botão */
  width: 30px; /* Define a largura do botão de alternância */
  height: 35px; /* Define a altura do botão de alternância */
  -webkit-transition: all .3s; /* Suaviza a transição da transformação */
  transition: all .3s; /* Suaviza a transição da transformação */
}

.custom_nav-container .navbar-toggler span::after {
  top: 10px; /* Posiciona a linha do ícone de alternância */
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] {
  -webkit-transform: rotate(360deg); /* Roda o botão de alternância em 360 graus ao expandir */
  transform: rotate(360deg); /* Roda o botão de alternância em 360 graus ao expandir */
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] span {
  -webkit-transform: rotate(45deg); /* Roda o ícone de alternância em 45 graus ao expandir */
  transform: rotate(45deg); /* Roda o ícone de alternância em 45 graus ao expandir */
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] span::before, .custom_nav-container .navbar-toggler[aria-expanded="true"] span::after {
  -webkit-transform: rotate(90deg); /* Roda as linhas do ícone de alternância em 90 graus ao expandir */
  transform: rotate(90deg); /* Roda as linhas do ícone de alternância em 90 graus ao expandir */
  top: 0; /* Define a posição das linhas após a rotação */
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-1 {
  -webkit-transform: rotate(45deg); /* Roda a primeira linha em 45 graus ao expandir */
  transform: rotate(45deg); /* Roda a primeira linha em 45 graus ao expandir */
  margin: 0; /* Remove a margem */
  margin-bottom: -4px; /* Ajusta a posição vertical da linha */
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-2 {
  display: none; /* Oculta a segunda linha do ícone ao expandir */
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-3 {
  -webkit-transform: rotate(-45deg); /* Roda a terceira linha em -45 graus ao expandir */
  transform: rotate(-45deg); /* Roda a terceira linha em -45 graus ao expandir */
  margin: 0; /* Remove a margem */
  margin-top: -4px; /* Ajusta a posição vertical da linha */
}

.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-1,
.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-2,
.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-3 {
  -webkit-transform: none; /* Remove a rotação das linhas do ícone ao fechar */
  transform: none; /* Remove a rotação das linhas do ícone ao fechar */
}

.quote_btn-container {
  display: -webkit-box; /* Compatibilidade para navegadores antigos */
  display: -ms-flexbox; /* Compatibilidade para navegadores antigos */
  display: flex; /* Usa flexbox para organizar os itens */
  -webkit-box-align: center; /* Alinha o conteúdo verticalmente ao centro (para navegadores antigos) */
  -ms-flex-align: center; /* Alinha o conteúdo verticalmente ao centro (para navegadores antigos) */
  align-items: center; /* Alinha o conteúdo verticalmente ao centro */
}

.quote_btn-container a {
  color: #ffffff; /* Define a cor do texto do link como branco */
  margin-right: 20px; /* Define a margem à direita do link */
  text-transform: uppercase; /* Transforma o texto para letras maiúsculas */
}

.quote_btn-container a span {
  margin-left: 5px; /* Define a margem à esquerda para o texto dentro do span */
}

.quote_btn-container a:hover {
  color: #ff8a1d; /* Muda a cor do texto para laranja ao passar o mouse */
}

/* end header section */





/* Slider Section */
.slider_section {
  height: 90%; /* Define a altura da seção do slider */
  display: -webkit-box; /* Compatibilidade para navegadores antigos */
  display: -ms-flexbox; /* Compatibilidade para navegadores antigos */
  display: flex; /* Usando flexbox para alinhar o conteúdo */
  -webkit-box-align: center; /* Alinha verticalmente no centro (para navegadores antigos) */
  -ms-flex-align: center; /* Alinha verticalmente no centro (para navegadores antigos) */
  align-items: center; /* Alinha os itens do flexbox verticalmente no centro */
  color: #ffffff; /* Define a cor do texto como branco */
}

.slider_section .detail-box {
  text-align: center; /* Centraliza o texto dentro da caixa de detalhes */
  margin-bottom: 110px; /* Define a margem inferior */
}

.slider_section .detail-box h1 {
  font-size: 4rem; /* Define o tamanho da fonte para o título */
  text-transform: uppercase; /* Transforma o texto do título para letras maiúsculas */
}

.slider_section .detail-box h2 {
  text-transform: uppercase; /* Transforma o texto do subtítulo para letras maiúsculas */
}

.slider_section .detail-box p {
  margin-top: 25px; /* Define a margem superior para o parágrafo */
}

.slider_section .detail-box a {
  display: inline-block; /* Exibe o link como bloco em linha */
  padding: 10px 30px; /* Define o preenchimento (padding) dentro do link */
  background-color: #ffffff; /* Define o fundo branco para o link */
  color: #000000; /* Define a cor do texto do link como preto */
  border-radius: 35px 25px 0 25px; /* Bordas arredondadas no link */
  margin-top: 25px; /* Define a margem superior do link */
}

.slider_section .detail-box a:hover {
  background-color: transparent; /* Faz o fundo do link ficar transparente quando o mouse passa por cima */
  color: #ffffff; /* Muda a cor do texto do link para branco ao passar o mouse */
}

.slider_section #carouselExampleIndicators {
  bottom: 0; /* Alinha o indicador de navegação ao fundo */
}

.slider_section #carouselExampleIndicators li {
  width: 15px; /* Define a largura dos indicadores */
  height: 15px; /* Define a altura dos indicadores */
  background-color: transparent; /* Define a cor de fundo transparente para os indicadores */
  border: 3px solid #ffffff; /* Borda branca para os indicadores */
  border-radius: 100%; /* Torna os indicadores circulares */
  opacity: 1; /* Define a opacidade para 100% */
}



/* Do Section */
.do_section .heading_container {
  -webkit-box-align: center; /* Alinha verticalmente no centro (para navegadores antigos) */
  -ms-flex-align: center; /* Alinha verticalmente no centro (para navegadores antigos) */
  align-items: center; /* Alinha os itens do flexbox verticalmente no centro */
  text-align: center; /* Centraliza o texto na seção de cabeçalho */
}

.do_section .do_container {
  display: -webkit-box; /* Compatibilidade para navegadores antigos */
  display: -ms-flexbox; /* Compatibilidade para navegadores antigos */
  display: flex; /* Usando flexbox para alinhar os itens */
  -ms-flex-wrap: wrap; /* Permite que os itens se ajustem em várias linhas, se necessário */
  flex-wrap: wrap; /* Permite que os itens se ajustem em várias linhas */
  -webkit-box-pack: center; /* Alinha os itens horizontalmente no centro (para navegadores antigos) */
  -ms-flex-pack: center; /* Alinha os itens horizontalmente no centro (para navegadores antigos) */
  justify-content: center; /* Alinha os itens horizontalmente no centro */
  padding-top: 10px; /* Define a margem superior */
}

.do_section .do_container .box {
  text-align: center; /* Centraliza o conteúdo da caixa */
  position: relative; /* Define a posição relativa para a caixa */
  z-index: 5; /* Coloca a caixa acima de outros elementos */
  margin: 35px 25px 0 25px; /* Define as margens ao redor da caixa */
}

.do_section .do_container .box .img-box {
  width: 100px; /* Define a largura da caixa de imagem */
  height: 100px; /* Define a altura da caixa de imagem */
  display: -webkit-box; /* Compatibilidade para navegadores antigos */
  display: -ms-flexbox; /* Compatibilidade para navegadores antigos */
  display: flex; /* Usando flexbox para alinhar o conteúdo */
  -webkit-box-pack: center; /* Alinha a imagem no centro (para navegadores antigos) */
  -ms-flex-pack: center; /* Alinha a imagem no centro (para navegadores antigos) */
  justify-content: center; /* Alinha a imagem no centro horizontalmente */
  -webkit-box-align: center; /* Alinha a imagem no centro verticalmente (para navegadores antigos) */
  -ms-flex-align: center; /* Alinha a imagem no centro verticalmente (para navegadores antigos) */
  align-items: center; /* Alinha a imagem no centro verticalmente */
  background-color: #353434; /* Define o fundo da caixa de imagem */
  border-radius: 100%; /* Torna a caixa de imagem circular */
}

.do_section .do_container .box .img-box img {
  width: 35px; /* Define o tamanho da imagem dentro da caixa */
}

.do_section .do_container .box .detail-box {
  margin-top: 35px; /* Define a margem superior para a caixa de detalhes */
}

.do_section .do_container .box:hover .img-box {
  background-color: #fec016; /* Muda a cor de fundo da imagem ao passar o mouse */
}

.do_section .do_container .arrow_bg::before {
  content: ""; /* Adiciona conteúdo vazio antes do elemento */
  position: absolute; /* Define a posição absoluta */
  top: -23px; /* Define a distância do topo */
  left: -17px; /* Define a distância à esquerda */
  width: 262%; /* Define a largura da seta */
  height: 90%; /* Define a altura da seta */
  z-index: 3; /* Coloca a seta acima dos outros elementos */
  background-size: cover; /* Faz o fundo cobrir toda a área */
}

.do_section .do_container .arrow-start::before {
  background-image: url(../images/arrow-start.png); /* Define a imagem da seta inicial */
}

.do_section .do_container .arrow-middle::before {
  background-image: url(../images/arrow-middle.png); /* Define a imagem da seta do meio */
}

.do_section .do_container .arrow-end::before {
  background-image: url(../images/arrow-end.png); /* Define a imagem da seta final */
}



/* Who Section */
.who_section .row {
  -webkit-box-align: center; /* Alinha verticalmente no centro (para navegadores antigos) */
  -ms-flex-align: center; /* Alinha verticalmente no centro (para navegadores antigos) */
  align-items: center; /* Alinha os itens no centro */
}

.who_section .img-box img {
  width: 300px /* Faz a imagem ocupar 100% da largura da caixa */
}

.who_section .detail-box {
  margin-left: 35px; /* Define a margem à esquerda para o texto */
}

.who_section .detail-box p {
  margin-top: 35px; /* Define a margem superior para o parágrafo */
}

.who_section .detail-box a {
  display: inline-block; /* Exibe o link como bloco em linha */
  padding: 8px 25px; /* Define o preenchimento do link */
  background-color: #353434; /* Fundo escuro para o link */
  border: 1px solid #353434; /* Borda escura para o link */
  color: #ffffff; /* Cor do texto do link */
  border-radius: 20px 20px 0 20px; /* Bordas arredondadas para o link */
  margin-top: 35px; /* Define a margem superior do link */
}

.who_section .detail-box a:hover {
  background-color: transparent; /* Torna o fundo do link transparente ao passar o mouse */
  color: #353434; /* Muda a cor do texto para escuro ao passar o mouse */
}



/* Work Section */
.work_section .work_container {
  display: -webkit-box; /* Compatibilidade para navegadores antigos */
  display: -ms-flexbox; /* Compatibilidade para navegadores antigos */
  display: flex; /* Usando flexbox para alinhar os itens */
  -ms-flex-wrap: wrap; /* Permite que os itens se ajustem em várias linhas */
  flex-wrap: wrap; /* Permite que os itens se ajustem em várias linhas */
  margin: 0 -1%; /* Define a margem negativa para os itens */
}

.work_section .work_container .box {
  min-width: 300px; /* Define a largura mínima da caixa */
  display: -webkit-box; /* Compatibilidade para navegadores antigos */
  display: -ms-flexbox; /* Compatibilidade para navegadores antigos */
  display: flex; /* Usando flexbox para alinhar os itens */
  -webkit-box-align: stretch; /* Estica os itens verticalmente (para navegadores antigos) */
  -ms-flex-align: stretch; /* Estica os itens verticalmente (para navegadores antigos) */
  align-items: stretch; /* Estica os itens verticalmente */
}

.work_section .work_container .box img {
  width: 100%; /* Faz a imagem ocupar 100% da largura da caixa */
}

.work_section .work_container .box.b-2, .work_section .work_container .box.b-3 {
  width: 50.0%; /* Define a largura para as caixas de tipo b-2 e b-3 */
}

.work_section .work_container .box.b-1, .work_section .work_container .box.b-4 {
  width: 50.0%; /* Define a largura para as caixas de tipo b-1 e b-4 */
}




/* PARCEIROS */
.logo_parceiros {
  position: relative;
  width: 150px;
  height: 150px;
  object-fit: contain;
  display: inline-block;
  margin: 10px;
  text-align: center;
  border-radius: 20%; /* Bordas arredondadas */
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.30); /* Sombra inicial */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave */
}

.logo_parceiros img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 10%; /* Bordas arredondadas */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave */
}

.logo_parceiros a:hover img {
  transform: scale(1.7); /* Aumenta a imagem em 70% */
  box-shadow: 8px 8px 25px rgba(0, 0, 0, 0.70); /* Aumenta a sombra */
  z-index: 2; /* Coloca a imagem no fundo */
}

.logo_parceiros .name {
  position: absolute;
  bottom: 1; /* Coloca o nome fixo na parte inferior */
  left: 0;
  width: 100%; /* Preenche toda a largura da imagem */
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  background-color: rgba(2, 250, 35, 0.70); /* Fundo verde claro e com baixa opacidade */
  padding: 10px;
  text-align: center;
  opacity: 0; /* Inicialmente invisível */
  transition: opacity 0.3s ease, bottom 0.3s ease;
  border-radius: 10% 10% 10% 10%; /* Bordas arredondadas apenas na parte inferior */
  z-index: 1; /* Coloca o nome na frente da imagem */
}

.logo_parceiros a:hover .name {
  opacity: 1; /* Torna o nome visível */
  bottom: 2; /* Fixa o nome na parte inferior da imagem */
}

/* Espaço extra para 'Guinchos Fuça Fuça' e 'Loggi' */
.logo_parceiros.guinchos, .logo_parceiros.loggi {
  margin-bottom: 50px; /* Adiciona espaço extra */
}

/* Centralização das imagens em telas menores */
@media (max-width: 768px) { /* Para tablets e celulares */
  .logo_parceiros {
    display: block; /* Alinhamento vertical */
    margin: 10px auto; /* Centraliza horizontalmente */
    text-align: center;
  }
  img {
    display: block; /* Tratamento de imagem como bloco */
    margin: 0 auto; /* Centraliza a imagem */
  }
}




/* LOGO MENU */
.logo_menu {
  width: 271px;
  height: 60px;
  object-fit: contain;
  display: inline-block;
  margin: 5px; /* Espaço ao redor de cada item */
  text-align: center;
  border-radius: 10%; /* Bordas arredondadas */
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2); /* Sombra inicial */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave */
}

.logo_menu img {
  border-radius: 5px; /* Bordas arredondadas */
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2); /* Sombra inicial */
}

.logo_menu img:hover {
  transform: scale(1.7); /* Aumenta a imagem em 70% */
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5); /* Aumenta a sombra */
  border-radius: 20%; /* Mantém o arredondamento no zoom */
}

img {
  border-radius: 5px; /* Bordas arredondadas (opcional) */
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2); /* Sombra (opcional) */
}




/* SEÇÃO CLIENTES */
.client_section {
  padding-bottom: 150px; /* Adiciona um padding inferior de 150px */
}

.client_section .heading_container {
  -webkit-box-align: center; /* Alinha os itens ao centro para navegadores Webkit (ex: Safari) */
  -ms-flex-align: center; /* Alinha os itens ao centro para navegadores Microsoft */
  align-items: center; /* Alinha os itens ao centro */
  margin-bottom: 45px; /* Adiciona uma margem inferior de 45px */
}

/* CAIXAS DE CLIENTES */
.client_section .box {
  padding: 20px; /* Define o padding de 20px ao redor da caixa */
  display: -webkit-box; /* Flexbox para navegadores Webkit */
  display: -ms-flexbox; /* Flexbox para navegadores Microsoft */
  display: flex; /* Define o layout flex */
  -webkit-box-orient: vertical; /* Define a orientação do flex como vertical para navegadores Webkit */
  -webkit-box-direction: normal; /* Define a direção do flex como normal para Webkit */
  -ms-flex-direction: column; /* Define a direção do flex como coluna para Microsoft */
  flex-direction: column; /* Define a direção do flex como coluna */
  -webkit-box-align: center; /* Alinha os itens ao centro para Webkit */
  -ms-flex-align: center; /* Alinha os itens ao centro para Microsoft */
  align-items: center; /* Alinha os itens ao centro */
  text-align: center; /* Centraliza o texto dentro da caixa */
  margin: 20px; /* Adiciona margem de 20px ao redor da caixa */
}

/* IMAGEM DO CLIENTE */
.client_section .box .img-box {
  width: 60px; /* Define a largura da caixa da imagem como 60px */
}

.client_section .box .img-box img {
  width: 100%; /* A imagem ocupa 100% da largura disponível dentro da caixa */
}

/* DETALHES DA CAIXA DO CLIENTE */
.client_section .box .detail-box {
  margin-top: 35px; /* Adiciona uma margem superior de 35px */
  display: -webkit-box; /* Flexbox para Webkit */
  display: -ms-flexbox; /* Flexbox para Microsoft */
  display: flex; /* Layout flex */
  -webkit-box-orient: vertical; /* Orientação vertical para Webkit */
  -webkit-box-direction: normal; /* Direção normal do flex para Webkit */
  -ms-flex-direction: column; /* Direção de coluna para Microsoft */
  flex-direction: column; /* Direção de coluna para Flexbox */
  -webkit-box-align: center; /* Alinha os itens ao centro para Webkit */
  -ms-flex-align: center; /* Alinha os itens ao centro para Microsoft */
  align-items: center; /* Alinha os itens ao centro */
}

/* TITULO DO CLIENTE */
.client_section .box .detail-box h5 {
  text-transform: uppercase; /* Transforma o texto para letras maiúsculas */
  font-weight: bold; /* Define o texto como negrito */
  font-size: 18px; /* Define o tamanho da fonte como 18px */
}

/* SUBTITULO DO CLIENTE */
.client_section .box .detail-box h5 span {
  text-transform: none; /* Remove a transformação para maiúsculas */
  font-size: 16px; /* Define o tamanho da fonte como 16px */
  font-weight: normal; /* Define o peso da fonte como normal */
  color: #fec016; /* Define a cor como amarelo */
}

/* IMAGEM DE SEPARAÇÃO NO CLIENTE */
.client_section .box .detail-box img {
  width: 15px; /* Define a largura da imagem como 15px */
  margin: 35px 0; /* Adiciona uma margem de 35px acima e abaixo da imagem */
}




/* WRAPPER DO CARROUSEL */
.client_section .carousel-wrap {
  margin: 0 auto; /* Centraliza a seção */
  padding: 0; /* Remove o padding */
  position: relative; /* Define a posição como relativa */
}

/* CONTROLES DO CARROUSEL */
.client_section .owl-nav > div {
  margin-top: -26px; /* Margem superior de -26px para reposicionar */
  position: absolute; /* Define a posição como absoluta */
  top: 50%; /* Posiciona no meio da altura do contêiner */
  color: #cdcbcd; /* Cor dos controles */
}

/* BOTÕES DE NAVEGAÇÃO DO CARROUSEL */
.client_section .owl-carousel .owl-nav .owl-prev,
.client_section .owl-carousel .owl-nav .owl-next {
  width: 50px; /* Define a largura como 50px */
  height: 50px; /* Define a altura como 50px */
  background-size: 16px; /* Tamanho do ícone */
  background-position: center; /* Centraliza o ícone */
  border-radius: 100%; /* Faz os botões redondos */
  background-repeat: no-repeat; /* Impede que o ícone se repita */
  position: absolute; /* Define a posição como absoluta */
  bottom: -75px; /* Coloca os botões 75px abaixo do contêiner */
  outline: none; /* Remove o contorno */
}

/* ESTILO AO PASSAR O MOUSE SOBRE OS BOTÕES DE NAVEGAÇÃO */
.client_section .owl-carousel .owl-nav .owl-prev:hover,
.client_section .owl-carousel .owl-nav .owl-next:hover {
  background-color: rgba(0, 0, 0, 0.8); /* Muda o fundo para um tom escuro */
}

/* BOTÃO DE NAVEGAÇÃO ANTERIOR */
.client_section .owl-carousel .owl-nav .owl-prev {
  background-image: url(../images/prev.png); /* Define a imagem para o botão anterior */
  left: 50%; /* Posiciona o botão na metade da largura */
  -webkit-transform: translateX(-102%); /* Move o botão para a esquerda */
  transform: translateX(-102%); /* Move o botão para a esquerda */
}

/* BOTÃO DE NAVEGAÇÃO PRÓXIMO */
.client_section .owl-carousel .owl-nav .owl-next {
  right: 50%; /* Posiciona o botão na metade da largura */
  background-image: url(../images/next.png); /* Define a imagem para o botão próximo */
  -webkit-transform: translateX(102%); /* Move o botão para a direita */
  transform: translateX(102%); /* Move o botão para a direita */
}

/* CONFIGURAÇÃO PARA DOTS DO CARROUSEL */
.client_section .owl-carousel .owl-dots.disabled,
.client_section .owl-carousel .owl-nav.disabled {
  display: block; /* Exibe os pontos de navegação */
}

/* CAIXA DO CLIENTE EM FOCUS */
.client_section .owl-item.active.center .box {
  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2); /* Sombra suave ao redor da caixa */
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2); /* Sombra suave ao redor da caixa */
}

/* SEÇÃO DE ALVO */
.target_section {
  background-image: url(../images/target-bg.jpg); /* Define a imagem de fundo */
  background-size: cover; /* Faz a imagem cobrir toda a seção */
  color: #ffffff; /* Cor do texto branca */
  text-align: center; /* Centraliza o texto */
}

/* DETALHES DA SEÇÃO DE ALVO */
.target_section .detail-box {
  margin: 20px 0; /* Adiciona uma margem de 20px acima e abaixo */
}

/* TÍTULO DA SEÇÃO DE ALVO */
.target_section h2 {
  font-weight: bold; /* Define o peso do texto como negrito */
}

/* SUBTÍTULO DA SEÇÃO DE ALVO */
.target_section h5 {
  font-size: 18px; /* Define o tamanho da fonte como 18px */
  font-weight: 500; /* Define o peso da fonte como 500 */
}






/* SEÇÃO DE CONTATO */
.contact_section .heading_container {
  -webkit-box-align: center; /* Alinha os itens ao centro em navegadores Webkit (ex: Safari) */
  -ms-flex-align: center; /* Alinha os itens ao centro em navegadores Microsoft (ex: Internet Explorer) */
  align-items: center; /* Alinha os itens ao centro */
}

/* FORMULÁRIO DE CONTATO */
.contact_section .contact-form {
  padding: 25px; /* Define o padding interno do formulário como 25px */
  border-radius: 20px; /* Aplica bordas arredondadas ao formulário de 20px */
}


/* INPUTS DO FORMULÁRIO */
.contact_section .contact-form input {
  border: none; /* Remove a borda padrão */
  outline: none; /* Remove o contorno quando o campo de input é selecionado */
  background-color: transparent; /* Define o fundo do input como transparente */
  width: 100%; /* Faz o campo de input ocupar toda a largura disponível */
  margin: 15px 0; /* Adiciona uma margem de 15px acima e abaixo */
  padding: 10px 20px; /* Define o padding do input como 10px acima e abaixo, e 20px nas laterais */
  border: 1px solid rgba(0, 0, 0, 0.4); /* Aplica uma borda de 1px com cor semi-transparente */
  border-radius: 30px; /* Aplica bordas arredondadas ao input */
}


/* INPUT DE MENSAGEM */
.contact_section .contact-form input.input_message {
  height: 175px; /* Define a altura do campo de mensagem para 175px */
}


/* PLACEHOLDER - TEXTOS DENTRO DOS CAMPOS */
.contact_section .contact-form input::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.4); /* Define a cor do placeholder nos navegadores Webkit */
}

.contact_section .contact-form input:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.4); /* Define a cor do placeholder nos navegadores Microsoft */
}

.contact_section .contact-form input::-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.4); /* Define a cor do placeholder nos navegadores Microsoft */
}

.contact_section .contact-form input::placeholder {
  color: rgba(0, 0, 0, 0.4); /* Define a cor do placeholder nos navegadores padrões */
}




/* BOTÃO DE ENVIO DO FORMULÁRIO */
.contact_section .contact-form button {
  border: none; /* Remove a borda padrão do botão */
  outline: none; /* Remove o contorno do botão */
  padding: 12px 50px; /* Define o padding do botão como 12px acima e abaixo, e 50px nas laterais */
  text-transform: uppercase; /* Transforma o texto do botão em letras maiúsculas */
  margin-top: 25px; /* Define uma margem superior de 25px */
  background-color: #fec913; /* Define a cor de fundo do botão como amarelo */
  color: #fff; /* Define a cor do texto dentro do botão como branco */
  border-radius: 30px; /* Aplica bordas arredondadas ao botão */
}



/* MAPA DE LOCALIZAÇÃO */
.contact_section .map_img-box {
  width: 80%; /* Define a largura da caixa do mapa como 80% */
  margin: 25px auto 0 auto; /* Adiciona uma margem de 25px acima e centraliza horizontalmente */
}

.contact_section .map_img-box img {
  width: 100%; /* Faz a imagem do mapa ocupar toda a largura disponível */
}





/* INFORMAÇÕES GERAIS DA PÁGINA */
.info_section {
  background: linear-gradient(135deg, #0056b3, #002244); /* Cria um fundo em gradiente diagonal de azul claro para azul escuro */
  background-color: #232323; /* Define a cor de fundo como cinza escuro, usada caso o gradiente não seja suportado */
  color: #ffffff; /* Define a cor do texto como branco */
  padding: 90px 0 45px 0; /* Define o preenchimento (padding) superior de 90px, inferior de 45px e sem padding lateral */
}

.info_section h5 {
  margin-bottom: 18px; /* Define a margem inferior do título h5 como 25px */
  font-size: 16px; /* Define o tamanho da fonte do título como 24px */
}




/* INSTA CONTAINER */
.info_section .info_insta .insta_container > div {
  display: -webkit-box; /* Usado para o layout flexbox nos navegadores Webkit (ex: Safari) */
  display: -ms-flexbox; /* Usado para o layout flexbox nos navegadores Microsoft (ex: Internet Explorer) */
  display: flex; /* Define o layout flexbox padrão */
}

.info_section .info_insta .insta_container img {
  width: 100%; /* Faz com que as imagens dentro do container se estiquem para cobrir a largura disponível */
}

.info_section .info_insta .insta_container .insta-box {
  margin: 5px; /* Adiciona margem de 5px entre os itens */
  display: -webkit-box; /* Flexbox para os navegadores Webkit */
  display: -ms-flexbox; /* Flexbox para os navegadores Microsoft */
  display: flex; /* Flexbox padrão */
  -webkit-box-align: stretch; /* Alinha os itens do flexbox ao longo do eixo transversal (Webkit) */
  -ms-flex-align: stretch; /* Alinha os itens do flexbox ao longo do eixo transversal (Microsoft) */
  align-items: stretch; /* Alinha os itens ao longo do eixo transversal */
  background-color: #ffffff; /* Define o fundo do box como branco */
  padding: 10px 20px; /* Define o padding dentro do box como 10px acima e abaixo e 20px nas laterais */
}




/* CONTATO */
.info_section .info_contact .img-box {
  width: 35px; /* Define a largura da caixa de imagem como 35px */
  display: -webkit-box; /* Flexbox para os navegadores Webkit */
  display: -ms-flexbox; /* Flexbox para os navegadores Microsoft */
  display: flex; /* Flexbox padrão */
  -webkit-box-pack: center; /* Centraliza o conteúdo dentro da caixa no eixo principal (Webkit) */
  -ms-flex-pack: center; /* Centraliza o conteúdo dentro da caixa no eixo principal (Microsoft) */
  justify-content: center; /* Centraliza o conteúdo dentro da caixa no eixo principal */
}

.info_section .info_contact p {
  margin: 0; /* Remove a margem ao redor dos parágrafos dentro da seção de contato */
}

.info_section .info_contact > div {
  display: -webkit-box; /* Flexbox para os navegadores Webkit */
  display: -ms-flexbox; /* Flexbox para os navegadores Microsoft */
  display: flex; /* Flexbox padrão */
  -webkit-box-align: center; /* Alinha os itens verticalmente ao centro (Webkit) */
  -ms-flex-align: center; /* Alinha os itens verticalmente ao centro (Microsoft) */
  align-items: center; /* Alinha os itens verticalmente ao centro */
  margin: 20px 0; /* Define uma margem de 20px acima e abaixo */
}

.info_section .info_contact > div img {
  height: auto; /* Define a altura das imagens para serem proporcionais */
  margin-right: 12px; /* Adiciona uma margem de 12px à direita das imagens */
}




/* FORMULÁRIO */
.info_section .info_form form input {
  outline: none; /* Remove o contorno padrão ao focar no campo de input */
  width: 100%; /* Faz o input ocupar toda a largura disponível */
  padding: 7px 10px; /* Define o padding do input como 7px acima e abaixo e 10px nas laterais */
}

.info_section .info_form form button {
  display: inline-block; /* Faz o botão ser exibido como um bloco em linha */
  padding: 8px 30px; /* Define o padding do botão como 8px acima e abaixo e 30px nas laterais */
  background-color: #fbca47; /* Define a cor de fundo do botão como amarelo */
  border: 1px solid #fbca47; /* Adiciona uma borda de 1px de cor amarela ao redor do botão */
  color: #ffffff; /* Define a cor do texto dentro do botão como branco */
  margin-top: 15px; /* Adiciona uma margem superior de 15px */
  text-transform: uppercase; /* Transforma o texto para letras maiúsculas */
  font-size: 15px; /* Define o tamanho da fonte do botão como 15px */
}

.info_section .info_form form button:hover {
  background-color: transparent; /* Torna o fundo do botão transparente quando o cursor passar por cima */
  color: #fbca47; /* Muda a cor do texto para amarelo quando o cursor passar por cima */
  align-items: center; /* Centraliza as imagens verticalmente no botão */
  justify-content: center; /* Centraliza as imagens horizontalmente no botão */
}




/* SOCIAL BOX */
.info_section .info_form .social_box {
  margin-top: 20px; /* Define uma margem superior de 20px */
  width: 100%; /* Faz a social box ocupar toda a largura disponível */
  display: -webkit-box; /* Flexbox para os navegadores Webkit */
  display: -ms-flexbox; /* Flexbox para os navegadores Microsoft */
  display: flex; /* Flexbox padrão */
  align-items: center; /* Centraliza as imagens verticalmente */
  justify-content: center; /* Centraliza as imagens horizontalmente */
}

.info_section .info_form .social_box a {
  margin-right: 25px; /* Adiciona uma margem à direita de 25px entre os links */
  align-items: center; /* Centraliza as imagens verticalmente */
  justify-content: center; /* Centraliza as imagens horizontalmente */
}





/* footer section */
.footer_section {
  background-color: #232323; /* Define o fundo do rodapé como um cinza escuro. */
  font-weight: 500; /* Define a espessura da fonte como 500 (semibold). */
  display: -webkit-box; /* Usa o modelo de layout flexbox específico para o navegador Webkit (Safari). */
  display: -ms-flexbox; /* Usa o modelo de layout flexbox específico para o navegador Microsoft (Internet Explorer). */
  display: flex; /* Define o modelo de layout flexbox para o rodapé, alinhando seus itens em linha. */
  -webkit-box-pack: center; /* Centraliza os itens no eixo horizontal no modelo flexbox para Webkit. */
  -ms-flex-pack: center; /* Centraliza os itens no eixo horizontal no modelo flexbox para Microsoft. */
  justify-content: center; /* Centraliza os itens horizontalmente no layout flexbox. */
}

.footer_section p {
  padding: 20px 65px; /* Define o espaçamento interno superior e inferior de 20px, e à esquerda e direita de 65px. */
  color: #fbfcfd; /* Define a cor do texto do parágrafo como um tom muito claro de branco. */
  margin: 0 auto; /* Define a margem superior e inferior como 0, e a margem lateral como automática para centralizar. */
  text-align: center; /* Alinha o texto no centro do parágrafo. */
  border-top: 1px solid #ffffff; /* Adiciona uma borda superior branca de 1px ao parágrafo. */
}

.footer_section a {
  color: #fbfcfd; /* Define a cor dos links dentro do rodapé como a mesma cor do texto do parágrafo (quase branco). */
}





/* WHATS APP LINK */
.whatsapp-link {
  display: inline-block; /* Exibe o link como um bloco em linha, permitindo a aplicação de margens e padding. */
  margin: 20px 0; /* Adiciona margem superior e inferior de 20px. */
  padding: 12px 25px; /* Adiciona espaçamento interno de 12px nas laterais e 25px na horizontal. */
  background-color: #25D366; /* Define a cor de fundo do link como verde do WhatsApp. */
  color: #fff; /* Define a cor do texto como branca. */
  text-decoration: none; /* Remove qualquer sublinhado do link. */
  border-radius: 5px; /* Arredonda as bordas do botão com raio de 5px. */
  font-size: 18px; /* Define o tamanho da fonte como 18px. */
  transition: background-color 0.3s ease; /* Aplica uma transição suave para a cor de fundo. */
}

.whatsapp-link:hover {
  background-color: #1DA851; /* Altera a cor de fundo para um verde mais escuro quando o mouse passa sobre o link. */
}

/* Estilo do rodapé */
footer {
  padding: 10px; /* Adiciona 15px de espaçamento interno ao rodapé. */
  background-color: #333; /* Define a cor de fundo do rodapé como cinza escuro. */
  color: #fff; /* Define a cor do texto do rodapé como branca. */
  width: 100%; /* O rodapé ocupa toda a largura da tela. */
  text-align: center; /* Centraliza o conteúdo do rodapé. */
  position: relative; /* Define a posição do rodapé como relativa, permitindo ajustes se necessário. */
  bottom: 0; /* Alinha o rodapé na parte inferior da página. */
  margin-top: 15px; /* Adiciona uma margem superior de 20px. */
}






/* Menu fixo com fundo transparente */
.navbar {
  position: fixed; /* O menu será fixado no topo da página. */
  top: 0; /* Posiciona o menu no topo da página. */
  left: 0; /* Posiciona o menu à esquerda. */
  width: 100%; /* O menu ocupará toda a largura da tela. */
  background: linear-gradient(135deg, #002244, #0056b3); /* Fundo com um gradiente de cor. */
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Transição suave nas mudanças de cor e sombra. */
  z-index: 1000; /* Garante que o menu fique acima de outros elementos na página. */
}

.navbar.scrolled {
  background-color: rgba(0, 0, 0, 0.8); /* Fundo escuro quando o menu rola para baixo. */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Sombra suave ao rolar a página. */
}

/* Efeito ao passar o mouse nos itens do menu */
.navbar-nav .nav-item .nav-link {
  color: #fff; /* Cor do texto do item do menu. */
  padding: 10px 15px; /* Adiciona espaçamento interno ao item do menu. */
  transition: background-color 0.3s, color 0.3s; /* Transição suave na cor de fundo e texto. */
}

.navbar-nav .nav-item .nav-link:hover {
  background: linear-gradient(135deg, #002244, #0056b3); /* Altera o fundo para um gradiente ao passar o mouse. */
  color: #fff; /* Mantém a cor do texto branca ao passar o mouse. */
  border-radius: 5px; /* Adiciona bordas arredondadas ao item de menu ao passar o mouse. */
}

/* Espaçamento e alinhamento do menu */
.navbar-nav .nav-item {
  margin: 0 10px; /* Adiciona espaço entre os itens do menu. */
}

.nav-item.active .nav-link {
  font-weight: bold; /* Deixa o texto em negrito para o item ativo. */
  color: #007bff; /* Altera a cor do item ativo. */
}

/* Inicialmente, o menu estará oculto em dispositivos móveis */
.navbar-collapse {
  display: none; /* Oculta o menu em dispositivos móveis por padrão. */
  font-size: h4; /* Ajusta o tamanho da fonte para o título no menu. */
}

/* Quando a classe 'show' for adicionada, o menu será exibido */
.navbar-collapse.show {
  display: block; /* Exibe o menu quando a classe 'show' é adicionada. */
}

/* Customização do botão de hambúrguer */
.navbar-toggler {
  border: none; /* Remove a borda do botão de hambúrguer. */
  background: transparent; /* Torna o fundo do botão de hambúrguer transparente. */
}

/* Ajustes adicionais para garantir uma boa exibição no desktop */
@media (min-width: 992px) { /* Aplica estilos quando a largura da tela for maior que 992px (telas de desktop). */
  .navbar-collapse {
    font-size: h4; /* Ajuste do tamanho da fonte para dispositivos maiores (desktop). */
    display: flex !important; /* Garante que o menu será exibido como um flex container em desktops. */
  }
}




/* Transição suave ao rolar a página */
body {
  margin-top: 80px; /* Espaçamento para não ficar escondido atrás do menu */
  transition: padding-top 0.3s ease;
}


.info_section {
    display: flex; /* Torna o container flexível */
    justify-content: center; /* Centraliza os itens horizontalmente */
    padding: 10px; /* Espaçamento interno */
    background-color: #353434; /* Cor de fundo para distinguir a seção (opcional) */
}

.info_section .container {
    display: flex; /* Define como flexbox */
    justify-content: space-between; /* Espaço entre os elementos dentro da seção */
    flex-wrap: wrap; /* Permite que as colunas se ajustem em telas menores */
    max-width: 1200px; /* Largura máxima da seção */
    gap: 15px; /* Espaçamento entre as colunas */
}

.info_section .row {
    display: flex; /* Define a linha como flexbox */
    flex-wrap: wrap; /* Quebra os elementos em dispositivos menores */
    justify-content: space-between; /* Mantém o espaçamento dentro da linha */
    width: 100%; /* Garante que a linha ocupe toda a largura */
}

.info_section .col-md-3 {
    flex: 1; /* Ajusta a largura de forma flexível */
    max-width: 300px; /* Limita a largura máxima de cada coluna */
    margin: 10px; /* Espaçamento externo entre as colunas */
    text-align: center; /* Centraliza o conteúdo dentro de cada coluna */
}




/* Estilo geral do slider */
.slider_section {
  padding: 25px 0; /* Adiciona espaçamento interno acima e abaixo da seção do slider. */
}

/* Ajustes para dispositivos pequenos */
@media (max-width: 768px) { /* Aplica estilos específicos para telas com largura máxima de 768px. */
  .slider_section {
    padding: 20px 10px; /* Reduz o espaçamento interno para dispositivos menores. */
  }

  .slider_section .carousel-inner .detail-box h1 {
    font-size: 18px; /* Define um tamanho menor para o título principal (h1). */
  }

  .slider_section .carousel-inner .detail-box h2 {
    font-size: 16px; /* Define um tamanho menor para o subtítulo (h2). */
  }
  
  .slider_section .carousel-inner .detail-box h3 {
    font-size: 14px; /* Define um tamanho menor para o subtítulo (h3). */
  }
  
  .slider_section .carousel-inner .detail-box h4 {
    font-size: 12px; /* Define um tamanho menor para o subtítulo (h4). */
  }
  
  .slider_section .carousel-inner .detail-box h5 {
    font-size: 10px; /* Define um tamanho menor para o subtítulo (h5). */
  }

  .slider_section .carousel-inner .detail-box p {
    font-size: 10px; /* Define um tamanho menor para os parágrafos. */
  }

  .slider_section .carousel-inner .btn {
    font-size: 12px; /* Reduz o tamanho da fonte do botão. */
    padding: 8px 10px; /* Diminui o espaçamento interno dos botões. */
  }
}

/* Ajustes para dispositivos muito pequenos */
@media (max-width: 480px) { /* Aplica estilos específicos para telas com largura máxima de 480px. */
  .slider_section {
    padding: 15px 5px; /* Reduz ainda mais o espaçamento interno para dispositivos muito pequenos. */
  }

  .slider_section .carousel-inner .detail-box h1 {
    font-size: 16px; /* Define um tamanho ainda menor para o título principal (h1). */
  }

  .slider_section .carousel-inner .detail-box h3 {
    font-size: 14px; /* Define um tamanho ainda menor para o subtítulo (h3). */
  }

  .slider_section .carousel-inner .detail-box p {
    font-size: 12px; /* Define um tamanho menor para os parágrafos. */
  }

  .slider_section .carousel-inner .btn {
    font-size: 12px; /* Reduz ainda mais o tamanho da fonte do botão. */
    padding: 6px 10px; /* Reduz o espaçamento interno dos botões. */
  }
}




/* Estilo dos Botões do Site */
.modern-button {
  display: inline-block;
  background: linear-gradient(45deg, #6a11cb, #2575fc); /* Fundo degradê */
  color: #fff; /* Cor do texto */
  font-size: 12px; /* Tamanho do texto */
  font-weight: bold;
  text-decoration: none; /* Remover sublinhado */
  padding: 10px 20px; /* Espaçamento interno */
  border-radius: 25px; /* Bordas arredondadas */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Transições */
}

.modern-button:hover {
  transform: translateY(-3px); /* Efeito de elevação */
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Intensificar sombra */
}

.modern-button:active {
  transform: translateY(1px); /* Simular clique */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); /* Sombra */
}



/* FIM DA PAGINA */
.fim_de_pagina {
  background: linear-gradient(135deg, #002244, #0056b3); /* Define um gradiente diagonal como fundo. */
  color: #fff; /* Define a cor do texto como branco. */
  padding: 16px 0; /* Adiciona espaçamento interno na parte superior e inferior. */
  font-family: 'Arial', sans-serif; /* Define a fonte usada no texto. */
  text-align: center; /* Centraliza o conteúdo textualmente. */
  position: relative; /* Permite posicionamento relativo de elementos dentro do contêiner. */
  overflow: hidden; /* Oculta qualquer conteúdo que ultrapasse os limites do contêiner. */
  justify-content: center; /* Centraliza o conteúdo no eixo principal. */
}

.fim_de_pagina p {
  margin: 0; /* Remove as margens padrão do parágrafo. */
  font-size: 14px; /* Define o tamanho da fonte como 16px. */
}

.fim_de_pagina a {
  color: #f1c40f; /* Define a cor dos links como amarelo. */
  text-decoration: none; /* Remove o sublinhado padrão dos links. */
  font-weight: bold; /* Torna o texto dos links em negrito. */
}

.fim_de_pagina a:hover {
  color: #ffdf5e; /* Altera a cor do link para um amarelo mais claro ao passar o mouse. */
  text-decoration: underline; /* Adiciona um sublinhado ao link ao passar o mouse. */
}

.icones_sociais {
  margin-top: 10px; /* Adiciona espaçamento acima dos ícones sociais. */
}

.icones_sociais .icone {
  display: inline-block; /* Faz os ícones ficarem em linha. */
  width: 25px; /* Define a largura de cada ícone. */
  height: 25px; /* Define a altura de cada ícone. */
  margin: 0 5px; /* Adiciona espaçamento horizontal entre os ícones. */
  background-size: cover; /* Garante que o fundo dos ícones cubra todo o espaço sem distorção. */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Adiciona uma transição suave para transformações e opacidade. */
  justify-content: center; /* Centraliza o conteúdo no eixo principal. */
}

.icones_sociais .icone.facebook {
  background-image: url('facebook-icon.svg'); /* Define a imagem de fundo para o ícone do Facebook. */
}

.icones_sociais .icone.instagram {
  background-image: url('instagram-icon.svg'); /* Define a imagem de fundo para o ícone do Instagram. */
}

.icones_sociais .icone.twitter {
  background-image: url('twitter-icon.svg'); /* Define a imagem de fundo para o ícone do Twitter. */
}

.icones_sociais .icone:hover {
  transform: scale(1.2); /* Aumenta o tamanho do ícone ao passar o mouse. */
  opacity: 0.8; /* Reduz a opacidade do ícone ao passar o mouse. */
}

/* Responsividade */
@media (max-width: 768px) {
  .fim_de_pagina p {
    font-size: 14px; /* Reduz o tamanho da fonte do parágrafo para telas menores. */
	justify-content: center; /* Centraliza o conteúdo no eixo principal. */
  }

  .icones_sociais .icone {
    width: 20px; /* Reduz a largura dos ícones para telas menores. */
    height: 20px; /* Reduz a altura dos ícones para telas menores. */
	justify-content: center; /* Centraliza o conteúdo no eixo principal. */
  }
}




/* Modern Carousel */
.carousel-container {
  position: relative; /* Define a posição relativa para posicionar elementos internos de forma absoluta. */
  width: 100%; /* Faz o carrossel ocupar 100% da largura disponível. */
  max-width: 1650px; /* Define a largura máxima para o carrossel. */
  margin: auto; /* Centraliza o carrossel horizontalmente. */
  overflow: hidden; /* Oculta partes do conteúdo que ultrapassam os limites do carrossel. */
  border-radius: 10px; /* Arredonda os cantos do carrossel. */
  background-color: transparent; /* Remove o fundo azul indesejado */
  box-shadow: 0 4px 15px rgba(0, 8, 6, 0.8); /* Adiciona uma sombra preta com 10% de opacidade */
}

.carousel-inner {
  display: flex; /* Cria um layout flexível para alinhar os itens do carrossel. */
  padding: 0; /* Remove o preenchimento interno. */
  margin: 0; /* Remove a margem. */
  transition: opacity 0.30s ease-in-out; /* Anima a transição de opacidade suavemente. */
  overflow: hidden; /* Oculta o conteúdo que ultrapassa os limites. */
}

.carousel-item {
  flex: 0 0 100%; /* Define que cada item ocupa 100% da largura do carrossel. */
  margin: 0; /* Remove a margem. */
  position: relative; /* Permite posicionar elementos internos de forma absoluta. */
  justify-content: center; /* Centraliza o conteúdo no eixo principal. */
  overflow: hidden; /* Oculta conteúdo que ultrapassa os limites. */
  transition: transform 0.1s ease-in-out; /* Anima a transformação suavemente. */
}

/* Imagens Responsivas */
.carousel-item img {
  width: 100%; /* Ajusta a imagem para cobrir 100% da largura */
  height: auto; /* Ajusta automaticamente a altura para manter a proporção. */
  object-fit: cover; /* Ajusta a imagem para cobrir o espaço sem distorções. */
  transition: opacity 0.30s ease-in-out; /* Anima a opacidade da imagem suavemente. */
}

/* Informações (legenda) na parte inferior da imagem */
.carousel-caption {
  padding: 5px; /* Define um espaço interno ao redor do conteúdo da legenda. */
  position: absolute; /* Posiciona a legenda de forma absoluta dentro do item do carrossel. */
  bottom: 5px; /* Alinha a legenda ao fundo do item. */
  left: 0; /* Alinha a legenda ao lado esquerdo. */
  width: 100%; /* Faz a legenda ocupar toda a largura disponível. */
  text-align: center; /* Centraliza o texto da legenda. */
  z-index: 5; /* Define a ordem de sobreposição para a legenda. */
}

.carousel-caption h3 {
  font-size: 2.0rem; /* Define o tamanho da fonte para o título. */
  font-family: sans-serif; /* Aplica a fonte 'Poppins' ao título. */
  color: #fff; /* Define a cor do texto como branco. */
  background: linear-gradient(45deg, #6a11cb, #2575fc); /* Aplica um gradiente ao fundo do título. */
  padding: 1px; /* Define o espaço interno ao redor do texto. */
  border-radius: 10px; /* Arredonda os cantos do fundo do título. */
}

.carousel-caption p {
  font-size: 1.3rem; /* Define o tamanho da fonte para o texto. */
  color: #ddd; /* Define a cor do texto como cinza claro. */
  background: linear-gradient(45deg, #6a11cb, #ff5722); /* Aplica um gradiente ao fundo do texto. */
  margin-top: 10px; /* Adiciona um espaço acima do texto. */
  line-height: 1.0; /* Define o espaçamento entre linhas. */
}

/* Responsividade para diferentes tamanhos de tela */
@media (max-width: 1366px) {
  /* Define estilos específicos para telas menores que 1366px */
  .carousel-item img {
    width: 100%; /* Faz a imagem ocupar toda a largura disponível. */
    height: auto; /* Ajusta a altura para manter a proporção. */
    object-fit: cover; /* Ajusta a imagem sem distorcer. */
    display: none; /* Oculta a imagem. */
	background-color: transparent; /* Remove o fundo azul indesejado */
  }

  .carousel-caption h3 {
    font-size: 1.4rem; /* Reduz o tamanho do título. */
  }

  .carousel-caption p {
    font-size: 1.0rem; /* Reduz o tamanho do texto. */
  }
}


/* Responsividade para tablets e telas menores que 1024px */
@media (max-width: 1024px) {
  .carousel-item img {
    width: 100%; /* Imagem ocupa toda a largura */
    height: auto; /* Mantém a proporção correta */
    object-fit: cover; /* Ajusta a imagem sem distorcer */
	display: none; /* Oculta as informações (legenda) */
	background-color: transparent; /* Remove o fundo azul indesejado */
  }

  .carousel-caption h3 {
    font-size: 1.4rem; /* Ajuste do tamanho do título */
  }

  .carousel-caption p {
    font-size: 1.0rem; /* Ajuste do tamanho do texto */
  }
}

/* Extra large screen / wide desktop
/* Responsividade para tablets e telas menores que 1200px */
@media (max-width: 1200px) {
  .carousel-item img {
    width: 100%; /* Imagem ocupa toda a largura */
    height: auto; /* Mantém a proporção correta */
    object-fit: cover; /* Ajusta a imagem sem distorcer */
	display: none; /* Oculta as informações (legenda) */
	background-color: transparent; /* Remove o fundo azul indesejado */
  }

  .carousel-caption h3 {
    font-size: 1.4rem; /* Ajuste do tamanho do título */
  }

  .carousel-caption p {
    font-size: 1.0rem; /* Ajuste do tamanho do texto */
  }
}


/* Large screen / desktop
/* Responsividade para telas menores que 992px (celulares grandes) */
@media (max-width: 992px) {
  .carousel-item img {
    width: 100%; /* A largura da imagem ocupa todo o espaço disponível */
    height: auto; /* Ajusta a altura proporcionalmente */
    object-fit: cover; /* Mantém a proporção sem distorcer */
	display: none; /* Oculta as informações (legenda) */
	background-color: transparent; /* Remove o fundo azul indesejado */
  }

  .carousel-caption {
    padding: 10px; /* Maior padding para celular */
	display: none; /* Oculta as informações (legenda) */
  }

  .carousel-caption h4 {
    font-size: 1.2rem; /* Ajuste do tamanho do título */
  }

  .carousel-caption p {
    font-size: 0.9rem; /* Ajuste do tamanho do texto */
  }
}

/* Responsividade para telas menores que 768px (celulares grandes) */
@media (max-width: 768px) {
  .carousel-item img {
    width: 100%; /* A largura da imagem ocupa todo o espaço disponível */
    height: auto; /* Ajusta a altura proporcionalmente */
    object-fit: cover; /* Mantém a proporção sem distorcer */
	display: none; /* Oculta as informações (legenda) */
	background-color: transparent; /* Remove o fundo azul indesejado */
  }

  .carousel-caption {
    padding: 10px; /* Maior padding para celular */
	display: none; /* Oculta as informações (legenda) */
  }

  .carousel-caption h4 {
    font-size: 1.2rem; /* Ajuste do tamanho do título */
  }

  .carousel-caption p {
    font-size: 0.8rem; /* Ajuste do tamanho do texto */
  }
}

/* Responsividade para telas menores que 640px (celulares grandes) */
@media (max-width: 640px) {
  .carousel-item img {
    width: 100%; /* A largura da imagem ocupa todo o espaço disponível */
    height: auto; /* Ajusta a altura proporcionalmente */
    object-fit: cover; /* Mantém a proporção sem distorcer */
	display: none; /* Oculta as informações (legenda) */
	background-color: transparent; /* Remove o fundo azul indesejado */
  }

  .carousel-caption {
    padding: 10px; /* Maior padding para celular */
	display: none; /* Oculta as informações (legenda) */
  }

  .carousel-caption h4 {
    font-size: 1.0rem; /* Ajuste do tamanho do título */
  }

  .carousel-caption p {
    font-size: 0.8rem; /* Ajuste do tamanho do texto */
  }
}

/* Small screen / phone
 /* Responsividade para telas menores que 576px (celulares grandes) */
@media (max-width: 576px) {
  .carousel-item img {
    width: 100%; /* A largura da imagem ocupa todo o espaço disponível */
    height: auto; /* Ajusta a altura proporcionalmente */
    object-fit: cover; /* Mantém a proporção sem distorcer */
	display: none; /* Oculta as informações (legenda) */
	background-color: transparent; /* Remove o fundo azul indesejado */
  }

  .carousel-caption {
    padding: 10px; /* Maior padding para celular */
	display: none; /* Oculta as informações (legenda) */
  }

  .carousel-caption h4 {
    font-size: 0.8rem; /* Ajuste do tamanho do título */
  }

  .carousel-caption p {
    font-size: 0.8rem; /* Ajuste do tamanho do texto */
  }
}

/* Responsividade para telas menores que 480px (celulares pequenos) */
@media (max-width: 480px) {
  .carousel-item img {
    width: 100%; /* Imagem ocupa toda a largura disponível */
    height: auto; /* Ajuste a altura proporcionalmente */
    object-fit: cover; /* Ajuste da imagem sem distorcer */
	display: none; /* Oculta as informações (legenda) */
	background-color: transparent; /* Remove o fundo azul indesejado */
  }

  .carousel-caption {
    padding: 5px; /* Ajuste no padding para telas muito pequenas */
	display: none; /* Oculta as informações (legenda) */
  }

  .carousel-caption h4 {
    font-size: 0.5rem; /* Tamanho do título ajustado */
  }

  .carousel-caption p {
    font-size: 0.8rem; /* Tamanho do texto ajustado */
  }
}



/* Indicadores de navegação */
.carousel-indicators {
  position: absolute; /* Posiciona os indicadores de forma absoluta em relação ao contêiner do carrossel. */
  bottom: 35px; /* Define a distância dos indicadores em relação à parte inferior do carrossel. */
  left: 0%; /* Alinha os indicadores ao início do contêiner horizontalmente. */
  transform: translateX(-0%); /* Permite ajustar o posicionamento horizontal com transformações. */
  display: flex; /* Exibe os indicadores em um layout flexível. */
  justify-content: center; /* Centraliza os indicadores horizontalmente. */
  gap: 10px; /* Define o espaço entre os indicadores. */
  z-index: 15; /* Garante que os indicadores fiquem acima de outros elementos. */
}

.carousel-indicators li {
  width: 25px; /* Define a largura de cada indicador. */
  height: 5px; /* Define a altura de cada indicador. */
  background-color: #bbb; /* Define a cor de fundo dos indicadores inativos. */
  justify-content: center; /* Centraliza o conteúdo dentro de cada indicador. */
  border-radius: 0; /* Remove o arredondamento dos cantos dos indicadores. */
  cursor: pointer; /* Altera o cursor ao passar sobre os indicadores. */
}

.carousel-indicators .active {
  background-color: #ff5722; /* Altera a cor de fundo do indicador ativo. */
  justify-content: center; /* Centraliza o conteúdo dentro do indicador ativo. */
  transform: scale(1.2); /* Aumenta o tamanho do indicador ativo. */
}

.carousel-indicators li:hover {
  background-color: #ff5722; /* Altera a cor de fundo ao passar o mouse sobre o indicador. */
  justify-content: center; /* Centraliza o conteúdo dentro do indicador ao passar o mouse. */
  transform: scale(1.2); /* Aumenta o tamanho do indicador ao passar o mouse. */
}


/* end footer section*/
/*# sourceMappingURL=style.css.map */