@charset "UTF-8";

/*
Theme Name:Zeal Development Wordpress Theme
Author:Chelsea Brown
Author URI:https://focusedcre.com
Description:Custom wordpress theme for Zeal Development
Version:1.0.0
Text Domain:focusedcre
*/
:root {
	--primaryColor: #279145;
	--secondaryColor: #2B475C;
	--light: #f5f5f5;
	--dark: #333;
	--white: #fff;
	--black: #000;
	--primaryFont: "Montserrat", sans-serif;
}

/* html,body{overflow-x:hidden; width:100%;}
*/

/* html,body{max-width:100vw;}
*/

/* body{font-family:"Montserrat",sans-serif; font-weight:normal; color:#6d6e71; font-size:15px; line-height:1.8; overflow-x:hidden; max-width:100%;}
#websiteMainWrapper{width:100%; max-width:100%; box-sizing:border-box;}
*/

/* === GLOBAL RESET & SCROLL FIX === */
html,
body {
	margin: 0;
	padding: 0;
	/* overflow-x:hidden; */
	width: 100%;
	box-sizing: border-box;
}

/* === SMOOTH SCROLL WITH FIXED HEADER OFFSET === */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 159px;
	/* Fixed header height offset */
}

/* Optional but helpful */
*,
*::before,
*::after {
	box-sizing: inherit;
}

/* === BODY STYLES === */
body {
	font-family: var(--primaryFont);
	font-weight: normal;
	color: #000000;
	font-size: 16px;
	line-height: 1.8;
}

/* === WRAPPER === */
#websiteMainWrapper {
	position: relative;
	width: 100%;
	overflow-x: clip;
	/* Better than hidden; allows sticky/fixed elements to still work */
	box-sizing: border-box;
}

/************************* fonts,buttons,icons and text blocks styles**********************************/

/* font-family:"canada-type-gibson",sans-serif; */
h1 {
	font-size: clamp(2.25rem, 4.5vw, 4rem);
	line-height: 1.15;
	font-weight: 700;
}

h2 {
	font-size: clamp(1.875rem, 3.6vw, 2.75rem);
	line-height: 1.2;
	font-weight: 700;
	color: var(--primaryColor);
	margin-top: 20px;
	margin-bottom: 30px;
}

h3 {
	font-size: clamp(1.5rem, 2.8vw, 2.25rem);
	line-height: 1.25;
	font-family: var(--primaryFont);
	font-weight: 600;
	color: var(--primaryColor);
	margin-bottom: 20px;
}

h4 {
	font-size: clamp(1.25rem, 2.1vw, 1.625rem);
	line-height: 1.4;
	font-weight: 600;
}

h5 {
	font-size: clamp(1.125rem, 1.6vw, 1.25rem);
	line-height: 1.5;
	font-weight: 600;
}

h6 {
	font-size: clamp(1rem, 1.2vw, 1.125rem);
	line-height: 1.5;
	font-weight: 600;
}

.heading-inline {
	display: inline !important;
}

/* Reusable Heading Block:Apply on parent container */
.headingStyles {
	position: relative;
}

/* Reusable Heading Block:Main title (box style) */
.headingStyles h2 {
	position: relative;
	display: inline-block;
	margin: 0 0 14px;
	padding: 50px 0 13px 26px;
	font-size: 3rem;
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #000000;
}

/* Reusable Heading Block:Wrapped heading text */
.headingStyles h2 .headingText {
	position: relative;
	z-index: 2;
}

/* Reusable Heading Block:Green corner shape */
.headingStyles h2 .brandCorner {
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	height: 100%;
	aspect-ratio: 1/1;
	border-top: 7px solid var(--primaryColor);
	border-left: 7px solid var(--primaryColor);
	pointer-events: none;
}

.headingStyles h2 .brandCorner::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 30%;
	border-bottom: 7px solid var(--primaryColor);
}

.headingStyles h2 .brandCorner::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	height: 30px;
	border-right: 7px solid var(--primaryColor);
}

/* Reusable Heading Block:Subtitle style (trusted growth text) */
.headingStyles h3 {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #8f8f8f;
}

/* Reusable Heading Block:Responsive adjustment */
@media (max-width:767.98px) {
	.headingStyles h2 {
		padding-left: 22px;
		margin-bottom: 10px;
	}
}

a {
	color: var(--dark);
	text-decoration: none;
	-webkit-transition: 0.3s ease-in-out !important;
	-moz-transition: 0.3s ease-in-out !important;
	-ms-transition: 0.3s ease-in-out !important;
	-o-transition: 0.3s ease-in-out !important;
	transition: 0.3s ease-in-out !important;
}

a:hover {
	color: var(--primaryColor);
	text-decoration: none;
}

a:focus {
	text-decoration: none;
	outline: none;
}

ul {
	margin: 0;
	padding: 0;
}

ul li {
	list-style: none;
}

img {
	image-rendering: -webkit-optimize-contrast;
}

/*--------------------------------------------------------------
# Scroll Offset for Fixed Header Navigation
--------------------------------------------------------------*/

/* Apply scroll margin to all page sections to prevent content hiding behind fixed header */

/* .pageSectionEl{scroll-margin-top:126px;}
*/

/* Fallback for any section with ID attribute */

/* section[id]{scroll-margin-top:126px;}
*/

/*--------------------------------------------------------------
# Bottom Bar
--------------------------------------------------------------*/
#header {
	font-size: 14px;
	transition: all 0.5s;
	padding: 0;
	background: linear-gradient(to bottom, var(--primaryColor) 98px, transparent 98px);
}

#header:hover {
	overflow: visible;
}

#header.header-scrolled {
	top: 0;
	border-top: 0;
	background: var(--primaryColor);
	border-bottom: 1px solid rgb(0 0 0 / 20%);
}

.headerLogoCol {}

.headerNavCol {
	position: relative;
	isolation: isolate;
	background-color: #ffffff;
	justify-content: center;
	transition: justify-content 0.4s ease;
}

.headerNavBgExpand {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	height: 100%;
	background: #ffffff;
	z-index: 0;
	pointer-events: none;
	transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* #header.header-scrolled .headerNavBgExpand {
width: 100vw;
} */

.headerNavCol>.headerLogoBox,
.headerNavCol>.headerNav {
	position: relative;
	z-index: 1;
}

#header.header-scrolled .headerNavCol {
	justify-content: space-between;
}

/* Header Logo Animation - Initial State (hidden) */
.headerLogoBox {
	padding-block: 1rem;
}

#header.header-scrolled .headerLogoBox {
	width: 220px;
	opacity: 1;
}

.headerLogoBox .logo {
	display: block;
	white-space: nowrap;
	position: relative;
}

/* Inner Pages (header-2.php) - Apply scrolled state by default */

/* Logo visible by default on inner pages */
.headerNavCol:has(.headerNav2) .headerLogoBox {
	width: 220px;
	opacity: 1;
}

/* Navigation positioned to the right on inner pages */
.headerNavCol:has(.headerNav2) {
	justify-content: space-between;
}

/* Reduced padding on social/contact box for inner pages */
#header:has(.headerNav2) .navSocialandContactBox {
	padding-right: 45px;
}

/* Header Logo Animation - Visible State */

/* .header-logo-visible .headerLogoBox{width:220px; opacity:1;}
.header-logo-visible .headerNavCol{justify-content:space-between !important;}
*/

/* .headerNavCol *{}
*/
#header .logo img {
	max-height: 85px;
	width: 180px;
	object-fit: contain;
	object-position: left;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Desktop Navigation
--------------------------------------------------------------*/
@media (min-width:1366px) {
	.navbar {
		padding: 0;
	}

	.navbar ul {
		margin: 0;
		padding: 0;
		display: flex;
		list-style: none;
		align-items: center;
		gap: 10px 15px;
	}

	.navbar li {
		position: relative;
		transition: 0.3s;
	}

	.navbar li a {
		position: relative;
		display: block;
		align-items: center;
		justify-content: space-between;
		font-size: 0.875rem;
		font-weight: bold;
		color: #000000;
		transition: 0.3s !important;
		text-transform: uppercase;
		padding: 25px 5px;
	}

	.navbar li a:hover,
	.navbar li a:focus {
		color: #000000;
	}

	.navbar #menu-main-menu>li>a::before {
		content: '';
		position: absolute;
		bottom: 18px;
		left: 50%;
		transform: translate(-50%, 0);
		height: 4px;
		width: 0;
		background: var(--primaryColor);
		transition: 0.3s;
	}

	.navbar a i,
	.navbar a:focus i {
		font-size: 12px;
		line-height: 0;
		margin-left: 5px;
	}

	.navbar li a:hover,
	.navbar .current-menu-item a,
	.navbar .current-menu-item:focus a,
	.navbar li:hover>a,
	.navbar li.activeMenuItem a {
		color: #000000;
	}

	#header.header-scrolled .navbar li a:hover,
	#header.header-scrolled .navbar .current-menu-item a,
	#header.header-scrolled .navbar .current-menu-item:focus a,
	#header.header-scrolled .navbar li:hover>a {
		border-bottom-color: #000000;
	}

	.navbar #menu-main-menu>li.current-menu-item>a::before,
	.navbar #menu-main-menu>li.activeMenuItem>a::before,
	.navbar #menu-main-menu>li>a:hover::before {
		width: calc(100% - 8px);
	}

	#header.header-scrolled .custombtnG {
		border: 1px solid #fff;
	}

	.navbar .menu-item-has-children ul.sub-menu {
		display: block;
		position: absolute;
		left: 0;
		top: calc(100% + 30px);
		margin: 0;
		z-index: 99;
		opacity: 0;
		visibility: hidden;
		background: #fff;
		box-shadow: 0 0 30px rgb(127 137 161 / 25%);
		transition: 0.3s;
		height: 0;
	}

	.navbar .menu-item-has-children ul.sub-menu li {
		min-width: 200px;
	}

	.navbar .menu-item-has-children ul.sub-menu a {
		padding: 8px 15px;
		font-size: 16px;
		font-weight: 600;
		text-transform: none;
		color: #000000;
		border: 0;
		letter-spacing: 1.5px;
	}

	.navbar .menu-item-has-children ul.sub-menu a i {
		font-size: 12px;
	}

	.navbar .menu-item-has-children ul.sub-menu a:hover,
	.navbar .menu-item-has-children ul.sub-menu .active:hover,
	.navbar .menu-item-has-children ul.sub-menu li:hover>a {
		color: #000;
		background-color: #000000;
	}

	.navbar .menu-item-has-children:hover>ul.sub-menu {
		opacity: 1;
		top: 100%;
		visibility: visible;
		height: initial;
		width: 250px;
	}

	.navbar .menu-item-has-children .menu-item-has-children ul.sub-menu {
		/* top:0; left:calc(100% - 30px); visibility:hidden; */
		position: static;
		display: block;
		padding-left: 20px;
		height: initial;
		opacity: 1;
		visibility: visible;
		box-shadow: none;
	}

	.navbar .menu-item-has-children .menu-item-has-children:hover>ul.sub-menu {
		/* opacity:1; top:0; left:100%; visibility:visible; */
	}
}

