.container1 {   
    max-width: 1200px; /* Ancho máximo del contenedor */
    margin: 0 auto; /* Centrar el contenedor */
    padding: 20px; /* Espaciado interno */
}

.row1 {
    display: flex; /* Usar flexbox para alinear elementos */
    
}

.col-6 {
    flex: 0 0 50%; /* Ocupa el 50% del ancho */
    max-width: 50%; /* Asegura que no exceda el 50% */
    padding: 15px; /* Espaciado interno */
}

.card1 {
    border: 1px solid #dee2e6; /* Borde de la tarjeta */
    border-radius: 0.25rem; /* Bordes redondeados */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Sombra sutil */
    background-color: #fff; /* Color de fondo de la tarjeta */
}

.card-header1 {
    background-color: #ccccccbd; /* Color de fondo del encabezado */
    padding: 15px; /* Espaciado interno */
    margin: 10px;
    text-align: center; /* Centrar texto */
}

.card-header1 h4{
    background-color: #42A8BF;
    color: white;
    font-weight: bold;
}

.card-body1 {
    padding: 20px; /* Espaciado interno */
}

.form-group1 {
    margin-bottom: 15px; /* Espaciado entre grupos de formulario */
}

label {
    font-size: 19px; /* Tamaño de fuente de las etiquetas */
}

.form-control1 {
    width: 100%; /* Ancho completo */
    padding: 10px; /* Espaciado interno */
    border: 1px solid #ced4da; /* Borde del campo de entrada */
    border-radius: 0.25rem; /* Bordes redondeados */
}

.btn1{
    text-align: center;
}

.custom-button1 {
    background-color: rgb(194, 14, 26); /* Color de fondo del botón */
    color: white; /* Color del texto del botón */
    padding: 10px 15px; /* Espaciado interno del botón */
    border: none; /* Sin borde */
    border-radius: 0.25rem; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar el mouse */
    margin-top: 15px 0;
    text-align: center;
}

.custom-button1:hover {
    background-color: #42A8BF; /* Color de fondo al pasar el mouse */
}

/* Media Queries para Responsividad */

@media (max-width: 768px) {
    .card-header1 h4{
        font-size: 1.5rem;
    }
    label {
        font-size: 14px; /* Tamaño de fuente más pequeño para pantallas pequeñas */
    }
    .form-control1 {
        width: 100%; /* Asegura que el campo de entrada ocupe el 100% */
    }
    .custom-button1{
        font-size: 1.3.rem;
    }
}

@media (max-width: 576px) {

    .card-header1 h4{
        font-size: 1.2rem;
    }
    label {
        font-size: 14px; /* Tamaño de fuente aún más pequeño para pantallas muy pequeñas */
    }
    .custom-button1 {
        width: 100%; /* Botón ocupa el 100% del ancho en pantallas muy pequeñas */
        padding: 12px; /* Aumentar el padding para mejor usabilidad */
    }
}