/* =========================================================
   🔹 BANNER/CARDS SECTION (Seção com 4 cards informativos)
   ========================================================= */

/* Aplica a fonte Roboto a toda a seção */
.banner-section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 40px; /* Mantem padding lateral */
    margin-top: 60px; /* Espaço acima */
    margin-bottom: 60px; /* Espaço abaixo */
    /* ADICIONADO: Fonte Roboto */
    font-family: 'Roboto', sans-serif;
}

.banner-container {
    width: 100%;
    max-width: 1200px; /* Limita largura */
    margin: 0 auto; /* Centraliza */
}

/* Título da seção */
.banner-container h3 {
    margin-bottom: 40px; /* Espaço abaixo do título */
    /* ADICIONADO: Peso da fonte */
    font-weight: 700; /* Bold */
    color: #333; /* Cor do título (ajuste se necessário) */
    font-size: 1.8rem; /* Tamanho do título (ajuste se necessário) */
}
/* A classe .text-center do Bootstrap já centraliza */

.cards-container {
    display: grid;
    /* Cria colunas responsivas: mínimo 250px, máximo 1fr (ocupa espaço igual) */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px; /* Espaço entre os cards */
    background: none;
}

/* Estilo individual de cada card informativo */
.card {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden; /* Garante que a imagem respeite o border-radius */
    transition: all 0.3s ease;
    text-align: center;
    display: flex; /* Para melhor controle do conteúdo interno se necessário */
    flex-direction: column; /* Empilha imagem e texto */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.card img {
    width: 100%;
    height: 180px; /* Altura fixa para as imagens */
    object-fit: cover; /* Garante que a imagem cubra a área */
}

/* Se houver título DENTRO do card */
.card h3 {
    font-size: 1.2rem;
    margin: 15px 15px 5px 15px; /* Adiciona padding lateral */
    color: #333;
    font-weight: 700; /* Bold */
}

/* Parágrafo dentro do card */
.card p {
    font-size: 0.95rem;
    color: #666;
    padding: 0 15px 20px 15px; /* Padding completo */
    margin-top: 10px; /* Mantém espaço acima (do style inline) */
    /* ADICIONADO: Peso da fonte */
    font-weight: 400; /* Regular */
    line-height: 1.6; /* Melhora legibilidade */
    flex-grow: 1; /* Faz o parágrafo ocupar espaço se alturas variarem */
}

/* =========================================================
   RESPONSIVIDADE CARDS SECTION
   ========================================================= */
@media (max-width: 768px) {
    .banner-section {
        padding: 0 20px; /* Menos padding lateral */
        margin-top: 40px; /* Menos espaço acima */
        margin-bottom: 40px; /* Menos espaço abaixo */
    }
    .banner-container h3 {
        font-size: 1.5rem; /* Título menor */
        margin-bottom: 30px; /* Menos espaço abaixo */
    }
    .cards-container {
        gap: 15px; /* Menos espaço entre cards */
    }
    .card img {
        height: 150px; /* Imagem menor */
    }
    .card p {
        font-size: 0.9rem; /* Texto menor */
        padding: 0 10px 15px 10px; /* Padding menor */
    }
}