/* ==========================================================================
   NexLock — Light Design System
   Gold + Black brand (light mode) derived from the logo
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/space-grotesk-latin-600-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2");
}

:root {
    --nl-gold: #C6900F;
    --nl-gold-bright: #E6B02A;
    --nl-gold-deep: #9A7209;
    --nl-gold-ink: #8A6408; /* gold text on white */
    --nl-gold-soft: rgba(214, 160, 23, .12);
    --nl-gold-soft2: rgba(214, 160, 23, .20);
    --nl-ink: #17171B; /* dark sections / headings */
    --nl-charcoal: #1E1E25;
    --nl-ink2: #2A2A32;
    --nl-bg: #FFFFFF;
    --nl-bg-alt: #F6F5F1; /* subtle warm-neutral band */
    --nl-line: #E8E6E0;
    --nl-line-d: rgba(255, 255, 255, .10);
    --nl-text: #1B1B21;
    --nl-muted: #5C5C66;
    --nl-muted2: #8C8C95;
    --nl-radius: 18px;
    --nl-radius-sm: 12px;
    --nl-shadow: 0 18px 44px -20px rgba(20,20,28,.22);
    --nl-shadow-lg: 0 30px 70px -28px rgba(20,20,28,.30);
    --nl-shadow-gold: 0 16px 40px -14px rgba(198,144,15,.45);
    --nl-grad-gold: linear-gradient(135deg, var(--nl-gold-bright) 0%, var(--nl-gold) 50%, var(--nl-gold-deep) 100%);
    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
}

* {
    scroll-behavior: smooth;
}

html, body {
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    color: var(--nl-text);
    background: var(--nl-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .display-font {
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--nl-ink);
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

::selection {
    background: var(--nl-gold);
    color: #fff;
}

/* ---------- Utilities ---------- */
.text-gold {
    color: var(--nl-gold-ink) !important;
}

.text-muted-nl {
    color: var(--nl-muted) !important;
}

.bg-alt {
    background: var(--nl-bg-alt);
}

.gold-text {
    background: linear-gradient(135deg, var(--nl-gold-bright), var(--nl-gold) 55%, var(--nl-gold-deep));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.eyebrow {
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--nl-gold-ink);
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

    .eyebrow::before {
        content: "";
        width: 26px;
        height: 2px;
        background: var(--nl-grad-gold);
        display: inline-block;
    }

.section {
    padding: 100px 0;
}

.section-tight {
    padding: 64px 0;
}

.lead-nl {
    color: var(--nl-muted);
    font-size: 1.1rem;
}

/* ---------- Buttons ---------- */
.btn {
    /*    font-family: var(--font-display);*/
    font-weight: 600;
    border-radius: 999px;
    padding: .72rem 1.6rem;
    transition: transform .18s ease, box-shadow .25s ease, background .25s ease, color .2s ease;
}

    .btn:active {
        transform: translateY(1px);
    }

.btn-gold {
    background: var(--nl-grad-gold);
    color: #1c1405;
    border: none;
    box-shadow: var(--nl-shadow-gold);
}

    .btn-gold:hover {
        color: #1c1405;
        transform: translateY(-2px);
        box-shadow: 0 20px 48px -14px rgba(198,144,15,.6);
    }

.btn-dark {
    background: var(--nl-ink);
    color: #fff;
    border: none;
}

    .btn-dark:hover {
        background: #000;
        color: #fff;
        transform: translateY(-2px);
        box-shadow: var(--nl-shadow);
    }

.btn-outline-dark {
    border: 1.5px solid var(--nl-ink);
    color: var(--nl-ink);
    background: transparent;
}

    .btn-outline-dark:hover {
        background: var(--nl-ink);
        color: #fff;
        transform: translateY(-2px);
    }

.btn-outline-gold {
    border: 1.5px solid var(--nl-gold);
    color: var(--nl-gold-ink);
    background: transparent;
}

    .btn-outline-gold:hover {
        background: var(--nl-gold-soft);
        color: var(--nl-gold-ink);
        transform: translateY(-2px);
    }

.btn-outline-light {
    border: 1.5px solid rgba(255,255,255,.35);
    color: #fff;
    background: transparent;
}

    .btn-outline-light:hover {
        background: rgba(255,255,255,.08);
        color: #fff;
        transform: translateY(-2px);
    }

/* ---------- Navbar ---------- */
.nl-navbar {
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--nl-line);
    transition: background .3s, box-shadow .3s;
    padding: .55rem 0;
}

    .nl-navbar.scrolled {
        background: rgba(255,255,255,.96);
        box-shadow: 0 8px 26px -14px rgba(20,20,28,.18);
    }

.nl-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
}

    .nl-brand img {
        /*height:42px; width:auto; */
        width: 260px;
    }

    .nl-brand .word {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.42rem;
        letter-spacing: -.02em;
        line-height: 1;
    }

        .nl-brand .word .nex {
            color: var(--nl-gold-ink);
        }

        .nl-brand .word .lock {
            color: var(--nl-ink);
        }

.nl-navbar .nav-link {
    color: var(--nl-text);
    font-weight: 500;
    padding: .5rem 1rem !important;
    position: relative;
    opacity: .9;
}

    .nl-navbar .nav-link:hover, .nl-navbar .nav-link.active {
        color: var(--nl-ink);
        opacity: 1;
    }

    .nl-navbar .nav-link::after {
        content: "";
        position: absolute;
        left: 1rem;
        right: 1rem;
        bottom: .12rem;
        height: 2px;
        background: var(--nl-grad-gold);
        border-radius: 2px;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .3s cubic-bezier(.22,.61,.36,1);
    }

    .nl-navbar .nav-link:hover::after, .nl-navbar .nav-link.active::after {
        transform: scaleX(1);
    }

.navbar-toggler {
    border-color: var(--nl-line);
}

    .navbar-toggler:focus {
        box-shadow: 0 0 0 .2rem var(--nl-gold-soft);
    }

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23C6900F' stroke-linecap='round' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    padding: 160px 0 100px;
    overflow: hidden;
    background: radial-gradient(760px 420px at 82% 6%, rgba(214,160,23,.16), transparent 62%), radial-gradient(620px 380px at 4% 96%, rgba(214,160,23,.08), transparent 62%), var(--nl-bg);
}

    .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: linear-gradient(rgba(20,20,28,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20,20,28,.05) 1px, transparent 1px);
        background-size: 46px 46px;
        mask-image: radial-gradient(640px 420px at 72% 34%, #000, transparent 76%);
        -webkit-mask-image: radial-gradient(640px 420px at 72% 34%, #000, transparent 76%);
        opacity: .7;
    }

    .hero .container {
        position: relative;
        z-index: 2;
    }

    .hero h1 {
        font-size: clamp(2.5rem, 5.4vw, 4.1rem);
        line-height: 1.04;
    }

    .hero .lead-nl {
        max-width: 34rem;
    }

.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--nl-gold-soft);
    border: 1px solid var(--nl-gold-soft2);
    color: var(--nl-gold-ink);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .82rem;
    padding: .4rem .9rem;
    border-radius: 999px;
}

    .badge-pill .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--nl-gold);
        box-shadow: 0 0 0 4px rgba(214,160,23,.18);
        animation: pulse 2s infinite;
    }

