// Header_area

// Mega menu common for all

.mega_nav.navbar .navbar-nav >
	li.nav-item{
		padding: 0 15px;
		&:last-child{ padding-right: 0; }
	}
.navbar .navbar-nav >
	li.nav-item > a{
	position: relative;
	display: inline-block;
	z-index: 1;
	font-size: 18px;
	padding: 30px 0px;
	color: #fff; 
	@include firasans(400);
	&:after{
		position: absolute;
	    width: 100%;
	    background: #fff;
	    height: 2px;
	    bottom: 0px;
	    left: 0;
	    content: '';
	    transform-origin: right center;
	    transform: scaleX(0);
	    transition: transform .25s cubic-bezier(.37,.31,.2,.85),
	        -webkit-transform .25s cubic-bezier(.37,.31,.2,.85);
	}
	&:hover{ color: #fff;}
	&:hover:after{
		transform: scaleX(1);
		transform-origin: left center;
	    background: #fff;
	}
}
.navbar .navbar-nav .nav-item.nav_right{
	position: relative;
	padding-left: 5px !important;
	> a {
	    cursor: pointer;
	    display: inline-block;
	    margin-left: 5px;
		font-size: 16px;
		color: #fff; 
		&:after{ display: none; }
		&:hover:after{ display: none;  }
	}
	span {
	    position: absolute;
	    right: 10px;
	    top: 25px;
	    color: #fff;
	    z-index: 1;
	    background: red;
	    border-radius: 15px;
	    height: 15px;
	    width: 15px;
	    text-align: center;
	    font-size: 12px;
	}
			
}
.home_drop{
	position: relative;
	#mega_home{
	    background: #fff;
	    width: 500px;
	    padding: 20px;
		right: auto;
		left: 0;
		top: 100%;
		border-radius: 8px;
		z-index: -1;
		position: absolute;
		.single_element {
		    display: flex;
		    align-items: center;
		    width: 47%;
		    padding: 8px;
		    margin: 0 5px;
		    border-radius: 8px;
		    background: #eaf3ff;
		    border: 1px solid #d3dff4;
		    float: left;
		    margin-bottom: 10px;
		    @include transition(all, .3s, ease-in-out);
		    @include boxshadow(0px, 2px, 4px, 0px, rgba(3,27,78,0.06), false);
		    font-size: 18px;
		    color: #37576e;
		    @include firasans(400);
		    span{ 
		    	color: $green; 
		    	@include transition(all, .3s, ease-in-out);
		    	margin-right: 15px; 
		    	padding: 10px;
		    	background: #1b254e;
		    	border-radius: 8px;
		    }

		    &:hover{
		    	background: $brand;
		    	color: #fff;
		    	span{ color: #fff; }
		    }
		}
	}
}

.mega_page_details	{
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    visibility: visible;
 	position: absolute;
 	left: 0;
 	z-index: -1;
	#mega_page_slider{
		margin-top: 10px;
		border-radius: 10px;
		height: 250px;
		overflow: hidden;
		.carousel-control-next, .carousel-control-prev{
			i {
			    color: $brand_2;
			    padding: 10px;
			    border-radius: 40px;
			    font-size: 28px;
				@include transition(all, .5s, ease-in-out);
			    &:hover{
					background: rgba(#000, .5);
					color: #fff;
			    }
			}
		}
	}
	li {
		a{
		    font-size: 14px;
			@include firasans(400);
			padding: 10px 0;
			margin-bottom: 5px;
			display: block;
		    border-bottom: 1px solid #f7f7f7;
			color: $dark_3;
			@include transition(all, .3s, ease-in-out);
			&:hover{ color: $brand_2; margin-left: 5px; }
		}
	}
}
.blog_drop{
	position: relative;
	#mega_blog{
		border-radius: 8px;
	    background: #fff;
	    width: 270px;
	    padding: 20px;
		right: auto;
		left: 0;
		top: 100%;
		z-index: -1;
		position: absolute;
		.mega_blog_details{
			@include transition(all, .3s, ease-in-out);
		    padding: 0px;
			li {
				a{
				    font-size: 14px;
					@include firasans(400);
					padding: 10px;
					margin-bottom: 5px;
					display: block;
				    border-bottom: 1px solid #f7f7f7;
					color: $dark_3;
					@include transition(all, .3s, ease-in-out);
					&:hover{ color: $brand_2; margin-left: 5px; }
				}
			}
		}
	}
}
.hosting_drop{
	position: relative;
	#mega_hosting{
		border-radius: 8px;
	    background: #fff;
	    width: 270px;
	    padding: 20px;
		right: auto;
		left: 0;
		top: 100%;
		z-index: -1;
		position: absolute;
		.mega_hosting_details{
		    padding: 0px;
			li {
				a{
				    font-size: 14px;
					@include firasans(400);
					padding: 10px;
					margin-bottom: 5px;
					display: block;
				    border-bottom: 1px solid #f7f7f7;
					color: $dark_3;
					@include transition(all, .3s, ease-in-out);
					&:hover{ color: $brand_2; margin-left: 5px; }
				}
			}
		}
	}
}
.nav_right{
	.drop_notf_btn, .drop_cart_btn{
		position: relative;
		z-index: 1;
		display: inline-block;
		a, a:hover{ color: #fff; }
	}
	#collapse_notf, #collapse_cart{
		width: 300px;
		left: auto;
		right: 0;
		top: 105%;
		z-index: -1;
		position: absolute;
	}
	.drop_cart_details {
		@include boxshadow(0px, 12px, 51px, 0px, rgba(0, 0, 0, 0.3), false);
		@include transition(all, .3s, ease-in-out);
	    background: #fff;
	    color: $dark;
	    border-radius: 8px;
	    padding: 20px;
	    .cart_title{
	    	font-size: 18px;
	   		margin-bottom: 15px;
	    }
	    .cart_text{
	    	font-size: 14px;
	    	line-height: 1.5;
	    	margin-bottom: 10px;
	        i{
		    	cursor: auto !important;
		    	color: $dark !important;
		    	padding: 0 !important;
		    	font-weight: 700;
		    }
	    }
	    .cart_btn{
	    	padding: 15px !important;
	    	font-size: 16px !important;
	    	display: inline-block !important;
	    	margin: 0 auto !important;
	    	color: $brand !important;
	    	background: transparent !important;
	    	border-radius: 5px !important;
	    	border: 1px solid $brand !important;
	    	@include transition(all, .3s, ease-in-out);
	    	margin-right: 15px !important;
	    	margin-top: 10px !important;

	    	&:hover{
	    		color: #fff !important;
	    		background: $brand !important;
	    	}
	    }
	}
	.drop_notf_details {
		@include boxshadow(0px, 12px, 51px, 0px, rgba(0, 0, 0, 0.3), false);
		@include transition(all, .3s, ease-in-out);
	    background: #fff;
	    color: $dark;
	    padding: 20px;
	    border-radius: 8px;
	    .notf_title{
	    	font-size: 18px;
	   		margin-bottom: 15px;
	    }
	    .notf_text{
	    	font-size: 14px;
	    	line-height: 1.5;
	    	margin-bottom: 10px;
	        i{
		    	cursor: auto !important;
		    	color: $dark !important;
		    	padding: 0 !important;
		    	font-weight: 700;
		    }
	    }
	    .notf_btn{
	    	padding: 15px !important;
	    	font-size: 16px !important;
	    	display: inline-block !important;
	    	margin: 0 auto !important;
	    	color: $brand !important;
	    	border-radius: 5px !important;
	    	border: 1px solid $brand !important;
	    	@include transition(all, .3s, ease-in-out);
	    	margin-right: 15px !important;
	    	margin-top: 10px !important;	    	
	    	background: transparent !important;
	    	&:hover{
	    		color: #fff !important;
	    		background: $brand !important;
	    	}
	    }
	}
}



	//Header_area Style 1
