.d-flex {
    display: flex;
}


.transition {
    transition: all 0.3s ease;
}

/* Estilos para pantallas pequeñas (móviles) */
@media (max-width: 767px) {
    .d-flex.flex-center.flex-column.flex-column-fluid {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .h-100 {
        width: 100% !important;
    }

    #secc-left {
        display: none; /* Ocultar el lado izquierdo en móviles */
    }
    
    #secc-right {
        width: 100%; /* Asegurar que el lado derecho ocupe el ancho completo */
    }
    #secc-login {
        padding-right:0px; /* Asegurar que el lado derecho ocupe el ancho completo */
    }

    .w-xl-600px, .w-lg-500px {
        width: 100%; /* Asegurar que el contenedor tenga el 100% del ancho */
        /*padding: 10px;*/ /* Añadir padding para mejor legibilidad */
    }
    .w-50 {
        width: !important; 
    }
    .logo {
        height:100px;
        /*margin-left : -40%;*/
    }
    #frmLogin{
        padding-left:15px 15px;
    }
    .form-control{
        width:100% !important;
    }
    .btnSubmit {
        width: 100% !important;
        float:left;
    }
    .titulo {
        /*margin-left: -40%;*/
    }

    .position-relative {
        width: 100%; /* Asegurar que la posición relativa se adapte al ancho completo */
        height: auto; /* Ajustar altura automáticamente */
    }

    img {
        max-width: 100%; /* Limitar el ancho de las imágenes al 100% del contenedor */
        height: 20%; /* Ajustar la altura automáticamente */
    }

    .text-center {
        text-align: center;
    }

    .mb-10 {
        margin-bottom: 1rem; /* Reducir los márgenes inferiores */
    }

    .form-control {
        font-size: 14px; /* Ajustar el tamaño de la fuente en formularios */
    }

    .btn {
        padding: 10px 20px; /* Ajustar el padding de los botones */
        font-size: 16px; /* Ajustar el tamaño de la fuente en los botones */
    }
}