/* =========================================================
   NATIONAL MACHINERY WORKS - RESPONSIVE OVERRIDES
   These rules only improve tablet/mobile behaviour.
   Existing desktop design/content remains unchanged.
========================================================= */

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, video, iframe {
    max-width: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

.table-responsive, .table-wrap, .spec-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    max-width: 100%;
}

@media (max-width: 991px) {
    .container, .section-container, .content-container, .about-container,
    .contact-container, .product-container, .products-container,
    .quality-container, .hero-container {
        width: 100%;
        max-width: 100%;
    }

    .row, .hero-content, .about-content, .contact-content,
    .product-detail, .product-info, .quality-container {
        max-width: 100%;
    }

    .site-header {
        position: relative;
    }

    .mobile-navigation {
        z-index: 10000;
    }

    .hero-slider, .slider-track, .slide {
        max-width: 100%;
    }

    .slide img {
        display: block;
        width: 100%;
        height: auto;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 15px;
    }

    h1 { font-size: clamp(30px, 8vw, 44px); }
    h2 { font-size: clamp(26px, 7vw, 36px); }
    h3 { font-size: clamp(22px, 6vw, 30px); }

    section {
        max-width: 100%;
    }

    .slider-btn {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }

    .footer-container {
        width: 100%;
    }

    .footer-bottom p {
        overflow-wrap: anywhere;
    }

    input, textarea, select, button {
        max-width: 100%;
    }

    .contact-form, .wpcf7-form, form {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .header-container {
        width: 100%;
    }

    .site-logo img {
        max-width: 120px;
    }

    .mobile-menu-row > a {
        min-width: 0;
    }

    .mobile-submenu li a {
        overflow-wrap: anywhere;
    }
}