/* ============================================================
   Awaken Stone skin — replaces Porto's skin-industry-factory.css
   + demo-industry-factory.css (recolored per DESIGN.md).

   World: "Revived industrial" — deep navy ground, emerald action,
   warm paper neutrals, navy duotone imagery. No cold grays, no red.
   ============================================================ */

/* General */
:root {
	--border-radius: 0;
	--border-radius2x: 0;
	--default: #6e6b64;
}

/* Skin Colors */
:root {
	--primary: #1ea97c;
	--primary-100: #1b9870;
	--primary-200: #198e69;
	--primary-300: #178462;
	--primary--100: #21bb89;
	--primary--200: #23c28f;
	--primary--300: #2fcd99;
	--primary-rgba-0: rgba(30, 169, 124, 0);
	--primary-rgba-10: rgba(30, 169, 124, 0.1);
	--primary-rgba-20: rgba(30, 169, 124, 0.2);
	--primary-rgba-30: rgba(30, 169, 124, 0.3);
	--primary-rgba-40: rgba(30, 169, 124, 0.4);
	--primary-rgba-50: rgba(30, 169, 124, 0.5);
	--primary-rgba-60: rgba(30, 169, 124, 0.6);
	--primary-rgba-70: rgba(30, 169, 124, 0.7);
	--primary-rgba-80: rgba(30, 169, 124, 0.8);
	--primary-rgba-90: rgba(30, 169, 124, 0.9);
	--secondary: #0d2136;
	--secondary-100: #0b1c2e;
	--secondary-200: #0a1929;
	--secondary-300: #081524;
	--secondary--100: #112b46;
	--secondary--200: #133150;
	--secondary--300: #16375a;
	--secondary-rgba-0: rgba(13, 33, 54, 0);
	--secondary-rgba-10: rgba(13, 33, 54, 0.1);
	--secondary-rgba-20: rgba(13, 33, 54, 0.2);
	--secondary-rgba-30: rgba(13, 33, 54, 0.3);
	--secondary-rgba-40: rgba(13, 33, 54, 0.4);
	--secondary-rgba-50: rgba(13, 33, 54, 0.5);
	--secondary-rgba-60: rgba(13, 33, 54, 0.6);
	--secondary-rgba-70: rgba(13, 33, 54, 0.7);
	--secondary-rgba-80: rgba(13, 33, 54, 0.8);
	--secondary-rgba-90: rgba(13, 33, 54, 0.9);
	--tertiary: #2494b8;
	--tertiary-100: #2085a6;
	--tertiary-200: #1e7d9b;
	--tertiary-300: #1c7591;
	--tertiary--100: #28a3ca;
	--tertiary--200: #2aabd4;
	--tertiary--300: #35b2da;
	--tertiary-rgba-0: rgba(36, 148, 184, 0);
	--tertiary-rgba-10: rgba(36, 148, 184, 0.1);
	--tertiary-rgba-20: rgba(36, 148, 184, 0.2);
	--tertiary-rgba-30: rgba(36, 148, 184, 0.3);
	--tertiary-rgba-40: rgba(36, 148, 184, 0.4);
	--tertiary-rgba-50: rgba(36, 148, 184, 0.5);
	--tertiary-rgba-60: rgba(36, 148, 184, 0.6);
	--tertiary-rgba-70: rgba(36, 148, 184, 0.7);
	--tertiary-rgba-80: rgba(36, 148, 184, 0.8);
	--tertiary-rgba-90: rgba(36, 148, 184, 0.9);
	--quaternary: #16324e;
	--quaternary-100: #122a42;
	--quaternary-200: #10263c;
	--quaternary-300: #0e2236;
	--quaternary--100: #1a3a5a;
	--quaternary--200: #1c3e60;
	--quaternary--300: #1f4468;
	--quaternary-rgba-0: rgba(22, 50, 78, 0);
	--quaternary-rgba-10: rgba(22, 50, 78, 0.1);
	--quaternary-rgba-20: rgba(22, 50, 78, 0.2);
	--quaternary-rgba-30: rgba(22, 50, 78, 0.3);
	--quaternary-rgba-40: rgba(22, 50, 78, 0.4);
	--quaternary-rgba-50: rgba(22, 50, 78, 0.5);
	--quaternary-rgba-60: rgba(22, 50, 78, 0.6);
	--quaternary-rgba-70: rgba(22, 50, 78, 0.7);
	--quaternary-rgba-80: rgba(22, 50, 78, 0.8);
	--quaternary-rgba-90: rgba(22, 50, 78, 0.9);
	--dark: #0d1b28;
	--dark-100: #0a141e;
	--dark-200: #081119;
	--dark-300: #060d13;
	--dark--100: #122636;
	--dark--200: #14293c;
	--dark--300: #172e44;
	--dark-rgba-0: rgba(13, 27, 40, 0);
	--dark-rgba-10: rgba(13, 27, 40, 0.1);
	--dark-rgba-20: rgba(13, 27, 40, 0.2);
	--dark-rgba-30: rgba(13, 27, 40, 0.3);
	--dark-rgba-40: rgba(13, 27, 40, 0.4);
	--dark-rgba-50: rgba(13, 27, 40, 0.5);
	--dark-rgba-60: rgba(13, 27, 40, 0.6);
	--dark-rgba-70: rgba(13, 27, 40, 0.7);
	--dark-rgba-80: rgba(13, 27, 40, 0.8);
	--dark-rgba-90: rgba(13, 27, 40, 0.9);
	--light: #FFF;
	--light-100: #f7f6f3;
	--light-200: #efede8;
	--light-300: #e8e6e0;
	--light--100: #ffffff;
	--light--200: #ffffff;
	--light--300: #ffffff;
	--light-rgba-0: rgba(255, 255, 255, 0);
	--light-rgba-10: rgba(255, 255, 255, 0.1);
	--light-rgba-20: rgba(255, 255, 255, 0.2);
	--light-rgba-30: rgba(255, 255, 255, 0.3);
	--light-rgba-40: rgba(255, 255, 255, 0.4);
	--light-rgba-50: rgba(255, 255, 255, 0.5);
	--light-rgba-60: rgba(255, 255, 255, 0.6);
	--light-rgba-70: rgba(255, 255, 255, 0.7);
	--light-rgba-80: rgba(255, 255, 255, 0.8);
	--light-rgba-90: rgba(255, 255, 255, 0.9);
}

