@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: local('Roboto Light'), local('Roboto-Light'), local('Roboto 300'), url('/assets/webfonts/Roboto-Light.woff2') format('woff2');
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Roboto'), local('Roboto Regular'), local('Roboto-regular'), local('Roboto 400'), url('/assets/webfonts/Roboto-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: local('Roboto Medium'), local('Roboto-Medium'), local('Roboto 500'), url('/assets/webfonts/Roboto-Medium.woff2') format('woff2');
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local('Roboto Bold'), local('Roboto-Bold'), local('Roboto 700'), url('/assets/webfonts/Roboto-Bold.woff2') format('woff2');
}

/* Font Awesome */
/* @import url('/assets/css/all.min.css'); */

/* CSS Reset */
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

html {
	scroll-behavior: smooth;
}
  

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	html, body {
		background: #1c1d26;
	}

	body.is-preload *, body.is-preload *:before, body.is-preload *:after {
		-moz-animation: none !important;
		-webkit-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
		-moz-transition: none !important;
		-webkit-transition: none !important;
		-ms-transition: none !important;
		transition: none !important;
	}

	body, input, select, textarea {
		color: rgba(255, 255, 255, 0.75);
		font-family: "Roboto", Helvetica, sans-serif;
		font-size: 15pt;
		font-weight: 300;
		line-height: 1.75em;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
	}

	a {
		-moz-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
		border-bottom: dotted 1px;
		color: #00a9ff;
		text-decoration: none;
	}

		a:hover {
			color: #00a9ff !important;
			border-bottom-color: transparent;
		}

	strong, b {
		color: #ffffff;
		font-weight: 400;
	}

	em, i {
		font-style: italic;
	}

	p {
		margin: 0 0 2em 0;
	}

	/* Reduce margin for paragraphs directly inside list items */
	li > p {
		margin-bottom: 0;
	}

	h1, h2, h3, h4, h5, h6 {
		color: #ffffff;
		font-weight: 300;
		line-height: 1em;
		margin: 0 0 1em 0;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			border: 0;
		}

    h1 {
		font-size: 2em;
		line-height: 1.5em;
		letter-spacing: -0.025em;
	}

	h2 {
		font-size: 2em;
		line-height: 1.5em;
		letter-spacing: -0.025em;
	}

	h3 {
		font-size: 1.35em;
		line-height: 1.5em;
	}

	h4 {
		font-size: 1.1em;
		line-height: 1.5em;
	}

	h5 {
		font-size: 0.9em;
		line-height: 1.5em;
	}

	h6 {
		font-size: 0.7em;
		line-height: 1.5em;
	}

	/* Responsive Heading Adjustments */
	@media (max-width: 768px) {
	    h1 {
	    	font-size: 1.6em;
	    	line-height: 1.35em;
	    	margin-bottom: 0.8em;
	    }
	
	    h2 {
	    	font-size: 1.35em;
	    	line-height: 1.4em;
	    	margin-bottom: 0.75em;
	    }
	
	    h3 {
	    	font-size: 1.15em;
	    	line-height: 1.45em;
	    	margin-bottom: 0.7em;
	    }
	
	    h4 {
	    	font-size: 1em;
	    	line-height: 1.5em;
	    	margin-bottom: 0.6em;
	    }
	
	    h5,
	    h6 {
	    	font-size: 0.9em;
	    	line-height: 1.5em;
	    	margin-bottom: 0.5em;
	    }
		h2, h3 { scroll-margin-top: 80px; }
	}


	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.5em;
	}

	sup {
		font-size: 0.8em;
		position: relative;
		top: -0.5em;
	}

	hr {
		border: 0;
		border-bottom: solid 1px rgba(255, 255, 255, 0.3);
		margin: 3em 0;
	}

		hr.major {
			margin: 4em 0;
		}

	blockquote {
		border-left: solid 4px rgba(255, 255, 255, 0.3);
		font-style: italic;
		margin: 0 0 2em 0;
		padding: 0.5em 0 0.5em 2em;
	}

	code {
		background: rgba(255, 255, 255, 0.075);
		border-radius: 4px;
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0.25em;
		padding: 0.25em 0.65em;
	}

	pre {
		-webkit-overflow-scrolling: touch;
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0 2em 0;
	}

		pre code {
			display: block;
			line-height: 1.75em;
			padding: 1em 1.5em;
			overflow-x: auto;
		}

	.align-left {
		text-align: left;
	}

	.align-center {
		text-align: center;
	}

	.align-right {
		text-align: right;
	}

/* Loader */

	@-moz-keyframes spinner-show {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-webkit-keyframes spinner-show {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-ms-keyframes spinner-show {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes spinner-show {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-moz-keyframes spinner-hide {
		0% {
			color: rgba(255, 255, 255, 0.15);
			z-index: 100001;
			-moz-transform: scale(1) rotate(0deg);
			-webkit-transform: scale(1) rotate(0deg);
			-ms-transform: scale(1) rotate(0deg);
			transform: scale(1) rotate(0deg);
		}

		99% {
			color: #1c1d26;
			z-index: 100001;
			-moz-transform: scale(0.5) rotate(360deg);
			-webkit-transform: scale(0.5) rotate(360deg);
			-ms-transform: scale(0.5) rotate(360deg);
			transform: scale(0.5) rotate(360deg);
		}

		100% {
			color: #1c1d26;
			z-index: -1;
			-moz-transform: scale(0.5) rotate(360deg);
			-webkit-transform: scale(0.5) rotate(360deg);
			-ms-transform: scale(0.5) rotate(360deg);
			transform: scale(0.5) rotate(360deg);
		}
	}

	@-webkit-keyframes spinner-hide {
		0% {
			color: rgba(255, 255, 255, 0.15);
			z-index: 100001;
			-moz-transform: scale(1) rotate(0deg);
			-webkit-transform: scale(1) rotate(0deg);
			-ms-transform: scale(1) rotate(0deg);
			transform: scale(1) rotate(0deg);
		}

		99% {
			color: #1c1d26;
			z-index: 100001;
			-moz-transform: scale(0.5) rotate(360deg);
			-webkit-transform: scale(0.5) rotate(360deg);
			-ms-transform: scale(0.5) rotate(360deg);
			transform: scale(0.5) rotate(360deg);
		}

		100% {
			color: #1c1d26;
			z-index: -1;
			-moz-transform: scale(0.5) rotate(360deg);
			-webkit-transform: scale(0.5) rotate(360deg);
			-ms-transform: scale(0.5) rotate(360deg);
			transform: scale(0.5) rotate(360deg);
		}
	}

	@-ms-keyframes spinner-hide {
		0% {
			color: rgba(255, 255, 255, 0.15);
			z-index: 100001;
			-moz-transform: scale(1) rotate(0deg);
			-webkit-transform: scale(1) rotate(0deg);
			-ms-transform: scale(1) rotate(0deg);
			transform: scale(1) rotate(0deg);
		}

		99% {
			color: #1c1d26;
			z-index: 100001;
			-moz-transform: scale(0.5) rotate(360deg);
			-webkit-transform: scale(0.5) rotate(360deg);
			-ms-transform: scale(0.5) rotate(360deg);
			transform: scale(0.5) rotate(360deg);
		}

		100% {
			color: #1c1d26;
			z-index: -1;
			-moz-transform: scale(0.5) rotate(360deg);
			-webkit-transform: scale(0.5) rotate(360deg);
			-ms-transform: scale(0.5) rotate(360deg);
			transform: scale(0.5) rotate(360deg);
		}
	}

	@keyframes spinner-hide {
		0% {
			color: rgba(255, 255, 255, 0.15);
			z-index: 100001;
			-moz-transform: scale(1) rotate(0deg);
			-webkit-transform: scale(1) rotate(0deg);
			-ms-transform: scale(1) rotate(0deg);
			transform: scale(1) rotate(0deg);
		}

		99% {
			color: #1c1d26;
			z-index: 100001;
			-moz-transform: scale(0.5) rotate(360deg);
			-webkit-transform: scale(0.5) rotate(360deg);
			-ms-transform: scale(0.5) rotate(360deg);
			transform: scale(0.5) rotate(360deg);
		}

		100% {
			color: #1c1d26;
			z-index: -1;
			-moz-transform: scale(0.5) rotate(360deg);
			-webkit-transform: scale(0.5) rotate(360deg);
			-ms-transform: scale(0.5) rotate(360deg);
			transform: scale(0.5) rotate(360deg);
		}
	}

	@-moz-keyframes spinner-rotate {
		0% {
			-moz-transform: scale(1) rotate(0deg);
			-webkit-transform: scale(1) rotate(0deg);
			-ms-transform: scale(1) rotate(0deg);
			transform: scale(1) rotate(0deg);
		}

		100% {
			-moz-transform: scale(1) rotate(360deg);
			-webkit-transform: scale(1) rotate(360deg);
			-ms-transform: scale(1) rotate(360deg);
			transform: scale(1) rotate(360deg);
		}
	}

	@-webkit-keyframes spinner-rotate {
		0% {
			-moz-transform: scale(1) rotate(0deg);
			-webkit-transform: scale(1) rotate(0deg);
			-ms-transform: scale(1) rotate(0deg);
			transform: scale(1) rotate(0deg);
		}

		100% {
			-moz-transform: scale(1) rotate(360deg);
			-webkit-transform: scale(1) rotate(360deg);
			-ms-transform: scale(1) rotate(360deg);
			transform: scale(1) rotate(360deg);
		}
	}

	@-ms-keyframes spinner-rotate {
		0% {
			-moz-transform: scale(1) rotate(0deg);
			-webkit-transform: scale(1) rotate(0deg);
			-ms-transform: scale(1) rotate(0deg);
			transform: scale(1) rotate(0deg);
		}

		100% {
			-moz-transform: scale(1) rotate(360deg);
			-webkit-transform: scale(1) rotate(360deg);
			-ms-transform: scale(1) rotate(360deg);
			transform: scale(1) rotate(360deg);
		}
	}

	@keyframes spinner-rotate {
		0% {
			-moz-transform: scale(1) rotate(0deg);
			-webkit-transform: scale(1) rotate(0deg);
			-ms-transform: scale(1) rotate(0deg);
			transform: scale(1) rotate(0deg);
		}

		100% {
			-moz-transform: scale(1) rotate(360deg);
			-webkit-transform: scale(1) rotate(360deg);
			-ms-transform: scale(1) rotate(360deg);
			transform: scale(1) rotate(360deg);
		}
	}

	@-moz-keyframes overlay-hide {
		0% {
			opacity: 1;
			z-index: 100000;
		}

		15% {
			opacity: 1;
			z-index: 100000;
		}

		99% {
			opacity: 0;
			z-index: 100000;
		}

		100% {
			opacity: 0;
			z-index: -1;
		}
	}

	@-webkit-keyframes overlay-hide {
		0% {
			opacity: 1;
			z-index: 100000;
		}

		15% {
			opacity: 1;
			z-index: 100000;
		}

		99% {
			opacity: 0;
			z-index: 100000;
		}

		100% {
			opacity: 0;
			z-index: -1;
		}
	}

	@-ms-keyframes overlay-hide {
		0% {
			opacity: 1;
			z-index: 100000;
		}

		15% {
			opacity: 1;
			z-index: 100000;
		}

		99% {
			opacity: 0;
			z-index: 100000;
		}

		100% {
			opacity: 0;
			z-index: -1;
		}
	}

	@keyframes overlay-hide {
		0% {
			opacity: 1;
			z-index: 100000;
		}

		15% {
			opacity: 1;
			z-index: 100000;
		}

		99% {
			opacity: 0;
			z-index: 100000;
		}

		100% {
			opacity: 0;
			z-index: -1;
		}
	}

	body.landing {
		text-decoration: none;
	}

	body.landing:before {
		background: url('/images/icons/spinner.svg') no-repeat center center;
		background-size: 48px 48px;
		display: block;
		position: fixed;
		top: 50%;
		left: 50%;
		width: 48px;
		height: 48px;
		margin: -24px 0 0 -24px;
		z-index: 100001;
		animation: spinner-show 1.5s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
		content: '';
		opacity: 0;
		pointer-events: none;
	}
	

		body.landing:after {
			-moz-animation: overlay-hide 1.5s ease-in forwards !important;
			-webkit-animation: overlay-hide 1.5s ease-in forwards !important;
			-ms-animation: overlay-hide 1.5s ease-in forwards !important;
			animation: overlay-hide 1.5s ease-in forwards !important;
			background: #1c1d26;
			content: '';
			display: block;
			height: 100%;
			left: 0;
			opacity: 0;
			position: fixed;
			top: 0;
			width: 100%;
			z-index: -1;
		}

		body.landing.is-preload:before {
			-moz-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
			-webkit-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
			-ms-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
			animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
			z-index: 100001;
		}

		body.landing.is-preload:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			opacity: 1;
			z-index: 100000;
		}

	@media (-webkit-min-device-pixel-ratio: 2) {

		body.landing:before {
			line-height: 2.025em;
		}

	}

/* Container */

	.container {
		margin: 0 auto;
		max-width: calc(100% - 4em);
		width: 70em;
	}

		.container.xsmall {
			width: 17.5em;
		}

		.container.small {
			width: 35em;
		}

		.container.medium {
			width: 52.5em;
		}

		.container.large {
			width: 87.5em;
		}

		.container.xlarge {
			width: 105em;
		}

		.container.max {
			width: 100%;
		}

		@media screen and (max-width: 1280px) {

			.container {
				width: 90%;
				max-width: 100%;
			}

		}

		@media screen and (max-width: 980px) {

			.container {
				width: 100% !important;
			}

		}

/* Row */

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

		.row > * {
			box-sizing: border-box;
		}

		.row.gtr-uniform > * > :last-child {
			margin-bottom: 0;
		}

		.row.aln-left {
			justify-content: flex-start;
		}

		.row.aln-center {
			justify-content: center;
		}

		.row.aln-right {
			justify-content: flex-end;
		}

		.row.aln-top {
			align-items: flex-start;
		}

		.row.aln-middle {
			align-items: center;
		}

		.row.aln-bottom {
			align-items: flex-end;
		}

		.row > .imp {
			order: -1;
		}

		.row > .col-1 {
			width: 8.33333%;
		}

		.row > .off-1 {
			margin-left: 8.33333%;
		}

		.row > .col-2 {
			width: 16.66667%;
		}

		.row > .off-2 {
			margin-left: 16.66667%;
		}

		.row > .col-3 {
			width: 25%;
		}

		.row > .off-3 {
			margin-left: 25%;
		}

		.row > .col-4 {
			width: 33.33333%;
		}

		.row > .off-4 {
			margin-left: 33.33333%;
		}

		.row > .col-5 {
			width: 41.66667%;
		}

		.row > .off-5 {
			margin-left: 41.66667%;
		}

		.row > .col-6 {
			width: 50%;
		}

		.row > .off-6 {
			margin-left: 50%;
		}

		.row > .col-7 {
			width: 58.33333%;
		}

		.row > .off-7 {
			margin-left: 58.33333%;
		}

		.row > .col-8 {
			width: 66.66667%;
		}

		.row > .off-8 {
			margin-left: 66.66667%;
		}

		.row > .col-9 {
			width: 75%;
		}

		.row > .off-9 {
			margin-left: 75%;
		}

		.row > .col-10 {
			width: 83.33333%;
		}

		.row > .off-10 {
			margin-left: 83.33333%;
		}

		.row > .col-11 {
			width: 91.66667%;
		}

		.row > .off-11 {
			margin-left: 91.66667%;
		}

		.row > .col-12 {
			width: 100%;
		}

		.row > .off-12 {
			margin-left: 100%;
		}

		.row.gtr-0 {
			margin-top: 0;
			margin-left: 0em;
		}

			.row.gtr-0 > * {
				padding: 0 0 0 0em;
			}

			.row.gtr-0.gtr-uniform {
				margin-top: 0em;
			}

				.row.gtr-0.gtr-uniform > * {
					padding-top: 0em;
				}

		.row.gtr-25 {
			margin-top: 0;
			margin-left: -0.625em;
		}

			.row.gtr-25 > * {
				padding: 0 0 0 0.625em;
			}

			.row.gtr-25.gtr-uniform {
				margin-top: -0.625em;
			}

				.row.gtr-25.gtr-uniform > * {
					padding-top: 0.625em;
				}

		.row.gtr-50 {
			margin-top: 0;
			margin-left: -1.25em;
		}

			.row.gtr-50 > * {
				padding: 0 0 0 1.25em;
			}

			.row.gtr-50.gtr-uniform {
				margin-top: -1.25em;
			}

				.row.gtr-50.gtr-uniform > * {
					padding-top: 1.25em;
				}

		.row {
			margin-top: 0;
			margin-left: -2.5em;
		}

			.row > * {
				padding: 0 0 0 2.5em;
			}

			.row.gtr-uniform {
				margin-top: -2.5em;
			}

				.row.gtr-uniform > * {
					padding-top: 2.5em;
				}

		.row.gtr-150 {
			margin-top: 0;
			margin-left: -3.75em;
		}

			.row.gtr-150 > * {
				padding: 0 0 0 3.75em;
			}

			.row.gtr-150.gtr-uniform {
				margin-top: -3.75em;
			}

				.row.gtr-150.gtr-uniform > * {
					padding-top: 3.75em;
				}

		.row.gtr-200 {
			margin-top: 0;
			margin-left: -5em;
		}

			.row.gtr-200 > * {
				padding: 0 0 0 5em;
			}

			.row.gtr-200.gtr-uniform {
				margin-top: -5em;
			}

				.row.gtr-200.gtr-uniform > * {
					padding-top: 5em;
				}

		@media screen and (max-width: 1680px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-xlarge {
					order: -1;
				}

				.row > .col-1-xlarge {
					width: 8.33333%;
				}

				.row > .off-1-xlarge {
					margin-left: 8.33333%;
				}

				.row > .col-2-xlarge {
					width: 16.66667%;
				}

				.row > .off-2-xlarge {
					margin-left: 16.66667%;
				}

				.row > .col-3-xlarge {
					width: 25%;
				}

				.row > .off-3-xlarge {
					margin-left: 25%;
				}

				.row > .col-4-xlarge {
					width: 33.33333%;
				}

				.row > .off-4-xlarge {
					margin-left: 33.33333%;
				}

				.row > .col-5-xlarge {
					width: 41.66667%;
				}

				.row > .off-5-xlarge {
					margin-left: 41.66667%;
				}

				.row > .col-6-xlarge {
					width: 50%;
				}

				.row > .off-6-xlarge {
					margin-left: 50%;
				}

				.row > .col-7-xlarge {
					width: 58.33333%;
				}

				.row > .off-7-xlarge {
					margin-left: 58.33333%;
				}

				.row > .col-8-xlarge {
					width: 66.66667%;
				}

				.row > .off-8-xlarge {
					margin-left: 66.66667%;
				}

				.row > .col-9-xlarge {
					width: 75%;
				}

				.row > .off-9-xlarge {
					margin-left: 75%;
				}

				.row > .col-10-xlarge {
					width: 83.33333%;
				}

				.row > .off-10-xlarge {
					margin-left: 83.33333%;
				}

				.row > .col-11-xlarge {
					width: 91.66667%;
				}

				.row > .off-11-xlarge {
					margin-left: 91.66667%;
				}

				.row > .col-12-xlarge {
					width: 100%;
				}

				.row > .off-12-xlarge {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.625em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.625em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.625em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.625em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -1.25em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 1.25em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -1.25em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 1.25em;
						}

				.row {
					margin-top: 0;
					margin-left: -2.5em;
				}

					.row > * {
						padding: 0 0 0 2.5em;
					}

					.row.gtr-uniform {
						margin-top: -2.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 2.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -3.75em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 3.75em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -3.75em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 3.75em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -5em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 5em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -5em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 5em;
						}

		}

		@media screen and (max-width: 1280px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-large {
					order: -1;
				}

				.row > .col-1-large {
					width: 8.33333%;
				}

				.row > .off-1-large {
					margin-left: 8.33333%;
				}

				.row > .col-2-large {
					width: 16.66667%;
				}

				.row > .off-2-large {
					margin-left: 16.66667%;
				}

				.row > .col-3-large {
					width: 25%;
				}

				.row > .off-3-large {
					margin-left: 25%;
				}

				.row > .col-4-large {
					width: 33.33333%;
				}

				.row > .off-4-large {
					margin-left: 33.33333%;
				}

				.row > .col-5-large {
					width: 41.66667%;
				}

				.row > .off-5-large {
					margin-left: 41.66667%;
				}

				.row > .col-6-large {
					width: 50%;
				}

				.row > .off-6-large {
					margin-left: 50%;
				}

				.row > .col-7-large {
					width: 58.33333%;
				}

				.row > .off-7-large {
					margin-left: 58.33333%;
				}

				.row > .col-8-large {
					width: 66.66667%;
				}

				.row > .off-8-large {
					margin-left: 66.66667%;
				}

				.row > .col-9-large {
					width: 75%;
				}

				.row > .off-9-large {
					margin-left: 75%;
				}

				.row > .col-10-large {
					width: 83.33333%;
				}

				.row > .off-10-large {
					margin-left: 83.33333%;
				}

				.row > .col-11-large {
					width: 91.66667%;
				}

				.row > .off-11-large {
					margin-left: 91.66667%;
				}

				.row > .col-12-large {
					width: 100%;
				}

				.row > .off-12-large {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.625em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.625em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.625em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.625em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -1.25em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 1.25em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -1.25em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 1.25em;
						}

				.row {
					margin-top: 0;
					margin-left: -2.5em;
				}

					.row > * {
						padding: 0 0 0 2.5em;
					}

					.row.gtr-uniform {
						margin-top: -2.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 2.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -3.75em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 3.75em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -3.75em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 3.75em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -5em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 5em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -5em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 5em;
						}

		}

		@media screen and (max-width: 980px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-medium {
					order: -1;
				}

				.row > .col-1-medium {
					width: 8.33333%;
				}

				.row > .off-1-medium {
					margin-left: 8.33333%;
				}

				.row > .col-2-medium {
					width: 16.66667%;
				}

				.row > .off-2-medium {
					margin-left: 16.66667%;
				}

				.row > .col-3-medium {
					width: 25%;
				}

				.row > .off-3-medium {
					margin-left: 25%;
				}

				.row > .col-4-medium {
					width: 33.33333%;
				}

				.row > .off-4-medium {
					margin-left: 33.33333%;
				}

				.row > .col-5-medium {
					width: 41.66667%;
				}

				.row > .off-5-medium {
					margin-left: 41.66667%;
				}

				.row > .col-6-medium {
					width: 50%;
				}

				.row > .off-6-medium {
					margin-left: 50%;
				}

				.row > .col-7-medium {
					width: 58.33333%;
				}

				.row > .off-7-medium {
					margin-left: 58.33333%;
				}

				.row > .col-8-medium {
					width: 66.66667%;
				}

				.row > .off-8-medium {
					margin-left: 66.66667%;
				}

				.row > .col-9-medium {
					width: 75%;
				}

				.row > .off-9-medium {
					margin-left: 75%;
				}

				.row > .col-10-medium {
					width: 83.33333%;
				}

				.row > .off-10-medium {
					margin-left: 83.33333%;
				}

				.row > .col-11-medium {
					width: 91.66667%;
				}

				.row > .off-11-medium {
					margin-left: 91.66667%;
				}

				.row > .col-12-medium {
					width: 100%;
				}

				.row > .off-12-medium {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.625em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.625em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.625em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.625em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -1.25em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 1.25em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -1.25em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 1.25em;
						}

				.row {
					margin-top: 0;
					margin-left: -2.5em;
				}

					.row > * {
						padding: 0 0 0 2.5em;
					}

					.row.gtr-uniform {
						margin-top: -2.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 2.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -3.75em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 3.75em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -3.75em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 3.75em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -5em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 5em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -5em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 5em;
						}

		}

		@media screen and (max-width: 736px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-small {
					order: -1;
				}

				.row > .col-1-small {
					width: 8.33333%;
				}

				.row > .off-1-small {
					margin-left: 8.33333%;
				}

				.row > .col-2-small {
					width: 16.66667%;
				}

				.row > .off-2-small {
					margin-left: 16.66667%;
				}

				.row > .col-3-small {
					width: 25%;
				}

				.row > .off-3-small {
					margin-left: 25%;
				}

				.row > .col-4-small {
					width: 33.33333%;
				}

				.row > .off-4-small {
					margin-left: 33.33333%;
				}

				.row > .col-5-small {
					width: 41.66667%;
				}

				.row > .off-5-small {
					margin-left: 41.66667%;
				}

				.row > .col-6-small {
					width: 50%;
				}

				.row > .off-6-small {
					margin-left: 50%;
				}

				.row > .col-7-small {
					width: 58.33333%;
				}

				.row > .off-7-small {
					margin-left: 58.33333%;
				}

				.row > .col-8-small {
					width: 66.66667%;
				}

				.row > .off-8-small {
					margin-left: 66.66667%;
				}

				.row > .col-9-small {
					width: 75%;
				}

				.row > .off-9-small {
					margin-left: 75%;
				}

				.row > .col-10-small {
					width: 83.33333%;
				}

				.row > .off-10-small {
					margin-left: 83.33333%;
				}

				.row > .col-11-small {
					width: 91.66667%;
				}

				.row > .off-11-small {
					margin-left: 91.66667%;
				}

				.row > .col-12-small {
					width: 100%;
				}

				.row > .off-12-small {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.625em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.625em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.625em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.625em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -1.25em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 1.25em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -1.25em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 1.25em;
						}

				.row {
					margin-top: 0;
					margin-left: -2.5em;
				}

					.row > * {
						padding: 0 0 0 2.5em;
					}

					.row.gtr-uniform {
						margin-top: -2.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 2.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -3.75em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 3.75em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -3.75em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 3.75em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -5em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 5em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -5em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 5em;
						}

		}

		@media screen and (max-width: 480px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-xsmall {
					order: -1;
				}

				.row > .col-1-xsmall {
					width: 8.33333%;
				}

				.row > .off-1-xsmall {
					margin-left: 8.33333%;
				}

				.row > .col-2-xsmall {
					width: 16.66667%;
				}

				.row > .off-2-xsmall {
					margin-left: 16.66667%;
				}

				.row > .col-3-xsmall {
					width: 25%;
				}

				.row > .off-3-xsmall {
					margin-left: 25%;
				}

				.row > .col-4-xsmall {
					width: 33.33333%;
				}

				.row > .off-4-xsmall {
					margin-left: 33.33333%;
				}

				.row > .col-5-xsmall {
					width: 41.66667%;
				}

				.row > .off-5-xsmall {
					margin-left: 41.66667%;
				}

				.row > .col-6-xsmall {
					width: 50%;
				}

				.row > .off-6-xsmall {
					margin-left: 50%;
				}

				.row > .col-7-xsmall {
					width: 58.33333%;
				}

				.row > .off-7-xsmall {
					margin-left: 58.33333%;
				}

				.row > .col-8-xsmall {
					width: 66.66667%;
				}

				.row > .off-8-xsmall {
					margin-left: 66.66667%;
				}

				.row > .col-9-xsmall {
					width: 75%;
				}

				.row > .off-9-xsmall {
					margin-left: 75%;
				}

				.row > .col-10-xsmall {
					width: 83.33333%;
				}

				.row > .off-10-xsmall {
					margin-left: 83.33333%;
				}

				.row > .col-11-xsmall {
					width: 91.66667%;
				}

				.row > .off-11-xsmall {
					margin-left: 91.66667%;
				}

				.row > .col-12-xsmall {
					width: 100%;
				}

				.row > .off-12-xsmall {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.625em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.625em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.625em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.625em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -1.25em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 1.25em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -1.25em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 1.25em;
						}

				.row {
					margin-top: 0;
					margin-left: -2.5em;
				}

					.row > * {
						padding: 0 0 0 2.5em;
					}

					.row.gtr-uniform {
						margin-top: -2.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 2.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -3.75em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 3.75em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -3.75em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 3.75em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -5em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 5em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -5em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 5em;
						}

		}

/* Section/Article */

	section.special, article.special {
		text-align: center;
	}

	header #logo {		
		text-decoration: none;
		display: inline-block;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		padding-left: 2em;
	}

	header #logo #link-logo img#logo-img {
		width: 300px !important; 
		height: auto !important;
		max-width: 100% !important;
		display: block !important;
	}

	header #logo a#link-logo,
	header #logo a#link-logo:hover,
	header #logo a#link-logo:focus,
	header #logo a#link-logo:active {
		text-decoration: none !important;
		border-bottom: none !important;
		box-shadow: none !important;
	}

	header p {
		color: #ffffff;
		position: relative;
		margin: 0 0 1.5em 0;
	}

	header h1 + p {
		font-size: 1.25em;
		margin-top: -1em;
		line-height: 1.75em;
	}

	header h2 + p {
		font-size: 1.25em;
		margin-top: -1em;
		line-height: 1.75em;
	}

	header h3 + p {
		font-size: 1.1em;
		margin-top: -0.8em;
		line-height: 1.75em;
	}

	header h4 + p,
	header h5 + p,
	header h6 + p {
		font-size: 0.9em;
		margin-top: -0.6em;
		line-height: 1.5em;
	}

	header.major {
		margin: 0 0 4em 0;
		position: relative;
		text-align: center;
	}

		header.major:after {
			background: #00a9ff;
			content: '';
			display: inline-block;
			height: 0.2em;
			max-width: 20em;
			width: 75%;
		}

	footer.major {
		margin: 4em 0 0 0;
	}

