.hero-blog-page {
  min-height: 30vh;
  padding-top: 0rem;
}

#blog-flters li.filter-active {
  background-color: #0056b3;
}

.card {
  display: flex;
  flex-direction: column; /* Assegura que o conteúdo segue a ordem vertical */
  height: 100%; /* Garante que a altura do card é sempre ajustada */
  border: none; /* Remove bordas, opcional */
  overflow: hidden; /* Para impedir o conteúdo de ultrapassar */
}

.card-img-top {
  flex-shrink: 0; /* Evita que a imagem encolha */
  width: 100%; /* Garante que a imagem ocupa toda a largura */
  height: auto; /* Mantém a proporção da imagem */
  object-fit: cover; /* Garante que a imagem preenche sem distorções */
}

.blog-card-img {
  height: 30rem;
}

.card-blog-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Faz com que a overlay tenha a mesma altura da imagem */
  /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%); */
  z-index: 10; /* Garante que fica acima da imagem */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Posiciona o texto no final */
  padding: 1rem;
  color: white; /* Cor do texto */
}

.card-body-overlay {
  background: none !important;
  border: none;
  z-index: 20;
  bottom: 10px;
  position: absolute;
}

.overlay-text {
  z-index: 15; /* Coloca o texto acima do gradiente */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* Para melhor legibilidade */
}

.card-title-white {
  font-size: 1.5rem; /* Ajusta o tamanho do título */
  margin-bottom: 0.5rem;
}

.card-shadow {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* Aumenta o impacto visual */
}

.card p {
  margin-bottom: 0;
}

#blog-posts {
  background-image: url("../../../assets/img/BG-Números.webp");
  background-position: bottom;
  background-size: cover;
}

.pagination {
  --bs-pagination-disabled-bg: $White !important;
}

.pagination-style {
  background: #ffffff;
  border-radius: 50px;
  box-shadow: 0px 0px 12px rgba(32, 32, 32, 0.2);
}

.active > .page-link, .page-link.active {
  z-index: 3;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.5);
  border-color: none;
}

.pagination .page-item .page-link {
  font-family: "Titillium Web", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #ffffff; /* White text */
  border-radius: 50%; /* Fully round items */
  height: 2.5rem; /* Set height for round shape */
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none; /* Remove borders */
  margin: 0 0.25rem; /* Spacing between items */
  transition: all 0.3s ease; /* Smooth hover effect */
  color: #00368A;
}

.pagination .page-item .page-link:hover {
  background-color: #4380D7; /* Azul no hover */
  color: #FFF;
}

.page-link:active {
  color: white !important;
}