{% load static %}
<!-- Footer start -->

<!-- Cta Start -->
<div id="cta" class="cta section panel">
    <div class="section-outer panel"
        data-anime="onview: -100; translateY: [24, 0]; opacity: [0, 1]; easing: easeOutCubic; duration: 450; delay: 200;">
        <div class="container max-w-2xl">
            <div
                class="section-inner panel overflow-hidden rounded px-2 sm:px-0 py-5 sm:py-6 lg:py-8 xl:py-9 bg-gradient-45n from-primary-400 to-primary rounded lg:rounded-3 text-white">

                <div class="position-cover opacity-70 blend-multiply"
                    data-src="{% static 'assets/images/common/footer-cta-bg.jpg' %}" data-uc-img></div>

                <div
                    class="panel vstack items-center gap-2 lg:gap-3 max-w-500px lg:max-w-700px mx-auto text-center z-99">
                    <h2 class="h3 sm:h1 lg:display-6 m-0 text-white">Start scaling your business with SavvyGT
                    </h2>
                    <p class="fs-5 sm:fs-4 xl:fs-3 text-white text-opacity-80">14-day free trial. No credit card
                        required.</p>
                    <a href="{% url 'request_quote' %}" class="btn btn-md xl:btn-lg btn-secondary text-primary fs-6 xl:fs-4 mt-2"
                        data-uc-cursor="md bg-white opacity-10">
                        <span>Request a quote</span>
                        <i class="icon icon-1 unicon-arrow-right d-none sm:d-block"></i>
                    </a>
                </div>
                <div class="d-none lg:d-block"
                    data-anime="onview:-100; targets: >*; scale: [0, 1]; opacity: [0, 1]; easing: easeOutCubic; duration: 450; delay: anime.stagger(100, {start: 750});">

                    <div class="position-absolute" style="top: 25%; left: 10%">
                        <img class="w-32px xl:w-48px" src="{% static 'assets/images/common/gold-stare.svg' %}"
                            alt="star-icon">
                    </div>
                    <div class="position-absolute" style="bottom: 25%; right: 15%">
                        <img class="w-24px xl:w-32px" src="{% static 'assets/images/common/gold-stare.svg' %}"
                            alt="star-icon">
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<!-- Cta End -->

<footer id="uc-footer" class="uc-footer panel overflow-hidden">
    <div class="footer-outer py-4 lg:py-6 xl:pt-9">
        <div class="container max-w-2xl">
            <div class="footer-inner vstack gap-4 lg:gap-6 xl:gap-8">
                <div class="uc-footer-widgets panel">
                    <div class="row child-cols-6 lg:child-cols g-4 xl:g-8">
                        <div class="col-12 xl:col-4">
                            <div class="panel vstack items-start gap-3 sm:w-400px">
                                <div class="logo">
                                    <div class="uc-logo">
                                        <a hreff="index.html">

                                        </a>
                                    </div>
                                </div>
                                <p class="fs-5 xl:fs-4">

                                    Savvy GT delivers innovative technology <br class="d-none xl:d-block">
                                    in AI cloud computing, and custom software <br class="d-none xl:d-block">
                                    development to help businesses optimize performance and drive success.
                                </p>
                                <ul class="nav-x gap-1">
                                    <li>
                                        <a hreff="https://www.facebook.com/unistudioco"
                                            class="p-1 rounded-circle bg-gray-25 hover:bg-primary hover:text-white duration-250"
                                            data-uc-cursor="md bg-white opacity-10"><i
                                                class="icon icon-2 unicon-logo-facebook"></i></a>
                                    </li>
                                    <li>
                                        <a hreff="https://x.com/unistudioco?mx=2"
                                            class="p-1 rounded-circle bg-gray-25 hover:bg-primary hover:text-white duration-250"
                                            data-uc-cursor="md bg-white opacity-10"><i
                                                class="icon icon-2 unicon-logo-twitter"></i></a>
                                    </li>
                                    <li>
                                        <a hreff="https://www.instagram.com/unistudioco"
                                            class="p-1 rounded-circle bg-gray-25 hover:bg-primary hover:text-white duration-250"
                                            data-uc-cursor="md bg-white opacity-10"><i
                                                class="icon icon-2 unicon-logo-instagram"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div>
                            <div class="panel">
                                <h5 class="uc-nav-header h5 sm:h4 mb-1 xl:mb-2">Main pages</h5>
                                <ul class="nav-y gap-1 fw-medium">
                                    <li><a href="{% url 'products' %}"
                                            data-uc-cursor="md bg-white opacity-10">Products</a></li>
                                    <li><a href="{% url 'cart' %}" data-uc-cursor="md bg-white opacity-10">Cart</a></li>
                                    <li><a href="{% url 'user_purchase_history' %}"
                                            data-uc-cursor="md bg-white opacity-10">Orders</a></li>
                                    <!-- <li><a hreff="page-contact-2.html" data-uc-cursor="md bg-white opacity-10">Contact - v2</a></li>
                                        </ul> -->
                            </div>
                        </div>
                        <div>
                            <div class="panel">
                                <h5 class="uc-nav-header h5 sm:h4 mb-1 xl:mb-2">Other pages</h5>
                                <ul class="nav-y gap-1 fw-medium">
                                    <li><a href="{% url 'home' %}" data-uc-cursor="md bg-white opacity-10">Home</a>
                                    </li>
                                    <!-- <li><a hreff="shop-sidebar.html" data-uc-cursor="md bg-white opacity-10">With sidebar</a></li> -->
                                    <li><a href="{% url 'about' %}"
                                            data-uc-cursor="md bg-white opacity-10">About Us</a></li>
                                    <!-- <li><a hreff="shop-product-detail-2.html" data-uc-cursor="md bg-white opacity-10">Product detail v2</a></li> -->
                                    <li><a href="{% url 'services' %}" data-uc-cursor="md bg-white opacity-10">Services</a>
                                    </li>
                                    <li>
  <a href="{% url 'contact' %}" data-uc-cursor="md bg-white opacity-10">
    Contact Us
  </a>
