/* ----------------------------------------------------------------------------------------
* Site overrides for Sukhmani Auto Agencies on top of the Autoas template
* ---------------------------------------------------------------------------------------- */

/************************************/
/*** 	 Text Colours: only #000 / #fff ***/
/************************************/

:root{
	--primary-color: #000;
	--text-color: #000;
	--white-color: #fff;
}

body{
	color: #000;
}

.dark-section,
.dark-section p,
.dark-section h1,
.dark-section h2,
.dark-section h3{
	color: #fff;
}

.main-menu ul .nav-item .nav-link:hover,
.main-menu ul .nav-item .nav-link:focus{
	color: #000;
}

.main-menu ul ul .nav-item .nav-link:hover,
.main-menu ul ul .nav-item .nav-link:focus{
	color: #fff;
}

/************************************/
/*** 	 Buttons (one style everywhere) ***/
/************************************/

.btn-default,
.btn-default.btn-border{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--accent-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: #000;
	background: var(--accent-color);
	border: 1px solid var(--accent-color);
	border-radius: 10px;
	padding: 16px 44px 16px 22px;
	overflow: hidden;
	isolation: isolate;
	transition: color 0.4s ease-in-out, border-color 0.4s ease-in-out;
}

.btn-default i{
	font-size: 14px;
}

/* Fill layer: slides in from the left, covers the whole button (no skew) */
.btn-default::after,
.btn-default:hover::after,
.btn-default.btn-border::after,
.btn-default.btn-border:hover::after,
.dark-section .btn-default.btn-border::after,
.dark-section .btn-default.btn-border:hover::after{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.4s ease-in-out;
	z-index: -1;
}

.btn-default:hover::after,
.btn-default.btn-border:hover::after,
.dark-section .btn-default.btn-border:hover::after{
	transform: scaleX(1);
	transform-origin: left center;
}

.btn-default:hover,
.btn-default:focus{
	color: #fff;
	border-color: #fff;
}

.btn-default::before{
	background-image: url('../images/arrow-primary.svg');
}

.btn-default:hover::before{
	background-image: url('../images/arrow-white.svg');
}

/* Outline variant: light pages */
.btn-default.btn-border{
	color: #000;
	background: transparent;
	border-color: #000;
}

/* Outline variant: dark sections */
.dark-section .btn-default.btn-border{
	color: #fff;
	border-color: #fff;
}

.dark-section .btn-default.btn-border::before{
	background-image: url('../images/arrow-white.svg');
}

/* Outline hover: same yellow as the primary button */
.btn-default.btn-border::after,
.btn-default.btn-border:hover::after,
.dark-section .btn-default.btn-border::after,
.dark-section .btn-default.btn-border:hover::after{
	background: var(--accent-color);
}

.btn-default.btn-border:hover,
.dark-section .btn-default.btn-border:hover{
	color: #000;
	border-color: var(--accent-color);
}

.btn-default.btn-border:hover::before,
.dark-section .btn-default.btn-border:hover::before{
	background-image: url('../images/arrow-primary.svg');
}

/************************************/
/*** 	 Text Logo				  ***/
/************************************/

.site-logo{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	line-height: 1;
	text-decoration: none;
	padding: 0;
	margin: 0;
}

/* icon visually as tall as the name + tagline block (47px); the gear teeth need a little extra */
.site-logo-icon{
	width: 58px;
	height: 58px;
	flex-shrink: 0;
}

.site-logo-text{
	justify-content: center;
}

/* Preloader: brand icon inside the spinning ring */
.preloader .loading{
	border-color: transparent var(--accent-color) transparent var(--accent-color);
	border-width: 2px;
}

#loading-icon img{
	display: block;
	width: 64px;
	height: 64px;
	animation: gear-spin 3s linear infinite;
}

.site-logo-text{
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.site-logo-name{
	font-family: var(--accent-font);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--primary-color);
}

.site-logo-tag{
	padding-left: 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: #000;
}

.site-logo-white .site-logo-name,
.site-logo-white .site-logo-tag{
	color: #fff;
}

/************************************/
/*** 	 Simple Header			  ***/
/************************************/

.simple-header .header-sticky{
	border-bottom: 1px solid var(--divider-color);
	box-shadow: none;
}

.simple-header .simple-header-inner{
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}

.simple-header .main-menu{
	width: auto;
	background: transparent;
	display: flex;
	align-items: center;
}

.simple-header .main-menu .navbar-collapse{
	max-width: none;
	margin: 0;
	padding: 0;
	gap: 30px;
	align-items: center;
}

.simple-header .main-menu .nav-menu-wrapper > ul{
	gap: 36px;
}

.simple-header .main-menu ul .nav-item{
	margin: 0;
	padding: 30px 0;
}

.simple-header .main-menu ul ul .nav-item{
	padding: 0;
}

.simple-header .main-menu .nav-item.desktop-hide{
	display: none;
}

/* Mega menu: five link columns, no image cards */
.main-menu .mega-menu-box .mega-menu-links-box{
	width: 100%;
	gap: 30px 40px;
}

.main-menu .mega-menu-box .mega-menu-link{
	width: calc(20% - 32px);
}

.main-menu .mega-menu-box .mega-menu-link{
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.main-menu .mega-menu-box .mega-menu-link h2{
	font-size: 18px;
	margin: 0;
	padding-bottom: 16px;
}

.main-menu .mega-menu-box .mega-menu-link ul{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.main-menu .mega-menu-box .mega-menu-link ul li,
.main-menu .mega-menu-box .mega-menu-link ul li:last-child{
	margin: 0;
}

.main-menu .mega-menu-box .mega-menu-link ul li a{
	font-size: 15px;
}

.main-menu .mega-menu-box .mega-menu-link ul li a:hover{
	color: #000;
	text-decoration: underline;
}

/************************************/
/*** 	 Hero					  ***/
/************************************/

.site-hero{
	position: relative;
	background: #000 url('../images/hero-bg.webp') no-repeat right center;
	background-size: cover;
	overflow: hidden;
}

.site-hero::before{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.85) 42%, rgba(0, 0, 0, 0.35) 62%, rgba(0, 0, 0, 0) 80%);
	z-index: 0;
}

.site-hero .hero-box,
.site-hero .hero-stats{
	position: relative;
	z-index: 1;
}

.site-hero .hero-box{
	padding: 140px 0 120px;
}

.site-hero .hero-content{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
}

.site-hero .section-title{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 25px;
	margin: 0;
}

