@media (max-width: 768px) {
    
    footer, footer > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 40px !important;
    }

    footer > div > div {
        width: 100% !important;
    }

    #cart, #cart-modal, .cart-sidebar, .cart-panel { 
        width: 100% !important;
        max-width: 100% !important;
        right: 0 !important;
    }

    #toast-notification {
        position: fixed !important;
        left: 5% !important;
        width: 90% !important;
        background: #00d2ff !important;
        color: #000 !important;
        padding: 15px !important;
        border-radius: 8px !important;
        z-index: 10000 !important;
        text-align: center !important;
        font-weight: bold !important;
        box-sizing: border-box !important;
        
        transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease !important;

        bottom: 30px !important; 
        transform: translateY(200px) !important; 
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    #toast-notification.show {
        transform: translateY(0) !important; 
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    footer, footer > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 40px !important;
    }
}
    .modal-content {
        width: 95% !important;
        margin: 20% auto !important;
    }

    main {
        padding: 40px 15px !important;
    }