body{font-family: "Roboto", sans-serif; color: #62748e; font-size: 16px;}
ul, p{margin: 0; padding: 0; list-style-type: none;}
h1, h2, h3{margin: 0; padding: 0;}
h1, h2{font-size: 30px; text-align: center; color: #0f172b; font-weight: 700;}
h1{text-align: left;}
h3{font-size: 30px; color: #0f172b; font-weight: 700;}
h4{font-size: 26px; color: #0f172b; font-weight: 700; text-align: center;}
.horizontal-center{left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
.black-btn{background: #0E46A3; color: #fff; border-radius: 5px; padding: 8px 20px !important; text-decoration: none; font-size: 16px; display: inline-block; border: none;}
.black-btn:hover{background: #0f172b; color: #fff;}
.black-btn i{font-size: 14px; margin: 0 0 0 5px;}
.row-flex, .row-flex > div[class*='col-'] {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;  flex:1 1 auto;}
.row-flex-wrap {-webkit-flex-flow: row wrap;  align-content: flex-start; flex:0;}
.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {margin:-.0px;}
.flex-col {display: flex; display: -webkit-flex; flex: 1 100%; flex-flow: column nowrap;}
.flex-grow {display: flex; -webkit-flex: 2; flex: 2;}
.container{max-width: 1200px;}
.wrapper{overflow: hidden;}

/*=== Header ===*/
header{border-bottom: 1px solid #e2e8f0; position: fixed; top: 0; left: 0; z-index: 1000;  }
.header-container{padding: 8px 0;}
.header-container:after{backdrop-filter:blur(20px); background: #fff; width: 100%; height: 100%; position: absolute; left: 0; top: 0; content: ""; opacity: 0.97}
.header-container .container{position: relative; z-index: 1;}
.navbar{background: none !important;} 
.navbar-brand{text-transform: uppercase; color: #314158; font-size: 17px; padding: 0;}
.navbar-brand i{margin: 0 5px 0 0;}
.navbar-brand:hover{color: #314158;}
.navbar-nav{padding: 20px 0 0 0;}
.nav-item{padding: 5px 0; text-align: center;}
.nav-link{font-size: 14px; padding: 5px 0;}
.nav-link:hover{color: #0f172b;}
.navbar-nav .nav-link.active{color: #0f172b}
.last-btn{background: #0E46A3; color: #fff; border-radius: 5px; padding: 5px 15px !important;}
.last-btn i{font-size: 12px; margin: 0 0 0 5px;}
.last-btn:hover{background: #0f172b; color: #fff;}
#header-menu-btn {border: none; outline: none; padding: 7px 0 0 0; position: absolute; z-index: 1000; width: 25px; right: 0; top: 5px; box-shadow: none;}
#header-menu-btn .icon-bar {background: #0f172b; transform: rotate(0deg) translate(0px, 0px); transition: ease all 0.2s; display: block; width: 25px; height: 3px; border-radius: 2px;}
#header-menu-btn .icon-bar + .icon-bar {margin-top: 4px;}
#header-menu-btn .icon-bar:nth-child(2) {width:25px; transition: ease all 0.2s;}
#header-menu-btn:hover > .icon-bar:nth-child(2) {width: 25px; transition: ease all 0.2s;}
#header-menu-btn:active > .icon-bar:nth-child(2), #header-menu-btn.nice-select.open > .icon-bar:nth-child(2) {width: 35px; transition: ease all 0.2s;}
#header-menu-btn:not(.collapsed) .icon-bar:nth-child(1) {transform: rotate(45deg) translate(5px, 2px); transition: ease all 0.2s;}
#header-menu-btn:not(.collapsed) .icon-bar:nth-child(2) {opacity: 0; transition: ease all 0.2s;}
#header-menu-btn:not(.collapsed) .icon-bar:nth-child(3) {transform: rotate(-45deg) translate(8px, -6px); transition: ease all 0.2s;}

/*=== Header End ===*/

/*=== Banner ===*/
.banner{padding: 144px 0 80px; background: url("../images/banner-bg.jpg") no-repeat right top/cover;}
.banner-small-text{font-size: 16px; color: #0E46A3;}
.banner h1{font-size: 36px; text-align: center; font-weight: 900; padding: 5px 0 0 0; color: #0f172b; line-height: 110%;}
.banner p{left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); padding: 25px 0 0 0; position: relative; text-align: center; font-size: 18px; font-weight: 500;}
.banner-btn{padding: 25px 0 0 0;}
/*=== Banner End ===*/

/*=== Middle ===*/
.middle-top{padding: 60px 0 0 0;}
.marquee-strip-wrp{background: #f8fafc; color: #0f172b; padding: 15px 0; margin: 25px 0 0 0; font-size: 16px; font-weight: 700; overflow: hidden;}
.marquee-strip{white-space: nowrap; animation: marquee 10s linear infinite;}
.marquee-strip ul{ visibility: hidden; white-space: nowrap;}
.marquee-strip ul li{display: inline-block; margin: 0 10px;}
.unlock-section{padding: 100px 0 0 0;}
.title-text{font-size: 16px; padding: 20px 0 0 0;}
.unlock-box{padding: 30px 0 0 0;}
.unlock-box-title{padding: 3px 0 0 45px; font-weight: 700; font-size: 18px; color: #0f172b;}
.unlock-box-title span{width: 35px; height: 35px; background: #f8fafc; border-radius: 5px; text-align: center; position: absolute; left: 0; top: 0; padding: 4px 0 0 0; }
.unlock-box-title i{color: #0f172b;}
.unlock-box p{padding: 15px 0 0 45px; line-height: 170%;}
.testimonial-section{margin: 60px 0 0 0; padding: 40px 0; background: #f8fafc;}
.testimonial-section .container{max-width: 1000px;}
.testimonial-section p{font-size: 16px; font-weight: 400; text-align: center;}
.testimonial-bottom{padding: 25px 0 0 0;}
.client-name{font-size: 14px;}
.client-name span{color: #0f172b; font-size: 16px;}
.client-img{margin: 0 10px 0 0;}
.client-img img{width: 50px; border-radius: 50%;}
.pricing-section{padding: 100px 0 0;}
.pricing-section h3{text-align: center;}
.pricing-section .title-text{max-width: 100%;}
.pricing-box{background: #f8fafc; border-radius: 5px; padding: 30px 15px 100px; position: relative; margin: 30px 0 0 0;}
.pricing-box-title{font-weight: 500; color: #0f172b; font-size: 24px;}
.price-row{padding: 0 0 0 50px; position: relative; font-size: 14px; margin: 25px 0 0 0;}
.price-row span{position: absolute; left: 0; top: 0; font-size: 40px; font-weight: 700; line-height: 100%; color: #0f172b;}
.pricing-bullets{padding: 10px 0 0 0;}
.pricing-bullets ul li{margin: 10px 0 0 0; position: relative; padding: 5px 0 5px 25px;}
.pricing-bullets ul li i{color: #0f172b; position: absolute; left: 0; top: 8px; font-size: 18px;}
.pricing-button{padding: 25px 15px 30px 15px; position: absolute; left: 0; bottom: 0;}
.control-section{padding: 100px 0 0 0;}
.control-section .title-text{max-width: 100%;}
.control-bullets{padding: 30px 0 0 0;}
.control-bullets ul li{margin: 0 0 20px; padding: 0 0 0 30px; line-height: 180%; position: relative;}
.control-bullets ul li i{color: #0f172b; position: absolute; left: 0; top: 8px; font-size: 18px;}
.cta-section{border-top: 1px solid #e2e8f0; padding: 60px 0; margin: 30px 0 0;}
.cta-section .title-text{max-width: 100%;}
.cta-btn{padding: 25px 0 0 0;}
.form-bullets{padding:20px 0 0 0;}
.form-bullets ul li{margin: 10px 0 0 0; position: relative; padding: 5px 0 5px 22px;}
.form-bullets ul li i{color: #0f172b; position: absolute; left: 0; top: 9px; font-size: 14px;}
.form-box{padding: 15px 0 0 0;}
.form-row{margin: 25px 0 0 0; position: relative;}
.form-control{border-radius: 4px; padding: 15px 15px; font-size: 15px; border: 1px solid #e2e8f0;}
.form-control:focus{box-shadow: none; border: 1px solid #0f172b;}
.form-box .black-btn{padding: 12px !important;}
/*=== Middle End ===*/

/*=== Footer ===*/
footer{background: #f8fafc; padding: 10px 0 40px; font-size: 15px; text-align: center;}
.footer-column{padding: 30px 0 0 0;}
.footer-title{}

.footer-nav ul li{padding: 12px 0 0 0;}
.footer-nav ul li a{color: #62748e; text-decoration: none;}
.footer-nav ul li a:hover{color: #0f172b;}
.footer-logo{text-transform: uppercase; color: #314158; font-size: 17px; padding: 0;}
.footer-logo i{margin: 0 5px 0 0;}
.copyright{text-align: center; padding: 20px 0 0 0;}
/*=== Footer End ===*/

/*=== Inner pages ===*/
.middle-inner{padding: 100px 0 60px 0;}
.middle-inner .container{max-width: 900px;}
.middle-inner p{padding: 10px 0 0 0; line-height: 180%; margin: 0;}
.small-title{font-size: 20px; padding: 30px 0 0; color: #0f172b;}
.bullets{padding: 5px 0 0 0;}
.bullets ul li{width: 100%; display: block; margin: 10px 0 0 0; padding: 0 0 0 15px; position: relative;}
.bullets ul li:after{width: 5px; height: 5px; border-radius: 50%; background: #62748e; display: block; position: absolute; left: 0; top: 9px; content: "";}
/*=== Inner pages End ===*/
label.validation-error { font-size: 12px !important; margin-top: 5px; color: #721c24; }
span.validation-error { font-size: 12px; margin-top: 5px; color: #721c24; }
span.message { font-size: 14px; margin-top: 10px; color: #155724; font-weight: 600 }


@media screen and (min-width: 768px){
	h1, h2{font-size: 60px;}
	h3{font-size: 50px;}
	h4{font-size: 36px;}
	
	/*=== Header ===*/
	.navbar-nav{padding: 0;}
	.nav-item{padding: 0 0 0 30px;}
	/*=== Header End ===*/
	
	/*=== Banner ===*/
	.banner{padding: 164px 0 100px;}
	.banner h1{font-size: 70px;}
	.banner p{font-size: 20px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); max-width: 65%;}

	/*=== Banner End ===*/
	
	/*=== Middle ===*/
	.marquee-strip-wrp{font-size: 20px;}
	.marquee-strip ul li{display: inline-block; margin: 0 20px;}
	.control-bullets{padding: 0;}
	.form-bullets{padding:30px 0 0 0;}
	/*=== Middle End ===*/
	
	/*=== Footer ===*/
	footer{padding: 30px 0 60px; text-align: left;}
	/*=== Footer End ===*/
}

@media screen and (min-width: 992px){
	/*=== Banner ===*/
	.banner{padding: 264px 0 200px;}
	/*=== Banner End ===*/
	
	/*=== Middle ===*/
	.title-text{font-size: 18px; max-width: 70%;}
	.middle-top{padding: 100px 0 100px 0;}
	.unlock-section{padding: 100px 0 0 0;}
	.unlock-section .data-row{padding: 30px 0 0 0;}
	.testimonial-section{margin: 100px 0 0 0; padding: 60px 0;}
	.pricing-section{padding: 100px 0 0;}
	.pricing-box{padding: 30px 30px 100px;}
	.pricing-button{padding: 25px 30px 30px 30px;}
	.pricing-section .title-text{left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); position: relative; max-width: 75%;}
	.control-section{padding: 100px 0 0 0;}
	.control-bullets{padding: 0;}
	.cta-section{padding: 80px 0; margin: 100px 0 0;}
	.cta-section .title-text{left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); position: relative; max-width: 50%;}
	/*=== Middle End ===*/
	
	/*=== Footer ===*/
	.copyright{text-align: left; padding: 0;}
	.footer-nav{padding: 5px 0 0 0;}
	/*=== Footer End ===*/
	
	/*=== Inner pages ===*/
	.middle-inner{padding: 140px 0 100px 0;}
	/*=== Inner pages End ===*/
}

@media screen and (min-width: 1200px){
	/*=== Footer ===*/
	/*=== Footer End ===*/
}