/* Skin Colors - Inverse */
:root {
	--primary-inverse: #FFF;
	--secondary-inverse: #FFF;
	--tertiary-inverse: #FFF;
	--quaternary-inverse: #FFF;
	--dark-inverse: #FFF;
	--light-inverse: #6e6b64;
}

/* Grey Colors — warm paper neutrals, never cold gray */
:root {
	--grey: #93908a;
	--grey-100: #f7f6f3;
	--grey-200: #efede8;
	--grey-300: #e8e6e0;
	--grey-400: #e1dfd8;
	--grey-500: #d8d5cd;
	--grey-600: #ccc9c0;
	--grey-700: #bcb9b0;
	--grey-800: #a5a29a;
	--grey-900: #8b8880;
	--grey-1000: #726f68;
}

/* ============================================================
   Base — typography (Poppins via next/font; Noto Sans SC for ZH)
   ============================================================ */
body {
	font-family: var(--font-public, "Poppins"), var(--font-public-zh, "Noto Sans SC"),
		"PingFang SC", "Microsoft YaHei", sans-serif;
}

@media (min-width: 1200px) {
	.container {
		max-width: 1200px !important;
	}
}

[class*="text-color-hover-"] {
	transition: ease all 300ms;
}

[class*="bg-color-hover-"] {
	transition: ease background 300ms;
}

.bg-color-hover-primary:hover [class*="opacity-"] {
	opacity: 1 !important;
}

.custom-font-size-1 {
	font-size: 1.4em !important;
}

.custom-font-size-2 {
	font-size: 1.35em !important;
}

.custom-font-size-3 {
	font-size: 1.15em !important;
}

