/* =========================================================
   ABOUT / BLOG / JOBS / CONTACT
   RESPONSIVE HEADER CSS
   ========================================================= */

/* =========================================================
   1. GLOBAL RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: #102033;
    background:
        linear-gradient(
            180deg,
            #f5f8ff 0%,
            #ffffff 55%,
            #f7f9fc 100%
        );
}

a {
    text-decoration: none;
    color: inherit;
}

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

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.container {
    width: min(1200px, 92%);
    margin: 0 auto;
}


/* =========================================================
   2. SITE HEADER
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

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

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(16, 32, 51, 0.08);

    box-shadow:
        0 6px 20px rgba(16, 32, 51, 0.06);
}


/* =========================================================
   3. HEADER INNER
   ========================================================= */

.header-inner {
    width: min(1400px, 96%);
    margin: 0 auto;

    min-height: 72px;

    display: flex;
    align-items: center;

    gap: 0.8rem;

    position: relative;

    padding: 0.45rem 0;

    /*
       IMPORTANT:
       Desktop keeps everything in one row.
       At smaller widths this will be changed
       through media queries.
    */
    flex-wrap: nowrap;
}


/* =========================================================
   4. BRAND / LOGO
   ========================================================= */

.brand {
    display: flex;
    align-items: center;

    gap: 0.65rem;

    min-width: 0;
    flex-shrink: 0;

    white-space: nowrap;
}


/* =========================================================
   5. LOGO SECTION
   ========================================================= */

.logo-section {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}


/* =========================================================
   6. LOGO RING
   ========================================================= */

.logo-ring {
    width: 50px;
    height: 50px;

    position: relative;

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

    flex-shrink: 0;
}


/* Main logo image */

.logo-ring img {
    width: 42px;
    height: 42px;

    object-fit: contain;

    border-radius: 50%;

    position: relative;
    z-index: 3;

    background: #ffffff;

    padding: 3px;

    box-shadow:
        0 6px 16px rgba(37, 99, 235, 0.16);
}


/* =========================================================
   7. LOGO PARTICLES
   ========================================================= */

.logo-ring .dot {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #2563eb;

    box-shadow:
        0 0 8px rgba(37, 99, 235, 0.75);

    z-index: 4;
}

.logo-ring .dot1 {
    top: 0;
    right: 5px;
}

.logo-ring .dot2 {
    bottom: 0;
    left: 5px;
}


/* =========================================================
   8. BRAND TEXT
   ========================================================= */

.brand-text {
    display: flex;
    flex-direction: column;

    justify-content: center;

    min-width: 0;

    line-height: 1.1;
}


/* Company name */

.brand-name {
    font-size: 0.98rem;

    font-weight: 800;

    letter-spacing: 0.15px;

    color: #102033;

    white-space: nowrap;
}


/* Company tagline */

.brand-tagline {
    font-size: 0.76rem;

    color: #60738d;

    margin-top: 0.18rem;

    white-space: nowrap;
}


/* =========================================================
   9. NAVIGATION
   ========================================================= */

.main-nav {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.3rem;

    margin-left: auto;

    flex-shrink: 1;

    min-width: 0;
}


/* =========================================================
   10. NAVIGATION ITEMS
   ========================================================= */

.nav-item {
    position: relative;

    display: inline-flex;

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

    min-width: 72px;

    padding: 0.58rem 0.7rem;

    color: #102033;

    font-weight: 700;

    background: #edf4ff;

    border: 1px solid rgba(37, 99, 235, 0.12);

    transform: skewX(-14deg);

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

    overflow: hidden;

    font-size: 0.84rem;

    white-space: nowrap;
}


/* Correct text angle */

.nav-item span {
    display: inline-block;

    transform: skewX(14deg);

    position: relative;

    z-index: 2;
}


/* =========================================================
   NAVIGATION DECORATIVE LINES
   ========================================================= */

.nav-item::before,
.nav-item::after {
    content: "";

    position: absolute;

    left: 16%;

    width: 68%;

    height: 2px;

    background: #2563eb;

    transform: scaleX(0);

    transition: transform 0.3s ease;
}

.nav-item::before {
    top: 5px;

    transform-origin: left;
}

.nav-item::after {
    bottom: 5px;

    transform-origin: right;
}


/* =========================================================
   NAVIGATION HOVER / ACTIVE
   ========================================================= */

