/*=====================================================
        VIVCON HEADER — fresh build (self-contained)

        Uses only vc-* classes so none of the old theme's
        header-style-1 / pq-bottom-header / etc. rules in
        style.css or responsive.css can apply to it.

        Fixed to the viewport at all times. Height shrinks
        continuously with scroll via the --scroll-progress
        CSS variable, which js/header-scroll.js updates every
        animation frame (0 = top of page, 1 = fully shrunk).
======================================================*/

:root{

    --vc-header-h:70px;
    --vc-header-h-small:54px;

    --vc-logo-h:44px;
    --vc-logo-shrink:.82;

    --scroll-progress:0;

}

.vc-header,
.vc-header *{
    box-sizing:border-box;
}

header#pq-header.vc-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    background:#F2F0EF;

    box-shadow:0 4px 20px rgba(10,42,102,calc(.05 + .07 * var(--scroll-progress)));

    display:block;

}

.vc-header-inner{

    position:relative;

    height:calc(var(--vc-header-h) - (var(--vc-header-h) - var(--vc-header-h-small)) * var(--scroll-progress));

    max-width:100%;

    margin:0;

    padding:0 50px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;

    will-change:height;

}

/*----------------------------------------------------*/
/* Logo */

.vc-logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

}

.vc-logo-img{

    height:var(--vc-logo-h);

    width:auto;

    transform-origin:left center;

    transform:scale(calc(1 - (1 - var(--vc-logo-shrink)) * var(--scroll-progress)));

    will-change:transform;

}

/*----------------------------------------------------*/
/* Nav */

.vc-nav{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

}

.vc-nav-list{

    display:flex;

    align-items:center;

    gap:6px;

    list-style:none;

    margin:0;

    padding:0;

}

.vc-nav-list li a{

    display:block;

    position:relative;

    padding:10px 16px;

    color:#0c1343;

    font-weight:600;

    font-size:15px;

    text-decoration:none;

    transition:color .25s ease;

}

.vc-nav-list li a:after{

    content:"";

    position:absolute;

    left:16px;

    right:16px;

    bottom:4px;

    height:2px;

    background:#2F67FF;

    transform:scaleX(0);

    transition:transform .25s ease;

}

.vc-nav-list li a:hover{

    color:#0A2A66;

}

/*----------------------------------------------------*/
/* Dropdowns (Products / Raw Materials) */

.vc-has-dropdown{

    position:relative;

}

.vc-nav-item-row{

    display:flex;

    align-items:center;

}

.vc-dropdown-toggle{

    background:none !important;

    border:none;

    padding:6px;

    margin-left:-4px;

    color:#0A2A66;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    outline:none;

    box-shadow:none !important;

}

.vc-dropdown-toggle,
.vc-dropdown-toggle:hover,
.vc-dropdown-toggle:focus,
.vc-dropdown-toggle:focus-visible,
.vc-dropdown-toggle:active{

    color:#0A2A66 !important;

    background:none !important;

    box-shadow:none !important;

}

.vc-dropdown-arrow{

    display:block;

    transition:transform .25s ease;

    color:inherit;

}

.vc-has-dropdown:hover .vc-dropdown-arrow,
.vc-has-dropdown.vc-dropdown-open .vc-dropdown-arrow{

    transform:rotate(180deg);

}

.vc-dropdown{

    position:absolute;

    top:100%;

    left:50%;

    min-width:230px;

    background:#F2F0EF;

    border-radius:10px;

    box-shadow:0 16px 40px rgba(10,42,102,.16);

    padding:10px 0;

    list-style:none;

    margin:0;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:translateX(-50%) translateY(8px);

    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;

    z-index:50;

}

.vc-has-dropdown:hover .vc-dropdown{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateX(-50%) translateY(0);

}

.vc-dropdown li{

    width:100%;

}

.vc-dropdown li a{

    display:block;

    padding:10px 22px;

    color:#0c1343;

    font-size:14px;

    font-weight:500;

    white-space:nowrap;

    text-decoration:none;

    transition:background .2s ease, color .2s ease;

}

.vc-dropdown li a:after{

    display:none;

}

.vc-dropdown li a:hover{

    background:#f2f5ff;

    color:#0A2A66;

}

.vc-nav-list li a:hover:after,
.vc-nav-list li.active a:after{

    transform:scaleX(1);

}

.vc-nav-list li.active a{

    color:#0A2A66;

}

/*----------------------------------------------------*/
/* Right-side actions: contact icon + mobile toggle */

.vc-header-actions{

    display:flex;

    align-items:center;

    gap:14px;

    flex-shrink:0;

}

.vc-contact-btn{

    width:38px;

    height:38px;

    min-width:38px;

    min-height:38px;

    aspect-ratio:1 / 1;

    border-radius:50%;

    background:#0A2A66;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:15px;

    line-height:1;

    flex-shrink:0;

    transition:background .25s ease;

}

.vc-contact-btn i{

    display:block;

}

.vc-contact-btn:hover{

    background:#2F67FF;

    color:#fff;

}

.vc-nav-toggle{

    display:none;

    background:none;

    border:none;

    font-size:20px;

    color:#0c1343;

    padding:6px;

    cursor:pointer;

}

/*----------------------------------------------------*/
/* Mobile */

@media(max-width:991px){

    .vc-nav-toggle{

        display:block;

    }

    .vc-nav{

        position:absolute;

        top:100%;

        left:0;

        width:100%;

        background:#F2F0EF;

        box-shadow:0 12px 24px rgba(0,0,0,.08);

        max-height:0;

        overflow:hidden;

        transition:max-height .3s ease;

        justify-content:flex-start;

    }

    .vc-nav.vc-nav-open{

        max-height:400px;

    }

    .vc-nav-list{

        flex-direction:column;

        align-items:flex-start;

        width:100%;

        gap:0;

        padding:8px 24px 16px;

    }

    .vc-nav-list li{

        width:100%;

    }

    .vc-nav-list li a{

        width:100%;

        padding:12px 0;

    }

    .vc-nav-list li a:after{

        display:none;

    }

    .vc-nav-item-row{

        justify-content:space-between;

    }

    .vc-dropdown-toggle{

        padding:12px;

        font-size:13px;

    }

    .vc-dropdown{

        position:static;

        transform:none;

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        box-shadow:none;

        border-radius:0;

        min-width:0;

        padding:0;

        max-height:0;

        overflow:hidden;

        transition:max-height .3s ease;

    }

    .vc-has-dropdown.vc-dropdown-open .vc-dropdown{

        max-height:300px;

    }

    .vc-dropdown li a{

        padding:10px 0 10px 16px;

        color:#444;

    }
}