<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>404 - Page Not Found | India On Map</title>
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="Page not found. Navigate to India's interactive political maps showing Lok Sabha and Assembly constituencies.">
    <meta name="robots" content="noindex, follow">
    
    <!-- Theme Color -->
    <meta name="theme-color" content="#2A3F54">
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="images/app_icon.png">

    <!-- Bootstrap -->
    <link href="Ui_template/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="Ui_template/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">

    <!-- Custom Theme Style -->
    <link href="Ui_template/build/css/custom.min.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">
    
    <style>
      .error-404-container {
        text-align: center;
        padding: 60px 20px;
        max-width: 800px;
        margin: 0 auto;
      }
      
      .error-404-container h1 {
        font-size: 120px;
        font-weight: 700;
        color: #1ABB9C;
        margin: 0;
        line-height: 1;
      }
      
      .error-404-container h2 {
        font-size: 32px;
        font-weight: 600;
        color: #2A3F54;
        margin: 20px 0;
      }
      
      .error-404-container p {
        font-size: 18px;
        color: #73879C;
        margin: 20px 0;
        line-height: 1.6;
      }
      
      .error-search-box {
        max-width: 500px;
        margin: 30px auto;
      }
      
      .error-search-box input {
        padding: 12px 20px;
        font-size: 16px;
        border: 2px solid #E6E9ED;
        border-radius: 6px;
        width: 100%;
      }
      
      .error-search-box input:focus {
        outline: none;
        border-color: #1ABB9C;
      }
      
      .popular-links {
        margin: 40px 0;
      }
      
      .popular-links h3 {
        font-size: 20px;
        font-weight: 600;
        color: #2A3F54;
        margin-bottom: 20px;
      }
      
      .link-cards {
        display: flex;
        gap: 20px;
        justify-content: center;
        flex-wrap: wrap;
      }
      
      .link-card {
        background: white;
        border: 2px solid #E6E9ED;
        border-radius: 8px;
        padding: 30px 20px;
        min-width: 200px;
        text-decoration: none;
        transition: all 0.3s ease;
      }
      
      .link-card:hover {
        border-color: #1ABB9C;
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(26, 187, 156, 0.2);
        text-decoration: none;
      }
      
      .link-card i {
        font-size: 48px;
        color: #1ABB9C;
        margin-bottom: 15px;
      }
      
      .link-card h4 {
        font-size: 18px;
        font-weight: 600;
        color: #2A3F54;
        margin: 10px 0 5px 0;
      }
      
      .link-card p {
        font-size: 14px;
        color: #73879C;
        margin: 0;
      }
      
      .map-illustration {
        max-width: 300px;
        margin: 30px auto;
        opacity: 0.6;
      }
      
      .map-illustration svg {
        width: 100%;
        height: auto;
      }
      
      @media (max-width: 768px) {
        .error-404-container h1 {
          font-size: 80px;
        }
        
        .error-404-container h2 {
          font-size: 24px;
        }
        
        .link-cards {
          flex-direction: column;
          align-items: center;
        }
        
        .link-card {
          width: 100%;
          max-width: 300px;
        }
      }
    </style>
  </head>

  <body class="nav-md">
    <div class="container body">
      <div class="main_container">
        <div class="col-md-3 left_col">
          <div class="left_col scroll-view">
            <div class="navbar nav_title" style="border: 0;">
              <a href="parliamentary.html" class="site_title" style="display:flex;align-items:center;white-space:nowrap;">
                <img src="images/app_icon.png" alt="Logo" style="width:45px;height:45px;margin-right:5px;">
                <span style="font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;font-size:18px;font-weight:600;">
                  <span style="color:#1ABB9C;">IndiaOnMap</span><span style="color:#fff;">.com</span>
                </span>
              </a>
            </div>

            <div class="clearfix"></div>

            <br />

            <!-- sidebar menu -->
            <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
              <div class="menu_section">
                <ul class="nav side-menu">
                  <li><a href="parliamentary.html"><i class="fa fa-university"></i> Political Map</a>
                    <ul class="nav child_menu">
                      <li><a href="parliamentary.html">Parliament Seats</a></li>
                      <li><a href="assembly.html">Assembly Seats</a></li>
                    </ul>
                  </li>
                  <li><a href="states.html"><i class="fa fa-map"></i> General Map</a>
                    <ul class="nav child_menu">
                      <li><a href="states.html">States Map</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
            <!-- /sidebar menu -->

            <!-- /menu footer buttons -->
            <div class="sidebar-footer hidden-small">
              <a href="about.html" data-toggle="tooltip" data-placement="top" title="About">
                <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
              </a>
              <a href="feedback.html" data-toggle="tooltip" data-placement="top" title="Feedback">
                <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
              </a>
              <a href="credits.html" data-toggle="tooltip" data-placement="top" title="Credits">
                <span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
              </a>
            </div>
            <!-- /menu footer buttons -->
          </div>
        </div>

        <!-- top navigation -->
        <div class="top_nav">
          <div class="nav_menu">
            <nav>
              <div class="nav toggle">
                <a id="menu_toggle"><i class="fa fa-bars"></i></a>
              </div>
            </nav>
          </div>
        </div>
        <!-- /top navigation -->

        <!-- page content -->
        <div class="right_col" role="main">
          <div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>404 - Page Not Found</h3>
              </div>
            </div>

            <div class="clearfix"></div>

            <div class="row">
              <div class="col-md-12">
                <div class="x_panel">
                  <div class="x_content">
                    <div class="error-404-container">
                      <h1>404</h1>
                      <h2>This Constituency Doesn't Exist!</h2>
                      <p>Oops! The page you're looking for seems to have lost its election. It might have been moved, deleted, or never existed in the first place.</p>
                      
                      <!-- Map Illustration -->
                      <div class="map-illustration">
                        <svg viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M100 180 L40 140 L40 60 L100 20 L160 60 L160 140 Z" stroke="#1ABB9C" stroke-width="3" fill="#E8F8F5" opacity="0.5"/>
                          <circle cx="100" cy="100" r="30" stroke="#1ABB9C" stroke-width="3" fill="white"/>
                          <text x="100" y="110" text-anchor="middle" font-size="40" fill="#1ABB9C" font-weight="bold">?</text>
                        </svg>
                      </div>
                      
                      <!-- Search Box -->
                      <div class="error-search-box">
                        <input type="text" id="constituency-search" placeholder="Search for a constituency or state..." aria-label="Search constituencies">
                      </div>
                      
                      <!-- Popular Links -->
                      <div class="popular-links">
                        <h3>Where would you like to go?</h3>
                        <div class="link-cards">
                          <a href="parliamentary.html" class="link-card">
                            <i class="fa fa-university"></i>
                            <h4>Parliament Map</h4>
                            <p>543 Lok Sabha constituencies</p>
                          </a>
                          
                          <a href="assembly.html" class="link-card">
                            <i class="fa fa-users"></i>
                            <h4>Assembly Map</h4>
                            <p>State Vidhan Sabha seats</p>
                          </a>
                          
                          <a href="states.html" class="link-card">
                            <i class="fa fa-map"></i>
                            <h4>States Map</h4>
                            <p>Geographical boundaries</p>
                          </a>
                        </div>
                      </div>
                      
                      <p style="margin-top: 40px;">
                        <a href="parliamentary.html" class="btn btn-success btn-lg">
                          <i class="fa fa-home"></i> Go to Homepage
                        </a>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /page content -->

        <!-- footer content -->
        <footer>
          <div class="clearfix"></div>
        </footer>
        <!-- /footer content -->
      </div>
    </div>

    <!-- jQuery -->
    <script src="Ui_template/vendors/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap -->
    <script src="Ui_template/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- Custom Theme Scripts -->
    <script src="Ui_template/build/js/custom.min.js"></script>
    
    <script>
      // Simple search functionality
      document.getElementById('constituency-search').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
          const query = this.value.trim();
          if (query) {
            // Redirect to parliamentary page with search (you can enhance this later)
            window.location.href = 'parliamentary.html';
          }
        }
      });
    </script>
  </body>
</html>
