/**
 * Global header chrome: overlay (live header-style-3) and light (header-style-1)
 * bars, utility bar, primary navigation with dropdowns, the ≤991px collapse
 * menu, the home social rail and the home preloader.
 *
 * Values are the rendered measurements from chrome.md (bluearc.com.pk,
 * Bootstrap 3 template): 70px bar (71px with the ≤991px toggle), 1170px
 * container that goes full-bleed at ≤1200px, Open Sans 12.5px/600 nav.
 *
 * @package BlueArcChild
 */

/* ==========================================================================
   1. Header shell and scroll states
   ========================================================================== */

.ba-header {
	position: relative;
	z-index: 999;
}

.ba-header--overlay {
	height: 0;
}

.ba-header__bar {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	min-height: var(--ba-header-height);
	background-color: var(--ba-white);
	box-shadow: var(--ba-sh-header);
}

.ba-header--overlay .ba-header__bar {
	position: fixed;
	background-color: transparent;
	box-shadow: none;
}

.ba-header--overlay.is-filled .ba-header__bar {
	background-color: var(--ba-dark);
}

.ba-header--home.is-filled .ba-header__bar {
	background-color: var(--ba-header-scrolled);
}

.ba-header__sticky {
	min-height: var(--ba-header-height);
}

.ba-header--light.is-fixed .ba-header__bar {
	position: fixed;
}

.admin-bar .ba-header--overlay .ba-header__bar,
.admin-bar .ba-header--light.is-fixed .ba-header__bar {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .ba-header--overlay .ba-header__bar,
	.admin-bar .ba-header--light.is-fixed .ba-header__bar {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .ba-header--overlay .ba-header__bar,
	.admin-bar .ba-header--light.is-fixed .ba-header__bar {
		top: 0;
	}
}

.ba-header__inner {
	position: relative;
	display: flow-root;
	width: var(--ba-container);
	margin: 0 auto;
	padding: 0;
}

@media (max-width: 1200px) {
	.ba-header__inner {
		width: auto;
	}
}

@media (max-width: 991px) {
	.ba-header__inner {
		padding: 0 var(--ba-gutter);
	}

	.ba-header--overlay .ba-header__inner {
		padding: 0 var(--ba-gutter-home);
	}

	.ba-header__sticky {
		min-height: 71px;
	}
}

/* ==========================================================================
   2. Logo (fixed 130×68 box, artwork never stretched)
   ========================================================================== */

.ba-header__logo {
	position: relative;
	z-index: 9;
	display: flex;
	float: left;
	align-items: center;
	width: 220px;
	height: var(--ba-header-height);
}

.ba-header__logo-link {
	display: block;
	line-height: 0;
}

.ba-header__logo-img {
	width: 130px;
	height: 68px;
	object-fit: contain;
	object-position: left center;
}

@media (max-width: 991px) {
	.ba-header__logo {
		width: 180px;
	}
}

@media (max-width: 480px) {
	.ba-header__logo {
		width: 100px;
	}

	.ba-header__logo-img {
		width: 90px;
		height: 52px;
		margin-top: 4px;
	}
}

/* ==========================================================================
   3. Utility bar (inner pages)
   ========================================================================== */

.ba-topbar {
	padding: 10px 0;
	background-color: var(--ba-dark);
	color: var(--ba-white);
	font-family: var(--ba-font-body);
}

.ba-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: flex-end;
	width: var(--ba-container);
	min-height: 22.78125px;
	margin: 0 auto;
}

@media (max-width: 1200px) {
	.ba-topbar__inner {
		width: auto;
	}
}

/* Live lists sit on their line box's bottom edge: 22.78px tall, plus 5px (768–991) or 10px (≤767) margins. */
@media (max-width: 991px) {
	.ba-topbar__inner {
		min-height: 32.78125px;
		padding: 0 var(--ba-gutter) 5px;
	}
}

@media (max-width: 480px) {
	.ba-topbar__inner {
		min-height: 42.78125px;
		padding-bottom: 10px;
	}
}

.ba-topbar__email {
	display: inline-flex;
	align-items: baseline;
	padding-right: 10px;
	color: var(--ba-white);
	font-size: 12px;
	font-weight: 400;
	line-height: 17.14px;
}

.ba-topbar__email:hover,
.ba-topbar__email:focus {
	color: var(--ba-white);
}

.ba-topbar__email-icon {
	width: 22px;
	height: 22px;
	margin-right: 5px;
	padding: 3px;
	border: 1px solid rgba(0, 0, 0, 0.01);
	border-radius: var(--ba-r-1);
	background-color: rgba(0, 0, 0, 0.08);
	color: var(--ba-white);
	font-size: 12px;
	line-height: 12px;
	text-align: center;
}

