/* Removendo altura fixa do item do carousel */
.carousel-item {
  height: 500px; /* Define uma altura fixa para todas as imagens */
}

.carousel-item img {
  height: 100%;
  width: 100%;
  object-fit: cover; /* Mantém a proporção e corta o excesso */
}


/* Ajustando melhor a posição do texto dentro da imagem */
.carousel-caption {
  bottom: 15%; /* Mantém o texto dentro da imagem */
  width: 80%; /* Garante que o texto não ultrapasse os limites */
  text-align: center;
}

/* Ajuste do título dentro do carousel */
.carousel-caption h1 {
  font-size: 2.2rem; /* Tamanho menor para não estourar */
  font-weight: bold;
}

/* Ajuste do texto dentro do carousel */
.carousel-caption p {
  font-size: 1.2rem;
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
  .carousel-caption {
      bottom: 5%; /* Mantém o texto mais abaixo para melhor visibilidade */
      width: 90%;
      padding: 10px;
  }
  .carousel-item {
    height: 350px; /* Reduz a altura em telas menores */
  }
  
  .carousel-caption h1 {
      font-size: 1.5rem; /* Reduz para celulares */
  }

  .carousel-caption p {
      font-size: 1rem;
  }

  .carousel-caption .btn {
      font-size: 1rem;
      padding: 8px 12px;
  }
}

/* texto do carousel*/
@media (max-width: 768px) {
  .carousel-caption {
      bottom: 20%; /* Levanta o texto para evitar sobreposição */
      width: 90%;
      padding: 10px;
  }

  .carousel-caption h1 {
      font-size: 1.5rem;
      word-wrap: break-word;
  }

  .carousel-caption p {
      font-size: 1rem;
      max-width: 90%;
      margin: 0 auto;
  }

  .carousel-caption .btn {
      font-size: 0.9rem;
      padding: 6px 10px;
  }
}

@media (max-width: 480px) {
  .carousel-caption {
      bottom: 25%; /* Levanta ainda mais para telas muito pequenas */
      width: 85%;
  }

  .carousel-caption h1 {
      font-size: 1.2rem;
  }

  .carousel-caption p {
      font-size: 0.9rem;
  }

  .carousel-caption .btn {
      font-size: 0.8rem;
      padding: 5px 8px;
  }
}