/* ==============================================================================
 * Neuviz Mobile & Tablet Responsive Master Stylesheet
 * Covers ALL TABS: Home, Products & Services, Detail, Subcategory, About Us,
 * Contact Us, News & Events, Single (Privacy/Career/Terms), Sitemap, and 404.
 *
 * Safe & Non-Destructive: Desktop (> 1024px) remains 100% untouched.
 * ============================================================================== */

@media screen and (max-width: 1024px) {
    /* ==========================================================================
     * 1. Global Viewport & Container Resets (Zero Horizontal Overflow)
     * ========================================================================== */
    html, body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

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

    .bgWrapper,
    #pageCon,
    #contentCon,
    #header,
    #headCon,
    #menu,
    #menu2,
    #headline,
    #infoCon,
    #shortcut,
    #footer,
    #footCon,
    .intern_con,
    .news_con,
    .admin_con {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .bgWrapper {
        background-size: cover !important;
        background-attachment: scroll !important;
    }

    #pageCon {
        padding: 0 14px !important;
        overflow-x: hidden !important;
    }

    /* ==========================================================================
     * 2. Header & Navigation (Home & Inner Pages)
     * ========================================================================== */
    #header {
        height: auto !important;
        min-height: 90px !important;
    }

    #headCon {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 10px 0 !important;
    }

    #headLeft, #headRight {
        float: none !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
    }

    a#logo {
        display: block !important;
        float: none !important;
        margin: 6px auto !important;
        width: 280px !important;
        max-width: 85% !important;
        height: 75px !important;
        background: url(../images/logo_neuviz.png) no-repeat center center / contain !important;
    }

    a#logo2 {
        display: block !important;
        float: none !important;
        margin: 15px auto 10px auto !important;
        width: 220px !important;
        max-width: 80% !important;
        height: 50px !important;
        background: url(../images/logo_neuviz2.png) no-repeat center center / contain !important;
    }

    #menu, #menu2 {
        height: auto !important;
        width: 100% !important;
        margin: 8px auto !important;
        float: none !important;
    }

    #menu ul, #menu2 ul {
        height: auto !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px 12px !important;
        padding: 6px 0 !important;
        margin: 0 !important;
    }

    #menu ul li, #menu2 ul li {
        float: none !important;
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 12px 0 0 !important;
        font-size: 13px !important;
        background: url(../images/top_arrow.jpg) no-repeat right center !important;
        white-space: nowrap !important;
    }

    /* ==========================================================================
     * 3. Breadcrumbs (Your Location: Home > ...)
     * ========================================================================== */
    #breadcrump, #breadcrump2 {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        background: transparent !important;
        border-bottom: 1px solid #282635 !important;
        margin: 10px 0 15px 0 !important;
        padding: 8px 0 !important;
    }

    #breadcrump ul, #breadcrump2 ul {
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #breadcrump ul li, #breadcrump2 ul li {
        float: none !important;
        display: inline-block !important;
        padding: 2px 8px 2px 0 !important;
        font-size: 11px !important;
        color: #888888 !important;
    }

    /* ==========================================================================
     * 4. TAB 1: Home Page Elements (Banner, News Bar, 3 Shortcut Boxes)
     * ========================================================================== */
    #headline {
        height: auto !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    #headline img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    #infoCon {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 10px 14px !important;
        background: #090810 !important;
    }

    #newsBar {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        text-align: center !important;
        margin-bottom: 8px !important;
    }

    #socialNet {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        text-align: center !important;
        margin: 10px 0 0 0 !important;
        background: transparent !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #socialNet p.news {
        float: none !important;
        display: inline-block !important;
        margin: 0 !important;
        font-size: 13px !important;
    }

    #socialNet ul {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
    }

    #socialNet ul li {
        float: none !important;
        margin: 0 4px !important;
    }

    #shortcut {
        height: auto !important;
        padding: 20px 0 !important;
    }

    .shortCon {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 16px !important;
        width: 100% !important;
    }

    #box1 {
        float: none !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }

    /* ==========================================================================
     * 5. TAB 2: Products & Services & Detail Pages (Precision Card Layout)
     * ========================================================================== */
    #contentCon {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #conLeft {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .conDetail {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 16px !important;
    }

    .conDetail h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
        color: #ffffff !important;
    }

    .conDetail p {
        font-size: 13px !important;
        line-height: 1.6 !important;
        color: #cccccc !important;
        margin-bottom: 12px !important;
    }

    /* Grid Selection Container */
    .selection {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin: 15px 0 25px 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    /* Individual Product Card */
    .boxSelection {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 96px !important;
        margin: 0 !important;
        padding: 12px !important;
        background: #0f0e18 !important;
        border: 1px solid #252335 !important;
        border-radius: 8px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    }

    /* Card Thumbnail (Square left) */
    .boxSelection .boxLeft {
        float: none !important;
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
        height: 90px !important;
        margin: 0 14px 0 0 !important;
        padding: 0 !important;
        background: transparent !important;
        flex-shrink: 0 !important;
        overflow: hidden !important;
        border-radius: 6px !important;
    }

    .boxSelection .boxLeft a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    .boxSelection .boxLeft img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        border: 0 !important;
    }

    /* Card Text & Title (Right) */
    .boxSelection .boxRight {
        float: none !important;
        width: auto !important;
        height: auto !important;
        flex: 1 !important;
        text-align: left !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .boxSelection .boxRight h2 {
        font-size: 15px !important;
        font-weight: bold !important;
        margin: 0 0 6px 0 !important;
        line-height: 1.3 !important;
    }

    .boxSelection .boxRight h2 a {
        color: #ffffff !important;
        text-decoration: none !important;
        display: block !important;
    }

    .boxSelection .boxRight p {
        font-size: 12px !important;
        line-height: 1.45 !important;
        color: #aaaaaa !important;
        margin: 0 0 8px 0 !important;
    }

    .boxSelection .boxRight p a {
        color: #aaaaaa !important;
        text-decoration: none !important;
    }

    .boxSelection .boxRight .arrow_1 {
        display: inline-block !important;
        align-self: flex-start !important;
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        background: url(../images/select_arrow.jpg) no-repeat center center / contain !important;
        margin: 0 !important;
        outline: none !important;
    }

    /* Product Big Photos & Banners */
    .photoCon {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin-bottom: 16px !important;
    }

    .photoCon img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 6px !important;
        display: block !important;
    }

    /* Subcategory Left Menu */
    .left_menu {
        float: none !important;
        width: 100% !important;
        margin: 0 0 20px 0 !important;
        background: #0f0e18 !important;
        border: 1px solid #252335 !important;
        border-radius: 8px !important;
        padding: 14px !important;
    }

    .left_menu h2 {
        font-size: 16px !important;
        margin-bottom: 10px !important;
        border-bottom: 1px solid #252335 !important;
        padding-bottom: 6px !important;
    }

    .left_menu ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .left_menu ul li {
        margin: 0 !important;
        padding: 6px 12px !important;
        background: #191726 !important;
        border-radius: 4px !important;
        font-size: 13px !important;
    }

    /* Right Sidebar (Our Specialities & Support) */
    #conRight {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 15px 0 25px 0 !important;
        padding: 0 !important;
    }

    #boxContactCon, #boxJumpCon {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 16px 0 !important;
    }

    #boxContact, #boxJumpTop, #boxJumpMenu {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #boxJumpMenu {
        margin: 10px 0 0 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    #boxJumpMenu ul {
        width: 100% !important;
        max-width: 100% !important;
        padding: 6px 10px !important;
        margin: 0 !important;
        list-style: none !important;
        box-sizing: border-box !important;
    }

    #boxJumpMenu ul li {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #boxJumpMenu ul li a {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
        padding: 6px 10px 6px 28px !important;
        line-height: 1.4 !important;
        font-size: 13px !important;
        background: url(../images/right_arrow.jpg) 0 8px no-repeat !important;
    }

    /* ==========================================================================
     * 6. TAB 3: About Us Page Layout
     * ========================================================================== */
    .intern_con {
        width: 100% !important;
        max-width: 100% !important;
        margin: 15px auto !important;
        padding: 0 14px !important;
        background: transparent !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .intern_con h2 {
        font-size: 22px !important;
        margin-bottom: 14px !important;
        color: #ffffff !important;
    }

    .topline, .detail_1, .detail_2 {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
        float: none !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .topline_left {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 0 15px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .topline_left p {
        font-size: 13px !important;
        line-height: 1.6 !important;
        color: #cccccc !important;
        margin-bottom: 12px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .topline_right {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        float: none !important;
        margin: 0 0 20px 0 !important;
        overflow: hidden !important;
    }

    .topline_right img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 6px !important;
        display: block !important;
    }

    .img_intern {
        width: 100% !important;
        max-width: 220px !important;
        height: auto !important;
        float: none !important;
        margin: 0 auto 16px auto !important;
    }

    .img_intern img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 6px !important;
        display: block !important;
    }

    .detail_1con, .detail_2con {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 0 16px 0 !important;
    }

    .detail_1con h2, .detail_2con h2 {
        font-size: 17px !important;
        color: #ff6600 !important;
        margin-bottom: 8px !important;
    }

    .detail_1con p, .detail_2con p {
        font-size: 13px !important;
        line-height: 1.6 !important;
        color: #bbbbbb !important;
    }

    /* ==========================================================================
     * 7. TAB 4: Contact Us Page Layout & Form
     * ========================================================================== */
    .topline_contact {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 0 15px 0 !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    .img_contact {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        float: none !important;
        margin: 0 0 20px 0 !important;
    }

    .img_contact img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 6px !important;
        display: block !important;
    }

    /* Office Cards in Contact Us */
    .offices_grid,
    .contact_con .detail_1 {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin: 15px 0 !important;
        clear: both !important;
    }

    .offices_grid .detail_1con,
    .contact_con .detail_1con {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
        background: #0f0e18 !important;
        border: 1px solid #252335 !important;
        border-radius: 8px !important;
        padding: 14px !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    }

    .offices_grid .detail_1con h2,
    .contact_con .detail_1con h2 {
        color: #ff6600 !important;
        font-size: 16px !important;
        margin-bottom: 6px !important;
    }

    /* Form Section */
    .form_con {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 20px 0 !important;
        background: #0f0e18 !important;
        border: 1px solid #252335 !important;
        border-radius: 8px !important;
        padding: 16px !important;
    }

    .form_con h2 {
        font-size: 18px !important;
        margin-bottom: 14px !important;
        color: #ffffff !important;
    }

    #myform table,
    #myform table tr,
    #myform table td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 4px 0 !important;
    }

    #myform input[type="text"],
    #myform textarea {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 15px !important;
        padding: 10px !important;
        margin-top: 4px !important;
        border-radius: 4px !important;
        background: #171524 !important;
        border: 1px solid #333045 !important;
        color: #ffffff !important;
    }

    #myform a.button {
        display: inline-block !important;
        margin-top: 10px !important;
        padding: 10px 24px !important;
        font-size: 14px !important;
        font-weight: bold !important;
        background: #ffffff !important;
        color: #000000 !important;
        border-radius: 4px !important;
    }

    /* ==========================================================================
     * 8. TAB 5: News & Events Page Layout
     * ========================================================================== */
    .news_con {
        width: 100% !important;
        max-width: 100% !important;
        margin: 15px auto !important;
        padding: 0 !important;
    }

    .news_con h2 {
        font-size: 22px !important;
        margin-bottom: 15px !important;
        color: #ffffff !important;
    }

    .newslistcon {
        width: 100% !important;
    }

    .news_odd, .news_even {
        width: 100% !important;
        float: none !important;
        margin-bottom: 14px !important;
    }

    .news_bar {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 12px !important;
        background: #0f0e18 !important;
        border: 1px solid #252335 !important;
        border-radius: 8px !important;
    }

    .news_img {
        width: 80px !important;
        height: 80px !important;
        margin-right: 12px !important;
        flex-shrink: 0 !important;
    }

    .news_img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 4px !important;
        display: block !important;
    }

    .news_detail {
        flex: 1 !important;
        text-align: left !important;
    }

    .news_detail h2 {
        font-size: 15px !important;
        margin-bottom: 4px !important;
    }

    .news_detail p {
        font-size: 12px !important;
        color: #aaaaaa !important;
        margin-bottom: 6px !important;
    }

    .news_detail p.date {
        font-size: 11px !important;
        color: #ff6600 !important;
    }

    /* ==========================================================================
     * 9. TAB 6: Single Pages (Privacy Policy, Career, Terms & Conditions)
     * ========================================================================== */
    .intern_con .detail_2con ul:not(.sitemap) {
        margin: 10px 0 15px 20px !important;
        list-style-type: disc !important;
    }

    .intern_con .detail_2con ul:not(.sitemap) li {
        font-size: 13px !important;
        line-height: 1.6 !important;
        color: #cccccc !important;
        margin-bottom: 6px !important;
    }

    /* ==========================================================================
     * 10. TAB 7: Site Map
     * ========================================================================== */
    .intern_con ul.sitemap,
    ul.sitemap {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 0 16px 0 !important;
        padding: 12px 14px !important;
        background: #0f0e18 !important;
        border: 1px solid #252335 !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        list-style-position: inside !important;
    }

    ul.sitemap h2 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
        border-bottom: 1px solid #252335 !important;
        padding-bottom: 6px !important;
    }

    ul.sitemap ul {
        padding-left: 14px !important;
        margin: 4px 0 !important;
        list-style-position: inside !important;
        box-sizing: border-box !important;
    }

    ul.sitemap li {
        font-size: 13px !important;
        margin: 4px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        word-break: break-word !important;
        list-style-position: inside !important;
    }

    /* ==========================================================================
     * 11. Footer (Clean Mobile Stacking)
     * ========================================================================== */
    #footer {
        height: auto !important;
        padding: 24px 0 16px 0 !important;
        border-top: 1px solid #252335 !important;
        background: #050509 !important;
    }

    #footCon {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
        padding: 0 10px !important;
    }

    #footLeft, #footRight {
        float: none !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
    }

    #footLeft p {
        font-size: 12px !important;
        color: #777777 !important;
    }

    #footRight ul {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding: 0 !important;
        gap: 6px 12px !important;
    }

    #footRight ul li {
        margin: 0 !important;
    }

    #footRight ul li a {
        font-size: 12px !important;
        color: #aaaaaa !important;
    }
}