/* ============================================================
   nav.css  —  extracted from the old Assets/Top_Nav.html <style> block.
   Behaviour & appearance unchanged. Two Safari-safe patches applied:
     1. -webkit-sticky fallback added for the sticky navbar.
     2. @font-face path made app-root-absolute so it resolves from /CustCss/.

   UPDATE 1 (mobile menu scroll-click fix):
     - .mobile-menu converted to a fixed left-side off-canvas drawer.
     - .mobile-menu-overlay (dark backdrop) added.
     - .mobile-menu-header (title + close X) added.
     - Breakpoint 480px -> 992px (matches JS isMobile()).
     - .modal z-index bumped to 1100 inside the mobile breakpoint.

   UPDATE 2 (mobile menu content now matches desktop mega menu 1:1):
     - .sub-item-link : a row that is BOTH a link and an accordion
       toggle (e.g. "Fingerprints", "At Lab") — text navigates,
       arrow icon expands. Mirrors desktop's <a> + hover-expand split.
     - .sub-item-direct : a leaf link styled like a menu row
       (e.g. "E-FORENSICS") — no children, no arrow.
     - .level3 : third accordion depth (individual product links,
       same content as desktop's .inline-list1).
     - Added both ".sub-item.open .mobile-arrow" (row-level toggle)
       and ".mobile-arrow.open" (icon-level toggle, used by
       .sub-item-link rows) so every arrow rotates correctly.

   UPDATE 3:
     - .sub-item-link padding/font-size/font-weight now matches the
       plain ".mobile-submenu a" rows (e.g. "Laboratory Equipments",
       "DNA Lab Equipment") exactly — 10px 18px padding, 14px font,
       normal weight — so Fingerprints / Forensics Evidence Collection
       Kits / Forensic / DNA / CSI Vehicles / Foot Print / At Lab /
       At Crime Scene rows look visually identical to the Forensic
       Labs rows. Only .sub-item-link was touched.

   UPDATE 4 (this version — ONLY new block added, nothing else edited):
     - Every rule above this point is 100% unchanged from the original
       file — same selectors, same property values, same order.
     - Original DESKTOP design (.nav1 ul gap:28px, .nav1 a font-size:15px,
       .logo_NeW a img width:160px, .catalogue-btn padding:10px 18px /
       font-size:14.5px) is preserved as-is for screens 1600px and wider.
     - Original MOBILE block (@media max-width:992px) below is also
       100% unchanged.
     - ONE new block is added in between: @media (min-width: 993px) and
       (max-width: 1600px). This is the gap between "just above mobile"
       and "large desktop" where smaller laptop panels (e.g. 1920x1080 /
       1920x1200 running Windows scaling 125%-150%, or native 1280x800,
       1366x768, 1440x900, 1600x900 etc.) sit. On these, the nav used to
       wrap to 2 lines because the original fixed 28px gap / 15px font
       didn't fit in the ~1200px container.
     - Uses CSS clamp() so the nav SCALES SMOOTHLY between the original
       993px-width values and the original 1600px-width values — no new
       "design", just the same nav shrinking proportionally to fit,
       exactly like the original already does with plain values, just
       across this one added width range. At 1600px and above, clamp()
       naturally resolves back to the original numbers, so large
       monitors look identical to before.
   ============================================================ */

@font-face {
    font-family: 'opensans-regular';
    src: url('/fonts/opensans-regular.ttf') format('truetype');
}


.navbar1 {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    padding: 15px 0;
    font-family: 'opensans-regular';
    /* Sticky Menu */
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0px;
    z-index: 99;
}

.container_new {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.container_form1 {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 30px;
}

    .container_form1 h2 {
        text-align: left;
        color: deepskyblue;
    }


.nav-inner1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo_NeW a img {
    width: 160px;
    height: auto; /* Safari fix: was fit-content (stretched the logo) */
    margin-left: -26px;
}


.nav1 ul {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 28px;
}

.nav1 a {
    text-decoration: none;
    color: #444;
    font-size: 15px;
    transition: color 0.3s;
}

    .nav1 a:hover {
        color: #0098e2;
        font-weight: 500;
    }

    .nav1 a.active {
        color: #0098e2;
        font-weight: 600;
    }

.mega1 {
    position: static;
}

.product-popup1 {
    gap: 20px;
    z-index: 100;
    position: absolute;
    top: 70px;
    left: 42%;
    right: 0px;
    width: 54%;
    background: #fff;
    padding: 15px 15px 24px 15px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.08);
    border-radius: 4px;
    display: none;
    height: 335px;
}

    .product-popup1::before {
        content: "";
        position: absolute;
        top: -12px;
        left: 80px;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 12px solid #fff;
        filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.08));
    }

.menu-link1 {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    text-decoration: none;
    color: #000;
}

    .menu-link1 .arrow1 {
        width: 7px;
        height: 7px;
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
        transform: rotate(45deg);
        transition: transform 0.3s ease;
        display: inline-block;
    }

    .menu-link1:hover .arrow1 {
        transform: rotate(225deg);
    }


