contact.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Us - Medical Health Center</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <link rel="stylesheet" href="{{ url_for('static', filename='styles/main.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='styles/contact.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='styles/header.css') }}">
</head>
<body class="contact-page">

  <!-- Navigation Header -->
  <header class="header">
    <nav class="nav container">
      <a href="/" class="logo">
        <i class="fas fa-heartbeat"></i>
        MRS - AI
      </a>
      <ul class="nav-links">
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact" class="active">Contact</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/developer">Developer</a></li>
        <li><a href="/quiz">Quiz</a></li>
        <li><a href="/wiki">Wiki</a></li>
      </ul>
      <div class="theme-toggle" id="themeToggle">
        <i class="fas fa-moon"></i>
      </div>
    </nav>
  </header>

  <!-- Hero Section -->
  <div class="contact-hero">
    <div class="container">
      <h1><i class="fas fa-leaf"></i> Contact Us</h1>
      <p>Have questions or need assistance? We're here to help!</p>
    </div>
  </div>

  <!-- Main Content -->
  <div class="container">
    <div class="contact-grid">
      
      <!-- Customer Support Card -->
      <div class="contact-card fade-in-up">
        <div class="contact-icon">
          <i class="fas fa-headset"></i>
        </div>
        <h2 class="contact-title">Customer Support</h2>
        <p class="contact-text">Our dedicated customer support team is here to help with inquiries, feedback, or technical issues. Don't hesitate to reach out to us!</p>
      </div>

      <!-- Get in Touch Card -->
      <div class="contact-card fade-in-up">
        <div class="contact-icon">
          <i class="fas fa-envelope-open-text"></i>
        </div>
        <h2 class="contact-title">Get in Touch</h2>
        <p class="contact-text">Contact us via email or phone, or use the form below to send us a message. We value your feedback and are committed to enhancing your experience.</p>
        <ul class="contact-list">
          <li>
            <i class="fas fa-envelope"></i>
            <a href="mailto:omprakashbehera.cse@gmail.com">omprakashbehera.cse@gmail.com</a>
          </li>
          <li>
            <i class="fas fa-phone-alt"></i>
            <a href="tel:+917205252871">+91 7205252871</a>
          </li>
        </ul>
      </div>

      <!-- Stay Connected Card -->
      <div class="contact-card fade-in-up">
        <div class="contact-icon">
          <i class="fas fa-share-alt"></i>
        </div>
        <h2 class="contact-title">Stay Connected</h2>
        <p class="contact-text">Follow us on social media for health tips, updates, and a vibrant community of health-conscious individuals!</p>
        <div class="social-links">
          <a href="https://github.com/CodeByPrakash" target="_blank" class="social-link">
            <i class="fab fa-github"></i>
            <span>GitHub</span>
          </a>
          <a href="https://www.linkedin.com/in/omprakash-cse/" target="_blank" class="social-link">
            <i class="fab fa-linkedin"></i>
            <span>LinkedIn</span>
          </a>
        </div>
      </div>

    </div>

    <!-- Location Card -->
    <div class="contact-card fade-in-up" style="max-width: 600px; margin: var(--spacing-xl) auto 0;">
      <div class="contact-icon">
        <i class="fas fa-map-marker-alt"></i>
      </div>
      <h2 class="contact-title">Location</h2>
      <p class="contact-text">Visit us at our serene, eco-friendly workspace:</p>
      <div class="address-box">
        <address>
          GCEK, Bhawanipatna, Kalahandi
        </address>
      </div>
    </div>

  </div>

  <!-- Footer -->
  <footer class="footer">
    <div class="footer-content">
      <p>© 2025 Medical Health Center. Together for a healthier, greener future.</p>
    </div>
  </footer>

  <script src="{{ url_for('static', filename='scripts/theme-toggle.js') }}"></script>

</body>
</html>