/* =========================================================

   JOFAS WRIGHT TECHNOLOGIES LIMITED

   SHARED HEADER / NAVIGATION

   ========================================================= */



/* =========================================================

   DESIGN TOKENS

   ========================================================= */

:root {

    --jw-topbar-height: 42px;
    --jw-navbar-height: 88px;

    --jw-primary: #0b2260;

    --jw-deep-navy: #07183f;

    --jw-accent: #ff5e14;

    --jw-accent-dark: #e94f0b;

    --jw-white: #ffffff;

    --jw-black: #111827;

    --jw-text: #25345c;

    --jw-text-light: #4b5876;

    --jw-border: rgba(11, 34, 96, 0.09);

    --jw-border-light: rgba(11, 34, 96, 0.07);

    --jw-transition-fast: 0.25s ease;

    --jw-transition: 0.38s cubic-bezier(0.22, 1, 0.36, 1);

    --jw-transition-slow: 0.55s cubic-bezier(0.22, 1, 0.36, 1);

}



/* =========================================================

   HEADER BASE

   ========================================================= */

.jw-site-header {

    position: relative;

    z-index: 1030;

    width: 100%;

    padding-bottom: var(--jw-navbar-height);

    background: var(--jw-white);

    color: var(--jw-primary);

}



/* =========================================================

   TOP BAR

   ========================================================= */

.jw-topbar {

    position: relative;

    width: 100%;

    background: var(--jw-deep-navy);

    color: rgba(255, 255, 255, 0.88);

}



.jw-topbar-inner {

    min-height: 42px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

}



/* =========================================================

   TOP BAR CONTACT

   ========================================================= */

.jw-topbar-contact {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 22px;

}



.jw-topbar-item {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 0.82rem;

    font-weight: 500;

    line-height: 1.5;

    text-decoration: none;

    transition:

        color var(--jw-transition-fast),

        opacity var(--jw-transition-fast);

}



.jw-topbar-item:hover {

    color: var(--jw-white);

}



.jw-topbar-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 16px;

    height: 16px;

    flex: 0 0 16px;

}



.jw-topbar-icon svg {

    display: block;

    width: 15px;

    height: 15px;

}



/* =========================================================

   TOP BAR SOCIALS

   ========================================================= */

.jw-topbar-socials {

    display: flex;

    align-items: center;

    gap: 7px;

}



.jw-social-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 28px;

    height: 28px;

    border: 1px solid rgba(255, 255, 255, 0.14);

    border-radius: 50%;

    background: transparent;

    color: rgba(255, 255, 255, 0.76);

    text-decoration: none;

    transition:

        color var(--jw-transition-fast),

        background var(--jw-transition-fast),

        border-color var(--jw-transition-fast),

        transform var(--jw-transition-fast);

}



.jw-social-link svg {

    display: block;

    width: 13px;

    height: 13px;

}



.jw-social-link:hover {

    background: var(--jw-accent);

    border-color: var(--jw-accent);

    color: var(--jw-white);

    transform: translateY(-2px);

}



/* =========================================================

   MAIN NAVBAR

   =========================================================

   IMPORTANT:

   The navbar itself is the scroll-aware layer.

   The top information bar remains part of the normal document

   flow and scrolls away naturally.

   The navbar then becomes sticky at the top of the viewport.

   ========================================================= */

.jw-navbar {

    position: fixed;

    top: var(--jw-topbar-height);

    right: 0;

    left: 0;

    z-index: 1040;

    width: 100%;

    height: var(--jw-navbar-height);

    background: var(--jw-white);

    border-bottom: 1px solid rgba(11, 34, 96, 0.08);

    box-shadow: 0 0 0 rgba(7, 24, 63, 0);

    transform: translate3d(0, 0, 0);

    transition:

        top var(--jw-transition),

        transform var(--jw-transition),

        background var(--jw-transition),

        border-color var(--jw-transition),

        box-shadow var(--jw-transition);

    will-change: transform, top;

}



