<?php   

/*Template Name: Home Page */ 

get_header(); 
?>

<!-- Start main-content -->
<div class="main-content">
<div class="container-fluid banner-wrap">
    <div class="first-screen first-screen1 main-banner "> 

      <img src="https://www.apnpc.com.au/wp-content/uploads/2023/01/sloder1.webp" alt="" class="img-fit" width="1404" height="585"> 
      <div class="banner-cont  ">
        <div class="container">
          <div class="row "><div class="col-12  ">
            <h2>Branding Your Business In The Best Way Possible </h2>
            <div class="h6-heading">From SEO campaigns to AdWords strategizing and creating stunning websites for businesses, we help you stay visible in the virtual world for a long time.   </div></div></div></div></div></div></div>
<!-- Section: About -->
<section id="about">
<div class="container">
<div class="section-content text-center">
<div class="row">
<div class="col-md-12">
  <h2 class="text-uppercase mt-0">Welcome To <span class="text-theme-colored font-weight-600">Ecocharity</span> HTML5 Responsive Template</h2>
  <h4 class="text-gray-dimgray font-weight-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
</div>
</div>
<div class="row mt-40">
<div class="col-sm-6 col-md-4 maxwidth500 mb-sm-40">
  <img class="img-fullwidth" src="<?php echo get_template_directory_uri()?>/myassets/images/about/1.jpg" alt="">
  <h3>Save water from polution</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero omnis unde nesciunt?</p>
  <a href="#" class="btn btn-sm btn-theme-colored">Read more</a>
</div>
<div class="col-sm-6 col-md-4 maxwidth500 mb-sm-40">
  <img class="img-fullwidth" src="<?php echo get_template_directory_uri()?>/myassets/images/about/2.jpg" alt="">
  <h3>Make the world greener</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero omnis unde nesciunt?</p>
  <a href="#" class="btn btn-sm btn-theme-colored">Read more</a>
</div>
<div class="col-sm-6 col-md-4 maxwidth500 mb-sm-0">
  <img class="img-fullwidth" src="<?php echo get_template_directory_uri()?>/myassets/images/about/3.jpg" alt="">
  <h3>Help to balance eco system</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero omnis unde nesciunt?</p>
  <a href="#" class="btn btn-sm btn-theme-colored">Read more</a>
</div>
</div>
</div>
</div>
</section>

<!-- Section: Mission  -->
<section class="bg-silver-light">
<div class="container">
<div class="section-content">
<div class="row">
<div class="col-md-6 wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.3s">
  <h3 class="line-bottom mt-0 mt-sm-30">Our <span class="text-theme-colored font-weight-800">Mission</span></h3>
  <p class="mb-15">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt est atque, ab maxime minima ducimus aliquam ipsum consequatur id magnam aut commodi, dicta sunt! Mollitia minima error optio excepturi, totam, provident fugit. Rerum aliquam, culpa eos tempora.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam sit veritatis, consectetur, quaerat aliquam, nisi laborum sapiente perferendis quos harum illo dignissimos ea rem!</p>
  <a href="#" class="btn btn-theme-colored btn-flat">read more</a>
</div>
<div class="col-md-6 wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.3s">
  <img class="img-fullwidth mt-sm-40" src="<?php echo get_template_directory_uri()?>/myassets/images/about/1.png" alt="">
</div>
</div>
</div>
</div>
</section>

<!-- Section: Campaign -->
<section id="campaign">
<div class="container pb-40">
<div class="section-title text-center">
<div class="row">
<div class="col-md-8 col-md-offset-2 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s">
  <h2 class="text-uppercase line-bottom-center mt-0">Our <span class="text-theme-colored">Campaigns</span></h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem autem<br> voluptatem obcaecati!</p>
