/* INDEX
----------------------------------------------------------------------------------------
01. General css
02. Navigation area css
03. Slider area css
04. Services area css
05. Features area css
06. Product area css
07. Testimonial area css
08. Trending item area css
09. Process Video area css
10. Contact us area css
11. Footer area css
12. Media Screens
-------------------------------------------------------------------------------------- */

/************************************/
/***** 	   01. General css		 ****/
/************************************/

body{
	font-size: 16px;
	font-family: 'Poppins', sans-serif;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6{
	margin-top:0;
	font-weight: 700;
}

figure{
	margin: 0;
}

img{
	max-width: 100%;
}

a{
	text-decoration: none;
}

a:hover{
	text-decoration: none;
	outline: 0;
}

a:focus{
	text-decoration: none;
	outline: 0;
}

.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	background: #01d3a2;
	z-index: 9999;
}

.container{
	max-width: 1160px;
}

.loader{
	display: inline-block;
	width: 30px;
	height: 30px;
	position: relative;
	border: 4px solid #Fff;
	top: calc(50% - 15px);
	animation: loader 2s infinite ease;
}

.loader-inner{
	vertical-align: top;
	display: inline-block;
	width: 100%;
	background-color: #fff;
	animation: loader-inner 2s infinite ease-in;
}

.btn-buynow{
	display: inline-block;
	font-size: 16px;
	font-weight: 400;
	padding: 12px 30px 10px;
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	background: #1b203e;
	box-shadow: 5px 5px #01d3a2;
	transition: all 0.3s;
}

.btn-buynow:hover{
	color: #fff;
	background: #323858;
}

/************************************/
/***** 02. Navigation area css  *****/
/************************************/

.navbar-brand{
	padding-top: 0;
	padding-bottom: 0;
}

.navbar-fixed-top .navbar-collapse{
	max-height: 100%;
}

nav.navbar.main-menu{
	padding-top: 20px;
	padding-bottom: 20px;
	background: none;
	border-bottom: none;
	transition: all 0.3s ease-in-out;
}

nav.navbar.main-menu.sticky-header{
	background: rgba(255,255,255,0.8);
	padding-top: 10px;
	padding-bottom: 10px;
}

.attr-nav ul{
	list-style: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
}

.offcanvas-menu.offcanvas{
	width: 280px;
	background: #01d3a2;
}

.offcanvas-menu .nav-menu ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.offcanvas-menu .nav-menu ul li{
	padding: 8px 15px;
	border-bottom: 1px dashed rgba(255,255,255,0.2);
}

.offcanvas-menu .nav-menu ul li a{
	color: #fff;
	font-size: 16px !important;
	text-transform: none;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	letter-spacing: 0.04em;
}

.offcanvas-menu .nav-menu ul li a:hover{
	color: #162441;
}

.offcanvas-menu .close-side{
	color: #fff;
	padding: 15px;
	text-align: right;
}

.offcanvas-menu .close-side:hover{
	color: #162441;
}


/************************************/
/*****   03. Slider area css    *****/
/************************************/

.banner{
	position: relative;
	top: 0px;
	left: 0;
	width: 100%;
	background: #fff;
	padding: 160px 0 100px;
}

.banner:before{
	content: '';
	display: block;
	width: 1000px;
	height: 1000px;
	position: absolute;
	bottom: 0;
	left: -200px;
	background: #f2f6f9;
	border-radius: 50%;
}

.banner .row{
	position: relative;
	z-index: 1;
}

.header-content{
	padding-top: 50px;
}

.header-content h2{
	font-size: 76px;
	color: #162441;
	text-shadow: 3px 3px 0px rgba(1, 211, 162, 1);
	margin-bottom: 0.5em;
}

.header-content p{
	font-size: 14px;
	color: #162441;
	line-height: 1.8em;
	border-left: 1px solid #162441;
	padding-left: 30px;
}

.header-content .btn-buynow{
	margin-top:30px;
}

