/*!
Theme Name: Sunrise Ecosystems
Theme URI: http://underscores.me/
Author: Codes & Ideas
Author URI: https://codesandideas.com
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: sunrise-ecosystems
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.

Sunrise Ecosystems 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
--------------------------------------------------------------*/

:root {
	--primary-color: #7a5b46;
	--primary-color-rgb: 122, 91, 70;
	--secondary-color: #f99334;
	--secondary-color-rgb: 249, 147, 52;
	--tertiary-color: #F4F7FB;
	--tertiary-color-rgb: 244, 247, 251;
}

.logo-main {
	max-width: 120px;
	padding: 8px 0;
}

.logo-scroll {
	max-width: 130px;
}

.logo-hover-scale {
	transition: transform 0.25s ease, filter 0.25s ease;
}

.logo-hover-scale:hover {
	transform: scale(1.1);
}

.text-primary {
	color: var(--primary-color) !important;
}

.bg-primary {
	background-color: var(--primary-color) !important;
}

.border-primary {
	border-color: var(--primary-color) !important;
}

.text-secondary {
	color: var(--secondary-color) !important;
}

.bg-secondary {
	background-color: var(--secondary-color) !important;
}

.border-secondary {
	border-color: var(--secondary-color) !important;
}

.text-tertiary {
	color: var(--tertiary-color) !important;
}

.bg-tertiary {
	background-color: var(--tertiary-color) !important;
}

.border-tertiary {
	border-color: var(--tertiary-color) !important;
}

/*--------------------------------------------------------------
# Timeline Milestones
--------------------------------------------------------------*/

/* @import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600;700&display=swap'); */

.milestone-section {
	background: linear-gradient(135deg, #fafafa 0%, #ffffff 50%, #fafafa 100%);
	padding: 80px 0 !important;
	position: relative;
	overflow: hidden;
}

.milestone-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		radial-gradient(circle at 20% 30%, rgba(122, 91, 70, 0.03) 0%, transparent 50%),
		radial-gradient(circle at 80% 70%, rgba(249, 147, 52, 0.03) 0%, transparent 50%);
	pointer-events: none;
}

.milestone-heading {
	font-size: 2.5rem;
	color: var(--primary-color);
	letter-spacing: -0.02em;
	position: relative;
	z-index: 1;
}

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

/* Central Timeline Line */
.timeline-line {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(to bottom,
			transparent 0%,
			var(--primary-color) 10%,
			var(--primary-color) 90%,
			transparent 100%);
	transform: translateX(-50%);
	z-index: 1;
}

/* Timeline Items */
.timeline-item {
	position: relative;
	margin-bottom: 10px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.timeline-item.timeline-visible {
	opacity: 1;
	transform: translateY(0);
}

.timeline-item:nth-child(odd) .timeline-content {
	margin-right: calc(50% + 50px);
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.timeline-item:nth-child(even) .timeline-content {
	margin-left: calc(50% + 50px);
	text-align: left;
}

/* Timeline Content */
.timeline-content {
	background: white;
	padding: 24px 32px;
	border-radius: 12px;
	box-shadow:
		0 4px 20px rgba(0, 0, 0, 0.06),
		0 0 0 1px rgba(122, 91, 70, 0.08);
	position: relative;
	transition: all 0.3s ease;
}

.timeline-item:hover .timeline-content {
	transform: translateY(-4px);
	box-shadow:
		0 8px 30px rgba(0, 0, 0, 0.12),
		0 0 0 1px rgba(122, 91, 70, 0.12);
}

/* Arrow pointing to timeline */
.timeline-item:nth-child(odd) .timeline-content::after {
	content: '';
	position: absolute;
	right: -12px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 0 12px 12px;
	border-color: transparent transparent transparent white;
	filter: drop-shadow(2px 0 2px rgba(0, 0, 0, 0.05));
}

.timeline-item:nth-child(even) .timeline-content::after {
	content: '';
	position: absolute;
	left: -12px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 12px 12px 0;
	border-color: transparent white transparent transparent;
	filter: drop-shadow(-2px 0 2px rgba(0, 0, 0, 0.05));
}

/* Timeline Year */
.timeline-year {
	/* font-family: 'Crimson Pro', serif; */
	font-size: 2rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 8px;
	letter-spacing: -0.01em;
	line-height: 1;
}

/* Timeline Text */
.timeline-text {
	font-size: 1.05rem;
	color: #333;
	line-height: 1.6;
	font-weight: 400;
	padding-left: 0;
	width: 100%;
}

/* Timeline Node (Circle on the line) */
.timeline-node {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 24px;
	height: 24px;
	background: white;
	border: 3px solid var(--primary-color);
	border-radius: 50%;
	z-index: 2;
	box-shadow: 0 0 0 6px rgba(122, 91, 70, 0.1);
	transition: all 0.3s ease;
}

.timeline-node-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	width: 10px;
	height: 10px;
	background: var(--secondary-color);
	border-radius: 50%;
	transition: transform 0.3s ease;
}

.timeline-item.timeline-visible .timeline-node-inner {
	transform: translate(-50%, -50%) scale(1);
}

.timeline-item:hover .timeline-node {
	border-color: var(--secondary-color);
	box-shadow: 0 0 0 8px rgba(249, 147, 52, 0.15);
	transform: translate(-50%, -50%) scale(1.2);
}

/* Responsive Design */
@media (max-width: 768px) {
	.milestone-section {
		padding: 60px 0 !important;
	}

	.milestone-heading {
		font-size: 2rem;
	}

	.timeline-line {
		left: 30px;
	}

	.timeline-item:nth-child(odd) .timeline-content,
	.timeline-item:nth-child(even) .timeline-content {
		margin-left: 70px;
		margin-right: 0;
		text-align: left;
		align-items: flex-start;
	}

	.timeline-item:nth-child(odd) .timeline-content::after {
		right: auto;
		left: -12px;
		border-width: 12px 12px 12px 0;
		border-color: transparent white transparent transparent;
	}

	.timeline-node {
		left: 30px;
	}

	.timeline-year {
		font-size: 1.5rem;
	}

	.timeline-text {
		font-size: 0.95rem;
	}

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


h2 {
	color: var(--primary-color);
}

/*--------------------------------------------------------------
# Leadership Section
--------------------------------------------------------------*/

.leadership-section {
	padding: 100px 0;
	background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
	position: relative;
	overflow: hidden;
}

.leadership-section::before {
	content: '';
	position: absolute;
	top: 0;
	right: -200px;
	width: 800px;
	height: 800px;
	background: radial-gradient(circle, rgba(122, 91, 70, 0.03) 0%, transparent 70%);
	pointer-events: none;
}

.leadership-section::after {
	content: '';
	position: absolute;
	bottom: -200px;
	left: -200px;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(249, 147, 52, 0.04) 0%, transparent 70%);
	pointer-events: none;
}

/* Header Styles */
.leadership-header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 80px;
	position: relative;
}