@keyframes pulse {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: .4
    }
}

.hero-mini {
    color: var(--nl-muted);
}

    .hero-mini i {
        color: var(--nl-gold-ink);
    }

/* Phone mockup (dark device on light bg) */
.phone-wrap {
    position: relative;
    display: flex;
    justify-content: center;
}

.phone-glow {
    position: absolute;
    inset: -10% -8%;
    background: radial-gradient(closest-side, rgba(214,160,23,.34), transparent 72%);
    filter: blur(14px);
    z-index: 0;
}

.phone {
    position: relative;
    z-index: 1;
    width: 264px;
    max-width: 78vw;
    background: linear-gradient(160deg,#23232b,#0d0d10);
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 40px;
    padding: 14px;
    box-shadow: var(--nl-shadow-lg);
}

.phone-screen {
    background: radial-gradient(120% 90% at 50% 0%, #1c1c22, #0b0b0e);
    border-radius: 28px;
    height: 490px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 22px;
    position: relative;
    overflow: hidden;
}

.phone-notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 92px;
    height: 20px;
    background: #000;
    border-radius: 12px;
}

.phone-emi {
    position: absolute;
    top: 46px;
    left: 0;
    right: 0;
    padding: 0 22px;
}

    .phone-emi .row-line {
        display: flex;
        justify-content: space-between;
        font-size: .74rem;
        color: #9a9aa3;
        padding: 7px 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

        .phone-emi .row-line b {
            color: #efeef0;
        }

.phone-lock-icon {
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(214,160,23,.14);
    border: 1px solid rgba(214,160,23,.4);
    margin-bottom: 20px;
}

    .phone-lock-icon i {
        font-size: 2.4rem;
        color: var(--nl-gold-bright);
    }

.phone-screen h6 {
    font-family: var(--font-display);
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 6px;
}

.phone-screen p {
    color: #9a9aa3;
    font-size: .84rem;
    margin-bottom: 22px;
}

.phone-btn {
    width: 100%;
    background: var(--nl-grad-gold);
    color: #1c1405;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .85rem;
    border: none;
    border-radius: 12px;
    padding: .7rem;
}

/* ---------- Marquee / trusted ---------- */
.trusted {
    border-top: 1px solid var(--nl-line);
    border-bottom: 1px solid var(--nl-line);
    background: var(--nl-bg);
}

    .trusted .lbl {
        color: var(--nl-muted2);
        font-family: var(--font-display);
        font-size: .8rem;
        letter-spacing: .16em;
        text-transform: uppercase;
    }

.brand-chip {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: #B3B3BB;
    letter-spacing: -.01em;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    opacity: .9;
}

    .brand-chip i {
        color: #C9C9D0;
    }

/* ---------- Stats ---------- */
.statbar {
    background: var(--nl-ink);
}

    .statbar .stat {
        text-align: center;
        padding: 34px 10px;
    }

    .statbar .num {
        font-family: inherit;
        font-weight: 700;
        font-size: clamp(1.9rem,3.6vw,1.6rem);
    }

    .statbar .lbl {
        color: #a7a7b0;
        font-size: .9rem;
        margin-top: 4px;
    }

    .statbar .stat + .stat {
        border-left: 1px solid var(--nl-line-d);
    }

@media (max-width:767.98px) {
    .statbar .stat + .stat {
        border-left: none;
        border-top: 1px solid var(--nl-line-d);
    }
}

/* ---------- Cards ---------- */
.feature-card {
    background: var(--nl-bg);
    border: 1px solid var(--nl-line);
    border-radius: var(--nl-radius);
    padding: 30px 26px;
    height: 100%;
    transition: transform .25s, border-color .25s, box-shadow .25s;
}

    .feature-card:hover {
        transform: translateY(-6px);
        border-color: var(--nl-gold-soft2);
        box-shadow: var(--nl-shadow);
    }

.feature-ic {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    background: var(--nl-gold-soft);
    border: 1px solid var(--nl-gold-soft2);
}

    .feature-ic i {
        font-size: 1.5rem;
        color: var(--nl-gold-ink);
    }

.feature-card h5 {
    color: var(--nl-ink);
    font-size: 1.12rem;
    margin-bottom: 8px;
}

.feature-card p {
    color: var(--nl-muted);
    font-size: .94rem;
    margin: 0;
}

/* ---------- Steps ---------- */
.step {
    position: relative;
    padding: 28px 24px;
    border: 1px solid var(--nl-line);
    border-radius: var(--nl-radius);
    height: 100%;
    background: var(--nl-bg);
}

    .step .step-no {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 2.6rem;
        line-height: 1;
        -webkit-text-stroke: 1.4px var(--nl-gold);
        color: transparent;
    }

    .step h5 {
        color: var(--nl-ink);
        margin: 14px 0 8px;
        font-size: 1.08rem;
    }

    .step p {
        color: var(--nl-muted);
        font-size: .93rem;
        margin: 0;
    }

/* ---------- Solutions / audience ---------- */
.solution-card {
    border: 1px solid var(--nl-line);
    border-radius: var(--nl-radius);
    overflow: hidden;
    height: 100%;
    background: var(--nl-bg);
    transition: transform .25s, box-shadow .25s;
}

    .solution-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--nl-shadow);
    }

    .solution-card .top {
        padding: 26px;
        background: var(--nl-bg-alt);
        border-bottom: 1px solid var(--nl-line);
    }

        .solution-card .top i {
            font-size: 1.8rem;
            color: var(--nl-gold-ink);
        }

    .solution-card .body {
        padding: 24px 26px;
    }

    .solution-card h5 {
        color: var(--nl-ink);
        margin-bottom: 8px;
    }

    .solution-card p {
        color: var(--nl-muted);
        font-size: .94rem;
    }

