.navbar-brand-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.offcanvas-end {
  right: 0;
}

.custom-toggler .navbar-toggler-icon {
  display: flex;
  /* flex-direction: column; */
  justify-content: space-between;
  align-items: center;
  width: 20px;
  height: 30px;
}

.custom-toggler .navbar-toggler-icon span {
  display: block;
  width: 4px;
  height: 4px;
  background-color: #fff;
  border-radius: 50%;
}

.navbar-toggler {
  border: none;
}

.navbar-toggler-icon {
    background-image: none;
}

.navbar {
  transition: transform 0.3s ease-in-out; /* Transição suave para sumir/aparecer */
}

.logo-container {
  position: relative;
  width: 35px; /* Ajuste conforme necessário */
  height: 35px; /* Ajuste conforme necessário */
}
.stacked-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 35px; /* Ajuste conforme necessário */
  height: 35px; /* Ajuste conforme necessário */
}

.text-justify {
  text-align: justify;
}

.quem-somos-wrapper {
    background-color: #f1f4f1;
    width: 100vw; /* Faz com que o fundo cubra toda a largura da viewport */
    margin-left: calc(-50vw + 50%); /* Centraliza o background com base no viewport */
    padding: 20px 0; /* Adiciona padding ao redor da seção */
}



.bg-teal {
  background-color: var(--bs-teal);
}

:root {
  --teal-100: #e6fffa;
  --teal-200: #b2f5ea;
  --teal-300: #81e6d9;
  --teal-400: #4fd1c5;
  --teal-500: #38b2ac;
  --teal-600: #319795;
  --teal-700: #2c7a7b;
  --teal-800: #285e61;
  --teal-900: #234e52;
}

.bg-teal-100 { background-color: var(--teal-100); }
.bg-teal-200 { background-color: var(--teal-200); }
.bg-teal-300 { background-color: var(--teal-300); }
.bg-teal-400 { background-color: var(--teal-400); }
.bg-teal-500 { background-color: var(--teal-500); }
.bg-teal-600 { background-color: var(--teal-600); }
.bg-teal-700 { background-color: var(--teal-700); }
.bg-teal-800 { background-color: var(--teal-800); }
.bg-teal-900 { background-color: var(--teal-900); }



.nav-link {
  position: relative;
  text-decoration: none;
}

.nav-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 5px;
  bottom: 3px;
  left: 0;
  background-color: rgba(129, 230, 217, 0.66);
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  transform: skewX(-20deg); /* Ajuste este valor conforme necessário */
}

.nav-link:hover::after {
  visibility: visible;
  width: 100%;
}


.master-head {
  background-image: 
    linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 1) 85%), /* Cor branca */
    radial-gradient(ellipse at top left, rgba(129, 230, 217, 0.66), transparent 50%), 
    radial-gradient(ellipse at top right, rgba(255, 193, 7, 0.1), transparent 50%), /* Cor amarela (accent) */
    radial-gradient(ellipse at center right, rgba(153, 102, 255, 0.05), transparent 50%), /* Cor violeta */
    radial-gradient(ellipse at center left, rgba(230, 255, 250, 0.5), transparent 50%); 
}


/* .logo-main {
  animation: zoomIn 10s infinite alternate;
}

@keyframes zoomIn {
  0% {
      transform: scale(1);
  }
  100% {
      transform: scale(1.05);
  }
} */


@media (min-width: 768px) { /* md breakpoint */
  .fs-md-4 {
    font-size: 1.5rem !important; /* Defina o valor que quiser */
  }
}

@media (min-width: 768px) { /* md breakpoint */
  .fs-md-5 {
    font-size: 1.25rem !important; /* Defina o valor que quiser */
  }
}



.lead {
  font-size: 2.2rem !important;
  font-weight: 300;
}

@media (max-width: 768px) { /* Breakpoint para md e abaixo */
  .lead {
    font-size: 1.5rem !important;
    font-weight: 300;
  }
}

.logo-main {
  filter: drop-shadow(0.10rem 0.10rem 0.8px rgba(0, 0, 0, 1));
}

.navbar {
  filter: drop-shadow(0.10rem 0.10rem 0.8px rgba(0, 0, 0, 1));
}



.btn-primary {
  background-color: var(--teal-600) !important;
  border: 0;
  color: white;
}

.btn-primary:hover {
  background-color: var(--teal-500) !important;
}


.btn-secondary {
  background-color: rgba(182, 192, 182, 0.4) !important;
  border: 0;
  color: white;
}

.btn-secondary:hover {
  background-color: var(--teal-400) !important;
}

