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

/* header - start
================================================== */
.header-section {
	background: red;
	min-height: 100px;
	.brand-logo {
		>a {
			float: left;
			max-width: 100px;
		}
		.menu-btn {
			float: right;
			display: none;
			line-height: 1;
			font-size: 24px;
			margin: 2px 0px;
		}
	}

	.main-menu {
		>ul {
			>li {
				margin-right: 40px;
				position: relative;
				&:last-child {
					margin-right: 0px !important;
				}
				&:before {
					left: 50%;
					opacity: 0;
					width: 100%;
					height: 2px;
					content: '';
					bottom: -38px;
					position: absolute;
					transform: translateX(-50%);
					transition: $default-transition;
					background-color: $default-purple;
				}
				>a {
					display: block;
					color: #4c4754;
					font-weight: 500;
					font-family: $heading-font;
				}
				&:hover,
				&.active {
					&:before {
						opacity: 1;
						width: 150%;
					}
					>a {
						color: $default-purple;
					}
				}
			}
		}
	}

	&.text-white {
		.brand-logo {
			.menu-btn {
				color: #ffffff;
			}
		}

		.main-menu {
			>ul {
				>li {
					&:before {
						background-color: #ffffff;
					}
					>a {
						color: rgba(255, 255, 255, 0.9);
					}
					&:hover,
					&.active {
						>a {
							color: #ffffff;
						}
					}
				}
			}
		}

		.search-wrap {
			.search-btn {
				&:before {
					color: #ffffff;
				}
			}
		}
	}
}
/* header - end
================================================== */


/* header sticky - start
================================================== */
.sticky-header {
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 999;
	height: auto;
	position: absolute;
	background-color: rgba(255, 255, 255, 0.7);
	box-shadow: 0px 10px 61px 0px rgba(62, 66, 87, 0.14);
}
.sticky-header.stuck {
	position: fixed;
	background-color: #ffffff !important;
	animation: .5s ease-in-out 0s normal none 1 running fadeInDown;

	&.text-white {
		.brand-logo {
			.menu-btn {
				color: $default-black;
			}
		}

		.main-menu {
			>ul {
				>li {
					&:before {
						background-color: $default-purple;
					}
					>a {
						color: #4c4754;
					}
					&:hover,
					&.active {
						>a {
							color: $default-purple;
						}
					}
				}
			}
		}

		.search-wrap {
			.search-btn {
				&:before {
					color: #4c4754;
				}
			}
		}
	}
}
/* header sticky - end
================================================== */


/* main search body - start
================================================== */
.search-wrap {
	&:before {
		display: none;
	}

	.search-btn {
		width: 30px;
		height: 30px;
		margin: -2px 0px;
		line-height: 32px;
		text-align: center;
		position: relative;
		&:before {
			color: #4c4754;
			content: '\f002';
			display: inline-block;
			transition: $default-transition;
			font-family: 'Font Awesome 5 Pro';
		}
		&.active {
			&:before {
				content: '\f00d';
				transform: rotate(360deg);
			}
		}
	}

	.search-body {
		top: 200%;
		right: 0px;
		opacity: 0;
		width: 300px;
		padding: 15px;
		visibility: hidden;
		position: absolute;
		border-radius: 6px;
		background-color: #ffffff;
		border-top-right-radius: 0px;
		box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.2);
		transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
		.form-item {
			input {
				height: 45px;
			}
			button {
				top: 50%;
				right: 20px;
				font-size: 18px;
				text-align: center;
				position: absolute;
				color: $default-color;
				background-color: #ffffff;
				transform: translateY(-50%);
				&:hover {
					color: $default-purple;
				}
			}
		}

		&.active {
			top: 130%;
			opacity: 1;
			visibility: visible;
		}
	}
}
/* main search body - end
================================================== */