.nav-item:hover,
.nav-item.active {
    background: #dfeaff;

    color: #1746a2;

    transform:
        skewX(-14deg)
        translateY(-1px);

    box-shadow:
        0 5px 12px rgba(37, 99, 235, 0.10);
}

.nav-item:hover::before,
.nav-item:hover::after,
.nav-item.active::before,
.nav-item.active::after {
    transform: scaleX(1);
}


/* =========================================================
   11. HEADER CONTACT AREA
   ========================================================= */

.header-contact {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 0.65rem;

    margin-left: 0.25rem;

    flex-shrink: 0;
}


/* =========================================================
   12. PHONE LINK
   ========================================================= */

.phone-link {
    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    color: #102033;

    font-weight: 700;

    white-space: nowrap;

    font-size: 0.88rem;
}


/* =========================================================
   13. PHONE ICON
   ========================================================= */

.phone-icon-btn {
    width: 30px;
    height: 30px;

    display: inline-flex;

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

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    color: #ffffff;

    box-shadow:
        0 8px 18px rgba(37, 99, 235, 0.25);

    animation:
        ringPulse 1.4s ease-in-out infinite;

    flex-shrink: 0;
}

.phone-icon-btn svg {
    width: 17px;
    height: 17px;

    fill: currentColor;
}


/* =========================================================
   14. PHONE ANIMATION
   ========================================================= */

@keyframes ringPulse {

    0% {
        transform: translateY(0);
    }

    20% {
        transform: translateY(-1px);
    }

    40% {
        transform: translateY(1px);
    }

    60% {
        transform: translateY(-1px);
    }

    80% {
        transform: translateY(1px);
    }

    100% {
        transform: translateY(0);
    }
}


/* =========================================================
   15. PHONE NUMBER
   ========================================================= */

.phone-number {
    display: inline-block;
}


/* =========================================================
   16. APPLY NOW BUTTON
   ========================================================= */

.apply-btn {
    display: inline-flex;

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

    min-height: 40px;

    padding:
        0.62rem
        0.9rem;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    color: #ffffff;

    font-weight: 700;

    font-size: 0.86rem;

    white-space: nowrap;

    box-shadow:
        0 10px 22px rgba(37, 99, 235, 0.22);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

    position: relative;

    overflow: hidden;

    flex-shrink: 0;
}


.apply-btn:hover {
    transform: translateY(-1px);

    box-shadow:
        0 14px 30px rgba(37, 99, 235, 0.28);
}


/* =========================================================
   17. APPLY BUTTON PULSE
   ========================================================= */

.apply-btn.pulse-cta {

    border: 2px solid rgba(255, 255, 255, 0.7);

    box-shadow:
        0 0 0 0 rgba(37, 99, 235, 0.4),
        0 10px 22px rgba(37, 99, 235, 0.22);

    animation:
        pulseGrow 1.8s ease-in-out infinite;
}


.apply-btn.pulse-cta::before {

    content: "";

    position: absolute;

    inset: -4px;

    border-radius: inherit;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.45) 0%,
            rgba(37, 99, 235, 0) 60%
        );

    opacity: 0;

    pointer-events: none;

    animation:
        pulseGlow 1.8s ease-in-out infinite;
}


@keyframes pulseGrow {

    0% {

        transform: scale(1);

        box-shadow:
            0 0 0 0 rgba(37, 99, 235, 0.4),
            0 10px 22px rgba(37, 99, 235, 0.22);
    }

    50% {

        transform: scale(1.05);

        box-shadow:
            0 0 0 5px rgba(37, 99, 235, 0),
            0 14px 30px rgba(37, 99, 235, 0.28);
    }

    100% {

        transform: scale(1);

        box-shadow:
            0 0 0 0 rgba(37, 99, 235, 0.4),
            0 10px 22px rgba(37, 99, 235, 0.22);
    }
}


@keyframes pulseGlow {

    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}


.apply-btn.pulse-cta:hover {
    animation: none;
}


.apply-btn.pulse-cta:hover::before {
    animation: none;

    opacity: 1;
}


/* =========================================================
   18. MOBILE MENU BUTTON
   ========================================================= */

