::-webkit-scrollbar {
    width: 6px;
    height: 10px;
    overflow: hidden;
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    background: var(--grayDk);
    overflow: hidden;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--blue);
    overflow: hidden;
    border-radius: 10px;
}

/* ::-webkit-scrollbar-thumb:hover {
    background: #e8fff5;
    overflow: hidden;
    border-radius: 10px;
} */

.home ::-webkit-scrollbar {
    width: 0px;
    overflow: hidden;
    border-radius: 10px;
}

.home {
    .container-max {
        max-width: 1740px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

.header-wrapper {
    width: 100%;
    padding: 10px 0;
    z-index: 10;
    background-color: var(--blue);
    transition: 0.5s;

    /* only .home-header is lifted out of the flow, so it can sit over the banner.
       Having it here too meant the inner header covered the breadcrumb strip */
    .logo_wrap {
        width: 300px;

        a {
            width: 270px;
            display: block;
        }

        a.menuBar {
            display: none !important;
        }
    }

    .rightIc {
        width: 300px;
        display: flex;
        justify-content: flex-end;
        gap: 15px;
        align-items: center;

        ul {
            display: flex;
            gap: 15px;
            margin-bottom: 0px;

            li {
                margin-bottom: 0px !important;

                a {
                    padding: 12px 20px;
                    border: 1px solid #fff;
                    color: #fff;
                    border-radius: 5px;
                    transition: 0.5s;

                    &:hover {
                        background-color: #fff;
                        color: var(--blue);
                    }
                }

                &:first-child {
                    a {
                        background-color: #fff;
                        color: var(--blue);
                        transition: 0.5s;

                        &:hover {
                            color: #fff;
                            background-color: transparent;
                        }
                    }
                }
            }
        }
    }

    .menuBar {
        padding: 12px;
        border: 1px solid #fff;
        border-radius: 5px;
        width: 50px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 22px;

        &:hover {
            background-color: #fff;
            color: var(--blue);
        }
    }

    &.home-header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background-color: transparent;
    }

    &.stickyHeader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: var(--blue) !important;
        border-bottom: 1px solid var(--grayDk);
        padding: 5px 0;
        z-index: 1001;

        .logo_wrap {
            a {
                width: 150px;
            }
        }

        .rightIc {
            ul {
                li {
                    a {
                        padding: 6px 10px;
                    }
                }
            }
        }

        .menuBar {
            padding: 10px;
            width: 40px;
            height: 35px;
            font-size: 20px;
        }
    }

    /* now that it sits in the flow it needs a ground of its own - the white type
       and white-bordered controls below are written for the banner behind them */
    &.inner-header {
        background-color: var(--white);

        .mid_head .reportTitle span {
            color: var(--grayDk);
        }

        .rightIc .hamburger {
            width: 45px;
            height: 45px;
            font-size: 18px;
            border-radius: 5px;
            color: var(--white);
            background-color: var(--blue);
            transition: 0.3s;

            display: flex;
            align-items: center;
            justify-content: center;

            &:hover {
                background-color: var(--teal);
            }
        }
    }

    .mid_head {
        width: calc(100% - 600px);
        text-align: center;

        .reportTitle {
            span {
                color: #fff;
            }
        }
    }
}

.nveMenu {
    display: none;
}

.sideNav {
    display: none;
}

/* --------------------------------------------------------------------------------
   Header - responsive

   The three columns are pinned at 500 / calc(100% - 1000px) / 500, so .mid_head
   goes negative below 1000px and the row wraps into a very tall stack. It never
   showed while the header was lifted out of the flow; now that the inner one sits
   above the breadcrumb, the columns have to give.
-------------------------------------------------------------------------------- */
@media (max-width: 1760px) {
    .pairCard{
        .fz_28 {
            font-size: 22px !important;
        }
    }
    .pairSec{
        padding-top: 30px !important;
    }
}
@media (max-width: 1600px) {
    .header-wrapper {
        .logo_wrap {
            a {
                width: 200px;
            }
        }
    }
}
@media (max-width: 1399px) {
    .header-wrapper {
        .logo_wrap {
            .logo {
                width: 210px;
            }

            a {
                width: 100%;
            }
        }

        .rightIc {
            gap: 10px;

            ul {
                width: auto;

                li {
                    text-align: center;

                    a {
                        padding: 10px;
                        display: block;
                        font-size: 14px;
                        text-align: center;
                    }
                }
            }
        }

        .mid_head {}

        .fz_25 {
            font-size: 18px !important;
        }

        .menuBar {
            height: 42px;
        }
    }
}

