/* Esconde os botões inicialmente */
.owl-buttons {
  display: none;
}

/* Exibe os botões ao passar o mouse sobre o carrossel */
.owl-carousel:hover .owl-buttons {
  display: block;
  transition: display 0.3s ease-in-out; /* Suaviza a transição ao exibir os botões */
}

/* Alinha os itens do carrossel */
.owl-item {
  text-align: center;
}

/* Estilo dos botões de navegação */
.owl-theme .owl-controls .owl-buttons div {
  background: transparent;
  color: #869791;
  font-size: 40px;
  line-height: 300px;  /* Ajuste esse valor conforme necessário para o tamanho do botão */
  margin: 0;
  padding: 0 60px;
  position: absolute;
  top: 0;
  transition: color 0.3s ease, background-color 0.3s ease; /* Suaviza a cor e o fundo ao passar o mouse */
}

/* Posição do botão "Anterior" */
.owl-theme .owl-controls .owl-buttons .owl-prev {
  left: 0;
  padding-left: 20px;
}

/* Posição do botão "Próximo" */
.owl-theme .owl-controls .owl-buttons .owl-next {
  right: 0;
  padding-right: 20px;
}

.owl-carousel .owl-item img {
    display: block;
    width: auto !important;
}

/* Efeito de hover nos botões */
.owl-theme .owl-controls .owl-buttons div:hover {
  color: #007EC3; /* Cor de destaque ao passar o mouse */
  background-color: rgba(0, 0, 0, 0.2); /* Cor de fundo suave ao passar o mouse */
}

/* Responsividade para dispositivos móveis */
@media (max-width: 767px) {
  .owl-theme .owl-controls .owl-buttons div {
    font-size: 30px;  /* Tamanho da fonte reduzido em telas menores */
    line-height: 100px; /* Ajuste o line-height para uma área de clique adequada */
    padding: 0 30px; /* Diminui o padding para não ocupar muito espaço */
  }
}