</div>
</div>
</div>
<div class="row multi-row-clearfix">
<div class="col-md-12">
<div class="owl-carousel-4col" data-dots="true">
  <div class="item">
	<div class="campaign bg-silver-light maxwidth500 mb-30">
	  <div class="thumb">
		<img src="<?php echo get_template_directory_uri()?>/myassets/images/project/1.jpg" alt="" class="img-fullwidth">
		<div class="campaign-overlay"></div>
	  </div>
	  <div class="campaign-details clearfix p-15 pt-10 pb-10">
		<h5 class="text-theme-colored font-weight-500 mb-0">Subtitle place here</h5>
		<h4 class="font-weight-700 mt-0"><a href="#">Campaign Title Here</a></h4>
		<p>Lorem ipsum dolor sit amet, consect adipisicing elit. Praesent quossit <a class="text-theme-colored ml-5" href="#"> →</a></p>
		<div class="campaign-bottom border-top clearfix mt-20">
		  <ul class="list-inline font-weight-600 pull-left flip pr-0 mt-10">
			<li class="text-gray-lightgray"><i class="fa fa-heart mr-10"></i>256</li>
			<li class="text-gray-lightgray"><i class="fa fa-share-alt mr-10"></i>75</li>
		  </ul>
		  <a class="btn btn-xs btn-theme-colored font-weight-600 font-11 pull-right flip mt-10" href="page-donate.html">Donate Now</a>
		</div>
	  </div>
	</div>
  </div>
  <div class="item">
	<div class="campaign bg-silver-light maxwidth500 mb-30">
	  <div class="thumb">
		<img src="<?php echo get_template_directory_uri()?>/myassets/images/project/2.jpg" alt="" class="img-fullwidth">
		<div class="campaign-overlay"></div>
	  </div>
	  <div class="campaign-details clearfix p-15 pt-10 pb-10">
		<h5 class="text-theme-colored font-weight-500 mb-0">Subtitle place here</h5>
		<h4 class="font-weight-700 mt-0"><a href="#">Campaign Title Here</a></h4>
		<p>Lorem ipsum dolor sit amet, consect adipisicing elit. Praesent quossit <a class="text-theme-colored ml-5" href="#"> →</a></p>
		<div class="campaign-bottom border-top clearfix mt-20">
		  <ul class="list-inline font-weight-600 pull-left flip pr-0 mt-10">
			<li class="text-gray-lightgray"><i class="fa fa-heart mr-10"></i>256</li>
			<li class="text-gray-lightgray"><i class="fa fa-share-alt mr-10"></i>75</li>
		  </ul>
		  <a class="btn btn-xs btn-theme-colored font-weight-600 font-11 pull-right flip mt-10" href="page-donate.html">Donate Now</a>
		</div>
	  </div>
	</div>
  </div>
  <div class="item">
	<div class="campaign bg-silver-light maxwidth500 mb-30">
	  <div class="thumb">
		<img src="<?php echo get_template_directory_uri()?>/myassets/images/project/3.jpg" alt="" class="img-fullwidth">
		<div class="campaign-overlay"></div>
	  </div>
	  <div class="campaign-details clearfix p-15 pt-10 pb-10">
		<h5 class="text-theme-colored font-weight-500 mb-0">Subtitle place here</h5>
		<h4 class="font-weight-700 mt-0"><a href="#">Campaign Title Here</a></h4>
		<p>Lorem ipsum dolor sit amet, consect adipisicing elit. Praesent quossit <a class="text-theme-colored ml-5" href="#"> →</a></p>
		<div class="campaign-bottom border-top clearfix mt-20">
		  <ul class="list-inline font-weight-600 pull-left flip pr-0 mt-10">
			<li class="text-gray-lightgray"><i class="fa fa-heart mr-10"></i>256</li>
			<li class="text-gray-lightgray"><i class="fa fa-share-alt mr-10"></i>75</li>
		  </ul>
		  <a class="btn btn-xs btn-theme-colored font-weight-600 font-11 pull-right flip mt-10" href="page-donate.html">Donate Now</a>
		</div>
	  </div>
	</div>
  </div>
  <div class="item">
	<div class="campaign bg-silver-light maxwidth500 mb-30">
	  <div class="thumb">
		<img src="<?php echo get_template_directory_uri()?>/myassets/images/project/4.jpg" alt="" class="img-fullwidth">
		<div class="campaign-overlay"></div>
	  </div>
	  <div class="campaign-details clearfix p-15 pt-10 pb-10">
		<h5 class="text-theme-colored font-weight-500 mb-0">Subtitle place here</h5>
		<h4 class="font-weight-700 mt-0"><a href="#">Campaign Title Here</a></h4>
		<p>Lorem ipsum dolor sit amet, consect adipisicing elit. Praesent quossit <a class="text-theme-colored ml-5" href="#"> →</a></p>
		<div class="campaign-bottom border-top clearfix mt-20">
		  <ul class="list-inline font-weight-600 pull-left flip pr-0 mt-10">
			<li class="text-gray-lightgray"><i class="fa fa-heart mr-10"></i>256</li>
			<li class="text-gray-lightgray"><i class="fa fa-share-alt mr-10"></i>75</li>
		  </ul>
		  <a class="btn btn-xs btn-theme-colored font-weight-600 font-11 pull-right flip mt-10" href="page-donate.html">Donate Now</a>
		</div>
	  </div>
	</div>
  </div>
  <div class="item">
	<div class="campaign bg-silver-light maxwidth500 mb-30">
	  <div class="thumb">
		<img src="<?php echo get_template_directory_uri()?>/myassets/images/project/5.jpg" alt="" class="img-fullwidth">
		<div class="campaign-overlay"></div>
	  </div>
	  <div class="campaign-details clearfix p-15 pt-10 pb-10">
		<h5 class="text-theme-colored font-weight-500 mb-0">Subtitle place here</h5>
		<h4 class="font-weight-700 mt-0"><a href="#">Campaign Title Here</a></h4>
		<p>Lorem ipsum dolor sit amet, consect adipisicing elit. Praesent quossit <a class="text-theme-colored ml-5" href="#"> →</a></p>
		<div class="campaign-bottom border-top clearfix mt-20">
		  <ul class="list-inline font-weight-600 pull-left flip pr-0 mt-10">
			<li class="text-gray-lightgray"><i class="fa fa-heart mr-10"></i>256</li>
			<li class="text-gray-lightgray"><i class="fa fa-share-alt mr-10"></i>75</li>
		  </ul>
		  <a class="btn btn-xs btn-theme-colored font-weight-600 font-11 pull-right flip mt-10" href="page-donate.html">Donate Now</a>
		</div>
	  </div>
	</div>
  </div>
</div>
</div>
</div>
</div>
</section>