/* Form */

	form {
		margin: 0 0 2em 0;
	}

		form.cta {
			max-width: 35em;
			margin-left: auto;
			margin-right: auto;
		}

	label {
		color: #ffffff;
		display: block;
		font-size: 0.9em;
		font-weight: 300;
		margin: 0 0 1em 0;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	select,
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: border-color 0.2s ease-in-out;
		-webkit-transition: border-color 0.2s ease-in-out;
		-ms-transition: border-color 0.2s ease-in-out;
		transition: border-color 0.2s ease-in-out;
		background: transparent;
		border-radius: 4px;
		border: solid 1px rgba(255, 255, 255, 0.3);
		color: inherit;
		display: block;
		outline: 0;
		padding: 0 1em;
		text-decoration: none;
		width: 100%;
	}

		input[type="text"]:invalid,
		input[type="password"]:invalid,
		input[type="email"]:invalid,
		select:invalid,
		textarea:invalid {
			box-shadow: none;
		}

		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
		select:focus,
		textarea:focus {
			border-color: #00a9ff;
		}

	select {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(255, 255, 255, 0.3)' /%3E%3C/svg%3E");
		background-size: 1.25rem;
		background-repeat: no-repeat;
		background-position: calc(100% - 1rem) center;
		height: 3em;
		padding-right: 3em;
		text-overflow: ellipsis;
	}

		select option {
			color: #ffffff;
			background: #1c1d26;
		}

		select:focus::-ms-value {
			background-color: transparent;
		}

		select::-ms-expand {
			display: none;
		}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	select {
		height: 3em;
	}

	textarea {
		padding: 0.75em 1em;
	}

input[type="checkbox"],
input[type="radio"] {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	display: block;
	float: left;
	margin-right: -2em;
	opacity: 0;
	width: 1em;
	z-index: -1;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
	text-decoration: none;
	color: rgba(255, 255, 255, 0.75);
	cursor: pointer;
	display: inline-block;
	font-size: 1em;
	font-weight: 300;
	padding-left: 2.55em;
	padding-right: 0.75em;
	position: relative;
}

input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
	border-radius: 4px;
	border: solid 1px rgba(255, 255, 255, 0.3);
	content: '';
	display: inline-block;
	font-size: 0.8em;
	height: 2.25em;
	left: 0;
	line-height: 2.25em;
	position: absolute;
	text-align: center;
	top: 0;
	width: 2.25em;
	vertical-align: middle;
}

input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
	background: rgba(255, 255, 255, 0.25);
	border-color: #ffffff;
}

input[type="checkbox"]:checked + label:after {
	content: '';
	position: absolute;
	left: 0.7em;
	top: 0.4em;
	width: 0.55em;
	height: 1.1em;
	border: solid #fff;
	border-width: 0 0.2em 0.2em 0;
	transform: rotate(45deg);
}

input[type="radio"]:checked + label:after {
	content: '';
	position: absolute;
	top: 0.8em;
	left: 0.8em;
	width: 0.65em;
	height: 0.65em;
	border-radius: 100%;
	background-color: #fff;
}

input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
	border-color: #00a9ff;
}

input[type="checkbox"] + label:before {
	border-radius: 4px;
}

input[type="radio"] + label:before {
	border-radius: 100%;
}

/* Placeholders - unchanged */
::-webkit-input-placeholder {
	color: rgba(255, 255, 255, 0.5) !important;
	opacity: 1.0;
}
:-moz-placeholder {
	color: rgba(255, 255, 255, 0.5) !important;
	opacity: 1.0;
}
::-moz-placeholder {
	color: rgba(255, 255, 255, 0.5) !important;
	opacity: 1.0;
}
:-ms-input-placeholder {
	color: rgba(255, 255, 255, 0.5) !important;
	opacity: 1.0;
}


/* Box */

	.box {
		border-radius: 4px;
		border: solid 1px rgba(255, 255, 255, 0.3);
		margin-bottom: 2em;
		padding: 1.5em;
	}

		.box > :last-child,
		.box > :last-child > :last-child,
		.box > :last-child > :last-child > :last-child {
			margin-bottom: 0;
		}

		.box.alt {
			border: 0;
			border-radius: 0;
			padding: 0;
		}

