/* =========================================================
   HELCU — MAIN NAVBAR
   PREMIUM RESPONSIVE CARD NAVIGATION

   MOBILE / TABLET
   0px → 1199.98px

   DESKTOP
   1200px+
========================================================= */


/* =========================================================
   NAVBAR CARD
========================================================= */

.hc-navbar {

    position: relative;

    width: calc(100% - 28px);

    max-width: 1200px;

    margin: 14px auto 0;

    z-index: 10000;

    background: #FFFFFF;

    border: 1px solid #E7EBF1;

    border-radius: 16px;

    box-shadow:
        0 4px 18px rgba(
            23,
            32,
            51,
            0.06
        );

}


/* =========================================================
   NAVBAR CONTAINER
========================================================= */

.hc-navbar-container {

    position: relative;

    width: 100%;

    min-height: 68px;

    padding: 0 14px;

    display: flex;

    align-items: center;

    gap: 12px;

}


/* =========================================================
   BRAND
========================================================= */

.hc-navbar-brand {

    min-width: 0;

    flex: 0 1 auto;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #20B2AA;

    text-decoration: none;

    white-space: nowrap;

    transition:
        transform 0.2s ease;

}


.hc-navbar-brand:hover {

    color: #20B2AA;

    text-decoration: none;

    transform: translateY(-1px);

}


/* =========================================================
   LOGO WRAPPER
   DESKTOP ONLY
========================================================= */

.hc-navbar-brand-logo-wrapper {

    width: 43px;

    height: 43px;

    flex: 0 0 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: #F5FAFA;

}


/* =========================================================
   BRAND LOGO
========================================================= */

.hc-navbar-brand-logo {

    width: 39px;

    height: 39px;

    flex-shrink: 0;

    display: block;

    object-fit: contain;

}


/* =========================================================
   BRAND CONTENT
========================================================= */