/* =========================================================

   NAVBAR SCROLL HIDE

   =========================================================

   JavaScript adds .jw-navbar-hidden while scrolling downward.

   The navbar is moved exactly its own height upward, keeping

   the animation smooth without affecting document layout.

   ========================================================= */

.jw-navbar.jw-navbar-hidden {

    transform: translate3d(0, calc(-100% - 2px), 0);

    pointer-events: none;

}



/* =========================================================

   NAVBAR REVEALED STATE

   ========================================================= */

.jw-navbar.jw-navbar-revealed {

    transform: translate3d(0, 0, 0);

}



/* =========================================================

   NAVBAR ACTIVE / DOCKED STATE

   ========================================================= */

.jw-navbar.jw-navbar-docked {

    top: 0;

    box-shadow:

        0 10px 30px rgba(7, 24, 63, 0.10);

    border-bottom-color:

        rgba(11, 34, 96, 0.10);

}



/* =========================================================

   NAVBAR INNER

   ========================================================= */

.jw-navbar-inner {

    height: 100%;

    min-height: 88px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    transition:

        min-height var(--jw-transition),

        gap var(--jw-transition);

}



/* =========================================================

   BRAND

   ========================================================= */

.jw-brand {

    display: inline-flex;

    align-items: center;

    flex: 0 0 auto;

    text-decoration: none;

}



.jw-brand img {

    display: block;

    width: 170px;

    height: auto;

    max-width: 100%;

    transition:

        width var(--jw-transition),

        transform var(--jw-transition);

}



/* =========================================================

   DESKTOP NAVIGATION

   ========================================================= */

.jw-desktop-nav {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 4px;

    margin-left: auto;

}



.jw-nav-link {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 88px;

    padding: 0 15px;

    color: var(--jw-text);

    font-size: 0.92rem;

    font-weight: 650;

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    transition:

        color var(--jw-transition-fast),

        min-height var(--jw-transition),

        padding var(--jw-transition);

}



.jw-nav-link::after {

    content: "";

    position: absolute;

    left: 15px;

    right: 15px;

    bottom: 0;

    width: auto;

    height: 3px;

    background: var(--jw-accent);

    transform: scaleX(0);

    transform-origin: center;

    transition:

        transform var(--jw-transition-fast);

}



.jw-nav-link:hover {

    color: var(--jw-primary);

}



.jw-nav-link:hover::after,

.jw-nav-link.is-active::after,

.jw-nav-link.active::after {

    transform: scaleX(1);

}



.jw-nav-link.is-active,

.jw-nav-link.active {

    color: var(--jw-primary);

}



/* =========================================================

   REQUEST A QUOTE CTA

   ========================================================= */

.jw-nav-cta {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 44px;

    margin-left: 12px;

    padding: 0 22px;

    border: 1px solid var(--jw-accent);

    border-radius: 4px;

    background: var(--jw-accent);

    color: var(--jw-white);

    font-size: 0.84rem;

    font-weight: 750;

    letter-spacing: 0.025em;

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    box-shadow:

        0 7px 18px rgba(255, 94, 20, 0.16);

    transition:

        background var(--jw-transition-fast),

        border-color var(--jw-transition-fast),

        color var(--jw-transition-fast),

        transform var(--jw-transition-fast),

        box-shadow var(--jw-transition-fast);

}



.jw-nav-cta:hover {

    background: var(--jw-accent-dark);

    border-color: var(--jw-accent-dark);

    color: var(--jw-white);

    transform: translateY(-2px);

    box-shadow:

        0 10px 24px rgba(255, 94, 20, 0.22);

}



/* =========================================================

   MOBILE MENU TOGGLE

   ========================================================= */

.jw-mobile-toggle {

    display: none;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    padding: 0;

    border: 0;

    border-radius: 10px;

    background: transparent;

    color: var(--jw-primary);

    cursor: pointer;

    transition:

        background var(--jw-transition-fast),

        border-color var(--jw-transition-fast),

        color var(--jw-transition-fast),

        transform var(--jw-transition-fast);

}



.jw-mobile-toggle:hover {

    background: rgba(11, 34, 96, 0.07);

    color: var(--jw-primary);

}