<!-- Divider: Become a Volunteer -->
<section class="divider parallax layer-overlay overlay-white-2" data-bg-img="<?php echo get_template_directory_uri()?>/myassets/images/bg/bg4.jpg" data-parallax-ratio="0.7">
<div class="container pt-110 pb-110">
<div class="row">
<div class="col-md-8 wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.3s">
<h3 class="text-gray font-24 font-weight-600 mb-5">Want to Join With Us?</h3>
<h2 class="font-36 text-uppercase font-weight-600 mt-0">Become a Proud <span class="text-theme-colored">Volunteer</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis totam, laudantium officia praesentium expedita omnis unde tempora beatae, modi, sequi quis. Est quas corporis, nobis aperiam cumque minima libero rem, itaque quo vitae odit?</p>
<a href="#" class="btn btn-lg btn-theme-colored mt-20">Join Now</a>
</div>
</div>
</div>
</section>

<!-- Section: Featured Campaign -->
<section id="featured">
<div class="container">
<div class="section-content">
<div class="row">
<div class="col-md-12">
  <h2 class="title line-bottom mt-0 mb-30"><i class="fa fa-thumb-tack text-gray-darkgray mr-10"></i>Featured <span class="text-theme-colored">Campaign</span></h2>
  <div class="owl-carousel-4col">
	<div class="item">
	  <div class="campaign bg-silver-light maxwidth500 mb-30">
		<div class="thumb">
		  <img src="<?php echo get_template_directory_uri()?>/myassets/images/project/1.jpg" alt="" class="img-fullwidth">
		  <div class="campaign-overlay"></div>
		</div>
		<div class="campaign-details clearfix p-15 pt-10 pb-20">
		  <h5 class="text-theme-colored font-weight-500 mb-0">Subtitle place here</h5>
		  <h4 class="font-weight-700 mt-0"><a href="#">Campaign Title Here</a></h4>
		  <p>Lorem ipsum dolor sit amet, consect adipisicing elit. Praesent quos sit.</p>
		  <div class="campaign-bottom border-top clearfix mt-20">
			<div class="clearfix">
			  <ul class="list-inline font-weight-600 font-14 pull-left flip pr-0 mt-10">
				<li class="text-gray pr-0 mr-5">Need: <span class="text-theme-colored">$890</span> |</li>
				<li class="text-gray pl-0">Raised: <span class="text-theme-colored"> $460</span></li>
			  </ul>
			</div>
			<a class="btn btn-xs btn-default font-weight-600 font-11 mt-10 mr-5" href="page-single-campaign.html">View Details</a>
			<a class="btn btn-xs btn-theme-colored font-weight-600 font-11 mt-10" href="page-donate.html">Donate Now</a>
		  </div>
		</div>
	  </div>
	</div>
	<div class="item">
	  <div class="campaign bg-silver-light maxwidth500 mb-30">
		<div class="thumb">
		  <img src="<?php echo get_template_directory_uri()?>/myassets/images/project/2.jpg" alt="" class="img-fullwidth">
		  <div class="campaign-overlay"></div>
		</div>
		<div class="campaign-details clearfix p-15 pt-10 pb-20">
		  <h5 class="text-theme-colored font-weight-500 mb-0">Subtitle place here</h5>
		  <h4 class="font-weight-700 mt-0"><a href="#">Campaign Title Here</a></h4>
		  <p>Lorem ipsum dolor sit amet, consect adipisicing elit. Praesent quos sit.</p>
		  <div class="campaign-bottom border-top clearfix mt-20">
			<div class="clearfix">
			  <ul class="list-inline font-weight-600 font-14 pull-left flip pr-0 mt-10">
				<li class="text-gray pr-0 mr-5">Need: <span class="text-theme-colored">$890</span> |</li>
				<li class="text-gray pl-0">Raised: <span class="text-theme-colored"> $460</span></li>
			  </ul>
			</div>
			<a class="btn btn-xs btn-default font-weight-600 font-11 mt-10 mr-5" href="page-single-campaign.html">View Details</a>
			<a class="btn btn-xs btn-theme-colored font-weight-600 font-11 mt-10" href="page-donate.html">Donate Now</a>
		  </div>
		</div>
	  </div>
	</div>
	<div class="item">
	  <div class="campaign bg-silver-light maxwidth500 mb-30">
		<div class="thumb">
		  <img src="<?php echo get_template_directory_uri()?>/myassets/images/project/3.jpg" alt="" class="img-fullwidth">
		  <div class="campaign-overlay"></div>
		</div>
		<div class="campaign-details clearfix p-15 pt-10 pb-20">
		  <h5 class="text-theme-colored font-weight-500 mb-0">Subtitle place here</h5>
		  <h4 class="font-weight-700 mt-0"><a href="#">Campaign Title Here</a></h4>
		  <p>Lorem ipsum dolor sit amet, consect adipisicing elit. Praesent quos sit.</p>
		  <div class="campaign-bottom border-top clearfix mt-20">
			<div class="clearfix">
			  <ul class="list-inline font-weight-600 font-14 pull-left flip pr-0 mt-10">
				<li class="text-gray pr-0 mr-5">Need: <span class="text-theme-colored">$890</span> |</li>
				<li class="text-gray pl-0">Raised: <span class="text-theme-colored"> $460</span></li>
			  </ul>
			</div>
			<a class="btn btn-xs btn-default font-weight-600 font-11 mt-10 mr-5" href="page-single-campaign.html">View Details</a>
			<a class="btn btn-xs btn-theme-colored font-weight-600 font-11 mt-10" href="page-donate.html">Donate Now</a>
		  </div>
		</div>
	  </div>
	</div>
	<div class="item">
	  <div class="campaign bg-silver-light maxwidth500 mb-30">
		<div class="thumb">
		  <img src="<?php echo get_template_directory_uri()?>/myassets/images/project/4.jpg" alt="" class="img-fullwidth">
		  <div class="campaign-overlay"></div>
		</div>
		<div class="campaign-details clearfix p-15 pt-10 pb-20">
		  <h5 class="text-theme-colored font-weight-500 mb-0">Subtitle place here</h5>
		  <h4 class="font-weight-700 mt-0"><a href="#">Campaign Title Here</a></h4>
		  <p>Lorem ipsum dolor sit amet, consect adipisicing elit. Praesent quos sit.</p>
		  <div class="campaign-bottom border-top clearfix mt-20">
			<div class="clearfix">
			  <ul class="list-inline font-weight-600 font-14 pull-left flip pr-0 mt-10">
				<li class="text-gray pr-0 mr-5">Need: <span class="text-theme-colored">$890</span> |</li>
				<li class="text-gray pl-0">Raised: <span class="text-theme-colored"> $460</span></li>
			  </ul>
			</div>
			<a class="btn btn-xs btn-default font-weight-600 font-11 mt-10 mr-5" href="page-single-campaign.html">View Details</a>
			<a class="btn btn-xs btn-theme-colored font-weight-600 font-11 mt-10" href="page-donate.html">Donate Now</a>
		  </div>
		</div>
	  </div>
	</div>
	<div class="item">
	  <div class="campaign bg-silver-light maxwidth500 mb-30">
		<div class="thumb">
		  <img src="<?php echo get_template_directory_uri()?>/myassets/images/project/5.jpg" alt="" class="img-fullwidth">
		  <div class="campaign-overlay"></div>
		</div>
		<div class="campaign-details clearfix p-15 pt-10 pb-20">
		  <h5 class="text-theme-colored font-weight-500 mb-0">Subtitle place here</h5>
		  <h4 class="font-weight-700 mt-0"><a href="#">Campaign Title Here</a></h4>
		  <p>Lorem ipsum dolor sit amet, consect adipisicing elit. Praesent quos sit.</p>
		  <div class="campaign-bottom border-top clearfix mt-20">
			<div class="clearfix">
			  <ul class="list-inline font-weight-600 font-14 pull-left flip pr-0 mt-10">
				<li class="text-gray pr-0 mr-5">Need: <span class="text-theme-colored">$890</span> |</li>
				<li class="text-gray pl-0">Raised: <span class="text-theme-colored"> $460</span></li>
			  </ul>
			</div>
			<a class="btn btn-xs btn-default font-weight-600 font-11 mt-10 mr-5" href="page-single-campaign.html">View Details</a>
			<a class="btn btn-xs btn-theme-colored font-weight-600 font-11 mt-10" href="page-donate.html">Donate Now</a>
		  </div>
		</div>
	  </div>
	</div>
  </div>
