<?php
require_once("../scripts/functions.php");
 ?>
 <!doctype html>
<html lang="en">


<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<head>
    <title><?php echo $sitename ?></title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">       <title></title>
    <meta name="keywords" content="">
    <meta name="description" content="">

	<!-- Favicon icon -->    
	<link rel="stylesheet" href="..\etc\clientlib-default.min.001bf72e86ac4a5150822ce748c8d0ae.css" type="text/css">
	<link rel="stylesheet" href="..\site.min.css" type="text/css">
	<link rel="shortcut icon" type="image/png" href="..\images\<?php echo $favicon ?>">    
	<!-- Google fonts -->	
	<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,400,400i,500,500i,700" rel="stylesheet">			
	<!-- Bootstrap -->    
	<link href="..\css\bootstrap.min.css" rel="stylesheet">	
	<!-- Fontawsome -->    
	<link href="..\css\font-awesome.min.css" rel="stylesheet">    
	<!-- Animate CSS-->    
	<link href="..\css\animate.css" rel="stylesheet">    
	<!-- menu CSS-->    
	<link href="..\css\bootstrap-4-navbar.css" rel="stylesheet">		
	<!-- Portfolio Gallery -->    
	<link href="..\css\filterizer.css" rel="stylesheet">	
	<!-- Lightbox Gallery -->    
	<link href="..\inc\lightbox\css\jquery.fancybox.css" rel="stylesheet">	
	<!-- OWL Carousel -->	
	<link rel="stylesheet" href="..\css\owl.carousel.min.css">	
	<link rel="stylesheet" href="..\css\owl.theme.default.min.css">    
	<!-- Preloader CSS-->    
	<link href="..\css\fakeLoader.css" rel="stylesheet">	
	<!-- Main CSS -->    
	<link href="..\style.css" rel="stylesheet">    
	<!-- Default CSS Color -->     
	<link href="..\color\default.css" rel="stylesheet">     
	<!-- Color CSS -->     
	<link rel="../stylesheet" href="color/color-switcher.css">    
	<!-- Default CSS Color -->     
	<link href="..\color\default.css" rel="stylesheet">     
	<!-- Color CSS -->     
	<link rel="stylesheet" href="..\color\color-switcher.css">	
	<!-- Responsive CSS -->    
	<link href="..\css\responsive.css" rel="stylesheet">    
	<link href="..\css\customcss.css" rel="stylesheet">    
	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
	
<link href="library\spry\textfieldvalidation\SpryValidationTextField.css" rel="stylesheet" type="text/css">
<script src="library\spry\textfieldvalidation\SpryValidationTextField.js" type="text/javascript"></script>

<link href="library\spry\passwordvalidation\SpryValidationPassword.css" rel="stylesheet" type="text/css">
<script src="library\spry\passwordvalidation\SpryValidationPassword.js" type="text/javascript"></script>

	</head>
<!--header open in header-->


<script type="text/javascript" src="..\cdn.weglot.com\weglot.min.js"></script>

  <body>
  <style>
      .navbar-brand h2{
          font-size:35px;
          margin-top:2px;
      }
  </style>
	


	<!--NAVIGATION END-->	<!-- content start-->
