/*!
Theme Name: AuxAL
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: auxal
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

AuxAL is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	appearance: button;
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	appearance: textfield;
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
	margin: 0;
	padding-top: 90px;
	/* Account for fixed header */
	min-height: 100vh;
	display: block;
}

/* Home page has no body padding since sections handle it */
body.home,
body.page-template-page-products {
	padding-top: 0;
	/* Ensure page can scroll beyond sections to show footer */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body.home #page,
body.page-template-page-products #page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	width: 100%;
}

body.home .site-footer,
body.page-template-page-products .site-footer {
	margin-top: 0;
	/* Footer comes after sections, not auto-margin */
}

#primary {
	width: 100%;
	max-width: 100%;
	padding: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Fix contact page layout to prevent white space below footer */
body.page-template-page-contact #primary {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.widget-area {
	display: none;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li>ul,
li>ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

.site {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - 90px);
}

.site-main {
	margin: 0;
	padding: 0;
}

.skip-link {
	display: none;
}

/* (Removed) Former homepage hero section styles */

/* Homepage Content
--------------------------------------------- */
.homepage-content {
	padding: 4em 0;
}

.content-section {
	margin-bottom: 4em;
	text-align: center;
}

.product-placeholder-card {
	margin: 2.5rem auto 0;
	max-width: 640px;
	padding: 2.5rem;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 18px 45px rgba(1, 57, 146, 0.06);
	border: 1px solid rgba(1, 57, 146, 0.12);
}

.product-placeholder-title {
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--aux-blue);
	margin-bottom: 1rem;
}

.product-placeholder-copy {
	font-size: 1.05rem;
	line-height: 1.7;
	color: #425466;
	margin-bottom: 1.5rem;
}

.product-placeholder-link {
	display: inline-block;
	background: var(--aux-blue);
	color: #ffffff;
	padding: 0.85rem 1.75rem;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.25s ease, transform 0.25s ease;
}

.product-placeholder-link:hover,
.product-placeholder-link:focus {
	background: var(--aux-blue-hover);
	transform: translateY(-2px);
}

.homepage-aux-group-bar {
	background: linear-gradient(135deg, rgba(1, 57, 146, 0.95), rgba(1, 88, 186, 0.92));
	color: #ffffff;
	padding: 3.5rem 1.5rem;
	margin: 4rem auto 0;
}

.aux-group-bar-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.aux-group-bar-title {
	font-size: 2.1rem;
	margin-bottom: 1rem;
	font-weight: 700;
}

.aux-group-bar-copy {
	max-width: 760px;
	font-size: 1.1rem;
	line-height: 1.8;
	margin-bottom: 1.75rem;
}

.aux-group-bar-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.95rem 2.25rem;
	border-radius: 999px;
	background: #ffffff;
	color: var(--aux-blue);
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.aux-group-bar-button:hover,
.aux-group-bar-button:focus {
	transform: translateY(-2px);
	box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 768px) {
	.content-section h2 {
		font-size: 2rem;
	}

	.content-section p {
		font-size: 1rem;
	}

	.product-placeholder-card {
		padding: 2rem;
	}

	.product-placeholder-title {
		font-size: 1.5rem;
	}

	.aux-group-bar-title {
		font-size: 1.8rem;
	}

	.aux-group-bar-copy {
		font-size: 1rem;
	}
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Header
--------------------------------------------- */
.site-header {
	background: #ffffff;
	border-bottom: 1px solid #e0e0e0;
	padding: 1.5em 0;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	min-height: 90px;
}

.nav-logo {
	margin-right: 0;
	display: flex;
	align-items: center;
}

.nav-logo .logo-image {
	max-height: 60px;
	width: auto;
	display: block;
}

@media screen and (max-width: 37.4em) {
	.main-navigation {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 1em;
		padding-right: 1em;
	}

	.nav-logo {
		display: flex;
		align-items: center;
	}

	.nav-logo .logo-image {
		max-height: 40px;
		display: block;
	}

	.menu-toggle {
		display: flex;
		align-items: center;
	}
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
	position: static;
	/* do not absolutely position by default */
}

/* Base submenu rules removed - desktop #primary-menu rules handle dropdowns */

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
	color: #333333;
	font-weight: 500;
	transition: color 0.3s ease;
}

.main-navigation a:hover,
.main-navigation a:focus {
	color: #4169e1;
}

/* Small menu. */
.menu-toggle {
	display: flex;
	background: transparent;
	border: none;
	color: #333;
	padding: 0.5em;
	cursor: pointer;
	font-size: 1rem;
	margin-left: auto;
	align-items: center;
	justify-content: center;
}

.menu-toggle:hover,
.menu-toggle:focus {
	background: #f5f5f5;
	border-radius: 4px;
}

.hamburger-icon {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 24px;
	height: 18px;
}

.hamburger-icon span {
	display: block;
	height: 3px;
	width: 100%;
	background-color: #333;
	border-radius: 2px;
	transition: all 0.3s ease;
}

.menu-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(1) {
	transform: rotate(45deg) translate(7px, 7px);
}

.menu-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(3) {
	transform: rotate(-45deg) translate(7px, -7px);
}

/* Mobile menu - hidden by default */
.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation.toggled ul ul {
	display: none !important;
	position: static;
	padding-left: 0;
	padding-top: 0.5em;
	background: transparent;
	box-shadow: none;
	border: none;
	margin: 0;
	max-height: none;
	overflow: visible;
}

.main-navigation.toggled ul ul li {
	padding-left: 1.5em;
	background: #f9f9f9;
}

.main-navigation.toggled ul li.menu-item-has-children.open>ul,
.main-navigation.toggled ul li.page_item_has_children.open>ul {
	display: block !important;
}

.main-navigation.toggled ul li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #e0e0e0;
	position: relative;
}

.main-navigation.toggled ul li:last-child {
	border-bottom: none;
}

.main-navigation.toggled ul ul li {
	border-bottom: 1px solid #e5e5e5;
}

.menu-item-wrapper {
	display: contents !important;
}

@media screen and (max-width: 600px) {
	.main-navigation.toggled .menu-item-wrapper {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
}

.main-navigation.toggled ul li a {
	padding: 0.9em 0;
	min-height: 48px;
	display: flex;
	align-items: center;
	flex: 1;
}

.submenu-toggle-arrow {
	display: none !important;
}

@media screen and (max-width: 600px) {
	.main-navigation.toggled .submenu-toggle-arrow {
		padding: 0.9em 1em;
		min-height: 48px;
		min-width: 48px;
		display: flex !important;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		font-size: 0.9em;
		transition: transform 0.3s ease;
		user-select: none;
		color: #013992;
		flex-shrink: 0;
	}
}

@media screen and (max-width: 600px) {
	.main-navigation.toggled ul li.open>.menu-item-wrapper>.submenu-toggle-arrow {
		transform: rotate(180deg);
	}

	.main-navigation.toggled .submenu-toggle-arrow:hover {
		background: #f0f0f0;
		border-radius: 4px;
	}

	.main-navigation.toggled .menu-item-wrapper {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.submenu-toggle-arrow,
	.menu-item-wrapper {
		display: none !important;
	}

	/* Desktop header: align with page content width */
	.main-navigation {
		flex-wrap: nowrap;
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: 1200px;
		margin: 0 auto;
		padding-left: 2em;
		padding-right: 2em;
	}

	/* Desktop: top-level primary menu horizontal on the far right */
	#primary-menu {
		display: flex !important;
		gap: 2.2em;
		align-items: center;
		margin-left: auto;
		position: static !important;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	/* Prevent submenus from inheriting flex */
	#primary-menu ul {
		display: block;
	}

	#primary-menu>li {
		margin: 0;
		position: relative;
	}

	#primary-menu>li>a {
		padding: 0.75em 0.5em;
		margin: 0;
		white-space: nowrap;
		border-radius: 6px;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	#primary-menu>li>a:hover,
	#primary-menu>li>a:focus {
		background-color: #f5f7fb;
	}

	/* First level dropdown - opens to the LEFT to prevent right-side overflow */
	#primary-menu>li>ul {
		display: none;
		position: absolute;
		top: 100%;
		left: auto;
		right: 0;
		min-width: 240px;
		background: #fff;
		border: 1px solid #e5e7eb;
		border-radius: 10px;
		padding: 8px;
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
		z-index: 1000;
	}

	#primary-menu>li:hover>ul,
	#primary-menu>li:focus-within>ul {
		display: block;
	}

	/* Second level (sub-submenu) - opens to the LEFT to prevent overflow */
	#primary-menu>li>ul>li {
		position: relative;
	}

	#primary-menu>li>ul>li>ul {
		display: none;
		position: absolute;
		top: 0;
		left: auto;
		right: 100%;
		margin-right: 6px;
		margin-left: 0;
		min-width: 220px;
		max-width: 320px;
		background: #fff;
		border: 1px solid #e5e7eb;
		border-radius: 8px;
		padding: 8px;
		box-shadow: 0 10px 22px rgba(0, 0, 0, 0.10);
		z-index: 1001;
		white-space: normal;
		word-wrap: break-word;
	}

	#primary-menu>li>ul>li:hover>ul,
	#primary-menu>li>ul>li:focus-within>ul {
		display: block;
	}

	/* Links inside dropdowns */
	#primary-menu ul a {
		display: block;
		padding: 10px 12px;
		border-radius: 6px;
		color: #1f2937;
		font-weight: 500;
	}

	#primary-menu ul a:hover,
	#primary-menu ul a:focus {
		background: #f3f4f6;
		color: #013992;
	}

	/* Desktop: neutralize mobile toggled overlay */
	.main-navigation.toggled #primary-menu {
		display: flex !important;
		position: static !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		width: auto !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		z-index: auto !important;
		transform: none !important;
		transition: none !important;
	}

	.main-navigation ul li a:hover,
	.main-navigation ul li a:focus {
		background-color: #f5f7fb;
	}

	/* Nested submenus (third level) */
	.main-navigation ul ul li {
		position: relative;
	}

	.main-navigation ul ul ul {
		top: 0;
		left: calc(100% - 2px);
		margin-left: 0;
		display: none;
		min-width: 220px;
		z-index: 1001;
		box-shadow: 0 10px 22px rgba(0, 0, 0, 0.10);
	}

	.main-navigation ul ul li:hover>ul,
	.main-navigation ul ul li:focus-within>ul {
		display: block;
	}

	.nav-logo .logo-image {
		max-height: 50px;
	}

	.main-navigation.toggled ul {
		margin-top: 0;
	}
}

/* ============================================
   MOBILE OFF-CANVAS MENU - Opens from LEFT
   Covers all screen sizes where hamburger shows
   ============================================ */
