<ul class="nav nav-tabs justify-content-between border-0 mb-4 wizard-tabs" id="myTabstep" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link wh-48 bg-primary bg-opacity-10 rounded-circle p-0 active" id="step1-tab" data-bs-toggle="tab" data-bs-target="#step1-tab-pane" type="button" role="tab" aria-controls="step1-tab-pane" aria-selected="true">
            <span class="fs-20 fw-bold text-primary">1</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link wh-48 bg-primary bg-opacity-10 rounded-circle p-0" id="step2-tab" data-bs-toggle="tab" data-bs-target="#step2-tab-pane" type="button" role="tab" aria-controls="step2-tab-pane" aria-selected="false">
            <span class="fs-20 fw-bold text-primary">2</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link wh-48 bg-primary bg-opacity-10 rounded-circle p-0" id="step3-tab" data-bs-toggle="tab" data-bs-target="#step3-tab-pane" type="button" role="tab" aria-controls="step3-tab-pane" aria-selected="false">
            <span class="fs-20 fw-bold text-primary">3</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link wh-48 bg-primary bg-opacity-10 rounded-circle p-0" id="step4-tab" data-bs-toggle="tab" data-bs-target="#step4-tab-pane" type="button" role="tab" aria-controls="step4-tab-pane" aria-selected="false">
            <span class="fs-20 fw-bold text-primary">3</span>
        </button>
    </li>