.leadership-label {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--secondary-color);
	margin-bottom: 20px;
	position: relative;
	padding: 0 30px;
}

.leadership-label::before,
.leadership-label::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 20px;
	height: 2px;
	background: var(--secondary-color);
}

.leadership-label::before {
	left: 0;
}

.leadership-label::after {
	right: 0;
}

.leadership-title {
	font-size: 2.75rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 24px;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.leadership-intro {
	font-size: 1.125rem;
	line-height: 1.8;
	color: #555;
	margin: 0;
	font-weight: 400;
}

/* Leadership Grid */
.leadership-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
	gap: 50px;
	margin-bottom: 80px;
	position: relative;
}

/* Leader Card */
.leader-card {
	opacity: 0;
	transform: translateY(30px);
	animation: fadeInUp 0.8s ease forwards;
}

.leader-card:nth-child(1) {
	animation-delay: 0.1s;
}

.leader-card:nth-child(2) {
	animation-delay: 0.3s;
}

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

.leader-card-inner {
	background: white;
	border-radius: 16px;
	overflow: hidden;
	box-shadow:
		0 4px 20px rgba(0, 0, 0, 0.06),
		0 0 0 1px rgba(0, 0, 0, 0.04);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.leader-card-inner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.leader-card:hover .leader-card-inner {
	transform: translateY(-8px);
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.12),
		0 0 0 1px rgba(122, 91, 70, 0.1);
}

.leader-card:hover .leader-card-inner::before {
	transform: scaleX(1);
}

/* Leader Image */
.leader-image-wrapper {
	position: relative;
	width: 100%;
	height: 320px;
	overflow: hidden;
	background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

.leader-image {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.leader-image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.02) 100%);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.leader-card:hover .leader-image {
	transform: scale(1.05);
}

.leader-card:hover .leader-image-overlay {
	opacity: 1;
}

/* Leader Content */
.leader-content {
	padding: 40px 36px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.leader-header-info {
	margin-bottom: 32px;
	position: relative;
	padding-bottom: 24px;
}

.leader-header-info::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 60px;
	height: 3px;
	background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.leader-card:hover .leader-header-info::after {
	width: 100px;
}

.leader-name {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--primary-color);
	margin: 0 0 8px 0;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.leader-role {
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--secondary-color);
	text-transform: uppercase;
	letter-spacing: 1.5px;
}

/* Credentials */
.leader-credentials {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.credential-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px;
	background: #fafafa;
	border-radius: 10px;
	transition: all 0.3s ease;
	border-left: 3px solid transparent;
}

.credential-item:hover {
	background: #f5f5f5;
	border-left-color: var(--secondary-color);
	transform: translateX(4px);
}

.credential-icon {
	font-size: 1.25rem;
	flex-shrink: 0;
	margin-top: 2px;
	filter: grayscale(0.3);
	transition: filter 0.3s ease;
}

.credential-item:hover .credential-icon {
	filter: grayscale(0);
}

.credential-text {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #444;
	font-weight: 400;
}

/* Footer */
.leadership-footer {
	text-align: center;
	max-width: 700px;
	margin: 0 auto;
	position: relative;
}

.leadership-footer-line {
	width: 100px;
	height: 3px;
	background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
	margin: 0 auto 32px;
	border-radius: 2px;
}

.leadership-footer-text {
	font-size: 1.0625rem;
	line-height: 1.8;
	color: #666;
	margin: 0;
	font-weight: 400;
	font-style: italic;
}

/* Responsive Design */
@media (max-width: 1200px) {
	.leadership-grid {
		grid-template-columns: 1fr;
		max-width: 650px;
		margin-left: auto;
		margin-right: auto;
	}
}

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

	.leadership-header {
		margin-bottom: 50px;
	}

	.leadership-title {
		font-size: 2rem;
	}

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

	.leadership-grid {
		grid-template-columns: 1fr;
		gap: 40px;
		margin-bottom: 50px;
		min-width: 0;
	}

	.leader-image-wrapper {
		height: 280px;
	}

	.leader-content {
		padding: 32px 24px;
	}

	.leader-name {
		font-size: 1.5rem;
	}

	.credential-item {
		padding: 14px;
		gap: 12px;
	}

	.credential-text {
		font-size: 0.875rem;
	}
}

@media (max-width: 576px) {
	.leadership-title {
		font-size: 1.75rem;
	}

	.leadership-label {
		font-size: 0.7rem;
		letter-spacing: 2px;
	}

	.leader-image-wrapper {
		height: 240px;
	}

	.leader-content {
		padding: 28px 20px;
	}

	.leader-name {
		font-size: 1.375rem;
	}

	.credential-icon {
		font-size: 1.125rem;
	}
}


section {
	padding: 80px 0 80px 0;
}

/*--------------------------------------------------------------
# Form Inputs & Contact Form 7
--------------------------------------------------------------*/

/* Import distinctive font for forms */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap');