.jw-mobile-toggle:active {

    transform: scale(0.95);

}



.jw-mobile-toggle svg {

    display: block;

    width: 30px;

    height: 30px;

}



/* =========================================================

   MOBILE OFFCANVAS

   ========================================================= */

.jw-offcanvas {

    width: min(390px, 92vw) !important;

    background:

        linear-gradient(

            180deg,

            #ffffff 0%,

            #f9fafc 100%

        );

    color: var(--jw-primary);

    border-left: 1px solid var(--jw-border-light);

    box-shadow:

        -15px 0 45px rgba(7, 24, 63, 0.14);

}



/* =========================================================

   MOBILE OFFCANVAS HEADER

   ========================================================= */

.jw-offcanvas-header {

    position: relative;

    min-height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 20px;

    background: var(--jw-white);

    border-bottom: 1px solid var(--jw-border-light);

}



.jw-offcanvas-brand {

    display: inline-flex;

    align-items: center;

    max-width: calc(100% - 55px);

    text-decoration: none;

}



.jw-offcanvas-brand img {

    display: block;

    width: auto;

    max-width: 100%;

    height: auto;

    max-height: 48px;

}



/* =========================================================

   OFFCANVAS CLOSE BUTTON

   ========================================================= */

.jw-offcanvas-header .btn-close {

    width: 42px;

    height: 42px;

    margin: 0;

    padding: 0;

    border-radius: 50%;

    background-size: 14px 14px;

    opacity: 0.75;

    transition:

        background-color var(--jw-transition),

        opacity var(--jw-transition),

        transform var(--jw-transition);

}



.jw-offcanvas-header .btn-close:hover {

    background-color: rgba(11, 34, 96, 0.07);

    opacity: 1;

    transform: rotate(90deg);

}



.jw-offcanvas-header .btn-close:focus {

    box-shadow:

        0 0 0 3px rgba(255, 94, 20, 0.15);

}



/* =========================================================

   MOBILE OFFCANVAS BODY

   ========================================================= */

.jw-offcanvas-body {

    display: flex;

    flex-direction: column;

    padding: 24px 20px 30px;

    overflow-y: auto;

}



/* =========================================================

   MOBILE NAVIGATION LIST

   ========================================================= */

.jw-mobile-nav {

    display: flex;

    flex-direction: column;

    width: 100%;

    margin: 0;

    padding: 0;

    list-style: none;

}



.jw-mobile-nav li {

    margin: 0;

    padding: 0;

    list-style: none;

    border-bottom: 1px solid var(--jw-border-light);

}



.jw-mobile-nav li:first-child {

    border-top: 1px solid var(--jw-border-light);

}



/* =========================================================

   MOBILE NAVIGATION LINK

   ========================================================= */

.jw-mobile-nav-link {

    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 68px;

    padding: 12px 4px;

    color: var(--jw-primary);

    font-size: 0.98rem;

    font-weight: 700;

    letter-spacing: 0.035em;

    line-height: 1.3;

    text-decoration: none;

    transition:

        color var(--jw-transition),

        background-color var(--jw-transition),

        padding-left var(--jw-transition);

}



/* =========================================================

   MOBILE NAV ICON

   ========================================================= */

.jw-mobile-nav-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 46px;

    width: 46px;

    height: 46px;

    margin-right: 15px;

    background: rgba(11, 34, 96, 0.055);

    border: 1px solid rgba(11, 34, 96, 0.08);

    border-radius: 10px;

    color: var(--jw-primary);

    transition:

        background-color var(--jw-transition),

        color var(--jw-transition),

        border-color var(--jw-transition),

        transform var(--jw-transition);

}



.jw-mobile-nav-icon svg {

    width: 24px;

    height: 24px;

}



/* =========================================================

   MOBILE NAV TEXT

   ========================================================= */

.jw-mobile-nav-text {

    flex: 1 1 auto;

    min-width: 0;

    line-height: 1.3;

}



/* =========================================================

   MOBILE NAV ARROW

   ========================================================= */