/**************************************/
/*****   04. Services area css    *****/
/**************************************/

.services{
	padding: 80px 0;
}

.section-title{
	text-align: center;
	position: relative;
	margin-bottom: 60px;
}

.section-title:before{
	content: '';
	display: block;
	width: 1px;
	height: 70px;
	background: #2b3050;
	position: absolute;
	top: -80px;
	left: 50%;
}

.section-title p{
	text-transform: uppercase;
	color: #01d3a2;
	letter-spacing: 0.18em;
}

.section-title h2{
	font-size: 30px;
	color: #1b203e;
	line-height: 1.4em;
}
	
.services .section-title{
	text-align: left;
}

.services .section-title:before{
	left: 90px;
}

.service-single .icon-box{
	font-size: 80px;
	color: #1b203e;
	text-shadow: 2px 2px 0px rgba(1, 211, 162, 1);
	margin-bottom: 10px;
}

.service-single h3{
	font-size: 22px;
	color: #1b203e;
	font-weight: 600;
	margin-bottom: 20px;
}

.service-single p{
	font-size: 14px;
	color: #979797;
	line-height: 1.8em;
}

/**************************************/
/*****   05. Features area css    *****/
/**************************************/

.features{
	padding: 80px 0;
	background: #f2f6f9;
}

.add {
    background: #333;
    padding: 10%;
    height: 300px;
}

.nav-sidebar {
    width: 100%;
	text-align: center;
}

.nav-sidebar a{
	padding: 10px 15px;
	display: block;
    -webkit-transition: all 0.08s linear;
    -moz-transition: all 0.08s linear;
    -o-transition: all 0.08s linear;
    transition: all 0.08s linear;
}

.nav-sidebar a img{
	background: #fff;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0px 0px 30.72px 1.28px rgba(0, 0, 0, 0.13);
	transition: all 0.3s ease-in-out;
}

.nav-sidebar a:focus,
.nav-sidebar a:hover{
	background: none !important;
}

.nav-sidebar li a.active img{
	border: 2px solid #01d3a2;
	box-shadow: none;
}

.nav-sidebar .active a {
    cursor: default;
    background-color: transparent;
}

