<!-- ======= FOOTER ======= -->
<footer id="footer" class="footer-bjp">

  <div class="container">
    <div class="row gy-3 align-items-center">

      <!-- LEFT -->
      <div class="col-lg-4 col-md-6 text-md-start text-center">
        <h3 class="footer-name">श्री अमित प्रताप सिंह</h3>
        <p class="footer-role">(प्रधान)</p>
        <p class="footer-party">भारतीय जनता पार्टी (भाजपा)</p>
        <p class="footer-constituency">
          83, गोवर्धन विधानसभा · मथुरा (उ.प्र.)
        </p>
      </div>

      <!-- CENTER -->
      <div class="col-lg-4 col-md-6 text-center">
        <h4 class="footer-title">संपर्क</h4>
        <p class="mb-1">
          📞 <a href="tel:7248555999">+91 72485 55999</a>
        </p>
        <p class="footer-office">
          शक्ति प्रॉपर्टी, नानपुर · औरंगाबाद
        </p>
      </div>

      <!-- RIGHT -->
      <div class="col-lg-4 text-lg-end text-center">
        <div class="footer-slogan">
          <strong>जय भाजपा</strong><br>
          <small>राष्ट्र प्रथम • विकास • सेवा</small>
        </div>
      </div>

    </div>
  </div>

</footer>

<!-- ===== MOBILE BOTTOM NAV ===== -->
<div class="mobile-bottom-nav d-lg-none">
  <a href="index.php" class="<?= ($currentPage=='index.php')?'active':'' ?>">
    <i class="bi bi-house"></i><span>होम</span>
  </a>
  <a href="about.php" class="<?= ($currentPage=='about.php')?'active':'' ?>">
    <i class="bi bi-info-circle"></i><span>परिचय</span>
  </a>
  <a href="contact.php" class="<?= ($currentPage=='contact.php')?'active':'' ?>">
    <i class="bi bi-telephone"></i><span>संपर्क</span>
  </a>
  <a href="javascript:void(0)" onclick="openMobileMenu()">
    <i class="bi bi-list"></i><span>मेनू</span>
  </a>
</div>

<!-- MOBILE MENU OVERLAY -->
<div id="mobileMenuOverlay" class="mobile-menu-overlay">
  <div class="mobile-menu-box">
    <a href="index.php">होम</a>
    <a href="about.php">परिचय</a>
    <a href="resume.php">गैलरी</a>
    <a href="services.php">ब्लॉग</a>
    <a href="videos.php">कवरेज क्लिप</a>
    <a href="events.php">सामाजिक कार्य</a>
    <a href="contact.php">संपर्क</a>
    <button onclick="closeMobileMenu()">बंद करें ✕</button>
  </div>
</div>

<style>
/* ===== DESKTOP FOOTER (UNCHANGED) ===== */
.footer-bjp {
  background: linear-gradient(90deg,#ff9933,#ffffff,#138808);
  padding: 50px 0 20px;
}

.footer-name {
  font-size: 22px;
  font-weight: 900;
}

.footer-role {
  color: #ff6a00;
  font-weight: 700;
}

.footer-party {
  color: #138808;
  font-weight: 700;
}

.footer-title {
  font-size: 18px;
  font-weight: 800;
  color: #ff6a00;
}

/* ===== MOBILE BOTTOM NAV (UNCHANGED) ===== */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  border-top: 1px solid #ddd;
  z-index: 9999;
}

.mobile-bottom-nav a {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
}

.mobile-bottom-nav a i {
  font-size: 20px;
  display: block;
}

.mobile-bottom-nav a.active {
  color: #ff6a00;
}

/* ===== MOBILE MENU (UNCHANGED) ===== */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 99999;
}

.mobile-menu-box {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #fff;
  padding: 25px;
  border-radius: 20px 20px 0 0;
}

.mobile-menu-box a {
  display: block;
  padding: 12px 0;
  font-weight: 700;
  text-decoration: none;
  color: #000;
  border-bottom: 1px solid #eee;
}

.mobile-menu-box button {
  margin-top: 15px;
  width: 100%;
  padding: 10px;
  background: #ff6a00;
  color: #fff;
  border: none;
  border-radius: 8px;
}

/* ==================================
   ✅ MOBILE ONLY FOOTER FIX
   (DESKTOP NOT TOUCHED)
================================== */
@media (max-width: 768px) {

  .footer-bjp {
    padding: 22px 0 65px;   /* ⬇ shorter footer + space for bottom nav */
    font-size: 13px;
    text-align: center;
  }

  .footer-name {
    font-size: 18px;
    margin-bottom: 2px;
  }

  .footer-role,
  .footer-party {
    font-size: 12.5px;
    margin-bottom: 2px;
  }

  .footer-title {
    font-size: 15px;
    margin-bottom: 4px;
  }

  .footer-constituency,
  .footer-office {
    font-size: 12.5px;
    line-height: 1.35;
    margin-bottom: 4px;
  }

  .footer-slogan small {
    font-size: 11.5px;
  }
}
</style>


<script>
function openMobileMenu() {
  document.getElementById("mobileMenuOverlay").style.display = "block";
}
function closeMobileMenu() {
  document.getElementById("mobileMenuOverlay").style.display = "none";
}
</script>

</body>
</html>