/* Form-specific CSS variables */
:root {
	--form-font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
	--form-bg: #ffffff;
	--form-border: #d4c4b8;
	--form-border-hover: #b8a595;
	--form-border-focus: var(--primary-color);
	--form-text: #2d2520;
	--form-label: #6b5d52;
	--form-placeholder: #a89888;
	--form-shadow-subtle: 0 1px 3px rgba(122, 91, 70, 0.04);
	--form-shadow-focus: 0 0 0 3px rgba(122, 91, 70, 0.08), 0 4px 12px rgba(122, 91, 70, 0.12);
	--form-shadow-error: 0 0 0 3px rgba(220, 53, 69, 0.1), 0 4px 12px rgba(220, 53, 69, 0.15);
	--form-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base form wrapper */
.wpcf7 {
	font-family: var(--form-font-family);
}

/* Form field wrapper for spacing */
.wpcf7 p {
	/* margin-bottom: 10px; */
	position: relative;
}

/* Label styling */
.wpcf7 label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--form-label);
	margin-bottom: 8px;
	letter-spacing: 0.01em;
	transition: color 0.3s ease;
}

/* Required asterisk */
.wpcf7 label .wpcf7-form-control-wrap::before {
	content: '';
}

/* Base input styling - applies to all text-type inputs */
.wpcf7-text,
.wpcf7-email,
.wpcf7-tel,
.wpcf7-url,
.wpcf7-number,
.wpcf7-date,
.wpcf7-textarea,
.wpcf7-select {
	width: 100%;
	font-family: var(--form-font-family);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--form-text);
	background-color: var(--form-bg);
	background-image: linear-gradient(to bottom, #fafaf9 0%, #ffffff 100%);
	border: 1.5px solid var(--form-border);
	border-radius: 10px;
	padding: 14px 18px;
	transition: var(--form-transition);
	box-shadow: var(--form-shadow-subtle), inset 0 1px 2px rgba(0, 0, 0, 0.03);
	appearance: none;
	-webkit-appearance: none;
}

/* Placeholder styling */
.wpcf7-text::placeholder,
.wpcf7-email::placeholder,
.wpcf7-tel::placeholder,
.wpcf7-url::placeholder,
.wpcf7-number::placeholder,
.wpcf7-date::placeholder,
.wpcf7-textarea::placeholder {
	color: var(--form-placeholder);
	opacity: 1;
	font-weight: 300;
}

