body{
    width: 100%;
    height: 100%;
}



/* Estilo general para la imagen de fondo */
.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('./assets/FONDO-LANDING-PAGE-NIU-TELECOM.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Estilo del contenedor del formulario */
.form-container {
    background: #ffffff; /* Fondo blanco del formulario */
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    min-width: 200px;
     /* max-width: 50vh;  */
     display: flex;
     /* width: 100%; */
     justify-content: center;
     flex-direction: column;
     flex-wrap: wrap;
}

/* Estilo de los encabezados y el formulario */
h1, p {
    font-weight: bold;
}

/* estilo del contenedor de fondo */
.contai-form{
    position: absolute;
    width: 100%;
    height: 100%;
    margin-right: 2%;
    padding-left: 15px;
    padding-right: 15px;
    justify-content: flex-end;
    display: flex;
    align-items: center;
}

.container{
     display: block; 
    width: 550px; 
    height: 100vh;
    background-color: #040e60;
    align-content: center;
    margin-right: 0;
    margin-left: 0;
    padding-left: 15px;
    padding-right: 15px;
}


/* Botón de enviar */
.btn-primary {
    position: relative;
    left: 28%;
    top: 10%;
    background-color: #f50c2b;
    border: none;
    border-radius: 8px;
    width: 38%;
}

.btn-primary:hover {
    background-color: #ebbbbb;
    color: #000;
}


/* Media Query para pantallas pequeñas (móviles) */
@media (max-width: 767px) {
    .form-container {
     width: 80% !important; 
     padding: 12px;
     flex-wrap: nowrap;
    }
    .contai-form {
    margin-right: 1%;
    justify-content: center;
    width: 100%;
    }

    .container {
      display: flex !important;
      width: 750px !important; 
      max-width: 700px;
      justify-content: center;
      align-items: center;
      /* background-color: #ffffff00; */
    }

    h1 {
        font-size: 1.5rem;
    }
        
    p {
            font-size: .8rem;
            margin-bottom: .3rem;
    }

    .form-group{
        margin-bottom: .3rem;
    }
}



/* Media Query para pantallas medianas (tablets) */
/* @media (min-width: 768px) and (max-width: 875px) {
    .form-container {
        /* width: 90%; */
    /* }

    
    .contai-form{
        /* background-color: #ffffff00; */
    /* }
 
    .container{
        width: 300px; 
      }


} */





/* Media Query para pantallas grandes (escritorios) */
@media (max-width: 1200px) {
    .form-container {
        width: 100%; 
        padding: 12px;
    }
.contai-form{
    margin-right: 1%;
}

    .container{
        display: block;
      width: 350px; 
    }
    h1 {
        font-size: 1.8rem;
        }
        
    p {
            font-size: .8rem;
            margin-bottom: .5rem;
        }

    .form-group{
        margin-bottom: .5rem;
        }
}