body {
  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: "Lato", sans-serif;

  background: linear-gradient(to right, #207fbc, #0d4060);

  color: #ffffff;
}

.titulos {
  line-height: 1.8em;
}

/*Ajustes dos blocos OlindaCred*/

.topo {
  background-color: #1c75bb;
}

.texto-destaque {
  color: #f1c40f;
}

.topo p {
  font-size: 20px;

  line-height: 1.8em;

  text-align: right;

  padding: 15px 10px;
}

.logo-topo {
  width: 150px !important;
}

.destacado {
  color: #f1c40f;

  font-weight: bold;

  line-height: 180%;
}

.texto {
  font-size: 20px;

  line-height: 1.8em;
}

hr.short-line {
  /* Crie uma classe específica para este estilo */

  height: 3px;

  background-color: #f1c40f; /* Uma cor diferente para exemplo */

  border: none;

  width: 90%; /* Define a largura da linha (ex: 50% da largura do pai) */

  opacity: 1;
}

hr.short-line-azul {
  /* Crie uma classe específica para este estilo */

  height: 3px;

  background-color: #1f7cb8; /* Uma cor diferente para exemplo */

  border: none;

  width: 90%; /* Define a largura da linha (ex: 50% da largura do pai) */

  opacity: 1;
}

.divider-text {
  border-bottom: #f1c40f 3px solid;
}

.btn-link {
  background-color: #eecf56;

  padding: 20px 30px;

  color: #0d3e5c;

  text-decoration: none;

  font-size: 20px;

  font-weight: bold;
}

.small {
  font-size: 18px;

  color: #2080bd;

  font-weight: bold;
}

.btn-link:hover {
  background-color: #d7c57c;

  color: #0d3e5c;
}

.secao-start,
#como-funciona,
#simule {
  padding: 50px 0;
}

.cliente,
.oportunidade {
  padding-top: 50px;
}

.oportunidade h2 {
  color: #1c75bb;

  font-weight: bold;

  line-height: 1.8em;
}

.oportunidade h3,
.secao-contato-mapa h3,
.cliente h3 {
  font-size: 20px;

  font-weight: bold;

  line-height: 1.8em;

  color: #ffffff;
}

.secao-vantagens {
  /* Ou body, ou uma div específica */

  background-image: url("../img/olindacred-ajudando-pessoas.webp");

  background-size: cover; /* Melhor para fundos de tela cheia */

  background-repeat: no-repeat; /* Evita repetição */

  background-position: center center; /* Centraliza a imagem */

  background-attachment: scroll; /* A imagem rola com o conteúdo (padrão) */

  /* background-attachment: fixed; /* Se quiser um efeito paralaxe */
}

.text-vantagem {
  color: #ffffff;

  font-size: 18px;

  line-height: 1.8em;

  font-weight: bold;
}

.vantagens-section {
  padding: 100px 20px;
}

.vantagens-section img {
  width: 100px;
}

.vantagens-section h2 {
  padding: 30px 0;
}

.vantagens-section h3 {
  font-size: 18px;

  color: #ffffff;

  line-height: 1.8em;

  font-weight: bold;
}

.dinheiro-no-bolso {
  /* 1. Imagem de Fundo */

  background-image: url("../img/olindacred-dinheiro-no-bolso.webp");

  background-size: cover; /* Faz a imagem cobrir toda a área, ajustando-se */

  background-repeat: no-repeat; /* Evita repetição */

  background-position: center center; /* Centraliza a imagem */

  min-height: 400px; /* Altura mínima para a seção, ajuste conforme necessário */

  display: flex; /* Transforma a seção em um container flexbox */

  align-items: center; /*Centraliza o conteúdo verticalmente dentro da seção */

  /* 2. Overlay para legibilidade do texto */

  /* Cria uma camada escura semi-transparente sobre a imagem */

  background-color: rgba(0, 0, 0, 0.4);

  background-blend-mode: multiply; /* Mistura a cor com a imagem */

  /* 3. Cor do texto dentro desta seção */

  color: #ffffff; /* Texto branco para contraste com o fundo escuro */

  text-align: center; /* Centraliza o texto no mobile por padrão */

  padding: 150px 0;
}