.nav-sidebar .text-overflow a,
.nav-sidebar .text-overflow .media-body {
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.btn-blog {
    color: #ffffff;
    background-color: #E50000;
    border-color: #E50000;
    border-radius: 0;
    margin-bottom: 10px
}

.margin10 {
    margin-bottom: 10px;
    margin-right: 10px;
}

.container .text-style {
    text-align: justify;
    line-height: 23px;
    margin: 0 13px 0 0;
    font-size: 19px;
}

.bag-feature p{
	padding: 4px 0;
	color: #1b203e;
	margin: 26% 0;
}

.bag-feature-right p{
	text-align: right;
	padding-right: 50px;
	background: url(../images/bag-feature.png) no-repeat right center;
}

.bag-feature-right p:nth-of-type(2){
	margin-right: 30px;
}

.bag-feature-left p{
	text-align: left;
	padding-left: 50px;
	background: url(../images/bag-feature.png) no-repeat left center;
}

.bag-feature-left p:nth-of-type(2){
	margin-left: 30px;
}

.bag-feature-image{
	padding-top: 10px;
}

/**************************************/
/*****   06. Product area css     *****/
/**************************************/

.products{
	padding: 80px 0;
}

.product-single{
	position:relative;
}

.product-left{
	text-align: right;
	margin-bottom: 30px;
}

.product-right{
	text-align: left;
	margin-top: 30px;
}

.product-single figure{
	max-width: 360px;
	display: inline-block;
}

.product-single h3{
	position: absolute;
	bottom: 20px;
	padding: 14px 20px;
	color: #fff;
	font-size: 24px;
	font-weight: 400;
	background: #1b203e;
	max-width: 60%;
}

.product-single h3 a{
	color: #fff;
}

.product-left h3{
	left: 0;
}

.product-right h3{
	right: 0;
}

/******************************************/
/*****   07. Testimonial area css     *****/
/******************************************/

.testimonials{
	background: url(../images/testimonial-bg.jpg) no-repeat top center;
	background-size: cover;
	padding: 80px 0;
}

.testimonial-single p{
	color: #fff;
	font-size: 30px;
	font-weight: 700;
}

.testimonial-single h3{
	color: #01d3a2;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.04em;
	margin-top: 2em;
	text-transform: uppercase;
}

.testimonial-pagination{
	text-align: center;
	margin-top: 30px;
}

.testimonial-pagination .swiper-pagination-bullet{
	width: 14px;
	height: 14px;
	background: #fff;
	opacity: 1;
}

.testimonial-pagination .swiper-pagination-bullet-active{
	background: #01d3a2;
}

/******************************************/
/*****   08. Trending item area css   *****/
/******************************************/

.trending-item{
	padding: 80px 0;
}

.trending-item .section-title{
	text-align: left;
	margin-bottom: 40px;
}

.trending-item .section-title:before{
	left: 90px;
}

.trending-item-info p{
	color: #979797;
	font-size: 14px;
	line-height: 1.8em;
	margin-bottom: 1.8em;
}

.trending-item-info .btn-buynow{
	margin-top: 20px;
}

.trending-image{
	text-align: center;
}

/******************************************/
/*****   09. Process Video area css   *****/
/******************************************/

.process-video{
	padding: 80px 0 14%;
	background: #01d3a2 url(../images/footer-bg.png) no-repeat bottom center;
	background-size: 100% auto;
}

.process-video-btn img{
	display: inline-block;
	vertical-align: middle;
	margin-right: 20px;
}

.process-video-btn p{
	display: inline-block;
	vertical-align: middle;
	color: #fff;
	font-size: 20px;
	margin-bottom: 0;
}

.process-video-btn p span{
	display: block;
	font-size: 16px;
}

.process-video-entry{
	padding-top: 10px;
}

.process-video-entry h3{
	font-size: 30px;
	color: #1b203e;
}

.process-video-entry p{
	font-size: 30px;
	color: #fff;
	font-weight: 700;
}

/***************************************/
/*****   10. Contact us area css   *****/
/***************************************/

.contact{
	background: #1b203e;
	padding: 80px 0;
}

.contact .section-title:before{
	background: #fff;
}
	
.contact .section-title h2{
	color: #fff;
}

.contact-form .form-control {
    background: none;
	border-radius: 0;
    box-shadow: none;
	font-size: 16px;
	color: #fff;
    height: auto;
    padding: 10px 0;
    border: none;
    border-bottom: 1px solid #fff;
    resize: none;
}

.contact-form .form-control:focus,
.contact-form .form-control:hover{
	box-shadow: none;
	outline: 0;
}

.contact-form .btn-contact{
	border: 1px solid #1cd9b9;
	display: inline-block;
    font-size: 16px;
    font-weight: 400;
    padding: 14px 40px 12px;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    background: #1b203e;
    box-shadow: 5px 5px #01d3a2;
	margin-top: 30px;
    transition: all 0.3s;
}

.contact-form .btn-contact:focus,
.contact-form .btn-contact:hover{
	outline: 0;
	background: #01d3a2;
	box-shadow: 5px 5px #fff;
}

.with-errors ul{
	padding: 0;
	margin: 0;
	color: #a94442;
}

/***********************************/
/*****   11. Footer area css   *****/
/***********************************/

footer{
	background: #1b203e;
	padding: 80px 0 80px;
}

.site-info p{
	color: #acadb1;
	font-size: 14px;
	margin-bottom: 0;
	line-height: 1.5em;
}

.footer-social h2,
.footer-info h2{
	color: #01d3a2;
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 20px;
}

.footer-info p{
	color: #acadb1;
	font-size: 14px;
	line-height: 1.5em;
	margin-bottom: 0;
}

.footer-social a{
	display: inline-block;
	margin-right: 10px;
	color: #acadb1;
}

.footer-social a:hover{
	color: #01d3a2;
}

/************************************/
/*****    12. Media Screens     *****/
/************************************/

@media only screen and (max-width: 1200px){
	.header-content{
		padding-top: 60px;
	}
	
	.process-video-btn{
		text-align: center;
	}
	
	.process-video-btn img{
		display: block;
		margin: 0 auto 20px;
	}
}

@media only screen and (max-width: 991px){
	
	.banner:before{
		display: none;
	}
	
	.banner{
		background: #f2f6f9;
	}
	
	.header-content{
		padding-top: 30px;
	}
	
	.header-content h2{
		font-size: 46px;
		text-shadow: 2px 2px 0px rgba(1, 211, 162, 1);
	}
	
	.nav-sidebar{
		margin-bottom: 30px;
	}
	
	.nav-sidebar ul{
		justify-content: center;
	}

	.nav-sidebar li{
		display: inline-block;
	}
	
	.bag-feature-image{
		padding-top: 30px;
	}
	
	.product-single figure img{
		max-width: 90%;
	}
	
	.product-single h3{
		font-size: 20px;
	}
}

/* Mobile Layout */
@media only screen and (max-width: 767px){
	.section-title{
		margin-bottom: 50px;
	}
	
	.section-title h2{
		font-size: 20px;
	}
	
	.section-title p{
		font-size: 14px;
	}
	
	.header-image{
		text-align: center;
		margin-bottom: 40px;
	}
	
	.header-content h2{
		font-size: 34px;
	}
	
	.header-content p{
		padding-left: 14px;
	}
	
	.section-title:before{
		height: 50px;
		top: -60px;
	}
	
	.banner{
		padding: 140px 0 60px;
	}
	
	.services,
	.features,
	.products,
	.testimonials,
	.trending-item,
	footer{
		padding: 60px 0;
	}
	
	.contact{
		padding: 60px 0 20px;
	}
	
	.process-video{
		padding: 60px 0 80px;
	}
	
	.service-single h3{
		font-size: 20px;
	}
	
	.nav-sidebar li{
		width: 30%;
	}

	.nav-sidebar li a{
		padding: 0 7px;
	}

	.nav-sidebar li a img{
		width: 100%;
	}
	
	.features .pull-left,
	.features .pull-right{
		float: none !important;
	}
	
	.bag-feature-left p,
	.bag-feature-right p{
		margin: 10px 0; 
		text-align: left;
		padding-left: 50px;
		padding-right: 0;
	}
	
	.bag-feature-left p br,
	.bag-feature-right p br{
		display: none;
	}
	
	.bag-feature-right p{
		background-position: left center;
	}
	
	.bag-feature-left p:nth-of-type(2),
	.bag-feature-right p:nth-of-type(2){
		margin-right: 0;
		margin-left: 0;
	}
	
	.bag-feature-image{
		text-align: center;
	}
	
	.bag-feature-image img{
		width: 80%;
	}
	
	.product-single{
		max-width: 340px;
		margin: 0 auto 60px;
	}
	
	.product-single h3{
		width: 90%;
		max-width: 90%;
		left: 5%;
		bottom: -24px;
		margin: 0;
		text-align: center;
	}
	
	.product-single figure img{
		max-width: 100%;
	}
	
	.testimonial-single p{
		font-size: 16px;
	}
	
	.testimonial-single h3{
		font-size: 14px;
	}
	
	.trending-image{
		margin-top: 40px;
	}
	
	.process-video-btn{
		margin-bottom: 20px;
	}
	
	.footer-social h2,
	.footer-info h2{
		margin-bottom: 10px;
	}
	
	.site-info,
	.footer-info{
		margin-bottom: 30px;
	}
}

/* Small Mobile Layout */

@media only screen and (max-width: 480px) {
	
	.process-video-entry{
		text-align: center;
	}
	
	.process-video-entry h3,
	.process-video-entry p{
		font-size: 22px;
	}
}