</div>
</div>
</div>
</div>
</section>

<!-- Divider: Funfact -->
<section class="divider parallax layer-overlay overlay-dark-4" data-bg-img="<?php echo get_template_directory_uri()?>/myassets/images/bg/bg2.jpg" data-parallax-ratio="0.7">
<div class="container pt-90 pb-90">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 mb-md-50">
<div class="funfact text-center">
  <i class="pe-7s-smile mt-5 text-white"></i>
  <h2 data-animation-duration="2000" data-value="754" class="animate-number text-theme-colored font-42 font-weight-500 mt-0 mb-0">0</h2>
  <h5 class="text-white text-uppercase font-weight-600">Happy Donators</h5>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 mb-md-50">
<div class="funfact text-center">
  <i class="pe-7s-rocket mt-5 text-white"></i>
  <h2 data-animation-duration="2000" data-value="675" class="animate-number text-theme-colored font-42 font-weight-500 mt-0 mb-0">0</h2>
  <h5 class="text-white text-uppercase font-weight-600">Success Mission</h5>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 mb-md-50">
<div class="funfact text-center">
  <i class="pe-7s-add-user mt-5 text-white"></i>
  <h2 data-animation-duration="2000" data-value="1248" class="animate-number text-theme-colored font-42 font-weight-500 mt-0 mb-0">0</h2>
  <h5 class="text-white text-uppercase font-weight-600">Volunteer Reached</h5>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 mb-md-50">
<div class="funfact text-center">
  <i class="pe-7s-global mt-5 text-white"></i>
  <h2 data-animation-duration="2000" data-value="24" class="animate-number text-theme-colored font-42 font-weight-500 mt-0 mb-0">0</h2>
  <h5 class="text-white text-uppercase font-weight-600">Globalization Work</h5>
</div>
</div>
</div>
</div>
</section>