.menu-toggle {

    display: none;

    width: 42px;
    height: 42px;

    border: 0;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    color: #ffffff;

    font-size: 1.45rem;

    line-height: 1;

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

    cursor: pointer;

    box-shadow:
        0 7px 16px rgba(37, 99, 235, 0.22);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.menu-toggle:hover {

    transform: translateY(-1px);

    box-shadow:
        0 10px 20px rgba(37, 99, 235, 0.28);
}


.menu-toggle:active {

    transform: scale(0.96);
}


/* =========================================================
   19. LARGE TABLETS / SMALL DESKTOP
   1200px AND BELOW
   ========================================================= */

@media (max-width: 1200px) {

    .header-inner {
        width: 95%;
    }

    .brand-name {
        font-size: 0.94rem;
    }

    .brand-tagline {
        font-size: 0.72rem;
    }

    .main-nav {
        gap: 0.22rem;
    }

    .nav-item {
        min-width: 66px;

        padding:
            0.55rem
            0.58rem;

        font-size: 0.79rem;
    }

    .phone-number {
        font-size: 0.82rem;
    }

    .apply-btn {
        padding:
            0.58rem
            0.75rem;

        font-size: 0.82rem;
    }
}


/* =========================================================
   20. TABLET
   1050px AND BELOW
   ========================================================= */

@media (max-width: 1050px) {

    .header-inner {
        min-height: 68px;

        gap: 0.5rem;
    }

    .logo-ring {
        width: 46px;
        height: 46px;
    }

    .logo-ring img {
        width: 39px;
        height: 39px;
    }

    .brand {
        gap: 0.5rem;
    }

    .brand-name {
        font-size: 0.9rem;
    }

    .brand-tagline {
        font-size: 0.68rem;
    }

    .main-nav {
        gap: 0.15rem;

        margin-left: 0.4rem;
    }

    .nav-item {
        min-width: 60px;

        padding:
            0.52rem
            0.48rem;

        font-size: 0.75rem;
    }

    .header-contact {
        gap: 0.4rem;
    }

    .phone-number {
        font-size: 0.76rem;
    }

    .phone-icon-btn {
        width: 28px;
        height: 28px;
    }

    .apply-btn {
        min-height: 36px;

        padding:
            0.52rem
            0.65rem;

        font-size: 0.76rem;
    }
}



/* =========================================================
   21. TABLET / MOBILE HEADER
   900px AND BELOW
   ========================================================= */

@media (max-width: 900px) {

    /* =====================================================
       HEADER INNER
       ===================================================== */

    .header-inner {

        width: 94%;

        min-height: 64px;

        padding: 0.4rem 0;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 0.5rem;

        position: relative;
    }


    /* =====================================================
       BRAND
       Logo + Company Name stay in ONE ROW
       ===================================================== */

    .brand {

        order: 1;

        display: flex;

        flex-direction: row;

        align-items: center;

        gap: 0.5rem;

        flex: 1;

        min-width: 0;

        white-space: nowrap;
    }


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

    .logo-section {

        display: flex;

        align-items: center;

        justify-content: center;

        flex-shrink: 0;
    }


    .logo-ring {

        width: 46px;

        height: 46px;

        flex-shrink: 0;
    }


    .logo-ring img {

        width: 39px;

        height: 39px;
    }


    /* =====================================================
       COMPANY TEXT
       ===================================================== */

    .brand-text {

        display: flex;

        flex-direction: column;

        justify-content: center;

        min-width: 0;
    }


    .brand-name {

        font-size: 0.9rem;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    /* =====================================================
       HIDE COMPANY TAGLINE
       ===================================================== */

    .brand-tagline {

        display: none;
    }


    /* =====================================================
       HIDE PHONE AND APPLY BUTTON
       ===================================================== */

    .header-contact {

        display: none !important;
    }


    /* =====================================================
       HAMBURGER BUTTON
       ===================================================== */

    .menu-toggle {

        display: inline-flex;

        order: 2;

        width: 42px;

        height: 42px;

        margin-left: auto;

        flex-shrink: 0;

        align-items: center;

        justify-content: center;

        border: 0;

        border-radius: 10px;

        background:
            linear-gradient(
                135deg,
                #2563eb,
                #7c3aed
            );

        color: #ffffff;

        font-size: 1.5rem;

        line-height: 1;

        cursor: pointer;

        box-shadow:
            0 7px 16px rgba(37, 99, 235, 0.22);

        transition:
            transform 0.2s ease,
            box-shadow 0.2s ease;
    }


    .menu-toggle:hover {

        transform: translateY(-1px);

        box-shadow:
            0 10px 20px rgba(37, 99, 235, 0.28);
    }


    .menu-toggle:active {

        transform: scale(0.96);
    }


    /* =====================================================
       MOBILE NAVIGATION CONTAINER
       
       IMPORTANT:
       Position absolute so it appears BELOW
       the logo/company-title row.
       ===================================================== */

    .main-nav {

        position: absolute;

        top: calc(100% + 6px);

        left: 0;

        right: 0;

        width: 100%;

        display: none;

        flex-direction: column;

        align-items: stretch;

        justify-content: flex-start;

        gap: 7px;

        margin: 0;

        padding: 10px;

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

        backdrop-filter: blur(14px);

        -webkit-backdrop-filter: blur(14px);

        border:
            1px solid rgba(37, 99, 235, 0.12);

        border-radius: 16px;

        box-shadow:
            0 16px 35px rgba(16, 32, 51, 0.14);

        z-index: 1100;

        /*
           Prevent the navigation from becoming
           part of the logo/menu flex row.
        */

        flex-shrink: 0;
    }


    /* =====================================================
       SHOW MOBILE MENU
       
       JavaScript adds .show
       ===================================================== */

    .main-nav.show {

        display: flex;
    }


    /* =====================================================
       MOBILE NAVIGATION ITEMS
       ONE BELOW THE OTHER
       ===================================================== */

    .nav-item {

        display: flex;

        align-items: center;

        justify-content: flex-start;

        width: 100%;

        min-width: 0;

        min-height: 45px;

        padding:
            0.7rem
            1rem;

        border-radius: 10px;

        transform: none;

        background: #edf4ff;

        border:
            1px solid rgba(37, 99, 235, 0.12);

        font-size: 0.9rem;

        color: #102033;

        white-space: nowrap;
    }


    /* =====================================================
       NAVIGATION TEXT
       ===================================================== */

    .nav-item span {

        display: block;

        width: 100%;

        transform: none;

        text-align: left;

        position: relative;

        z-index: 2;
    }


    /* =====================================================
       ACTIVE / HOVER
       ===================================================== */

    .nav-item:hover,
    .nav-item.active {

        transform: translateX(2px);

        background: #dfeaff;

        color: #1746a2;
    }


    /* =====================================================
       DECORATIVE LINES
       ===================================================== */

    .nav-item::before,
    .nav-item::after {

        left: 10px;

        width: 40px;
    }


    .nav-item::before {

        top: 5px;

        transform-origin: left;
    }


    .nav-item::after {

        bottom: 5px;

        transform-origin: right;
    }
}



/* =========================================================
   22. MOBILE
   768px AND BELOW
   ========================================================= */

@media (max-width: 768px) {

    .site-header {

        box-shadow:
            0 5px 18px rgba(16, 32, 51, 0.08);
    }


    .header-inner {

        width: 94%;

        min-height: 62px;

        padding:
            0.35rem 0;
    }


    /* ---------------------------------------------
       LOGO
       --------------------------------------------- */

    .logo-ring {

        width: 44px;
        height: 44px;
    }

    .logo-ring img {

        width: 37px;
        height: 37px;
    }


    /* ---------------------------------------------
       COMPANY NAME
       --------------------------------------------- */

    .brand-name {

        font-size: 0.9rem;
    }


    /* ---------------------------------------------
       TAGLINE HIDDEN
       --------------------------------------------- */

    .brand-tagline {

        display: none;
    }


    /* ---------------------------------------------
       PHONE / APPLY HIDDEN
       --------------------------------------------- */

    .header-contact {

        display: none;
    }


    /* ---------------------------------------------
       HAMBURGER
       --------------------------------------------- */

    .menu-toggle {

        width: 40px;
        height: 40px;

        font-size: 1.35rem;

        border-radius: 9px;
    }


    /* ---------------------------------------------
       MOBILE NAV
       --------------------------------------------- */

    .main-nav {

        top: calc(100% + 6px);

        padding: 10px;

        border-radius: 14px;
    }


    .nav-item {

        min-height: 45px;

        font-size: 0.88rem;
    }
}


/* =========================================================
   23. SMALL MOBILE
   480px AND BELOW
   ========================================================= */

@media (max-width: 480px) {

    .header-inner {

        width: 94%;

        min-height: 58px;

        padding:
            0.3rem 0;

        gap: 0.4rem;
    }


    /* ---------------------------------------------
       SMALLER LOGO
       --------------------------------------------- */

    .logo-ring {

        width: 40px;
        height: 40px;
    }

    .logo-ring img {

        width: 34px;
        height: 34px;
    }


    /* ---------------------------------------------
       COMPANY NAME
       --------------------------------------------- */

    .brand {

        gap: 0.45rem;
    }

    .brand-name {

        font-size: 0.82rem;

        letter-spacing: 0;
    }


    /* ---------------------------------------------
       TAGLINE DEFINITELY HIDDEN
       --------------------------------------------- */

    .brand-tagline {

        display: none;
    }


    /* ---------------------------------------------
       PHONE AND APPLY DEFINITELY HIDDEN
       --------------------------------------------- */

    .header-contact {

        display: none !important;
    }


    /* ---------------------------------------------
       HAMBURGER
       --------------------------------------------- */

    .menu-toggle {

        width: 38px;
        height: 38px;

        font-size: 1.25rem;

        border-radius: 8px;
    }


    /* ---------------------------------------------
       MOBILE MENU
       --------------------------------------------- */

    .main-nav {

        top: calc(100% + 5px);

        padding: 8px;

        gap: 6px;

        border-radius: 12px;
    }


    .nav-item {

        min-height: 43px;

        padding:
            0.65rem
            0.85rem;

        font-size: 0.84rem;

        border-radius: 8px;
    }
}


/* =========================================================
   24. EXTRA SMALL MOBILE
   360px AND BELOW
   ========================================================= */

@media (max-width: 360px) {

    .header-inner {

        width: 95%;

        min-height: 55px;
    }


    .logo-ring {

        width: 36px;
        height: 36px;
    }


    .logo-ring img {

        width: 30px;
        height: 30px;
    }


    .brand-name {

        font-size: 0.76rem;
    }


    .menu-toggle {

        width: 36px;
        height: 36px;

        font-size: 1.15rem;
    }


    .main-nav {

        padding: 7px;
    }


    .nav-item {

        min-height: 41px;

        font-size: 0.81rem;

        padding:
            0.6rem
            0.75rem;
    }
}


/* =========================================================
   25. VERY SMALL DEVICES
   320px AND BELOW
   ========================================================= */

@media (max-width: 320px) {

    .header-inner {

        width: 96%;
    }


    .brand {

        gap: 0.3rem;
    }


    .brand-name {

        font-size: 0.72rem;
    }


    .logo-ring {

        width: 34px;
        height: 34px;
    }


    .logo-ring img {

        width: 28px;
        height: 28px;
    }


    .menu-toggle {

        width: 34px;
        height: 34px;

        font-size: 1.05rem;
    }
}




/* =========================================================
   26. ACCESSIBILITY
   ========================================================= */

.menu-toggle:focus-visible,
.nav-item:focus-visible,
.apply-btn:focus-visible,
.phone-link:focus-visible,
.brand:focus-visible {

    outline: 3px solid rgba(37, 99, 235, 0.35);

    outline-offset: 3px;
}


/* =========================================================
   27. REDUCE MOTION
   ========================================================= */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   FINAL MOBILE HEADER OVERRIDE
   This must be the LAST CSS in the file
   ========================================================= */

@media (max-width: 900px) {

    /* =====================================================
       HEADER
       ===================================================== */

    .site-header {
        position: sticky;
        top: 0;
        width: 100%;
        z-index: 1000;
    }


    /* =====================================================
       HEADER INNER
       ===================================================== */

    .site-header .header-inner {

        width: 94%;

        min-height: 64px;

        margin: 0 auto;

        padding: 8px 0;

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: space-between !important;

        gap: 8px;

        position: relative !important;
    }


    /* =====================================================
       BRAND
       LOGO + COMPANY NAME IN ONE ROW
       ===================================================== */

    .site-header .header-inner > .brand {

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: flex-start !important;

        gap: 8px;

        order: 1 !important;

        flex: 1 1 auto;

        min-width: 0;

        margin: 0;

        padding: 0;
    }


    /* =====================================================
       LOGO SECTION
       ===================================================== */

    .site-header .logo-section {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        flex-shrink: 0;
    }


    /* =====================================================
       LOGO RING
       ===================================================== */

    .site-header .logo-ring {

        width: 48px !important;

        height: 48px !important;

        position: relative;

        flex-shrink: 0;
    }


    .site-header .logo-ring img {

        width: 40px !important;

        height: 40px !important;

        object-fit: contain;
    }


    /* =====================================================
       COMPANY TEXT
       ===================================================== */

    .site-header .brand-text {

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        justify-content: center !important;

        min-width: 0;

        flex: 1;
    }


    .site-header .brand-name {

        display: block !important;

        font-size: 0.92rem !important;

        font-weight: 800;

        line-height: 1.2;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    /* =====================================================
       HIDE TAGLINE
       ===================================================== */

    .site-header .brand-tagline {

        display: none !important;
    }


    /* =====================================================
       HIDE PHONE + APPLY
       ===================================================== */

    .site-header .header-contact {

        display: none !important;
    }


    /* =====================================================
       HAMBURGER / X BUTTON
       ===================================================== */

    .site-header .menu-toggle {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        order: 2 !important;

        flex: 0 0 42px;

        width: 42px !important;

        height: 42px !important;

        margin: 0 !important;

        padding: 0 !important;

        border: none !important;

        border-radius: 10px !important;

        background:
            linear-gradient(
                135deg,
                #2563eb,
                #7c3aed
            ) !important;

        color: #ffffff !important;

        font-family: Arial, sans-serif;

        font-size: 27px !important;

        font-weight: 400 !important;

        line-height: 1 !important;

        text-align: center;

        cursor: pointer;

        box-shadow:
            0 7px 16px rgba(37, 99, 235, 0.25);

        position: relative;

        z-index: 1200;
    }


    /* =====================================================
       MOBILE NAVIGATION
       
       CRITICAL:
       The nav is removed from the flex row and positioned
       BELOW THE ENTIRE HEADER ROW.
       ===================================================== */

    .site-header .header-inner > .main-nav {

        display: none !important;

        position: absolute !important;

        top: 100% !important;

        left: 0 !important;

        right: auto !important;

        width: 100% !important;

        height: auto !important;

        margin: 0 !important;

        padding: 10px !important;

        flex-direction: column !important;

        align-items: stretch !important;

        justify-content: flex-start !important;

        gap: 7px !important;

        background:
            rgba(255, 255, 255, 0.98) !important;

        backdrop-filter: blur(14px);

        -webkit-backdrop-filter: blur(14px);

        border:
            1px solid rgba(37, 99, 235, 0.14);

        border-radius: 0 0 16px 16px;

        box-shadow:
            0 16px 35px rgba(16, 32, 51, 0.14);

        z-index: 1100;

        transform: none !important;

        float: none !important;
    }


    /* =====================================================
       SHOW MENU WHEN JAVASCRIPT ADDS .show
       ===================================================== */

    .site-header .header-inner > .main-nav.show {

        display: flex !important;
    }


    /* =====================================================
       NAVIGATION ITEMS
       ===================================================== */

    .site-header .main-nav .nav-item {

        display: flex !important;

        width: 100% !important;

        min-width: 100% !important;

        min-height: 46px !important;

        height: auto !important;

        margin: 0 !important;

        padding: 11px 16px !important;

        align-items: center !important;

        justify-content: flex-start !important;

        transform: none !important;

        border-radius: 10px !important;

        background: #edf4ff !important;

        border:
            1px solid rgba(37, 99, 235, 0.12) !important;

        color: #102033 !important;

        font-size: 0.9rem !important;

        font-weight: 700;

        box-shadow: none;
    }


    /* =====================================================
       NAVIGATION TEXT
       ===================================================== */

    .site-header .main-nav .nav-item span {

        display: block !important;

        width: 100% !important;

        transform: none !important;

        text-align: left !important;
    }


    /* =====================================================
       ACTIVE / HOVER
       ===================================================== */

    .site-header .main-nav .nav-item:hover,
    .site-header .main-nav .nav-item.active {

        transform: translateX(2px) !important;

        background: #dfeaff !important;

        color: #1746a2 !important;
    }


    /* =====================================================
       DECORATIVE LINES
       ===================================================== */

    .site-header .main-nav .nav-item::before {

        left: 10px !important;

        width: 40px !important;

        top: 5px !important;
    }


    .site-header .main-nav .nav-item::after {

        left: 10px !important;

        width: 40px !important;

        bottom: 5px !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .site-header .header-inner {

        width: 94%;

        min-height: 58px;

        padding: 6px 0;
    }


    .site-header .logo-ring {

        width: 42px !important;

        height: 42px !important;
    }


    .site-header .logo-ring img {

        width: 35px !important;

        height: 35px !important;
    }


    .site-header .brand {

        gap: 6px;
    }


    .site-header .brand-name {

        font-size: 0.82rem !important;
    }


    .site-header .menu-toggle {

        flex-basis: 38px;

        width: 38px !important;

        height: 38px !important;

        font-size: 25px !important;
    }


    .site-header .main-nav .nav-item {

        min-height: 43px !important;

        padding: 10px 14px !important;

        font-size: 0.86rem !important;
    }
}


/* =========================================================
   EXTRA SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .site-header .header-inner {

        width: 95%;
    }


    .site-header .logo-ring {

        width: 38px !important;

        height: 38px !important;
    }


    .site-header .logo-ring img {

        width: 32px !important;

        height: 32px !important;
    }


    .site-header .brand-name {

        font-size: 0.76rem !important;
    }


    .site-header .menu-toggle {

        flex-basis: 36px;

        width: 36px !important;

        height: 36px !important;

        font-size: 23px !important;
    }
}

/* =========================================================
   MOBILE MENU - ALL ITEMS IN ONE ROW
   ========================================================= */

@media (max-width: 900px) {

    /* -----------------------------------------------------
       MOBILE NAVIGATION CONTAINER
       ----------------------------------------------------- */

    .site-header .header-inner > .main-nav {

        display: none !important;

        position: absolute !important;

        top: 100% !important;

        left: 0 !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 8px 4px !important;

        flex-direction: row !important;

        align-items: stretch !important;

        justify-content: space-between !important;

        gap: 4px !important;

        background:
            rgba(255, 255, 255, 0.98) !important;

        backdrop-filter: blur(14px);

        -webkit-backdrop-filter: blur(14px);

        border:
            1px solid rgba(37, 99, 235, 0.12);

        border-radius: 0 0 14px 14px;

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

        z-index: 1100;

        overflow: hidden;
    }


    /* -----------------------------------------------------
       SHOW MENU
       ----------------------------------------------------- */

    .site-header .header-inner > .main-nav.show {

        display: flex !important;
    }


    /* -----------------------------------------------------
       ALL MENU ITEMS IN ONE HORIZONTAL ROW
       ----------------------------------------------------- */

    .site-header .main-nav .nav-item {

        display: flex !important;

        flex: 1 1 0 !important;

        width: auto !important;

        min-width: 0 !important;

        height: 42px !important;

        min-height: 42px !important;

        margin: 0 !important;

        padding: 5px 3px !important;

        align-items: center !important;

        justify-content: center !important;

        transform: skewX(-8deg) !important;

        border-radius: 5px !important;

        background: #edf4ff !important;

        border:
            1px solid rgba(37, 99, 235, 0.12) !important;

        font-size: 0.72rem !important;

        font-weight: 700 !important;

        white-space: nowrap !important;

        overflow: hidden;
    }


    /* -----------------------------------------------------
       MENU TEXT
       ----------------------------------------------------- */

    .site-header .main-nav .nav-item span {

        display: block !important;

        width: 100% !important;

        text-align: center !important;

        transform: skewX(8deg) !important;

        white-space: nowrap !important;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    /* -----------------------------------------------------
       HOVER / ACTIVE
       ----------------------------------------------------- */

    .site-header .main-nav .nav-item:hover,
    .site-header .main-nav .nav-item.active {

        transform:
            skewX(-8deg)
            translateY(-1px) !important;

        background: #dfeaff !important;

        color: #1746a2 !important;
    }


    /* -----------------------------------------------------
       DECORATIVE LINES
       ----------------------------------------------------- */

    .site-header .main-nav .nav-item::before,
    .site-header .main-nav .nav-item::after {

        left: 15% !important;

        width: 70% !important;

        height: 2px !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .site-header .header-inner > .main-nav {

        padding: 6px 3px !important;

        gap: 3px !important;
    }


    .site-header .main-nav .nav-item {

        height: 39px !important;

        min-height: 39px !important;

        padding: 4px 2px !important;

        font-size: 0.65rem !important;

        border-radius: 4px !important;
    }
}


/* =========================================================
   EXTRA SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .site-header .header-inner > .main-nav {

        padding: 5px 2px !important;

        gap: 2px !important;
    }


    .site-header .main-nav .nav-item {

        height: 36px !important;

        min-height: 36px !important;

        padding: 3px 1px !important;

        font-size: 0.58rem !important;
    }
}