/* Fixar a navegação no topo com sombra ao rolar */
#navbar {
    transition: box-shadow 0.3s ease;
  }
  
  /* Adicionar sombra quando a página rolar */
  #navbar.scrolled {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }


/* Suavização de texto */
body {
    -webkit-font-smoothing: antialiased; /* Suavização no WebKit (Chrome, Safari, etc.) */
    -moz-osx-font-smoothing: grayscale; /* Suavização no macOS */
    text-rendering: optimizeLegibility; /* Otimiza a legibilidade */
    padding-top: 60px; /* Ajuste conforme a altura da sua navegação */
  }

  /* Suavização de imagens */
img {
    image-rendering: -webkit-optimize-contrast; /* Suavização no WebKit */
    image-rendering: crisp-edges; /* Preferência por bordas nítidas */
  }

  /* Suavização de transições */
* {
    transition: all 0.3s ease-in-out; /* Aplica uma transição suave a todos os elementos */
  }

/* Hero Section */
.hero {
    min-height: 400px; /* Altura mínima igual à altura da janela */
    display: flex;
    align-items: center; /* Centraliza verticalmente o conteúdo */
    background-color: #ffffff; /* Cor de fundo */
    color: #333333 !important; /* Cor do texto */
  }
  
  /* Botão primário */
  .btn-primary {
    background-color: #5B2C6F; /* Azul padrão */
    border-color: #5B2C6F;
    font-size: 1rem;
    padding: 10px 20px;
    border-radius: 5px;
  }
  
  .btn-primary:hover {
    background-color: #4A235A; /* Cor no hover */
    border-color: #4A235A;
  }
  
  /* Ajustes para texto */
  h1, h2, h3 {
    font-weight: bold;
  }
  
  p {
    font-size: 1.125rem; /* Ajuste para tamanho confortável */
    line-height: 1.6; /* Melhor legibilidade */
  }

  /* Estilo para a seção de parceiros */
.parceiros {
    background-color: #f8f9fa;
  }
  
  .parceiros h2 {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
  }
  
  .parceiros p {
    font-size: 1rem;
    color: #555;
  }
  
  .parceiros .parceiro-logo {
    max-width: 100%;
    transition: filter 0.3s ease-in-out;
  }
  
  .parceiros .parceiro-logo:hover {
    filter: grayscale(0);
  }
  
  .carousel-inner {
    transition: transform 0.8s ease-in-out; /* Animação suave */
  }
  
  /* Controles do carrossel */
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    background-color: #5B2C6F; /* Roxo */
    border-radius: 50%; /* Para deixar o fundo circular */
    width: 40px;
    height: 40px;
    background-size: 50%; /* Ajusta o tamanho da seta dentro do círculo */
  }
  
  .carousel-control-prev,
  .carousel-control-next {
    opacity: 1; /* Garante que os controles fiquem sempre visíveis */
  }
  
  .carousel-control-prev:hover .carousel-control-prev-icon,
  .carousel-control-next:hover .carousel-control-next-icon {
    background-color: #5B2C6F; /* Roxo mais escuro ao passar o mouse */
  }



  /* Estilo para a seção de blog */
.blog-section {
    background-color: #f8f9fa;
    padding: 60px 0;
  }
  
  .blog-section h2 {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 40px;
  }
  
  .blog-section .card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
  }
  
  .blog-section .card:hover {
    transform: translateY(-5px); /* Elevação ao passar o mouse */
  }
  
  .blog-section .card-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
  }
  
  .blog-section .card-text {
    color: #555;
  }
  
  .blog-section .btn {
    background-color: #5B2C6F; /* Roxo */
    color: #fff;
  }
  
  .blog-section .btn:hover {
    background-color: #5B2C6F; /* Roxo mais escuro */
  }
  

  /* Estilo para a página de post */
.post-page {
    background-color: #fff;
    padding: 60px 0;
  }
  
