/*
Theme Name: SM Theme
Theme URI: http://shamweb.net
Author: Shamweb
Author URI: http://shamweb.net
Version: 1.0
Description: Welcome to chose my theme.
Tags: No tags available
License: Unlimited
License URI: http://www.fb.com/shamolsudakar
Text Domain: Default English(USA) and Bangla
=====================================
font-family: 'Roboto', sans-serif;
font-family: 'Oswald', sans-serif;
=====================================
*/
@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600|Roboto:300,400,500,700&display=swap');
body,h1,h2,h3,h4,ul,*{
	margin: 0;
	padding: 0;
}

body{
	font-family: 'Roboto', sans-serif;
}

a:link,a,a:focus{
	text-decoration: none;
	outline: none;
}
.w-full{
	width: 100%;
	box-sizing: border-box;
}

#contact-form {
	margin-top: 30px;
}
	#contact-form input,#contact-form textarea{
		box-shadow: none;
		border-radius: 0;
		margin-bottom: 15px;
	}
	#contact-form textarea{
		resize: vertical;
		min-height: 100px;
		margin-bottom: 5px;
	}
	.input-box{
		position: relative;
	}
	#contact-form label {
		position: absolute;
		top: -10px;
		left: 12px;
		background-color: #FFF;
		padding: 0 10px;
		font-weight: 300;
	}

/*************************
		TEMPLATE CSS
*************************/
header{
	background-color: #FFF;
}
	#area-header-top{
		padding: 20px 0;
	}
		.logo{
			width: 323px;
			height: 66px;
		}
			.logo > img{
				width: 100%;
				height: 100%;
			}
		.contact-top > ul{
			list-style: none;
			float: right;
			margin-top: 8px;
		}
			.contact-top > ul li{
				float: left;
				margin-left: 80px;
			}
			.contact-top > ul li:first-child{
				margin-left: 0;
			}
				.contact-top > ul li i{
					color: #005B9D;
					font-size: 18px;
				}
				.contact-top > ul li p{
					margin-bottom: 0;
					font-weight: 300;
					line-height: 16px;
				}
				.contact-top > ul li a{
					color: #333;
					font-weight: 500;
				}
				.contact-top > ul li a.button{
					color: #FFF;
					padding: 8px 40px;
					border-radius: 3px;
					margin-top: 16px;
					float: left;
				}
	#area-nav nav.menu{
		float: left;
		width: 100%;
		padding: 0 10px;
		background-color: #363434;
		/* border-top: 2px solid #13619B; */
	}

.button{
	position: relative;
	background-color: #005B9D;
	padding: 8px 15px;
	border: none;
	color: #FFF;
	border-bottom: 2px solid #0D4975;
	margin-bottom: 5px;
	border-radius: 3px;
	text-align: center;
}
	.button:active{
		top: 1px;
		border-bottom: 2px solid #005B9D;
	}
	.button:hover{
		background-color: #0874C2;
		border-bottom: 2px solid #13619B;
		color: #FFF;
	}
	.button:focus{
		color: #FFF;
	}
.clear-fix{
	clear: both;
}
#area-services{
	background-color: #FFF;
}
	#area-services .service-panel{
		background-color: #005898;
		position: relative;
		top: -80px;
		z-index: 100;
	}
		.service-img{
			position: relative;
		}
		.service-img::before{
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			content: "";
			z-index: 1;
			background-color: rgba(0, 88, 152,0.2);
		}
	.service-box{
		padding: 15px 30px 10px;
	}
		.service-box > ul{
			list-style: none;
		}
			.service-box > ul > li{
				margin-top: 50px;
			}
				.service-box > ul > li h2{
					position: relative;
					color: #FFF;
					padding-left: 63px;
					font-weight: 400;
					line-height: 23px;
					margin-bottom: 10px;
					font-size: 24px;
				}
					.service-box > ul > li .icon{
						width: 48px;
						height: 48px;
						position: absolute;
						left: 0;
						bottom: 0;
					}
						.service-box > ul > li .icon img{
							max-width: 100%;
							max-height: 100%;
						}
				.service-box > ul > li p{
					color: #ddd;
					font-weight: 300;
				}
#area-introduction{
	background-color: #FFF;
	padding-bottom: 60px;
}
	.introduction{
		text-align: center;
	}
		.introduction h2{
			font-family: 'Oswald', sans-serif;
			font-weight: 400;
			font-size: 24px;
			color: #000;
		}
		.introduction h3{
			font-weight: 500;
			font-size: 18px;
			color: #005B9D;
			margin: 10px 0 20px;
		}
		.introduction p{
			font-weight: 300;
			margin-bottom: 20px;
		}
