/* 02 - header - start
==================================================================================================== */

/* header sticky - start */
.sticky {
	top: 0px;
	left: 0px;
	right: 0px;
	height: auto;
	z-index: 999;
	position: absolute;
	&.stuck {
		position: fixed;
		background-color: #ffffff;
		box-shadow: 0px 0px 18px 1px rgba(0, 0, 0, .08);
		animation: .5s ease-in-out 0s normal none 1 running fadeInDown;
	}
}

.secondary_header {
	& + main {
		margin-top: 120px;
	}
}
/* header sticky - end */


/* header section - start */
.header_section {
	.primary_social_links {
		a {
			color: #ffffff;
			&:hover {
				color: $default_red;
			}
		}
	}
}

.header_top {
	height: 40px;
	display: flex;
	padding: 6px 0px;
	align-items: center;
	background-color: rgba(22, 24, 41, 0.6);
	box-shadow: 0px 2px 8px 0px rgba(0, 6, 16, 0.9);
}
.stuck {
	.header_top {
		display: none;
	}
}

.header_bottom {
	display: flex;
	min-height: 80px;
	padding: 15px 0px;
	align-items: center;
}
.secondary_header {
	.header_bottom {
		background-color: $default_black;
	}
	&.stuck {
		.header_bottom {
			background-color: #ffffff;
		}
	}
}

.header_section {
	.brand_logo {
		img {
			&:nth-child(2) {
				display: none;
			}
		}
	}

	&.stuck {
		.brand_logo {
			img {
				&:nth-child(1) {
					display: none;
				}
				&:nth-child(2) {
					display: inline-block;
				}
			}
		}
	}
}

.header_contact_info {
	li {
		font-size: 14px;
		&:not(:last-child) {
			margin-right: 40px;
		}
	}
	i {
		margin-right: 5px;
	}
}

.header_action_btns {
	>li {
		&:not(:last-child) {
			margin-right: 30px;
		}
	}
	button {
		color: #ffffff;
		display: block;
		line-height: 1;
		font-size: 16px;
		position: relative;
		&:hover,
		&.active {
			color: $default_red;
		}
	}
}
.stuck {
	.header_action_btns {
		button {
			color: $default_color;
			&:hover,
			&.active {
				color: $default_red;
			}
		}
	}
}

.cart_btn {
	.cart_counter {
		top: -12px;
		right: -12px;
		z-index: 2;
		height: 20px;
		color: #ffffff;
		min-width: 20px;
		font-size: 10px;
		font-weight: 700;
		line-height: 20px;
		text-align: center;
		position: absolute;
		border-radius: 45px;
		box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.2);
	}
}

.collapse_search_body {
	.search_body {
		padding: 10px 0px;
		background-color: rgba(0, 0, 0, 0.8);
	}

	.form_item {
		margin: 0px;
		input {
			padding: 0px;
			border: none;
			color: #ffffff;
			background-color: transparent;
			&:-moz-placeholder {
				color: rgba(255, 255, 255, 0.8);
			}
			&::-moz-placeholder {
				color: rgba(255, 255, 255, 0.8);
			}
			&:-ms-input-placeholder {
				color: rgba(255, 255, 255, 0.8);
			}
			&::-webkit-input-placeholder {
				color: rgba(255, 255, 255, 0.8);
			}
		}
		button {
			top: 50%;
			right: 0px;
			color: #ffffff;
			font-size: 22px;
			position: absolute;
			transform: translateY(-50%);
		}
	}
}

.header_section {

	.cart_dropdown,
	.user_dropdown {
		float: right;
		right: 0px !important;
		left: unset !important;
		border-top-right-radius: 0px;
	}
}