.jw-mobile-nav-arrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 34px;

    width: 34px;

    height: 34px;

    margin-left: 10px;

    color: #9aa3b3;

    transition:

        color var(--jw-transition),

        transform var(--jw-transition);

}



.jw-mobile-nav-arrow svg {

    width: 19px;

    height: 19px;

}



/* =========================================================

   MOBILE NAV HOVER

   ========================================================= */

.jw-mobile-nav-link:hover {

    padding-left: 8px;

    background: rgba(11, 34, 96, 0.025);

    color: var(--jw-primary);

}



.jw-mobile-nav-link:hover .jw-mobile-nav-icon {

    background: rgba(255, 94, 20, 0.10);

    border-color: rgba(255, 94, 20, 0.16);

    color: var(--jw-accent);

    transform: translateX(2px);

}



.jw-mobile-nav-link:hover .jw-mobile-nav-arrow {

    color: var(--jw-accent);

    transform: translateX(3px);

}



/* =========================================================

   MOBILE ACTIVE PAGE

   ========================================================= */

.jw-mobile-nav-link.active {

    color: var(--jw-primary);

    font-weight: 800;

}



.jw-mobile-nav-link.active::before {

    content: "";

    position: absolute;

    top: 50%;

    left: -20px;

    width: 4px;

    height: 34px;

    background: var(--jw-accent);

    border-radius: 0 4px 4px 0;

    transform: translateY(-50%);

}



.jw-mobile-nav-link.active .jw-mobile-nav-icon {

    background: var(--jw-primary);

    border-color: var(--jw-primary);

    color: var(--jw-white);

    box-shadow:

        0 5px 15px rgba(11, 34, 96, 0.16);

}



.jw-mobile-nav-link.active .jw-mobile-nav-arrow {

    color: var(--jw-accent);

}



/* =========================================================

   MOBILE QUOTE CTA

   ========================================================= */

.jw-mobile-quote {

    width: 100%;

    margin-top: 24px;

}



.jw-mobile-quote-btn {

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 62px;

    padding: 9px 12px 9px 10px;

    background:

        linear-gradient(

            135deg,

            var(--jw-accent),

            var(--jw-accent-dark)

        );

    border: 1px solid var(--jw-accent);

    border-radius: 18px;

    color: var(--jw-white);

    font-size: 0.9rem;

    font-weight: 800;

    letter-spacing: 0.045em;

    text-decoration: none;

    box-shadow:

        0 10px 25px rgba(255, 94, 20, 0.18);

    transition:

        transform var(--jw-transition),

        box-shadow var(--jw-transition);

}



.jw-mobile-quote-btn:hover {

    color: var(--jw-white);

    transform: translateY(-2px);

    box-shadow:

        0 14px 30px rgba(255, 94, 20, 0.25);

}



.jw-mobile-quote-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 42px;

    width: 42px;

    height: 42px;

    margin-right: 12px;

    background: rgba(255, 255, 255, 0.14);

    border: 1px solid rgba(255, 255, 255, 0.20);

    border-radius: 9px;

}



.jw-mobile-quote-icon svg {

    width: 22px;

    height: 22px;

}



.jw-mobile-quote-btn > span:nth-child(2) {

    flex: 1 1 auto;

    min-width: 0;

}



.jw-mobile-quote-arrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 34px;

    width: 34px;

    height: 34px;

    margin-left: 8px;

}



.jw-mobile-quote-arrow svg {

    width: 19px;

    height: 19px;

}



/* =========================================================

   MOBILE CONTACT INFORMATION

   ========================================================= */

.jw-mobile-contact {

    width: 100%;

    margin-top: 34px;

    padding-top: 26px;

    border-top: 1px solid var(--jw-border);

}



.jw-mobile-contact-title {

    margin: 0 0 18px;

    color: var(--jw-primary);

    font-size: 0.76rem;

    font-weight: 800;

    letter-spacing: 0.14em;

    line-height: 1.4;

    text-transform: uppercase;

}



.jw-mobile-contact-item {

    display: flex;

    align-items: flex-start;

    width: 100%;

    margin-bottom: 16px;

    color: var(--jw-text-light);

    font-size: 0.88rem;

    line-height: 1.55;

}



