/*SCROLL EFFECT*/
      :root,
      html,
      body {
        scroll-behavior: smooth;
      }

      :target {
        padding-top: 86px;
        /* Ajuste para a altura do cabeçalho */
        margin-top: -70px;
      }
/* Estilos Customizados */
 body {
     padding-top: 80px;
     background-color: #f7f7f7 !important;
    /* Ajuste o espaço para o header, se necessário */
}
.my-5 {
    background-color:#f7f7f7 !important;
}
 .navbar-custom {
     background-color: #fff;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
 .navbar-brand img {
     height: auto;
     max-height: 50px;
    /* Limita a altura máxima do logo */
     width: auto;
     max-width: 100%;
    /* Garante que o logo não fique maior que o contêiner */
}
 .nav-slogan {
     flex-grow: 1;
     text-align: center;
     font-weight: 500;
     color: #333;
     margin: 0 15px;
    /* Adiciona margem para não sobrepor ao logo/menu */
}
 .navbar-nav a {
     font-weight: bold;
     color: #007bff;
}
/* Melhorias de Responsividade */
 @media (max-width: 991px) {
     .nav-slogan {
         display: none;
        /* Esconde a frase em telas menores */
    }
}
 @media (max-width: 767px) {
     .navbar-nav {
         flex-direction: row;
         justify-content: flex-end;
    }
     .navbar-nav a {
         padding: 0 10px;
        /* Adiciona um pouco de espaço entre os links */
    }
     .navbar-toggler {
         display: block;
        /* Mostra o botão de menu em telas pequenas */
    }
}
/* Ajustes para os links do navbar */
 .navbar-nav a {
     font-weight: bold;
     color: #007bff;
    /* Cor azul padrão do Bootstrap para links */
     margin-right: 15px;
    /* Espaço à direita de cada link */
}
 .navbar-nav a:hover, .navbar-nav a:focus {
     color: #0056b3;
    /* Cor um pouco mais escura no hover/focus para melhor feedback */
     text-decoration: none;
    /* Remove o sublinhado ao passar o mouse/focar */
}
/* Último link não precisa de margem à direita */
 .navbar-nav a:last-child {
     margin-right: 22px;
}
/* Ajustes para dispositivos móveis */
 @media (max-width: 767px) {
     .navbar-nav {
         flex-direction: row;
        /* Mantém os links na horizontal */
         justify-content: flex-end;
        /* Alinha os links à direita */
    }
     .navbar-nav a {
         padding: 0 5px;
        /* Reduz o padding em telas menores para economizar espaço */
    }
}
 .navbar-toggler-icon {
     display: inline-block;
     width: 1.5em;
     height: 1.5em;
     vertical-align: middle;
     background: no-repeat center center;
     background-size: 100% 100%;
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
 .navbar-toggler {
     position: absolute;
     right: 0;
     top: 60px;
    /* Ajuste este valor conforme necessário para evitar cortar a logo */
     border: none;
}
 .navbar-brand img {
     max-height: 50px;
    /* Limita a altura máxima do logo */
     margin-right: 10px;
    /* Adiciona um espaço entre o logo e o menu/nav */
}
 @media (max-width: 991px) {
     .navbar-brand {
         display: flex;
         align-items: center;
    }
}
/* Ajustes adicionais para o menu colapsável */
 @media (max-width: 991px) {
     .navbar-collapse {
         text-align: center;
        /* Centraliza os links no menu colapsável */
         margin-top: 60px;
        /* Espaço adicional do topo para evitar sobreposição com o botão */
    }
     .navbar-nav {
         flex-direction: column !important;
        /* Força os links a ficarem um abaixo do outro */
    }
     .navbar-nav .nav-link {
         padding: 8px 0;
        /* Aumenta o espaçamento vertical entre os links */
         width: 100%;
        /* Os links ocupam toda a largura */
    }
     .navbar-toggler {
         z-index: 1020;
        /* Garante que o botão fique acima dos itens do menu */
    }
}
/* Ajuste específico para quando o menu está expandido */
 .navbar-collapse.show {
     background-color: #fff;
    /* Fundo branco para melhor visualização dos links */
}
/* Estilização dos links do navbar */
 .navbar-nav .nav-link {
     font-weight: bold;
     color: #000;
    /* Cor preta para combinar com a logo */
     transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
    /* Suaviza a transição de cores */
}
/* Efeito ao passar o mouse sobre os links */
 .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
     color: #fff;
    /* Cor do texto */
     background-color: #f99b05;
    /* Amarelo da logo */
     border-radius: 5px;
    /* Arredonda os cantos */
    /* padding: 8px 12px;
    */
    /* Ajusta o preenchimento para tornar o link mais destacado */
}
/* Ajuste para os links no menu colapsável para dispositivos móveis */
 @media (max-width: 991px) {
     .navbar-nav .nav-link {
         margin: 5px 0;
        /* Adiciona uma margem vertical para espaçá-los */
    }
}
/* Corrigindo o hover dos links do navbar para evitar tremulação */
 .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
     color: #fff;
    /* Cor do texto ao passar o mouse */
     background-color: #f99b05;
    /* Amarelo da logo */
    /*padding: 8px 12px;
    */
    /* Manter o padding consistente para evitar tremulação */
}
/*INICIO Formulario e telefones*/
 .contact-cta h2 {
     text-align: center;
     margin: 20px 0;
     color: #333;
}
 .contact-form form {
     max-width: 600px;
     margin: auto;
     background: #f7f7f7;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
 .contact-info {
     text-align: center;
     margin-top: 40px;
}
 .contact-info h3 {
     color: #007bff;
}
/* Estilo base do botão */
.contact-form .btn-primary {
    background-color: #f99b05; /* Cor de fundo principal */
    border-color: #f99b05; /* Cor da borda */
    color: white; /* Cor do texto */
}

/* Estilo para o hover */
.contact-form .btn-primary:hover {
    background-color: #fcb900; /* Cor de fundo ao passar o mouse, mais inclinada para o amarelo */
    border-color: #fcb900; /* Cor da borda ao passar o mouse */
}

/* Estilo para o foco e ativo (clicado e permanecendo pressionado) */
.contact-form .btn-primary:focus,
.contact-form .btn-primary:active,
.contact-form .btn-primary.active,
.contact-form .btn-primary:not(:disabled):not(.disabled):active,
.contact-form .btn-primary:not(:disabled):not(.disabled).active:focus {
    background-color: #fcb900 !important; /* Mantém a cor ao clicar */
    border-color: #fcb900 !important; /* Mantém a cor da borda ao clicar */
    box-shadow: none !important; /* Remove a sombra/caixa azul ao clicar */
}



/* Espaçamentos e alinhamento do conteúdo */
 .contact-cta, .contact-form, .contact-info {
     margin-bottom: 40px;
    /* Aumenta o espaço entre as seções */
}
/* Estilização adicional para o formulário */
 .contact-form form {
     background: #ffffff;
    /* Fundo branco para destacar no site */
     padding: 25px;
     border: 1px solid #ddd;
    /* Borda sutil */
}
/* Estilização das informações de contato */
 .contact-info p, .contact-info h3 {
     margin-bottom: 15px;
    /* Espaçamento entre linhas e títulos */
}
/* Melhorando o design dos detalhes de contato */
 .contact-info {
     background-color: #f7f7f7;
    /* Fundo sutil para a seção de contato */
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* Ajustes para melhor visualização no desktop */
 @media (min-width: 768px) {
     .contact-form form {
         padding: 30px;
         margin: 20px auto;
        /* Centraliza o formulário com mais espaço */
         max-width: 800px;
        /* Largura máxima maior para desktop */
    }
}
/* Ajustes gerais */
 body {
     padding-top: 80px;
    /* Ajuste para não sobrepor ao navbar */
     background-color: #fff;
    /* Aproveitando o fundo branco */
}
/* Estilização para a frase de chamada para ação */
 .contact-cta h2 {
     text-align: center;
     margin: 120px 0 60px;
    /* Aumentando o espaçamento */
     font-size: 24px;
    /* Tamanho da fonte para desktop */
     color: #333;
    /* Cor do texto */
}
/* Ajustes para o formulário no desktop */
 @media (min-width: 768px) {
     .contact-form form {
         max-width: 800px;
        /* Aumenta a largura para desktop */
         padding: 40px;
        /* Mais espaço interno */
         margin: 0 auto 60px;
        /* Centraliza e adiciona margem abaixo */
         background: #ffffff;
        /* Fundo branco */
         border: 1px solid #ddd;
        /* Borda sutil */
    }
     .form-control {
         margin-bottom: 20px;
        /* Espaçamento entre os campos */
    }
     .btn-primary {
         width: 200px;
        /* Largura do botão */
         font-size: 18px;
        /* Tamanho da fonte do botão */
    }
}
/* Estilização para os telefones e endereços */
 .contact-info {
     margin-top: 60px;
    /* Espaçamento do topo */
     padding: 20px;
    /* Padding interno */
     background-color: #f9f9f9;
    /* Fundo sutil para seção de contato */
     border-radius: 8px;
    /* Borda arredondada */
     box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    /* Sombra sutil */
}
 .contact-info h3 {
     margin-top: 20px;
     color: #f99b05;
    /* Cor da marca para títulos */
}
 .contact-info p {
     font-size: 18px;
    /* Tamanho maior para leitura fácil */
     color: #666;
    /* Cor suave para o texto */
     line-height: 1.5;
    /* Espaçamento de linha para melhor legibilidade */
}
/* Ajuste para quebrar a monotonia e adicionar estilo */
 .contact-info p:not(:last-child) {
     margin-bottom: 15px;
}
/* Melhorando o hover dos links para uma experiência mais interativa */
 .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
     background-color: #f99b05;
    /* Ajustando a cor de hover para combinar com a marca */
     color: #fff;
}
/*FIM formulario e telefones*/
/*INICIO Footer */
 .site-footer {
     background-color: #f8f9fa;
    /* Cor de fundo leve */
     color: #6c757d;
    /* Cor do texto */
     padding: 20px 0;
    /* Espaçamento interno */
     font-size: 14px;
    /* Tamanho da fonte */
     border-top: 1px solid #e4e5e7;
    /* Borda superior sutil */
}
 .site-footer h5 {
     color: #000;
    /* Cor dos títulos */
     margin-bottom: 20px;
    /* Espaçamento abaixo dos títulos */
}
 .site-footer p {
     margin-bottom: 10px;
     margin-top: 20px;
    /* Espaçamento entre os parágrafos */
}
/* Geral para o Footer */
 .site-footer {
     font-size: 14px;
     background-color: #f8f9fa;
     border-top: 1px solid #e4e5e7;
}
 .footer-top {
     padding: 20px 0;
}
 .logo-footer img {
     max-width: 100%;
     height: auto;
}
 .social-icons a {
     display: inline-block;
     margin-left: 10px;
     color: #6c757d;
    /* Cor inicial dos ícones */
}
 .social-icons a:hover {
     color: #f99b05;
    /* Cor de hover alinhada com a marca */
}
 .footer-middle {
     padding: 20px 0;
     text-align: center;
}
 .footer-middle a {
     color: #000000;
     text-decoration: none;
     margin: 0 10px;
}
 .footer-middle a:hover {
     color: #f99b05;
}
 .footer-bottom p {
     margin: 20px 0;
     color: #6c757d;
}
 @media (max-width: 767px) {
     .social-icons {
         margin-top: 20px;
        /* Espaço extra acima dos ícones para dispositivos móveis */
    }
     .logo-footer, .social-icons {
         justify-content: center;
         display: flex;
         margin-bottom: 15px;
        /* Espaço abaixo da logo e ícones para separação clara */
    }
     .footer-middle, .footer-bottom {
         text-align: center;
        /* Centraliza o conteúdo no mobile */
    }
}
 .social-icons a {
     color: #333;
    /* Cor inicial dos ícones */
     margin: 0 10px;
}
 .social-icons a:hover {
     color: #f99b05;
    /* Mudança leve de cor ao passar o mouse */
}
/* Aumentar o tamanho dos ícones */
 .social-icons a {
     font-size: 30px;
    /* Aumenta o tamanho dos ícones */
     margin: 0 12px;
    /* Ajuste conforme necessário para espaçamento */
}
/* Alinhamento no desktop */
 @media (min-width: 768px) {
     .footer-top .container {
         display: flex;
         justify-content: space-between;
         align-items: center;
    }
     .logo-footer, .social-icons {
         flex: 1;
    }
     .logo-footer {
         display: flex;
         align-items: center;
    }
     .social-icons {
         text-align: center;
        /* Alinha os ícones à direita na mesma linha que a logo */
    }
}
/* Alinhamento e tamanho no mobile */
 @media (max-width: 767px) {
     .social-icons {
         margin-top: 20px;
        /* Espaço extra acima dos ícones no mobile */
         text-align: center;
        /* Centraliza os ícones no mobile */
    }
     .logo-footer img, .social-icons a {
         display: inline-block;
         margin-bottom: 15px;
        /* Espaço abaixo dos ícones no mobile */
    }
}
/*POST NEW FOOTER*/


.social-icons {
    text-align: center;
    padding-bottom: 20px;
}

.social-icons a {
    font-size: 30px;
    color: #333;
    /*padding: 0 15px;*/
}

.social-icons a:hover {
    color: #f99b05;
}

.footer-middle .footer-logo {
    max-height: 50px; /* Tamanho das logos */
    padding-bottom: 15px; /* Espaçamento abaixo da logo */
}

.footer-middle h3 {
    color: #f99b05; /* Cor do título baseada na logo */
    padding: 5px 0;
}

.footer-middle p {
    line-height: 1.6;
    color: #333;
}

.footer-middle .col-md-6 {
    border-right: 1px solid #eaeaea; /* Linha divisória entre as colunas */
}

.footer-middle .col-md-6:last-child {
    border-right: none; /* Remove a borda da última coluna */
}

.footer-bottom {
    padding: 20px 0;
    margin-top: 20px; /* Espaçamento acima da base do rodapé */
    border-top: 1px solid #eaeaea; /* Linha no topo da base do rodapé */
}

.footer-bottom p {
    color: #6c757d;
    font-size: 14px;
}

/* Responsividade para mobile */
@media (max-width: 767px) {
    .footer-middle .col-md-6 {
        border-right: none; /* Remove as bordas divisórias no mobile */
        padding-bottom: 3.6rem; /* Espaçamento no mobile */
    }
    
}
/*FROM 3.PHP*/
  .hero-section {
    position: relative;
    color: white;
    text-align: center;
    background: url('../img/webp/duotoneconcreto.webp') no-repeat center center;
    background-size: cover;
    overflow: hidden; /* Prevenir rolagem horizontal */
  }
  .hero-section .content {
    padding: 120px 0; /* Padding padrão para dispositivos móveis e tablets */
  }
  .circle {
    background-color: #333;
    border-radius: 50%;
    width: 220px;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    font-size: 1.4rem;
    padding: 22px; /* Ajustado para centralizar o texto nos círculos */
  }
  .hero-section h1 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
  }
  @media (max-width: 992px) {
    .hero-section {
      padding-top: 70px; /* Menor padding no topo em dispositivos móveis */
      padding-bottom: 70px; /* Maior padding na parte inferior para cobrir toda a altura */
    }
    .circle {
      width: 150px;
      height: 150px;
      font-size: 1rem;
      padding: 15px; /* Ajustado para centralizar o texto nos círculos */
    }
    .hero-section h1 {
      font-size: 2rem;
      margin-bottom: 1.5rem;
    }
  }
  @media (min-width: 993px) {
    /* Aumenta o padding apenas para telas maiores (desktops) */
    .hero-section .content {
      padding: 200px 0;
    }
  }
  /* Evitar qualquer rolagem horizontal */
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Aplica a regra diretamente ao body e html */
  }
  
  
  
  /*START BLOCOS*/
   .project-block {
    /*margin-bottom: 4rem; /* Espaçamento maior entre os blocos */
    padding: 2rem; /* Espaçamento interno nos blocos */
    border-bottom: 1px solid #eee; /* Linha sutil para separar os blocos */
  }

  .project-title {
    font-size: 1.75rem; /* Tamanho de fonte maior para o título do projeto */
    color: #0056b3; /* Cor do tema para o título, ajuste conforme necessário */
    margin-bottom: 1rem;
  }

  .project-subtitle {
    font-size: 1.5rem; /* Tamanho de fonte para os subtítulos */
    color: #333; /* Cor mais escura para o subtítulo */
    margin-bottom: 0.5rem;
  }

  .project-text {
    font-size: 1rem; /* Tamanho de fonte padrão para o texto */
    color: #555; /* Cor suave para o texto */
    line-height: 1.6; /* Espaçamento de linha para melhor leitura */
  }
  
  @media (max-width: 992px) {
    .project-block {
      margin-bottom: 2rem; /* Espaçamento menor entre os blocos para dispositivos móveis */
      padding: 1rem; /* Espaçamento interno menor para dispositivos móveis */
      border-bottom: none; /* Remove a separação para dispositivos móveis */
    }
    
    .project-title {
      font-size: 1.5rem; /* Tamanho de fonte ajustado para o título no mobile */
    }
    
    .project-subtitle {
      font-size: 1.25rem; /* Tamanho de fonte ajustado para o subtítulo no mobile */
    }

    .project-text {
      text-align: justify; /* Justifica o texto no mobile para uma melhor leitura */
    }
    .img-fluid{
        margin-bottom: 33px;
    }
  }
   /*STYLE FALE CONOSCO*/
 
  h2 {
    font-size: 1.75rem; /* Tamanho do título */
    color: #333; /* Cor já utilizada anteriormente */
    margin-bottom: 1rem; /* Espaçamento abaixo do título */
  }

  .lead {
    font-size: 1.25rem; /* Tamanho para um subtítulo/CTA introdutório */
    color: #333; /* Cor para o texto */
    margin-bottom: 2rem; /* Espaçamento abaixo do subtítulo */
  }

  .btn-primary {
    background-color: #007bff; /* Cor primária do botão */
    border-color: #007bff; /* Cor da borda do botão */
    /* Outras propriedades do botão, como sombra ou hover, podem ser ajustadas conforme necessário */
  }

  /* Ajustes para dispositivos móveis */
  @media (max-width: 768px) {
    h2 {
      font-size: 1.5rem; /* Tamanho do título ajustado para dispositivos móveis */
    }

    .lead {
      font-size: 1rem; /* Tamanho do subtítulo/CTA ajustado para dispositivos móveis */
    }
  }
  
  /*teste circulos*/
  .circle {
  background-color: #333; /* A cor de fundo dos círculos */
  border-radius: 50%; /* Faz o div ficar redondo */
  width: 220px; /* Largura do círculo */
  height: 220px; /* Altura do círculo */
  display: flex;
  align-items: center; /* Centraliza verticalmente o texto dentro do círculo */
  justify-content: center; /* Centraliza horizontalmente o texto dentro do círculo */
  margin: 0 auto; /* Centraliza o círculo dentro do seu container */
  color: white; /* Cor do texto dentro do círculo */
  font-size: 1.4rem; /* Tamanho do texto dentro do círculo */
  text-align: center; /* Garante que o texto esteja centralizado */
  padding: 20px; /* Espaçamento dentro do círculo */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra leve para dar profundidade */
  transition: transform 0.3s ease; /* Animação suave para efeitos de hover */
}

