/*

Template Name: Home Loan Website Responsive Landing Page
Author: LeadForest
Author URI: http://leadforest.com/
Description: Home Loan Website Responsive Landing Page - Single Home Loan Website Responsive Landing Page HTML5 Template.
Version: 1.0
Tags: single page, Bootstrap, responsive, html5, css3

*/


/* Table of Content
==================================================
#BASIC TYPOGRAPHY
#HEADER	
#BANNER
#CALCULATOR-PART
#SERVICES-SECTION
#PORTFOLIO-SECTION
#TESTIMONIALS-SECTION
#TAB-SECTION
#CONTACT-US
#FOOTER
*/


* { margin: 0; padding: 0; }

/********** BODY **********/

html { width: 100%; height: 100%; }
body { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; font-size: 15px; color: #979797; line-height: 25px; font-weight: 400; position: relative; overflow-x: hidden; background: #e6e7e9; }
header, section, footer { width: 100%; float: left; }

/********** A TAG **********/

a { outline: none; text-decoration: none; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; transition: all .6s ease-in-out; color: #000000; }
a:hover, a:focus { outline: none; text-decoration: none; color: #C06; }
.form-button { -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }

/********** HEADING **********/

h1, h2, h3, h4, h5, h6 { margin: 0 0 15px 0; line-height: normal; letter-spacing: 0.5px; font-weight: 700; font-family: 'Roboto Slab', serif; }
h1 { font-size: 60px; line-height: 68px; color: #fff; letter-spacing: 1.9px; font-weight: 900; }
h2 { font-size: 26px; line-height: normal; color: #323232; letter-spacing: 0.2px; font-family: 'Roboto', sans-serif; }
h3 { font-size: 22px; line-height: 40px; letter-spacing: 0.55px; color: #000000; }
h4 { font-size: 30px; }
h5 { font-size: 25px; }
h6 { font-size: 20px; }

/********** P TAG **********/

p { float: none; margin: 0 0 15px 0; padding: 0; }
p a { color: #891c4a; }
p strong { font-weight: bold; }

/********** UL LI LISTING **********/

ul { margin: 0 0 15px 0; padding: 0; display: block; list-style: none; }
ul li { margin: 0 0 20px 0; padding: 0 0 0 20px; line-height: normal; position: relative; }
ul li a { color: #2b3548; }
ul li a:hover { color: #891c4a; text-decoration: none; }
ul li::before { content: "\f046"; font-family: "FontAwesome"; left: 0; top: 0; position: absolute; }
ol { margin: 0 0 15px 15px; padding: 0; }

/********** IMAGE ALIGN **********/

.alignleft { float: left; margin: 0 30px 30px 0; }
.alignright { float: right; height: auto; margin: 0 0 30px 30px; }
.aligncenter { display: block; margin: auto auto 20px auto; }
img { max-width: 100%; }

/********** SCROLL BUTTON **********/

a.back-to-top { display: none; position: fixed; z-index: 999; right: 20px; bottom: 75px; text-align: center; }
a.back-to-top i { font-size: 30px; font-weight: 700; line-height: 1.2; font-family: FontAwesome; color: #FFF; width: 40px; height: 40px; background-color: #002e5b; }
a:hover.back-to-top i { background-color: #00c3eb; color: #323232; }

/********** INPUT **********/

fieldset { width: 100%; float: left; position: relative; }
input[type=search] { -webkit-appearance: none; }
input[type=text], input[type=password], input[type=search] { -webkit-appearance: none; -moz-appearance: none; outline: 0; }
input[type=checkbox] { box-shadow: none; border: none; outline: none; margin-right: 10px; }
textarea:focus, select:focus, button:focus { outline: none; text-decoration: none; -moz-appearance: none; -webkit-appearance: none; }
textarea, button { outline: none; text-decoration: none; -moz-appearance: none; -webkit-appearance: none; }
select { width: 100%; -moz-appearance: none; -webkit-appearance: none; }
textarea { width: 100%; padding: 10px 15px; }
.error { border: 1px solid #ff0000 !important; color: #ff0000 !important; }
label.error { display: none !important; }
.success-msg { color: #0ec40e !important; left: 0; margin: 0; position: absolute; right: 0; text-align: center; z-index: 1; }

/********** PLACEHOLDER **********/

*::-webkit-input-placeholder {
color:#092a54;
opacity: 1;
}
*::-moz-placeholder {
color:#092a54;
opacity: 1;
}
*:-ms-input-placeholder {
color:#092a54;
opacity: 1;
}

/********** HEADER AND BANNER **********/

header { background: url(../images/header-bg.jpg) no-repeat center center; background-size: cover; position: relative; overflow-x: hidden; padding: 35px 0; }
.header-inner { width: 100%; float: left; background: #ffffff url(../images/banner-bg.jpg) no-repeat center center; background-size: cover; position: relative; -webkit-box-shadow: 0 0 20px rgba(0,0,0,.75); -moz-box-shadow: 0 0 20px rgba(0,0,0,.75); box-shadow: 0 0 20px rgba(0,0,0,.75); }
.header-inner::before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; background-color: rgba(11,15,27,0.8); }
.header-left-part { width: 100%; float: left; max-width: 650px; position: relative; }
.header-left-part .logo { width: auto; float: left; position: absolute; top: 25px; left: 25px; }
.header-left-part .phone-no { width: auto; float: right; color: #fff; font-size: 22px; font-weight: 700; line-height: 26px; text-align: center; position: absolute; right: -127px; top: 30px; letter-spacing: 1px; z-index: 2; text-transform: uppercase; background-color: #081829; padding: 15px; }
.header-left-part .phone-no a { color: #FFF; }
.header-left-part .phone-no a:hover, .header-left-part .phone-no a:focus { color: #0077db; }
.header-left-part .phone-no::after { position: absolute; left: -20px; top: 0; content: ""; border-bottom: 56px solid #081829; border-left: 20px solid transparent; }
.header-left-part .phone-no::before { position: absolute; right: -12px; top: 0; content: ""; border-top: 56px solid #081829; border-right: 12px solid transparent; }
.header-left-part .banner-text-part { float: left; width: 100%; margin: 245px 0 50px; padding: 0 0 0 35px; position: relative; }
.header-left-part .banner-text-part h1 { margin-bottom: 25px; }
.header-left-part .banner-text-part h1 i { font-style: normal; font-weight: 400; display: block; letter-spacing: 0; }
.header-left-part .banner-text-part p { display: inline-block; margin: 0 7px 0 0; vertical-align: middle; }
.header-left-part .banner-text-part p strong { font-size: 100px; color: #fde428; font-weight: 500; letter-spacing: 0.4px; vertical-align: middle; line-height: normal; display: inline-block; }
.header-left-part .banner-text-part span { display: inline-block; font-size: 34px; line-height: 42px; color: #ffffff; letter-spacing: 1.7px; font-weight: 400; max-width: 320px; padding: 9px 0 0; min-height: 100px; vertical-align: middle; width: 100%; }
.header-left-part .banner-text-part span b { letter-spacing: 2.60px; }
.header-left-part .belte { width: auto; position: relative; float: left; min-width: 330px; padding: 10px 35px 10px 0px; text-align: center; color: #000000; font-size: 29px; line-height: normal; font-weight: 700; font-family: 'Roboto Slab', serif; background-color: #fde428; text-transform: uppercase; letter-spacing: 0.4px; margin: 23px 0 0; }
.header-left-part .belte::before { position: absolute; right: -21px; top: 0; content: ""; border-bottom: 58px solid #fde428; border-right: 21px solid transparent; }
.header-left-part .belte::after { position: absolute; left: -35px; top: 0; content: ""; width: 35px; height: 58px; background: #fde428; }
.right-arrow { position: absolute; right: -80px; top: 145px; }

/*** FORM CSS ***/
.header-right-part { width: 100%; float: left; max-width: 550px; position: relative; padding: 165px 30px 30px 130px; z-index: 1; overflow: hidden; }
.header-right-part::after { left: 0; bottom: 0; content: ""; position: absolute; border-bottom: 2850px solid rgba(7,86,158,0.9); border-left: 550px solid transparent; }
.header-right-part .form-part { width: 100%; float: left; padding: 17px 0 0 0px; position: relative; z-index: 1; }
.header-right-part .form-title-part { width: 100%; float: left; position: relative; z-index: 1; }
.header-right-part .form-title-part span { font-size: 33px; line-height: normal; letter-spacing: 0.8px; color: #ffffff; text-transform: uppercase; font-family: 'Roboto Slab', serif; font-weight: 700; text-shadow: 1px 2px 2px rgba(0,0,0,.2); text-align: center; width: 100%; float: left; }
.header-right-part .form-part ul { width: 100%; float: left; margin: 0; }
.header-right-part .form-part ul li::before { display: none; }
.header-right-part .form-part ul li { width: 100%; float: left; margin: 0; padding: 0 7px 15px; position: relative; color: #FFF; }
.header-right-part .form-part ul li.w6 { width: 50%; }
.header-right-part .form-part ul li .form-input { width: 100%; height: 49px; border: none; background-color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font-size: 16px; color: #092a54; padding: 0 15px; }
.header-right-part .form-part ul li textarea.form-input { height: 100%; padding: 10px 15px; position: relative; z-index: 1; outline: none !important; }
.form-button { border: 1px solid #064b89; background-color: #fde428; font-weight: 700; color: #000000; font-size: 30px; line-height: 63px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; font-family: 'Roboto Slab', serif; padding: 0 15px; width: 100%; }
.form-button:hover { border: 1px solid #ffcd02; background-color: #ffcd02; color: #000; }
.select-style { cursor: pointer; position: relative; }
.selectcon { background-image: url(../images/arrow.png); position: absolute; right: 12px; top: 50%; margin-top: -4px; width: 14px; height: 9px }
.select-style .highlight, .select-style { padding-left: 0 !important; padding-right: 0 !important; }
.select-style .niceselect .value-wrapper { border: solid 1px #fde428; background: #fff; }
.select-style .niceselect .top p { font-size: 16px; font-weight: 300; color: #343434 }
.select-style .niceselect .value-wrapper .values { color: #0D0C0C; font-size: 14px }
.select-style .niceselect .value-wrapper .values.active, .select-style .niceselect .value-wrapper .values:hover { background: #000; color: #fff; }
.select-style .niceselect .opt { font-size: 14px; font-weight: 400; border-bottom: 5px; cursor: default }
.select-style .niceselect .opt span { padding: 10px; font-weight: 700; display: block }
.select-style { -webkit-touch-callout: none; display: inline-block; min-width: 150px }
.niceselect .value-wrapper { display: none; position: absolute; top: 47px; width: 100%; z-index: 10; overflow-y: scroll; height: 250px; }
.niceselect .value-wrapper .opt .values { padding: 10px 10px 10px 20px }
.niceselect .value-wrapper .values { padding: 5px 15px; cursor: pointer }
.niceselect .value-wrapper .values label { cursor: pointer }
.niceselect { position: relative; text-align: left; }
.select-style label { font-weight: inherit; margin-bottom: 0; }
.niceselect p { border: none; margin-top: 0; margin-bottom: 0; padding: 0px 15px; height: 49px; line-height: 49px }
.niceselect input[type=radio] { visibility: hidden; position: absolute; left: -9999px }

/********** calculator-PART **********/

.calculator-part { width: 100%; float: left; background-color: #fde428; }
.calculator-part-inner { width: 100%; float: left; padding: 15px 0; }
.calculator-part-inner p { max-width: 675px; width: 100%; float: left; font-size: 30px; line-height: normal; color: #002e5b; font-weight: 500; margin: 0; padding: 8px 0; }
.calculator-part-inner a.small-button { min-width: 322px; min-height: 58px; -webkit-border-radius: 4px; border-radius: 4px; background-color: #002e5b; display: block; float: right; text-align: center; line-height: 58px; font-size: 28px; font-weight: 700; color: #FFF; text-transform: uppercase; letter-spacing: 0.8px; padding: 0 20px; }
.calculator-part-inner a.small-button i { padding-left: 15px; }
.calculator-part-inner a.small-button:hover { background-color: #00c3eb; color: #323232; }

/******************** PAGE-CONTENT ********************/

.page-content-main { width: 100%; float: left; }
.page-content-main .container { background: #f7f8fa; -webkit-box-shadow: 0 0 12px rgba(0,0,0,.1); -moz-box-shadow: 0 0 12px rgba(0,0,0,.1); box-shadow: 0 0 12px rgba(0,0,0,.1); min-height: 90px; }
.page-content-main-inner { width: 100%; float: left; padding: 0 10px; }
.section-title { width: 100%; float: left; margin-top: 3px; }

/********** SERVICES-SECTION **********/

.services-section { width: 100%; float: left; margin-bottom: 20px; }
.services-section .top-part { width: 100%; float: left; padding: 63px 0; }
.services-section .bottom-part { width: 100%; float: left; }
.services-section .top-part .section-title h2 { font-size: 24px; line-height: 34px; font-weight: 700; padding: 0 30px 0 87px; text-align: right; margin: 0; float: right; position: relative; }
.title-right-part { width: 100%; float: left; padding-right: 40px; }
.title-right-part > p { font-size: 17px; line-height: 25px; color: #323232; font-style: italic; margin: 0; position: relative; }
.title-right-part > p::before { content: ""; left: -33px; top: 0; width: 3px; height: 100%; background: #00c3eb; position: absolute; }
.about-service { width: 100%; max-width: 418px; float: right; position: relative; padding: 25px 45px 35px 65px; border: 1px solid #e6e6e6; background-color: #fdfdfd; margin: 15px 0; }
.service-image { position: absolute; left: -142px; top: 50%; border: 1px solid #e6e6e6; padding: 9px; margin-top: -79px; width: 170px; height: 160px; overflow: hidden; background-color: #fdfdfd; }
.service-box-title { width: 100%; float: left; font-size: 19px; line-height: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2px; color: #323232; position: relative; padding: 0 0 16px; margin: 0 0 10px; }
.service-box-title::after { width: 45px; height: 3px; position: absolute; bottom: 0; left: 0; content: ""; background: #00c3eb; }
.about-service > p { margin: 0; width: 100%; float: left; }

/********** PORTFOLIO-SECTION **********/

.portfolio-section { width: 100%; float: left; margin-bottom: 55px; }
.portfolio-box-main { width: 100%; float: left; margin-top: 25px; }
.portfolio-box { position: relative; width: 100%; float: left; }
.portfolio-box { width: 100%; float: left; position: relative; }
.portfolio-box .portfolio-text { position: absolute; left: 0; bottom: 0; width: 100%; display: block; padding: 35px 40px; background-color: rgba(0,46,91,0.9); -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; height: 80px; overflow: hidden; }
.portfolio-text p { display: block; color: #fff; text-align: center; margin: 0; }
.portfolio-box:hover .portfolio-text { height: 100%; }
.box-title { width: 100%; float: left; font-size: 20px; line-height: 26px; font-weight: 700; color: #fff; letter-spacing: 0; padding-left: 60px; position: relative; margin-bottom: 15px; }
.box-title > i { position: absolute; font-size: 34px; line-height: 26px; color: #fde428; left: 0; top: 0; }

/********** TESTIMONIALS-AND-TAB-SECTION **********/

.testimonials-and-tab-section { width: 100%; float: left; margin-bottom: 30px; }

/********** TESTIMONIALS-SECTION **********/

.testimonials-section { width: 100%; float: left; background-color: #fde428; padding-top: 28px; padding-bottom: 40px; }
.testimonials-inner { width: 100%; float: left; }
.testimonial-box { width: 100%; float: left; padding: 20px 75px 35px; }
.testimonial-box .author-image { width: 130px; height: 130px; border-radius: 50%; -webkit-border-radius: 50%; background-color: #f6ba18; border: solid 3px #fff; margin: 0 auto; display: block; }
.testimonial-box .author-image > img { max-width: 100% !important; height: auto !important; border-radius: 50%; -webkit-border-radius: 50%; }
.testimonial-box .author-details { width: 100%; float: left; display: block; font-size: 16px; color: #000000; letter-spacing: 0.4px; text-align: center; text-transform: uppercase; margin-top: 23px; }
.testimonial-box .author-details > strong { width: 100%; float: left; display: block; font-size: 22px; font-weight: 900; color: #242424; }
.testimonial-box p { color: #000; margin: 15px 0 0; width: 100%; float: left; display: block; }
.owl-theme .owl-controls { margin: 0 0 0; }
.owl-carousel .owl-wrapper, .owl-carousel .owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); }

/********** TAB-SECTION **********/

.tab-section { width: 100%; float: left; background-color: #FFF; padding-top: 28px; }
.tab-inner-main { width: 100%; float: left; padding: 18px 25px 0; }
.tab-inner { width: 100%; float: left; }
.tab-inner .tab-title { width: 100%; float: left; font-size: 20px; line-height: 26px; color: #212832; font-weight: 700; letter-spacing: 0.8px; margin-bottom: 10px; }
.tab-inner p { color: #979797; }
.tab-inner ul { margin: 27px 0 0; width: 100%; float: left; }
.tab-inner ul li { width: 50%; float: left; position: relative; padding: 0 10px 0 30px; margin: 0; font-weight: 500; line-height: 32px; position: relative; color: #707070; }
.tab-inner ul li::before { line-height: 32px; color: #062f57; }
#tabbed-nav ul.z-tabs-nav li::before { display: none; }
.z-tabs > .z-container > .z-content > .z-content-inner { padding: 35px 20px 80px; }
.z-tab { width: auto !important; display:table-cell !important; float:none !important; }
.z-tabs.horizontal.z-shadows > .z-container { border: medium none !important; box-shadow: none; }
.z-tabs.horizontal.z-shadows > ul > li > a { border: medium none !important; box-shadow: none; box-shadow: none; font-size: 15px; line-height: 26px; color: #212832; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; padding: 15px 0px; background-color: #f7f8fa; background-image: none; margin: 0 !important; text-shadow: none !important; box-sizing:border-box; width:100%; text-align:center; }
.z-tabs.horizontal.z-shadows > ul > li.z-first > a, .z-tabs.horizontal.z-shadows > ul > li.z-last > a { box-shadow: none; }
.z-tabs.silver > ul > li.z-active > a { background-color: #002e5b; color: #FFF; position: relative; top:0 !important; }
.z-tabs.silver > ul > li.z-active > a::before { background: url(../images/tab-arrow.png) no-repeat; width: 26px; height: 13px; background-size: 100%; position: absolute; bottom: -12px; left: 0; right: 0; margin: 0 auto; content: ""; z-index: 1; }
.z-tabs > ul.z-tabs-desktop { background-color: #f7f8fa; float:left; width:100%; display:table !important; }
.z-tabs.responsive.horizontal.top > ul > li.z-last-row.z-active{ top:0; padding-bottom:0; }
.z-tabs.medium > ul > li > a{ font-size:15px; font-weight:700; }

/********** CONTACT-US-SECTION **********/

.contact-us-section { width: 100%; float: left; margin-bottom: 20px; background-color: #00c3eb; padding: 25px 30px; }
.section-text-part { width: auto; float: left; font-size: 26px; font-style: italic; line-height: 22px; letter-spacing: 0.4px; color: #ffffff; font-family: 'Roboto Slab', serif; padding: 12px 0; }
.section-button-part { width: auto; float: right; }
.section-button-part a.small-button { min-width: 196px; min-height: 47px; line-height: 47px; background-color: #fde428; border-radius: 4px; -webkit-border-radius: 4px; font-size: 18px; font-weight: 500; color: #23272b; letter-spacing: 0.2px; padding: 0 15px; text-align: center; display: block; }
.section-button-part a.small-button i { font-size: 20px; border-left: 1px solid rgba(255,255,255,0.5); padding-left: 15px; }
.section-button-part .small-button > span { border-right: 1px solid #e4cb0e; padding-right: 15px; }
.section-button-part a.small-button:hover { color: #00c3eb; }

/********** FOOTER **********/

footer { padding: 25px 0; background-color: #002e5b; }
footer p { margin: 0; text-align: center; color: #fff; font-size: 16px; line-height: 22px; letter-spacing: 0.4px; }