<!-- Section: Gallery -->
<section id="gallery">
<div class="container">
<div class="section-content">
<div class="row">
<div class="col-md-7 wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.3s">
  <h3 class="text-uppercase title line-bottom mt-0 mb-30"><i class="fa fa-calendar text-gray-darkgray mr-10"></i>Photo <span class="text-theme-colored">Gallery</span></h3>
  <!-- Portfolio Gallery Grid -->

  <div class="gallery-isotope grid-4 gutter-small clearfix" data-lightbox="gallery">
	<!-- Portfolio Item Start -->
	<div class="gallery-item">
	  <div class="thumb">
		<img alt="project" src="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-sm1.jpg" class="img-fullwidth">
		<div class="overlay-shade"></div>
		<div class="icons-holder">
		  <div class="icons-holder-inner">
			<div class="styled-icons icon-sm icon-dark icon-circled icon-theme-colored">
			  <a href="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-lg1.jpg"  data-lightbox-gallery="gallery"><i class="fa fa-picture-o"></i></a>
			</div>
		  </div>
		</div>
	  </div>
	</div>
	<!-- Portfolio Item End -->
	
	<!-- Portfolio Item Start -->
	<div class="gallery-item">
	  <div class="thumb">
		<img alt="project" src="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-sm2.jpg" class="img-fullwidth">
		<div class="overlay-shade"></div>
		<div class="icons-holder">
		  <div class="icons-holder-inner">
			<div class="styled-icons icon-sm icon-dark icon-circled icon-theme-colored">
			  <a href="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-lg2.jpg"  data-lightbox-gallery="gallery"><i class="fa fa-picture-o"></i></a>
			</div>
		  </div>
		</div>
	  </div>
	</div>
	<!-- Portfolio Item End -->
	
	<!-- Portfolio Item Start -->
	<div class="gallery-item">
	  <div class="thumb">
		<img alt="project" src="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-sm3.jpg" class="img-fullwidth">
		<div class="overlay-shade"></div>
		<div class="icons-holder">
		  <div class="icons-holder-inner">
			<div class="styled-icons icon-sm icon-dark icon-circled icon-theme-colored">
			  <a href="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-lg3.jpg"  data-lightbox-gallery="gallery"><i class="fa fa-picture-o"></i></a>
			</div>
		  </div>
		</div>
	  </div>
	</div>
	<!-- Portfolio Item End -->
	
	<!-- Portfolio Item Start -->
	<div class="gallery-item">
	  <div class="thumb">
		<img alt="project" src="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-sm4.jpg" class="img-fullwidth">
		<div class="overlay-shade"></div>
		<div class="icons-holder">
		  <div class="icons-holder-inner">
			<div class="styled-icons icon-sm icon-dark icon-circled icon-theme-colored">
			  <a href="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-lg4.jpg"  data-lightbox-gallery="gallery"><i class="fa fa-picture-o"></i></a>
			</div>
		  </div>
		</div>
	  </div>
	</div>
	<!-- Portfolio Item End -->
	
	<!-- Portfolio Item Start -->
	<div class="gallery-item">
	  <div class="thumb">
		<img alt="project" src="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-sm5.jpg" class="img-fullwidth">
		<div class="overlay-shade"></div>
		<div class="icons-holder">
		  <div class="icons-holder-inner">
			<div class="styled-icons icon-sm icon-dark icon-circled icon-theme-colored">
			  <a href="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-lg5.jpg"  data-lightbox-gallery="gallery"><i class="fa fa-picture-o"></i></a>
			</div>
		  </div>
		</div>
	  </div>
	</div>
	<!-- Portfolio Item End -->
	
	<!-- Portfolio Item Start -->
	<div class="gallery-item">
	  <div class="thumb">
		<img alt="project" src="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-sm6.jpg" class="img-fullwidth">
		<div class="overlay-shade"></div>
		<div class="icons-holder">
		  <div class="icons-holder-inner">
			<div class="styled-icons icon-sm icon-dark icon-circled icon-theme-colored">
			  <a href="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-lg6.jpg"  data-lightbox-gallery="gallery"><i class="fa fa-picture-o"></i></a>
			</div>
		  </div>
		</div>
	  </div>
	</div>
	<!-- Portfolio Item End -->
	
	<!-- Portfolio Item Start -->
	<div class="gallery-item">
	  <div class="thumb">
		<img alt="project" src="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-sm7.jpg" class="img-fullwidth">
		<div class="overlay-shade"></div>
		<div class="icons-holder">
		  <div class="icons-holder-inner">
			<div class="styled-icons icon-sm icon-dark icon-circled icon-theme-colored">
			  <a href="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-lg7.jpg"  data-lightbox-gallery="gallery"><i class="fa fa-picture-o"></i></a>
			</div>
		  </div>
		</div>
	  </div>
	</div>
	<!-- Portfolio Item End -->
	
	<!-- Portfolio Item Start -->
	<div class="gallery-item">
	  <div class="thumb">
		<img alt="project" src="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-sm8.jpg" class="img-fullwidth">
		<div class="overlay-shade"></div>
		<div class="icons-holder">
		  <div class="icons-holder-inner">
			<div class="styled-icons icon-sm icon-dark icon-circled icon-theme-colored">
			  <a href="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-lg8.jpg"  data-lightbox-gallery="gallery"><i class="fa fa-picture-o"></i></a>
			</div>
		  </div>
		</div>
	  </div>
	</div>
	<!-- Portfolio Item End -->
	
	<!-- Portfolio Item Start -->
	<div class="gallery-item">
	  <div class="thumb">
		<img alt="project" src="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-sm9.jpg" class="img-fullwidth">
		<div class="overlay-shade"></div>
		<div class="icons-holder">
		  <div class="icons-holder-inner">
			<div class="styled-icons icon-sm icon-dark icon-circled icon-theme-colored">
			  <a href="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-lg9.jpg"  data-lightbox-gallery="gallery"><i class="fa fa-picture-o"></i></a>
			</div>
		  </div>
		</div>
	  </div>
	</div>
	<!-- Portfolio Item End -->
	
	<!-- Portfolio Item Start -->
	<div class="gallery-item">
	  <div class="thumb">
		<img alt="project" src="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-sm10.jpg" class="img-fullwidth">
		<div class="overlay-shade"></div>
		<div class="icons-holder">
		  <div class="icons-holder-inner">
			<div class="styled-icons icon-sm icon-dark icon-circled icon-theme-colored">
			  <a href="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-lg10.jpg"  data-lightbox-gallery="gallery"><i class="fa fa-picture-o"></i></a>
			</div>
		  </div>
		</div>
	  </div>
	</div>
	<!-- Portfolio Item End -->
	
	<!-- Portfolio Item Start -->
	<div class="gallery-item">
	  <div class="thumb">
		<img alt="project" src="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-sm11.jpg" class="img-fullwidth">
		<div class="overlay-shade"></div>
		<div class="icons-holder">
		  <div class="icons-holder-inner">
			<div class="styled-icons icon-sm icon-dark icon-circled icon-theme-colored">
			  <a href="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-lg11.jpg"  data-lightbox-gallery="gallery"><i class="fa fa-picture-o"></i></a>
			</div>
		  </div>
		</div>
	  </div>
	</div>
	<!-- Portfolio Item End -->
	
	<!-- Portfolio Item Start -->
	<div class="gallery-item">
	  <div class="thumb">
		<img alt="project" src="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-sm12.jpg" class="img-fullwidth">
		<div class="overlay-shade"></div>
		<div class="icons-holder">
		  <div class="icons-holder-inner">
			<div class="styled-icons icon-sm icon-dark icon-circled icon-theme-colored">
			  <a href="<?php echo get_template_directory_uri()?>/myassets/images/gallery/gallery-lg12.jpg"  data-lightbox-gallery="gallery"><i class="fa fa-picture-o"></i></a>
			</div>
		  </div>
		</div>
	  </div>
	</div>
	<!-- Portfolio Item End -->
  </div>
  <!-- End Portfolio Gallery Grid -->
