/* ================================= CSS Structure =================================
1. GLOBAL STYLES	
	- Misc Styles
	- Canvas Styles
	- Page Loader Styles
	- Overlay Styles

2. HEADER SECTION	
	- Sticky Container
	- Logo Styles
	- Navigation
	
3. SLIDER SECTION
	- Background Slider
	- Carousel Slider
	
4. FEATURES SECTION
5. PRODUCTS SECTION
6. PRICING TABLE SECTION
7. PORTFOLIO SECTION
8. OUR ACHIEVEMENT SECTION
9. VIDEO SECTION
10. ABOUT SECTION
11. INFOGRAPH SECTION
12. TEAM SECTION
13. BLOG SECTION
14. SKILL SECTION
15. CLIENT SECTION
16. CONTACT US SECTION
17. FOOTER SECTION
18. COPYRIGHT SECTION
19. PAGES
	- Blog
		- Blog Right Part Sidebar
		- Blog Single Page
		- Blog Single Contact Form
	- FAQ
	- Shortcodes
=========================================================================== */

/* =========================== GLOBAL STYLES ============================== */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
body {
	color:#333333;
	font-size:16px;
	padding: 0;
font-family: "Lora", serif;
  font-style: normal;
	background: #f2f6fa;
	z-index:999;
}
a, a:hover, a:focus, .btn:focus{
    text-decoration: none;
	outline: none;
}
img {
	max-width:100%;
}
.relative {
	position: relative;
}
.absolute {
	position: absolute;
}
.container {
    max-width: 1260px;
	padding-left:15px;
	padding-right:15px;
	width:100%;
}
.no-padding {
	padding: 0;
}
.uppercase {
	text-transform: uppercase;
}
.capitalize {
	text-transform: capitalize;
}
.bold{
	font-weight:700;
}
.normal{
	font-weight:normal;
}
.white{
	color:#FFFFFF;
}
.italic{
	font-style:italic;
}
.animated{
	visibility:hidden;
}
.visible{
	visibility:visible;
}
/* ------------- Misc Styles ------------- */
#features, #infograph, #blog, #clients{
	background: #f2f6fa;
}
.embed-container { 
	position: relative;
	padding-bottom: 56.25%; 
	overflow: hidden; 
	max-width: 100%; 
	height: 200px; 
} 
/* ------------- Canvas Styles ------------- */

