/* Critical CSS for About Us Page - Maximum Specificity to Override Global Styles */
body.page-template-about-us-php #primary.about-us-page.site-main,
body.page-template-about-us-php #primary.site-main.about-us-page,
body.page-template-about-us-php .site-main.about-us-page,
body.page-template-about-us-php #primary.about-us-page,
body.page-template-about-us-php .about-us-page {
	padding: 0 !important;
	margin: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
}

body.page-template-about-us-php #primary.about-us-page.site-main .welcome-section,
body.page-template-about-us-php #primary.site-main.about-us-page .welcome-section,
body.page-template-about-us-php .site-main.about-us-page .welcome-section,
body.page-template-about-us-php #primary.about-us-page .welcome-section,
body.page-template-about-us-php .about-us-page .welcome-section {
	padding: 0 !important;
	margin: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	display: block !important;
}

body.page-template-about-us-php #primary.about-us-page.site-main .welcome-banner,
body.page-template-about-us-php #primary.site-main.about-us-page .welcome-banner,
body.page-template-about-us-php .site-main.about-us-page .welcome-banner,
body.page-template-about-us-php #primary.about-us-page .welcome-banner,
body.page-template-about-us-php .about-us-page .welcome-banner {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* Completely remove woocommerce-products-header - replaced by banner image */
body.page-template-about-us-php .woocommerce-products-header,
body.page-template-about-us-php .woocommerce-products-header *,
body.page-template-about-us-php .woocommerce-products-header__title,
body.page-template-about-us-php .woocommerce-products-header .container,
body.page-template-about-us-php .woocommerce-products-header .page-title,
body.page-template-about-us-php .woocommerce-products-header h1,
body.page-template-about-us-php .woocommerce-products-header .woocommerce-breadcrumb,
body.page-template-about-us-php .woocommerce-breadcrumb,
body.page-template-about-us-php .woocommerce-breadcrumb *,
body .woocommerce-products-header:has(.page-title),
.woocommerce-products-header {
	display: none !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	visibility: hidden !important;
	opacity: 0 !important;
	position: absolute !important;
	left: -9999px !important;
	width: 0 !important;
	line-height: 0 !important;
	font-size: 0 !important;
	max-height: 0 !important;
}

/* Center "Who are we?" title */
	body.page-template-about-us-php .who-are-we-section .section-title,
	body.page-template-about-us-php #primary.about-us-page .who-are-we-section .section-title,
	body.page-template-about-us-php .about-us-page .who-are-we-section .section-title {
		text-align: center !important;
		color: #fc5c04 !important;
	}

/* About Us Page Styles - Override Global Styles with Maximum Specificity */
	body.page-template-about-us-php #primary.about-us-page.site-main,
	body.page-template-about-us-php #primary.site-main.about-us-page,
	body.page-template-about-us-php .site-main.about-us-page,
	body.page-template-about-us-php #primary.about-us-page,
	body.page-template-about-us-php .about-us-page,
	.about-us-page {
		padding: 0 !important;
		margin: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	/* Completely remove WooCommerce header - replaced by banner image */
	body.page-template-about-us-php .woocommerce-products-header,
	body.page-template-about-us-php .woocommerce-products-header *,
	body.page-template-about-us-php .woocommerce-products-header__title,
	body.page-template-about-us-php .woocommerce-products-header .container,
	body.page-template-about-us-php .woocommerce-products-header .page-title,
	body.page-template-about-us-php .woocommerce-breadcrumb,
	body.page-template-about-us-php .woocommerce-breadcrumb *,
	.about-us-page .woocommerce-products-header,
	.about-us-page .woocommerce-products-header *,
	.about-us-page .woocommerce-breadcrumb,
	.about-us-page .woocommerce-breadcrumb * {
		display: none !important;
		visibility: hidden !important;
		height: 0 !important;
		overflow: hidden !important;
		margin: 0 !important;
		padding: 0 !important;
		opacity: 0 !important;
		position: absolute !important;
		left: -9999px !important;
		width: 0 !important;
		line-height: 0 !important;
		font-size: 0 !important;
	}

	/* Ensure no container constraints on main element */
	.about-us-page > * {
		max-width: 100% !important;
	}

	/* Override any site-main styles */
	body.page-template-about-us-php #primary.about-us-page,
	body.page-template-about-us-php #primary.about-us-page.site-main,
	.about-us-page.site-main,
	#primary.about-us-page {
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Remove spacing from content wrapper */
	body.page-template-about-us-php #content,
	body.page-template-about-us-php #content > * {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

	/* Remove spacing from breadcrumb area and any content before main */
	body.page-template-about-us-php .breadcrumb-section,
	body.page-template-about-us-php .content-breadcrumb,
	body.page-template-about-us-php .woocommerce-breadcrumb,
	body.page-template-about-us-php .entry-header,
	.about-us-page ~ .breadcrumb-section,
	.about-us-page + .breadcrumb-section {
		display: none !important;
		margin: 0 !important;
		padding: 0 !important;
		height: 0 !important;
		overflow: hidden !important;
		visibility: hidden !important;
	}

	/* About Us Header - Maximum Specificity */
	body.page-template-about-us-php #primary.about-us-page.site-main .about-us-header,
	body.page-template-about-us-php #primary.site-main.about-us-page .about-us-header,
	body.page-template-about-us-php .site-main.about-us-page .about-us-header,
	body.page-template-about-us-php #primary.about-us-page .about-us-header,
	body.page-template-about-us-php .about-us-page .about-us-header,
	.about-us-page .about-us-header,
	.about-us-header {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: relative !important;
		z-index: 1 !important;
	}

	body.page-template-about-us-php #primary.about-us-page.site-main .about-us-header-banner,
	body.page-template-about-us-php #primary.site-main.about-us-page .about-us-header-banner,
	body.page-template-about-us-php .site-main.about-us-page .about-us-header-banner,
	body.page-template-about-us-php #primary.about-us-page .about-us-header-banner,
	body.page-template-about-us-php .about-us-page .about-us-header-banner,
	.about-us-page .about-us-header-banner,
	.about-us-header-banner {
		background-color: #4a4a4a !important;
		width: 100% !important;
		padding: 30px 20px !important;
		text-align: center !important;
		margin: 0 !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		box-sizing: border-box !important;
	}

	body.page-template-about-us-php #primary.about-us-page.site-main .about-us-header-banner h1,
	body.page-template-about-us-php #primary.site-main.about-us-page .about-us-header-banner h1,
	body.page-template-about-us-php .site-main.about-us-page .about-us-header-banner h1,
	body.page-template-about-us-php #primary.about-us-page .about-us-header-banner h1,
	body.page-template-about-us-php .about-us-page .about-us-header-banner h1,
	.about-us-page .about-us-header-banner h1,
	.about-us-header-banner h1 {
		color: #ffffff !important;
		font-size: 48px !important;
		font-weight: 600 !important;
		text-transform: uppercase !important;
		letter-spacing: 2px !important;
		margin: 0 !important;
		padding: 0 !important;
		font-family: sans-serif !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	/* Ensure welcome section starts at top with no margin */
	body.page-template-about-us-php .about-us-page .welcome-section,
	.about-us-page .welcome-section {
		margin-top: 0 !important;
		padding-top: 0 !important;
		margin-bottom: 0 !important;
		position: relative;
	}

	/* Remove any spacing from parent wrappers */
	body.page-template-about-us-php #content,
	body.page-template-about-us-php #content .site-main,
	body.page-template-about-us-php .site-content,
	body.page-template-about-us-php .site-content .site-main {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

	/* Remove spacing from first child elements */
	body.page-template-about-us-php .about-us-page > *:first-child {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

	/* Container - Override for About Us page with maximum specificity */
	body.page-template-about-us-php #primary.about-us-page.site-main .container,
	body.page-template-about-us-php #primary.site-main.about-us-page .container,
	body.page-template-about-us-php .site-main.about-us-page .container,
	body.page-template-about-us-php #primary.about-us-page .container,
	body.page-template-about-us-php .about-us-page .container,
	.about-us-page .container {
		max-width: 1170px !important;
		margin: 0 auto !important;
		padding: 0 15px !important;
		box-sizing: border-box !important;
	}

	/* Center "Who are we?" title - Very specific targeting */
	body.page-template-about-us-php .who-are-we-section .container h2.section-title,
	body.page-template-about-us-php #primary.about-us-page .who-are-we-section .container h2.section-title,
	body.page-template-about-us-php .about-us-page .who-are-we-section .container h2.section-title,
	.who-are-we-section .container h2.section-title {
		text-align: center !important;
		display: block !important;
		width: 100% !important;
		color: #fc5c04 !important;
	}

	/* Ensure container works at all breakpoints */
	@media (min-width: 1200px) {
		body.page-template-about-us-php #primary.about-us-page.site-main .container,
		body.page-template-about-us-php #primary.site-main.about-us-page .container,
		body.page-template-about-us-php .site-main.about-us-page .container,
		body.page-template-about-us-php #primary.about-us-page .container,
		body.page-template-about-us-php .about-us-page .container,
		.about-us-page .container {
			max-width: 1170px !important;
		}
	}

	/* Remove container constraints from welcome section - highest specificity */
	body.page-template-about-us-php .about-us-page .welcome-section .container,
	body.page-template-about-us-php .about-us-page .welcome-section > .container,
	.about-us-page .welcome-section .container,
	.about-us-page .welcome-section > .container {
		max-width: 100% !important;
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Override global container styles at all breakpoints */
	@media (min-width: 1200px) {
		body.page-template-about-us-php .about-us-page .welcome-section .container,
		body.page-template-about-us-php .about-us-page .welcome-section > .container,
		.about-us-page .welcome-section .container,
		.about-us-page .welcome-section > .container {
			max-width: 100% !important;
			width: 100% !important;
		}
	}

	/* Welcome Section - Override with maximum specificity */
	body.page-template-about-us-php #primary.about-us-page.site-main .welcome-section,
	body.page-template-about-us-php #primary.site-main.about-us-page .welcome-section,
	body.page-template-about-us-php .site-main.about-us-page .welcome-section,
	body.page-template-about-us-php #primary.about-us-page .welcome-section,
	body.page-template-about-us-php .about-us-page .welcome-section,
	.about-us-page .welcome-section {
		padding: 0 !important;
		margin: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		display: block !important;
	}

	body.page-template-about-us-php #primary.about-us-page.site-main .welcome-banner,
	body.page-template-about-us-php #primary.site-main.about-us-page .welcome-banner,
	body.page-template-about-us-php .site-main.about-us-page .welcome-banner,
	body.page-template-about-us-php #primary.about-us-page .welcome-banner,
	body.page-template-about-us-php .about-us-page .welcome-banner,
	.about-us-page .welcome-banner,
	.welcome-banner {
		position: relative;
		width: 100% !important;
		max-width: 100% !important;
		overflow: hidden;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
		display: block !important;
	}

	.welcome-banner img {
		width: 100%;
		height: auto;
		display: block;
		object-fit: cover;
	}

	.welcome-placeholder {
		background: #f0f0f0;
		padding: 200px 20px;
		text-align: center;
		color: #999;
	}

	.welcome-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 162px 40px;
		background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.welcome-overlay h2 {
		color: #fff;
		font-size: 70px;
		font-weight: 600;
		margin: 0;
		text-align: center;
	}

	/* Section Styles */
	.who-are-we-section {
		padding: 60px 0 30px 0;
	}

	.purpose-section,
	.values-section,
	.history-section,
	.team-section,
	.capabilities-section,
	.questions-section {
		padding: 30px 0;
	}

	.section-title {
		font-size: 32px;
		font-weight: 600;
		color: #343434;
		margin-bottom: 30px;
		overflow: hidden;
		text-align: center;
		display: flex;
		align-items: center;
		gap: 20px;
		width: 100%;
	}

	/* Horizontal lines before and after all section titles - matching Company History style */
	.section-title::before,
	.section-title::after {
		content: '';
		flex: 1;
		height: 1px;
		background: rgba(118, 118, 118, 0.14);
		min-width: 0;
	}

	/* Center "Who are we?" title - High specificity to override global styles */
	body.page-template-about-us-php .who-are-we-section .section-title,
	body.page-template-about-us-php #primary.about-us-page .who-are-we-section .section-title,
	.who-are-we-section .section-title {
		font-size: 36px;
		color: #fc5c04 !important;
	}

	.section-content {
		font-size: 23px;
		line-height: 1.8;
		color: #555;
	}

	.section-content p {
		margin-bottom: 15px;
	}

	/* Purpose Section */
	.purpose-statement {
		font-size: 42px;
		font-weight: 700;
		color: #fc5c04;
		text-align: center;
		margin: 20px 0 0 0;
		line-height: 1.3;
	}

	/* Values Section */
	.values-section {
		background-color: #f9f9f9;
	}

	.values-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30px;
	}

	.value-card {
		background: #fff;
		padding: 35px 25px;
		border-radius: 0;
		box-shadow: 0 2px 8px rgba(0,0,0,0.08);
		text-align: center;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.value-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 4px 12px rgba(0,0,0,0.12);
	}

	.value-icon {
		font-size: 56px;
		color: #fc5c04;
		margin-bottom: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80px;
	}

	.value-icon i {
		font-size: 56px;
	}

	.value-icon img {
		max-width: 80px;
		height: auto;
	}

	.value-card h3 {
		font-size: 20px;
		font-weight: 600;
		color: #333;
		margin-bottom: 15px;
	}

	.value-card p {
		font-size: 14px;
		line-height: 1.6;
		color: #666;
		margin: 0;
	}

	/* History Section */
	.history-slider-wrapper {
		margin: 40px 0;
		position: relative;
		min-height: 400px;
	}

	.history-images-container {
		position: relative;
		width: 100%;
		overflow: hidden;
		border-radius: 0;
	}

	.history-slide {
		display: none;
		opacity: 0;
		transition: opacity 0.5s ease-in-out;
	}

	.history-slide.active {
		display: grid !important;
		grid-template-columns: 1fr 40% !important;
		opacity: 1;
		animation: fadeIn 0.5s ease-in-out;
		gap: 40px;
		align-items: start;
		width: 100%;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	/* Left column: Title and content stacked vertically */
	.history-slide.active .history-slide-text {
		display: flex !important;
		flex-direction: column !important;
		grid-column: 1 !important;
		order: 1 !important;
	}

	.history-slide.active .history-slide-title {
		margin-bottom: 15px;
		order: 1;
	}

	.history-slide.active .history-slide-content {
		margin-top: 0;
		order: 2;
	}

	/* Right column: Image */
	.history-slide.active .history-image {
		grid-column: 2 !important;
		order: 2 !important;
		margin-bottom: 0 !important;
	}

	.history-image img {
		width: 100%;
		height: auto;
		border-radius: 0;
		display: block;
		object-fit: cover;
	}

	.history-slide-title {
		font-size: 24px;
		font-weight: 600;
		color: #333;
		margin-bottom: 15px;
	}

	.history-slide-content {
		font-size: 16px;
		line-height: 1.8;
		color: #555;
	}

	.timeline {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 40px;
		padding: 20px 0;
		position: relative;
	}

	.timeline::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: 2px;
		background: #fc5c04;
		z-index: 0;
	}

	.timeline-marker {
		position: relative;
		z-index: 1;
		background: #fff;
		padding: 10px 20px;
		border: 2px solid #fc5c04;
		border-radius: 25px;
		cursor: pointer;
		transition: all 0.3s ease;
		font-size: 16px;
		font-weight: 600;
		color: #fc5c04;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.timeline-marker:hover {
		background: #fc5c04;
		color: #fff;
		transform: translateY(-2px);
		box-shadow: 0 4px 8px rgba(252, 92, 4, 0.3);
	}

	.timeline-marker.active {
		background: #fc5c04;
		color: #fff;
		box-shadow: 0 4px 12px rgba(252, 92, 4, 0.4);
	}

	.timeline-marker:focus {
		outline: 2px solid #fc5c04;
		outline-offset: 2px;
	}

	.timeline-marker span {
		display: block;
	}

	/* Team Section */
	.team-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 30px;
	}

	.team-member {
		text-align: center;
	}

	.team-member-image {
		margin-bottom: 15px;
		border-radius: 0;
		overflow: hidden;
	}

	.team-member-image img {
		width: 100%;
		height: auto;
		display: block;
		transition: transform 0.3s ease;
	}

	.team-member:hover .team-member-image img {
		transform: scale(1.05);
	}

	.team-member-info h3 {
		font-size: 18px;
		font-weight: 600;
		color: #333;
		margin-bottom: 5px;
	}

	.team-member-info p {
		font-size: 14px;
		color: #666;
		margin: 0;
	}

	/* Capabilities Section */
	.capabilities-section {
		background-color: #f9f9f9;
	}

	.capability-subsection {
		margin-bottom: 60px;
	}

	.capability-subsection:last-child {
		margin-bottom: 0;
	}

	.capability-subsection-wrapper {
		display: grid;
		grid-template-columns: 1fr 40%;
		gap: 40px;
		align-items: start;
	}

	.capability-subsection-text {
		display: flex;
		flex-direction: column;
	}

	.subsection-title {
		font-size: 24px;
		font-weight: 600;
		color: #fc5c04;
		margin-bottom: 20px;
		order: 1;
	}

	.subsection-content {
		font-size: 16px;
		line-height: 1.8;
		color: #555;
		margin-bottom: 0;
		order: 2;
	}

	.capability-subsection-image {
		grid-column: 2;
	}

	/* Manufacturing: Image on left, content on right - ONLY this section */
	.manufacturing-subsection .capability-subsection-wrapper {
		grid-template-columns: 40% 1fr !important;
	}

	.manufacturing-subsection .capability-subsection-image {
		grid-column: 1 !important;
		order: 1 !important;
	}

	.manufacturing-subsection .capability-subsection-text {
		grid-column: 2 !important;
		order: 2 !important;
	}

	.capability-image {
		border-radius: 0;
		overflow: hidden;
		width: 100%;
	}

	.capability-image img {
		width: 100%;
		height: auto;
		display: block;
		object-fit: cover;
	}

	.capability-image .image-placeholder {
		background: #f0f0f0;
		padding: 100px 20px;
		text-align: center;
		border-radius: 0;
		color: #999;
	}

	/* Questions Section */
	.questions-content {
		text-align: center;
		font-size: 18px;
		line-height: 1.8;
		color: #555;
	}

	.image-placeholder {
		background: #f0f0f0;
		padding: 100px 20px;
		text-align: center;
		border-radius: 0;
		color: #999;
	}

	/* Responsive Design */
	@media (max-width: 992px) {
		.values-grid {
			grid-template-columns: repeat(2, 1fr);
		}

		.team-grid {
			grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		}

		.capability-subsection-wrapper {
			grid-template-columns: 1fr;
			gap: 30px;
		}

		.capability-subsection-image {
			grid-column: 1;
			order: -1;
		}

		.manufacturing-subsection .capability-subsection-image {
			order: -1;
		}

		.manufacturing-subsection .capability-subsection-text {
			order: 1;
		}


		.timeline {
			flex-wrap: wrap;
			gap: 15px;
			justify-content: center;
		}

		.timeline::before {
			display: none;
		}

		.timeline-marker {
			flex: 0 0 auto;
		}

		.history-slider-wrapper {
			min-height: 300px;
		}

		.history-slide.active {
			grid-template-columns: 1fr !important;
			gap: 30px;
		}

		.history-image {
			order: -1 !important;
		}
	}

	@media (max-width: 768px) {
		.about-us-header-banner h1 {
			font-size: 36px;
			padding: 20px 15px;
			letter-spacing: 1px;
		}

		.welcome-overlay h2 {
			font-size: 28px;
		}

		.section-title {
			font-size: 28px;
			gap: 15px;
		}

		.who-are-we-section .section-title {
			font-size: 32px;
		}

		.values-grid {
			grid-template-columns: 1fr;
		}

		.team-grid {
			grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
			gap: 20px;
		}

		.purpose-statement {
			font-size: 32px;
		}


		.who-are-we-section {
			padding: 40px 0 10px 0;
		}

		.purpose-section,
		.values-section,
		.history-section,
		.team-section,
		.capabilities-section,
		.questions-section {
			padding: 40px 0;
		}
	}