/* ==========================================================================
   Primary navigation (home / marketing pages)
   Desktop: inline menu with dropdown. Mobile: off-canvas panel.
   ========================================================================== */

:root {
    --nav-ink: #0d1b2a;
    --nav-ink-muted: #5a6b7d;
    --nav-radius: 10px;
}

/* --- shared ------------------------------------------------------------- */

.vx-nav,
.vx-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vx-nav-actions {
    display: flex;
    align-items: center;
    gap: 22px;
}

.full-width-header .rs-header .menu-area .row-table {
    gap: 20px;
}

/* Keep the header comfortable once it sticks to the top */
.full-width-header .rs-header .menu-area.sticky .row-table {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* --- desktop menu ------------------------------------------------------- */

.vx-nav {
    display: none;
}

@media (min-width: 992px) {
    .vx-nav {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .vx-nav__item {
        position: relative;
    }

    .vx-nav__link {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10px 14px;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -0.01em;
        white-space: nowrap;
        border-radius: 8px;
        color: #fff;
        position: relative;
        transition: color 0.25s ease, background-color 0.25s ease;
    }

    .vx-nav__link:after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 2px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.25s ease;
    }

    .vx-nav__item:hover > .vx-nav__link:after,
    .vx-nav__link.is-active:after {
        transform: scaleX(1);
    }

    .vx-nav__link .caret {
        font-size: 13px;
        transition: transform 0.25s ease;
    }

    .vx-nav__item:hover > .vx-nav__link .caret {
        transform: rotate(180deg);
    }

    /* over the hero (header is transparent until it sticks) */
    .menu-area:not(.sticky) .vx-nav__link {
        color: #fff;
    }

    .menu-area:not(.sticky) .vx-nav__item:hover > .vx-nav__link,
    .menu-area:not(.sticky) .vx-nav__link.is-active {
        color: #fff;
        background: rgba(255, 255, 255, 0.12);
    }

    /* stuck to the top, white background */
    .menu-area.sticky .vx-nav__link {
        color: var(--nav-ink);
    }

    .menu-area.sticky .vx-nav__item:hover > .vx-nav__link,
    .menu-area.sticky .vx-nav__link.is-active {
        color: var(--main-color);
        background: rgba(29, 109, 206, 0.08);
    }

    /* dropdown
       The wrapper starts flush against the link and carries the 14px offset as
       transparent padding, so the pointer never leaves the hovered item on its
       way down to the card. */
    .vx-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 250px;
        padding-top: 14px;
        pointer-events: none;
        z-index: 1000;
    }

    /* The card unrolls downward from its top edge - the clip reveal keeps the
       text crisp (no scaling) while the items fade in just behind it. */
    .vx-dropdown__card {
        padding: 10px;
        background: #fff;
        border-radius: var(--nav-radius);
        box-shadow: 0 18px 40px rgba(13, 27, 42, 0.16);
        clip-path: inset(0 0 100% 0);
        transition: clip-path 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .vx-nav__item:hover > .vx-dropdown,
    .vx-nav__item:focus-within > .vx-dropdown {
        pointer-events: auto;
    }

    .vx-nav__item:hover > .vx-dropdown .vx-dropdown__card,
    .vx-nav__item:focus-within > .vx-dropdown .vx-dropdown__card {
        clip-path: inset(0 0 0 0);
    }

    .vx-dropdown__card li {
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity 0.2s ease, transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .vx-nav__item:hover > .vx-dropdown .vx-dropdown__card li,
    .vx-nav__item:focus-within > .vx-dropdown .vx-dropdown__card li {
        opacity: 1;
        transform: translateY(0);
    }

    .vx-nav__item:hover > .vx-dropdown .vx-dropdown__card li:nth-child(2),
    .vx-nav__item:focus-within > .vx-dropdown .vx-dropdown__card li:nth-child(2) {
        transition-delay: 0.06s;
    }

    .vx-nav__item:hover > .vx-dropdown .vx-dropdown__card li:nth-child(3),
    .vx-nav__item:focus-within > .vx-dropdown .vx-dropdown__card li:nth-child(3) {
        transition-delay: 0.12s;
    }

    .vx-dropdown a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 14px;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 500;
        color: var(--nav-ink);
        transition: all 0.25s ease;
    }

    .vx-dropdown a i {
        width: 18px;
        font-size: 14px;
        color: var(--main-color);
    }

    .vx-dropdown a:hover,
    .vx-dropdown a.is-active {
        background: rgba(29, 109, 206, 0.08);
        color: var(--main-color);
    }

    /* right-hand actions */
    .vx-login {
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        white-space: nowrap;
    }

    .full-width-header .rs-header .menu-area.sticky .expand-btn-inner ul li > a.vx-login {
        color: var(--nav-ink);
    }

    .full-width-header .rs-header .menu-area.sticky .expand-btn-inner ul li > a.vx-login:hover {
        color: var(--main-color);
    }

    .vx-login:hover {
        color: var(--main-color);
    }

    /* the menu button belongs to small screens only; the selector has to
       outrank the theme's `.expand-btn-inner ul li { display: inline-block }` */
    .full-width-header .rs-header .expand-btn-inner ul.vx-nav-actions li.humburger {
        display: none;
    }
}

/* --- menu button -------------------------------------------------------- */

.full-width-header .rs-header .expand-btn-inner ul li > a.vx-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.vx-burger:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.45);
}

