/* Sección principal con background responsivo */
    #hero {
      background-color: white;
       
      background-position: center;      /* Centra la imagen */
      background-repeat: no-repeat;     /* No repita la imagen */
      min-height: 100vh;                /* Ocupa al menos toda la altura de la ventana */
    }
    /* Opcional: superponer un degradado semitransparente */
    #hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background-color: white;
    }
    /* Asegura que el contenido quede por encima del overlay */
    #hero .container {
      position: relative;
      z-index: 1;
    }
     /* Si quieres que el navbar quede encima del hero, lo hacemos absolute y transparente */
    .navbar-top {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      background: transparent;
    }