/* Estilos para el formulario */

.form {

    text-align: center;

    padding: 20px;

    background-color: #ffffff;

    margin: 40px auto;

    width: 80%; /* Reducido el ancho del formulario */

}



/* Estilos para los campos de entrada */

.input {

    width: calc(100% - 20px);

    padding: 8px; /* Reducido el padding de los campos de entrada */

    margin: 6px 0; /* Reducido el margen superior e inferior */

    font-size: 14px; /* Reducido el tamaño de fuente */

}



/* Estilos para el botón de enviar */

.submit {

    background-color: #bf162d;

    color: #fff;

    width: calc(100% - 20px);

    padding: 8px; /* Reducido el padding del botón */

    border: none;

}



/* Estilos para mensajes de éxito */

.ok {

    width: 90%;

    display: inline-block;

}



/* Estilos para mensajes de error */

.bad {

    width: 90%;

    padding: 8px; /* Reducido el padding del mensaje de error */

    display: inline-block;

}



.texto-voluntario{

    text-align: center;

    color: #fff;

    margin: 30px !important;

    font-size: 50px;

  }



  .banda-roja-voluntarios{

    background-color: #bf162d; /* Establece el color de fondo a rojo */

    width: 100%; /* Hace que la banda ocupe todo el ancho disponible */

    height: auto; /* Define la altura de la banda, puedes ajustarla según tus necesidades */

    margin-top: 105px; /*Coloca la banda en la posicion vertical que quieras */

    left: 0; /* Asegura que la banda comience desde el borde izquierdo */

  }



  @media (max-width: 480px), (max-width: 820px), (max-width: 912px), (max-width: 1024px) {

    .banda-roja-voluntarios{

        margin-top: 100px; /*Coloca la banda en la posicion vertical que quieras */

      }

    

  }