@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-tagline {
        font-size: 1rem;
    }
    
    .feature-card {
        padding: 20px;
    }
    
    #cartOffcanvas {
        width: 100%;
    }
    
    .featured-img {
        height: 300px;
    }
    
    .auth-container {
        margin: 100px auto;
        padding: 20px;
    }
    
    .receipt-content {
        width: 100%;
        padding: 20px;
    }
}

@media (max-width: 576px) {
    .navbar-nav {
        text-align: center;
    }
    
    .hero-section {
        padding: 120px 0 60px;
    }
    
    .btn-group {
        flex-wrap: wrap;
    }
    
    .product-img {
        height: 250px;
    }
}