.header_wrap{
	position: absolute;
	width: 100%;
	z-index:99;
	.sign_in_up_area{ 
		margin-top: 25px;
		.boxed_blue_btn.boxed_btn{ 
			@extend .boxed_blue_btn;
			padding:10px 30px; 	
		}
		.boxed_green_btn.boxed_btn{ 
			padding:10px 30px; 
			@extend .boxed_green_btn;	
		}
	}
	.navbar .navbar-nav > li.nav-item {
		> a{
			padding: 15px 0 25px;
			font-size: 16px;
			&:after{
				height: 2px;
			}
		}
	}
	.blog_drop #mega_blog{
		left: auto;
		right: 0;
	}
}

	//Header_area Style 2
.header_wrap_2{
	position: absolute;
	margin-top: 55px;
	width: 100%;
	z-index: 99;

	> .container{ 
		@include boxshadow(0px, 12px, 51px, 0px, rgba(0, 0, 0, 0.3), false);
		background: #fff; 
		border-radius: 10px;
	}
	.navbar .navbar-nav > li.nav-item {
		> a{
			padding: 30px 5px;
			font-size: 18px;
			line-height: 1.2;
			color: $dark;
			&:after{
				height: 2px;
				background: $brand_2;
			}
			&:hover{ color: $brand_2;}
			&:hover:after{
			    background: $brand_2;
			}
		}

	}
}


	// Header_area Style 3