/* @media (min-width:1366px) and (max-width:1366px){
.navbar .menu-item-has-children .menu-item-has-children ul.sub-menu{left:-90%;}
.navbar .menu-item-has-children .menu-item-has-children:hover > ul.sub-menu{left:-100%;}
}
*/
@media (min-width:1366px) {

	.mobile-nav-show,
	.mobile-nav-hide {
		display: none !important;
	}
}

@media (max-width:1440px) and (min-width:1366px) {
	.navbar ul {
		gap: 10px 5px;
	}
}

.navbar ul:not(ul li ul) {
	position: relative;
}

.navSocialandContactBox {
	padding-right: 18px;
}

#header.header-scrolled .navSocialandContactBox {}

.headerTopBarContactBtn>a {
	display: inline-block;
	padding: 8px 20px;
	font-size: 14px;
	font-weight: 600;
	background-color: rgb(255 255 255 / 20%);
}

.headerTopBarContactBtn>a:hover,
.headerTopBarContactBtn>a:focus {
	background-color: rgb(255 255 255 / 30%);
	color: #fff;
}

.navSocialandContactBox>ul {
	gap: 5px 15px;
}

.navSocialandContactBox>ul>li:not(.navContactPhone) a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	color: rgba(255, 255, 255, 0.7);
	transition: all 0.3s ease;
	font-size: 16px;
}

.navSocialandContactBox>ul>li:not(.headerTopBarContactBtn) a:hover,
.navSocialandContactBox>ul>li:not(.headerTopBarContactBtn) a:focus {
	color: #fff;
	font-weight: bold;
}

.navContactPhone a {
	color: rgba(255, 255, 255, 0.8);
}

.navContactPhone a:hover {
	color: #fff;
}

.navSocialandContactBox>ul>li.headerLinkedin a {
	height: 30px;
	width: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.8);
	color: var(--primaryColor);
	font-size: 1rem;
	line-height: 1;
	transition: all 0.3s ease;
}

.navSocialandContactBox>ul>li.headerLinkedin a:hover,
.navSocialandContactBox>ul>li.headerLinkedin a:focus {
	background-color: #ffffff;
	color: var(--primaryColor);
}

/*--------------------------------------------------------------
# Mobile Navigation
--------------------------------------------------------------*/
@media (max-width:1365.98px) {
	.navbar {
		position: fixed;
		top: 0;
		right: -100%;
		width: 100%;
		max-width: 400px;
		bottom: 0;
		transition: 0.3s;
		z-index: 9997;
	}

	.navbar ul {
		position: absolute;
		inset: 0;
		padding: 50px 0 10px 0;
		margin: 0;
		overflow-y: auto;
		transition: 0.3s;
		z-index: 9998;
	}

	.navbar a,
	.navbar a:focus {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 20px;
		font-size: 15px;
		font-weight: 600;
		color: rgba(255, 255, 255, 0.7);
		white-space: nowrap;
		transition: 0.5s !important;
	}

	.navbar a:hover,
	.navbar .current-menu-item a,
	.navbar .current-menu-item:focus a,
	.navbar li:hover>a {
		color: #fff;
	}

	.navbar .menu-item-has-children ul.sub-menu,
	.navbar .menu-item-has-children .menu-item-has-children ul.sub-menu {
		position: static;
		display: none;
		padding: 10px 0;
		margin: 10px 20px;
		background-color: rgba(20, 35, 51, 0.6);
	}

	.navbar .menu-item-has-children>.submenu-active,
	.navbar .menu-item-has-children .menu-item-has-children>.submenu-active {
		display: block;
	}

	.mobile-nav-show {
		font-size: 23px;
		cursor: pointer;
		line-height: 0;
		transition: 0.5s;
		padding: 17px 10px 0 0;
		color: var(--primaryColor);
	}

	.mobile-nav-hide {
		color: rgba(255, 255, 255, 0.9);
		font-size: 32px;
		cursor: pointer;
		line-height: 0;
		transition: 0.5s;
		position: fixed;
		right: 15px;
		top: 30px;
		z-index: 9999;
	}

	.mobile-nav-active {
		overflow: hidden;
	}

	.mobile-nav-active .navbar:before {
		content: "";
		position: fixed;
		inset: 0;
		background: #000000;
		opacity: 0.95;
		z-index: 9996;
	}

	.mobile-nav-active .navbar {
		right: 0;
		background: var(--green);
	}
}

.sub-menu-toggle {
	display: none !important;
}

/*--------------------------------------------------------------
# Mobile Navigation
--------------------------------------------------------------*/
.page-margin {
	margin-top: 160px;
}

.btn {
	border-radius: 0;
	text-decoration: none;
	display: inline-block;
	padding: 12px 30px;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 1px;
	background: var(--white);
	color: #000000;
	transition: all 0.3s ease;
	text-transform: uppercase;
}

.btn:hover {
	background: var(--primaryColor);
	color: var(--white);
}

.btnSecondary {
	background: #000000;
}

.btnSecondary:hover {
	background: var(--primaryColor);
}

/*--------------------------------------------------------------
# Choose Us Section
--------------------------------------------------------------*/
.chooseUsSec {
	background: #fff;
}

.chooseUsBox {
	/* height:100%; */
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.chooseUsBoxInner {
	position: relative;
	background: #fff;
	border: 2px solid var(--primaryColor);
	padding: 40px 20px;
	height: 100%;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
	cursor: pointer;
	min-height: 300px;
}

.chooseUsBoxInner h3 {
	color: var(--primaryColor);
	font-size: 22px;
	font-weight: 400;
	font-family: var(--primaryFont);
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0;
	padding: 10px 0;
	text-align: center;
	transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	z-index: 2;
}

.chooseUsBoxInner h3::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0);
	width: 0;
	height: 3px;
	background: #fff;
	z-index: 1;
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.chooseUsBoxInner:hover h3::before {
	width: 50%;
}

.chooseUsBoxText {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	margin-top: 0;
	transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	z-index: 2;
	font-size: 18px;
}

.chooseUsBoxText p,
.chooseUsBoxText ul,
.chooseUsBoxText li {
	color: #fff;
	transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.chooseUsBoxText ul {
	list-style: none;
	padding: 0;
	margin: 15px 0 0;
}

.chooseUsBoxText ul li {
	padding-left: 20px;
	position: relative;
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 1.6;
}

.chooseUsBoxText ul li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: #fff;
	font-size: 18px;
}

/* Hover State */
.chooseUsBoxInner:hover {
	background: var(--primaryColor);
	border-color: var(--primaryColor);
	box-shadow: 0 10px 30px rgba(34, 128, 218, 0.3);
}

.chooseUsBoxInner:hover h3 {
	color: #fff;
}

.chooseUsBoxInner:hover .chooseUsBoxText {
	max-height: 1000px;
	opacity: 1;
	margin-top: 20px;
}

/* Active/Expanded State (for first box in screenshot) */
.chooseUsBoxInner.active {
	background: var(--primaryColor);
	border-color: var(--primaryColor);
}

.chooseUsBoxInner.active h3 {
	color: #fff;
}

.chooseUsBoxInner.active .chooseUsBoxText {
	max-height: 1000px;
	opacity: 1;
	margin-top: 20px;
}

.bulletTextWhite ul {
	list-style: none;
	padding: 0;
	margin: 20px 0;
}

.bulletTextWhite ul li {
	font-size: 14px;
	line-height: 1.6;
	color: var(--white);
	margin: 0 0 10px;
	padding-left: 20px;
	position: relative;
}

.bulletTextWhite ul li::before {
	content: "●";
	color: #fff;
	position: absolute;
	left: 0;
	font-size: 23px;
	top: -8px;
}

.bulletText ul {
	list-style: none;
	padding: 0;
	margin: 20px 0;
}

.bulletText ul li {
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 10px;
	padding-left: 20px;
	position: relative;
}

.bulletText ul li::before {
	content: "●";
	color: var(--primaryColor);
	position: absolute;
	left: 0;
	font-size: 23px;
	top: -8px;
}