.menu-area.sticky .vx-burger {
    border-color: #dde4ec;
    background: #fff;
}

.menu-area.sticky .vx-burger:hover {
    border-color: var(--main-color);
    background: rgba(29, 109, 206, 0.07);
}

.vx-burger__lines {
    position: relative;
    display: block;
    width: 20px;
    height: 14px;
}

.vx-burger__lines span {
    position: absolute;
    left: 0;
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: #fff;
    transition: transform 0.3s ease, opacity 0.2s ease, width 0.3s ease;
}

.menu-area.sticky .vx-burger__lines span {
    background: var(--nav-ink);
}

.vx-burger__lines span:nth-child(1) {
    top: 0;
}

.vx-burger__lines span:nth-child(2) {
    top: 6px;
    width: 13px;
}

.vx-burger__lines span:nth-child(3) {
    top: 12px;
}

.vx-burger:hover .vx-burger__lines span:nth-child(2) {
    width: 20px;
}

/* morph into a close icon while the panel is open */
body.nav-expanded .vx-burger__lines span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

body.nav-expanded .vx-burger__lines span:nth-child(2) {
    opacity: 0;
}

body.nav-expanded .vx-burger__lines span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* --- compact header ----------------------------------------------------- */

@media (max-width: 991px) {
    .vx-login {
        display: none;
    }
}

/* --- off-canvas panel --------------------------------------------------- */

.offwrap {
    position: fixed;
    inset: 0;
    background: rgba(5, 12, 20, 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1999;
}

body.nav-expanded .offwrap {
    opacity: 1;
    visibility: visible;
}

nav.right_menu_togle.vx-offcanvas {
    max-width: 340px;
    right: -340px;
    padding-bottom: 30px;
    background: linear-gradient(170deg, #0d1b2a 0%, #081220 100%);
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.35);
}

body.nav-expanded nav.right_menu_togle.vx-offcanvas {
    right: 0;
}

.vx-offcanvas .close-btn {
    display: flex;
    justify-content: flex-end;
    padding: 22px 24px 0;
}

.vx-offcanvas .nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: background 0.25s ease;
}

.vx-offcanvas .nav-close:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* the theme ships no styles for these spans, so draw the X here */
.vx-offcanvas .nav-close .line {
    position: relative;
    width: 16px;
    height: 16px;
}

.vx-offcanvas .nav-close .line span {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: #fff;
}

.vx-offcanvas .nav-close .line span.line1 {
    transform: rotate(45deg);
}

.vx-offcanvas .nav-close .line span.line2 {
    transform: rotate(-45deg);
}

.vx-offcanvas .canvas-logo {
    padding: 18px 24px 26px;
}