@media screen and (max-width: 599px) {

	/* Mobile drawer - opens from LEFT side */
	.main-navigation.toggled #primary-menu,
	.main-navigation.toggled>ul,
	.main-navigation.toggled ul.nav-menu {
		display: block !important;
		position: fixed !important;
		top: 90px !important;
		left: 0 !important;
		right: auto !important;
		width: 85vw !important;
		max-width: 320px !important;
		height: calc(100vh - 90px) !important;
		max-height: calc(100vh - 90px) !important;
		padding: 1em 1.25em 2em !important;
		margin: 0 !important;
		background: #ffffff !important;
		border-left: none !important;
		border-right: 1px solid #e0e0e0 !important;
		border-bottom: none !important;
		box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15) !important;
		z-index: 99999 !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		transform: none !important;
		transition: none !important;
	}

	/* Hide menu when NOT toggled */
	.main-navigation:not(.toggled) #primary-menu,
	.main-navigation:not(.toggled)>ul,
	.main-navigation:not(.toggled) ul.nav-menu {
		display: none !important;
	}

	/* Menu items styling */
	.main-navigation.toggled ul li {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border-bottom: 1px solid #eee !important;
		float: none !important;
	}

	.main-navigation.toggled ul li a {
		display: block !important;
		padding: 14px 0 !important;
		color: #333 !important;
	}
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.site-main {
	display: block;
	max-width: 1200px;
	margin: 0 auto;
	padding: 4em 2em;
	flex: 1;
}

.site-main article,
.site-main .entry-header,
.site-main .entry-content,
.site-main .entry-footer,
.posts-navigation {
	display: block;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Home landing: full-screen sections with snap */
body.home .site-main.home-landing,
body.page-template-page-products .site-main.home-landing {
	max-width: none;
	padding: 0;
}

/* ============================================================================
   HOME PAGE SCROLL LOCK SYSTEM
   JavaScript-based scroll snapping with natural scrolling
   ============================================================================ */

html {
	scroll-behavior: smooth;
}

body.home,
body.page-template-page-products {
	--header-snap-offset: 90px;
	/* NO CSS scroll-snap - JavaScript handles all snapping logic */
	overflow-y: scroll;
	overflow-x: hidden;
	/* Allow scrolling past sections to reach footer */
	min-height: 100vh;
	height: auto;
}

/* Scroll lock disabled state - fallback to normal scrolling */
body.home.scroll-lock-disabled {
	scroll-behavior: auto;
}

/* Ensure home landing allows footer to be visible */
.home-landing {
	min-height: auto;
	flex-shrink: 0;
	/* Don't shrink the main content */
}

/* Each section is full viewport, but container allows scrolling beyond */
body.home #primary,
body.page-template-page-products #primary {
	flex: 0 0 auto;
	/* Don't flex, let content determine height */
}

/* Touch and scroll behavior optimization */
.home-landing .snap-section {
	touch-action: pan-y;
	/* Allow natural vertical scrolling */
	-webkit-overflow-scrolling: touch;
	/* Smooth scrolling on iOS */
}

/* Focus management for accessibility */
.home-landing .snap-section:focus-visible {
	outline: 2px solid #007cba;
	outline-offset: -2px;
}

/* Better handling for reduced motion */
@media (prefers-reduced-motion: reduce) {

	html,
	body.home,
	body.page-template-page-products {
		scroll-behavior: auto !important;
	}
}

body.home.header-hidden,
body.page-template-page-products.header-hidden {
	--header-snap-offset: 0px;
}

.home-landing {
	position: relative;
	width: 100%;
}

.home-landing .snap-section {
	position: relative;
	min-height: calc(var(--vh, 1vh) * 100);
	height: calc(var(--vh, 1vh) * 100);
	width: 100%;
	/* NO scroll-snap CSS - JavaScript handles snapping */
	overflow: hidden;
}

/* Last section should allow scrolling past it to footer */
.home-landing .snap-section:last-child {
	margin-bottom: 0;
	/* Footer immediately follows */
	scroll-snap-align: start;
}

/* Make footer explicitly outside scroll-snap */
body.home .site-footer,
body.page-template-page-products .site-footer {
	scroll-snap-align: none;
	scroll-snap-stop: normal;
	position: relative;
	z-index: 10;
}

/* Footer scroll trigger - invisible snap point that allows accessing footer */
.footer-scroll-trigger {
	height: 1px;
	scroll-snap-align: start;
	scroll-snap-stop: normal;
	visibility: hidden;
	pointer-events: none;
}

/* Horizontal hero wheel */
.home-landing .home-hero-section {
	background: #000;
}

.hero-wheel {
	height: 100%;
	width: 100%;
	display: block;
}

/* Hero + scroll wheel wrapper */
.home-hero-group {
	display: flex;
	flex-direction: column;
}

@media (max-width: 768px) {
	.home-hero-group {
		flex-direction: column-reverse;
	}
}

.hero-slides {
	display: flex;
	height: 100%;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

.hero-slides::-webkit-scrollbar {
	display: none;
}

.hero-slide {
	flex: 0 0 100vw;
	height: 100%;
	background-size: 100% auto;
	/* default: show full-width artwork on large screens */
	background-position: center;
	background-repeat: no-repeat;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	position: relative;
	/* Ensure overlays position relative to slide */
}

@media (max-width: 768px) {
	.hero-slide {
		background-size: cover;
	}
}

/* Background image snap sections */
.bg-section {
	background-size: cover;
	/* fill viewport while preserving aspect */
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	/* Ensure overlays position relative to section */
}

/* Smooth scrolling for reduced motion users */
@media (prefers-reduced-motion: reduce) {

	html,
	body.home,
	body.page-template-page-products,
	.snap-section {
		scroll-behavior: auto !important;
	}
}

/* AC Hero overlay - centered */
.ac-hero-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	max-width: 458px;
	max-height: 54vh;
	height: auto;
	z-index: 15;
	opacity: 0.95;
	transition: opacity 0.3s ease, transform 0.3s ease;
	object-fit: contain;
}

/* Fix for C-Pro Grey - ensure it matches size of other ACs */
.hero-slide img[src*="01_C-PRO_GREY"] {
	min-width: 400px;
	max-width: 550px;
}

/* Make Multi system (830.webp) bigger */
#multi .ac-hero-overlay {
	max-width: 1100px;
	max-height: 85vh;
	top: 45%;
}

/* Make ARV section image bigger */
#arv .ac-hero-overlay {
	max-width: 650px;
	max-height: 75vh;
}

.ac-hero-overlay:hover {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1.02);
}

/* Dual products layout - side by side */
.dual-products {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 1400px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 60px;
	z-index: 15;
}

.dual-products .ac-hero-overlay {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	max-width: 500px;
	flex: 1;
}

.dual-products .ac-hero-overlay.left {
	margin-right: auto;
}

.dual-products .ac-hero-overlay.right {
	margin-left: auto;
}

.dual-products .ac-hero-overlay:hover {
	transform: scale(1.02);
}

/* Eco+ overlay */
.eco-overlay {
	position: absolute;
	bottom: -40px;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	max-width: 490px;
	height: auto;
	z-index: 10;
	opacity: 0.9;
	transition: opacity 0.3s ease;
	pointer-events: none;
	will-change: transform;
}

.eco-overlay:hover {
	opacity: 1;
}

/* Hero CTA Button - positioned between AC and Eco+ */
.hero-cta-button {
	position: absolute;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	background: rgba(248, 249, 250, 0.95);
	color: #2c3a54;
	text-decoration: none;
	border-radius: 50px;
	font-size: 1.1rem;
	font-weight: 600;
	font-family: 'Poppins', sans-serif;
	z-index: 12;
	border: 2px solid rgba(255, 255, 255, 0.8);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
	letter-spacing: 0.3px;
	backdrop-filter: blur(8px);
}

.hero-cta-button:hover {
	transform: translateX(-50%) translateY(-3px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
	background: rgba(255, 255, 255, 1);
	border-color: rgba(255, 255, 255, 1);
	color: #1f2937;
}

.hero-cta-button:active {
	transform: translateX(-50%) translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Responsive */
@media (max-width: 768px) {
	.hero-cta-button {
		bottom: 60px;
		padding: 12px 28px;
		font-size: 1rem;
	}
}

@media (max-width: 480px) {
	.hero-cta-button {
		bottom: 50px;
		padding: 11px 24px;
		font-size: 0.95rem;
	}
}

/* Responsive AC Hero overlay */
@media (max-width: 768px) {
	.ac-hero-overlay {
		max-width: 400px;
		max-height: 70vh;
	}

	/* Make Multi system way bigger on tablet */
	#multi .ac-hero-overlay {
		max-width: 700px;
		max-height: 80vh;
		top: 42%;
	}

	/* ARV section bigger on tablet */
	#arv .ac-hero-overlay {
		max-width: 500px;
		max-height: 72vh;
	}
}

@media (max-width: 480px) {
	.ac-hero-overlay {
		max-width: 320px;
		max-height: 65vh;
	}

	/* Make Multi system way bigger on mobile */
	#multi .ac-hero-overlay {
		max-width: 600px;
		max-height: 75vh;
		top: 40%;
	}

	/* ARV section bigger on mobile */
	#arv .ac-hero-overlay {
		max-width: 420px;
		max-height: 68vh;
	}
}

/* Responsive Eco+ overlay */
@media (max-width: 768px) {
	.eco-overlay {
		max-width: 250px;
		bottom: -30px;
	}
}

@media (max-width: 480px) {
	.eco-overlay {
		max-width: 360px;
		bottom: -40px;
	}
}

/* Hero controls */
.hero-controls {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1rem;
	pointer-events: none;
	/* let slides receive scroll/swipe */
}

.hero-nav {
	pointer-events: all;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	border: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 22px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease;
}

.hero-nav:hover,
.hero-nav:focus {
	background: rgba(0, 0, 0, 0.65);
	outline: none;
}

/* Header hide after hero scrolling */
.site-header {
	transition: transform 0.25s ease;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
}

body.header-hidden .site-header {
	transform: translateY(-100%);
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* Contact Page Styles
--------------------------------------------- */

/* Color Variables */
:root {
	--aux-blue: #013992;
	--aux-blue-hover: #012a7a;
	--aux-orange: #ff6b35;
	--charcoal-grey: #333333;
	--light-grey: #f8f9fa;
	--medium-grey: #e9ecef;
	--dark-grey: #495057;
}

/* Typography */

/* Contact Page Layout */
.contact-page-wrapper {
	background-color: transparent;
	padding: 0;
	margin: 0;
	min-height: 100%;
}

/* Contact Header */
.contact-header {
	background-color: #f5f7fb;
	padding: 2.5rem 0;
	text-align: center;
	border-bottom: 1px solid #dce2ef;
}

.contact-header-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

.contact-main-title {
	font-size: 2.75rem;
	font-weight: 700;
	color: var(--aux-blue);
	margin-bottom: 1.25rem;
	line-height: 1.15;
	letter-spacing: -0.5px;
}

.contact-intro {
	font-size: 1.1rem;
	line-height: 1.65;
	color: #4a5772;
	max-width: 720px;
	margin: 0 auto;
	font-weight: 400;
}

/* Contact Content */
.contact-content {
	padding: 2.5rem 0;
	background-color: #f9fbff;
}

.contact-content-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 3rem;
	align-items: start;
}

/* Contact Form Section */
.contact-form-section {
	padding: 2.25rem;
	background-color: #ffffff;
	border-radius: 10px;
	border: 1px solid #d7dce5;
	box-shadow: none;
}

.contact-form-title {
	font-size: 1.9rem;
	color: #1f2b46;
	margin-bottom: 1.5rem;
	text-align: left;
}

.contact-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	max-width: 100%;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.form-group label {
	font-weight: 600;
	color: #2c3a54;
	font-size: 0.95rem;
}

.form-group .optional {
	font-weight: 400;
	color: #7a869f;
	font-size: 0.85rem;
}