/* Icon */

	.icon {
		text-decoration: none;
		border-bottom: none;
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

		.icon img {
			width: 24px;
			height: 24px;
			filter: brightness(0) invert(1);
		}

		.icon > .label {
			display: none;
		}

		.icon.alt {
			border-bottom: 0;
			width: 2.65em;
			height: 2.65em;
			line-height: 2.65em;
			text-align: center;
			border-radius: 100%;
			border: solid 1px rgba(255, 255, 255, 0.25);
		}

			.icon.alt:hover {
				background-color: rgba(255, 255, 255, 0.075);
			}

			.icon.alt:active {
				background-color: rgba(255, 255, 255, 0.175);
			}

			.icon.alt.major {
				position: relative;
				top: -0.1em;
				margin: 0 0 0.5em 0;
			}

		.icon.major {
			position: relative;
			top: -0.1em;
			margin: 0 0 0.5em 0;
		}

			.icon.major img {
				width: 32px;
				height: 32px;
			}

			.icon.major.alt {
				top: -0.1em;
				margin: 0 0 0.5em 0;
			}

/* Image */

	.image {
		border-radius: 4px;
		border: 0;
		display: inline-block;
		position: relative;
		overflow: hidden;
	}

		.image:before {
			content: '';
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			/*background-image: url("images/overlay.png");*/
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		.image img {
			border-radius: 4px;
			display: block;
		}

		.image.left {
			float: left;
			margin: 0 1.5em 1em 0;
			top: 0.25em;
		}

		.image.right {
			float: right;
			margin: 0 0 1em 1.5em;
			top: 0.25em;
		}

		.image.left, .image.right {
			max-width: 40%;
		}

		.image.left img, .image.right img {
				width: 100%;
		}

		.image.fit {
			display: block;
			margin: 0 0 2em 0;
			width: 100%;
			aspect-ratio: 16/9; 
		}

		.image.fit img {
			width: 100%;
			height: auto;
			object-fit: contain; 
		}
        
/* List */

	ol {
		list-style: decimal;
		margin: 0 0 2em 0;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
		}

	ul {
		list-style: disc;
		margin: 0 0 2em 0;
		padding-left: 1em;
	}

		ul li {
			padding-left: 0.5em;
		}

		ul.alt {
			list-style: none;
			padding-left: 0;
		}

			ul.alt li {
				border-top: solid 1px rgba(255, 255, 255, 0.3);
				padding: 0.5em 0;
			}

				ul.alt li:first-child {
					border-top: 0;
					padding-top: 0;
				}

	dl {
		margin: 0 0 2em 0;
	}

/* Icons */

	ul.icons {
		cursor: default;
		list-style: none;
		padding-left: 0;
	}

		ul.icons li {
			display: inline-block;
			padding: 0 1em 0 0;
		}

			ul.icons li .icon {
				color: inherit;
			}

				ul.icons li .icon img {
					width: 20px;
					height: 20px;
				}

/* Actions */

	ul.actions {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		cursor: default;
		list-style: none;
		margin-left: -1em;
		padding-left: 0;
	}

		ul.actions li {
			padding: 0 0 0 1em;
			vertical-align: middle;
		}

		ul.actions.special {
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			width: 100%;
			margin-left: 0;
		}

			ul.actions.special li:first-child {
				padding-left: 0;
			}

		ul.actions.stacked {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			margin-left: 0;
		}

			ul.actions.stacked li {
				padding: 1.3em 0 0 0;
			}

				ul.actions.stacked li:first-child {
					padding-top: 0;
				}

		ul.actions.fit {
			width: calc(100% + 1em);
		}

			ul.actions.fit li {
				-moz-flex-grow: 1;
				-webkit-flex-grow: 1;
				-ms-flex-grow: 1;
				flex-grow: 1;
				-moz-flex-shrink: 1;
				-webkit-flex-shrink: 1;
				-ms-flex-shrink: 1;
				flex-shrink: 1;
				width: 100%;
			}

				ul.actions.fit li > * {
					width: 100%;
				}

			ul.actions.fit.stacked {
				width: 100%;
			}

		@media screen and (max-width: 480px) {

			ul.actions:not(.fixed) {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				margin-left: 0;
				width: 100% !important;
			}

				ul.actions:not(.fixed) li {
					-moz-flex-grow: 1;
					-webkit-flex-grow: 1;
					-ms-flex-grow: 1;
					flex-grow: 1;
					-moz-flex-shrink: 1;
					-webkit-flex-shrink: 1;
					-ms-flex-shrink: 1;
					flex-shrink: 1;
					padding: 1em 0 0 0;
					text-align: center;
					width: 100%;
				}

					ul.actions:not(.fixed) li > * {
						width: 100%;
					}

					ul.actions:not(.fixed) li:first-child {
						padding-top: 0;
					}

					ul.actions:not(.fixed) li input[type="submit"],
					ul.actions:not(.fixed) li input[type="reset"],
					ul.actions:not(.fixed) li input[type="button"],
					ul.actions:not(.fixed) li button,
					ul.actions:not(.fixed) li .button {
						width: 100%;
					}

						ul.actions:not(.fixed) li input[type="submit"].icon:before,
						ul.actions:not(.fixed) li input[type="reset"].icon:before,
						ul.actions:not(.fixed) li input[type="button"].icon:before,
						ul.actions:not(.fixed) li button.icon:before,
						ul.actions:not(.fixed) li .button.icon:before {
							margin-left: -0.5em;
						}

		}

/* Table */

	.table-wrapper {
		-webkit-overflow-scrolling: touch;
		overflow-x: auto;
	}

	table {
		margin: 0 0 2em 0;
		width: 100%;
	}

		table tbody tr {
			border: solid 1px rgba(255, 255, 255, 0.3);
			border-left: 0;
			border-right: 0;
		}

			table tbody tr:nth-child(2n + 1) {
				background-color: rgba(255, 255, 255, 0.075);
			}

		table td {
			padding: 0.75em 0.75em;
		}

		table th {
			color: #ffffff;
			font-size: 0.9em;
			font-weight: 300;
			padding: 0 0.75em 0.75em 0.75em;
			text-align: left;
		}

		table thead {
			border-bottom: solid 1px rgba(255, 255, 255, 0.3);
		}

		table tfoot {
			border-top: solid 1px rgba(255, 255, 255, 0.3);
		}

		table.alt {
			border-collapse: separate;
		}

			table.alt tbody tr td {
				border: solid 1px rgba(255, 255, 255, 0.3);
				border-left-width: 0;
				border-top-width: 0;
			}

				table.alt tbody tr td:first-child {
					border-left-width: 1px;
				}

			table.alt tbody tr:first-child td {
				border-top-width: 1px;
			}

			table.alt thead {
				border-bottom: 0;
			}

			table.alt tfoot {
				border-top: 0;
			}

/* Button */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		background-color: transparent;
		border-radius: 4px;
		border: 0;
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
		color: #ffffff !important;
		cursor: pointer;
		display: inline-block;
		font-weight: 300;
		height: 3em;
		line-height: 3em;
		padding: 0 2.25em;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
	}

		input[type="submit"]:hover, input[type="submit"]:active,
		input[type="reset"]:hover,
		input[type="reset"]:active,
		input[type="button"]:hover,
		input[type="button"]:active,
		.button:hover,
		.button:active {
			box-shadow: inset 0 0 0 1px #00a9ff;
			color: #00a9ff !important;
		}

		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active,
		.button:active {
			background-color: rgba(228, 76, 101, 0.15);
		}

		input[type="submit"].icon:before,
		input[type="reset"].icon:before,
		input[type="button"].icon:before,
		.button.icon:before {
			margin-right: 0.5em;
		}

		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		.button.fit {
			width: 100%;
		}

		input[type="submit"].small,
		input[type="reset"].small,
		input[type="button"].small,
		.button.small {
			font-size: 0.8em;
		}

		input[type="submit"].large,
		input[type="reset"].large,
		input[type="button"].large,
		.button.large {
			font-size: 1.35em;
		}

		input[type="submit"].primary,
		input[type="reset"].primary,
		input[type="button"].primary,
		.button.primary {
			background-color: #00a9ff;
			box-shadow: none;
			color: #ffffff !important;
		}

			input[type="submit"].primary:hover,
			input[type="reset"].primary:hover,
			input[type="button"].primary:hover,
			.button.primary:hover {
				background-color: #00a9ff;
			}

			input[type="submit"].primary:active,
			input[type="reset"].primary:active,
			input[type="button"].primary:active,
			.button.primary:active {
				background-color: #018fd6;
			}

		input[type="submit"].disabled, input[type="submit"]:disabled,
		input[type="reset"].disabled,
		input[type="reset"]:disabled,
		input[type="button"].disabled,
		input[type="button"]:disabled,
		.button.disabled,
		.button:disabled {
			background-color: rgba(255, 255, 255, 0.3) !important;
			box-shadow: none !important;
			color: #ffffff !important;
			cursor: default;
			opacity: 0.25;
		}

/* Goto Next */

	.goto-next {
		border: 0;
		bottom: 0;
		display: block;
		height: 5em;
		left: 50%;
		margin: 0 0 0 -5em;
		overflow: hidden;
		position: absolute;
		text-indent: 10em;
		white-space: nowrap;
		width: 10em;
		z-index: 1;
	}

		.goto-next:before {
			background-image: url("images/arrow.svg");
			background-position: center center;
			background-repeat: no-repeat;
			background-size: contain;
			content: '';
			display: block;
			height: 1.5em;
			left: 50%;
			margin: -0.75em 0 0 -1em;
			position: absolute;
			top: 50%;
			width: 2em;
			z-index: 1;
		}

/* Spotlight */

	.spotlight {
		background-attachment: fixed;
		background-position: center center;
		background-size: cover;
		box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
		height: 100vh;
		overflow: hidden;
		position: relative;
	}

		.spotlight:nth-last-of-type(1) {
			z-index: 1;
		}

		.spotlight:nth-last-of-type(2) {
			z-index: 2;
		}

		.spotlight:nth-last-of-type(3) {
			z-index: 3;
		}

		.spotlight:nth-last-of-type(4) {
			z-index: 4;
		}

		.spotlight:nth-last-of-type(5) {
			z-index: 5;
		}

		.spotlight:nth-last-of-type(6) {
			z-index: 6;
		}

		.spotlight:nth-last-of-type(7) {
			z-index: 7;
		}

		.spotlight:nth-last-of-type(8) {
			z-index: 8;
		}

		.spotlight:nth-last-of-type(9) {
			z-index: 9;
		}

		.spotlight:nth-last-of-type(10) {
			z-index: 10;
		}

		.spotlight:nth-last-of-type(11) {
			z-index: 11;
		}

		.spotlight:nth-last-of-type(12) {
			z-index: 12;
		}

		.spotlight:nth-last-of-type(13) {
			z-index: 13;
		}

		.spotlight:nth-last-of-type(14) {
			z-index: 14;
		}

		.spotlight:nth-last-of-type(15) {
			z-index: 15;
		}

		.spotlight:nth-last-of-type(16) {
			z-index: 16;
		}

		.spotlight:nth-last-of-type(17) {
			z-index: 17;
		}

		.spotlight:nth-last-of-type(18) {
			z-index: 18;
		}

		.spotlight:nth-last-of-type(19) {
			z-index: 19;
		}

		.spotlight:nth-last-of-type(20) {
			z-index: 20;
		}

		.spotlight:before {
			background-image: url("images/overlay.png");
			content: '';
			display: block;
			height: 100%;
			left: 0;
			top: 0;
			width: 100%;
		}

		.spotlight .image.main {
			display: none;
		}

			.spotlight .image.main img {
				position: relative;
			}

		.spotlight .content {
			-moz-transform: translate(0,0);
			-webkit-transform: translate(0,0);
			-ms-transform: translate(0,0);
			transform: translate(0,0);
			-moz-transition: -moz-transform 1s ease, opacity 1s ease;
			-webkit-transition: -webkit-transform 1s ease, opacity 1s ease;
			-ms-transition: -ms-transform 1s ease, opacity 1s ease;
			transition: transform 1s ease, opacity 1s ease;
			background: rgba(23, 24, 32, 0.95);
			border-style: solid;
			opacity: 1;
			position: absolute;
		}

		.spotlight .goto-next {
			-moz-transform: translate(0,0);
			-webkit-transform: translate(0,0);
			-ms-transform: translate(0,0);
			transform: translate(0,0);
			-moz-transition: -moz-transform 0.75s ease, opacity 1s ease-in;
			-webkit-transition: -webkit-transform 0.75s ease, opacity 1s ease-in;
			-ms-transition: -ms-transform 0.75s ease, opacity 1s ease-in;
			transition: transform 0.75s ease, opacity 1s ease-in;
			-moz-transition-delay: 0.5s;
			-webkit-transition-delay: 0.5s;
			-ms-transition-delay: 0.5s;
			transition-delay: 0.5s;
			opacity: 1;
		}

		.spotlight.top .content, .spotlight.bottom .content {
			left: 0;
			padding: 5.1em 0 3.1em 0;
			width: 100%;
		}

		.spotlight.top .content {
			border-bottom-width: 0.35em;
			top: 0;
		}

		.spotlight.bottom .content {
			border-top-width: 0.35em;
			bottom: 0;
		}

		.spotlight.left .content, .spotlight.right .content {
			height: 101%;
			padding: 6em 3em;
			top: 0;
			width: 28em;
		}

		.spotlight.left .content {
			border-right-width: 0.35em;
			left: 0;
		}

		.spotlight.right .content {
			border-left-width: 0.35em;
			right: 0;
		}

		.spotlight.style1 .content {
			border-color: #00a9ff;
		}

		.spotlight.style2 .content {
			border-color: #5480f1;
		}

		.spotlight.style3 .content {
			border-color: #39c088;
		}

		.spotlight.inactive .content {
			opacity: 0;
		}

		.spotlight.inactive .goto-next {
			-moz-transform: translate(0,1.5em);
			-webkit-transform: translate(0,1.5em);
			-ms-transform: translate(0,1.5em);
			transform: translate(0,1.5em);
			opacity: 0;
		}

		.spotlight.inactive.top .content {
			-moz-transform: translate(0,-5em);
			-webkit-transform: translate(0,-5em);
			-ms-transform: translate(0,-5em);
			transform: translate(0,-5em);
		}

		.spotlight.inactive.bottom .content {
			-moz-transform: translate(0,5em);
			-webkit-transform: translate(0,5em);
			-ms-transform: translate(0,5em);
			transform: translate(0,5em);
		}

		.spotlight.inactive.left .content {
			-moz-transform: translate(-5em,0);
			-webkit-transform: translate(-5em,0);
			-ms-transform: translate(-5em,0);
			transform: translate(-5em,0);
		}

		.spotlight.inactive.right .content {
			-moz-transform: translate(5em,0);
			-webkit-transform: translate(5em,0);
			-ms-transform: translate(5em,0);
			transform: translate(5em,0);
		}

	body.is-touch .spotlight {
		background-attachment: scroll;
	}

/* Wrapper */

	.wrapper {
		padding: 6em 0 4em 0;
	}

		.wrapper.style2 {
			background: #00a9ff;
		}

			.wrapper.style2 input[type="text"]:focus,
			.wrapper.style2 input[type="password"]:focus,
			.wrapper.style2 input[type="email"]:focus,
			.wrapper.style2 select:focus,
			.wrapper.style2 textarea:focus {
				border-color: rgba(255, 255, 255, 0.5);
			}

			.wrapper.style2 input[type="submit"]:hover, .wrapper.style2 input[type="submit"]:active,
			.wrapper.style2 input[type="reset"]:hover,
			.wrapper.style2 input[type="reset"]:active,
			.wrapper.style2 input[type="button"]:hover,
			.wrapper.style2 input[type="button"]:active,
			.wrapper.style2 .button:hover,
			.wrapper.style2 .button:active {
				background-color: rgba(255, 255, 255, 0.075) !important;
				box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
				color: #ffffff !important;
			}

			.wrapper.style2 input[type="submit"]:active,
			.wrapper.style2 input[type="reset"]:active,
			.wrapper.style2 input[type="button"]:active,
			.wrapper.style2 .button:active {
				background-color: rgba(255, 255, 255, 0.25) !important;
			}

			.wrapper.style2 input[type="submit"].primary,
			.wrapper.style2 input[type="reset"].primary,
			.wrapper.style2 input[type="button"].primary,
			.wrapper.style2 .button.primary {
				background-color: #ffffff;
				color: #00a9ff !important;
			}

				.wrapper.style2 input[type="submit"].primary:hover, .wrapper.style2 input[type="submit"].primary:active,
				.wrapper.style2 input[type="reset"].primary:hover,
				.wrapper.style2 input[type="reset"].primary:active,
				.wrapper.style2 input[type="button"].primary:hover,
				.wrapper.style2 input[type="button"].primary:active,
				.wrapper.style2 .button.primary:hover,
				.wrapper.style2 .button.primary:active {
					background-color: rgba(255, 255, 255, 0.075) !important;
					box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
					color: #ffffff !important;
				}

				.wrapper.style2 input[type="submit"].primary:active,
				.wrapper.style2 input[type="reset"].primary:active,
				.wrapper.style2 input[type="button"].primary:active,
				.wrapper.style2 .button.primary:active {
					background-color: rgba(255, 255, 255, 0.25) !important;
				}

		.wrapper.fade-down > .container {
			-moz-transform: translate(0,0);
			-webkit-transform: translate(0,0);
			-ms-transform: translate(0,0);
			transform: translate(0,0);
			-moz-transition: -moz-transform 1s ease, opacity 1s ease;
			-webkit-transition: -webkit-transform 1s ease, opacity 1s ease;
			-ms-transition: -ms-transform 1s ease, opacity 1s ease;
			transition: transform 1s ease, opacity 1s ease;
			opacity: 1;
		}

		.wrapper.fade-down.inactive > .container {
			-moz-transform: translate(0,-1em);
			-webkit-transform: translate(0,-1em);
			-ms-transform: translate(0,-1em);
			transform: translate(0,-1em);
			opacity: 0;
		}

		.wrapper.fade-up > .container {
			-moz-transform: translate(0,0);
			-webkit-transform: translate(0,0);
			-ms-transform: translate(0,0);
			transform: translate(0,0);
			-moz-transition: -moz-transform 1s ease, opacity 1s ease;
			-webkit-transition: -webkit-transform 1s ease, opacity 1s ease;
			-ms-transition: -ms-transform 1s ease, opacity 1s ease;
			transition: transform 1s ease, opacity 1s ease;
			opacity: 1;
		}

		.wrapper.fade-up.inactive > .container {
			-moz-transform: translate(0,1em);
			-webkit-transform: translate(0,1em);
			-ms-transform: translate(0,1em);
			transform: translate(0,1em);
			opacity: 0;
		}

		.wrapper.fade > .container {
			-moz-transition: opacity 1s ease;
			-webkit-transition: opacity 1s ease;
			-ms-transition: opacity 1s ease;
			transition: opacity 1s ease;
			opacity: 1;
		}

		.wrapper.fade.inactive > .container {
			opacity: 0;
		}

/* Dropotron */

	.dropotron {
		background: rgba(39, 40, 51, 0.965);
		border-radius: 4px;
		box-shadow: 0 0.075em 0.35em 0 rgba(0, 0, 0, 0.125);
		list-style: none;
		margin-top: calc(-0.25em + 1px);
		min-width: 12em;
		padding: 0.25em 0;
	}

		.dropotron > li {
			border-top: solid 1px rgba(255, 255, 255, 0.035);
			padding: 0;
		}

			.dropotron > li a, .dropotron > li span {
				border: 0;
				color: rgba(255, 255, 255, 0.75);
				display: block;
				padding: 0.1em 1em;
				text-decoration: none;
			}

			.dropotron > li:first-child {
				border-top: 0;
			}

			.dropotron > li.active > a, .dropotron > li.active > span {
				color: #00a9ff;
			}

		.dropotron.level-0 {
			font-size: 0.8em;
			margin-top: 1em;
		}

			.dropotron.level-0:before {
				-moz-transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				transform: rotate(45deg);
				background: #272833;
				content: '';
				display: block;
				height: 1em;
				position: absolute;
				right: 1.5em;
				top: -0.5em;
				width: 1em;
			}

	body.landing .dropotron.level-0 {
		margin-top: 0;
	}

/* Header */

	#page-wrapper {
		padding-top: 3.5em;
	}

	#header {
		background: rgba(39, 40, 51, 0.965);
		box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.25);
		cursor: default;
		height: 3.5em;
		left: 0;
		line-height: 3.5em;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 100;
	}

	
	    #logo {
		    width: 300px;
	    }

		#header h1 {
			height: inherit;
			left: 1.25em;
			line-height: inherit;
			margin: 0;
			position: absolute;
			top: 0;
		}

        #header p.author-link {
			font-size: 1em;
		}

		#header nav {
			position: absolute;
			right: 1em;
			top: 0;
		}

			#header nav ul {
				margin: 0;
			}

				#header nav ul li {
					display: inline-block;
					margin-left: 1em;
				}

					#header nav ul li a, #header nav ul li span {
						border: 0;
						color: inherit;
						display: inline-block;
						height: inherit;
						line-height: inherit;
						outline: 0;
					}

						#header nav ul li a.button, #header nav ul li span.button {
							height: 2em;
							line-height: 2em;
							padding: 0 1.25em;
						}

						#header nav ul li a:not(.button):before, #header nav ul li span:not(.button):before {
							margin-right: 0.5em;
						}

					#header nav ul li.active > a, #header nav ul li.active > span {
						color: #00a9ff;
					}

					#header nav ul li > ul {
						display: none;
					}

	body.landing #page-wrapper {
		padding-top: 0;
	}

	body.landing #header {
		background: transparent;
		box-shadow: none;
		position: absolute;
	}

/* Banner */

	#banner {
		background-attachment: fixed;
		background-color: #272833;
		background-image: url("..//images/banner.jpg");
		background-position: center center;
		background-size: cover;
		box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
		min-height: 100vh;
		position: relative;
		text-align: center;
		z-index: 21;
	}

		#banner:before {
			content: '';
			display: inline-block;
			height: 100vh;
			vertical-align: middle;
			width: 1%;
		}

		#banner:after {
			background-image: -moz-linear-gradient(top, rgba(23, 24, 32, 0.95), rgba(23, 24, 32, 0.95)), url("images/overlay.png");;
			background-image: -webkit-linear-gradient(top, rgba(23, 24, 32, 0.95), rgba(23, 24, 32, 0.95)), url("images/overlay.png");;
			background-image: -ms-linear-gradient(top, rgba(23, 24, 32, 0.95), rgba(23, 24, 32, 0.95)), url("images/overlay.png");;
			background-image: linear-gradient(top, rgba(23, 24, 32, 0.95), rgba(23, 24, 32, 0.95)), url("images/overlay.png");;
			content: '';
			display: block;
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}

		#banner .content {
			display: inline-block;
			margin-right: 1%;
			max-width: 95%;
			padding: 6em;
			position: relative;
			text-align: right;
			vertical-align: middle;
			z-index: 1;
		}

			#banner .content header {
				display: inline-block;
				vertical-align: middle;
			}

			    #banner .content header h1 {
				    font-size: 2.5em;
				    margin: 0;
			    }

				#banner .content header h2 {
					font-size: 2.5em;
					margin: 0;
				}

				#banner .content header p {
					margin: 0.5em 0 0 0;
					top: 0;
				}

				#banner .content header p.author-link {
					font-size: 1em;
				}

			#banner .content .image {
				border-radius: 100%;
				display: inline-block;
				height: 18em;
				margin-left: 3em;
				vertical-align: middle;
				width: 18em;
			}

				#banner .content .image img {
					border-radius: 100%;
					display: block;
					width: 100%;
				}

	body.is-touch #banner {
		background-attachment: scroll;
	}