.mega1:hover .product-popup1 {
    display: flex;
}

.left-item1 {
    font-size: 15px;
    cursor: pointer;
    font-weight: 700;
    border-bottom: 1px solid #ddd;
}

    .left-item1.active,
    .left-item1:hover {
        color: #0098e2;
    }

.popup-left1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 160px;
}

    .popup-left1 ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 250px;
        align-items: flex-start;
    }

    .popup-left1 li {
        padding: 5px 0;
        font-size: 15px;
        cursor: pointer;
        color: #333;
        width: -webkit-fit-content;
        width: fit-content;
        font-weight: 600;
    }

        .popup-left1 li.active,
        .popup-left1 li:hover {
            color: #0098e2 !important;
        }

.popup-divider1 {
    width: 1px;
    background: #e5e5e5;
}

.popup-right1 {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.right-list1 {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 20px;
}

    .right-list1.active {
        display: flex;
    }

.col1 {
    width: 100%;
    height: auto; /* Safari fix: was fit-content (stretched the logo) */
}


.inline-list1 {
    display: none;
    position: absolute;
    left: 290px;
    top: 0px;
    padding: 0 20px 0 20px;
    min-width: 220px;
    z-index: 99;
}

    .inline-list1 a {
        font-size: 14px;
    }

.row-box1:hover .inline-list1 {
    display: block;
    top: -6px;
}

.inline-list2 {
    display: none;
    position: absolute;
    left: 290px;
    top: 0px;
    padding: 0 20px 0 20px;
    min-width: 220px;
    z-index: 99;
}

    .inline-list2 a {
        font-size: 14px;
    }

.row-box1:hover .inline-list2 {
    display: block;
    top: -40px;
}

.mega1:hover .product-popup1 {
    display: flex;
}

.toggle-head1 {
    width: 290px;
    margin: 10px 0px -15px 0px !important;
    padding: 0px 0px 6px 0px !important;
    font-size: 15px;
    font-weight: 600;
    padding-right: 15px;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
}

    .toggle-head1.active {
        color: #0098e2;
    }


/* SUB-ITEMS */
.A_tag1 {
    display: block;
    margin: 5px 0;
    font-size: 13px;
    color: #333;
    text-decoration: none;
}

    .A_tag1:hover {
        color: #0098e2;
    }

.row-box1 {
    position: relative;
    top: -4px;
}

/* Desktop-ku mobile menu & header hidden ALWAYS */
.mobile-header,
.mobile-menu,
.mobile-menu-overlay {
    display: none !important;
}

.catalogue-btn {
    background: #009933;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'opensans-regular';
    font-size: 14.5px;
}

/* Modal Background */
.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
}

/* Modal Box */
.modal-content {
    background: #fff;
    width: 60%;
    margin: 8% auto;
    padding: 30px;
    border-radius: 10px;
    position: relative;
}

/* Close Button */
.close {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 24px;
    cursor: pointer;
}

.catalogue_head {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
}

.catalogue_QRtext {
    margin-left: 100px;
    margin-top: 20px;
    font-weight: 600;
}

/* Modal Layout */
.modal-body1 {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 20px 0 20px 0;
}

.qr-img {
    width: 300px;
}

.download-btn {
    background: green;
    color: white;
    padding: 12px 50px;
    text-decoration: none;
    border-radius: 5px;
}

/* =========================================================
   NEW — ONLY ADDITION IN THIS FILE. Not a single gap/font/width
   value below was touched anywhere above this comment — same
   design, same numbers, same everything.

   Instead of changing individual properties, the ENTIRE nav row
   (.nav-inner1 — logo + Download Catalogue button + nav1 links,
   exactly as already laid out) is scaled down as ONE unit using
   `zoom`. This keeps every gap, every font-size, every spacing
   ratio IDENTICAL to the original design — nothing "collapses"
   or gets recalculated individually. It's the same design, just
   rendered smaller, the same way a browser's own Ctrl+"-" zoom-out
   would shrink a page without changing its layout.

   zoom goes from 75% at 993px width up to 100% (i.e. the exact
   original size) at 1600px and above — so 1280x800, 1366x768,
   1440x900, 1600x900, and 1920x1080/1200-at-125%-150%-scale
   laptops all show the identical design, just proportionally
   smaller, and never wrap to a second line.
   ========================================================= */
@media (min-width: 993px) and (max-width: 1600px) {

    .nav-inner1 {
        zoom: clamp(0.75, calc(0.75 + ((100vw - 993px) / (1600px - 993px)) * 0.25), 1);
    }
}

/* =========================================================
   Mobile Responsive CSS
   Breakpoint changed 480px -> 992px to match JS isMobile()
   in _TopNav.cshtml (they were mismatched before).
   ========================================================= */