.form-group input,
.form-group select,
.form-group textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid #c4cad8;
	border-radius: 6px;
	font-size: 1rem;
	background-color: #fdfefe;
	font-family: 'Lato', sans-serif;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	outline: none;
	border-color: var(--aux-orange);
	box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.18);
}

.form-group textarea {
	resize: vertical;
	min-height: 140px;
}

.form-group input.error,
.form-group select.error,
.form-group textarea.error {
	border-color: #d93025;
	box-shadow: 0 0 0 1px rgba(217, 48, 37, 0.25);
}

.form-group select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1rem;
	padding-right: 3rem;
	appearance: none;
}

/* Contact Submit Button */
.contact-submit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: auto;
	min-width: 0;
	background: linear-gradient(135deg, var(--aux-orange), #ff7f44);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 0.85rem 1.9rem;
	border-radius: 999px;
	font-size: 1.05rem;
	font-weight: 600;
	font-family: 'Poppins', sans-serif;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	letter-spacing: 0.28px;
	align-self: flex-start;
	margin-top: 0.5rem;
}

.contact-submit-btn:hover {
	background: linear-gradient(135deg, #ff824f, #ff6b35);
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(255, 107, 53, 0.28);
}

.contact-submit-btn:active {
	transform: translateY(0);
	box-shadow: none;
}

.contact-submit-btn:focus-visible {
	outline: 3px solid rgba(255, 107, 53, 0.35);
	outline-offset: 2px;
}

.form-success {
	text-align: center;
	padding: 1.75rem;
	background-color: #f0f9f4;
	border: 1px solid #c6e7d3;
	border-radius: 10px;
	margin-top: 1.75rem;
}

.success-icon {
	font-size: 2.5rem;
	color: #2f855a;
	margin-bottom: 0.75rem;
}

.form-success p {
	font-size: 1.05rem;
	color: #276749;
	margin: 0;
	font-weight: 600;
}

/* Contact Info Section */
.contact-info-section {
	padding: 2.25rem;
	background-color: #ffffff;
	border-radius: 10px;
	border: 1px solid #d7dce5;
	box-shadow: none;
}

/* Contact Map */
.contact-map {
	margin-bottom: 2rem;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #d7dce5;
}

.contact-map iframe {
	width: 100%;
	height: 300px;
	border: none;
}

/* Contact Details */
.contact-details {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.contact-item {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 1.1rem 1.25rem;
	background-color: #f5f7fb;
	border-radius: 10px;
	border: 1px solid #e2e7f3;
	box-shadow: none;
}

.contact-icon {
	font-size: 1.35rem;
	min-width: 1.35rem;
	text-align: center;
	color: #4a5772;
}

.contact-text {
	flex: 1;
	font-size: 0.95rem;
	line-height: 1.55;
	color: #2c3a54;
}

.contact-text strong {
	color: #1f2b46;
	font-weight: 700;
	margin-bottom: 0.2rem;
	display: block;
}

.contact-text a {
	color: var(--aux-orange);
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
}

.contact-text a:hover {
	color: #ff824f;
	text-decoration: none;
}

/*--------------------------------------------------------------
# Front Page
--------------------------------------------------------------*/

.auxal-home {
	background-color: #ffffff;
}

.auxal-home section {
	position: relative;
}

.auxal-section-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.auxal-top-hero {
	min-height: 450px;
	display: flex;
	align-items: flex-start;
	padding: 0;
	margin-top: 90px;
	background: linear-gradient(90deg, #e6edf4 0%, #f3f7fb 65%, #f9fbfe 100%);
	color: #102848;
	overflow: visible;
	position: relative;
}

.auxal-top-hero .auxal-section-inner {
	margin: 0;
	padding: 0;
	max-width: none;
}

.auxal-top-hero__heading {
	position: relative;
	z-index: 10;
	max-width: 520px;
	padding: 80px 24px 80px;
	margin-left: 200px;
}

.auxal-top-hero__eyebrow {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.05rem;
	text-transform: uppercase;
	margin-bottom: 20px;
	color: #0a1f40;
}

.auxal-top-hero__heading h1 {
	font-family: 'Poppins', sans-serif;
	font-size: clamp(2.4rem, 4vw, 3.6rem);
	line-height: 1.1;
	margin: 0;
	text-transform: uppercase;
	color: #013992;
}

.auxal-top-hero__loop {
	position: absolute;
	top: 0;
	right: 0;
	left: auto;
	transform: none;
	width: 50%;
	height: 450px;
	overflow: hidden;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	clip-path: polygon(85px 0, 100% 0, 100% 100%, 0 100%);
	-webkit-clip-path: polygon(85px 0, 100% 0, 100% 100%, 0 100%);
}

.auxal-top-hero__loop-track {
	display: flex;
	height: 100%;
	animation: auxalHeroLoop 48s linear infinite;
	animation-play-state: running;
	will-change: transform;
	-webkit-animation: auxalHeroLoop 48s linear infinite;
	-webkit-animation-play-state: running;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.auxal-top-hero__loop-unit {
	flex-shrink: 0;
	height: 100%;
	margin-left: -2px;
}

.auxal-top-hero__loop-unit img {
	display: block;
	height: 100%;
	width: auto;
	max-width: none;
	object-fit: cover;
}

/* Tablet and smaller devices - make animation work better */
@media (max-width: 1024px) {
	.auxal-top-hero {
		min-height: 380px;
	}

	.auxal-top-hero__heading {
		margin-left: 80px;
		max-width: 450px;
		padding: 60px 20px 60px;
	}

	.auxal-top-hero__loop {
		width: 55%;
		height: 380px;
		clip-path: polygon(60px 0, 100% 0, 100% 100%, 0 100%);
		-webkit-clip-path: polygon(60px 0, 100% 0, 100% 100%, 0 100%);
	}
}

/* Medium phones and landscape - prevent title overlap */
@media (max-width: 820px) {
	.auxal-top-hero {
		min-height: 320px;
		flex-direction: column;
	}

	.auxal-top-hero__heading {
		margin-left: 40px;
		max-width: 100%;
		padding: 50px 20px 40px;
		z-index: 10;
	}

	.auxal-top-hero__heading h1 {
		font-size: clamp(2rem, 5vw, 2.8rem);
		text-shadow: 0 2px 8px rgba(255, 255, 255, 0.8);
	}

	.auxal-top-hero__eyebrow {
		text-shadow: 0 1px 4px rgba(255, 255, 255, 0.6);
	}

	.auxal-top-hero__loop {
		width: 60%;
		height: 320px;
		clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%);
		-webkit-clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%);
	}
}

/* Mobile devices - stack layout and ensure animation always visible */
@media (max-width: 640px) {
	.auxal-top-hero {
		min-height: 500px;
		display: block;
		padding-bottom: 0;
	}

	.auxal-top-hero__heading {
		margin-left: 0;
		max-width: 100%;
		padding: 40px 24px 30px;
		text-align: center;
		background: linear-gradient(180deg, rgba(230, 237, 244, 0.98) 0%, rgba(230, 237, 244, 0.85) 100%);
	}

	.auxal-top-hero__heading h1 {
		font-size: clamp(1.8rem, 6vw, 2.4rem);
		text-shadow: 0 2px 8px rgba(255, 255, 255, 0.9);
	}

	.auxal-top-hero__eyebrow {
		font-size: 0.75rem;
		letter-spacing: 0;
	}

	.auxal-top-hero__loop {
		position: relative;
		width: 100%;
		height: 280px;
		top: auto;
		right: auto;
		left: 0;
		clip-path: none;
		-webkit-clip-path: none;
		margin-top: 0;
	}

	.auxal-top-hero__loop-track {
		animation: auxalHeroLoop 120s linear infinite;
		-webkit-animation: auxalHeroLoop 120s linear infinite;
	}
}

/* iPhone SE and smaller screens */
@media (max-width: 480px) {
	.auxal-top-hero {
		min-height: 440px;
		margin-top: 90px;
	}

	.auxal-top-hero__heading {
		padding: 32px 20px 24px;
	}

	.auxal-top-hero__heading h1 {
		font-size: 1.6rem;
		line-height: 1.2;
	}

	.auxal-top-hero__eyebrow {
		font-size: 0.7rem;
		letter-spacing: 0;
		margin-bottom: 14px;
	}

	.auxal-top-hero__loop {
		height: 240px;
	}

	.auxal-top-hero__loop-track {
		animation: auxalHeroLoop 100s linear infinite;
		-webkit-animation: auxalHeroLoop 100s linear infinite;
	}
}

/* Very small phones */
@media (max-width: 375px) {
	.auxal-top-hero {
		min-height: 400px;
	}

	.auxal-top-hero__heading {
		padding: 28px 16px 20px;
	}

	.auxal-top-hero__heading h1 {
		font-size: 1.4rem;
	}

	.auxal-top-hero__loop {
		height: 220px;
	}
}

/* Landscape orientation on phones - adjust to prevent squishing */
@media (max-width: 900px) and (max-height: 500px) {
	.auxal-top-hero {
		min-height: 380px;
	}

	.auxal-top-hero__heading {
		padding: 30px 20px 20px;
	}

	.auxal-top-hero__heading h1 {
		font-size: 1.6rem;
	}

	.auxal-top-hero__loop {
		height: 200px;
		position: relative;
	}
}

@keyframes auxalHeroLoop {
	0% {
		transform: translateX(0%);
	}

	100% {
		transform: translateX(-50%);
	}
}

@-webkit-keyframes auxalHeroLoop {
	0% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
	}

	100% {
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

.auxal-discover {
	padding: 80px 0;
	background-color: #ffffff;
}

.auxal-section-heading {
	text-align: center;
	margin-bottom: 48px;
}

.auxal-section-heading h2 {
	font-size: clamp(2rem, 3vw, 2.6rem);
	font-weight: 700;
	color: #102848;
	margin-bottom: 14px;
}

.auxal-section-subheading {
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	color: #4a5d78;
	margin: 0;
}

.auxal-brand-banner {
	display: block;
	background: transparent;
	color: #ffffff;
	border-radius: 0;
	padding: 80px 50px;
	min-height: 400px;
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 24px 45px rgba(16, 40, 72, 0.18);
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

.auxal-brand-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 1;
	background: url('assets/images/company/Auxcompany2.webp') center/cover no-repeat;
	z-index: 0;
}

.auxal-brand-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(2, 6, 18, 0.68) 0%, rgba(3, 9, 28, 0.5) 38%, rgba(3, 9, 28, 0.08) 68%, rgba(3, 9, 28, 0) 85%);
	z-index: 1;
	pointer-events: none;
}

.auxal-brand-banner__content {
	position: relative;
	z-index: 2;
	max-width: 580px;
	padding: 0;
}

.auxal-brand-banner h3 {
	color: #ffffff;
	font-size: 2.6rem;
	letter-spacing: 0.04em;
	margin: 0 0 18px;
}

.auxal-brand-banner p {
	color: #f5f8ff;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.9;
	margin: 0 0 28px;
}

.auxal-brand-banner h3,
.auxal-brand-banner p {
	text-shadow: none;
	margin-left: 0;
	display: block;
	padding: 0;
	background: none;
}

.auxal-brand-banner__cta {
	background: #050505;
	color: #ffffff;
	padding: 15px 30px;
	border-radius: 0;
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
	font-weight: 700;
	letter-spacing: 0.12rem;
	text-transform: uppercase;
	border: 1px solid rgba(255, 255, 255, 0.2);
	display: inline-flex;
	align-items: center;
	gap: 12px;
	transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

.auxal-brand-banner__cta::after {
	color: currentColor;
}

/* Keep hero CTA text color consistent, including after Safari bfcache */
.auxal-brand-banner:link,
.auxal-brand-banner:visited,
.auxal-brand-banner:active,
.auxal-brand-banner:focus {
	color: #ffffff;
}

.auxal-button-link:link,
.auxal-button-link:visited,
.auxal-button-link:active,
.auxal-button-link:focus {
	color: currentColor;
}

.auxal-button-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02rem;
	font-size: 0.85rem;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.25s ease;
}

.auxal-button-link::after {
	content: '\2192';
	font-size: 1rem;
}

/* Only apply hover effects on devices that support hover (not touch screens) */
@media (hover: hover) and (pointer: fine) {
	.auxal-brand-banner:hover {
		transform: translateY(-6px);
		box-shadow: 0 28px 60px rgba(16, 40, 72, 0.22);
	}

	.auxal-brand-banner:hover .auxal-button-link {
		opacity: 1;
	}

	.auxal-brand-banner:hover .auxal-brand-banner__cta {
		transform: translateY(-4px);
		box-shadow: 0 40px 65px rgba(0, 0, 0, 0.45);
	}
}

/* On touch devices, prevent hover states and use brief active state */
@media (hover: none) {

	/* Remove any lingering hover effects on touch devices */
	.auxal-brand-banner:hover {
		transform: none;
		box-shadow: 0 24px 45px rgba(16, 40, 72, 0.18);
	}

	/* Brief active state for touch feedback */
	.auxal-brand-banner:active {
		transform: translateY(-2px);
		box-shadow: 0 20px 50px rgba(16, 40, 72, 0.20);
		transition: transform 0.1s ease, box-shadow 0.1s ease;
	}

	.auxal-brand-banner:active .auxal-brand-banner__cta {
		transform: translateY(-2px);
	}
}

.auxal-discover-grid {
	margin-top: 48px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 28px;
}

.auxal-discover-card {
	border-radius: 0;
	background-color: #ffffff;
	box-shadow: 0 18px 40px rgba(20, 41, 68, 0.12);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.auxal-discover-card__image img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.auxal-discover-card__body {
	padding: 26px 28px 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.auxal-discover-card__body h3 {
	font-size: 1.3rem;
	margin: 0;
	color: #12294b;
	font-weight: 700;
}

.auxal-discover-card__body p {
	margin: 0;
	color: #4a5d78;
	font-size: 0.98rem;
	line-height: 1.6;
}

.auxal-discover-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 26px 55px rgba(20, 41, 68, 0.18);
}

.auxal-products {
	padding: 90px 0;
	background-color: #f4f7fb;
}

.auxal-products__highlight {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 32px;
	padding: 38px 42px;
	background: #ffffff;
	border-radius: 0;
	box-shadow: 0 22px 48px rgba(16, 40, 72, 0.14);
	margin-bottom: 60px;
}

.auxal-products__heading {
	max-width: 520px;
}

.auxal-products__heading h3 {
	margin: 0 0 18px;
	font-size: 1.6rem;
	font-weight: 700;
}

.auxal-products__heading h3 a {
	color: #12294b;
	text-decoration: none;
}

.auxal-products__heading p {
	margin: 0 0 22px;
	color: #4a5d78;
	font-size: 1rem;
	line-height: 1.6;
}

.auxal-products__icons {
	display: flex;
	align-items: center;
	gap: 22px;
}

.auxal-products__icons img {
	width: 120px;
	height: auto;
}

.auxal-products__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
}

.auxal-products__list li {
	background: #ffffff;
	border-radius: 0;
	padding: 28px;
	box-shadow: 0 14px 34px rgba(16, 40, 72, 0.12);
}

.auxal-products__list h4 {
	margin: 0 0 12px;
	font-size: 1.15rem;
	color: #12294b;
}

.auxal-products__list p {
	margin: 0;
	color: #4a5d78;
	font-size: 0.95rem;
	line-height: 1.6;
}

/* Commercial Solutions Section
--------------------------------------------- */
.auxal-commercial {
	padding: 100px 0;
	background-color: #ffffff;
}

.auxal-commercial__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

.auxal-commercial__image {
	position: relative;
	border-radius: 0;
	overflow: hidden;
	box-shadow: 0 30px 60px rgba(16, 40, 72, 0.15);
}

.auxal-commercial__image img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 4/3;
	object-fit: cover;
}

