@import url('https://fonts.googleapis.com/css?family=Muli:300,400,600,700|Raleway:300,400,500,600,700&display=swap');

/* ---------------------------------
1. PRIMARY STYLES
--------------------------------- */

html { width: 100%; height: 100%; font-size: 100%; overflow-x: hidden; -ms-touch-action: manipulation; touch-action: manipulation; }
	
body { font-size: 16px; font-family: 'Poppins', sans-serif; font-weight: 400; margin: 0; word-wrap: break-word;
	line-height: 1.3; width: 100%; overflow-x: hidden; word-break: break-word; 
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #444; }

h1, h2, h3, h4, h5, h6, p, ul, li, a { margin: 0; padding: 0; line-height: inherit; font-weight: inherit; }

h1, h2, h3, h4, h5, h6{ font-family: 'Muli', sans-serif; line-height: 1.2; font-weight: 400; }

h3, h4, h5, h6{ line-height: 1.5; }

h1 { font-size: 4.5em; }
h2 {font-size: 2.8em; }
h3 {font-size: 1.8em; }
h4 {font-size: 1.3em; }
h5 { font-size: 1.15em; }
h6 { font-size: .95em; letter-spacing: 1px; font-family: 'Roboto', sans-serif; }

li,
p{ font-family: 'Lato', sans-serif; font-size: 1.1em; line-height: 1.6; color: #555; font-weight: 400; }

a{ display: inline-block; cursor: pointer; color: inherit; outline: 0; -webkit-transition: all .25s ease; transition: all .25s ease; }

button{ cursor: pointer; color: inherit; outline: 0; border: 0; box-shadow: none; background: none; 
	-webkit-transition: all .25s ease; transition: all .25s ease; }

input, textarea{ display: inline-block; color: inherit; max-width: 100%; -webkit-transition: all .2s; transition: all .2s; }

a:hover, a:focus, a:active,
button:hover, button:focus, button:active{ outline: 0!important; text-decoration: none; color: inherit; }

input:focus,
textarea:focus{ box-shadow: 0; outline: 0; border: 1px solid #FEB208; }

ul { margin: 0; }

li { display: inline-block; list-style: none; }



img { height: auto; width: 100%; }

b { font-weight: 600; }

i { display: inline-block; }

b.max-bold{ font-weight: 700; }

i{ line-height: 1; }

input{ border: 0; outline: 0; height: 40px; width: 100%; }

textarea{ border: 0; outline: 0; max-width: 100%; width: 100%; }


/* RESPONSIVE */

@media only screen and (max-width: 992px) {

	h1 { font-size: 4.5em; }
	h2 {font-size: 2.8em; }
	
}

@media only screen and (max-width: 767px) {

    body { font-size: 14px; }
	
	h1 { font-size: 4em; }
	h2 {font-size: 2.5em; }

}

@media only screen and (max-width: 576px) {

	h1 { font-size: 3.2em; }
	h2 {font-size: 2.2em; }
	
}


::placeholder{ font-size: .9em; color: #888; font-weight: 300;  }

:-ms-input-placeholder { font-size: .9em; color: #888; font-weight: 300;  }

::-ms-input-placeholder{ font-size: .9em; color: #888; font-weight: 300;  }


/* COMMON */

section{ padding: 100px 0 70px; }

section .heading{ margin-bottom: 60px; }

section .heading .sub-heading{ color: #515BE7; letter-spacing: 2px; font-weight: 700; }

.mtb-15{ margin-top: 15px; margin-bottom: 15px; }

.mt-15{ margin-top: 15px; }
.mt-30{ margin-top: 30px; }

.mb-10{ margin-bottom: 10px; }
.mb-15{ margin-bottom: 15px; }
.mb-20{ margin-bottom: 20px; }
.mb-30{ margin-bottom: 30px; }



.dplay-tbl{ display: table; height: 100%; width: 100%; }

.dplay-tbl-cell{ display: table-cell; vertical-align: middle; }

.full-height{ height: 100%; }


.mx-w-600x{ max-width: 600px; }

.h-400x{ height: 400px!important; }

.center-text{ text-align: center; }


body{ position: relative; z-index: 1; }

body:after{ content:''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1;
	background-image: url("../images/bg.png"); background-repeat: repeat-y; opacity: .5; }



/* RESPONSIVE */

@media only screen and (max-width: 1200px) {
    

    
}


@media only screen and (max-width: 992px) {

    h1 { font-size: 4.5em; }
	
    h2 { font-size: 2.8em; }
 
    
}

@media only screen and (max-width: 767px) {
    
    body { font-size: 14px; }
	
    h1 { font-size: 4em; }
	
    h2 {font-size: 2.5em;}
    
	
	
}

@media only screen and (max-width: 576px) {
	
    h1 { font-size: 2.8em; }
	
    h2 {font-size: 2em; }
	
    h3 {font-size: 1.5em; }
	
    h4 {font-size: 1.2em; }
	
    h5 { font-size: 1.1em; }
	
	
	section{ padding: 70px 0 40px; }

	section .heading{ margin-bottom: 50px; }

}


/* COOKIE POLICY */

.cookie-policy{ text-align: center; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; z-index: 100000;
	box-shadow: 3px -5px 40px rgba(0,0,0,.1); padding: 20px; font-size: .9em; display: none; }

.cookie-policy .link-wrapper{ margin-top: 10px; }

.cookie-policy .link-wrapper a{ font-size: .9em; border-radius: 3px; 
	padding: 3px 7px; background: #5F68E9; border: 1px solid #5F68E9; color: #fff; }

.cookie-policy .link-wrapper a:hover{ background: none; color: #5F68E9; }

.cookie-policy.active{ display: block; }

.cookie-animation{ animation: cookie-anim .5s forwards ease-in-out; }

@keyframes cookie-anim{
	
	100% { opacity: 0; }
	
}

/* ABOUT */

.first-letter:first-letter{ font-size: 60px; line-height: 60px; height: 60px; padding-right: 15px; float: left; font-weight: 700; }



/* QUICK FACTS */

.quick-facts ul{ margin-top: 30px; }

.quick-facts ul > li{ display: block; margin: 15px 0; }

.quick-facts ul > li i{ margin-right: 15px; color: #4550E5; }



/*Slider Section -------------------------------------- */

/*Menu section*/

#side-menu{ display: block; position: fixed; top: 0px; right: 0; bottom: 0; z-index: 100; background: #343434; text-align: right;
	transform: translateX(100%); transition: all .3s ease-in-out; }

#side-menu.active{ transform: translateX(0); }

#side-menu .menu-wrapper{ width: 300px; overflow: hidden; }

.menu-wrapper ul { margin: 0; padding: 0; list-style: none; padding-top: 100px; }

.menu-wrapper ul li{ display: block; }

.menu-wrapper ul li a { display: block; padding: 20px 50px; letter-spacing: 2px; color: #fff; }

.menu-wrapper ul li a:hover { background: rgba(0,0,0,0.2); }

.header-navbar{ position: absolute; top: 0; left: 0; right: 0; height: 100px; z-index: 1000;  }

.logo{ height: 100px; padding: 25px 0; position: absolute; left: 50px; }

.logo img{ height: 100%; width: auto;}

.menu-icon { position: absolute; right: 50px; line-height: 100px; height: 100px; padding-right: 50px; z-index: 10000; }

.menu-icon.open{ position: fixed; }

.menu-text { line-height: inherit; height: inherit; }

#nav-icon { position: absolute; top: 50%; margin-top: -12.5px;right: 0; width: 30px; height: 25px;-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; }

#nav-icon span{ display: block; position: absolute; height: 3px; width: 100%; background: #FFFFFF; border-radius: 9px;opacity: 1;left: 0;
	-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; }
	
#nav-icon span:nth-child(1) { transform-origin: top left;top: 0px; }

#nav-icon span:nth-child(2) { top: 50%; margin-top: -1.5px; }

#nav-icon span:nth-child(3) { transform-origin: bottom left;top: auto; bottom: 0; }

#menu-icon.open #nav-icon span:nth-child(1) { top: 1px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);transform: rotate(45deg); }

#menu-icon.open #nav-icon span:nth-child(2) { opacity: 0; left: -60px; }

#menu-icon.open #nav-icon span:nth-child(3) { bottom: 1px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg); transform: rotate(-45deg); }




/* RESPONSIVE */

@media only screen and (max-width: 1200px) {
    
	
    
    
}


@media only screen and (max-width: 992px) {

   
    
}

@media only screen and (max-width: 767px) {
    
   
	
}

@media only screen and (max-width: 576px) {
	
	#side-menu .menu-wrapper{ width: 250px; }
    
	.logo{ left: 15px; height: 70px; padding: 15px 0; }
	
	.menu-icon { line-height: 70px; height: 70px; right: 15px; }
	
	.menu-wrapper ul li a { padding: 15px 20px; }
	
}


@media only screen and (max-width: 400px) {
	
	#side-menu .menu-wrapper{ width: 200px; }
    
	.logo{ height: 60px; padding: 15px 0; }
	
	.menu-icon { line-height: 60px; height: 60px; }
	
}



/*================== Slider =============================*/

#slider{ position: relative; text-align: center;  height: 100vh;  color: #fff; z-index: 1; 
	background-repeat: no-repeat; background-size: cover; background-position: center; }

#slider:after{ content:''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000; opacity: .6; z-index: -1; }




#slider .slider-content{ width: 100%; text-align: left; }

#slider .slider-content h1{ text-shadow: rgba(0, 0, 0, 0.31); }

#slider .slider-desc{ margin-top: 30px; position: relative; padding-left: 115px; }

#slider .slider-desc:after{ content:''; position: absolute; top: 50%; left: 0; width: 100px; height: 1px; margin-top: -1px; background: #fff; }



/*scroll Down Icon*/

#scroll-down { width: 100%;position: absolute;text-align: center;bottom: 10vh;}

#scroll-down img{ width: 30px;height: auto;padding-bottom: 10px;}

.scroll-downs { position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;width :34px;height: 55px;}

.mousey { width: 3px; padding: 10px 15px; height: 35px; border: 2px solid #fff; border-radius: 25px; opacity: 0.75;box-sizing: content-box; display: none; }

.scroller { width: 3px;height: 10px;border-radius: 25%;background-color: #fff;animation-name: scroll;
	animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite;}

@keyframes scroll {
	0% { opacity: 0; } 
	10% { transform: translateY(0); opacity: 1; } 
	100% { transform: translateY(15px); opacity: 0; }
}




/* RESPONSIVE */

@media only screen and (max-width: 1200px) {

		
		
}


@media only screen and (max-width: 992px) {
	
}

@media only screen and (max-width: 767px) {
    
	/*Slider Section*/

    #slider{ height: 600px; }

	
}

@media only screen and (max-width: 576px) {
	
    /*Slider Section*/

	#slider .slider-desc{ margin-top: 15px; padding-left: 75px; }

	#slider .slider-desc:after{ width: 60px; }



    #scroll-down { bottom: 60px; }
	
    #scroll-down img {width: 20px;padding-bottom: 5px; }
    
    
}


/*Slider Section -------------------------------------- */

/* What We Do */

.terms p{ line-height: 2; }

.terms a{ text-decoration: underline; }

.terms a:hover{ text-decoration: none; }

.terms ul li{ margin: 10px 0; }

.terms ul li:before{ content: '\f21b'; font-family: "Ionicons"; margin-right: 10px; color: #bbb; font-size: .7em; }



.featured-section{ background: rgba(191, 191, 191, 0.1) 0% 0% no-repeat padding-box; }

.feature{ position: relative; margin-bottom: 30px; }

.feature .featured-icon{ position: absolute; top: 15px; left: 0; height: 80px; width: 80px; }
 
.feature .featured-content{ padding-left: 110px; }

.feature .featured-content .title{ margin-bottom: 15px; }


/* RESPONSIVE */

@media only screen and (max-width: 1200px) {
    
	.feature .featured-icon{ height: 80px; width: 80px;}
	 
	.feature .featured-content{ padding-left: 100px; }
    
}


@media only screen and (max-width: 992px) {
	
	.feature .featured-icon{ position: static; margin-bottom: 15px; }

	.feature .featured-content{ padding-left: 0px; }
    
}

@media only screen and (max-width: 767px) {

	.feature .featured-icon{ position: absolute; }
	
	.feature .featured-content{ padding-left: 100px; }

}

@media only screen and (max-width: 576px) {
	
	.feature .featured-icon{ position: static; }

	.feature .featured-content{ padding-left: 0px; }
	
}




/* CONTACT */

.contact-info{ margin-bottom: 30px; }

.contact-info li{ margin: 10px 0; position: relative; line-height: 1.6; display: block; }

.contact-info li b{ width: 100px; position: absolute; }

.contact-info li span{ padding-left: 100px; display: inline-block; max-width: 400px; }



/*Contact Us*/

.contact-form{ margin-bottom: 30px; }

.contact-form input,
.contact-form textarea{ border: 1px solid #ddd; border-radius: 3px; padding: 0 15px; margin-bottom: 20px; }

.contact-form input:focus,
.contact-form textarea:focus{ border-color: #4550E5; }

.contact-form input{ height: 45px; line-height: 45px; }

.contact-form textarea{ padding: 15px; height: 150px; }

.contact-form button{ width: 100%; height: 45px; line-height: 43px; border-radius: 3px; background: #4550E5; color: #fff; border: 1px solid #4550E5;
	font-weight: 700; letter-spacing: 2px; }

.contact-form button:active,
.contact-form button:focus,
.contact-form button:hover{ background: #0413d6; }

.contact-form .input-wrapper{ overflow: hidden; }

.contact-form .input-wrapper .input-6{ width: 50%; float: left;  }

.contact-form .input-wrapper .input-6:first-child{ padding-right: 10px; }

.contact-form .input-wrapper .input-6:last-child{ padding-left: 10px; }

button:disabled,
button[disabled]{ cursor: not-allowed;  background: #0413d6; }


/*FORM VALIDATION*/

.field-wrapper{ position: relative; }

.field-wrapper.has-error textarea,
.field-wrapper.has-error input{ border-bottom: 1px solid red; border-radius: 0px; }

.field-wrapper.has-error:after{ content: '* Required'; position: absolute; bottom: 5px; left: 0px; line-height: 1;
	font-size: .7em; color: red; }

.field-wrapper.has-error.email-invalid:after{ content: '* Invalid Email'; }

.field-wrapper.has-error.input:first-child:after{  right: 10px; }

.field-wrapper.has-error .g-recaptcha > div{ border: 1px solid red; }



/* AJAX LODER */




.btn-loader{ position: relative; }

.btn-loader .ajax-loader{ position: absolute; width: 100%; height: 100%; display: none; width: 24px; height: 24px;
	top: 50%;left: 50%; transform: translate(-50%, -50%) }

.btn-loader .ajax-loader.active{ display: inline-block; }


.btn-loader .btn-text{ display: none; position: absolute; top: 0; left: 0; right: 0; bottom :0; }

.btn-loader .btn-text.active{ display: block; }


.btn-loader .ajax-loader > span{ display: block; }

.btn-loader .ajax-loader:after,
.btn-loader .ajax-loader:before,
.btn-loader .ajax-loader > span:after,
.btn-loader .ajax-loader > span:before{ content:''; box-sizing: border-box; display: block; position: absolute;
	top: 0; left: 0; right: 0; bottom: 0; border: 3px solid #fff; border-radius: 50%;
	animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	border-color: #fff transparent transparent transparent; transform: translateY(-50%); }

.btn-loader .ajax-loader:after { animation-delay: -0.45s; }

.btn-loader .ajax-loader:before{ animation-delay: -0.3s;  }

.btn-loader .ajax-loader span:after{  animation-delay: -0.15s;  }

@keyframes lds-ring {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg);  }
}





/*FOOTER*/

footer{ text-align: center; background: #f3f4f5; }

footer .footer-top{ padding: 50px 0 10px;  }

footer .logo{ position: static; height: 35px; padding: 0; float: left; }

footer .footer-link{ float: right; }

footer .footer-link a{ text-decoration: underline; padding: 10px; }

footer .footer-link a:hover{ text-decoration: none; }

footer .logo,
footer .footer-link,
footer .icons { margin-bottom: 30px; }

footer .icons{ text-align: right; }

footer .icons li > a{ height: 35px; width: 35px; line-height: 35px; text-align: center; border-radius: 100%; border: 1px solid transparent; font-size: 1.3em; }

footer .icons li > a:hover{ border-color: #4550E5; color: #4550E5; }




footer .copyright{ padding: 20px 0; border-top: 1px solid #ddd; }


/* RESPONSIVE */

@media only screen and (max-width: 1200px) {
    
	
    
}


@media only screen and (max-width: 992px) {
    
	
  
    
}

@media only screen and (max-width: 767px) {

	
   
	
}

@media only screen and (max-width: 576px) {
	
	footer .footer-link{ float: none; }
	
	footer .logo{ float: none; }

    footer .icons{ text-align: center; }
	
    
}