.vx-offcanvas .canvas-logo img {
    max-height: 38px;
}

.vx-offcanvas ul.nav-menu {
    margin: 0;
    padding: 0 16px;
    list-style: none;
}

.vx-offcanvas ul.nav-menu > li {
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.vx-offcanvas ul.nav-menu > li:last-child {
    border-bottom: none;
}

.vx-offcanvas ul.nav-menu a {
    display: block;
    padding: 15px 8px;
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
    transition: color 0.25s ease, padding-left 0.25s ease;
}

.vx-offcanvas ul.nav-menu a:hover,
.vx-offcanvas ul.nav-menu a.is-active {
    color: #fff;
    padding-left: 14px;
}

.vx-offcanvas ul.nav-menu a.is-active {
    font-weight: 600;
}

.vx-offcanvas ul.nav-menu a.is-active:before {
    content: "";
    position: absolute;
    left: 0;
    width: 3px;
    height: 20px;
    margin-top: 3px;
    border-radius: 3px;
    background: var(--main-color);
}

/* Accordion toggle. The markup is injected by menumaker and the theme already
   draws a plus/minus with the :before (vertical bar) and :after (horizontal
   bar) pseudo-elements, so we only reposition those - no second icon, no
   rotation. Selectors carry .full-width-header to outrank the theme. */
.full-width-header .vx-offcanvas ul.nav-menu span.submenu-button {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 54px;
    background: none;
    border-radius: 0;
    cursor: pointer;
    z-index: 2;
}

.full-width-header .vx-offcanvas ul.nav-menu span.submenu-button:before,
.full-width-header .vx-offcanvas ul.nav-menu span.submenu-button:after {
    content: "";
    position: absolute;
    top: 26px;
    right: 13px;
    width: 13px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.75);
    transition: opacity 0.25s ease, background 0.25s ease;
}

/* the vertical stroke of the plus - hidden once open, leaving a minus */
.full-width-header .vx-offcanvas ul.nav-menu span.submenu-button:before {
    top: 20.5px;
    right: 18.5px;
    width: 2px;
    height: 13px;
}

.full-width-header .vx-offcanvas ul.nav-menu span.submenu-button:hover:before,
.full-width-header .vx-offcanvas ul.nav-menu span.submenu-button:hover:after {
    background: #fff;
}

.full-width-header .vx-offcanvas ul.nav-menu span.submenu-button.submenu-opened:before {
    display: block;
    opacity: 0;
}

.full-width-header .vx-offcanvas ul.nav-menu span.submenu-button.submenu-opened:after {
    background: var(--main-color);
}

.vx-offcanvas ul.nav-menu .submenu-button em {
    display: none;
}

.vx-offcanvas ul.nav-menu ul.sub-menu {
    margin: 0 0 10px;
    padding: 4px 0 4px 14px;
    list-style: none;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.vx-offcanvas ul.nav-menu ul.sub-menu a {
    padding: 10px 8px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.65);
}

/* call to action block */
.vx-offcanvas .canvas-cta {
    display: grid;
    gap: 10px;
    padding: 26px 24px 10px;
}

.vx-offcanvas .canvas-cta a {
    display: block;
    padding: 13px 20px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    transition: all 0.25s ease;
}

.vx-offcanvas .canvas-cta .cta-primary {
    background: var(--main-color);
    color: #fff;
}

.vx-offcanvas .canvas-cta .cta-primary:hover {
    background: #185ab0;
    color: #fff;
}

.vx-offcanvas .canvas-cta .cta-ghost {
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
}

.vx-offcanvas .canvas-cta .cta-ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.vx-offcanvas .canvas-contact {
    padding: 20px 24px 0;
}

.vx-offcanvas .canvas-contact .address-list {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.vx-offcanvas .canvas-contact .info-icon i:before {
    font-size: 18px;
    color: var(--main-color);
}

.vx-offcanvas .canvas-contact .info-content .title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.vx-offcanvas .canvas-contact .info-content em {
    font-style: normal;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
}