/* Hover state - subtle warmth */
.wpcf7-text:hover,
.wpcf7-email:hover,
.wpcf7-tel:hover,
.wpcf7-url:hover,
.wpcf7-number:hover,
.wpcf7-date:hover,
.wpcf7-textarea:hover,
.wpcf7-select:hover {
	border-color: var(--form-border-hover);
	background-image: linear-gradient(to bottom, #ffffff 0%, #fefefe 100%);
}

/* Focus state - warm sunrise glow */
.wpcf7-text:focus,
.wpcf7-email:focus,
.wpcf7-tel:focus,
.wpcf7-url:focus,
.wpcf7-number:focus,
.wpcf7-date:focus,
.wpcf7-textarea:focus,
.wpcf7-select:focus {
	outline: none;
	border-color: var(--form-border-focus);
	background-color: #ffffff;
	background-image: none;
	box-shadow: var(--form-shadow-focus);
}

/* Textarea specific */
.wpcf7-textarea {
	min-height: 140px;
	resize: vertical;
	line-height: 1.6;
}

/* Select dropdown */
.wpcf7-select {
	cursor: pointer;
	background-image:
		linear-gradient(to bottom, #fafaf9 0%, #ffffff 100%),
		url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237a5b46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat;
	background-position: 0 0, right 16px center;
	padding-right: 45px;
}

.wpcf7-select:focus {
	background-image:
		none,
		url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237a5b46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Disabled state */
.wpcf7-text:disabled,
.wpcf7-email:disabled,
.wpcf7-tel:disabled,
.wpcf7-url:disabled,
.wpcf7-number:disabled,
.wpcf7-date:disabled,
.wpcf7-textarea:disabled,
.wpcf7-select:disabled {
	background-color: #f5f3f1;
	background-image: none;
	border-color: #e5e0db;
	color: #9b8f82;
	cursor: not-allowed;
	opacity: 0.7;
}

/* Checkboxes and Radio Buttons */
.wpcf7-checkbox,
.wpcf7-radio {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wpcf7-list-item {
	margin: 0;
	display: flex;
	align-items: center;
	position: relative;
}

.wpcf7-list-item-label {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 0.9375rem;
	color: var(--form-text);
	font-weight: 400;
	padding-left: 32px;
	position: relative;
	user-select: none;
	line-height: 1.5;
	transition: color 0.2s ease;
}

/* Hide default checkbox/radio */
.wpcf7-checkbox input[type="checkbox"],
.wpcf7-radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	width: 0;
	height: 0;
}

/* Custom checkbox/radio box */
.wpcf7-list-item-label::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	border: 2px solid var(--form-border);
	background: white;
	box-shadow: var(--form-shadow-subtle);
	transition: var(--form-transition);
}

.wpcf7-checkbox .wpcf7-list-item-label::before {
	border-radius: 5px;
}

.wpcf7-radio .wpcf7-list-item-label::before {
	border-radius: 50%;
}

/* Custom checkmark/radio dot */
.wpcf7-list-item-label::after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%) scale(0);
	transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Checkbox checkmark */
.wpcf7-checkbox .wpcf7-list-item-label::after {
	left: 6px;
	top: calc(50% - 3px);
	width: 8px;
	height: 14px;
	border: solid white;
	border-width: 0 2.5px 2.5px 0;
	transform: translateY(-50%) rotate(45deg) scale(0);
}

/* Radio dot */
.wpcf7-radio .wpcf7-list-item-label::after {
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

/* Hover state */
.wpcf7-list-item-label:hover::before {
	border-color: var(--form-border-hover);
	box-shadow: 0 2px 6px rgba(122, 91, 70, 0.08);
}

/* Checked state */
.wpcf7-checkbox input[type="checkbox"]:checked~.wpcf7-list-item-label::before,
.wpcf7-radio input[type="radio"]:checked~.wpcf7-list-item-label::before {
	background: linear-gradient(135deg, var(--primary-color) 0%, #8d6b54 100%);
	border-color: var(--primary-color);
	box-shadow: 0 2px 8px rgba(122, 91, 70, 0.25);
}

.wpcf7-checkbox input[type="checkbox"]:checked~.wpcf7-list-item-label::after,
.wpcf7-radio input[type="radio"]:checked~.wpcf7-list-item-label::after {
	transform: translateY(-50%) rotate(45deg) scale(1);
}

.wpcf7-radio input[type="radio"]:checked~.wpcf7-list-item-label::after {
	transform: translateY(-50%) scale(1);
}

/* Focus state for accessibility */
.wpcf7-checkbox input[type="checkbox"]:focus~.wpcf7-list-item-label::before,
.wpcf7-radio input[type="radio"]:focus~.wpcf7-list-item-label::before {
	box-shadow: 0 0 0 3px rgba(122, 91, 70, 0.15);
}

/* File upload */
.wpcf7-file {
	font-family: var(--form-font-family);
	font-size: 0.9375rem;
	color: var(--form-text);
	padding: 12px 18px;
	border: 1.5px dashed var(--form-border);
	border-radius: 10px;
	background: linear-gradient(135deg, #fafaf9 0%, #ffffff 100%);
	cursor: pointer;
	transition: var(--form-transition);
	width: 100%;
}

.wpcf7-file:hover {
	border-color: var(--form-border-hover);
	background: white;
}

.wpcf7-file:focus {
	outline: none;
	border-color: var(--form-border-focus);
	border-style: solid;
	box-shadow: var(--form-shadow-focus);
}

.wpcf7-file::file-selector-button {
	font-family: var(--form-font-family);
	font-weight: 500;
	font-size: 0.875rem;
	padding: 8px 16px;
	margin-right: 12px;
	background: var(--primary-color);
	color: white;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: var(--form-transition);
	letter-spacing: 0.02em;
}

.wpcf7-file::file-selector-button:hover {
	background: #8d6b54;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(122, 91, 70, 0.25);
}

/* Submit button */
.wpcf7-submit {
	font-family: var(--form-font-family);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 15px 40px;
	background: linear-gradient(135deg, var(--primary-color) 0%, #8d6b54 100%);
	color: white;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: var(--form-transition);
	box-shadow:
		0 4px 12px rgba(122, 91, 70, 0.2),
		inset 0 -2px 0 rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
}

.wpcf7-submit::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.5s ease;
}

.wpcf7-submit:hover {
	transform: translateY(-2px);
	box-shadow:
		0 8px 20px rgba(122, 91, 70, 0.3),
		inset 0 -2px 0 rgba(0, 0, 0, 0.1);
}

.wpcf7-submit:hover::before {
	left: 100%;
}

.wpcf7-submit:active {
	transform: translateY(0);
	box-shadow:
		0 2px 8px rgba(122, 91, 70, 0.2),
		inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.wpcf7-submit:disabled {
	background: #c4b5a8;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Validation styling */
.wpcf7-not-valid {
	border-color: #dc3545 !important;
	box-shadow: var(--form-shadow-error) !important;
	animation: shake 0.4s ease;
}

@keyframes shake {

	0%,
	100% {
		transform: translateX(0);
	}

	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translateX(-4px);
	}

	20%,
	40%,
	60%,
	80% {
		transform: translateX(4px);
	}
}

.wpcf7-not-valid-tip {
	font-family: var(--form-font-family);
	font-size: 0.8125rem;
	color: #dc3545;
	margin-top: 6px;
	display: block;
	font-weight: 500;
	animation: slideDown 0.3s ease;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

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

/* Form response messages */
.wpcf7-response-output {
	font-family: var(--form-font-family);
	margin: 24px 0 0;
	padding: 16px 20px;
	border-radius: 10px;
	font-size: 0.9375rem;
	font-weight: 500;
	border: 1.5px solid;
	animation: slideDown 0.4s ease;
}

.wpcf7-mail-sent-ok {
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	border-color: #86efac;
	color: #166534;
	box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

.wpcf7-mail-sent-ng,
.wpcf7-aborted {
	background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
	border-color: #fca5a5;
	color: #991b1b;
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

.wpcf7-spam-blocked {
	background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
	border-color: #fde047;
	color: #854d0e;
	box-shadow: 0 4px 12px rgba(234, 179, 8, 0.15);
}

.wpcf7-validation-errors {
	background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
	border-color: #fdba74;
	color: #9a3412;
	box-shadow: 0 4px 12px rgba(249, 115, 22, 0.15);
}

/* Spinner (loading state) */
.wpcf7-spinner {
	margin-left: 12px;
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(122, 91, 70, 0.2);
	border-top-color: var(--primary-color);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

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

/* Acceptance checkbox (terms, privacy, etc.) */
.wpcf7-acceptance .wpcf7-list-item-label {
	font-size: 0.875rem;
	line-height: 1.6;
}

.wpcf7-acceptance a {
	color: var(--primary-color);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.2s ease;
}

.wpcf7-acceptance a:hover {
	color: var(--secondary-color);
}

/* Quiz field */
.wpcf7-quiz {
	font-family: var(--form-font-family);
}

/* Form control wrapper (for better spacing with CF7) */
.wpcf7-form-control-wrap {
	display: block;
	position: relative;
}

/* Multi-column forms */
.wpcf7-form .form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	margin-bottom: 24px;
}

.wpcf7-form .form-row>p {
	margin-bottom: 0;
}

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

	.wpcf7-text,
	.wpcf7-email,
	.wpcf7-tel,
	.wpcf7-url,
	.wpcf7-number,
	.wpcf7-date,
	.wpcf7-textarea,
	.wpcf7-select {
		font-size: 16px;
		/* Prevents zoom on iOS */
		padding: 12px 16px;
	}

	.wpcf7-submit {
		width: 100%;
		padding: 14px 32px;
	}

	.wpcf7-form .form-row {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* Autofill styling */
.wpcf7-text:-webkit-autofill,
.wpcf7-email:-webkit-autofill,
.wpcf7-tel:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #fefdfb inset;
	-webkit-text-fill-color: var(--form-text);
	transition: background-color 5000s ease-in-out 0s;
}

/* Accessibility - focus visible for keyboard navigation */
.wpcf7-text:focus-visible,
.wpcf7-email:focus-visible,
.wpcf7-tel:focus-visible,
.wpcf7-url:focus-visible,
.wpcf7-number:focus-visible,
.wpcf7-date:focus-visible,
.wpcf7-textarea:focus-visible,
.wpcf7-select:focus-visible,
.wpcf7-submit:focus-visible {
	outline: 2px solid var(--secondary-color);
	outline-offset: 2px;
}

/*--------------------------------------------------------------
# Contact Page Styling
--------------------------------------------------------------*/

/* Import distinctive font for contact page */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* Contact page specific variables */
:root {
	--contact-font: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	--contact-bg-warm: #faf8f6;
	--contact-card-bg: #ffffff;
	--contact-shadow-sm: 0 2px 8px rgba(122, 91, 70, 0.06);
	--contact-shadow-md: 0 8px 24px rgba(122, 91, 70, 0.1);
	--contact-shadow-lg: 0 16px 48px rgba(122, 91, 70, 0.15);
	--contact-accent-gradient: linear-gradient(135deg, var(--primary-color) 0%, #8d6b54 50%, var(--secondary-color) 100%);
}

/* Contact Section Wrapper */
.top-10 {
	background: var(--contact-bg-warm);
	position: relative;
	overflow: hidden;
	padding: 80px 0 !important;
}

/* Subtle background texture */
.top-10::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		radial-gradient(circle at 15% 20%, rgba(122, 91, 70, 0.02) 0%, transparent 45%),
		radial-gradient(circle at 85% 80%, rgba(249, 147, 52, 0.025) 0%, transparent 45%);
	pointer-events: none;
	z-index: 0;
}

.top-10>.container {
	position: relative;
	z-index: 1;
}

/* Contact page intro text */
.top-10 .lead {
	font-family: var(--contact-font);
	font-size: 1.25rem;
	line-height: 1.75;
	color: #4a4139;
	font-weight: 400;
	margin-bottom: 0;
	letter-spacing: -0.01em;
}

/* Location Cards Grid */
.top-10 .row.g-4 {
	margin-bottom: 80px;
}

/* Individual Location Card */
.top-10 .col-lg-6 {
	opacity: 0;
	transform: translateY(30px);
	animation: contactFadeUp 0.8s ease forwards;
}

.top-10 .col-lg-6:nth-child(1) {
	animation-delay: 0.1s;
}

.top-10 .col-lg-6:nth-child(2) {
	animation-delay: 0.25s;
}

.top-10 .col-lg-6:nth-child(3) {
	animation-delay: 0.4s;
}

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

/* Location Card Styling */
.top-10 .bg-light {
	background: var(--contact-card-bg) !important;
	border: 1px solid rgba(122, 91, 70, 0.08) !important;
	box-shadow: var(--contact-shadow-sm) !important;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	font-family: var(--contact-font);
}

/* Top accent line */
.top-10 .bg-light::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--contact-accent-gradient);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Map Embed Container */
.map-embed {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	/* 16:9 aspect ratio */
	border-radius: 10px;
	overflow: hidden;
	background: linear-gradient(135deg, #e8e4e0 0%, #f2efec 100%);
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08);
	margin-bottom: 28px !important;
}

.map-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	transition: filter 0.3s ease;
}

/* Location Card Typography */
.top-10 .bg-light h4 {
	font-family: var(--contact-font);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 5px !important;
	letter-spacing: -0.02em;
	position: relative;
	padding-bottom: 12px;
}

.top-10 .bg-light h4::after {
	/* content: ''; */
	position: absolute;
	bottom: 0;
	left: 0;
	width: 50px;
	height: 2px;
	background: var(--secondary-color);
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.top-10 .bg-light p {
	font-family: var(--contact-font);
	font-size: 1rem;
	line-height: 1.7;
	color: #555;
	/* margin-bottom: 24px !important; */
	font-weight: 400;
}

/* Contact Info Labels */
.top-10 .fw-semibold {
	font-family: var(--contact-font);
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--primary-color);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 10px;
	display: inline-block;
	position: relative;
	padding-left: 20px;
}

.top-10 .fw-semibold::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 2px;
	background: var(--secondary-color);
}

/* Contact Links */
.top-10 .bg-light a {
	color: #2d2520;
	text-decoration: none;
	/* font-weight: 500; */
	transition: all 0.3s ease;
	position: relative;
	display: inline-block;
	letter-spacing: -0.01em;
}

.top-10 .bg-light a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--secondary-color);
	transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Phone Numbers List */
.top-10 .list-unstyled {
	margin-bottom: 20px !important;
}

.top-10 .list-unstyled li {
	margin-bottom: 8px;
}

.top-10 .list-unstyled li:last-child {
	margin-bottom: 0;
}

/* Contact Info Sections Spacing */
.top-10 .bg-light>div:not(.map-embed) {
	margin-bottom: 20px;
}

.top-10 .bg-light>div:last-child {
	margin-bottom: 0;
}

/* Contact Form Section */
.contact-form-section {
	max-width: 800px;
	margin: 0 auto;
	padding: 60px 40px;
	background: white;
	border-radius: 16px;
	/* box-shadow: var(--contact-shadow-md); */
	position: relative;
	overflow: hidden;
	/* border: 1px solid rgba(122, 91, 70, 0.06); */
}


/* Form Section Headings */
.top-10 h2 {
	font-family: var(--contact-font);
	font-size: 2.25rem;
	font-weight: 800;
	color: var(--primary-color);
	margin: 80px 0 20px 0;
	text-align: center;
	letter-spacing: -0.03em;
	line-height: 1.2;
	position: relative;
	padding-bottom: 20px;
}


.top-10>p {
	font-family: var(--contact-font);
	font-size: 1.125rem;
	line-height: 1.7;
	color: #555;
	text-align: center;
	max-width: 700px;
	margin: 0 auto 40px;
	font-weight: 400;
	letter-spacing: -0.01em;
}

/* Form Container Wrapper */
.top-10 .wpcf7 {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto;
}

/* Enhanced form styling for contact page */
.top-10 .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.top-10 .wpcf7-form p {
	margin-bottom: 0;
}

/* Two-column layout for name/email fields */
.contact-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

/* Form Submit Button Container */
.top-10 .wpcf7-form>p:last-child {
	text-align: center;
	margin-top: 12px;
}

/* Empty State Message */


/* Responsive Design */
@media (max-width: 992px) {
	.top-10 {
		padding: 60px 0 !important;
	}

	.top-10 h2 {
		font-size: 2rem;
		margin: 60px 0 16px 0;
	}

	.contact-form-section {
		padding: 50px 32px;
	}
}

@media (max-width: 768px) {
	.top-10 {
		padding: 50px 0 !important;
	}

	.top-10 .lead {
		font-size: 1.125rem;
		padding: 40px 24px;
	}

	.top-10 h2 {
		font-size: 1.75rem;
		margin: 50px 0 14px 0;
	}

	.top-10>p {
		font-size: 1.0625rem;
		margin-bottom: 32px;
	}

	.contact-form-section {
		padding: 40px 24px;
		border-radius: 12px;
	}

	.contact-form-row {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.top-10 .bg-light h4 {
		font-size: 1.375rem;
	}

	.map-embed {
		margin-bottom: 24px !important;
	}
}

@media (max-width: 576px) {
	.top-10 {
		padding: 40px 0 !important;
	}

	.top-10 .lead {
		font-size: 1.0625rem;
		padding: 32px 20px;
	}

	.top-10 h2 {
		font-size: 1.5rem;
		margin: 40px 0 12px 0;
		padding-bottom: 16px;
	}

	.top-10 h2::after {
		width: 60px;
		height: 3px;
	}

	.top-10>p {
		font-size: 1rem;
		margin-bottom: 28px;
	}

	.contact-form-section {
		padding: 32px 20px;
	}

	.top-10 .bg-light {
		padding: 28px 20px !important;
	}

	.top-10 .bg-light h4 {
		font-size: 1.25rem;
		margin-bottom: 14px !important;
	}
}

/*--------------------------------------------------------------
# WhatsApp Enquiry Section
--------------------------------------------------------------*/
.whatsapp-enquiry-section {
	padding: 40px 0 80px;
	background: #ffffff;
}

.whatsapp-enquiry-wrapper {
	max-width: 480px;
	margin: 0 auto;
	text-align: center;
}

.whatsapp-enquiry-text {
	font-size: 18px;
	font-weight: 400;
	color: #1a1a1a;
	margin: 0 0 32px 0;
	letter-spacing: -0.01em;
	line-height: 1.5;
}

.whatsapp-enquiry-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #25D366;
	color: #ffffff;
	padding: 16px 32px;
	border-radius: 50px;
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: 2px solid #25D366;
}

.whatsapp-enquiry-button:hover {
	background: #20BA5A;
	border-color: #20BA5A;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(37, 211, 102, 0.25);
}

.whatsapp-enquiry-button:active {
	transform: translateY(0);
}

.whatsapp-enquiry-button svg {
	flex-shrink: 0;
}

.whatsapp-enquiry-button span {
	white-space: nowrap;
}

@media (max-width: 768px) {
	.whatsapp-enquiry-section {
		padding: 80px 0;
	}

	.whatsapp-enquiry-text {
		font-size: 16px;
		margin-bottom: 24px;
	}

	.whatsapp-enquiry-button {
		font-size: 15px;
		padding: 14px 28px;
	}
}


header.header-mobile {
	background-color: #fff;
}

#menu-btn {
	color: var(--primary-color);
}

.smaller #mainmenu a {
	color: var(--primary-color);
}


#mainmenu a {
	color: var(--primary-color);
}

@media only screen and (max-width: 992px) {
	header.header-mobile #mainmenu li a {
		color: var(--primary-color);
	}

	#mainmenu a {
		padding: 1rem 0;
		font-size: 2rem !important;
		text-align: right;
		display: block;
	}

	#menu-btn {
		display: none;
	}
}

