<?php include('includes/header.php'); ?>
<?php include('db.php'); ?>


<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Us - Garda</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Poppins', sans-serif;
    }
    .contact-heading {
      font-size: 2.5rem;
      font-weight: 700;
      color: #0a3d03;
    }
    .contact-highlight {
      font-size: 2rem;
      font-weight: 700;
      color: #145703;
    }
    .btn-green {
      background: linear-gradient(to right, #28a745, #145703);
      color: white;
      padding: 12px 30px;
      font-weight: 600;
      border-radius: 30px;
      border: none;
    }
    .btn-green:hover {
      opacity: 0.9;
    }
    .form-control, .form-control:focus {
      border-radius: 10px;
      box-shadow: none;
    }
    .contact-icon {
      color: #28a745;
      font-size: 1.2rem;
    }
    .icon-img {
      width: 80px;
      height: 80px;
    }
  </style>
</head>
<body>

<section class="page-header">
  <div class="page-header__bg" style="background-image: url('https://images.unsplash.com/photo-1563714193017-5a5fb60bc02b?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')"></div>
  <div class="container">
    <ul class="wallpi-breadcrumb list-unstyled d-flex flex-wrap justify-content-center mb-2">
      <li><a href="index.php" class="text-decoration-none text-success">Home</a></li>
      <li><span class="text-muted ms-2">Contact</span></li>
    </ul>
    <h2 class="page-header__title text-dark">Contact Us</h2>
  </div>
</section>
<style>
  .page-header {
  position: relative;
  padding: 100px 0;
  text-align: center;
  overflow: hidden;
  background-color: #f3f3f3;
}

.page-header__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.25;
  z-index: 1;
}

.page-header .container {
  position: relative;
  z-index: 2;
}

.page-header__title {
  font-size: 40px;
  font-weight: bold;
  color: #212529;
}

</style>


  <!-- Contact Header -->
  <section class="py-5 bg-white">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-6">
          <p class="text-success fw-semibold">CONTACT US</p>
          <h2 class="contact-heading">Contact us anytime<br>to get help!</h2>
        </div>
        <div class="col-lg-6">
          <p>Garden Services offers year round commercial and residential services adhering to ANSI A300 tree pruning standards. Our ISA certified Arborist will help to inform you and is equipped.</p>
        </div>
      </div>

      <div class="row justify-content-center mt-5 text-center">
        <div class="col-lg-2 mb-3 mb-lg-0">
          <img src="https://cdn-icons-png.flaticon.com/512/1309/1309937.png" class="img-fluid icon-img">
        </div>
        <div class="col-lg-6 mb-3 mb-lg-0">
          <h3 class="contact-highlight">(1013)-123-5645</h3>
          <p class="mb-3">Mon – Sat: 8 am – 5 pm, Sunday: CLOSED</p>
          <a href="tel:10131235645" class="btn btn-green"> <i class="fas fa-arrow-right me-2"></i> Call us now</a>
        </div>
      </div>
    </div>
  </section>

  <!-- Contact Form and Address -->
  <section class="py-5">
    <div class="container">
      <div class="row gy-5">
        <div class="col-lg-5">
          <h2 class="contact-heading">Address</h2>
          <p><i class="fas fa-map-marker-alt contact-icon me-2"></i> 757 Third Avenue, 20th Floor, New York, NY 10017</p>
          <p><i class="fas fa-comment-dots contact-icon me-2"></i> garda@gmail.com</p>
          <p><i class="fas fa-phone contact-icon me-2"></i> +880 123 456 789</p>
        </div>

        <div class="col-lg-7">
          <h2 class="contact-heading">Get in touch</h2>
          <form action="#" method="POST">
            <div class="row g-3">
              <div class="col-md-6">
                <input type="text" name="name" class="form-control" placeholder="Your Name" required>
              </div>
              <div class="col-md-6">
                <input type="email" name="email" class="form-control" placeholder="Your Email" required>
              </div>
              <div class="col-md-6">
                <input type="text" name="phone" class="form-control" placeholder="Your Phone">
              </div>
              <div class="col-md-6">
                <textarea name="message" rows="3" class="form-control" placeholder="Message"></textarea>
              </div>
              <div class="col-12">
                <button type="submit" class="btn btn-green"><i class="fas fa-paper-plane me-2"></i>Send</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- Google Map Embed -->
    <section>
    <div class="container">
        <div class="ratio" style="--bs-aspect-ratio: 33.33%;">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d224345.90500603054!2d77.06889916764668!3d28.527582000000003!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390ce3a5c3a93d5b%3A0x9e6d65e67b6e96ff!2sDelhi!5e0!3m2!1sen!2sin!4v1718021959331!5m2!1sen!2sin" style="border:0; width: 100%; height: 100%;" allowfullscreen="" loading="lazy"></iframe>
        </div>
    </div>
    </section>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <?php include 'includes/footer.php'; ?>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
</body>
</html>