// cart dropdown - start
.cart_dropdown {
	border: none;
	min-width: 320px;
	padding: 25px 0px;
	box-shadow: 0px 10px 33.25px 1.75px rgba(0, 27, 103, 0.15);
	.wrap_title {
		line-height: 1;
		font-size: 16px;
		font-weight: 700;
		padding: 0px 25px;
		margin-bottom: 0px;
		padding-bottom: 20px;
		font-family: $body_font;
		border-bottom: 1px solid #f4f8fb;
	}

	.cart_items_list {
		padding-top: 10px;
		padding-bottom: 10px;
		border-bottom: 1px solid #f4f8fb;
		>li {
			display: flex;
			padding: 10px 25px;
			padding-right: 30px;
			position: relative;
			align-items: center;
			border-bottom: 1px solid #f4f8fb;
			&:last-child {
				border-bottom: none;
			}
		}
		.remove_btn {
			top: 50%;
			right: 30px;
			color: #000000;
			font-size: 18px;
			position: absolute;
			transform: translateY(-50%);
			&:hover {
				color: $default_red;
			}
		}
		.item_image {
			width: 80px;
			overflow: hidden;
			margin-right: 20px;
		}
		.item_title {
			line-height: 1;
			font-size: 16px;
			margin-bottom: 3px;
		}
		.item_price {
			font-size: 14px;
		}
	}

	.btns_group {
		display: block;
		padding: 20px 25px;
		padding-bottom: 0px;
		li {
			width: 100%;
			margin: 0px;
			&:not(:last-child) {
				margin-bottom: 10px;
			}
		}
		.custom_btn {
			height: 55px;
			display: block;
			font-size: 14px;
			line-height: 57px;
		}
	}
}
// cart dropdown - end


// cart dropdown - start
.user_dropdown {
	border: none;
	padding: 5px 0px;
	min-width: 220px;
	box-shadow: 0px 10px 33.25px 1.75px rgba(0, 27, 103, 0.15);
	.profile_info {
		padding: 20px;
		border-bottom: 1px solid #f4f8fb;
		.user_thumbnail {
			float: left;
			width: 35px;
			height: 35px;
			overflow: hidden;
			margin-right: 10px;
			border-radius: 100%;
		}
		.user_content {
			display: table;
		}
		.user_name {
			margin-bottom: 0px;
			>a {
				display: block;
				line-height: 1;
				font-size: 14px;
				font-weight: 500;
				color: $default_black;
				font-family: $body_font;
			}
		}
		&:hover {
			.user_name {
				>a {
					color: $default_red;
					text-decoration: underline;
				}
			}
		}
		.user_title {
			display: block;
			font-size: 14px;
			color: $default_red;
		}
	}

	>ul {
		padding: 9px 0px;
		>li {
			>a {
				line-height: 1;
				display: block;
				font-size: 14px;
				padding: 12px 20px;
				color: $default_color;
				>i {
					float: left;
					font-size: 20px;
					margin: -2px 0px;
					margin-right: 4px;
					margin-right: 13px;
					color: $default_black;
					transition: $default_transition;
				}
			}
			&:hover {
				>a {
					background-color: #f4f8fb;
					>i {
						color: $default_red;
					}
				}
			}
		}
	}
}
// cart dropdown - end

/* header section - end */


/* main menu - start */
.main_menu {
	>ul {
		>li {
			padding: 10px 0px;
			&:not(:last-child) {
				margin-right: 35px;
			}
			>a {
				display: block;
				line-height: 1;
				color: #ffffff;
				font-size: 16px;
			}
			&:hover,
			&.active {
				>a {
					color: $default_red;
				}
			}
		}
	}

	a {
		font-size: 16px;
		&:after {
			font-size: 12px;
			font-family: 'Font Awesome 5 Pro';
		}
	}
}
.stuck {
	.main_menu {
		>ul {
			>li {
				>a {
					color: $default_color;
				}
				&:hover,
				&.active {
					>a {
						color: $default_red;
					}
				}
			}
		}
	}
}