</div>
<div class="col-md-5 wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.3s">
  <h3 class="text-uppercase title line-bottom mt-0 mb-30 mt-sm-40"><i class="fa fa-calendar text-gray-darkgray mr-10"></i>Upcoming <span class="text-theme-colored">Events</span></h3>
  <article class="post media-post clearfix pb-0 mb-15">
	<div class="event-date-time pull-left flip bg-theme-colored text-center mt-5 p-15 pt-10">
	  <h4 class="text-white font-weight-600 font-28 mt-0 mb-0">22</h4>
	  <span class="text-white">Sep</span>
	</div>
	<div class="post-right upcoming-event-right">
	  <h4 class="mt-0 mb-5"><a href="#">Upcoming Event Title</a></h4>
	  <ul class="list-inline font-12 mb-5">
		<li class="pr-0"><i class="fa fa-clock-o mr-5"></i> At 6.30 pm |</li>
		<li class="pl-5"><i class="fa fa-map-marker mr-5"></i>New York</li>
	  </ul>
	  <p class="mb-0 font-13">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas eveniet, nemo dicta. Ullam nam <a class="text-theme-colored font-weight-600 font-13 ml-5" href="#">→</a></p>
	</div>
  </article>
  <article class="post media-post clearfix pb-0 mb-15">
	<div class="event-date-time pull-left flip bg-theme-colored text-center mt-5 p-15 pt-10">
	  <h4 class="text-white font-weight-600 font-28 mt-0 mb-0">24</h4>
	  <span class="text-white">Oct</span>
	</div>
	<div class="post-right upcoming-event-right">
	  <h4 class="mt-0 mb-5"><a href="#">Upcoming Event Title</a></h4>
	  <ul class="list-inline font-12 mb-5">
		<li class="pr-0"><i class="fa fa-clock-o mr-5"></i> At 6.30 pm |</li>
		<li class="pl-5"><i class="fa fa-map-marker mr-5"></i>New York</li>
	  </ul>
	  <p class="mb-0 font-13">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas eveniet, nemo dicta. Ullam nam <a class="text-theme-colored font-weight-600 font-13 ml-5" href="#">→</a></p>
	</div>
  </article>
  <article class="post media-post clearfix pb-0 mb-15">
	<div class="event-date-time pull-left flip bg-theme-colored text-center mt-5 p-15 pt-10">
	  <h4 class="text-white font-weight-600 font-28 mt-0 mb-0">26</h4>
	  <span class="text-white">Dec</span>
	</div>
	<div class="post-right upcoming-event-right">
	  <h4 class="mt-0 mb-5"><a href="#">Upcoming Event Title</a></h4>
	  <ul class="list-inline font-12 mb-5">
		<li class="pr-0"><i class="fa fa-clock-o mr-5"></i> At 6.30 pm |</li>
		<li class="pl-5"><i class="fa fa-map-marker mr-5"></i>New York</li>
	  </ul>
	  <p class="mb-0 font-13">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas eveniet, nemo dicta. Ullam nam <a class="text-theme-colored font-weight-600 font-13 ml-5" href="#">→</a></p>
	</div>
  </article>
