/**
 * /about-us: one white section (80/70) holding the "About Company" head, the
 * intro + fading image carousel, the framed client-quote carousel, and the
 * company overview / vision and mission block (company audit A3–A7).
 *
 * Section heads, separators, the slider base and dots come from
 * components.css; this file sets the page geometry and carousel skins.
 *
 * @package BlueArcChild
 */

.ba-about {
	--ba-about-nav-bg: #212121;
	--ba-about-control: #cacaca;

	padding: 80px 0 70px;
	background-color: var(--ba-white);
}

/* Section heads: live keeps an empty 10px <p> under every separator. */
.ba-about__head,
.ba-about-head {
	padding-bottom: 10px;
}

/* Small heads (live h5.text-uppercase.m-b0: Roboto 16/22, margin 10 0 0). */
.ba-about-head {
	margin-bottom: 0;
}

.ba-about-head .ba-sec-head__title {
	margin: 10px 0 0;
	font-size: var(--ba-fs-h5);
	line-height: var(--ba-lh-h5);
}

/* Centred heads are followed by live's auto-closed empty <p> (24px). */
.ba-about-head--gap {
	margin-bottom: 24px;
}

/* ==========================================================================
   Intro: text (5 cols) + image carousel (7 cols), top-aligned
   ========================================================================== */

.ba-about__intro {
	align-items: flex-start;
}

.ba-about-carousel__img {
	display: block;
	width: 100%;
	height: auto;
}

/* Owl animateOut "fadeOut": the incoming slide shows at once underneath while
   the outgoing one fades out on top (slider.js fade = cross-fade by default). */
.ba-about-carousel .ba-slider__track > * {
	z-index: 1;
}

.ba-about-carousel .ba-slider__track > .is-active {
	z-index: 0;
	transition: none;
}

.ba-about-carousel__nav {
	position: absolute;
	top: 50%;
	margin-top: -15px;
	padding: 8px 10px;
	border: 1px solid var(--ba-about-nav-bg);
	border-radius: 0;
	background-color: var(--ba-about-nav-bg);
	color: var(--ba-white);
	cursor: pointer;
	font-size: 13px;
	line-height: 1.42857;
	opacity: 0.5;
}

.ba-about-carousel__nav--prev {
	left: 0;
}

.ba-about-carousel__nav--next {
	right: 0;
}

.ba-about-carousel__nav:hover,
.ba-about-carousel__nav:focus-visible {
	opacity: 0.9;
}

.ba-about-carousel__dots {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 15px 20px 20px;
}

/* ==========================================================================
   "What Our Clients Say": 3px cyan frame, Bootstrap 3 carousel look
   ========================================================================== */

/* Live nests a second .container (750/970/1170) in the page container, so the
   frame overhangs the content by 30px on the right. Where that would run past
   the viewport (768–799 and 992–1019px, scrollbar included) it fits the
   content instead. */
.ba-about-quotes {
	margin-top: 50px;
	padding: 0 15px;
	border: 3px solid var(--ba-primary);
}

@media (min-width: 800px) and (max-width: 991px) {
	.ba-about-quotes {
		width: 750px;
	}
}

@media (min-width: 1020px) and (max-width: 1199px) {
	.ba-about-quotes {
		width: 970px;
	}
}

@media (min-width: 1215px) {
	.ba-about-quotes {
		width: 1170px;
	}
}

.ba-about-quotes__title {
	margin: 50px 0 24px;
	text-align: center;
}

.ba-about-quotes__carousel {
	margin-top: 60px;
	padding: 0 10px 30px;
}

.ba-about-quotes__viewport {
	max-width: 80%;
	margin: 0 auto;
}

/* Whole-pixel slides: slider.js steps by offsetLeft (integers), so a
   fractional width would leave the active quote off by a sub-pixel. */
@supports (width: round(down, 80%, 1px)) {
	.ba-about-quotes__viewport {
		max-width: round(down, 80%, 1px);
		margin-left: round(down, calc((100% - round(down, 80%, 1px)) / 2), 1px);
		margin-right: auto;
	}
}

.ba-about-quotes__track {
	align-items: flex-start;
}

/* Like Bootstrap 3 (inactive items display:none) only the active quote is
   painted at rest: the outgoing one stays visible for the slide, then hides,
   so the edge of a neighbour never shows at the clip edge. */
.ba-about-quote {
	margin: 0;
	text-align: center;
	visibility: hidden;
	transition: visibility 0s linear var(--ba-slider-speed, 600ms);
}

.ba-about-quote.is-active {
	visibility: visible;
	transition: none;
}

/* col-sm-8 col-sm-offset-2 inside a -15px row: 584px text column at 1440. */
@media (min-width: 768px) {
	.ba-about-quote {
		padding: 0 calc(16.666667% + 5px);
	}
}

.ba-about-quote__text {
	margin: 0;
	padding: 0;
	border: 0;
}

.ba-about-quote__text p::before {
	float: left;
	margin-right: 10px;
	content: "\f10d";
	font-family: var(--ba-font-icon);
}

.ba-about-quote__meta small {
	line-height: 17px;
}

.ba-about-quote__name {
	margin: 20px 0;
}

/* min-height reserves the indicator row before slider.js fills it. */
.ba-about-quotes__dots {
	min-height: 20px;
	margin: 20px 0 24px;
	line-height: 20px;
}

.ba-about-quotes__dots .ba-dots__dot {
	margin: 0 1.82px;
	padding: 0;
}

.ba-about-quotes__dots .ba-dots__dot span {
	width: 14px;
	height: 14px;
	margin: 1px;
	border: 1px solid var(--ba-primary);
	border-radius: 50%;
	background-color: transparent;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	opacity: 0.4;
	transition: all 0.4s ease-in;
}

.ba-about-quotes__dots .ba-dots__dot.is-active span {
	width: 18px;
	height: 18px;
	margin: 0;
	background-color: var(--ba-primary);
	opacity: 1;
	transition: all 0.2s;
}

/* Chevron strips: 15% wide, glyph at the top (not centred), grey at 50%. */
.ba-about-quotes__control {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 15%;
	margin-top: 30px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ba-about-control);
	cursor: pointer;
	font-size: 32.2px;
	line-height: 1.42857;
	opacity: 0.5;
	transition: all var(--ba-t-legacy);
}

.ba-about-quotes__control--prev {
	left: 0;
}

.ba-about-quotes__control--next {
	right: 0;
}

.ba-about-quotes__control:hover,
.ba-about-quotes__control:focus-visible {
	opacity: 0.9;
}

.ba-about-quotes__glyph {
	display: block;
}

/* ==========================================================================
   Company overview + vision and mission (10 cols, left-anchored)
   ========================================================================== */

.ba-about__overview {
	margin-top: 50px;
}