/*--------------------------------------------------------------
# Main Banner Section
--------------------------------------------------------------*/
.mainBannerBgCarouselContainer {
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: -99;
	overflow: hidden;
}

.mainBannerBgCarousel {
	width: 100%;
	height: 100vh;
	display: block !important;
	opacity: 1 !important;
}

.mainBannerBgCarousel.owl-carousel {
	display: block !important;
}

.mainBannerBgCarousel .owl-stage-outer {
	height: 100vh;
	position: relative;
}

.mainBannerBgCarousel .owl-stage {
	height: 100vh;
	display: flex !important;
}

.mainBannerBgCarousel .owl-item {
	height: 100vh;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.mainBannerBgCarousel .mainBannerBgCarouselItem {
	width: 100%;
	height: 100vh;
	display: block;
}

.mainBannerBgCarouselContainer img,
.mainBannerBgCarousel img {
	width: 100%;
	height: 100vh;
	object-fit: cover;
	object-position: center;
	display: block !important;
	pointer-events: none;
}

/* Smooth carousel transitions with modern effects */
.mainBannerBgCarousel .owl-stage-outer {
	background: #000;
	/* Fallback background */
}

.mainBannerBgCarousel .owl-item {
	opacity: 1;
}

.mainBannerBgCarousel .owl-item.active {
	opacity: 1;
}

.mainBannerBgCarousel .animated {
	animation-duration: 1.2s;
	animation-fill-mode: both;
}

/* Ensure smooth layering during animation */
.mainBannerBgCarousel .owl-item.active.animated {
	z-index: 2;
}

.mainBannerBgCarousel .owl-item.animated:not(.active) {
	z-index: 1;
}

/* Custom slide effects - Keep visible during transition */
@keyframes slideInUp {
	0% {
		transform: translate3d(0, 100%, 0);
	}

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

@keyframes slideOutUp {
	0% {
		transform: translate3d(0, 0, 0);
	}

	100% {
		transform: translate3d(0, -100%, 0);
	}
}

@keyframes slideInDown {
	0% {
		transform: translate3d(0, -100%, 0);
	}

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

@keyframes slideOutDown {
	0% {
		transform: translate3d(0, 0, 0);
	}

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

.slideInUp {
	animation-name: slideInUp;
}

.slideOutUp {
	animation-name: slideOutUp;
}

.slideInDown {
	animation-name: slideInDown;
}

.slideOutDown {
	animation-name: slideOutDown;
}

/* Subtle Zoom effects with fade */
@keyframes zoomInSubtle {
	0% {
		opacity: 0;
		transform: scale(1.05);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes zoomOutSubtle {
	0% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(1.05);
	}
}

.zoomInSubtle {
	animation-name: zoomInSubtle;
}

.zoomOutSubtle {
	animation-name: zoomOutSubtle;
}

/* Fade effects */
@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.fadeIn {
	animation-name: fadeIn;
}

.fadeOut {
	animation-name: fadeOut;
}

.mainBannerSec {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	overflow: hidden;
}

.mainBannerSec::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url(assets/img/logo-mark-white.svg);
	background-repeat: no-repeat;
	background-position: right bottom 15%;
	background-size: 500px auto;
	opacity: 0.075;
	z-index: -2;
}

.mainBannerSec::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #000000;
	opacity: 0.55;
	z-index: -3;
}

/* Main Banner Custom Dots:Wrapper position inside mainBannerSec */
.mainBannerCustomDotsWrap {
	position: absolute;
	left: 50%;
	bottom: 50px;
	transform: translateX(-50%);
	z-index: 4;
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 0 20px;
}

/* Main Banner Custom Dots:Dot group layout */
.mainBannerCustomDots {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: center;
}

/* Main Banner Custom Dots:Default dot style (line style like design) */
.mainBannerDot {
	width: 62px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.mainBannerDot::before {
	content: '';
	width: 100%;
	height: 4px;
	background-color: rgba(255, 255, 255, 0.35);
	transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

/* Main Banner Custom Dots:Hover state */
.mainBannerDot:hover::before {
	background-color: rgba(255, 255, 255, 0.72);
	transform: translateY(-1px);
}

/* Main Banner Custom Dots:Active state */
.mainBannerDot.is-active:before {
	background-color: #ffffff;
	opacity: 1;
}

/* Main Banner Custom Dots:Focus-visible state for accessibility */
.mainBannerDot:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 4px;
}

.mainBannerAffiliateLogo {
	position: absolute;
	bottom: 50px;
	right: 50px;
	max-width: 200px;
	width: 100%;
	height: auto;
	z-index: -1;
}

.mainBannerTextBox {
	position: relative;
	z-index: 2;
	margin: 0 auto;
}

.mainBannerTextBox>div {
	min-height: calc(100vh - 125px);
	margin-top: 125px;
}

.mainBannerTextInner {
	color: var(--white);
	position: relative;
	z-index: 2;
	padding: 160px 0 80px 50px;
}

.mainBannerBtnBox {
	display: flex;
	gap: 10px;
}

.logoMarkBox {
	aspect-ratio: 1/1;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-left: 8px solid #ffffff;
	border-top: 8px solid #ffffff;
	z-index: -1;
}

.logoMarkBox::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 30%;
	border-bottom: 8px solid #ffffff;
	z-index: -1;
}

.logoMarkBox::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	height: 120px;
	border-right: 8px solid #ffffff;
	z-index: -1;
}

.mainBannerTextInner h1 {
	font-size: 2.75rem;
	line-height: 1.2;
	font-weight: 900;
	color: var(--white);
	margin: 0 0 20px;
	text-transform: uppercase;
}

.mainBannerTextInner p {
	font-size: 1.2rem;
	line-height: 1.6;
	font-weight: 600;
	color: var(--white);
	margin: 0;
	inline-size: 550px;
	max-inline-size: 100%;
}

.trackRecordSection {
	background-color: #fff;
}

.trackRecordSection * {}

.counterBoxContainer {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 5px;
}

.counterBox {
	--counterBoxBg: var(--primaryColor);
	--counterBoxHoverBg: #000;
	position: relative;
	overflow: hidden;
	background-color: var(--counterBoxBg);
	text-align: center;
	padding: 3.5rem 0.875rem;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: background-color 0.4s ease;
}

.counterBox[data-aos] {
	transition-property: background-color, transform, opacity !important;
}

.counterBox:nth-child(even) {
	--counterBoxBg: #000;
	--counterBoxHoverBg: var(--primaryColor);
}

.counterBoxContainer:hover .counterBox {
	background-color: var(--counterBoxHoverBg);
}

.counterBox::before {
	content: "";
	position: absolute;
	inset-block: 15%;
	inset-inline: 5%;
	background: url(assets/img/zeal-development-white-box.svg) no-repeat center;
	opacity: 0.1;
	z-index: -1;
}

.counterBox * {
	color: #fff;
	margin: 0;
}

.counterBox h3 {
	font-weight: 700;
	font-size: 2.5rem;
}

.bg-gray {
	background: #f5f5f5;
}

.counterBox p {
	font-size: 0.875rem;
	font-weight: 700;
}

.trackRecordSection .btnSecondary:hover {
	background: #fff;
	color: var(--primaryColor);
}

.whoWeServeSec>div.container-fluid {
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.whoWeServeSec .headingStyles h3 {
	color: #000;
	margin-block: 1.25rem;
}

.whoWeServeTopImg {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 50%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
	z-index: -1;
}

.whoWeServeGalleryCarousel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 50%;
	block-size: 100%;
	pointer-events: none;
}

.whoWeServeGalleryCarousel .owl-stage-outer,
.whoWeServeGalleryCarousel .owl-stage,
.whoWeServeGalleryCarousel .owl-item,
.whoWeServeGalleryCarousel .gallerySlide {
	block-size: 100%;
}

.whoWeServeGalleryCarousel .galleryImage {
	width: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
}

.whyZealSection {
	background: #f5f5f5;
}

.whyZealSection .row {
	row-gap: 24px;
}

.whyZealBox {
	background: #fff;
	height: 100%;
	padding: 80px 34px;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: space-between;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.whyZealBoxIcon {
	width: 58px;
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.whyZealBoxIcon img {
	max-width: 100%;
	max-height: 100%;
	transition: filter 0.3s ease;
}

.whyZealBox .whyZealTitleBox {
	margin-bottom: 20px;
}

.whyZealBox h3 {
	margin: 0 0 16px;
	font-size: 1.2rem;
	line-height: 1.15;
	font-weight: 700;
	text-transform: uppercase;
	color: #000;
	transition: color 0.3s ease;
}

.whyZealBox p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
	font-weight: 500;
	color: #000;
	transition: color 0.3s ease;
}

.whyZealReadMoreBtn {
	border: 0;
	background: transparent;
	padding: 0;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2px;
	cursor: pointer;
}

.whyZealReadMoreBtn .plusCircle {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--primaryColor);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
	line-height: 1;
	font-weight: 600;
}

.whyZealBox:hover {
	background: var(--primaryColor);
}

.whyZealBox:hover h3,
.whyZealBox:hover p,
.whyZealBox:hover .whyZealReadMoreBtn {
	color: #fff;
}

.whyZealBox:hover .whyZealBoxIcon img {
	filter: brightness(0) invert(1);
}

.whyZealBox:hover .whyZealReadMoreBtn .plusCircle {
	background: #fff;
	color: var(--primaryColor);
}

.whyZealModal .modal-content {
	border: 0;
	border-radius: 0;
	overflow: hidden;
	box-shadow: 0 20px 60px rgb(0 0 0 / 25%);
}

.whyZealModal .modal-header {
	background: var(--primaryColor);
	padding: 22px 30px;
	border-bottom: 0;
	border-radius: 0;
}

.whyZealModal .modal-title {
	margin: 0;
	font-size: 1.9rem;
	line-height: 1.2;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
}

.whyZealModal .modal-title img {
	filter: brightness(0) invert(1);
	height: 60px;
	width: 60px;
}

.whyZealModal .btn-close {
	filter: brightness(0) invert(1);
	opacity: 1;
}

.whyZealModal .modal-body {
	padding: 30px;
	background: #fff;
}

.whyZealModal .modal-body p:last-child {
	margin-bottom: 0;
}

@media (max-width:991.98px) {
	.whyZealBox {
		padding: 34px 24px 26px;
	}

	.whyZealBox h3 {
		font-size: 1.5rem;
	}

	.whyZealBox p {
		font-size: 1.125rem;
	}
}

@media (max-width:575.98px) {

	.whyZealModal .modal-header,
	.whyZealModal .modal-body {
		padding: 20px;
	}

	.whyZealModal .modal-title {
		font-size: 1.35rem;
	}
}

.ourApproachSection .ourApproachTopSec {
	background-blend-mode: overlay;
	background-color: rgb(255 255 255 / 75%);
	position: relative;
	z-index: 1;
}

.ourApproachTextBox .headingStyles h3 {
	color: #000;
	margin-block: 1.25rem;
}

.ourApproachSection .phaseBoxesContainer {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas: "phase1 phase2"
		"phase4 phase3";
}

.ourApproachSection .phaseBox {
	position: relative;
	min-height: 320px;
	padding: 52px 44px;
	color: var(--white);
	display: flex;
	align-items: flex-start;
	isolation: isolate;
	overflow: hidden;
}

.ourApproachSection .phaseBox::after {
	content: "";
	position: absolute;
	width: 34px;
	height: 34px;
	background: transparent;
	z-index: 3;
	pointer-events: none;
	border: 2px solid rgba(255, 255, 255, 0.55);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}

.ourApproachSection .phaseBox--1 {
	grid-area: phase1;
	background: var(--black);
}

.ourApproachSection .phaseBox--2 {
	grid-area: phase2;
	background: var(--primaryColor);
}

.ourApproachSection .phaseBox--3 {
	grid-area: phase3;
	background: var(--black);
}

.ourApproachSection .phaseBox--4 {
	grid-area: phase4;
	background: var(--primaryColor);
}

.ourApproachSection .phaseBox--1::after {
	left: 50%;
	bottom: 0;
	background: var(--primaryColor);
	transform: translate(-50%, 50%) rotate(45deg);
}

.ourApproachSection .phaseBox--2::after {
	left: 0;
	top: 50%;
	background: var(--black);
	transform: translate(-50%, -50%) rotate(45deg);
}

.ourApproachSection .phaseBox--3::after {
	left: 50%;
	top: 0;
	background: var(--primaryColor);
	transform: translate(-50%, -50%) rotate(45deg);
}

.ourApproachSection .phaseBox--4::after {
	right: 0;
	top: 50%;
	background: var(--black);
	transform: translate(50%, -50%) rotate(45deg);
}

.ourApproachSection .phaseBox .phaseBoxInner>*:last-child {
	margin-bottom: 0;
}

.ourApproachSection .phaseBox .phaseBoxInner h1,
.ourApproachSection .phaseBox .phaseBoxInner h2,
.ourApproachSection .phaseBox .phaseBoxInner h3,
.ourApproachSection .phaseBox .phaseBoxInner h4,
.ourApproachSection .phaseBox .phaseBoxInner h5,
.ourApproachSection .phaseBox .phaseBoxInner h6 {
	color: inherit;
	font-size: clamp(1.25rem, 1.5vw, 2rem);
	line-height: 1.1;
	font-weight: 700;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

.ourApproachSection .phaseBox .phaseBoxInner p {
	color: inherit;
	font-size: 0.875rem;
	line-height: 1.25;
	font-weight: 400;
}

@media (max-width:991.98px) {

	.ourApproachSection .phaseBoxesContainer {
		grid-template-columns: 1fr;
		grid-template-areas: "phase1"
			"phase2"
			"phase3"
			"phase4";
	}

	.ourApproachSection .phaseBox {
		min-height: 240px;
		padding: 38px 32px;
	}

	.ourApproachSection .phaseBox::after {
		display: none;
	}

	.ourApproachSection .phaseBox--2::after,
	.ourApproachSection .phaseBox--3::after,
	.ourApproachSection .phaseBox--4::after {
		display: block;
		left: 50%;
		right: auto;
		top: 0;
		bottom: auto;
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.ourApproachSection .phaseBox--2::after {
		background: var(--black);
	}

	.ourApproachSection .phaseBox--3::after {
		background: var(--primaryColor);
	}

	.ourApproachSection .phaseBox--4::after {
		background: var(--black);
	}
}

@media (max-width:575.98px) {
	.ourApproachSection .phaseBox {
		min-height: 200px;
		padding: 30px 24px;
	}
}

.ourApproachGallerySec {
	background: #ffffff;
	padding: 58px 0;
}

.ourApproachGallerySliderWrap {
	position: relative;
}

.ourApproachGalleryCarousel .ourApproachGallerySlide {
	padding: 0 1px;
}

.ourApproachGalleryItem {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.ourApproachGalleryImage {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.ourApproachGalleryOverlay {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 58%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 3rem;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.ourApproachGalleryItem:hover .ourApproachGalleryOverlay {
	opacity: 1;
}

.ourApproachGalleryItem:hover .ourApproachGalleryImage {
	transform: scale(1.04);
}

.ourApproachGallerySec .ourApproachGalleryCarousel .owl-nav {
	margin: 0;
	display: block !important;
}

.ourApproachGallerySec .ourApproachGalleryCarousel .owl-nav.disabled {
	display: block !important;
}

.ourApproachGallerySec .ourApproachGalleryCarousel .owl-nav button.owl-prev,
.ourApproachGallerySec .ourApproachGalleryCarousel .owl-nav button.owl-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 58px;
	height: 58px;
	border-radius: 50%;
	border: 0 !important;
	background: #000 !important;
	color: #fff !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	font-size: 2.2rem !important;
	line-height: 1 !important;
	margin: 0 !important;
	transition: background-color 0.25s ease, transform 0.25s ease;
	z-index: 5;
}

.ourApproachGallerySec .ourApproachGalleryCarousel .owl-nav button.owl-prev {
	left: 24px;
}

.ourApproachGallerySec .ourApproachGalleryCarousel .owl-nav button.owl-next {
	right: 24px;
}

.ourApproachGallerySec .ourApproachGalleryCarousel .owl-nav button:hover {
	background: #1a1a1a !important;
	transform: translateY(-50%) scale(1.03);
}

.ourApproachGallerySec .ourApproachGalleryCarousel .owl-nav button span {
	font-size: 2rem;
	line-height: 1;
	display: inline-block;
}

.ourApproachGallerySec .ourApproachGalleryCarousel .owl-nav button span {
	pointer-events: none;
}

.ourApproachGalleryActions {
	display: flex;
	justify-content: center;
	margin-top: 52px;
}

.ourApproachViewGalleryBtn.btn {
	min-width: 290px;
	padding: 1.25rem 1.875rem;
	border: 0;
	border-radius: 0;
	background: var(--primaryColor);
	color: #fff;
	font-size: 1rem;
	line-height: 1;
	font-weight: 700;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.25s ease;
}

.ourApproachViewGalleryBtn.btn:hover {
	background: #1f7639;
	color: #fff;
}

@media (max-width:991.98px) {
	.ourApproachGallerySec {
		padding: 40px 0 34px;
	}

	.ourApproachGallerySec .ourApproachGalleryCarousel .owl-nav button.owl-prev,
	.ourApproachGallerySec .ourApproachGalleryCarousel .owl-nav button.owl-next {
		width: 52px;
		height: 52px;
		font-size: 1.7rem !important;
	}

	.ourApproachGallerySec .ourApproachGalleryCarousel .owl-nav button.owl-prev {
		left: 10px;
	}

	.ourApproachGallerySec .ourApproachGalleryCarousel .owl-nav button.owl-next {
		right: 10px;
	}

	.ourApproachViewGalleryBtn.btn {
		min-width: 220px;
		height: 62px;
		font-size: 1.3rem;
	}
}

.ourTeamSection {
	background: #f5f5f5;
}

.ourTeamSection .row {
	row-gap: 24px;
}

.teamMemberCard {
	height: 100%;
	background: #efefef;
	border: 1px solid #8d8d8d;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.teamMemberCard:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 30px rgb(0 0 0 / 12%);
}

.teamMemberImageWrapper {
	aspect-ratio: 1 / 1;
	background: #dedede;
	overflow: hidden;
}

.teamMemberImage {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.teamMemberInfo {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.teamMemberText {
	min-width: 0;
}

.teamMemberDesignation {
	margin: 0 0 8px;
	font-size: 1rem;
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #000;
}

.teamMemberName {
	margin: 0;
	font-size: clamp(1.2rem, 1.75vw, 1.5rem);
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #000;
}

.teamMemberOpenBtn {
	width: 54px;
	height: 54px;
	border: 0;
	border-radius: 50%;
	background: var(--primaryColor);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.25s ease, background-color 0.25s ease;
}

.teamMemberOpenBtn:hover {
	background: #1f7639;
	transform: translateY(-2px);
}

.teamMemberOpenBtn:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

.teamMemberOpenBtnIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
}

.teamMemberOpenBtnIcon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.teamMemberModal .modal-dialog {
	max-width: 900px;
}

.teamMemberModal .modal-content {
	border: 0;
	border-radius: 0;
	overflow: hidden;
	box-shadow: 0 20px 60px rgb(0 0 0 / 25%);
}

.teamMemberModal .modal-header {
	background: var(--primaryColor);
	padding: 22px 30px;
	border-bottom: 0;
	border-radius: 0;
	align-items: flex-start;
}

.teamMemberModalHeading {
	padding-right: 18px;
}

.teamMemberModalDesignation {
	margin: 0 0 8px;
	color: #fff;
	font-size: 0.875rem;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

.teamMemberModal .modal-title {
	margin: 0;
	font-size: clamp(1.55rem, 2.4vw, 2rem);
	line-height: 1.1;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
}

.teamMemberModal .btn-close {
	filter: brightness(0) invert(1);
	opacity: 1;
}

.teamMemberModal .modal-body {
	padding: 30px;
	background: #fff;
}

.teamMemberModalBody {
	display: grid;
	grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
	gap: 26px;
	align-items: flex-start;
}

.teamMemberModalImageWrap {
	border: 1px solid #d8d8d8;
	background: #f0f0f0;
}

.teamMemberModalImage {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
}

.teamMemberModalContent {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.teamMemberModalBio>*:last-child {
	margin-bottom: 0;
}

.teamMemberModalBio p {
	font-size: 1rem;
	line-height: 1.6;
	color: #111;
}

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

.teamMemberModalContactList a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid #d8d8d8;
	background: #f7f7f7;
	color: #000;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
}

.teamMemberModalContactList a i {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--primaryColor);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
}

.teamMemberModalContactList a:hover {
	border-color: var(--primaryColor);
	color: #000;
	background: #fff;
}

@media (max-width:991.98px) {
	.teamMemberCard {
		padding: 18px;
	}

	.teamMemberDesignation {
		font-size: 0.9rem;
	}

	.teamMemberName {
		font-size: 1.75rem;
	}

	.teamMemberModal .modal-header,
	.teamMemberModal .modal-body {
		padding: 22px;
	}

	.teamMemberModalBody {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.teamMemberModalImageWrap {
		max-width: 250px;
	}
}

@media (max-width:575.98px) {
	.teamMemberCard {
		padding: 14px;
		gap: 16px;
	}

	.teamMemberOpenBtn {
		width: 48px;
		height: 48px;
	}

	.teamMemberOpenBtnIcon {
		width: 19px;
		height: 19px;
	}

	.teamMemberModal .modal-header,
	.teamMemberModal .modal-body {
		padding: 18px;
	}

	.teamMemberModalDesignation {
		font-size: 0.8rem;
	}

	.teamMemberModalContactList {
		flex-direction: column;
	}

	.teamMemberModalContactList a {
		width: 100%;
	}
}

.contactSection {
	background: #ffffff;
	position: relative;
	z-index: 1;
}

.contactSection .contactSecImg {
	position: absolute;
	inset: 0;
	width: 50%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: -1;
}

.contactSection .headingStyles h3 {
	color: #000000;
}

/* Contact Section Right Column - Form Styles */
.homeContactForm .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.homeContactForm .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.homeContactForm input[type="text"],
.homeContactForm input[type="email"],
.homeContactForm input[type="tel"],
.homeContactForm textarea {
	width: 100%;
	padding: 15px 20px;
	background: rgba(255, 255, 255, 0.25);
	border: none;
	border-radius: 0;
	color: var(--white);
	font-size: 14px;
	font-family: inherit;
}

.homeContactForm input[type="text"]::placeholder,
.homeContactForm input[type="email"]::placeholder,
.homeContactForm input[type="tel"]::placeholder,
.homeContactForm textarea::placeholder {
	color: rgba(255, 255, 255, 0.8);
}

.homeContactForm textarea {
	min-height: 120px;
	resize: vertical;
}

.homeContactForm input[type="submit"] {
	background: var(--primaryColor);
	color: var(--primaryColor);
	border: none;
	padding: 15px 40px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: all 0.3s ease;
	width: 100%;
}

.homeContactForm input[type="submit"]:hover {
	background: var(--primaryShadeColor);
}

/* Hide CF7 default paragraph wrappers spacing */
.homeContactForm .wpcf7-form p {
	margin: 0;
}

.pageMargin {
	margin-top: 129px;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footerSec .footerNavCol a {
	text-decoration: none;
	text-transform: uppercase;
	position: relative;
	overflow: hidden;
	padding-left: 25px;
	z-index: 1;
	color: var(--primaryColor);
	font-size: 16px;
	display: inline-block;
}

.footerSec .footerNavCol a:hover {
	text-decoration: none;
	font-weight: bold;
	color: var(--primaryColor);
}

.footerSec .footerNavCol a::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	z-index: -1;
	height: 2px;
	width: 20px;
	background-color: var(--primaryColor);
	opacity: 0;
	transition: opacity 0.4s ease, width 0.4s ease;
}

.footerSec .footerNavCol a:hover::before {
	opacity: 1;
}

.footerLogo {
	max-width: 280px;
}

.copyright {
	font-size: 13px;
}



/*--------------------------------------------------------------
# Privacy Policy
--------------------------------------------------------------*/

.privacyPolicyText{}
.privacyPolicyText h2{font-size: clamp(1.05rem, 2.5vw, 1.25rem);color: #000;margin-bottom: 0.5em;}
.privacyPolicyText h3{
	font-size: clamp(1.2rem, 2.8vw, 1.15rem);
	margin: 20px 0 10px 0;
	color: #000;
}





/*--------------------------------------------------------------
# Footer End
--------------------------------------------------------------*/

/* Contact Form Styling */
.contactFormBox {
	--contactFieldBg: #edf8f7;
	--contactFieldFocusBg: #e0efed;
	--contactFieldFocusBg: color-mix(in srgb, var(--contactFieldBg) 86%, #b8d0cc 14%);
}

.contactFormBox .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.contactFormBox .wpcf7-form p {
	margin: 0;
}

.contactFormBox .wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 12px;
}

.contactFormBox .wpcf7-form-control:not([type="submit"]) {
	width: 100%;
	padding: 12px 21px;
	border: none;
	border-radius: 12px;
	background: var(--contactFieldBg);
	color: #565e60;
	font-size: 16px;
	line-height: 1.3;
	font-weight: 500;
	box-shadow: none;
	transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
}

.contactFormBox .wpcf7-form-control:not(textarea, [type="submit"]) {
	/* height: 56px; */
}

.contactFormBox textarea.wpcf7-form-control {
	height: 130px;
	min-height: 130px;
	max-height: 130px;
	resize: none;
}

.contactFormBox .wpcf7-form-control::placeholder {
	color: #565e60;
	opacity: 1;
}

.contactFormBox .wpcf7-form-control:focus {
	outline: none;
	border: none;
	background: var(--contactFieldFocusBg);
	color: #565e60;
	box-shadow: 0 0 0 2px rgb(43 150 66 / 12%);
}

.contactFormBox .wpcf7-submit {
	margin-top: 1rem;
	width: 290px;
	/* height: 62px; */
	border: none;
	border-radius: 0;
	background: #2b9642;
	color: #fff;
	font-size: 16px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s ease;
	position: static;
	padding: 15px 20px;
}

.contactFormBox .wpcf7-submit:hover,
.contactFormBox .wpcf7-submit:focus {
	background: #24823a;
	color: #fff;
}

.contactFormBox .wpcf7-spinner {
	margin: 10px 0 0;
}

@media (max-width:767.98px) {
	.contactFormBox .wpcf7-form-control:not([type="submit"]) {
		font-size: 18px;
		padding: 13px 18px;
		border-radius: 10px;
	}

	.contactFormBox .wpcf7-submit {
		width: 100%;
		max-width: 290px;
		margin-top: 20px;
		font-size: 16px;
	}
}

/* Contact Info Box */
.contactInfoBox ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.contactInfoBox ul li {
	margin-bottom: 15px;
}

.cibEmail a,
.cibPhone a {
	font-size: 20px;
	color: var(--white);
	text-decoration: none;
	font-weight: 300;
	display: block;
	margin-bottom: 5px;
}

.cibPhone a {
	font-size: 24px;
}

.contactInfoBox address {
	color: var(--white);
	font-size: 20px;
	font-style: normal;
	line-height: 1.6;
	font-weight: 300;
}

/* Social Icons */
.contactSocialList {
	display: flex;
	padding: 0;
	margin: 20px 0 0;
	list-style: none;
	gap: 15px;
}

.contactSocialList li a {
	width: 35px;
	height: 35px;
	background: transparent;
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.3s ease;
}

.contactSocialList li a:hover {
	background: #000000;
	color: var(--white);
}

/* Footer Styling */
#footer {
	background: var(--primaryColor);
	color: #ffffff;
	font-size: 15px;
}

#footer h4,
#footer h5 {
	color: #ffffff;
	font-family: var(--primaryFont);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 16px;
	margin-bottom: 15px;
	margin-top: 25px;
}

#footer h4:first-child {
	margin-top: 0;
}

/* Footer Navigation */
#footer .menu {
	list-style: none;
	padding: 0;
	margin: 0;
}

#footer .menu li {
	margin-bottom: 10px;
}

#footer .menu li a {
	color: var(--primaryColor);
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-decoration: none;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
}

#footer .menu li a:hover {
	color: var(--primaryColor);
	padding-left: 15px;
	position: relative;
}

#footer .menu li a:hover::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 1px;
	background-color: var(--primaryColor);
}

/* Footer Contact Info */
.footerContact li a {
	color: #6d6e71;
	font-size: 20px;
	text-decoration: none;
	display: block;
}

.footerContact li:first-child a {
	/* Phone Number */
	font-size: 28px;
	color: #6d6e71;
	font-weight: 300;
}

#footer address {
	font-style: normal;
	color: #6d6e71;
	line-height: 1.6;
	font-size: 18px;
	margin-bottom: 20px;
}

