/*
	Gamang Labs brand overrides.
	Layered on top of main.css (Hyperspace by HTML5 UP).
*/

:root {
	--gamang-yellow: #FFE800;
	--gamang-yellow-soft: #FFF6A8;
	--gamang-cream: #FFFAE3;
	--gamang-green: #1FA532;
	--gamang-green-deep: #178126;
	--gamang-blue: #2A78D2;
	--gamang-black: #111111;
	--gamang-ink: rgba(17, 17, 17, 0.78);
}

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap');

/* Type */

body {
	background: var(--gamang-yellow);
}

body, input, select, textarea {
	color: var(--gamang-ink);
	font-family: 'Nunito', 'Avenir Next', Arial, Helvetica, sans-serif;
}

a {
	border-bottom-color: rgba(17, 17, 17, 0.35);
	color: inherit;
}

	a:hover {
		color: var(--gamang-green-deep);
	}

strong, b {
	color: var(--gamang-black);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--gamang-black);
	font-weight: 800;
	letter-spacing: -0.01em;
}

h1 {
	font-size: 3.25em;
	letter-spacing: -0.02em;
}

	h1.major:after {
		background-image: linear-gradient(to right, var(--gamang-green), var(--gamang-blue));
	}

/* Wrappers */

.wrapper.style1 {
	background-color: var(--gamang-yellow);
	color: var(--gamang-black);
}

.wrapper.style1-alt {
	background-color: var(--gamang-black);
	color: rgba(255, 255, 255, 0.72);
}

.wrapper.style2 {
	background-color: #ffffff;
	color: var(--gamang-black);
}

.wrapper.style2-alt {
	background-color: var(--gamang-cream);
	color: var(--gamang-black);
}

.wrapper.style3 {
	background-color: var(--gamang-black);
	color: rgba(255, 255, 255, 0.72);
}

.wrapper.style3-alt {
	background-color: var(--gamang-green);
	color: #ffffff;
}

	.wrapper.style3 h1,
	.wrapper.style3 h2,
	.wrapper.style3 h3,
	.wrapper.style3 h4,
	.wrapper.style3 strong,
	.wrapper.style3 b,
	.wrapper.style1-alt h1,
	.wrapper.style1-alt h2,
	.wrapper.style1-alt h3,
	.wrapper.style1-alt h4,
	.wrapper.style1-alt strong,
	.wrapper.style1-alt b {
		color: var(--gamang-yellow);
	}

	.wrapper.style3 a,
	.wrapper.style1-alt a {
		color: #ffffff;
		border-bottom-color: rgba(255, 255, 255, 0.4);
	}

		.wrapper.style3 a:hover,
		.wrapper.style1-alt a:hover {
			color: var(--gamang-yellow);
		}

/* Intro hero */

#intro h1 {
	font-size: 4em;
	margin-bottom: 0.4em;
}

	@media screen and (max-width: 736px) {
		#intro h1 { font-size: 2.6em; }
	}

.brand-mark {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-bottom: 1.5em;
}

	.brand-mark img {
		width: 6em;
		height: auto;
		filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.12));
	}

	.brand-mark .brand-name {
		font-size: 2em;
		font-weight: 900;
		letter-spacing: -0.02em;
		color: var(--gamang-black);
		line-height: 1;
	}

	.brand-mark .brand-name small {
		display: block;
		font-size: 0.45em;
		font-weight: 600;
		letter-spacing: 0.32em;
		text-transform: uppercase;
		opacity: 0.7;
		margin-top: 0.4em;
	}

.tagline {
	font-size: 1.4em;
	max-width: 28em;
	line-height: 1.5;
	color: rgba(17, 17, 17, 0.85);
}

	.tagline em {
		font-style: normal;
		background: var(--gamang-black);
		color: var(--gamang-yellow);
		padding: 0 0.25em;
		border-radius: 0.15em;
	}

/* Buttons */

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
	border-color: var(--gamang-black) !important;
	color: var(--gamang-black) !important;
	background-color: transparent;
	font-weight: 800;
	letter-spacing: 0.05em;
}

	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover,
	button:hover,
	.button:hover {
		background-color: var(--gamang-black) !important;
		color: var(--gamang-yellow) !important;
	}

	input[type="submit"].primary,
	input[type="reset"].primary,
	input[type="button"].primary,
	button.primary,
	.button.primary {
		background-color: var(--gamang-black) !important;
		color: var(--gamang-yellow) !important;
	}

		input[type="submit"].primary:hover,
		.button.primary:hover {
			background-color: var(--gamang-green-deep) !important;
			color: #ffffff !important;
		}

	.wrapper.style1-alt .button,
	.wrapper.style3 .button,
	#footer .button {
		border-color: var(--gamang-yellow) !important;
		color: var(--gamang-yellow) !important;
	}

		.wrapper.style1-alt .button:hover,
		.wrapper.style3 .button:hover,
		#footer .button:hover {
			background-color: var(--gamang-yellow) !important;
			color: var(--gamang-black) !important;
		}