<style type="text/css">
	.item.creditbanner{
		position: relative;
	}
	.banner-content{
		position: absolute;
	    top: 45%;
	    left: 9%;
	    background-color: #fff;
	    padding: 30px 50px 30px 10px;
	    box-shadow: 0 0 23px -5px #000;
	}
	.banner-content h3{
		color: #033d75;
	    font-size: 30px;
	    text-transform: uppercase;
	    margin-bottom: 15px;
	    font-weight: bold;
	}
	.banner-content p{
		color: #333;
    	font-size: 20px;
    	margin-bottom: 0;
	}
	.cardWr.row{
		box-shadow: 0 0 15px -3px #000;
	    margin: 60px 0;
	    border-radius: 0;
	}
	.single-bolg.hover01 a:hover .blog-content{
		color: #EF454D;
		transition: all .5s ease 0s;
	}
	.cardWr .col-sm-8{
		padding: 30px;
	}
	.cardWr .col-sm-4{
		padding: 40px 30px 30px;
	}
	.cardWr .col-sm-4{
		background-color: #033d75;
		color: #fff;
	}
	.cardWr .col-sm-4 .col-sm-12{
		padding:0;
	}
	.cardWr .col-sm-12 p{
		margin: 8px 0 15px;
    	font-size: 18px;
	}
	.cardWr .col-sm-12 h2{
		font-size: 22px;
	    font-weight: bold;
	    color: #033d75;
	    margin-bottom: 17px;
	    margin-top: 15px;
	    text-transform: uppercase;
	}
	.inner-card-wr .fa.fa-check{
		margin-right: 10px;
	}
	.cardWr .col-sm-12 ul, .inner-card-wr ul{
		padding-left: 0;
	}
	.inner-card-wr li {
	    font-weight: bold;
	}
	.inner-card-wr ul p {
	    margin-left: 29px;
	    margin-bottom: 18px;
	}
	.card-single-wr h2{
		font-size: 30px;
	    position: relative;
	    margin-left: 20px;
	    margin-bottom: 30px;
	    color: #033d75;
	}
	.card-single-wr h2::before {
	    position: absolute;
	    left: -25px;
	    top: 0;
	    width:5px;
	    height: 32px;
	    background-color: #EF454D;
	    content: '';
	}
	.inner-card-wr h3{
		margin-bottom: 23px;
	    font-size: 24px;
	    margin-top: 40px;
	    font-weight: bold;
	    color: #EF454D;
	}
	.cardWr .col-sm-12 li, .inner-card-wr li{
		display: block;
		margin-bottom: 14px;
	}
	.card-single-wr {
	    border-top: 1px solid #033d75;
	    padding: 45px 0 22px;
	}
	.inner-card-wr p a{
		color: #033d75;
		text-decoration: underline;
	}
	.firstspan{
		width:4%;
		display: inline-block;
		vertical-align: top;
	}
	.secondspan{
		display: inline-block;
		width:90%;
		vertical-align: top;
	}
	.rightwr .col-sm-12 p{
		font-size: 20px;
	    line-height: 30px;
	    margin-bottom: 20px;
	}
	.col-sm-12.variableper{
		margin-top: 40px;
	}
	p span{
		display: block;
    	font-size: 16px;
	}
	.readmoreWr {
		text-align: left;
	    margin: 20px 0 20px;
	    padding-left: 15px;
	}
	.fa.fa-info-circle{
		margin-right: 10px; 
	}
	i.fa.fa-check {
	    color: #033d75;
	    font-size: 19px;
	}
	.inner-card-wr.lowerwr ul {
	    margin: 5px 0;
	}
	i.fa.fa-download {
	    margin-right: 10px;
	    color: #033d75;
	}
	.inner-card-wr.lowerwr li {
	    font-weight: normal;
	}
	.inner-card-wr.lowerwr li a{
		color: #033d75;
	}
	.inner-card-wr.lowerwr li a:hover{
		color: #EF454D;
	}
	.toggleclass{
		color: #333;
	    font-size: 18px;
	    font-weight: bold;
	    text-decoration: underline;
	    margin-bottom: 25px;
	    display: inline-block;
	}
	.toggleclass:hover{
		text-decoration: underline;
	}
	.logonwr{
		margin-bottom: 35px;
	}
	.collapse h3 a{
		color: #033d75;
	}
	.business-wr{
		padding:0;
		margin-top: 40px;
	}
	.blog-content {
	    font-size: 22px;
	    margin-top: 15px;
	    text-align: center;
	}
	.single-bolg.hover01{
		margin-top: 0;
	}
	#demo1 .col-sm-6 h3{
		margin-top: 0;
	}
</style>