/* Footer Social Icons */
.footerSocial {
	gap: 10px !important;
}

.footerSocial li a {
	width: 35px;
	height: 35px;
	background: #555;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.footerSocial li a:hover {
	background: var(--primaryColor);
	color: #fff;
}

/* Footer Copyright Bar */
.footer-bottom {
	border-top: 1px solid var(--primaryColor);
	padding-top: 20px;
	margin-top: 40px;
	text-align: center;
	font-size: 13px;
	color: #6d6e71;
	text-transform: uppercase;
}

.contactText *,
.contactInfoBox *,
.contactSocialList * {
	color: #fff;
}

.copyrightBox {
	border-top: 1px solid var(--primaryColor);
}

.copyrightBox .copyright {
	text-transform: uppercase;
	letter-spacing: 1px;
}

.copyrightBox .copyright p {
	margin: 0;
}

/* Footer - screenshot matched layout */
#footer.siteFooter {
	margin: 0;
	padding: 0;
	background: transparent;
	color: #fff;
}

#footer.siteFooter .siteFooterMain {
	background: var(--primaryColor);
	padding: 86px 0 72px;
}

#footer.siteFooter .siteFooterInner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

#footer.siteFooter .siteFooterLogoLink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 34px;
}

#footer.siteFooter .siteFooterLogo {
	width: 168px;
	max-width: 100%;
	height: auto;
}

