<!--begin:Footer-->
<footer id="footer" class="position-relative bg-dark footer" data-bs-theme="dark">
<div class="container pt-9 pt-lg-11 pb-5">
<div class="row mb-5">
<div class="col-lg-7 col-md-12 mb-5 mb-lg-0">
<div class="mb-7 mb-lg-9 d-flex flex-column flex-sm-row justify-content-between align-items-end">
<img src="assets/img/logo/logo-white.svg" alt="Assan Logo" class="width-8x mb-6 mb-sm-0">
<!--:Dark Mode:-->
<div class="d-inline-flex align-items-center dropup mt-6">
<button class="btn border text-body py-2 px-2 d-flex align-items-center" id="assan-theme"
type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static">
<span class="theme-icon-active d-flex align-items-center">
<i class="bx align-middle" href="null"></i>
</span>
</button>
<!--:Dark Mode Options:-->
<ul class="dropdown-menu" aria-labelledby="assan-theme" style="--bs-dropdown-min-width: 9rem;">
<li class="mb-1">
<button type="button" class="dropdown-item d-flex align-items-center active"
data-bs-theme-value="light">
<span class="theme-icon d-flex align-items-center">
<i class="bx bx-sun align-middle me-2"> </i>
</span>
Light
</button>
</li>
<li class="mb-1">
<button type="button" class="dropdown-item d-flex align-items-center"
data-bs-theme-value="dark">
<span class="theme-icon d-flex align-items-center">
<i class="bx bx-moon align-middle me-2"></i>
</span>
Dark
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center"
data-bs-theme-value="auto">
<span class="theme-icon d-flex align-items-center">
<i class="bx bx-color-fill align-middle me-2"></i>
</span>
Auto
</button>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-4 mb-5 mb-md-0">
<h5 class="mb-4 text-white">Products</h5>
<nav class="nav flex-column">
<a href="#" class="nav-link p-0 mb-3">Assan</a>
<a href="#" class="nav-link p-0 mb-3">Airbnb</a>
<a href="#" class="nav-link p-0 mb-3">Codepen</a>
<a href="#" class="nav-link p-0 mb-3">Chrome</a>
<a href="#" class="nav-link p-0 mb-3">Dropbox</a>
<a href="#" class="nav-link p-0 mb-3">Jira</a>
<a href="#" class="nav-link p-0 mb-3">Slack</a>
<a href="#" class="nav-link p-0">Zendesk</a>
</nav>
</div>
<div class="col-md-4 mb-5 mb-md-0">
<h5 class="mb-4 text-white">Resources</h5>
<nav class="nav flex-column">
<a href="#" class="nav-link p-0 mb-3">Bootstrap</a>
<a href="#" class="nav-link p-0 mb-3">Wrapbootstrap</a>
<a href="#" class="nav-link p-0 mb-3">Babel</a>
<a href="#" class="nav-link p-0 mb-3">Browserify</a>
<a href="#" class="nav-link p-0 mb-3">Greensock</a>
<a href="#" class="nav-link p-0 mb-3">Javascript</a>
<a href="#" class="nav-link p-0 mb-3">Gulp</a>
<a href="#" class="nav-link p-0">Sass</a>
</nav>
</div>
<div class="col-md-4">
<h5 class="mb-4 text-white">Company</h5>
<nav class="nav flex-column">
<a href="#" class="nav-link p-0 mb-3">About us</a>
<a href="#" class="nav-link p-0 mb-3">Career</a>
<a href="#" class="nav-link p-0 mb-3">Team</a>
<a href="#" class="nav-link p-0">Blog</a>
</nav>
</div>
</div>
</div>
<div class="col-lg-5 ms-auto">
<div class="py-5 bg-white-25 bg-gradient px-4 rounded-4">
<h5 class="mb-4 text-white">Contact</h5>
<div class="mb-2"><a href="tel:+1123456789" class="fs-5 link-hover-underline">+1 1234 56789</a>
</div>
<div><a href="mailto:hello@domain.com?subject=Hello!"
class="fs-5 link-hover-underline">support@domain.com</a>
</div>
<hr class="my-4 text-white my-sm-5">
<h5 class="mb-4 text-white">Have a project?</h5>
<a href="#" class="btn btn-primary rounded-pill hover-lift btn-hover-arrow"><span>Let's talk with
us</span></a>
<hr class="my-4 text-white my-sm-5">
<h5 class="mb-4 text-white">Follow us</h5>
<div class="mb-4 mb-md-0 d-flex">
<!-- Social button -->
<a href="#!" class="d-inline-block text-white mb-1 me-2 si rounded-pill si-hover-facebook">
<i class="bx bxl-facebook fs-5"></i>
<i class="bx bxl-facebook fs-5"></i>
</a>
<!-- Social button -->
<a href="#!" class="d-inline-block text-white mb-1 me-2 si rounded-pill si-hover-twitter">
<i class="bx bxl-twitter fs-5"></i>
<i class="bx bxl-twitter fs-5"></i>
</a>
<!-- Social button -->
<a href="#!" class="d-inline-block text-white mb-1 me-2 si rounded-pill si-hover-linkedin">
<i class="bx bxl-linkedin fs-5"></i>
<i class="bx bxl-linkedin fs-5"></i>
</a>
<!-- Social button -->
<a href="#!" class="d-inline-block text-white mb-1 si rounded-pill si-hover-instagram">
<i class="bx bxl-instagram fs-5"></i>
<i class="bx bxl-instagram fs-5"></i>
</a>
</div>
</div>
</div>
</div>
<hr class="mt-0 mb-5">
<div class="row justify-content-between">
<div class="col-md-7 mb-4 mb-md-0">
<div class="nav small">
<a href="#" class="nav-link ps-0">Privacy Policy</a>
<a href="#" class="nav-link ps-0">Terms and Conditions</a>
<a href="#" class="nav-link ps-0">Press kit</a>
</div>
</div>
<div class="col-md-5 text-md-end">
<span class="d-block lh-sm small text-white-50">© Copyright
<script>
document.write(new Date().getFullYear())
</script>. Assan
</span>
</div>
</div>
</div>
</footer>
<!--end:Footer-->