#hero-slider .carousel-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

#hero-slider .carousel-caption h2 {
  font-size: 2.5rem;
}

#hero-slider .carousel-caption .btn {
  min-width: 160px;
}

/* Slider: centraliza e faz crop da imagem mantendo o foco no centro */
#hero-slider .item img {
  width: 100%;
  height: 500px;
  /* altura padrão para desktop */
  object-fit: cover;
  /* preenche o container cortando o excedente */
  object-position: center;
  /* mantém o centro sempre visível */
}

/* Tablet: reduz um pouco a altura */
@media (max-width: 991px) {
  #hero-slider .item img {
    height: 400px;
  }
}

/* Mobile: altura ainda menor para caber na tela */
@media (max-width: 767px) {
  #hero-slider .item img {
    height: 250px;
  }
}

/* Posiciona o caption ocupando só o terço direito do slide */
#hero-slider .item .carousel-caption {
  position: absolute;
  top: 50%;
  /* centra verticalmente */
  right: 5%;
  /* afasta um pouco da borda (ajuste a gosto) */
  transform: translateY(-50%);
  width: 33.33%;
  /* 1/3 da largura total */
  display: flex;
  flex-direction: column;
  /* empilha título + botão */
  align-items: flex-end;
  /* alinha tudo à direita */
  text-align: right;
  /* texto alinhado à direita */
  padding: 0;
  /* sem padding extra */
}

/* Se quiser que, no mobile, ocupe metade da largura, por exemplo */
@media (max-width: 767px) {
  #hero-slider .item .carousel-caption {
    width: 50%;
    right: 10%;
  }
}

/* Limita a altura do card e aplica cover para manter o foco central */
.overlay img {
  height: 100px;
  /* altura desejada */
  object-fit: cover;
  /* preenche o container cortando o excedente */
  width: 100%;
}

/* Garante que o .overlay não cresça além desse tamanho */
.overlay {
  max-height: 100px;
  overflow: hidden;
}

/* Aplica border-radius nas imagens do slider */
#hero-slider .owl-carousel .item {
  overflow: hidden;
  /* garante que o conteúdo não vaze fora das bordas arredondadas */
  border-radius: 16px;
  /* ajuste o valor (por ex. 8px, 12px, 16px) conforme preferir */
}

#hero-slider .owl-carousel .item img {
  border-radius: inherit;
  /* herda o radius definido no container */
}