<div class="card-detail-wr">
	<div class="container">
	

		<div class="card-single-wr">
			
			<div class="tkl">
				<style>
					.tab {
					    overflow: hidden;
					    border: 1px solid #ccc;
					    background-color: #033d75;
					}

					/* Style the buttons inside the tab */
					.tab button {
					    background-color: inherit;
					    float: left;
					    border: none;
					    outline: none;
					    cursor: pointer;
					    padding: 14px 16px;
					    transition: 0.3s;
					    font-size: 20px;
					    color: #fff;
					    border-radius: 0;
					}
					.tabcontent li{
						display: block;
					    margin-bottom: 15px;
					    line-height: 25px;
					    margin-top: 15px;
					}
					.tabcontent li i{
						margin-right: 7px;
					}
					.tabcontent h3 {
					    margin: 45px 0 25px;
					}
					/* Change background color of buttons on hover */
					.tab button:hover {
					    background-color: #EF454D;
					}
					.tabcontent h3{
						margin: 32px 0 15px;
	    				font-size: 23px;
					}

					/* Create an active/current tablink class */
					.tab button.active {
					    background-color: #EF454D;
					}

					/* Style the tab content */
					.tabcontent {
					    display: none;
					    padding: 30px 15px;
					    border: 1px solid #ccc;
					    border-top: none;
					}
					.tabcontent a{
						color: #033d75;
					}
				</style>
			
				<div id="London" class="tabcontent">
					<div class="container">
					<div class="row">	
						
						
					 <div class="banner-text">
              <h1 id="intro" class="h2 text-black">Less Hassle, More Hustle</h1>
              <p>Get more with <?php echo $sitename ?> Sign up for now.</p>
             
		
		
			<button id="btn1" class="btn btn-secondary btn-round"><a href="enroll-now-step2" style="color:white;">Get Started Now</a></button>
			
			
			
		  </div>	
						
						
						
						
						
						
						
						
						</div>	
						</div>
					</div>
				</div>

		

				
				<script>
					function openCity(evt, cityName) {
					    var i, tabcontent, tablinks;
					    tabcontent = document.getElementsByClassName("tabcontent");
					    for (i = 0; i < tabcontent.length; i++) {
					        tabcontent[i].style.display = "none";
					    }
					    tablinks = document.getElementsByClassName("tablinks");
					    for (i = 0; i < tablinks.length; i++) {
					        tablinks[i].className = tablinks[i].className.replace(" active", "");
					    }
					    document.getElementById(cityName).style.display = "block";
					    evt.currentTarget.className += " active";
					}

					// Get the element with id="defaultOpen" and click on it
					document.getElementById("defaultOpen").click();
				</script>

			</div>
		</div>














	
	</div>


<!--content end-->
	
	<!-- Start Footer -->
	<!-- End Footer -->	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="..\1.12.4\jquery.min.js"></script>
	<script src="..\cdnjs.cloudflare.com\ajax\libs\popper.js\1.14.0\umd\popper.min" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="..\js\bootstrap.min.js"></script>

	<!-- Wow Script -->
	<script src="..\js\wow.min.js"></script>
	<!-- Counter Script -->
	<script src="..\js\waypoints.min.js"></script>
	<script src="..\js\jquery.counterup.min.js"></script>
	<!-- Masonry Portfolio Script -->
    <script src="..\js\jquery.filterizr.min.js"></script>
    <script src="..\js\filterizer-controls.js"></script>
    <!-- OWL Carousel js-->
	<script src="..\js\owl.carousel.min.js"></script>  
	<!-- Lightbox js -->
	<script src="..\inc\lightbox\js\jquery.fancybox.pack.js"></script>
	<script src="..\inc\lightbox\js\lightbox.js"></script>
	<!-- Google map js -->
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCa6w23do1qZsmF1Xo3atuFzzMYadTuTu0"></script>	
	<script src="..\js\map.js"></script>
	<!-- loader js-->
    <script src="..\js\fakeLoader.min.js"></script>
	<!-- Scroll bottom to top -->
	<script src="..\js\scrolltopcontrol.js"></script>
	<!-- menu -->
	<script src="..\js\bootstrap-4-navbar.js"></script>    
    <!-- Stiky menu -->
	<script src="..\js\jquery.sticky.js"></script>  
    <!-- youtube popup video -->
	<script src="..\js\jquery.magnific-popup.min.js"></script>  
    <!-- Color switcher js -->
	<script src="..\js\color-switcher.js"></script> 
    <!-- Color-switcher-active -->  
    <script src="..\js\color-switcher-active.js"></script>      
	<!-- Custom script -->
    <script src="..\js\custom.js"></script>
    <script src="..\js\jquery.bxslider.min.js"></script>
    
    <!-- for calucator---->
    	<script type="text/javascript" src="..\etc\clientlib-all.min.2f2dbb3959c1dcdb1f3b1f52f1375b62.js"></script>
		
		<script type="text/javascript" src="..\etc\clientlib.min.b3ec3a2325eaa4cbc74a2e2f0b755b0f.js"></script>
		


      