.custom-positive-ls-5px {
	letter-spacing: 5px !important;
}

/* Absolutely-centered hero image container (demo css — height-neutral) */
.custom-container-absolute-centered-x {
	position: absolute !important;
	left: 50%;
	transform: translate3d(-50%, 0, 0);
}

/* Timeline year cards */
.custom-min-height-1 {
	min-height: 277px;
}

.owl-carousel.custom-stage-outer-box-shadow .owl-stage-outer,
.custom-stage-outer-box-shadow {
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45);
}

/* Elevated dark surface — keeps the template's original class name
   (was Porto's cold #4d4e50; ours is slate navy) */
.custom-bg-lighten-grey-1,
.custom-bg-elevated-dark {
	background: var(--quaternary) !important;
}

/* Navy band ground (page headers, CTA bands): the template's background-image
   photo slot rendered as the brand gradient */
.custom-bg-navy-band {
	background: linear-gradient(100deg, var(--secondary-200) 0%, var(--secondary) 60%, var(--quaternary) 100%) !important;
	background-size: cover !important;
	background-position: center !important;
}

/* Template hero panel: bg-color-grey block recolored to warm paper */
.bg-color-grey {
	background: var(--grey-100) !important;
}

/* Serif accent from the demo (Playfair) — we keep one voice: Poppins light */
.custom-font-secondary {
	font-family: inherit !important;
	font-weight: 300;
}

/* ============================================================
   Buttons
   ============================================================ */
.custom-svg-btn-style-1 {
	position: relative;
	padding: 19px 60px 19px 50px;
	font-weight: 700;
	font-size: 0.85rem;
	z-index: 1;
}

.custom-svg-btn-style-1 .custom-svg-btn-background {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 107%;
	height: 120%;
	transform: translate3d(-50%, -50%, 0);
	z-index: -1;
}

.custom-svg-btn-style-1 .custom-svg-btn-background polygon {
	transition: ease all 300ms;
}

.custom-svg-btn-style-1 .custom-svg-btn-arrow {
	margin-left: 6px;
}

.custom-svg-btn-style-1.custom-svg-btn-style-1-small {
	padding: 18px 31px 18px 25px;
	font-size: 0.8rem;
}

.custom-svg-btn-style-1.custom-svg-btn-style-1-light .custom-svg-btn-background polygon {
	fill: transparent;
	stroke: #FFF;
}

.custom-svg-btn-style-1.custom-svg-btn-style-1-light:hover .custom-svg-btn-background polygon {
	fill: #FFF;
}

.custom-svg-btn-style-1.custom-svg-btn-style-1-light.custom-svg-btn-style-1-light-solid .custom-svg-btn-background {
	transition: ease opacity 300ms;
}

.custom-svg-btn-style-1.custom-svg-btn-style-1-light.custom-svg-btn-style-1-light-solid .custom-svg-btn-background polygon {
	fill: #FFF;
}

.custom-svg-btn-style-1.custom-svg-btn-style-1-light.custom-svg-btn-style-1-light-solid:hover .custom-svg-btn-background {
	opacity: 0.95;
}

.custom-svg-btn-style-1:not(.custom-svg-btn-style-1-light):hover .custom-svg-btn-background polygon {
	stroke: var(--primary);
}

.custom-svg-btn-style-1:not(.custom-svg-btn-style-1-light).custom-svg-btn-style-1-solid .custom-svg-btn-background polygon {
	fill: var(--primary);
	stroke: var(--primary);
}

.custom-svg-btn-style-1:not(.custom-svg-btn-style-1-light).custom-svg-btn-style-1-solid:hover .custom-svg-btn-background polygon,
.custom-svg-btn-style-1:not(.custom-svg-btn-style-1-light).custom-svg-btn-style-1-solid:focus .custom-svg-btn-background polygon {
	fill: var(--primary--200);
	stroke: var(--primary--200);
}

.custom-btn-style-1:after {
	border-left-color: var(--primary);
}

.custom-btn-style-1:hover:after,
.custom-btn-style-1.hover:after {
	border-left-color: var(--primary--200);
}