#footer.siteFooter .siteFooterNav {
	margin-bottom: 26px;
}

#footer.siteFooter .siteFooterMenu {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 38px;
}

#footer.siteFooter .siteFooterMenu li {
	margin: 0;
}

#footer.siteFooter .siteFooterMenu li a {
	color: #fff;
	font-size: 1rem;
	line-height: 1.2;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

#footer.siteFooter .siteFooterMenu li a:hover,
#footer.siteFooter .siteFooterMenu li.current-menu-item a {
	color: rgb(255 255 255 / 85%);
}

#footer.siteFooter .siteFooterSocial {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
}

#footer.siteFooter .siteFooterSocial li {
	margin: 0;
}

#footer.siteFooter .siteFooterSocial li a {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #dce8dd;
	background: #fff;
	color: var(--primaryColor);
	font-size: 1rem;
	line-height: 1;
}

#footer.siteFooter .siteFooterSocial li a:hover {
	background: rgb(255 255 255 / 88%);
	color: #1f7f3a;
}

#footer.siteFooter .siteFooterContact {
	width: min(100%, 560px);
	margin-top: 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

#footer.siteFooter .footerAddress {
	margin: 0;
	color: rgb(255 255 255 / 82%);
	font-size: 0.98rem;
	line-height: 1.65;
	font-style: normal;
}

