html {
  scroll-padding-top: 3.5rem;
}

header {
  padding-top: 9.5rem;
  padding-bottom: 6rem;
}

section {
  padding-top: 9rem;
  padding-bottom: 9rem;
}

/* Carrusel */
.carousel-inner img {
  height: 600px; /* Ajusta la altura de las imágenes */
  object-fit: cover; /* Ajusta el contenido manteniendo el aspecto y cubriendo el área */
}

.carousel-image {
  position: relative;
  width: 100%;
  height: 100vh; /* Full viewport height */
}

.carousel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); /* Degradé oscuro */
  z-index: 1; /* Asegúrate de que el texto esté por encima de la imagen */
}

.carousel-text {
  z-index: 2; /* Asegúrate de que el texto esté encima del fondo degradé */
  color: white;
  width: 65%; /* El texto ocupará el 65% del ancho */
}

.carousel-caption h5,
.carousel-caption p {
  color: white; /* Asegura que el texto sea legible sobre el fondo */
}

.carousel-item {
  text-align: center; /* Centra los contenidos del carrusel */
}

/* Características */
.feature {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
  width: 4rem;
  font-size: 2rem;
}

/* Logos de Clientes */
.logo-cliente {
  max-width: 200px; /* Ancho máximo del logo */
  max-height: 100px; /* Altura máxima del logo */
  object-fit: contain; /* Asegura que la imagen no se deforme */
}