.custom-btn-style-1:focus:after,
.custom-btn-style-1.focus:after {
	border-left-color: var(--primary-200);
}

.custom-btn-style-1:active:after,
.custom-btn-style-1.active:after {
	border-left-color: var(--primary-200) !important;
}

.btn-link > svg polygon {
	stroke: var(--primary);
	fill: var(--primary);
}

.custom-read-more > svg {
	transition: ease transform 300ms;
}

.custom-read-more:hover > svg {
	transform: translate3d(6px, 0, 0);
}

/* Visible keyboard focus everywhere (a11y floor) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

/* ============================================================
   Header
   ============================================================ */
@media (min-width: 992px) {
	#header .header-nav-main nav > ul > li > a {
		font-size: 16px;
		font-weight: 600;
		padding: 0 1.3rem !important;
	}
}

#header.header-effect-shrink .header-container {
	min-height: 110px;
}

/* ============================================================
   Hero — emerald accent blocks behind the image collage
   ============================================================ */
.custom-hero-sub-images-style-1 {
	position: absolute;
	top: 65%;
	left: 100%;
	width: 100%;
	min-height: 323px;
	z-index: -1;
}

.custom-hero-sub-images-style-1:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 339px;
	height: 100%;
	background: var(--primary-200);
	opacity: 0.7;
	z-index: 1;
}

.custom-hero-sub-images-style-1:after {
	content: '';
	position: absolute;
	top: 0;
	right: 100%;
	width: 40vw;
	height: 100%;
	background: var(--primary-200);
}

.custom-hero-sub-images-style-1 .custom-hero-sub-images-shadow {
	position: absolute;
	bottom: 0;
	width: 0px;
	height: 60%;
	left: 0;
	z-index: 1;
	box-shadow: 0px 0px 80px 68px var(--secondary-rgba-40);
}

.custom-hero-sub-images-style-1 img {
	width: 640px;
	max-width: none;
}

/* ============================================================
   Category cards — navy duotone resting, color reveal on hover
   ============================================================ */
.custom-thumb-info-style-1 .custom-thumb-info-icon {
	display: flex;
	justify-content: center;
	padding: 2.5rem 0;
	background: var(--quaternary);
	transition: ease background 300ms;
}

.custom-thumb-info-style-1 .custom-thumb-info-icon > img {
	width: auto;
	transform: scale(1);
}

.custom-thumb-info-style-1 .thumb-info-wrapper {
	position: relative;
}

.custom-thumb-info-style-1 .thumb-info-wrapper:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--secondary);
	opacity: 0.7;
	transition: ease opacity 300ms;
	z-index: 1;
}

.custom-thumb-info-style-1 .thumb-info-wrapper > img {
	filter: grayscale(1);
	transform: scale(1) !important;
	transition: ease filter 300ms;
}

.custom-thumb-info-style-1:hover .custom-thumb-info-icon,
.custom-thumb-info-style-1.active .custom-thumb-info-icon {
	background: var(--primary) !important;
}

.custom-thumb-info-style-1:hover .custom-thumb-info-icon > img,
.custom-thumb-info-style-1.active .custom-thumb-info-icon > img {
	animation: toRightFromLeftNoScale 0.3s forwards;
}

.custom-thumb-info-style-1:hover .thumb-info-wrapper:after,
.custom-thumb-info-style-1.active .thumb-info-wrapper:after {
	opacity: 0;
}

.custom-thumb-info-style-1:hover .thumb-info-wrapper > img,
.custom-thumb-info-style-1.active .thumb-info-wrapper > img {
	filter: grayscale(0);
}

@keyframes toRightFromLeftNoScale {
	49% {
		transform: translate(100%) scale(1);
	}
	50% {
		opacity: 0;
		transform: translate(-100%) scale(1);
	}
	51% {
		opacity: 1;
	}
}

/* Generic navy duotone media treatment */
.duotone-media {
	position: relative;
	overflow: hidden;
}

.duotone-media img {
	filter: grayscale(0.9);
	transition: ease filter 300ms;
}