.jw-mobile-contact-item:last-of-type {

    margin-bottom: 0;

}



.jw-mobile-contact-item a {

    min-width: 0;

    color: inherit;

    overflow-wrap: anywhere;

    text-decoration: none;

}



.jw-mobile-contact-item a:hover {

    color: var(--jw-accent);

}



.jw-mobile-contact-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 38px;

    width: 38px;

    height: 38px;

    margin-right: 12px;

    background: rgba(11, 34, 96, 0.055);

    border-radius: 9px;

    color: var(--jw-primary);

}



.jw-mobile-contact-icon svg {

    width: 20px;

    height: 20px;

}



/* =========================================================

   MOBILE SOCIALS

   ========================================================= */

.jw-mobile-socials {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 25px;

    padding-top: 22px;

    border-top: 1px solid var(--jw-border-light);

}



.jw-mobile-socials .jw-social-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    background: var(--jw-white);

    border: 1px solid var(--jw-border);

    border-radius: 50%;

    color: var(--jw-primary);

    box-shadow:

        0 3px 12px rgba(11, 34, 96, 0.06);

    transition:

        background-color var(--jw-transition),

        border-color var(--jw-transition),

        color var(--jw-transition),

        transform var(--jw-transition),

        box-shadow var(--jw-transition);

}



.jw-mobile-socials .jw-social-link svg {

    width: 21px;

    height: 21px;

}



.jw-mobile-socials .jw-social-link:hover {

    background: var(--jw-primary);

    border-color: var(--jw-primary);

    color: var(--jw-white);

    transform: translateY(-2px);

    box-shadow:

        0 7px 18px rgba(11, 34, 96, 0.15);

}



/* =========================================================

   BOOTSTRAP OFFCANVAS BACKDROP

   ========================================================= */

.offcanvas-backdrop {

    background-color: var(--jw-deep-navy);

}



.offcanvas-backdrop.show {

    opacity: 0.62;

}



/* =========================================================

   ACCESSIBILITY

   ========================================================= */

.jw-site-header a:focus-visible,

.jw-site-header button:focus-visible {

    outline: 2px solid var(--jw-accent);

    outline-offset: 3px;

}



/* =========================================================

   TABLET

   ========================================================= */

@media (max-width: 1199.98px) {

    .jw-navbar-inner {

        gap: 24px;

    }



    .jw-brand img {

        width: 155px;

    }



    .jw-nav-link {

        padding-right: 11px;

        padding-left: 11px;

        font-size: 0.88rem;

    }



    .jw-nav-link::after {

        left: 11px;

        right: 11px;

    }



    .jw-nav-cta {

        margin-left: 7px;

        padding-right: 17px;

        padding-left: 17px;

        font-size: 0.8rem;

    }

}



/* =========================================================

   TABLET / MOBILE NAVIGATION

   ========================================================= */

@media (max-width: 991.98px) {

    :root {

        --jw-topbar-height: 40px;

        --jw-navbar-height: 78px;

    }

    .jw-topbar-inner {

        min-height: 40px;

    }



    .jw-topbar-socials {

        display: none;

    }



    .jw-navbar-inner {

        position: relative;

        min-height: 78px;

    }



    /* -----------------------------------------------------

       PERFECTLY CENTERED MOBILE LOGO

       ----------------------------------------------------- */

    .jw-brand {

        position: absolute;

        top: 50%;

        left: 50%;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        max-width: calc(100% - 120px);

        transform:

            translate(-50%, -50%);

    }



    .jw-brand img {

        display: block;

        width: auto;

        max-width: 100%;

        height: auto;

        max-height: 52px;

    }



    /* -----------------------------------------------------

       HAMBURGER

       ----------------------------------------------------- */

    .jw-mobile-toggle {

        position: relative;

        z-index: 2;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        width: 48px;

        height: 48px;

        padding: 0;

        margin-right: auto;

        background: transparent;

        border: 0;

        border-radius: 10px;

        color: var(--jw-primary);

    }



    .jw-mobile-toggle svg {

        width: 30px;

        height: 30px;

    }



    /* -----------------------------------------------------

       HIDE DESKTOP NAV

       ----------------------------------------------------- */

    .jw-desktop-nav {

        display: none;

    }



    /* -----------------------------------------------------

       SCROLL-AWARE MOBILE NAVBAR

       ----------------------------------------------------- */

    .jw-navbar.jw-navbar-docked {

        box-shadow:

            0 10px 30px rgba(7, 24, 63, 0.13);

    }

}