/* ==========================================================================
   4. Social icon lists (utility bar, footer, rail)
   ========================================================================== */

.ba-social {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ba-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ba-social__tiktok {
	display: block;
}

.ba-social--utility,
.ba-social--footer {
	display: flex;
	align-items: center;
}

.ba-social--utility .ba-social__link--facebook,
.ba-social--footer .ba-social__link--facebook {
	color: var(--ba-facebook);
}

.ba-social--utility .ba-social__link--instagram,
.ba-social--footer .ba-social__link--instagram {
	color: var(--ba-instagram);
}

.ba-social--utility .ba-social__link--linkedin,
.ba-social--footer .ba-social__link--linkedin {
	color: var(--ba-linkedin);
}

.ba-social--utility .ba-social__link--youtube,
.ba-social--footer .ba-social__link--youtube {
	color: var(--ba-youtube);
}

.ba-social--utility .ba-social__tiktok,
.ba-social--footer .ba-social__tiktok {
	width: 22px;
	height: 22px;
	padding: 3px;
	filter: drop-shadow(1px 0 0 #fd3e3e) drop-shadow(-1px -1px 0 #4de8f4);
}

.ba-social--utility {
	gap: 3.64px;
	margin-left: 15px;
}

.ba-social--utility .ba-social__item {
	padding: 0 2px;
}

/* Live `a.fa` boxes: 12px line box, glyph on its baseline, centred text. */
.ba-social--utility .ba-social__link {
	display: block;
	width: 22px;
	height: 22px;
	padding: 3px;
	border: 1px solid rgba(0, 0, 0, 0.01);
	border-radius: var(--ba-r-1);
	background-color: rgba(0, 0, 0, 0.08);
	font-size: 12px;
	line-height: 12px;
	text-align: center;
}

.ba-social--utility .ba-social__link--tiktok {
	padding: 0;
	border: 0;
	background: none;
}

.ba-social--utility .fa {
	font-size: 18px;
}

/* ==========================================================================
   5. Hamburger toggle (≤991px)
   ========================================================================== */

.ba-header__toggle {
	position: relative;
	display: none;
	float: right;
	width: 42px;
	height: 41px;
	margin: 15px -10px 15px 10px;
	padding: 12px 10px;
	border: 0;
	border-radius: 0;
	background: none;
	cursor: pointer;
}

.ba-header__toggle-bar {
	display: block;
	width: 22px;
	height: 3px;
	border-radius: 0;
	background-color: var(--ba-text-nav);
}

.ba-header__toggle-bar + .ba-header__toggle-bar {
	margin-top: 4px;
}

.ba-header--overlay .ba-header__toggle-bar {
	background-color: var(--ba-white);
}

@media (max-width: 991px) {
	.ba-header__toggle {
		display: block;
	}
}

/* ==========================================================================
   6. Primary navigation, ≥992px: inline bar + hover dropdowns
   ========================================================================== */

.ba-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ba-nav__item {
	position: relative;
	margin: 0;
}

.ba-nav__link {
	display: block;
	padding: 18px 8px;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ba-text-nav);
	cursor: pointer;
	font-family: var(--ba-font-body);
	font-size: var(--ba-fs-nav);
	font-weight: var(--ba-fw-semibold);
	letter-spacing: normal;
	line-height: 20px;
	text-align: left;
	text-transform: uppercase;
	transition: all var(--ba-t-legacy);
}

.ba-nav__caret {
	margin-top: -3px;
	margin-left: 3px;
	font-size: 9px;
	opacity: 0.7;
	vertical-align: middle;
}

.ba-nav__toggle {
	display: none;
}

.ba-nav__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ba-nav__sub-item {
	position: relative;
	border-bottom: 1px solid #f4f4f4;
	text-transform: none;
}

.ba-nav__sub-item:last-child,
.ba-nav__item--flush .ba-nav__sub-item {
	border-bottom: 0;
}

.ba-nav__sub-link {
	display: block;
	padding: 10px 20px;
	color: #474747;
	font-family: var(--ba-font-body);
	font-size: 13px;
	font-weight: 400;
	line-height: 18.57px;
	transition: all var(--ba-t-legacy);
}

.ba-nav__sub-link:hover,
.ba-nav__sub-link:focus,
.ba-nav__sub-item--current > .ba-nav__sub-link {
	background-color: var(--ba-primary);
	color: var(--ba-white);
}

@media (min-width: 992px) {
	.ba-nav {
		float: right;
		height: var(--ba-header-height);
		margin-right: 10px;
	}

	.ba-nav__list {
		display: flex;
		margin-top: 7px;
	}

	.ba-nav__item:last-child > .ba-nav__link {
		padding-right: 0;
	}

	/* Live prints an empty 3px-margin icon after "Home", which widens the first item. */
	.ba-nav__item:first-child > .ba-nav__link {
		padding-right: 11px;
	}

	.ba-header--overlay .ba-nav__link {
		color: var(--ba-white);
	}

	.ba-nav__item:hover > .ba-nav__link,
	.ba-nav__item:focus-within > .ba-nav__link,
	.ba-nav__item--current > .ba-nav__link,
	.ba-header--overlay .ba-nav__item:hover > .ba-nav__link,
	.ba-header--overlay .ba-nav__item:focus-within > .ba-nav__link,
	.ba-header--overlay .ba-nav__item--current > .ba-nav__link {
		color: var(--ba-primary);
	}

	.ba-nav__sub {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10;
		width: 220px;
		margin-top: 20px;
		border: 1px solid #f4f4f4;
		background-color: var(--ba-white);
		opacity: 0;
		visibility: hidden;
	}

	.ba-nav__sub.is-flipped {
		right: 0;
		left: auto;
	}

	.ba-nav__item:hover > .ba-nav__sub,
	.ba-nav__item:focus-within > .ba-nav__sub,
	.ba-nav__item.is-open > .ba-nav__sub {
		margin-top: 0;
		opacity: 1;
		visibility: visible;
		transition: all var(--ba-t);
	}
}

/* ==========================================================================
   7. Primary navigation, ≤991px: white collapse panel with +/− toggles
   ========================================================================== */

@media (max-width: 991px) {
	.ba-nav {
		display: none;
		clear: both;
		margin: 0 -15px;
		border-top: 1px solid transparent;
		border-bottom: 1px solid #e9e9e9;
	}

	.ba-nav.is-open,
	.ba-nav.is-animating {
		display: block;
	}

	.ba-nav.is-animating {
		overflow: hidden;
		transition: height 0.35s ease;
	}

	.ba-nav__list {
		margin-top: 7px;
		background-color: var(--ba-white);
	}

	.ba-header--overlay .ba-nav__list,
	.ba-header.is-fixed .ba-nav__list {
		height: calc(100vh - 78px);
		height: calc(100dvh - 78px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.ba-nav__link {
		width: 100%;
		border-top: 1px solid #e9e9e9;
		color: #777;
	}

	.ba-nav__link:hover,
	.ba-nav__link:focus {
		background-color: #f0f0f0;
		color: #777;
	}

	.ba-nav__item--current > .ba-nav__link,
	.ba-nav__item.is-open > .ba-nav__link {
		color: var(--ba-primary);
	}

	.ba-nav__caret {
		display: none;
	}

	.ba-nav__toggle {
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 2;
		display: block;
		width: 24px;
		height: 24px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background-color: var(--ba-primary);
		cursor: pointer;
	}

	.ba-nav__toggle::before,
	.ba-nav__toggle::after {
		position: absolute;
		top: 50%;
		left: 50%;
		background-color: var(--ba-white);
		content: "";
	}

	/* Live's +/− are bold 10px text glyphs: 9px arms with 3px strokes, and a 7px −. */
	.ba-nav__toggle::before {
		width: 9px;
		height: 3px;
		margin: -1px 0 0 -5px;
	}

	.ba-nav__toggle::after {
		width: 3px;
		height: 9px;
		margin: -4px 0 0 -2px;
	}

	.ba-nav__toggle[aria-expanded="true"]::before {
		width: 7px;
		margin-left: -4px;
	}

	.ba-nav__toggle[aria-expanded="true"]::after {
		display: none;
	}

	.ba-nav__sub {
		display: none;
		border: 1px solid #f4f4f4;
		background-color: #f9f9f9;
	}

	.ba-nav__item.is-open > .ba-nav__sub,
	.ba-nav__sub.is-animating {
		display: block;
	}

	.ba-nav__sub.is-animating {
		overflow: hidden;
		transition: height 0.2s ease;
	}

	.ba-nav__sub-link {
		padding: 10px 20px 10px 30px;
	}
}

/* Bootstrap 3 drops the collapse's negative gutter and top border from 768px (.container > .navbar-collapse); the list keeps its 7px offset. */
@media (min-width: 768px) and (max-width: 991px) {
	.ba-nav {
		margin: 0;
		border-top: 0;
	}

	.ba-nav.is-open {
		display: flow-root;
	}
}

/* ==========================================================================
   8. Home social rail (≥1201px)
   ========================================================================== */

.ba-rail {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1060;
	width: var(--ba-rail-width);
	height: 100vh;
	background-color: var(--ba-black);
}

@media (max-width: 1200px) {
	.ba-rail {
		display: none;
	}
}

.ba-rail__title {
	position: fixed;
	top: 300px;
	left: 0;
	z-index: 1061;
	width: 300px;
	padding-top: 26px;
	transform: rotate(-90deg);
	transform-origin: left top;
}

.ba-rail__title::before {
	position: absolute;
	bottom: -20px;
	left: -40px;
	width: 1px;
	height: 50px;
	background-color: rgba(255, 255, 255, 0.21);
	content: "";
}

.ba-rail__home {
	position: relative;
	z-index: 1;
	color: var(--ba-white);
	font-family: var(--ba-font-display);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1;
	text-transform: uppercase;
}

.ba-rail__home:hover,
.ba-rail__home:focus {
	color: var(--ba-white);
}

.ba-social--rail {
	position: absolute;
	bottom: 20px;
	left: 0;
	width: 100%;
}

.ba-social--rail .ba-social__item {
	display: block;
	margin-bottom: 14px;
	text-align: center;
}

.ba-social--rail .ba-social__link {
	width: 32px;
	height: 32px;
	margin: 0 auto;
	border-radius: 9px;
	background-color: var(--ba-black);
	color: var(--ba-white);
	font-size: 16px;
	transition: transform var(--ba-t), box-shadow var(--ba-t);
}

.ba-social--rail .ba-social__link--facebook {
	border-radius: 50%;
}

/* Live's home-page rule `.fa-facebook:before, .fa-instagram:before { font-size: large }` also reaches the rail. */
.ba-social--rail .fa-facebook::before,
.ba-social--rail .fa-instagram::before {
	font-size: 18px;
}

.ba-social--rail .ba-social__link:hover,
.ba-social--rail .ba-social__link:focus-visible {
	color: var(--ba-white);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
	transform: scale(1.15);
}

.ba-social--rail .ba-social__link--tiktok,
.ba-social--rail .ba-social__link--tiktok:hover {
	background: transparent;
	box-shadow: none;
}

.ba-social--rail .ba-social__tiktok {
	width: 20px;
	height: 20px;
	filter: invert(1);
	transition: opacity var(--ba-t);
}

.ba-social--rail .ba-social__link:hover .ba-social__tiktok {
	opacity: 0.8;
}

/* ==========================================================================
   9. Home preloader (inside the page wrapper, so the header stays above it)
   ========================================================================== */

.ba-preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: var(--ba-black);
	color: var(--ba-white);
	opacity: 1;
	transition: opacity 0.55s ease, visibility 0.55s ease, transform 0.95s var(--ba-ease-out-expo);
	animation: ba-preloader-failsafe 0.95s var(--ba-ease-out-expo) 2.5s forwards;
}

.ba-preloader.is-hidden {
	visibility: hidden;
	pointer-events: none;
	opacity: 0;
	transform: translateY(-100%);
	animation: none;
}

.ba-preloader__mark {
	width: min(360px, 72vw);
	text-align: center;
	animation: ba-preloader-mark 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ba-preloader__logo {
	display: block;
	width: 180px;
	height: auto;
	margin: 0 auto 28px;
}

.ba-preloader__word {
	display: block;
	color: var(--ba-white);
	font-family: var(--ba-font-display);
	font-size: 34px;
	font-weight: 600;
	letter-spacing: 10px;
	line-height: 1;
	text-transform: uppercase;
}

.ba-preloader__line {
	position: relative;
	display: block;
	width: 100%;
	height: 1px;
	margin-top: 30px;
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.18);
}

.ba-preloader__line::before {
	position: absolute;
	top: 0;
	left: -35%;
	width: 35%;
	height: 100%;
	background-color: var(--ba-white);
	animation: ba-preloader-sweep 1.25s ease-in-out infinite;
	content: "";
}

@media (max-width: 600px) {
	.ba-preloader__word {
		font-size: 24px;
		letter-spacing: 7px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ba-preloader {
		display: none;
	}
}

@keyframes ba-preloader-mark {
	from {
		opacity: 0;
		transform: translateY(22px) scale(0.96);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes ba-preloader-sweep {
	from {
		left: -35%;
	}

	to {
		left: 100%;
	}
}

@keyframes ba-preloader-failsafe {
	to {
		visibility: hidden;
		pointer-events: none;
		opacity: 0;
		transform: translateY(-100%);
	}
}