 <footer class="footer-sec text-white">
    <div class="support-sec" >
      <div class="support-cover">
        <div class="support-item">
          <div class="support-pic">
            <img src="images/support-pic-01.png" alt="Image" />
          </div>
          <div class="support-bod ps-3 ps-lg-0">
            <h3>Data Center</h3>
            <p>Learn more about our Data Center Facility in Muscat, Oman</p>
            <a class="btn btn-more" href="javascript:;"><img src="images/arro-right-wt.png" alt="Icon" /></a>
          </div>
        </div>
        <div class="support-item">
          <div class="support-pic">
            <img src="images/support-pic-02.png" alt="Image" />
          </div>
          <div class="support-bod ps-3 ps-lg-0">
            <h3>Send Ticket</h3>
            <p>
              Need help? <br />
              Call our award-winning support team 24/7
            </p>
            <a class="btn btn-more" href="javascript:;"><img src="images/arro-right-wt.png" alt="Icon" /></a>
          </div>
        </div>
        <div class="support-item"> 
          <div class="support-pic ">
            <img src="images/support-pic-03.png" alt="Image" />
          </div>
          <div class="support-bod ps-3 ps-lg-0">
            <h3>Video</h3>
            <p>Watch our latest videos to learn more about our services.</p>
            <a class="btn btn-more" href="javascript:;"><img src="images/arro-right-wt.png" alt="Icon" /></a>
          </div>
        </div>
      </div>
    </div>
    <div class="container" data-aos="fade-up" data-aos-delay="250" data-aos-duration="1500">
      <div
        class="footer-hd mx-auto flex flex-column justify-content-center align-items-center text-center pb-4 pb-xl-5 mb-0 mb-xl-4">
        <h3 class=" m-0 pb-4 fw-bolder display-5">Get Fast, Secure & Reliable Cloud Services</h3>
        <a class="btn btn-start mx-auto py-2 rounded-3 ls-1" href="javascript:;">Get Started</a>
      </div>
      <div class="row pb-4 pb-lg-5 mb-lg-4">
        <div class="col-lg-5 col-md-6">
          <h4 class="text-capitalize fw-semibold m-0 pb-4 pb-xl-4 mb-xl-1">Services</h4>

          <ul class="list-unstyled row footlinks">
            <li class="col-md-5"><a href="#">Cloud Server</a></li>
            <li class="col-md-5"><a href="#">Backup as a Service</a></li>
            <li class="col-md-5"><a href="#">Colocation</a></li>
            <li class="col-md-5"><a href="#">Dedicated Servers</a></li>
            <li class="col-md-5"><a href="#">Web-Hosting</a></li>
            <li class="col-md-5"><a href="#">Enterprise Email</a></li>
            <li class="col-md-5"><a href="#">AcropolisBox</a></li>
            <li class="col-md-5"><a href="#">Disaster Recovery</a></li>
        </div>
        <div class="col-lg-5 col-md-6">
          <h4 class="text-capitalize  fw-semibold m-0 pb-4 pb-xl-4 mb-xl-1">Quick Links</h4>
          <ul class="list-unstyled row footlinks">
            <li class="col-md-5"><a href="#">About Us</a></li>
            <li class="col-md-5"><a href="#">Data center</a></li>
            <li class="col-md-5"><a href="#">Executive team</a></li>
            <li class="col-md-5"><a href="#">VAT Certificate</a></li>
            <li class="col-md-5"><a href="#">Terms of services</a></li>
            <li class="col-md-5"><a href="#">Licence Certificate</a></li>
            <li class="col-md-5"><a href="#">Privacy policy</a></li>

        </div>
        <div class="col-lg-2 col-12">
          <h4 class="text-capitalize fw-semibold m-0 pb-4 pb-xl-4 mb-xl-1">get social</h4>
          <ul class="social-nav d-flex gap-2 gap-lg-3">
            <li><a href="#"><i class="ri-facebook-circle-fill"></i></a></li>
            <li><a href="#"><i class="ri-instagram-line"></i></a></li>
            <li><a href="#"><i class="ri-tiktok-line"></i></a></li>
            <li><a href="#"><i class="ri-twitter-x-line"></i></a></li>
            <li><a href="#"><i class="ri-youtube-fill"></i></a></li>
          </ul>
        </div>
      </div>
      <div class="row pb-4 pb-lg-5 mb-lg-4">
        <div class="col-12 col-lg-4 pt-0 pt-lg-4">
          <a href="index.php"><img src="images/logo-footer.png" width="281" height="56" alt="cloud acropolis"
              class="img-gluid block mb-4 mb-lg-5" /> </a>
          <div class="d-flex">
            <div class="flex-fixed"><i class="ri-map-pin-2-fill h2"></i></div>
            <div class="flex-grow-1 ps-3 ps-md-3 ps-xl-4">
              <address class="pb-4">
                Address: Building 2073, <br />Way 6025, Ghala Industrial Area<br />
                Muscat, Sultanate of Oman
              </address>
              <address class="pb-4">
                P: +968 92394675<br />
                E: Info@CloudAcropolis.com
              </address>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-8">
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.9072165962966!2d58.338243739672855!3d23.5717755982921!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e91ffa39deac877%3A0xfedf36ee952c61c8!2sCloud%20Acropolis%20data%20center%20(ISO27001)!5e0!3m2!1sen!2sin!4v1761199260765!5m2!1sen!2sin"
            width="100%" height="350" style="border:0;" allowfullscreen="" loading="lazy" class="location-map"
            referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
      </div>
      <div class="row align-items-center last">
        <div class="col-12 col-lg-4">
          <img src="images/payment-options.png" width="324" height="21" alt="payment options" class="img-fluid" />
        </div>
        
        <div class="col-12 col-lg-4 text-lg-end order-2 order-lg-3 py-lg-0 py-4">
          <img src="images/certificate.png" width="324" height="21" alt="payment options" class="img-fluid" />

        </div>
        <div class="col-12 col-lg-4 text-center text-secondary order-3 order-lg-2">Copyright © 2025 CloudAcropolis. All rights reserved
        </div>
      </div>
    </div>
  </footer>

  <a href="javascript:;" id="return-top" class="return-top"><img src="images/up-icon.svg" alt="Up" /></a>

  <!-- jQuery -->
  <script src="js/jquery.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script src="js/bootstrap.bundle.min.js"></script>
  <!-- Swiper slider -->
  <script src="js/swiper-bundle.min.js"></script>
  <!-- Smooth Scroll -->
  <script src="https://unpkg.com/@studio-freight/lenis@1.0.39/dist/lenis.min.js"></script>
  <!-- Custom scroll -->
  <script src="js/aos.js"></script>
  <!-- Custom JS -->
  <script src="js/main.js"></script>
  <script>
    // AOS animation
    AOS.init();
  </script>
  <script>
function loadFeatures(packageId) {
    $.get("get_features.php", { package_id: packageId }, function(res) {
        let data = JSON.parse(res);
        let title = data.title ?? {};
        let features = data.features ?? [];

        let html = `
        <div class="container">
          <div class="section-hd text-center">
            <h3 class="fw-bolder">${title.name ?? ""}</h3>
            <h5>${title.sub_title ?? ""}</h5>
          </div>
          <div class="row pt-4">`;

        features.forEach(f => {
            html += `
              <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                <div class="service-feat-item">
                  <div class="feat-icon"><img src="${f.image}" alt=""></div>
                  <div class="feat-body"><h3>${(f.name || "").replace(/\|/g, "<br>")}</h3></div>
                </div>
              </div>`;
        });

        html += `</div></div>`;
        $("#dynamic-features").html(html);
    });
}

// Auto-load first package
loadFeatures($(".package-selector:checked").data("package-id"));

// Checkbox click handler
$(document).on("change", ".package-selector", function() {
    $(".package-selector").prop("checked", false);
    $(this).prop("checked", true);
    loadFeatures($(this).data("package-id"));
});
</script>
</body>

</html>