/*-----------------------------------------------------------------------------------

 Theme Name: Nunito
 Theme URI: http://
 Description: The Multi-Purpose Onepage Template
 Author: ui-themez
 Author URI: http://themeforest.net/user/ui-themez
 Version: 1.0

 Main Color   : #7146f3
 Title Font   : Poppins
 p Font       : Muli

-----------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------

 == Table Of Content

	01 Basics
	02 Buttons
	03 Navbar
	04 Header
	05 Hero
	06 Video
	07 Services
	08 Featrues
	09 Works
	10 Numbers
	11 Price
	12 Team
	13 Testimonials
	14 Blog
	15 Contact
	16 Footer
	17 Responsive
 

---------------------------------------------------------------- */

$main-color: #7146f3;
$mobile-xs-screen: 480px;
$tablet-sm-screen: 767px;
$desk-md-screen: 991px;

/* ----------------------------------------------------------------
     [ 01 Start Basics ]
-----------------------------------------------------------------*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none;
	list-style: none;
	word-wrap: break-word;

}

body {
	color: #23003b;
	line-height: 1.3;
	font-weight: 400;
	font-size: 14px;
	font-family: 'Poppins', sans-serif;
	overflow-x: hidden !important;
}

h4,h5{
	font-family: 'Poiret One', cursive;
	letter-spacing: 1px;
}

p {
	font-family: 'Muli', sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: #999;
	line-height: 1.8;
	margin: 0;
}

img {
	width: 100%;
	height: auto;
}

span, a, a:hover {
	display: inline-block;
	text-decoration: none;
	color: inherit;
}

.section-padding{
	padding: 120px 0;
}

.section-head{
	margin-bottom: 80px;
	padding-bottom: 20px;
	position: relative;

	&:after{
		content: '';
		width: 120px;
		height: 1px;
		position: absolute;
		bottom: 0;
		left: calc(50% - 60px);
		background: $main-color;
		background: linear-gradient(to right, transparent, $main-color, transparent);
	}

	h4{
		font-size: 30px;
	}
}

.bg-gray{
	background: #fafafa;
	background-image: url(../img/pattern.png);
	background-repeat: repeat;
}

.o-hidden {
	overflow: hidden;
}

.position-re {
	position: relative;
}

.full-width{
	width: 100% !important;
}

.lg-line-height{
	line-height: 1.5;
}

.custom-text{
	font-size: 16px;
	font-weight: 500;
	word-spacing: 2px;
	line-height: 1.7;
	color: #8e8e8e;
}

.bg-img{
	background-size: cover;
	background-repeat: no-repeat;
}

.bg-fixed{
	background-attachment: fixed;
}

.valign{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.v-middle {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    -webkit-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    -o-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}

// Carousel Setting

.owl-theme .owl-nav.disabled+.owl-dots{
	margin-top: 15px;
	line-height: .7;
}

.owl-theme .owl-dots .owl-dot span{
	width: 8px;
	height: 8px;
	margin: 0 7px;
	border-radius: 50%;
	background: #ddd;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span{
	background: $main-color;
}

.owl-theme .owl-nav [class*=owl-]{
	position: absolute;
	top: 40%;
	background: transparent;
	color: #222;
	width: 35px;
	height: 35px;
	line-height: 30px;
	border-radius: 50%;
	border: 1px solid rgba(100,100,100,.1);
	opacity: 0;
	transition: all .5s;

	&:hover{
		background: $main-color;
		color: #fff;
	}
}

.bg-img .owl-theme .owl-nav [class*=owl-]{
	color: #fff;
}

.owl-carousel .owl-nav .owl-next{
	right: 0;
}

.owl-carousel .owl-nav .owl-prev{
	left: 0;
}

.owl-theme{

	&:hover{

		.owl-nav [class*=owl-]{
			opacity: 1;
		}
	}
}

/* ----------------------------------------------------------------
     [ End Basics ]
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
     [ 02 Start Buttons ]
-----------------------------------------------------------------*/