/* Footer */

	#footer {
		background: #272833;
		padding: 6em 0;
		text-align: center;
	}

		#footer .icons .icon.alt {
			border-color: rgba(255, 255, 255, 0.35);
		}

			#footer .icons .icon.alt:hover {
				background-color: rgba(255, 255, 255, 0.075);
			}

			#footer .icons .icon.alt:active {
				background-color: rgba(255, 255, 255, 0.175);
			}

		#footer .copyright {
			color: rgba(255, 255, 255, 0.5);
			font-size: 0.8em;
			line-height: 1em;
			margin: 2em 0 0 0;
			padding: 0;
			text-align: center;
		}

			#footer .copyright li {
				border-left: solid 1px rgba(255, 255, 255, 0.3);
				display: inline-block;
				list-style: none;
				margin-left: 1.5em;
				padding-left: 1.5em;
			}

				#footer .copyright li:first-child {
					border-left: 0;
					margin-left: 0;
					padding-left: 0;
				}

				#footer .copyright li a {
					color: inherit;
				}

/* XLarge */

	@media screen and (max-width: 1680px) {

		/* Basic */

			body, input, select, textarea {
				font-size: 13pt;
			}

	}

/* Large */



	@media screen and (max-width: 1280px) {

		/* Basic */

			body, input, select, textarea {
				font-size: 11.5pt;
			}

		/* Spotlight */

			.spotlight.top .content {
				padding: 3.825em 0 1.825em 0;
			}

			.spotlight.bottom .content {
				padding: 3.825em 0 2.95em 0;
			}

			.spotlight.left .content, .spotlight.right .content {
				padding: 4.5em 2.5em;
				width: 25em;
			}

		/* Wrapper */

			.wrapper {
				padding: 4.5em 0 2.5em 0;
			}

		/* Dropotron */

			.dropotron.level-0 {
				font-size: 1em;
			}

		/* Banner */

			#banner .content {
				padding: 4.5em;
			}

		/* Footer */

			#footer {
				padding: 4.5em 0;
			}

	}

/* Medium */

#navPanel, #titleBar {
	display: none;
}

	@media screen and (max-width: 980px) {

		/* Basic */

			body, input, select, textarea {
				font-size: 12pt;
			}

		/* Spotlight */

			.spotlight {
				background-attachment: scroll;
				height: auto;
			}

				.spotlight .image.main {
					display: block;
					margin: 0;
					max-height: 40vh;
					overflow: hidden;
				}

				.spotlight .content {
					background-color: #1c1d26;
					border-width: 0 !important;
					border-top-width: 0.35em !important;
					bottom: auto !important;
					left: auto !important;
					padding: 4.5em 2.5em 2.5em 2.5em !important;
					position: relative;
					right: auto !important;
					text-align: center;
					top: auto !important;
					width: 100% !important;
				}

					.spotlight .content ul.actions {
						-moz-justify-content: center;
						-webkit-justify-content: center;
						-ms-justify-content: center;
						justify-content: center;
						width: 100%;
						margin-left: 0;
					}

						.spotlight .content ul.actions li:first-child {
							padding-left: 0;
						}

				.spotlight .goto-next {
					display: none;
				}

		/* Wrapper */

			.wrapper {
				padding: 4.5em 2.5em 2.5em 2.5em;
			}

		/* Banner */

			#banner {
				background-attachment: scroll;
			}

				#banner .goto-next {
					height: 7em;
				}

				#banner .content {
					padding: 9em 0;
					text-align: center;
				}

					#banner .content header {
						display: block;
						margin: 0 0 2em 0;
						text-align: center;
					}

					#banner .content .image {
						margin: 0;
					}

		/* Header */

		    #header {
				display: none;
			}

				
					/* Nav */

					#page-wrapper {
						-moz-backface-visibility: hidden;
						-webkit-backface-visibility: hidden;
						-ms-backface-visibility: hidden;
						backface-visibility: hidden;
						-moz-transition: -moz-transform 0.5s ease;
						-webkit-transition: -webkit-transform 0.5s ease;
						-ms-transition: -ms-transform 0.5s ease;
						transition: transform 0.5s ease;
						padding-bottom: 1px;
					padding-top: calc(45px + env(safe-area-inset-top)) !important;
					padding-top: calc(45px + constant(safe-area-inset-top)) !important;
					}
		
					#titleBar {
						-moz-backface-visibility: hidden;
						-webkit-backface-visibility: hidden;
						-ms-backface-visibility: hidden;
						backface-visibility: hidden;
						-moz-transition: -moz-transform 0.5s ease;
						-webkit-transition: -webkit-transform 0.5s ease;
						-ms-transition: -ms-transform 0.5s ease;
						transition: transform 0.5s ease;
						display: block;
						height: calc(44px + env(safe-area-inset-top));
						/* Fallback for older iOS Safari */
						height: calc(44px + constant(safe-area-inset-top));
						left: 0;
						position: fixed;
						top: 0;
						margin-top: 1px;
						padding-top: env(safe-area-inset-top);
						padding-top: constant(safe-area-inset-top);
						width: 100%;
						z-index: 10001;
						background: #272833;
						box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
					}
		
						#titleBar .title {
							color: #ffffff;
							display: block;
							font-weight: 300;
							height: 44px;
							line-height: 44px;
							padding: 0 1em;
							text-align: center;
							width: 100%;
						}
		
							#titleBar .title a {
								border: 0;
								color: inherit;
								display: inline-block;
								height: inherit;
								line-height: inherit;
								outline: 0;
							}
		
								#titleBar .title a img {
									width: 200px;
									height: auto;
									vertical-align: middle;
								}
		
						#titleBar .toggle {
							text-decoration: none;
							height: 60px;
							left: 0;
							position: absolute;
							top: 0;
							width: 90px;
							outline: 0;
							border: 0;
						}
		
							#titleBar .toggle:before {
								content: '';
								display: block;
								position: absolute;
								top: 0;
								left: 0;
								width: 54px;
								height: 44px;
								background: #00a9ff url('/images/hamburger-icon-white.svg') no-repeat center center;
								background-size: 24px 24px;
								z-index: 10001;
							}
		
					#navPanel {
						-moz-backface-visibility: hidden;
						-webkit-backface-visibility: hidden;
						-ms-backface-visibility: hidden;
						backface-visibility: hidden;
						-moz-transform: translateX(-420px);
						-webkit-transform: translateX(-420px);
						-ms-transform: translateX(-420px);
						transform: translateX(-420px);
						-moz-transition: -moz-transform 0.5s ease;
						-webkit-transition: -webkit-transform 0.5s ease;
						-ms-transition: -ms-transform 0.5s ease;
						transition: transform 0.5s ease;
						display: block;
						height: calc(100% - env(safe-area-inset-top) - 1px);
						height: calc(100% - constant(safe-area-inset-top) - 1px);
						left: 0;
						overflow-y: auto;
						position: fixed;
						top: calc(env(safe-area-inset-top) + 1px);
						top: calc(constant(safe-area-inset-top) + 1px);
						width: 420px;
						z-index: 10002;
						background: #181920;
						padding: 0.75em 1.25em;
					}
		
						#navPanel .link {
							border: 0;
							border-top: solid 1px rgba(255, 255, 255, 0.05);
							color: rgba(255, 255, 255, 0.75);
							display: block;
							height: 4em;
							line-height: 4em;
							text-decoration: none;
						}
		
							#navPanel .link:hover {
								color: inherit !important;
							}
		
							#navPanel .link:first-child {
								border-top: 0;
							}
		
							#navPanel .link.depth-0 {
								color: #ffffff;
								font-weight: 300;
							}
		
							#navPanel .link .indent-1 {
								display: inline-block;
								width: 1.25em;
							}
		
							#navPanel .link .indent-2 {
								display: inline-block;
								width: 2.5em;
							}
		
							#navPanel .link .indent-3 {
								display: inline-block;
								width: 3.75em;
							}
		
							#navPanel .link .indent-4 {
								display: inline-block;
								width: 5em;
							}
		
							#navPanel .link .indent-5 {
								display: inline-block;
								width: 6.25em;
							}
		
					body.navPanel-visible #page-wrapper {
						-moz-transform: translateX(420px);
						-webkit-transform: translateX(420px);
						-ms-transform: translateX(420px);
						transform: translateX(420px);
					}
		
					body.navPanel-visible #titleBar {
						-moz-transform: translateX(420px);
						-webkit-transform: translateX(420px);
						-ms-transform: translateX(420px);
						transform: translateX(420px);
					}
		
					body.navPanel-visible #navPanel {
						-moz-transform: translateX(0);
						-webkit-transform: translateX(0);
						-ms-transform: translateX(0);
						transform: translateX(0);
					}

		/* Footer */

		#footer {
			padding: 4.5em 0;
		}
	}

/* Small */



	@media screen and (max-width: 736px) {

		/* Basic */

			html, body {
				overflow-x: hidden;
			}

			body, input, select, textarea {
				font-size: 12pt;
			}

			h1 {
				font-size: 1.5em;
			}

			h2 {
				font-size: 1.5em;
			}

			h3 {
				font-size: 1.2em;
			}

			h4 {
				font-size: 1em;
			}

			p.author-link {
				font-size: 1em;
			}

		/* Section/Article */

			header p br {
				display: none;
			}

			header h1 + p {
				font-size: 1em;
			}

			header h2 + p {
				font-size: 1em;
			}

			header h3 + p {
				font-size: 1em;
			}

			header h4 + p,
			header h5 + p,
			header h6 + p {
				font-size: 0.9em;
			}

			header.major {
				margin: 0 0 2em 0;
			}

		/* Goto Next */

			.goto-next:before {
				height: 0.8em;
				margin: -0.4em 0 0 -0.6em;
				width: 1.2em;
			}

		/* Spotlight */

			.spotlight {
				box-shadow: 0 0.125em 0.5em 0 rgba(0, 0, 0, 0.25);
			}

				.spotlight .image.main {
					max-height: 60vh;
				}

				.spotlight .content {
					border-top-width: 0.2em !important;
					padding: 3.25em 1.5em 1.25em 1.5em !important;
				}

		/* Wrapper */

			.wrapper {
				padding: 3.25em 1.5em 1.25em 1.5em;
			}

		/* Header */

			#header {
				display: none;
			}

		/* Banner */

			#banner {
				box-shadow: 0 0.125em 0.5em 0 rgba(0, 0, 0, 0.25);
				min-height: calc(100vh - 44px);
			}

				#banner:before {
					height: calc(100vh - 44px);
				}

				#banner .content {
					padding: 4.0625em 1.5em 4.875em 1.5em;
				}

				    #banner .content header h1 {
					    font-size: 1.5em;
				    }

					#banner .content header h2 {
						font-size: 1.5em;
					}

					#banner .content .image {
						height: 9em;
						width: 9em;
					}

					 #banner .content p.author-link {
						font-size: 1em;
					}

		/* Nav */

			#page-wrapper {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				padding-bottom: 1px;
				padding-top: 44px !important;
			}

			#titleBar {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 44px;
				left: 0;
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 10001;
				background: #272833;
				box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
			}

				#titleBar .title {
					color: #ffffff;
					display: block;
					font-weight: 300;
					height: 44px;
					line-height: 44px;
					padding: 0 1em;
					text-align: center;
					width: 100%;
				}

					#titleBar .title a {
						border: 0;
						color: inherit;
						display: inline-block;
						height: inherit;
						line-height: inherit;
						outline: 0;
					}

						#titleBar .title a img {
							width: 200px;
							height: auto;
							vertical-align: middle;
						}

				#titleBar .toggle {
					text-decoration: none;
					height: 60px;
					left: 0;
					position: absolute;
					top: 0;
					width: 90px;
					outline: 0;
					border: 0;
				}

					#titleBar .toggle:before {
						content: '';
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						width: 54px;
						height: 44px;
						background: #00a9ff url('/images/hamburger-icon-white.svg') no-repeat center center;
						background-size: 24px 24px;
						z-index: 10001;
					}

			#navPanel {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transform: translateX(-420px);
				-webkit-transform: translateX(-420px);
				-ms-transform: translateX(-420px);
				transform: translateX(-420px);
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 100%;
				left: 0;
				overflow-y: auto;
				position: fixed;
				top: 0;
				width: 420px;
				z-index: 10002;
				background: #181920;
				padding: 0.75em 1.25em;
			}

				#navPanel .link {
					border: 0;
					border-top: solid 1px rgba(255, 255, 255, 0.05);
					color: rgba(255, 255, 255, 0.75);
					display: block;
					height: 3em;
					line-height: 3em;
					text-decoration: none;
				}

					#navPanel .link:hover {
						color: inherit !important;
					}

					#navPanel .link:first-child {
						border-top: 0;
					}

					#navPanel .link.depth-0 {
						color: #ffffff;
						font-weight: 300;
					}

					#navPanel .link .indent-1 {
						display: inline-block;
						width: 1.25em;
					}

					#navPanel .link .indent-2 {
						display: inline-block;
						width: 2.5em;
					}

					#navPanel .link .indent-3 {
						display: inline-block;
						width: 3.75em;
					}

					#navPanel .link .indent-4 {
						display: inline-block;
						width: 5em;
					}

					#navPanel .link .indent-5 {
						display: inline-block;
						width: 6.25em;
					}

			body.navPanel-visible #page-wrapper {
				-moz-transform: translateX(420px);
				-webkit-transform: translateX(420px);
				-ms-transform: translateX(420px);
				transform: translateX(420px);
			}

			body.navPanel-visible #titleBar {
				-moz-transform: translateX(420px);
				-webkit-transform: translateX(420px);
				-ms-transform: translateX(420px);
				transform: translateX(420px);
			}

			body.navPanel-visible #navPanel {
				-moz-transform: translateX(0);
				-webkit-transform: translateX(0);
				-ms-transform: translateX(0);
				transform: translateX(0);
			}

		/* Footer */

			#footer {
				padding: 3.25em 1.5em;
			}

	}

/* XSmall */

	@media screen and (max-width: 480px) {

		/* Basic */

			html, body {
				min-width: 320px;
			}

			body, input, select, textarea {
				font-size: 12pt;
			}

		/* Button */

			input[type="submit"],
			input[type="reset"],
			input[type="button"],
			.button {
				padding: 0;
			}

		/* Spotlight */

			.spotlight .image.main {
				max-height: 50vh;
			}

			.spotlight .content {
				padding: 3em 1.25em 1em 1.25em !important;
			}

		/* Wrapper */

			.wrapper {
				padding: 3em 1.25em 1em 1.25em;
			}

		/* Banner */

			#banner .content {
				padding: 3em 1.5625em 5.25em 1.5625em;
			}

		/* Footer */

			#footer {
				padding: 3em 1.25em;
			}

				#footer .copyright {
					line-height: inherit;
				}

					#footer .copyright li {
						border-left: 0;
						display: block;
						margin: 0;
						padding: 0;
					}

	}

    /* Custom Logo Styles */
    #header #logo #link-logo #logo-img {
        width: 300px !important;
        height: auto !important;
        max-width: 100% !important;
        display: block !important;
    }

    @media screen and (max-width: 736px) {
        #header #logo #link-logo #logo-img {
            width: 200px !important;
        }
    }

    @media screen and (max-width: 480px) {
        #header #logo #link-logo #logo-img {
            width: 150px !important;
    }
    }

    @media (max-width: 736px) {
        #navPanel nav a {
            padding: 0.75em 1.5em;
            line-height: 1.6;
            white-space: normal;
            display: block;
            text-align: left;
            text-indent: -1.5em;
            padding-left: 3em;
            margin-bottom: 0.5em; /* Add margin to separate items */
        }
    }

	.footer-menu ul {
		list-style: none;
		padding: 0;
		margin: 0;
	  }
	  
	  .footer-menu li {
		margin-bottom: 0.5em;
	  }
	  
	  .footer-menu a {
		text-decoration: none;
		color: inherit;
	  }
	  
	  .footer-menu a:hover {
		text-decoration: underline;
	  }

	.footer-contact  ul {
		list-style: none;
		padding: 0;
		margin: 0;
	  }
	  
	  .footer-contact li {
		margin-bottom: 0.5em;
	  }
	  
	  .footer-contact a {
		text-decoration: none;
		color: inherit;
	  }
	  
	  .footer-contact a:hover {
		text-decoration: underline;
	  }

	.footer-contact {
		list-style: none;
	}

	a.dmca-badge {
		text-decoration: none !important;
    }
	


	  
/* Resource Grid */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
    margin: 0 auto;
    max-width: 100%;
}

@media screen and (max-width: 1280px) {
    .resource-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
    }
}

@media screen and (max-width: 736px) {
    .resource-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1rem;
    }
}

.resource-card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.resource-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

.resource-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.resource-content {
    padding: 1.5rem;
}

.resource-content h3 {
    margin: 0 0 0.5rem 0;
    color: #2c3e50;
    font-size: 1.2rem;
}

.resource-content p {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
}

/* Post Grid Styles */
.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 2rem 0;
}

