.header-top-area {
	background-color: var(--wc-dark-gray-color);

	@media (max-width: 767px) {
		padding: 0.9rem 0rem;
	}

	.wc-site-information {
		display: flex;
		align-items: center;
		height: 100%;

		@media (max-width: 767px) {
			justify-content: space-between;
		}

		.wc-information-item {
			font-size: 0.875rem;
			margin-right: 2.25rem;

			@media (max-width: 767px) {
				justify-content: space-between;
			}

			@media screen and (min-width: 768px) and (max-width: 1024px) {
				margin-right: 1.5rem;
			}

			@media (max-width: 767px) {
				margin-right: 0rem;
			}
			a {
				color: var(--pure-white-color);
				font-size: 0.9rem;
				i {
					margin-right: 0.688rem;
				}
				&:hover {
					color: var(--wc-primary-color);
				}
			}
		}
	}
	@media (max-width: 767px) {
		.wc-btn-quotet {
			display: none;
		}
	}
	.wc-social-information {
		display: flex;
		justify-content: end;
		align-items: center;
		@media (max-width: 767px) {
			justify-content: center;
		}
	}
}

.wc-social-icon {
	display: flex;
	a {
		&:focus {
			color: var(--wc-primary-color);
			outline: 1px dotted white;
		}

		i {
			@media screen and (min-width: 768px) and (max-width: 1024px) {
				padding-right: 0.938rem;
			}
			color: var(--pure-white-color);
			font-size: 1.125rem;
			padding: 0 10px;

			&:hover {
				color: var(--wc-primary-color);
			}
		}
	}
}

//Start Header Bottom Area
.header-bottom-area {
	.navbar {
		padding: 11px 0;
	}

	.navbar-nav {
		// align-items: center;
		@media (max-width: 767px) {
			align-items: flex-start;
		}

		.nav-item {
			font-family: var(--wc-heading-font);
			font-size: 1rem;
			font-weight: 500;
			margin-left: 1.25rem;
			a {
				color: var(--wc-dark-gray-color);
			}
			.nav-link.active {
				color: var(--wc-primary-color);
			}
		}
		.dropdown-menu,
		.sub-menu {
			display: none;
			width: 200px;
			border: 0;
			box-shadow: 0px 7px 55px rgba(9, 16, 20, 0.08);
			&.show {
				display: block;
			}
			@media (min-width: 992px) {
				display: block;
				opacity: 0;
				visibility: hidden;
				transition: all 0.3s ease;
			}
			li {
				&:hover {
					> a {
						background-color: var(--wc-primary-color);
						color: var(--pure-white-color);
					}
				}
			}
		}
		.sub-menu {
			background-color: var(--pure-white-color);
			position: absolute;
			top: 50px;
			margin-top: 0;
			left: 0;
			li {
				margin: 0;
			}
		}
		li {
			position: relative;

			&:hover,
			&:focus-within {
				> .dropdown-menu,
				> .sub-menu {
					opacity: 1;
					visibility: visible;
				}
				> a {
					color: var(--wc-primary-color);
				}
			}
		}
		.dropdown-item {
			padding: 10px 15px;
			color: var(--wc-dark-gray-color);
		}
		
		.dropdown-submenu {
			position: relative;
			& > .dropdown-menu,
			& > .sub-menu {
				top: 0;
				margin-top: -0.313rem;
				left: 100%;
			}
		}
	}
}

.wc-header-search-wrapper {
	position: relative;
	.wc-search-form-wrapper {
		position: absolute;
		width: 300px;
		background: #fff;
		right: 0;
		top: calc(100% + 6px);
		border: 1px solid var(--wc-white-gray-color);
		padding: 15px;
		border-radius: 3px;
		box-shadow: 0px 7px 55px rgba(9, 16, 20, 0.08);
		transition: all 0.3s ease;
		z-index: 1;
		opacity: 0;
		visibility: hidden;
		&.active {
			opacity: 1;
			visibility: visible;
		}
	}
	.wc-search-form {
		position: relative;
		.form-control {
			font-size: 1rem;
			border-radius: 0;
		}
		.wc-header-search-button {
			position: absolute;
			right: 0;
			top: 0;
			width: 42px;
			height: 42px;
			background: var(--wc-primary-color);
			color: var(--pure-white-color);
			transition: all 0.3s ease;
			&:hover {
				background: var(--wc-dark-gray-color);
			}
		}
	}
}
.wc-search-toggle {
	cursor: pointer;
	margin-left: 55px;
	i {
		font-size: 25px;
		color: var(--wc-dark-gray-color);
		&:hover {
			color: var(--wc-primary-color);
		}
	}
}

.wc-section.header-area {
	z-index: 9;
	position: relative;
}

.wc-btn-quotet:focus {
	background-color: white;
	color: inherit;
}
button:focus {
	outline: 1px dotted;
}