/* Ajuste para a altura do hero */
.hero-section {
    height: 500px !important; /* Aumentado para 500px conforme solicitado */
}

/* Ajuste para reduzir espaçamentos e garantir que o teste apareça na primeira dobra */
.container.mx-auto {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

/* Compactar o card principal */
.bg-white.rounded-lg {
    margin-top: -20px !important; /* Move o card para cima */
}

/* Reduzir espaçamento do título e descrição */
.p-4, .p-6 {
    padding: 0.5rem !important;
}

/* Reduzir espaço entre elementos */
.mb-6, .mb-4, .mb-2 {
    margin-bottom: 0.5rem !important;
}

.mt-3, .mt-2 {
    margin-top: 0.25rem !important;
}

/* Reduzir margens verticais */
.py-4, .py-3 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.px-6, .px-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* Reduzir espaçamento das opções de resposta */
.answer-btn {
    padding: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

/* Reduzir espaçamento entre botões de resposta */
.space-y-4 > * {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

.gap-4 {
    gap: 0.25rem !important;
}

/* Reduzir tamanho dos emojis/emotions */
.emoji, .emotion-icon, img.emoji, [class*="emotion"] img {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
}

/* Adicional: Compactar mais os cards de resposta */
.bg-white.rounded-lg.shadow-md, .answer-card {
    margin-bottom: 0.25rem !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

/* Ajustar espaçamento para telas pequenas */
@media (max-width: 768px) {
    .hero-section {
        height: 150px !important;
    }
}