/**
 * Blue Arc: shared page sections (template-parts/sections/*).
 *
 * Loaded on every page after components.css. Covers the grey card bands
 * (help, SEO, map, FAQ, upload drawings), the department lead profile and
 * the "What Our Clients Say" parallax band. Values are measured on
 * bluearc.com.pk (/design-residential, /construction, home) at 1440/390.
 *
 * @package BlueArcChild
 */

/* ==========================================================================
   1. Grey card band (live .section-full.bg-gray.p-tb50 > .container > .row >
      .col-lg-12.animate_line[padding:unset] > .wt-icon-box-wraper.m-a5.p-a30)
   <section class="ba-band ba-band--tb50">
     <div class="ba-container">
       <div class="ba-animate-line ba-band__card"><div class="ba-icon-box">…</div></div>
     </div>
   </section>
   ========================================================================== */

.ba-band {
	position: relative;
	background-color: var(--ba-bg-gray);
}

.ba-band--tb50 {
	padding: 50px 0;
}

.ba-band--b50 {
	padding: 0 0 50px;
}

.ba-band--t50 {
	padding: 50px 0 0;
}

/* The unpadded col-lg-12 spans the container's padding box (1170 at ≥1200). */
.ba-band__card {
	display: flow-root;
	margin-right: calc(var(--ba-gutter) * -1);
	margin-left: calc(var(--ba-gutter) * -1);
}

@media (max-width: 768px) {
	.ba-band__card::before {
		top: -5px;
	}

	.ba-band__card::after {
		bottom: -5px;
	}
}

/* Live h5 in the help / upload / SEO cards (inline 20px, weight 500 or 600). */
.ba-band__title {
	color: var(--ba-text-strong);
	font-family: var(--ba-font-heading);
	font-size: 20px;
	text-transform: uppercase;
}

.ba-band__title--h5 {
	margin: 10px 0;
	font-weight: 500;
	line-height: 22px;
}

.ba-band__title--h2 {
	margin: 20px 0 24px;
	font-weight: var(--ba-fw-bold);
	line-height: 24px;
}

.ba-seo__title.ba-band__title--h5 {
	font-weight: var(--ba-fw-bold);
}

/* ==========================================================================
   2. Help card ("We are here to help!")
   ========================================================================== */

.ba-help__icon {
	display: block;
	margin-right: auto;
	margin-left: auto;
	line-height: 0;
}

.ba-help__icon img {
	display: block;
}

.ba-help__text {
	margin-bottom: 24px;
	font-size: 18px;
	line-height: 24px;
	text-align: center;
}

/* Live "Get in Touch" (a.btn with inline !important colours): inline-block,
   12px arrow 5px after the label, no hover change. */
.ba-help__btn.ba-btn {
	display: inline-block;
	vertical-align: middle;
}

.ba-help__btn.ba-btn .fa {
	margin-top: 4px;
	margin-left: 5px;
	font-size: 12px;
}

.ba-help__btn.ba-btn:hover,
.ba-help__btn.ba-btn:focus {
	background-color: var(--ba-primary);
	color: var(--ba-white);
}

.ba-help__btn.ba-btn:hover .fa-arrow-right,
.ba-help__btn.ba-btn:focus .fa-arrow-right {
	transform: none;
}

/* ==========================================================================
   3. SEO rich-text card
   ========================================================================== */

.ba-seo__body p {
	margin-bottom: 24px;
	line-height: 24px;
	text-align: justify;
}

.ba-seo__body > :last-child {
	margin-bottom: 0;
}

.ba-seo__body a {
	color: var(--ba-link-hover);
}

/* ==========================================================================
   4. Map card
   ========================================================================== */

.ba-map__grid {
	display: flex;
	flex-wrap: wrap;
}

/* Below 992px live stacks two empty 1px-tall spacer columns around the map. */
@media (max-width: 991px) {
	.ba-map__grid {
		padding: 1px 0;
	}
}

.ba-map__title {
	margin: 20px 0 24px;
	color: var(--ba-text-strong);
	font-size: var(--ba-fs-h2);
	line-height: var(--ba-lh-h2);
	text-align: center;
	text-transform: uppercase;
}

.ba-map__title a,
.ba-map__title a:hover,
.ba-map__title a:focus {
	color: var(--ba-primary);
}

.ba-map__frame {
	position: relative;
	width: 100%;
	height: 400px;
	overflow: hidden;
}

.ba-map__frame iframe {
	display: block;
	width: 100%;
	height: 400px;
	border: 0;
}

/* ==========================================================================
   5. FAQ card (square-separator head + 60% cyan accordion)
   ========================================================================== */

.ba-faq__head {
	padding-bottom: 30px;
}

.ba-faq__title {
	margin: 0;
	color: var(--ba-text-strong);
	font-size: var(--ba-fs-h2);
	line-height: var(--ba-lh-h2);
}

.ba-faq__acc.ba-acc {
	margin-bottom: 0;
}

.ba-faq--center .ba-faq__acc {
	margin-right: auto;
	margin-left: auto;
}

.ba-faq__acc .ba-acc__body p {
	margin-bottom: 24px;
	line-height: 24px;
}

.ba-faq__acc .ba-acc__body ul {
	margin: 0 0 24px;
	padding-left: 20px;
	line-height: 20px;
	list-style: disc;
}

