/* Mobile Optimization Styles */
@media (max-width: 768px) {
    /* Mobile-first responsive design */
    .container {
        padding: 0 15px;
    }
    
    /* Typography adjustments */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    
    /* Navigation improvements */
    .navbar-nav {
        text-align: center;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    /* Button optimizations */
    .btn {
        min-height: 44px;
        min-width: 44px;
        font-size: 1rem;
    }
    
    /* Form improvements */
    .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 12px;
    }
    
    /* Card layouts */
    .card {
        margin-bottom: 1rem;
    }
    
    /* Image responsiveness */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Touch-friendly spacing */
    .touch-target {
        min-height: 44px;
        min-width: 44px;
    }
}

@media (max-width: 480px) {
    /* Extra small devices */
    .container {
        padding: 0 10px;
    }
    
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    
    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}