.mini-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}

    .mini-list li {
        color: var(--nl-muted);
        font-size: .9rem;
        padding: 5px 0 5px 24px;
        position: relative;
    }

        .mini-list li::before {
            content: "\F26E";
            font-family: "bootstrap-icons";
            position: absolute;
            left: 0;
            color: var(--nl-gold-ink);
        }

/* ---------- Check items ---------- */
.check-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
}

    .check-item i {
        color: var(--nl-gold-ink);
        margin-top: 3px;
    }

    .check-item span {
        color: var(--nl-text);
    }

.value-card {
    background: var(--nl-bg);
    border: 1px solid var(--nl-line);
    border-radius: var(--nl-radius);
    padding: 24px;
    height: 100%;
    box-shadow: var(--nl-shadow);
}

/* ---------- Dark section (brand black band) ---------- */
.section.dark, .band-dark {
    background: var(--nl-ink);
    color: #e9e9ee;
    position: relative;
}

    .section.dark h1, .section.dark h2, .section.dark h3, .section.dark h4, .section.dark h5,
    .band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4, .band-dark h5 {
        color: #fff;
    }

    .section.dark .text-muted-nl, .band-dark .text-muted-nl {
        color: #a9a9b3 !important;
    }

    .section.dark .eyebrow, .band-dark .eyebrow {
        color: var(--nl-gold-bright);
    }

    .section.dark .feature-card, .band-dark .feature-card {
        background: var(--nl-charcoal);
        border-color: var(--nl-line-d);
    }

        .section.dark .feature-card h5, .band-dark .feature-card h5 {
            color: #fff;
        }

        .section.dark .feature-card p, .band-dark .feature-card p {
            color: #a9a9b3;
        }

    .section.dark .feature-ic, .band-dark .feature-ic {
        background: rgba(214,160,23,.14);
        border-color: rgba(214,160,23,.3);
    }

        .section.dark .feature-ic i, .band-dark .feature-ic i {
            color: var(--nl-gold-bright);
        }

/* Platform preview (dashboard mock) */
.dash {
    background: var(--nl-charcoal);
    border: 1px solid var(--nl-line-d);
    border-radius: var(--nl-radius);
    box-shadow: var(--nl-shadow-lg);
    overflow: hidden;
}

.dash-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--nl-line-d);
    background: rgba(255,255,255,.02);
}

.dash-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.dash-body {
    padding: 22px;
}

.dash-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid var(--nl-line-d);
    border-radius: 12px;
    margin-bottom: 12px;
    background: rgba(255,255,255,.02);
}

    .dash-row:last-child {
        margin-bottom: 0;
    }