.post-card {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.post-image {
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* New: image element variant for SEO/lazy loading */
.post-image-img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.post-content {
    padding: 1.5rem;
    color: #333333;
}

.post-content h3 {
    margin: 0 0 1rem 0;
    font-size: 1.4rem;
    line-height: 1.4;
    color: #000000;
}

.post-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.category-tag {
    background: #f0f0f0;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #666;
}

/* Responsive styles */
@media screen and (max-width: 1280px) {
    .post-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 736px) {
    .post-grid {
        grid-template-columns: 1fr;
    }
    
    .post-image {
        height: 180px;
    }
    .post-image-img {
        height: 180px;
    }
}

/* Contact Page Styles */
.contact-section {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    margin: 2em 0;
}

.contact-form {
    flex: 1;
    min-width: 300px;
}

.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.contact-form input,
.contact-form textarea {
    padding: 0.75em;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    color: #fff;
    width: 100%;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #00a9ff;
    outline: none;
}

.contact-form textarea {
    min-height: 150px;
    resize: vertical;
}

.contact-form button {
    background-color: #00a9ff;
    color: #fff;
    border: none;
    padding: 0.75em 1.5em;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 300;
    transition: background-color 0.2s;
}

.contact-form button:hover {
    background-color: #0088cc;
}

.contact-info {
    flex: 1;
    min-width: 300px;
}

.contact-info h3 {
    margin-bottom: 1em;
}

.contact-info p {
    margin-bottom: 1em;
    display: flex;
    align-items: center;
}

.contact-info i {
    margin-right: 0.5em;
    color: #00a9ff;
    width: 20px;
    text-align: center;
}

.social-section {
    margin: 2em 0;
}

.social-icons {
    display: flex;
    gap: 1em;
    margin-top: 1em;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    color: #fff;
    transition: background-color 0.2s, transform 0.2s;
    border-bottom: none;
}

.social-icons a:hover {
    background-color: #00a9ff;
    transform: translateY(-3px);
}

.map-section {
    margin: 2em 0;
}

.map-container {
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 4px;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.map-section h3 img.icon {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    margin-right: 0.5em;
    filter: brightness(0) invert(1);
}

/* Responsive contact page styles */
@media screen and (max-width: 736px) {
    .contact-section {
        flex-direction: column;
    }
    
    .social-icons {
        flex-wrap: wrap;
    }
    
    .map-container {
        height: 300px;
    }
}

/* About Page Styles */
.about-section {
    margin: 3em 0;
    text-align: center;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
}

.trust-section {
    background: rgba(255, 255, 255, 0.05);
    padding: 2em;
    border-radius: 4px;
    margin: 2em 0;
}

.trust-section h2 i {
    color: #00a9ff;
    margin-right: 0.5em;
}

.services-section {
    margin: 3em 0;
}

.service-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 2em;
    border-radius: 4px;
    height: 100%;
    text-align: center;
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-card i {
    font-size: 2.5em;
    color: #00a9ff;
    margin-bottom: 0.5em;
}

.service-card h3 {
    margin-bottom: 1em;
}

.team-section {
    margin: 3em 0;
}

.team-member {
    background: rgba(255, 255, 255, 0.05);
    padding: 2em;
    border-radius: 4px;
}

.team-image {
    width: 100%;
    border-radius: 4px;
    margin-bottom: 1em;
}

.team-member h3 {
    margin-bottom: 0.5em;
}

.team-member .role {
    color: #00a9ff;
    margin-bottom: 1em;
}

.values-section {
    margin: 3em 0;
}

.values-section h2 i {
    color: #00a9ff;
    margin-right: 0.5em;
}

.value-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 2em;
    border-radius: 4px;
    height: 100%;
    margin-bottom: 2em;
}

.value-item i {
    font-size: 2em;
    color: #00a9ff;
    margin-bottom: 0.5em;
}

.value-item h3 {
    margin-bottom: 1em;
}

.cta-section {
    margin: 3em 0;
    text-align: center;
}

.cta-image {
    width: 100%;
    max-width: 800px;
    border-radius: 4px;
    margin-bottom: 2em;
}

.cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.cta-content h2 {
    margin-bottom: 1em;
}

.cta-content p {
    margin-bottom: 2em;
}

@media screen and (max-width: 736px) {
    .service-card,
    .value-item {
        margin-bottom: 2em;
    }
    
    .team-member .col-4,
    .team-member .col-8 {
        width: 100%;
    }
    
    .team-image {
        max-width: 300px;
        margin: 0 auto 1em;
        display: block;
    }
}

/* About Marlo Strydom Page Styles */
.profile-section {
    margin: 3em 0;
}

.profile-image {
    width: 100%;
    border-radius: 4px;
    margin-bottom: 1em;
}

.profile-section h2 {
    margin-bottom: 0.5em;
}

.role {
    color: #00a9ff;
    font-size: 1.2em;
    margin-bottom: 1em;
}

.profile-highlights {
    list-style: none;
    padding: 0;
}

.profile-highlights li {
    margin-bottom: 0.5em;
    display: flex;
    align-items: center;
}

.profile-highlights i {
    color: #00a9ff;
    margin-right: 0.5em;
}

.experience-section {
    margin: 3em 0;
}

.experience-section h2 {
    margin-bottom: 2em;
    text-align: center;
}

.experience-section h2 i {
    color: #00a9ff;
    margin-right: 0.5em;
}

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline-item {
    padding: 2em;
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    margin-bottom: 2em;
}

.timeline-item h3 {
    color: #00a9ff;
    margin-bottom: 0.5em;
}

.timeline-item h4 {
    margin-bottom: 0.5em;
}

.timeline-item p {
    margin-bottom: 1em;
    color: #999;
}

.expertise-section {
    margin: 3em 0;
}

.expertise-section h2 {
    text-align: center;
    margin-bottom: 2em;
}

.expertise-section h2 i {
    color: #00a9ff;
    margin-right: 0.5em;
}

.expertise-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 2em;
    border-radius: 4px;
    text-align: center;
    height: 100%;
    transition: transform 0.3s ease;
    display: flex; /* Add flexbox */
    flex-direction: column; /* Stack items vertically */
    justify-content: flex-start; /* Align items to the top */
}

.expertise-card:hover {
    transform: translateY(-5px);
}

.expertise-card i {
    font-size: 2.5em;
    color: #00a9ff;
    margin-bottom: 0.5em;
}

.expertise-card h3 {
    margin-bottom: 1em;
}

.projects-section {
    margin: 3em 0;
}

.projects-section h2 {
    text-align: center;
    margin-bottom: 2em;
}

.projects-section h2 i {
    color: #00a9ff;
    margin-right: 0.5em;
}

.project-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
}

.project-card img {
    width: 100%;
    height: auto;
}

.project-content {
    padding: 2em;
}

.project-content h3 {
    margin-bottom: 1em;
}

.personal-section {
    margin: 3em 0;
}

.personal-section h2 {
    text-align: center;
    margin-bottom: 2em;
}

.personal-section h2 i {
    color: #00a9ff;
    margin-right: 0.5em;
}

.personal-image {
    width: 100%;
    border-radius: 4px;
}

@media screen and (max-width: 736px) {
    .profile-section .col-4,
    .profile-section .col-8,
    .expertise-section .col-4 {
        width: 100%;
    }
    
    .profile-image {
        max-width: 300px;
        margin: 0 auto 1em;
        display: block;
    }
    
    /* Vertical line adjustment removed previously */
    /*
    .timeline::before {
        left: 31px;
    }
    */
    
    .timeline-item {
        /* Center the timeline items on mobile */
        margin-left: auto; 
        margin-right: auto;
        width: 90%; /* Adjust width as needed */
        max-width: 400px; /* Optional: Set a max-width */
    }
    
    .expertise-card {
        margin-bottom: 2em;
        /* Ensure text alignment is centered */
        text-align: center; 
    }
    
    .personal-section .col-6 {
        width: 100%;
    }
    
    .personal-image {
        margin-bottom: 2em;
    }
}
	  
/* Footer Styles */
.footer-contact {
    margin: 0 auto;
    max-width: 300px;
    text-align: center;
}

.footer-contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    font-size: 0.9em;
    margin-bottom: 0.25em;
    color: rgba(255, 255, 255, 0.5);
}

.footer-contact a {
    color: rgba(255, 255, 255, 0.5);
    border-bottom: dotted 1px;
}

.footer-contact a:hover {
    color: #fff;
    border-bottom-color: transparent;
}
	  
/* IP Address Lookup Tool Styles */
.ip-tool-container {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 2em;
    margin: 2em 0;
}

.ip-tool-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 1.5em;
}

.ip-tool-tab {
    padding: 0.5em 1em;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}

.ip-tool-tab.active {
    opacity: 1;
    border-bottom: 2px solid #00a9ff;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.your-ip-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1em;
    background: rgba(0, 0, 0, 0.1);
    padding: 0.75em 1em;
    border-radius: 4px;
}

.your-ip-label {
    font-weight: bold;
    margin-right: 0.5em;
}

.your-ip {
    font-family: monospace;
    font-size: 1.1em;
}

.copy-ip {
    margin-left: 0.5em;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.2s;
}

.copy-ip:hover {
    color: #00a9ff;
}

.your-ip-details {
    flex-basis: 100%;
    margin-top: 0.5em;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.7);
}

.input-group {
    display: flex;
    margin-bottom: 1.5em;
    flex-direction: column;
}

.input-group label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.input-group input,
.input-group textarea {
    width: 100%;
    padding: 0.75em;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

/* Specific styling for URL input which doesn't have a label */
#url-tab .input-group {
    flex-direction: row;
}

/* Specific styling for text input which doesn't have a label */
#text-tab .input-group {
    flex-direction: row;
}

.contact-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5em;
    margin-bottom: 1.5em;
}

.lookup-btn {
    background: #00a9ff;
    color: #fff;
    border: none;
    padding: 0.75em 1.5em;
    cursor: pointer;
    font-weight: 300;
    transition: background-color 0.2s;
    border-radius: 4px;
}

.lookup-btn:hover {
    background-color: #0088cc;
}

.loader {
    display: none;
    text-align: center;
    padding: 1em;
    font-size: 1.5em;
    color: #00a9ff;
}

.loader i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.error-message {
    display: none;
    background: rgba(255, 0, 0, 0.2);
    color: #ff6666;
    padding: 1em;
    border-radius: 4px;
    margin-bottom: 1em;
}

.result-container {
    display: none;
    margin-top: 1em;
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px 4px 0 0;
}

.result-ip {
    font-family: monospace;
    font-size: 1.2em;
    font-weight: bold;
}

.result-type {
    background: #00a9ff;
    padding: 0.3em 0.6em;
    border-radius: 3px;
    font-size: 0.8em;
}

.result-body {
    background: rgba(0, 0, 0, 0.1);
    padding: 1.5em;
    border-radius: 0 0 4px 4px;
}

.result-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    margin-bottom: 2em;
}

.result-section {
    flex: 1;
    min-width: 300px;
}

.result-section h3 {
    margin-bottom: 1em;
    font-size: 1.2em;
    color: #00a9ff;
}

.result-section h3 i {
    margin-right: 0.5em;
}

.result-item {
    display: flex;
    margin-bottom: 0.75em;
}

.result-item-label {
    font-weight: bold;
    width: 40%;
}

.result-item-value {
    width: 60%;
}

.ip-info-tips {
    margin-top: 2em;
    background: rgba(0, 0, 0, 0.1);
    padding: 1.5em;
    border-radius: 4px;
}

.ip-info-tips h3 {
    margin-bottom: 1em;
    color: #00a9ff;
}

.tips-list {
    list-style: none;
    padding-left: 0;
}

.tips-list li {
    margin-bottom: 0.75em;
    position: relative;
    padding-left: 1.5em;
}

.tips-list li:before {
    content: '•';
    color: #00a9ff;
    position: absolute;
    left: 0;
}


/* Force footer icons to be horizontal */
ul.social-icons-footer {
	display: flex !important;
	flex-direction: row !important;
	justify-content: center;
	gap: 1em;
	list-style: none;
	padding: 0;
	margin: 0;
  }
  
  /* Prevent icons from stacking due to inline-block overrides */
  ul.social-icons-footer li {
	display: flex !important;
	align-items: center;
  }
  
  /* Remove underlines from icon links */
  ul.social-icons-footer a {
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
  }

  ul.social-icons-footer a img {
	text-decoration: none !important;
	border: none !important;
  }
  
  

@media screen and (max-width: 736px) {
    .result-grid {
        flex-direction: column;
    }
    
    .input-group {
        flex-direction: column;
    }
    
    .input-group input {
        border-radius: 4px;
        margin-bottom: 0.5em;
    }
    
    .lookup-btn {
        border-radius: 4px;
        width: 100%;
    }
    
    .result-item {
        flex-direction: column;
    }
    
    .result-item-label, 
    .result-item-value {
        width: 100%;
    }
    
    .result-map {
        height: 250px;
    }
}
	  
/* QR Code Generator Tool Styles */
.qr-tool-container {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 2em;
    margin: 2em 0;
}

.qr-tool-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 1.5em;
}

.qr-tool-tab {
    padding: 0.75em 1.5em;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    font-weight: 400;
}

.qr-tool-tab:hover {
    opacity: 0.9;
}

.qr-tool-tab.active {
    opacity: 1;
    border-bottom: 2px solid #00a9ff;
    font-weight: 500;
}

.tab-content {
    display: none;
    padding: 1em 0;
}

.tab-content.active {
    display: block;
}

.tab-content p {
    margin-bottom: 1em;
    color: rgba(255, 255, 255, 0.8);
}

.contact-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1em;
    margin-bottom: 1em;
}

.option-group {
    margin-bottom: 1em;
}

.option-group label {
    display: block;
    margin-bottom: 0.5em;
    color: rgba(255, 255, 255, 0.8);
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5em;
    margin-top: 1em;
}

.qr-options {
    margin: 2em 0;
    padding-top: 1em;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

select {
    width: 100%;
    padding: 0.75em;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    color: #fff;
}

input[type="color"] {
    width: 100%;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    cursor: pointer;
}

textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
}

.button-container {
    margin: 2em 0;
    text-align: center;
}

button.primary {
    background-color: #00a9ff;
    color: #fff;
    border: none;
    padding: 0.75em 2em;
    font-size: 1.1em;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 400;
    transition: background-color 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
}

button.primary:hover {
    background-color: #0088cc;
}

.qr-result {
    margin: 2em 0;
}

.loader {
    display: none;
    text-align: center;
    padding: 2em;
}

.loader i {
    font-size: 2em;
    color: #00a9ff;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.error-message {
    display: none;
    background: rgba(255, 0, 0, 0.1);
    color: #ff6666;
    padding: 1em;
    border-radius: 4px;
    margin: 1em 0;
    text-align: center;
}

.success-container {
    display: none;
    text-align: center;
}

.qr-preview {
    background: #fff;
    display: inline-block;
    padding: 1em;
    border-radius: 4px;
    margin-bottom: 1.5em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-width: 100%;
}

.qr-preview #qr-image {
    display: block;
    min-height: 256px;
    min-width: 256px;
}

.qr-preview #qr-image img {
    display: block;
    max-width: 100%;
    height: auto;
}

.qr-actions {
    display: flex;
    justify-content: center;
    gap: 1em;
    margin-top: 1em;
}

.download-btn, .share-btn {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: none;
    padding: 0.7em 1.5em;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.download-btn {
    background: #00a9ff;
}

.download-btn:hover {
    background: #0088cc;
}

.share-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.qr-info-tips {
    margin: 3em 0;
    padding: 1.5em;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.qr-info-tips h3 {
    margin-bottom: 1em;
    color: #00a9ff;
}

.qr-info-tips h3 i {
    margin-right: 0.5em;
}

.qr-use-cases {
    margin: 3em 0;
}

.qr-use-cases h3 {
    margin-bottom: 1.5em;
    color: #00a9ff;
}

.qr-use-cases h3 i {
    margin-right: 0.5em;
}

.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2em;
}

.use-case {
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5em;
    border-radius: 4px;
    text-align: center;
    transition: transform 0.3s;
}

.use-case:hover {
    transform: translateY(-5px);
}

.use-case i {
    font-size: 2em;
    color: #00a9ff;
    margin-bottom: 0.5em;
}

.use-case h4 {
    margin-bottom: 0.5em;
    font-size: 1.2em;
}

/* Responsive styles */
@media screen and (max-width: 736px) {
    .qr-tool-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    
    .qr-tool-tab {
        text-align: center;
    }
    
    .options-grid {
        grid-template-columns: 1fr;
    }
    
    .use-cases-grid {
        grid-template-columns: 1fr;
    }
    
    .qr-actions {
        flex-direction: column;
    }
    
    .download-btn, .share-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Knowledge Hub: Dark Theme Post Card Enhancements */
#post-grid-container .post-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

#post-grid-container .post-card a {
    border-bottom: 0;
    color: inherit;
    display: block;
}

#post-grid-container .post-card:hover,
#post-grid-container .post-card:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    border-color: rgba(0, 169, 255, 0.35);
    background: rgba(255, 255, 255, 0.05);
}

#post-grid-container .post-image-img {
    height: 200px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), filter 240ms ease;
    filter: brightness(0.95) contrast(1.05);
}

#post-grid-container .post-card:hover .post-image-img,
#post-grid-container .post-card:focus-within .post-image-img {
    transform: scale(1.035);
    filter: brightness(1) contrast(1.05);
}

#post-grid-container .post-content {
    padding: 1.25rem 1.25rem 1.35rem;
    color: rgba(255, 255, 255, 0.8);
}

#post-grid-container .post-content h3 {
    color: #ffffff;
    margin-bottom: 0.65rem;
    font-weight: 700;
}

#post-grid-container .post-content .post-excerpt {
    color: rgba(255, 255, 255, 0.72);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.3em;
}

@media screen and (max-width: 736px) {
    #post-grid-container .post-image-img {
        height: 180px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #post-grid-container .post-card,
    #post-grid-container .post-image-img {
        transition: none;
    }
}
	  
.email-form-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    margin-bottom: 1.5em;
}
	  
/* Text and Code Converter Styles */
.converter-container {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 2em;
    margin: 2em 0;
	width: 100%;
    overflow: hidden;
}

.converter-tabs {
    width: 100%;
    display: flex;
    flex-direction: row; /* horizontal layout */
    flex-wrap: wrap;
    gap: 0.5em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    overflow: visible;
}

.converter-tabs::-webkit-scrollbar {
	width: 0 !important;
    height: 0 !important;
	display: none;
}

.converter-tab {
    padding: 0.75em 1.5em;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
}

.converter-tab:hover {
    opacity: 0.9;
}

.converter-tab.active {
    opacity: 1;
    border-bottom: 2px solid #00a9ff;
    font-weight: 500;
}

.converter-body {
    padding: 1em 0;
}

.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin: 1.5em 0;
}

.action-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: none;
    padding: 0.6em 1.2em;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 400;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

#url-encode-btn, #base64-encode-btn, #text-to-hex-btn, #text-to-binary-btn, #md5-btn, #sha1-btn, #sha256-btn {
    background-color: #00a9ff;
}

#url-encode-btn:hover, #base64-encode-btn:hover, #text-to-hex-btn:hover, #text-to-binary-btn:hover, #md5-btn:hover, #sha1-btn:hover, #sha256-btn:hover {
    background-color: #0088cc;
}

.input-output-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    margin-top: 2em;
}

.io-section {
    flex: 1;
    min-width: 300px;
}

.io-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5em;
}

.io-header label {
    font-weight: 500;
    font-size: 1.1em;
    color: rgba(255, 255, 255, 0.9);
}

.io-actions {
    display: flex;
    gap: 0.5em;
}

.small-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: none;
    padding: 0.4em 0.8em;
    border-radius: 3px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.small-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

#input-text, #output-text {
    width: 100%;
    min-height: 200px;
    padding: 1em;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: #fff;
    font-family: monospace;
    resize: vertical;
}

