.hero-section {
  background-image: url('/static/site/img/back2.png');
  background-color: #b5db67;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* Use viewport moderno para mobile (evita barra do navegador bagunçar 100vh) */
  min-height: 100svh; /* fallback pra mobile moderno */
  min-height: 100dvh; /* iOS/Android recentes */
  min-height: 100vh;  /* fallback geral */
}

/* Mobile: reduz altura e “sobe” o foco da imagem */
@media (max-width: 768px) {
  .hero-section {
    min-height: 70svh;      /* em vez de height fixa */
    background-position: top center; /* foca o topo pra cortar menos o assunto */
  }
}



.hero-subtitle {
    
    font-weight: 500;
    color: #fff; /* texto branco para contraste */
    text-align: center;

    /* Sombra para melhor leitura */
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
}




/* Mantém os botões lado a lado no desktop */
.hero-buttons {
    display: flex;
    align-items: center;
}

/* Ajuste para celular */
@media (max-width: 768px) {
    .hero-buttons {
        display: flex;
        flex-direction: column;  /* Empilha os botões */
        gap: 12px;               /* Espaçamento entre eles */
        width: 100%;
    }

    .hero-buttons .btn {
        width: 100%;             /* Botões ocupam a largura total */
        text-align: center;      /* Centraliza o texto */
    }
}





.img-bg {
  width: 100%;
  height: 400px; /* ajuste conforme o tamanho desejado */
  background-image: url('/static/site/img/bac.jpg');
  background-size: cover;    
  background-position: center; /* centraliza */
  border-radius: 12px;         /* opcional */
  
}