.auxal-commercial__content {
	padding: 20px 0;
}

.auxal-eyebrow {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #0066cc;
	margin-bottom: 16px;
}

.auxal-commercial__content h2 {
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	font-weight: 700;
	color: #102848;
	margin: 0 0 20px;
	line-height: 1.2;
}

.auxal-commercial__content>p {
	font-size: 1.05rem;
	color: #4a5d78;
	line-height: 1.7;
	margin: 0 0 28px;
}

.auxal-commercial__features {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.auxal-commercial__features li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.95rem;
	color: #12294b;
	font-weight: 500;
}

.auxal-feature-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.auxal-feature-icon svg {
	width: 20px;
	height: 20px;
	color: #0066cc;
}

.auxal-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	font-size: 0.9rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	border-radius: 0;
	transition: all 0.3s ease;
	cursor: pointer;
	border: none;
}

.auxal-button--primary {
	background-color: #0066cc;
	color: #ffffff;
	box-shadow: 0 8px 24px rgba(0, 102, 204, 0.25);
}

.auxal-button--primary:hover {
	background-color: #0052a3;
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(0, 102, 204, 0.35);
}

.auxal-button--secondary {
	background-color: transparent;
	color: #0066cc;
	border: 2px solid #0066cc;
}

.auxal-button--secondary:hover {
	background-color: #0066cc;
	color: #ffffff;
}

/* Technology Section
--------------------------------------------- */
.auxal-technology {
	padding: 100px 0;
	background-color: #f4f7fb;
}

.auxal-technology__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

.auxal-tech-card {
	background: #ffffff;
	padding: 36px 28px;
	text-align: center;
	box-shadow: 0 16px 40px rgba(16, 40, 72, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.auxal-tech-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 50px rgba(16, 40, 72, 0.16);
}

.auxal-tech-card__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #e8f4ff 0%, #d0e8ff 100%);
	border-radius: 50%;
}

.auxal-tech-card__icon svg {
	width: 32px;
	height: 32px;
	color: #0066cc;
}

.auxal-tech-card h3 {
	font-size: 1.15rem;
	font-weight: 700;
	color: #102848;
	margin: 0 0 14px;
}

.auxal-tech-card p {
	font-size: 0.92rem;
	color: #4a5d78;
	line-height: 1.6;
	margin: 0;
}

/* Why Choose Us Section
--------------------------------------------- */
.auxal-why-us {
	padding: 100px 0;
	background-color: #ffffff;
}

.auxal-why-us__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

.auxal-why-us__content {
	padding: 20px 0;
}

.auxal-why-us__content h2 {
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	font-weight: 700;
	color: #102848;
	margin: 0 0 20px;
	line-height: 1.2;
}

.auxal-why-us__content>p {
	font-size: 1.05rem;
	color: #4a5d78;
	line-height: 1.7;
	margin: 0 0 36px;
}

.auxal-stats-row {
	display: flex;
	gap: 40px;
	margin-bottom: 32px;
}

.auxal-stat {
	text-align: center;
}

.auxal-stat__number {
	display: block;
	font-size: 2.8rem;
	font-weight: 800;
	color: #0066cc;
	line-height: 1;
	margin-bottom: 8px;
}

.auxal-stat__label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: #4a5d78;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.auxal-certifications {
	display: flex;
	gap: 24px;
	align-items: center;
}

.auxal-certifications img {
	height: 60px;
	width: auto;
	filter: grayscale(20%);
	transition: filter 0.3s ease;
}

.auxal-certifications img:hover {
	filter: grayscale(0%);
}

.auxal-why-us__image {
	position: relative;
	border-radius: 0;
	overflow: hidden;
	box-shadow: 0 30px 60px rgba(16, 40, 72, 0.15);
}

.auxal-why-us__image img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 4/3;
	object-fit: cover;
}

