/* ==========================================================
   V26 - Balanced desktop navigation spacing + responsive header
   Loaded AFTER responsive.css and wp_head styles.
   Goals:
   1) remove mobile blank gap under the hamburger header
   2) keep desktop nav clean and evenly spaced
   3) make header + hero adapt correctly to PC / tablet / phone
   ========================================================== */

:root{
    --cg-header-text:#172635;
    --cg-accent:#df7c00;
    --cg-line:#e7ebef;
    --cg-white:#fff;
}

/* ---------- Global header reset ---------- */
.navbar-area.industrial-header{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
    border-bottom:1px solid var(--cg-line) !important;
    box-shadow:0 2px 12px rgba(17,35,50,.045) !important;
}

.industrial-header + .home-slider-section,
.navbar-area.industrial-header + .home-slider-section,
body .home-slider-section{
    margin-top:0 !important;
    padding-top:0 !important;
}

/* ---------- PC: 1200px+ ---------- */
@media (min-width:1200px){
    .industrial-header .cyberguard-nav{
        display:block !important;
        padding:0 !important;
        background:#fff !important;
    }

    .industrial-header .cyberguard-responsive-nav{
        display:none !important;
    }

    .industrial-header .cyberguard-nav > .container{
        width:100% !important;
        max-width:1920px !important;
        padding-left:clamp(28px,2.25vw,48px) !important;
        padding-right:clamp(28px,2.25vw,48px) !important;
    }

    .industrial-header .cyberguard-nav .navbar{
        min-height:88px !important;
        width:100% !important;
        display:flex !important;
        align-items:center !important;
        flex-wrap:nowrap !important;
        padding:0 !important;
    }

    .industrial-header .cyberguard-nav .navbar-brand{
        flex:0 0 auto !important;
        margin:0 clamp(24px,1.7vw,34px) 0 0 !important;
        padding:0 !important;
    }

    .industrial-header .navbar-brand img{
        width:auto !important;
        max-width:clamp(220px,14.5vw,290px) !important;
        max-height:58px !important;
        border-radius:0 !important;
    }

    .industrial-header .cyberguard-nav .navbar-collapse{
        flex:1 1 0 !important;
        min-width:0 !important;
        display:flex !important;
        align-items:center !important;
    }

    /* V26: natural-width labels with a consistent, moderate visual gap.
       Do not stretch items to fill all remaining width. */
    .industrial-header .cyberguard-nav .navbar .navbar-nav{
        flex:0 1 auto !important;
        min-width:0 !important;
        width:auto !important;
        max-width:100% !important;
        margin:0 auto !important;
        padding:0 !important;
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:center !important;
        gap:clamp(24px,1.65vw,34px) !important;
    }

    .industrial-header .cyberguard-nav .navbar .navbar-nav > .nav-item{
        flex:0 0 auto !important;
        width:auto !important;
        min-width:0 !important;
        margin:0 !important;
        padding:0 !important;
        display:flex !important;
        align-items:center !important;
    }

    .industrial-header .cyberguard-nav .navbar .navbar-nav > .nav-item > a{
        min-height:88px !important;
        width:auto !important;
        margin:0 !important;
        padding:0 2px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        column-gap:8px !important;
        white-space:nowrap !important;
        color:var(--cg-header-text) !important;
        background:transparent !important;
        border:0 !important;
        border-radius:0 !important;
        font-size:clamp(15px,.92vw,17px) !important;
        line-height:1 !important;
        font-weight:700 !important;
        letter-spacing:-.12px !important;
        position:relative !important;
    }

    .industrial-header .cyberguard-nav .navbar .navbar-nav > .nav-item > a i{
        margin-left:5px !important;
        font-size:11px !important;
        color:currentColor !important;
        top:0 !important;
    }

    .industrial-header .cyberguard-nav .navbar .navbar-nav > .nav-item:hover > a,
    .industrial-header .cyberguard-nav .navbar .navbar-nav > .nav-item:focus-within > a,
    .industrial-header .cyberguard-nav .navbar .navbar-nav > .current-menu-item > a,
    .industrial-header .cyberguard-nav .navbar .navbar-nav > .current-menu-parent > a,
    .industrial-header .cyberguard-nav .navbar .navbar-nav > .current_page_item > a,
    .industrial-header .cyberguard-nav .navbar .navbar-nav > .nav-item.active > a,
    .industrial-header .cyberguard-nav .navbar .navbar-nav > .nav-item > a.active{
        color:var(--cg-accent) !important;
    }

    .industrial-header .cyberguard-nav .navbar .navbar-nav > .nav-item > a::before,
    .industrial-header .cyberguard-nav .navbar .navbar-nav > .nav-item > a::after{
        display:none !important;
        content:none !important;
    }

    .industrial-header .cyberguard-nav .navbar .navbar-nav > .current-menu-item > a::after,
    .industrial-header .cyberguard-nav .navbar .navbar-nav > .current-menu-parent > a::after,
    .industrial-header .cyberguard-nav .navbar .navbar-nav > .current_page_item > a::after,
    .industrial-header .cyberguard-nav .navbar .navbar-nav > .nav-item.active > a::after,
    .industrial-header .cyberguard-nav .navbar .navbar-nav > .nav-item > a.active::after{
        content:"" !important;
        display:block !important;
        position:absolute !important;
        left:50% !important;
        bottom:14px !important;
        width:28px !important;
        height:3px !important;
        border-radius:3px !important;
        background:var(--cg-accent) !important;
        transform:translateX(-50%) !important;
    }

    .industrial-header .cyberguard-nav .navbar .other-option{
        flex:0 0 auto !important;
        margin:0 0 0 clamp(28px,2vw,40px) !important;
    }

    .industrial-header .cyberguard-nav .navbar .other-option .default-btn{
        min-width:150px !important;
        min-height:48px !important;
        padding:0 20px !important;
        border-radius:6px !important;
        box-shadow:none !important;
        font-size:15px !important;
    }

    .industrial-header.is-sticky .cyberguard-nav .navbar,
    .industrial-header.is-sticky .cyberguard-nav .navbar .navbar-nav > .nav-item > a{
        min-height:74px !important;
    }

    .industrial-header.is-sticky .cyberguard-nav .navbar .navbar-nav > .current-menu-item > a::after,
    .industrial-header.is-sticky .cyberguard-nav .navbar .navbar-nav > .current-menu-parent > a::after,
    .industrial-header.is-sticky .cyberguard-nav .navbar .navbar-nav > .current_page_item > a::after,
    .industrial-header.is-sticky .cyberguard-nav .navbar .navbar-nav > .nav-item.active > a::after,
    .industrial-header.is-sticky .cyberguard-nav .navbar .navbar-nav > .nav-item > a.active::after{
        bottom:10px !important;
    }
}

