/* Novo wrapper para o carrossel e seus controles */
.carousel-wrapper {
  position: relative; /* Permite o posicionamento absoluto dos botões em relação a este wrapper */
  width: 100%;
  max-width: 1200px; /* Garante que o carrossel não fique excessivamente largo em telas muito grandes */
  margin: 0 auto; /* Centraliza o carrossel */
  padding: 0 50px; /* Espaço generoso para os botões não sobreporem o conteúdo */
  box-sizing: border-box;
}

/* Container que efetivamente rola */
.carousel-container {
  display: flex;
  overflow-x: auto; /* Permite a rolagem horizontal */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* Melhora a experiência em dispositivos móveis */
  scrollbar-width: none; /* Oculta a barra de rolagem no Firefox */
}

.carousel-container::-webkit-scrollbar {
  display: none; /* Oculta a barra de rolagem no Chrome, Safari, etc. */
}

/* Slide individual */
.carousel-slide {
  flex: 0 0 50%; /* Em telas grandes, mostra 2 slides por vez */
  box-sizing: border-box;
  padding: 0 1rem; /* Espaçamento entre os slides */
}

/* Botões de controle */
.prev-btn,
.next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #395346; /* Cor principal do tema */
  font-size: 3rem; /* Tamanho grande para fácil clique */
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  line-height: 1;
}

.prev-btn {
  left: 10px; /* Posição à esquerda */
}

.next-btn {
  right: 10px; /* Posição à direita */
}

/* --- Media Queries para Responsividade --- */

/* Telas Médias (ex: tablets) */
@media (max-width: 992px) {
  .carousel-slide {
    flex: 0 0 50%; /* Mantém 2 slides, mas o espaço será menor */
  }
}

/* Telas Pequenas (ex: celulares) */
@media (max-width: 768px) {
  .carousel-wrapper {
    padding: 0 40px; /* Ajusta o padding para telas menores */
  }

  .carousel-slide {
    flex: 0 0 100%; /* Mostra 1 slide por vez em celulares */
  }

  .prev-btn,
  .next-btn {
    font-size: 2.5rem; /* Ajusta o tamanho da seta para telas menores */
  }

  .prev-btn { left: 5px; }
  .next-btn { right: 5px; }
}