/* Call to Action Section
--------------------------------------------- */
.auxal-cta {
	padding: 100px 0;
	background: linear-gradient(135deg, #102848 0%, #0a1929 100%);
}

.auxal-cta__card {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 60px;
	text-align: center;
}

.auxal-cta__content h2 {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 20px;
}

.auxal-cta__content>p {
	font-size: 1.1rem;
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.7;
	max-width: 640px;
	margin: 0 auto 32px;
}

.auxal-cta__features {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 32px;
	margin-bottom: 40px;
}

.auxal-cta__features span {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.95rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
}

.auxal-cta__features svg {
	width: 20px;
	height: 20px;
	color: #4CAF50;
}

.auxal-cta__actions {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.auxal-cta .auxal-button--primary {
	background-color: #ffffff;
	color: #102848;
}

.auxal-cta .auxal-button--primary:hover {
	background-color: #f0f4f8;
}

.auxal-cta .auxal-button--secondary {
	border-color: rgba(255, 255, 255, 0.5);
	color: #ffffff;
}

.auxal-cta .auxal-button--secondary:hover {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: #ffffff;
}

/* Homepage Responsive Styles
--------------------------------------------- */
@media (max-width: 1024px) {

	.auxal-commercial__grid,
	.auxal-why-us__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.auxal-technology__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.auxal-commercial__image,
	.auxal-why-us__image {
		order: -1;
	}
}

@media (max-width: 768px) {

	.auxal-commercial,
	.auxal-technology,
	.auxal-why-us,
	.auxal-cta {
		padding: 70px 0;
	}

	.auxal-commercial__features {
		grid-template-columns: 1fr;
	}

	.auxal-stats-row {
		gap: 24px;
	}

	.auxal-stat__number {
		font-size: 2.2rem;
	}

	.auxal-cta__card {
		padding: 40px 24px;
	}

	.auxal-cta__features {
		gap: 20px;
	}
}

@media (max-width: 520px) {
	.auxal-technology__grid {
		grid-template-columns: 1fr;
	}

	.auxal-stats-row {
		flex-wrap: wrap;
		justify-content: center;
	}

	.auxal-certifications {
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.auxal-cta__actions {
		flex-direction: column;
		align-items: center;
	}

	.auxal-cta__actions .auxal-button {
		width: 100%;
		max-width: 280px;
	}
}

@media (max-width: 1024px) {
	.auxal-top-hero {
		min-height: 480px;
		padding: 0;
	}

	.auxal-top-hero__heading {
		padding: 60px 24px 60px 120px;
	}

	.auxal-top-hero__loop {
		width: min(58vw, 500px);
		height: 380px;
		top: 0;
		transform: none;
		clip-path: polygon(70px 0, 100% 0, 100% 100%, 0 100%);
	}

	.auxal-top-hero__loop-track {
		animation-duration: 20s;
	}

	.auxal-brand-banner,
	.auxal-products__highlight {
		padding: 32px;
	}

	.auxal-products__icons img {
		width: 96px;
	}
}

@media (max-width: 768px) {
	.auxal-top-hero {
		min-height: auto;
		padding: 0;
		flex-direction: column;
		justify-content: flex-start;
		overflow: visible;
		position: relative;
	}

	.auxal-top-hero .auxal-section-inner {
		width: 100%;
		position: relative;
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 !important;
		margin: 0 !important;
	}

	.auxal-top-hero__heading {
		width: 100%;
		max-width: none !important;
		text-align: center;
		padding: 80px 20px 40px !important;
		margin: 0 !important;
		margin-left: 0 !important;
		position: relative;
		z-index: 10;
	}

	.auxal-top-hero__heading h1 {
		text-align: center !important;
		margin: 0 auto !important;
		width: 100%;
	}

	.auxal-top-hero__eyebrow {
		text-align: center !important;
		margin: 0 auto !important;
	}

	.auxal-top-hero__loop {
		position: relative;
		top: auto;
		bottom: auto;
		right: auto;
		left: 0;
		transform: none;
		width: 100vw;
		height: 280px;
		margin: 0;
		margin-left: calc(-50vw + 50%);
		clip-path: none !important;
		justify-content: flex-start;
		overflow: hidden;
		z-index: 1;
	}

	.auxal-top-hero__loop-track {
		justify-content: flex-start;
		margin-left: 0;
	}

	.auxal-top-hero__loop-unit {
		margin-left: 0;
	}

	.auxal-top-hero__loop-track {
		animation-duration: 18s;
	}

	.auxal-top-hero__eyebrow {
		letter-spacing: 0.24rem;
	}

	.auxal-section-inner {
		padding: 0 18px;
	}

	.auxal-brand-banner {
		padding: 28px;
	}

	.auxal-brand-banner::before {
		opacity: 0;
		background: none;
	}

	.auxal-brand-banner::after {
		filter: none;
	}

	.auxal-brand-banner h3,
	.auxal-brand-banner p {
		text-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
	}

	.auxal-products__highlight {
		flex-direction: column;
		align-items: flex-start;
	}

	.auxal-products__icons {
		gap: 16px;
	}
}

@media (max-width: 520px) {
	.auxal-top-hero {
		min-height: 420px;
		padding: 0;
	}

	.auxal-top-hero__heading {
		padding: 50px 18px 50px 60px;
	}

	.auxal-top-hero__heading h1 {
		font-size: 2.1rem;
	}

	.auxal-top-hero__loop {
		height: 240px;
		top: 0;
		transform: none;
		clip-path: polygon(70px 0, 100% 0, 100% 100%, 0 100%);
	}

	.auxal-top-hero__loop-track {
		animation-duration: 16s;
	}

	.auxal-discover-card__body {
		padding: 22px;
	}

	.auxal-products__list li {
		padding: 22px;
	}
}

/* Responsive Design */
@media screen and (max-width: 1024px) {
	.contact-grid {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.contact-form-section,
	.contact-info-section {
		padding: 1.5rem;
	}
}

@media screen and (max-width: 768px) {
	.contact-header {
		padding: 2rem 1rem;
	}

	.contact-main-title {
		font-size: 2.5rem;
	}

	.contact-intro {
		font-size: 1.1rem;
	}

	.contact-content {
		padding: 1.5rem 0;
	}

	.contact-content-container {
		padding: 0 1rem;
	}

	.contact-form-title {
		font-size: 1.75rem;
	}

	.contact-submit-btn {
		padding: 0.875rem 1.5rem;
		font-size: 1rem;
	}

	.contact-map iframe {
		height: 250px;
	}

	.contact-item {
		padding: 0.875rem;
		gap: 0.875rem;
	}

	.contact-icon {
		font-size: 1.25rem;
		min-width: 1.25rem;
	}
}

@media screen and (max-width: 480px) {
	.contact-main-title {
		font-size: 2rem;
	}

	.contact-intro {
		font-size: 1rem;
	}

	.form-group input,
	.form-group select,
	.form-group textarea {
		padding: 0.75rem;
		font-size: 0.95rem;
	}

	.contact-submit-btn {
		padding: 0.75rem 1.25rem;
		font-size: 0.95rem;
	}
}

/* (Removed) Former homepage number showcase styles */

/* Footer Styles
--------------------------------------------- */

.site-footer {
	position: relative;
	margin-top: auto;
	flex-shrink: 0;
	background-color: #013992;
	/* Fallback: ensure no white gap shows */
}

.footer-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(1, 57, 146, 0.8);
	z-index: 1;
}

.footer-content {
	position: relative;
	z-index: 2;
	padding: 60px 0 40px;
	background-image: url('assets/images/backgrounds/wdbg.jpg');
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	color: #ffffff;
}

/* Mobile: Remove background image, use solid color */
@media screen and (max-width: 768px) {
	.footer-content {
		background-image: none;
		background-color: #013992;
	}

	.footer-overlay {
		display: none;
	}
}

.footer-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	margin-bottom: 40px;
}

.footer-column {
	min-height: 200px;
}

.footer-brand {
	padding-right: 20px;
}

.footer-logo {
	margin-bottom: 20px;
}

.footer-logo-image {
	max-width: 150px;
	height: auto;
	filter: brightness(0) invert(1);
	/* Make logo white */
}

.footer-description {
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
	margin: 0;
}

.footer-title {
	font-family: 'Poppins', sans-serif;
	font-size: 18px;
	font-weight: 600;
	color: #ffffff;
	margin: 0 0 20px 0;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-links li {
	margin-bottom: 12px;
}

.footer-links a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	transition: color 0.3s ease;
}

.footer-links a:hover {
	color: #ffffff;
}

.contact-info {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.contact-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.9);
}

.contact-label {
	font-weight: 600;
	color: #ffffff;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.contact-item a {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	transition: color 0.3s ease;
}

.contact-item a:hover {
	color: #ffffff;
}

/* Ensure footer contact items don't inherit white background from contact page */
.site-footer .contact-item {
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Footer Bottom Bar */
.footer-bottom {
	background-color: #012a7a;
	/* Slightly darker blue */
	padding: 20px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.copyright {
	margin: 0;
	text-align: center;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	color: #ffffff;
}

/* Tablet Responsive */
@media screen and (max-width: 992px) {
	.footer-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
	}

	.footer-brand {
		grid-column: span 2;
		padding-right: 0;
		text-align: center;
		margin-bottom: 30px;
	}
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
	.footer-content {
		padding: 40px 0 30px;
	}

	.footer-container {
		padding: 0 1.5rem;
	}

	.footer-grid {
		grid-template-columns: 1fr;
		gap: 35px;
		margin-bottom: 30px;
	}

	.footer-brand {
		grid-column: span 1;
		text-align: center;
		margin-bottom: 0;
		padding: 0 1rem;
	}

	.footer-logo {
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
	}

	.footer-logo-image {
		max-width: 140px;
	}

	.footer-description {
		font-size: 14px;
		line-height: 1.5;
		max-width: 300px;
		margin: 0 auto;
		text-align: center;
	}

	.footer-title {
		font-size: 17px;
		margin-bottom: 18px;
		text-align: center;
	}

	.footer-links {
		text-align: center;
	}

	.footer-links li {
		margin-bottom: 14px;
	}

	.footer-links a {
		font-size: 14px;
		display: inline-block;
		padding: 8px 12px;
		border-radius: 6px;
		transition: all 0.3s ease;
		min-height: 44px;
		/* Touch-friendly */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.footer-links a:hover {
		background-color: rgba(255, 255, 255, 0.1);
		transform: translateY(-1px);
	}

	.contact-info {
		text-align: center;
	}

	.contact-item {
		font-size: 14px;
		padding: 12px;
		border-radius: 8px;
		background-color: rgba(255, 255, 255, 0.05);
		margin-bottom: 12px;
		transition: background-color 0.3s ease;
		min-height: 60px;
		/* Touch-friendly */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 4px;
	}

	.contact-item:hover {
		background-color: rgba(255, 255, 255, 0.1);
	}

	.contact-item a {
		color: #ffffff;
		text-decoration: none;
		font-weight: 500;
		padding: 4px 8px;
		border-radius: 4px;
		transition: all 0.3s ease;
		display: inline-block;
		min-height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.contact-item a:hover {
		background-color: rgba(255, 255, 255, 0.15);
		transform: scale(1.02);
	}

	.contact-label {
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		opacity: 0.9;
	}

	.footer-bottom {
		padding: 18px 0;
	}

	.copyright {
		font-size: 13px;
		text-align: center;
		color: #ffffff;
	}
}

/* Extra Small Mobile */
@media screen and (max-width: 480px) {
	.footer-content {
		padding: 35px 0 25px;
	}

	.footer-container {
		padding: 0 1rem;
	}

	.footer-grid {
		gap: 30px;
		margin-bottom: 25px;
	}

	.footer-brand {
		padding: 0 0.5rem;
	}

	.footer-logo-image {
		max-width: 120px;
	}

	.footer-description {
		font-size: 13px;
		max-width: 280px;
	}

	.footer-title {
		font-size: 16px;
		margin-bottom: 16px;
	}

	.footer-links a {
		font-size: 13px;
		padding: 10px 16px;
		min-height: 48px;
	}

	.contact-item {
		font-size: 13px;
		padding: 14px 12px;
		min-height: 70px;
	}

	.contact-item a {
		font-size: 13px;
		min-height: 40px;
		padding: 6px 12px;
	}

	.footer-bottom {
		padding: 16px 0;
	}

	.copyright {
		font-size: 12px;
		color: #ffffff;
	}
}

/* Contact Page Layout Fixes
--------------------------------------------- */

.contact-page-wrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 100%;
}

.contact-content {
	display: flex;
	flex-direction: column;
}

.contact-content-container {
	display: flex;
	flex-direction: column;
}

/*--------------------------------------------------------------
## Contact CTA Section
--------------------------------------------------------------*/
.contact-cta-section {
	background: linear-gradient(135deg, #013992 0%, #0252c1 100%);
	color: #ffffff;
	padding: 80px 0;
	border-top: 3px solid #ffffff;
	position: relative;
	overflow: hidden;
}

.contact-cta-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.contact-cta-content {
	padding: 10px;
}

.contact-cta-content h2 {
	font-size: 2.5rem;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 1.5rem;
	line-height: 1.2;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.contact-cta-content p {
	font-size: 1.2rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 2rem;
	font-weight: 400;
}

.telefono-tani-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: #ffffff;
	color: #013992;
	padding: 18px 32px;
	border-radius: 50px;
	text-decoration: none;
	font-size: 1.2rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	border: 3px solid #ffffff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	cursor: pointer;
	min-height: 60px;
}

.telefono-tani-btn:hover {
	background: #f8f9fa;
	transform: translateY(-3px);
	box-shadow: 0 12px 35px rgba(255, 255, 255, 0.5);
	text-decoration: none;
	color: #012a7a;
}

.telefono-tani-btn:active {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4);
}

.phone-icon {
	font-size: 1.5rem;
	line-height: 1;
}

.cta-subtext {
	font-size: 1rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 2rem;
	font-weight: 500;
	font-style: italic;
}

.contact-cta-image {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
}

.contact-cta-image img {
	max-width: 100%;
	height: auto;
	max-height: 300px;
}

/* Responsive Design for Contact CTA */
@media screen and (max-width: 768px) {
	.contact-cta-section {
		padding: 60px 0;
	}

	.contact-cta-grid {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 0 15px;
	}

	.contact-cta-content {
		padding: 0;
		text-align: center;
	}

	.contact-cta-content h2 {
		font-size: 2rem;
		margin-bottom: 1rem;
	}

	.contact-cta-content p {
		font-size: 1.1rem;
		margin-bottom: 1.5rem;
	}

	.cta-subtext {
		font-size: 0.9rem;
		margin-bottom: 1.5rem;
	}

	.telefono-tani-btn {
		padding: 16px 28px;
		font-size: 1.1rem;
		min-height: 56px;
		animation: none;
		/* Remove animation on mobile for better UX */
	}

	.contact-cta-image img {
		max-height: 200px;
		border-radius: 0;
		box-shadow: none;
		border: none;
	}
}

/*--------------------------------------------------------------
## Home Page About Us Section
--------------------------------------------------------------*/
.aux-group-about {
	padding: 120px 0;
	border-bottom: 2px solid #e0e0e0;
}

.about-grid {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 40px;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	min-height: 400px;
}

.learn-more-btn {
	display: inline-block;
	padding: 14px 32px;
	background-color: #013992;
	color: #ffffff;
	text-decoration: none;
	border-radius: 0;
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	border: 2px solid #013992;
	transition: all 0.3s ease;
	cursor: pointer;
	min-height: 48px;
	box-sizing: border-box;
}

.learn-more-btn:hover,
.learn-more-btn:focus {
	background-color: #012a7a;
	border-color: #012a7a;
	color: #ffffff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(1, 57, 146, 0.3);
}

.learn-more-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(1, 57, 146, 0.2);
}

.about-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 20px;
}

.about-image {
	position: relative;
	height: 400px;
	overflow: hidden;
	border-radius: 8px;
}

.about-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Responsive Behavior */
@media (max-width: 768px) {
	.about-grid {
		grid-template-columns: 1fr;
		gap: 30px;
		padding: 0 15px;
	}

	.about-content {
		padding: 0;
		text-align: center;
	}

	.about-image {
		min-height: 300px;
	}
}

/*--------------------------------------------------------------
# About Page (Rreth Nesh)
--------------------------------------------------------------*/
.about-page {
	background: #ffffff;
	color: #333333;
}

/* About page fonts */
.about-page h1,
.about-page h2,
.about-page h3 {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
}

.about-page p,
.about-page li {
	font-family: 'Lato', sans-serif;
	font-weight: 400;
}

.about-page .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Reveal on scroll */
.reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s ease, transform .6s ease;
}