/*--------------------------------------------------------------
# Offcanvas Menu - Warm Industrial Design
--------------------------------------------------------------*/

/* Import distinctive geometric font for menu */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Playfair+Display:wght@600;700&display=swap');

/* Hamburger Button - Hidden on Desktop, Visible on Mobile */
.sun-hamburger {
	position: relative;
	width: 44px;
	height: 44px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 10px;
	display: none;
	/* Hidden by default on desktop */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	z-index: 10001;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Show hamburger on mobile/tablet */
@media (max-width: 992px) {
	.sun-hamburger {
		display: flex;
	}

	/* Hide desktop menu on mobile */
	#mainmenu {
		display: none !important;
	}
}

.sun-hamburger:hover {
	transform: scale(1.05);
}

.sun-hamburger__line {
	width: 24px;
	height: 2px;
	background: var(--primary-color);
	border-radius: 2px;
	transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transform-origin: center;
	position: relative;
}

/* Morphing animation: Hamburger → X */
.sun-hamburger.sun-active .sun-hamburger__line:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
	background: var(--secondary-color);
}

.sun-hamburger.sun-active .sun-hamburger__line:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.sun-hamburger.sun-active .sun-hamburger__line:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
	background: var(--secondary-color);
}

/* Backdrop with blur - Mobile Only */
.sun-offcanvas-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(45, 37, 32, 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 9998;
	display: none;
	/* Hidden on desktop */
}

