.mobile-menu-offcanvas {
    --mobile-menu-primary: #2f6df6;
    --mobile-menu-primary-soft: #eef4ff;
    --mobile-menu-accent: #36c1ff;
    --mobile-menu-accent-soft: #f1fbff;
    --mobile-menu-warm: #fff6e8;
    --mobile-menu-border: #dbe7ff;
    --mobile-menu-text: #19325b;
    --mobile-menu-muted: #6c7ea0;
}

    .mobile-menu-offcanvas .mobile-menu-section--category {
        --section-accent: #2f6df6;
        --section-soft-1: #eef4ff;
        --section-soft-2: #f2fbff;
        --section-shadow: rgba(47, 109, 246, 0.12);
    }

    .mobile-menu-offcanvas .mobile-menu-section--location {
        --section-accent: #0ea5a4;
        --section-soft-1: #eafcf8;
        --section-soft-2: #effff9;
        --section-shadow: rgba(14, 165, 164, 0.12);
    }

    .mobile-menu-offcanvas .mobile-menu-section--news {
        --section-accent: #f97316;
        --section-soft-1: #fff5e9;
        --section-soft-2: #fffaf2;
        --section-shadow: rgba(249, 115, 22, 0.12);
    }

    .mobile-menu-offcanvas .mobile-menu-section--faq {
        --section-accent: #7c3aed;
        --section-soft-1: #f4eeff;
        --section-soft-2: #faf5ff;
        --section-shadow: rgba(124, 58, 237, 0.12);
    }

    .mobile-menu-offcanvas .mobile-menu-section--worktype {
        --section-accent: #2563eb;
        --section-soft-1: #edf5ff;
        --section-soft-2: #f3f9ff;
        --section-shadow: rgba(37, 99, 235, 0.12);
    }

    .mobile-menu-offcanvas .mobile-menu-section--salary {
        --section-accent: #0f9f6e;
        --section-soft-1: #ebfbf2;
        --section-soft-2: #f4fff9;
        --section-shadow: rgba(15, 159, 110, 0.12);
    }

    .mobile-menu-offcanvas .mobile-menu-section--experience {
        --section-accent: #f97316;
        --section-soft-1: #fff4ea;
        --section-soft-2: #fffaf4;
        --section-shadow: rgba(249, 115, 22, 0.12);
    }

    .mobile-menu-offcanvas .mobile-menu-section--education {
        --section-accent: #8b5cf6;
        --section-soft-1: #f4eeff;
        --section-soft-2: #faf6ff;
        --section-shadow: rgba(139, 92, 246, 0.12);
    }

    .mobile-menu-offcanvas .mobile-menu-section--level {
        --section-accent: #e11d48;
        --section-soft-1: #fff0f5;
        --section-soft-2: #fff7fa;
        --section-shadow: rgba(225, 29, 72, 0.12);
    }

    .mobile-menu-offcanvas .mobile-menu-shell {
        background: radial-gradient(circle at top left, rgba(54, 193, 255, 0.12), transparent 26%), linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    }

    .mobile-menu-offcanvas .mobile-menu-top {
        position: relative;
    }

        .mobile-menu-offcanvas .mobile-menu-top::after {
            content: "";
            position: absolute;
            inset: auto 0 -12px 0;
            /* height: 1px; */
            background: linear-gradient(90deg, rgba(47, 109, 246, 0.18), rgba(54, 193, 255, 0.38), rgba(47, 109, 246, 0.18));
        }

    .mobile-menu-offcanvas .mobile-menu-tagline {
        color: var(--mobile-menu-text);
    }

    .mobile-menu-offcanvas .mobile-menu-primary {
        gap: 5px;
    }

        .mobile-menu-offcanvas .mobile-menu-primary > a,
        .mobile-menu-offcanvas .mobile-menu-logout-btn {
            position: relative;
            border: 1px solid var(--mobile-menu-border);
            background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
            box-shadow: 0 10px 24px rgba(20, 60, 120, 0.06);
            transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
        }

            .mobile-menu-offcanvas .mobile-menu-primary > a:hover,
            .mobile-menu-offcanvas .mobile-menu-primary > a:focus-visible,
            .mobile-menu-offcanvas .mobile-menu-logout-btn:hover,
            .mobile-menu-offcanvas .mobile-menu-logout-btn:focus-visible {
                transform: translateY(-1px);
                border-color: rgba(47, 109, 246, 0.35);
                box-shadow: 0 14px 26px rgba(47, 109, 246, 0.12);
            }

            .mobile-menu-offcanvas .mobile-menu-primary > a i,
            .mobile-menu-offcanvas .mobile-menu-logout-btn i {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 32px;
                height: 32px;
                border-radius: 10px;
                background: linear-gradient(135deg, var(--mobile-menu-primary-soft), var(--mobile-menu-accent-soft));
                color: var(--mobile-menu-primary);
                box-shadow: inset 0 0 0 1px rgba(47, 109, 246, 0.08);
            }

            .mobile-menu-offcanvas .mobile-menu-primary > a:nth-child(2n) i,
            .mobile-menu-offcanvas .mobile-menu-primary > a:nth-child(5n) i {
                background: linear-gradient(135deg, #eefcff, #eff4ff);
                color: #1f88d4;
            }

            .mobile-menu-offcanvas .mobile-menu-primary > a span,
            .mobile-menu-offcanvas .mobile-menu-logout-btn span {
                color: var(--mobile-menu-text);
            }

    .mobile-menu-offcanvas .mobile-menu-section {
        /* border-bottom: 1px solid rgba(219, 231, 255, 0.85); */
    }

    .mobile-menu-offcanvas .mobile-menu-section-heading {
        color: var(--mobile-menu-text);
    }

    .mobile-menu-offcanvas .mobile-menu-section-heading__label {
        gap: 12px;
    }

        .mobile-menu-offcanvas .mobile-menu-section-heading__label > i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 999px;
            background: linear-gradient(135deg, var(--mobile-menu-primary-soft), var(--mobile-menu-accent-soft));
            color: var(--mobile-menu-primary);
            box-shadow: inset 0 0 0 1px rgba(47, 109, 246, 0.08);
        }

    .mobile-menu-offcanvas .mobile-menu-section--category .mobile-menu-section-heading__label > i,
    .mobile-menu-offcanvas .mobile-menu-section--location .mobile-menu-section-heading__label > i,
    .mobile-menu-offcanvas .mobile-menu-section--worktype .mobile-menu-section-heading__label > i,
    .mobile-menu-offcanvas .mobile-menu-section--salary .mobile-menu-section-heading__label > i,
    .mobile-menu-offcanvas .mobile-menu-section--experience .mobile-menu-section-heading__label > i,
    .mobile-menu-offcanvas .mobile-menu-section--education .mobile-menu-section-heading__label > i,
    .mobile-menu-offcanvas .mobile-menu-section--level .mobile-menu-section-heading__label > i,
    .mobile-menu-offcanvas .mobile-menu-section--news .mobile-menu-section-heading__label > i,
    .mobile-menu-offcanvas .mobile-menu-section--faq .mobile-menu-section-heading__label > i {
        background: linear-gradient(135deg, var(--section-soft-1), var(--section-soft-2));
        color: var(--section-accent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--section-accent) 12%, white);
    }

    .mobile-menu-offcanvas .mobile-menu-section--category .mobile-menu-section-heading,
    .mobile-menu-offcanvas .mobile-menu-section--location .mobile-menu-section-heading,
    .mobile-menu-offcanvas .mobile-menu-section--worktype .mobile-menu-section-heading,
    .mobile-menu-offcanvas .mobile-menu-section--salary .mobile-menu-section-heading,
    .mobile-menu-offcanvas .mobile-menu-section--experience .mobile-menu-section-heading,
    .mobile-menu-offcanvas .mobile-menu-section--education .mobile-menu-section-heading,
    .mobile-menu-offcanvas .mobile-menu-section--level .mobile-menu-section-heading,
    .mobile-menu-offcanvas .mobile-menu-section--news .mobile-menu-section-heading,
    .mobile-menu-offcanvas .mobile-menu-section--faq .mobile-menu-section-heading {
        color: color-mix(in srgb, var(--section-accent) 58%, #19325b);
    }

    .mobile-menu-offcanvas .mobile-menu-section-toggle > .fa-chevron-down {
        color: var(--mobile-menu-muted);
    }

    .mobile-menu-offcanvas .mobile-category-group {
        margin-bottom: 0;
        padding: 0;
        border: none;
        border-radius: 6px;
        background: transparent;
        /* box-shadow: 0 10px 24px rgba(17, 46, 94, 0.05); */
    }

    .mobile-menu-offcanvas .mobile-category-group__title {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0 12px;
        border-radius: 999px;
        background: linear-gradient(135deg, #eef4ff, #f4fbff);
        color: #2354aa;
        font-size: 13px;
    }

    .mobile-menu-offcanvas .mobile-menu-section--category .mobile-category-group__title,
    .mobile-menu-offcanvas .mobile-menu-section--location .mobile-menu-link-grid a,
    .mobile-menu-offcanvas .mobile-menu-section--worktype .mobile-menu-link-grid a,
    .mobile-menu-offcanvas .mobile-menu-section--salary .mobile-menu-link-grid a,
    .mobile-menu-offcanvas .mobile-menu-section--experience .mobile-menu-link-grid a,
    .mobile-menu-offcanvas .mobile-menu-section--education .mobile-menu-link-grid a,
    .mobile-menu-offcanvas .mobile-menu-section--level .mobile-menu-link-grid a,
    .mobile-menu-offcanvas .mobile-menu-section--news .mobile-category-item,
    .mobile-menu-offcanvas .mobile-menu-section--faq .mobile-menu-link-grid a {
        border-color: color-mix(in srgb, var(--section-accent) 16%, #dbe7ff);
    }

    .mobile-menu-offcanvas .mobile-category-card,
    .mobile-menu-offcanvas .mobile-menu-link-grid a {
        border-color: rgba(219, 231, 255, 0.92);
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        /* box-shadow: 0 8px 20px rgba(21, 52, 104, 0.04); */
    }

        .mobile-menu-offcanvas .mobile-menu-link-grid a:hover,
        .mobile-menu-offcanvas .mobile-menu-link-grid a:focus-visible,
        .mobile-menu-offcanvas .mobile-category-card:hover {
            border-color: rgba(47, 109, 246, 0.32);
            box-shadow: 0 12px 26px rgba(47, 109, 246, 0.09);
        }

    .mobile-menu-offcanvas .mobile-menu-section--location .mobile-menu-link-grid a,
    .mobile-menu-offcanvas .mobile-menu-section--worktype .mobile-menu-link-grid a,
    .mobile-menu-offcanvas .mobile-menu-section--salary .mobile-menu-link-grid a,
    .mobile-menu-offcanvas .mobile-menu-section--experience .mobile-menu-link-grid a,
    .mobile-menu-offcanvas .mobile-menu-section--education .mobile-menu-link-grid a,
    .mobile-menu-offcanvas .mobile-menu-section--level .mobile-menu-link-grid a,
    .mobile-menu-offcanvas .mobile-menu-section--faq .mobile-menu-link-grid a {
        /* background: linear-gradient(180deg, #ffffff 0%, var(--section-soft-2) 100%); */
        /* box-shadow: 0 8px 20px var(--section-shadow); */
    }

        .mobile-menu-offcanvas .mobile-menu-section--location .mobile-menu-link-grid a:hover,
        .mobile-menu-offcanvas .mobile-menu-section--location .mobile-menu-link-grid a:focus-visible,
        .mobile-menu-offcanvas .mobile-menu-section--worktype .mobile-menu-link-grid a:hover,
        .mobile-menu-offcanvas .mobile-menu-section--worktype .mobile-menu-link-grid a:focus-visible,
        .mobile-menu-offcanvas .mobile-menu-section--salary .mobile-menu-link-grid a:hover,
        .mobile-menu-offcanvas .mobile-menu-section--salary .mobile-menu-link-grid a:focus-visible,
        .mobile-menu-offcanvas .mobile-menu-section--experience .mobile-menu-link-grid a:hover,
        .mobile-menu-offcanvas .mobile-menu-section--experience .mobile-menu-link-grid a:focus-visible,
        .mobile-menu-offcanvas .mobile-menu-section--education .mobile-menu-link-grid a:hover,
        .mobile-menu-offcanvas .mobile-menu-section--education .mobile-menu-link-grid a:focus-visible,
        .mobile-menu-offcanvas .mobile-menu-section--level .mobile-menu-link-grid a:hover,
        .mobile-menu-offcanvas .mobile-menu-section--level .mobile-menu-link-grid a:focus-visible,
        .mobile-menu-offcanvas .mobile-menu-section--faq .mobile-menu-link-grid a:hover,
        .mobile-menu-offcanvas .mobile-menu-section--faq .mobile-menu-link-grid a:focus-visible {
            border-color: color-mix(in srgb, var(--section-accent) 34%, white);
            box-shadow: 0 12px 24px var(--section-shadow);
        }

    .mobile-menu-offcanvas .mobile-menu-section--news .mobile-category-item {
        border-radius: 6px;
        background: linear-gradient(180deg, #ffffff 0%, var(--section-soft-2) 100%);
        /* box-shadow: 0 8px 20px var(--section-shadow); */
    }

    .mobile-menu-offcanvas .mobile-menu-section--news .mobile-category-parent-link,
    .mobile-menu-offcanvas .mobile-menu-section--worktype .mobile-menu-link-grid a,
    .mobile-menu-offcanvas .mobile-menu-section--salary .mobile-menu-link-grid a,
    .mobile-menu-offcanvas .mobile-menu-section--experience .mobile-menu-link-grid a,
    .mobile-menu-offcanvas .mobile-menu-section--education .mobile-menu-link-grid a,
    .mobile-menu-offcanvas .mobile-menu-section--level .mobile-menu-link-grid a,
    .mobile-menu-offcanvas .mobile-menu-section--faq .mobile-menu-link-grid a {
        /* color: color-mix(in srgb, var(--section-accent) 62%, #19325b); */
    }

    .mobile-menu-offcanvas .mobile-menu-section--faq .mobile-menu-link-grid a {
        position: relative;
        overflow: hidden;
    }

        .mobile-menu-offcanvas .mobile-menu-section--faq .mobile-menu-link-grid a::before {
            content: "";
            position: absolute;
            inset: 0 auto 0 0;
            width: 4px;
            border-radius: 4px 0 0 4px;
            background: linear-gradient(180deg, var(--section-accent), color-mix(in srgb, var(--section-accent) 65%, white));
        }

    .mobile-menu-offcanvas .mobile-menu-section-link {
        margin-top: 12px;
        border-radius: 14px;
        background: linear-gradient(135deg, var(--mobile-menu-primary), #4f86ff);
        box-shadow: 0 14px 28px rgba(47, 109, 246, 0.18);
    }

        .mobile-menu-offcanvas .mobile-menu-section-link span,
        .mobile-menu-offcanvas .mobile-menu-section-link i {
            color: #fff;
        }

    .mobile-menu-offcanvas .mobile-contact-card {
        margin-top: 18px;
        padding: 18px 16px 14px;
        border-top: 1px solid rgba(219, 231, 255, 0.92);
        background: radial-gradient(circle at top right, rgba(54, 193, 255, 0.16), transparent 34%), linear-gradient(180deg, #f9fbff 0%, #f3f8ff 100%);
    }

    .mobile-menu-offcanvas .mobile-contact-row {
        color: var(--mobile-menu-text);
    }

        .mobile-menu-offcanvas .mobile-contact-row i:first-child {
            color: var(--mobile-menu-primary);
        }

.mobile-contact-socials {
    display: flex;
    align-items: center;
    gap: 14px;
    grid-template-columns: none;
    margin-top: 8px;
}

    .mobile-contact-socials a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 999px;
        border: 1px solid rgba(47, 109, 246, 0.14);
        background: linear-gradient(135deg, #ffffff, #eef6ff);
        color: var(--mobile-menu-primary);
        text-decoration: none;
        box-shadow: 0 10px 20px rgba(20, 60, 120, 0.08);
    }

        .mobile-contact-socials a i {
            width: auto;
            font-size: 20px;
            line-height: 1;
        }

        .mobile-contact-socials a img {
            width: 20px;
            height: 20px;
            object-fit: contain;
            display: block;
        }

        .mobile-contact-socials a:hover,
        .mobile-contact-socials a:focus-visible {
            transform: translateY(-1px);
            border-color: rgba(47, 109, 246, 0.28);
            box-shadow: 0 14px 26px rgba(47, 109, 246, 0.14);
        }

.mobile-menu-link-grid--single {
    grid-template-columns: 1fr;
}