</li>
                                    <li><a href="{% url 'request_quote' %}" data-uc-cursor="md bg-white opacity-10">Request A Quote</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-12 sm:col">
                            <div class="vstack gap-1">
                                <h5 class="uc-nav-header h5 sm:h4 mb-1 xl:mb-2">Office</h5>
                                <div class="vstack gap-2">
                                    <div class="hstack items-start gap-1">
                                        <i class="icon icon-1 unicon-location mt-narrow"></i>
                                        <span class="ms-narrow">6115 Halloran Lane, Hoffman Estates, Illinois 60192</span>
                                    </div>
                                    <div class="hstack items-start gap-1">
                                        <i class="icon icon-1 unicon-email mt-narrow"></i>
                                        <span class="ms-narrow">info@savvygt.com</span>
                                    </div>
                                    <div class="hstack items-start gap-1">
                                        <i class="icon icon-1 unicon-phone mt-narrow"></i>
                                        <span class="ms-narrow">+1(224) 448-7314</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="uc-footer-bottom panel vstack lg:hstack gap-3 justify-center lg:justify-between pt-4 lg:pt-6 border-top">
                    <div
                        class="vstack sm:hstack justify-center lg:justify-start items-center lg:items-start gap-1 lg:gap-2">
                        <p>© 2025 <a hreff="#" class="text-primary text-none"
                                data-uc-cursor="md bg-white opacity-10">savvygt</a> All Rights Reserved.</p>
                    </div>
                    <div class="hstack justify-center lg:justify-end gap-2 lg:gap-3">
                        <div class="hstack gap-2">
                            <ul class="nav-x gap-2 fw-medium">
                                <li><a hreff="page-terms.html" data-uc-cursor="md bg-white opacity-10">Terms of
                                        use</a></li>
                                <li><a hreff="page-privacy.html" data-uc-cursor="md bg-white opacity-10">Privacy
                                        notice</a></li>
                                <!-- </ul>
                            <div class="vr"></div>
                            <a hreff="#" class="hstack gap-1 text-none fw-medium"
                                data-uc-cursor="md bg-white opacity-10">
                                <span>English</span>
                                <span class="icon-narrow" data-uc-drop-parent-icon=""></span>
                            </a>
                            <div class="p-2 bg-white shadow-xs rounded w-150px"
                                data-uc-drop="mode: click; offset: 28; pos: top-right; boundary: !.uc-footer-bottom; animation: uc-animation-slide-top-small; duration: 150;">
                                <ul class="nav-y gap-1 fw-medium items-end">
                                    <li><a hreff="#en" data-uc-cursor="md bg-white opacity-10">English</a></li>
                                    <li><a hreff="#ar" data-uc-cursor="md bg-white opacity-10">العربية</a></li>
                                    <li><a hreff="#ch" data-uc-cursor="md bg-white opacity-10">中文</a></li> -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div style="position: absolute; bottom: 10px; right: 20px; font-size: 13px; color: #888;">
        Crafted By ❤️ <strong>Forge Alumnus</strong>
    </div>
</footer>