@media (max-width: 992px) {
	.sun-offcanvas-backdrop {
		display: block;
	}
}

.sun-offcanvas-backdrop.sun-active {
	opacity: 1;
	visibility: visible;
}

/* Offcanvas Panel - Mobile Only */
.sun-offcanvas {
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	max-width: 480px;
	height: 100vh;
	height: 100dvh;
	/* Dynamic viewport height for mobile browsers */
	background: linear-gradient(165deg, #ffffff 0%, #faf8f6 50%, #f5f1ed 100%);
	box-shadow: -10px 0 50px rgba(122, 91, 70, 0.15);
	transform: translateX(100%);
	transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	z-index: 9999;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	/* Smooth scrolling on iOS */
	display: none;
	/* Hidden on desktop */
}

@media (max-width: 992px) {
	.sun-offcanvas {
		display: block;
	}
}

.sun-offcanvas.sun-active {
	transform: translateX(0);
}

/* Offcanvas Inner Container */
.sun-offcanvas__inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: 40px 50px 80px;
	position: relative;
}

/* Warm gradient accent line */
.sun-offcanvas__inner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(180deg,
			var(--primary-color) 0%,
			var(--secondary-color) 50%,
			var(--primary-color) 100%);
	opacity: 0;
	animation: sunriseGlow 1s ease 0.6s forwards;
}