.header-section{}
.top_right_btn ul{list-style:none;display:flex;padding:0px 20px}
.top_right_btn ul li{padding:0px 10px}
.top-navbar{background:#3B94CF; padding: 6px 0px;}
.navbar-header{width:100%}
.top-container {padding:10px 0px} 
/* ------------- Purchase Now ------------- */

.slide-btn {
	
font-family: "Lora", serif;

	font-size: 22px;
	color: #FFFFFF;
	padding: 12px 34px;
	font-weight:bold;
	position: relative;
	transition: all 0.4s ease-in 0s;
	-moz-transition: all 0.4s ease-in 0s;
	-webkit-transition: all 0.4s ease-in 0s;
	-o-transition: all 0.4s ease-in 0s;
	-ms-transition: all 0.4s ease-in 0s;border: 2px solid; border-radius:50px	
}
.slide-btn a {
	color: #FFFFFF;
}
.slide-btn:hover{	color: #FFFFFF;border: 2px solid #fff;}
/* ------------- Page Loader Styles ------------- */
#pageloader {
    background-color: #FFFFFF;
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
} 
.loader-item {
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom: 3px solid rgba(0, 0, 0, 0) !important;
    border-left: 3px solid;
    border-radius: 200px;
	-moz-border-radius: 200px;
	-webkit-border-radius: 200px;
	-o-border-radius: 200px;
	-ms-border-radius: 200px;
    border-right: 3px solid;
    border-top: 3px solid;
    height: 40px;
    left: 50%;
    margin: -20px 0 0 -20px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 40px;
}
.loader-item h2 {
    color: #CCCCCC;
    font-size: 20px;
    margin: 0 auto;
}
.colored-border {
    border-color: #3498db;
}
/* ------------- Overlay Styles ------------- */
.overlay {
	display: block;
	position: absolute;
	z-index: 20;
	background: rgba(0, 0, 0, 0.75);
	overflow: hidden;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
a.close-overlay {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 100;
	width: 45px;
	height: 45px;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	line-height: 45px;
	text-align: center;
	cursor: pointer;
}
a.close-overlay.hidden {
  	display: none;
}
a.expand {
	display: block;
	position: absolute;
	z-index: 100;
	width: 60px;
	height: 60px;
	border: solid 2px #fff;
	text-align: center;
	color: #fff;
	line-height: 55px;
	font-weight: 700;
	font-size: 25px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-ms-border-radius: 30px;
	-o-border-radius: 30px;
	border-radius: 30px;
}
/* Products Hover Effect */
.effect2 .overlay {
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 0;
}
.effect2 .overlay a.expand {
	left: 0;
	right: 0;
	top: 50%;
	margin: -30px auto 0 auto;
}
.effect2 .img.hover .overlay {
	height: 100%;
}
/* Portfolio Hover Effect */
.effect5 .overlay {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
}
.effect5 .overlay a.expand {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	-o-border-radius: 0;
	border-radius: 0;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.effect5 .img.hover .overlay {
  	opacity: 1;
}
.effect5 .img.hover .overlay a.expand {
	width: 60px;
	height: 60px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-ms-border-radius: 30px;
	-o-border-radius: 30px;
	border-radius: 30px;
}
/* Blog Hover Effect */
.effect6 .overlay {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
}
.effect6 .overlay a.expand {
	left: 0;
	right: 0;
	top: 0;
	margin: 0 auto;
	opacity: 0;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.effect6 .img.hover .overlay {
  	opacity: 1;
}
.effect6 .img.hover .overlay a.expand {
	top: 50%;
	margin-top: -30px;
	opacity: 1;
}
/* =========================== HEADER SECTION ============================== */
.header{
	padding-bottom:25px;
}
.title{
	font-size: 48px;
font-family: "Lora", serif;
	font-weight: normal;
	color: #495258;
	text-transform: capitalize;
}
.desc{
	font-size: 18px;
	font-weight: 400;
	padding:10px 0px;
	color: #000;
	line-height: 1.8;
}
/* Header Other Page*/
#header-top .header-section{
	height:85px;
}
.site-logo{float:left}
.cat_btn{float:right}
.site-logo img{max-height:110px}
/* ------------- Sticky Container ------------- */
.sticky-wrapper.is-sticky .top-container {
	position: relative;
	
}
.sticky-navigation {
	width: 100%;
	z-index: 1001; background:#fff
}
#top-section .collapse.in {
	z-index:9999;
}
#sticky-section .dropdown i {
	font-size: 18px;
    margin:0 0px 0 5px;
    vertical-align: middle;
}
/* ------------- Logo Styles ------------- */
.top-container {
    left: 0;    
    right: 0;
    top: 0;

	z-index: 99;
}
.top-head{display:flex; justify-content: space-between;align-items:center
}
.broc_btn{text-align:right}

/* ------------- Navigation ------------- */
.featured-box i{font-size:30px}
.top-navbar {
	margin: 0;
	border: none;
}
.top-navbar ul.nav a {
font-family: "Lora", serif;
  
	font-size: 18px;
	font-weight: 600;
	font-style: normal;
	color: #FFFFFF; letter-spacing:2px
}
.top-navbar ul.nav a:hover, .top-navbar ul.nav a:focus {
	background:none !important;
	color: #2a3643;
}
.navbar-toggle{
	background-color:#2c3e50;
	margin-right:0px;
}
.navbar-toggle .icon-bar{
	background-color:#FFFFFF;
}
.navbar-nav{
	margin:0;
}
.top-navbar ul.nav li:last-child a {
    padding-right: 0;
}
#topnav .nav li a:hover,
#topnav .nav li a:focus,
#topnav .nav li.active a{
	color:#000;
}
.top-navbar .dropdown a{
	background:none !important;
}
/* Dropdown */
.dropdown{
	position:relative;
}
ul li span.menu-toggler {
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: -8px;
    text-align: center;
    top: 9px;
    width: 30px;
    z-index: 1;
}
/* =========================== SLIDER SECTION ============================== */
/* ------------- Background Slider ------------- */

