/* মোবাইল রেসপন্সিভ অপ্টিমাইজেশন */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }
    .main-wrapper {
        margin: 15px auto;
        padding: 0 10px;
    }
    .hero-section h1 {
        font-size: 1.8rem;
    }
    .tool-card, .content-section {
        padding: 20px 15px;
    }
    .nav-container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    .nav-links {
        gap: 12px;
        font-size: 0.9rem;
    }
    .output-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .copy-btn {
        width: 100%;
        text-align: center;
        padding: 10px;
    }
    .footer-container {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
}