@keyframes sunriseGlow {
	to {
		opacity: 1;
	}
}

/* Header with Logo */
.sun-offcanvas__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 60px;
	opacity: 0;
	transform: translateY(-20px);
	animation: sunSlideDown 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}

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

.sun-offcanvas__logo img {
	max-width: 140px;
	height: auto;
	filter: drop-shadow(0 2px 8px rgba(122, 91, 70, 0.1));
}

/* Close Button */
.sun-offcanvas__close {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 2px solid rgba(122, 91, 70, 0.15);
	border-radius: 10px;
	color: var(--primary-color);
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	padding: 0;
	flex-shrink: 0;
}

.sun-offcanvas__close:hover {
	background: linear-gradient(135deg, rgba(122, 91, 70, 0.1) 0%, rgba(249, 147, 52, 0.1) 100%);
	border-color: var(--secondary-color);
	color: var(--secondary-color);
	transform: rotate(90deg);
	box-shadow: 0 4px 12px rgba(249, 147, 52, 0.2);
}

.sun-offcanvas__close:active {
	transform: rotate(90deg) scale(0.95);
}

.sun-offcanvas__close svg {
	transition: transform 0.3s ease;
}

/* Navigation */
.sun-offcanvas__nav {
	flex: 1;
	margin-bottom: 40px;
}

.sun-offcanvas__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sun-offcanvas__menu>li {
	opacity: 0;
	transform: translateX(30px);
	margin-bottom: 8px;
}

/* Staggered menu item animations */
.sun-offcanvas.sun-active .sun-offcanvas__menu>li:nth-child(1) {
	animation: sunSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
}

.sun-offcanvas.sun-active .sun-offcanvas__menu>li:nth-child(2) {
	animation: sunSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards;
}

.sun-offcanvas.sun-active .sun-offcanvas__menu>li:nth-child(3) {
	animation: sunSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards;
}

.sun-offcanvas.sun-active .sun-offcanvas__menu>li:nth-child(4) {
	animation: sunSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards;
}

.sun-offcanvas.sun-active .sun-offcanvas__menu>li:nth-child(5) {
	animation: sunSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s forwards;
}

.sun-offcanvas.sun-active .sun-offcanvas__menu>li:nth-child(6) {
	animation: sunSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s forwards;
}

.sun-offcanvas.sun-active .sun-offcanvas__menu>li:nth-child(7) {
	animation: sunSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s forwards;
}

.sun-offcanvas.sun-active .sun-offcanvas__menu>li:nth-child(8) {
	animation: sunSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1s forwards;
}

.sun-offcanvas.sun-active .sun-offcanvas__menu>li:nth-child(9) {
	animation: sunSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s forwards;
}

.sun-offcanvas.sun-active .sun-offcanvas__menu>li:nth-child(10) {
	animation: sunSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s forwards;
}

/* Fallback: ensure any menu items beyond 10 are still visible */
.sun-offcanvas.sun-active .sun-offcanvas__menu>li:nth-child(n+11) {
	animation: sunSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s forwards;
}

@keyframes sunSlideIn {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.sun-offcanvas__menu>li>a {
	display: block;
	font-family: 'DM Sans', -apple-system, sans-serif;
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--primary-color);
	text-decoration: none;
	padding: 16px 24px;
	border-radius: 12px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	letter-spacing: -0.02em;
}

/* Warm glow effect on hover */
.sun-offcanvas__menu>li>a::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg,
			transparent,
			rgba(249, 147, 52, 0.1),
			transparent);
	transition: left 0.6s ease;
}

.sun-offcanvas__menu>li>a:hover::before {
	left: 100%;
}

.sun-offcanvas__menu>li>a:hover {
	background: linear-gradient(135deg,
			rgba(122, 91, 70, 0.08) 0%,
			rgba(249, 147, 52, 0.08) 100%);
	transform: translateX(8px);
	color: var(--secondary-color);
	box-shadow: 0 4px 12px rgba(249, 147, 52, 0.15);
}

/* Active/Current menu item */
.sun-offcanvas__menu>li.current-menu-item>a,
.sun-offcanvas__menu>li.current_page_item>a {
	background: linear-gradient(135deg,
			rgba(122, 91, 70, 0.12) 0%,
			rgba(249, 147, 52, 0.12) 100%);
	color: var(--secondary-color);
	box-shadow: inset 3px 0 0 var(--secondary-color);
}

/* Submenu styling */
.sun-offcanvas__menu .sub-menu {
	list-style: none;
	padding: 8px 0 8px 24px;
	margin: 8px 0 0 0;
}

.sun-offcanvas__menu .sub-menu li {
	margin-bottom: 4px;
}

.sun-offcanvas__menu .sub-menu a {
	display: block;
	font-family: 'DM Sans', sans-serif;
	font-size: 1rem;
	font-weight: 500;
	color: #6b5d52;
	text-decoration: none;
	padding: 10px 16px;
	border-radius: 8px;
	transition: all 0.3s ease;
}

.sun-offcanvas__menu .sub-menu a:hover {
	color: var(--secondary-color);
	background: rgba(249, 147, 52, 0.08);
	transform: translateX(4px);
}

/* Footer Contact Info */
.sun-offcanvas__footer {
	border-top: 1px solid rgba(122, 91, 70, 0.12);
	padding-top: 32px;
	opacity: 0;
	transform: translateY(20px);
	animation: sunFadeUp 0.6s ease 0.9s forwards;
	margin-top: auto;
}

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

.sun-offcanvas__contact {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sun-offcanvas__contact-item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: 'DM Sans', sans-serif;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #6b5d52;
	text-decoration: none;
	padding: 12px 16px;
	border-radius: 10px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid rgba(122, 91, 70, 0.08);
}