/* ------------- Carousel Slider ------------- */


/* =========================== FEATURES SECTION ============================== */
.container.features-inner {
    padding: 60px 80px;
}


/* =========================== PRODUCTS SECTION ============================== */
.products-section {
	background: #2c3e50; display:inline-block;padding:80px 0px
}
.features-section{padding:100px 0px}
.products-section .title{
	color: #FFFFFF !important;
}
.product-box {
	background: #FFFFFF;
	margin:20px 0px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
}
.product-box-inner {
	padding: 10px;
}
.product-more {
	background-color:#e8edf2;
	padding:15px;
	text-align: center;
	border-bottom-left-radius:3px;
	border-bottom-right-radius:3px;
}
.products-section h4{
	font-size:30px;
}
.products-section h4{

}


.product-more:hover a{
	color:#FFFFFF;
}


.product-box-inner p{
	color:#717b82;
	line-height:26px;
}
.effects .img {
  position: relative;
  margin-bottom: 5px;
  overflow: hidden;
}
/* =========================== PRICING TABLE SECTION ============================== */


/* =========================== PORTFOLIO SECTION ============================== */
#portfolio{
	background:#f2f6fa;
	padding-bottom: 80px;
	border-bottom:2px solid #dce0e3;
}
.container.work-inner {
    padding-top: 60px;
	padding-bottom: 20px;	
}
.work {    
	padding: 0;	
}
.effects .work-image {
	margin-bottom: 3px;   
	box-shadow: -2px -0.4px 0px 1px #f2f6fa;
	-moz-box-shadow: -2px -0.4px 0px 1px #f2f6fa;
	-webkit-box-shadow: -2px -0.4px 0px 1px #f2f6fa;
	-o-box-shadow: -2px -0.4px 0px 1px #f2f6fa;
	-ms-box-shadow: -2px -0.4px 0px 1px #f2f6fa;
}
.work-image img {
	width: 100%;
	height: 100%;
}
.portfolio-items .mix {
	display: none;
}