.duotone-media:after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--secondary);
	opacity: 0.55;
	transition: ease opacity 300ms;
	pointer-events: none;
}

.duotone-media:hover img {
	filter: grayscale(0);
}

.duotone-media:hover:after {
	opacity: 0.15;
}

/* ============================================================
   Angled section shapes
   ============================================================ */
.custom-section-shape-background {
	position: relative;
	overflow: hidden;
}

.custom-section-shape-background:before,
.custom-section-shape-background:after {
	content: '';
	position: absolute;
	top: 0;
	left: 47.5%;
	width: 50vw;
	height: 100%;
	background: var(--light);
	transform: skewX(21deg);
	z-index: 0;
}

.custom-section-shape-background:after {
	left: 49.5%;
	transform: skewX(-21deg);
}

.custom-section-shape-background .custom-shape-divider {
	position: relative;
}

.custom-section-shape-background .custom-shape-divider:before {
	content: '';
	position: absolute;
	top: -150px;
	left: 0;
	width: 100%;
	height: 150%;
	background: var(--grey-100);
	transform: skewY(-4deg);
	z-index: 0;
}

.custom-section-shape-background.custom-section-shape-background-reverse:before {
	left: auto;
	right: 49.5%;
	transform: skewX(21deg) rotate(180deg);
}

.custom-section-shape-background.custom-section-shape-background-reverse:after {
	left: auto;
	right: 50.5%;
	transform: skewX(-21deg) rotate(180deg);
}

@media (max-width: 991px) {
	.custom-section-shape-background:before,
	.custom-section-shape-background:after {
		width: 100vw;
	}
}

@media (min-width: 2000px) {
	.shape-divider svg {
		width: 100%;
	}
}

.custom-list-icons-icon-size li > [class*="fa-"]:first-child,
.custom-list-icons-icon-size li > .icons:first-child,
.custom-list-icons-icon-size li a:first-child > [class*="fa-"]:first-child,
.custom-list-icons-icon-size li a:first-child > .icons:first-child {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
}

/* ============================================================
   Process steps
   ============================================================ */
.custom-process-style-1 .process-step-circle {
	width: 110px;
	height: 110px;
	border-color: var(--grey-500) !important;
}

.custom-process-style-1 .process-step-circle-content {
	font-size: 2.2em;
}

/* ============================================================
   Testimonials
   ============================================================ */
.custom-testimonial-style-1.testimonial.testimonial-style-3 blockquote {
	background: transparent !important;
	padding: 12px 40px;
}

.custom-testimonial-style-1.testimonial.testimonial-style-3 blockquote:before {
	content: '\f10d';
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-size: 1.2rem;
	color: var(--primary);
}

.custom-testimonial-style-1.testimonial.testimonial-style-3 .testimonial-author {
	margin-left: 40px;
}

.custom-testimonial-style-1.testimonial.testimonial-style-3 .testimonial-author img {
	max-width: 85px;
}

/* ============================================================
   Forms
   ============================================================ */
.custom-form-style-1 {
	opacity: 1 !important;
}

.custom-form-style-1 .form-control {
	height: calc(1.5em + 1.85rem + 2px);
	padding: 0.975rem 1.25rem;
	background: var(--grey-100);
	border-color: var(--grey-100);
}

.custom-form-style-1 .form-control:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--primary-rgba-20);
}

.custom-form-style-1 textarea.form-control {
	height: auto;
}

/* ============================================================
   Tables (specs)
   ============================================================ */
.custom-table-style-1 thead tr {
	background: var(--quaternary);
}

.custom-table-style-1 thead th {
	border-top: 0;
	border-bottom: 0;
	color: var(--light);
	font-weight: 700;
	font-size: 1.1rem;
}

.custom-table-style-1 th,
.custom-table-style-1 td {
	padding: 15px 20px;
}

.custom-table-style-1 td:first-child {
	font-weight: 600;
}

/* ============================================================
   Footer — navy ground, tinted (never gray) secondary text
   ============================================================ */
