.carousel {
  position: relative;
  width: 100%;
  height: 36rem;
  overflow: hidden; /* Esconde os itens que não estão visíveis */
}

.carousel-container {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
  height: 100%; /* Garante que o container ocupe 100% da altura do carrossel */
}

.carousel-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.carousel-indicators {
  display: flex;
  position: absolute;
  bottom: 2%; /* Calculado com base na altura do carrossel */
  left: 80%;
  transform: translateX(-50%); /* Centraliza horizontalmente */
  gap: 1rem;
  z-index: 10;
}
.carousel-indicators button {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--cor-primaria-clara);
  border-radius: 50%;
  background-color: var(--cor-primaria-media);
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}
.carousel-indicators button:hover {
  border: 1px solid var(--cor-primaria-media);
  background-color: var(--cor-primaria-clara);
}
.carousel-indicators button:active {
  background-color: var(--cor-complementar);
  border: 1px solid var(--cor-primaria);
}
.carousel-indicators button.active {
  background-color: var(--cor-complementar);
  border: 1px solid var(--cor-primaria);
}

.divisor {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 0rem;
  top: 1.75rem;
}
.scroll-button {
  border: none;
  background: none;
}
.scroll-button img {
  height: 1.5rem;
}
.scroll-button img:hover {
  height: 1.6rem;
}
.arrow-icon {
  display: flex;
  bottom: 0%; /* Calculado com base na altura do carrossel */
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* Centraliza horizontalmente */
  z-index: 11;
}

.arrow-icon {
  animation: moveUpDown 5s infinite;
}

@keyframes moveUpDown {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(0.5rem);
  }

  100% {
    transform: translateY(0);
  }
}

@media (max-width: 1024px) {
  .carousel {
    height: auto; /* Deixa a altura ser calculada pela proporção */
    padding-top: 56.25%; /* Proporção de 16:9 (9 / 16 * 100 = 56.25) */
    position: relative; /* Necessário para o posicionamento interno */
  }

  .carousel-container {
    height: 100%; /* Adapta-se ao novo cálculo da altura */
    position: absolute; /* Garante que os itens fiquem dentro do espaço proporcionado */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .carousel-item {
    height: 100%; /* Ajusta os itens ao tamanho calculado do container */
  }

  .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Continua cortando a imagem para cobrir o espaço */
  }

  .carousel-indicators {
    bottom: 5%; /* Ajusta a posição para acomodar a mudança de proporção */
    left: 50%;
  }

  .carousel-indicators button {
    width: 1.25rem;
    height: 1.25rem;
  }

  .divisor {
    display: none;
  }
}