* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}


/* === SEÇÃO HERO (PRIMEIRA DO MAIN) === */
.hero {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(rgba(15, 27, 80, 0.7), rgba(15, 27, 80, 0.7)),
    url('../img/backgroudSection1.png') center/cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  padding: 2rem;
  box-sizing: border-box;
}

/* Conteúdo interno */
.hero-content {
  max-width: 600px;
  width: 100%;
}

/* Título */
.hero-content h1 {
  font-size: 1.8rem;
  line-height: 1.3;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Parágrafo */
.hero-content p {
  font-size: 1rem;
  margin-bottom: 2rem;
  color: #e0e5ff;
}

/* === BOTÃO (RESPONSIVO E CENTRALIZADO) === */
.cta-btn {
  display: inline-block;
  background: #ffbf00;
  color: #1d2dbe;
  padding: 0.9rem 1.5rem;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;

  /* Tornar responsivo */
  width: 100%;
  max-width: 320px;
  /* limite de largura */
  text-align: center;
  white-space: normal;
  /* permite quebra de linha natural */
  line-height: 1.3;
  word-wrap: break-word;
  /* evita corte em palavras longas */
  margin: 0 auto;
  /* centraliza */
}

.cta-btn:hover {
  background: #ffd633;
  transform: scale(1.05);
}

/* === RESPONSIVIDADE === */
@media (min-width: 768px) {
  .hero-content h1 {
    font-size: 2.5rem;
  }

  .hero-content p {
    font-size: 1.1rem;
  }

  .cta-btn {
    width: auto;
    /* volta ao tamanho do conteúdo */
    font-size: 1.05rem;
  }
}



/* === SEÇÃO DE NOTÍCIAS (CARROSSEL) === */
.noticias-carousel {
    background: #fcfcfc; /* Fundo leve para a seção */
    padding: 4rem 1.5rem; /* Espaçamento interno superior/inferior e laterais */
    text-align: center; /* Centraliza o texto dentro da seção */
}

/* Estilo para o ícone no topo da seção */
.noticias-topo i {
    font-size: 2.5rem; /* Tamanho do ícone */
    color: #002b6b; /* Cor do ícone (azul CECLA) */
    margin-bottom: 0.5rem; /* Espaçamento abaixo do ícone */
    display: block; /* Garante que o ícone ocupe sua própria linha */
}

/* Estilo para o título principal da seção */
.noticias-topo h2 {
    font-size: 1.9rem; /* Tamanho do título */
    color: #002b6b; /* Cor do título */
    font-weight: 700; /* Negrito */
    margin-bottom: 0.5rem; /* Espaçamento abaixo do título */
}

/* Estilo para o parágrafo de descrição da seção */
.noticias-topo p {
    color: #555; /* Cor do texto */
    font-size: 1rem; /* Tamanho do texto */
    margin-bottom: 3rem; /* Espaçamento abaixo do parágrafo, antes do carrossel */
}

/* === ESTRUTURA PRINCIPAL DO CARROSSEL === */
.carousel-wrapper {
    position: relative; /* Essencial para posicionar as setas de navegação */
    overflow: hidden; /* Oculta os slides que estão fora da área visível */
    max-width: 900px; /* Largura máxima do carrossel */
    margin: 0 auto; /* Centraliza o carrossel na página */
    border-radius: 12px; /* Cantos arredondados */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Contêiner interno dos slides que se move horizontalmente */
.carousel-inner {
    display: flex; /* Coloca os slides lado a lado */
    transition: transform 0.5s ease-in-out; /* Adiciona transição suave ao mover os slides */
    width: 100%; /* Ocupa 100% da largura do .carousel-wrapper */
}

/* Estilo para cada slide individual do carrossel */
.carousel-slide {
    flex: 0 0 100%; /* Cada slide ocupa 100% da largura do .carousel-inner, sem encolher ou crescer */
    width: 100%; /* Garante 100% de largura */
    position: relative; /* Para posicionar a imagem e o conteúdo */
    height: 450px; /* Altura do slide (ajustado para mais texto) */
    display: flex; /* Para alinhar o conteúdo na parte inferior */
    flex-direction: column; /* Conteúdo em coluna */
    justify-content: flex-end; /* Alinha o conteúdo na parte inferior */
    color: #fff; /* Cor do texto dentro do slide */
    text-align: left; /* Alinha o texto à esquerda */
}

/* === IMAGEM DO SLIDE === */
.slide-image {
    position: absolute; /* Posiciona a imagem absolutamente */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem cubra todo o slide, cortando se necessário */
    z-index: 1; /* Fica atrás do conteúdo do slide */
}

/* Overlay escuro sobre a imagem para garantir legibilidade do texto */
.carousel-slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%); /* Gradiente de preto para transparente */
    z-index: 2; /* Fica entre a imagem e o conteúdo */
}

