/* Define o estilo do container principal */
.container-faq {
    width: 100%; /* Ocupa toda a largura disponível */
    margin: 0; /* Remove margem */
    padding: 5px; /* Adiciona um pequeno espaçamento interno */
} 

/* Estilização do título principal (h1) */
h1 {
    text-align: center; /* Centraliza o texto */
    color: #192B1C; /* Define uma cor marrom escuro */
    margin-bottom: 40px; /* Adiciona um espaçamento inferior */
}

/* Define o estilo de cada item de FAQ */
.faq-item {
    margin-bottom: 20px; /* Adiciona um espaçamento inferior entre os itens */
    border-bottom: 1px solid #ddd; /* Adiciona uma borda inferior cinza claro */
    padding-bottom: 10px; /* Adiciona espaçamento interno inferior */
    cursor: pointer; /* Altera o cursor para indicar que o item é clicável */
}

/* Estiliza o cabeçalho do FAQ (contendo a pergunta e o ícone) */
.faq-header {
    display: flex; /* Usa flexbox para alinhar elementos horizontalmente */
    justify-content: space-between; /* Espaça os itens (pergunta e ícone) ao máximo */
    align-items: center; /* Alinha verticalmente ao centro */
}

/* Define o estilo do título das perguntas (h3) */
.faq-item h3 {
    font-size: 20px; /* Tamanho da fonte do título */
    color: #192B1C; /* Define uma cor verde escuro */
    margin: 0; /* Remove margens padrão */
}

/* Estilização para o parágrafo que contém a resposta */
.faq-item p {
    font-size: 8px; /* Define um tamanho pequeno para o texto */
    line-height: 1.5; /* Define o espaçamento entre linhas */
    display: none; /* Esconde o parágrafo por padrão */
    margin-top: 10px; /* Adiciona espaçamento superior */
    text-align: left; /* Alinha o texto à esquerda */
}

/* Define o estilo para quando o item de FAQ está ativo (aberto) */
.faq-item.active p {
    display: block; /* Mostra o parágrafo */
}

/* Estilo ao passar o mouse sobre o título da pergunta */
.faq-item h3:hover {
    color: #000000; /* Altera a cor para verde claro ao passar o mouse */
}

/* Define o estilo do ícone ao lado das perguntas */
.icon {
    font-size: 20px; /* Tamanho do ícone */
    color: #8c4318; /* Cor do ícone (marrom escuro) */
    margin-left: 10px; /* Adiciona espaçamento à esquerda do ícone */
    transition: transform 0.3s ease; /* Transição suave para mudanças no ícone */
}

/* Define o comportamento do ícone quando o item de FAQ está ativo */
.faq-item.active .icon {
    transform: rotate(45deg); /* Roda o ícone em 45 graus */
}

/* Estilização para diferentes tamanhos de tela (responsivo) */

/* Ajustes para dispositivos com largura máxima de 768px */
@media (max-width: 768px) {
    .container-faq {
        width: calc(100% - 20px); /* Largura ajustada para preencher a tela com uma margem de 10px em cada lado */
        margin: 10px; /* Espaço de 10px das laterais */
        padding: 10px; /* Ajusta o padding para economizar espaço */
    }

    h1 {
        font-size: 24px; /* Diminui o tamanho do título */
        margin-bottom: 30px; /* Reduz o espaçamento inferior */
    }

    .faq-item h3 {
        font-size: 18px; /* Reduz o tamanho do texto das perguntas */
    }

    .faq-item p {
        font-size: 17px; /* Diminui o tamanho do texto das respostas */
    }

    .icon {
        font-size: 16px; /* Ajusta o tamanho do ícone */
    }
}

/* Ajustes para dispositivos com largura máxima de 320px */
@media (max-width: 320px) {
    .container-faq {
        width: calc(100% - 10px); /* Largura ajustada para quase preencher toda a tela */
        margin: 5px; /* Margem de 5px para uma distância maior nas laterais */
    }

    h1 {
        font-size: 10px; /* Reduz ainda mais o tamanho do título */
    }

    .faq-item h3 {
        font-size: 6px; /* Reduz o tamanho das perguntas */
    }

    .faq-item p {
        font-size: 6px; /* Diminui ainda mais o tamanho do texto */
    }

    .icon {
        font-size: 14px; /* Reduz o tamanho do ícone */
    }
}

/* Ajustes para dispositivos com largura máxima de 425px */
@media (max-width: 425px) {
    .container-faq {
        width: calc(100% - 10px); /* Largura ajustada para quase preencher toda a tela */
        margin: 5px; /* Margem de 5px para uma distância maior nas laterais */
    }

    h1 {
        font-size: 18px; /* Reduz ainda mais o tamanho do título */
    }

    .faq-item h3 {
        font-size: 18px; /* Reduz o tamanho das perguntas */
    }

    .faq-item p {
        font-size: 17px; /* Diminui ainda mais o tamanho do texto */
    }

    .icon {
        font-size: 14px; /* Reduz o tamanho do ícone */
    }
}

/* Ajustes para telas maiores (largura mínima de 1024px) */
@media (min-width: 1024px) {
    .container-faq {
        width: calc(100% - 60px); /* Largura ajustada com 30px de margem de cada lado */
        margin: 30px; /* Maior espaço nas laterais */
        padding: 30px; /* Aumenta o padding */
    }

    h1 {
        font-size: 20px; /* Tamanho maior para o título */
        margin-bottom: 50px; /* Aumenta o espaçamento inferior */
    }

    .faq-item h3 {
        font-size: 20px; /* Tamanho maior para as perguntas */
    }

    .faq-item p {
        font-size: 18px; /* Tamanho maior para o texto das respostas */
        line-height: 1.8; /* Maior espaçamento entre linhas */
    }

    .icon {
        font-size: 22px; /* Aumenta o tamanho do ícone */
    }
}

/* Ajustes para telas muito grandes (largura mínima de 1440px) */
@media (min-width: 1440px) {
    .container-faq {
        width: calc(100% - 60px); /* Largura ajustada com 30px de margem de cada lado */
        margin: 30px; /* Maior espaço nas laterais */
        padding: 30px; /* Aumenta o padding */
    }

    h1 {
        font-size: 30px; /* Aumenta o tamanho do título */
    }

    .faq-item h3 {
        font-size: 22px; /* Tamanho maior para perguntas */
    }

    .faq-item p {
        font-size: 18px; /* Tamanho maior para respostas */
    }

    .icon {
        font-size: 24px; /* Aumenta o tamanho do ícone */
    }
}

/* Ajustes para telas muito grandes (largura mínima de 2560px) */
@media (min-width: 2560px) {
    .container-faq {
        width: calc(100% - 60px); /* Largura ajustada com 30px de margem de cada lado */
        margin: 30px; /* Maior espaço nas laterais */
        padding: 30px; /* Aumenta o padding */
    }

    h1 {
        font-size: 40px; /* Aumenta o tamanho do título */
    }

    .faq-item h3 {
        font-size: 30px; /* Tamanho maior para perguntas */
    }

    .faq-item p {
        font-size: 25px; /* Tamanho maior para respostas */
    }

    .icon {
        font-size: 24px; /* Aumenta o tamanho do ícone */
    }
}