.circle:hover {
  transform: scale(1.05); /* Efeito de zoom leve ao passar o mouse */
  box-shadow: 0 6px 12px rgba(0,0,0,0.2); /* Sombra mais acentuada no hover */
}

.circle p {
  margin: 0; /* Remove a margem padrão do parágrafo */
}
@media (min-width: 992px) {
  .navbar-brand {
    margin-left: 43px; /* Adiciona margem à esquerda do logotipo */
  }

  .navbar-collapse {
    margin-right: 120px; /* Adiciona margem à direita do menu de navegação */
  }
}
/* Estilos para dispositivos móveis */
@media (max-width: 576px) {
  .project-text h3 {
    text-align: center;
  }
}

/* END 3PHP*/


/*Botão Whats*/

 .whatsapp-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #25D366;
        /* Cor de fundo verde do WhatsApp */
        color: white;
        /* Cor do texto */
        padding: 10px 20px;
        border-radius: 20px;
        text-decoration: none;
        /* Remove o sublinhado do link */
        font-size: 16px;
        /* Tamanho do texto */
        transition: background-color 0.3s, color 0.3s;
        /* Suaviza a transição de cores */
      }

      .whatsapp-button:hover,
      .whatsapp-button:focus {
        background-color: #1ebe5f;
        /* Cor de fundo mais escura no hover */
        color: white;
        /* Mantém a cor do texto */
      }

      .whatsapp-icon {
        margin-right: 10px;
        width: 24px;
        /* Largura do ícone */
        height: auto;
        /* Altura automática para manter a proporção */
      }