body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  
/* Fondo con imagen y opacidad separada */
.hero-header {
    position: relative;
    background-image: url('img/fondo.png'); /* Cambia la ruta a tu imagen */
    background-size: cover;
    background-position: center;
    height: 100vh;
    overflow: hidden;
}
  

/* Capa oscura encima de la imagen pero debajo del texto */
.hero-header .overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Ajusta la opacidad aquí */
    z-index: 1;
}
  
/* Asegura que el navbar y el texto estén por encima del fondo oscuro */
.z-2 {
    z-index: 2;
}

  /* Sección de video con mensaje motivacional */
.video-section {
  height: 100vh; /* Toda la pantalla */
  overflow: hidden;
}

#bg-video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.video-section .overlay {
  z-index: 2;
}

.video-section .container {
  z-index: 3;
}
/* Sección de estadísticas con cards limpias */
#estadisticas .card {
    transition: transform 0.3s ease;
}
  
#estadisticas .card:hover {
    transform: scale(1.03);
}
  
#estadisticas img {
    height: 250px;
    object-fit: contain;
    border-radius: 15%;
}
html {
    scroll-behavior: smooth;
}

.card-hover {
  transition: transform 0.3s ease, border 0.3s ease;
  border: 5px solid transparent;
  border-radius: 1rem;
}

.card-hover:hover {
  transform: scale(1.05);
  border-color: #198754; /* Verde Bootstrap */
}
#video {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.row img {
  max-height: 300px; /* Ajusta la altura de las imágenes para que no se desborden */
  object-fit: cover; /* Mantiene la proporción de la imagen */
}
.col-md-3 {
  text-align: center; /* Centra el texto debajo de la imagen */
}

#tipos-residuos {
  position: relative;
  background-image: url('img/sostenible.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#tipos-residuos::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); /* Degradado negro con opacidad */
  z-index: 1;
}

.container {
  position: relative;
  z-index: 2; /* Asegura que el contenido esté por encima del fondo con degradado */
}