/* drop down menu - start
================================================== */
.header-section {

	// sub menu - start
	.main-menu {
		>ul {
			.menu-item-has-child {
				position: relative;
				.sub-menu {
					top: 200%;
					left: 0px;
					z-index: 1;
					opacity: 0;
					padding: 25px;
					min-width: 200px;
					visibility: hidden;
					position: absolute;
					border-radius: 10px;
					background-color: #ffffff;
					border-top-left-radius: 2px;
					box-shadow: 7px 5px 30px 0px rgba(36, 45, 75, 0.15);
					transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
					li {
						width: 100%;
						display: block;
						>a {
							height: 40px;
							font-size: 16px;
							padding: 8px 15px;
							padding-left: 20px;
							color: $default-color;
							border-left: 2px solid #e9eaea;
						}
						&:hover,
						&.active {
							>a {
								color: $default-purple;
								border-color: $default-purple;
							}
						}
					}
				}
				&:hover {
					>.sub-menu {
						top: 100%;
						opacity: 1;
						visibility: visible;
					}
				}
			}
		}
	}
	// sub menu - end

	// inner sub menu - start
	.main-menu {
		>ul {
			.menu-item-has-child {
				.sub-menu {
					.menu-item-has-child {
						.sub-menu {
							left: 100%;
						}
						&:hover {
							>.sub-menu {
								top: 0px;
							}
						}
					}
				}
			}
		}
	}
	// inner sub menu - end

}
/* drop down menu - end
================================================== */


/* sidebar menu - start
================================================== */
.sidebar-menu-wrapper {
	display: block;

	.sidebar-menu {
		top: 0;
		right: -420px;
		width: 400px;
		height: 100vh;
		z-index: 9999;
		position: fixed;
		padding: 40px 30px;
		overflow-y: scroll;
		background-color: #ffffff;
		transition: 0.6s cubic-bezier(1, 0, 0, 1);
		&.active {
			right: 0px;
			box-shadow: 0px 10px 55px 1px rgba(137,173,255,.35);
		}
		.mCustomScrollBox {overflow: visible!important;}
		.dismiss {
			.close-btn {
				width: 40px;
				height: 40px;
				color: #ffffff;
				font-size: 18px;
				cursor: pointer;
				line-height: 42px;
				text-align: center;
				border-radius: 3px;
				display: inline-block;
			}
		}

		.about-content {
			.title-text {
				font-size: 20px;
				line-height: 1.5;
				font-weight: 600;
				margin-bottom: 20px;
				text-transform: uppercase;
				strong {
					font-weight: 600;
					font-family: $heading-font;
				}
			}
		}

		/* menu items - start */
		.menu-list {
			margin-left: -30px;
			margin-right: -30px;
			>ul {
				>li {
					margin-bottom: 1px;
					&:last-child {
						margin-bottom: 0px !important;
					}
					>a {
						width: 100%;
						display: block;
						font-size: 16px;
						padding: 12px 30px;
						color: $default-color;
						text-transform: capitalize;
					}
					&:hover,
					&.active {
						>a {
							color: #212121;
							background-color: #f9f9f9;
						}
					}
				}
			}

			.sub-menu {
				margin: 0px;
				padding: 0px;
				background-color: #f9f9f9;
				>li {
					width: 100%;
					display: block;
					>a {
						width: 100%;
						display: block;
						padding: 12px 30px;
						color: $default-color;
					}
					&:hover,
					&.active {
						>a {
							color: $default-black;
							background-color: rgba(0, 0, 0, 0.03);
						}
					}
				}
			}
		}
		/* menu items - end */

		/* social links - start */
		.social-links {
			>ul {
				>li {
					width: 40px;
					height: 40px;
					margin-right: 15px;
					text-align: center;
					&:last-child {
						margin-right: 0px !important;
					}
					>a {
						width: 100%;
						height: 100%;
						display: block;
						font-size: 14px;
						line-height: 42px;
						border-radius: 100%;
						color: $default-color;
						border: 1px solid #e9eaea;
						transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
						&:hover {
							color: #ffffff;
							transform: translateY(-3px);
							border-color: $default-purple;
							background-color: $default-purple;
							box-shadow: 0px 5px 10px 1px rgba(147, 76, 242, 0.3);
						}
					}
				}
			}
		}
		/* social links - end */

	}

	.overlay {
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		opacity: 0;
		z-index: 999;
		width: 100vw;
		height: 100vh;
		display: none;
		position: fixed;
		background: rgba(0, 0, 0, 0.7);
		transition: $default-transition;
	}
	.overlay.active {
		opacity: 1;
		display: block;
	}
}
.sidebar-menu::-webkit-scrollbar {width: 0px;}
/* sidebar menu - end
================================================== */

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