/* Mobile Footer Styles */
@media (max-width: 768px) {
    /* Change to two-column layout on mobile */
    .footer-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two columns instead of one */
        gap: 5px;
        padding: 5px 10px; /* Reduce padding */
    }
    
    /* Reduce vertical spacing */
    .footer-top {
        padding: 5px 0; /* Less top/bottom padding */
    }
    
    /* Adjust each footer section for two-column layout */
    .footer-about,
    .footer-contact,
    .footer-links,
    .footer-qrcode {
        margin-bottom: 15px; /* Less margin between sections */
        padding: 0 5px; /* Less horizontal padding */
    }
    
    /* Reduce text sizes */
    .footer-about .footer-logo .logo-text h3 {
        font-size: 16px;
    }
    
    
    .footer-about .footer-logo .logo-text p.slogan {
        font-size: 10px;
    }
    
    .footer-contact h4,
    .footer-links h4,
    .footer-qrcode h4 {
        font-size: 15px;
        margin-bottom: 10px;
    }
    
    /* Smaller contact info and links */
    .contact-list li,
    .footer-links ul li {
        margin-bottom: 5px;
        font-size: 13px;
    }
    
    /* Smaller QR code */
    .qrcode-container {
        width: 90px;
        height: 90px;
        margin: 0 auto;
    }
    
    /* Reduce footer bottom padding */
    .footer-bottom {
        padding: 10px 0;
    }
    
    .copyright {
        font-size: 12px;
    }
    .footer-links ul li{
        height: 22px;
        margin-bottom: 1px;
    }
}


/* Extra small devices */
@media (max-width: 576px) {
    /* Further adjustments for very small screens */
    .footer-grid {
        grid-template-columns: 1fr 1fr; /* Maintain two columns */
    }
    
    /* Adjust order to better utilize the two-column layout */
    .footer-about {
        order: 1;
        grid-column: 1 / 2;
    }
    
    .footer-contact {
        order: 2;
        grid-column: 2 / 3;
    }
    
    .footer-links {
        order: 3;
        grid-column: 1 / 2;
    }
    
    .footer-qrcode {
        order: 4;
        grid-column: 2 / 3;
    }
}