.header_wrap_3{
	width: 100%;
	z-index: 99;
	position: absolute;
	.header_top{ 
		height: 50px;
	 	@include gradient_bg_7(left);
	 	color: #fff;
	 	p{ 
	 		display: inline-block;  
	 		font-size: 16px; 
	 		margin-right: 25px;
	 		@include firasans(400);
	 		i{
	 			margin-right: 5px; font-size: 14px;
	 		}
	 	}
	 	.boxed_btn {
		    padding: 15px;
		    width: 80px;
		    height: 50px;
		    @include firasans(400);
		    background: rgba(#0d1223, 0.2);
		    @include transition(all, .3s, ease-in-out);
		    color: #fff;
		    display: inline-block;
		    font-size: 12px;
		    margin-right: 15px;
		    i{ margin-right: 5px; }
		}
		/** Custom Select **/
		.custom_select_wrapper {
			position: relative;
			select {
				display: none;
				position: relative;
			}
			.custom_select{
				.custom_select_trigger {
					position: relative;
					display: block;
					width: 100px;
					height: 50px;
					padding: 18px 12px;
					font-size: 12px;
					font-weight: 400;
					border: none;
					color: #fff;
					background: rgba(#0d1223, 0.2);
					cursor: pointer;
					@include transition(all, .5s, ease-in-out);
					&:hover{
					}
					&:after {
						position: absolute;
						display: block;
						content: '';
						width: 10px; 
						height: 10px;
						top: 50%; 
						right: 15px;
						margin-top: -3px;
						border-bottom: 1px solid #fff;
						border-right: 1px solid #fff;
						transform: rotate(45deg) translateY(-50%);
						@include transition(all, .5s, ease-in-out);
						transform-origin: 50% 0;
					}
				}
				&.opened{ 
					@include boxshadow( 0px, 0px, 38px, 2px, rgba(0, 0, 0, 0.10), false);
				}
				&.opened .custom_select_trigger:after {
					margin-top: 3px;
					transform: rotate(-135deg) translateY(-50%);
				}
				.custom_options {
					position: absolute;
					z-index: 99;
					display: block;
					top: 100%; left: 0; 
					min-width: 100%;
					box-sizing: border-box;
					@include boxshadow( 0, 2px, 1px, 0px, rgba(0,0,0,.07), false);
					background: #0d1223;
					@include transition(all, .5s, ease-in-out);
					opacity: 0;
					visibility: hidden;
					pointer-events: none;
					transform: translateY(-15px);
					.custom_option {
						font-size: 14px;
						padding: 5px 15px;
						cursor: pointer;
						margin: 0;
						text-align: left;
						line-height: 30px;
						display: block;
						color: #fff;
						transition: all .4s ease-in-out;
						&:last-of-type {
							border-bottom: 0;
						}
						&:hover {
							background: $brand_3;
							color: #fff;
						}
					}
				}
				&.opened .custom_options {
					opacity: 1;
					visibility: visible;
					pointer-events: all;
					transform: translateY(0px);
				}
			}
		}

	}

	.header_bottom{
		height: 100px;
	 	background: #0d1223;
	 	position: relative;
	 	&:after{
	 		position: absolute;
	 		width: 100%;
	 		height: 3px;
	 		left: 0;
	 		bottom: 0;
	 		content: '';
	 		@include gradient_bg_7(left);
	 	}
		.navbar .navbar-nav > li.nav-item {
			> a{
				padding: 15px 0;
				font-size: 16px;
				color: #fff;
				@include transition(all, .3s, ease-in-out);
				&:hover {
					color: $brand_3;
				}
				&:after{
					height: 0px;
				}
			}
		}
		.navbar .navbar-nav > li.nav-item.nav_right{
			position: relative;
			z-index: 1;
			padding: 0;
			&:after{
				content:'';
				height: 12px;
				top: calc(50% - 6px);
				width: 100%;
				left: 20%;
				z-index: -1;
				position: absolute;
				background: $brand_3_dark;
			}
			&:last-child{ margin-right:0px; 
				&:after{ height: 0; }
			}
			a{ 
				padding: 0px;
				margin-right: 5px;
				background: $brand_3;
				line-height: 0;
				color: #fff;
				@include transition(all,.3s,ease-in-out);
				i{ 
					padding: 10px;
					display: inline-block;
					font-size: 16px;
				}

				&:hover{
					background: $brand_3_dark;
				}
			}
			span{ right: 5px; top: 5px; }
		}
	}

}

// Header_area_4 Style 4
.header_wrap_4{
	margin: 0;
	position: absolute;
	width: 100%;
	z-index: 99;
	> .container{ 
		@include boxshadow(0px, 12px, 51px, 0px, rgba(0, 0, 0, 0.3), false);
		@include gradient_bg_4(right);
		border-radius: 0 0 10px 10px;
	}
	.blog_drop #mega_blog{
		left: auto;
		right: 0;
	}
}
// Header_area_5 Style 5
.header_wrap_5{ 
	position: absolute;
	width: 100%;
	z-index: 99;
	.nav_right a {
	    padding: 30px 5px;
	}
}	

// Header_area_in   //Style in for inner page
.header_wrap_dark_in{
	position: absolute;
	margin: 0;
	width: 100%;
	z-index: 99;
	> .container{ 
		@include boxshadow(0px, 12px, 51px, 0px, rgba(0, 0, 0, 0.3), false);
		@include gradient_bg_4(right);
		border-radius: 0 0 10px 10px;
		@include transition(all,.6s,ease-in-out);

	}
	.blog_drop #mega_blog{
		left: auto;
		right: 0;
	}

}