#area-testimonial{
	position: relative;
	padding: 80px 0 80px;
	z-index: 1;
}
	#area-testimonial::before,#area-testimonial::after{
		position: absolute;
		content: "";
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: url(images/testimonial.jpg) no-repeat;
		background-size: cover;
		z-index: -1;
		
	}
	#area-testimonial::after{
		background: rgba(0, 91, 157,0.7);
		z-index: 2;
	}
		#area-testimonial .container{
			position: relative;
			z-index: 3;
		}
		#area-testimonial h2{
			color: #FFF;
			text-align: center;
			font-weight: 700;
			margin-bottom: 30px;
		}
		.testimoial-box{
			padding: 15px;
			border: 2px solid #FFF;
		}
			.testimonial-item{
				padding: 50px 80px 45px;
				background-color: rgba(0, 0, 0, 0.8);
			}
				.testimonial-item p{
					color: #ddd;
					text-align: center;					
				}
				.testimonial-item h3{
					color: #FFF;
					font-size: 18px;
					text-align: center;
					margin-top: 20px;
				}
		.owl-controls{
			position: absolute;			
			bottom: -72px;			
			margin: 0 auto;
			left: 0;
			right: 0;
		}
		.owl-theme .owl-controls .owl-page span{			
			background: #ddd;
			width: 25px;
			height: 7px;
		}
		.owl-theme .owl-controls .owl-page.active span{
			opacity: 1 !important;
			background: #FFF;
		}
#area-quote{
	background-color: #FFF;
	padding: 120px 0;
}
	.quote h3{
		font-style: italic;
		line-height: 38px;
	}
	#area-quote .button{
		padding-top: 12px;
		padding-bottom: 12px;
		font-size: 20px;
		margin-top: 40px;
	}

footer{
	background-color: #E9E9E9;
	border-top: 3px solid #005B9D;
	padding: 35px 0 0;
}
	#area-footertop{
		padding-bottom: 50px;
	}
		.footer-box{
			text-align: center;
		}
		.footer-box .footer-logo{
			margin-bottom: 20px;
		}
		.footer-box address{
			margin-bottom: 40px;
		}
			.footer-box address p{
				margin-top: 5px;
			}
		.social-media{
			display: table;
			margin: 0 auto;
		}
			.social-media > ul{
				list-style: none;			
			}
			.social-media > ul li{
				float: left;
				margin-right: 10px;
				width: 45px;
				height: 45px;
				line-height: 45px;				
			}
			.social-media > ul li a{
				float: left;
				width: 100%;
				height: 100%;
				padding: 0;
				border-radius: 100%;
			}
			.social-media > ul li:last-child{
				margin-right: 0;
			}			
			.social-media > ul li.linkedin:hover a.button{
				background-color: #0080AB;
				border-bottom-color: #037196;
			}
			.social-media > ul li.youtube:hover a.button{
				background-color: #C8232A;
				border-bottom-color: #9c141b;
			}
				.social-media > ul li a{
					font-size: 20px;
				}

	#area-developer .developer{
		padding: 20px 0;
		border-top: 1px solid #b4b4b4;
	}
		.developer p{
			margin: 0;
			font-size: 13px;
			font-weight: 300;
		}
		.developer p a,.developer strong{
			font-weight: 500;
			color: #333;
		}
		.developer p a:hover{
			color: #005B9D;
		}
		.developer p.dev{
			text-align: right;
		}
#area-banner{
	position: relative;
	z-index: 1;
}
#area-banner::before{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: "";
	z-index: 5;
	background-color: rgba(0,0,0,0.5);
}
.child::before{
	background: linear-gradient(rgba(255,255,255,0.3), rgba(0, 91, 157,.8));
}		
	.example-animation {
		color: #FFF;
		font-size: 60px;
	}
	[data-pos]{
		z-index: 6;
	}
	.sliderText,.sliderCap{
		font-size: 32px;
		font-weight: 300;
		text-transform: uppercase;
	}
	.sliderCap span{
		font-size: 46px;
		font-weight: 600;
	}
.search{
	position: relative;
}
	.search span{
		display: none;
	}
		.menuSearch {
			position: absolute;
			right: 40px;
			top: 10px;
			display: none;
		}
		.menuSearch input{
			width: 200px;
			height: 30px;
			border: none;
			padding: 5px 15px;
		}