// sub menu - start
.main_menu {
	.has_child {
		position: relative;
		.submenu {
			top: 100%;
			left: 0px;
			opacity: 0;
			z-index: 99;
			margin: 0px;
			min-width: 220px;
			padding: 20px 0px;
			visibility: hidden;
			position: absolute;
			border-radius: 6px;
			background: #ffffff;
			transform: translateY(15px);
			border-top-left-radius: 0px;
			transition: all 0.3s ease-in-out;
			box-shadow: 0px 2px 19px 3px rgba(0, 0, 0, 0.08);
			li {
				display: block;
				&:not(:last-child) {
					border-bottom: 1px solid #f5f6fa;
				}
				a {
					width: 100%;
					display: block;
					line-height: 1;
					font-size: 14px;
					padding: 13px 30px;
					white-space: nowrap;
					color: $default_color;
				}
				&:hover,
				&.active {
					>a {
						color: $default_red;
						background-color: #f5f6fa;
					}
				}
			}
		}

		&:hover {
			>.submenu {
				opacity: 1;
				visibility: visible;
				transform: translateY(0px);
			}
		}
	}
}
// sub menu - end

// 3rd lavel sub menu - start
.main_menu {
	.has_child {
		.submenu {
			.has_child {
				position: relative;
				>a {
					&:after {
						float: right;
						content: '\f061';
						transform: translateY(2.5px);
					}
				}
			}
			.submenu {
				top: -20px;
				left: 100%;
			}
		}
	}
}
// 3rd lavel sub menu - end
/* main menu - end */


/* sidebar mobile menu - start */
.mobile_sidebar_menu {
	top: 0px;
	right: -420px;
	width: 400px;
	height: 100vh;
	z-index: 9999;
	color: #ffffff;
	position: fixed;
	padding: 50px 40px;
	overflow-y: scroll;
	background-color: $default_black;
	transition: 0.6s cubic-bezier(1, 0, 0, 1);
	&.active {
		right: 0px;
	}

	.mCustomScrollBox {overflow: visible!important;}

	.mb_60 {
		margin-bottom: 40px;
	}

	.menu_list {
		li,a {
			width: 100%;
			line-height: 1;
			display: block;
		}

		>ul {
			>li {
				&:not(:last-child) {
					margin-bottom: 20px;
				}
				>a {
					font-size: 16px;
					margin-bottom: 5px;
					color: rgba(255, 255, 255, 0.4);
				}
				&:hover,
				&.active {
					>a {
						color: #ffffff;
					}
				}
			}
		}
	}

	.dropdown-menu {
		margin: 0px;
		width: 100%;
		float: none;
		border: none;
		display: none;
		line-height: 1;
		padding: 10px 0px;
		border-radius: 0px;
		transform: unset !important;
		position: static !important;
		background-color: rgba(255, 255, 255, 0.06);
		&.show {
			display: block;
			position: unset !important;
		}
		li,a {
			width: 100%;
			display: block;
			line-height: 1;
		}
		a {
			padding: 15px;
			font-size: 15px;
			color: rgba(255, 255, 255, 0.6);
		}
		>li {
			&:hover,
			&.active {
				>a {
					color: #ffffff;
					background-color: rgba(255, 255, 255, 0.07);
				}
			}
		}

		.dropdown-menu {
			a {
				padding-left: 30px;
			}
		}
	}

	.dropdown-toggle {
		&:after {
			float: right;
			margin-top: 9px;
		}
	}
}
.mobile_sidebar_menu::-webkit-scrollbar {width: 0px;}


.sidebar-menu-wrapper {
	display: block;

	.close_btn {
		top: 30px;
		right: 30px;
		line-height: 1;
		color: #ffffff;
		font-size: 18px;
		position: absolute;
		&:hover {
			color: $default_red;
		}
	}

	p {
		font-size: 14px;
	}

	.custom_btn {
		height: 50px;
		display: block;
		min-width: 100%;
		font-size: 14px;
		line-height: 52px;
	}

	.form_item {
		margin-bottom: 20px;
		.input_title {
			font-size: 14px;
			margin-bottom: 8px;
		}
		input {
			height: 50px;
		}
	}

	.title_text {
		line-height: 1;
		font-size: 26px;
		margin-bottom: 15px;
	}

	.overlay {
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		opacity: 0;
		z-index: 999;
		width: 100vw;
		height: 100vh;
		display: none;
		position: fixed;
		transition: $default_transition;
		background: rgba(10, 41, 96, 0.57);
		&.active {
			opacity: 1;
			display: block;
		}
	}
}
/* sidebar mobile menu - end */

/* 02 - header - end
==================================================================================================== */