</div>
</div>
</div>
</div>
</section>

<!-- Diver: Video Background  -->
<section class="divider parallax layer-overlay overlay-dark-6" data-bg-img="<?php echo get_template_directory_uri()?>/myassets/images/bg/bg5.jpg" data-parallax-ratio="0.7">
<div class="container pt-120 pb-120"> 
<!-- Section Content -->
<div class="section-content">
<div class="row">
<div class="col-md-12 text-center">
  <h3 class="text-white text-uppercase font-30 font-weight-600 mt-0 mb-20">Watch Our Latest Campaign video</h3>
  <a href="https://www.youtube.com/watch?v=YzMpNqY9NUg" data-lightbox-gallery="youtube-video"><i class="fa fa-play-circle text-theme-colored font-72"></i>
  </a>
</div>
</div>
</div>
</div>
</section>

<!-- Section: blog -->
<section id="blog">
<div class="container pb-sm-30">
<div class="section-title text-center">
<div class="row">
<div class="col-md-8 col-md-offset-2">
  <h2 class="text-uppercase line-bottom-center mt-0">Latest <span class="text-theme-colored">News</span></h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem autem<br> voluptatem obcaecati!</p>
</div>
</div>
</div>
<div class="section-content">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
  <article class="post clearfix bg-lighter mb-sm-30">
	<div class="entry-header">
	  <div class="post-thumb thumb"> 
		<img src="<?php echo get_template_directory_uri()?>/myassets/images/blog/1.jpg" alt="" class="img-responsive img-fullwidth">
	  </div>
	</div>
	<div class="entry-content p-20">
	  <h4 class="entry-title text-white text-uppercase"><a class="font-weight-600" href="blog-single-left-sidebar.html">Lorem ipsum dolor is emmita</a></h4>
	  <div class="entry-meta">
		<ul class="list-inline font-12 mb-10">
		  <li><i class="fa fa-user text-theme-colored mr-5"></i>By: Author | </li>
		  <li><i class="fa fa-calendar text-theme-colored mr-5"></i> June 26, 2016 | </li>
		  <li><i class="fa fa-comment-o text-theme-colored mr-5"></i>45 </li>
		</ul>
	  </div>
	  <p class="mt-5">Lorem ipsum dolor sit amet, consectetur adipisi cing elit. Molestias eius illum libero dolor nobis</p>
	  <a class="btn btn-theme-colored btn-sm mt-10" href="blog-single-left-sidebar.html"> View Details</a>
	</div>
  </article>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
  <article class="post clearfix bg-lighter mb-sm-30">
	<div class="entry-header">
	  <div class="post-thumb thumb"> 
		<img src="<?php echo get_template_directory_uri()?>/myassets/images/blog/2.jpg" alt="" class="img-responsive img-fullwidth">
	  </div>
	</div>
	<div class="entry-content p-20">
	  <h4 class="entry-title text-white text-uppercase"><a class="font-weight-600" href="blog-single-left-sidebar.html">Lorem ipsum dolor is emmita</a></h4>
	  <div class="entry-meta">
		<ul class="list-inline font-12 mb-10">
		  <li><i class="fa fa-user text-theme-colored mr-5"></i>By: Author | </li>
		  <li><i class="fa fa-calendar text-theme-colored mr-5"></i> June 26, 2016 | </li>
		  <li><i class="fa fa-comment-o text-theme-colored mr-5"></i>45 </li>
		</ul>
	  </div>
	  <p class="mt-5">Lorem ipsum dolor sit amet, consectetur adipisi cing elit. Molestias eius illum libero dolor nobis</p>
	  <a class="btn btn-theme-colored btn-sm mt-10" href="blog-single-left-sidebar.html"> View Details</a>
	</div>
  </article>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
  <article class="post clearfix bg-lighter mb-sm-30">
	<div class="entry-header">
	  <div class="post-thumb thumb"> 
		<img src="<?php echo get_template_directory_uri()?>/myassets/images/blog/3.jpg" alt="" class="img-responsive img-fullwidth">
	  </div>
	</div>
	<div class="entry-content p-20">
	  <h4 class="entry-title text-white text-uppercase"><a class="font-weight-600" href="blog-single-left-sidebar.html">Lorem ipsum dolor is emmita</a></h4>
	  <div class="entry-meta">
		<ul class="list-inline font-12 mb-10">
		  <li><i class="fa fa-user text-theme-colored mr-5"></i>By: Author | </li>
		  <li><i class="fa fa-calendar text-theme-colored mr-5"></i> June 26, 2016 | </li>
		  <li><i class="fa fa-comment-o text-theme-colored mr-5"></i>45 </li>
		</ul>
	  </div>
	  <p class="mt-5">Lorem ipsum dolor sit amet, consectetur adipisi cing elit. Molestias eius illum libero dolor nobis</p>
	  <a class="btn btn-theme-colored btn-sm mt-10" href="blog-single-left-sidebar.html"> View Details</a>
	</div>
  </article>
