/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
	--background-color: rgba(255, 255, 255, 0);
	color: var(--contrast-color);
	transition: all 0.3s;
	z-index: 997;
	background-color: var(--background-color);
	overflow: visible;
	height: 110px;
}

body.scrolled .header {
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

@media (max-width: 1199px) {
	.header {
		height: 100px;
	}
}

.header--unpinned {
	transform: translateY(-150%);
	transition: transform 0.3s;
}

.header:hover {
	color: var(--contrast-color);
	background-color: rgba(255, 255, 255, 0.7);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.header:hover .navmenu a,
.header:hover .navmenu a:active,
.header:hover .navmenu a:focus {
	color: var(--default-color);
}

.header:hover .navmenu a:hover,
.header:hover .navmenu a:active:hover,
.header:hover .navmenu a:focus:hover {
	color: var(--contrast-color);
}

.header .topbar {
	width: 100%;
	background-color: transparent;
	height: 36px;
	padding: 0;
	font-size: .8rem;
	transition: all 0.3s;
}

body.scrolled .header .topbar {
	opacity: 0;
}

.header .topbar .contact-info {
	padding: .75rem 0 0 .5rem;
}

.header .topbar .contact-info span {
	font-size: .9rem;
	font-family: var(--heading-font);
	color: var(--contrast-color);
	transition: all .3s;
}

.header .topbar .contact-info span:hover {
	color: var(--default-color);
}

.header .topbar .contact-info i {
	font-style: normal;
	color: var(--contrast-color);
}

.header .topbar .contact-info i a,
.header .topbar .contact-info i span {
	padding-left: .75rem;
	color: var(--contrast-color);
}

@media (max-width: 575px) {
	.header .topbar .contact-info i a,
	.header .topbar .contact-info i span {
		font-size: .8rem;
	}
}

.header .topbar .contact-info i a {
	line-height: 0;
	transition: all .3s;
}

.header .topbar .contact-info i a:hover {
	color: var(--contrast-color);
	text-decoration: underline;
}

.header .topbar .social-links a {
	font-weight: 400;
	color: color-mix(in srgb, var(--contrast-color), transparent 40%);
	/*line-height: 0;*/
	transition: all .3s;
	margin-left: 20px;
}

.header .topbar .social-links a:hover {
	color: var(--contrast-color);
}

.header:hover .topbar .contact-info span {
	color: #444 !important;
}
.header:hover .topbar .social-links a,
.header:hover .topbar .social-links a i {
	color: #4c1130 !important;
	transition: all .3s;
}
.header:hover .topbar .social-links a:hover,
.header:hover .topbar .social-links a:hover i {
	color: var(--accent-color) !important;
}

body.scrolled .header {
	box-shadow: 0 0 18px rgba(0, 0, 0, 0.1);
	height: 64px;
}

body.scrolled .header .topbar {
	height: 0;
	visibility: hidden;
	overflow: hidden;
}

body.scrolled.mobile-nav-active .header--unpinned {
	transform: translateY(0);
	opacity: 1 !important;
}

.header .branding {
	padding: 8px;
}

.header .logo {
	line-height: 1;
}

.header .logo img {
	width: auto;
	height: 58px;
	filter: brightness(5);
	transition: all 0.3s;
}

@media (max-width: 1199px) {
	.header .logo img {
		height: 48px;
	}
}

.header .logo h1 {
	font-size: 30px;
	margin: 0;
	font-weight: 200;
	color: var(--contrast-color);
}

body.scrolled .header .logo img,
.header:hover .logo img {
	filter: brightness(1);
}

body.scrolled .header .logo img {
	height: 48px;
}

/* Global Header on Scroll
------------------------------*/
.scrolled .header {
	--background-color: rgba(255, 255, 255, 0.4);
	--nav-color: #444444;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
	.navmenu {
		padding: 0;
	}

	.navmenu ul {
		margin: 0;
		padding: 0;
		display: flex;
		list-style: none;
		align-items: center;
	}

	.navmenu li {
		position: relative;
	}
	
	.navmenu li .dropdown-divider {
		border-top: 1px solid #ccc;
		margin: .5rem 0;
	}

	.navmenu a,
	.navmenu a:focus {
		color: var(--nav-color);
		padding: .75rem 1.125rem;
		margin-left: 0.25rem;
		border-radius: 1.25rem;
		font-size: .825rem;
		font-family: var(--nav-font);
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: space-between;
		white-space: nowrap;
		transition: .3s;
	}

	.navmenu a i,
	.navmenu a:focus i {
		font-size: .7rem;
		line-height: 0;
		margin-left: 5px;
		transition: .3s;
	}

	.navmenu li:hover>a,
	.navmenu .active:focus,
	.navmenu a:hover,
	.navmenu .active,
	.navmenu li:hover>a {
		color: #fff !important;
		background-color: color-mix(in srgb, var(--bs-black), transparent 80%);
	}

	.navmenu .dropdown ul {
		margin: 0;
		padding: .5rem;
		background: var(--nav-dropdown-background-color);
		border-radius: 1.25rem;
		display: block;
		position: absolute;
		visibility: hidden;
		left: 2px;
		top: 130%;
		opacity: 0;
		transition: .3s;
		z-index: 99;
		box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
	}

	.navmenu .dropdown ul li {
		min-width: 200px;
	}

	.navmenu .dropdown ul a {
		padding: .5rem 1rem;
		margin: 0;
		font-size: .8rem;
		line-height: 1.5;
		text-transform: none;
		color: var(--nav-dropdown-color);
	}

	.navmenu .dropdown ul a i {
		font-size: .7rem;
	}

	.navmenu .dropdown ul a:hover,
	.navmenu .dropdown ul .active,
	.navmenu .dropdown ul li:hover>a {
		color: #fff !important;
		background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
	}

	.navmenu .dropdown>ul {
		margin: 0;
	}

	.navmenu .dropdown:hover>ul {
		opacity: 1;
		top: 100%;
		visibility: visible;
	}

	.navmenu .dropdown .dropdown ul {
		top: 0;
		left: -90%;
		visibility: hidden;
	}

	.navmenu .dropdown .dropdown:hover>ul {
		opacity: 1;
		top: 0;
		left: -100%;
		visibility: visible;
	}
}

/* Mobile Navigation */
@media (max-width: 1199px) {

	/*--------------------------------------------------------------
	# Global Navigation
	--------------------------------------------------------------*/
	.mobile-nav-toggle {
		display: block;
		position: fixed;
		top: 44px;
		right: 10px;
		width: 48px;
		height: 48px;
		background-color: var(--accent-color);
		border-radius: 50px;
		cursor: pointer;
		pointer-events: auto;
		overflow: visible;
		z-index: 9999;
		transition: all 0.3s;
	}

	.mobile-nav-toggle i {
		display: block;
		color: rgb(255, 255, 255);
		font-size: 1.5rem;
		line-height: 1;
	}

	.mobile-nav-toggle span {
		display: inline-block;
		position: absolute;
		height: 1px;
		background: #fff;
		transition: all 0.3s;
	}

	.mobile-nav-toggle span:nth-of-type(1) {
		top: 40%;
		left: 30%;
		width: 40%;
	}

	.mobile-nav-toggle span:nth-of-type(2) {
		top: 50%;
		left: 30%;
		width: 40%;
	}

	.mobile-nav-toggle span:nth-of-type(3) {
		top: 60%;
		left: 30%;
		width: 40%;
	}

	.mobile-nav-toggle:hover {
		background-color: var(--nav-hover-color);
		filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
	}

	body.scrolled .mobile-nav-toggle {
		top: 10px;
	}

	body.scrolled .mobile-nav-toggle:hover {
		filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
	}

	body.mobile-nav-active .mobile-nav-toggle span:nth-of-type(1) {
		top: 50%;
		left: 25%;
		width: 50%;
		transform: rotate(-135deg);
	}

	body.mobile-nav-active .mobile-nav-toggle span:nth-of-type(2) {
		transform: translateX(50%);
		opacity: 0;
	}

	body.mobile-nav-active .mobile-nav-toggle span:nth-of-type(3) {
		top: 50%;
		left: 25%;
		width: 50%;
		transform: rotate(135deg);
	}
}

@media (max-width: 1199px) and (max-width: 1199px) {
	.mobile-nav-toggle {
		width: 44px;
		height: 44px;
	}
}

@media (max-width: 1199px) {
	.navmenu {
		position: fixed;
		top: 0;
		right: 0;
		width: 100vw;
		height: 100vh;
		pointer-events: none;
		overflow: visible;
		padding: 0;
		z-index: 9997;
		transition: all .3s;
	}

	.navmenu ul {
		width: 100%;
		display: none;
		list-style: none;
		position: absolute;
		padding: 30px 20px 80px;
		margin: 0;
		border-radius: 0;
		background-color: rgba(255, 255, 255, 0.9);
		overflow-y: auto;
		pointer-events: auto;
		transition: all .3s;
		z-index: 9998;
		box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
	}

	.navmenu>ul {
		height: 100%;
	}
}

@media (max-width: 1199px) and (min-width: 768px) {
	.navmenu>ul {
		position: absolute;
		width: 60vw;
		right: 0;
	}
}

@media (max-width: 1199px) {

	.navmenu li .dropdown-divider {
		border-top: 1px solid #ccc;
		margin: .5rem 0;
	}

	.navmenu a,
	.navmenu a:focus {
		color: var(--nav-dropdown-color);
		padding: .75rem 1rem;
		font-family: var(--nav-font);
		font-size: 1rem;
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: space-between;
		white-space: nowrap;
		transition: .3s;
	}

	.navmenu a i,
	.navmenu a:focus i {
		font-size: .8rem;
		line-height: 0;
		margin-left: 5px;
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		transition: .3s;
		background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
	}

	.navmenu a i:hover,
	.navmenu a:focus i:hover {
		background-color: var(--accent-color);
		color: var(--contrast-color);
	}

	.navmenu a:hover,
	.navmenu .active,
	.navmenu .active:focus {
		color: var(--accent-color) !important;
	}

	.navmenu .active i,
	.navmenu .active:focus i {
		background-color: var(--accent-color);
		color: var(--contrast-color);
		transform: rotate(180deg);
	}

	.navmenu .dropdown ul {
		position: static;
		display: none;
		z-index: 99;
		padding: .75rem;
		border-radius: 1rem;
		margin: 0 0 0.75rem;
		background-color: var(--contrast-color) !important;
		border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
		box-shadow: none;
		transition: all .3s;
	}

	.navmenu .dropdown ul ul {
		background-color: rgba(33, 37, 41, 0.1);
	}

	.navmenu .dropdown ul a {
		padding: .6rem 1rem;
		font-size: .85rem;
	}

	.navmenu .dropdown>.dropdown-active {
		display: block;
		background-color: rgba(33, 37, 41, 0.03);
	}

	.mobile-nav-active .mobile-nav-toggle {
		background-color: var(--accent-color);
		margin-right: 0;
		overflow: hidden;
	}

	.mobile-nav-active .mobile-nav-toggle:hover {
		background-color: var(--accent-color);
	}

	.mobile-nav-active .navmenu {
		position: fixed;
		overflow: hidden;
		inset: 0;
		background: rgba(33, 37, 41, 0.8);
		transition: .3s;
	}

	.mobile-nav-active .navmenu>ul {
		display: block;
	}
}