body {
  background-color: #0a2836;
  font-family: Arial, sans-serif;
  margin: 0%;
}

.h1 {
  font-family: Arial, sans-serif;
}

.h2 {
  font-family: Arial, sans-serif;
}

.h3 {
  font-family: Arial, sans-serif;
}

.paragrafo {
  font-family: Arial, sans-serif;
  color: rgb(228, 231, 234);
  font-size: 25px;
}

.headerPosition {

  display: flex;

}

.rigth {
  background-image: url("componentes/img/pexels-tima-miroshnichenko-5439470.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 700px;
  /* Defina uma altura para garantir que a imagem apareça */
}



#logotipo {
  width: 80px;
  height: 40px;
}

/* 🌟 Estilo padrão da navbar */
.navbar {
  background: #0a2836a4;
  ;
  transition: background 0.3s ease-in-out;
  padding: 15px 50px;
  /* Ajuste de espaçamento lateral */
}

/* 🌟 Navbar com fundo ao fazer scroll */
.navbar.scrolled {
  background: #0a2836de;
}

/* 🌟 Estilizando os links */
.navbar-nav .nav-item {
  margin: 0 20px;
  /* Aumenta o espaçamento entre os links */
}

.navbar-nav .nav-link {
  color: #c1e0e0 !important;
  font-size: 16px;
  transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
  color: #516d7d !important;
}

/* 🌟 Botão hamburguer (para telas pequenas) */
.navbar-toggler {
  border: none;
  outline: none;
}

/* 🌟 Deixando o ícone do menu hamburguer branco */
.navbar-toggler-icon {
  filter: invert(1);
}

/* 🌟 Centralizando o menu em telas grandes */
.navbar-nav {
  margin-left: auto;
  margin-right: auto;
}

/* 🌟 Ajustando o tamanho máximo do container */
.container {
  max-width: 1200px;
}

/* 🌟 Responsividade: Menu hamburguer visível em telas pequenas */
@media (max-width: 991px) {
  .navbar-nav {
    text-align: center;
    background-color: #0a283600;
  }

  .navbar-nav .nav-item {
    margin: 10px 0;
    /* Espaçamento vertical para os links no menu dropdown */
  }
}

.glass-button {
  width: 200px;
  height: 50px;
  font-size: 16px;

  border: 2px solid rgba(255, 255, 255, 0.3);
  /* Borda sutil */
  background: rgba(255, 255, 255, 0.2);
  /* Fundo transparente */
  backdrop-filter: blur(8px);
  /* Efeito de vidro fosco */
  -webkit-backdrop-filter: blur(10px);
  /* Para compatibilidade */
  border-radius: 5px;
  /* Borda arredondada */
  color: white;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

/* 🌟 Efeito de hover */
.glass-button:hover {
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}


/* Conteúdo de Exemplo */
.content {
  height: 200vh;
  /* Para permitir rolagem */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 24px;
  padding-top: 100px;
}


/* Estiliza o preloader ocupando toda a tela */
#preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #0a2836;
  /* Cor do fundo igual ao do site */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Animação do logotipo */
#loader-logo {
  width: 150px;
  /* Ajuste conforme necessário */
  animation: pulse 1.5s infinite ease-in-out;
}

/* Animação pulsante */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }

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

#main {
  background-color: #0a2836;
}

.texto {
  padding-top: 350px;
  padding-bottom: 80px;
  padding-left: 150px;
  padding-right: 40px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-size: large;
}

@media (max-width: 768px) {
  .texto {
    padding-top: 250px;
    padding-left: 40px;
    padding-right: 40px;
  }
}

.solucoes1 {
  display: flex;
  flex-direction: row;
  background-color: #cfd8d8;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  padding: 50px;
  transition: opacity 1s ease-out, transform 1s ease-out;
}



.texto2 {
  color: #3e515c;
  text-align: left;
  max-width: 500px;
  padding: 50px 20px;
}

.texto2 h2 {
  color: #3e515c;
  margin-bottom: 20px;
}

.texto2 ul {
  color: #516d7d;
  font-size: 20px;
  list-style: square;
  /* Remove os marcadores da lista */
  padding: 0;
}

.texto2 li {
  margin-bottom: 15px;
  /* Dá espaçamento entre os itens da lista */
}

.solucoes1 img {
  height: auto;
  width: 350px;
  max-height: 690px;
  padding: 50px 0;
}