#output-text {
    background: rgba(0, 0, 0, 0.3);
}

.converter-info {
    margin-top: 3em;
}

.uses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2em;
    margin: 2em 0;
}

.use-case {
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5em;
    border-radius: 4px;
    text-align: center;
    transition: transform 0.3s;
}

.use-case:hover {
    transform: translateY(-5px);
}

.use-case i {
    font-size: 2em;
    color: #00a9ff;
    margin-bottom: 0.5em;
}

.use-case h4 {
    margin-bottom: 0.5em;
    font-size: 1.2em;
}

/* Responsive styles */
@media screen and (max-width: 736px) {
    .converter-tabs {
        flex-direction: column; /* vertical stacking */
        border-bottom: none;
        gap: 0.5em;
    }

    .converter-tab {
        padding: 0.75em 1.5em;
        padding-left: 1.75em;
        border-bottom: none;
    }

	
    .converter-tab.active {
        border-left: 4px solid #00a9ff;
        background-color: rgba(255, 255, 255, 0.02); /* optional */
    }

    .input-output-container {
        flex-direction: column;
    }

    .action-buttons {
        flex-direction: column;
    }

    .action-btn {
        width: 100%;
        text-align: center;
    }

    .io-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .io-actions {
        margin-top: 0.5em;
        width: 100%;
        justify-content: space-between;
    }
}
	  
/* Password Tool Styles */
.password-tools-container {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 2em;
    margin: 2em 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.password-tab-container {
    margin-bottom: 2em;
}

.password-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 2em;
}

