/* Header */
 /*Mengagem para não baixar*/

 .navmenu ul li a {
   text-decoration: none;
   color: #000;
 }

 .navmenu ul li {
   padding: 5px 10px;
 }

 .header {
   /* font-weight: bold; */
   background: var(--repouso);
   color: var(--contraste);
   /* text-shadow: 2px 2px 4px var(--contraste); */
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 1000;
 }

 /* Container */
 .container-menu {
   min-height: 10vh;
   max-width: 1200px;
   margin: 0 auto;
   padding: 10px 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 /* Logo */
 .logo {
   height: 50px;
   color: var(--contraste);
   text-decoration: none;
   line-height: 1;
   opacity: var(--shadowwite);
 }

 .logo:hover {
   color: var(--primaria);
 }

 /* Nav Menu */
 .navmenu ul {
   display: flex;
   align-items: center;
   text-align: left;
   gap: 20px;
   list-style: none;
   padding: 0;
   margin: 0;
 }

 .navmenu ul li {
   color: var(--contraste);
   font-family: sans-serif;
   text-decoration: none;
   font-size: 1rem;
   text-transform: uppercase;
   text-align: center;
   align-items: center;
 }

 .navmenu li a:hover {
   color: var(--primaria) !important;
 }

 /* Ícone de menu mobile */
 .mobile-toggle {
   display: none;
   font-size: 24px;
   color: var(--contraste);
   cursor: pointer;
 }

 .titlep {
   font-size: 1em;
   font-family: sans-serif;
   font-weight: bold;
 }

 .flex {
   display: flex;
   justify-content: space-between;
 }

 #servicos ul {
   display: block;
   position: absolute;
   padding: 10px;
   padding-top: 3.3vh;
   background-color: rgba(255, 255, 255);
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
   align-items: flex-start;
 }

 /* cada item */
 #servicos ul li {
   padding: 10px;
   border-top: 1px solid var(--primaria);
 }

 #servicos ul li a {
   color: var(--primaria);
 }


 #servicos ul li:hover {
   border-radius: 10px;
   background-color: var(--background);
   color: #bb9101;
 }

 .navmenu ul li a::after {
   opacity: 0;
   transform: translateX(-10px);
   /* sobe um pouco para dar efeito */
   transition: all 0.8s ease;
 }

 .navmenu ul li a::after,
 .openmenu::after {
   content: '';
   position: fixed;
   display: block;
   width: 50px;
   height: 3px;
   background-color: var(--primaria);
   border-radius: 10px;
 }



 .navmenu ul li a:hover::after,
 .openmenu::after {
   max-height: 500px;
   /* define um valor maior que o tamanho do submenu */
   opacity: 1;
   transform: translateX(0);
 }



 /* escondemos a seta "up" por padrão */
 #arrow-up {
   display: none;
 }

 /* quando ativo, troca ícones */
 #servicos.open #arrow-down {
   display: none;
 }

 #servicos.open #arrow-up {
   display: inline-block;
 }

 /* submenu visível quando aberto */
 #servicos.open #submenu {
   display: block;
 }

 #submenu li,
 #submenu li a {
   text-align: left;
   justify-content: left;
 }

 #submenu {
   max-height: 0;
   /* fechado */
   overflow: hidden;
   /* esconde conteúdo que passar do limite */
   opacity: 0;
   transform: translateY(-10px);
   /* sobe um pouco para dar efeito */
   transition: all 0.8s ease;
   /* tempo e suavidade */
 }

 /* quando o menu está aberto */
 #servicos.open #submenu {
   max-height: 500px;
   /* define um valor maior que o tamanho do submenu */
   opacity: 1;
   transform: translateY(0);
 }


 /* Mobile - Menu escondido */
 @media (max-width: 768px) {
   .navmenu {
     display: none;
     position: absolute;
     position: fixed;
     top: 60px;
     left: 0;
     right: 0;
     padding: 20px 0;
     z-index: 1000;
   }

   .barra {
     display: block !important;
   }

   .navmenu.open {
     background-color: var(--bg-color);
     display: block;
   }

   .navmenu ul {
     flex-direction: column;
     align-items: center;
     gap: 10px;
   }

   .navmenu li {
     border-bottom: 1px solid var(--primaria);
   }

   .navmenu a {
     color: var(--contraste);
   }

   #servicos {
     text-align: center;
   }

   #servicos ul {
     position: relative;
     background-color: rgb(255, 255, 255);
     text-align: center;
     padding: 0;
     border-radius: 10px;
   }


   #servicos ul li {

     border: none;
     border-top: 0.5px solid var(--primaria);
     margin: 0px 10px;
     padding: 10px;
   }

   #servicos ul li:hover {
     padding: 10px;

   }

   #submenu li,
   #submenu li a {
     text-align: center;
   }

   .navmenu ul li a::after,
   .openmenu::after {
     width: 0;
   }

   .mobile-toggle {
     display: block;
   }

   .button {
     border: none;
   }


 }

 /* Variáveis básicas */
 :root {
   --bg-color: #FFFFFF;
   --bgmaisclaro: #333333;
   --tranparencia--: rgba(255, 255, 255, 0.2);
   --primaria: #bb9101;
   --contraste: #000000;
   --repouso: #ffffff;
   --fuga: #000;
   --shadowwite: 2px 2px 4px #fff;
   --shadowblack: 2px 2px 4px #000;
   --background: #e0dfdf;
   --fundo-claro: #f9f9f9;

 }
 /* Reset */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 body {
   background-color: var(--primaria);
 }

 /*-----------HOME--------------*/
 .home {
   background-color: #000;
   height: 100vh;
   margin: 0;
   text-shadow: 2px 2px 4px #fff;

   /* background-image: url(./pages/img/logo.png);
  background-repeat: no-repeat; */
 }

 .carousel-home {
   height: 100vh;
 }

 .mensage {
   position: absolute;
   top: 30%;
   left: 30vh;
   color: var(--bg-color);
   text-shadow: 2px 2px 4px #000000;
   z-index: 900;
   /* acima da sidebar */
 }

 .mensage h1 {
   font-size: 3em;
 }

 .carousel-image {
   height: 100vh;
   /* ocupa toda a altura da tela */
   width: 100%;
   /* ocupa toda a largura do container */
   object-fit: cover;
   /* mantém a proporção, corta o excesso */
   object-position: center;
   /* centraliza o corte */
 }

 .cont {
   padding: 20px;
   min-height: 100vh;
 }

 .flex {
   display: flex;
   flex-direction: row;
   align-items: center;
 }

 .side {
   min-height: 400px !important;
   text-align: center;
   justify-content: center;
   padding: 30px;
   height: 100%;
   width: 50%;
 }

 h2 {
   justify-content: center;
   text-align: center;
 }

 .bord {
   box-shadow: 0 4px 12px rgba(137, 90, 3, 0.656);
   /* sombra atrás do container */
   border-radius: 10px;
 }

 .bg {
   color: var(--contraste);
   background-color: var(--fuga);
 }

 .barra {
   display: none;
 }

 .btn-menu {
   box-shadow: 2px 2px 4px #000000;
   border: 2px solid #fff;
   border-radius: 10px;
   background-color: transparent;
   margin-top: 30px;
   padding: 15px 20px;
   font-size: medium;
   font-weight: bold;
   text-decoration: none;
   color: white;
 }




 /*-----------------------Sobre--------------*/

 .bg-fuga {
   color: var(--contraste);
   background-color: var(--primaria);
 }

 /*componentes*/

 .title {
   padding: 50px 0px;
 }


 .card {
   height: 320px !important;
   border: none !important;
   background-color: #f9f9f9;
   transition: transform 0.3s;
 }

 .card img {
   max-width: 100%;
   max-height: 250px;
   height: auto;
   object-fit: cover;
 }



 .card:hover {
   transform: scale(1.05);
 }

 /*ENGENHARIA------*/

 .img-eng {
   height: 300px;
 }

 .espaco {
   margin-top: 15vh !important;
 }

 .barra-lateral {

   background-color: #f8f9fa;
   padding: 1rem;
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
 }

 .barra-lateral h3 {
   font-weight: bold;
 }

 .barra-lateral ul {
   padding-left: 0;
 }

 .barra-lateral a {
   text-decoration: none;
   color: #d27422;
 }

 .barra-lateral a:hover {
   text-decoration: underline;
 }



 @media (max-width: 770px) {

   /*--------CARDS HOME --------------*/
   .mensage {
     padding: 20px;
     left: 10px;
   }

   .navmenu {
     display: none;
   }

   .navmenu.open {
     display: block;
   }



 }

 .conttitle {
   text-align: center;
   justify-content: center;
 }

 /*----------LOGOS EMPRESSAS-----------*/
 .carousel-img {
   margin: 10px 0;
   padding: 10px 10px;
   height: 50px;
   /* max-width: 150px; */
 }

 #carousel>button {
   height: 100%;
 }

 /*SOLUCOES*/
 .solucao-container {
   color: var(--primaria);
   margin: 100px 0px;
 }

 .sol i {
   font-size: 2.5em;
   padding-bottom: 20px;
 }

 .sol:hover {
   color: #fff;
 }

 /*NOSSOS TRABALHOS*/
 .rounded h5 {
   color: var(--primaria);
 }


 .bottom {
   opacity: 1;
   position: absolute;
   bottom: 0;
   right: 0;
   /* ou ajuste conforme necessário */
   margin: 20px;
   /* espaço da borda da tela */
 }




 #trabalhos {
   background-color: var(--fundo-claro);
 }

 /*-------FOOTER ----------*/

 footer {
   background-color: var(--fundo-claro);
   padding: 40px 20px 20px;
   color: #333;
 }

 footer h5 {
   color: var(--primaria);
 }

 footer .logo img {
   height: 60px;
 }

 footer ul {
   list-style: none;
   padding: 0;
 }

 footer ul li {
   margin: 8px 0;
 }

 footer ul li a {
   color: inherit;
   text-decoration: none;
 }

 footer ul li a:hover {
   color: #bb9101;
   text-decoration: underline;
 }

 .svg {
   width: 1em;
   /* mesmo tamanho da fonte */
   height: 1em;
   vertical-align: -0.07em;
   /* ajuste fino no alinhamento */
   fill: currentColor;
   /* usa a mesma cor do texto */
 }

 .final {
   margin-top: 20px;
   display: flex;
   justify-content: center;
   gap: 10px;
 }

 .final a {
   text-decoration: none;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   border-radius: 100%;
   border: 1.5px solid var(--primaria);
   color: var(--primaria);
   text-align: center;
 }

 .final svg {
   width: 2em;
   fill: currentColor;
 }

 .final svg:hover {
   fill: var(--fuga);
 }

 .final a:hover {
   color: var(--fuga);
   border: 2px solid var(--fuga);
 }


 .alto {
   margin-top: 30px;
 }

 .footer-form {
   margin-top: 30px;
   text-align: center;
 }


 /*----------------- MENSAGEM -------------*/

 .mensagem-modal {
   position: fixed;
   top: 30px;
   right: 30px;
   background-color: #28a745;
   /* verde */
   color: white;
   padding: 16px 24px;
   border-radius: 8px;
   font-family: sans-serif;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
   z-index: 1000;
   transition: opacity 0.5s ease;
 }

 .mensagem-modal.erro {
   background-color: #dc3545;
   /* vermelho */
 }

 .mensagem-modal {
   position: fixed;
   top: 20px;
   left: 50%;
   transform: translateX(-50%);
   background-color: #d4edda;
   color: #155724;
   padding: 15px 25px;
   border-radius: 5px;
   z-index: 1000;
 }


 /*TRABALHE CONOSCO*/

 .trabalhe-conosco {
   max-width: 600px;
   margin: 10px;
   padding: 30px;
   background: var(--bg-color);
   color: var(--bgmaisclaro);
   border-radius: 12px;
   box-shadow: 0 2px 10px rgba(99, 72, 4, 0.356);
 }

 .trabalhe-conosco h2 {
   color: var(--primaria);
   margin-bottom: 20px;
   font-size: 1.6rem;
   position: relative;
   text-align: center;
   /* Isso garante que o conteúdo e o after fiquem centralizados */
 }

 .trabalhe-conosco h2::after {
   content: '';
   display: block;
   width: 50px;
   height: 3px;
   background-color: var(--fuga);
   margin: 0.4rem auto 0 auto;
   /* centraliza o traço horizontalmente */
   border-radius: 2px;
 }


 .trabalhe-conosco form div {
   margin-bottom: 15px;
 }

 .trabalhe-conosco input,
 .trabalhe-conosco textarea,
 .trabalhe-conosco button {
   width: 100%;
   padding: 12px;
   border-radius: 6px;
   border: 1px solid #ccc;
   font-size: 1rem;
 }

 .trabalhe-conosco button {
   background-color: var(--primaria);
   color: white;
   cursor: pointer;
   transition: 0.3s ease;
 }

 .trabalhe-conosco button:hover {
   background-color: var(--fuga);
 }

 .image-trab {
   align-items: center;
   text-align: center;
   max-width: 100%;
   max-height: 500px;
 }

 /*Nosso pessoal*/

 .equipe-section {
   padding: 40px;
   background-color: var(--fundo-claro);
   text-align: center;
   position: relative;
 }

 .equipe-carrossel-wrapper {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
 }

 .equipe-carrossel {
   display: flex;
   gap: 20px;
   overflow-x: hidden;
   scroll-behavior: smooth;
   padding: 20px 0;
 }

 .equipe-item {
   flex: 0 0 250px;
   background: white;
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   padding: 20px;
   transition: transform 0.3s;
 }

 .equipe-item:hover {
   transform: scale(1.05);
 }

 .equipe-item img {
   width: 100%;
   height: 220px;
   object-fit: cover;
   border-radius: 8px;
   margin-bottom: 10px;
 }

 .carrossel-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   font-size: 24px;
   background-color: var(--fundo-claro);
   border: none;
   padding: 10px;
   cursor: pointer;
   z-index: 10;
   border-radius: 50%;
   transition: background 0.3s ease;
 }

 .carrossel-btn:hover {
   background-color: rgba(255, 255, 255, 1);
 }

 .carrossel-btn.left {
   left: 0;
 }

 .carrossel-btn.right {
   right: 0;
 }

 /*MISSAO E VISAO DA EMPRESA*/
 .missao h4 {
   font-size: 1.6rem;
   color: var(--primaria);
   margin-top: 2rem;
   position: relative;
 }

 .missao h4::after,
 .missao h3::after {
   content: '';
   display: block;
   width: 50px;
   height: 3px;
   background-color: var(--primaria);
   margin-top: 0.4rem;
   border-radius: 2px;
 }

 .missao p {
   font-size: 1.05rem;
   margin-top: 1rem;
   color: var(--cinza-escuro);
 }

 .missao ul {
   list-style: none;
   padding-left: 0;
   margin-top: 1rem;
 }

 .missao ul li {
   color: var(--bg-color) !important;
   background-color: var(--primaria);
   padding: 0.75rem 1rem;
   margin-bottom: 0.5rem;
   border-radius: 8px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
   transition: transform 0.2s;
 }

 .missao ul li:hover {
   transform: translateX(5px);
   /* font-weight: bold; */
 }

 .icon {

   width: 1.2em;
   /* mesmo tamanho da fonte */
   height: 1.2em;
   vertical-align: -0.125em;
   /* ajuste fino no alinhamento */
   fill: currentColor;
   /* usa a mesma cor do texto */
   margin-right: 0.5em;
   /* espaço entre ícone e texto */
   /* mesmo tamanho da fonte */
 }


 @media (max-width: 600px) {
   .missao {
     padding: 1.5rem 1rem;
   }

   .missao h4 {
     font-size: 1.4rem;
   }

   .missao p,
   .missao ul li {
     font-size: 1rem;
   }
 }

 /*-------HISTORIA--------*/
 .buttons-historia button {
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   background-color: #fff;
   color: var(--primaria);
 }

 /*----------VIDEO ------*/

 .video-container {
   width: 100%;
   max-width: 100%;
 }

 .video-container iframe {
   width: 100%;
   aspect-ratio: 16 / 9;
   /* Mantém proporção de 16:9 */
   border: none;
 }


 /*LAVRA*/
 .lavra {
   height: 60vh;
   margin: 0;
   text-shadow: 2px 2px 4px #fff;

   /* background-image: url(./pages/img/logo.png);
  background-repeat: no-repeat; */
 }

 .carousel-image-lavra {
   height: 60vh;
   /* ocupa toda a altura da tela */
   width: 100%;
   /* ocupa toda a largura do container */
   object-fit: cover;
   /* mantém a proporção, corta o excesso */
   object-position: center;
   /* centraliza o corte */
 }

 /* .mensage-lavra {
  position: absolute;
  top: 50%;
  
  left: 50%;
  transform: translateY(-60%);
  color: var(--bg-color);
  text-shadow: 2px 2px 4px #000000;
  z-index: 900;
  max-width: 40%;
}


@media (max-width: 768px) {
  .mensage-lavra {
    top: 50%;
    left: 50%;
    max-width: 90%;
    font-size: 14px;
  }
} */

 .mensage-lavra {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -150%);
   /* <-- Centraliza nos dois eixos */
   color: var(--bg-color);
   text-shadow: 4px 4px 4px #000000;
   font-weight: bold;
   z-index: 900;
   max-width: 40%;
   text-align: center;
   /* Opcional: centraliza o texto dentro da caixa */
 }

 /* Responsivo */
 @media (max-width: 768px) {
   .mensage-lavra {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     /* Mantém centralização */
     max-width: 90%;
     font-size: 14px;
     text-align: center;
   }
 }

 .call {
   position: fixed;
   bottom: 2em;
   /* distância do fundo da tela */
   right: 2em;
   /* distância da borda direita */
   width: 4em;
   z-index: 1000;
   /* garante que fique sobreposto a outros elementos */
 }

 .call img {
   width: 100%;
 }

 /* Efeito pulsante */
 .call.attention::before {
   content: "";
   position: absolute;
   top: -10px;
   left: -10px;
   width: 80px;
   height: 80px;
   background-color: rgba(37, 211, 102, 0.4);
   /* Verde WhatsApp com transparência */
   border-radius: 50%;
   z-index: -1;
   animation: pulse 1.5s infinite;
 }

 @keyframes pulse {
   0% {
     transform: scale(1);
     opacity: 0.7;
   }

   70% {
     transform: scale(1.4);
     opacity: 0;
   }

   100% {
     transform: scale(1);
     opacity: 0;
   }
 }


 .back-lavra {
   background-image: url('../img/lavra/fundo4.JPG');
   /* caminho da imagem */

   background-position: center;
   /* centraliza a imagem */
   background-repeat: no-repeat;
   /* evita repetição */

 }

 bg-white {
   background-color: #fff;
 }

 .img-overlay-container {
   position: relative;
   display: inline-block;
   overflow: hidden;
 }

 .img-overlay-container img {
   display: block;
   width: 100%;
   height: auto;
 }

 .overlay-text {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   padding: 10px;
   color: white;
   background-color: rgba(0, 0, 0, 0.4);
   transition: opacity 0.4s ease;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
 }

 .img-overlay-container:hover .overlay-text {
   opacity: 0;
 }


 .servico {
   background-color: var(--tranparencia--);
   text-shadow: var(--shadowblack);
   border-radius: 1rem;
 }

 .color {
   color: #bb9101 !important
 }

 .whatsapp-bg {
   color: #fff;
   background-color: #bb9101;
 }



 /*Efeito tela*/

 .reveal {
   opacity: 0;
   transform: translateY(40px);
   transition: all 0.8s ease;
 }

 .reveal.visible {
   opacity: 1;
   transform: translateY(0);
 }