/* =========================================================

   MOBILE

   ========================================================= */

@media (max-width: 767.98px) {

    :root {

        --jw-topbar-height: 38px;

        --jw-navbar-height: 72px;

    }

    .jw-topbar-inner {

        min-height: 38px;

        justify-content: center;

    }



    .jw-topbar-contact {

        width: 100%;

        justify-content: center;

        gap: 12px 18px;

    }



    .jw-topbar-item {

        font-size: 0.76rem;

    }



    .jw-topbar-item.address {

        display: none;

    }



    .jw-navbar-inner {

        min-height: 72px;

    }



    .jw-brand img {

        width: 140px;

        max-height: 48px;

    }



    .jw-mobile-toggle {

        width: 46px;

        height: 46px;

    }



    .jw-mobile-toggle svg {

        width: 29px;

        height: 29px;

    }



    .jw-offcanvas {

        width: min(370px, 92vw) !important;

    }

}



/* =========================================================

   SMALL MOBILE

   ========================================================= */

@media (max-width: 575.98px) {

    :root {

        --jw-navbar-height: 68px;

    }

    .jw-topbar-contact {

        gap: 8px 14px;

    }



    .jw-topbar-item {

        font-size: 0.72rem;

    }



    .jw-topbar-item:nth-child(n + 3) {

        display: none;

    }



    .jw-navbar-inner {

        min-height: 68px;

        gap: 16px;

    }



    .jw-brand {

        max-width: calc(100% - 105px);

    }



    .jw-brand img {

        width: 132px;

        max-height: 46px;

    }



    .jw-mobile-toggle {

        width: 46px;

        height: 46px;

    }



    .jw-mobile-toggle svg {

        width: 28px;

        height: 28px;

    }



    .jw-offcanvas {

        width: min(370px, 94vw) !important;

    }



    .jw-offcanvas-header {

        min-height: 76px;

        padding-right: 16px;

        padding-left: 16px;

    }



    .jw-offcanvas-body {

        padding-right: 16px;

        padding-left: 16px;

    }



    .jw-mobile-nav-link {

        min-height: 64px;

    }



    .jw-mobile-nav-icon {

        flex-basis: 44px;

        width: 44px;

        height: 44px;

        margin-right: 13px;

    }



    .jw-mobile-nav-icon svg {

        width: 23px;

        height: 23px;

    }

}



/* =========================================================

   VERY SMALL MOBILE

   ========================================================= */

@media (max-width: 380px) {

    .jw-topbar-item {

        font-size: 0.68rem;

    }



    .jw-brand {

        max-width: calc(100% - 95px);

    }



    .jw-brand img {

        width: 124px;

        max-height: 42px;

    }



    .jw-mobile-toggle {

        width: 42px;

        height: 42px;

    }



    .jw-mobile-toggle svg {

        width: 26px;

        height: 26px;

    }



    .jw-offcanvas {

        width: 100% !important;

    }



    .jw-mobile-nav-link {

        font-size: 0.9rem;

    }



    .jw-mobile-nav-icon {

        flex-basis: 42px;

        width: 42px;

        height: 42px;

    }



    .jw-mobile-nav-icon svg {

        width: 21px;

        height: 21px;

    }

}



/* =========================================================

   REDUCED MOTION

   ========================================================= */

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

    .jw-site-header \*,

    .jw-site-header \*::before,

    .jw-site-header \*::after {

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

    }



    .jw-navbar {

        transition: none;

    }



    .jw-navbar.jw-navbar-hidden,

    .jw-navbar.jw-navbar-revealed {

        top: 0;

        transform: none;

    }

}