#footer.siteFooter .footerEmail {
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 0.95rem;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	transition: color 0.25s ease, opacity 0.25s ease;
}

#footer.siteFooter .footerEmail i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgb(255 255 255 / 82%);
	font-size: 0.85rem;
}

#footer.siteFooter .footerEmail:hover {
	color: #fff;
	opacity: 0.8;
}

#footer.siteFooter .siteFooterBottom {
	background: #000;
	padding: 22px 0;
}

#footer.siteFooter .siteFooterCopyright {
	margin: 0;
	color: #fff;
	font-size: 0.825rem;
	line-height: 1.5;
	font-weight: 500;
	text-align: center;
}

#footer.siteFooter .siteFooterCopyright a {
	color: #fff;
	text-decoration: none;
}

#footer.siteFooter .siteFooterCopyright a:hover {
	color: rgb(255 255 255 / 82%);
}

@media (max-width:991.98px) {
	.contactFormBox .wpcf7-form-control:not([type="submit"]) {
		background-color: #fff;
		border: 1px solid #dddddd;
	}

	#footer.siteFooter .siteFooterMain {
		padding: 68px 0 58px;
	}

	#footer.siteFooter .siteFooterLogo {
		width: 140px;
	}

	#footer.siteFooter .siteFooterMenu {
		gap: 12px 22px;
	}

	#footer.siteFooter .siteFooterMenu li a {
		font-size: 1.05rem;
	}

	#footer.siteFooter .siteFooterCopyright {
		font-size: 0.95rem;
	}

	#footer.siteFooter .siteFooterContact {
		margin-top: 16px;
	}
}

@media (max-width:575.98px) {
	#footer.siteFooter .siteFooterMain {
		padding: 54px 0 44px;
	}

	#footer.siteFooter .siteFooterLogo {
		width: 122px;
	}

	#footer.siteFooter .siteFooterMenu {
		flex-direction: column;
		gap: 10px;
	}

	#footer.siteFooter .siteFooterMenu li a {
		font-size: 1.1rem;
	}

	#footer.siteFooter .siteFooterContact {
		margin-top: 14px;
		gap: 6px;
	}

	#footer.siteFooter .footerAddress {
		font-size: 0.92rem;
		line-height: 1.6;
	}

	#footer.siteFooter .footerEmail {
		gap: 6px;
		font-size: 0.88rem;
	}

	#footer.siteFooter .footerEmail i {
		font-size: 0.78rem;
	}

	#footer.siteFooter .siteFooterCopyright {
		font-size: 0.95rem;
		line-height: 1.6;
	}
}

/* Hide Simplemaps copyright notice on the US map */
#usmap a[href="https://simplemaps.com"] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/*--------------------------------------------------------------
# RESPONSIVE STYLES - Full site responsiveness
# Desktop (1920px) layout is the baseline - untouched.
# Breakpoints: 1365px | 1199px | 991px | 767px | 575px | 399px
--------------------------------------------------------------*/

/* ============================================================
HEADER - responsive adjustments
============================================================ */

/* Tablet & Mobile: compact header top bar */
@media (max-width: 1365.98px) {
	#header {
		background: var(--primaryColor);
	}

	/* Show scrolled logo by default on mobile */
	.headerLogoBox {
		width: 160px !important;
		opacity: 1 !important;
	}

	#header .logo img {
		max-height: 65px;
		width: 140px;
	}

	.headerNavCol {
		justify-content: space-between !important;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Top bar: hide email, shrink padding */
	.navSocialandContactBox {
		padding-right: 8px;
	}

	.navSocialandContactBox>ul {
		gap: 4px 8px;
	}

	/* Hide email text on small screens (show icon only option – keep readable) */
	.navContactPhone a {
		font-size: 0;
		/* Shows icon only, hides text */
	}
}

@media (max-width: 767.98px) {

	/* hide top bar email text completely on phones */
	/* .navSocialandContactBox>ul>li:not(.headerTopBarContactBtn):not(.headerLinkedin) {
	display: none;
} */

	.headerLogoBox {
		width: 130px !important;
	}

	#header .logo img {
		width: 120px;
		max-height: 55px;
	}

	/* Scroll padding for smaller header */
	html {
		scroll-padding-top: 110px;
	}
}

@media (max-width: 575.98px) {
	.headerTopBarContactBtn>a {
		padding: 6px 12px;

	}

	html {
		scroll-padding-top: 100px;
	}
}

/* ============================================================
MAIN BANNER SECTION
============================================================ */

/* Fix banner text inner padding on tablets */
@media (max-width: 1199.98px) {
	.mainBannerTextInner {
		padding: 120px 0 60px 40px;
	}

	.mainBannerTextInner h1 {
		font-size: 2.25rem;
	}

	.mainBannerTextInner p {
		font-size: 1.1rem;
		inline-size: 100%;
	}

	.logoMarkBox::after {
		height: 90px;
	}
}

@media (max-width: 991.98px) {
	.mainBannerTextInner {
		padding: 90px 0 50px 30px;
	}

	.mainBannerTextInner h1 {
		font-size: 2rem;
	}

	.mainBannerTextInner p {
		font-size: 1rem;
	}

	.mainBannerBtnBox {
		flex-wrap: wrap;
		gap: 10px;
	}

	.mainBannerCustomDotsWrap {
		bottom: 30px;
	}

	.mainBannerDot {
		width: 48px;
	}

	.logoMarkBox::after {
		height: 70px;
	}
}

@media (max-width: 767.98px) {
	.mainBannerTextBox>div {
		min-height: calc(100vh - 100px);
		margin-top: 100px;
	}

	.mainBannerTextInner {
		padding: 40px 20px 30px 20px;
	}

	.mainBannerTextInner h1 {
		font-size: 1.75rem;
	}

	.mainBannerTextInner p {
		font-size: 0.95rem;
		inline-size: 100%;
		max-inline-size: 100%;
	}

	.mainBannerSec::before {
		background-size: 280px auto;
		background-position: right bottom 10%;
	}

	/* Make logoMarkBox a rectangle not a square on mobile */
	.logoMarkBox {
		border-left-width: 5px;
		border-top-width: 5px;
		aspect-ratio: unset;
		width: 100%;
		height: 100%;
	}

	.logoMarkBox::before {
		border-bottom-width: 5px;
	}

	.logoMarkBox::after {
		height: 50px;
		border-right-width: 5px;
	}

	.mainBannerAffiliateLogo {
		bottom: 25px;
		right: 20px;
		max-width: 130px;
	}
}