/* ---------- Compact desktop / landscape tablet: 992-1199 ---------- */
@media (min-width:992px) and (max-width:1199px){
    .industrial-header .cyberguard-nav{
        display:block !important;
        padding:0 !important;
    }

    .industrial-header .cyberguard-responsive-nav{
        display:none !important;
    }

    .industrial-header .cyberguard-nav > .container{
        width:100% !important;
        max-width:100% !important;
        padding-left:14px !important;
        padding-right:14px !important;
    }

    .industrial-header .cyberguard-nav .navbar{
        min-height:78px !important;
        display:flex !important;
        flex-wrap:nowrap !important;
    }

    .industrial-header .cyberguard-nav .navbar-brand{
        margin-right:16px !important;
    }

    .industrial-header .navbar-brand img{
        max-width:190px !important;
        max-height:50px !important;
    }

    .industrial-header .cyberguard-nav .navbar-collapse{
        flex:1 1 0 !important;
        min-width:0 !important;
        display:flex !important;
    }

    .industrial-header .cyberguard-nav .navbar .navbar-nav{
        flex:0 1 auto !important;
        min-width:0 !important;
        width:auto !important;
        margin:0 auto !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:clamp(12px,1.1vw,18px) !important;
    }

    .industrial-header .cyberguard-nav .navbar .navbar-nav > .nav-item{
        flex:0 0 auto !important;
        margin:0 !important;
    }

    .industrial-header .cyberguard-nav .navbar .navbar-nav > .nav-item > a{
        min-height:78px !important;
        margin:0 !important;
        padding:0 2px !important;
        white-space:nowrap !important;
        font-size:12px !important;
        letter-spacing:-.25px !important;
    }

    .industrial-header .cyberguard-nav .navbar .other-option{
        margin-left:12px !important;
    }

    .industrial-header .cyberguard-nav .navbar .other-option .default-btn{
        min-width:112px !important;
        min-height:42px !important;
        padding:0 12px !important;
        border-radius:5px !important;
        font-size:12px !important;
        box-shadow:none !important;
    }
}

