
<!-- =============================
     MODERN CLEAN LIGHT FOOTER
============================= -->

<footer class="footer-clean text-dark position-relative">
  <div class="container py-5">
    <div class="row gy-5 align-items-start justify-content-between">

      <!-- Brand / Intro -->
      <div class="col-lg-4 col-md-6">
        <div class="footer-brand-wrap d-flex align-items-center mb-3">

          <img
            src="<?= !empty($site_data['logo'])
              ? htmlspecialchars($site_data['logo'], ENT_QUOTES, 'UTF-8')
              : 'logo.png'
            ?>"
            alt="<?= !empty($site_data['brand'])
              ? htmlspecialchars($site_data['brand'], ENT_QUOTES, 'UTF-8')
              : 'OneTouch Pay'
            ?>"
            class="footer-brand-logo"
          >

          <h4 class="footer-brand-name fw-semibold mb-0">
            <?= !empty($site_data['brand'])
              ? htmlspecialchars($site_data['brand'], ENT_QUOTES, 'UTF-8')
              : 'OneTouch Pay'
            ?>
          </h4>

        </div>

        <p class="footer-description small text-muted mb-3">
          <?= !empty($site_data['brand'])
            ? htmlspecialchars($site_data['brand'], ENT_QUOTES, 'UTF-8')
            : 'Brand'
          ?>
          empowers digital transactions with fast, secure, and smart fintech solutions.
        </p>

        <div class="social-icons d-flex gap-3">

          <a
            href="#"
            class="social"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="Facebook"
          >
            <i class="fab fa-facebook-f" aria-hidden="true"></i>
          </a>

          <a
            href="#"
            class="social"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="Twitter"
          >
            <i class="fab fa-twitter" aria-hidden="true"></i>
          </a>

          <a
            href="#"
            class="social"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="LinkedIn"
          >
            <i class="fab fa-linkedin-in" aria-hidden="true"></i>
          </a>

          <a
            href="#"
            class="social"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="Instagram"
          >
            <i class="fab fa-instagram" aria-hidden="true"></i>
          </a>

        </div>
      </div>

      <!-- Quick Links -->
      <div class="col-6 col-md-3 col-lg-2">
        <h6 class="footer-heading fw-semibold mb-3">
          Quick Links
        </h6>

        <ul class="list-unstyled small footer-list">
          <li>
            <a href="about" class="footer-link">
              About Us
            </a>
          </li>

          <li>
            <a href="services" class="footer-link">
              Services
            </a>
          </li>

          <li>
            <a href="contact" class="footer-link">
              Contact
            </a>
          </li>

          <li>
            <a href="privacy" class="footer-link">
              Privacy Policy
            </a>
          </li>

          <li>
            <a href="terms" class="footer-link">
              Terms &amp; Conditions
            </a>
          </li>
        </ul>
      </div>

      <!-- Products -->
      <div class="col-6 col-md-3 col-lg-2">
        <h6 class="footer-heading fw-semibold mb-3">
          Products
        </h6>

        <ul class="list-unstyled small footer-list">
          <li>
            <a href="aeps" class="footer-link">
              AEPS
            </a>
          </li>

          <li>
            <a href="bbps" class="footer-link">
              BBPS
            </a>
          </li>

          <li>
            <a href="recharge" class="footer-link">
              Recharge
            </a>
          </li>

          <li>
            <a href="pan" class="footer-link">
              PAN
            </a>
          </li>

          <li>
            <a href="fastag" class="footer-link">
              FASTag
            </a>
          </li>
        </ul>
      </div>

      <!-- Newsletter -->
      <div class="col-md-6 col-lg-3">
        <h6 class="footer-heading fw-semibold mb-3">
          Stay in Touch
        </h6>

        <p class="footer-newsletter-text small text-muted">
          Get exclusive updates, offers &amp; industry insights.
        </p>

        <form
          class="newsletter-form"
          method="post"
          action=""
          autocomplete="off"
        >
          <input
            type="email"
            class="form-control footer-input"
            name="newsletter_email"
            placeholder="Enter your email"
            autocomplete="email"
            required
          >

          <button
            type="submit"
            class="btn-classic fw-semibold"
          >
            Join
          </button>
        </form>
      </div>

    </div>

    <hr class="footer-divider my-4">

    <div class="footer-copyright text-center small text-muted">
      &copy; <?= date('Y') ?>

      <?= !empty($site_data['brand'])
        ? htmlspecialchars($site_data['brand'], ENT_QUOTES, 'UTF-8')
        : 'OneTouch Pay'
      ?>.

      All Rights Reserved.
    </div>

  </div>
</footer>


<!-- =============================
     FOOTER STYLES
============================= -->

<style>
:root {
  --ref-serif: Georgia, "Times New Roman", Times, serif;
}

.footer-clean {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-top: 2px solid #e0e3e7;
  background: #fffdf6;
  color: #111;
  font-family: var(--ref-serif);
}

/* Apply ref-serif to all footer text */
.footer-clean,
.footer-clean h1,
.footer-clean h2,
.footer-clean h3,
.footer-clean h4,
.footer-clean h5,
.footer-clean h6,
.footer-clean p,
.footer-clean span,
.footer-clean a,
.footer-clean li,
.footer-clean label,
.footer-clean input,
.footer-clean button {
  font-family: var(--ref-serif) !important;
}

/* Brand */
.footer-brand-wrap {
  min-width: 0;
}

.footer-brand-logo {
  width: 115px;
  height: 48px;
  flex-shrink: 0;
  margin-right: 10px;
  border-radius: 12px;
  object-fit: contain;
  background: #fff;
}

