Footer style - #3

                
                    <!--Footer Start-->
                    <footer id="footer" class="bg-dark text-white position-relative">
                        <div class="container position-relative z-index-1">
                            <div class="row grid-separator align-items-stretch">
                                <!--Footer col-->
                                <div class="col-md-7 col-lg-4 pe-md-6 py-lg-11 py-9">
                                    <div class="d-flex flex-column h-100">
                                        <h6 class="mb-4 opacity-50">
                                            Join our mail list
                                        </h6>
                                        <p class="mb-4 small">Join us today and get 20% off on your first purchase</p>
                                        <form novalidate class="needs-validation">
                                            <div class="mb-3">
                                                <input type="text" required placeholder="Full name"
                                                    class="form-control bg-transparent text-white border-secondary">
                                                <span class="invalid-feedback">This field is required</span>
                                            </div>
                                            <div class="mb-3">
                                                <input type="email" required placeholder="Your work Email"
                                                    class="form-control bg-transparent text-white border-secondary">
                                                <span class="invalid-feedback">This field is required</span>
                                            </div>
                                            <div class="mb-3">
                                                <p class="small text-muted mb-0">
                                                    By clicking on Sign me up, you agree to our <a class="fw-semibold d-table"
                                                        href="#!">Terms and Conditions of Use.</a>
                                                </p>
                                            </div>
                                            <div class="d-grid">
                                                <button class="btn btn-primary" type="submit">
                                                    Sign me up
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <!--Footer col-->
                                <div class="col-md-5 col-lg-3 ps-md-6 py-lg-11 py-9">
                                    <h6 class="mb-4 opacity-50">Explore</h6>
                                    <ul class="nav flex-column">
                                        <li class="nav-item">
                                            <a href="#" class="nav-link">
                                                Comapny
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a href="#" class="nav-link">
                                                News & media
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a href="#" class="nav-link">
                                                Customers
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a href="#" class="nav-link">
                                                Products
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a href="#" class="nav-link">
                                                Career
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a href="#" class="nav-link">
                                                Help center
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a href="#" class="nav-link">
                                                Privacy & policy
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a href="#" class="nav-link">
                                                Terms & conditions
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <!--Footer col-->
                                <div class="col-md-12 col-lg-4 ps-md-6 py-lg-11 py-9">
                                    <div class="d-flex flex-column flex-sm-row">
                                        <div class="mb-4 mb-sm-0 pe-sm-3">
                                            <div>
                                                <h6 class="mb-4 opacity-50">Registered office</h6>
                                                <p class="mb-2">
                                                    <strong class="small text-muted">Company, Inc.</strong>
                                                </p>
                                                <p class="mb-3">
                                                    1355 Market St, Suite 900<br> San Francisco<br> CA 94103
                                                </p>
                                            </div>
                                        </div>
                                        <div class="ps-sm-3">
                                            <h6 class="mb-4 opacity-50">Hours</h6>
                                            <p>
                                                Office opening hours are 10.00am to 6.00pm
                                            </p>
                                            <hr>
                                            <strong class="d-block text-muted small mb-2">Phone:</strong>
                                            <a href="#!" class="fw-semibold link-underline">+01 1234-56789</a>
                                            <br><br>
                                            <strong class="d-block text-muted small mb-2">Email:</strong>
                                            <a href="mailto:mail@email.com" class="fw-semibold link-underline">mail@domain.com</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr class="my-0">
                            <div>
                                <div class="row py-5">
                                    <div class="col-sm-7 col-md-6 mb-3 mb-sm-0">
                                        <div class="dropup d-table">
                                            <a href="#" data-bs-toggle="dropdown" role="button" aria-expanded="false"
                                                class="dropdown-toggle">
                                                United States (English)
                                            </a>
                   
                                            <!--Dropdown lang menu-->
                                            <div class="dropdown-menu mb-3 dropdown-menu-lg-start">
                                                <a href="#!" class="d-flex align-items-center dropdown-item active">
                                                    <img src="assets/img/country/us.svg" class="width-2x me-2" alt="">
                                                    United States (English)
                                                </a>
                                                <a href="#!" class="d-flex align-items-center dropdown-item">
                                                    <img src="assets/img/country/es.svg" class="width-2x me-2" alt="">
                                                    América Latina (Español)
                                                </a>
                                                <a href="#!" class="d-flex align-items-center dropdown-item">
                                                    <img src="assets/img/country/gb.svg" class="width-2x me-2" alt="">
                                                    United Kingdom (English)
                                                </a>
                                                <a href="#!" class="d-flex align-items-center dropdown-item">
                                                    <img src="assets/img/country/fr.svg" class="width-2x me-2" alt="">
                                                    France (Français)
                                                </a>
                                                <a href="#!" class="d-flex align-items-center dropdown-item">
                                                    <img src="assets/img/country/pt.svg" class="width-2x me-2" alt="">
                                                    Italia (Italiano)
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-5 col-md-6 small text-sm-end">
                                        <span class="d-block lh-sm small text-muted">© Copyright
                                            <script>
                                                document.write(new Date().getFullYear())
                   
                                            </script>. Assan
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--container-->
                    </footer>