/* ==========================================================================
   MOBILE RESPONSIVE STYLES
   ========================================================================== */

@media (max-width: 1024px) {
    .elementor-widget-builty-clients .client-style-one .container {
        padding: 0rem 1rem 0rem 1rem;
    }
    footer .footer-p-1 a img {
        max-width: 80%;
    }
    footer .footer-p-1 #reps_phone {
        margin: 1rem auto;
    }
    
    /* Footer stacking at 1024px */
    footer .footer-p-1 .elementor-container {
        flex-direction: column;
        gap: 1rem;
    }
    
    footer .footer-p-1 .elementor-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
        footer .footer-p-2 .elementor-container .elementor-container {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;
    }
    
    /* Links section - make it span full width */
    footer .footer-p-2 .make-two-column:first-child {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* Create two columns for the links content */
    footer .footer-p-2 .footer-links .footer-col ul {
        display: grid;
        grid-template-columns: 45% 1fr; /* First column matches Canada address width */
        align-items: start;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    footer .footer-p-2 .footer-links .footer-col ul li {
        margin-bottom: 0.5rem;
    }
    
    /* Address columns - keep them side by side */
    footer .footer-p-2 .make-two-column:nth-child(2),
    footer .footer-p-2 .make-two-column:nth-child(3) {
        width: 40% !important;
        max-width: 40% !important;
        flex: 0 0 40% !important;
    }
    
    /* Social/language column - full width */
    footer .footer-p-2 .make-two-column:last-child {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* Center align content when stacked */
    footer .footer-p-1 .elementor-column {
        text-align: center;
    }
    
    footer .footer-p-1 #reps_phone .contact-info {
        justify-content: center !important;
    }
    
    footer .footer-p-1 #reps_phone .contact-info .images {
        justify-content: center !important;
    }
    
    /* Make Get Support button wider at 1024px */
    footer .footer-p-1 .contact-modal-trigger {
        width: 100% !important;
        max-width: 300px !important;
        display: block !important;
        margin: 0 auto !important;
    }
}