.dinheiro-no-bolso h3 {
  font-size: 22px;

  line-height: 1.8em;

  color: #ffffff;
}

.col-texto-dinheiro h2,
.col-texto-dinheiro p {
  text-align: left;

  line-height: 1.8em;
}

.oportunidade {
  /* 1. Imagem de Fundo */

  background-image: url("../img/olindacred-oportunidades-r.webp");

  background-size: cover; /* A imagem cobre toda a área, ajustando-se */

  background-repeat: no-repeat; /* Evita repetição da imagem */

  background-position: center center; /* Centraliza a imagem */

  min-height: 450px; /* Altura mínima para a seção, ajuste conforme necessário para a imagem */

  padding: 100px 0;
}

.iframe-title {
  font-size: 28px;

  font-weight: bold;
}

/* --- Estilização para os links do menu (navbar-nav .nav-link) --- */

/* Estilos gerais para todos os links do menu */

.navbar-nav .nav-link {
  font-family: "Lato", sans-serif; /* Exemplo: Mude para a fonte desejada */

  font-size: 1rem; /* Exemplo: Tamanho da fonte, ajuste conforme necessário */

  font-weight: 700; /* Exemplo: Peso da fonte (e.g., normal, bold, 500, 700) */

  color: #ffffff !important; /* Cor padrão dos links. Use !important se for necessário para sobrescrever a cor do Bootstrap */

  text-transform: uppercase; /* Exemplo: Deixa o texto em maiúsculas */

  letter-spacing: 0.05em; /* Exemplo: Espaçamento entre as letras */

  padding: 0.5rem 0.5rem; /* Padding interno dos links */

  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Transição suave para hover */

  white-space: nowrap; /*Impede que o texto do link quebre*/
}

/* Estilo para o link "ativo" (página atual) */

.navbar-nav .nav-link.active {
  color: #ffffff !important; /* Exemplo: Cor para o link ativo (azul do Bootstrap) */

  font-weight: 700; /* Deixa o ativo mais pesado */

  /* Você pode adicionar um border-bottom, background, etc. para destacar */

  /* border-bottom: 2px solid #007bff; */
}

/* Estilo ao passar o mouse (hover) sobre os links */

.navbar-nav .nav-link:hover {
  color: yellow !important; /* Exemplo: Cor para hover (azul mais escuro) */

  background-color: rgba(
    0,
    0,
    0,
    0.05
  ); /* Exemplo: Fundo levemente cinza ao passar o mouse */

  border-radius: 0.25rem; /* Bordas arredondadas no hover */
}

/* --- Estilização do Ícone do Hambúrguer (Linhas Brancas) --- */

/* Altera a cor das linhas do ícone do hambúrguer para branco */