/* ---------- Phone + portrait tablet: <=991 ---------- */
@media (max-width:991px){
    html,body{
        width:100% !important;
        max-width:100% !important;
        overflow-x:hidden !important;
    }

    .industrial-topbar{
        display:none !important;
    }

    .industrial-header .cyberguard-nav{
        display:none !important;
    }

    .industrial-header .cyberguard-responsive-nav{
        display:block !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        margin:0 !important;
        padding:0 !important;
        background:#fff !important;
    }

    .industrial-header .cyberguard-responsive-nav > .container{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:0 22px !important;
    }

    /* Critical fix: MeanMenu must not reserve a 200-300px blank block. */
    .industrial-header .cyberguard-responsive-menu,
    .industrial-header .cyberguard-responsive-menu.mean-container,
    .industrial-header .mean-container,
    .industrial-header .mean-container .mean-bar{
        position:relative !important;
        width:100% !important;
        height:76px !important;
        min-height:76px !important;
        margin:0 !important;
        padding:0 !important;
        float:none !important;
        background:#fff !important;
        box-sizing:border-box !important;
    }

    .industrial-header .cyberguard-responsive-menu{
        display:flex !important;
        align-items:center !important;
    }

    .industrial-header .cyberguard-responsive-nav .logo{
        position:absolute !important;
        z-index:1002 !important;
        left:0 !important;
        top:50% !important;
        width:auto !important;
        max-width:72% !important;
        margin:0 !important;
        transform:translateY(-50%) !important;
    }

    .industrial-header .cyberguard-responsive-nav .logo .white-logo{
        display:none !important;
    }

    .industrial-header .cyberguard-responsive-nav .logo .black-logo{
        display:block !important;
        width:auto !important;
        max-width:min(260px,62vw) !important;
        max-height:52px !important;
        margin:0 !important;
        border-radius:0 !important;
        object-fit:contain !important;
    }

    .industrial-header .mean-container a.meanmenu-reveal{
        position:absolute !important;
        z-index:1003 !important;
        top:50% !important;
        right:0 !important;
        width:44px !important;
        height:44px !important;
        margin:0 !important;
        padding:10px 6px !important;
        color:var(--cg-header-text) !important;
        background:transparent !important;
        border:0 !important;
        transform:translateY(-50%) !important;
        box-sizing:border-box !important;
    }

    .industrial-header .mean-container a.meanmenu-reveal span{
        display:block !important;
        width:32px !important;
        height:3px !important;
        margin-top:5px !important;
        border-radius:2px !important;
        background:var(--cg-header-text) !important;
    }

    /* Dropdown is overlayed, never part of header document height. */
    .industrial-header .mean-container .mean-nav{
        position:absolute !important;
        z-index:1100 !important;
        top:76px !important;
        left:-22px !important;
        right:-22px !important;
        width:auto !important;
        max-height:calc(100vh - 76px) !important;
        margin:0 !important;
        padding:0 !important;
        float:none !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        background:#fff !important;
        border-top:1px solid var(--cg-line) !important;
        box-shadow:0 14px 28px rgba(17,35,50,.12) !important;
    }

    .industrial-header .mean-container .mean-nav > ul,
    .industrial-header .mean-container .mean-nav ul.navbar-nav{
        width:100% !important;
        height:auto !important;
        max-height:none !important;
        margin:0 !important;
        padding:0 !important;
        overflow:visible !important;
        box-shadow:none !important;
        background:#fff !important;
    }

    .industrial-header .mean-container .mean-nav ul li,
    .industrial-header .mean-container .mean-nav ul li a{
        width:100% !important;
        box-sizing:border-box !important;
    }

    .industrial-header .mean-container .mean-nav ul li a{
        min-height:48px !important;
        padding:14px 54px 14px 22px !important;
        display:flex !important;
        align-items:center !important;
        color:#233644 !important;
        background:#fff !important;
        border-top:0 !important;
        border-bottom:1px solid #edf0f2 !important;
        font-size:14px !important;
        line-height:1.35 !important;
        font-weight:600 !important;
        white-space:normal !important;
        overflow-wrap:anywhere !important;
    }

    .industrial-header .mean-container .mean-nav ul li a:hover,
    .industrial-header .mean-container .mean-nav ul li a.active{
        color:var(--cg-accent) !important;
        background:#fff8ef !important;
    }

    /* Prevent all inherited blank spacing before hero. */
    .navbar-area.industrial-header,
    .navbar-area.industrial-header.is-sticky{
        position:relative !important;
        top:auto !important;
        left:auto !important;
        width:100% !important;
        height:76px !important;
        min-height:76px !important;
        margin:0 !important;
        padding:0 !important;
        background:#fff !important;
    }

    .navbar-area.industrial-header.is-sticky{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
    }

    .navbar-area.industrial-header + .home-slider-section,
    .navbar-area.industrial-header.is-sticky + .home-slider-section,
    .industrial-header + section.home-slider-section,
    .home-slider-section{
        margin-top:0 !important;
        padding-top:0 !important;
    }

    /* Hero starts immediately under header. */
    /*
     * IMPORTANT: Owl Carousel owns the inline width/transform of .owl-stage
     * and the width of every .owl-item. Do NOT force them to 100%.
     * Doing so makes the active slide move outside the viewport on phones,
     * leaving a white hero while the navigation arrows still render.
     */
    .home-slider-section,
    .home-slider-section .slider-container,
    .home-slider-section .owl-stage-outer{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:0 !important;
    }

    .home-slider-section .owl-stage{
        margin:0 !important;
        padding:0 !important;
        /* width and transform intentionally left to Owl Carousel */
    }

    .home-slider-section .owl-item{
        margin:0 !important;
        padding:0 !important;
        /* width intentionally left to Owl Carousel */
    }

    .home-slider-section .modern-hero-slider,
    .home-slider-section .single-slider-item{
        width:100% !important;
        height:clamp(500px,68vh,650px) !important;
        min-height:500px !important;
        margin:0 !important;
        padding:0 !important;
        display:flex !important;
        align-items:center !important;
        background-size:cover !important;
        background-position:center center !important;
        animation:none !important;
    }

    .home-slider-section .modern-hero-slider .container{
        width:100% !important;
        height:100% !important;
        padding:0 56px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    .home-slider-section .modern-hero-slider .row{
        width:100% !important;
        height:auto !important;
        margin:0 !important;
    }

    .home-slider-section .modern-hero-slider .col-lg-8,
    .home-slider-section .modern-hero-slider .col-md-12{
        width:100% !important;
        max-width:100% !important;
        flex:0 0 100% !important;
        padding:0 !important;
    }

    .home-slider-section .slider-content{
        width:100% !important;
        max-width:620px !important;
        margin:0 auto !important;
        padding:0 !important;
        text-align:center !important;
    }

    .home-slider-section .slider-content h1{
        margin:0 0 14px !important;
        font-size:clamp(32px,6vw,46px) !important;
        line-height:1.12 !important;
    }

    .home-slider-section .slider-content p{
        max-width:540px !important;
        margin:0 auto !important;
        font-size:15px !important;
        line-height:1.65 !important;
    }

    .home-slider-section .banner-btn{
        margin-top:24px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        flex-wrap:wrap !important;
        gap:12px !important;
    }

    .home-slider-section .banner-btn .default-btn,
    .home-slider-section .banner-btn .default-btn-one{
        min-width:138px !important;
        margin:0 !important;
        padding:12px 22px !important;
        font-size:14px !important;
    }

    .home-slider-section .slider-container.owl-theme .owl-nav{
        top:50% !important;
        transform:translateY(-50%) !important;
    }

    .home-slider-section .slider-container.owl-theme .owl-nav button,
    .home-slider-section .slider-container.owl-theme .owl-nav button.owl-prev,
    .home-slider-section .slider-container.owl-theme .owl-nav button.owl-next{
        top:-22px !important;
        width:44px !important;
        height:44px !important;
        border-radius:50% !important;
        background:rgba(20,35,45,.30) !important;
        border:1px solid rgba(255,255,255,.82) !important;
    }

    .home-slider-section .slider-container.owl-theme .owl-nav button.owl-prev{
        left:12px !important;
    }

    .home-slider-section .slider-container.owl-theme .owl-nav button.owl-next{
        right:12px !important;
    }

    .home-slider-section .slider-container.owl-theme .owl-dots{
        bottom:18px !important;
    }

    .slider-glow,
    .slider-particles{
        display:none !important;
    }
}

/* ---------- Owl mobile rendering safety ---------- */
@media (max-width:991px){
    .home-slider-section .owl-stage-outer{
        overflow:hidden !important;
    }

    .home-slider-section .owl-stage{
        display:flex !important;
        align-items:stretch !important;
    }

    .home-slider-section .owl-item{
        flex:0 0 auto !important;
        min-height:1px !important;
    }

    .home-slider-section .owl-item .single-slider-item{
        opacity:1 !important;
        visibility:visible !important;
    }

    .home-slider-section .slider-content{
        opacity:1 !important;
        visibility:visible !important;
    }
}

/* ---------- Small phones ---------- */
@media (max-width:575px){
    .industrial-header .cyberguard-responsive-nav > .container{
        padding-left:16px !important;
        padding-right:16px !important;
    }

    .industrial-header .cyberguard-responsive-menu,
    .industrial-header .cyberguard-responsive-menu.mean-container,
    .industrial-header .mean-container,
    .industrial-header .mean-container .mean-bar,
    .navbar-area.industrial-header,
    .navbar-area.industrial-header.is-sticky{
        height:68px !important;
        min-height:68px !important;
    }

    .industrial-header .cyberguard-responsive-nav .logo .black-logo{
        max-width:min(220px,64vw) !important;
        max-height:44px !important;
    }

    .industrial-header .mean-container .mean-nav{
        top:68px !important;
        left:-16px !important;
        right:-16px !important;
        max-height:calc(100vh - 68px) !important;
    }

    .home-slider-section .modern-hero-slider,
    .home-slider-section .single-slider-item{
        height:clamp(460px,72vh,590px) !important;
        min-height:460px !important;
    }

    .home-slider-section .modern-hero-slider .container{
        padding-left:50px !important;
        padding-right:50px !important;
    }

    .home-slider-section .slider-content h1{
        font-size:clamp(29px,9vw,40px) !important;
    }

    .home-slider-section .slider-content p{
        font-size:14px !important;
    }

    .home-slider-section .banner-btn{
        gap:10px !important;
    }

    .home-slider-section .banner-btn .default-btn,
    .home-slider-section .banner-btn .default-btn-one{
        min-width:125px !important;
        padding:11px 18px !important;
        font-size:13.5px !important;
    }

    .home-slider-section .slider-container.owl-theme .owl-nav button,
    .home-slider-section .slider-container.owl-theme .owl-nav button.owl-prev,
    .home-slider-section .slider-container.owl-theme .owl-nav button.owl-next{
        top:-20px !important;
        width:40px !important;
        height:40px !important;
        font-size:16px !important;
    }

    .home-slider-section .slider-container.owl-theme .owl-nav button.owl-prev{
        left:8px !important;
    }

    .home-slider-section .slider-container.owl-theme .owl-nav button.owl-next{
        right:8px !important;
    }
}

/* ==========================================================
   V24 - Mobile / Tablet MeanMenu cleanup
   Fixes parent-menu rows, submenu toggles, spacing and hierarchy.
   ========================================================== */
@media (max-width: 991px) {
    /* Header remains a clean single row. */
    .navbar-area.industrial-header,
    .navbar-area.industrial-header.is-sticky {
        border-bottom: 1px solid #e8edf1 !important;
        box-shadow: 0 3px 14px rgba(20, 38, 54, .045) !important;
    }

    .industrial-header .cyberguard-responsive-menu,
    .industrial-header .cyberguard-responsive-menu.mean-container,
    .industrial-header .mean-container,
    .industrial-header .mean-container .mean-bar {
        overflow: visible !important;
    }

    /* Menu panel. The phone uses full width; tablet is refined below. */
    .industrial-header .mean-container .mean-nav {
        background: #ffffff !important;
        border: 1px solid #e8edf1 !important;
        border-top: 0 !important;
        box-shadow: 0 18px 38px rgba(24, 43, 60, .12) !important;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: #c8d0d6 transparent;
    }

    .industrial-header .mean-container .mean-nav::-webkit-scrollbar {
        width: 5px;
    }

    .industrial-header .mean-container .mean-nav::-webkit-scrollbar-thumb {
        background: #c8d0d6;
        border-radius: 8px;
    }

    /* Reset desktop dropdown positioning inside MeanMenu. */
    .industrial-header .mean-container .mean-nav ul,
    .industrial-header .mean-container .mean-nav ul.dropdown-menu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        background: #ffffff !important;
    }

    /* MeanMenu controls display:none/block inline; do not override display. */
    .industrial-header .mean-container .mean-nav li {
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        clear: both !important;
        border: 0 !important;
        background: #ffffff !important;
    }

    /* Primary link occupies one tidy row. */
    .industrial-header .mean-container .mean-nav ul li > a:not(.mean-expand) {
        position: relative !important;
        width: 100% !important;
        min-height: 56px !important;
        margin: 0 !important;
        padding: 16px 68px 16px 24px !important;
        display: flex !important;
        align-items: center !important;
        float: none !important;
        clear: none !important;
        color: #1f3342 !important;
        background: #ffffff !important;
        border: 0 !important;
        border-bottom: 1px solid #edf1f4 !important;
        border-radius: 0 !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }

    /* Desktop walker arrow is redundant on mobile; MeanMenu owns expansion. */
    .industrial-header .mean-container .mean-nav ul li > a:not(.mean-expand) i,
    .industrial-header .mean-container .mean-nav ul li > a:not(.mean-expand) .fa,
    .industrial-header .mean-container .mean-nav ul li > a:not(.mean-expand) .fas {
        display: none !important;
    }

    /* The key fix: expansion control is a small button on the right, never a full row. */
    .industrial-header .mean-container .mean-nav ul li > a.mean-expand {
        position: absolute !important;
        z-index: 5 !important;
        top: 7px !important;
        right: 12px !important;
        left: auto !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        float: none !important;
        clear: none !important;
        overflow: hidden !important;
        color: transparent !important;
        background: #f5f7f9 !important;
        border: 1px solid #e4e9ed !important;
        border-radius: 8px !important;
        font-size: 0 !important;
        line-height: 1 !important;
        text-indent: -9999px !important;
        box-sizing: border-box !important;
        transition: background-color .18s ease, border-color .18s ease !important;
    }

    .industrial-header .mean-container .mean-nav ul li > a.mean-expand::after {
        content: "" !important;
        width: 9px !important;
        height: 9px !important;
        display: block !important;
        border-right: 2px solid #243746 !important;
        border-bottom: 2px solid #243746 !important;
        transform: rotate(45deg) translate(-1px, -1px) !important;
        transform-origin: center !important;
        transition: transform .18s ease !important;
    }

    .industrial-header .mean-container .mean-nav ul li > a.mean-expand.mean-clicked {
        background: #fff6eb !important;
        border-color: #f3d2aa !important;
    }

    .industrial-header .mean-container .mean-nav ul li > a.mean-expand.mean-clicked::after {
        border-color: #d87600 !important;
        transform: rotate(-135deg) translate(-1px, -1px) !important;
    }

    /* Hover / active state stays flat and does not paint an oversized block. */
    .industrial-header .mean-container .mean-nav ul li > a:not(.mean-expand):hover,
    .industrial-header .mean-container .mean-nav ul li > a:not(.mean-expand):focus,
    .industrial-header .mean-container .mean-nav ul li > a:not(.mean-expand).active,
    .industrial-header .mean-container .mean-nav ul li.current-menu-item > a:not(.mean-expand),
    .industrial-header .mean-container .mean-nav ul li.current-menu-parent > a:not(.mean-expand),
    .industrial-header .mean-container .mean-nav ul li.current_page_item > a:not(.mean-expand) {
        color: #d97800 !important;
        background: #fffaf4 !important;
    }

    /* Submenu hierarchy: compact, readable, and clearly nested. */
    .industrial-header .mean-container .mean-nav ul li ul {
        background: #fafbfd !important;
    }

    .industrial-header .mean-container .mean-nav ul li li > a:not(.mean-expand) {
        min-height: 50px !important;
        padding-left: 40px !important;
        padding-right: 68px !important;
        color: #40515e !important;
        background: #fafbfd !important;
        font-size: 14.5px !important;
        font-weight: 500 !important;
    }

    .industrial-header .mean-container .mean-nav ul li li li > a:not(.mean-expand) {
        padding-left: 56px !important;
        background: #f7f9fb !important;
        font-size: 14px !important;
    }

    /* Make the open/close icon refined instead of a raw text X. */
    .industrial-header .mean-container a.meanmenu-reveal.meanclose {
        font-size: 0 !important;
        text-indent: -9999px !important;
    }

    .industrial-header .mean-container a.meanmenu-reveal.meanclose::before,
    .industrial-header .mean-container a.meanmenu-reveal.meanclose::after {
        content: "" !important;
        position: absolute !important;
        left: 8px !important;
        top: 20px !important;
        width: 28px !important;
        height: 3px !important;
        border-radius: 3px !important;
        background: #1f3342 !important;
    }

    .industrial-header .mean-container a.meanmenu-reveal.meanclose::before {
        transform: rotate(45deg) !important;
    }

    .industrial-header .mean-container a.meanmenu-reveal.meanclose::after {
        transform: rotate(-45deg) !important;
    }

    .industrial-header .mean-container a.meanmenu-reveal.meanclose span {
        display: none !important;
    }
}

