<?php
session_start();

?>
<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="BlantyreSynod">
    <link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap" rel="stylesheet">

    <title>BLANTYRE SYNOD - CCAP</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Additional CSS Files -->
    <link rel="stylesheet" href="assets/css/fontawesome.css">
    <link rel="stylesheet" href="assets/css/btsynod.css">
    <link rel="stylesheet" href="assets/css/owl.css">
<!-- style for drop down menu-->
<style>
li a, .dropbtn {
    display: inline-block;
    color: white;
    text-decoration: none;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
<!-- end style -->
  </head>

  <body>

    <!-- ***** Preloader Start ***** -->
    <div id="preloader">
        <div class="jumper">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>  
    <!-- ***** Preloader End ***** -->

    <!-- Header -->
    <div class="sub-header">
      <div class="container">
        <div class="row">
          <div class="col-md-8 col-xs-12">
            <ul class="left-info">
              <li><a href="#"><i class="fa fa-clock-o"></i>Mon-Fri 09:00-17:00</a></li>
              <li><a href="#"><i class="fa fa-phone"></i>+265 (01)-986-980</a></li>
            </ul>
          </div>
          <div class="col-md-4">
            <ul class="right-icons">
              <li><a href="#"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <header>
      <nav class="navbar navbar-expand-lg">
        <div class="container">
        <a class="navbar-brand logo-image" href="index.html"><img src="assets/images/logo.jpg" alt="alternative" style="width: 92px; height: 92px;"></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <a class="nav-link" href="index.html">Home</a>
              </li>
               <li class="nav-item">
                <a class="nav-link" href="about.html">History</a>
              </li>
              <li class="nav-item">
                <li class="dropdown">
                  <a class="nav-link" href="#" class="dropbtn">Ministries</a>
                    <div class="dropdown-content">
                      <a href="evangelism.html">Evangelism</a>
                      <a href="radio.html">Radio</a>
                      <a href="church.html">Church &amp; Society</a>
                    </div>
                </li>
              </li> 
              <li class="nav-item">
                <li class="dropdown">
                  <a class="nav-link" href="retreats.html" class="dropbtn">Retreat &amp; Recreation</a>
                    <div class="dropdown-content">
                      <a href="chilema.html">Chilema Ecumenical </a>
                      <a href="zomba.html">CCAP Cottage</a>
                      <a href="likhubula.html">CCAP Likhubula House</a>
                      <a href="bandawe.html">Grace Bandawe Conference Centre</a>
                    </div>
                </li>
              </li>                          
              <li class="nav-item">
                <a class="nav-link" href="management.html">Management</a>
              </li>
              <li class="nav-item">
                <li class="dropdown">
                  <a class="nav-link" href="#" class="dropbtn">Departments</a>
                    <div class="dropdown-content">
                      <a href="education.html">Education</a>
                      <a href="bshdc.html">BSHDC</a>
                      <a href="estates.html">Estates</a>
                      <a href="women.html">Women's Desk</a>
                    </div>
                </li>
              </li>                       
              <li class="nav-item active">
                <a class="nav-link" href="#top">Contact Us
                  <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item">
                <li class="dropdown">
                  <a class="nav-link" href="#" class="dropbtn">MORE</a>
                    <div class="dropdown-content">
                      <a href="presbytery.html">Presbytery</a>
                      <a href="news.html">News &amp; Events</a>
                      <a href="vacancies.html">Vacancies</a>
                    </div>
                </li>
              </li> 
            </ul>
          </div>
        </div>
      </nav>
    </header>

    <!-- Page Content -->
    <div class="page-heading header-text">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <h1>Contact Us</h1>
            <span>feel free to send us a message now!</span>
          </div>
        </div>
      </div>
    </div>

    <div class="contact-information">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <div class="contact-item">
              <i class="fa fa-phone"></i>
              <h4>Phone</h4>
              <p>Vivamus ut tellus mi. Nulla nec cursus elit, id vulputate nec cursus augue.</p>
              <a href="#">+265 (01)-986-980</a>
            </div>
          </div>
          <div class="col-md-4">
            <div class="contact-item">
              <i class="fa fa-envelope"></i>
              <h4>Email</h4>
              <p>Vivamus ut tellus mi. Nulla nec cursus elit, id vulputate nec cursus augue.</p>
              <a href="#">info@company.com</a>
            </div>
          </div>
          <div class="col-md-4">
            <div class="contact-item">
              <i class="fa fa-map-marker"></i>
              <h4>Location</h4>
              <p>1020 New Mountain Street<br>Forest Park, FP 11220</p>
              <a href="#">View on Google Maps</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="callback-form contact-us">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="section-heading">
              <h2>Send us a <em>message</em></h2>
              <span>Suspendisse a ante in neque iaculis lacinia</span>
            </div>
          </div>
          <div class="col-md-12">
            <div class="contact-form">
              <form id="contact" action="process.php" method="post">
                <div class="row">
                  <div class="col-lg-4 col-md-12 col-sm-12">
                    <fieldset>
                      <input name="UName" type="text" class="form-control" id="UName" placeholder="Full Name" required="">
                    </fieldset>
                  </div>
                  <div class="col-lg-4 col-md-12 col-sm-12">
                    <fieldset>
                      <input name="Email" type="text" class="form-control" id="Email" pattern="[^ @]*@[^ @]*" placeholder="E-Mail Address" required="">
                    </fieldset>
                  </div>
                  <div class="col-lg-4 col-md-12 col-sm-12">
                    <fieldset>
                      <input name="Subject" type="text" class="form-control" id="Subject" placeholder="Subject" required="">
                    </fieldset>
                  </div>
                  <div class="col-lg-12">
                    <fieldset>
                      <textarea name="msg" rows="6" class="form-control" id="msg" placeholder="Your Message" required=""></textarea>
                    </fieldset>
                  </div>
                  <div class="col-lg-12">
                    <fieldset>
                      <button type="submit" id="form-submit" class="filled-button">Send Message</button>
                    </fieldset>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="map">
<!-- How to change your own map point
	1. Go to Google Maps
	2. Click on your location point
	3. Click "Share" and choose "Embed map" tab
	4. Copy only URL and paste it within the src="" field below
-->
     <div class="mapouter"><div class="gmap_canvas"><iframe width="1350" height="400" id="gmap_canvas" src="https://maps.google.com/maps?q=blantyre%20synod%20malawi&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><a href="https://123movies-org.net">123movies</a><br><style>.mapouter{position:relative;text-align:right;height:400px;width:1350px;}</style><a href="https://www.embedgooglemap.net">how to embed a map in wordpress</a><style>.gmap_canvas {overflow:hidden;background:none!important;height:400px;width:1350px;}</style></div></div>     
    </div>

<br>
    <!-- Footer Starts Here -->
    <footer>
      <div class="container">
        <div class="row">
          <div class="col-md-3 footer-item">
            <h4>Blantyre Synod</h4>
            <p>Get involved with us. <br>Like our Facebook page.</p>
            <ul class="social-icons">
              <li><a rel="nofollow" href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            </ul>
          </div>
          <div class="col-md-3 footer-item">
            <h4>Useful Links</h4>
            <ul class="menu-list">
              <li><a href="about.html">About Us</a></li>
              <li><a href="ministries.html">Ministries</a></li>
              <li><a href="management.html">Management</a></li>
              <li><a href="contact.php">Contact us</a></li>
              <li><a href="news.html">News &amp; Events</a></li>
            </ul>
          </div>
          <div class="col-md-3 footer-item">
            <h4>Additional Pages</h4>
            <ul class="menu-list">
              <li><a href="evangelism.html">Radio</a></li>
              <li><a href="evangelism.html">Evangelism</a></li>
              <li><a href="depertments.html">Womens Desk</a></li>
              <li><a href="evagelism.html">Church &amp; Society</a></li>
              <li><a href="retreats..html">Retreats &amp; Recreation</a></li>
            </ul>
          </div>
          <div class="col-md-3 footer-item last-item">
            <h4>Contact Us</h4>
            <div class="">
            <a href="contact.php" class="border-button">Contact Us</a>
          </div>
          </div>
        </div>
      </div>
    </footer>
    
    <div class="sub-footer">
      <div class="container" id="#orion">
        <div class="row">
          <div class="col-md-12">
            <p>Copyright &copy; 2021 Blantyre Synod CCAP.</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Additional Scripts -->
    <script src="assets/js/custom.js"></script>
    <script src="assets/js/owl.js"></script>
    <script src="assets/js/slick.js"></script>
    <script src="assets/js/accordions.js"></script>
  </body>
</html>