<form>
    <div class="row">
        <div class="col-lg-6">
            <div class="form-group mb-4">
                <label class="label text-secondary">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 ps-20"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="form-group mb-4">
                <label class="label text-secondary">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 ps-20"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="form-group mb-4">
                <label class="label text-secondary">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 ps-20"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="form-group mb-4">
                <label class="label text-secondary">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 ps-20"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="form-group mb-4">
                <label class="label text-secondary">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 ps-20"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="form-group mb-4">
                <label class="label text-secondary">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 ps-20"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="form-group mb-4">
                <label class="label text-secondary">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 ps-20"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="form-group mb-4">
                <label class="label text-secondary">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 ps-20"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="form-group mb-4">
                <label class="label text-secondary">Zip Code</label>
                <div class="form-group position-relative">
                    <input type="number" class="form-control ps-5 h-55" placeholder="Enter number">
                    <i class="ri-hashtag position-absolute top-50 start-0 translate-middle-y fs-20 ps-20"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="form-group mb-0">
                <label class="label text-secondary">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 ps-20 pt-2"></i>
                </div>
            </div>
        </div>
    </div>
</form>

<form>
    <div class="form-group mb-4">
        <label class="label text-secondary">First Name</label>
        <div class="form-group">
            <input type="text" class="form-control text-dark h-55" placeholder="Enter Name">
        </div>
    </div>
    <div class="form-group mb-4">
        <label class="label text-secondary">Email</label>
        <div class="form-group">
            <input type="email" class="form-control text-dark h-55" placeholder="envytheme@info.com">
        </div>
    </div>
    <div class="form-group mb-4">
        <label class="label text-secondary">Password</label>
        <div class="form-group">
            <div class="password-wrapper position-relative">
                <input type="password" id="password" class="form-control text-dark" value="password">
                <i style="color: #A9A9C8; font-size: 16px; right: 15px !important;" class="ri-eye-off-line password-toggle-icon translate-middle-y top-50 end-0 position-absolute" aria-hidden="true"></i>
            </div>
        </div>
    </div>
    <div class="form-group mb-4">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
            <label class="form-check-label" for="flexCheckDefault">
                Remember me
            </label>
        </div>
    </div>
    <div class="d-flex gap-2">
        <button type="submit" class="btn btn-primary bg-primary bg-opacity-10 text-primary border-0 fw-semibold py-2 px-4">Submit</button>
        <button type="submit" class="btn btn-danger bg-danger bg-opacity-10 text-danger border-0 fw-semibold py-2 px-4">Cancel</button>
    </div>
</form>

<form>
    <div class="row">
        <div class="col-lg-6">
            <div class="form-group mb-4">
                <div class="form-group">
                    <input type="text" class="form-control text-dark h-55 border-0 border-bottom" placeholder="Enter Name">
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="form-group mb-4">

                <div class="form-group">
                    <input type="email" class="form-control text-dark h-55 border-0 border-bottom" placeholder="Email Address">
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="form-group mb-4">
                <div class="form-group">
                    <textarea class="form-control border-0 border-bottom text-dark" placeholder="Comment Here" cols="30" rows="11"></textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="text-end">
        <button type="submit" class="btn btn-primary bg-primary bg-opacity-10 text-primary border-0 fw-semibold py-2 px-4">Submit</button>
    </div>
</form>

<form class="src-form">
    <div class="form-group mb-4 position-relative">
        <input type="text" class="form-control h-55 bg-body-bg border-0 text-dark rounded-pill" placeholder="Search here..">
        <button type="submit" class="position-absolute top-50 end-0 translate-middle-y bg-transparent p-0 pe-3 border-0">
            <i class="ri-search-line fs-24 position-relative top-1 text-primary"></i>
        </button>
    </div>
    <div class="form-group mb-4 position-relative">
        <input type="text" class="form-control h-55 bg-body-bg border-0 text-dark rounded-pill" placeholder="Search here..">
        <button type="submit" class="position-absolute top-50 end-0 translate-middle-y bg-primary p-0 wh-40 border-0 text-center text-white rounded-circle me-2">
            <i class="ri-search-line fs-24 position-relative top-1"></i>
        </button>
    </div>
    <div class="form-group mb-4 position-relative">
        <input type="text" class="form-control h-55 bg-body-bg border-0 text-dark rounded-pill" placeholder="Search here..">
        <button type="submit" class="position-absolute top-50 end-0 translate-middle-y bg-primary p-0 border-0 text-center text-white rounded-pill px-3 py-2 me-2 fw-semibold">
            Search
        </button>
    </div>
</form>