.butn{
	padding: 12px 30px;
	background: #fff;
	border: 1px solid transparent;
	position: relative;
	z-index: 3;
	margin-left: 10px;
	margin-right: 10px;
	box-shadow: 0px 10px 30px rgba(0,0,0,.1);
	border-radius: 40px;
	transition: all .4s;
	cursor: pointer;
	outline: none !important;
	overflow: hidden;

	span{
		position: relative;
		z-index: 2;
		transition-delay: 0s;
	}

	&:before, &:after{
		content: '';
		width: 0;
		height: 100%;
		background: #fff;
		position: absolute;
		left: 0;
		top: 0;
		transition: width 0.4s;
		z-index: 1;
		opacity: .4;
	}

	&:after{
		transition-delay: 0s;
		background: #fff;
		opacity: 1;
	}

	&:hover{

		&:before, &:after{
			width: 100%;
		}

		&:after{
			transition-delay: .2s;
		}

		span{
			transition-delay: .2s;
		}
	}
}

.butn-bg{
	background: $main-color;
	background: linear-gradient(to right, #52a4de, $main-color);
	border-color: transparent;
	color: #fff;
	box-shadow: 0px 10px 30px rgba(113,70,243,.4);

	&:hover{

		span{
			color: $main-color;
		}
	}
}

.butn-light{
	background: #fff;

	&:before, &:after{
		background: $main-color;
	}

	&:hover{

		span{
			color: #fff;
		}
	}

	span{
		color: $main-color;
	}
}

/* ----------------------------------------------------------------
     [ End Buttons ]
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
     [ 03 Start Navbar ]
-----------------------------------------------------------------*/

.navbar{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	background: transparent;
	z-index: 9;
	min-height: 80px;

	.icon-bar{
		color: #fff;
	}

	.navbar-nav{
  
		.nav-link{
			font-size: 13px;
			font-weight: 500;
			color: #eee;
			letter-spacing: .5px;
			margin: 15px 5px;
			position: relative;
			transition: all .5s;

			&:after{
				content: '';
				width: 15px;
				height: 2px;
				background: $main-color;
				position: absolute;
				bottom: 0px;
				left: 10px;
				opacity: 0;
			}
		}

		.active{
			color: $main-color !important;

			&:after{
				opacity: 1;
			}
		}
	}
}

.nav-scroll{
	background: #fff;
	box-shadow: 0px 10px 40px rgba(0,0,0,.05);
	padding: 0;
	position: fixed;
	top: -100px;
	left: 0;
	width: 100%;
	transition: transform .5s;
	transform: translateY(100px);

	.icon-bar{
		color: #222;
	}

	.navbar-nav{

		.nav-link{
			color: #222;
		}

		.logo{
			padding: 15px 0;
			color: #111;
		}
	}
}

.logo{
	width: 120px;
}

/* ----------------------------------------------------------------
     [ End Navbar ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
     [ 04 Start Header ]
-----------------------------------------------------------------*/

.header{
	min-height: 100vh;
	overflow: hidden;

	.caption{

		.o-hidden{
			display: inline-block;
		}

		h4{
			font-weight: 200;
			letter-spacing: 4px;
			animation-delay: .2s;
		}

		h1{
			margin: 10px 0;
			font-size: 60px;
			font-weight: 500;
			font-family: inherit;
			word-spacing: 2px;
			letter-spacing: 2px;
			animation-delay: .6s;
		}

		p{
			font-size: 15px;
			font-weight: 300;
			color: #eee;
			letter-spacing: 1px;
			word-spacing: 2px;
			animation-delay: 1s;

			span{
				letter-spacing: 5px;
				text-transform: uppercase;
				margin: 0 5px;
				padding-right: 14px;
				position: relative;

				&:last-child{
					padding: 0;

					&:after{
						display: none;
					}
				}

				&:after{
					content: '';
					width: 7px;
					height: 7px;
					border-radius: 50%;
					background: $main-color;
					position: absolute;
					top: 10px;
					right: 0;
					opacity: .5;
				}
			}
		}

		.butn{
			animation-delay: 1.2s;
		}
	}
}

/* ----------------------------------------------------------------
     [ End Header ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
     [ 05 Start Hero ]
-----------------------------------------------------------------*/

.hero{

	&.smp{

		.item{
			padding: 0;
			box-shadow: none;
			border-radius: 0;

			&:hover{

				.icon{
					background: rgba(113,70,243,.02);
				}

				h6{
					color: inherit;
				}

				p{
					color: #999;
				}
			}
		}
	}

	.intro{

		h5{
			color: $main-color;
			margin-bottom: 10px;
		}

		p{
			margin-top: 15px;
			position: relative;
			padding-bottom: 30px;

			&:after{
				content: '';
				width: 120px;
				height: 1px;
				position: absolute;
				bottom: 0;
				left: calc(50% - 60px);
				background: $main-color;
				background: linear-gradient(to right, transparent, $main-color, transparent);
			}
		}
	}

	.item{
		padding: 60px 10px;
		background: #fff;
		box-shadow: 0px 10px 44px -5px rgba(0,0,0,0.1);
		border-radius: 5px;
		position: relative;

		&:hover{

			.img-overlay{
				transform: translateY(0px);
				opacity: 1;
			}

			.icon{
				background: rgba(255,255,255,.05);
			}

			h6{
				color: #fff;
			}

			p{
				color: #aaa;
			}
		}

		.img-overlay{
			position: absolute;
			top: -5px;
			left: -5px;
			right: -5px;
			bottom: -5px;
			transform: translateY(10px);
			border-radius: 5px;
			overflow: hidden;
			opacity: 0;
			transition: all .5s;
		}

		.icon{
			color: $main-color;
			font-size: 35px;
			width: 80px;
			height: 80px;
			line-height: 80px;
			border-radius: 50%;
			background: rgba(113,70,243,.02);
			margin-bottom: 30px;
			position: relative;
			z-index: 2;
		}

		h6{
			margin-bottom: 15px;
			font-size: 16px;
			position: relative;
			z-index: 2;
		}

		p{
			font-size: 14px;
			position: relative;
			z-index: 2;
		}
	}
}

/* ----------------------------------------------------------------
     [ End Hero ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
     [ 06 Video ]
-----------------------------------------------------------------*/

.video{

	.content{

		h5{
			color: $main-color;
			font-size: 18px;
			margin-bottom: 10px;
		}

		h3{
			font-size: 28px;
			margin-bottom: 15px;
		}

		li{
			display: inline-block;
			width: 48%;
			margin-top: 15px;
			font-weight: 500;

			.icon{
				color: $main-color;
				padding-right: 10px;
			}
		}

		.butn{
			margin: 30px 0 0;
		}
	}

	.image{
		position: relative;

		&:after{
			content: '';
			width: 0;
			height: 0;
			border-top: 200px solid $main-color;
			border-left: 200px solid transparent;
			position: absolute;
			right: -15px;
			top: -15px;
			z-index: -1;
		}

		img{
			box-shadow: 0px 10px 60px rgba(0,0,0,.1);
			border-radius: 5px;
		}

		.icon{
			width: 80px;
			height: 80px;
			line-height: 80px;
			border-radius: 50%;
			position: absolute;
			top: calc(50% - 40px);
			left: calc(50% - 40px);
			text-align: center;
			background: $main-color;
			font-size: 35px;
			color: #fff;

			span{

				&:before{
					text-shadow: 3px 3px 3px rgba(0,0,0,.3);
				}
			}
		}
	}

	.skills{

		.skill-item{
			margin-top: 30px;

			h5{
				font-size: 16px;
				margin-bottom: 10px;
			}
		}

		.skill-progress{
			width: 100%;
			height: 7px;
			background: #f7f7f7;
			border-radius: 30px;
			position: relative;
			box-shadow: 0px -10px 30px rgba(0, 0, 0, 0.08) inset;

			.progres{
				position: absolute;
				top: 0;
				left: 0;
				background: $main-color;
				background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,
					transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,
					rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    			background-size: 2rem 2rem;
				width: 0;
				height: 100%;
				border-radius: 30px;
				transition: all 1s;
				position: relative;

				&:after{
					content: attr(data-value);
					position: absolute;
					top: -20px;
					right: 0;
					font-size: 11px;
				}
			}
		}
	}
}

.video-bg{

	.icon{
		font-size: 30px;
		width: 80px;
		height: 80px;
		line-height: 80px;
		border-radius: 50%;
		border: 1px solid #eee;
		margin-bottom: 30px;
	}

	h3{
		font-size: 30px;
		margin-bottom: 15px;
	}
}

/* ----------------------------------------------------------------
     [ End Video ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
     [ 07 Start Services ]
-----------------------------------------------------------------*/

.services{

	.owl-carousel .owl-stage-outer{
		padding: 10px 0 0;
	}

	.tabs-icon{

		.item{
			padding: 30px 5px;
			background: #fff;
			border-right: 1px solid #f7f7f7;
			cursor: pointer;

			.icon{
				font-size: 35px;
				margin-bottom: 15px;
				color: $main-color;
			}

			h6{
				font-size: 16px;
				font-weight: 300;
			}
		}

		.owl-item.actived .item, .item.active{
			color: #fff;
			position: relative;
			background: $main-color;
			padding: 40px 5px;
			top: -10px;

			.icon{
				color: #fff;
			}
		}
	}

	.services-content{

		.cont{
			display: none;

			.services-info{
				text-align: right;
			}

			h5{
				font-size: 18px;
				color: $main-color;
				margin-bottom: 10px;
			}

			h3{
				line-height: 1.4;
			}
		}

		.active{
			display: block;
		}
	}

	.owl-theme .owl-nav [class*=owl-]{
		top: 35%;
		font-size: 20px;
	}

	.owl-carousel .owl-nav .owl-next{
		right: -50px;
	}

	.owl-carousel .owl-nav .owl-prev{
		left: -50px;
	}
}

/* ----------------------------------------------------------------
     [ End Services ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
     [ 08 Start Featrues ]
-----------------------------------------------------------------*/

.featrues{

	&.no-img{

		.bord{

			&:before{
				background: #777;
				background: linear-gradient(to top, transparent, #777, transparent);
			}

			&:after{
				background: #777;
				background: linear-gradient(to top, transparent, #777, transparent);
			}
		}

		hr{
			background: #777;
			background: linear-gradient(to right, transparent, #777, transparent,
			transparent, #777, transparent,
			transparent, #777, transparent);
		}
	}

	&.feat2{

		.item{
			text-align: left;
			border: 1px solid rgba(200,200,200,.2);
			padding: 40px 30px;
			border-radius: 5px;

			.icon{
				margin-bottom: 0;
				float: left;
			}

			h6,p{
				margin-left: 70px;
			}
		}
	}

	.bord{
		position: relative;

		&:before{
			content: '';
			height: 100%;
			width: 1px;
			position: absolute;
			left: 0;
			top: 0;
			background: #fff;
			background: linear-gradient(to top, transparent, #fff, transparent);
			opacity: .3;
		}

		&:after{
			content: '';
			height: 100%;
			width: 1px;
			position: absolute;
			right: 0;
			top: 0;
			background: #fff;
			background: linear-gradient(to top, transparent, #fff, transparent);
			opacity: .3;
		}
	}

	hr{
		border: 0;
		height: 1px;
		width: 100%;
		background: #fff;
		background: linear-gradient(to right, transparent, #fff, transparent,
		transparent, #fff, transparent,
		transparent, #fff, transparent);
		opacity: .3;
	}

	.item{
		text-align: center;
		padding: 20px 10px;

		.icon{
			font-weight: 100;
			font-size: 35px;
			margin-bottom: 30px;
			color: $main-color;
		}

		h6{
			margin-bottom: 15px;
			font-size: 17px;
			font-weight: 500;
		}
	}
}

/* ----------------------------------------------------------------
     [ End Featrues ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
     [ 09 Start Works ]
-----------------------------------------------------------------*/

.works{

	.filtering{

		span{
			font-weight: 500;
			font-size: 13px;
			letter-spacing: 1px;
			text-transform: uppercase;
			padding: 8px 20px;
			border-radius: 30px;
			cursor: pointer;
		}

		.active{
			background: $main-color;
			background: linear-gradient(to right, $main-color , #6976c5);
			box-shadow: 0px 8px 30px rgba(0,0,0,.2);
			color: #fff;
		}
	}

	.item-img{
		position: relative;
		margin-top: 30px;
		overflow: hidden;

		&:hover{

			.item-img-overlay{
				top: 0;
				opacity: 1;
			}
		}
	}

	.item-img-overlay{
		position: absolute;
		top: 110%;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,.8);
		color: #fff;
		opacity: 0;
		transition: all .5s;

		.icon{
			font-size: 20px;
			width: 40px;
			height: 40px;
			line-height: 40px;
			border-radius: 50%;
			background: rgba(255,255,255,.1);
			margin: 15px 5px 0;
			transition: all .5s;

			&:hover{
				background: $main-color;
				color: #fff;
			}

			&:before{
				line-height: 2;
			}
		}

		p{
			color: $main-color;
			font-weight: 400;
		}

		h6{
			font-weight: 500;
			font-size: 17px;
			letter-spacing: 1px;
			margin-top: 5px;
		}
	}
}

/* ----------------------------------------------------------------
     [ End Works ]
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
     [ 10 Start Numbers ]
-----------------------------------------------------------------*/

.numbers{
	padding: 80px 0;

	div[class*='col-']{
		position: relative;

		&:after{
			content: '';
			height: 120px;
			width: 1px;
			position: absolute;
			right: 0;
			top: calc(50% - 60px);
			background: #fff;
			background: linear-gradient(to top, transparent, #fff, transparent);
			opacity: .3;
		}

		&:last-child{

			&:after{
				display: none;
			}
		}
	}

	.item{

		.icon{
			color: $main-color;
			font-size: 25px;
			margin-bottom: 25px;
		}

		h4{
			margin-bottom: 25px;
		}

		h6{
			color: #999;
			font-size: 16px;
			font-weight: 400;
			letter-spacing: 1px;
		}
	}
}

/* ----------------------------------------------------------------
     [ End Numbers ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
     [ 11 Start Price ]
-----------------------------------------------------------------*/

.price{
	padding-bottom: 180px;

	.item{
		position: relative;
		height: 100%;
		z-index: 3;
		padding-right: 15px;
		padding-left: 15px;
		text-align: center;

		.cont{
			position: relative;
			background: #fff;
			padding: 60px 40px;
			border-radius: 5px;
			box-shadow: 0px 10px 40px rgba(255,255,255,.4);
			top: -15px;
			margin-top: 15px;
		}

		.type{

			h6{
				color: #333;
				font-size: 15px;
				letter-spacing: 2px;
				text-transform: uppercase;
				margin-bottom: 15px;
			}
		}

		.price{
			padding-bottom: 30px;
			border-bottom: 1px solid #eee;
			
			h4{
				font-size: 50px;
				margin-bottom: 15px;
				font-family: inherit;
				font-weight: 100;
			}

			span{
				font-size: 14px;
			}

			p{
				text-transform: uppercase;
				letter-spacing: 4px;
				font-size: 12px;
			}
		}

		.feat{
			padding: 30px 0 0;

			ul{
				margin-bottom: 0;
			}

			li{
				margin-bottom: 10px;
				color: #777;

				&:last-child{
					margin: 0;
				}
			}
		}

		.order{
			background: #010121;
			position: absolute;
			top: 0;
			left: 0;
			bottom: -60px;
			right: 0;
			border-radius: 5px;
			z-index: -1;

			.butn{
				position: absolute;
				bottom: 15px;
				left: calc(50% - 80px);
			}
		}
	}

	.center{

		.order{
			background: $main-color;

			.butn{
				background: #010121;
			}
		}
	}
}

/* ----------------------------------------------------------------
     [ End Price ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
     [ 12 Start Team ]
-----------------------------------------------------------------*/

.team{
	padding-bottom: 90px;

	.item{

		&:hover{

			.info{
				top: 0;
				opacity: 1;
			}
		}

		.team-img{
			width: 240px;
			height: 240px;
			border-radius: 50%;
			overflow: hidden;
			margin: 0 auto 30px;
			box-shadow: 0px 10px 20px rgba(0,0,0,.1);
			position: relative;
		}

		.info{
			position: absolute;
			top: 100%;
			left: 0;
			height: 100%;
			width: 100%;
			border-radius: 50%;
			background: rgba(113,70,243,.8);
			color: #fff;
			opacity: 0;
			transition: all .3s;
		}

		h6{
			margin-bottom: 5px;
			font-size: 16px;
		}

		span{
			font-size: 13px;
			color: #777;
			margin-bottom: 15px;
		}

		.icon{
			font-size: 12px;
			margin: 0 5px;
			width: 30px;
			height: 30px;
			line-height: 30px;
			border: 1px solid #eee;
			border-radius: 50%;
		}
	}
}

/* ----------------------------------------------------------------
     [ End Team ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
     [ 13 Start Testimonials ]
-----------------------------------------------------------------*/

.testimonials{

	.item{

		.icon{
			font-size: 50px;
			color: $main-color;
			margin-bottom: 15px;
		}

		p{
			font-size: 17px;
			font-weight: 300;
			font-style: italic;
		}

		h6{
			font-size: 15px;
			font-weight: 500;
			margin: 60px auto 5px;
			color: $main-color;
			position: relative;

			&:after{
				content: '';
				width: 1px;
				height: 30px;
				background: #fff;
				position: absolute;
				top: -45px;
				left: 50%;
				opacity: .5;
			}
		}

		h5{
			font-size: 14px;
		}
	}
}

/* ----------------------------------------------------------------
     [ End Testimonials ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
     [ 14 Start Blog ]
-----------------------------------------------------------------*/

.blog{

	.item{
		text-align: center;
		margin-bottom: 10px;
		box-shadow: 0px 10px 40px rgba(0,0,0,.1);

		.img{

			img{
				border-radius: 5px 5px 0 0;
			}
		}

		.cont{
			background: #fff;
			padding: 30px 30px 50px;
			border-radius: 0px 0px 5px 5px;
			position: relative;
		}

		.info{
			margin-bottom: 10px;

			a{
				font-size: 12px;
				color: #777;
				margin-right: 10px;

				&:last-child{
					margin-right: 0;
				}
			}
		}

		h6{
			margin-bottom: 15px;
		}

		.more{
			width: 120px;
			height: 35px;
			line-height: 35px;
			border-radius: 30px;
			background: $main-color;
			color: #fff;
			font-size: 12px;
			position: absolute;
			bottom: -10px;
			left: calc(50% - 60px);
			text-align: left;
			box-shadow: 0px 10px 40px rgba(0,0,0,.1);
			overflow: hidden;
			transition: all .3s;

			&:hover{
				background: #000010;

				span{
					bottom: -50px;
				}

				i{
					top: 25%;
				}
			}

			span,i{
				position: absolute;
				width: 100%;
				height: 100%;
				text-align: center;
				transition: all .3s;
				bottom: 0;
			}

			i{
				top: -50px;
				font-size: 20px;
			}
		}
	}
}

/* ----------------------------------------------------------------
     [ End Blog ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
     [ 15 Start Contact ]
-----------------------------------------------------------------*/

.contact{

	.info{

		&.wh-box{

			.item{
				box-shadow: 0px 10px 44px -4px rgba(0,0,0,0.1);

				.icon{
					background: rgba(0,0,0,.02);
				}

				h6{
					color: inherit;
				}
			}
		}

		.item{
			padding: 40px 30px;
			background: #fff;
			box-shadow: 0px 20px 44px -8px rgba(0,0,0,0.1);
			border-radius: 5px;
			position: relative;

			.img-overlay{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				border-radius: 5px;
				overflow: hidden;
			}

			.icon{
				float: left;
				text-align: center;
				color: $main-color;
				font-size: 30px;
				width: 70px;
				height: 70px;
				line-height: 70px;
				border-radius: 50%;
				background: rgba(255,255,255,.05);
				margin-bottom: 30px;
				position: relative;
				z-index: 2;
			}

			.cont{
				margin-left: 85px;
			}

			h6{
				color: #fff;
				margin-bottom: 15px;
				font-size: 16px;
				position: relative;
				z-index: 2;
			}

			p{
				color: #aaa;
				font-size: 14px;
				text-transform: capitalize;
				position: relative;
				z-index: 2;
			}
		}
	}

	.form{

		input,textarea{
			width: 100%;
			padding: 10px;
			border: 0;
			background: #f7f8f9;
			border-radius: 5px;
		}

		textarea{
			height: 145px;
			max-height: 145px;
			max-width: 100%;
		}

		.butn{
			padding: 10px 30px;
			overflow: hidden;
			cursor: pointer;
			margin: 0;

			&:hover{
				border-color: $main-color;
			}
		}

		.form-group{
			position: relative;
		}

		.help-block{

			li{
				color: #ce7373;
				font-size: 11px;
				font-weight: 500;
				position: absolute;
				top: 10px;
				right: 10px;
			}
		}
	}
}

.map{
	height: 400px;

	#ieatmaps{
		height: 100%;
	}
}

/* ----------------------------------------------------------------
     [ End Contact ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
     [ 16 Start Footer ]
-----------------------------------------------------------------*/

footer{
	background: #000010;
	padding: 80px 0;

	.social{

		a{
			color: #fff;
			font-size: 13px;
			width: 35px;
			height: 35px;
			line-height: 35px;
			border-radius: 50%;
			background: rgba(100,100,100,.1);
			margin: 15px 5px;

			&:hover{
				background: $main-color;
			}
		}
	}

	p{
		color: #999;
		font-weight: 400;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 2px;
	}
}

/* ----------------------------------------------------------------
     [ End Footer ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
 	 [ 17 Responsive ]
-----------------------------------------------------------------*/

@media screen and (max-width: $desk-md-screen){

	.mb-md50{
		margin-bottom: 50px !important;
	}

	.mb-md30{
		margin-bottom: 30px !important;
	}

	.mb-md0{
		margin-bottom: 0 !important;
	}

	.cmb-120{
		margin-bottom: 120px !important;
	}

	.bgimg-height{
		height: 400px;
	}

	.bg-fixed{
		background-attachment: scroll !important;
	}

	.navbar{
		padding-left: 15px;

		.navbar-collapse{
			max-height: 340px;
			overflow: auto;
			background: #111;
			text-align: center;
			padding: 10px 0;
		}

		.nav-link{
			margin: 10px auto !important;
			}
		}

		.nav-scroll{

			.navbar-collapse{

			.nav-link{
				color: #fff !important;
			}

			.active{
				color: $main-color !important;
			}
		}
	}

	.navbar .navbar-nav .nav-link:after{
		left: calc(50% - 7px);
	}

	.header{
		background-attachment: scroll !important;
		background-position: 50% 0% !important;

		.caption{

			h4{
				font-size: 30px;
			}

			h1{
				font-size: 45px;
				line-height: 1.4;
			}
		}
	}

	.services .services-content .cont h3{
		font-size: 30px;
	}

	.featrues hr{
		display: none;
	}

	.featrues .bord{

		&:after, &:before{
			display: none;
		}
	}

	.featrues .item{
		padding: 0;
	}

	.numbers div[class*='col-']{

		&:last-child,&:nth-child(2){

			&:after{
				display: none;
			}
		}
	}
}

@media screen and (max-width: $tablet-sm-screen){

	.mb-sm50{
		margin-bottom: 50px !important;
	}

	.mb-sm30{
		margin-bottom: 30px !important;
	}

	.header{

		.caption{

			h4{
				font-size: 16px;
			}

			h1{
				font-size: 25px;
			}

			p{
				font-size: 14px;

				span{
					font-size: 12px;
					letter-spacing: 1px;
				}
			}
		}
	}

	.hero .intro h5{
		font-size: 18px;
	}

	.hero .intro h3, .video .content h3{
		font-size: 22px;
	}

	.services .owl-carousel .owl-nav .owl-prev{
		left: -15px;
	}

	.services .owl-carousel .owl-nav .owl-next{
		right: -15px;
	}

	.services .services-content .cont .services-info{
		text-align: center;
		margin-bottom: 15px;
	}

	.services .services-content .cont .services-info h3{
		font-size: 22px;
	}

	.services .services-content .serv-cont{
		text-align: center;
	}

	.works .filtering span{
		margin-bottom: 10px;
	}

	.numbers div[class*='col-']{

		&:after{
			display: none;
		}
	}
}