/* Responsividade */
@media (max-width: 768px) {
  .solucoes1 {
    flex-direction: column;
    /* Alinha os elementos verticalmente */
    padding: 20px;
  }

  .solucoes1 img {
    width: 100%;
    max-width: 350px;
    height: auto;
    padding: 20px 0;
  }

  .texto2 {
    text-align: center;
    padding: 30px 20px;
  }

  .texto2 ul {
    text-align: left;
    /* Centraliza os itens da lista */
  }
}



.footer {
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: "";
  position: fixed;
  /* Fixa o background */
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background-image: url(componentes/img/Picture2.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
  /* Coloca atrás do conteúdo */
}



.texto2 {
  padding-top: 200px;
  padding-left: 60px;
  padding-bottom: 70px;
  color: #ffff;
}



.rodapé {
  background-image: url(componentes/img/Picture6.png);
  background-size: cover;
  background-position: center center; /* Centraliza a imagem de fundo */
  display: flex;
  flex-direction: row;
  padding: 50px;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  width: 100%;
  box-sizing: border-box; /* Inclui o padding no cálculo de tamanho */
}

/* Quando a tela for menor que 768px, os elementos ficam na vertical */
@media (max-width: 768px) {
  .rodapé {
    flex-direction: column;
    text-align: center;
    padding: 20px;
    background-position: right;
  }

  .rodapé img {
    margin-bottom: 15px;
    /* Adiciona espaçamento entre os elementos */
  }

  .rodapé img.hide-on-mobile {
    display: none;
  }
}

/* Ajustes para telas menores (menos de 600px), para melhorar o visual */
@media (max-width: 600px) {
  .rodapé {
    padding: 15px;
  }
}


.whatsapp-link {
  color: white !important;
  text-decoration: none;
  font-weight: bold;
}

.whatsapp-link:hover {
  color: #25D366 !important;
}

.hbma-link {
  color: white !important;
  text-decoration: none;
  font-weight: bold;
}

.hbma-link:hover {
  color: #88909a !important;
}

.email-link {
  color: white !important;
  text-decoration: none;
  font-weight: bold;
}

.email-link:hover {
  color: #1c7ea7 !important;
}

.jumbotron {
  border: 1px solid #bdbdbd;
  border-radius: 8px;
  background-color: #0a2836e6;
  /* Fundo escuro */
  color: rgb(202, 212, 221);
  text-align: center;
  padding: 30px;

  margin: auto;
  width: 90%;
  /* Para telas pequenas */
  max-width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4);

}

.sobreNos {
  padding-bottom: 200px;
}

@media(max-width: 768px) {
  .sobreNos {
    padding-bottom: 180px;

  }
}

/* Estilos para telas maiores */
@media (min-width: 768px) {
  .jumbotron {
    width: 70%;
    height: 300px;
    max-width: 800px;
    box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.5);
  }
}

/* Estilizando o badge */
.jumbotron .badge {
  background-color: #516d7d;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
}

/* Estilo base dos cards */
.service-card {
  position: relative;
  overflow: hidden;
  border: 1.5px solid #6d738f;
  border-radius: 8px;
  background-color: #04112245;
  color: #c1e0e0;
  padding: 20px;
  transition: transform 0.3s ease;
  cursor: pointer;
  box-shadow: 0 10px 16px rgba(0, 0, 0, 0.479);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}

.card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center; /* Mantém os elementos centralizados */
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #3e515c;
}

.card-text {
  flex-grow: 1;
  font-size: 14px;
  line-height: 1.6;
  display: flex;
  align-items: center; /* Centraliza verticalmente */
  justify-content: center;
  text-align: center;
  min-height: 80px; /* Garante altura mínima para evitar desalinhamento */
}

.saiba-mais {
  color: #3e515c;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  margin-top: 10px;
}

.saiba-mais:hover {
  text-decoration: underline;
}

