/* Fonts */
:root {
	--font-default: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--font-primary: "Montserrat", sans-serif;
	--font-secondary: "Raleway", sans-serif;
}

/* Colors */
:root {
	--color-default: #2b180d;
	--color-primary: #56b8e6;
	--color-secondary: #1b2f45;
}

/* Smooth scroll behavior */
:root {
	scroll-behavior: smooth;
}

header {
	transition: all 0.5s;
	z-index: 997;
	padding: 0 0;
	background-color: rgba(27, 47, 69, 1);

	@media (max-width: 1200px) {
		padding: 12px 0;
	}

	.sticked {
		background-color: rgba(27, 47, 69, 1);
		padding: 12px 0;
	}

	.logo img {
		max-height: 40px;
		margin-right: 6px;
	}

	.logo span {
		font-size: 30px;
		font-weight: 700;
		color: #fff;
		font-family: var(--font-secondary);
		margin: 0;
	}

	@media (min-width: 1280px) {
		.navbar {
			padding: 0;
		}

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

		.navbar li {
			position: relative;
		}

		.navbar a,
		.navbar a:focus {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15px 0 15px 30px;
			font-family: var(--font-default);
			font-size: 15px;
			font-weight: 500;
			color: rgba(255, 255, 255, 0.6);
			white-space: nowrap;
			transition: 0.3s;
		}

		.navbar a i,
		.navbar a:focus i {
			font-size: 12px;
			line-height: 0;
			margin-left: 5px;
		}

		.navbar a:hover,
		.navbar .active,
		.navbar .active:focus,
		.navbar li:hover > a {
			color: #fff;
		}

		.navbar .dropdown ul {
			display: block;
			position: absolute;
			left: 14px;
			top: calc(100% + 30px);
			margin: 0;
			padding: 10px 0;
			z-index: 99;
			opacity: 0;
			visibility: hidden;
			background: #fff;
			box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
			transition: 0.2s;
		}

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

		.navbar .dropdown ul a {
			padding: 10px 20px;
			font-size: 15px;
			text-transform: none;
			color: var(--color-secondary);
		}

		.navbar .dropdown ul a i {
			font-size: 12px;
		}

		.navbar .dropdown ul a:hover,
		.navbar .dropdown ul .active:hover,
		.navbar .dropdown ul li:hover > a {
			color: var(--color-primary);
		}

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

		.navbar .dropdown .dropdown ul {
			top: 0;
			left: calc(100% - 30px);
			visibility: hidden;
		}

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

	@media (min-width: 1280px) and (max-width: 1366px) {
		.navbar .dropdown .dropdown ul {
			left: -90%;
		}

		.navbar .dropdown .dropdown:hover > ul {
			left: -100%;
		}
	}

	@media (min-width: 1280px) {

		.mobile-nav-show,
		.mobile-nav-hide {
			display: none;
		}
	}

	/*--------------------------------------------------------------
	# Mobile Navigation
	--------------------------------------------------------------*/
	@media (max-width: 1279px) {
		.navbar {
			position: fixed;
			top: 0;
			right: -100%;
			width: 100%;
			max-width: 400px;
			bottom: 0;
			transition: 0.3s;
			z-index: 9997;
		}

		.navbar ul {
			position: absolute;
			inset: 0;
			padding: 50px 0 10px 0;
			margin: 0;
			background: rgba(27, 47, 69, 0.9);
			overflow-y: auto;
			transition: 0.3s;
			z-index: 9998;
		}

		.navbar a,
		.navbar a:focus {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 20px;
			font-family: var(--font-default);
			font-size: 15px;
			font-weight: 600;
			color: rgba(255, 255, 255, 0.7);
			white-space: nowrap;
			transition: 0.3s;
		}

		.navbar a i,
		.navbar a:focus i {
			font-size: 12px;
			line-height: 0;
			margin-left: 5px;
		}

		.navbar a:hover,
		.navbar .active,
		.navbar .active:focus,
		.navbar li:hover > a {
			color: #fff;
		}

		.navbar .dropdown ul,
		.navbar .dropdown .dropdown ul {
			position: static;
			display: none;
			padding: 10px 0;
			margin: 10px 20px;
			background-color: rgba(20, 35, 51, 0.6);
		}

		.navbar .dropdown > .dropdown-active,
		.navbar .dropdown .dropdown > .dropdown-active {
			display: block;
		}

		.mobile-nav-show {
			color: rgba(255, 255, 255, 0.9);
			font-size: 28px;
			cursor: pointer;
			line-height: 0;
			transition: 0.5s;
		}

		.mobile-nav-hide {
			color: rgba(255, 255, 255, 0.9);
			font-size: 32px;
			cursor: pointer;
			line-height: 0;
			transition: 0.5s;
			position: fixed;
			right: 15px;
			top: 15px;
			z-index: 9999;
		}

		.mobile-nav-active {
			overflow: hidden;
		}

		.mobile-nav-active .navbar {
			right: 0;
		}

		.mobile-nav-active .navbar:before {
			content: "";
			position: fixed;
			inset: 0;
			background: rgba(27, 47, 69, 0.7);
			z-index: 9996;
		}
	}
}

header + * {
	padding-top: 76px;
}