.dash-dev {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #e9e9ee;
    font-size: .92rem;
}

    .dash-dev .ic {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        background: rgba(214,160,23,.14);
        color: var(--nl-gold-bright);
    }

.pill {
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 600;
    padding: .25rem .7rem;
    border-radius: 999px;
}

    .pill.locked {
        background: rgba(214,160,23,.16);
        color: var(--nl-gold-bright);
        border: 1px solid rgba(214,160,23,.35);
    }

    .pill.active {
        background: rgba(80,200,120,.14);
        color: #7ee0a3;
        border: 1px solid rgba(80,200,120,.3);
    }

    .pill.due {
        background: rgba(255,120,120,.12);
        color: #ff9d9d;
        border: 1px solid rgba(255,120,120,.28);
    }

.dash-side {
    background: rgba(255,255,255,.02);
    border: 1px solid var(--nl-line-d);
    border-radius: 12px;
    padding: 18px;
    height: 100%;
}

.dash-metric {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.9rem;
    color: #fff;
}

    .dash-metric .up {
        color: #7ee0a3;
        font-size: .9rem;
    }

.dash-bar {
    height: 8px;
    border-radius: 6px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
    margin-top: 6px;
}

    .dash-bar > span {
        display: block;
        height: 100%;
        background: var(--nl-grad-gold);
    }

/* ---------- Security badges ---------- */
.sec-badge {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border: 1px solid var(--nl-line-d);
    border-radius: var(--nl-radius-sm);
    background: rgba(255,255,255,.02);
    height: 100%;
}

    .sec-badge .ic {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: rgba(214,160,23,.14);
        color: var(--nl-gold-bright);
        flex: 0 0 auto;
    }

    .sec-badge h6 {
        color: #fff;
        margin-bottom: 4px;
    }

    .sec-badge p {
        color: #a9a9b3;
        font-size: .9rem;
        margin: 0;
    }

/* ---------- Comparison table ---------- */
.compare {
    border: 1px solid var(--nl-line);
    border-radius: var(--nl-radius);
    overflow: hidden;
    background: var(--nl-bg);
    box-shadow: var(--nl-shadow);
}

    .compare table {
        width: 100%;
        border-collapse: collapse;
    }

    .compare th, .compare td {
        padding: 16px 20px;
        text-align: left;
        border-bottom: 1px solid var(--nl-line);
        font-size: .95rem;
    }

    .compare thead th {
        font-family: var(--font-display);
        background: var(--nl-bg-alt);
        color: var(--nl-ink);
    }

        .compare thead th.nl-col {
            color: var(--nl-gold-ink);
        }

    .compare tbody td {
        color: var(--nl-muted);
    }

        .compare tbody td:first-child {
            color: var(--nl-text);
            font-weight: 500;
        }

    .compare .yes {
        color: #1a9e5b;
        font-weight: 600;
    }

    .compare .no {
        color: #c0392b;
    }

    .compare tr:last-child td {
        border-bottom: none;
    }

    .compare .nl-col {
        background: rgba(214,160,23,.06);
    }

/* ---------- Testimonials ---------- */
.quote-card {
    background: var(--nl-bg);
    border: 1px solid var(--nl-line);
    border-radius: var(--nl-radius);
    padding: 28px;
    height: 100%;
    box-shadow: var(--nl-shadow);
}

    .quote-card .stars {
        color: var(--nl-gold);
        margin-bottom: 12px;
    }

    .quote-card p {
        color: var(--nl-text);
        font-size: 1.02rem;
        line-height: 1.6;
    }

.quote-who {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    color: #1c1405;
    background: var(--nl-grad-gold);
    flex: 0 0 auto;
}

.quote-who .nm {
    font-weight: 600;
    color: var(--nl-ink);
    font-size: .95rem;
}

.quote-who .rl {
    color: var(--nl-muted2);
    font-size: .82rem;
}

/* ---------- Pricing ---------- */
.price-card {
    background: var(--nl-bg);
    border: 1px solid var(--nl-line);
    border-radius: var(--nl-radius);
    padding: 30px 26px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .25s, box-shadow .25s;
}

    .price-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--nl-shadow);
    }

    .price-card.featured {
        border-color: var(--nl-gold);
        box-shadow: var(--nl-shadow-gold);
        position: relative;
    }

        .price-card.featured::before {
            content: "Most popular";
            position: absolute;
            top: -13px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--nl-grad-gold);
            color: #1c1405;
            font-family: var(--font-display);
            font-weight: 600;
            font-size: .72rem;
            padding: .3rem .9rem;
            border-radius: 999px;
            white-space: nowrap;
        }

    .price-card .plan {
        font-family: var(--font-display);
        font-weight: 600;
        color: var(--nl-gold-ink);
        letter-spacing: .04em;
        text-transform: uppercase;
        font-size: .82rem;
    }

    .price-card .amt {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 2.6rem;
        color: var(--nl-ink);
        margin: 8px 0 2px;
    }

        .price-card .amt small {
            font-size: .9rem;
            font-weight: 500;
            color: var(--nl-muted);
        }

    .price-card .desc {
        color: var(--nl-muted);
        font-size: .92rem;
        margin-bottom: 18px;
    }