</ul>
<div class="tab-content" id="myTabstepContent">
    <div class="tab-pane fade show active" id="step1-tab-pane" role="tabpanel" aria-labelledby="step1-tab" tabindex="0">
        <h4 class="fs-18 fw-semibold">General Information</h4>
        <p class="text-gray-light mb-4">Fill all Information as below</p>
        <form>
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group mb-4">
                        <label class="label">First Name</label>
                        <div class="form-group position-relative">
                            <input type="text" class="form-control text-dark ps-5 h-55" placeholder="Enter Name">
                            <i class="ri-user-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group mb-4">
                        <label class="label">Last Name</label>
                        <div class="form-group position-relative">
                            <input type="text" class="form-control text-dark ps-5 h-55" placeholder="Enter Name">
                            <i class="ri-user-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group mb-4">
                        <label class="label">Email Address</label>
                        <div class="form-group position-relative">
                            <input type="email" class="form-control text-dark ps-5 h-55" placeholder="Enter Email Address">
                            <i class="ri-mail-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group mb-4">
                        <label class="label">Phone</label>
                        <div class="form-group position-relative">
                            <input type="number" class="form-control text-dark ps-5 h-55" placeholder="Enter Phone Number">
                            <i class="ri-phone-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="form-group mb-4">
                        <label class="label">Address</label>
                        <div class="form-group position-relative">
                            <input type="number" class="form-control text-dark ps-5 h-55" placeholder="Your Location">
                            <i class="ri-map-pin-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="form-group d-flex gap-3">
                        <button class="btn btn-primary bg-primary bg-opacity-10 text-primary py-3 px-5 fw-semibold border-0">Back</button>
                        <button class="btn btn-primary py-3 px-5 fw-semibold text-white">Next</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="tab-pane fade" id="step2-tab-pane" role="tabpanel" aria-labelledby="step2-tab" tabindex="0">
        <h4 class="fs-18 fw-semibold">Personal Information</h4>
        <p class="text-gray-light mb-4">Fill all Information as below</p>
        <form>
            <div class="row">
                <div class="col-lg-12">
                    <div class="form-group mb-4">
                        <label class="label">Country</label>
                        <div class="form-group position-relative">
                            <select class="form-select form-control ps-5 h-55" aria-label="Default select example">
                                <option selected class="text-dark">United Kingdom</option>
                                <option value="1" class="text-dark">United States</option>
                                <option value="2" class="text-dark">Canada</option>
                                <option value="3" class="text-dark">France</option>
                            </select>
                            <i class="ri-map-2-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="form-group mb-4">
                        <label class="label">Town/City</label>
                        <div class="form-group position-relative">
                            <select class="form-select form-control ps-5 h-55" aria-label="Default select example">
                                <option selected class="text-dark">California</option>
                                <option value="1" class="text-dark">United States</option>
                                <option value="2" class="text-dark">Canada</option>
                                <option value="3" class="text-dark">France</option>
                            </select>
                            <i class="ri-list-ordered position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="form-group mb-4">
                        <label class="label">State</label>
                        <div class="form-group position-relative">
                            <select class="form-select form-control ps-5 h-55" aria-label="Default select example">
                                <option selected class="text-dark">South poal evenue state 4C</option>
                                <option value="1" class="text-dark">United States</option>
                                <option value="2" class="text-dark">Canada</option>
                                <option value="3" class="text-dark">France</option>
                            </select>
                            <i class="ri-font-size position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="form-group mb-4">
                        <label class="label">Zip Code</label>
                        <div class="form-group position-relative">
                            <input type="number" class="form-control ps-5 text-gray-light h-55" placeholder="Enter number">
                            <i class="ri-hashtag position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="form-group mb-4">
                        <label class="label">Order Notes :</label>
                        <div class="form-group position-relative">
                            <textarea class="form-control ps-5 text-dark" placeholder="Some demo text ... " cols="30" rows="5"></textarea>
                            <i class="ri-information-line position-absolute top-0 start-0 fs-20 text-gray-light ps-20 pt-2"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="form-group d-flex gap-3">
                        <button class="btn btn-primary bg-primary bg-opacity-10 text-primary py-3 px-5 fw-semibold border-0">Back</button>
                        <button class="btn btn-primary py-3 px-5 fw-semibold text-white">Next</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="tab-pane fade" id="step3-tab-pane" role="tabpanel" aria-labelledby="step3-tab" tabindex="0">
        <h4 class="fs-18 fw-semibold">Social Information</h4>
        <p class="text-gray-light mb-4">Fill all Information as below</p>
        <form>
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group mb-4">
                        <label class="label">Facebook</label>
                        <div class="form-group position-relative">
                            <input type="text" class="form-control text-dark ps-5 h-55" placeholder="URL">
                            <i class="ri-facebook-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group mb-4">
                        <label class="label">Twitter</label>
                        <div class="form-group position-relative">
                            <input type="text" class="form-control text-dark ps-5 h-55" placeholder="URL">
                            <i class="ri-twitter-x-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group mb-4">
                        <label class="label">Linkedin</label>
                        <div class="form-group position-relative">
                            <input type="email" class="form-control text-dark ps-5 h-55" placeholder="URL">
                            <i class="ri-linkedin-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group mb-4">
                        <label class="label">YouTube</label>
                        <div class="form-group position-relative">
                            <input type="number" class="form-control text-dark ps-5 h-55" placeholder="URL">
                            <i class="ri-youtube-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="form-group d-flex gap-3">
                        <button class="btn btn-primary bg-primary bg-opacity-10 text-primary py-3 px-5 fw-semibold border-0">Back</button>
                        <button class="btn btn-primary py-3 px-5 fw-semibold text-white">Next</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="tab-pane fade" id="step4-tab-pane" role="tabpanel" aria-labelledby="step4-tab" tabindex="0">
        <h4 class="fs-18 fw-semibold">Any Note</h4>
        <p class="text-gray-light mb-4">Fill all Information as below</p>
        <form>
            <div class="row">
                <div class="col-lg-12">
                    <div class="form-group mb-4">
                        <label class="label">Order Notes :</label>
                        <div class="form-group position-relative">
                            <textarea class="form-control ps-5 text-dark" placeholder="Some demo text ... " cols="30" rows="5"></textarea>
                            <i class="ri-information-line position-absolute top-0 start-0 fs-20 text-gray-light ps-20 pt-2"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary py-3 px-5 fw-semibold text-white">Submit</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<ul class="nav nav-tabs justify-content-between border-0 mb-4 wizard-tabs2" id="myTabstep2" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link p-0 d-flex align-items-center active" id="step5-tab" data-bs-toggle="tab" data-bs-target="#step5-tab-pane" type="button" role="tab" aria-controls="step5-tab-pane" aria-selected="true">
            <span class="fs-20 fw-bold text-primary wh-48 bg-primary bg-opacity-10 rounded-circle d-inline-block">1</span>
            <div class="text-start ms-3">
                <h4 class="fs-18 fw-semibold">General Information</h4>
                <p class="text-gray-light mb-0">Fill all Information as below</p>
            </div>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link p-0 d-flex align-items-center" id="step6-tab" data-bs-toggle="tab" data-bs-target="#step6-tab-pane" type="button" role="tab" aria-controls="step6-tab-pane" aria-selected="false">
            <span class="fs-20 fw-bold text-primary wh-48 bg-primary bg-opacity-10 rounded-circle d-inline-block">2</span>
            <div class="text-start ms-3">
                <h4 class="fs-18 fw-semibold">Personal Info</h4>
                <p class="text-gray-light mb-0">Setup Information</p>
            </div>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link p-0 d-flex align-items-center" id="step7-tab" data-bs-toggle="tab" data-bs-target="#step7-tab-pane" type="button" role="tab" aria-controls="step7-tab-pane" aria-selected="false">
            <span class="fs-20 fw-bold text-primary wh-48 bg-primary bg-opacity-10 rounded-circle d-inline-block">3</span>
            <div class="text-start ms-3">
                <h4 class="fs-18 fw-semibold">Social Links</h4>
                <p class="text-gray-light mb-0">Add Social Links</p>
            </div>
        </button>
    </li>
