/* ==========================================================================
   Brand tokens (extracted from technologyuserlists.com/css/style.css)
   ========================================================================== */
:root {
	--tul-purple: #6a31c8;       /* links, nav hover, .blue-btn */
	--tul-purple-2: #6932c9;     /* gradient start */
	--tul-magenta: #ca0168;      /* gradient end, footer hover */
	--tul-magenta-dk: #c20570;   /* back-to-top */
	--tul-grad: linear-gradient(to right, #6932c9 0%, #ca0168 100%);
	--tul-grad-soft: linear-gradient(135deg, rgba(105,50,201,.08) 0%, rgba(202,1,104,.08) 100%);
	--tul-ink: #111;
	--tul-text: #333;
	--tul-muted: #6f6f76;
	--tul-line: #e6e6ea;
	--tul-wash: #f7f7f7;
	--tul-footer: #1f1f1f;
	--tul-radius: 8px;
	--tul-shadow: 0 8px 30px rgba(17, 17, 17, .08);
	--tul-header-h: 118px;
}

/* ==========================================================================
   Base
   ========================================================================== */
html { scroll-behavior: smooth; }
body {
	background: #fff;
	color: var(--tul-text);
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	line-height: 1.7;
	padding-top: var(--tul-header-h);
}
a { color: var(--tul-purple); transition: color .3s, background .3s; }
a:hover, a:focus { color: var(--tul-magenta); text-decoration: none; }
p { margin: 0 0 15px; }
h1, h2, h3, h4, h5, h6 {
	font-family: "Poppins", sans-serif;
	color: var(--tul-ink);
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 16px;
}
img { max-width: 100%; height: auto; }
.respo-img { max-width: 100%; height: auto; }

/* Headings reached by an anchor clear the fixed header. */
[id] { scroll-margin-top: calc(var(--tul-header-h) + 20px); }

/* ==========================================================================
   Header (mirrors #header / #logo / .top-contact-info / #nav-menu-container)
   ========================================================================== */
#header {
	padding: 15px 0 0;
	position: fixed;
	left: 0; top: 0; right: 0;
	background: #fff;
	transition: all .4s;
	z-index: 997;
	border-bottom: 1px solid var(--tul-line);
}
#header.header-scrolled { padding: 8px 0 0; box-shadow: 0 2px 20px rgba(0,0,0,.08); border-bottom-color: transparent; }
#header #logo { float: left; padding-top: 6px; }
#header #logo img { padding: 0; margin: 0; max-height: 38px; width: auto; }
@media (min-width: 1024px) { #header #logo { padding-left: 60px; } }

.top-contact-info-outer { float: right; }
.top-contact-info { padding: 8px 63px 10px 20px; font-size: 14px; }
.top-contact-info p { display: inline-block; margin: 0 0 0 18px; }
.top-contact-info p a { color: #c7036b; }
.top-contact-info p a:hover { color: var(--tul-purple); }
.top-contact-info .fa { color: #c90269; }

#nav-menu-container { max-width: 900px; margin: 0 auto; }
@media (min-width: 1024px) { #nav-menu-container { padding-right: 60px; float: right; max-width: calc(100% - 330px); } }
@media (max-width: 991.98px) { #nav-menu-container { display: none; } }

.nav-menu, .nav-menu * { margin: 0; padding: 0; list-style: none; }
.nav-menu > li { float: left; position: relative; white-space: nowrap; margin-left: 12px; }
.nav-menu a {
	padding: 10px 3px 14px;
	display: inline-block;
	color: #000;
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	text-transform: uppercase;
}
.nav-menu li:hover > a,
.nav-menu > .current-menu-item > a,
.nav-menu > .current_page_parent > a,
.nav-menu > .menu-active > a { color: var(--tul-purple); }
.nav-menu .menu-has-children > a { padding-right: 16px; position: relative; }
.nav-menu .menu-has-children > a:after {
	content: "\f107"; font-family: FontAwesome; position: absolute; right: 2px; top: 10px;
}

/* Dropdown */
.nav-menu ul {
	position: absolute; display: none; top: 100%; left: 0; z-index: 99;
	background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 6px 0;
	border-top: 3px solid var(--tul-magenta);
}
.nav-menu li:hover > ul { display: block; }
.nav-menu ul li { min-width: 220px; }
.nav-menu ul li a {
	display: block; padding: 8px 16px; text-transform: none; font-size: 14px;
	color: var(--tul-text); border-bottom: 1px solid #f0f0f0;
}
.nav-menu ul li:last-child a { border-bottom: 0; }
.nav-menu ul li a:hover { color: var(--tul-magenta); background: var(--tul-wash); }

/* Mega dropdown (List Products) */
.nav-menu > li.mega-dropdown { position: static; }
.nav-menu .mega-dropdown-menu {
	left: 60px; right: 60px; width: auto; padding: 16px;
	display: none; grid-template-columns: repeat(4, 1fr); column-gap: 10px;
}
.nav-menu li.mega-dropdown:hover > .mega-dropdown-menu { display: grid; }
.nav-menu .mega-dropdown-menu li { min-width: 0; }
.nav-menu .mega-dropdown-menu li a { white-space: normal; border-bottom: 1px dashed #eee; }

/* Nav CTA (mirrors .blue-btn) */
.nav-menu a.blue-btn,
.nav-menu li.blue-btn > a {
	background: var(--tul-purple); color: #fff !important;
	padding: 6px 14px !important; margin-top: 4px; font-weight: 700; white-space: normal;
}
.nav-menu a.blue-btn:hover,
.nav-menu li.blue-btn > a:hover { background: var(--tul-magenta); }

/* ==========================================================================
   Mobile navigation
   ========================================================================== */
#mobile-nav-toggle {
	position: absolute; right: 16px; top: 16px; z-index: 999;
	border: 0; background: none; font-size: 24px; color: var(--tul-purple); cursor: pointer;
}
@media (min-width: 992px) { #mobile-nav-toggle { display: none; } }
#mobile-nav {
	position: fixed; top: 0; bottom: 0; left: -290px; width: 280px; z-index: 9999;
	background: #fff; overflow-y: auto; transition: left .35s; padding: 20px 0;
	box-shadow: 0 0 30px rgba(0,0,0,.2);
}
#mobile-nav.open { left: 0; }
#mobile-nav ul { list-style: none; margin: 0; padding: 0; }
#mobile-nav a { display: block; padding: 10px 20px; color: #000; font-size: 14px; text-transform: uppercase; border-bottom: 1px solid #f0f0f0; }
#mobile-nav a:hover { color: var(--tul-magenta); }
#mobile-nav ul ul a { padding-left: 34px; text-transform: none; color: var(--tul-text); font-size: 13.5px; }
#mobile-nav a.blue-btn { background: var(--tul-grad); color: #fff; margin: 14px 20px 0; text-align: center; }
#mobile-body-overly { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9998; display: none; }
body.mobile-nav-active #mobile-body-overly { display: block; }

@media (max-width: 991.98px) {
	:root { --tul-header-h: 122px; }
	#header #logo { float: none; padding-left: 16px; }
	.top-contact-info-outer { float: none; }
	.top-contact-info { padding: 6px 16px 10px; font-size: 13px; }
	.top-contact-info p { margin: 0 14px 0 0; }
}

/* ==========================================================================
   Buttons (mirror .cbtn)
   ========================================================================== */
.cbtn {
	font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 1px;
	display: inline-block; padding: 9px 30px; border: 0; border-radius: 0; cursor: pointer;
	color: #fff; background: var(--tul-purple-2); background: var(--tul-grad); transition: .4s;
}
.cbtn:hover, .cbtn:focus { color: #fff; background: var(--tul-magenta); }
.cbtn-outline {
	display: inline-block; padding: 8px 22px; font-size: 14px; font-weight: 600;
	border: 1px solid var(--tul-purple); color: var(--tul-purple); background: transparent;
}
.cbtn-outline:hover { background: var(--tul-purple); color: #fff; }

/* Accessibility */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.skip-link:focus { position: fixed; left: 10px; top: 10px; z-index: 100000; width: auto; height: auto; clip: auto; background: #fff; padding: 10px 20px; }