.price-list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    flex: 1;
}

    .price-list li {
        color: var(--nl-text);
        font-size: .93rem;
        padding: 8px 0 8px 26px;
        position: relative;
    }

        .price-list li::before {
            content: "\F26A";
            font-family: "bootstrap-icons";
            position: absolute;
            left: 0;
            color: var(--nl-gold-ink);
        }

/* ---------- FAQ (accordion) ---------- */
.accordion-item {
    background: var(--nl-bg);
    border: 1px solid var(--nl-line) !important;
    border-radius: var(--nl-radius-sm) !important;
    margin-bottom: 14px;
    overflow: hidden;
}

.accordion-button {
    /*    font-family: var(--font-display);*/
    font-weight: 600;
    color: var(--nl-ink);
    background: var(--nl-bg);
    padding: 1.1rem 1.25rem;
}

    .accordion-button:not(.collapsed) {
        color: var(--nl-gold-ink);
        background: var(--nl-gold-soft);
        box-shadow: none;
    }

    .accordion-button:focus {
        box-shadow: 0 0 0 .18rem var(--nl-gold-soft);
        border-color: var(--nl-gold);
    }

    .accordion-button::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%23C6900F' stroke-linecap='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }

.accordion-body {
    color: var(--nl-muted);
    font-size: .96rem;
}

/* ---------- CTA band ---------- */
.cta-band {
    background: radial-gradient(600px 260px at 18% 0%, rgba(214,160,23,.26), transparent 60%), linear-gradient(120deg, var(--nl-ink2), var(--nl-ink));
    border-radius: 24px;
    padding: 60px 44px;
    text-align: center;
    color: #fff;
    box-shadow: var(--nl-shadow-lg);
}

    .cta-band h2 {
        color: #fff;
        font-size: clamp(1.9rem,4vw,2.9rem);
    }

    .cta-band p {
        color: #b8b8c1;
    }

/* ---------- Page header ---------- */
.page-head {
    padding: 70px 0px 54px 74px;
    text-align: center;
    border-bottom: 1px solid var(--nl-line);
    background: black;
    margin-top: 4rem;
}

    .page-head h1 {
        font-size: clamp(2.3rem,5vw,3.6rem);
        color: #fff;
    }

    .page-head p {
        color: #ffffff;
        max-width: 40rem;
        margin: 14px auto 0;
    }

.breadcrumb-nl {
    font-size: .85rem;
    color: #f1f1ff;
}

    .breadcrumb-nl a {
        color: #e7ac1c;
    }

/* ---------- About ---------- */
.about-frame {
    border-radius: var(--nl-radius);
    border: 1px solid var(--nl-line);
    background: var(--nl-bg-alt);
    box-shadow: var(--nl-shadow);
}

.mission-box {
    background: var(--nl-bg);
    border: 1px solid var(--nl-line);
    border-left: 3px solid var(--nl-gold);
    border-radius: var(--nl-radius);
    padding: 26px;
    box-shadow: var(--nl-shadow);
}

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

    .timeline li {
        position: relative;
        padding: 0 0 26px 30px;
        border-left: 2px solid var(--nl-line);
    }

        .timeline li:last-child {
            border-left-color: transparent;
            padding-bottom: 0;
        }

        .timeline li::before {
            content: "";
            position: absolute;
            left: -7px;
            top: 3px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--nl-grad-gold);
        }

    .timeline .yr {
        font-family: var(--font-display);
        color: var(--nl-gold-ink);
        font-weight: 600;
        font-size: .9rem;
    }

.team-card {
    text-align: center;
    background: var(--nl-bg);
    border: 1px solid var(--nl-line);
    border-radius: var(--nl-radius);
    padding: 28px 22px;
    height: 100%;
    transition: transform .25s, box-shadow .25s;
}

    .team-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--nl-shadow);
    }

.team-av {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: #1c1405;
    background: var(--nl-grad-gold);
}

.team-card h6 {
    color: var(--nl-ink);
    margin-bottom: 2px;
}

.team-card .role {
    color: var(--nl-gold-ink);
    font-size: .85rem;
    font-weight: 500;
}

.team-card p {
    color: var(--nl-muted);
    font-size: .88rem;
    margin-top: 10px;
}

/* ---------- Contact ---------- */
.contact-card {
    background: var(--nl-bg);
    border: 1px solid var(--nl-line);
    border-radius: var(--nl-radius);
    padding: 26px;
    height: 100%;
    box-shadow: var(--nl-shadow);
}

.contact-ic {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--nl-gold-soft);
    border: 1px solid var(--nl-gold-soft2);
    flex: 0 0 auto;
}

    .contact-ic i {
        color: var(--nl-gold-ink);
        font-size: 1.2rem;
    }

.form-control, .form-select {
    background: var(--nl-bg);
    border: 1px solid var(--nl-line);
    color: var(--nl-text);
    border-radius: var(--nl-radius-sm);
    padding: .8rem 1rem;
}

    .form-control::placeholder {
        color: var(--nl-muted2);
    }

    .form-control:focus, .form-select:focus {
        background: var(--nl-bg);
        color: var(--nl-text);
        border-color: var(--nl-gold);
        box-shadow: 0 0 0 .2rem var(--nl-gold-soft);
    }