.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

/* Hero */
.about-hero {
	padding: 96px 0 48px;
	background: #0f2a60;
	border-bottom: 1px solid #e5e7eb;
	position: relative;
	overflow: hidden;
}

.about-hero-bg {
	position: absolute;
	inset: 0;
	background-position: center bottom;
	background-size: cover;
	opacity: 0.4;
}

.about-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(1, 57, 146, 0.55), rgba(1, 57, 146, 0.55));
}

.about-hero .container {
	position: relative;
	z-index: 1;
}

.about-title {
	font-size: 44px;
	line-height: 1.15;
	margin: 0 0 12px;
	letter-spacing: -0.02em;
	color: #ffffff;
	text-align: center;
}

.about-subtitle {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.92);
	margin: 0 auto 22px;
	max-width: 740px;
	text-align: center;
}

.about-hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: center;
	justify-items: center;
}

.about-hero-copy {
	max-width: 820px;
	margin: 0 auto;
}

.about-hero-stats {
	list-style: none;
	padding: 0;
	margin: 20px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	color: rgba(255, 255, 255, 0.9);
	justify-content: center;
}

.about-hero-stats .stat-num {
	font-weight: 700;
	color: #ffffff;
	margin-right: 6px;
}

/* Image placeholder */
.image-placeholder {
	width: 100%;
	padding-top: 56.25%;
	background: repeating-linear-gradient(45deg, rgba(129, 162, 255, .1), rgba(129, 162, 255, .1) 10px, rgba(129, 162, 255, .06) 10px, rgba(129, 162, 255, .06) 20px);
	border: 1px dashed rgba(129, 162, 255, .45);
	border-radius: 12px;
	position: relative;
	overflow: hidden;
}

.image-placeholder.small {
	padding-top: 56%;
	max-width: 220px;
}

.image-placeholder::after {
	content: attr(data-label);
	color: #a6b6d0;
	font-size: 13px;
	position: absolute;
	bottom: 10px;
	right: 12px;
	background: rgba(14, 16, 21, .6);
	padding: 6px 8px;
	border-radius: 6px;
}

/* Stats */
.about-stats {
	padding: 24px 0 12px;
}

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

.stat-card {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 18px;
	box-shadow: none;
}

.stat-card .stat-num {
	font-size: 28px;
	font-weight: 700;
	color: var(--aux-blue, #013992);
}

.stat-card .stat-label {
	margin-top: 6px;
	font-size: 13px;
	color: #6b7280;
	line-height: 1.45;
}

/* Two column sections */
.about-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: center;
	padding: 48px 0;
}

.about-list {
	margin: 12px 0 0;
	padding-left: 18px;
	color: var(--charcoal-grey);
}

.about-quality .about-list {
	color: var(--charcoal-grey);
	font-weight: 500;
}

/* Timeline */
.about-timeline {
	padding: 16px 0 0;
}

.timeline {
	list-style: none;
	margin: 0;
	padding: 0 0 0 18px;
	position: relative;
}

.timeline::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: #e5e7eb;
}

.timeline li {
	position: relative;
	padding: 10px 0 10px 16px;
	color: #374151;
}

.timeline li::before {
	content: "";
	position: absolute;
	left: -2px;
	top: 16px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--aux-blue, #013992);
	box-shadow: none;
}

.tl-year {
	font-weight: 700;
	color: #111827;
	margin-right: 8px;
}

.timeline-header {
	position: relative;
	text-align: center;
	margin: 8px 0 12px;
}

.timeline-header span {
	display: inline-block;
	padding: 6px 12px;
	font-size: 12px;
	letter-spacing: 0.5px;
	font-weight: 600;
	color: var(--aux-blue, #013992);
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
}

/* Modern Timeline Styles */
.about-timeline {
	padding: 80px 0;
	background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.timeline-intro {
	text-align: center;
	margin-bottom: 60px;
}

.timeline-intro h2 {
	font-size: 2.5rem;
	color: var(--aux-blue);
	margin-bottom: 16px;
}

.timeline-subtitle {
	font-size: 1.1rem;
	color: #6b7280;
	max-width: 600px;
	margin: 0 auto;
}

.timeline-container {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
}

.timeline-container::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(to bottom, #013992, #ff6b35);
	transform: translateX(-50%);
	border-radius: 2px;
	z-index: 0;
}

.timeline-item {
	display: flex;
	margin-bottom: 60px;
	position: relative;
	align-items: flex-start;
}

.timeline-item:nth-child(even) {
	flex-direction: row-reverse;
}

.timeline-item:nth-child(even) .timeline-content {
	text-align: right;
}

.timeline-marker {
	flex-shrink: 0;
	position: relative;
	z-index: 5;
	width: 100px;
	height: 100px;
	margin-top: 20px;
}

.timeline-year {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.2rem;
	font-weight: 700;
	color: #ffffff;
	background: var(--aux-blue);
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(1, 57, 146, 0.3);
	z-index: 3;
}

.timeline-dot {
	display: none;
}

.timeline-content {
	flex: 1;
	background: #ffffff;
	padding: 30px;
	border-radius: 12px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
	border: 1px solid #e5e7eb;
	margin: 0 40px;
	position: relative;
	z-index: 1;
}

.timeline-content::before {
	content: "";
	position: absolute;
	top: 40px;
	width: 0;
	height: 0;
	border: 12px solid transparent;
	z-index: 2;
}

.timeline-item:nth-child(odd) .timeline-content::before {
	right: -24px;
	border-left-color: #ffffff;
	border-right: 0;
}

.timeline-item:nth-child(even) .timeline-content::before {
	left: -24px;
	border-right-color: #ffffff;
	border-left: 0;
}

.timeline-content h3 {
	font-size: 1.4rem;
	color: var(--aux-blue);
	margin-bottom: 12px;
	font-weight: 600;
}

.timeline-content p {
	color: #374151;
	line-height: 1.6;
	margin-bottom: 20px;
}

.timeline-stats {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.timeline-stats span {
	display: inline-flex;
	align-items: center;
	font-size: 0.9rem;
	color: #6b7280;
	background: #f3f4f6;
	padding: 6px 12px;
	border-radius: 20px;
	font-weight: 500;
}

/* CTA */
.about-cta {
	padding: 72px 0 104px;
	margin-top: 64px;
	background: var(--aux-blue);
	color: #ffffff;
}

.cta-card {
	max-width: 960px;
	margin: 0 auto;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	display: grid;
	gap: 1.75rem;
	text-align: center;
}

.cta-card.cta-brand {
	color: inherit;
	box-shadow: none;
}

.cta-card.cta-brand h3 {
	margin: 0;
	font-size: 2.15rem;
	line-height: 1.25;
	letter-spacing: -0.4px;
}

.cta-card.cta-brand p {
	margin: 0 auto;
	font-size: 1.08rem;
	line-height: 1.75;
	max-width: 760px;
	color: rgba(255, 255, 255, 0.92);
}

.cta-features {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px 32px;
	margin: 12px 0 0;
}

.cta-features span {
	position: relative;
	display: inline-flex;
	align-items: center;
	font-size: 1rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.88);
	padding: 0;
	background: none;
	border: none;
	backdrop-filter: none;
}

.cta-features span::before {
	content: "\2713";
	font-size: 1.1rem;
	color: #ffcf9f;
	margin-right: 9px;
}

.cta-actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	margin-top: 1.5rem;
	flex-wrap: wrap;
}

.cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.65rem 1.75rem;
	border-radius: 999px;
	font-size: 1.05rem;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.cta-button.primary {
	background: transparent;
	color: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.55);
}

.cta-button.primary:hover {
	color: #ffffff;
	border-color: #ffffff;
}

.cta-button.secondary {
	background: transparent;
	color: rgba(255, 255, 255, 0.88);
	border: none;
}

.cta-button.secondary:hover {
	color: #ffffff;
	text-decoration: underline;
}

/* Awards and gallery */
.badge-row,
.logo-row {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: center;
}

.badge {
	height: 200px;
	width: auto;
	max-width: 260px;
	object-fit: contain;
	transition: transform 0.3s ease;
}

.badge:hover {
	transform: scale(1.05);
}

.about-gallery {
	padding: 24px 0 8px;
}

.about-gallery .gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.about-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* Responsive */
@media (max-width: 960px) {
	.about-hero-grid {
		grid-template-columns: 1fr;
	}

	.stat-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.about-two-col {
		grid-template-columns: 1fr;
	}

	.about-gallery .gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 960px) {
	.about-grid {
		padding: 0 15px;
		gap: 30px;
	}

	.about-content {
		padding: 15px;
	}

	.about-content h2 {
		font-size: 2.2rem;
	}

	.about-content p {
		font-size: 1.05rem;
	}

	.about-image {
		min-height: 350px;
	}
}

