<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <meta name="description"
          content="EMI CREDITS – Manage your EMI card, loans, EMI repayments and payments securely online.">

    <title>EMI CREDITS — Making Finance Simple, Flexible & Accessible.</title>

    <link rel="icon"
          type="image/png"
          href="{{ asset('favicon.png') }}">

    <style>

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: Inter, Arial, Helvetica, sans-serif;
            background: #f7faff;
            color: #10213f;
            line-height: 1.6;
        }

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

        button {
            font-family: inherit;
        }

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


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

        header {
            background: rgba(255, 255, 255, 0.94);
            border-bottom: 1px solid #e8eef7;

            position: sticky;
            top: 0;

            z-index: 1000;

            backdrop-filter: blur(14px);
        }

        nav {
            height: 76px;

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

            position: relative;
        }


        /* LOGO */

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

            flex-shrink: 0;
        }

        .logo img {
            height: 43px;
            width: auto;

            max-width: 190px;

            display: block;

            object-fit: contain;
        }


        /* NAV LINKS */

        .nav-links {
            display: flex;
            align-items: center;

            gap: 30px;

            color: #60708a;

            font-size: 14px;
        }

        .nav-links a {
            transition: 0.2s ease;
        }

        .nav-links a:hover {
            color: #1769e0;
        }


        /* NAV ACTIONS */

        .nav-actions {
            display: flex;
            align-items: center;

            gap: 10px;
        }

        .login-btn {
            padding: 10px 19px;

            color: #193052;

            font-size: 14px;
            font-weight: 600;

            transition: 0.2s ease;
        }

        .login-btn:hover {
            color: #1769e0;
        }


        .signup-btn,
        .primary-btn {
            background: #1769e0;

            color: white;

            padding: 11px 20px;

            border-radius: 9px;

            font-size: 14px;
            font-weight: 700;

            box-shadow:
                0 8px 20px rgba(23, 105, 224, 0.18);

            transition: 0.2s ease;
        }

        .signup-btn:hover,
        .primary-btn:hover {
            background: #0f56c0;

            transform: translateY(-1px);
        }


        /* ========================================
           MOBILE MENU BUTTON
        ======================================== */

        .mobile-menu-btn {
            display: none;

            border: none;

            background: #edf5ff;

            color: #1769e0;

            width: 42px;
            height: 42px;

            border-radius: 10px;

            font-size: 22px;

            cursor: pointer;

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

            transition: 0.2s ease;
        }

        .mobile-menu-btn:hover {
            background: #e1efff;
        }


        /* ========================================
           HERO
        ======================================== */

        .hero {
            position: relative;

            overflow: hidden;

            padding: 95px 0 105px;

            background:
                radial-gradient(
                    circle at 85% 25%,
                    rgba(55, 130, 240, 0.10),
                    transparent 30%
                ),
                linear-gradient(
                    180deg,
                    #ffffff 0%,
                    #f6f9ff 100%
                );
        }


        .hero-content {
            width: 53%;

            position: relative;

            z-index: 2;
        }


        .hero-badge {
            display: inline-flex;

            align-items: center;

            gap: 7px;

            padding: 7px 13px;

            border-radius: 50px;

            background: #edf5ff;

            color: #1769e0;

            border: 1px solid #d9e9ff;

            font-size: 12px;

            font-weight: 700;

            margin-bottom: 22px;
        }


        .hero h1 {
            font-size: clamp(42px, 5vw, 66px);

            line-height: 1.04;

            letter-spacing: -3px;

            color: #10213f;

            margin-bottom: 23px;
        }


        .hero h1 span {
            color: #1769e0;
        }


        .hero-description {
            max-width: 560px;

            font-size: 17px;

            color: #687993;

            margin-bottom: 31px;
        }


        .hero-buttons {
            display: flex;

            align-items: center;

            gap: 13px;
        }


        .secondary-btn {
            padding: 11px 20px;

            border: 1px solid #dce5f2;

            border-radius: 9px;

            color: #193052;

            background: white;

            font-size: 14px;

            font-weight: 600;

            transition: 0.2s ease;
        }


        .secondary-btn:hover {
            border-color: #b8cce8;
        }


        .hero-note {
            margin-top: 22px;

            font-size: 12px;

            color: #8a98ab;
        }


        /* ========================================
           EMI CARD
        ======================================== */

        .card-area {
            position: absolute;

            right: 4%;

            top: 105px;

            width: 430px;
        }


        .emi-card {
            width: 420px;

            height: 260px;

            border-radius: 22px;

            padding: 28px;

            color: white;

            position: relative;

            overflow: hidden;

            background:
                linear-gradient(
                    135deg,
                    #0d3570,
                    #1769e0 65%,
                    #3f91ff
                );

            box-shadow:
                0 30px 65px rgba(26, 76, 145, 0.28);

            transform: rotate(5deg);
        }


        .emi-card::before {
            content: "";

            position: absolute;

            width: 260px;
            height: 260px;

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

            border-radius: 50%;

            right: -70px;
            top: -110px;
        }


        .emi-card::after {
            content: "";

            position: absolute;

            width: 220px;
            height: 220px;

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

            border-radius: 50%;

            right: -30px;
            bottom: -140px;
        }


        .card-top {
            display: flex;

            align-items: center;

            justify-content: space-between;

            position: relative;

            z-index: 2;
        }


        .card-brand {
            font-size: 20px;

            font-weight: 800;

            letter-spacing: -0.5px;
        }


        .card-type {
            font-size: 10px;

            padding: 5px 8px;

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

            border-radius: 5px;
        }


        .chip {
            width: 46px;
            height: 34px;

            border-radius: 6px;

            margin-top: 38px;

            background:
                linear-gradient(
                    135deg,
                    #f1d992,
                    #fff2bd
                );
        }


        .card-number {
            margin-top: 22px;

            font-size: 18px;

            letter-spacing: 3px;
        }


        .card-bottom {
            display: flex;

            justify-content: space-between;

            margin-top: 17px;

            font-size: 10px;

            opacity: 0.82;
        }


        /* FLOATING OFFER */

        .floating-offer {
            position: absolute;

            right: -20px;

            bottom: -35px;

            background: white;

            border: 1px solid #e5ebf5;

            box-shadow:
                0 18px 40px rgba(25, 55, 95, 0.13);

            border-radius: 14px;

            padding: 14px 18px;

            min-width: 165px;
        }


        .floating-offer small {
            color: #8795a9;

            display: block;

            font-size: 10px;
        }


        .floating-offer strong {
            display: block;

            color: #1769e0;

            font-size: 24px;

            line-height: 1.2;
        }


        /* ========================================
           TRUST BAR
        ======================================== */

        .trust-bar {
            background: white;

            border-top: 1px solid #e9eff7;

            border-bottom: 1px solid #e9eff7;
        }


        .trust-content {
            min-height: 90px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 25px;
        }


        .trust-item {
            display: flex;

            align-items: center;

            gap: 10px;

            color: #65758e;

            font-size: 13px;

            font-weight: 600;
        }


        .trust-icon {
            width: 34px;
            height: 34px;

            border-radius: 9px;

            background: #edf5ff;

            display: flex;

            align-items: center;

            justify-content: center;
        }


        /* ========================================
           SECTIONS
        ======================================== */

        .section {
            padding: 95px 0;
        }


        .section-header {
            text-align: center;

            max-width: 620px;

            margin: 0 auto 45px;
        }


        .section-label {
            color: #1769e0;

            font-size: 12px;

            font-weight: 800;

            text-transform: uppercase;

            letter-spacing: 1.3px;

            margin-bottom: 9px;
        }


        .section-header h2 {
            font-size: 38px;

            line-height: 1.15;

            letter-spacing: -1.5px;

            margin-bottom: 12px;
        }


        .section-header p {
            color: #73829a;

            font-size: 15px;
        }


        /* ========================================
           ZERO COST EMI
        ======================================== */

        .hero-zero-emi {
            margin-top: 18px;
            display: inline-flex;
            align-items: center;
            gap: 11px;
            padding: 9px 13px;
            border-radius: 13px;
            background: #f0fbf5;
            border: 1px solid #cdeed9;
            color: #1d6b3d;
        }

        .zero-emi-icon {
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 11px;
            background: #1f8f4d;
            color: #ffffff;
            font-size: 11px;
            font-weight: 900;
        }

        .hero-zero-emi strong {
            display: block;
            color: #155c34;
            font-size: 12px;
            font-weight: 900;
        }

        .hero-zero-emi span {
            display: block;
            margin-top: 2px;
            color: #6b8c78;
            font-size: 9px;
        }

        .zero-emi-section {
            padding: 25px 0 0;
            background: #f7faff;
        }

        .zero-emi-card {
            position: relative;
            overflow: hidden;
            min-height: 330px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 40px;
            padding: 48px 55px;
            border-radius: 25px;
            background: linear-gradient(
                135deg,
                #082b1b 0%,
                #0e5130 48%,
                #1769e0 100%
            );
            color: white;
            box-shadow: 0 25px 60px rgba(18, 77, 52, 0.18);
        }

        .zero-emi-card::before {
            content: "";
            position: absolute;
            width: 360px;
            height: 360px;
            right: -110px;
            top: -150px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,.12);
        }

        .zero-emi-card::after {
            content: "";
            position: absolute;
            width: 250px;
            height: 250px;
            right: 80px;
            bottom: -180px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,.08);
        }

        .zero-emi-content {
            position: relative;
            z-index: 2;
            max-width: 650px;
        }

        .zero-emi-label {
            display: inline-block;
            margin-bottom: 12px;
            padding: 6px 10px;
            border-radius: 50px;
            background: rgba(255,255,255,.12);
            border: 1px solid rgba(255,255,255,.15);
            color: #d8f7e4;
            font-size: 9px;
            font-weight: 900;
            letter-spacing: 1px;
        }

        .zero-emi-content h2 {
            font-size: 38px;
            line-height: 1.12;
            letter-spacing: -1.3px;
            margin-bottom: 13px;
        }

        .zero-emi-content h2 span {
            color: #a7f3c4;
        }

        .zero-emi-content p {
            max-width: 580px;
            color: #d2e5db;
            font-size: 14px;
            line-height: 1.7;
            margin-bottom: 22px;
        }

        .zero-emi-points {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            margin-bottom: 25px;
        }

        .zero-emi-points div {
            padding: 8px 11px;
            border-radius: 9px;
            background: rgba(255,255,255,.10);
            border: 1px solid rgba(255,255,255,.12);
            color: #ffffff;
            font-size: 10px;
            font-weight: 700;
        }

        .zero-emi-points span {
            color: #9ff0bd;
            margin-right: 4px;
        }

        .zero-emi-btn {
            display: inline-block;
            padding: 12px 19px;
            border-radius: 9px;
            background: #ffffff;
            color: #1769e0;
            font-size: 12px;
            font-weight: 900;
            box-shadow: 0 10px 25px rgba(0,0,0,.12);
            transition: .2s ease;
        }

        .zero-emi-btn:hover {
            transform: translateY(-2px);
        }

        .zero-emi-visual {
            position: relative;
            z-index: 2;
            min-width: 210px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .zero-circle {
            width: 165px;
            height: 165px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(255,255,255,.10);
            border: 1px solid rgba(255,255,255,.22);
            box-shadow:
                inset 0 0 40px rgba(255,255,255,.05),
                0 20px 45px rgba(0,0,0,.12);
        }

        .zero-circle strong {
            font-size: 56px;
            line-height: .9;
            letter-spacing: -3px;
        }

        .zero-circle span {
            margin-top: 8px;
            color: #b9f4ce;
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 1.5px;
        }

        .zero-badge {
            margin-top: -12px;
            padding: 8px 13px;
            border-radius: 50px;
            background: #ffffff;
            color: #155c34;
            font-size: 9px;
            font-weight: 900;
            letter-spacing: .8px;
            box-shadow: 0 10px 25px rgba(0,0,0,.16);
        }


        /* ========================================
           PREMIUM ZERO COST EMI
        ======================================== */

        .hero h1 span {
            background:
                linear-gradient(
                    90deg,
                    #1769e0,
                    #1f8f4d
                );

            -webkit-background-clip: text;
            background-clip: text;

            -webkit-text-fill-color: transparent;
        }

        .hero-zero-emi {
            box-shadow:
                0 10px 28px
                rgba(31,143,77,.08);
        }

        .zero-emi-section {
            padding: 30px 0 0;
        }

        .zero-emi-card {
            background:
                linear-gradient(
                    135deg,
                    #071d3a 0%,
                    #0d3f79 55%,
                    #1769e0 100%
                );
        }

        .zero-feature-section {
            padding-top: 65px;
        }

        .zero-feature {
            position: relative;
            overflow: hidden;

            min-height: 360px;

            display: grid;
            grid-template-columns: 1.25fr .75fr;

            align-items: center;

            gap: 30px;

            padding: 52px 58px;

            border-radius: 28px;

            background:
                radial-gradient(
                    circle at 80% 50%,
                    rgba(23,105,224,.38),
                    transparent 35%
                ),
                linear-gradient(
                    135deg,
                    #071d3a,
                    #0c3972
                );

            color: #fff;

            box-shadow:
                0 28px 70px
                rgba(8,48,98,.18);
        }

        .zero-feature::before {
            content: "";

            position: absolute;

            width: 420px;
            height: 420px;

            right: -120px;
            top: -150px;

            border-radius: 50%;

            border: 1px solid
                rgba(255,255,255,.09);
        }

        .zero-feature-copy {
            position: relative;
            z-index: 2;
        }

        .zero-feature-copy .section-label {
            color: #79aaff;
        }

        .zero-feature-copy h2 {
            margin: 0 0 14px;

            max-width: 620px;

            font-size: 44px;
            line-height: 1.08;

            letter-spacing: -1.8px;
        }

        .zero-feature-copy h2 span {
            display: block;

            color: #8ee3ad;
        }

        .zero-feature-copy p {
            max-width: 570px;

            margin-bottom: 22px;

            color: #cbd9ec;

            font-size: 15px;
            line-height: 1.7;
        }

        .zero-pills {
            display: flex;
            flex-wrap: wrap;

            gap: 8px;

            margin-bottom: 25px;
        }

        .zero-pills span {
            padding: 8px 11px;

            border-radius: 50px;

            background:
                rgba(255,255,255,.09);

            border:
                1px solid
                rgba(255,255,255,.12);

            color: #fff;

            font-size: 10px;
            font-weight: 800;
        }

        .zero-feature .primary-btn {
            background: #fff;
            color: #1769e0;
        }

        .zero-feature-visual {
            position: relative;

            min-height: 270px;

            display: flex;

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

        .zero-percent-card {
            position: relative;
            z-index: 5;

            width: 190px;
            height: 190px;

            display: flex;
            flex-direction: column;

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

            border-radius: 42px;

            background:
                linear-gradient(
                    145deg,
                    #ffffff,
                    #dcecff
                );

            color: #0d315d;

            transform: rotate(-7deg);

            box-shadow:
                0 28px 55px
                rgba(0,0,0,.20);
        }

        .zero-percent-card::after {
            content: "";

            position: absolute;

            inset: 9px;

            border-radius: 34px;

            border: 1px solid
                rgba(23,105,224,.12);
        }

        .zero-percent-card small {
            position: relative;
            z-index: 2;

            color: #6e819d;

            font-size: 9px;
            font-weight: 900;

            letter-spacing: 2px;
        }

        .zero-percent-card strong {
            position: relative;
            z-index: 2;

            margin: 3px 0;

            font-size: 70px;

            line-height: .95;

            letter-spacing: -5px;

            background:
                linear-gradient(
                    135deg,
                    #1769e0,
                    #1f8f4d
                );

            -webkit-background-clip: text;
            background-clip: text;

            -webkit-text-fill-color: transparent;
        }

        .zero-percent-card span {
            position: relative;
            z-index: 2;

            color: #1769e0;

            font-size: 9px;
            font-weight: 900;

            letter-spacing: 1px;
        }

        .zero-orbit {
            position: absolute;

            border-radius: 50%;

            border: 1px solid
                rgba(255,255,255,.15);
        }

        .zero-orbit-one {
            width: 260px;
            height: 260px;
        }

        .zero-orbit-two {
            width: 330px;
            height: 330px;

            border-color:
                rgba(112,185,255,.10);
        }

        .smart-section {
            background: #f0f5fc;
        }

        .smart-grid {
            display: grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap: 18px;
        }

        .smart-card {
            position: relative;

            padding: 30px;

            border-radius: 20px;

            background: #fff;

            border:
                1px solid #e2eaf4;

            box-shadow:
                0 12px 32px
                rgba(32,65,103,.055);

            transition: .2s ease;
        }

        .smart-card:hover {
            transform: translateY(-5px);

            box-shadow:
                0 20px 40px
                rgba(32,65,103,.09);
        }

        .smart-card.featured {
            background:
                linear-gradient(
                    145deg,
                    #eff7ff,
                    #f1fbf5
                );

            border-color:
                #cfe2f7;
        }

        .smart-number {
            position: absolute;

            top: 18px;
            right: 20px;

            color: #c7d5e6;

            font-size: 11px;
            font-weight: 900;
        }

        .smart-icon {
            width: 50px;
            height: 50px;

            display: flex;

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

            margin-bottom: 20px;

            border-radius: 14px;

            background: #edf5ff;

            color: #1769e0;

            font-size: 18px;
            font-weight: 900;
        }

        .smart-card.featured .smart-icon {
            background: #eaf8ef;
            color: #1f8f4d;
        }

        .smart-card h3 {
            margin-bottom: 8px;

            font-size: 18px;
        }

        .smart-card p {
            color: #77869b;

            font-size: 13px;

            line-height: 1.7;
        }


        /* ========================================
           OFFER
        ======================================== */

        .offer-card {
            max-width: 780px;

            margin: auto;

            padding: 42px;

            border-radius: 22px;

            background: white;

            border: 1px solid #e3ebf5;

            box-shadow:
                0 20px 55px rgba(34,67,105,0.08);

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 35px;
        }


        .offer-info h3 {
            font-size: 23px;

            margin-bottom: 8px;
        }


        .offer-info p {
            color: #78879d;

            font-size: 14px;
        }


        .price-area {
            text-align: right;

            min-width: 160px;
        }


        .old-price {
            color: #9aa7b8;

            text-decoration: line-through;

            font-size: 17px;
        }


        .new-price {
            color: #1769e0;

            font-size: 52px;

            font-weight: 800;

            line-height: 1;

            margin: 4px 0 10px;
        }


        .limited {
            color: #3d8255;

            font-size: 11px;

            font-weight: 700;
        }


        /* ========================================
           FEATURES
        ======================================== */

        .features-section {
            background: #f0f5fc;
        }


        .feature-grid {
            display: grid;

            grid-template-columns:
                repeat(4, 1fr);

            gap: 20px;
        }


        .feature-card {
            padding: 30px;

            background: white;

            border: 1px solid #e4ebf5;

            border-radius: 16px;

            transition: 0.2s ease;
        }


        .feature-card:hover {
            transform: translateY(-4px);

            box-shadow:
                0 15px 35px rgba(32,65,103,0.08);
        }


        .feature-icon {
            width: 48px;
            height: 48px;

            border-radius: 12px;

            background: #edf5ff;

            color: #1769e0;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 21px;

            margin-bottom: 20px;
        }


        .feature-card h3 {
            font-size: 18px;

            margin-bottom: 8px;
        }


        .feature-card p {
            color: #77869b;

            font-size: 13px;
        }


        /* ========================================
           HOW IT WORKS
        ======================================== */

        .step-grid {
            display: grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap: 30px;
        }


        .step {
            text-align: center;

            padding: 15px;
        }


        .step-number {
            width: 54px;
            height: 54px;

            margin: 0 auto 18px;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            background: #1769e0;

            color: white;

            font-weight: 800;

            box-shadow:
                0 10px 22px rgba(23,105,224,0.20);
        }


        .step h3 {
            font-size: 17px;

            margin-bottom: 7px;
        }


        .step p {
            color: #77869b;

            font-size: 13px;
        }


        /* ========================================
           CTA
        ======================================== */

        .cta-section {
            padding: 35px 0 95px;
        }


        .cta {
            background:
                linear-gradient(
                    135deg,
                    #0c2f65,
                    #1769e0
                );

            color: white;

            border-radius: 22px;

            padding: 55px;

            text-align: center;

            box-shadow:
                0 25px 55px rgba(24,77,145,0.18);
        }


        .cta h2 {
            font-size: 35px;

            margin-bottom: 10px;
        }


        .cta p {
            color: #d5e4fa;

            font-size: 14px;

            margin-bottom: 25px;
        }


        .cta .primary-btn {
            background: white;

            color: #1769e0;

            box-shadow: none;
        }


        .emi-terms-note {
            padding: 14px 0;

            background: #edf3fa;

            color: #7d8da4;

            font-size: 10px;

            text-align: center;

            border-top:
                1px solid #e2eaf4;
        }


        /* ========================================
           FOOTER
        ======================================== */

        footer {
            background: #0b1d38;

            color: #9eacc0;

            padding: 30px 0;

            font-size: 12px;

            text-align: center;
        }


        @media (max-width: 950px) {

            .zero-emi-card {
                padding: 40px 35px;
            }

            .zero-emi-visual {
                min-width: 175px;
            }

            .zero-circle {
                width: 145px;
                height: 145px;
            }

            .zero-circle strong {
                font-size: 48px;
            }

            .feature-grid {
                grid-template-columns: repeat(2, 1fr);
            }

        }


        /* ========================================
           TABLET
        ======================================== */

        @media (max-width: 950px) {

            .nav-links {
                display: none;

                position: absolute;

                top: 76px;

                left: 0;
                right: 0;

                background: white;

                padding: 20px;

                border-radius: 0 0 16px 16px;

                border: 1px solid #e5ebf5;

                box-shadow:
                    0 15px 35px rgba(30,60,100,0.12);

                flex-direction: column;

                align-items: stretch;

                gap: 4px;
            }


            .nav-links.active {
                display: flex;
            }


            .nav-links a {
                padding: 13px 10px;

                border-radius: 8px;
            }


            .nav-links a:hover {
                background: #f3f7fd;
            }


            .mobile-menu-btn {
                display: flex;
            }


            .nav-actions {
                margin-left: auto;

                margin-right: 10px;
            }


            .hero {
                padding: 70px 0 100px;
            }


            .hero-content {
                width: 100%;

                text-align: center;
            }


            .hero-description {
                margin-left: auto;

                margin-right: auto;
            }


            .hero-buttons {
                justify-content: center;
            }


            .card-area {
                position: relative;

                top: auto;

                right: auto;

                width: 100%;

                margin: 80px auto 0;

                display: flex;

                justify-content: center;
            }


            .feature-grid,
            .step-grid {
                grid-template-columns: 1fr;
            }


            .feature-card {
                text-align: center;
            }


            .feature-icon {
                margin-left: auto;

                margin-right: auto;
            }
        }


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

        @media (max-width: 650px) {

            .zero-feature-section {
                padding-top: 35px;
            }

            .zero-feature {
                min-height: auto;

                grid-template-columns: 1fr;

                padding: 34px 24px;

                text-align: center;
            }

            .zero-feature-copy h2 {
                font-size: 33px;
            }

            .zero-feature-copy p {
                font-size: 13px;
            }

            .zero-pills {
                justify-content: center;
            }

            .zero-feature .primary-btn {
                width: 100%;
                text-align: center;
            }

            .zero-feature-visual {
                min-height: 230px;
                margin-top: 5px;
            }

            .zero-percent-card {
                width: 160px;
                height: 160px;
            }

            .zero-percent-card strong {
                font-size: 58px;
            }

            .zero-orbit-one {
                width: 220px;
                height: 220px;
            }

            .zero-orbit-two {
                width: 275px;
                height: 275px;
            }

            .smart-grid {
                grid-template-columns: 1fr;
            }

            .smart-card {
                padding: 25px;
            }

            .zero-emi-section {
                padding-top: 15px;
            }

            .zero-emi-card {
                min-height: auto;
                padding: 32px 24px;
                flex-direction: column;
                align-items: flex-start;
            }

            .zero-emi-content h2 {
                font-size: 30px;
            }

            .zero-emi-content p {
                font-size: 13px;
            }

            .zero-emi-points {
                flex-direction: column;
                align-items: stretch;
            }

            .zero-emi-points div {
                width: 100%;
            }

            .zero-emi-btn {
                width: 100%;
                text-align: center;
            }

            .zero-emi-visual {
                width: 100%;
                min-width: 0;
                margin-top: 8px;
            }

            .hero-zero-emi {
                width: 100%;
                justify-content: flex-start;
            }

            .feature-grid {
                grid-template-columns: 1fr;
            }

            nav {
                height: 68px;
            }


            .logo img {
                height: 36px;

                max-width: 150px;
            }


            .nav-actions {
                display: none;
            }


            .mobile-menu-btn {
                width: 40px;
                height: 40px;

                font-size: 21px;
            }


            .nav-links {
                top: 68px;
            }


            .hero {
                padding: 60px 0 80px;
            }


            .hero h1 {
                font-size: 42px;

                letter-spacing: -2px;
            }


            .hero-description {
                font-size: 15px;
            }


            .hero-buttons {
                flex-direction: column;
            }


            .primary-btn,
            .secondary-btn {
                width: 100%;

                text-align: center;
            }


            .emi-card {
                width: 100%;

                max-width: 390px;

                height: 235px;

                padding: 23px;
            }


            .floating-offer {
                right: 0;

                bottom: -35px;
            }


            .trust-content {
                flex-wrap: wrap;

                justify-content: center;

                padding: 20px 0;
            }


            .trust-item {
                font-size: 11px;
            }


            .section {
                padding: 70px 0;
            }


            .section-header h2 {
                font-size: 30px;
            }


            .offer-card {
                padding: 28px;

                flex-direction: column;

                text-align: center;
            }


            .price-area {
                text-align: center;
            }


            .new-price {
                font-size: 48px;
            }


            .cta {
                padding: 40px 22px;
            }


            .cta h2 {
                font-size: 28px;
            }
        }

    

        /* =====================================================
           EMI CREDITS HOMEPAGE — PREMIUM V2 OVERRIDES
        ===================================================== */

        :root {
            --pg-navy: #071b36;
            --pg-blue: #1769e0;
            --pg-blue-dark: #0b4eb5;
            --pg-green: #1f8f4d;
            --pg-green-light: #a7f3c4;
            --pg-text: #173454;
            --pg-muted: #71839a;
            --pg-border: #e3eaf3;
            --pg-bg: #f6f9fd;
        }

        body {
            background:
                linear-gradient(
                    180deg,
                    #ffffff 0%,
                    #f7faff 45%,
                    #f4f8fd 100%
                );
        }

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

        header,
        .navbar,
        nav {
            backdrop-filter: blur(14px);
        }

        /* ---------- Hero ---------- */

        .hero {
            position: relative;
            overflow: hidden;

            background:
                radial-gradient(
                    circle at 78% 35%,
                    rgba(23,105,224,.11),
                    transparent 32%
                ),
                radial-gradient(
                    circle at 8% 20%,
                    rgba(31,143,77,.07),
                    transparent 27%
                );
        }

        .hero::before {
            content: "";

            position: absolute;

            width: 520px;
            height: 520px;

            right: -250px;
            top: -250px;

            border-radius: 50%;

            border: 1px solid
                rgba(23,105,224,.08);
        }

        .hero h1 {
            max-width: 760px;

            font-size: clamp(
                48px,
                6vw,
                78px
            );

            line-height: .98;

            letter-spacing: -3.4px;

            color: var(--pg-navy);
        }

        .hero h1 span {
            display: block;

            background:
                linear-gradient(
                    100deg,
                    #1769e0 5%,
                    #2788ec 45%,
                    #1f8f4d 100%
                );

            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero p {
            max-width: 600px;

            color: #63758c;

            font-size: 16px;

            line-height: 1.8;
        }

        .hero-note {
            color: #49617d !important;

            font-weight: 700;
        }

        .hero-zero-emi {
            background:
                rgba(240,251,245,.92);

            border:
                1px solid #cfeede;

            box-shadow:
                0 14px 35px
                rgba(31,143,77,.08);
        }

        .hero-trust-row {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;

            margin-top: 18px;
        }

        .hero-trust-row span {
            padding: 7px 10px;

            border-radius: 50px;

            background: #f5f8fc;

            border: 1px solid #e4ebf3;

            color: #63758c;

            font-size: 9px;
            font-weight: 800;
        }

        /* ---------- Hero visual / EMI card ---------- */

        .hero-visual {
            filter:
                drop-shadow(
                    0 28px 55px
                    rgba(11,55,108,.15)
                );
        }

        .emi-card {
            background:
                linear-gradient(
                    145deg,
                    #071b36 0%,
                    #0c3e78 50%,
                    #1769e0 100%
                );

            border:
                1px solid
                rgba(255,255,255,.12);

            box-shadow:
                0 30px 70px
                rgba(7,49,96,.22);
        }

        .emi-card::after {
            background:
                linear-gradient(
                    135deg,
                    rgba(255,255,255,.08),
                    transparent
                );
        }

        .floating-offer {
            background:
                linear-gradient(
                    135deg,
                    #ffffff,
                    #f2f8ff
                );

            border:
                1px solid #dbe7f5;

            box-shadow:
                0 18px 45px
                rgba(18,64,110,.16);
        }

        /* ---------- Section rhythm ---------- */

        .section {
            position: relative;
        }

        .section-header h2 {
            color: var(--pg-navy);

            letter-spacing: -1px;
        }

        .section-header p {
            color: var(--pg-muted);
        }

        .section-label {
            color: var(--pg-blue);
            letter-spacing: 1.7px;
            font-weight: 900;
        }

        /* ---------- Zero Cost EMI ---------- */

        .zero-feature-section {
            padding-top: 82px;
        }

        .zero-feature {
            min-height: 410px;

            grid-template-columns:
                minmax(0, 1.2fr)
                minmax(250px, .8fr);

            padding:
                64px 68px;

            border-radius: 32px;

            background:
                radial-gradient(
                    circle at 86% 45%,
                    rgba(42,139,255,.30),
                    transparent 27%
                ),
                radial-gradient(
                    circle at 12% 100%,
                    rgba(31,143,77,.13),
                    transparent 31%
                ),
                linear-gradient(
                    135deg,
                    #061a33 0%,
                    #0b3262 52%,
                    #0f5fcf 100%
                );

            box-shadow:
                0 35px 80px
                rgba(8,49,95,.18);
        }

        .zero-feature-copy h2 {
            font-size: clamp(
                38px,
                4.5vw,
                58px
            );

            letter-spacing: -2.4px;
        }

        .zero-feature-copy h2 span {
            color: var(--pg-green-light);
        }

        .zero-feature-copy p {
            max-width: 610px;
            color: #c7d8ec;
        }

        .zero-pills span {
            background:
                rgba(255,255,255,.08);

            border-color:
                rgba(255,255,255,.13);
        }

        .zero-feature .primary-btn {
            padding:
                13px 20px;

            border-radius: 10px;

            box-shadow:
                0 12px 30px
                rgba(0,0,0,.14);
        }

        .zero-percent-card {
            width: 210px;
            height: 210px;

            border-radius: 48px;

            transform: rotate(-5deg);

            box-shadow:
                0 32px 65px
                rgba(0,0,0,.24);
        }

        .zero-percent-card strong {
            font-size: 78px;
        }

        /* ---------- Smart cards ---------- */

        .smart-section {
            padding-top: 75px;
            padding-bottom: 75px;

            background:
                linear-gradient(
                    180deg,
                    #f5f9fe,
                    #eef4fb
                );
        }

        .smart-grid {
            gap: 20px;
        }

        .smart-card {
            min-height: 245px;

            padding: 32px;

            border-radius: 22px;

            border-color:
                #e0e8f2;

            box-shadow:
                0 14px 38px
                rgba(28,64,101,.055);
        }

        .smart-card.featured {
            background:
                linear-gradient(
                    145deg,
                    #f0f7ff,
                    #f0fbf5
                );

            border:
                1px solid #cfe1f2;
        }

        /* ---------- Trust strip ---------- */

        .trust-strip {
            padding: 0 0 20px;

            background: #f4f8fd;
        }

        .trust-strip-inner {
            display: grid;

            grid-template-columns:
                1fr auto 1fr auto 1fr;

            align-items: center;

            padding: 23px 28px;

            border:
                1px solid #dfe8f2;

            border-radius: 20px;

            background:
                rgba(255,255,255,.92);

            box-shadow:
                0 12px 32px
                rgba(29,66,105,.045);
        }

        .trust-item {
            display: flex;
            flex-direction: column;

            gap: 3px;

            text-align: center;
        }

        .trust-item strong {
            color: var(--pg-blue);

            font-size: 22px;
            font-weight: 950;

            letter-spacing: -.7px;
        }

        .trust-item span {
            color: #75869b;

            font-size: 9px;
            font-weight: 700;
        }

        .trust-divider {
            width: 1px;
            height: 35px;

            background: #e1e8f0;
        }

        /* ---------- Terms ---------- */

        .emi-terms-note {
            background:
                #eef3f8;

            color:
                #71839a;

            font-size: 9px;
        }

        /* ---------- Buttons ---------- */

        .primary-btn,
        .zero-emi-btn {
            transition:
                transform .2s ease,
                box-shadow .2s ease;
        }

        .primary-btn:hover,
        .zero-emi-btn:hover {
            transform:
                translateY(-2px);

            box-shadow:
                0 15px 32px
                rgba(23,105,224,.16);
        }

        /* ---------- Mobile ---------- */

        @media (max-width: 800px) {

            .hero h1 {
                font-size: 48px;
                letter-spacing: -2.2px;
            }

            .zero-feature {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .zero-feature-copy p {
                margin-left: auto;
                margin-right: auto;
            }

            .zero-pills {
                justify-content: center;
            }

            .zero-feature-visual {
                margin-top: 12px;
            }

            .trust-strip-inner {
                grid-template-columns: 1fr;

                gap: 17px;

                padding: 22px 18px;
            }

            .trust-divider {
                width: 70px;
                height: 1px;

                margin: 0 auto;
            }

        }

        @media (max-width: 650px) {

            .hero h1 {
                font-size: 40px;
                letter-spacing: -1.7px;
            }

            .hero p {
                font-size: 14px;
            }

            .hero-trust-row {
                display: grid;
                grid-template-columns: 1fr;
            }

            .hero-trust-row span {
                text-align: center;
            }

            .zero-feature-section {
                padding-top: 45px;
            }

            .zero-feature {
                padding: 34px 22px;
                border-radius: 24px;
            }

            .zero-feature-copy h2 {
                font-size: 35px;
            }

            .zero-percent-card {
                width: 170px;
                height: 170px;
                border-radius: 38px;
            }

            .zero-percent-card strong {
                font-size: 62px;
            }

            .smart-section {
                padding-top: 55px;
                padding-bottom: 55px;
            }

            .smart-card {
                min-height: auto;
                padding: 27px;
            }

        }

</style>
</head>


<body>


<!-- ==========================================
     HEADER
========================================== -->

<header>

    <div class="container">

        <nav>


            <!-- LOGO -->

            <a href="/" class="logo">

                <img
                    src="{{ asset('images/logo.png') }}"
                    alt="EMI CREDITS"
                >

            </a>


            <!-- NAV LINKS -->

            <div class="nav-links" id="navLinks">

                <a href="#benefits">
                    Benefits
                </a>

                <a href="#loans">
                    Loans
                </a>

                <a href="#investors">
                    Investors
                </a>

                <a href="#how-it-works">
                    How It Works
                </a>

                <a href="#offer">
                    Offer
                </a>


                @auth

                    <a href="{{ route('client.dashboard') }}">
                        My Application
                    </a>

                @else

                    <a href="{{ route('login') }}">
                        Login
                    </a>

                    <a href="{{ route('register') }}">
                        Get Started
                    </a>

                @endauth

            </div>


            <!-- DESKTOP ACTIONS -->

            <div class="nav-actions">

                @auth

                    <a
                        href="{{ route('client.dashboard') }}"
                        class="signup-btn"
                    >
                        My Application
                    </a>

                @else

                    <a
                        href="{{ route('login') }}"
                        class="login-btn"
                    >
                        Login
                    </a>

                    <a
                        href="{{ route('register') }}"
                        class="signup-btn"
                    >
                        Get Started
                    </a>

                @endauth

            </div>


            <!-- MOBILE BUTTON -->

            <button
                class="mobile-menu-btn"
                id="mobileMenuBtn"
                aria-label="Open menu"
                aria-expanded="false"
            >
                ☰
            </button>


        </nav>

    </div>

</header>



<!-- ==========================================
     HERO
========================================== -->

<section class="hero">

    <div class="container">


        <div class="hero-content">


            <div class="hero-badge">

                ✦ Smart EMI Solutions

            </div>


            <h1>
                Zero Cost EMI.
                <span>0% Interest.</span>
                </h1>


            <p class="hero-description">

                Get your EMI CREDITS EMI Card and enjoy
                eligible purchases with Zero Cost EMI
                and 0% interest.

                Simple digital application, transparent
                process and convenient instalments.

            </p>


            <div class="hero-buttons">

                @auth

                    <a
                        href="{{ route('client.dashboard') }}"
                        class="primary-btn"
                    >
                        My Application →
                    </a>

                @else

                    <a
                        href="{{ route('register') }}"
                        class="primary-btn"
                    >
                        Get Your Card →
                    </a>

                @endauth


                <a
                    href="#how-it-works"
                    class="secondary-btn"
                >
                    How It Works
                </a>

            </div>


            <div class="hero-note">

                ✓ Simple application
                &nbsp;&nbsp;
                ✓ Digital process

            </div>

            <div class="hero-zero-emi">

                <div class="zero-emi-icon">0%</div>

                <div>
                    <strong>Zero Cost EMI</strong>
                    <span>No Interest • 0% Interest</span>
                </div>

            </div>


        </div>



        <!-- EMI CARD -->

        <div class="card-area">


            <div class="emi-card">


                <div class="card-top">


                    <div class="card-brand">

                        EMI CREDITS

                    </div>


                    <div class="card-type">

                        EMI CARD

                    </div>


                </div>


                <div class="chip"></div>


                <div class="card-number">

                    •••• &nbsp;
                    •••• &nbsp;
                    •••• &nbsp;
                    4582

                </div>


                <div class="card-bottom">

                    <span>
                        EMI CREDITS CARD
                    </span>

                    <span>
                        DIGITAL
                    </span>

                </div>


            </div>


            <!-- OFFER FLOATING -->

            <div class="floating-offer">

                <small>
                    ZERO COST EMI
                </small>

                <strong>
                    0% EMI
                </strong>

                <small>
                    No Interest • Zero Cost
                </small>

            </div>


        </div>

    </div>

</section>



<!-- ==========================================
     TRUST BAR
========================================== -->

<section class="trust-bar">

    <div class="container">


        <div class="trust-content">


            <div class="trust-item">

                <div class="trust-icon">
                    🔒
                </div>

                Secure Process

            </div>


            <div class="trust-item">

                <div class="trust-icon">
                    ⚡
                </div>

                Quick Application

            </div>


            <div class="trust-item">

                <div class="trust-icon">
                    📱
                </div>

                100% Online

            </div>


            <div class="trust-item">

                <div class="trust-icon">
                    💳
                </div>

                Digital Card

            </div>


        </div>

    </div>

</section>



<!-- ==========================================
     ZERO COST EMI HIGHLIGHT
========================================== -->

<section class="section zero-feature-section">

    <div class="container">

        <div class="zero-feature">

            <div class="zero-feature-copy">

                <div class="section-label">
                    ZERO COST EMI
                </div>

                <h2>
                    0% Interest.
                    <span>Zero Cost EMI.</span>
                </h2>

                <p>
                    Make eligible purchases today and pay in
                    simple EMI instalments without additional
                    interest.
                </p>

                <div class="zero-pills">
                    <span>✓ No Interest</span>
                    <span>✓ Zero Cost EMI</span>
                    <span>✓ Easy Instalments</span>
                </div>

                @auth
                    <a
                        href="{{ route('client.dashboard') }}"
                        class="primary-btn"
                    >
                        Open My Dashboard →
                    </a>
                @else
                    <a
                        href="{{ route('register') }}"
                        class="primary-btn"
                    >
                        Apply for 0% EMI →
                    </a>
                @endauth

            </div>

            <div class="zero-feature-visual">

                <div class="zero-orbit zero-orbit-one"></div>
                <div class="zero-orbit zero-orbit-two"></div>

                <div class="zero-percent-card">

                    <small>
                        INTEREST
                    </small>

                    <strong>
                        0%
                    </strong>

                    <span>
                        ZERO COST EMI
                    </span>

                </div>

            </div>

        </div>

    </div>

</section>



<!-- ==========================================
     LOAN PRODUCTS
========================================== -->

<section
    class="section loan-products-section"
    id="loans"
>

    <div class="container">

        <div class="section-header">

            <div class="section-label">
                LOAN SOLUTIONS
            </div>

            <h2>
                Financing for every need
            </h2>

            <p>
                Flexible financing solutions designed for
                personal, business and everyday financial needs.
            </p>

        </div>

        <div class="loan-products-grid">

            <div class="loan-product-card">

                <div class="loan-product-icon">
                    👤
                </div>

                <div class="loan-product-content">

                    <span class="loan-product-tag">
                        PERSONAL
                    </span>

                    <h3>
                        Personal Loan
                    </h3>

                    <p>
                        Manage planned expenses with a simple
                        digital application and flexible repayment options.
                    </p>

                    <div class="loan-product-points">
                        <span>✓ Flexible Amount</span>
                        <span>✓ Easy EMI</span>
                        <span>✓ Digital Process</span>
                    </div>

                </div>

                @auth
                    <a
                        href="{{ route('client.loans') }}"
                        class="loan-product-btn"
                    >
                        Apply Now →
                    </a>
                @else
                    <a
                        href="{{ route('register') }}"
                        class="loan-product-btn"
                    >
                        Apply Now →
                    </a>
                @endauth

            </div>


            <div class="loan-product-card featured">

                <div class="loan-product-icon">
                    🏢
                </div>

                <div class="loan-product-content">

                    <span class="loan-product-tag">
                        BUSINESS
                    </span>

                    <h3>
                        Business Loan
                    </h3>

                    <p>
                        Financing support for business requirements,
                        working capital and planned expansion.
                    </p>

                    <div class="loan-product-points">
                        <span>✓ Business Support</span>
                        <span>✓ Flexible EMI</span>
                        <span>✓ Digital Application</span>
                    </div>

                </div>

                @auth
                    <a href="{{ route('client.loans') }}" class="loan-product-btn">
                        Apply Now →
                    </a>
                @else
                    <a href="{{ route('register') }}" class="loan-product-btn">
                        Apply Now →
                    </a>
                @endauth

            </div>


            <div class="loan-product-card">

                <div class="loan-product-icon">
                    🏥
                </div>

                <div class="loan-product-content">

                    <span class="loan-product-tag">
                        MEDICAL
                    </span>

                    <h3>
                        Medical Loan
                    </h3>

                    <p>
                        Financial assistance for eligible medical
                        and treatment-related expenses.
                    </p>

                    <div class="loan-product-points">
                        <span>✓ Treatment Support</span>
                        <span>✓ Easy EMI</span>
                        <span>✓ Simple Process</span>
                    </div>

                </div>

                @auth
                    <a href="{{ route('client.loans') }}" class="loan-product-btn">
                        Apply Now →
                    </a>
                @else
                    <a href="{{ route('register') }}" class="loan-product-btn">
                        Apply Now →
                    </a>
                @endauth

            </div>


            <div class="loan-product-card">

                <div class="loan-product-icon">
                    ⚡
                </div>

                <div class="loan-product-content">

                    <span class="loan-product-tag">
                        EMERGENCY
                    </span>

                    <h3>
                        Emergency Loan
                    </h3>

                    <p>
                        Quick access to financing for eligible
                        unexpected financial requirements.
                    </p>

                    <div class="loan-product-points">
                        <span>✓ Quick Application</span>
                        <span>✓ Flexible Repayment</span>
                        <span>✓ Digital Process</span>
                    </div>

                </div>

                @auth
                    <a href="{{ route('client.loans') }}" class="loan-product-btn">
                        Apply Now →
                    </a>
                @else
                    <a href="{{ route('register') }}" class="loan-product-btn">
                        Apply Now →
                    </a>
                @endauth

            </div>


            <div class="loan-product-card">

                <div class="loan-product-icon">
                    🏠
                </div>

                <div class="loan-product-content">

                    <span class="loan-product-tag">
                        HOME
                    </span>

                    <h3>
                        Home Loan
                    </h3>

                    <p>
                        Financing solutions for eligible home
                        purchase and related requirements.
                    </p>

                    <div class="loan-product-points">
                        <span>✓ Flexible Tenure</span>
                        <span>✓ Structured EMI</span>
                        <span>✓ Digital Journey</span>
                    </div>

                </div>

                @auth
                    <a href="{{ route('client.loans') }}" class="loan-product-btn">
                        Apply Now →
                    </a>
                @else
                    <a href="{{ route('register') }}" class="loan-product-btn">
                        Apply Now →
                    </a>
                @endauth

            </div>


            <div class="loan-product-card">

                <div class="loan-product-icon">
                    🚗
                </div>

                <div class="loan-product-content">

                    <span class="loan-product-tag">
                        VEHICLE
                    </span>

                    <h3>
                        Vehicle Loan
                    </h3>

                    <p>
                        Financing options for eligible vehicle
                        purchase and transportation requirements.
                    </p>

                    <div class="loan-product-points">
                        <span>✓ Vehicle Financing</span>
                        <span>✓ Easy EMI</span>
                        <span>✓ Digital Application</span>
                    </div>

                </div>

                @auth
                    <a href="{{ route('client.loans') }}" class="loan-product-btn">
                        Apply Now →
                    </a>
                @else
                    <a href="{{ route('register') }}" class="loan-product-btn">
                        Apply Now →
                    </a>
                @endauth

            </div>

        </div>

    </div>

</section>


<!-- ==========================================
     INVESTORS
========================================== -->

<section
    class="section investors-section"
    id="investors"
>

    <div class="container">

        <div class="investor-card">

            <div class="investor-content">

                <div class="section-label">
                    FOR INVESTORS
                </div>

                <h2>
                    Be part of the
                    <span>digital finance ecosystem.</span>
                </h2>

                <p>
                    Explore opportunities to participate in a
                    technology-driven financial platform focused
                    on simple, transparent and structured financing.
                </p>

                <div class="investor-points">

                    <div>
                        <strong>01</strong>
                        <span>Digital-first platform</span>
                    </div>

                    <div>
                        <strong>02</strong>
                        <span>Structured financing</span>
                    </div>

                    <div>
                        <strong>03</strong>
                        <span>Transparent processes</span>
                    </div>

                </div>

                <a
                    href="#investor-contact"
                    class="investor-btn"
                >
                    Investor Enquiry →
                </a>

            </div>

            <div class="investor-visual">

                <div class="investor-orbit investor-orbit-one"></div>
                <div class="investor-orbit investor-orbit-two"></div>

                <div class="investor-panel">

                    <div class="investor-panel-icon">
                        ↗
                    </div>

                    <small>
                        INVESTOR
                    </small>

                    <strong>
                        Digital Finance
                    </strong>

                    <span>
                        Structured • Transparent • Technology Driven
                    </span>

                </div>

            </div>

        </div>

    </div>

</section>



<!-- ==========================================
     BENEFITS
========================================== -->

<section
    class="section features-section"
    id="benefits"
>

    <div class="container">


        <div class="section-header">


            <div class="section-label">
                Benefits
            </div>


            <h2>
                Everything made simple
            </h2>


            <p>

                A simple digital experience
                designed around your application.

            </p>


        </div>



        <div class="feature-grid">


            <div class="feature-card">


                <div class="feature-icon">
                    ⚡
                </div>


                <h3>
                    Quick Application
                </h3>


                <p>

                    Complete your application online
                    through a simple step-by-step process.

                </p>


            </div>



            <div class="feature-card">


                <div class="feature-icon">
                    🔐
                </div>


                <h3>
                    Secure Process
                </h3>


                <p>

                    Your application information is
                    handled through a secure digital process.

                </p>


            </div>



            <div class="feature-card">


                <div class="feature-icon">
                    💳
                </div>


                <h3>
                    Digital Card
                </h3>


                <p>

                    View your personalised card once
                    your application process is completed.

                </p>


            </div>



            <div class="feature-card">

                <div class="feature-icon">
                    0%
                </div>

                <h3>
                    Zero Cost EMI
                </h3>

                <p>
                    Eligible purchases can be converted
                    into EMI with 0% interest.
                </p>

            </div>


        </div>

    </div>

</section>



<!-- ==========================================
     HOW IT WORKS
========================================== -->

<section
    class="section"
    id="how-it-works"
>

    <div class="container">


        <div class="section-header">


            <div class="section-label">
                Simple Process
            </div>


            <h2>
                How EMI CREDITS works
            </h2>


            <p>
                From application to card management, everything stays simple and digital.
            </p>


        </div>



        <div class="step-grid">


            <div class="step">


                <div class="step-number">
                    01
                </div>


                <h3>
                    Create Account
                </h3>


                <p>

                    Sign up and start your application
                    with your basic information.

                </p>


            </div>



            <div class="step">


                <div class="step-number">
                    02
                </div>


                <h3>
                    Complete Details
                </h3>


                <p>

                    Submit your personal, KYC and
                    employment information.

                </p>


            </div>



            <div class="step">


                <div class="step-number">
                    03
                </div>


                <h3>
                    Unlock Your Card
                </h3>


                <p>

                    Complete the required payment
                    and access your personalised card.

                </p>


            </div>


        </div>

    </div>

</section>



<!-- ==========================================
     SMART EMI EXPERIENCE
========================================== -->

<section class="section smart-section">

    <div class="container">

        <div class="section-header">

            <div class="section-label">
                SMART EMI EXPERIENCE
            </div>

            <h2>
                One card. Simple digital finance.
            </h2>

            <p>
                Apply online, complete verification and
                manage your EMI card from one place.
            </p>

        </div>

        <div class="smart-grid">

            <div class="smart-card">

                <div class="smart-number">
                    01
                </div>

                <div class="smart-icon">🛍️</div>

                <h3>
                    Choose what you need
                </h3>

                <p>
                    Use your eligible EMI facility for
                    planned purchases.
                </p>

            </div>

            <div class="smart-card featured">

                <div class="smart-number">
                    02
                </div>

                <div class="smart-icon">0%</div>

                <h3>
                    Pay with 0% Interest
                </h3>

                <p>
                    Eligible Zero Cost EMI plans help
                    you spread the purchase into instalments.
                </p>

            </div>

            <div class="smart-card">

                <div class="smart-number">
                    03
                </div>

                <div class="smart-icon">📱</div>

                <h3>
                    Manage digitally
                </h3>

                <p>
                    Track your application, card and
                    payment information from your dashboard.
                </p>

            </div>

        </div>

    </div>

</section>


<!-- ==========================================
     TRUST STRIP
========================================== -->

<section class="trust-strip">

    <div class="container">

        <div class="trust-strip-inner">

            <div class="trust-item">
                <strong>0%</strong>
                <span>Interest on eligible Zero Cost EMI plans</span>
            </div>

            <div class="trust-divider"></div>

            <div class="trust-item">
                <strong>100%</strong>
                <span>Digital application journey</span>
            </div>

            <div class="trust-divider"></div>

            <div class="trust-item">
                <strong>1</strong>
                <span>Dashboard to manage your EMI journey</span>
            </div>

        </div>

    </div>

</section>


<div id="investor-contact" style="position:relative; top:-20px;"></div>

<!-- ==========================================
     CTA
========================================== -->

<section class="cta-section">

    <div class="container">


        <div class="cta">


            <h2>
                Ready to get started?
            </h2>


            <p>

                Apply online and begin your
                EMI CREDITS journey.

            </p>


            @auth

                <a
                    href="{{ route('client.dashboard') }}"
                    class="primary-btn"
                >
                    My Application →
                </a>

            @else

                <a
                    href="{{ route('register') }}"
                    class="primary-btn"
                >
                    Start Application →
                </a>

            @endauth


        </div>

    </div>

</section>



<!-- ==========================================
     EMI TERMS NOTE
========================================== -->

<div class="emi-terms-note">

    <div class="container">

        * Zero Cost EMI / 0% interest is subject to applicable products,
        plans, eligibility and terms.

    </div>

</div>


<!-- ==========================================
     FOOTER
========================================== -->

<footer class="site-footer">

    <div class="footer-container">

        {{-- =====================================================
             COMPANY
        ====================================================== --}}
        <div class="footer-column footer-company">

            <h3>EMI CREDITS</h3>

         <p class="footer-description">
    EMI CREDITS is a technology-driven financial services platform dedicated
    to delivering simple, transparent, and flexible financing solutions for
    individuals and businesses.<br><br>

    Our platform is designed to make access to structured EMI and financing
    solutions more convenient through a seamless digital experience. By
    combining technology, efficient processes, and customer-focused service,
    EMI CREDITS aims to simplify the financing journey from application and
    eligibility to approval and repayment.
</p>
        </div>


        {{-- =====================================================
             QUICK LINKS
        ====================================================== --}}
        <div class="footer-column">

            <h4>Quick Links</h4>

            <ul class="footer-links">
                
                <li>
                    <a href="https://loan.eduintx.shop/admin/login">
                        Admin
                    </a>
                </li>
                <li>
                    <a href="{{ route('client.dashboard') }}">
                        Home
                    </a>
                </li>

                <li>
                    <a href="{{ route('client.emi-card') }}">
                        EMI Card
                    </a>
                </li>

                <li>
                    <a href="{{ route('client.loans') }}">
                        Loans
                    </a>
                </li>

                <li>
                    <a href="{{ route('client.payments') }}">
                        Payments
                    </a>
                </li>

                <li>
                    <a href="{{ route('client.support.index') }}">
                        Support
                    </a>
                </li>

            </ul>

        </div>


        {{-- =====================================================
             CORPORATE OFFICE
        ====================================================== --}}
        <div class="footer-column footer-contact">

            <h4>Corporate Office</h4>

            {{-- ADDRESS --}}
            <div class="contact-item">

                <div class="contact-icon">
                    <svg viewBox="0 0 24 24"
                         fill="none"
                         stroke="currentColor"
                         stroke-width="1.8">

                        <path d="M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z"/>
                        <circle cx="12" cy="10" r="2.5"/>

                    </svg>
                </div>

                <div class="contact-content">

                    <span class="contact-label">
                        Registered Office
                    </span>

                    <p>
                        Hi-Tech Info Park,<br>
                        Phase-2, D-188/98,<br>
                        Koramangala,<br>
                        Bangalore – 560100
                    </p>

                </div>

            </div>


            {{-- EMAIL --}}
            <div class="contact-item">

                <div class="contact-icon">

                    <svg viewBox="0 0 24 24"
                         fill="none"
                         stroke="currentColor"
                         stroke-width="1.8">

                        <rect x="3" y="5" width="18" height="14" rx="2"/>
                        <path d="m3 7 9 6 9-6"/>

                    </svg>

                </div>

                <div class="contact-content">

                    <span class="contact-label">
                        Email
                    </span>

                    <a href="mailto:info@nexfinserv.com">
                        info@emicredits.com
                    </a>

                    <a href="mailto:mail@nexfinserv.com">
                        mail@emicredits.com
                    </a>

                </div>

            </div>

        </div>


        {{-- =====================================================
             LEGAL
        ====================================================== --}}
        <div class="footer-column">

            <h4>Legal</h4>

            <ul class="footer-links">

                <li>
                    <a href="#">
                        Terms &amp; Conditions
                    </a>
                </li>

                <li>
                    <a href="#">
                        Privacy Policy
                    </a>
                </li>

                <li>
                    <a href="#">
                        Return Policy
                    </a>
                </li>

                <li>
                    <a href="#">
                        Refund Policy
                    </a>
                </li>

            </ul>

        </div>

    </div>


    {{-- =========================================================
         FOOTER BOTTOM
    ========================================================== --}}
    <div class="footer-bottom">

        <div class="footer-bottom-inner">

            <div class="footer-copyright">
                © {{ date('Y') }} EMI CREDITS.
                All rights reserved.
            </div>

            <div class="footer-category">
                Financial Services
            </div>

        </div>

    </div>

</footer>


<style>


        /* ============================================================
           LOAN PRODUCTS
        ============================================================ */

        .loan-products-section {
            background: linear-gradient(180deg, #ffffff 0%, #f5f9fe 100%);
        }

        .loan-products-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
        }

        .loan-product-card {
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding: 28px;
            min-height: 315px;
            border-radius: 22px;
            background: #ffffff;
            border: 1px solid #e1e9f3;
            box-shadow: 0 14px 38px rgba(28,64,101,.055);
            transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
        }

        .loan-product-card:hover {
            transform: translateY(-5px);
            border-color: #c9dced;
            box-shadow: 0 22px 48px rgba(28,64,101,.10);
        }

        .loan-product-card.featured {
            background: linear-gradient(145deg, #f0f7ff, #f1fbf5);
            border-color: #cfe1f2;
        }

        .loan-product-icon {
            width: 52px;
            height: 52px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            border-radius: 15px;
            background: #edf5ff;
            color: #1769e0;
            font-size: 21px;
        }

        .loan-product-card.featured .loan-product-icon {
            background: #eaf8ef;
        }

        .loan-product-content {
            flex: 1;
        }

        .loan-product-tag {
            display: inline-block;
            margin-bottom: 7px;
            color: #1769e0;
            font-size: 9px;
            font-weight: 900;
            letter-spacing: 1.1px;
        }

        .loan-product-card h3 {
            margin: 0 0 9px;
            color: #10213f;
            font-size: 20px;
            line-height: 1.2;
            letter-spacing: -.4px;
        }

        .loan-product-card p {
            margin: 0;
            color: #77869b;
            font-size: 13px;
            line-height: 1.7;
        }

        .loan-product-points {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin-top: 17px;
        }

        .loan-product-points span {
            padding: 6px 8px;
            border-radius: 7px;
            background: #f5f8fc;
            border: 1px solid #e5ebf3;
            color: #63758c;
            font-size: 9px;
            font-weight: 700;
        }

        .loan-product-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-top: 22px;
            width: fit-content;
            padding: 10px 14px;
            border-radius: 9px;
            background: #1769e0;
            color: #ffffff;
            font-size: 11px;
            font-weight: 800;
            transition: .2s ease;
        }

        .loan-product-btn:hover {
            background: #0f56c0;
            transform: translateY(-1px);
        }

        @media (max-width: 950px) {
            .loan-products-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 650px) {
            .loan-products-section {
                padding-top: 55px;
                padding-bottom: 55px;
            }

            .loan-products-grid {
                grid-template-columns: 1fr;
                gap: 14px;
            }

            .loan-product-card {
                min-height: auto;
                padding: 25px;
            }

            .loan-product-card h3 {
                font-size: 19px;
            }

            .loan-product-btn {
                width: 100%;
            }
        }


        /* ============================================================
           INVESTORS
        ============================================================ */

        .investors-section {
            background: #f0f5fc;
        }

        .investor-card {
            position: relative;
            overflow: hidden;
            min-height: 390px;
            display: grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
            align-items: center;
            gap: 35px;
            padding: 58px 65px;
            border-radius: 30px;
            background:
                radial-gradient(circle at 82% 45%, rgba(42,139,255,.27), transparent 30%),
                linear-gradient(135deg, #061a33, #0c3f7b 60%, #1769e0);
            color: #ffffff;
            box-shadow: 0 30px 70px rgba(8,49,95,.16);
        }

        .investor-card::before {
            content: "";
            position: absolute;
            width: 450px;
            height: 450px;
            right: -170px;
            top: -190px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,.10);
        }

        .investor-content {
            position: relative;
            z-index: 2;
        }

        .investor-content .section-label {
            color: #79aaff;
        }

        .investor-content h2 {
            max-width: 650px;
            margin: 0 0 15px;
            font-size: clamp(38px, 4.5vw, 55px);
            line-height: 1.08;
            letter-spacing: -2px;
        }

        .investor-content h2 span {
            display: block;
            color: #9fd2ff;
        }

        .investor-content p {
            max-width: 590px;
            margin-bottom: 24px;
            color: #c7d8ec;
            font-size: 14px;
            line-height: 1.75;
        }

        .investor-points {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 26px;
        }

        .investor-points div {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 9px 11px;
            border-radius: 10px;
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.12);
        }

        .investor-points strong {
            color: #8fc8ff;
            font-size: 9px;
        }

        .investor-points span {
            color: #ffffff;
            font-size: 9px;
            font-weight: 700;
        }

        .investor-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 18px;
            border-radius: 9px;
            background: #ffffff;
            color: #1769e0;
            font-size: 11px;
            font-weight: 900;
            transition: .2s ease;
        }

        .investor-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(0,0,0,.15);
        }

        .investor-visual {
            position: relative;
            min-height: 270px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .investor-panel {
            position: relative;
            z-index: 5;
            width: 235px;
            min-height: 210px;
            padding: 30px 25px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            border-radius: 25px;
            background: linear-gradient(145deg, #ffffff, #e9f4ff);
            color: #0d315d;
            transform: rotate(-5deg);
            box-shadow: 0 30px 65px rgba(0,0,0,.22);
        }

        .investor-panel-icon {
            width: 43px;
            height: 43px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 18px;
            border-radius: 12px;
            background: #edf5ff;
            color: #1769e0;
            font-size: 18px;
            font-weight: 900;
        }

        .investor-panel small {
            color: #71839a;
            font-size: 9px;
            font-weight: 900;
            letter-spacing: 1.5px;
        }

        .investor-panel strong {
            margin: 5px 0 7px;
            color: #10213f;
            font-size: 22px;
            line-height: 1.2;
        }

        .investor-panel span {
            color: #71839a;
            font-size: 9px;
            line-height: 1.5;
        }

        .investor-orbit {
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,.14);
        }

        .investor-orbit-one {
            width: 260px;
            height: 260px;
        }

        .investor-orbit-two {
            width: 340px;
            height: 340px;
            border-color: rgba(117,184,255,.10);
        }

        @media (max-width: 800px) {
            .investor-card {
                grid-template-columns: 1fr;
                text-align: center;
                padding: 42px 28px;
            }

            .investor-content p {
                margin-left: auto;
                margin-right: auto;
            }

            .investor-points {
                justify-content: center;
            }

            .investor-btn {
                width: 100%;
            }

            .investor-visual {
                min-height: 240px;
            }
        }

        @media (max-width: 650px) {
            .investor-card {
                padding: 35px 22px;
                border-radius: 24px;
            }

            .investor-content h2 {
                font-size: 34px;
            }

            .investor-content p {
                font-size: 13px;
            }

            .investor-points {
                flex-direction: column;
                align-items: stretch;
            }

            .investor-points div {
                justify-content: center;
            }

            .investor-panel {
                width: 210px;
                min-height: 190px;
            }
        }


/* ============================================================
   EMI CREDITS — PROFESSIONAL FOOTER
   ============================================================ */

.site-footer {
    width: 100%;
    margin-top: 45px;

    background: #071b35;
    color: #d7e1ee;

    text-align: left;
}


/* ============================================================
   MAIN FOOTER CONTAINER
   ============================================================ */

.footer-container {

    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding: 52px 30px 48px;

    display: grid;

    grid-template-columns:
        1.35fr
        0.85fr
        1.45fr
        0.9fr;

    column-gap: 55px;

    row-gap: 35px;

    align-items: start;

}


/* ============================================================
   COLUMN
   ============================================================ */

.footer-column {

    min-width: 0;

    width: 100%;

    text-align: left;

}


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

.footer-company h3 {

    margin: 0 0 15px;

    color: #ffffff;

    font-size: 23px;

    line-height: 1.25;

    font-weight: 900;

    letter-spacing: -0.3px;

}


.footer-description {

    max-width: 315px;

    margin: 0;

    color: #aebed1;

    font-size: 14px;

    line-height: 1.75;

    font-weight: 500;

    text-align: left;

}


/* ============================================================
   COLUMN HEADINGS
   ============================================================ */

.footer-column h4 {

    margin: 1px 0 18px;

    padding: 0;

    color: #ffffff;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 800;

    letter-spacing: 0.1px;

    text-align: left;

}


/* ============================================================
   LINKS
   ============================================================ */

.footer-links {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 11px;

}


.footer-links li {

    margin: 0;

    padding: 0;

    width: 100%;

}


.footer-links a {

    display: inline-block;

    color: #aebed1;

    font-size: 13.5px;

    line-height: 1.5;

    font-weight: 500;

    text-decoration: none;

    text-align: left;

    transition:
        color 0.2s ease,
        transform 0.2s ease;

}


.footer-links a:hover {

    color: #ffffff;

    transform: translateX(4px);

}


/* ============================================================
   CONTACT
   ============================================================ */

.footer-contact {

    max-width: 330px;

}


.contact-item {

    width: 100%;

    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

    gap: 12px;

    margin: 0 0 21px;

}


.contact-item:last-child {

    margin-bottom: 0;

}


/* ============================================================
   CONTACT ICON
   ============================================================ */

.contact-icon {

    width: 31px;

    height: 31px;

    min-width: 31px;

    flex: 0 0 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 1px;

    border-radius: 8px;

    background: rgba(23, 105, 224, 0.16);

    color: #72a9ff;

}


.contact-icon svg {

    width: 17px;

    height: 17px;

    display: block;

}


/* ============================================================
   CONTACT CONTENT
   ============================================================ */

.contact-content {

    min-width: 0;

    flex: 1;

    text-align: left;

}


.contact-label {

    display: block;

    margin: 0 0 5px;

    color: #ffffff;

    font-size: 11px;

    line-height: 1.4;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}


.contact-content p {

    margin: 0;

    padding: 0;

    color: #aebed1;

    font-size: 13.5px;

    line-height: 1.7;

    font-weight: 500;

    text-align: left;

}


.contact-content a {

    display: block;

    width: fit-content;

    max-width: 100%;

    margin: 0 0 6px;

    padding: 0;

    color: #aebed1;

    font-size: 13.5px;

    line-height: 1.5;

    font-weight: 500;

    text-decoration: none;

    text-align: left;

    overflow-wrap: anywhere;

}


.contact-content a:last-child {

    margin-bottom: 0;

}


.contact-content a:hover {

    color: #ffffff;

}


/* ============================================================
   FOOTER BOTTOM
   ============================================================ */

.footer-bottom {

    width: 100%;

    border-top: 1px solid rgba(255,255,255,0.09);

}


.footer-bottom-inner {

    width: 100%;

    max-width: 1180px;

    margin: 0 auto;

    padding: 18px 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}


.footer-copyright,
.footer-category {

    color: #8194aa;

    font-size: 12px;

    line-height: 1.5;

    font-weight: 500;

    text-align: left;

}


.footer-category {

    text-align: right;

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 950px) {

    .footer-container {

        grid-template-columns:
            1.2fr
            1fr;

        column-gap: 45px;

        row-gap: 38px;

        padding:
            45px 28px 42px;

    }


    .footer-description {

        max-width: 380px;

    }


    .footer-contact {

        max-width: 380px;

    }

}


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

@media (max-width: 600px) {

    .site-footer {

        margin-top: 35px;

    }


    .footer-container {

        width: 100%;

        grid-template-columns: 1fr;

        column-gap: 0;

        row-gap: 32px;

        padding:
            38px 22px 36px;

    }


    .footer-column {

        width: 100%;

        max-width: none;

        text-align: left;

    }


    .footer-company h3 {

        font-size: 22px;

        margin-bottom: 13px;

    }


    .footer-description {

        max-width: 100%;

        font-size: 14px;

        line-height: 1.7;

    }


    .footer-column h4 {

        margin-bottom: 15px;

        font-size: 15px;

    }


    .footer-links {

        gap: 10px;

        align-items: flex-start;

    }


    .footer-links a {

        font-size: 13.5px;

    }


    .footer-contact {

        max-width: none;

    }


    .contact-item {

        gap: 11px;

        margin-bottom: 19px;

    }


    .contact-icon {

        width: 30px;

        height: 30px;

        min-width: 30px;

        flex-basis: 30px;

    }


    .contact-content p,
    .contact-content a {

        font-size: 13.5px;

    }


    .footer-bottom-inner {

        padding:
            16px 22px 18px;

        flex-direction: column;

        align-items: flex-start;

        justify-content: flex-start;

        gap: 6px;

    }


    .footer-copyright,
    .footer-category {

        width: 100%;

        text-align: left;

        font-size: 11.5px;

    }

}


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

@media (max-width: 380px) {

    .footer-container {

        padding-left: 18px;
        padding-right: 18px;

    }


    .footer-bottom-inner {

        padding-left: 18px;
        padding-right: 18px;

    }


    .footer-company h3 {

        font-size: 21px;

    }


    .footer-description,
    .footer-links a,
    .contact-content p,
    .contact-content a {

        font-size: 13px;

    }

}

</style>



<!-- ==========================================
     MOBILE MENU JAVASCRIPT
========================================== -->

<script>

    const mobileMenuBtn =
        document.getElementById('mobileMenuBtn');

    const navLinks =
        document.getElementById('navLinks');


    mobileMenuBtn.addEventListener('click', function () {

        navLinks.classList.toggle('active');


        const isOpen =
            navLinks.classList.contains('active');


        mobileMenuBtn.setAttribute(
            'aria-expanded',
            isOpen
        );


        if (isOpen) {

            mobileMenuBtn.innerHTML = '✕';

        } else {

            mobileMenuBtn.innerHTML = '☰';

        }

    });


    /*
     * Close menu after clicking a link
     */

    document
        .querySelectorAll('.nav-links a')
        .forEach(function (link) {

            link.addEventListener(
                'click',
                function () {

                    navLinks.classList.remove(
                        'active'
                    );

                    mobileMenuBtn.innerHTML = '☰';

                    mobileMenuBtn.setAttribute(
                        'aria-expanded',
                        'false'
                    );

                }
            );

        });

</script>


</body>
</html>