.hc-navbar-brand-content {

    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


/* =========================================================
   BRAND MAIN
========================================================= */

.hc-navbar-brand-main {

    min-width: 0;

    display: flex;

    align-items: center;

    line-height: 1;

}


/* =========================================================
   BRAND TEXT
========================================================= */

.hc-navbar-brand-text {

    display: block;

    color: #20B2AA;

    font-size: 22px;

    font-weight: 800;

    letter-spacing: -0.5px;

    line-height: 1;

    white-space: nowrap;

}


/* =========================================================
   BRAND TAGLINE
========================================================= */

.hc-navbar-brand-tagline {

    margin-top: 5px;

    color: #6A817F;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 0.35px;

    line-height: 1;

    text-transform: uppercase;

    white-space: nowrap;

}


/* =========================================================
   NAVIGATION WRAPPER
========================================================= */

.hc-navbar-navigation {

    min-width: 0;

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: flex-start;

}


/* =========================================================
   MAIN MENU
========================================================= */

.hc-navbar-menu {

    display: flex;

    align-items: center;

    gap: 4px;

    margin: 0;

    padding: 0;

    list-style: none;

}


/* =========================================================
   NAVBAR ITEM
========================================================= */

.hc-navbar-item {

    position: relative;

}


/* =========================================================
   NAVBAR LINK
========================================================= */

.hc-navbar-link {

    min-height: 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 8px 11px;

    border: 1px solid transparent;

    border-radius: 9px;

    background: transparent;

    color: #315B58;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;

}


.hc-navbar-link:hover {

    color: #20B2AA;

    background: #F0FAFA;

    border-color: #DDEFEF;

    text-decoration: none;

}


.hc-navbar-link:focus-visible {

    outline: 2px solid rgba(
        32,
        178,
        170,
        0.28
    );

    outline-offset: 2px;

}


/* =========================================================
   NAVBAR ICON
========================================================= */

.hc-navbar-link > i:first-child {

    font-size: 15px;

    line-height: 1;

    color: #20B2AA;

    transition:
        transform 0.2s ease;

}


.hc-navbar-link:hover > i:first-child {

    transform: translateY(-1px);

}


/* =========================================================
   NAVBAR CHEVRON
========================================================= */

.hc-navbar-chevron {

    margin-left: 1px;

    font-size: 9px !important;

    color: #6A817F !important;

    transition:
        transform 0.2s ease;

}


/* =========================================================
   DROPDOWN PARENT OPEN
========================================================= */

.hc-navbar-dropdown-parent.is-open
.hc-navbar-dropdown-toggle {

    color: #20B2AA;

    background: #EAF8F8;

    border-color: #D5EEEE;

}


.hc-navbar-dropdown-parent.is-open
.hc-navbar-chevron {

    transform: rotate(180deg);

}


/* =========================================================
   DROPDOWN
========================================================= */

.hc-navbar-dropdown {

    position: absolute;

    top: calc(100% + 7px);

    left: 0;

    min-width: 245px;

    padding: 7px;

    border: 1px solid #E1EBEB;

    border-radius: 12px;

    background: #FFFFFF;

    box-shadow:
        0 12px 30px rgba(
            23,
            59,
            57,
            0.10
        );

    opacity: 0;

    visibility: hidden;

    transform: translateY(-5px);

    pointer-events: none;

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.18s ease;

}


/* =========================================================
   DROPDOWN OPEN
========================================================= */

.hc-navbar-dropdown-parent.is-open
.hc-navbar-dropdown {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;

}


/* =========================================================
   DROPDOWN INNER
========================================================= */

.hc-navbar-dropdown-inner {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


/* =========================================================
   DROPDOWN LINK
========================================================= */

.hc-navbar-dropdown-link {

    min-height: 42px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 7px 9px;

    border-radius: 8px;

    color: #355F5C;

    text-decoration: none;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;

}


.hc-navbar-dropdown-link:hover {

    color: #20B2AA;

    background: #F1FAFA;

    text-decoration: none;

    transform: translateX(2px);

}


/* =========================================================
   DROPDOWN ICON WRAPPER
========================================================= */

.hc-navbar-dropdown-icon {

    width: 31px;

    height: 31px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 7px;

    background: #F2FAFA;

    color: #20B2AA;

    transition:
        background-color 0.18s ease,
        transform 0.18s ease;

}


.hc-navbar-dropdown-link:hover
.hc-navbar-dropdown-icon {

    background: #E2F5F4;

    transform: scale(1.03);

}


/* =========================================================
   DROPDOWN ICON
========================================================= */

.hc-navbar-dropdown-icon i {

    font-size: 13px;

    line-height: 1;

}


/* =========================================================
   DROPDOWN LABEL
========================================================= */

.hc-navbar-dropdown-label {

    min-width: 0;

    flex: 1;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.35;

}


/* =========================================================
   MOBILE MENU TOGGLE
========================================================= */

.hc-navbar-mobile-toggle {

    display: none;

    width: 40px;

    height: 40px;

    flex: 0 0 40px;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: 1px solid #DCEAEA;

    border-radius: 9px;

    background: #F4FAFA;

    color: #20B2AA;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;

}


.hc-navbar-mobile-toggle:hover {

    background: #EAF8F8;

    border-color: #CFE7E6;

    color: #159D96;

}


.hc-navbar-mobile-toggle:focus-visible {

    outline: 2px solid rgba(
        32,
        178,
        170,
        0.28
    );

    outline-offset: 2px;

}


/* =========================================================
   MOBILE ICON
========================================================= */

.hc-navbar-mobile-icon {

    display: flex;

    align-items: center;

    justify-content: center;

}


.hc-navbar-mobile-icon i {

    font-size: 17px;

    line-height: 1;

}


/* =========================================================
   MOBILE PANEL
========================================================= */

.hc-navbar-mobile-panel {

    position: absolute;

    top: calc(100% - 1px);

    left: -1px;

    width: calc(100% + 2px);

    z-index: 10001;

    display: none;

    border: 1px solid #E7EBF1;

    border-top: 1px solid #E6EEEE;

    border-bottom-left-radius: 16px;

    border-bottom-right-radius: 16px;

    background: #FFFFFF;

    box-shadow:
        0 12px 28px rgba(
            23,
            32,
            51,
            0.12
        );

}


/* =========================================================
   MOBILE PANEL OPEN
========================================================= */

.hc-navbar.is-mobile-open
.hc-navbar-mobile-panel {

    display: block;

}


/* =========================================================
   MOBILE INNER
========================================================= */

.hc-navbar-mobile-inner {

    position: relative;

    z-index: 10002;

    width: 100%;

    max-height: calc(
        100vh - 78px
    );

    overflow-y: auto;

    padding: 10px 14px 16px;

    background: #FFFFFF;

    border-bottom-left-radius: 16px;

    border-bottom-right-radius: 16px;

}


/* =========================================================
   MOBILE MENU
========================================================= */

.hc-navbar-mobile-menu {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


/* =========================================================
   MOBILE ITEM
========================================================= */

.hc-navbar-mobile-item {

    width: 100%;

}


/* =========================================================
   MOBILE LINK
========================================================= */

.hc-navbar-mobile-link {

    width: 100%;

    min-height: 44px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding: 9px 11px;

    border: 1px solid transparent;

    border-radius: 9px;

    background: transparent;

    color: #315B58;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.3;

    text-align: left;

    text-decoration: none;

    cursor: pointer;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease;

}


.hc-navbar-mobile-link:hover {

    color: #20B2AA;

    background: #F0FAFA;

    border-color: #DDEFEF;

    text-decoration: none;

}


.hc-navbar-mobile-link:focus-visible {

    outline: 2px solid rgba(
        32,
        178,
        170,
        0.25
    );

    outline-offset: 1px;

}


/* =========================================================
   MOBILE LINK CONTENT
========================================================= */

.hc-navbar-mobile-link-content {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 11px;

}


.hc-navbar-mobile-link-content > i {

    width: 20px;

    flex-shrink: 0;

    font-size: 15px;

    color: #20B2AA;

    text-align: center;

}


/* =========================================================
   MOBILE CHEVRON
========================================================= */

.hc-navbar-mobile-chevron {

    width: auto !important;

    flex-shrink: 0;

    font-size: 9px !important;

    color: #6A817F !important;

    transition:
        transform 0.2s ease;

}


.hc-navbar-mobile-item.is-open
.hc-navbar-mobile-chevron {

    transform: rotate(180deg);

}


/* =========================================================
   MOBILE SUBMENU
========================================================= */

.hc-navbar-mobile-submenu {

    display: none;

    margin: 2px 0 5px 12px;

    padding-left: 10px;

    border-left: 2px solid #DDEFEF;

}


.hc-navbar-mobile-item.is-open
.hc-navbar-mobile-submenu {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


/* =========================================================
   MOBILE SUBMENU LINK
========================================================= */

.hc-navbar-mobile-submenu-link {

    min-height: 40px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 7px 9px;

    border-radius: 8px;

    color: #426966;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.35;

    text-decoration: none;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;

}


.hc-navbar-mobile-submenu-link:hover {

    color: #20B2AA;

    background: #F2FAFA;

    text-decoration: none;

    transform: translateX(2px);

}


.hc-navbar-mobile-submenu-link > i {

    width: 18px;

    flex-shrink: 0;

    font-size: 13px;

    color: #20B2AA;

    text-align: center;

}


/* =========================================================
   QR BUTTON
   MOBILE / TABLET ONLY
========================================================= */

.hc-navbar-qr-toggle {

    width: 40px;

    height: 40px;

    flex: 0 0 40px;

    display: none;

    align-items: center;

    justify-content: center;

    margin-left: auto;

    padding: 0;

    border: 1px solid #CFE7E6;

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #F4FBFB,
            #EAF8F8
        );

    color: #20B2AA;

    font-family: inherit;

    font-size: 17px;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 3px 10px rgba(
            32,
            178,
            170,
            0.08
        );

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;

}


.hc-navbar-qr-toggle:hover {

    color: #159D96;

    background:
        linear-gradient(
            145deg,
            #EAF8F8,
            #DFF4F3
        );

    border-color: #BFDCD9;

    box-shadow:
        0 5px 14px rgba(
            32,
            178,
            170,
            0.14
        );

    transform: translateY(-1px);

}


.hc-navbar-qr-toggle:active {

    transform: translateY(0);

}


.hc-navbar-qr-toggle:focus-visible {

    outline: 2px solid rgba(
        32,
        178,
        170,
        0.28
    );

    outline-offset: 2px;

}


.hc-navbar-qr-toggle i {

    font-size: 17px;

    line-height: 1;

}


/* =========================================================
   TABLET
   768px → 1199.98px
========================================================= */

@media (min-width: 768px) {

    .hc-navbar {

        width: calc(100% - 44px);

        border-radius: 18px;

    }


    .hc-navbar-container {

        min-height: 70px;

        padding-left: 20px;

        padding-right: 20px;

        gap: 14px;

    }


    /* =====================================================
       LOGO HIDDEN BELOW DESKTOP
    ====================================================== */

    .hc-navbar-brand-logo-wrapper {

        display: none;

    }


    .hc-navbar-brand {

        gap: 0;

    }


    .hc-navbar-brand-text {

        font-size: 23px;

    }


    .hc-navbar-brand-tagline {

        font-size: 8px;

    }


    .hc-navbar-mobile-toggle {

        width: 42px;

        height: 42px;

        flex-basis: 42px;

    }


    .hc-navbar-qr-toggle {

        width: 42px;

        height: 42px;

        flex-basis: 42px;

    }


    .hc-navbar-mobile-panel {

        border-bottom-left-radius: 18px;

        border-bottom-right-radius: 18px;

    }


    .hc-navbar-mobile-inner {

        max-height: calc(
            100vh - 84px
        );

        padding-left: 18px;

        padding-right: 18px;

    }

}


/* =========================================================
   DESKTOP
   1200px+
========================================================= */

@media (min-width: 1200px) {

    .hc-navbar {

        width: calc(100% - 56px);

        border-radius: 20px;

    }


    .hc-navbar-container {

        min-height: 72px;

        padding-left: 24px;

        padding-right: 24px;

        gap: 24px;

    }


    /* =====================================================
       DESKTOP LOGO
    ====================================================== */

    .hc-navbar-brand-logo-wrapper {

        display: flex;

        width: 50px;

        height: 50px;

        flex-basis: 50px;

    }


    .hc-navbar-brand-logo {

        width: 46px;

        height: 46px;

    }


    .hc-navbar-brand {

        gap: 10px;

    }


    .hc-navbar-brand-text {

        font-size: 24px;

    }


    .hc-navbar-brand-tagline {

        margin-top: 5px;

        font-size: 8px;

    }


    /* =====================================================
       DESKTOP NAVIGATION
    ====================================================== */

    .hc-navbar-navigation {

        display: flex;

    }


    /* =====================================================
       MOBILE BUTTONS HIDDEN
    ====================================================== */

    .hc-navbar-mobile-toggle {

        display: none;

    }


    .hc-navbar-qr-toggle {

        display: none;

    }


    .hc-navbar-mobile-panel {

        display: none !important;

    }

}


/* =========================================================
   MOBILE / TABLET
   0px → 1199.98px
========================================================= */

@media (max-width: 1199.98px) {

    .hc-navbar {

        z-index: 10000;

    }


    .hc-navbar-container {

        flex-direction: row;

        align-items: center;

        justify-content: flex-start;

    }


    /* =====================================================
       MOBILE MENU BUTTON — LEFT
    ====================================================== */

    .hc-navbar-mobile-toggle {

        display: inline-flex;

        order: 1;

    }


    /* =====================================================
       BRAND — CENTER AREA
    ====================================================== */

    .hc-navbar-brand {

        order: 2;

    }


    /* =====================================================
       NAVIGATION HIDDEN
    ====================================================== */

    .hc-navbar-navigation {

        display: none;

    }


    /* =====================================================
       QR BUTTON — RIGHT
    ====================================================== */

    .hc-navbar-qr-toggle {

        display: inline-flex;

        order: 3;

        margin-left: auto;

    }


    /* =====================================================
       MOBILE PANEL
    ====================================================== */

    .hc-navbar.is-mobile-open
    .hc-navbar-mobile-panel {

        display: block;

    }


    /* =====================================================
       MENU → CLOSE
    ====================================================== */

    .hc-navbar.is-mobile-open
    .hc-navbar-mobile-icon i::before {

        content: "\f00d";

    }

}


/* =========================================================
   MOBILE
   0px → 767.98px
========================================================= */

@media (max-width: 767.98px) {

    .hc-navbar {

        width: calc(100% - 28px);

        margin-top: 14px;

        border-radius: 16px;

    }


    .hc-navbar-container {

        min-height: 64px;

        padding-left: 10px;

        padding-right: 10px;

        gap: 8px;

    }


    /* =====================================================
       LOGO REMAINS HIDDEN
    ====================================================== */

    .hc-navbar-brand-logo-wrapper {

        display: none;

    }


    /* =====================================================
       MOBILE BRAND
    ====================================================== */

    .hc-navbar-brand {

        gap: 0;

    }


    .hc-navbar-brand-text {

        font-size: 20px;

        letter-spacing: -0.4px;

    }


    .hc-navbar-brand-tagline {

        margin-top: 4px;

        font-size: 7px;

        letter-spacing: 0.2px;

    }


    /* =====================================================
       MOBILE MENU BUTTON
    ====================================================== */

    .hc-navbar-mobile-toggle {

        width: 38px;

        height: 38px;

        flex-basis: 38px;

        border-radius: 9px;

    }


    .hc-navbar-mobile-icon i {

        font-size: 16px;

    }


    /* =====================================================
       MOBILE QR BUTTON
    ====================================================== */

    .hc-navbar-qr-toggle {

        width: 38px;

        height: 38px;

        flex-basis: 38px;

        border-radius: 9px;

        font-size: 16px;

    }


    .hc-navbar-qr-toggle i {

        font-size: 16px;

    }


    /* =====================================================
       MOBILE PANEL
    ====================================================== */

    .hc-navbar-mobile-panel {

        top: calc(100% - 1px);

        left: -1px;

        width: calc(100% + 2px);

        border-bottom-left-radius: 16px;

        border-bottom-right-radius: 16px;

    }


    .hc-navbar-mobile-inner {

        max-height: calc(
            100vh - 78px
        );

        padding-left: 10px;

        padding-right: 10px;

        padding-bottom: 14px;

    }

}


/* =========================================================
   VERY SMALL MOBILE
   0px → 380px
========================================================= */

@media (max-width: 380px) {

    .hc-navbar-container {

        padding-left: 8px;

        padding-right: 8px;

        gap: 6px;

    }


    .hc-navbar-mobile-toggle,
    .hc-navbar-qr-toggle {

        width: 36px;

        height: 36px;

        flex-basis: 36px;

    }


    .hc-navbar-brand-text {

        font-size: 19px;

    }


    .hc-navbar-brand-tagline {

        font-size: 6.5px;

        letter-spacing: 0.15px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hc-navbar *,
    .hc-navbar *::before,
    .hc-navbar *::after {

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

    }

}