/* Tablet: use a neat right-aligned dropdown panel instead of an overly wide sheet. */
@media (min-width: 768px) and (max-width: 991px) {
    .industrial-header .mean-container .mean-nav {
        left: auto !important;
        right: -22px !important;
        width: min(440px, 72vw) !important;
        border-radius: 0 0 0 12px !important;
    }

    .industrial-header .mean-container .mean-nav ul li > a:not(.mean-expand) {
        min-height: 58px !important;
        padding-left: 26px !important;
        font-size: 16px !important;
    }

    .industrial-header .mean-container .mean-nav ul li li > a:not(.mean-expand) {
        padding-left: 44px !important;
    }
}

/* Phone: full-width menu with slightly tighter rhythm. */
@media (max-width: 767px) {
    .industrial-header .mean-container .mean-nav {
        left: -16px !important;
        right: -16px !important;
        width: auto !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 0 !important;
    }

    .industrial-header .mean-container .mean-nav ul li > a:not(.mean-expand) {
        min-height: 54px !important;
        padding: 15px 62px 15px 20px !important;
        font-size: 15.5px !important;
    }

    .industrial-header .mean-container .mean-nav ul li > a.mean-expand {
        top: 6px !important;
        right: 10px !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        border-radius: 7px !important;
    }

    .industrial-header .mean-container .mean-nav ul li li > a:not(.mean-expand) {
        min-height: 48px !important;
        padding-left: 36px !important;
        font-size: 14px !important;
    }
}