.password-tab {
    padding: 1em 2em;
    cursor: pointer;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.password-tab:hover {
    color: #fff;
}

.password-tab.active {
    color: #00a9ff;
    border-bottom: 3px solid #00a9ff;
}

/* Password checker styles */
.strength-meter {
    margin-top: 1em;
    height: 6px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.strength-meter-fill {
    height: 100%;
    width: 0;
    border-radius: 3px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.strength-text {
    margin-top: 0.5em;
    font-weight: bold;
    text-align: right;
}

.password-feedback {
    margin-top: 1.5em;
}

.feedback-item {
    margin-bottom: 0.5em;
    display: flex;
    align-items: center;
}

.feedback-icon {
    margin-right: 0.75em;
    width: 20px;
    text-align: center;
}

.icon-success {
    color: #4CAF50;
}

.icon-warning {
    color: #FFC107;
}

.icon-error {
    color: #F44336;
}

/* Password generator styles */
.options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
    margin-bottom: 1.5em;
}

.option-group {
    display: flex;
    align-items: center;
}

.option-label {
    margin-left: 0.5em;
}

.length-slider {
    width: 100%;
    margin: 1em 0;
}

.length-value {
    font-weight: bold;
    text-align: right;
    color: #00a9ff;
    margin-bottom: 0.5em;
}

.slider-container {
    display: flex;
    align-items: center;
}

.slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #00a9ff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider::-webkit-slider-thumb:hover {
    background: #0088cc;
    transform: scale(1.1);
}

.slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #00a9ff;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}

.slider::-moz-range-thumb:hover {
    background: #0088cc;
    transform: scale(1.1);
}

.generated-password {
    padding: 1em;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin: 1em 0;
    text-align: center;
    font-family: monospace;
    font-size: 1.2em;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#password-output {
    flex: 1;
    text-align: left;
    overflow-wrap: break-word;
    word-break: break-all;
}

.copy-btn {
    position: static;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: color 0.3s ease;
    margin-left: 10px;
}

.toggle-password {
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.3s ease;
}

.toggle-password:hover {
    color: #00a9ff;
}

/* Button styles */
.btn {
    background-color: #00a9ff;
    color: #fff;
    border: none;
    padding: 0.75em 1.5em;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn:hover {
    background-color: #0088cc;
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-outline {
    background-color: transparent;
    border: 2px solid #00a9ff;
    color: #00a9ff;
}

.btn-outline:hover {
    background-color: rgba(0, 169, 255, 0.1);
}

.password-tips {
    margin-top: 2em;
    padding: 1.5em;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Responsive adjustments */
@media screen and (max-width: 736px) {
    .options-grid {
        grid-template-columns: 1fr;
    }
}
	  
/* Additional password tool styles */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.input-group {
    margin-bottom: 1.5em;
    position: relative;
}

.input-group input[type="text"],
.input-group input[type="password"] {
    width: 100%;
    padding: 0.8em;
    padding-right: 3em;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.input-group input:focus {
    border-color: #00a9ff;
    box-shadow: 0 0 0 2px rgba(0, 169, 255, 0.1);
    outline: none;
}

/* Tips list for password page */
.password-tips .tips-list {
	list-style: none;
	padding-left: 0;
}

.password-tips .tips-list li {
	margin-bottom: 0.5em;
	padding-left: 1.5em;
	position: relative;
}

.password-tips .tips-list li:before {
	content: "✔";
	color: #00a9ff;
	position: absolute;
	left: 0;
	top: 2px;
	font-size: 0.9em;
	line-height: 1;
}

	  
/* JSON and XML Validator Styles */
.validator-container {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 2em;
    margin: 2em 0;
}

.validator-tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 1.5em;
}

.validator-tab {
    padding: 0.75em 1.5em;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    font-weight: 400;
    white-space: nowrap;
}

.validator-tab:hover {
    opacity: 0.9;
}

.validator-tab.active {
    opacity: 1;
    border-bottom: 2px solid #00a9ff;
    font-weight: 500;
}

.editor-container {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.75em 1em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.editor-wrapper {
	width: 100%;
	min-height: 300px;
	max-width: 100%;
	overflow: hidden;
	position: relative;
}

.editor-title {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.editor-actions {
    display: flex;
    gap: 0.5em;
}

.code-editor {
	width: 100%;
	min-height: 300px;
	box-sizing: border-box;
}


.CodeMirror {
    width: 100%;
    height: auto;
    overflow: hidden;
    box-sizing: border-box;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.5;
}

.CodeMirror-scroll {
	max-height: 600px;
	overflow-y: auto;
}

.CodeMirror-gutters {
	background-color: transparent;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.4);
  }
  
  .CodeMirror-cursor {
	border-left: 1px solid #f8f8f2;
  }

.validator-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin: 1.5em 0;
}

.action-btn {
    padding: 0.6em 1.2em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-weight: 400;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: all 0.2s;
}

.action-btn.primary {
    background-color: #00a9ff;
}

.action-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.action-btn.primary:hover {
    background-color: #0088cc;
}

.validator-result {
    display: flex;
    align-items: flex-start;
    gap: 1em;
    padding: 1em;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    margin: 1.5em 0;
}

.validator-result.success {
    background: rgba(76, 175, 80, 0.1);
    border-left: 4px solid #4caf50;
}

.validator-result.error {
    background: rgba(244, 67, 54, 0.1);
    border-left: 4px solid #f44336;
}

.validator-result.info {
    background: rgba(33, 150, 243, 0.1);
    border-left: 4px solid #2196f3;
}

.result-icon {
    font-size: 1.5em;
}

.validator-result.success .result-icon {
    color: #4caf50;
}

.validator-result.error .result-icon {
    color: #f44336;
}

.validator-result.info .result-icon {
    color: #2196f3;
}

.validator-features {
    margin: 3em 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2em;
    margin-top: 1.5em;
}

.feature {
    padding: 1.5em;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    text-align: center;
    transition: transform 0.3s ease;
}

.feature:hover {
    transform: translateY(-5px);
}

.feature-icon {
    font-size: 2em;
    color: #00a9ff;
    margin-bottom: 0.5em;
}

.feature h3 {
    margin-bottom: 0.75em;
    font-size: 1.2em;
}

.steps-container {
    margin: 2em 0;
}

.step {
    display: flex;
    margin-bottom: 2em;
    align-items: flex-start;
}

.step-number {
    width: 2.5em;
    height: 2.5em;
    background: #00a9ff;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
    margin-right: 1em;
}

.step-content h3 {
    margin-bottom: 0.5em;
}

.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2em;
    margin-top: 1.5em;
}

.use-case {
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5em;
    border-radius: 4px;
    text-align: center;
    transition: transform 0.3s;
}

.use-case:hover {
    transform: translateY(-5px);
}

.use-case i {
    font-size: 2em;
    color: #00a9ff;
    margin-bottom: 0.5em;
}

.use-case h4 {
    margin-bottom: 0.5em;
    font-size: 1.2em;
}

.line-error {
    background-color: rgba(244, 67, 54, 0.2);
}

/* Responsive adjustments */
@media screen and (max-width: 736px) {
    .validator-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .validator-tab {
        text-align: center;
        padding: 0.75em 0.5em;
    }

    .editor-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .editor-actions {
        margin-top: 0.5em;
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .validator-actions {
        flex-direction: column;
        width: 100%;
    }

    .action-btn {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }

    .editor-container {
        overflow-x: hidden;
    }

	.CodeMirror {
        max-height: 200px;
        overflow-y: auto;
		width: 100% !important;
    }

    .features-grid,
    .use-cases-grid {
        grid-template-columns: 1fr;
    }
}
	  
/* Color Tool */
.color-tool {
    background: #2a2b36;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.color-picker-container {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.color-inputs {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.color-preview {
    width: 200px;
    height: 200px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
}

/* Remove the ::after pseudo-element that was causing the overlay */
.color-preview::after,
.color-preview:hover::after,
.color-preview.copied::after {
    display: none;
    content: none;
    opacity: 0;
}

.color-preview-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.color-preview-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    text-align: center;
}

.color-formats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.color-format {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 4px;
}

.color-format label {
    display: block;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
}

.color-format input {
    width: 100%;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 4px;
    position: relative;
    z-index: 1;
}

.color-format input::after,
.color-format input:hover::after,
.color-format input::before,
.color-format input:hover::before {
    display: none;
    content: none;
    opacity: 0;
}

.color-format {
    position: relative;
    z-index: 1;
}

.color-harmonies {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.harmony-group {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 4px;
}

.harmony-group h3 {
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.harmony-colors {
    display: flex;
    gap: 0.5rem;
}

.harmony-color {
    flex: 1;
    height: 60px;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s ease;
    position: relative;
}

.harmony-color:hover {
    transform: scale(1.05);
}

.harmony-color span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.25rem;
    font-size: 0.8rem;
    text-align: center;
}

.contrast-checker {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 2rem;
}

.contrast-preview {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
}

.contrast-text {
    flex: 1;
    padding: 1rem;
    border-radius: 4px;
    text-align: center;
}

.color-history {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.history-color {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.copy-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    display: inline-block;
    width: 100%;
    margin-top: 5px;
    text-align: center;
    user-select: none;
}

.copy-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.copy-btn:focus {
    outline: 2px solid rgba(255, 255, 255, 0.4);
    outline-offset: 2px;
}

.copy-btn.copied {
    background: #4CAF50;
    color: #fff;
}
.copy-btn.copied:after {
    content: "✓";
    margin-left: 5px;
}

@media screen and (max-width: 736px) {
    .color-picker-container {
        flex-direction: column;
    }
    .color-preview {
        width: 100%;
        height: 150px;
    }
}
	  
/* Fix copy button overlays */
button[id*="CopyBtn"] {
    position: relative;
    z-index: 5;
    overflow: visible;
}

button[id*="CopyBtn"]::before,
button[id*="CopyBtn"]::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
}

/* Fix specific element causing the issue */
.button#hslCopyBtn\.copy {
    display: none !important;
}

/* Target any overlayed buttons */
div[class$="\.copy"] {
    display: none !important;
}

button[class$="\.copy"] {
    display: none !important;
}

div[id$="\.copy"] {
    display: none !important;
}
	  
/* Fix for color tool overlay buttons - add at end of file */
[id$=".copy-btn"],
div[id$=".copy"],
button[id$=".copy"],
span[id$=".copy"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.color-format .action-btn {
    display: block;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    margin-top: 5px;
    transition: background-color 0.3s;
}

.color-format .action-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.color-format .action-btn.copied {
    background-color: #4CAF50;
    color: white;
}

/* Override any other styles that might interfere */
.color-format {
    position: relative;
    z-index: 1;
    padding: 15px;
    margin-bottom: 15px;
}

.color-format input[type="text"] {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 4px;
    margin-bottom: 8px;
}
	  
/* Contact form button fix */
.contact-form input[type="submit"] {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    line-height: normal;
    padding: 0 2em;
    height: 2.75em;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    font-size: 0.9em;
}

.contact-form ul.actions {
    margin-top: 1em;
}

.contact-form .primary {
    background-color: #00a9ff;
    box-shadow: none !important;
}
	  
/* Services Page Styles */
.services-intro {
    margin-bottom: 3em;
}

.services-intro .services-content p {
    font-size: 1.2em;
    line-height: 1.6;
}

.primary-services h2, 
.integrated-solutions h2, 
.experience-section h2, 
.process-section h2, 
.testimonials-section h2 {
    margin-bottom: 1em;
    color: #fff;
    font-size: 1.8em;
}

.primary-services h2 i, 
.integrated-solutions h2 i, 
.experience-section h2 i, 
.process-section h2 i, 
.testimonials-section h2 i {
    margin-right: 0.5em;
    color: #00a9ff;
}

/* Services Page Styles */
.services-intro {
    margin-bottom: 3em;
}

.services-intro .services-content {
    font-size: 1.1em;
    max-width: 90%;
    margin: 0 auto;
    line-height: 1.6;
}

.primary-services {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 2.5em;
    margin-bottom: 3em;
}

.primary-services h2 {
    margin-bottom: 0.5em;
    color: #00a9ff;
}

.primary-services > .row:first-child {
    margin-bottom: 2em;
}

.service-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 1.5em;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.service-card i {
    font-size: 2em;
    color: #00a9ff;
    margin-bottom: 0.5em;
    display: block;
}

.service-card h3 {
    margin-bottom: 1em;
    color: #ffffff;
}

.integrated-solutions {
    margin: 3em 0;
    padding: 2.5em;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

.integrated-solutions h2 {
    color: #00a9ff;
    margin-bottom: 1em;
}

.integrated-solutions h3 {
    margin-bottom: 1em;
}

.solution-content {
    margin-bottom: 1.5em;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 1.5em 0;
}

.benefits-list li {
    margin-bottom: 1em;
    padding-left: 1.5em;
    position: relative;
}

.benefits-list li i {
    color: #00a9ff;
    position: absolute;
    left: 0;
    top: 0.3em;
}

.image-showcase {
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-image {
    width: 100%;
    border-radius: 6px;
    transition: transform 0.3s ease;
}

.service-image:hover {
    transform: scale(1.03);
}

.experience-section {
    margin: 3em 0;
    padding: 2.5em;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.experience-section h2 {
    color: #00a9ff;
    margin-bottom: 1em;
}

.experience-content {
    margin-bottom: 2em;
}

.image-gallery {
    margin-top: 2em;
}

.gallery-item {
    margin-bottom: 1.5em;
    position: relative;
}

.image-caption {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 0.5em 1em;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.process-section {
    margin: 3em 0;
}

.process-section h2 {
    color: #00a9ff;
    margin-bottom: 1.5em;
}

.process-step {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 1.5em;
    height: 100%;
    position: relative;
    transition: transform 0.3s ease;
}

.process-step:hover {
    transform: translateY(-5px);
}

.step-number {
    background: #00a9ff;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 0.8em;
}

.testimonials-section {
    margin: 3em 0;
    padding: 2.5em;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

.testimonials-section h2 {
    color: #00a9ff;
    margin-bottom: 1.5em;
}

.testimonial {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 1.5em;
    height: 100%;
    position: relative;
}

.testimonial:before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 4em;
    color: rgba(255, 255, 255, 0.1);
    font-family: Georgia, serif;
}

.testimonial-content {
    position: relative;
    z-index: 1;
}

.testimonial-author {
    margin-top: 1em;
    text-align: right;
}

.cta-section {
    margin: 3em 0;
    padding: 2em;
    background: #00a9ff;
    border-radius: 8px;
    text-align: center;
}

.cta-section h2 {
    color: #fff;
    margin-bottom: 0.5em;
}

.cta-section p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5em;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.cta-section .button.primary {
    background-color: #fff;
    color: #00a9ff !important;
    font-weight: bold;
    padding: 0 2em;
}

.cta-section .button.primary:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

@media screen and (max-width: 736px) {
    .primary-services, 
    .integrated-solutions,
    .experience-section,
    .testimonials-section {
        padding: 1.5em;
    }
    
    .services-intro .services-content {
        max-width: 100%;
    }
    
    .image-showcase {
        margin-top: 2em;
    }
    
    .process-step {
        margin-bottom: 1em;
    }
}

/* Calculator Styles */
.calculator-container {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 8px;
	padding: 2em;
	margin: 2em 0;
}

.calculator-section {
	margin-bottom: 1.5em;
}

.calculator-section h3 {
	margin-bottom: 1em;
	color: #00a9ff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 0.5em;
}

.component-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 1em;
}

.component-label {
	flex: 1;
	min-width: 150px;
}

.component-selector {
	flex: 2;
}

.quantity-selector {
	flex: 1;
	margin-left: 1em;
}

select, input {
	width: 100%;
	padding: 0.5em;
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	border-radius: 4px;
}

select:focus, input:focus {
	border-color: #00a9ff;
	outline: none;
}

.calculator-actions {
	margin-top: 2em;
	text-align: center;
}

.calculate-btn {
	display: inline-block;
	padding: 0.75em 2em;
	background-color: #00a9ff;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1em;
	font-weight: bold;
	transition: background-color 0.3s ease;
}

.calculate-btn:hover {
	background-color: #0088cc;
}

.result-container {
	margin-top: 2em;
	text-align: center;
	padding: 1.5em;
	background-color: rgba(0, 169, 255, 0.1);
	border-radius: 8px;
	display: none;
}

.result-value {
	font-size: 2em;
	font-weight: bold;
	color: #00a9ff;
	margin: 0.5em 0;
}

.result-message {
	margin-top: 1em;
	font-style: italic;
}

@media screen and (max-width: 736px) {
	.component-row {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.component-label, .component-selector, .quantity-selector {
		width: 100%;
		margin: 0.5em 0;
	}
}

/* Airflow Diagram Styling */
.diagram-container {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
    transition: background-color 0.3s ease;
}

.diagram-container:hover {
    background: rgba(255, 255, 255, 0.08);
}

.diagram {
    border-radius: 4px;
    background: #2a2b3c;
    padding: 1rem;
}

.diagram-container figcaption {
    text-align: center;
    margin-top: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9em;
}

.key-combo {
    display: inline-block !important;
    padding: 0.2em 0.7em !important;
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
    border-radius: 4px !important;
    margin: 0 2px !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.15) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
}

.key-combo.plus {
    background: none !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0.2em !important;
    font-weight: 700 !important;
}

.method-section {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.method-section h2 {
    margin-top: 0;
    color: #ffffff;
}

.method-section:hover {
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}

pre code {
    display: block;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    overflow-x: auto;
    font-family: monospace;
    line-height: 1.5;
}

/* Article Image Styling */
.article-image-container {
    margin: 2em 0;
    width: 100%;
}

.article-image-container .image.featured {
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-image-container .image.featured:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.article-image-container .image.featured img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px 8px 0 0;
}

.article-image-container figcaption {
    padding: 1em;
    background: rgba(28, 29, 38, 0.95);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9em;
    text-align: center;
    border-radius: 0 0 8px 8px;
}

@media screen and (max-width: 736px) {
    .article-image-container {
        margin: 1.5em 0;
    }
    
    .article-image-container figcaption {
        padding: 0.75em;
        font-size: 0.85em;
    }
}

/* Related Posts Styling */
.related-posts {
    list-style-type: none;
    padding: 0;
    margin: 1em 0;
}

.related-posts li {
    margin-bottom: 1em;
    padding-left: 1.5em;
    position: relative;
}

.related-posts li:before {
    content: "•";
    color: #4c5c96;
    position: absolute;
    left: 0;
    font-size: 1.2em;
}

.related-posts a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.related-posts a:hover {
    color: #4c5c96;
}

.related-posts .post-description {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
    margin-top: 0.3em;
}

@media screen and (max-width: 736px) {
    .related-posts li {
        margin-bottom: 0.8em;
    }
    
    .related-posts .post-description {
        font-size: 0.85em;
    }
}

.info-box {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
    border-left: 4px solid #00a8ff;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.feature-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 1.5rem;
    border-radius: 8px;
    transition: transform 0.2s ease;
}

.feature-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
}

.socket-type {
    background: rgba(255, 255, 255, 0.03);
    padding: 1.5rem;
    margin: 1rem 0;
    border-radius: 8px;
    border-left: 4px solid;
}

.socket-type:nth-child(1) { border-color: #4a90e2; }
.socket-type:nth-child(2) { border-color: #e24a4a; }
.socket-type:nth-child(3) { border-color: #4ae24a; }

.socket-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.intel-sockets, .amd-sockets {
    background: rgba(255, 255, 255, 0.03);
    padding: 1.5rem;
    border-radius: 8px;
}

.intel-sockets { border-top: 4px solid #0071c5; }
.amd-sockets { border-top: 4px solid #ed1c24; }

.identification-methods {
    background: rgba(255, 255, 255, 0.03);
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1.5rem 0;
}

.identification-methods p {
    margin: 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.considerations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.consideration-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 1.25rem;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.consideration-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.troubleshooting-section {
    background: rgba(255, 255, 255, 0.03);
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1.5rem 0;
}

.issue-solution {
    margin: 1rem 0;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    border-left: 3px solid #00a8ff;
}

.issue-solution h4 {
    color: #00a8ff;
    margin-bottom: 0.5rem;
}

@media screen and (max-width: 736px) {
    .feature-grid,
    .socket-comparison,
    .considerations-grid {
        grid-template-columns: 1fr;
    }
    
    .info-box,
    .socket-type,
    .intel-sockets,
    .amd-sockets,
    .identification-methods,
    .consideration-item,
    .troubleshooting-section {
        padding: 1rem;
    }
}

/* Keyboard Article Specific Styles */
.intro-section {
    margin-bottom: 3em;
    padding: 0 1em;
}

.features-section {
    margin: 3em 0;
}

.feature-card {
    padding: 2em;
    text-align: center;
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-card .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1em;
}

    .feature-card .icon img {
        width: 32px;
        height: 32px;
    }

.methods-section {
    margin: 3em 0;
}

.section-intro {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 2em;
}

.method-card {
    margin-bottom: 3em;
    padding: 2em;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: box-shadow 0.3s ease;
}

.method-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.method-card h3 {
    margin-bottom: 1em;
    color: #4c5c96;
}

.method-card h3 i {
    margin-right: 0.5em;
}

.method-detail, .mode-feature, .remapping-detail, .macro-detail {
    padding: 1.5em;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    height: 100%;
}

.key-mappings li {
    margin-bottom: 0.5em;
    padding: 0.5em;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.software-list li, .use-cases li {
    margin-bottom: 0.5em;
    padding-left: 1em;
    position: relative;
}

.software-list li:before, .use-cases li:before {
    content: "•";
    color: #4c5c96;
    position: absolute;
    left: 0;
}

.steps-list li {
    margin-bottom: 0.75em;
    padding-left: 1.5em;
    position: relative;
    counter-increment: step-counter;
}

.steps-list li:before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    background: #4c5c96;
    color: white;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    text-align: center;
    line-height: 1.5em;
    font-size: 0.8em;
}

.code-block {
    margin: 1.5em 0;
    background: #2d2d2d;
    border-radius: 6px;
    overflow: hidden;
}

.code-block pre {
    margin: 0;
    padding: 1.5em;
}

.code-block code {
    color: #f8f8f2;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
    line-height: 1.5;
}

.conclusion-section {
    margin-top: 3em;
    padding: 2em;
    background: #f8f9fa;
    border-radius: 8px;
}

.key-combo {
    display: inline-block;
    padding: 0.2em 0.5em;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
}

.key-combo.plus {
    background: none;
    padding: 0 0.2em;
}

.warning-box {
  background: rgba(255, 255, 255, 0.04);
  color: #ffe066;
  border-left: 4px solid #ffb300;
  padding: 1.2em 1.5em;
  margin: 2em 0;
  border-radius: 8px;
  box-shadow: none;
}

.tip-box {
  background: rgba(255, 255, 255, 0.04);
  color: #66d9ff;
  border-left: 4px solid #00a9ff;
  padding: 1.2em 1.5em;
  margin: 2em 0;
  border-radius: 8px;
  box-shadow: none;
}

@media (prefers-color-scheme: dark) {
  .warning-box {
    background: rgba(255, 255, 255, 0.04);
    color: #ffe066;
    border-left: 4px solid #ffb300;
  }
  .tip-box {
    background: rgba(255, 255, 255, 0.04);
    color: #66d9ff;
    border-left: 4px solid #00a9ff;
  }
}

/* Shimmer Box Styles */
.shimmer-box {
    background: linear-gradient(135deg, rgba(0, 169, 255, 0.1) 0%, rgba(0, 169, 255, 0.05) 50%, rgba(0, 169, 255, 0.1) 100%);
    border: 2px solid rgba(0, 169, 255, 0.3);
    border-radius: 8px;
    padding: 1.5em;
    margin: 2em 0;
    position: relative;
    overflow: hidden;
    --shimmer-interval: 8s;
    --shimmer-opacity: 0.22;
    --shimmer-angle: 14deg;
}

.shimmer-box::before {
    content: '';
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(60% 120% at 50% 50%, rgba(0, 169, 255, 0.12) 0%, rgba(0, 169, 255, 0.0) 60%),
        linear-gradient(60deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 55%);
    transform: translateX(-120%) rotate(var(--shimmer-angle, 14deg));
    filter: blur(0.5px) saturate(105%);
    opacity: var(--shimmer-opacity, 0.35);
    animation: shimmer-beam var(--shimmer-interval, 8s) linear infinite;
    will-change: transform, opacity;
    border-radius: 8px;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    backface-visibility: hidden;
}

.shimmer-box::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 30%),
        linear-gradient(135deg, transparent 0%, rgba(0, 169, 255, 0.06) 50%, transparent 100%);
    animation: none;
    pointer-events: none;
}

@keyframes shimmer-beam {
    0%, 20% {
        transform: translateX(-120%) rotate(var(--shimmer-angle, 14deg));
        opacity: 0;
    }
    22% {
        opacity: var(--shimmer-opacity, 0.35);
    }
    78% {
        transform: translateX(120%) rotate(var(--shimmer-angle, 14deg));
        opacity: var(--shimmer-opacity, 0.35);
    }
    80%, 100% {
        transform: translateX(120%) rotate(var(--shimmer-angle, 14deg));
        opacity: 0;
    }
}

.shimmer-box > * {
    position: relative;
    z-index: 1;
}



.shimmer-box:nth-of-type(2n)::before { animation-delay: 0.9s; }
.shimmer-box:nth-of-type(3n)::before { animation-delay: 1.8s; }

@media (prefers-reduced-motion: reduce) {
    .shimmer-box::before,
    .shimmer-box::after {
        animation: none !important;
        transform: none !important;
    }
}

.shimmer-box h3,
.shimmer-box h4 {
    color: #00a9ff;
    margin-top: 0;
    margin-bottom: 0.75em;
}

.shimmer-box p {
    margin-bottom: 0.75em;
    color: rgba(255, 255, 255, 0.9);
}

.shimmer-box p:last-child {
    margin-bottom: 0;
}

.shimmer-box ul,
.shimmer-box ol {
    margin-bottom: 0;
}

.shimmer-box li {
    color: rgba(255, 255, 255, 0.9);
}

/* Icon support for shimmer box */
.shimmer-box .shimmer-icon {
    display: inline-block;
    margin-right: 0.5em;
    color: #00a9ff;
    font-size: 1.2em;
}

/* Responsive adjustments */
@media screen and (max-width: 736px) {
    .shimmer-box {
        padding: 1.25em;
        margin: 1.5em 0;
    }
}

/* Ambient Panel - subtle moving background pattern */
.ambient-panel {
    border-radius: 8px;
    padding: 1.5em;
    margin: 2em 0;
    position: relative;
    overflow: hidden;
    --ambient-speed: 48s;
    background-color: rgba(255, 255, 255, 0.02);
    background-image:
        radial-gradient(140% 80% at 10% 20%, rgba(0, 169, 255, 0.08) 0%, rgba(0, 169, 255, 0) 60%),
        radial-gradient(160% 100% at 90% 80%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 60%),
        conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.03) 0deg, rgba(0, 0, 0, 0.0) 90deg, rgba(255, 255, 255, 0.03) 180deg, rgba(0, 0, 0, 0.0) 270deg, rgba(255, 255, 255, 0.03) 360deg);
    background-size: 200% 200%, 200% 200%, 200% 200%;
    background-position: 0% 0%, 100% 100%, 50% 50%;
    animation: ambient-drift var(--ambient-speed) linear infinite;
}

@keyframes ambient-drift {
    0% {
        background-position: 0% 0%, 100% 100%, 50% 50%;
    }
    50% {
        background-position: 100% 0%, 0% 100%, 55% 45%;
    }
    100% {
        background-position: 0% 0%, 100% 100%, 50% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-panel {
        animation: none !important;
    }
}

/* Tech Panel - geometric grid + nodes with slow drift */
.tech-panel {
    border-radius: 8px;
    padding: 1.5em;
    margin: 2em 0;
    position: relative;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.02);
    --grid-size: 28px;
    --tech-speed: 60s;
}

.tech-panel::before {
    content: '';
    position: absolute;
    inset: -25%;
    pointer-events: none;
    background-image:
        /* vertical lines */
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px var(--grid-size)),
        /* horizontal lines */
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px var(--grid-size)),
        /* iso diagonals */
        repeating-linear-gradient(60deg, rgba(0, 169, 255, 0.03) 0 1px, transparent 1px calc(var(--grid-size) + 6px)),
        repeating-linear-gradient(-60deg, rgba(0, 169, 255, 0.03) 0 1px, transparent 1px calc(var(--grid-size) + 6px)),
        /* nodes */
        radial-gradient(circle at center, rgba(0, 169, 255, 0.06) 1px, rgba(0, 0, 0, 0) 1.5px);
    background-size:
        var(--grid-size) var(--grid-size),
        var(--grid-size) var(--grid-size),
        calc(var(--grid-size) * 1.6) calc(var(--grid-size) * 1.6),
        calc(var(--grid-size) * 1.6) calc(var(--grid-size) * 1.6),
        var(--grid-size) var(--grid-size);
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
    mix-blend-mode: screen;
    transform: translate3d(0, 0, 0);
    animation: tech-drift var(--tech-speed) ease-in-out infinite;
}

@keyframes tech-drift {
    0% {
        transform: translate3d(0, 0, 0) rotate(0.001deg);
    }
    50% {
        transform: translate3d(32px, -18px, 0) rotate(0.001deg);
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(0.001deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tech-panel::before {
        animation: none !important;
        transform: none !important;
    }
}

/* Hex Panel - subtle blue hex grid with slow drift */
.hex-panel {
    border-radius: 8px;
    padding: 1.5em;
    margin: 2em 0;
    position: relative;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.02);
    --hex-side: 64px;
    --hex-height: 110px; /* ~ side * sqrt(3) */
    --hex-speed: 80s;
}

.hex-panel::before {
    content: '';
    position: absolute;
    inset: -25%;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(60deg, rgba(0, 169, 255, 0.06) 0 1px, transparent 1px var(--hex-side)),
        repeating-linear-gradient(-60deg, rgba(0, 169, 255, 0.06) 0 1px, transparent 1px var(--hex-side)),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px var(--hex-height));
    background-position: 0 0, 0 0, 0 0;
    mix-blend-mode: screen;
    transform: translate3d(0, 0, 0);
    animation: hex-sway var(--hex-speed) ease-in-out infinite;
}

@keyframes hex-sway {
    0% {
        transform: translate3d(0, 0, 0) rotate(0.2deg);
    }
    25% {
        transform: translate3d(36px, -20px, 0) rotate(0.8deg);
    }
    50% {
        transform: translate3d(64px, 0, 0) rotate(1.2deg);
    }
    75% {
        transform: translate3d(36px, 20px, 0) rotate(0.8deg);
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(0.2deg);
    }
}

.hex-panel > * {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .hex-panel::before {
        animation: none !important;
        transform: none !important;
    }
}

/* ================================
   Summary Box
   ================================ */

   :root {
	--cib-summary-bg: #0b1220;
	--cib-summary-fg: #e9f1ff;
	--cib-summary-accent: #39c0ff;   /* electric blue */
	--cib-summary-accent-2: #8a7dff; /* violet */
	--cib-summary-border: #263149;
	--cib-summary-glow: 0 10px 30px rgba(57,192,255,.18);
  
	/* Plasma tuning */
	--plasma-opacity: .32;      /* richer */
	--plasma-blur: 20px;        /* soft wave edges */
	--plasma-sat: 160%;         /* boosted saturation */
	--plasma-scale: 240%;
  
	/* Motion */
	--p-dur-a: 52s;
	--p-dur-b: 64s;
	--p-dur-c: 72s;
	--p-dur-d: 88s;
	--p-ease: linear;
  }
  
  .cib-summary {
	position: relative;
	isolation: isolate;
	color: var(--cib-summary-fg);
  
	background:
	  radial-gradient(120% 140% at 10% -10%, rgba(255,255,255,.08), rgba(0,0,0,0) 40%),
	  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
	  var(--cib-summary-bg);
	border: 1px solid var(--cib-summary-border);
	border-radius: 18px;
	padding: clamp(16px, 2.5vw, 28px);
	box-shadow: var(--cib-summary-glow);
	overflow: hidden;
	backdrop-filter: saturate(110%);
	margin-bottom: 1.5rem;
  
	h2, h3, .cib-summary__title {
	  margin: 0 0 .4em 0;
	  font-size: clamp(1.15rem, 1.2rem + .8vw, 1.55rem);
	  line-height: 1.25;
	  font-weight: 700;
	  color: var(--cib-summary-fg);
	}
	p {
	  margin: 0;
	  font-size: clamp(.95rem, .9rem + .2vw, 1.05rem);
	  line-height: 1.6;
	  color: rgba(233,241,255,.94);
	}
	a { color: var(--cib-summary-accent); text-underline-offset: 2px; }
	a:hover { text-decoration: underline; }
	strong, b { color: var(--cib-summary-accent); font-weight: 700; }
	> :first-child { margin-top: 0; }
	> :last-child { margin-bottom: 0; }
	ul, ol { margin-top: .5em; margin-bottom: 0; }
  }
  
  /* Plasma fields */
  .cib-summary::before {
	content: "";
	position: absolute;
	inset: -10%;
	pointer-events: none;
	z-index: -1;
  
	background-image:
	  radial-gradient(closest-side at 25% 35%, rgba(57,192,255,.45), rgba(57,192,255,0) 60%),
	  radial-gradient(closest-side at 75% 65%, rgba(138,125,255,.40), rgba(138,125,255,0) 60%),
	  radial-gradient(closest-side at 40% 80%, rgba(57,192,255,.30), rgba(138,125,255,.26) 45%, rgba(0,0,0,0) 75%),
	  radial-gradient(closest-side at 60% 20%, rgba(57,255,220,.28), rgba(138,125,255,.22) 40%, rgba(0,0,0,0) 70%);
  
	background-size:
	  var(--plasma-scale) var(--plasma-scale),
	  var(--plasma-scale) var(--plasma-scale),
	  var(--plasma-scale) var(--plasma-scale),
	  var(--plasma-scale) var(--plasma-scale);
  
	background-position:
	  0% 0%,
	  100% 0%,
	  50% 100%,
	  80% 50%;
  
	background-repeat: no-repeat;
	background-blend-mode: screen;
	filter: blur(var(--plasma-blur)) saturate(var(--plasma-sat));
	opacity: var(--plasma-opacity);
  
	animation:
	  plasma-flow-a var(--p-dur-a) var(--p-ease) infinite,
	  plasma-flow-b var(--p-dur-b) var(--p-ease) infinite reverse,
	  plasma-flow-c var(--p-dur-c) var(--p-ease) infinite,
	  plasma-flow-d var(--p-dur-d) var(--p-ease) infinite reverse;
  }
  
  @media (prefers-reduced-motion: reduce) {
	.cib-summary::before { animation: none !important; }
  }
  
  /* Animations */
  @keyframes plasma-flow-a {
	0%   { background-position:   0%   0%, 100%   0%, 50% 100%, 80% 50%; }
	50%  { background-position:  60%  40%,  40%  60%, 55%  45%, 70% 60%; }
	100% { background-position:   0%   0%, 100%   0%, 50% 100%, 80% 50%; }
  }
  @keyframes plasma-flow-b {
	0%   { background-position:   0%   0%, 100%   0%, 50% 100%, 80% 50%; }
	50%  { background-position: -40%  30%, 140%  70%, 45%  55%, 65% 45%; }
	100% { background-position:   0%   0%, 100%   0%, 50% 100%, 80% 50%; }
  }
  @keyframes plasma-flow-c {
	0%   { background-position:   0%   0%, 100%   0%, 50% 100%, 80% 50%; }
	50%  { background-position:  30% -20%, 70% 120%, 60%  40%, 75% 55%; }
	100% { background-position:   0%   0%, 100%   0%, 50% 100%, 80% 50%; }
  }
  @keyframes plasma-flow-d {
	0%   { background-position:   0%   0%, 100%   0%, 50% 100%, 80% 50%; }
	50%  { background-position:  20%  20%, 80%  80%, 40%  60%, 85% 35%; }
	100% { background-position:   0%   0%, 100%   0%, 50% 100%, 80% 50%; }
  }
  
  
  
  
  



/* Tools Page Styles */
.tool-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 2em;
    margin-bottom: 2em;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tool-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

.tool-card i {
    font-size: 2em;
    margin-bottom: 0.5em;
    color: #00a9ff;
}

.tool-card h3 {
    margin-bottom: 0.5em;
    font-size: 1.5em;
}

.tool-card p {
    margin-bottom: 1.5em;
    opacity: 0.8;
}

.tool-card .button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

.tool-card .button i {
    font-size: 0.9em;
    margin: 0;
    position: relative;
    top: 1px;
}

.section-header {
    margin-bottom: 2em;
    text-align: center;
}

.section-header i {
    font-size: 1.5em;
    margin-right: 0.5em;
    color: #00a9ff;
}

.section-header p {
    opacity: 0.8;
    max-width: 800px;
    margin: 0 auto;
}

.tools-intro {
    text-align: center;
    margin-bottom: 4em;
}

.tools-intro p {
    max-width: 800px;
    margin: 0 auto;
    opacity: 0.8;
}

.tool-section {
    margin-bottom: 4em;
}

.cta-section {
    background: rgba(255, 255, 255, 0.05);
    padding: 4em 0;
    text-align: center;
    border-radius: 8px;
    margin-top: 4em;
}

.cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.cta-content h2 {
    margin-bottom: 0.5em;
}

.cta-content p {
    margin-bottom: 2em;
    opacity: 0.8;
}

.cta-content .button {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

.cta-content .button i {
    font-size: 0.9em;
    position: relative;
    top: 1px;
}

@media screen and (max-width: 768px) {
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table.alt {
    width: 100%;
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
  }

  table.alt thead {
    display: none;
  }

  table.alt tbody, table.alt tr, table.alt td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  table.alt tr {
    margin-bottom: 1.5em;
    border: 1px solid #ccc;
    padding: 0.5em;
  }

  table.alt td {
    text-align: right;
    padding: 0.5em;
    position: relative;
  }

  table.alt td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 50%;
    padding-left: 0.5em;
    font-weight: bold;
    text-align: left;
  }
}

p.author-link {
  font-size: 1em;
}

/* Article Highlight Styles */
.highlight-box {
    background: rgba(255, 255, 255, 0.04);
    color: #42a5f5;
    border-left: 4px solid #1a237e;
    padding: 1.2em 1.5em;
    margin: 1em 0;
    border-radius: 8px;
    box-shadow: none;
}


.icon:before {
    display: none;
}

.icon.solid:before {
    display: none;
}

.icon.brands:before {
    display: none;
}

@media screen and (max-width: 736px) {
    .result-grid {
        flex-direction: column;
    }
    
    .result-section {
        width: 100%;
        margin-bottom: 1em;
    }
    
    .result-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .result-item-label,
    .result-item-value {
        width: 100%;
        text-align: left;
    }
    
    .result-map {
        width: 100%;
        height: 250px;
        margin-top: 1em;
    }
    
    .result-map iframe {
        width: 100%;
        height: 100%;
        border: none;
    }
}

@media screen and (max-width: 736px) {
    #your-ip-result,
    #lookup-result {
        width: 100%;
        padding: 1em;
    }

    #your-ip-result .result-header,
    #lookup-result .result-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5em;
    }

    #your-ip-result .result-ip,
    #lookup-result .result-ip {
        font-size: 1.2em;
    }

    #your-ip-result .result-type,
    #lookup-result .result-type {
        font-size: 0.9em;
    }

    #your-ip-result .result-grid,
    #lookup-result .result-grid {
        flex-direction: column;
        gap: 1em;
    }
    
    #your-ip-result .result-section,
    #lookup-result .result-section {
        width: 100%;
        margin-bottom: 1em;
    }
    
    #your-ip-result .result-section h3,
    #lookup-result .result-section h3 {
        font-size: 1.2em;
        margin-bottom: 0.5em;
        display: flex;
        align-items: center;
        gap: 0.5em;
        color: #ffffff;
    }
    
    #your-ip-result .result-section h3 i,
    #lookup-result .result-section h3 i {
        color: #ffffff;
    }
    
    #your-ip-result .result-item,
    #lookup-result .result-item {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 0.5em;
    }
    
    #your-ip-result .result-item-label,
    #lookup-result .result-item-label {
        width: 100%;
        font-weight: bold;
        margin-bottom: 0.25em;
    }
    
    #your-ip-result .result-item-value,
    #lookup-result .result-item-value {
        width: 100%;
        text-align: left;
    }
}