</ul>
<div class="tab-content" id="myTabstep2Content">
    <div class="tab-pane fade show active" id="step5-tab-pane" role="tabpanel" aria-labelledby="step5-tab" tabindex="0">
        <form>
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group mb-4">
                        <label class="label">First Name</label>
                        <div class="form-group position-relative">
                            <input type="text" class="form-control text-dark ps-5 h-55" placeholder="Enter Name">
                            <i class="ri-user-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group mb-4">
                        <label class="label">Last Name</label>
                        <div class="form-group position-relative">
                            <input type="text" class="form-control text-dark ps-5 h-55" placeholder="Enter Name">
                            <i class="ri-user-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group mb-4">
                        <label class="label">Email Address</label>
                        <div class="form-group position-relative">
                            <input type="email" class="form-control text-dark ps-5 h-55" placeholder="Enter Email Address">
                            <i class="ri-mail-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group mb-4">
                        <label class="label">Phone</label>
                        <div class="form-group position-relative">
                            <input type="number" class="form-control text-dark ps-5 h-55" placeholder="Enter Phone Number">
                            <i class="ri-phone-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="form-group mb-4">
                        <label class="label">Address</label>
                        <div class="form-group position-relative">
                            <input type="number" class="form-control text-dark ps-5 h-55" placeholder="Your Location">
                            <i class="ri-map-pin-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="form-group d-flex gap-3">
                        <button class="btn btn-primary bg-primary bg-opacity-10 text-primary py-3 px-5 fw-semibold border-0">Back</button>
                        <button class="btn btn-primary py-3 px-5 fw-semibold text-white">Next</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="tab-pane fade" id="step6-tab-pane" role="tabpanel" aria-labelledby="step6-tab" tabindex="0">
        <h4 class="fs-18 fw-semibold">Personal Information</h4>
        <p class="text-gray-light mb-4">Fill all Information as below</p>
        <form>
            <div class="row">
                <div class="col-lg-12">
                    <div class="form-group mb-4">
                        <label class="label">Country</label>
                        <div class="form-group position-relative">
                            <select class="form-select form-control ps-5 h-55" aria-label="Default select example">
                                <option selected class="text-dark">United Kingdom</option>
                                <option value="1" class="text-dark">United States</option>
                                <option value="2" class="text-dark">Canada</option>
                                <option value="3" class="text-dark">France</option>
                            </select>
                            <i class="ri-map-2-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="form-group mb-4">
                        <label class="label">Town/City</label>
                        <div class="form-group position-relative">
                            <select class="form-select form-control ps-5 h-55" aria-label="Default select example">
                                <option selected class="text-dark">California</option>
                                <option value="1" class="text-dark">United States</option>
                                <option value="2" class="text-dark">Canada</option>
                                <option value="3" class="text-dark">France</option>
                            </select>
                            <i class="ri-list-ordered position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="form-group mb-4">
                        <label class="label">State</label>
                        <div class="form-group position-relative">
                            <select class="form-select form-control ps-5 h-55" aria-label="Default select example">
                                <option selected class="text-dark">South poal evenue state 4C</option>
                                <option value="1" class="text-dark">United States</option>
                                <option value="2" class="text-dark">Canada</option>
                                <option value="3" class="text-dark">France</option>
                            </select>
                            <i class="ri-font-size position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="form-group mb-4">
                        <label class="label">Zip Code</label>
                        <div class="form-group position-relative">
                            <input type="number" class="form-control ps-5 text-gray-light h-55" placeholder="Enter number">
                            <i class="ri-hashtag position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="form-group mb-4">
                        <label class="label">Order Notes :</label>
                        <div class="form-group position-relative">
                            <textarea class="form-control ps-5 text-dark" placeholder="Some demo text ... " cols="30" rows="5"></textarea>
                            <i class="ri-information-line position-absolute top-0 start-0 fs-20 text-gray-light ps-20 pt-2"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="form-group d-flex gap-3">
                        <button class="btn btn-primary bg-primary bg-opacity-10 text-primary py-3 px-5 fw-semibold border-0">Back</button>
                        <button class="btn btn-primary py-3 px-5 fw-semibold text-white">Next</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="tab-pane fade" id="step7-tab-pane" role="tabpanel" aria-labelledby="step7-tab" tabindex="0">
        <h4 class="fs-18 fw-semibold">Social Information</h4>
        <p class="text-gray-light mb-4">Fill all Information as below</p>
        <form>
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group mb-4">
                        <label class="label">Facebook</label>
                        <div class="form-group position-relative">
                            <input type="text" class="form-control text-dark ps-5 h-55" placeholder="URL">
                            <i class="ri-facebook-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group mb-4">
                        <label class="label">Twitter</label>
                        <div class="form-group position-relative">
                            <input type="text" class="form-control text-dark ps-5 h-55" placeholder="URL">
                            <i class="ri-twitter-x-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group mb-4">
                        <label class="label">Linkedin</label>
                        <div class="form-group position-relative">
                            <input type="email" class="form-control text-dark ps-5 h-55" placeholder="URL">
                            <i class="ri-linkedin-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group mb-4">
                        <label class="label">YouTube</label>
                        <div class="form-group position-relative">
                            <input type="number" class="form-control text-dark ps-5 h-55" placeholder="URL">
                            <i class="ri-youtube-line position-absolute top-50 start-0 translate-middle-y fs-20 text-gray-light ps-20"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="form-group d-flex gap-3">
                        <button class="btn btn-primary bg-primary bg-opacity-10 text-primary py-3 px-5 fw-semibold border-0">Back</button>
                        <button type="submit" class="btn btn-primary py-3 px-5 fw-semibold text-white">Submit</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>