@media (max-width: 575.98px) {
	.mainBannerTextInner {
		padding: 50px 0 30px 16px;
	}

	.mainBannerTextInner h1 {
		font-size: 1.85rem;
	}

/* 	.mainBannerTextInner p {
		font-size: 0.875rem;
	} */

	.mainBannerBtnBox .btn {
		padding: 10px 20px;
		font-size: 0.8rem;
		width: 100%;
		text-align: center;
	}
	.mainBannerCustomDots {	gap: 8px;}
	.mainBannerDot {width: 36px;}
	#lets-talk .headingStyles p{    line-height: 18px;margin-top:12px;}
	}

/* ============================================================
HEADING STYLES - font-size scaling
============================================================ */

@media (max-width: 991.98px) {
	.headingStyles h2 {
		font-size: 2.25rem;
		padding: 40px 0 10px 22px;
	}
}

@media (max-width: 767.98px) {
	.headingStyles h2 {
		font-size: 1.75rem;
		padding: 32px 0 10px 18px;
	}

	.headingStyles h3 {
		font-size: 1.2rem;
	}
}

@media (max-width: 575.98px) {
	.headingStyles h2 {
		font-size: 1.4rem;
		padding: 26px 0 8px 14px;
	}

	.headingStyles h2 .brandCorner {
		border-top-width: 5px;
		border-left-width: 5px;
	}

	.headingStyles h2 .brandCorner::before {
		border-bottom-width: 5px;
	}

	.headingStyles h2 .brandCorner::after {
		height: 22px;
		border-right-width: 5px;
	}
}

/* ============================================================
WHO WE SERVE SECTION
============================================================ */

@media (max-width: 991.98px) {
	.whoWeServeSec>div.container-fluid {
		padding-top: 2rem !important;
		padding-bottom: 2rem !important;
	}

	/* Stack image behind text on tablet - make it full width */
	.whoWeServeTopImg {
		inline-size: 100%;
		block-size: 350px;
		position: relative;
		inset: auto;
		display: block;
		margin-bottom: 1rem;
	}

	/* Left empty column becomes full width on mobile */
	.whoWeServeSec .col-lg-6:first-child {
		display: none;
	}

	.whoWeServeSec .col-lg-6.ps-5 {
		padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
	}
}

@media (max-width: 767.98px) {
	.whoWeServeTopImg {
		block-size: 280px;
	}
}

@media (max-width: 575.98px) {
	.whoWeServeTopImg {
		block-size: 220px;
	}
}

/* ============================================================
TRACK RECORD / COUNTER SECTION
============================================================ */

@media (max-width: 991.98px) {
	.counterBoxContainer {
		grid-template-columns: repeat(2, 1fr);
	}

	.counterBox {
		padding: 2.5rem 0.75rem;
	}

	.counterBox h3 {
		font-size: 2rem;
	}
}

@media (max-width: 575.98px) {
	.counterBoxContainer {
		grid-template-columns: 1fr 1fr;
	}

	.counterBox {
		padding: 1.75rem 0.5rem;
	}

	.counterBox h3 {
		font-size: 1.6rem;
	}

	.counterBox p {
		font-size: 0.75rem;
	}
}

@media (max-width: 399.98px) {
	.counterBoxContainer {
		grid-template-columns: 1fr;
	}
}

/* US Map */
@media (max-width: 991.98px) {
	#usmap {
		/* height: 300px; */
	}
}

@media (max-width: 575.98px) {
	#usmap {
		/* height: 220px; */
	}
}

/* ============================================================
WHY ZEAL SECTION - already has breakpoints, supplement here
============================================================ */

@media (max-width: 767.98px) {
	.whyZealSection .row {
		row-gap: 16px;
	}

	.whyZealBox {
		padding: 40px 24px 30px;
	}

	.whyZealBox h3 {
		font-size: 1.1rem;
	}

	.whyZealBox p {
		font-size: 0.875rem;
	}
}

@media (max-width: 575.98px) {
	.whyZealBox {
		padding: 30px 18px 24px;
		gap: 0.75rem;
	}

	.whyZealBoxIcon {
		width: 48px;
		height: 48px;
	}
}

/* ============================================================
OUR APPROACH SECTION - text column stacking
============================================================ */

@media (max-width: 991.98px) {
	.ourApproachSection .ourApproachTopSec {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}

	/* Stack text and phase boxes vertically */
	.ourApproachSection .col-lg-6.ourApproachTextBox {
		margin-bottom: 2rem;
	}

	.ourApproachTextBox .headingStyles h2 {
		font-size: 2rem;
	}
}

@media (max-width: 767.98px) {
	.ourApproachSection .ourApproachTopSec {
		padding-top: 2.5rem !important;
		padding-bottom: 2.5rem !important;
	}

	.ourApproachTextBox .headingStyles h2 {
		font-size: 1.6rem;
	}
}

@media (max-width: 575.98px) {
	.ourApproachSection .ourApproachTopSec {
		padding-top: 2rem !important;
		padding-bottom: 2rem !important;
	}

	.ourApproachTextBox .headingStyles h2 {
		font-size: 1.35rem;
	}

	.ourApproachGallerySec {
		padding: 30px 0 24px;
	}
}

/* ============================================================
OUR TEAM SECTION - already responsive, supplement here
============================================================ */

@media (max-width: 767.98px) {
	.ourTeamSection {
		padding-top: 2.5rem !important;
		padding-bottom: 2.5rem !important;
	}

	.ourTeamSection .row {
		row-gap: 16px;
	}
}

@media (max-width: 575.98px) {
	.teamMemberCard {
		padding: 12px;
		gap: 14px;
	}

	.teamMemberDesignation {
		font-size: 0.8rem;
	}

	.teamMemberName {
		font-size: 1.1rem;
	}
}

/* ============================================================
CONTACT SECTION
============================================================ */

/* On mobile, remove absolute positioned image and stack vertically */
@media (max-width: 991.98px) {
	.contactSection .contactSecImg {
		position: relative;
		width: 100%;
		height: 300px;
		display: block;
		margin-bottom: 0;
		inset: auto;
	}

	.contactSection .container-fluid {
		padding-top: 0 !important;
	}

	.contactSection .contactFormAndInfo {
		margin-top: 0;
	}

	/* Left empty column: hide */
	.contactSection .col-md-6:first-child {
		display: none;
	}

	/* Right column: full width */
	.contactSection .col-lg-6.zIndex9 {
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
}

@media (max-width: 767.98px) {
	.contactSection .contactSecImg {
		height: 240px;
	}

	.contactFormBox .wpcf7-submit {
		width: 100%;
		max-width: 100%;
	}

	.contactSection .col-lg-6.zIndex9 {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}
}

@media (max-width: 575.98px) {
	.contactSection .contactSecImg {
		height: 200px;
	}

	.contactFormBox .wpcf7-form-control:not([type="submit"]) {
		font-size: 16px;
		padding: 11px 14px;
		border-radius: 8px;
	}

	.contactFormBox textarea.wpcf7-form-control {
		height: 110px;
		min-height: 110px;
		max-height: 110px;
	}
}

/* ============================================================
GENERAL SECTION PADDING - global adjustments
============================================================ */

@media (max-width: 991.98px) {
	.py-lg-10 {
		padding-top: 4rem !important;
		padding-bottom: 4rem !important;
	}

	.py-lg-12 {
		padding-top: 4rem !important;
		padding-bottom: 4rem !important;
	}

	.py-lg-9 {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}
}

@media (max-width: 767.98px) {
	.py-8 {
		padding-top: 2.5rem !important;
		padding-bottom: 2.5rem !important;
	}

	.pb-lg-10,
	.pb-lg-5 {
		padding-bottom: 2.5rem !important;
	}

	/* Tighten gutter on small screens */
	.gx-12 {
		--bs-gutter-x: 1.5rem;
	}

	.gx-8 {
		--bs-gutter-x: 1.5rem;
	}

	.px-sm-5 {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}

@media (max-width: 575.98px) {
	.py-8 {
		padding-top: 2rem !important;
		padding-bottom: 2rem !important;
	}
}

/* ============================================================
SWIPER / BANNER BACKGROUND - ensure full coverage on all devices
============================================================ */

.mainBannerBgCarouselContainer,
.mainBannerBgCarousel,
.mainBannerBgCarousel .swiper-slide,
.mainBannerBgCarouselItem {
	width: 100%;
	height: 100vh;
}

.mainBannerBgCarouselContainer img,
.mainBannerBgCarousel img {
	width: 100%;
	height: 100vh;
	object-fit: cover;
	object-position: center;
}

/* ============================================================
OWL CAROUSEL - Gallery section responsive
============================================================ */

@media (max-width: 575.98px) {

	.ourApproachGallerySec .ourApproachGalleryCarousel .owl-nav button.owl-prev,
	.ourApproachGallerySec .ourApproachGalleryCarousel .owl-nav button.owl-next {
		width: 42px;
		height: 42px;
		font-size: 1.3rem !important;
	}

	.ourApproachGallerySec .ourApproachGalleryCarousel .owl-nav button.owl-prev {
		left: 4px;
	}

	.ourApproachGallerySec .ourApproachGalleryCarousel .owl-nav button.owl-next {
		right: 4px;
	}
}

/* ============================================================
MODALS - ensure modals scroll nicely on mobile
============================================================ */

@media (max-width: 575.98px) {

	.modal-dialog.modal-lg,
	.modal-dialog.modal-dialog-centered.modal-lg {
		margin: 0.5rem;
		max-width: calc(100% - 1rem);
	}

	.teamMemberModal .modal-dialog {
		max-width: calc(100% - 1rem);
	}

	.whyZealModal .modal-body,
	.teamMemberModal .modal-body {
		padding: 14px;
	}
}

/* ============================================================
UTILITY - overflow guard for entire site on mobile
============================================================ */

@media (max-width: 991.98px) {
	#websiteMainWrapper {
		overflow-x: hidden;
	}
}

/*--------------------------------------------------------------
# FIX PASS 2 - Bug fixes & UX improvements
--------------------------------------------------------------*/

/* ============================================================
COUNTER BOXES: Last orphaned box spans full width on 2-col grid
Prevents a lone half-width box sitting awkwardly on the bottom row
============================================================ */

@media (min-width: 400px) and (max-width: 991.98px) {
	.counterBox:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* ============================================================
MAP SECTION: Prevent map from overflowing into the next section
============================================================ */

.trackRecordSection .bg-gray {
	overflow: hidden;
	position: relative;
}

#usmap {
	position: relative;
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
}

/* Constrain simplemaps SVG on mobile */
@media (max-width: 991.98px) {
	#usmap>svg {
		max-width: 100% !important;
		height: auto !important;
		display: block;
	}
}

