/* Force footer widgets to align in the same line */
.td-footer-wrapper .td-pb-row,
.td-footer-container .td-pb-row,
.td-footer-wrapper-full .td-pb-row,
.td-footer-row,
.td-footer-wrapper .wpb_wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
}

.td-footer-wrapper .td-pb-span4,
.td-footer-wrapper .td-pb-span3,
.td-footer-wrapper .wpb_column {
    flex: 1 1 30% !important;
    max-width: 33% !important;
    margin-bottom: 20px !important;
}

/* For mobile devices, keep them side-by-side if requested, but normally they stack. 
   If user specifically wants them in the same line on mobile: */
@media (max-width: 767px) {
    .td-footer-wrapper .td-pb-row,
    .td-footer-container .td-pb-row,
    .td-footer-wrapper .wpb_wrapper {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-around !important;
        overflow-x: auto;
    }
    .td-footer-wrapper .td-pb-span4,
    .td-footer-wrapper .td-pb-span3,
    .td-footer-wrapper .wpb_column {
        flex: 1 1 auto !important;
        max-width: auto !important;
        min-width: 30% !important;
        padding: 0 5px;
    }
}