</div>
</div>
</div>
</div>
</section>

<!-- Divider: Contact -->
<section id="contact" class="divider bg-silver-light">
<div class="container pt-60 pb-60">      
<div class="section-title text-center">
<div class="row">
<div class="col-md-8 col-md-offset-2">
  <h2 class="text-uppercase line-bottom-center mt-0">Contact Us</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem autem<br> voluptatem obcaecati!</p>
</div>
</div>
</div>
<div class="row pt-10">
<div class="col-md-10 col-md-offset-1">
<!-- Contact Form -->
<form id="contact_form" name="contact_form" class="" action="https://kodesolution.com/html/2016/ecocharity-html/demo/includes/sendmail.php" method="post">

  <div class="row">
	<div class="col-sm-6">
	  <div class="form-group mb-30">
		<input name="form_name" class="form-control" type="text" placeholder="Enter Name" required="">
	  </div>
	</div>
	<div class="col-sm-6">
	  <div class="form-group mb-30">
		<input name="form_email" class="form-control required email" type="email" placeholder="Enter Email">
	  </div>
	</div>
  </div>                
  <div class="row">
	<div class="col-sm-6">
	  <div class="form-group mb-30">
		<input name="form_subject" class="form-control required" type="text" placeholder="Enter Subject">
	  </div>
	</div>
	<div class="col-sm-6">
	  <div class="form-group mb-30">
		<input name="form_phone" class="form-control" type="text" placeholder="Enter Phone">
	  </div>
	</div>
  </div>

  <div class="form-group">
	<textarea name="form_message" class="form-control required" rows="5" placeholder="Enter Message"></textarea>
  </div>
  <div class="form-group">
	<input name="form_botcheck" class="form-control" type="hidden" value="" />
	<button type="submit" class="btn btn-flat btn-theme-colored text-uppercase mt-10 mb-sm-30 border-left-theme-color-2-4px" data-loading-text="Please wait...">Send your message</button>
	<button type="reset" class="btn btn-flat btn-theme-colored text-uppercase mt-10 mb-sm-30 border-left-theme-color-2-4px">Reset</button>
  </div>
</form>

<!-- Contact Form Validation-->
<script type="text/javascript">
  $("#contact_form").validate({
	submitHandler: function(form) {
	  var form_btn = $(form).find('button[type="submit"]');
	  var form_result_div = '#form-result';
	  $(form_result_div).remove();
	  form_btn.before('<div id="form-result" class="alert alert-success" role="alert" style="display: none;"></div>');
	  var form_btn_old_msg = form_btn.html();
	  form_btn.html(form_btn.prop('disabled', true).data("loading-text"));
	  $(form).ajaxSubmit({
		dataType:  'json',
		success: function(data) {
		  if( data.status == 'true' ) {
			$(form).find('.form-control').val('');
		  }
		  form_btn.prop('disabled', false).html(form_btn_old_msg);
		  $(form_result_div).html(data.message).fadeIn('slow');
		  setTimeout(function(){ $(form_result_div).fadeOut('slow') }, 6000);
		}
	  });
	}
  });
</script>
</div>
</div>
</div>
</section>

<!-- Divider: Clients -->
<section class="clients bg-theme-colored">
<div class="container pt-0 pb-0">
<div class="row">
<div class="col-md-12">
<!-- Section: Clients -->
<div class="owl-carousel-6col clients-logo transparent text-center">
  <div class="item"> <a href="#"><img src="<?php echo get_template_directory_uri()?>/myassets/images/clients/w1.png" alt=""></a></div>
  <div class="item"> <a href="#"><img src="<?php echo get_template_directory_uri()?>/myassets/images/clients/w2.png" alt=""></a></div>
  <div class="item"> <a href="#"><img src="<?php echo get_template_directory_uri()?>/myassets/images/clients/w3.png" alt=""></a></div>
  <div class="item"> <a href="#"><img src="<?php echo get_template_directory_uri()?>/myassets/images/clients/w4.png" alt=""></a></div>
  <div class="item"> <a href="#"><img src="<?php echo get_template_directory_uri()?>/myassets/images/clients/w5.png" alt=""></a></div>
  <div class="item"> <a href="#"><img src="<?php echo get_template_directory_uri()?>/myassets/images/clients/w6.png" alt=""></a></div>
  <div class="item"> <a href="#"><img src="<?php echo get_template_directory_uri()?>/myassets/images/clients/w3.png" alt=""></a></div>
  <div class="item"> <a href="#"><img src="<?php echo get_template_directory_uri()?>/myassets/images/clients/w4.png" alt=""></a></div>
  <div class="item"> <a href="#"><img src="<?php echo get_template_directory_uri()?>/myassets/images/clients/w5.png" alt=""></a></div>
  <div class="item"> <a href="#"><img src="<?php echo get_template_directory_uri()?>/myassets/images/clients/w6.png" alt=""></a></div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- end main-content -->


<?php get_footer();?>