.contact{
	
}
#contact .title{
	color:#000 !important;
}
#contact .desc{
	color:#8aa0b7;
}
.container.contact-inner {
    padding-top: 60px;
	padding-bottom: 80px;	
}
.contact .header{
	padding-bottom:15px;
}
.contact .form-control{
	background:#ededed;
	opacity:0.60;
	color:#8e9dac;
	border:1px solid #2c3e50;
	height:60px;
	border-radius:3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
}
.contact .form-message{
	color:#FFFFFF;
	padding:5px 0 10px;
	text-align:center;
}
.forms .error, .forms .error:focus{
	border:1px solid #d99898;
}
.contact textarea.form-control{
	height:200px;
}
.contact .form-horizontal .form-group{
	margin:10px 0px;
}
#contact .form-control::-moz-placeholder{
	color:#000 !important;

}
#contact .form-control:focus{
	color:#000 !important;
	opacity:1 !important;
}
#contact .form-control::-webkit-input-placeholder{ 
	color:#000 !important;
	opacity:1;
}
.contact .btn{
	width:100%;
	height:60px;
	padding:16px 0px;
	color:#FFFFFF;
	font-size:18px;
	font-weight:normal;
	border:0px;
	border-radius:3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px; background:#3b94cf	
}
.contact .btn i{
	margin:0 5px;
}
.contact .btn:hover{

}
.contact .btn:hover a, .contact .btn:focus a, .contact .btn a {	
	color:#FFFFFF;
}
 .is-sticky{background:#fff}
/* =========================== FOOTER SECTION ============================== */
.footer{
	background-color:#233342;
}
.container.footer-inner {
    padding-top: 55px;
	padding-bottom: 43px;	
}
.footer .footer-about{
	padding-right:25px;
}
.footer .footer-categories-top{
	padding-left:30px;
}
.footer .footer-categories-top ul{
	padding-left:0px;
}
.footer h3{
	color:#b4c3d2;
	font-size:22px;
	padding-bottom:13px;
	font-weight:400;
}
.footer p{	
	color:#7c90a2;
	font-size:15px;
	line-height:26px;
}
.footer-categories li{
	list-style-type:none;
}
.footer-categories li a{
	color:#7c90a2;
	line-height:26px;
}
.footer .footer-post{
	padding:0px 50px;
}

.footer-post .client1 .client1-para{
	padding-right:33px;
}
.footer-post h5{
	font-size:15px;
	margin:5px 0px;
	color:#687a8c;
	font-weight:500;
}
.footer .form-horizontal{
	padding:6px 0 23px;
}
.footer .form-group {
    border-collapse: separate !important;
    position: relative !important;
}
.footer .form-horizontal .form-group{
	margin:0px;
}
.footer .form-control{
	height:40px;
	border-top-left-radius:3px;
	border-bottom-left-radius:3px;
	border-top-right-radius:0px;
	border-bottom-right-radius:0px;
	display: inline-block !important;
	max-width:240px !important;
}
.footer .form-horizontal .has-feedback .form-control-feedback{
	display:none !important;
}
.footer .has-feedback .form-control{
	padding-right:13.5px !important;
}
.footer .has-feedback .form-control:focus{
	border-color:#FF0000 !important;;
}
.footer .form-control::-moz-placeholder{
	color:#8b949b !important;
}
.footer .btn-default{
	border-top-right-radius:3px;
	border-bottom-right-radius:3px;
	border-top-left-radius:0px;
	border-bottom-left-radius:0px;
	border:0px;
    height: 40px;
    margin: -3px 0px 0 -3px;
}
.footer .btn-default i{
	font-size:20px;
	padding:4px 0px;
	color:#FFFFFF;
}	
.footer-social-icon .text{
	color:#7c90a2;
}
.footer-social-icon i{
	font-size:15px;
	line-height:30px;
	margin:0 3px;
	border-radius:50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	-o-border-radius: 50px;
	-ms-border-radius: 50px;
	background-color:#FFFFFF;
	color:#22303e;
	width:30px;
	text-align:center;
	height:30px;
}
.footer-social-icon i:hover, .team .social-icon i:hover{
	color:#FFFFFF;
}
/* =========================== COPYRIGHT SECTION ============================== */
.copyright{
	background-color:#1d2c39;
	padding:13px 0px;
	color:#FFFFFF;
}
.copyright h4{
	font-size:15px;
	font-weight:normal;
	color:#FFFFFF;
}
.copyright .copyright-social-icon i:hover, .copyright .copyright-social-icon i, .team .social-icon i, .team .social-icon i:hover, .contact .btn:hover, .contact .btn, .blog .btn, .pricing-more:hover, .pricing-more, .product-more:hover, .product-more, .blog-single .btn, .blog-single .btn:hover{
	transition: all 0.2s ease-in 0s;
	-moz-transition: all 0.2s ease-in 0s;
	-webkit-transition: all 0.2s ease-in 0s;
	-o-transition: all 0.2s ease-in 0s;
	-ms-transition: all 0.2s ease-in 0s;
}

.fa-twitter{
	background-color:#54c8f9;
}
.fa-facebook{
	background-color:#3f61a9;
}
.fa-linkedin{
	background-color:#2d95d2;
}
.fa-google-plus{
	background-color:#ef6565;
}
.fa-pinterest{
	background-color:#d94134;
}
.banner-s img{width:100%}