.form-label {
    color: var(--nl-ink);
    font-weight: 500;
    font-size: .9rem;
    margin-bottom: .4rem;
}

.map-frame {
    border-radius: var(--nl-radius);
    overflow: hidden;
    border: 1px solid var(--nl-line);
    box-shadow: var(--nl-shadow);
}

    .map-frame iframe {
        display: block;
        width: 100%;
        border: 0;
    }

.form-note {
    display: none;
}

    .form-note.show {
        display: block;
    }

/* ---------- Newsletter ---------- */
.news-wrap {
    background: var(--nl-charcoal);
    border: 1px solid var(--nl-line-d);
    border-radius: var(--nl-radius);
    padding: 20px;
}

    .news-wrap .form-control {
        background: rgba(255,255,255,.05);
        border-color: rgba(255,255,255,.14);
        color: #fff;
    }

        .news-wrap .form-control::placeholder {
            color: #9a9aa3;
        }

/* ---------- Footer ---------- */
.nl-footer {
    background: var(--nl-ink);
    border-top: 1px solid var(--nl-line-d);
    padding: 66px 0 26px;
    color: #a9a9b3;
}

    .nl-footer .foot-brand .word {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.5rem;
    }

    .nl-footer .foot-brand .nex {
        color: var(--nl-gold-bright);
    }

    .nl-footer .foot-brand .lock {
        color: #fff;
    }

    .nl-footer p, .nl-footer li, .nl-footer address {
        color: #a9a9b3;
        font-size: .94rem;
    }

    .nl-footer h6 {
        font-family: var(--font-display);
        color: #fff;
        font-size: .95rem;
        letter-spacing: .04em;
        margin-bottom: 18px;
    }

    .nl-footer a {
        color: #a9a9b3;
    }

        .nl-footer a:hover {
            color: var(--nl-gold-bright);
        }

.foot-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .foot-links li {
        margin-bottom: 10px;
    }

.foot-contact li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.foot-contact i {
    color: var(--nl-gold-bright);
    margin-top: 3px;
}

.social-ic {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    border: 1px solid var(--nl-line-d);
    color: #e9e9ee;
    transition: .2s;
}

    .social-ic:hover {
        border-color: var(--nl-gold);
        color: var(--nl-gold-bright);
        background: rgba(214,160,23,.12);
    }

.foot-bottom {
    border-top: 1px solid var(--nl-line-d);
    margin-top: 46px;
    padding-top: 22px;
    font-size: .86rem;
    color: #8c8c95;
}

/* ---------- Reveal ---------- */
.reveal {
    transition: opacity .6s ease, transform .6s ease;
}

.js .reveal {
    opacity: 0;
    transform: translateY(22px);
}

    .js .reveal.visible {
        opacity: 1;
        transform: none;
    }

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
    }

    .js .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none;
    }

    .badge-pill .dot {
        animation: none;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .nl-navbar .navbar-collapse {
        background: rgba(255,255,255,.99);
        margin-top: .6rem;
        padding: 1rem;
        border: 1px solid var(--nl-line);
        border-radius: var(--nl-radius);
        box-shadow: var(--nl-shadow);
    }

    .nl-navbar .nav-link.active::after {
        display: none;
    }

    .hero {
        padding: 132px 0 78px;
        text-align: center;
    }

        .hero .lead-nl {
            margin-left: auto;
            margin-right: auto;
        }

        .hero .badge-pill, .hero .hero-mini {
            justify-content: center;
        }

    .phone-wrap {
        margin-top: 48px;
    }

    .cta-band {
        padding: 44px 24px;
    }
}

@media (max-width: 767.98px) {
    .compare {
        overflow-x: auto;
    }

        .compare table {
            min-width: 520px;
        }
}

@media (max-width: 575.98px) {
    .section {
        padding: 70px 0;
    }

    .btn.btn-block-sm {
        width: 100%;
    }

    .hero-btns .btn + .btn {
        margin-top: .75rem;
    }
}

/* ==========================================================================
   ANIMATIONS & MICRO-INTERACTIONS
   ========================================================================== */

/* Reveal variants (shared easing) */
.reveal, .reveal-l, .reveal-r, .reveal-scale {
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}

.js .reveal-l {
    opacity: 0;
    transform: translateX(-30px);
}

.js .reveal-r {
    opacity: 0;
    transform: translateX(30px);
}

.js .reveal-scale {
    opacity: 0;
    transform: scale(.93);
}

    .js .reveal-l.visible, .js .reveal-r.visible, .js .reveal-scale.visible {
        opacity: 1;
        transform: none;
    }

/* Scroll progress bar */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 2000;
    background: var(--nl-grad-gold);
    box-shadow: 0 0 10px rgba(214,160,23,.5);
    transition: width .08s linear;
}

