/* Estiliza a seção geral dos recursos, com fundo e padding */
#recursos {
    background-image: linear-gradient(135deg, #000000, #1E3401); /* Degradê de preto para cinza escuro */
    padding: 50px 30px; /* Aumenta o padding para uma sensação de espaçamento luxuosa */
    text-align: center; /* Centraliza o conteúdo dentro da seção */
}

.recursos-container h3{
    font-size: 40px;
}

/* Define o layout dos quadros dentro da seção de recursos */
.recursos-container {
    display: flex; /* Alinha as divs lado a lado */
    justify-content: center; /* Centraliza os quadros no centro da seção */
    gap: 60px; /* Mantém o espaçamento entre as divs mais equilibrado */
    flex-wrap: wrap; /* Permite que as divs quebrem linha em telas menores */
}

/* Estiliza cada quadro de depoimento */
.feature {
    max-width: 420px; /* Limita a largura máxima dos quadros */
    background: #FFF; /* Fundo branco para cada quadro */
    background-image: linear-gradient(135deg, #ffffff, #566640); /* Gradiente sutil */
    border-radius: 12px; /* Borda arredondada mais suave */
    box-shadow: 0 4px 20px rgba(0,0,0,0.1); /* Sombra sutil e ampla */
    overflow: hidden; /* Oculta qualquer conteúdo que ultrapasse a borda */
    padding: 25px; /* Espaçamento interno aprimorado */
    text-align: center; /* Centraliza o conteúdo no quadro */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animação suave para o efeito hover */
    position: relative; /* Permite aplicar detalhes decorativos */
}

.feature:hover {
    transform: scale(1.05); /* Aumenta levemente o quadro ao passar o mouse */
    box-shadow: 0 6px 25px rgba(0,0,0,0.15); /* Acentua a sombra no hover */
}

/* Estiliza a imagem do depoente dentro do quadro */
.testimonial-image {
    border-radius: 50%; /* Deixa a imagem circular */
    width: 110px; /* Aumenta o tamanho da imagem */
    height: 110px; /* Mantém a altura igual à largura */
    object-fit: cover; /* Garante que a imagem se ajuste ao círculo sem distorção */
    margin-bottom: 1.5rem; /* Espaço maior entre a imagem e o texto abaixo */
    border: 4px solid #CDB973; /* Adiciona uma borda dourada ao redor da imagem */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* Sombra suave na imagem */
}

/* Estiliza o texto do depoimento */
.testimonial-text p {
    font-family: 'Montserrat', serif; /* Fonte sofisticada */
    font-size: 17px; /* Tamanho levemente maior para leitura confortável */
    color: #444; /* Tom mais escuro para uma leitura mais fácil */
    margin-bottom: 1rem; /* Espaço generoso abaixo do texto */
    line-height: 1.6; /* Aumenta o espaçamento entre linhas para um visual mais arejado */
    max-width: 85%; /* Limita a largura para manter alinhamento */
    margin: 0 auto 1rem auto; /* Centraliza o texto horizontalmente */
    min-height: 100px; /* Altura mínima para manter os textos alinhados */
    display: flex;
    align-items: center; /* Centraliza verticalmente caso o texto seja curto */
    justify-content: center; /* Centraliza horizontalmente */
    text-align: center; /* Alinha o texto no centro */
}

.testimonial-text li{
    font-family: 'Montserrat', serif; /* Fonte sofisticada */
    font-size: 17px; /* Tamanho levemente maior para leitura confortável */
    color: #444; /* Tom mais escuro para uma leitura mais fácil */
    margin-bottom: 1rem; /* Espaço generoso abaixo do texto */
    line-height: 1.6; /* Aumenta o espaçamento entre linhas para um visual mais arejado */
    max-width: 85%; /* Limita a largura para manter alinhamento */
    margin: 0 auto 1rem auto; /* Centraliza o texto horizontalmente */
    display: flex;
    align-items: center; /* Centraliza verticalmente caso o texto seja curto */
    justify-content: center; /* Centraliza horizontalmente */
    text-align: center; /* Alinha o texto no centro */
}

/* Estiliza o nome do depoente */
.testimonial-text span {
    font-family: 'Dancing Script', serif; /* Fonte estilosa para o nome */
    font-size: 45px; /* Tamanho maior para destacar */
    color: #090C02; /* Tom mais escuro para diferenciar do depoimento */
    font-weight: 500; /* Peso intermediário para ênfase */
    display: block; /* Mantém o nome abaixo do texto */
    margin-top: 0.5rem; /* Espaçamento acima do nome */
    letter-spacing: 0.5px; /* Pequeno espaçamento entre letras */
    text-align: center; /* Centraliza o nome */
}