/* assets/css/contact-mobile-fix.css */

@media (max-width: 768px) {
    .contact-info {
        display: flex;
        flex-direction: column;
        gap: 1rem; /* Add some space between items */
    }

    .contact-info-item {
        width: 100%;
        flex-direction: row !important; /* Override existing column direction */
        align-items: center !important; /* Vertically center icon and text */
        text-align: left !important; /* Align text to the left */
    }

    .contact-info-item .icon {
        flex-shrink: 0; /* Prevent icon from shrinking */
    }

    .contact-info-item .content {
        flex-grow: 1; /* Allow content to take remaining space */
    }
}