/* Hero floating orbs */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(46px);
    z-index: 0;
    pointer-events: none;
}

    .hero-orb.orb-1 {
        width: 340px;
        height: 340px;
        top: -70px;
        right: 6%;
        background: radial-gradient(circle, rgba(214,160,23,.42), transparent 70%);
        animation: floatOrb 13s ease-in-out infinite;
    }

    .hero-orb.orb-2 {
        width: 280px;
        height: 280px;
        bottom: -50px;
        left: 0;
        background: radial-gradient(circle, rgba(214,160,23,.24), transparent 70%);
        animation: floatOrb 16s ease-in-out infinite reverse;
    }

@keyframes floatOrb {
    0%,100% {
        transform: translate(0,0)
    }

    50% {
        transform: translate(22px,-26px)
    }
}

/* Gold shimmer for hero headline highlight */
.gold-text.shimmer {
    background: linear-gradient(100deg, var(--nl-gold-deep) 0%, var(--nl-gold-bright) 25%, #ffe9a8 40%, var(--nl-gold-bright) 55%, var(--nl-gold-deep) 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4.5s linear infinite;
}

@keyframes shimmer {
    to {
        background-position: 220% center;
    }
}

/* Phone float + glow pulse */
.phone {
    animation: floatY 5.5s ease-in-out infinite;
}

@keyframes floatY {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-14px)
    }
}

.phone-glow {
    animation: glowPulse 4.5s ease-in-out infinite;
}

@keyframes glowPulse {
    0%,100% {
        opacity: .7;
        transform: scale(1)
    }

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

.phone-lock-icon {
    animation: lockPop 4.5s ease-in-out infinite;
}

@keyframes lockPop {
    0%,92%,100% {
        transform: scale(1)
    }

    96% {
        transform: scale(1.08)
    }
}

/* Button shine sweep */
.btn-gold {
    position: relative;
    overflow: hidden;
}

    .btn-gold::after {
        content: "";
        position: absolute;
        top: 0;
        left: -130%;
        width: 55%;
        height: 100%;
        transform: skewX(-22deg);
        background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
    }

    .btn-gold:hover::after {
        animation: shine .85s ease;
    }

@keyframes shine {
    to {
        left: 150%;
    }
}

/* Card hover polish */
.feature-ic, .contact-ic, .solution-card .top i {
    transition: transform .28s cubic-bezier(.22,.61,.36,1), background .25s;
}

.feature-card:hover {
    box-shadow: 0 24px 50px -22px rgba(214,160,23,.4);
}

    .feature-card:hover .feature-ic {
        transform: translateY(-3px) scale(1.08);
    }

.solution-card:hover .top i {
    transform: scale(1.12) rotate(-4deg);
}

.price-card, .quote-card, .team-card, .step {
    transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s, border-color .3s;
}

    .step:hover {
        transform: translateY(-5px);
        box-shadow: var(--nl-shadow);
        border-color: var(--nl-gold-soft2);
    }

    .quote-card:hover, .team-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--nl-shadow-lg);
    }

/* Trusted marquee */
.marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
    display: flex;
    align-items: center;
    gap: 60px;
    width: max-content;
    animation: marquee 28s linear infinite;
}

.marquee:hover .marquee-track {
    animation-play-state: paused;
}

.marquee-track .brand-chip {
    transition: color .25s;
}

    .marquee-track .brand-chip:hover {
        color: var(--nl-gold-ink);
    }

@keyframes marquee {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

/* Dashboard animated bars + pulsing pill */
.dash-bar > span {
    width: 0;
    transition: width 1.4s cubic-bezier(.22,.61,.36,1);
}

.dash-bar.go > span {
    width: var(--w);
}

.pill.locked {
    animation: pillPulse 2.4s ease-in-out infinite;
}

@keyframes pillPulse {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(214,160,23,.35)
    }

    50% {
        box-shadow: 0 0 0 5px rgba(214,160,23,0)
    }
}

/* Badge dot ping already pulses; add ring */
.badge-pill .dot {
    position: relative;
}

/* Link/arrow nudge */
.social-ic {
    transition: transform .2s, border-color .2s, color .2s, background .2s;
}

    .social-ic:hover {
        transform: translateY(-3px);
    }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .phone, .phone-glow, .phone-lock-icon, .hero-orb, .marquee-track, .gold-text.shimmer, .pill.locked {
        animation: none !important;
    }

    .gold-text.shimmer {
        -webkit-text-fill-color: transparent;
    }

    .scroll-progress {
        display: none;
    }

    .dash-bar > span {
        transition: none;
    }

    .btn-gold:hover::after {
        animation: none;
    }
}


.cus-about-locker-1 {
    float: inline-end;
}


.nx-emi-device-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 20px;
    font-family: Arial, Helvetica, sans-serif;
}

.nx-emi-device-card {
    width: 520px;
    max-width: 100%;
    padding: 28px;
    border-radius: 26px;
    background: #101114;
    color: #fff;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .25);
    border: 1px solid rgba(255, 255, 255, .08);
}

.nx-emi-device-glow-top {
    position: absolute;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: rgba(240, 178, 20, .14);
    filter: blur(65px);
    top: -130px;
    right: -70px;
}

.nx-emi-device-glow-bottom {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(240, 178, 20, .055);
    filter: blur(55px);
    bottom: -100px;
    left: -80px;
}

.nx-emi-device-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    margin-bottom: 28px;
}

.nx-emi-device-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nx-emi-device-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: linear-gradient(145deg, #25262b, #1b1c20);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .06);
}