@media (max-width: 768px) {
	.about-timeline {
		padding: 60px 0;
	}

	.timeline-intro {
		margin-bottom: 40px;
	}

	.timeline-intro h2 {
		font-size: 2rem;
	}

	.timeline-intro p {
		font-size: 1rem;
	}

	.timeline-container {
		max-width: 100%;
		padding: 0 20px;
	}

	.timeline-container::before {
		left: 30px;
		transform: none;
	}

	.timeline-item {
		flex-direction: column !important;
		margin-bottom: 40px;
		align-items: flex-start;
	}

	.timeline-item .timeline-content {
		text-align: left !important;
	}

	.cta-card {
		padding: 0 24px;
		gap: 1.5rem;
	}

	.cta-actions {
		gap: 14px;
	}

	.cta-card.cta-brand h3 {
		font-size: 1.95rem;
	}

	.cta-card.cta-brand p {
		margin-left: auto;
		margin-right: auto;
	}

	.cta-features {
		gap: 14px 20px;
	}

	.cta-button {
		width: 100%;
		max-width: 260px;
		margin: 0.5rem auto 0;
	}

	.timeline-marker {
		width: 60px;
		height: 60px;
		margin-top: 0;
		margin-bottom: 20px;
		align-self: flex-start;
		margin-left: 0;
		z-index: 5;
	}

	.timeline-year {
		width: 60px;
		height: 60px;
		font-size: 1rem;
	}

	.timeline-dot {
		width: 10px;
		height: 10px;
	}

	.timeline-content {
		margin: 0;
		padding: 20px;
		width: 100%;
	}

	.timeline-content::before {
		display: none;
	}

	.timeline-stats {
		justify-content: flex-start;
		gap: 12px;
	}

	.timeline-stats span {
		font-size: 0.8rem;
		padding: 4px 8px;
	}
}

@media (max-width: 640px) {
	.timeline.timeline-horizontal {
		gap: 20px;
		padding: 30px 0 20px;
		max-width: 100%;
	}

	.timeline.timeline-horizontal li {
		min-width: 180px;
		padding: 22px 8px 0;
		margin-top: 0;
	}

	.timeline.timeline-horizontal li::before {
		top: 15px;
	}

	.about-gallery .gallery-grid {
		grid-template-columns: 1fr;
	}

	.badge {
		height: 140px;
		max-width: 180px;
	}

	.cta-features {
		gap: 12px 18px;
	}

	.cta-features span {
		font-size: 0.95rem;
		justify-content: center;
	}

	.cta-actions {
		width: 100%;
	}

	.cta-button {
		max-width: 100%;
	}

	.about-content h2 {
		font-size: 2rem;
		margin-bottom: 1rem;
	}

	.about-content p {
		font-size: 1rem;
		margin-bottom: 2rem;
	}

	.learn-more-btn {
		padding: 12px 24px;
		font-size: 0.95rem;
		letter-spacing: 0.3px;
	}
}

/*--------------------------------------------------------------
# New Homepage Sections (About, Why Us, Tech)
--------------------------------------------------------------*/

.auxal-about-advanced {
	position: relative;
	width: 100%;
	padding: 6rem 1rem;
	background-color: #f8fafc;
	/* Light elegant gray */
	overflow: hidden;
}

.auxal-about-advanced__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

.auxal-about-advanced__image {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.auxal-about-advanced__image img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.6s ease;
}

.auxal-about-advanced__image:hover img {
	transform: scale(1.05);
}

.auxal-about-advanced__content h2 {
	font-size: 2.5rem;
	color: var(--aux-blue, #013992);
	margin-bottom: 1.5rem;
	font-weight: 700;
}

.auxal-about-advanced__content p {
	font-size: 1.1rem;
	line-height: 1.8;
	color: #64748b;
	margin-bottom: 2rem;
}

/* Why AUX Section */
.auxal-why-aux {
	padding: 6rem 1rem;
	background: #ffffff;
}

.auxal-features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2.5rem;
	max-width: 1200px;
	margin: 3rem auto 0;
}

.auxal-feature-card {
	padding: 2.5rem;
	border-radius: 16px;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.05);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	text-align: center;
}

.auxal-feature-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(1, 57, 146, 0.08);
	border-color: rgba(1, 57, 146, 0.1);
}

.auxal-feature-icon {
	width: 72px;
	height: 72px;
	background: rgba(1, 57, 146, 0.06);
	color: var(--aux-blue, #013992);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
	font-size: 2rem;
}

.auxal-feature-card h3 {
	font-size: 1.4rem;
	margin-bottom: 1rem;
	color: #1e293b;
	font-weight: 600;
}

.auxal-feature-card p {
	font-size: 1.05rem;
	color: #64748b;
	line-height: 1.6;
}

/* Tech Split Section */
.auxal-tech-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 600px;
}

.auxal-tech-content {
	background: var(--aux-blue, #013992);
	color: #ffffff;
	padding: 6rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.auxal-tech-content h2 {
	color: #ffffff;
	font-size: 2.8rem;
	margin-bottom: 1.5rem;
	font-weight: 700;
}

.auxal-tech-content p {
	color: rgba(255, 255, 255, 0.9);
	font-size: 1.15rem;
	line-height: 1.8;
	max-width: 500px;
	margin-bottom: 2rem;
}

.auxal-tech-image {
	background-size: cover;
	background-position: center;
	min-height: 400px;
	position: relative;
}

/* Badge for Technology */
.auxal-tech-badge {
	display: inline-block;
	background: rgba(255, 255, 255, 0.15);
	padding: 0.5rem 1rem;
	border-radius: 50px;
	color: #fff;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 1rem;
	font-weight: 600;
	backdrop-filter: blur(5px);
}

/* Responsive */
@media (max-width: 1024px) {

	.auxal-about-advanced__inner,
	.auxal-tech-split {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.auxal-tech-image {
		order: -1;
		min-height: 350px;
	}

	.auxal-tech-content {
		padding: 4rem 2rem;
	}

	.auxal-about-advanced__inner {
		padding: 0 1rem;
	}
}

/*--------------------------------------------------------------
# Solutions Split Section
--------------------------------------------------------------*/
.auxal-solutions-split {
	padding: 80px 0;
	background-color: #ffffff;
}

.auxal-solutions-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}

.auxal-solution-card.auxal-brand-banner {
	width: 100%;
	min-height: 450px;
	padding: 50px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Override default brand banner image */
.auxal-solution-card.auxal-brand-banner::after {
	display: none;
}

.auxal-solution-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.6s ease;
}

.auxal-solution-card:hover .auxal-solution-bg {
	transform: scale(1.05);
}

.auxal-solution-card .auxal-brand-banner__content {
	max-width: 450px;
}

/* CTA Container */
.auxal-solutions-cta-container {
	margin-top: 60px;
	text-align: center;
	padding: 40px;
	background: #f8fafc;
	border-radius: 12px;
}

.auxal-solutions-cta-container h3 {
	font-size: 1.8rem;
	color: #102848;
	margin-bottom: 1rem;
}

.auxal-solutions-cta-container .auxal-button-link {
	background: var(--aux-blue, #013992);
	color: #fff;
	padding: 12px 32px;
	border-radius: 50px;
	text-transform: none;
	font-size: 1rem;
	letter-spacing: 0.5px;
	margin-top: 1rem;
	display: inline-flex;
}

.auxal-solutions-cta-container .auxal-button-link:hover {
	background: #002a70;
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(1, 57, 146, 0.2);
}

@media (max-width: 768px) {
	.auxal-solutions-grid {
		grid-template-columns: 1fr;
	}

	.auxal-solution-card.auxal-brand-banner {
		min-height: 350px;
		padding: 30px;
		/* Keep card depth visible on mobile where single-column layout can flatten shadows */
		box-shadow: 0 18px 36px rgba(16, 40, 72, 0.18), 0 4px 10px rgba(16, 40, 72, 0.12);
	}

	.auxal-brand-banner.auxal-discover-banner::before {
		/* Re-enable dark overlay for the "Rreth Nesh" discover banner on mobile */
		display: block !important;
		opacity: 1 !important;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.52) 45%, rgba(0, 0, 0, 0.08) 80%, rgba(0, 0, 0, 0) 100%) !important;
	}

	.auxal-brand-banner.auxal-discover-banner h3,
	.auxal-brand-banner.auxal-discover-banner p {
		text-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
	}
}

/* Improve overlay for solution cards to ensure text readability on new images */
.auxal-solution-card.auxal-brand-banner::before {
	/* Restore dark overlay on mobile where .auxal-brand-banner::before is disabled */
	opacity: 1;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
}

/* Widen the Solutions Split section as requested */
.auxal-solutions-split .auxal-section-inner {
	max-width: 1400px;
}

/*--------------------------------------------------------------
# Services Grid Section
--------------------------------------------------------------*/
.auxal-services-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	margin-top: 50px;
	align-items: center;
}

.auxal-services-feature {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
	aspect-ratio: 4/3;
}

.auxal-services-feature img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.auxal-services-feature:hover img {
	transform: scale(1.05);
}

.auxal-services-feature__content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
	color: #fff;
}

.auxal-services-feature__content h3 {
	color: #fff;
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}

.auxal-services-feature__content p {
	color: rgba(255, 255, 255, 0.9);
	margin: 0;
	font-size: 1rem;
}

.auxal-services-list-wrapper {
	padding: 20px 0;
}

.auxal-services-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.auxal-service-item {
	display: flex;
	gap: 20px;
	margin-bottom: 30px;
	align-items: flex-start;
}

.auxal-service-icon {
	width: 54px;
	height: 54px;
	flex-shrink: 0;
	background: #f0f7ff;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--aux-blue, #013992);
}

.auxal-service-info h4 {
	color: #102848;
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 8px;
}

.auxal-service-info p {
	color: #64748b;
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
}

@media (max-width: 900px) {
	.auxal-services-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.auxal-services-feature {
		max-height: 400px;
	}
}

/* Refined Outline CTA */
.auxal-cta-outline {
	background: transparent !important;
	border: 1px solid #94a3b8 !important;
	color: #64748b !important;
	border-radius: 0 !important;
	padding: 10px 24px !important;
	font-size: 0.9rem !important;
	box-shadow: none !important;
	transition: all 0.3s ease;
}

.auxal-cta-outline:hover {
	border-color: #102848 !important;
	color: #102848 !important;
	background: rgba(0, 0, 0, 0.02) !important;
	transform: translateY(-2px);
}

/* Make the outline CTA more professional */
.auxal-cta-outline {
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	padding: 12px 28px !important;
	border-color: #cbd5e1 !important;
	/* Lighter grey for elegance */
	color: #475569 !important;
	/* Slate grey text */
}

.auxal-cta-outline:hover {
	border-color: #0f172a !important;
	/* Dark slate on hover */
	color: #0f172a !important;
	background: transparent !important;
}

/* Specific override to remove white outline from Bottom CTA */
.auxal-solutions-cta-container .auxal-button-link,
.auxal-solutions-cta-container .auxal-cta-outline {
	border: 1px solid #cbd5e1 !important;
	/* Enforce grey border */
	box-shadow: none !important;
	/* Remove any shadow that looks like outline */
	outline: none !important;
}

.auxal-solutions-cta-container .auxal-button-link:hover,
.auxal-solutions-cta-container .auxal-cta-outline:hover {
	border-color: #0f172a !important;
}