// Responsive 

@media screen and (min-width: 991px) {
	.hid{ opacity: 0; @include transition(all, .2s, ease-in-out); z-index: -1; visibility: hidden;}
	.home_drop:hover, .drop_notf_btn:hover, .drop_cart_btn:hover, .blog_drop:hover, .page_drop:hover, .hosting_drop:hover{
		>.hid{
			display: block !important;
			visibility: visible !important;
			opacity: 1 !important;
			z-index: 9 !important;
			width: 100%;
		}
	}
}
// For Medium device
@media #{$medium_device}{
	.mega_nav.navbar .navbar-nav >li.nav-item{
		padding: 0px 10px;
		& > a{
	 	}

	}
	li.nav-item.nav_right span{ right: 5px; }

}

@media #{$tab_device_below}{  // Extra media quary
	.hid{ z-index: 9 !important;}
	.mega_nav.navbar{
		.navbar-brand{ 
			margin-left: 30px; 
			margin-top: 10px; 
			img{ width: 90%; }
		}
 		.nav_wrapper{
			@include transition(all, .3s, ease-in-out);
			left: -100%;
			left: 0px;
			top: 60px;
			padding: 0% 3%;
			background: rgba(0, 6, 8, .9);
			position: absolute;
			width: 100%;
			ul.navbar-nav{
			    align-items: flex-end;
				& > li {
					text-align: right;
					padding: 0px;
					a{
					    padding: 10px 0px;
					    display: inline-block;
					    &:after{
					    	height: 2px;
					    }
					}
					&.home_drop{
						#mega_home{
						    width: 260px;
						    padding: 0px;
							right: auto;
							left: 0;
							top: 100%;
							background: transparent;
							position: relative;
							box-shadow: none;
							.single_element {
							    display: flex;
							    padding: 5px 0px;
							    width: 100%;
							    justify-content: flex-end;
							    float: none;
							    font-size: 14px;
							    border: none;
							    background: transparent;
							    color: $brand_7;
							    &:hover{ color: #fff; }
							    span{ display: none; }
							}
						}
					}
					&.hosting_drop{
						#mega_hosting {
						    position: relative;
						    top: 100%;
						    width: 250px;
						    padding: 0px;
						    background: transparent;
						    right: 0;
						    left: auto;
						    box-shadow: none;
						    li a{
						    	padding: 5px 0px !important;
						    	color: $brand_7;
						    	display: inline-block;
						    	border-bottom: none;
						    	&:hover{
							   		color: #fff;
							   	}
						    }
						}
					}
					&.page_drop{
						#mega_page_details {
						    position: relative;
						    top: 100%;
						    width: 250px;
						    padding: 0px;
						    background: transparent;
						    right: 0;
						    left: auto;
						    box-shadow: none;
						    li a{
						    	padding: 5px 0px !important;
						    	color: $brand_7;
						    	display: inline-block;
						    	border-bottom: none;
						    	&:hover{
							   		color: #fff;
							   	}
						    }
						}
					}
					&.blog_drop {
						#mega_blog{
							position: relative;
							box-shadow: none;
							background: transparent;
							padding: 0px;
							width: 250px;
							.mega_blog_details li a{
								padding: 5px 0px !important;
						    	color: $brand_7;
						    	display: inline-block;
						    	border-bottom: none;
						    	&:hover{
							   		color: #fff;
							   	}
						    }
						}
					}
				}
				li.nav-item{
					order: 9;
					&.nav_right{ 
						order: 1; 
						span{ top: 7px; right: -5px; }
						.drop_notf_details, .drop_cart_details {
						    text-align: left;
						}
					}
				}
			}
 		}
 	}

	.header_wrap{
 		padding: 0;
 		height: 70px;
 		background:rgba(0, 6, 8, .9);
 		.container{
 			padding: 0;
 		    max-width: 100vw;
 		    .col-md-12{ padding: 0; }
 		}
 		.mega_nav.navbar .nav_wrapper{ top: 70px; }
	}

	.header_wrap_2 {
		margin-top: 0;
		padding: 0;
 		background:rgba(0, 6, 8, .9);
 		> .container{
 			height: 60px;
 		}
 		.container{
 			padding: 0;
 		    max-width: 100vw;
 		    border-radius: 0;
 		    .col-md-12{ padding: 0; }
 		}
 		.navbar .navbar-nav > li.nav-item {
			> a{
				color: #fff;
				&:hover{ color: #fff;}
			}
		}
	}

	.header_wrap_3{	
		.header_top{  
			p{ font-size: 14px;}
			.custom_select_wrapper{ display: none; }
			.boxed_btn{ margin: 0; }
		}
		.header_bottom{
			padding: 10px 0;
			height: 60px;
			 .container{
			    max-width: 100vw;
			    padding: 0;
			    .col-md-12{ padding: 0; }
			}
			
		}
		.header_bottom .navbar .navbar-nav > li.nav-item > a{ 
			color: #fff;
		}
		.header_bottom .navbar .navbar-nav > li.nav-item.nav_right{
			a{ margin: 5px 0 5px; }
			&:after{ 
				height:0;
				display: none;
			}
		}
	}	

	.header_wrap_4 {
		padding: 0;
 		background: rgba(0, 6, 8, .9);
 		> .container{
 			height: 60px;
 		}
 		.container{
 			padding: 0;
 		    max-width: 100vw;
 		    border-radius: 0;
 		    .col-md-12{ padding: 0; }
 		}
	}
 	.header_wrap_5{
 		padding: 0;
 		height: 60px;
 		background:rgba(0, 6, 8, .9);
 		.container{
 			padding: 0;
 		    max-width: 100vw;
 		    .col-md-12{ padding: 0; }
 		}
	}
	.header_wrap_dark_in {
		padding: 0;
 		background: rgba(0, 6, 8, .9);
 		> .container{
 			height: 60px;
 		}
 		.container{
 			padding: 0;
 		    max-width: 100vw;
 		    border-radius: 0;
 		    .col-md-12{ padding: 0; }
 		}
	}

}

.mega_menu_slide img {
	height: 240px;
	object-fit: cover;
	object-position: top;
  }
  @media (min-width: 992px){
	.header_wrap_7 {
	  padding-top: 30px;
	}
  }