/* Efeito de luz */
.service-card::before {
  content: "";
  position: absolute;
  top: var(--mouse-y, -50%);
  left: var(--mouse-x, -50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-card:hover::before {
  opacity: 1;
}

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

.section2 {
  padding-top: 55px;
  padding-bottom: 80px;
}

.form-container {
  max-width: 600px;
  background: rgba(255, 255, 255, 0.728);
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 10px 16px rgba(0, 0, 0, 0.676);
}

.btn-submit {
  background-color: #636866;
  color: #f7f7f7;
  border: none;
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
}

.rigthServices {
  background-color: #0a2836;
  background-image: url(componentes/img/pexels-josh-hild-1270765-19543998.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 700px;
}

.textoServices {
  padding-top: 250px;
  padding-left: 40px;
  padding-right: 170px;
}

@media (max-width: 768px) {
  .textoServices {
    padding-top: 170px;
    padding-left: 40px;
    padding-right: 40px;
  }
}

.mainServices {
  background-color: #0a2836;
  padding: 40px;
  display: flex;
  justify-content: center;

}

.background {
  position: relative;
  /* Para que o pseudo-elemento funcione corretamente */
  background-color: #0a2836;
  /* Cor de fundo por baixo da imagem */
}

.background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url(componentes/img/pexels-yankrukov-8866736.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.7;
  z-index: 1;
}

@media (min-width: 1920px) {
  .background::before {
    background-size: contain; /* Ajusta melhor em telas grandes */
  }
}

@media (min-width: 2560px) {
  .background::before {
    background-size: 100% 100%; /* Força o preenchimento total da tela */
  }
}


.background>* {
  position: relative;
  z-index: 2;
  /* Garante que o conteúdo do elemento esteja acima da imagem de fundo */
}


.servico {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; /* Centraliza melhor os itens */
  padding: 50px;
  gap: 30px;
  min-height: 700px;
}

/* Ajustes para telas grandes */
@media (min-width: 1920px) {
  .servico {
    gap: 15px; /* Reduz a distância entre texto e imagem */
    padding: 50px 10%;
  }

  .textoServicos {
    max-width: 50%; /* Mantém o texto mais próximo da imagem */
  }

  .imagem img {
    max-width: 450px; /* Evita que a imagem fique muito grande */
  }
}

@media (min-width: 2560px) {
  .servico {
    gap: 10px; /* Aproxima ainda mais os elementos */
    padding: 50px 15%;
  }

  .textoServicos {
    max-width: 45%;
  }

  .imagem img {
    max-width: 400px;
  }
}


.textoServicos, .imagem {
  flex: 1;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.textoServicos.show, .imagem.show {
  opacity: 1;
  transform: translateY(0);
}

.textoServicos {
  max-width: 600px;
  text-align: justify;
}

.imagem {
  display: flex;
  justify-content: center;
  align-items: center;
}

.imagem img {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Estilos de fundo específicos */
#recursos-humanos {
  background-color: #d0d4d8;
}

#auditoria {
  background-color: #0a2836;
  color: #cad4dd;
}

#consultoria-fiscal {
  background-color: #d0d4d8;
}

#consultoria-financeira {
  background-color: #344752;
  color: #cad4dd;
}

/* Responsividade */
@media (max-width: 768px) {
  .servico {
    flex-direction: column;
    text-align: center;
  }

  .imagem {
    order: 2;
    margin-bottom: 20px;
  }

  .textoServicos {
    text-align: left; 
    hyphens: auto;
    word-wrap: break-word;
  }
}


/* Texto */
ul {
  font-size: 20px;    
  line-height: 1.8;
  margin: 0;
  padding: 0;
  list-style: square;
  text-align: left;
}

h2 { 
  font-size: clamp(28px, 2vw, 32px); /* Ajusta dinamicamente entre 28px e 32px */
  margin-bottom: 10px; /* Reduz a margem inferior para telas grandes */
  white-space: normal; /* Garante que o título quebre corretamente */
  text-align: left; /* Mantém alinhado em todas as telas */
  word-spacing: normal; /* Evita espaçamentos excessivos */
}

@media (min-width: 1920px) {
  h2 {
    font-size: 30px; /* Mantém um tamanho fixo para telas 2K */
  }
}

@media (min-width: 2560px) {
  h2 {
    font-size: 32px; /* Ajusta para telas 4K sem espalhar as palavras */
  }
}


/* Responsividade */
@media (max-width: 768px) {

  .recuH,
  .contAud,
  .consAFis,
  .consAF {
    flex-direction: column;
    /* Layout em coluna para telas pequenas */
    text-align: center;
    padding: 20px;
  }

  .fotoLateral {
    width: 100%;
    max-width: 100%;
  }
}


.rigthBlog {
  position: relative;
  /* Para posicionar corretamente o pseudo-elemento */
  width: 100%;
  height: 700px;
  background-color: #0a2836dc;
}

.rigthBlog::before {
  content: ""; 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(componentes/img/pexels-dom-sch-veg-man-381944029-14635963.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.3;
  /* Controle a transparência aqui (0.0 a 1.0) */
  z-index: 3; 
  /* Para garantir que fique atrás do conteúdo */
}

.rigthBlog {
  position: relative;
  z-index: 2;
  /* Para o conteúdo ficar acima do pseudo-elemento */
}

.coming-soon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 350px;
  padding-left: 40px;
  padding-right: 40px;
}

.rigthAbout {
  padding-bottom: 100px;
}