/*--------------------------------------------------------------
# Product Tabs Section
--------------------------------------------------------------*/
.auxal-product-tabs {
	padding: 80px 0;
	background-color: #f8fafc;
}

.auxal-product-tabs .auxal-section-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 50px;
	gap: 20px;
}

.auxal-tab-nav {
	display: flex;
	gap: 10px;
	background: #fff;
	padding: 6px;
	border-radius: 50px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.auxal-tab-btn {
	background: transparent;
	border: none;
	padding: 10px 30px;
	font-size: 0.95rem;
	font-weight: 600;
	color: #64748b;
	border-radius: 40px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.auxal-tab-btn.active {
	background: var(--aux-blue, #013992);
	color: #fff;
	box-shadow: 0 4px 12px rgba(1, 57, 146, 0.2);
}

.auxal-tab-btn:hover:not(.active) {
	background: #f1f5f9;
	color: #475569;
}

.auxal-tab-content {
	display: none;
	animation: fadeIn 0.4s ease;
}

.auxal-tab-content.active {
	display: block;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Small Product Grid */
.auxal-product-grid-sm {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.auxal-product-card-sm {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border: 1px solid #f1f5f9;
	display: flex;
	flex-direction: column;
}

.auxal-product-card-sm:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
	border-color: #e2e8f0;
}

.auxal-product-card-sm__image {
	aspect-ratio: 4/3;
	overflow: hidden;
	background: #f8fafc;
}

.auxal-product-card-sm__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.auxal-product-card-sm:hover .auxal-product-card-sm__image img {
	transform: scale(1.05);
}

.auxal-product-card-sm__info {
	padding: 16px 20px;
}

.auxal-product-card-sm__info h4 {
	color: #0f172a;
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 4px;
}

.auxal-product-card-sm__info p {
	color: #64748b;
	font-size: 0.9rem;
	margin: 0;
}

@media (max-width: 1024px) {
	.auxal-product-grid-sm {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.auxal-product-grid-sm {
		grid-template-columns: 1fr;
	}

	.auxal-tab-nav {
		width: 100%;
		justify-content: center;
	}

	.auxal-tab-btn {
		padding: 10px 20px;
		font-size: 0.9rem;
	}
}

/* Remove rounded corners from Tabs and Product Cards */
.auxal-tab-nav {
	border-radius: 0 !important;
}

.auxal-tab-btn {
	border-radius: 0 !important;
}

.auxal-product-card-sm {
	border-radius: 0 !important;
}

/* Premium Product Tabs - Rework 1400px */
.auxal-product-tabs-premium {
	padding: 100px 0;
	background-color: #f8fafc;
}

.auxal-product-tabs-premium .auxal-section-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px;
}

.auxal-product-tabs-premium .auxal-section-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 70px;
	gap: 30px;
}

/* Minimalist Tabs */
.auxal-product-tabs-premium .auxal-tab-nav {
	display: flex;
	gap: 40px;
	background: transparent;
	padding: 0;
	box-shadow: none;
	border-radius: 0;
}

.auxal-product-tabs-premium .auxal-tab-btn {
	background: transparent;
	border: none;
	padding: 10px 0;
	font-size: 1.1rem;
	font-weight: 500;
	color: #94a3b8;
	border-radius: 0;
	cursor: pointer;
	position: relative;
	transition: all 0.3s ease;
}

.auxal-product-tabs-premium .auxal-tab-btn::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: #013992;
	transition: width 0.3s ease;
}

.auxal-product-tabs-premium .auxal-tab-btn.active {
	color: #013992;
	background: transparent;
	box-shadow: none;
	font-weight: 700;
}

.auxal-product-tabs-premium .auxal-tab-btn.active::after {
	width: 100%;
}

/* Premium Grid */
.auxal-product-grid-premium {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
}

.auxal-product-card-premium {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s ease;
}

.auxal-product-card-premium:hover {
	transform: translateY(-8px);
}

.auxal-product-card-premium__image {
	background: #fff;
	/* Aspect ratio mainly for consistent alignment */
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
	margin-bottom: 25px;
	overflow: hidden;
	/* No border radius, no shadow by default for clean look */
}

.auxal-product-card-premium__image img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
	transition: transform 0.5s ease;
}

.auxal-product-card-premium:hover .auxal-product-card-premium__image img {
	transform: scale(1.05);
}

.auxal-product-card-premium__info h4 {
	font-size: 1.25rem;
	font-weight: 700;
	color: #1e293b;
	margin: 0 0 8px;
	text-align: center;
}

.auxal-product-card-premium__info p {
	font-size: 0.95rem;
	color: #64748b;
	margin: 0;
	text-align: center;
}

@media (max-width: 1200px) {
	.auxal-product-grid-premium {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
	}
}

@media (max-width: 600px) {
	.auxal-product-grid-premium {
		grid-template-columns: 1fr;
	}

	.auxal-product-tabs-premium {
		padding: 60px 0;
	}
}

/* Transparent Background for Premium Cards as requested */
.auxal-product-card-premium__image {
	background: transparent !important;
}

/* Product Card "Discover More" Link */
.auxal-product-card-premium__link {
	display: inline-block;
	margin-top: 15px;
	font-size: 0.9rem;
	font-weight: 700;
	color: #013992;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: transform 0.3s ease;
}

.auxal-product-card-premium:hover .auxal-product-card-premium__link {
	transform: translateX(5px);
}

/* Secondary Button (See All Products) */
.auxal-button-secondary {
	display: inline-block;
	padding: 14px 35px;
	font-size: 1rem;
	font-weight: 600;
	color: #1e293b;
	background: transparent;
	border: 2px solid #e2e8f0;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
}

.auxal-button-secondary:hover {
	border-color: #013992;
	color: #013992;
	background: #f1f5f9;
}

/* Premium Bottom CTA Section */
.auxal-bottom-cta {
	padding: 120px 0;
	text-align: center;
	background: linear-gradient(135deg, #0f172a 0%, #013992 100%);
	color: #ffffff;
	position: relative;
	overflow: hidden;
}

.auxal-bottom-cta::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
	pointer-events: none;
}

.auxal-bottom-cta .auxal-section-inner {
	position: relative;
	z-index: 2;
}

.auxal-bottom-cta .auxal-solutions-cta-container {
	max-width: 900px;
	margin: 0 auto;
	background: transparent;
	padding: 0;
}

.auxal-bottom-cta h3 {
	font-size: 3rem;
	font-weight: 800;
	color: #ffffff;
	margin-bottom: 25px;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.auxal-bottom-cta p {
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 45px;
	font-size: 1.35rem;
	font-weight: 400;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.6;
}


/* Premium Button Style for Dark Background */
.auxal-bottom-cta .auxal-button-link.auxal-cta-outline {
	background-color: #ffffff !important;
	color: #013992 !important;
	border: none !important;
	padding: 16px 40px !important;
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	border-radius: 0 !important;
	/* Rectangular as requested */
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.auxal-bottom-cta .auxal-button-link.auxal-cta-outline:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
	background-color: #f8fafc !important;
	color: #0f172a !important;
}

/* Fix product image sizing and padding */
.auxal-product-card-premium__image {
	padding: 10px;
	/* Reduced from 30px to maximize image size */
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.auxal-bottom-cta {
		padding: 60px 20px;
	}

	.auxal-bottom-cta h3 {
		font-size: 2rem;
		margin-bottom: 15px;
	}

	.auxal-bottom-cta p {
		font-size: 1.1rem;
		margin-bottom: 30px;
	}

	/* Mobile Grid Fixes */
	.auxal-product-tabs-premium {
		padding: 40px 0;
	}

	.auxal-product-grid-premium {
		gap: 20px;
	}

	.auxal-product-card-premium__image {
		margin-bottom: 15px;
	}
}

/*--------------------------------------------------------------
# Mobile Page-Specific Polish (Rreth Nesh + Kontakt)
--------------------------------------------------------------*/
@media (max-width: 768px) {
	.about-page .about-hero-bg {
		opacity: 0.62 !important;
		z-index: 0;
	}

	.about-page .about-hero-overlay {
		display: block !important;
		z-index: 1;
		opacity: 1 !important;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.5) 52%, rgba(0, 0, 0, 0.66) 100%) !important;
	}

	.about-page .about-title,
	.about-page .about-subtitle,
	.about-page .about-hero-stats {
		text-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
	}

	.about-page .about-hero .container {
		position: relative;
		z-index: 2;
	}

	.contact-page-wrapper .contact-header-container,
	.contact-page-wrapper .contact-content-container {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.contact-page-wrapper .contact-header {
		padding: 1.75rem 0 1.5rem;
	}

	.contact-page-wrapper .contact-main-title {
		font-size: clamp(1.95rem, 7.4vw, 2.35rem);
		line-height: 1.1;
		margin-bottom: 0.75rem;
	}

	.contact-page-wrapper .contact-intro {
		font-size: 1rem;
		line-height: 1.55;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		text-align: left;
	}

	.contact-page-wrapper .contact-content {
		padding: 1.5rem 0 2rem;
	}

	.contact-page-wrapper .contact-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.contact-page-wrapper .contact-form-section,
	.contact-page-wrapper .contact-info-section {
		padding: 1.1rem;
		border-radius: 12px;
	}

	.contact-page-wrapper .contact-form-title {
		font-size: 1.45rem;
		line-height: 1.2;
		margin-bottom: 1rem;
	}

	.contact-page-wrapper .contact-form {
		gap: 0.95rem;
	}

	.contact-page-wrapper .form-group label {
		font-size: 0.9rem;
		line-height: 1.4;
	}

	.contact-page-wrapper .form-group input,
	.contact-page-wrapper .form-group select,
	.contact-page-wrapper .form-group textarea {
		padding: 0.8rem 0.9rem;
		font-size: 16px;
	}

	.contact-page-wrapper .contact-submit-btn {
		width: 100%;
		justify-content: center;
		align-self: stretch;
		margin-top: 0.35rem;
		padding: 0.85rem 1rem;
		font-size: 0.98rem;
	}

	.contact-page-wrapper .contact-map {
		margin-bottom: 1rem;
	}

	.contact-page-wrapper .contact-map iframe {
		height: 220px;
	}

	.contact-page-wrapper .contact-details {
		gap: 0.75rem;
	}

	.contact-page-wrapper .contact-item {
		padding: 0.85rem 0.9rem;
		gap: 0.75rem;
		align-items: flex-start;
	}

	.contact-page-wrapper .contact-icon {
		min-width: 1.25rem;
		width: 1.25rem;
		font-size: 1.2rem;
	}

	.contact-page-wrapper .contact-text {
		font-size: 0.92rem;
		line-height: 1.5;
		overflow-wrap: anywhere;
		word-break: break-word;
	}
}

@media (max-width: 480px) {
	.contact-page-wrapper .contact-header-container,
	.contact-page-wrapper .contact-content-container {
		padding-left: 0.85rem;
		padding-right: 0.85rem;
	}

	.contact-page-wrapper .contact-main-title {
		font-size: clamp(1.75rem, 8.4vw, 2.05rem);
	}

	.contact-page-wrapper .contact-form-title {
		font-size: 1.3rem;
	}

	.contact-page-wrapper .contact-map iframe {
		height: 200px;
	}
}