#footer p,
#footer a:not(.btn),
#footer li,
#footer strong,
#footer .footer-copyright p,
#footer a:not(.btn):not(.no-footer-css) {
	color: #9fb3c4;
}

#footer a:not(.btn):hover {
	color: var(--primary--200);
}

.custom-list-style-1 > li {
	margin-bottom: 0;
	padding-top: 10px;
	padding-bottom: 10px;
}

.custom-list-style-1 > li + li {
	border-top: 1px solid var(--light-rgba-10);
}

.custom-list-style-1 > li:first-child {
	padding-top: 0;
}

.custom-list-style-1 > li:last-child {
	padding-bottom: 0;
}

.custom-footer-top-light-border {
	border-top: 1px solid var(--light-rgba-10) !important;
}

/* Skin */
.featured-icon.rounded-circle {
	border-radius: 100% !important;
}

/* ============================================================
   Condition badges (product-catalog spec: color-coded system)
   ============================================================ */
.badge-condition {
	display: inline-block;
	padding: 0.35em 0.8em;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	line-height: 1.4;
}

.badge-condition-new {
	background: var(--primary);
}

.badge-condition-refurb {
	background: var(--tertiary);
}

.badge-condition-used {
	background: #d97706;
}

/* Availability tint */
.badge-availability-out {
	background: var(--grey-800);
}

/* Hero panel on phones: our headline words run longer than the demo's —
   scale the emphasized line so it never clips the panel */
@media (max-width: 575px) {
	.bg-color-grey h2 .custom-font-size-2 {
		font-size: 1em !important;
	}
}

/* Tiny screens: drop the topbar phone entirely (WhatsApp float remains) */
@media (max-width: 379px) {
	.header-top ul.list-inline > li:first-child {
		display: none;
	}
}

/* Compact topbar ribbon on phones (our labels run longer than the demo's) */
@media (max-width: 575px) {
	.header-top .custom-svg-btn-style-1.custom-svg-btn-style-1-small {
		padding: 14px 18px 14px 14px;
		font-size: 0.7rem;
	}

	.header-top .custom-svg-btn-style-1-small .custom-svg-btn-arrow {
		display: none;
	}
}

/* ============================================================
   Embla carousels in Porto owl clothing
   ============================================================ */
.embla-multi__container {
	margin-left: -20px;
}

.embla-multi__slide {
	flex: 0 0 100%;
	min-width: 0;
	padding-left: 20px;
}

@media (min-width: 476px) {
	.embla-multi__slide {
		flex-basis: 50%;
	}
}

@media (min-width: 992px) {
	.embla-multi:not(.embla-multi--two) .embla-multi__slide {
		flex-basis: 33.3333%;
	}
}

@media (min-width: 1200px) {
	.embla-multi:not(.embla-multi--two) .embla-multi__slide {
		flex-basis: 25%;
	}
}

/* Stage margins (Porto stage-margin pattern): cards inset from the container
   edges and the arrows live in the reserved gutters, never over content. */
.embla-multi {
	padding: 0 52px;
}

.embla-multi__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--light);
	color: var(--dark);
	box-shadow: 0 6px 18px rgba(13, 33, 54, 0.18);
	padding: 0;
	cursor: pointer;
	z-index: 2;
	transition: ease all 300ms;
}

.embla-multi__nav:hover {
	background: var(--primary);
	color: var(--light);
}

.embla-multi__nav--prev {
	left: 0;
}

.embla-multi__nav--next {
	right: 0;
}

@media (max-width: 575px) {
	.embla-multi {
		padding: 0 44px;
	}

	.embla-multi__nav {
		width: 38px;
		height: 38px;
	}
}

/* ============================================================
   Floating WhatsApp button
   ============================================================ */
.whatsapp-float {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 1050;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25d366;
	color: #fff !important;
	font-size: 1.7rem;
	box-shadow: 0 8px 24px rgba(13, 33, 54, 0.35);
	transition: ease all 200ms;
}

.whatsapp-float:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(13, 33, 54, 0.45);
	color: #fff;
}