<!-- STEP 4 -->
                            <div class="form-step" id="step4">
                                
                                <div class="card-top">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="icon-box">
                                            <i class="fa-solid fa-circle-check"></i>
                                        </div>
                            
                                        <div>
                                            <div class="title">  Step 4. Financial Details</div>
                                            <div class="subtitle">
                                                Enter financial details and upload documents.
                                            </div>
                                        </div>
                                    </div>
                                </div>
        
                                <div class="card-content">
                                    <form>
                                        <div class="row g-4">
                                            
                                            <div class="col-md-6">
                                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                   Occupation *
                                                </label>
                                                <div class="position-relative">                    
                                                <input type="text" id="occupation" placeholder="Enter your working field"
                                                    class="tw-px-3 tw-py-3 ps-5 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                                                    </div>
                                            </div>

                                            <div class="col-md-6">
                                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                   Income particulars *
                                                </label>
                                                <div class="position-relative">
                                                <input type="text" id="income_particulars" placeholder="Enter your income particulars "
                                                    class="tw-px-3 tw-py-3 ps-5 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                                                    </div>
                                            </div>


                                            <div class="col-md-6">
                                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                   Repayment schedule *
                                                </label>
                                                <div class="position-relative">
                                                <input type="text" id="repayment_schedule" placeholder="Enter your Repayment schedule "
                                                    class="tw-px-3 tw-py-3 ps-5 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                                                    </div>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                   Renewal after *
                                                </label>
                                                <div class="position-relative">
                                                <input type="text" id="renewal_after" placeholder="Enter your Renewal after "
                                                    class="tw-px-3 tw-py-3 ps-5 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                                                    </div>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                   Security*
                                                </label>
                                                <div class="position-relative">
                                                <input type="text" id="security_purpose" placeholder="Enter your Security purpose "
                                                    class="tw-px-3 tw-py-3 ps-5 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                                                    </div>
                                            </div>

            

                                            <!-- Monthly Salary / Income -->
                                            <div class="col-md-6">
                                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                    Monthly Salary / Income *
                                                </label>
                                                <div class="position-relative">
            
                                                <span class="rupee-symbol">₹</span>
            
                                                <input type="number" id="monthly_income" placeholder="Enter monthly salary or income"
                                                    class="tw-px-3 tw-py-3 ps-5 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                                                    </div>
                                            </div>
            
                                            <!-- Other Income Sources -->
                                            <div class="col-md-6">
                                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                    Other Income Sources
                                                </label>
                                                
                                                <div class="position-relative">
            
                                                <span class="rupee-symbol">₹</span>
            
                                                <input type="text" id="other_income" placeholder="Enter other income sources"
                                                    class="tw-px-3 tw-py-3 ps-5 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                                                    </div>
                                            </div>
            
                                            <!-- Annual Income -->
                                            <div class="col-md-6">
                                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                    Annual Income *
                                                </label>
                                                
                                                <div class="position-relative">
            
                                                <span class="rupee-symbol">₹</span>
            
                                                <input type="number" id="annual_income" placeholder="Enter annual income"
                                                    class="tw-px-3 tw-py-3 ps-5 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                                            </div>
                                            </div>
            
                                            <!-- Salary Account Bank Name -->
                                            <!--<div class="col-md-6">-->
                                            <!--    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">-->
                                            <!--        Salary Account Bank Name *-->
                                            <!--    </label>-->
            
                                            <!--    <input type="text" id="salary_bank" placeholder="Enter bank name"-->
                                            <!--        class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />-->
                                            <!--</div>-->
            
                                            <!-- Savings / Investments -->
                                            <!--<div class="col-md-6">-->
                                            <!--    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">-->
                                            <!--        Savings / Investments-->
                                            <!--    </label>-->
            
                                            <!--    <input type="text" id="investments" placeholder="Enter savings or investment details"-->
                                            <!--        class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />-->
                                            <!--</div>-->
            
                                            <!-- Property Details -->
                                            <!--<div class="col-md-6">-->
                                            <!--    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">-->
                                            <!--        Property Details-->
                                            <!--    </label>-->
            
                                            <!--    <input type="text"   id="preperty_details"  placeholder="Enter property details"-->
                                            <!--        class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />-->
                                            <!--</div>-->
            
                                            <!-- Vehicles Owned -->
                                            <!--<div class="col-md-6">-->
                                            <!--    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">-->
                                            <!--        Vehicles Owned-->
                                            <!--    </label>-->
            
                                            <!--    <input type="text"  id="vehicles_owned"  placeholder="Enter vehicle details"-->
                                            <!--        class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />-->
                                            <!--</div>-->
            
                                            <!-- Net Worth -->
                                            <!--<div class="col-md-6">-->
                                            <!--    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">-->
                                            <!--        Net Worth (Optional)-->
                                            <!--    </label>-->
            
                                            <!--    <input type="number" id="networth"   placeholder="Enter estimated net worth"-->
                                            <!--        class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />-->
                                            <!--</div>-->
            
                                            <!-- Type of Security -->
                                            <!--<div class="col-md-6">-->
                                            <!--    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">-->
                                            <!--        Type of Security *-->
                                            <!--    </label>-->
            
                                            <!--    <select id="type_of_security"-->
                                            <!--        class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600">-->
                                            <!--        <option value="">Select Security Type</option>-->
                                            <!--        <option value="property">Property</option>-->
                                            <!--        <option value="fd">Fixed Deposit (FD)</option>-->
                                            <!--        <option value="gold">Gold</option>-->
                                            <!--        <option value="vehicle">Vehicle</option>-->
                                            <!--        <option value="land">Land</option>-->
                                            <!--        <option value="other">Other</option>-->
                                            <!--    </select>-->
                                            <!--</div>-->
            
                                            <!-- Estimated Value -->
                                            <!--<div class="col-md-6">-->
                                            <!--    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">-->
                                            <!--        Estimated Value *-->
                                            <!--    </label>-->
            
                                            <!--    <input type="number" id="estimated_value" placeholder="Enter estimated value"-->
                                            <!--        class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />-->
                                            <!--</div>-->
            
                                            <!-- Ownership Details -->
                                            <!--<div class="col-12">-->
                                            <!--    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">-->
                                            <!--        Ownership Details *-->
                                            <!--    </label>-->
            
                                            <!--    <textarea rows="4" id="ownership_details" placeholder="Enter ownership details"-->
                                            <!--        class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600"></textarea>-->
                                            <!--</div>-->
            
                                            <!--<h6>Bank Account Details</h6>-->
            
                                            <!-- Bank Name -->
                                            <!--<div class="col-md-6">-->
                                            <!--    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">-->
                                            <!--        Bank Name *-->
                                            <!--    </label>-->
            
                                            <!--    <input type="text" id="bank_details" placeholder="Enter bank name"-->
                                            <!--        class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />-->
                                            <!--</div>-->
            
                                            <!-- Account Number -->
                                            <!--<div class="col-md-6">-->
                                            <!--    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">-->
                                            <!--        Account Number *-->
                                            <!--    </label>-->
            
                                            <!--    <input type="text" id="account_number" placeholder="Enter account number"-->
                                            <!--        class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />-->
                                            <!--</div>-->
            
                                            <!-- IFSC Code -->
                                            <!--<div class="col-md-6">-->
                                            <!--    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">-->
                                            <!--        IFSC Code *-->
                                            <!--    </label>-->
            
                                            <!--    <input type="text" id="ifsc_code" placeholder="Enter IFSC code"-->
                                            <!--        class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />-->
                                            <!--</div>-->
            
                                            <!-- Bank Statement Upload -->
                                            <!--<div class="col-md-6">-->
                                            <!--    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">-->
                                            <!--        Last 6 Months Bank Statement *-->
                                            <!--    </label>-->
            
                                            <!--    <input type="file" id="bank_statements"-->
                                            <!--        class="form-control tw-py-3 tw-text-4 border-neutral-05 rounded-3 focus-visible-border-main-600" />-->
            
                                            <!--    <small class="text-muted d-block mt-2">-->
                                            <!--        Upload PDF, JPG, or PNG (Max 5MB)-->
                                            <!--    </small>-->
                                            <!--</div>-->
            
                                            <h6>Document Upload</h6>
            
                                            <!-- ID Proof Upload -->
                                            <div class="col-md-6">
                                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                    ID Proof (Aadhaar / PAN / Passport) *
                                                </label>
            
                                                <input type="file" id="id_proof"
                                                    class="form-control tw-py-3 tw-text-4 border-neutral-05 rounded-3 focus-visible-border-main-600" />
            
                                                <small class="text-muted d-block mt-2">
                                                    Upload PDF, JPG, or PNG
                                                </small>
                                                <div class="mt-2" id="idProofPreview" style="display:none;">
            
                                                        <a href="" target="_blank" id="idProofLink">
                                                            <i class="fa fa-eye"></i> View Uploaded File
                                                        </a>
                                                    
                                                    </div>
                                            </div>
            
                                            <!-- Address Proof Upload -->
                                            <div class="col-md-6">
                                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                    Address Proof *
                                                </label>
            
                                                <input type="file" id="address_proof"
                                                    class="form-control tw-py-3 tw-text-4 border-neutral-05 rounded-3 focus-visible-border-main-600" />
            
                                                <small class="text-muted d-block mt-2">
                                                    Upload PDF, JPG, or PNG
                                                </small>
                                                                                    <div class="mt-2" id="addressProofPreview" style="display:none;">
            
                                                        <a href="" target="_blank" id="addressProofLink">
                                                            <i class="fa fa-eye"></i> View Uploaded File
                                                        </a>
                                                    
                                                    </div>
                                            </div>
            
                                            <!-- Income Proof Upload -->
                                            <div class="col-md-6">
                                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                    Income Proof (Salary Slips / ITR) (If Applicable)
                                                </label>
            
                                                <input type="file" id="income_proof"
                                                    class="form-control tw-py-3 tw-text-4 border-neutral-05 rounded-3 focus-visible-border-main-600" />
            
                                                <small class="text-muted d-block mt-2">
                                                    Upload PDF, JPG, or PNG
                                                </small>
                                                                                    <div class="mt-2" id="incomeProofPreview" style="display:none;">
            
                                                        <a href="" target="_blank" id="incomeProofLink">
                                                            <i class="fa fa-eye"></i> View Uploaded File
                                                        </a>
                                                    
                                                    </div>
                                            </div>
            
                                            <!-- Bank Statements Upload -->
                                            <div class="col-md-6">
                                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                    Bank Statements (If Applicable)
                                                </label>
            
                                                <input type="file" id="bankstatements_proof"
                                                    class="form-control tw-py-3 tw-text-4 border-neutral-05 rounded-3 focus-visible-border-main-600" />
            
                                                <small class="text-muted d-block mt-2">
                                                    Upload PDF, JPG, or PNG
                                                </small>
                                                                                    <div class="mt-2" id="bankStatementPreview" style="display:none;">
            
                                                        <a href="" target="_blank" id="bankStatementLink">
                                                            <i class="fa fa-eye"></i> View Uploaded File
                                                        </a>
                                                    
                                                    </div>
                                            </div>
            
                                            <!-- Business Proof Upload -->
                                            <div class="col-md-6">
                                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                    Business Proof (If Applicable)
                                                </label>
            
                                                <input type="file" id="business_proof"
                                                    class="form-control tw-py-3 tw-text-4 border-neutral-05 rounded-3 focus-visible-border-main-600" />
            
                                                <small class="text-muted d-block mt-2">
                                                    Upload PDF, JPG, or PNG
                                                </small>
                                                                                    <div class="mt-2" id="businessProofPreview" style="display:none;">
            
                                                        <a href="" target="_blank" id="businessProofLink">
                                                            <i class="fa fa-eye"></i> View Uploaded File
                                                        </a>
                                                    
                                                    </div>
                                            </div>

                                            <!-- File1 Upload -->
                                            <div class="col-md-6">
                                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                   Onboarding letter (If Applicable)
                                                </label>
            
                                                <input type="file" id="on_boarding_letter"
                                                    class="form-control tw-py-3 tw-text-4 border-neutral-05 rounded-3 focus-visible-border-main-600" />
            
                                                <small class="text-muted d-block mt-2">
                                                    Upload PDF, JPG, or PNG
                                                </small>
                                                                                    <div class="mt-2" id="on_boarding_letterPreview" style="display:none;">
            
                                                        <a href="" target="_blank" id="on_boarding_letterLink">
                                                            <i class="fa fa-eye"></i> View Uploaded File
                                                        </a>
                                                    
                                                    </div>
                                            </div>

                                            <!-- File2 Upload -->
                                            <div class="col-md-6">
                                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                    Background verification (If Applicable)
                                                </label>
            
                                                <input type="file" id="background_verification"
                                                    class="form-control tw-py-3 tw-text-4 border-neutral-05 rounded-3 focus-visible-border-main-600" />
            
                                                <small class="text-muted d-block mt-2">
                                                    Upload PDF, JPG, or PNG
                                                </small>
                                                                                    <div class="mt-2" id="background_verificationPreview" style="display:none;">
            
                                                        <a href="" target="_blank" id="background_verificationLink">
                                                            <i class="fa fa-eye"></i> View Uploaded File
                                                        </a>
                                                    
                                                    </div>
                                            </div>
                                            <!-- File3 Upload -->
                                              <div class="col-md-6">
                                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                   File Name3 (If Applicable)
                                                </label>
            
                                                <input type="file" id="file_name3"
                                                    class="form-control tw-py-3 tw-text-4 border-neutral-05 rounded-3 focus-visible-border-main-600" />
            
                                                <small class="text-muted d-block mt-2">
                                                    Upload PDF, JPG, or PNG
                                                </small>
                                                                                    <div class="mt-2" id="file_name3Preview" style="display:none;">
            
                                                        <a href="" target="_blank" id="file_name3Link">
                                                            <i class="fa fa-eye"></i> View Uploaded File
                                                        </a>
                                                    
                                                    </div>
                                            </div>


                                            <!-- File4 Upload -->
                                              <div class="col-md-6">
                                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                    File Name4 (If Applicable)
                                                </label>
            
                                                <input type="file" id="file_name4"
                                                    class="form-control tw-py-3 tw-text-4 border-neutral-05 rounded-3 focus-visible-border-main-600" />
            
                                                <small class="text-muted d-block mt-2">
                                                    Upload PDF, JPG, or PNG
                                                </small>
                                                                                    <div class="mt-2" id="file_name4Preview" style="display:none;">
            
                                                        <a href="" target="_blank" id="file_name4Link">
                                                            <i class="fa fa-eye"></i> View Uploaded File
                                                        </a>
                                                    
                                                    </div>
                                            </div>


                                                                                        <!-- File5 Upload -->
                                              <div class="col-md-6">
                                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                    File Name5 (If Applicable)
                                                </label>
            
                                                <input type="file" id="file_name5"
                                                    class="form-control tw-py-3 tw-text-4 border-neutral-05 rounded-3 focus-visible-border-main-600" />
            
                                                <small class="text-muted d-block mt-2">
                                                    Upload PDF, JPG, or PNG
                                                </small>
                                                                                    <div class="mt-2" id="file_name5Preview" style="display:none;">
            
                                                        <a href="" target="_blank" id="file_name5Link">
                                                            <i class="fa fa-eye"></i> View Uploaded File
                                                        </a>
                                                    
                                                    </div>
                                            </div>


                                            <!-- File5 Upload -->
                                              <div class="col-md-6">
                                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                    Photo  (If Applicable)
                                                </label>
            
                                                <input type="file" id="photo_proof"
                                                    class="form-control tw-py-3 tw-text-4 border-neutral-05 rounded-3 focus-visible-border-main-600" />
            
                                                <small class="text-muted d-block mt-2">
                                                    Upload PDF, JPG, or PNG
                                                </small>
                                                                                    <div class="mt-2" id="photo_proofPreview" style="display:none;">
            
                                                        <a href="" target="_blank" id="photo_proofLink">
                                                            <i class="fa fa-eye"></i> View Uploaded File
                                                        </a>
                                                    
                                                    </div>
                                            </div>
            
            
                                            <!-- Declaration of Correctness -->
                                           
            
                                            <!-- Aadhaar E-sign / Signature -->
                                            <!-- <div class="col-md-6">
                                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                    Aadhaar E-sign / Signature *
                                                </label>
            
                                                <input type="file"
                                                    class="form-control tw-py-3 tw-text-4 border-neutral-05 rounded-3 focus-visible-border-main-600" />
            
                                                <small class="text-muted d-block mt-2">
                                                    Upload signature image or signed document
                                                </small>
                                            </div> -->
                                        </div>
                                    </form>
                                </div>
                                <div id="step4Message" class="step-message"></div>
                                
                                <!-- Footer -->
                                <div class="card-footer-area d-flex justify-content-between">
                                    <button class="btn-outline-custom" onclick="prevStep(4)">
                                        Previous
                                    </button>
        
                                   <button type="button" class="btn-primary-custom" onclick="saveStep4()">
                                        Save & Next
                                    </button>
                                </div>
                            </div>