.breadcmb-content{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 99;
	margin-bottom: 20px;
}

	.breadcmb ul{
		list-style: none;
	}
		.breadcmb ul li{
			float: left;
			padding-right: 10px;
			color: #ddd;
		}
			.breadcmb ul li a{
				color: #06e5ff;
				
			}
	.breadcmb h2{
		color: #FFF;
		font-size: 22px;
		position: relative;
		padding-bottom: 6px;
		margin-bottom: 5px;
	}
	.breadcmb h2::before{
		position: absolute;
		content: "";
		left: 0;
		bottom: 0;
		width: 100px;	
		border-bottom: 1px dotted #ddd;
	}
#area-content{
	padding: 30px 0;
}
	#area-content img{
		max-width: 100%;
	}
	#area-content article h2{
		position: relative;
		font-size: 22px;
		padding-bottom: 6px;
		margin-bottom: 5px;
		font-weight: 400;
		color: #000;
	}
	#area-content article h2::before{
		position: absolute;
		content: "";
		left: 0;
		bottom: 0;
		width: 100px;	
		border-bottom: 1px dotted #acacac;
	}

aside{
	margin-top: 6px;
	margin-bottom: 20px;
}
	aside h2{
		font-size: 18px;
		font-weight: 400;
		padding: 5px 0;
		color: #000;
		border-top: 4px double #ddd;
		border-bottom: 4px double #ddd;
	}
	aside .widget{
		margin-top: 10px;
	}
	article ul,ul.bullet{
		list-style-position: inside;
		list-style-type: none;
		margin-left: 30px;
		margin-top: 4px;
	}
	article ul li,ul.bullet li{
		position: relative;
	}
	article ul li::before,ul.bullet li::before{
		content: "";
		position: absolute;
		left: -14px;
		top: 7px;
		width: 7px;
		height: 7px;
		background-color: #1A9BCE;
	}
	.address i{
		width: 35px;
		height: 35px;
		line-height: 35px;
		text-align: center;
		font-size: 18px;
		color: #FFF;
		background-color: #005B9D;
		margin-right: 10px;
		border-radius: 100%;
		box-shadow: 0 1px 2px 1px rgba(98, 98, 98, 0.2);
	}
.admin,.admin-about{
	width: 320px;
	border: 1px dashed #c9c9c9;
	padding: 5px;
	margin-bottom: 10px;
}
.admin-about{
	width: 250px;
	float: left;
	margin-right: 15px;
}
.testimonial-panel{
	border: 1px dashed #c9c9c9;
	padding: 15px;
	margin-bottom: 15px;
}
img{
    max-width: 100%;
}



/*************************
		GLOBAL CSS
*************************/

.box-shadow{
	box-shadow: 0 1px 6px 1px rgba(98, 98, 98, 0.3);
}

#area-content article h2,aside h2,
.text-shadow,.introduction h2,.introduction h3,.footer-box strong,.breadcmb h2{
	-webkit-text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	-moz-text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
.button{
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

@media(max-width:667px){

	#area-header-top{
		display: none;
	}
	#area-nav{
		background-color: #363434;
		box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.2) !important;
	}
	#area-services .service-panel {
		top: -20px;
	}
	.sliderText,.sliderCap{
		font-size: 13px;
		font-weight: 300;
		text-transform: uppercase;
	}
	.sliderCap span{
		font-size: 14px;
		font-weight: 600;
		top: 26% !important;
		margin-left: -2px;		
	}
	.sliderCap{
		margin-left: 2px;
		top: 29%;
	}
	.sliderText{
		top: 20% !important;		
	}
	.service-box > ul > li h2 {
		line-height: 11px;
		font-size: 12px;
		margin-bottom: 25px;
	}
	.service-box > ul > li .icon {
		bottom: -15px;
	}
	#area-introduction {
		padding-bottom: 0;
	}
	#area-testimonial {
		padding: 40px 0 80px;
	}
	.testimonial-item {
		padding: 15px;
	}
	.testimonial-item h3 {
		font-size: 13px;
	}
	.introduction h2 {
		font-size: 18px;
	}
	.introduction h3 {
		font-size: 16px;
	}
	.h3, h3 {
		font-size: 16px;
		line-height: 24px !important;
		font-weight: 600;
	}
	#area-quote {
		padding: 40px 0;
	}
	.footer-box address p {
		font-size: 12px;
	}
	.footer-box address {
		margin-bottom: 15px;
	}
	.developer p,.developer p.dev {
		text-align: center !important;
	}
	.search span{
		display: block;
		float: left;
	}
	.search i {
		float: left;
		margin-right: 6px;
		position: relative;
		top: 2px;
	}
	.menuSearch {
		left: 0;
		top: 31px;
		right: auto;
	}
	.menuSearch input {
		width: 100%;
	}
}