.ba-faq__acc .ba-acc__body .ba-faq__list {
	padding: 0 30px;
}

.ba-faq__text {
	line-height: 20px;
}

/* Live's indicator box is 46px wide: the "+" sits 20px from the right edge. */
.ba-faq__acc .ba-acc__indicator {
	padding-right: 20px;
}

/* ==========================================================================
   6. Department lead profile (live .row > .col-lg-6 ×2)
   ========================================================================== */

.ba-lead {
	display: flex;
	flex-wrap: wrap;
	margin-right: calc(var(--ba-gutter) * -1);
	margin-left: calc(var(--ba-gutter) * -1);
}

.ba-lead__text,
.ba-lead__media {
	flex: 0 0 100%;
	max-width: 100%;
	padding-right: var(--ba-gutter);
	padding-left: var(--ba-gutter);
	line-height: 1.42857;
}

.ba-lead__text {
	margin-top: 100px;
}

@media (min-width: 992px) {
	.ba-lead__text,
	.ba-lead__media {
		flex-basis: 50%;
		max-width: 50%;
	}
}

.ba-lead__role {
	font-size: 18px;
}

.ba-lead__name {
	font-size: 48px;
}

.ba-lead__quote {
	margin: 20px 0 24px;
	font-size: 18px;
	line-height: 24px;
}

.ba-lead__img {
	display: inline;
	width: auto;
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   7. "What Our Clients Say" parallax band (live C7 .testimonial-three)
   ========================================================================== */

.ba-testimonials {
	padding: 40px 0 30px;
	background-color: var(--ba-dark);
}

.ba-testimonials .ba-sec-head.ba-testimonials__head {
	margin-bottom: 25px;
}

.ba-testimonials__head .ba-sec-head__title {
	margin-bottom: 10px;
}

.ba-testimonials__slider {
	--ba-per-view: 1;
	--ba-gap: 30px;

	position: relative;
	z-index: 1;
}

@media (min-width: 480px) {
	.ba-testimonials__slider {
		--ba-per-view: 2;
	}
}

@media (min-width: 767px) {
	.ba-testimonials__slider {
		--ba-per-view: 3;
	}
}

.ba-testimonials__slider:not(.is-ready) .ba-slider__viewport {
	overflow: hidden;
}

.ba-testimonials__slider:not(.is-ready) .ba-slider__track {
	display: flex;
	gap: var(--ba-gap);
}

.ba-testimonials__slider:not(.is-ready) .ba-slider__track > * {
	flex: 0 0 calc((100% - (var(--ba-per-view) - 1) * var(--ba-gap)) / var(--ba-per-view));
}

.ba-testimonials .ba-dots--squares {
	padding-bottom: 5px;
}

.ba-testi {
	margin: 0;
	color: var(--ba-white);
	text-align: center;
}

.ba-testi__review {
	display: inline-flex;
	max-width: 100%;
}

.ba-testi__quote {
	position: relative;
	flex: 0 0 auto;
}

.ba-testi__quote--open::before {
	color: var(--ba-primary);
	content: "\f10d";
	font-family: var(--ba-font-icon);
	font-size: 20px;
	line-height: 28.5714px;
}

.ba-testi__quote--close {
	width: 0;
}

.ba-testi__quote--close::after {
	position: absolute;
	top: 75px;
	right: 0;
	z-index: 10;
	color: var(--ba-primary);
	content: "\f10e";
	font-family: var(--ba-font-icon);
	font-size: 20px;
	line-height: 28.5714px;
}

.ba-testi__text {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 5px 0 15px;
	border: 0;
}

.ba-testi__text p {
	margin: 0;
	color: var(--ba-white);
	font-size: 14px;
	line-height: 24px;
	text-align: center;
}

.ba-testi__more[hidden] {
	display: none;
}

.ba-testi__toggle {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ba-white);
	cursor: pointer;
	font: inherit;
	line-height: inherit;
	transition: all var(--ba-t-legacy);
}

.ba-testi__toggle:hover,
.ba-testi__toggle:focus {
	color: var(--ba-primary);
}

.ba-testi__detail {
	padding: 5px;
}

.ba-testi__name,
.ba-testi__position {
	display: inline-block;
	color: var(--ba-white);
	font-size: 14px;
	font-weight: var(--ba-fw-semibold);
	line-height: 20px;
}

/* Home: 42px head (C4 metrics) and a 10px margin around the opening quote. */
.ba-testimonials--home .ba-testimonials__head .ba-sec-head__title {
	margin-bottom: 10px;
}

.ba-testimonials--home .ba-testi__quote--open::before {
	margin: 10px;
}

/* ==========================================================================
   8. Upload drawings band (wraps template-parts/modals/blueprint-upload.php)
   ========================================================================== */

/* Live heading and intro sit in a .row (-15px), so they wrap at 30px wider. */
.ba-upload .ba-blueprint__title,
.ba-upload .ba-blueprint__intro {
	margin-right: calc(var(--ba-gutter) * -1);
	margin-left: calc(var(--ba-gutter) * -1);
}

/* Below 992px live stacks its two &nbsp; spacer columns (20px lines) above
   and below the fields. */
@media (max-width: 991px) {
	.ba-upload .ba-blueprint__grid {
		padding: 20px 0;
	}
}