{% extends "index_v1.html" %}
{%block head%}
{{super()}}

<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--background: linear-gradient(rgba(62, 63, 64, 0.6), rgba(62, 63, 64, 0.6)), url("https://i.imgur.com/FVieG2F.png"); -->
<style>

body {
  background-image: url('static/images/pcu_icon.png');
  background-repeat: no-repeat;
  background-position: auto;
  display: block;
  margin:auto;
  margin-left: auto;
  margin-right: auto;
  	width:100%;
	max-width:100%;
	height:100%;
	padding-top: 400px;
	padding-bottom: 100px;
	background-size: 100% 100%;
}


@media only screen and (max-width: 600px) {
   .body {
	background-size: cover;
	background-image: url('static/images/pcu_icon.png');
	  background-repeat: no-repeat;
	background-position: center bottom;
	color: #fff;
	font-family: 'Nunito', sans-serif;
	padding-top: 150px;
	padding-bottom: 100px;
	width:100%;
	max-width:100%;
	height:100%;
}
}

</style>
{%endblock%}

<!-- Page Title -->
{% block title %} Home | PCU {% endblock %}


{%block content%}
<section class="logo-header" >
   <div class="container h-100">
      <div class="row h-100 align-items-center">
         <div class="col-12 col-md-12 text-center header-content">
            <h1 style="color:black">Welcome to Phako Credit Utility</h1>
              <h4 style="color:black">Your bridge to financial empowerment starts here.</h4>
<br>
         </div>
      </div>
   </div>
    <div class="text-center">
  <a href="/contact"><button style="color:black" class="btn btn-primary rounded" type="submit">Contact Us!</button></a>
</div>

    <br>
</section>
{% endblock %}


<!-- CONTAINER (FOOTER SECTION) NOTE: THIS IS USED ACROSS ALL PAGES -->
  {% block footer4 %}{% endblock %}