.site-hero .section-title .section-sub-title,
.site-hero .section-title h1,
.site-hero .section-title p{
	margin: 0;
}

.site-hero .section-title h1{
	font-size: 64px;
	line-height: 1.1em;
	color: #fff;
}

.site-hero .section-title p{
	max-width: 600px;
	font-size: 18px;
	line-height: 1.6em;
	color: #fff;
}

.site-hero .section-title .section-sub-title{
	color: #fff;
}

.site-hero .hero-content-body{
	gap: 15px;
	margin: 0;
}

.hero-stats{
	border-top: 1px solid var(--dark-divider-color);
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.hero-stats-list{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hero-stats-list li{
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 30px;
	border-left: 1px solid var(--dark-divider-color);
}

.hero-stats-list li:first-child{
	border-left: none;
	padding-left: 0;
}

.hero-stats-list strong{
	font-family: var(--accent-font);
	font-size: 30px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
}

.hero-stats-list span{
	font-size: 15px;
	color: #fff;
}

/************************************/
/*** 	 Section Head (shared)	  ***/
/************************************/

.section-head{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 25px 40px;
}

.section-head .section-title{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
	max-width: 640px;
	margin: 0;
}

.section-head .section-title .section-sub-title,
.section-head .section-title h2,
.section-head .section-title p{
	margin: 0;
}

.section-head .section-title h2{
	font-size: 44px;
	line-height: 1.15em;
	color: #000;
}

/************************************/
/*** 	 Categories				  ***/
/************************************/

.site-categories{
	background: var(--bg-color);
	padding: 100px 0;
}

.site-categories-inner{
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.cat-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.cat-card{
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	padding: 16px 20px 16px 16px;
	color: #000;
	transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.cat-card:hover{
	color: #000;
	border-color: #000;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.cat-card-image{
	width: 76px;
	height: 76px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-color);
	border-radius: 10px;
	overflow: hidden;
}

.cat-card-image img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.4s ease-in-out;
}

.cat-card:hover .cat-card-image img{
	transform: scale(1.08);
}

.cat-card-content{
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cat-card-title{
	font-family: var(--accent-font);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2em;
	color: #000;
}

.cat-card-count{
	font-size: 14px;
	color: #000;
}

.cat-card-arrow{
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--divider-color);
	font-size: 13px;
	color: #000;
	transition: all 0.3s ease-in-out;
}

.cat-card:hover .cat-card-arrow{
	background: var(--accent-color);
	border-color: var(--accent-color);
	transform: rotate(-45deg);
}

.cat-feature-grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.cat-feature{
	display: grid;
	grid-template-columns: 1fr 42%;
	align-items: center;
	gap: 20px;
	background: #fff;
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 40px;
	overflow: hidden;
}

.cat-feature-body{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
}

.cat-feature-content{
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cat-feature-count{
	align-self: flex-start;
	font-size: 13px;
	font-weight: 600;
	color: #000;
	background: var(--accent-color);
	border-radius: 100px;
	padding: 6px 12px;
}

.cat-feature-content h3{
	font-size: 32px;
	line-height: 1.15em;
	margin: 0;
}

.cat-feature-content h3 a{
	color: #000;
}

.cat-feature-content p{
	color: #000;
	margin: 0;
}

.cat-feature-image img{
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	transition: transform 0.5s ease-in-out;
}

.cat-feature:hover .cat-feature-image img{
	transform: scale(1.05);
}

/************************************/
/*** 	 About / Why Choose Us	  ***/
/************************************/

.site-about{
	background: #fff;
	padding: 100px 0;
}

.site-about-inner{
	display: grid;
	grid-template-columns: 5fr 6fr;
	align-items: center;
	gap: 70px;
}

.site-about-media{
	position: relative;
}

.site-about-image{
	display: block;
	border-radius: 20px;
	overflow: hidden;
}

.site-about-image img{
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.site-about-badge{
	position: absolute;
	right: 24px;
	bottom: 24px;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--accent-color);
	border-radius: 14px;
	padding: 18px 22px;
}

.site-about-badge strong{
	font-family: var(--accent-font);
	font-size: 44px;
	font-weight: 600;
	line-height: 1;
	color: #000;
}

.site-about-badge span{
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3em;
	color: #000;
}

.site-about-content{
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.site-about-content .section-head .section-title{
	max-width: none;
	gap: 20px;
}

.site-about-content .section-title p{
	color: #000;
}

.why-list{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.why-item{
	display: flex;
	align-items: flex-start;
	gap: 15px;
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	padding: 20px;
	transition: border-color 0.3s ease-in-out;
}

.why-item:hover{
	border-color: #000;
}

.why-icon{
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--accent-color);
	color: #000;
	font-size: 18px;
}

.why-text{
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.why-text strong{
	font-family: var(--accent-font);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2em;
	color: #000;
}

.why-text span{
	font-size: 15px;
	line-height: 1.5em;
	color: #000;
}

.site-about-actions{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 30px;
}

.about-call{
	display: flex;
	align-items: center;
	gap: 12px;
	color: #000;
}

.about-call:hover{
	color: #000;
}

.about-call-icon{
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--divider-color);
	font-size: 16px;
	color: #000;
	transition: all 0.3s ease-in-out;
}

.about-call:hover .about-call-icon{
	background: var(--accent-color);
	border-color: var(--accent-color);
}

.about-call-text{
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.about-call-text small{
	font-size: 14px;
	color: #000;
}

.about-call-text strong{
	font-family: var(--accent-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	color: #000;
}

/************************************/
/*** 	 FAQ					  ***/
/************************************/

.site-faq{
	background: var(--bg-color);
	padding: 100px 0;
}

.site-faq-inner{
	display: grid;
	grid-template-columns: 5fr 7fr;
	align-items: start;
	gap: 70px;
}

.site-faq-intro{
	display: flex;
	flex-direction: column;
	gap: 40px;
	position: sticky;
	top: 40px;
}

.faq-help{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	background: #fff;
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 30px;
}

.faq-help-icon{
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--accent-color);
	color: #000;
	font-size: 20px;
}

.faq-help-text{
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.faq-help-text strong{
	font-family: var(--accent-font);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2em;
	color: #000;
}

.faq-help-text span{
	font-size: 15px;
	color: #000;
}

.faq-list{
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.faq-item{
	background: #fff;
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	transition: border-color 0.3s ease-in-out;
}

.faq-item.is-open{
	border-color: #000;
}

.faq-item summary{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	font-family: var(--accent-font);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3em;
	color: #000;
	padding: 22px 24px;
	cursor: pointer;
	list-style: none;
}

.faq-item summary::-webkit-details-marker{
	display: none;
}

.faq-item summary::after{
	content: '\f067';
	font-family: 'Font Awesome 7 Free';
	font-weight: 900;
	font-size: 13px;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--divider-color);
	color: #000;
	transition: all 0.3s ease-in-out;
}

.faq-item.is-open summary::after{
	content: '\f068';
	background: var(--accent-color);
	border-color: var(--accent-color);
}

.faq-answer p{
	font-size: 16px;
	line-height: 1.6em;
	color: #000;
	border-top: 1px solid var(--divider-color);
	padding: 18px 24px 22px;
	margin: 0;
}

/************************************/
/*** 	 Enquiry				  ***/
/************************************/

.site-enquiry{
	position: relative;
	background: #000 url('../images/hero-bg-alt.webp') no-repeat center center;
	background-size: cover;
	padding: 100px 0;
}

.site-enquiry::before{
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.88);
}

.site-enquiry-inner{
	position: relative;
	display: grid;
	grid-template-columns: 5fr 6fr;
	align-items: center;
	gap: 70px;
}

.site-enquiry-intro{
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.site-enquiry .section-head .section-title h2{
	color: #fff;
}

.enquiry-steps{
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.enquiry-steps li{
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 22px 0;
	border-top: 1px solid var(--dark-divider-color);
}

.enquiry-steps li:last-child{
	border-bottom: 1px solid var(--dark-divider-color);
}

.enquiry-step-no{
	font-family: var(--accent-font);
	font-size: 28px;
	font-weight: 600;
	line-height: 1;
	color: var(--accent-color);
	min-width: 44px;
}

.enquiry-step-text{
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.enquiry-step-text strong{
	font-family: var(--accent-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2em;
	color: #fff;
}

.enquiry-step-text span{
	font-size: 15px;
	color: #fff;
}

.enquiry-card{
	background: #fff;
	border-radius: 20px;
	padding: 40px;
}

.enquiry-form{
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.enquiry-form-grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}

.form-field{
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.form-field-full{
	grid-column: 1 / -1;
}

.form-field > span{
	font-size: 14px;
	font-weight: 500;
	color: #000;
}

.form-field input,
.form-field select,
.form-field textarea{
	width: 100%;
	font-size: 15px;
	line-height: 1.4em;
	color: #000;
	background: var(--bg-color);
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	padding: 13px 16px;
	outline: none;
	box-shadow: none;
	transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.form-field select{
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
}

.form-field textarea{
	resize: vertical;
	min-height: 110px;
}

.form-field input::placeholder,
.form-field textarea::placeholder{
	color: #000;
	opacity: 0.45;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
	background-color: #fff;
	border-color: #000;
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea{
	border-color: var(--error-color);
}

.form-hp{
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.enquiry-form-footer{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px 20px;
}

.enquiry-form-footer .btn-default:disabled{
	opacity: 0.6;
	cursor: wait;
}

.enquiry-card .enquiry-form-status{
	font-size: 14px;
	font-weight: 500;
	color: #000;
	margin: 0;
}

.enquiry-form-status:empty{
	display: none;
}

.enquiry-form-status.is-success::before,
.enquiry-form-status.is-error::before{
	font-family: 'Font Awesome 7 Free';
	font-weight: 900;
	padding-right: 8px;
}

.enquiry-form-status.is-success::before{
	content: '\f058';
	color: #1a9c4a;
}

.enquiry-form-status.is-error::before{
	content: '\f071';
	color: var(--error-color);
}

/************************************/
/*** 	 Ticker					  ***/
/************************************/

.site-ticker{
	display: flex;
	flex-direction: column;
	background: var(--accent-color);
	overflow: hidden;
}

.ticker-row{
	display: flex;
	overflow: hidden;
	padding: 22px 0;
}

.ticker-row + .ticker-row{
	background: #fff;
	border-bottom: 1px solid var(--divider-color);
}

.ticker-track{
	display: flex;
	flex-shrink: 0;
	animation: ticker-scroll 40s linear infinite;
}

.ticker-row-reverse .ticker-track{
	animation-direction: reverse;
	animation-duration: 45s;
}

.ticker-list{
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 50px;
	list-style: none;
	margin: 0;
	padding: 0 25px;
}

.ticker-list li{
	display: flex;
	align-items: center;
	gap: 50px;
	font-family: var(--accent-font);
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: #000;
}

.ticker-list li i{
	font-size: 16px;
	order: -1;
}

.ticker-row-reverse .ticker-list li i{
	color: var(--accent-color);
}

@keyframes ticker-scroll{
	from{ transform: translateX(0); }
	to{ transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
	.ticker-track{
		animation: none;
	}
}

/************************************/
/*** 	 Inner Page Header		  ***/
/************************************/

.site-page-header{
	position: relative;
	background: #000 url('../images/hero-bg-alt.webp') no-repeat center 60%;
	background-size: cover;
	padding: 110px 0 100px;
}

.site-page-header::before{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.82) 55%, rgba(0, 0, 0, 0.55) 100%);
}

.site-page-header .page-header-box{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	max-width: 760px;
}

.site-page-header .page-header-box h1{
	font-size: 56px;
	line-height: 1.1em;
	color: #fff;
	margin: 0;
}

.site-page-header .page-header-box p{
	font-size: 18px;
	line-height: 1.6em;
	color: #fff;
	margin: 0;
}

.site-page-header .breadcrumb{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	font-size: 14px;
}

.site-page-header .breadcrumb-item,
.site-page-header .breadcrumb-item a,
.site-page-header .breadcrumb-item.active{
	color: #fff;
	padding: 0;
}

.site-page-header .breadcrumb-item + .breadcrumb-item::before{
	content: '/';
	color: var(--accent-color);
	padding-right: 8px;
}

.site-page-header .breadcrumb-item a:hover{
	text-decoration: underline;
}

/************************************/
/*** 	 Contact Page			  ***/
/************************************/

.site-contact{
	background: var(--bg-color);
	padding: 100px 0;
}

.site-contact-inner{
	display: grid;
	grid-template-columns: 5fr 7fr;
	align-items: center;
	gap: 60px;
}

.site-contact-details{
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.site-contact .section-head .section-title h2{
	font-size: 36px;
}

.site-contact .enquiry-card{
	border: 1px solid var(--divider-color);
}

.contact-list{
	display: flex;
	flex-direction: column;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.contact-item{
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	padding: 22px;
}

.contact-item-icon{
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--accent-color);
	color: #000;
	font-size: 17px;
}

.contact-item-text{
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.contact-item-text strong{
	font-family: var(--accent-font);
	font-size: 18px;
	font-weight: 600;
	color: #000;
}

.contact-item-text span,
.contact-item-links a{
	font-size: 16px;
	line-height: 1.5em;
	color: #000;
	overflow-wrap: anywhere;
}

.contact-item-links{
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.contact-item-links a:hover{
	text-decoration: underline;
}

.site-map{
	display: flex;
	background: var(--bg-color);
}

.site-map iframe{
	width: 100%;
	height: 450px;
	border: 0;
	filter: grayscale(1);
}

/************************************/
/*** 	 Legal Pages			  ***/
/************************************/

.site-legal{
	background: #fff;
	padding: 90px 0 100px;
}

.legal-content{
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.legal-updated{
	align-self: flex-start;
	font-size: 14px;
	font-weight: 500;
	color: #000;
	background: var(--bg-color);
	border-radius: 100px;
	padding: 8px 16px;
	margin: 0;
}

.legal-block{
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.legal-block h2{
	font-size: 26px;
	line-height: 1.25em;
	color: #000;
	margin: 0;
}

.legal-block p,
.legal-block li{
	font-size: 16px;
	line-height: 1.7em;
	color: #000;
	margin: 0;
}

.legal-block ul{
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding-left: 20px;
}

.legal-block li::marker{
	color: var(--accent-color);
}

.legal-block a{
	color: #000;
	text-decoration: underline;
}

/************************************/
/*** 	 About Page				  ***/
/************************************/

.site-about-content .section-title p + p{
	margin: 0;
}

.about-facts{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.about-facts li{
	display: flex;
	flex-direction: column;
	gap: 6px;
	border: 1px solid var(--divider-color);
	border-left: 3px solid var(--accent-color);
	border-radius: 12px;
	padding: 16px 18px;
}

.about-facts span{
	font-size: 14px;
	color: #000;
}

.about-facts strong{
	font-family: var(--accent-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2em;
	color: #000;
}

.site-units{
	background: var(--bg-color);
	padding: 100px 0;
}

.site-units-inner{
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.units-banner{
	display: block;
	border-radius: 20px;
	overflow: hidden;
	margin: 0;
}

.units-banner img{
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

.units-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.unit-card{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	background: #fff;
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 30px 26px;
	transition: border-color 0.3s ease-in-out;
}

.unit-card:hover{
	border-color: #000;
}

.unit-icon{
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--accent-color);
	color: #000;
	font-size: 20px;
}

.unit-card h3{
	font-size: 20px;
	line-height: 1.25em;
	color: #000;
	margin: 0;
}

.unit-card p{
	font-size: 15px;
	line-height: 1.6em;
	color: #000;
	margin: 0;
}

.site-values{
	background: #000;
	padding: 100px 0;
}

.site-values-inner{
	display: grid;
	grid-template-columns: 6fr 5fr;
	align-items: center;
	gap: 70px;
}

.values-col{
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.site-values .section-head .section-title h2{
	color: #fff;
}

.values-list{
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.values-list li{
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 20px 0;
	border-top: 1px solid var(--dark-divider-color);
}

.values-list li:last-child{
	border-bottom: 1px solid var(--dark-divider-color);
}

.values-no{
	font-family: var(--accent-font);
	font-size: 26px;
	font-weight: 600;
	line-height: 1;
	color: var(--accent-color);
	min-width: 40px;
}

.values-list p{
	font-size: 18px;
	line-height: 1.5em;
	color: #fff;
	margin: 0;
}

.why-col{
	display: flex;
	flex-direction: column;
	gap: 24px;
	background: #fff;
	border-radius: 20px;
	padding: 36px;
}

.site-values .why-col h3{
	font-size: 24px;
	line-height: 1.25em;
	color: #000;
	margin: 0;
}

.why-checklist{
	display: flex;
	flex-direction: column;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.why-checklist li{
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
	font-weight: 500;
	color: #000;
}

.why-checklist li i{
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--accent-color);
	color: #000;
	font-size: 11px;
}

.about-quote{
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--bg-color);
	border-radius: 12px;
	padding: 18px 20px;
	margin: 0;
}

.site-values .about-quote p{
	font-size: 15px;
	font-style: italic;
	line-height: 1.6em;
	color: #000;
	margin: 0;
}

.about-quote cite{
	font-size: 13px;
	font-style: normal;
	font-weight: 600;
	color: #000;
}

.site-cta{
	background: var(--bg-color);
	padding: 70px 0;
}

.site-cta-inner{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 25px 40px;
}

.site-cta-text{
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 640px;
}

.site-cta-text h2{
	font-size: 36px;
	line-height: 1.2em;
	color: #000;
	margin: 0;
}

.site-cta-text p{
	font-size: 17px;
	color: #000;
	margin: 0;
}

.site-cta-actions{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

/************************************/
/*** 	 Our Products Page		  ***/
/************************************/

.site-products{
	background: var(--bg-color);
	padding: 80px 0 100px;
}

.site-products-inner{
	display: flex;
	flex-direction: column;
	gap: 60px;
}

.products-toolbar{
	display: flex;
	flex-direction: column;
	gap: 18px;
	background: #fff;
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 22px;
}

.products-search{
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--bg-color);
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	padding: 0 18px;
	margin: 0;
	transition: border-color 0.3s ease-in-out;
}

.products-search:focus-within{
	border-color: #000;
	background: #fff;
}

.products-search i{
	font-size: 16px;
	color: #000;
}

.products-search input{
	flex: 1;
	min-width: 0;
	font-size: 16px;
	color: #000;
	background: transparent;
	border: none;
	outline: none;
	padding: 15px 0;
}

.products-search input::placeholder{
	color: #000;
	opacity: 0.45;
}

.products-jump{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.products-jump a{
	font-size: 14px;
	font-weight: 500;
	color: #000;
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	padding: 8px 16px;
	transition: all 0.3s ease-in-out;
}

.products-jump a:hover{
	color: #000;
	background: var(--accent-color);
	border-color: var(--accent-color);
}

.product-group{
	display: flex;
	flex-direction: column;
	gap: 24px;
	scroll-margin-top: 30px;
}

.product-group[hidden],
.cat-card[hidden]{
	display: none;
}

.product-group-head{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 14px;
}

.product-group-head h2{
	font-size: 30px;
	line-height: 1.2em;
	color: #000;
	margin: 0;
}

.product-group-head span{
	font-size: 14px;
	color: #000;
}

.products-empty{
	font-size: 16px;
	color: #000;
	text-align: center;
	margin: 0;
}

.products-empty a{
	color: #000;
	text-decoration: underline;
}

/************************************/
/*** 	 Category Page			  ***/
/************************************/

.site-category{
	background: var(--bg-color);
	padding: 80px 0 100px;
}

.site-category-inner{
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.category-intro{
	display: grid;
	grid-template-columns: 200px 1fr;
	align-items: center;
	gap: 30px;
	background: #fff;
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 30px;
}

.category-intro-image{
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-color);
	border-radius: 14px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.category-intro-image img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.category-intro-body{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.category-intro-body h2{
	font-size: 30px;
	line-height: 1.2em;
	color: #000;
	margin: 0;
}

.category-intro-body p{
	font-size: 16px;
	color: #000;
	margin: 0;
}

.category-intro-actions{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 6px;
}

/* Category toolbar: count + sibling category chips */
.category-toolbar{
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.category-count{
	font-size: 15px;
	color: #000;
	margin: 0;
}

.category-chips{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.category-chips a{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: #000;
	background: #fff;
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	padding: 9px 16px;
	transition: all 0.3s ease-in-out;
}

.category-chips a:hover{
	color: #000;
	border-color: #000;
}

.category-chips a.is-active{
	background: var(--accent-color);
	border-color: var(--accent-color);
	font-weight: 600;
}

.category-chips .category-chip-all{
	background: #000;
	border-color: #000;
	color: #fff;
}

.category-chips .category-chip-all:hover{
	color: #fff;
}

.category-chips .category-chip-all i{
	font-size: 11px;
}

/************************************/
/*** 	 Product Card			  ***/
/************************************/

.product-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.product-card{
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: #fff;
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 14px 14px 18px;
}

.product-card-image{
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background: var(--bg-color);
	border-radius: 12px;
	overflow: hidden;
}

.product-card-image img{
	width: 70%;
	height: 70%;
	object-fit: contain;
}

.product-card-title{
	font-size: 17px;
	line-height: 1.3em;
	margin: 0;
}

.product-card-title a{
	color: #000;
}

.product-card-text{
	flex: 1;
	font-size: 14px;
	line-height: 1.5em;
	color: #000;
	margin: 0;
}

.product-card-btn{
	align-self: stretch;
	justify-content: center;
}

/* Load More */
.load-more{
	display: flex;
	justify-content: center;
}

.load-more.is-done{
	display: none;
}

.load-more-btn{
	min-width: 190px;
	justify-content: center;
}

.load-more-btn:disabled{
	cursor: wait;
}

/* loader sits where the arrow is, on the right of the text */
.btn-loader{
	position: absolute;
	top: calc(50% - 8px);
	right: 18px;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
}

.load-more-btn.is-loading .btn-loader{
	opacity: 1;
	animation: btn-spin 0.7s linear infinite;
}

.load-more-btn.is-loading::before{
	opacity: 0;
}

@keyframes btn-spin{
	to{ transform: rotate(360deg); }
}

/* new cards slide up into place */
.product-card.is-entering{
	opacity: 0;
	animation: card-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes card-slide-up{
	from{ opacity: 0; transform: translateY(40px); }
	to{ opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
	.product-card.is-entering{
		animation: none;
		opacity: 1;
	}
}

/************************************/
/*** 	 Product Detail Page	  ***/
/************************************/

.site-product{
	background: #fff;
	padding: 80px 0;
}

.site-product-inner{
	display: grid;
	grid-template-columns: 6fr 5fr;
	align-items: start;
	gap: 60px;
}

.product-gallery{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.product-zoom{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	overflow: hidden;
	cursor: zoom-in;
}

.product-zoom-main{
	grid-column: 1 / -1;
	padding: 20px;
}

.product-zoom-thumb{
	aspect-ratio: 1 / 1;
	padding: 8px;
}

.product-zoom img{
	width: 100%;
	height: auto;
	object-fit: contain;
}

.product-zoom-thumb img{
	height: 100%;
}

.product-zoom-hint{
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #000;
	background: var(--accent-color);
	border-radius: 100px;
	padding: 8px 14px;
}

.product-info{
	position: sticky;
	top: 30px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}

.product-cat-badge{
	font-size: 13px;
	font-weight: 600;
	color: #000;
	background: var(--accent-color);
	border-radius: 100px;
	padding: 7px 14px;
}

.product-cat-badge:hover{
	color: #000;
}

.product-title{
	font-size: 36px;
	line-height: 1.2em;
	color: #000;
	margin: 0;
}

.product-desc{
	font-size: 17px;
	line-height: 1.6em;
	color: #000;
	margin: 0;
}

.product-meta{
	align-self: stretch;
	display: flex;
	flex-direction: column;
	list-style: none;
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.product-meta li{
	display: flex;
	justify-content: space-between;
	gap: 20px;
	font-size: 15px;
	padding: 14px 18px;
	border-top: 1px solid var(--divider-color);
}

.product-meta li:first-child{
	border-top: none;
}

.product-meta span{
	color: #000;
}

.product-meta strong,
.product-meta a{
	font-weight: 600;
	color: #000;
	text-align: right;
}

.product-meta a{
	text-decoration: underline;
}

.product-actions{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.product-note{
	align-self: stretch;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--bg-color);
	border-radius: 12px;
	padding: 16px 18px;
}

.product-note i{
	font-size: 18px;
	color: #000;
	padding-top: 2px;
}

.product-note p{
	font-size: 15px;
	line-height: 1.5em;
	color: #000;
	margin: 0;
}

.site-related{
	background: var(--bg-color);
	padding: 90px 0 100px;
}

.site-related-inner{
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.mfp-title{
	color: #fff;
}

/************************************/
/*** 	 404 Page				  ***/
/************************************/

.site-404{
	background: var(--bg-color);
	padding: 110px 0 120px;
}

.site-404-inner{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	text-align: center;
}

.site-404-code{
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--accent-font);
	font-size: 170px;
	font-weight: 700;
	line-height: 1;
	color: #000;
}

.site-404-code i{
	font-size: 130px;
	color: var(--accent-color);
	animation: gear-spin 8s linear infinite;
}

@keyframes gear-spin{
	to{ transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
	.site-404-code i{
		animation: none;
	}
}

.site-404-text{
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 620px;
}

.site-404-text h1{
	font-size: 42px;
	line-height: 1.2em;
	color: #000;
	margin: 0;
}

.site-404-text p{
	font-size: 17px;
	color: #000;
	margin: 0;
}

.site-404-actions{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.site-404-links{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
}

.site-404-links span{
	font-size: 14px;
	font-weight: 600;
	color: #000;
}

.site-404-links ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-404-links a{
	display: block;
	font-size: 14px;
	color: #000;
	background: #fff;
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	padding: 8px 16px;
	transition: all 0.3s ease-in-out;
}

.site-404-links a:hover{
	color: #000;
	border-color: #000;
}

/************************************/
/*** 	 Footer					  ***/
/************************************/

.site-footer{
	padding: 0;
	background: var(--primary-color);
}

.footer-contact-bar{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-bottom: 1px solid var(--dark-divider-color);
}

.footer-contact-card{
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 40px 30px;
	border-left: 1px solid var(--dark-divider-color);
	transition: all 0.3s ease-in-out;
}

.footer-contact-card:first-child{
	border-left: none;
	padding-left: 0;
}

.footer-contact-icon{
	width: 50px;
	height: 50px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--primary-color);
	font-size: 18px;
	transition: all 0.3s ease-in-out;
}

.footer-contact-card:hover .footer-contact-icon{
	background: var(--white-color);
}

.footer-contact-text{
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.footer-contact-text small{
	font-size: 14px;
	color: #fff;
}

.footer-contact-text strong{
	font-family: var(--accent-font);
	font-size: 18px;
	font-weight: 500;
	color: var(--white-color);
	overflow-wrap: anywhere;
}

.footer-main{
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 40px 60px;
	padding: 70px 0;
}

.site-footer .about-footer{
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	max-width: 360px;
}

.about-footer-text{
	margin: 0;
	color: #fff;
}

.footer-links-row{
	display: grid;
	grid-template-columns: 1fr 1fr 1.4fr;
	gap: 30px;
}

.footer-col{
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.footer-col h2{
	font-size: 18px;
	color: var(--white-color);
	margin: 0;
}

.footer-col ul{
	display: flex;
	flex-direction: column;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-col ul li,
.footer-col ul li a{
	color: #fff;
}

.footer-col ul li a:hover{
	color: #fff;
	text-decoration: underline;
}

.footer-icon-list li{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	line-height: 1.5em;
}

.footer-icon-list li i{
	width: 16px;
	flex-shrink: 0;
	line-height: inherit;
	font-size: 14px;
	text-align: center;
	color: var(--accent-color);
}

.footer-bottom{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
	border-top: 1px solid var(--dark-divider-color);
	padding: 25px 0;
}

.footer-bottom p,
.footer-bottom p a{
	font-size: 14px;
	color: #fff;
	margin: 0;
}

.footer-bottom p a{
	font-weight: 600;
}

.footer-bottom p a:hover{
	text-decoration: underline;
}

/************************************/
/*** 	 Responsive				  ***/
/************************************/

@media only screen and (max-width: 1200px){
	.main-menu .mega-menu-box .mega-menu-link{
		width: calc(33.33% - 27px);
	}

	.site-hero .section-title h1{
		font-size: 52px;
	}

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

	.cat-feature{
		padding: 30px;
	}

	.site-about-inner{
		gap: 40px;
	}

	.why-list{
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.site-enquiry-inner{
		gap: 40px;
	}
	.site-faq-inner{
		gap: 40px;
	}
	.site-contact-inner{
		gap: 40px;
	}

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

	.site-values-inner{
		gap: 40px;
	}




	.site-product-inner{
		gap: 40px;
	}

	.product-grid{
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}

	.site-page-header .page-header-box h1{
		font-size: 48px;
	}
}

@media only screen and (max-width: 991px){
	.site-hero{
		background-position: 70% center;
	}

	.site-hero::before{
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 0.6) 100%);
	}

	.site-hero .hero-box{
		padding: 90px 0 80px;
	}

	.site-hero .section-title h1{
		font-size: 44px;
	}

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

	.hero-stats-list li,
	.hero-stats-list li:first-child{
		padding: 22px 0 22px 20px;
		border-left: 1px solid var(--dark-divider-color);
		border-top: 1px solid var(--dark-divider-color);
	}

	.hero-stats-list li:nth-child(odd){
		border-left: none;
		padding-left: 0;
	}

	.hero-stats-list li:nth-child(-n+2){
		border-top: none;
	}
	.site-categories{
		padding: 70px 0;
	}

	.site-categories-inner{
		gap: 40px;
	}

	.section-head .section-title h2{
		font-size: 36px;
	}

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

	.cat-feature-grid{
		grid-template-columns: 1fr;
	}

	.site-about{
		padding: 70px 0;
	}

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

	.site-about-image img{
		aspect-ratio: 4 / 3;
	}

	.why-list{
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.site-enquiry{
		padding: 70px 0;
	}

	.site-enquiry-inner{
		grid-template-columns: 1fr;
	}
	.site-faq{
		padding: 70px 0;
	}

	.site-faq-inner{
		grid-template-columns: 1fr;
	}

	.site-faq-intro{
		position: static;
		gap: 30px;
	}

	.site-page-header{
		padding: 80px 0 70px;
	}

	.site-contact{
		padding: 70px 0;
	}

	.site-contact-inner{
		grid-template-columns: 1fr;
	}

	.site-legal{
		padding: 70px 0;
	}

	.site-units,
	.site-values{
		padding: 70px 0;
	}

	.site-units-inner{
		gap: 40px;
	}

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

	.site-cta{
		padding: 60px 0;
	}

	.site-cta-text h2{
		font-size: 30px;
	}

	.site-products,
	.site-category{
		padding: 60px 0 70px;
	}

	.site-products-inner{
		gap: 45px;
	}








	.site-product{
		padding: 60px 0;
	}

	.site-product-inner{
		grid-template-columns: 1fr;
	}

	.product-info{
		position: static;
	}

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


	.site-related{
		padding: 70px 0;
	}

	.site-404{
		padding: 80px 0 90px;
	}

	.site-404-code{
		font-size: 130px;
	}

	.site-404-code i{
		font-size: 100px;
	}

	.faq-help{
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.faq-help-text{
		flex: 1;
		min-width: 220px;
	}
}

@media only screen and (max-width: 1024px){
	.simple-header .navbar{
		padding: 15px 0;
	}

	.slicknav_menu .desktop-hide{
		display: block;
	}

	/* Mobile menu panel */
	.slicknav_menu{
		border-top: 1px solid var(--dark-divider-color);
		box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
	}

	.slicknav_menu ul.slicknav_nav{
		padding: 10px 20px 25px;
		border-bottom: none;
	}

	.slicknav_nav > li{
		border-bottom: 1px solid var(--dark-divider-color);
	}

	.slicknav_nav > li > a,
	.slicknav_nav > li > .slicknav_row{
		font-size: 17px;
		padding: 16px 0 !important;
	}

	.slicknav_nav a:hover,
	.slicknav_nav a:focus,
	.slicknav_nav .slicknav_row:hover{
		color: #fff;
	}

	.slicknav_arrow:after{
		right: 0;
	}

	.slicknav_open > a .slicknav_arrow:after{
		color: #fff;
	}

	/* Mobile menu: product categories as accordion groups */
	.slicknav_menu ul.dropdown-menu{
		background: transparent;
		padding: 0 0 12px !important;
	}

	.slicknav_nav .mega-menu-box{
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding: 0;
	}

	.slicknav_nav .mega-menu-links-box{
		display: flex;
		flex-direction: column;
		gap: 8px;
		width: 100%;
	}

	.slicknav_menu .mega-menu-link{
		display: flex;
		flex-direction: column;
		width: 100%;
		background: rgba(255, 255, 255, 0.06);
		border: 1px solid var(--dark-divider-color);
		border-radius: 10px;
		overflow: hidden;
	}

	.slicknav_menu .mega-menu-link h2{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		font-size: 15px;
		font-weight: 500;
		letter-spacing: 0;
		text-transform: none;
		color: #fff;
		border: none;
		margin: 0;
		padding: 14px 16px;
		cursor: pointer;
	}

	.slicknav_menu .mega-menu-link h2::after{
		content: '\f067';
		font-family: 'Font Awesome 7 Free', 'Font Awesome 6 Free', 'FontAwesome';
		font-weight: 900;
		font-size: 12px;
		color: #fff;
	}

	.slicknav_menu .mega-menu-link.is-open h2::after{
		content: '\f068';
	}

	.slicknav_menu .mega-menu-link ul{
		display: none;
		flex-direction: column;
		gap: 0;
		border-top: 1px solid var(--dark-divider-color);
		padding: 8px 16px 12px !important;
	}

	.slicknav_menu .mega-menu-link.is-open ul{
		display: flex;
	}

	.slicknav_menu .mega-menu-link ul li{
		margin: 0;
	}

	.slicknav_menu .mega-menu-link ul li a{
		display: block;
		font-size: 15px;
		font-weight: 400;
		color: #fff;
		padding: 8px 0 !important;
	}

	/* Mobile menu: call button */
	.slicknav_nav > li.mobile-call-item{
		border-bottom: none;
		padding-top: 20px;
	}

	.slicknav_nav > li.mobile-call-item > a{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		font-family: var(--accent-font);
		font-size: 16px;
		font-weight: 500;
		color: #000;
		background: var(--accent-color);
		border: 1px solid var(--accent-color);
		border-radius: 10px !important;
		padding: 16px 22px !important;
	}

	.slicknav_nav > li.mobile-call-item > a:hover,
	.slicknav_nav > li.mobile-call-item > a:focus{
		color: #000;
	}

	.slicknav_menu .mega-menu-link{
		width: 100%;
	}

	.footer-main{
		grid-template-columns: 1fr;
		gap: 35px;
	}
}

@media only screen and (max-width: 991px){
	.footer-contact-bar{
		grid-template-columns: 1fr;
	}

	.footer-contact-card,
	.footer-contact-card:first-child{
		border-left: none;
		border-top: 1px solid var(--dark-divider-color);
		padding: 25px 0;
	}

	.footer-contact-card:first-child{
		border-top: none;
	}
}

@media only screen and (max-width: 767px){
	.site-logo{
		gap: 10px;
	}

	.site-logo-icon{
		width: 48px;
		height: 48px;
	}



	.site-logo-name{
		font-size: 24px;
	}

	.site-logo-tag{
		font-size: 9px;
	}

	.footer-main{
		padding: 40px 0;
	}

	.site-hero .hero-box{
		padding: 70px 0 60px;
	}

	.site-hero .section-title h1{
		font-size: 34px;
	}

	.site-hero .hero-content{
		gap: 30px;
	}

	.site-hero .section-title{
		gap: 18px;
	}

	.site-hero .section-title p{
		font-size: 16px;
	}

	.hero-stats-list strong{
		font-size: 24px;
	}

	.site-categories{
		padding: 60px 0;
	}

	.site-categories-inner{
		gap: 30px;
	}

	.section-head .section-title h2{
		font-size: 30px;
	}

	.cat-grid{
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.cat-card{
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 12px;
		text-align: center;
	}

	.cat-card-image{
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.cat-card-content{
		gap: 4px;
	}

	.cat-card-title{
		font-size: 16px;
	}

	.cat-card-count{
		font-size: 13px;
	}

	.cat-card-arrow{
		display: none;
	}

	.cat-feature{
		grid-template-columns: 1fr;
		padding: 25px;
	}

	.cat-feature-image{
		order: -1;
		display: flex;
		justify-content: center;
	}

	.cat-feature-image img{
		max-width: 220px;
	}

	.cat-feature-content h3{
		font-size: 26px;
	}

	.site-about{
		padding: 60px 0;
	}

	.site-about-inner{
		gap: 30px;
	}

	.site-about-content{
		gap: 30px;
	}

	.site-about-image img{
		aspect-ratio: 1 / 1;
	}

	.site-about-badge{
		right: 14px;
		bottom: 14px;
		padding: 12px 16px;
	}

	.site-about-badge strong{
		font-size: 32px;
	}

	.site-about-badge span{
		font-size: 13px;
	}

	.why-list{
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.why-item{
		padding: 16px;
	}

	.why-text strong{
		font-size: 17px;
	}

	.site-enquiry{
		padding: 60px 0;
	}

	.site-enquiry-intro{
		gap: 25px;
	}

	.enquiry-steps li{
		gap: 14px;
		padding: 16px 0;
	}

	.enquiry-step-no{
		font-size: 22px;
		min-width: 34px;
	}

	.enquiry-step-text strong{
		font-size: 17px;
	}

	.enquiry-card{
		padding: 22px;
		border-radius: 16px;
	}

	.enquiry-form-grid{
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.enquiry-form-footer .btn-default{
		width: 100%;
		justify-content: center;
	}

	.ticker-row{
		padding: 18px 0;
	}

	.ticker-list,
	.ticker-list li{
		gap: 30px;
	}

	.ticker-list{
		padding: 0 15px;
	}

	.ticker-list li{
		font-size: 18px;
	}

	.ticker-list li i{
		font-size: 14px;
	}

	.site-faq{
		padding: 60px 0;
	}

	.site-faq-inner{
		gap: 30px;
	}

	.faq-help{
		flex-direction: column;
		align-items: flex-start;
		padding: 22px;
	}

	.faq-help-text strong{
		font-size: 19px;
	}

	.faq-item summary{
		font-size: 16px;
		gap: 14px;
		padding: 16px 18px;
	}

	.faq-item summary::after{
		width: 30px;
		height: 30px;
		font-size: 12px;
	}

	.faq-answer p{
		font-size: 15px;
		padding: 14px 18px 18px;
	}

	.site-page-header{
		padding: 60px 0 50px;
	}

	.site-page-header .page-header-box{
		gap: 14px;
	}

	.site-page-header .page-header-box h1{
		font-size: 34px;
	}

	.site-page-header .page-header-box p{
		font-size: 16px;
	}

	.site-contact{
		padding: 60px 0;
	}

	.site-contact-details{
		gap: 25px;
	}

	.site-contact .section-head .section-title h2{
		font-size: 28px;
	}

	.contact-item{
		padding: 16px;
		gap: 14px;
	}

	.site-map iframe{
		height: 320px;
	}

	.site-legal{
		padding: 50px 0 60px;
	}

	.legal-content{
		gap: 28px;
	}

	.legal-block h2{
		font-size: 21px;
	}

	.about-facts{
		gap: 10px;
	}

	.about-facts li{
		padding: 12px 14px;
	}

	.about-facts strong{
		font-size: 16px;
	}

	.site-units,
	.site-values{
		padding: 60px 0;
	}

	.site-units-inner,
	.values-col{
		gap: 30px;
	}

	.units-grid{
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.unit-card{
		flex-direction: row;
		align-items: flex-start;
		flex-wrap: wrap;
		column-gap: 16px;
		padding: 20px;
	}

	.unit-card .unit-icon{
		width: 44px;
		height: 44px;
		font-size: 17px;
	}

	.unit-card h3{
		flex: 1;
		align-self: center;
		font-size: 18px;
	}

	.unit-card p{
		flex-basis: 100%;
	}

	.units-banner{
		border-radius: 14px;
	}

	.units-banner img{
		aspect-ratio: 16 / 9;
	}

	.values-list li{
		gap: 14px;
		padding: 16px 0;
	}

	.values-no{
		font-size: 21px;
		min-width: 32px;
	}

	.values-list p{
		font-size: 16px;
	}

	.why-col{
		padding: 24px;
		gap: 20px;
	}

	.site-values .why-col h3{
		font-size: 21px;
	}

	.site-cta{
		padding: 50px 0;
	}

	.site-cta-text h2{
		font-size: 26px;
	}

	.site-cta-actions{
		width: 100%;
		flex-direction: column;
	}

	.site-cta-actions .btn-default{
		justify-content: center;
	}

	.site-products-inner{
		gap: 36px;
	}

	.products-toolbar{
		padding: 16px;
		gap: 14px;
	}

	.products-jump{
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
	}

	.products-jump a{
		white-space: nowrap;
	}

	.product-group{
		gap: 18px;
	}

	.product-group-head h2{
		font-size: 22px;
	}

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

	.category-intro{
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 20px;
	}

	.category-intro-image{
		max-width: 180px;
	}

	.category-intro-body h2{
		font-size: 24px;
	}

	.category-intro-actions,
	.product-actions{
		width: 100%;
		flex-direction: column;
	}

	.category-intro-actions .btn-default,
	.product-actions .btn-default{
		justify-content: center;
	}






	.product-grid{
		gap: 12px;
	}

	.product-card{
		gap: 10px;
		padding: 10px 10px 12px;
		border-radius: 12px;
	}

	.product-card-title{
		font-size: 14px;
	}

	.product-card-text{
		font-size: 12px;
	}

	.product-card-btn{
		align-self: stretch;
		justify-content: center;
		font-size: 13px;
		padding: 12px 34px 12px 14px;
	}

	.category-chips{
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
	}

	.category-chips a{
		white-space: nowrap;
	}

	.product-zoom-main{
		padding: 12px;
	}

	.product-title{
		font-size: 26px;
	}

	.product-desc{
		font-size: 16px;
	}

	.site-related{
		padding: 60px 0;
	}

	.site-related-inner{
		gap: 30px;
	}

	.site-404{
		padding: 60px 0 70px;
	}

	.site-404-inner{
		gap: 24px;
	}

	.site-404-code{
		font-size: 96px;
	}

	.site-404-code i{
		font-size: 72px;
	}

	.site-404-text h1{
		font-size: 28px;
	}

	.site-404-text p{
		font-size: 16px;
	}

	.legal-block p,
	.legal-block li{
		font-size: 15px;
	}

	.hero-stats-list span{
		font-size: 14px;
	}

	.footer-links-row{
		grid-template-columns: 1fr 1fr;
		gap: 35px 20px;
	}

	.footer-col-contact{
		grid-column: 1 / -1;
		border-top: 1px solid var(--dark-divider-color);
		padding-top: 30px;
	}

	.footer-col{
		gap: 20px;
	}

	.footer-col ul{
		gap: 14px;
	}

	.footer-col h2{
		font-size: 17px;
	}

	.footer-contact-card,
	.footer-contact-card:first-child{
		padding: 20px 0;
	}

	.footer-contact-icon{
		width: 44px;
		height: 44px;
		font-size: 16px;
	}

	.footer-contact-text strong{
		font-size: 16px;
	}

	.site-footer .about-footer{
		max-width: none;
	}

	.footer-bottom{
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 6px;
		padding: 20px 0;
	}

	.footer-bottom p,
	.footer-bottom p a{
		font-size: 13px;
	}
}