.result-section h3 img.icon {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    margin-right: 0.5em;
    filter: brightness(0) invert(1);
}

.converter-tabs {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 1.5em;
}

.converter-tab {
    padding: 0.75em 1.5em;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
}

.converter-tab:hover {
    opacity: 1;
}

.converter-tab.active {
    opacity: 1;
    border-bottom-color: #4a90e2;
}

@media screen and (max-width: 736px) {
    .converter-tabs {
        display: flex;
        flex-direction: column;
        border-bottom: none;
        border-right: 1px solid rgba(255, 255, 255, 0.15);
        margin-right: 1em;
        margin-bottom: 0;
        width: auto;
        min-width: 120px;
    }
    
    .converter-tab {
        padding: 0.75em 1em;
        font-size: 0.9em;
        border-bottom: none;
        border-right: 2px solid transparent;
        text-align: left;
    }
    
    .converter-tab.active {
        border-right-color: #4a90e2;
        border-bottom: none;
    }
    
    .converter-body {
        flex: 1;
    }
}

.illustration-container {
    max-width: 400px !important;
    margin: 0 auto 2em auto !important;
}

.illustration-container img {
    width: 100% !important;
    height: auto !important;
    max-width: 400px !important;
    max-height: auto !important;
    object-fit: contain !important;
}

.image-content {
    display: block !important;
    margin: 0 auto 2em auto !important;
    width: 100% !important;
	max-height: 300px;
    max-width: 400px !important;
}

.image-content img {
    max-height: 300px !important;
	width: 100% !important;
    max-width: 100% !important;
    max-height: 300px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

.table-summary {
	width: 100%;
	border-collapse: collapse;
	margin: 2em 0;
	background-color: #1c1d26;
	color: #f2f2f2;
	border-radius: 4px;
	overflow: hidden;
  }
  
  .table-summary th,
  .table-summary td {
	padding: 1em;
	text-align: left;
	border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  }
  
  .table-summary th {
	background-color: #2a2b3a;
	font-weight: 600;
	color: #ffffff;
  }
  
  .table-summary tr:last-child td {
	border-bottom: none;
  }
  
  @media (max-width: 768px) {
	.table-summary {
	  font-size: 0.9rem;
	}
  }
  
  ul.social-icons-footer a,
  ul.social-icons-footer a:visited,
  ul.social-icons-footer a:hover,
  ul.social-icons-footer a:focus {
	text-decoration: none !important;
	border: none !important;
	outline: none !important;
  }
  
  ul.social-icons-footer a img {
	display: inline-block;
	vertical-align: middle;
	text-decoration: none !important;
	border: none !important;
  }
  
  a.dmca-badge,
  a.dmca-badge:visited,
  a.dmca-badge:hover,
  a.dmca-badge:focus {
	text-decoration: none !important;
	border: none !important;
	outline: none !important;
  }
  
  a.dmca-badge img {
	display: inline-block;
	vertical-align: middle;
	text-decoration: none !important;
	border: none !important;
  }
  
/* IT for Beginners Page Styles */
.welcome-box {
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 4px solid #007bff;
  padding: 20px;
  margin-bottom: 30px;
}

.next-steps-box {
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 4px solid #28a745;
  padding: 20px;
  margin-top: 30px;
}
  

      .faq-section {
        background: rgba(255, 255, 255, 0.05);
        border-left: 4px solid #007bff;
        padding: 20px;
        margin: 20px 0;
        border-radius: 5px;
      }
      .faq-section h3 {
        color: #007bff;
        margin-top: 20px;
        margin-bottom: 10px;
        font-size: 1.1em;
      }
      .faq-section h3:first-child {
        margin-top: 0;
      }
      .faq-section p {
        margin-bottom: 15px;
        line-height: 1.6;
      }

/* PC Upgrade Path Planner Styles */
.upgrade-planner-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.calculator-intro {
  text-align: center;
  margin-bottom: 40px;
}

.calculator-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.form-section {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 8px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 300;
  color: #ffffff;
}

.form-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  background-color: #1a1a1a;
  color: rgba(255, 255, 255, 0.75);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.form-group select optgroup {
  color: #ffffff !important;
  font-weight: 700 !important;
  background-color: #1a1a1a !important;
  padding: 8px;
}

.form-group select option {
  color: rgba(255, 255, 255, 0.75) !important;
  background-color: #1a1a1a !important;
  padding: 8px;
}

.results-section {
  background: rgba(255, 255, 255, 0.05);
  padding: 30px;
  border-radius: 8px;
  margin-top: 40px;
}

.upgrade-priority {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.upgrade-priority h4 {
  color: #00a9ff;
  margin-bottom: 15px;
}

.priority-details {
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}

.upgrade-summary {
  background: rgba(0, 169, 255, 0.1);
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
}

.upgrade-summary h4 {
  color: #00a9ff;
  margin-bottom: 15px;
}

.summary-content {
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}

.seo-content {
  margin: 40px 0;
  padding: 30px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.seo-content h2 {
  color: #ffffff;
  margin-bottom: 20px;
}

.seo-content h3 {
  color: #ffffff;
  margin: 30px 0 15px;
}

.seo-content h4 {
  color: #ffffff;
  margin: 20px 0 10px;
}

.seo-content p, .seo-content li {
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  margin-bottom: 15px;
}

.upgrade-scenarios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.scenario {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 8px;
}

.scenario h4 {
  color: #00a9ff;
  margin-bottom: 10px;
}

/* Additional styles for PC Upgrade Path Planner */
.breadcrumb-container {
  text-align: center;
}

.breadcrumb-text {
  margin: 1em 0;
}

.hidden {
  display: none;
}

/* Button styling for PC Upgrade Path Planner - removed full width to use natural button width */

.upgrade-planner-container .results-section h3 {
  color: #ffffff;
  margin-bottom: 25px;
  text-align: center;
  font-size: 24px;
}

.upgrade-planner-container .priority-details p {
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

.upgrade-planner-container .priority-details p strong {
  color: #ffffff;
}

.upgrade-planner-container .summary-content p {
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

.upgrade-planner-container .summary-content p strong {
  color: #ffffff;
}

/* Responsive styles for PC Upgrade Path Planner */
@media screen and (max-width: 736px) {
  .calculator-form {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .form-section {
    padding: 15px;
  }
  
  .upgrade-scenarios {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .upgrade-planner-container {
    padding: 15px;
  }
}

/* RAM Configuration Optimizer Styles */
.ram-optimizer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.ram-calculator-intro {
  text-align: center;
  margin-bottom: 40px;
}

.ram-calculator-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.ram-form-section {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 8px;
}

.ram-form-group {
  margin-bottom: 20px;
}

.ram-form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 300;
  color: #ffffff;
}

.ram-form-group select, .ram-form-group input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  background-color: #1a1a1a;
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  line-height: 1.4;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.ram-form-group input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.ram-form-group input[type="number"]::-webkit-outer-spin-button,
.ram-form-group input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ram-form-group select, .ram-form-group input:focus {
  outline: none;
  border-color: #00a9ff;
  box-shadow: 0 0 0 2px rgba(0, 169, 255, 0.2);
}

.ram-form-group select optgroup {
  color: #ffffff !important;
  font-weight: 700 !important;
  background-color: #1a1a1a !important;
  padding: 8px;
}

.ram-form-group select option {
  color: rgba(255, 255, 255, 0.75) !important;
  background-color: #1a1a1a !important;
  padding: 8px;
}

.ram-results-section {
  background: rgba(255, 255, 255, 0.05);
  padding: 30px;
  border-radius: 8px;
  margin-top: 40px;
}

.ram-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.ram-result-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.ram-result-value {
  font-size: 2em;
  font-weight: 300;
  color: #00a9ff;
  margin-top: 10px;
}

.ram-performance-analysis, .ram-recommendations {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
}

.ram-analysis-content, .ram-recommendations-content {
  margin-top: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

.ram-optimizer-container button[type="submit"] {
  grid-column: 1 / -1;
  background-color: #00a9ff;
  border: none;
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  font-size: 18px;
  font-weight: 400;
  padding: 20px 40px;
  margin: 40px 0 20px 0;
  transition: all 0.2s ease;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 2px 4px rgba(0, 169, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

.ram-optimizer-container button[type="submit"]:hover {
  background-color: #0094e6;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 169, 255, 0.3);
}

.ram-optimizer-container button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 169, 255, 0.2);
}

.ram-optimizer-container button[type="submit"] span {
  display: inline;
}

.ram-seo-content {
  margin: 40px 0;
  padding: 30px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.ram-seo-content h2 {
  color: #ffffff;
  margin-bottom: 20px;
}

.ram-seo-content h3 {
  color: #ffffff;
  margin: 30px 0 15px;
}

.ram-seo-content h4 {
  color: #ffffff;
  margin: 20px 0 10px;
}

.ram-seo-content p, .ram-seo-content li {
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  margin-bottom: 15px;
}

.ram-scenarios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.ram-scenario {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 8px;
}

.ram-scenario h4 {
  color: #00a9ff;
  margin-bottom: 10px;
}

.analysis-detailed h5,
.recommendations-detailed h5 {
  color: #00a9ff;
  margin: 20px 0 10px 0;
  font-size: 1.1em;
}

.analysis-detailed .warning {
  color: #ff6b6b;
  font-weight: 500;
}

.analysis-detailed .success {
  color: #51cf66;
  font-weight: 500;
}

.recommendations-detailed p {
  margin-bottom: 10px;
}

.recommendations-detailed ul {
  margin-left: 20px;
}

.recommendations-detailed ul li {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.8);
}

/* Blog post styling classes */
.tips-list {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0;
}

.tips-list li {
  margin-bottom: 12px;
  padding-left: 10px;
  position: relative;
}

.tips-list li:before {
  position: absolute;
  left: -10px;
  color: #00a9ff;
  font-weight: bold;
}

.info-box {
  background: rgba(0, 169, 255, 0.1);
  border-left: 4px solid #00a9ff;
  padding: 20px;
  margin: 20px 0;
  border-radius: 4px;
}

.info-box p {
  margin-bottom: 0;
}

.warning-box {
  background: rgba(255, 107, 107, 0.1);
  border-left: 4px solid #ff6b6b;
  padding: 20px;
  margin: 20px 0;
  border-radius: 4px;
}

.warning-box h3 {
  color: #ff6b6b;
  margin-top: 0;
}

.warning-box p, .warning-box ul {
  margin-bottom: 0;
}

/* ====== QUIZ (dark theme) ====== */
.cib-quiz {
  margin: 2.5em 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 1.25em;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.cib-quiz__title {
  font-size: 1.35em;
  line-height: 1.3;
  margin: 0 0 0.75em 0;
}

.cib-quiz__hint {
  margin: 0 0 1em 0;
  color: rgba(255,255,255,0.65);
  font-size: 0.95em;
}

.cib-quiz__card {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 1em;
}

.cib-quiz__qnum {
  font-size: 0.9em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.25em;
}

.cib-quiz__qtext {
  font-size: 1.15em;
  margin: 0 0 0.75em 0;
}

.cib-quiz__choices {
  display: grid;
  gap: 0.6em;
}

.cib-quiz__choice {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.9);
  padding: 0.85em 1em;
  border-radius: 10px;
  font: inherit;
  cursor: pointer;
  transition: transform 0.05s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.cib-quiz__choice:hover,
.cib-quiz__choice:focus {
  border-color: rgba(0,169,255,0.8);
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,169,255,0.18);
}

.cib-quiz__choice[aria-selected="true"] {
  border-color: rgba(0,169,255,0.95);
}

.cib-quiz__choice--correct {
  background: rgba(0, 180, 60, 0.25);
  border-color: rgba(0, 200, 80, 0.9);
  box-shadow: 0 4px 16px rgba(0, 200, 80, 0.25);
}

.cib-quiz__choice--wrong {
  background: rgba(200, 0, 50, 0.18);
  border-color: rgba(255, 80, 120, 0.85);
  box-shadow: 0 4px 16px rgba(255, 80, 120, 0.22);
}

.cib-quiz__explain {
  margin-top: 0.75em;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid #00a9ff;
  padding: 0.75em 1em;
  border-radius: 8px;
}

.cib-quiz__footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75em;
  align-items: center;
  margin-top: 1.25em;
}

.cib-quiz__btn {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #00a9ff;
  padding: 0.65em 1em;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.05s ease;
}

.cib-quiz__btn:hover,
.cib-quiz__btn:focus {
  border-color: rgba(0,169,255,0.9);
  background: rgba(0,169,255,0.08);
  transform: translateY(-1px);
  outline: none;
}

.cib-quiz__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cib-quiz__progress {
  text-align: center;
  color: rgba(255,255,255,0.75);
  font-size: 0.95em;
}

.cib-quiz__result {
  margin-top: 1em;
}

.cib-quiz__card--result {
  text-align: center;
}

.cib-quiz__title-sm {
  font-size: 1.1em;
  margin-bottom: 0.5em;
}

.cib-quiz__score {
  font-size: 1.35em;
  font-weight: 400;
  margin-bottom: 0.75em;
}

/* PC Tier Comparison Table Styles - Dark Theme */
.comparison-table-wrapper {
  overflow-x: auto;
  margin: 2em 0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  background: #272833;
}

.pc-tier-comparison {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
  background: #272833;
  min-width: 600px;
  color: #ffffff;
}

.pc-tier-comparison thead tr {
  background: linear-gradient(135deg, #00a9ff 0%, #0088cc 100%);
  color: #ffffff;
  text-align: left;
}

.pc-tier-comparison th,
.pc-tier-comparison td {
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pc-tier-comparison th {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 0.5px;
}

.pc-tier-comparison tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 0.2s ease;
}

.pc-tier-comparison tbody tr:nth-of-type(even) {
  background-color: rgba(0, 0, 0, 0.15);
}

.pc-tier-comparison tbody tr:hover {
  background-color: rgba(0, 169, 255, 0.15);
  cursor: pointer;
}

.tier-low {
  color: #ff6b6b;
  font-weight: 600;
}

.tier-mid {
  color: #ffa500;
  font-weight: 600;
}

.tier-high {
  color: #51cf66;
  font-weight: 600;
}

.component-cell {
  font-weight: 600;
  color: #00a9ff;
}

.pc-tier-comparison small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85em;
}

@media screen and (max-width: 768px) {
  .pc-tier-comparison {
    font-size: 0.85em;
  }

  .pc-tier-comparison th,
  .pc-tier-comparison td {
    padding: 8px 10px;
  }
}