@media (max-width: 992px) {

    .nav1 {
        display: none;
    }

    .logo_NeW a img {
        width: 130px;
        height: auto; /* Safari fix: was fit-content (stretched the logo) */
        margin-left: -8px;
    }

    .mobile-header {
        display: flex !important;
        justify-content: flex-end;
        align-items: center;
        background: #fff;
        padding: 14px 14px;
    }

    .menu-text {
        margin-right: 10px;
        font-size: 15px;
        font-weight: 600;
        color: #000;
    }

    .mobile-menu-icon {
        font-size: 22px;
        cursor: pointer;
        color: #000;
    }

    /* ---- OFF-CANVAS DRAWER (fixed to viewport - fixes the scroll/click bug) ---- */
    .mobile-menu {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 82%;
        max-width: 320px;
        background: #fff;
        box-shadow: 4px 0 25px rgba(0,0,0,0.2);
        z-index: 1001;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        padding: 0;
    }

        .mobile-menu.active {
            transform: translateX(0);
        }

    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 18px;
        background: #f7f7f7;
        border-bottom: 1px solid #eee;
        position: sticky;
        top: 0;
        z-index: 2;
    }

        .mobile-menu-header span {
            font-weight: 700;
            font-size: 16px;
            color: #000;
        }

        .mobile-menu-header i {
            font-size: 20px;
            cursor: pointer;
            color: #000;
        }

    /* Dark backdrop behind the drawer */
    .mobile-menu-overlay {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.55);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }

        .mobile-menu-overlay.active {
            opacity: 1;
            visibility: visible;
        }

    .mobile-menu ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .mobile-menu li {
        padding: 14px 18px;
        border-bottom: 1px solid #eee;
        font-size: 15.5px;
        font-weight: 500;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #000;
    }

        .mobile-menu li a {
            text-decoration: none;
            color: #000;
        }

    .mobile-arrow {
        font-size: 14px;
        transition: transform 0.25s ease;
    }

    /* Row-level toggle rotates its own child arrow (FIELD FORENSICS,
       CYBER FORENSICS, FORENSIC LABS, TRAINING, top-level Products) */
    .sub-item.open .mobile-arrow,
    li.open > .mobile-arrow {
        transform: rotate(180deg);
    }

    /* Icon-level toggle: the arrow itself gets .open directly
       (used by .sub-item-link rows like "Fingerprints", "At Lab") */
    .mobile-arrow.open {
        transform: rotate(180deg);
    }

    .mobile-submenu {
        display: none;
        background: #f9f9f9;
        padding-left: 18px;
    }

        .mobile-submenu.active {
            display: block;
        }

        .mobile-submenu a {
            padding: 10px 18px;
            display: block;
            font-size: 14px;
            border-bottom: 1px solid #eee;
            color: #444;
        }

    /* LEVEL 2 SUBMENU (Fingerprints, At Lab, etc.) */
    .level2 {
        background: #f0f8ff;
        padding-left: 15px;
    }

    /* LEVEL 3 SUBMENU (individual product links — same content as
       desktop's .inline-list1) */
    .level3 {
        background: #eaf3fb;
        padding-left: 22px;
    }

        .level3 a {
            font-size: 13.5px;
            color: #555;
        }

    .sub-item {
        padding: 12px 10px;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        font-size: 15px;
        cursor: pointer;
        font-weight: 500;
    }

    /* Row that is BOTH a link and an accordion toggle:
       tap text -> navigate, tap arrow -> expand (same split as desktop).
       Padding/font now matches the plain ".mobile-submenu a" rows
       (Laboratory Equipments, DNA Lab Equipment) exactly, per request. */
    .sub-item-link {
        padding: 10px 18px;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        font-weight: normal;
    }

        .sub-item-link a {
            flex: 1;
            color: #444;
            text-decoration: none;
        }

        .sub-item-link .mobile-arrow {
            cursor: pointer;
            padding-left: 12px;
        }

    /* Leaf link styled like a menu row (e.g. E-FORENSICS).
       Selector written as ".mobile-submenu a.sub-item-direct" (not just
       ".sub-item-direct") on purpose — the generic ".mobile-submenu a"
       rule above has higher specificity (class + tag) than a single
       class selector, so it was silently winning and shrinking/
       lightening E-FORENSICS. This selector beats it for good. */
    .mobile-submenu a.sub-item-direct {
        display: block;
        padding: 12px 10px;
        border-bottom: 1px solid #ddd;
        font-size: 15px;
        font-weight: 500;
        color: #333;
        text-decoration: none;
    }

    .catalogue-btn {
        background: #009933;
        color: white;
        border: none;
        padding: 10px 6px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 10px;
        font-weight: 600;
        transition: 0.2s ease;
    }

    .catalogue_QRtext {
        width: 100%;
        margin-left: 0px;
        text-align: center;
        margin-top: 20px;
        font-weight: 600;
    }

    .modal {
        display: none;
        position: fixed;
        z-index: 1100; /* raised above the .mobile-menu drawer (1001) */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
    }

    .modal-content {
        width: 92%;
        margin: 20% auto;
        padding: 25px 20px;
    }

    .modal-body1 {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .qr-img {
        width: 220px;
    }

    .download-btn {
        width: 100%;
        padding: 14px 0;
        text-align: center;
        text-decoration: none;
    }
}