/* === CONTEÚDO DE TEXTO DO SLIDE === */
.slide-content {
    position: relative;
    z-index: 3; /* Garante que o conteúdo fique sobre o overlay */
    padding: 25px; /* Espaçamento interno do conteúdo (ajustado) */
    max-width: 80%; /* Permite que o texto ocupe mais largura (ajustado) */
    max-height: 80%; /* Limita a altura do bloco de conteúdo a 80% do slide */
    overflow-y: auto; /* Adiciona barra de rolagem vertical se o conteúdo exceder max-height */
    -ms-overflow-style: none; /* Esconde barra de rolagem no IE e Edge */
    scrollbar-width: none; /* Esconde barra de rolagem no Firefox */
}

/* Esconde a barra de rolagem no Webkit (Chrome, Safari) */
.slide-content::-webkit-scrollbar {
    display: none;
}

/* Etiqueta de data/categoria do slide */
.slide-tag {
    display: inline-block;
    background: #ffbf00; /* Cor de fundo (amarelo) */
    color: #1d2dbe; /* Cor do texto (azul CECLA) */
    padding: 4px 8px; /* Espaçamento interno */
    border-radius: 4px; /* Cantos arredondados */
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Título da notícia/atividade no slide */
.slide-content h3 {
    font-size: 1.6rem; /* Tamanho do título (ajustado) */
    margin-bottom: 8px; /* Espaçamento abaixo do título (ajustado) */
    font-weight: 700;
}

/* Parágrafo de descrição da notícia/atividade */
.slide-content p {
    font-size: 1.05rem; /* Tamanho do texto (ajustado) */
    margin-bottom: 18px; /* Espaçamento abaixo do parágrafo (ajustado) */
    line-height: 1.5; /* Altura da linha para melhor leitura */
}

/* Link "Leia Mais" */
.read-more {
    color: #ffbf00; /* Cor do link (amarelo) */
    text-decoration: none; /* Remove sublinhado */
    font-weight: 600;
    transition: color 0.3s; /* Transição suave na cor */
}

.read-more:hover {
    color: #fff; /* Cor ao passar o mouse */
}

/* === BOTÕES DE NAVEGAÇÃO (SETAS) === */
.carousel-btn {
    position: absolute; /* Posiciona os botões absolutamente dentro do .carousel-wrapper */
    top: 50%; /* Centraliza verticalmente */
    transform: translateY(-50%); /* Ajuste fino para centralização vertical */
    z-index: 10; /* Garante que fiquem acima de outros elementos */
    background: rgba(0, 0, 0, 0.4); /* Fundo semi-transparente */
    color: #fff; /* Cor do ícone */
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.5rem;
    transition: background 0.3s, opacity 0.3s; /* Transição suave no hover */
    border-radius: 50%; /* Deixa o botão redondo */
    height: 50px; /* Altura fixa */
    width: 50px; /* Largura fixa */
    display: flex; /* Para centralizar o ícone */
    align-items: center;
    justify-content: center;
    opacity: 0.8; /* Levemente transparente por padrão */
}

.carousel-btn:hover {
    background: rgba(0, 0, 0, 0.6); /* Fundo mais escuro no hover */
    opacity: 1; /* Opacidade total no hover */
}

.prev-btn {
    left: 10px; /* Posição à esquerda */
}

.next-btn {
    right: 10px; /* Posição à direita */
}

/* === INDICADORES DE PROGRESSO (PONTOS ABAIXO DO CARROSSEL) === */
.carousel-indicators {
    text-align: center; /* Centraliza os pontos */
    padding: 15px 0 0; /* Espaçamento acima dos pontos */
}

.indicator {
    display: inline-block; /* Faz os pontos ficarem lado a lado */
    width: 10px; /* Largura do ponto */
    height: 10px; /* Altura do ponto */
    margin: 0 5px; /* Espaçamento entre os pontos */
    background-color: #ccc; /* Cor padrão do ponto */
    border-radius: 50%; /* Formato redondo */
    cursor: pointer;
    transition: background-color 0.3s; /* Transição suave na cor */
}

.indicator.active {
    background-color: #002b6b; /* Cor do ponto ativo (azul CECLA) */
}

/* === RESPONSIVIDADE ESPECÍFICA PARA TELAS MENORES (ATÉ 600px) === */
@media (max-width: 600px) {
    .carousel-slide {
        height: 380px; /* Altura do slide para mobile (ajustado) */
    }

    .slide-content h3 {
        font-size: 1.3rem; /* Tamanho do título para mobile (ajustado) */
    }

    .slide-content p {
        font-size: 0.95rem; /* Tamanho do texto para mobile (ajustado) */
    }

    .slide-content {
        max-width: 90%; /* Conteúdo ocupa mais largura em mobile */
        padding: 15px; /* Menor padding para mobile (ajustado) */
    }

    .carousel-btn {
        padding: 8px; /* Menor padding para os botões */
        font-size: 1.2rem; /* Menor tamanho do ícone */
        height: 40px; /* Menor altura do botão */
        width: 40px; /* Menor largura do botão */
    }
}


/* === SEÇÃO DE DOAÇÃO === */
.doacao {
  background: #fff3f3;
  text-align: center;
  padding: 4rem 1.5rem;
}

.doacao-topo i {
  font-size: 2rem;
  color: #e63946;
  margin-bottom: 0.5rem;
  display: block;
}

.doacao-topo h2 {
  color: #122060;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.doacao-topo p {
  color: #555;
  font-size: 1rem;
  margin-bottom: 2.5rem;
}

/* === CARDS === */
.doacao-cards {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

.card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  max-width: 500px;
  width: 100%;
  text-align: left;
}


.card-header {
  padding: 1rem;
}

.card-header.azul {
  background: #2448d8;
  color: #fff;
}

.card-header.dourado {
  background: #d8a224;
  color: #fff;
}

.card-body {
  padding: 1.5rem;
}

.card-body p {
  color: #333;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.card-body ul {
  list-style: none;
  padding-left: 1rem;
  margin-bottom: 1rem;
}

.card-body ul li {
  position: relative;
  margin-bottom: 0.5rem;
  padding-left: 1.2rem;
}

.card-body ul li::before {
  content: "•";
  color: #d8a224;
  font-size: 1.2rem;
  position: absolute;
  left: 0;
  top: -2px;
}

/* BLOCO DE INFORMAÇÕES */
.info {
  background: #f0f6ff;
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin-top: 1rem;
}

/* === RESPONSIVIDADE === */
@media (min-width: 768px) {
  .doacao-cards {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
  }

  .card {
    max-width: 420px;
  }

  .doacao-topo h2 {
    font-size: 2.2rem;
  }
}



/* ==== SEÇÃO EVENTOS ==== */
.eventos {
  background: #eefdf3;
  padding: 4rem 1.5rem;
  text-align: center;
}

.eventos-topo i {
  font-size: 2.5rem;
  color: #00843d;
  margin-bottom: 0.5rem;
  display: block;
}

.eventos-topo h2 {
  font-size: 1.9rem;
  color: #00337a;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.eventos-topo p {
  color: #555;
  font-size: 1rem;
  margin-bottom: 3rem;
}

/* ==== CARDS ==== */
.eventos-cards {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

.evento-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  max-width: 600px;
  width: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.evento-card:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}


.evento-card .data {
  background: linear-gradient(135deg, #02a94f, #00843d);
  color: #fff;
  border-radius: 10px;
  padding: 0.8rem 1.2rem;
  text-align: center;
  min-width: 65px;
}

.evento-card .data h3 {
  font-size: 1.5rem;
  font-weight: 700;
}

.evento-card .data span {
  font-size: 0.9rem;
}

.evento-card .detalhes {
  text-align: left;
}

.evento-card .detalhes h4 {
  color: #00337a;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.evento-card .detalhes p {
  color: #333;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* ==== RESPONSIVIDADE ==== */
@media (min-width: 768px) {
  .eventos-cards {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    /* deixa o espaçamento mais uniforme */
  }

  .evento-card {
    flex: 1 1 calc(45% - 2rem);
    max-width: 400px;
    /* controla o tamanho e evita que 3 caibam na mesma linha */
  }
}

@media (min-width: 1024px) {
  .eventos-topo h2 {
    font-size: 2.2rem;
  }

  .evento-card .detalhes h4 {
    font-size: 1.15rem;
  }
}




/* ===== Seção Quem Somos ===== */
.quem-somos {
  background: #f4f8ff;
  padding: 80px 5%;
  min-height: 100vh;
}

.container-quem-somos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  flex-wrap: wrap;
}

.container-quem-somos .imagem img {
  width: 100%;
  max-width: 450px;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.container-quem-somos .texto {
  max-width: 550px;
}

.container-quem-somos .texto h2 {
  font-size: 2rem;
  color: #002b6b;
  font-weight: 700;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.container-quem-somos .texto h3 {
  color: #00378a;
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.container-quem-somos .texto p {
  color: #444;
  line-height: 1.6;
  margin-bottom: 10px;
  text-align: justify;
}

/* ===== Cartões ===== */
.cards-quem-somos {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 60px;
}

.cards-quem-somos .card {
  background: white;
  border-radius: 15px;
  padding: 25px;
  width: 300px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: 0.3s ease;
}

.cards-quem-somos .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.12);
}

.cards-quem-somos .card i {
  font-size: 2rem;
  color: #0056d2;
  margin-bottom: 15px;
}

.cards-quem-somos .card h4 {
  color: #002b6b;
  font-weight: 600;
  margin-bottom: 10px;
}

.cards-quem-somos .card p {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.5;
}

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

  .container-quem-somos .texto {
    max-width: 100%;
  }

  .cards-quem-somos {
    flex-direction: column;
    align-items: center;
  }

  .cards-quem-somos .card {
    width: 90%;
  }
}

/* --- Estilos para a seção de Documentos Importantes --- */
.documentos-importantes {
    margin-top: 3rem; /* Espaçamento superior */
    padding-top: 2rem;
    border-top: 1px solid #eee; /* Linha divisória suave */
    text-align: left; /* Garante que o texto esteja alinhado à esquerda dentro deste bloco */
}

.documentos-importantes h3 {
    font-size: 1.5rem;
    color: #002b6b; /* Cor do título (azul CECLA) */
    margin-bottom: 1rem;
    display: flex; /* Para alinhar o ícone com o texto */
    align-items: center;
}

.documentos-importantes h3 i {
    font-size: 1.8rem;
    margin-right: 10px; /* Espaçamento entre o ícone e o texto */
    color: #ffbf00; /* Cor do ícone (amarelo CECLA) */
}

.documentos-importantes p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.documentos-importantes ul {
    list-style: none; /* Remove marcadores padrão da lista */
    padding: 0;
    margin: 0;
}

.documentos-importantes ul li {
    margin-bottom: 1rem;
    display: flex; /* Para alinhar o ícone, link e span na mesma linha */
    align-items: center;
    flex-wrap: wrap; /* Permite quebrar linha em telas pequenas */
}

.documentos-importantes ul li a {
    color: #007bff; /* Cor do link */
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    display: flex; /* Para alinhar o ícone do PDF com o texto do link */
    align-items: center;
    transition: color 0.3s;
}

.documentos-importantes ul li a:hover {
    color: #002b6b; /* Cor no hover */
}

.documentos-importantes ul li a i {
    font-size: 1.3rem; /* Tamanho do ícone de PDF */
    margin-right: 8px; /* Espaçamento entre o ícone e o texto do link */
    color: #dc3545; /* Cor vermelha para ícone de PDF */
}

.documentos-importantes ul li span {
    font-size: 0.9rem;
    color: #777;
    margin-left: 10px; /* Espaçamento após o link */
    flex: 1; /* Permite que o span ocupe o espaço restante */
}

/* Responsividade para a seção de documentos */
@media (max-width: 768px) {
    .documentos-importantes {
        margin-top: 2rem;
        padding-top: 1.5rem;
    }
    .documentos-importantes h3 {
        font-size: 1.3rem;
    }
    .documentos-importantes ul li {
        flex-direction: column; /* Links em coluna em telas menores */
        align-items: flex-start;
    }
    .documentos-importantes ul li span {
        margin-left: 0;
        margin-top: 5px; /* Espaçamento entre o link e a descrição */
    }
}