/* Estilo do Header */
.post-header {
    padding-top: 40px;
    padding-bottom: 30px;
    text-align: center;
  }
  
  .post-header h1 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
  }
  
  .post-header p {
    color: #666;
    font-size: 1rem;
  }
  
/* Estilo da Imagem do Post */
.post-image {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
  
/* Estilo do conteúdo do post */
.post-content {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #555;
  }
  
  .bg-purple {
    background-color: #5B2C6F;
  }

  .bg-yellow{
    background-color: #FFCC00;
  }

  .text-primary {
    color: #5B2C6F !important;
  }

  .text-yellow {
    color: #FFCC00 !important;
  }

  .active {
    font-weight: bolder;
    color: #5B2C6F !important;
  }

  /* ESTILO PARA CARDS */

   /* Estilo para os cards */
   .support-card {
    border-radius: 10px; /* Bordas arredondadas */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombreamento suave */
    border: 1px solid #f0f0f0; /* Borda leve */
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.support-card:hover {
    transform: translateY(-5px); /* Elevação ao passar o mouse */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Sombra mais forte */
}

.support-icon {
    font-size: 2rem; /* Tamanho do ícone */
    color: #5B2C6F; /* Cor principal do ícone */
    margin-bottom: 10px; /* Espaço abaixo do ícone */
}

.support-card-title {
    font-size: 1.2rem; /* Tamanho do título */
    font-weight: bold; /* Negrito */
    color: #333; /* Cor do texto */
}

.support-card:hover .support-icon {
    color: #7D3C98; /* Cor do ícone no hover */
}

.text-purple {
  color: #5B2C6F;
}

/* Ajuste para a seção do portfólio */
.section-portfolio {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* Adiciona espaçamento entre os cards em telas menores */
.section-portfolio .row > .col-md-6 {
  margin-bottom: 2rem; /* Adiciona um espaçamento entre as colunas */
}

/* Ajuste de espaçamento e imagem */
.section-portfolio img {
  max-width: 100%; /* Garante que as imagens não ultrapassem a largura do seu contêiner */
  height: auto; /* Mantém a proporção da imagem */
  margin-bottom: 1rem; /* Adiciona um espaçamento abaixo da imagem */
}

/* Ajustes para desktop */
@media (min-width: 992px) {
  .section-portfolio img {
      max-width: 600px; /* Limita o tamanho máximo da imagem */
      width: 100%; /* Garante que a imagem não ultrapasse o tamanho máximo */
  }
}

/* Ajuste para telas pequenas */
@media (max-width: 768px) {
  .section-portfolio .row {
      margin-left: 0;
      margin-right: 0;
  }

  /* Ajusta o alinhamento e espaçamento das colunas */
  .section-portfolio .col-md-6 {
      padding-left: 15px;
      padding-right: 15px;
  }

  /* Ajusta o espaçamento entre as colunas em dispositivos móveis */
  .section-portfolio .row > .col-md-6 {
      margin-bottom: 1rem; /* Menor espaçamento entre as colunas */
  }

  /* Ajuste para as imagens na versão mobile */
  .section-portfolio img {
      width: 100%;
      height: auto;
      margin-bottom: 1.5rem;
  }
}



.campaign-section {
  background-color: #f8f9fa;
  padding: 3rem 0;
}

.campaign-section h2 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.steps-list {
  max-width: 700px;
  margin: 0 auto;
}

.step-item {
  display: flex;
  align-items: flex-start;
}

.step-number {
  background-color: #7D3C98; /* Cor de destaque para o número */
  color: #fff;
  font-weight: bold;
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-number-yellow {
  background-color: #ffcc00; /* Cor de destaque para o número */
  color: #333333;
  font-weight: bold;
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-item p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

select {
  appearance: auto; /* Restore default dropdown arrow */
  -moz-appearance: auto; /* For Firefox */
  -webkit-appearance: auto; /* For Safari/Chrome */
}