.footer-brand-name {
  min-width: 0;
  overflow: hidden;
  color: #111;
  font-family: var(--ref-serif);
  font-size: 22px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.footer-description {
  max-width: 390px;
  color: #6c757d;
  font-family: var(--ref-serif);
  font-size: 14px;
  line-height: 1.7;
}

/* Footer headings */
.footer-heading {
  position: relative;
  display: inline-block;
  margin-bottom: 20px !important;
  color: #111;
  font-family: var(--ref-serif);
  font-size: 17px;
  line-height: 1.3;
}

.footer-heading::after {
  content: "";
  width: 30px;
  height: 2px;
  display: block;
  margin-top: 9px;
  border-radius: 10px;
  background: #0072ff;
}

/* Footer lists */
.footer-list {
  margin: 0;
  padding: 0;
}

.footer-list li {
  margin: 0;
  padding: 0;
}

.footer-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-bottom: 9px;
  color: #444;
  font-family: var(--ref-serif);
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  transition:
    color 0.3s ease,
    transform 0.2s ease;
}

.footer-link::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  margin-right: 9px;
  border-radius: 50%;
  background: #0072ff;
  opacity: 0.65;
  transition: opacity 0.3s ease;
}

.footer-link:hover {
  color: #0072ff;
  text-decoration: none;
  transform: translateX(4px);
}

.footer-link:hover::before {
  opacity: 1;
}

/* Social icons */
.social-icons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 50%;
  background: #e9ecef;
  color: #111;
  font-family: var(--ref-serif);
  font-size: 16px;
  text-decoration: none;
  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.social:hover {
  border-color: #0072ff;
  background: #0072ff;
  color: #fff;
  text-decoration: none;
  transform: translateY(-3px);
}

/* Newsletter */
.footer-newsletter-text {
  color: #6c757d;
  font-family: var(--ref-serif);
  font-size: 14px;
  line-height: 1.6;
}

.newsletter-form {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
}

.footer-input {
  min-width: 0;
  height: 48px;
  flex: 1 1 auto;
  padding: 0 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  color: #111;
  font-family: var(--ref-serif);
  font-size: 14px;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease;
}

.footer-input::placeholder {
  color: #888;
  font-family: var(--ref-serif);
  opacity: 1;
}

.footer-input:hover {
  border-color: #9fa6ad;
}

.footer-input:focus {
  border-color: #0072ff;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 114, 255, 0.12);
  outline: none;
}

.btn-classic {
  min-width: 90px;
  height: 48px;
  flex: 0 0 auto;
  padding: 0 24px;
  border: none;
  border-radius: 8px;
  background: #007bff;
  color: #fff;
  font-family: var(--ref-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 48px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.btn-classic:hover {
  background: #005dc1;
  color: #fff;
  box-shadow: 0 7px 18px rgba(0, 93, 193, 0.22);
  transform: translateY(-2px);
}

.btn-classic:active {
  transform: translateY(0);
}

/* Divider */
.footer-divider {
  margin-top: 28px;
  margin-bottom: 24px;
  border: 0;
  border-top: 1px solid #e0e3e7;
  opacity: 1;
}

/* Copyright */
.footer-copyright {
  color: #6c757d;
  font-family: var(--ref-serif);
  font-size: 13px;
  line-height: 1.6;
}

/* Focus accessibility */
.footer-link:focus-visible,
.social:focus-visible,
.footer-input:focus-visible,
.btn-classic:focus-visible {
  outline: 3px solid rgba(0, 114, 255, 0.3);
  outline-offset: 3px;
}

/* Tablet */
@media (max-width: 991.98px) {
  .footer-clean .row {
    row-gap: 42px;
  }

  .footer-brand-name {
    font-size: 20px;
  }

  .newsletter-form {
    max-width: 460px;
  }
}

/* Mobile */
@media (max-width: 767.98px) {
  .footer-clean .row {
    text-align: center;
  }

  .footer-brand-wrap {
    justify-content: center;
  }

  .footer-description {
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  .social-icons {
    justify-content: center;
  }

  .footer-heading::after {
    margin-right: auto;
    margin-left: auto;
  }

  .footer-link {
    justify-content: center;
  }

  .newsletter-form {
    margin-right: auto;
    margin-left: auto;
  }
}

/* Small mobile */
@media (max-width: 575.98px) {
  .footer-clean .container {
    padding-right: 20px;
    padding-left: 20px;
  }

  .footer-brand-wrap {
    flex-direction: column;
    gap: 13px;
  }

  .footer-brand-logo {
    width: 105px;
    height: 48px;
    margin-right: 0;
  }

  .footer-brand-name {
    width: 100%;
    font-size: 20px;
    white-space: normal;
  }

  .newsletter-form {
    flex-direction: column;
    align-items: stretch;
  }

  .footer-input {
    width: 100%;
  }

  .btn-classic {
    width: 100%;
  }
}

/* Very small mobile */
@media (max-width: 390px) {
  .footer-brand-logo {
    width: 95px;
    height: 44px;
  }

  .footer-brand-name {
    font-size: 18px;
  }

  .footer-heading {
    font-size: 16px;
  }

  .footer-link,
  .footer-description,
  .footer-newsletter-text {
    font-size: 13px;
  }
}

/* Disable motion when requested */
@media (prefers-reduced-motion: reduce) {
  .footer-clean *,
  .footer-clean *::before,
  .footer-clean *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
</style>


<!-- =============================
     JS FILES
============================= -->

</main>

<script src="layouts/home/js/jquery.min.js"></script>
<script src="layouts/home/js/popper.min.js"></script>
<script src="layouts/home/js/bootstrap.min.js"></script>
<script src="layouts/home/js/aos.js"></script>
<script src="layouts/home/js/theme.min.js"></script>

</body>
</html>