.nx-emi-device-brand-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.nx-emi-device-brand-subtitle {
    font-size: 12px;
    color: #fbfbfb;
    margin-top: 5px;
}

.nx-emi-device-status {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    color: #f0b21a;
    background: rgba(239, 178, 27, .09);
    border: 1px solid rgba(239, 178, 27, .25);
    padding: 8px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.nx-emi-device-status-dot {
    font-size: 8px;
}

.nx-emi-device-main {
    display: flex;
    align-items: center;
    gap: 28px;
    position: relative;
    z-index: 2;
}

.nx-emi-device-lock-box {
    width: 135px;
    height: 135px;
    flex-shrink: 0;
    border-radius: 25px;
    background: linear-gradient(145deg, #24252a, #17181c);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 12px 30px rgba(0, 0, 0, .18);
}

.nx-emi-device-inner-ring {
    position: absolute;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 1px solid rgba(240, 178, 20, .12);
}

.nx-emi-device-ripple {
    position: absolute;
    left: 0;
    top: 0;
}

.nx-emi-device-lock-icon {
    position: relative;
    z-index: 3;
}

.nx-emi-device-info {
    flex: 1;
    min-width: 0;
}

.nx-emi-device-heading {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 9px;
    letter-spacing: -.5px;
}

.nx-emi-device-description {
    font-size: 15px;
    color: #d2d2d2;
    line-height: 1.65;
    margin-bottom: 17px;
    max-width: 280px;
}

.nx-emi-device-details {
    display: flex;
    gap: 10px;
}

.nx-emi-device-detail-box {
    background: #191a1e;
    border: 1px solid rgba(255, 255, 255, .065);
    padding: 9px 13px;
    border-radius: 10px;
    min-width: 125px;
}

.nx-emi-device-detail-label {
    font-size: 10px;
    color: #fff;
    margin-bottom: 5px;
    letter-spacing: .3px;
}

.nx-emi-device-detail-value {
    font-size: 10px;
    font-weight: 700;
    color: #e9ebef;
}

    .nx-emi-device-detail-value.overdue {
        color: #efb21c;
    }

.nx-emi-device-divider {
    height: 1px;
    background: rgba(255, 255, 255, .055);
    margin: 26px 0 20px;
    position: relative;
    z-index: 2;
}

.nx-emi-device-payment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    margin-bottom: 15px;
}

.nx-emi-device-payment-label {
    font-size: 9px;
    color: #fff;
    margin-bottom: 4px;
}

.nx-emi-device-payment-text {
    font-size: 13px;
    font-weight: 700;
    color: #e9ebef;
}

.nx-emi-device-action {
    font-size: 11px;
    color: #f0b21a;
    font-weight: 700;
    background: rgba(240, 178, 20, .08);
    padding: 7px 11px;
    border-radius: 8px;
}

.nx-emi-device-button {
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #f5c12f, #d99500);
    color: #171717;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(220, 157, 0, .22);
}

.nx-emi-device-button-text {
    position: relative;
    z-index: 2;
}

.nx-emi-device-footer {
    text-align: center;
    color: #fff;
    margin-top: 14px;
    position: relative;
    z-index: 2;
}


/* Responsive */
@media (max-width: 600px) {
    .nx-emi-device-wrap {
        padding: 20px 12px;
    }

    .nx-emi-device-card {
        padding: 22px;
        border-radius: 22px;
    }

    .nx-emi-device-main {
        gap: 18px;
    }

    .nx-emi-device-lock-box {
        width: 115px;
        height: 115px;
    }

    .nx-emi-device-ripple {
        width: 115px;
        height: 115px;
    }

    .nx-emi-device-heading {
        font-size: 21px;
    }

    .nx-emi-device-description {
        font-size: 13px;
    }

    .nx-emi-device-detail-box {
        min-width: 0;
        flex: 1;
    }
}

@media (max-width: 480px) {
    .nx-emi-device-header {
        align-items: flex-start;
        gap: 12px;
    }

    .nx-emi-device-status {
        padding: 7px 9px;
    }

    .nx-emi-device-main {
        flex-direction: column;
        align-items: stretch;
    }

    .nx-emi-device-lock-box {
        width: 135px;
        height: 135px;
        margin: 0 auto;
    }

    .nx-emi-device-ripple {
        width: 135px;
        height: 135px;
    }

    .nx-emi-device-info {
        text-align: center;
    }

    .nx-emi-device-description {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .nx-emi-device-details {
        justify-content: center;
    }

    .nx-emi-device-payment {
        gap: 12px;
    }

    .nx-emi-device-action {
        white-space: nowrap;
    }
}


@media (min-width: 300px) and (max-width: 700px)
{
    .nl-brand img {
        width: 198px;
    }
    .statbar .num {
        font-size: 21px;
    }
    .page-head {
        padding: 69px 0px 52px 0px;
      
    }
    .hero {
        padding: 76px 0 78px;
    }


    .btn.btn-block-sm {
        width: 100%;
        font-size: 17px;
    }

    .cus-gap-485
    {
        gap: inherit!important;
    }


 /*   .cus-hero-main-area
    {
        flex-direction: column-reverse;
    }
*/
}