@media (max-width: 1366px) {
    .header-wrapper {
        &.stickyHeader {
            .mid_head {
                .reportTitle {
                    span {
                        font-size: 16px !important;
                    }
                }
            }

            .logo_wrap {
                a {
                    width: 150px;
                    height: 40px;
                }
            }
        }
    }
}

@media (max-width: 991px) {
    .header-wrapper {
        .logo_wrap {
            width: 50%;

            .logo {
                width: 175px;
            }
        }

        .rightIc {
            width: 50%;
        }

        /* dropped to its own line so the logo and the controls can share the first */
        .mid_head {
            display: none;
        }
    }
}

@media (max-width: 767px) {
    .header-wrapper {
        .logo_wrap {
            width: 150px;
        }

        .rightIc {
            gap: 10px;
        }

        &.inner-header .rightIc .hamburger {
            width: 38px;
            height: 38px;
            font-size: 16px;
        }
    }
}

@keyframes bcShine {

    0%,
    62% {
        left: -30%;
    }

    100% {
        left: 115%;
    }
}

@keyframes bcIn {
    from {
        opacity: 0;
        transform: translateX(-14px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bcNudge {

    0%,
    100% {
        transform: rotate(45deg) translate(0, 0);
        opacity: 0.75;
    }

    50% {
        transform: rotate(45deg) translate(2px, -2px);
        opacity: 1;
    }
}

/* --------------------------------------------------------------------------------
   Footer
   Sits with the header rather than in common.css - both are page chrome, and this
   file is already loaded by every page, so the same markup styles everywhere.
-------------------------------------------------------------------------------- */
.efFooter {
    padding: 60px 0 70px;

    /* A sky, burning out towards the foot of the page. The old single -165deg
       wash ran dark at the top LEFT and clear at the bottom right, which left
       the top centre almost white - and that is exactly where the white logo
       and the company name sit, so they had nothing to stand against. This runs
       top to bottom instead, with two soft pools for the cloud break and a
       deeper corner at the top left. Layered gradients rather than a
       photograph because no sky asset ships with the build; drop one in as an
       extra background-image layer above the linear-gradient when it lands. */
    background-color: #f4f9fd;
    background-image:
        radial-gradient(115% 75% at 20% 6%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 55%),
        radial-gradient(85% 65% at 80% 0%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(75% 120% at 0% 0%, rgba(0, 74, 133, 0.40) 0%, rgba(0, 74, 133, 0) 62%),
        /* Stops in px, not %. The strong blue only has to cover the white top
           block, and that block is a fixed height - but the footer is not. On a
           phone the two columns stack and it runs more than twice as tall, so
           percentage stops dragged the deep blue down over the address and left
           brand-blue copy sitting on a mid-blue ground. Pixels keep the band
           the same depth at every width, and the last stop's colour carries on
           to the foot however far away that is. */
        linear-gradient(to bottom,
            #2f86cd 0px,
            #5aa4dd 120px,
            #8fc2ea 235px,
            #d3e8f8 335px,
            #f4f9fd 430px);

    .footerTop {
        margin-bottom: 45px;
    }

    .footerLogo {
        max-width: 260px;
        margin-bottom: 22px;

        img {
            width: 100%;
            display: block;
        }
    }

    /* the top block sits on the saturated end of the sky, so it is set in white
       - brand blue on that ground is barely a step away from it */
    .footerName,
    .footerCin {
        font-size: 20px;
        line-height: 1.5;
    }

    .footerHead {
        font-size: 24px;
        margin-bottom: 10px;
        color: var(--blue);
    }

    .footerBlock {
        margin-bottom: 28px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .footerInfo {
        p {
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 0;
            color: var(--blue);
        }

        a {
            color: var(--blue);
            transition: 0.3s;

            &:hover {
                color: var(--gray2);
            }
        }
    }

    /* the right-hand pair sits a card lower than the left, as the design has it */
    /* .dlGridOffset {
        padding-top: 42px;
    } */

    .dlCard {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 16px 20px;
        margin-bottom: 15px;
        border-radius: 12px;
        background-color: var(--white);
        box-shadow: 0 6px 20px rgba(0, 60, 110, 0.10);
        transition: 0.3s;

        &:last-child {
            margin-bottom: 0;
        }

        &:hover {
            box-shadow: 0 10px 26px rgba(0, 60, 110, 0.20);
            transform: translateY(-2px);
        }
    }

    .dlIc {
        flex: 0 0 auto;
        font-size: 16px;
        color: var(--blue);
    }

    .dlTxt {
        flex: 1 1 auto;
        min-width: 0;
    }

    .dlName {
        font-size: 15px;
        line-height: 1.35;
        color: var(--black);
    }

    .dlMeta {
        font-size: 12px;
        line-height: 1.4;
        color: #8b8b8f;
    }

    /* the glyph is a plain arrow turned to point out of the card */
    .dlArrow {
        flex: 0 0 auto;
        font-size: 13px;
        color: var(--grayDk);
        transform: rotate(-45deg);
    }
}

.breadcrumbSec {
    background-color: #daf0ff;

    .container-max {
        padding: 0;
    }

    .breadcrumb {
        margin: 3px 0;
        align-items: center;
        background-color: #daf0ff;

        li {
            font-size: 16px;
        }
    }

    .breadcrumb-item.active {
        color: #003961;
        font-size: 14px;
    }
}

@media (max-width: 991px) {
    .efFooter {
        padding: 45px 0 50px;

        .footerInfo {
            margin-bottom: 35px;
        }

        .footerHead {
            font-size: 20px;
        }

        .footerName,
        .footerCin {
            font-size: 18px;
        }

        .dlGridOffset {
            /* padding-top: 15px; */
        }
    }

    .header-wrapper {
        .fz_25 {
            font-size: 18px !important;
        }
    }
}

@media (max-width: 767px) {
    .efFooter {
        .footerLogo {
            max-width: 200px;
        }

        .footerInfo p {
            font-size: 16px;
        }

        .dlCard {
            padding: 14px 16px;
        }
    }

    .investorInfo {
        .investorInfoInner {
            padding: 20px;
            width: 100%;
            max-width: calc(100% - 20px);

            .fz_28 {
                font-size: 22px !important;
            }
        }
    }

    .scanTextBox {
        .scanTextBoxInner {
            .scanTextWrap {
                padding-left: 0;
                width: 100%;
            }

            figure {
                width: 100px;
                margin-bottom: 15px;
            }

            .fz_18 {
                font-size: 15px !important;
            }
        }
    }
}

@media (max-width: 600px) {
    .header-wrapper {
        .logo_wrap {
            a {
                width: 180px;
            }
        }

        .rightIc {
            height: 44px;

            ul {
                gap: 10px;
                width: auto;
                justify-content: space-between;

                li {
                    text-align: center;
                    width: calc(50% - 5px);

                    a {
                        padding: 8px 15px;
                        font-size: 0;
                        display: inline-block;
                        text-align: center;

                        .ml_10 {
                            font-size: 18px;
                            margin-left: 0 !important;
                        }
                    }
                }
            }

            a.menuBar {
                width: 40px;
                height: 35px;
                padding: 5px;
                display: flex;
                font-size: 24px;
            }
        }

        &.stickyHeader {
            .logo_wrap {
                margin-bottom: 10px
            }

            .rightIc {
                height: 34px;
            }
        }

        .fz_25 {
            font-size: 16px !important;
        }
    }
}






/* ==========================================================================
   nveMenu - full-screen navigation curtain

   navigation.css keeps .nveMenu at display:none for every page that has not
   been styled yet. This file loads after it, so the rules here take over on
   the pages that link it.

   Open  : the curtain is wiped in as a circle grown from the .menuBar that
           was clicked, then the head, the groups and the links settle in.
   Close : the content drops out first and the circle collapses back into the
           same button, so the motion reads as a return trip.
   ========================================================================== */

.nveMenu {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: block;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
    color: var(--white);

    /* JS overwrites these with the real button position before opening */
    --ox: 100%;
    --oy: 0px;
    --r: 160vmax;

    clip-path: circle(0px at var(--ox) var(--oy));
    transition: clip-path 0.7s cubic-bezier(0.83, 0, 0.17, 1),
        visibility 0s linear 0.7s;
}

.nveMenu.is-open {
    visibility: visible;
    pointer-events: auto;
    clip-path: circle(var(--r) at var(--ox) var(--oy));
    transition: clip-path 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0s;
}

/* the ground: brand blue deepened towards the top-left, with two teal glows
   sitting where the curtain usually opens from */
.nveMenu::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 620px at 88% -12%, rgba(103, 200, 199, 0.40), transparent 62%),
        radial-gradient(760px 760px at -12% 112%, rgba(103, 200, 199, 0.22), transparent 60%),
        linear-gradient(135deg, #00294a 0%, #00477a 46%, #006cb7 100%);
}

/* a faint ruled grid, drifting slowly, to keep the flat fill from reading dead */
.nveMenu::after {
    content: '';
    position: absolute;
    inset: -60px;
    pointer-events: none;
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 62px 62px;
    animation: nveDrift 26s linear infinite;
}

@keyframes nveDrift {
    to {
        transform: translate3d(62px, 62px, 0);
    }
}

.nveMenuPanel {
    position: relative;
    z-index: 1;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   Head - logo, report title, close
-------------------------------------------------------------------------- */
.nveMenuHead {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.nveMenu .sidebarLogo {
    width: 230px;
    flex: 0 0 auto;
}

.nveMenu .sidebarLogo a,
.nveMenu .sidebarLogo img {
    display: block;
    width: 100%;
}

.nveMenuTitle {
    flex: 1 1 auto;
    text-align: center;
    line-height: 1.35;
}

.nveMenuKicker {
    display: block;
    font-size: 12px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--teal);
}

.nveMenuYear {
    display: block;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.92);
}

.nveMenu .closeIcon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--white);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.06);
    transition: background-color 0.35s ease, color 0.35s ease,
        border-color 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.nveMenu .closeIcon:hover,
.nveMenu .closeIcon:focus-visible {
    color: #00355a;
    background-color: var(--teal);
    border-color: var(--teal);
    transform: rotate(90deg);
    outline: none;
}

/* --------------------------------------------------------------------------
   Body - the three groups
-------------------------------------------------------------------------- */
.nveMenuBody {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 30px 40px 30px;
    height: calc(100% - (126px + 75px));
}

.nveMenu .overlay-content {
    max-width: 1740px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    /* display: grid; */
    /* grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); */
    gap: 30px;
    counter-reset: nveGroup;
}

.nveMenu .eachMenuBox {
    counter-increment: nveGroup;
    list-style: none;
    margin: 0;
    min-width: 0;
}

/* the group number is generated, so the markup stays a plain nested list */
.nveMenu .menuGroupHead {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--white);
    font-size: 21px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.nveMenu .menuGroupHead::before {
    content: counter(nveGroup, decimal-leading-zero);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--teal);
}

/* the teal rule runs out under the heading as the group settles in */
.nveMenu .menuGroupHead::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background-color: var(--teal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}

.nveMenu.is-open .menuGroupHead::after {
    transform: scaleX(1);
}

.nveMenu .menuGroupArrow {
    display: none;
}

.nveMenu .menuGroupList {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nveMenu .menuGroupList li {
    margin: 0;
    break-inside: avoid;
}

.nveMenu .menuGroupList a {
    position: relative;
    display: block;
    padding: 9px 0 9px 24px;
    font-size: 16px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
    transition: color 0.35s ease, padding-left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* a teal dash draws itself in front of the label on hover */
.nveMenu .menuGroupList a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 14px;
    height: 1px;
    background-color: var(--teal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.nveMenu .menuGroupList a:hover,
.nveMenu .menuGroupList a:focus-visible {
    color: var(--white);
    padding-left: 34px;
    outline: none;
}

.nveMenu .menuGroupList a:hover::before,
.nveMenu .menuGroupList a:focus-visible::before {
    transform: scaleX(1);
}

.nveMenu .menuGroupList a .fa-download {
    margin-left: 7px;
    font-size: 12px;
    opacity: 0.6;
}

/* the page you are already on keeps the dash and the teal */
.nveMenu .menuGroupList a.is-current {
    color: var(--teal);
    padding-left: 34px;
}

.nveMenu .menuGroupList a.is-current::before {
    transform: scaleX(1);
}

/* Corporate Overview carries most of the report, so it runs in two tracks */
.nveMenu #navC_00 .menuGroupList,
.nveMenu #navC_01 .menuGroupList,
.nveMenu #navC_02 .menuGroupList,
.nveMenu #navC_03 .menuGroupList,
.nveMenu #navC_04 .menuGroupList,
.nveMenu #navC_05 .menuGroupList {
    columns: 4;
    column-gap: 30px;
}

/* --------------------------------------------------------------------------
   Foot
-------------------------------------------------------------------------- */
.nveMenuFoot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.68);
}

.nveMenuFoot .nveMenuLinks {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nveMenuFoot .nveMenuLinks li {
    margin: 0;
}

.nveMenuFoot .nveMenuLinks a {
    display: block;
    padding: 9px 20px;
    font-size: 14px;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 5px;
    transition: 0.35s;
}

.nveMenuFoot .nveMenuLinks a:hover {
    color: #00355a;
    background-color: var(--white);
    border-color: var(--white);
}

/* --------------------------------------------------------------------------
   Staggered entrance

   Everything sits low and clear until .is-open lands, then each band is let
   in behind the curtain wipe. Delays only exist on the open rules, so closing
   pulls the whole lot out at once - which is what the collapse wants.
-------------------------------------------------------------------------- */
.nveMenuHead,
.nveMenuFoot,
.nveMenu .eachMenuBox {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.nveMenu.is-open .nveMenuHead {
    opacity: 1;
    transform: none;
    transition-delay: 0.26s;
}

.nveMenu.is-open .eachMenuBox {
    opacity: 1;
    transform: none;
    transition-delay: calc(0.34s + var(--g, 0) * 0.1s);

    &:not(:last-child) {
        margin-bottom: 30px;
    }
}

.nveMenu.is-open .nveMenuFoot {
    opacity: 1;
    transform: none;
    transition-delay: 0.6s;
}

.nveMenu .menuGroupList li {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.4s ease, transform 0.45s ease;
}

.nveMenu.is-open .menuGroupList li {
    opacity: 1;
    transform: none;
    transition-delay: calc(0.44s + var(--g, 0) * 0.08s + var(--i, 0) * 0.022s);
}

/* the trigger reacts before the curtain reaches it */
.header-wrapper .menuBar i {
    display: block;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-wrapper .menuBar:hover i {
    transform: rotate(-90deg);
}

.header-wrapper .menuBar.is-firing i {
    transform: rotate(-180deg) scale(0.8);
}

/* the page behind must not scroll while the curtain is up */
body.nveMenuOpen {
    overflow: hidden;
    padding-right: var(--nveSbw, 0px);
}


/* ------------investor info------------ */
.investorIcon {
    bottom: auto;
    top: 20px;
    right: 20px;
    width: 70px;
    padding: 8px;
    z-index: 1000;
    position: absolute;
    cursor: pointer;
    transition: 0.6s;
    text-align: center;
    border-radius: 10px;
    background-size: 130px;
    border: 5px solid var(--greenDk);
    background-color: var(--greenBr);
    background-repeat: no-repeat;
    background-position: center center;
    animation: pulse 2s infinite;

    img {
        width: 75px;
        display: inline-block;
        filter: brightness(1) invert(1);
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0px #064b443d;
    }

    50% {
        box-shadow: 0 0 0 20px #064b4438;
    }

    100% {
        box-shadow: 0 0 0 0px #064b443d;
    }
}

.investorInfo {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    position: fixed;
    overflow: hidden;
    display: none;
    background-color: #fff;

    .investorInfoInner {
        top: 50%;
        left: 50%;
        width: 600px;
        padding: 30px;
        margin: 0 auto;
        position: absolute;
        border: 2px solid var(--blue);
        transform: translate(-50%, -50%);
    }
}

.scanTextBox {
    .scanTextBoxInner {
        figure {
            width: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            background-image: url(../images/investorBg.png);

            img {
                width: 100%;
                position: relative;
                display: inline-block;
            }
        }
    }
}

/* ------------investor info------------ */



/* --------------------------------------------------------------------------
   Responsive

   Below 992px the three columns become one and each group turns into an
   accordion, so the list never becomes a single endless scroll on a phone.
-------------------------------------------------------------------------- */
@media (max-width: 1399px) {
    .nveMenu .sidebarLogo {
        width: 150px;
    }

    .nveMenuHead,
    .nveMenuFoot {
        padding-left: 28px;
        padding-right: 28px;
    }

    .nveMenuBody {
        padding: 34px 28px 24px;
    }

    .nveMenu .overlay-content {
        gap: 34px;
    }

    .nveMenu .menuGroupHead {
        font-size: 16px;
    }

    .nveMenu .menuGroupList a {
        font-size: 16px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

@media (max-width: 1199px) {
    .nveMenu #navC_00 .menuGroupList {
        columns: 1;
    }

    .nveMenu .overlay-content {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .nveMenu #navC_00 {
        grid-column: 1 / -1;
    }

    .nveMenu #navC_00 .menuGroupList,
    .nveMenu #navC_01 .menuGroupList,
    .nveMenu #navC_02 .menuGroupList,
    .nveMenu #navC_03 .menuGroupList,
    .nveMenu #navC_04 .menuGroupList,
    .nveMenu #navC_05 .menuGroupList {
        columns: 3;
    }
}

@media (max-width: 991px) {
    .nveMenu .sidebarLogo {
        width: 165px;
    }

    .nveMenuTitle {
        display: none;
    }

    .nveMenuHead {
        padding: 14px 20px;
    }

    .nveMenu .closeIcon {
        width: 44px;
        height: 44px;
        font-size: 19px;
    }

    .nveMenuBody {
        padding: 10px 20px 20px;
        -webkit-overflow-scrolling: touch;
    }

    .nveMenu .overlay-content {
        display: block;
    }

    .nveMenu .eachMenuBox,
    .nveMenu #navC_00 {
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    /* the heading is the accordion trigger down here */
    .nveMenu .menuGroupHead {
        justify-content: flex-start;
        padding: 18px 0;
        margin-bottom: 0;
        border-bottom: none;
        font-size: 17px;
        cursor: pointer;
    }

    .nveMenu .menuGroupHead::after {
        display: none;
    }

    .nveMenu .menuGroupHead span {
        flex: 1 1 auto;
    }

    .nveMenu .menuGroupArrow {
        display: block;
        flex: 0 0 auto;
        font-size: 14px;
        color: var(--teal);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .nveMenu .eachMenuBox.is-expanded .menuGroupArrow {
        transform: rotate(180deg);
    }

    .nveMenu.is-open .eachMenuBox {
        &:not(:last-child) {
            margin-bottom: 0px;
        }
    }

    /* the two-track rule is written with an ID, so it takes an ID to undo -
       keep that to the column count and leave the accordion selectors clean,
       otherwise #navC_00 would outweigh .is-expanded and never open */
    .nveMenu #navC_00 .menuGroupList,
    .nveMenu #navC_01 .menuGroupList,
    .nveMenu #navC_02 .menuGroupList,
    .nveMenu #navC_03 .menuGroupList,
    .nveMenu #navC_04 .menuGroupList,
    .nveMenu #navC_05 .menuGroupList {
        columns: 1;
    }

    .nveMenu .menuGroupList {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .nveMenu .eachMenuBox.is-expanded .menuGroupList {
        max-height: 1400px;
    }

    .nveMenu .menuGroupList li:last-child a {
        padding-bottom: 20px;
    }

    .nveMenuFoot {
        padding: 14px 20px;
        font-size: 13px;
    }

    .nveMenuFoot .nveMenuNote {
        display: none;
    }

    .nveMenuFoot .nveMenuLinks {
        width: 100%;
        gap: 10px;
    }

    .nveMenuFoot .nveMenuLinks li {
        flex: 1 1 0;
    }

    .nveMenuFoot .nveMenuLinks a {
        text-align: center;
        padding: 10px 12px;
    }

    .section_9 {
        .row_1 {
            .col-lg-4 {
                &:not(:last-child) {
                    margin-bottom: 20px;
                }

                .imgBox {
                    height: auto;
                }
            }
        }
    }
}

@media (max-width: 575px) {
    .nveMenu .sidebarLogo {
        width: 140px;
    }

    .nveMenu .menuGroupHead {
        font-size: 16px;
        padding: 16px 0;
    }

    .nveMenu .menuGroupList a {
        font-size: 14px;
        padding-left: 20px;
    }

    .nveMenu .menuGroupList a:hover,
    .nveMenu .menuGroupList a.is-current {
        padding-left: 28px;
    }

    .nveMenuFoot .nveMenuLinks a {
        font-size: 13px;
        padding: 9px 8px;
    }
}

/* short landscape phones: the head and foot eat the whole viewport otherwise */
@media (max-height: 520px) and (max-width: 991px) {
    .nveMenuHead {
        padding: 10px 20px;
    }

    .nveMenu .sidebarLogo {
        width: 130px;
    }

    .nveMenuFoot {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Reduced motion - the curtain still opens, it just stops travelling
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .nveMenu {
        clip-path: none;
        opacity: 0;
        transition: opacity 0.2s linear, visibility 0s linear 0.2s;
    }

    .nveMenu.is-open {
        opacity: 1;
        transition: opacity 0.2s linear, visibility 0s linear 0s;
    }

    .nveMenu::after {
        animation: none;
    }

    .nveMenuHead,
    .nveMenuFoot,
    .nveMenu .eachMenuBox,
    .nveMenu .menuGroupList li {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .nveMenu .menuGroupHead::after {
        transform: scaleX(1);
        transition: none;
    }

    .header-wrapper .menuBar i {
        transition: none;
    }
}