/* Header / Sidebar */

#header {
	background-color: var(--gamang-black);
}

#sidebar {
	background-color: var(--gamang-black);
}

	#sidebar nav a {
		border: 0;
		color: rgba(255, 255, 255, 0.55);
	}

		#sidebar nav a:hover {
			color: var(--gamang-yellow);
		}

		#sidebar nav a.active {
			color: var(--gamang-yellow);
		}

		#sidebar nav a:before {
			background: rgba(255, 255, 255, 0.12) !important;
		}

		#sidebar nav a:after {
			background-image: linear-gradient(to right, var(--gamang-green), var(--gamang-yellow)) !important;
			background-color: var(--gamang-yellow) !important;
		}

/* Footer */

#footer {
	background-color: var(--gamang-black);
	color: rgba(255, 255, 255, 0.65);
}

	#footer a {
		color: var(--gamang-yellow);
	}

	#footer .menu li {
		border-color: rgba(255, 255, 255, 0.2);
	}

/* Spotlights — clean white panels with bold yellow image columns */

.spotlights > section {
	background-color: #ffffff;
}

	.spotlights > section > .image {
		background-color: var(--gamang-yellow-soft);
	}

	.spotlights > section > .image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.spotlights > section > .image:before {
		background: var(--gamang-black) !important;
	}

	.spotlights > section > .content {
		color: var(--gamang-black);
	}

	.spotlights > section:nth-child(1) {
		background-color: #ffffff;
	}

	.spotlights > section:nth-child(2) {
		background-color: var(--gamang-cream);
	}

	.spotlights > section:nth-child(3) {
		background-color: var(--gamang-yellow-soft);
	}

	.spotlights > section h2,
	.spotlights > section h3 {
		color: var(--gamang-black);
	}

	.spotlights .product-tag {
		display: inline-block;
		font-size: 0.7em;
		font-weight: 800;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		padding: 0.3em 0.8em;
		border-radius: 999px;
		background: var(--gamang-black);
		color: var(--gamang-yellow);
		margin-bottom: 0.8em;
	}

	.spotlights .product-tag.green {
		background: var(--gamang-green);
		color: #ffffff;
	}

	.spotlights .product-tag.blue {
		background: var(--gamang-blue);
		color: #ffffff;
	}

/* Features */

.wrapper.style3 .features section h3 {
	color: var(--gamang-yellow);
}

.wrapper.style1 .icon.major:before,
.wrapper.style1-alt .icon.major:before,
.wrapper.style2 .icon.major:before,
.wrapper.style2-alt .icon.major:before {
	color: var(--gamang-green) !important;
}

.wrapper.style3 .icon.major:before,
.wrapper.style3-alt .icon.major:before {
	color: var(--gamang-yellow) !important;
}

/* Forms */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
select,
textarea {
	background-color: rgba(0, 0, 0, 0.05);
	border-color: rgba(17, 17, 17, 0.3);
	color: var(--gamang-black);
}

	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	input[type="tel"]:focus,
	select:focus,
	textarea:focus {
		border-color: var(--gamang-black);
	}

label {
	color: var(--gamang-black);
}

::-webkit-input-placeholder { color: rgba(17, 17, 17, 0.45) !important; }
:-ms-input-placeholder { color: rgba(17, 17, 17, 0.45) !important; }
::placeholder { color: rgba(17, 17, 17, 0.45) !important; }

/* Contact list */

.contact h3 {
	color: var(--gamang-black);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-size: 0.8em;
}

ul.icons li a {
	border: 1px solid rgba(17, 17, 17, 0.25);
	color: var(--gamang-black) !important;
}

	ul.icons li a:hover {
		background: var(--gamang-black);
		color: var(--gamang-yellow) !important;
		border-color: var(--gamang-black);
	}

/* Floating decorative dots — subtle brand flourish */

.wrapper.style1 > .inner {
	position: relative;
}

#intro:before,
#intro:after {
	content: '';
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}

#intro:before {
	width: 14em;
	height: 14em;
	background: rgba(31, 165, 50, 0.14);
	top: -4em;
	right: -4em;
}

#intro:after {
	width: 9em;
	height: 9em;
	background: rgba(17, 17, 17, 0.06);
	bottom: 2em;
	left: -3em;
}

#intro > .inner {
	position: relative;
	z-index: 1;
}