/**
 * About Us page template.
 *
 * organico-base.css already carries the reference theme's About-page rules
 * (.text-head-about2, .text-img-about2, .text-video-about2, .text-about2,
 * .text-about2_2, .testimonial-about2), so this file only supplies what lives
 * outside the stylesheet on the reference site:
 *
 *   1. the hero height (600px there, ~250px for a standard page banner);
 *   2. the two values the reference site paints from its Customizer accent
 *      rather than from CSS - the feature icon circles, which the bundled rule
 *      leaves at the placeholder `background: red`;
 *   3. the row backgrounds and margins WPBakery emitted as generated
 *      .vc_custom_* classes, which are per-page and so never shipped;
 *   4. the responsive behaviour for the full-bleed video band, which the
 *      bundled rules assume WPBakery's own full-width JS is handling.
 *
 * Everything is scoped under .about-page so no other template is affected.
 */

/* ------------------------------------------------------------------- Hero */

/*
 * .ftc-breadcrumb .container is already a centred flex column, so removing its
 * fixed 78px padding and giving it a height is all the centring needs. The
 * reference measures 600px at desktop; clamp scales that down rather than
 * letting a 600px band swallow a phone screen.
 */
.about-page .about-hero .container {
	min-height: clamp(260px, 45vw, 600px);
	padding: 40px 0;
}

/*
 * The reference sets this hero's title at 36px against the theme's usual 30px
 * for a page banner - the taller band carries the larger type. Measured on the
 * reference: 36px/700, white, and deliberately no scrim behind it, so the
 * contrast against a light photo is whatever the photo gives you.
 */
.about-page .about-hero .container .product_title {
	font-size: 36px;
}

@media only screen and (max-width: 767px) {
	.about-page .about-hero .container .product_title {
		font-size: 26px;
	}
}

/* ------------------------------------------------- Welcome heading + story */

.about-page .text-head-about2 h2 {
	font-size: 30px;
	line-height: 1.3;
	text-transform: uppercase;
}

/*
 * The bundled rule pulls this column out by 30px so the story image bleeds
 * past the row. That needs the row's own -15px bleed to be present to look
 * right, and it must not survive into the stacked layout - both handled at
 * the 991px breakpoint below, which the bundled CSS already covers.
 */
/*
 * The two halves of this row deliberately overlap by 60px: the row bleeds
 * -15px, the left column a further -30px, and both columns are still 50%, so
 * the image's box ends 60px past where the right column's text begins. That is
 * the reference's own geometry, and it works there only because its demo image
 * is a device mock-up with about that much empty space down its right edge —
 * any photo that fills its frame runs straight under the first paragraph.
 * Capping the width keeps the left bleed (and so the reference's composition)
 * while guaranteeing the image can never reach the text, whatever is uploaded.
 */
.about-page .text-img-about2 .ftc-smooth-image img {
	display: block;
	width: 100%;
	max-width: calc(100% - 60px);
	height: auto;
}

.about-page .text-img-about2 ul {
	margin: 0;
	padding-top: 35px;
	list-style: none;
}

/* --------------------------------------------------- Features + video band */

/*
 * WPBakery emitted this as .vc_custom_1555064323159 {background-color:#fffbf8}
 * on the reference. Generated classes are per-page, so the colour is restated
 * here. The band is full-bleed with the grid re-formed by an inner .container,
 * which is what the reference achieves with its full-width row JS.
 */
.about-page .text-video-about2 {
	background-color: #fffbf8;
	padding: 100px 0;
	margin: 60px 0 0;
}

.about-page .text-video-about2 > .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.about-page .text-video-about2 > .container > .wpb_column {
	float: none;
}

.about-page .text-video-about2 ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The bundled rule leaves these icon circles at `background: red` - a
 * placeholder the reference site overrides with its accent green. Same
 * situation as the portfolio filter bar (see portfolio.css).
 */
.about-page .text-video-about2 li i {
	background: #82b53f;
	flex: 0 0 70px;
}

.about-page .text-video-about2 .ftc-smooth-image {
	position: relative;
}

.about-page .text-video-about2 .ftc-smooth-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------- Testimonials */

/* .vc_custom_1557299375692 on the reference: margin-top:120px, bottom:-30px. */
.about-page .about-testimonial-row {
	margin-top: 120px;
	margin-bottom: -30px;
}

/*
 * No border here on purpose. organico-base.css already draws the quote box:
 *
 *   .ftc-sb-testimonial .active .testimonial-content .info {
 *       border: 1px solid #82b440; border-bottom: 0; }
 *
 * on the inner .info, and its missing bottom edge is what leaves the box open
 * where the avatar overlaps it - the reference's look. That rule is gated on
 * .active, a class Owl only adds once the carousel has mounted, so during the
 * first build (before the slider was initialising cleanly) the box appeared to
 * have no border at all and one was added here to compensate. With Owl mounting
 * properly the theme's rule applies, and this one was drawing a second, fully
 * closed rectangle 1px outside it - the stray line under the quote.
 */