.logo-main {
  width: 30%;
}

@media (max-width: 768px) { /* Breakpoint para md e abaixo */
  .logo-main {
      width: 50%;
  }
}


@keyframes jump {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-15px);
  }
  60% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

.whatsapp-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--teal-600);
  padding: 20px; /* Aumenta o tamanho da borda ao redor do ícone */
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: jump 5s ease-in-out infinite;
  animation-delay: 5s;
}

.whatsapp-icon {
  width: 35px;  /* Tamanho do ícone */
  height: 35px;
}

.whatsapp-button:hover {
  background-color: var(--teal-500);
  animation: none; /* Remove a animação quando o botão é clicado */
}


.spaced-text {
  letter-spacing: 0.4rem; /* Ajuste o valor conforme o espaçamento desejado */
}



:root {
    --bs-teal-color: #319795;
    --bs-teal-rgb: 49, 151, 149; /* Conversão do #319795 para RGB */
}



.btn-outline-teal {
    --bs-btn-color: var(--bs-teal-color);
    --bs-btn-border-color: var(--bs-teal-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-teal-color);
    --bs-btn-hover-border-color: var(--bs-teal-color);
    --bs-btn-focus-shadow-rgb: var(--bs-teal-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-teal-color);
    --bs-btn-active-border-color: var(--bs-teal-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-teal-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-teal-color);
    --bs-gradient: none;
}

.servicos-orgao {
    text-align: left; /* Alinha todo o conteúdo à esquerda */
    display: block; /* Usa o comportamento de bloco padrão */
}






/* Ajusta o formulário para ser centralizado e ocupar 80% da largura da seção */
.form-container {
    display: block; /* Define display block */
    width: 80%; /* Define a largura da form-container para 80% */
    margin: 0 auto; /* Centraliza o formulário horizontalmente */
}

.form-container label {
    
    width: 100%; /* Para manter o alinhamento com os campos de input */
    text-align: left; /* Alinha o texto dos labels à esquerda */
}

.form-container input {
    width: 100%; /* Ocupa toda a largura da form-container */
    margin: 10px 0; /* Espaçamento entre os campos */
    padding: 15px; /* Aumenta o espaçamento interno */
    border-radius: 5px; /* Bordas arredondadas */
    border: 1px solid #ccc; /* Borda padrão */
    font-size: 1.1rem; /* Aumenta o tamanho da fonte */
}

.form-container textarea {
    width: 100%; /* Ocupa toda a largura da form-container */
    margin: 10px 0; /* Espaçamento entre os campos */
    padding: 15px; /* Aumenta o espaçamento interno */
    border-radius: 5px; /* Bordas arredondadas */
    border: 1px solid #ccc; /* Borda padrão */
    font-size: 1.1rem; /* Aumenta o tamanho da fonte */
}




.form-container textarea {
    height: 150px; /* Altura específica para o textarea */
}

.form-container button {
    padding: 12px 24px; /* Botão um pouco maior */
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1rem; /* Aumenta o tamanho da fonte do botão */
    display: inline-block; /* Mantém o botão no fluxo */
}

#response {
    margin-top: 20px;
    color: teal;
    font-weight: bold;
}

/* Ajusta a aura de foco para a cor teal */
.input-teal:focus {
    border-color: #319795 !important; /* Cor teal na borda ao focar */
    box-shadow: 0 0 0 0.25rem rgba(49, 151, 149, 0.5) !important; /* Aura com cor teal */
}




/* Fundo cinza escuro e letras brancas */
footer {
    background-color: #333; /* Cinza escuro */
    color: white; /* Letras brancas */
}

/* Ajuste do estilo do divisor */
.footer-divider {
    border: 1px solid #fff; /* Cor do divisor */
    width: 100%; /* Largura do divisor */
    margin-left: auto;
    margin-right: auto; /* Centraliza o divisor */
    opacity: 1 !important;
}

/* Para ajustar os textos nas colunas e manter o contraste */
footer p {
    color: white; /* As letras brancas no footer */
}
footer h5 {
    color: teal; /* As letras brancas no footer */
}

/* Estilo para o texto de direitos reservados */
footer p {
    font-size: 0.9rem; /* Tamanho ligeiramente menor */
    margin-bottom: 0; /* Remove o espaçamento adicional abaixo */
}

/* Links clicáveis no footer */
.footer-link {
    color: white; /* Cor padrão */
    text-decoration: none; /* Remove sublinhado */
}

.footer-link:hover {
    color: #319795; /* Cor teal no hover */
    text-decoration: underline; /* Opcional: adiciona sublinhado ao passar o mouse */
}