/* ============================================================
WHO WE SERVE: Image as full bg with white overlay on mobile
(Overrides the earlier "stacked image" approach)
============================================================ */

@media (max-width: 991.98px) {
	.whoWeServeSec>div.container-fluid {
		overflow: hidden;
		position: relative;
		padding-top: 4rem !important;
		padding-bottom: 4rem !important;
	}

	/* Restore image to full absolute coverage */
	.whoWeServeTopImg {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		inline-size: 100% !important;
		block-size: 100% !important;
		object-fit: cover !important;
		object-position: center !important;
		display: block !important;
		margin: 0 !important;
		z-index: 0 !important;
	}

	/* Semi-transparent white overlay on top of image */
	.whoWeServeSec>div.container-fluid::before {
		content: '';
		position: absolute;
		inset: 0;
		background: rgba(255, 255, 255, 0.82);
		z-index: 1;
		pointer-events: none;
	}

	/* Content sits above both image and overlay */
	.whoWeServeSec .container-xl {
		position: relative;
		z-index: 2;
	}

	/* Left empty column stays hidden */
	.whoWeServeSec .col-lg-6:first-child {
		display: none;
	}

	/* Right text column: remove left indent meant for desktop-only layout */
	.whoWeServeSec .col-lg-6.ps-5 {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}

/* ============================================================
CONTACT SECTION: Image as full bg with white overlay on mobile
(Overrides the earlier "stacked image" approach)
============================================================ */

@media (max-width: 991.98px) {
	.contactSection {
		overflow: hidden;
	}

	/* Full-coverage background image */
	.contactSection .contactSecImg {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center !important;
		display: block !important;
		z-index: 0 !important;
	}

	/* Semi-transparent white overlay */
	.contactSection::before {
		content: '';
		position: absolute;
		inset: 0;
		background: rgba(255, 255, 255, 0.85);
		z-index: 1;
		pointer-events: none;
	}

	/* Lift container above the overlay */
	.contactSection .container-fluid {
		position: relative !important;
		z-index: 2;
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}

	/* Hide the empty left placeholder column */
	.contactSection .col-md-6:first-child {
		display: none;
	}

	/* Form column becomes full width */
	.contactSection .col-lg-6.zIndex9 {
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}

/* ============================================================
MOBILE NAVIGATION: Better UX & branding
- Softer overlay (was near-opaque black)
- Branded green panel with clear link separators
- Panel is NOT full-screen on tablet (max-width: 340px)
- Close button well-positioned
============================================================ */

/* Softer, blurred backdrop */
.mobile-nav-active .navbar::before {
	background: rgba(0, 0, 0, 0.55) !important;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* Branded green panel background */
.mobile-nav-active .navbar {
	background: var(--primaryColor) !important;
}

@media (max-width: 1365.98px) {

	/* Constrained panel width - not full screen, especially on tablet */
	.navbar {
		max-width: 320px;
	}

	/* List container fills panel with top padding for the close button */
	.navbar ul {
		background: var(--primaryColor);
		padding: 68px 0 32px;
	}

	/* Nav links - clean white on green */
	.navbar a,
	.navbar a:focus {
		display: flex !important;
		color: rgba(255, 255, 255, 0.9) !important;
		padding: 14px 28px !important;
		font-size: 0.95rem !important;
		font-weight: 700 !important;
		letter-spacing: 0.4px;
		white-space: normal;
		border-bottom: 1px solid rgba(255, 255, 255, 0.13);
	}

	/* Top separator for first item */
	.navbar ul>li:first-child>a {
		border-top: 1px solid rgba(255, 255, 255, 0.13);
	}

	/* Hover / active state */
	.navbar a:hover,
	.navbar li:hover>a,
	.navbar .current-menu-item>a,
	.navbar li.activeMenuItem>a {
		color: #fff !important;
		background-color: rgba(255, 255, 255, 0.15) !important;
	}

	/* Reposition the close (×) button inside the panel */
	.mobile-nav-hide {
		top: 16px !important;
		right: 16px !important;
		color: rgba(255, 255, 255, 0.92) !important;
		font-size: 26px !important;
	}
}

/* Very small phones: allow panel to go nearly full-width */
@media (max-width: 375.98px) {
	.navbar {
		max-width: 100%;
	}
}

/*--------------------------------------------------------------
# FIX PASS 3 - Contact overlay fix + Mobile nav redesign
--------------------------------------------------------------*/

/* ============================================================
CONTACT SECTION: Overlay fix
Root cause: .container-fluid got position:relative + z-index:2,
so the image now lives *inside* container-fluid's stacking context
and sits ABOVE the section-level ::before overlay.
Fix: Apply ::before directly on .container-fluid instead.
============================================================ */

@media (max-width: 991.98px) {

	/* Disable section-level ::before (it was losing the z-index race) */
	.contactSection::before {
		display: none !important;
	}

	/* container-fluid: positioned ancestor, no z-index so it doesn't
	form a new stacking context – children use contactSection's context */
	.contactSection .container-fluid {
		position: relative !important;
		z-index: auto !important;
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}

	/* Image fills the container-fluid (its new containing block) */
	.contactSection .contactSecImg {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center !important;
		display: block !important;
		z-index: 0 !important;
	}

	/* Overlay: z-index 1 within container-fluid → sits ABOVE the image */
	.contactSection .container-fluid::before {
		content: '';
		position: absolute;
		inset: 0;
		background: rgba(255, 255, 255, 0.86);
		z-index: 1;
		pointer-events: none;
	}

	/* Content: z-index 2 → sits ABOVE the overlay */
	.contactSection .container-xl {
		position: relative;
		z-index: 2;
	}
}

/* ============================================================
MOBILE NAVIGATION: Complete redesign – clean, minimal, modern
Dark charcoal side-drawer, uppercase links, green hover.
No blur, no green panel, no divider lines.
============================================================ */

/* 1. Remove the blurred backdrop entirely → solid dark overlay */
.mobile-nav-active .navbar::before {
	background: rgba(0, 0, 0, 0.62) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* 2. Dark charcoal panel */
.mobile-nav-active .navbar {
	background: var(--primaryColor) !important;
}

@media (max-width: 1365.98px) {

	/* Slim side-drawer panel */
	.navbar {
		max-width: 280px;
		box-shadow: -12px 0 60px rgba(0, 0, 0, 0.5);
	}

	/* Nav list: dark background, space for the close button at top */
	.navbar ul {
		background: var(--primaryColor);
		padding: 78px 0 48px;
	}

	/* All nav link styles – clean, well-spaced */
	.navbar a,
	.navbar a:focus {
		display: flex !important;
		align-items: center !important;
		color: rgba(255, 255, 255, 0.58) !important;
		padding: 15px 36px !important;
		font-size: 0.78rem !important;
		font-weight: 700 !important;
		letter-spacing: 2.5px !important;
		text-transform: uppercase !important;
		border: none !important;
		border-top: none !important;
		border-bottom: none !important;
		background: transparent !important;
		transition: color 0.2s ease !important;
		white-space: nowrap;
	}

	/* Hover / active: brand green */
	.navbar a:hover,
	.navbar li:hover>a,
	.navbar .current-menu-item>a,
	.navbar li.activeMenuItem>a {
		color: var(--secondaryColor) !important;
		background: transparent !important;
		padding-left: 36px !important;
	}

	/* Remove top-separator leftover from previous pass */
	.navbar ul>li:first-child>a {
		border-top: none !important;
	}

	/* Close button: minimal outlined circle.
	NOTE: display is intentionally NOT set here so Bootstrap's d-none
	class can properly hide the button when the nav is closed. */
	.mobile-nav-hide {
		position: fixed !important;
		top: 20px !important;
		right: 20px !important;
		color: rgba(255, 255, 255, 0.5) !important;
		font-size: 14px !important;
		line-height: 1 !important;
		width: 34px !important;
		height: 34px !important;
		border: 1px solid rgba(255, 255, 255, 0.22) !important;
		border-radius: 50% !important;
		cursor: pointer;
		transition: color 0.2s ease, border-color 0.2s ease !important;
		z-index: 10000;
	}

	/* Only apply flex-centering when nav is actually open (d-none is removed by JS) */
	.mobile-nav-active .mobile-nav-hide {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.mobile-nav-hide:hover {
		color: rgba(255, 255, 255, 0.9) !important;
		border-color: rgba(255, 255, 255, 0.45) !important;
	}
}