/*
 * organico-base.css carries ".ftc-sb-testimonial.owl-carousel .owl-stage-outer
 * {overflow:visible}", which outranks both Owl's own overflow:hidden and
 * style_default.css's .owl-height. With Owl mounted directly on the wrapper
 * (the markup the reference uses here) that leaves the whole 3-slide stage
 * unclipped - measured 6084px of page width against a 1335px viewport, i.e. a
 * horizontal scrollbar across the entire site. The reference gets away with it
 * because WPBakery wraps this row in its own clipped full-width container,
 * which is plugin markup this build does not have. Restoring the clip is the
 * fix; nothing in the slide is positioned outside its own item, so there is
 * nothing for it to cut off.
 */
.about-page .testimonial-about2.owl-carousel .owl-stage-outer {
	overflow: hidden;
	/*
	 * Owl lands the slide a sub-pixel to the right of its own stage (measured:
	 * stage-outer ends at 1252.50, the slide's right border occupies
	 * 1252.50-1253.50), so a plain clip swallowed the box's right edge while
	 * leaving the left one - the border looked missing down one side only.
	 *
	 * overflow clips at the PADDING box, so padding the clip outwards and
	 * pulling the same amount back with a negative margin widens what survives
	 * without moving the element or resizing the quote box. 2px is far below
	 * the 30px gap between slides, so the neighbouring slide stays hidden.
	 */
	margin-left: -2px;
	margin-right: -2px;
	padding-left: 2px;
	padding-right: 2px;
}

/* Before the carousel initialises, only the first quote should be visible. */
.about-page .testimonial-about2.loading .item ~ .item {
	display: none;
}

.about-page .about-page-content {
	margin: 60px 0;
}

/* ----------------------------------------------------------- Responsive */

@media only screen and (max-width: 1199px) {
	.about-page .text-video-about2 {
		padding: 80px 0;
	}
}

@media only screen and (max-width: 991px) {
	/*
	 * Both halves go full width. The bundled CSS already does this for
	 * .text-img-about2; the video band is this template's own markup, so it
	 * needs saying here too.
	 */
	.about-page .text-video-about2 > .container > .wpb_column {
		width: 100%;
	}

	/*
	 * Once the columns stack there is no second column to bleed away from, so
	 * the row's -15px and the 60px collision cap both stop earning their keep:
	 * together they left the image hanging off the left edge of the screen
	 * while the paragraphs below it stayed inset. Align everything to the
	 * container instead.
	 */
	.about-page .text-img-about2 {
		margin-left: 0;
		margin-right: 0;
	}

	.about-page .text-img-about2 .ftc-smooth-image img {
		max-width: 100%;
		margin: 0 auto;
	}

	.about-page .text-video-about2 > .container > .wpb_column:first-child {
		margin-bottom: 45px;
	}

	.about-page .about-testimonial-row {
		margin-top: 80px;
	}

	.about-page .testimonial-about2.ftc-sb-testimonial .testimonial-content .info {
		padding: 45px 40px 55px;
	}
}

@media only screen and (max-width: 767px) {
	.about-page .text-head-about2 h2 {
		font-size: 23px;
		margin-top: 50px;
	}

	.about-page .text-video-about2 {
		padding: 55px 0;
		margin-top: 40px;
	}

	/*
	 * Keep the desktop arrangement on phones: icon on the left, heading and
	 * paragraph beside it. Only the spacing is tightened, so the row still fits
	 * once the text column is down to ~200px.
	 *
	 * The icon must not shrink - it is a flex item with a width rather than a
	 * basis, so without this the 70px circle squashes to an oval as the text
	 * competes for room.
	 */
	.about-page .text-video-about2 li {
		align-items: center;
		margin-bottom: 34px;
	}

	.about-page .text-video-about2 li i {
		flex: 0 0 70px;
	}

	.about-page .text-video-about2 .text-about2_2 {
		margin-left: 20px;
		max-width: none;
	}

	.about-page .about-testimonial-row {
		margin-top: 55px;
	}

	.about-page .testimonial-about2.ftc-sb-testimonial .testimonial-content .info {
		padding: 35px 22px 45px;
		font-size: 14px;
	}
}

@media only screen and (max-width: 575px) {
	/*
	 * Story highlights keep the same side-by-side shape: icon left, paragraph
	 * right. The bundled rule already centres the pair and vertically centres
	 * the icon against the copy; all that is needed here is to stop the icon
	 * shrinking (it is sized by width, not flex-basis) and to trim the gap and
	 * row padding so the paragraph keeps a usable column on a narrow screen.
	 */
	.about-page .text-img-about2 ul li {
		padding: 20px 0;
	}

	.about-page .text-img-about2 ul li img {
		flex: 0 0 auto;
	}

	.about-page .text-img-about2 p.text-about2 {
		margin-left: 20px;
	}
}