/* ==========================================================
   V25 - Final mobile/tablet navigation polish
   Root cause fixed: the custom WordPress walker outputs
   .huacai-dropdown-toggle, while MeanMenu also injects
   .mean-expand. On <= 991px only MeanMenu's toggle is kept.
   ========================================================== */
@media (max-width: 991px) {
    /* CRITICAL: remove the duplicate custom walker arrow on mobile/tablet. */
    .industrial-header .huacai-dropdown-toggle,
    .industrial-header .mean-container .huacai-dropdown-toggle,
    .industrial-header .mean-nav .huacai-dropdown-toggle {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    /* The menu sheet is visually lighter and easier to scan. */
    .industrial-header .mean-container .mean-nav {
        max-height: calc(100dvh - 78px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: #fff !important;
        border-color: #e9eef2 !important;
        box-shadow: 0 14px 34px rgba(22, 39, 55, .10) !important;
    }

    /* Every top-level row has the same visual rhythm. */
    .industrial-header .mean-container .mean-nav > ul > li > a:not(.mean-expand) {
        min-height: 58px !important;
        padding: 17px 68px 17px 24px !important;
        color: #1d3242 !important;
        background: #fff !important;
        border-bottom: 1px solid #edf1f4 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.45 !important;
    }

    /* Flat active state: subtle tint, not a large orange block. */
    .industrial-header .mean-container .mean-nav > ul > li.current-menu-item > a:not(.mean-expand),
    .industrial-header .mean-container .mean-nav > ul > li.current-menu-parent > a:not(.mean-expand),
    .industrial-header .mean-container .mean-nav > ul > li.current_page_item > a:not(.mean-expand),
    .industrial-header .mean-container .mean-nav > ul > li > a:not(.mean-expand).active {
        color: #d87500 !important;
        background: #fffaf4 !important;
        box-shadow: inset 3px 0 0 #e68613 !important;
    }

    /* One clean submenu control on the far right. */
    .industrial-header .mean-container .mean-nav ul li > a.mean-expand {
        top: 10px !important;
        right: 16px !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: 7px !important;
        box-shadow: none !important;
    }

    .industrial-header .mean-container .mean-nav ul li > a.mean-expand:hover,
    .industrial-header .mean-container .mean-nav ul li > a.mean-expand:focus {
        background: #f5f7f9 !important;
        border-color: #e5eaee !important;
    }

    .industrial-header .mean-container .mean-nav ul li > a.mean-expand.mean-clicked {
        background: #fff7ee !important;
        border-color: #f3ddc2 !important;
    }

    .industrial-header .mean-container .mean-nav ul li > a.mean-expand::after {
        width: 8px !important;
        height: 8px !important;
        border-right-width: 2px !important;
        border-bottom-width: 2px !important;
    }

    /* Product submenu: clear hierarchy, compact but readable. */
    .industrial-header .mean-container .mean-nav ul li ul {
        background: #f8fafb !important;
    }

    .industrial-header .mean-container .mean-nav ul li li > a:not(.mean-expand) {
        min-height: 48px !important;
        padding: 13px 58px 13px 38px !important;
        color: #3d505e !important;
        background: #f8fafb !important;
        border-bottom: 1px solid #edf1f4 !important;
        font-size: 14.5px !important;
        font-weight: 500 !important;
        line-height: 1.45 !important;
    }

    .industrial-header .mean-container .mean-nav ul li li > a:not(.mean-expand):hover,
    .industrial-header .mean-container .mean-nav ul li li > a:not(.mean-expand):focus,
    .industrial-header .mean-container .mean-nav ul li li.current-menu-item > a:not(.mean-expand) {
        color: #d87500 !important;
        background: #fff9f2 !important;
    }

    /* Keep the close icon aligned with the header, without an oversized hitbox. */
    .industrial-header .mean-container a.meanmenu-reveal.meanclose {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
    }

    .industrial-header .mean-container a.meanmenu-reveal.meanclose::before,
    .industrial-header .mean-container a.meanmenu-reveal.meanclose::after {
        left: 9px !important;
        top: 21px !important;
        width: 26px !important;
        height: 2.5px !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .industrial-header .mean-container .mean-nav {
        right: -18px !important;
        width: min(430px, 70vw) !important;
        border-radius: 0 0 0 10px !important;
    }

    .industrial-header .mean-container .mean-nav > ul > li > a:not(.mean-expand) {
        padding-left: 26px !important;
        padding-right: 70px !important;
    }
}

@media (max-width: 767px) {
    .industrial-header .mean-container .mean-nav {
        left: -16px !important;
        right: -16px !important;
        width: auto !important;
        max-height: calc(100dvh - 72px) !important;
    }

    .industrial-header .mean-container .mean-nav > ul > li > a:not(.mean-expand) {
        min-height: 56px !important;
        padding: 16px 60px 16px 20px !important;
        font-size: 15.5px !important;
    }

    .industrial-header .mean-container .mean-nav ul li > a.mean-expand {
        top: 9px !important;
        right: 12px !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
    }

    .industrial-header .mean-container .mean-nav ul li li > a:not(.mean-expand) {
        padding-left: 34px !important;
        padding-right: 54px !important;
        font-size: 14px !important;
    }
}
/* ---------- V26 desktop rhythm tuning ---------- */
@media (min-width:1600px){
    .industrial-header .cyberguard-nav .navbar .navbar-nav{
        gap:34px !important;
    }
}

@media (min-width:1200px) and (max-width:1399px){
    .industrial-header .cyberguard-nav .navbar .navbar-nav{
        gap:20px !important;
    }
    .industrial-header .cyberguard-nav .navbar .navbar-nav > .nav-item > a{
        font-size:15px !important;
    }
}


/* ==========================================================
   V27 - Reference-style desktop navigation composition
   Goal: logo left, menu visually centered, CTA right;
   equal and moderate spacing without stretching across screen.
   ========================================================== */
@media (min-width: 1200px) {
    .industrial-header .cyberguard-nav > .container {
        max-width: 1680px !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .industrial-header .cyberguard-nav .navbar {
        min-height: 92px !important;
        display: grid !important;
        grid-template-columns: minmax(250px, 310px) minmax(0, 1fr) minmax(150px, 180px) !important;
        column-gap: clamp(24px, 2.1vw, 38px) !important;
        align-items: center !important;
    }

    .industrial-header .cyberguard-nav .navbar-brand {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    .industrial-header .navbar-brand img {
        width: auto !important;
        max-width: 100% !important;
        max-height: 62px !important;
        object-fit: contain !important;
    }

    .industrial-header .cyberguard-nav .navbar-collapse {
        min-width: 0 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        column-gap: clamp(26px, 2vw, 36px) !important;
        align-items: center !important;
    }

    /* Menu occupies a controlled center lane, like the reference image. */
    .industrial-header .cyberguard-nav .navbar .navbar-nav {
        width: 100% !important;
        max-width: 1040px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0 !important;
    }

    .industrial-header .cyberguard-nav .navbar .navbar-nav > .nav-item {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .industrial-header .cyberguard-nav .navbar .navbar-nav > .nav-item > a {
        min-height: 92px !important;
        margin: 0 !important;
        padding: 0 8px !important;
        font-size: 16px !important;
        font-weight: 650 !important;
        letter-spacing: -0.15px !important;
        white-space: nowrap !important;
    }

    .industrial-header .cyberguard-nav .navbar .navbar-nav > .nav-item > a i,
    .industrial-header .cyberguard-nav .navbar .navbar-nav > .nav-item > a .fa,
    .industrial-header .cyberguard-nav .navbar .navbar-nav > .nav-item > a .fas {
        margin-left: 6px !important;
        font-size: 11px !important;
    }

    .industrial-header .cyberguard-nav .navbar .other-option {
        width: auto !important;
        margin: 0 !important;
        justify-self: end !important;
    }

    .industrial-header .cyberguard-nav .navbar .other-option .default-btn {
        min-width: 164px !important;
        min-height: 50px !important;
        padding: 0 22px !important;
        border-radius: 6px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        box-shadow: 0 8px 20px rgba(216,117,0,.12) !important;
    }

    .industrial-header.is-sticky .cyberguard-nav .navbar {
        min-height: 76px !important;
    }

    .industrial-header.is-sticky .cyberguard-nav .navbar .navbar-nav > .nav-item > a {
        min-height: 76px !important;
    }

    .industrial-header.is-sticky .navbar-brand img {
        max-height: 52px !important;
    }
}

/* 1400-1599: preserve the same rhythm without crowding. */
@media (min-width: 1400px) and (max-width: 1599px) {
    .industrial-header .cyberguard-nav > .container {
        max-width: 1500px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .industrial-header .cyberguard-nav .navbar {
        grid-template-columns: minmax(220px, 270px) minmax(0, 1fr) minmax(145px, 165px) !important;
        column-gap: 24px !important;
    }

    .industrial-header .cyberguard-nav .navbar .navbar-nav {
        max-width: 900px !important;
    }

    .industrial-header .cyberguard-nav .navbar .navbar-nav > .nav-item > a {
        padding-left: 6px !important;
        padding-right: 6px !important;
        font-size: 15px !important;
    }

    .industrial-header .cyberguard-nav .navbar .other-option .default-btn {
        min-width: 148px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        font-size: 14px !important;
    }
}

/* 1200-1399: slightly tighter, still evenly distributed. */
@media (min-width: 1200px) and (max-width: 1399px) {
    .industrial-header .cyberguard-nav > .container {
        max-width: 1320px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .industrial-header .cyberguard-nav .navbar {
        grid-template-columns: minmax(185px, 225px) minmax(0, 1fr) 128px !important;
        column-gap: 16px !important;
    }

    .industrial-header .cyberguard-nav .navbar-collapse {
        column-gap: 16px !important;
    }

    .industrial-header .cyberguard-nav .navbar .navbar-nav {
        max-width: 790px !important;
    }

    .industrial-header .cyberguard-nav .navbar .navbar-nav > .nav-item > a {
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 15px !important;
    }

    .industrial-header .cyberguard-nav .navbar .other-option .default-btn {
        min-width: 128px !important;
        min-height: 44px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
    }
}

/* ==========================================================
   V28 - Move Get Started to the true far-right of desktop nav
   Reference composition: logo left / menu center / CTA far right
   ========================================================== */
@media (min-width: 1200px) {
    .industrial-header .cyberguard-nav > .container {
        max-width: 1920px !important;
        width: 100% !important;
        padding-left: clamp(22px, 2.2vw, 44px) !important;
        padding-right: clamp(22px, 2.2vw, 44px) !important;
    }

    /* Navbar has only two direct children: logo + collapse.
       Let the collapse consume ALL remaining width so the CTA can sit
       against the right edge instead of stopping in the middle. */
    .industrial-header .cyberguard-nav .navbar {
        display: grid !important;
        grid-template-columns: clamp(240px, 18vw, 330px) minmax(0, 1fr) !important;
        column-gap: clamp(28px, 2.4vw, 46px) !important;
        align-items: center !important;
        width: 100% !important;
    }

    .industrial-header .cyberguard-nav .navbar-collapse {
        grid-column: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        column-gap: clamp(30px, 2.8vw, 54px) !important;
        align-items: center !important;
    }

    /* Keep the menu visually centered and evenly distributed. */
    .industrial-header .cyberguard-nav .navbar .navbar-nav {
        width: 100% !important;
        max-width: 1000px !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0 !important;
    }

    /* CTA sits at the extreme right of the available container. */
    .industrial-header .cyberguard-nav .navbar .other-option {
        justify-self: end !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }

    .industrial-header .cyberguard-nav .navbar .other-option .default-btn {
        margin: 0 !important;
        min-width: 172px !important;
        min-height: 52px !important;
        padding: 0 24px !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 1600px) {
    .industrial-header .cyberguard-nav .navbar .navbar-nav {
        max-width: 1060px !important;
    }
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .industrial-header .cyberguard-nav .navbar {
        grid-template-columns: 260px minmax(0, 1fr) !important;
        column-gap: 28px !important;
    }
    .industrial-header .cyberguard-nav .navbar-collapse {
        column-gap: 32px !important;
    }
    .industrial-header .cyberguard-nav .navbar .navbar-nav {
        max-width: 900px !important;
    }
    .industrial-header .cyberguard-nav .navbar .other-option .default-btn {
        min-width: 154px !important;
        min-height: 48px !important;
        padding: 0 18px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .industrial-header .cyberguard-nav .navbar {
        grid-template-columns: 215px minmax(0, 1fr) !important;
        column-gap: 18px !important;
    }
    .industrial-header .cyberguard-nav .navbar-collapse {
        column-gap: 20px !important;
    }
    .industrial-header .cyberguard-nav .navbar .navbar-nav {
        max-width: 760px !important;
    }
    .industrial-header .cyberguard-nav .navbar .other-option .default-btn {
        min-width: 132px !important;
        min-height: 44px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
    }
}