<script src="..\ajax.googleapis.com\ajax\libs\jquery\3.3.1\jquery.min.js"></script>
<script src="..\js\jquery.bxslider.min.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		if( ($(window).width() > 769) ) {
			$('.bxsliderwr').bxSlider({
				minSlides: 5,
	  			maxSlides: 5,
	  			slidewidth:230,
	  			pager:true,
	  			slideMargin: 50,
	  			moveSlides:1,
	  			auto: true,
	  			infiniteLoop: true,
	  			mode: 'horizontal',
			});
		}
		else if( ($(window).width() < 769) && ($(window).width() > 481) ) {
			$('.bxsliderwr').bxSlider({
				minSlides: 3,
	  			maxSlides: 3,
	  			slidewidth:230,
	  			pager:true,
	  			slideMargin: 50,
	  			moveSlides:1,
	  			auto: true,
	  			infiniteLoop: true,
	  			mode: 'horizontal',
			});
		}
		else{
			$('.bxsliderwr').bxSlider({
				minSlides: 3,
	  			maxSlides: 3,
	  			slidewidth:230,
	  			pager:false,
	  			slideMargin: 50,
	  			moveSlides:1,
	  			auto: true,
	  			infiniteLoop: true,
	  			mode: 'horizontal',
			});
		}
	}); 
</script>
	<script type="text/javascript">
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>	
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/<?php echo $tawk ?>';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->  
   

</body>
<script type="text/javascript">
<!--
//Firstname
var sprytf_firstname = new Spry.Widget.ValidationTextField("sprytf_firstname", 'none', {validateOn:["blur", "change"]});
//Lastname
var sprytf_lastname = new Spry.Widget.ValidationTextField("sprytf_lastname", 'none', {validateOn:["blur", "change"]});
//Password
var sprypass1 = new Spry.Widget.ValidationPassword("sprypwd", {minChars:6, maxChars: 12, validateOn:["blur", "change"]});
//Confirm Password
var spryconf1 = new Spry.Widget.ValidationConfirm("sprycpwd", "sprypwd", {minChars:6, maxChars: 12, validateOn:["blur", "change"]});
//Email ID
var spryemail = new Spry.Widget.ValidationTextField("sprytf_email", 'email', {validateOn:["blur", "change"]});
//Phone Number
var spryphone = new Spry.Widget.ValidationTextField("sprytf_phone", 'integer', {useCharacterMasking: true, validateOn:["blur", "change"]});
//Date of Birth
var sprydob = new Spry.Widget.ValidationTextField("sprytf_dob", 'date', {format:"none", useCharacterMasking: true, validateOn:["blur", "change"]});
//Gender
var sprygender = new Spry.Widget.ValidationSelect("spryselect_gender");


//address
var spry_ad = new Spry.Widget.ValidationTextarea("spryta_address", {isRequired:true});
//city
var sprytf_city = new Spry.Widget.ValidationTextField("sprytf_city", 'none', {validateOn:["blur", "change"]});
//State
var sprytf_state = new Spry.Widget.ValidationTextField("sprytf_state", 'none', {validateOn:["blur", "change"]});
//ZipCode
var sprytf_zip = new Spry.Widget.ValidationTextField("sprytf_zip", 'integer', {validateOn:["blur", "change"]});

//Account Type
var spryselect1 = new Spry.Widget.ValidationSelect("spryselect_acctype");
//Account Number
var spry_accno = new Spry.Widget.ValidationTextField("sprytf_accno", 'integer', {minChars:8, maxChars: 12, validateOn:["blur", "change"]});

var spry_pin = new Spry.Widget.ValidationTextField("sprytf_pin", 'integer', {minChars:4, maxChars: 6, validateOn:["blur", "change"]});
//Confirm Password
var spry_cpin = new Spry.Widget.ValidationConfirm("sprytf_cpin", "sprytf_pin", {minChars:4, maxChars: 6, validateOn:["blur", "change"]});

//-->
</script>
</html>     