/*
###############################################################################################################################################################
DEMO FORM SPECIFIC STYLES
###############################################################################################################################################################
*/

/* La plupart des styles sont hérités de xploo_forms_unified.css */

.demo-header-illustration {
    max-width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo-header-illustration img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2));
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/********************** RESPONSIVE OVERRIDES **********************/

@media screen and (max-width: 768px) {
    .demo-header {
        flex-direction: column;
    }
    
    .demo-header-illustration {
        max-width: 70%;
        margin-top: 1.5rem;
    }
}