.navbar-toggler-icon {
  /* O SVG abaixo tem o 'stroke' (cor das linhas) definido para branco (rgba(255, 255, 255, 1)) */

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* --- Estilização do Botão do Hambúrguer (Sem Background e Sem Borda) --- */

/* Remove o background do botão que envolve o ícone do hambúrguer */

.navbar-toggler {
  background-color: transparent !important; /* Garante que não tenha background */

  border-color: transparent !important; /* Remove a borda padrão do botão */
}

/* Opcional: Remove o box-shadow azul que aparece ao clicar/focar no botão do hambúrguer */

.navbar-toggler:focus {
  box-shadow: none !important;

  outline: 0 !important; /* Para navegadores mais antigos e melhor acessibilidade */
}

/* Estilo para o menu quando ele está colapsado (em telas pequenas) */

/* Aqui você pode ajustar o alinhamento do texto se o justify-content no HTML não for suficiente */

@media (max-width: 767.98px) {
  /* Breakpoint 'md' do Bootstrap (se você usa navbar-expand-md) */

  .navbar-collapse .navbar-nav {
    /* Para centralizar os links na coluna quando o menu está aberto em telas pequenas */

    width: 100%;

    display: flex;

    flex-direction: column; /* Para que os links fiquem um abaixo do outro */

    align-items: center; /* Centraliza os itens de menu verticalmente */
  }

  .navbar-nav .nav-item {
    width: 100%; /* Faz cada item ocupar toda a largura para centralização */

    text-align: center; /* Centraliza o texto dentro do item */
  }

  .navbar-nav .nav-link {
    padding: 0.8rem 1rem; /* Aumenta o padding vertical para facilitar o toque */
  }
}

/*Depoimentos*/

.depoimentos {
  background-color: #ffffff;

  padding: 70px 0;
}

.depoimentos h2 {
  color: #1f7cb8;

  font-size: 30px;

  line-height: 1.8em;

  text-align: center;

  font-weight: bold;

  padding-bottom: 10px;
}

.depoimentos h3 {
  color: #1f7cb8;

  font-size: 24px;

  line-height: 1.8em;

  text-align: center;

  font-weight: bold;

  padding-bottom: 10px;
}

.depoimentos hr {
  height: 3px;

  background-color: #f9af00; /* Uma cor diferente para exemplo */

  border: none;

  width: 50%; /* Define a largura da linha (ex: 50% da largura do pai) */

  opacity: 1;

  margin-bottom: 30px;

  margin: 0 auto 30px auto; /* Adiciona margin auto para centralizar horizontalmente e mantém o margin-bottom */

  /* Ou, de forma mais direta: margin: 0 auto; e mantém o margin-bottom separado */
}

.testimonial-card {
  background: linear-gradient(145deg, #ffffff, #f5f5f5);

  border-radius: 20px;

  padding: 2rem;

  box-shadow: 8px 8px 16px #e6e6e6, -8px -8px 16px #ffffff;

  transition: transform 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-5px);
}

.quote-icon {
  font-size: 4rem;

  color: #6c63ff;

  opacity: 0.2;

  position: absolute;

  top: 1rem;

  right: 2rem;
}

.avatar {
  width: 80px;

  height: 80px;

  border-radius: 50%;

  object-fit: cover;

  border: 3px solid #6c63ff;
}

.avatar-obrigado {
  width: 200px;

  height: 200px;

  object-fit: cover;
}

.carousel-indicators {
  bottom: -3rem;
}

.carousel-indicators button {
  width: 10px;

  height: 10px;

  border-radius: 50%;

  background-color: #6c63ff;

  opacity: 0.5;
}

.carousel-indicators .active {
  opacity: 1;
}

.testimonial-text {
  font-size: 1.1rem;

  line-height: 1.8;

  color: #555;
}

.client-name {
  color: #2d2d2d;

  font-weight: 600;
}

.client-position {
  color: #6c63ff;

  font-size: 0.9rem;
}

/*seção contato*/

.secao-contato-mapa {
  background: linear-gradient(to right, #207fbc, #0d4060);

  color: #ffffff; /* Texto branco */

  padding: 50px 0; /* Padding superior e inferior para a seção */
}

.secao-contato-mapa .bloco-contato {
  padding-right: 20px; /* Um pequeno padding para afastar o texto do mapa no desktop */

  padding-top: 50px;
}

.secao-contato-mapa h3 {
  font-family: "Lato", sans-serif;

  font-size: 1.8em; /* Tamanho do h3 */

  font-weight: 700;

  margin-bottom: 1em;
}

.secao-contato-mapa p {
  font-family: "Montserrat", sans-serif;

  font-size: 1.125rem; /* 18px */

  line-height: 1.6em;

  margin-bottom: 1em;
}

.secao-contato-mapa .btn-email {
  background-color: #3a8f84; /* Background do botão */

  border: none; /* Remove a borda padrão */

  border-radius: 15px; /* Border radius */

  color: #ffffff; /* Cor do texto do botão */

  font-family: "Lato", sans-serif;

  font-weight: 700;

  padding: 10px 20px; /* Padding interno do botão */

  text-decoration: none; /* Remove sublinhado */

  transition: background-color 0.3s ease, color 0.3s ease; /* Transição suave */

  display: inline-block; /* Para o botão se comportar como um bloco mas ajustar ao conteúdo */
}

.secao-contato-mapa .btn-email:hover {
  background-color: #a00e27; /* Cor do background no hover */

  color: #ffffff; /* Cor do texto no hover */
}

.secao-contato-mapa .mapa-container {
  position: relative;

  width: 100%;

  padding-bottom: 75%; /* Proporção 4:3 para o mapa (altura = 75% da largura) */

  height: 0;

  overflow: hidden; /* Garante que nada saia do container */
}

.secao-contato-mapa iframe {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border: 0;
}

/* Ajustes responsivos */

@media (max-width: 767.98px) {
  /* Para mobile */

  .secao-contato-mapa .bloco-contato {
    text-align: center; /* Centraliza o texto em mobile */

    padding-right: 0; /* Remove padding lateral em mobile */

    margin-bottom: 30px; /* Espaço entre o bloco de texto e o mapa em mobile */
  }

  .secao-contato-mapa .btn-email {
    display: block; /* Ocupa largura total em mobile */

    margin-left: auto;

    margin-right: auto;
  }
}

/* fim ajustes contato */

/* ajustes rodape */

.rodape {
  border-top: 5px solid #f1c40f; /* Borda no topo */

  background: linear-gradient(to left, #207fbc, #0d4060);

  color: #ffffff; /* Texto branco */

  padding: 30px 0; /* Padding interno do rodapé */
}

.rodape .texto-rodape {
  font-family: "Montserrat", sans-serif;

  font-size: 1.125rem; /* Ajustado para 18px, padrão dos parágrafos */

  line-height: 1.5em;

  margin-bottom: 0; /* Remove a margem inferior padrão do p */
}

.rodape .redes-sociais-rodape {
  font-size: 1.8em; /* Tamanho dos ícones sociais */

  display: flex; /* Para controlar o espaçamento dos ícones */

  gap: 1em; /* Espaçamento entre os ícones */

  justify-content: center; /* Centraliza ícones no mobile por padrão */
}

.rodape .redes-sociais-rodape a,
.nav-social a {
  color: #ffffff; /* Cor dos ícones */

  text-decoration: none;

  transition: color 0.3s ease; /* Transição suave no hover */
}

.rodape .redes-sociais-rodape a:hover,
.nav-social a:hover {
  color: #f1c40f; /* Cor dos ícones no hover */
}

.social-icons-top {
  font-size: 2em;

  color: white;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 1em;
}

/* Ajustes responsivos */

@media (min-width: 768px) {
  /* Para telas a partir de md (desktop/tablet) */

  .rodape .redes-sociais-rodape {
    justify-content: flex-end; /* Alinha os ícones à direita no desktop */
  }
}

@media (max-width: 767.98px) {
  /* Para mobile */

  .rodape .col-12.mt-3,
  .nav-social {
    /* Adiciona um espaço acima dos ícones em mobile */

    margin-bottom: 30px !important; /* Espaço entre o texto e os ícones */
  }
}

/* fim ajustes rodape */

/* ajustes secao 6 - Iframe Simulador */

.iframe-simulador-custom {
  width: 90%;

  height: 650px; /* Altura fixa conforme solicitado */

  max-width: 100%; /* Garante que não ultrapasse 100% da largura do pai */

  display: block; /* Para poder usar margin: auto */

  margin: 0 auto; /* Centraliza o iframe horizontalmente */

  border: 0; /* Remove a borda padrão */

  border: 3px solid #f1c40f !important; /* Borda amarela para visualização */
}

/* Para garantir que a altura seja mantida em telas menores, se necessário */

@media (max-width: 767.98px) {
  /* Exemplo para mobile (abaixo de md) */

  .iframe-simulador-custom {
    height: 550px; /* Pode ajustar a altura para mobile se 650px for muito */
  }
}

/* ajustes secao 4 - Iframe Chatbot */

.iframe-chat-custom {
  width: 90% !important;

  min-height: 500px !important; /* Altura mínima de 500px */

  height: auto !important; /* Tenta se ajustar ao conteúdo, mas min-height garante o mínimo */

  max-width: 100% !important;

  display: block !important;

  margin: 0 auto !important;

  border: 3px solid #f1c40f !important; /* Borda amarela para visualização */

  box-sizing: border-box !important; /* Garante que padding e borda não aumentem a largura/altura total */
}

/* Você pode adicionar media queries aqui se quiser alturas diferentes para mobile/desktop */

@media (max-width: 767.98px) {
  .iframe-chat-custom {
    min-height: 400px !important; /* Exemplo: 400px de altura mínima em mobile para não ocupar muito espaço */
  }
}