.sun-offcanvas__contact-item svg {
	color: var(--primary-color);
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.sun-offcanvas__contact-item:hover {
	background: white;
	color: var(--secondary-color);
	transform: translateX(4px);
	box-shadow: 0 4px 12px rgba(122, 91, 70, 0.1);
	border-color: var(--secondary-color);
}

.sun-offcanvas__contact-item:hover svg {
	color: var(--secondary-color);
	transform: scale(1.1);
}

/* Scrollbar styling for offcanvas */
.sun-offcanvas::-webkit-scrollbar {
	width: 6px;
}

.sun-offcanvas::-webkit-scrollbar-track {
	background: rgba(122, 91, 70, 0.05);
}

.sun-offcanvas::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));
	border-radius: 3px;
}

.sun-offcanvas::-webkit-scrollbar-thumb:hover {
	background: var(--secondary-color);
}

/* Prevent body scroll when menu is open */
body.sun-menu-open {
	overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 576px) {
	.sun-offcanvas {
		max-width: 100%;
	}

	.sun-offcanvas__inner {
		padding: 30px 30px 120px;
		padding-bottom: max(120px, env(safe-area-inset-bottom, 120px));
	}

	.sun-offcanvas__menu>li>a {
		font-size: 1.5rem;
		padding: 5px 20px;
	}

	.sun-offcanvas__header {
		margin-bottom: 20px;
	}

	.sun-offcanvas__close {
		width: 40px;
		height: 40px;
	}

	.sun-offcanvas__nav {
		margin-bottom: 30px;
	}

	.sun-offcanvas__footer {
		padding-bottom: 20px;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.sun-offcanvas__menu>li>a {
		border: 2px solid transparent;
	}

	.sun-offcanvas__menu>li>a:hover {
		border-color: var(--secondary-color);
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

	.sun-hamburger__line,
	.sun-offcanvas,
	.sun-offcanvas-backdrop,
	.sun-offcanvas__menu>li,
	.sun-offcanvas__menu>li>a {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

form p {
	margin-bottom: 0;
}

.current_page_item a {
	color: var(--secondary-color) !important;
}

.filter-gradient-top {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(8px);
	pointer-events: none;
	z-index: 1;
}

/*--------------------------------------------------------------
# Jobs Listing Section
--------------------------------------------------------------*/

/* Jobs listing container */
.jobs-listing {
	display: flex;

	gap: 32px;
	margin: 0;
	margin-top: 3rem;
	padding: 0;
	justify-content: center;

	>.job-item {
		width: 45%;
	}
}

@media (max-width: 992px) {
	.jobs-listing {
		flex-direction: column;
		align-items: center;

		>.job-item {
			width: 100%;
		}
	}
}

/* Individual job card */
.job-item {
	position: relative;
	background: #ffffff;
	border: 1px solid rgba(122, 91, 70, 0.15);
	border-radius: 12px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(122, 91, 70, 0.08);
	transition: all 0.3s ease;
}

.job-item:hover {
	/* transform: translateY(-4px); */
	box-shadow: 0 8px 24px rgba(122, 91, 70, 0.15);
	/* border-color: var(--primary-color); */
}

/* Decorative top accent line */
.job-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
}

/* .job-item:hover::before {
	transform: scaleX(1);
} */

/* Job title styling */
.job-title {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 32px 32px 16px;
	padding: 0;
	color: var(--primary-color);
}

.job-title a {
	color: var(--primary-color);
	text-decoration: none;
	transition: color 0.3s ease;
}

.job-title a:hover {
	color: var(--secondary-color);
}

/* Job meta information container */
.job-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 32px 20px;
	padding: 0;
	color: #555;
}

/* Location and Type badges */
.job-location,
.job-type {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 0.875rem;
	color: #555;
}

.job-location strong,
.job-type strong {
	color: var(--primary-color);
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.job-type {
	/* background: rgba(249, 147, 52, 0.1);
	border-color: var(--secondary-color); */
}

.job-type strong {
	/* color: var(--secondary-color); */
}

/* Job excerpt/description */
.job-excerpt {
	font-size: 1rem;
	line-height: 1.6;
	color: #666;
	margin: 0 32px 24px;
	padding: 0;
}

.job-excerpt p {
	margin: 0;
	color: #666;
}

/* View Details link/button */
.job-link {
	display: inline-block;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #ffffff;
	background: var(--primary-color);
	padding: 12px 24px;
	margin: 0 32px 32px;
	border: none;
	border-radius: 8px;
	text-decoration: none;
	transition: all 0.3s ease;
}

.job-link:hover {
	/* background: var(--secondary-color); */
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(249, 147, 52, 0.3);
	color: white;
	;
}

/* Empty state / No jobs found message */
/* .jobs-listing + p {
	font-size: 1.125rem;
	color: #999;
	text-align: center;
	padding: 60px 20px;
	margin: 0;
} */

/* Responsive Design */
@media (max-width: 1200px) {
	.jobs-listing {
		grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
		gap: 28px;
	}
}

@media (max-width: 992px) {
	.jobs-listing {
		grid-template-columns: 1fr;
		gap: 24px;
		max-width: 700px;
		margin: 0 auto;
	}
}

@media (max-width: 768px) {
	.job-title {
		font-size: 1.375rem;
		margin: 28px 28px 14px;
	}

	.job-meta {
		margin: 0 28px 18px;
		gap: 10px;
	}

	.job-excerpt {
		font-size: 0.9375rem;
		margin: 0 28px 20px;
	}

	.job-link {
		margin: 0 28px 28px;
		padding: 12px 20px;
		font-size: 0.875rem;
	}
}

@media (max-width: 576px) {
	.jobs-listing {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.job-item {
		border-radius: 10px;
	}

	.job-title {
		font-size: 1.25rem;
		margin: 24px 24px 12px;
	}

	.job-meta {
		margin: 0 24px 16px;
		gap: 10px;
		flex-direction: column;
		align-items: flex-start;
	}

	.job-location,
	.job-type {
		width: 100%;
		justify-content: space-between;
		padding: 10px 14px;
	}

	.job-excerpt {
		font-size: 0.875rem;
		line-height: 1.6;
		margin: 0 24px 18px;
	}

	.job-link {
		width: calc(100% - 48px);
		margin: 0 24px 24px;
		text-align: center;
		padding: 12px 20px;
	}
}


@media only screen and (max-width: 767px) {
	h2 {
		font-size: 28px;
		/* letter-spacing: -1.25px; */
	}
}